feat(release): Version auf v2.1.0 bumpen — Calculator Upgrade

Alle 3 Manifests, newtab.html, data.js, app.js auf 2.1.0. CHANGELOG-Eintrag mit allen 6 neuen Calculator-Modi. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
feat(calculator): Stationeers Calculator mit Gas/Furnace/Solar/Atmo
2026-04-16 22:21:45 +02:00 · 2026-04-16 22:20:09 +02:00 · 2026-04-16 22:16:19 +02:00 · 2026-04-16 22:12:28 +02:00 · 2026-04-16 22:10:11 +02:00 · 2026-04-16 22:05:51 +02:00
73 changed files with 15785 additions and 925 deletions
@@ -0,0 +1,4 @@
 # Hellion NewTab — Code Owners
 # Alle Änderungen müssen von @JonKazama-Hellion approved werden
 * @JonKazama-Hellion
@@ -0,0 +1,7 @@
 # Hellion NewTab — Support & Funding
 # All tools are free and open-source. Donations are voluntary and go toward server costs.
 ko_fi: hellionmedia
 custom:
  - "https://hellion-media.de"
@@ -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 — creates ZIP packages for Chrome, Firefox and Opera on new tag
 name: Release
 on:
@@ -17,35 +17,42 @@ jobs:
      - name: Checkout
        uses: actions/checkout@v4
-      - name: Version aus Tag extrahieren
+      - name: Extract version from tag
        id: version
        run: echo "tag=${GITHUB_REF#refs/tags/}" >> "$GITHUB_OUTPUT"
-      - name: Chrome/Edge ZIP erstellen (Manifest V3)
+      - name: Create Chrome/Edge ZIP (Manifest V3)
        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/ _locales/ \
-            -x "*.git*" "dist/*" ".github/*"
+            -x "*.git*" "dist/*" ".github/*" "src/js/opera/*"
-      - name: Firefox ZIP erstellen (Manifest V2)
+      - name: Create Firefox ZIP (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/ _locales/ \
-            -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: SHA256 Checksummen erstellen
+      - name: Create Opera/Opera GX ZIP (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/ _locales/ \
            -x "*.git*" "dist/*" ".github/*" "manifest.chrome-backup.json" "manifest.opera.json"
          mv manifest.chrome-backup.json manifest.json
      - name: Generate SHA256 checksums
        run: |
          cd dist
          sha256sum *.zip > checksums-sha256.txt
          cat checksums-sha256.txt
-      - name: GitHub Release erstellen
+      - name: Create GitHub Release
        uses: softprops/action-gh-release@v2
        with:
          name: "Hellion NewTab ${{ steps.version.outputs.tag }}"
@@ -53,15 +60,17 @@ 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.
+            See [README](README.md) for the full installation instructions.
-            ### Checksummen
+            ### Checksums
-            Siehe `checksums-sha256.txt` zur Integritätsprüfung.
+            See `checksums-sha256.txt` to verify file integrity.
          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,7 +14,16 @@ dist/
 *.zip
 *.tar.gz
 node_modules/
 /xpi/
 v2-planning.md
 themes-v2.md
 # Firefox Update-Manifest (wird auf hellion-media.de gehostet)
 updates.json
 # Persönliche Backup-Dateien (nicht ins Repo)
 favorites_*.html
 *_backup*.json
 .mcp.json
 .claude
 .superpowers/
@@ -0,0 +1,234 @@
 # ⬡ Hellion Dashboard — Changelog
 All notable changes per version. Format based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 > Changelog entries can be written in English or German. English preferred for consistency.
 ---
 ## [2.1.0] — 2026-04-16
 ### Added
 - **Calculator Tab-System:** 6 Modi über Tab-Leiste erreichbar (Standard, Scientific, Unit, SAT, FAC, STA)
 - **Scientific-Modus:** Wurzel, Potenz, Pi, Euler, Vorzeichen-Wechsel + Formel-Helfer (Kreis, Pythagoras, Prozent, Temperatur)
 - **Unit-Converter:** 6 Kategorien (Länge, Gewicht, Temperatur, Volumen, Geschwindigkeit, Fläche) mit Live-Konvertierung und Swap
 - **Satisfactory Calculator:** Items/Min, Overclock-Power (Exponent 1.321928), Maschinen-Rechner
 - **Factorio Calculator:** Assembler-Ratios, Belt-Throughput, Maschinen-Rechner mit Belt-Empfehlung
 - **Stationeers Calculator:** Idealgas (PV=nRT), Furnace/Verbrennung, Solar/Batterie-Dimensionierung, Atmosphären-Mixer
 ### Changed
 - Parser um `^` (Potenz, rechts-assoziativ) und `sqrt()` erweitert
 - Calculator-Widget Auto-Resize auf 320×480 für komplexe Modi
 - ~110 neue i18n-Keys (DE + EN)
 ---
 ### v2.0.1 — 16.04.2026
 #### Security
 - **Background URL validation** — Only `blob:` and `data:image/` protocols allowed in CSS `backgroundImage` (prevents CSS injection via manipulated storage)
 - **Import URL validation** — `javascript:`, `data:`, and other unsafe protocols are blocked during JSON import
 - **Immutable import mapping** — Imported boards, bookmarks, and notes are sanitized with explicit field selection and string length limits
 #### Fixed
 - **Widget minimize race condition** — Replaced `setTimeout` with `transitionend` event; `openWidget()` during animation no longer causes display glitch
 - **Notes import mutation** — Import now uses `Notes.init()` instead of directly setting `Notes._notes`
 - **Complete i18n coverage** — 5 header button tooltips and 3 settings button texts now have `data-i18n` attributes (10 new translation keys)
 #### Changed
 - **Widget event system** — `WidgetManager` now dispatches `widget:close`, `widget:minimize`, `widget:open` CustomEvents via `EventTarget`. Calculator, Timer, and ImageRef use `WidgetManager.on()` instead of monkey-patching
 - **Local favicon icons** — Replaced Google Favicons API with local colored letter icons (deterministic hue per title). Zero external network requests, Brave Shields compatible
 - **backdrop-filter fallback** — `@supports not (backdrop-filter)` block with `--bg-solid-fallback` per theme for Brave Shields compatibility
 - **Clock interval cleanup** — `setInterval` ID stored in variable
 ---
 ### v2.0.0 — 22.03.2026
 #### New Features
 - **Internationalization (i18n)** — Full DE/EN language support with runtime switching
 - Language setting in Settings panel: German, English or Auto-detect (browser language)
 - `i18n.js` module with ~220+ string keys, `t(key, vars?)` helper and `data-i18n` HTML attributes
 - `_locales/de/` and `_locales/en/` for manifest-level i18n (`__MSG_extName__`, `__MSG_extDesc__`)
 - `<html lang>` attribute updates dynamically when language changes
 - All modules migrated: dialog, boards, onboarding, notes, calculator, timer, image-ref, data, bookmark-import, storage, settings, widgets, app
 #### Technical
 - New script load order: `storage → state → i18n → dialog → ...`
 - `applyLanguage()` scans DOM for `data-i18n`, `data-i18n-placeholder`, `data-i18n-title`
 - Onboarding slides use i18n keys instead of hardcoded text (rendered at display time)
 - Clock day/month names via i18n keys instead of hardcoded arrays
 - `resolveLang()` helper for DRY language resolution (auto → browser detect)
 ---
 ### v1.10.0 — 22.03.2026
 #### Themes
 - **3 new themes** — Satisfactory (Industrial Desert), Avorion (Deep Void) and Hellion Stealth (Tactical Recon)
 - Now **11 themes** total, each with its own accent colors, overlays and font styles
 - Satisfactory has increased board alpha (0.65) and stronger blur (12px), a deliberate choice for better readability on a visually busy background
 - Avorion uses a radial gradient overlay so the ship in the center of the image stays visible
 - Hellion Stealth is the only theme with a `border-left` hover effect in tactical scanner style
 ---
 ### v1.9.0 — 22.03.2026
 #### New Features
 - **Onboarding reworked** — 7 slides instead of 6, new slide explains the widget toolbar with all widgets
 - **Gaming Starter Board** — Opt-in during onboarding: pre-filled board with links to Satisfactory, Factorio, Avorion, Minecraft and Star Citizen
 - **Settings redesign** — Settings panel slimmed down to 3 sections (Widgets, Data & Help, Danger Zone)
 - **Appearance modal** — Theme picker and all display settings combined in one modal instead of spread across the panel
 - **Fixed about footer** — Developer info, license and links are now permanently visible at the bottom of the settings panel
 - **Project documentation** — `docs/architecture.md`, `docs/widget-schema.md` and `docs/patterns.md` for anyone who wants to fork or contribute
 #### Improvements
 - All labels and descriptions unified in German, no more language mix
 - Dropdown options use theme colors instead of white browser default
 - Firefox update URL for store publishing added to `manifest.firefox.json`
 ---
 ### v1.8.0 — 21.03.2026
 #### New Features
 - **Image Reference Widget** — Drop images as floating reference widgets (max. 3 at once)
 - Canvas API WebP conversion for smaller file sizes, all local in the browser
 - Two-layer storage: metadata persistent, image data session-only (sessionStorage)
 - Load images via drag & drop or file dialog
 - Labels editable with debounced save
 - Feature is off by default, enable via Settings → Widgets
 ---
 ### v1.7.1 — 21.03.2026
 #### Improvements
 - **Timer mute toggle** — Alarm can be muted via icon button without restarting the timer
 - Alarm volume reduced to 7%, 30% was a bit much
 - Mute state is saved and persists on next open
 ---
 ### v1.7.0 — 21.03.2026
 #### New Features
 - **Calculator widget** — Shunting-yard parser (no `eval()`), history of last calculations, keyboard input
 - **Timer/countdown widget** — Saveable presets, Web Audio API alarm, tab title blinks when timer completes
 - **Widget z-index fix** — Widgets now correctly render above the search bar (z-index 100+)
 ---
 ### v1.6.0 — 21.03.2026
 #### New Features
 - **Widget system** — Draggable, resizable floating panels managed by WidgetManager
 - **Notes & checklists** — Multi-instance widgets (max. 5) with text and checklist template, Markdown support, export as `.md`
 - **Notebook sidebar** — All notes at a glance, quick access via toolbar
 - **Widget toolbar** — Floating buttons on the side for quick access to all widgets, position (left/right) configurable in Settings
 - **Sticky note migration** — Old sticky notes are automatically migrated to the new widget system on first launch
 #### Improvements
 - Ko-fi support link added to the about section and `FUNDING.yml`
 ---
 ### v1.5.2 — 21.03.2026
 #### New Features
 - **Custom dialog system** — Native `confirm()` and `alert()` replaced with frosted glass dialogs (`dialog.js`)
 - **Onboarding** — 6-step welcome flow on first launch with explanations for boards, themes, features and a backup reminder
 - **Backup reminder** — Reminds every 7 days to run a JSON export and warns about data loss on browser reset
 - **Theme modal** — Theme picker moved to its own modal with its own header button
 - **Accordion settings** — All settings sections collapsible (About and Danger Zone closed by default)
 #### Improvements
 - Fonts migrated from Google Fonts API to local WOFF2 files (GDPR, ~388 KB saved)
 - `innerHTML` fully replaced with `createElement` and `createElementNS` (XSS protection)
 - SVG icons now via `createElementNS` instead of inline HTML
 - Drag & drop uses CSS classes instead of inline styles (`.drag-ghost`, `.drag-over`, `.dragging-source`)
 - Search bar toggle moved from DATA to BEHAVIOR section
 - Unimplemented "Quick Save" UI element removed
 - Onboarding repeatable via Settings → Help
 #### Opera / Opera GX
 - `manifest.opera.json` added (MV3 with workaround scripts)
 - `src/js/opera/background.js` monitors tabs and redirects away from Opera Speed Dial
 - `src/js/opera/redirect.js` fires as content script at `document_start`
 #### Firefox
 - `manifest.firefox.json` migrated to Manifest V3
 - `browser_specific_settings` with Gecko ID and `data_collection_permissions` added
 #### Build & CI
 - GitHub Actions release now builds 3 ZIP packages (Chrome, Firefox, Opera)
 - Quality check validates all 3 manifests and the Opera folder
 ---
 ### v1.2.0 — 20.03.2026
 - Project structure split into `src/js/`, `src/css/` and `assets/`
 - JS split into 10 modules (storage, state, themes, boards, drag, settings, search, sticky, data, app)
 - Firefox compatibility (`manifest.firefox.json`, Manifest V3)
 - Vivaldi confirmed compatible
 - Theme image paths fixed (settings preview)
 - URL validation on bookmark creation
 - JSON import validates board and bookmark structure
 - XSS protection: `createElement` instead of `innerHTML` for bookmarks
 - Storage quota check with warning at 8 MB+
 - Event delegation for bookmark clicks (performance)
 - Responsive design (tablet 768px, smartphone 480px)
 - Sticky note header collision fixed
 - FileReader error handling for background image upload
 - GitHub Actions: security scan, code quality, release automation
 - 3 themes replaced: Astronaut → Nebula, Cosmic Clock → Crescent, Void Mage → Event Horizon
 - All theme images checked and documented for license compliance
 - LICENSE (CC BY-NC-SA 4.0), SECURITY.md and DISCLAIMER.md added
 ---
 ### v1.1.0 — 20.03.2026
 - 5 new themes (Merchantman, Julia & Jin, SC Sunset, Hellion HUD, Hellion Energy)
 - Search bar (Google, DuckDuckGo, Bing)
 - Sticky note widget
 - JSON export & import
 - Date next to the clock
 - About / imprint in settings
 - Board blur function (privacy mode)
 - Drag & drop migrated to Pointer Events API
 - Opera / Opera GX compatibility
 ---
 ### v1.0.0 — 20.03.2026
 - Initial release
 - Boards & bookmarks with drag & drop
 - 3 themes (Nebula, Crescent, Event Horizon)
 - HTML import (browser bookmarks)
 - Settings panel
 ---
 **Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion
@@ -1,47 +1,81 @@
-# Haftungsausschluss — Hellion NewTab
+# Disclaimer — Hellion NewTab
-## Nutzung auf eigenes Risiko
+## Use at Your Own Risk
-Diese Browser-Extension wird "wie besehen" (as-is) zur Verfügung gestellt, ohne jegliche ausdrückliche oder stillschweigende Gewährleistung, einschließlich, aber nicht beschränkt auf die Gewährleistung der Marktgängigkeit, der Eignung für einen bestimmten Zweck und der Nichtverletzung von Rechten Dritter.
+This browser extension is provided "as is", without warranty of any kind, express
 or implied, including but not limited to the warranties of merchantability, fitness
 for a particular purpose and non-infringement.
-## Keine Garantie
+## No Guarantee
-Der Entwickler übernimmt keine Haftung für:
+The developer assumes no liability for:
- Datenverlust durch fehlerhafte Speicherung, Browser-Updates oder Extension-Deinstallation
+- Data loss caused by storage errors, browser updates or extension uninstallation
- Inkompatibilitäten mit bestimmten Browser-Versionen oder Betriebssystemen
+- Incompatibilities with specific browser versions or operating systems
- Schäden, die durch die Nutzung oder Nichtnutzung dieser Extension entstehen
+- Damages arising from the use or inability to use this extension
- Verfügbarkeit oder Korrektheit von Drittanbieter-Diensten (Google Favicons API)
+- Availability or accuracy of third-party services (Google Favicons API)
-## Datenspeicherung
+## Data Storage
-Alle Daten werden ausschließlich lokal im Browser gespeichert (`chrome.storage.local`). Es erfolgt keine Übertragung an externe Server. Der Entwickler hat keinen Zugriff auf gespeicherte Bookmarks, Einstellungen oder Notizen.
+All data is stored exclusively in the local browser (`chrome.storage.local`).
 No data is transmitted to external servers. The developer has no access to stored
 bookmarks, settings, notes or any other user data.
-**Empfehlung:** Regelmäßig JSON-Backups über die Export-Funktion erstellen.
+**Recommendation:** Create regular JSON backups using the export function in Settings.
-## Drittanbieter-Dienste
+## No Guaranteed Updates
-Diese Extension nutzt folgende externe Dienste:
+This extension is maintained by a single developer in their spare time.
 Continued development and updates are not guaranteed. Features may change,
 projects may pause, and support is provided on a best-effort basis, not as an obligation.
-| Dienst | Zweck | Datenschutz |
+## Third-Party Services
 | Service | Purpose | Privacy |
 |---|---|---|
-| Google Favicons API | Bookmark-Icons laden | Es wird nur die Domain übermittelt, keine vollständige URL |
+| Google Favicons API | Load bookmark icons | Only the domain is transmitted, not the full URL |
 | Google Fonts | Schriftarten (Rajdhani, Inter, Cinzel) | Standardmäßige Google-Fonts-Nutzungsbedingungen |
-## Änderungen
+## Trademark
-Der Entwickler behält sich das Recht vor, diese Extension jederzeit zu ändern, zu aktualisieren oder einzustellen, ohne vorherige Ankündigung.
+The name "Hellion Online Media", the associated logo and all related graphics are
 the property of Florian Wathling / Hellion Online Media and may not be used without
 explicit permission. The CC BY-NC-SA 4.0 license applies to the source code and
 content of this project, not to trademarks or brand assets.
-## Kontakt
+Forks and derivative works must remove or replace all Hellion Online Media branding.
-| | |
+## Legal
-| --- | --- |
+
-| **Entwickler** | Florian Wathling |
+This extension is developed and maintained by Florian Wathling / Hellion Online Media,
-| **Unternehmen** | Hellion Online Media |
+based in Bad Harzburg, Germany. All matters are handled in accordance with German
-| **Web** | [hellion-media.de](https://hellion-media.de) |
+and EU law, including the General Data Protection Regulation (GDPR / DSGVO).
-| **E-Mail** | [kontakt@hellion-media.de](mailto:kontakt@hellion-media.de) |
+
-| **Impressum** | [hellion-media.de/impressum](https://hellion-media.de/impressum) |
+For legal inquiries: [hellion-media.de/impressum](https://hellion-media.de/impressum)
 ## Use of AI
 **Claude:** Code analysis, bug fixing, documentation and proofreading.
 **Me:** Architecture, features and logic are planned, thought through and written by me.
 Who looks for "AI patterns" in the code: clean indentation is the linter,
 okayish variable names are the developer, and the semicolon hiding somewhere
 is what Claude finds. That's how it works.
 I have ADHD and mild dyslexia. Claude helps me stay focused and makes sure
 others can follow the code too. That's exactly what open source is for.
 Source code is open, every decision is traceable.
 ---
-**Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion
+| | |
 |---|---|
 | **Developer** | Florian Wathling |
 | **Company** | Hellion Online Media |
 | **Web** | [hellion-media.de](https://hellion-media.de) |
 | **Imprint** | [hellion-media.de/impressum](https://hellion-media.de/impressum) |
 | **Contact** | [kontakt@hellion-media.de](mailto:kontakt@hellion-media.de) |
 ---
 **Hellion NewTab** — [Hellion Online Media — Florian Wathling](https://hellion-media.de) — JonKazama-Hellion
@@ -1,33 +1,35 @@
-# ⬡ Hellion NewTab v1.2.0
+# ⬡ Hellion Dashboard v2.0.0
-![Version](https://img.shields.io/badge/Version-1.2.0-blue)
+![Version](https://img.shields.io/badge/Version-2.0.0-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)
+![Privacy](https://img.shields.io/badge/Privacy-100%25%20Local-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.**
+**No account. No subscription. No cloud. All data stays 100% local.**
-Ein persönlicher Bookmark-Dashboard als Browser-Extension.
+A personal bookmark dashboard as a browser extension.
-Boards, Drag & Drop, 8 Themes, Suchleiste, Sticky Notes — alles im Browser, alles offline.
+Boards, drag & drop, 11 themes, search bar, widget system with notes, calculator, timer and more.
-Keine externe Datenübertragung, keine Tracker, keine Analytics, keine Werbung.
+Full DE/EN language support with runtime switching. All in the browser, all offline.
 No external data transmission, no trackers, no analytics, no ads.
-Entwickelt von **[Hellion Online Media](https://hellion-media.de)** — JonKazama-Hellion.
+Developed by **[Hellion Online Media — Florian Wathling](https://hellion-media.de)** — JonKazama-Hellion.
 ---
-## Was diese Extension NICHT ist
+## What this extension is NOT
- Kein Cloud-Sync und kein Account-System
+- No cloud sync and no account system
- Keine Datenerfassung oder Telemetrie
+- No data collection or telemetry
- Keine Drittanbieter-Abhängigkeiten oder Build-Tools
+- No third-party dependencies or build tools
- Kein Netzwerkverkehr außer Favicon-Abruf (Google Favicons API)
+- No network traffic except favicon fetching (Google Favicons API)
-## Was diese Extension IST
+## What this extension IS
-Ein lokaler, privater NewTab-Ersatz für alle gängigen Browser.
+A local, private NewTab replacement for all major browsers.
-Bookmarks werden in `chrome.storage.local` gespeichert — nichts verlässt den Browser.
+Bookmarks are stored in `chrome.storage.local`, nothing leaves the browser.
-Was angezeigt wird, ist was gespeichert ist. Keine Magie.
+What you see is what's saved. No magic.
 ---
@@ -35,206 +37,258 @@ Was angezeigt wird, ist was gespeichert ist. Keine Magie.
 ### Boards & Bookmarks
- Boards als Gruppen für Links — per Drag & Drop umsortierbar
+- Boards as groups for links, sortable via drag & drop
- Bookmarks mit Favicon, Titel, optionaler Beschreibung
+- Bookmarks with favicon, title and optional description
- Boards per Blur-Button verstecken (Privat-Modus)
+- Hide boards with the blur button (privacy mode)
- HTML-Import von Browser-Lesezeichen (Chrome, Edge, Firefox)
+- HTML import from browser bookmarks (Chrome, Edge, Firefox)
- JSON Export & Import (Backup & Restore)
+- JSON export & import (backup & restore)
-### Suchleiste
+### Search Bar
- Google, DuckDuckGo oder Bing — per Klick wechselbar
+- Google, DuckDuckGo or Bing, switchable with a click
- Ein/ausblendbar über Settings
+- Toggleable via Settings
-### Sticky Note
+### Widget System
- Schwebendes Notiz-Widget, frei positionierbar
+- **Notes & Checklists** — Floating note widgets with text or checklist template (max. 5)
- Text und Position werden persistent gespeichert
+- **Calculator** — Shunting-yard parser (no `eval()`), history, keyboard input
 - **Timer / Countdown** — Saveable presets, Web Audio API alarm, mute toggle, tab title blinks on completion
 - **Image Reference** — Images as floating reference widgets, Canvas API WebP conversion (max. 3, enable in Settings)
 - **Notebook Sidebar** — All notes at a glance
 - **Widget Toolbar** — Floating buttons for quick access, position (left/right) configurable in Settings
 - All widgets: draggable, resizable, z-index stacking on click
-### 8 Themes
+### 11 Themes
-| Theme | Akzent | Stil |
+| Theme | Accent | Style |
 |---|---|---|
-| 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 |
 | Satisfactory | `#00b4d8` Cyan | Industrial Desert |
 | Avorion | `#2ec4a0` Turquoise | Deep Void |
 | Hellion Stealth | `#5ec2ff` Tech Blue | Tactical Recon |
-### Bild-Credits
+### Image Credits
-| Theme | Quelle | Lizenz |
+| Theme | Source | License |
 |---|---|---|
-| Nebula | [Temel / mrwashingt0n](https://pixabay.com/de/users/mrwashingt0n-15745216/) auf Pixabay | Pixabay License (frei) |
+| Nebula | [Temel / mrwashingt0n](https://pixabay.com/de/users/mrwashingt0n-15745216/) on Pixabay | Pixabay License (free) |
-| Crescent | [Daniil Silantev](https://unsplash.com) auf Unsplash | Unsplash License (frei) |
+| Crescent | [Daniil Silantev](https://unsplash.com) on Unsplash | Unsplash License (free) |
-| Event Horizon | Eigenes Werk — Stillframe von [hellion-initiative.online](https://hellion-initiative.online) | Hellion Online Media |
+| Event Horizon | Own work, still frame from [hellion-initiative.online](https://hellion-initiative.online) | Hellion Online Media |
-| Merchantman | [Roberts Space Industries](https://robertsspaceindustries.com) — Made by the community | RSI Community Content |
+| Merchantman | [Roberts Space Industries](https://robertsspaceindustries.com), made by the community | RSI Community Content |
-| SC Sunset | Screenshot aus Star Citizen von Cloud Imperium Games | Fan Content |
+| SC Sunset | Screenshot from Star Citizen by Cloud Imperium Games | Fan Content |
-| Julia & Jin | Eigenes Werk — Final Fantasy XIV Screenshot, bearbeitet in Photoshop | Hellion Online Media |
+| Julia & Jin | Own work, Final Fantasy XIV screenshot, edited in Photoshop | Hellion Online Media |
-| Hellion HUD | Eigenes Werk — AI-generiert und nachbearbeitet für hellion-media.de | Hellion Online Media |
+| Hellion HUD | Own work, AI-generated and post-processed for hellion-media.de | Hellion Online Media |
-| Hellion Energy | Eigenes Werk — AI-generiert für hellion-media.de | Hellion Online Media |
+| Hellion Energy | Own work, AI-generated for hellion-media.de | Hellion Online Media |
 | Satisfactory | Screenshot from Satisfactory by Coffee Stain Studios | Fan Content |
 | Avorion | Own work, screenshot from Avorion, Hellion Initiative ship | Hellion Online Media |
 | Hellion Stealth | Screenshot from Star Citizen by Cloud Imperium Games | Fan Content |
-### Settings
+### Language Support (i18n)
- Compact Mode — reduziert Abstände für mehr Bookmarks
+- German and English with runtime switching via Settings
- Shorten Titles — kürzt lange Titel auf eine Zeile
+- Auto-detect from browser language, manual override available
- Open in New Tab — Bookmarks in neuem Tab öffnen
+- All UI elements, dialogs, onboarding and widget labels fully translated
- Show Descriptions — Beschreibungen unter Bookmarks anzeigen
+
- Hide Extra Bookmarks — Boards ab 5/10/20 Bookmarks einklappen
+### Onboarding & Dialogs
- Hintergrundbild — URL oder lokaler Upload
+
- Suchleiste ein/ausblenden
+- 7-step welcome flow on first launch with widget explanation and optional gaming starter board
- JSON Export / Import
+- Custom frosted glass dialogs instead of native browser popups
- Danger Zone — Reset aller Daten
+- Backup reminder every 7 days (warns about data loss on browser reset)
 ### Appearance & Settings
 - **Appearance modal** (header button), theme picker, background image and all display options in one modal
 - **Settings panel** (header button), widgets, data & help, danger zone
 - **About footer**, developer info, license and support links permanently visible
 - Compact mode, shorten titles, search bar toggle, open links in new tab, descriptions, hide extra bookmarks
 - JSON export & import (backup & restore)
 - Onboarding repeatable
 - Language setting: German, English or auto-detect
 ---
-## Browser-Kompatibilität
+## Browser Compatibility
 | Browser | Status | Manifest |
 |---|---|---|
-| Chrome | Kompatibel | V3 (`manifest.json`) |
+| Chrome | ✅ Compatible | V3 (`manifest.json`) |
-| Edge | Kompatibel | V3 (`manifest.json`) |
+| Edge | ✅ Compatible | V3 (`manifest.json`) |
-| Brave | Kompatibel | V3 (`manifest.json`) |
+| Brave | ✅ Compatible | V3 (`manifest.json`) |
-| Opera | Kompatibel | V3 (`manifest.json`) |
+| Opera | ✅ Compatible | V3 (`manifest.opera.json`) |
-| Opera GX | Kompatibel | V3 (`manifest.json`) |
+| Opera GX | ✅ Compatible | V3 (`manifest.opera.json`) |
-| Vivaldi | Kompatibel | V3 (`manifest.json`) |
+| Vivaldi | ✅ Compatible | V3 (`manifest.json`) |
-| Firefox | Kompatibel | V2 (`manifest.firefox.json`) |
+| Firefox | ✅ Compatible | V3 (`manifest.firefox.json`) |
-> **Firefox-Hinweis:** Firefox verwendet aktuell Manifest V2. Mozilla arbeitet an MV3-Support —
+> **Firefox note:** From v1.2.0 onwards the extension runs on Manifest V3, identical to Chrome/Edge.
-> sobald stabil, wird die Extension migriert. MV2 wird von Mozilla weiterhin unterstützt.
+> `manifest.firefox.json` remains a separate file for Firefox-specific adjustments.
 ---
 ## Installation
-### Chrome / Edge / Brave / Opera / Opera GX / Vivaldi
+### Chrome / Edge / Brave / Vivaldi
 ```text
-1. Repository als ZIP herunterladen oder git clone
+1. Download the repository as ZIP or git clone
-2. chrome://extensions öffnen (oder edge:// / brave:// / opera://)
+2. Open chrome://extensions (or edge:// / brave://)
-3. Entwicklermodus aktivieren
+3. Enable developer mode
-4. "Entpackte Erweiterung laden" → Ordner auswählen in dem manifest.json liegt
+4. Click "Load unpacked" and select the folder containing manifest.json
-5. Neuen Tab öffnen
+5. Open a new tab
 ```
 ### Opera / Opera GX
 ```bash
 # Use manifest.opera.json as manifest.json:
 copy manifest.opera.json manifest.json   # Windows
 cp manifest.opera.json manifest.json     # Linux/Mac
 ```
 ```text
 1. Open opera://extensions
 2. Enable developer mode
 3. Click "Load unpacked" and select the folder
 4. Open a new tab
 ```
 > **Opera note:** Opera GX prioritizes Speed Dial, the included workaround
 > takes over the new tab page reliably. Details: [src/js/opera/README.md](src/js/opera/README.md)
 ### Firefox
 Firefox benötigt `manifest.json` im Format V2.
 ```bash
-# manifest.json durch Firefox-Version ersetzen:
+# Use manifest.firefox.json as manifest.json:
 copy manifest.firefox.json manifest.json   # Windows
 cp manifest.firefox.json manifest.json     # Linux/Mac
 ```
 ```text
-1. about:debugging#/runtime/this-firefox öffnen
+1. Open about:debugging#/runtime/this-firefox
-2. "Temporäres Add-on laden"
+2. Click "Load Temporary Add-on"
-3. Die manifest.json aus dem Projektordner auswählen
+3. Select the manifest.json from the project folder
 ```
-> **Hinweis:** Temporäre Add-ons werden beim Browser-Neustart entfernt.
+> **Note:** Temporary add-ons are removed on browser restart.
-> Für dauerhafte Installation ist eine signierte `.xpi`-Datei nötig.
+> For permanent installation a signed `.xpi` file is required.
 ---
-## Browser-Bookmarks exportieren & importieren
+## Importing Browser Bookmarks
-| Browser | Export-Pfad |
+| Browser | Export path |
 |---|---|
-| Chrome / Edge | Einstellungen → Lesezeichen → Exportieren |
+| Chrome / Edge | Settings → Bookmarks → Export bookmarks |
-| Firefox | Lesezeichen → Alle Lesezeichen → Importieren und Sichern → Als HTML exportieren |
+| Firefox | Bookmarks → All Bookmarks → Import and Backup → Export Bookmarks to HTML |
-Die exportierte `.html`-Datei über den **Import**-Button in der Extension laden.
+Load the exported `.html` file via the **Import** button in the extension.
 ---
-## Datenschutz
+## Privacy
- Keine externe Datenübertragung (außer Google Favicons API für Icons)
+- No external data transmission (except Google Favicons API for icons)
- Speicherung in `chrome.storage.local` (Chromium) bzw. `browser.storage.local` (Firefox)
+- Storage in `chrome.storage.local` (Chromium) or `browser.storage.local` (Firefox)
- Keine Tracker, keine Analytics, keine Werbung
+- No trackers, no analytics, no ads
- Keine Cookies, keine Session-Daten
+- No cookies, no session data
- Storage-Quota-Prüfung warnt bei 8 MB+ (Limit: 10 MB)
+- Storage quota check warns at 8 MB+ (limit: 10 MB)
- Permissions: `storage`, `bookmarks`
+- Permissions: `storage`, `bookmarks` (all browsers) + `tabs` (Opera / Opera GX only)
 ---
-## Tech-Stack
+## Tech Stack
-| Komponente | Details |
+| Component | Details |
 |---|---|
-| Sprache | JavaScript (Vanilla ES2020, keine Frameworks) |
+| Language | JavaScript (Vanilla ES2020, no frameworks) |
-| Styling | CSS Custom Properties (Theme-System) |
+| Styling | CSS Custom Properties (theme system) |
-| Fonts | Google Fonts (Rajdhani, Inter, Cinzel) |
+| Fonts | Local 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) |
+| Drag & Drop | Pointer Events API (native) |
-| Build | Kein Build-Schritt — direkt lauffähig |
+| Build | No build step, runs directly |
-| CI/CD | GitHub Actions (Security, Quality, Release) |
+| CI/CD | GitHub Actions (security, quality, release) |
 ---
-## Architektur
+## Architecture
 ```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)
-├── newtab.html                     # Haupt-HTML (UI-Struktur, Modals, Settings Panel)
+├── manifest.opera.json             # Opera / Opera GX (MV3 + workaround)
 ├── newtab.html                     # Main HTML (UI structure, modals, settings panel)
 ├── LICENSE                         # CC BY-NC-SA 4.0
-├── SECURITY.md                     # Sicherheitsrichtlinie und Meldeprozess
+├── CHANGELOG.md                    # Version history
-├── DISCLAIMER.md                   # Haftungsausschluss
+├── SECURITY.md                     # Security policy and reporting
 ├── DISCLAIMER.md                   # Disclaimer and legal
 │
 ├── _locales/
 │   ├── de/messages.json            # Manifest-level i18n (German)
 │   └── en/messages.json            # Manifest-level i18n (English)
 │
 ├── src/
 │   ├── js/
-│   │   ├── storage.js              # Storage Abstraction + Quota-Prüfung
+│   │   ├── storage.js              # Storage abstraction + quota check
-│   │   ├── state.js                # Globaler State, Defaults, Hilfsfunktionen
+│   │   ├── state.js                # Global state, defaults, helpers
-│   │   ├── themes.js               # Theme-Definitionen & Anwendungslogik
+│   │   ├── i18n.js                 # Internationalization (DE/EN, ~220+ keys, t() helper)
-│   │   ├── boards.js               # Board/Bookmark Rendering, Event Delegation, Modals
+│   │   ├── dialog.js               # Custom dialog system (HellionDialog.alert/confirm)
-│   │   ├── drag.js                 # Drag & Drop (Pointer Events, Board + Bookmark)
+│   │   ├── themes.js               # Theme definitions & application (11 themes)
-│   │   ├── settings.js             # Settings Panel (Toggles, Theme-Picker, Background)
+│   │   ├── boards.js               # Board/bookmark rendering, event delegation, modals
-│   │   ├── search.js               # Suchleiste (Google, DuckDuckGo, Bing)
+│   │   ├── drag.js                 # Drag & drop (Pointer Events, board + bookmark)
-│   │   ├── sticky.js               # Sticky Note Widget (Drag, Persist, Toggle)
+│   │   ├── settings.js             # Settings panel, appearance modal, accordion
-│   │   ├── data.js                 # JSON Export / Import mit Validierung
+│   │   ├── search.js               # Search bar (Google, DuckDuckGo, Bing)
-│   │   └── app.js                  # Init, Clock, globale Events (Einstiegspunkt)
+│   │   ├── widgets.js              # Widget manager (registry, drag, resize, z-index)
 │   │   ├── notes.js                # Notes & checklists (multi-instance, max. 5)
 │   │   ├── calculator.js           # Calculator (shunting-yard, history)
 │   │   ├── timer.js                # Timer/countdown (presets, Web Audio alarm)
 │   │   ├── image-ref.js            # Image reference widget (Canvas API, sessionStorage)
 │   │   ├── data.js                 # JSON export / import with validation
 │   │   ├── onboarding.js           # 7-step welcome flow + gaming board
 │   │   ├── app.js                  # Init, clock, global events (entry point)
 │   │   └── opera/                  # Opera GX workaround scripts
 │   │       ├── background.js       # Tab management against Speed Dial
 │   │       └── redirect.js         # Content script redirect
 │   └── css/
-│       └── main.css                # Styles + Theme-System + Responsive Breakpoints
+│       └── main.css                # Styles + 11 themes + responsive breakpoints
 │
 ├── assets/
-│   ├── themes/                     # 8 Theme-Hintergrundbilder
+│   ├── fonts/                      # Local fonts (Rajdhani, Inter, Cinzel)
-│   │   ├── bg-nebula.jpg
+│   ├── themes/                     # 11 theme background images (WebP only)
 │   │   ├── 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
 │       └── icon128.png
 │
 ├── docs/
 │   ├── architecture.md             # Project architecture and init sequence
 │   ├── widget-schema.md            # Widget system API and schema reference
 │   ├── patterns.md                 # Code patterns and conventions
 │   └── style-guide.md              # Design system and theme documentation
 │
 └── .github/
    └── workflows/
-        ├── security.yml            # CodeQL-Analyse + Dependency Review
+        ├── security.yml            # CodeQL analysis + dependency review
-        ├── quality.yml             # Struktur, Manifest, Syntax, Versions-Konsistenz
+        ├── quality.yml             # Structure, manifest, syntax, version consistency
-        └── release.yml             # ZIP-Pakete (Chrome + Firefox) + SHA256 Checksummen
+        └── release.yml             # ZIP packages (Chrome + Firefox + Opera) + SHA256
 ```
-### Design-Prinzipien
+### Design Principles
- **Zero Dependencies** — Kein npm, kein Build, kein Framework. Direkt lauffähig
+- **Zero Dependencies** — No npm, no build, no framework. Runs directly
- **Privacy First** — Alle Daten lokal, kein Server-Kontakt
+- **Privacy First** — All data local, no server contact
- **Modular** — 10 JS-Dateien mit klarer Zuständigkeit
+- **Modular** — 16 JS files with clear responsibilities
- **Responsive** — Tablet (768px) und Smartphone (480px) Breakpoints
+- **Responsive** — Tablet (768px) and smartphone (480px) breakpoints
- **Secure** — createElement statt innerHTML, URL-Validierung, Storage-Fehlerbehandlung
+- **Secure** — `createElement` instead of `innerHTML`, URL validation, storage error handling
- **Event Delegation** — Ein Listener pro Board-Liste statt pro Bookmark (Performance)
+- **Event Delegation** — One listener per board list instead of per bookmark (performance)
- **Theme-System** — CSS Custom Properties, 8 Themes, Custom-Background-Support
+- **Theme System** — CSS Custom Properties, 11 themes, custom background support
 ---
@@ -242,126 +296,88 @@ hellion-newtab/
 ### Security Scan (`security.yml`)
- **CodeQL-Analyse** — Statische Sicherheitsanalyse für JavaScript
+- **CodeQL analysis** — Static security analysis for JavaScript
- **Dependency Review** — Prüft Pull Requests auf bekannte Schwachstellen
+- **Dependency review** — Checks pull requests for known vulnerabilities
- **Zeitplan** — Automatisch wöchentlich (Montag 06:00 UTC) + bei Push/PR
+- **Schedule** — Automatically weekly (Monday 06:00 UTC) + on push/PR
 ### Code Quality (`quality.yml`)
- **Projektstruktur** — Alle Pflichtdateien und -ordner vorhanden
+- **Project structure** — All required files and folders present
- **Manifest-Validierung** — JSON-Syntax, Version, Permissions
+- **Manifest validation** — JSON syntax, version, permissions
- **JavaScript Syntax-Check** — `node --check` für alle JS-Dateien
+- **JavaScript syntax check** — `node --check` for all JS files
- **Versions-Konsistenz** — manifest.json, manifest.firefox.json und newtab.html müssen übereinstimmen
+- **Version consistency** — manifest.json, manifest.firefox.json and newtab.html must match
- **Icon-Prüfung** — Alle Extension-Icons vorhanden
+- **Icon check** — All extension icons present
 ### Release (`release.yml`)
- **Trigger** — Bei Git-Tag (`v*`)
+- **Trigger** — On Git tag (`v*`)
- **Pakete** — Chrome-ZIP (MV3) + Firefox-ZIP (MV2)
+- **Packages** — Chrome ZIP + Firefox ZIP + Opera ZIP (all MV3)
- **Checksummen** — SHA256 für alle Artefakte
+- **Checksums** — SHA256 for all artifacts
- **GitHub Release** — Automatisch mit Installationsanleitung
+- **GitHub Release** — Automatic with installation instructions
 ```bash
-# Release erstellen:
+# Create a release:
-git tag v1.2.0
+git tag v2.0.0
-git push origin v1.2.0
+git push origin v2.0.0
-# → GitHub Action erstellt automatisch Release mit ZIP-Dateien
+# → GitHub Action automatically creates release with ZIP files
 ```
 ---
-## Entwicklung
+## Development
 ```bash
-# Repository klonen
+# Clone the repository
 git clone https://github.com/JonKazama-Hellion/Hellion-NewTab.git
-# Extension im Browser laden (siehe Installation)
+# Load the extension in your browser (see Installation)
-# Nach Änderungen: Extension neu laden
+# After changes: reload the extension
-chrome://extensions → Hellion NewTab → Neu laden
+chrome://extensions → Hellion NewTab → Reload
 ```
-Kein Build-Schritt nötig. Dateien ändern, Extension neu laden, fertig.
+No build step needed. Change files, reload extension, done.
 ---
-## Sicherheit
+## Security
-Sicherheitslücken bitte **nicht** über öffentliche Issues melden.
+Please do **not** report security vulnerabilities through public GitHub issues.
-Details zur Meldung, Reaktionszeiten und Sicherheitsarchitektur: [SECURITY.md](SECURITY.md)
+Details on reporting, response times and security architecture: [SECURITY.md](SECURITY.md)
 ---
-## Lizenz & Impressum
+## License & Legal
 Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International
- Kostenlos für private Nutzung
+- Free for private use
- Teilen und Modifikation erlaubt mit Namensnennung
+- Sharing and modification allowed with attribution
- Kommerzielle Nutzung ohne Erlaubnis verboten
+- Commercial use without permission prohibited
-Vollständige Lizenz: [LICENSE](LICENSE) | [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)
+Full license: [LICENSE](LICENSE) | [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)
 | | |
 |---|---|
-| **Entwickler** | Florian Wathling |
+| **Developer** | Florian Wathling |
-| **Unternehmen** | Hellion Online Media |
+| **Company** | Hellion Online Media |
 | **Web** | [hellion-media.de](https://hellion-media.de) |
-| **Impressum** | [hellion-media.de/impressum](https://hellion-media.de/impressum) |
+| **Imprint** | [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
+### Use of AI
-### v1.2.0 — 20.03.2026
+**Claude:** Code analysis, bug fixing, documentation and proofreading.
 **Me:** Architecture, features and logic are planned, thought through and written by me.
- Projektstruktur in `src/js/`, `src/css/`, `assets/` aufgeteilt
+Details: [DISCLAIMER.md](DISCLAIMER.md)
 - 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
 ---
-### Einsatz von AI
+> Full version history: [CHANGELOG.md](CHANGELOG.md)
 AI (Claude Code, Opus 4.6 von Anthropic) wurde als Hilfsmittel eingesetzt — für Fehleridentifikation, Code-Review und Qualitätssicherung. Architektur, Features und alle Entscheidungen sind Eigenleistung.
 ---
 **Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion
@@ -1,76 +1,92 @@
-# Sicherheitsrichtlinie — Hellion NewTab
+# Security Policy — Hellion NewTab
-## Unterstützte Versionen
+## Supported Versions
 | Version | Status |
 |---|---|
-| 1.2.x | Aktiv unterstützt |
+| 1.9.x | Actively supported |
-| < 1.2.0 | Nicht unterstützt |
+| < 1.9.0 | Not supported |
-## Sicherheitslücke melden
+## Reporting a Vulnerability
-Wenn du eine Sicherheitslücke in Hellion NewTab findest, melde sie bitte **nicht** über ein öffentliches GitHub Issue.
+If you find a security vulnerability in Hellion NewTab, please **do not** open a public GitHub issue.
-### Kontakt
+### Contact
-**E-Mail:** [kontakt@hellion-media.de](mailto:kontakt@hellion-media.de?subject=Hellion%20NewTab%20%E2%80%93%20Security%20Report)
+**Email:** [kontakt@hellion-media.de](mailto:kontakt@hellion-media.de?subject=Hellion%20NewTab%20%E2%80%93%20Security%20Report)
-Bitte folgende Informationen angeben:
+Please include the following information:
- Beschreibung der Schwachstelle
+- Description of the vulnerability
- Schritte zur Reproduktion
+- Steps to reproduce
- Betroffene Version(en)
+- Affected version(s)
- Mögliche Auswirkungen (Datenverlust, XSS, etc.)
+- Potential impact (data loss, XSS, etc.)
-### Reaktionszeit
+### Response Times
- **Bestätigung:** Innerhalb von 48 Stunden
+- **Acknowledgement:** Within 48 hours
- **Ersteinschätzung:** Innerhalb von 7 Tagen
+- **Initial assessment:** Within 7 days
- **Fix:** Abhängig von Schweregrad, Ziel innerhalb von 14 Tagen
+- **Fix:** Depends on severity, target within 14 days
-### Schweregrad-Einstufung
+### Severity Levels
-| Stufe | Beschreibung | Beispiel |
+| Level | Description | Example |
 |---|---|---|
-| Kritisch | Datenverlust oder Remote Code Execution | Storage-Manipulation durch Dritte |
+| Critical | Data loss or remote code execution | Storage manipulation by third parties |
-| Hoch | XSS oder ungewollte Datenübertragung | Script-Injection via Bookmark-Import |
+| High | XSS or unintended data transmission | Script injection via bookmark import |
-| Mittel | Umgehung von UI-Schutzmechanismen | Blur-Bypass, Settings-Manipulation |
+| Medium | UI protection bypass | Blur bypass, settings manipulation |
-| Niedrig | Kosmetisch oder theoretisch | Edge-Cases ohne praktische Auswirkung |
+| Low | Cosmetic or theoretical | Edge cases without practical impact |
 ## Sicherheitsarchitektur
 ### Datenverarbeitung
 - **Keine externe Datenübertragung** — Alle Daten bleiben in `chrome.storage.local`
 - **Kein Server-Kontakt** — Außer Google Favicons API für Bookmark-Icons
 - **Keine Cookies, Sessions oder Tokens**
 - **Kein Netzwerkzugriff** außer Favicon-Abruf
 ### Eingabe-Validierung
 - URL-Validierung bei Bookmark-Erstellung (`new URL()`)
 - JSON-Import: Board- und Bookmark-Struktur wird validiert
 - HTML-Sanitierung via `escHtml()` und `createElement` (kein `innerHTML` für User-Daten)
 - Storage-Quota-Prüfung mit Warnung bei 8 MB+
 ### Permissions
 Diese Extension benötigt nur zwei Browser-Permissions:
 | Permission | Grund |
 | --- | --- |
 | `storage` | Boards, Settings und Sticky Note lokal speichern |
 | `bookmarks` | Browser-Lesezeichen für HTML-Import lesen |
 Keine Permissions für: Tabs, History, Web Requests, Downloads, Clipboard oder Host-Zugriff.
 ### CI/CD-Sicherheit
 - **CodeQL** — Automatische statische Analyse bei Push und PR
 - **Dependency Review** — Prüft auf bekannte Schwachstellen in PRs
 - **Wöchentlicher Scan** — Automatischer CodeQL-Lauf jeden Montag
 - **SHA256-Checksummen** — Alle Release-Artefakte werden signiert
 ---
-**Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion
+## Security Architecture
 ### Data Handling
 - **No external data transmission** — all data stays in `chrome.storage.local`
 - **No server contact** — except Google Favicons API for bookmark icons
 - **No cookies, sessions or tokens**
 - **No network access** beyond favicon fetching
 ### Input Validation
 - URL validation on bookmark creation (`new URL()`)
 - JSON import validates board and bookmark structure before applying
 - HTML sanitization via `escHtml()` and `createElement` — no `innerHTML` for user data
 - Storage quota check with warning at 8 MB+
 ### Permissions
 This extension requests the following browser permissions:
 | Permission | Browsers | Reason |
 |---|---|---|
 | `storage` | All | Store boards, settings and widget states locally |
 | `bookmarks` | All | Read browser bookmarks for direct import |
 | `tabs` | Opera / Opera GX only | Required for the Speed Dial workaround — `background.js` monitors tab URLs and redirects via `chrome.tabs.update` |
 No permissions requested for: history, web requests, downloads, clipboard or host access.
 ### CI/CD Security
 - **CodeQL** — Automatic static analysis on every push and PR
 - **Dependency Review** — Checks for known vulnerabilities in PRs
 - **Weekly scan** — Automated CodeQL run every Monday at 06:00 UTC
 - **SHA256 checksums** — All release artifacts are checksummed
 ---
 ## Legal
 Hellion NewTab is developed and maintained by **Florian Wathling / Hellion Online Media**,
 based in Bad Harzburg, Germany.
 All security matters are handled in accordance with **German and EU law**, including
 the General Data Protection Regulation (GDPR / DSGVO). Users in the European Union
 are covered by the same legal framework.
 For legal inquiries: [hellion-media.de/impressum](https://hellion-media.de/impressum)
 ---
 **Hellion Dashboard** — [Hellion Online Media — Florian Wathling](https://hellion-media.de) — JonKazama-Hellion
@@ -0,0 +1,4 @@
 {
  "extName": { "message": "Hellion NewTab" },
  "extDesc": { "message": "Persönliches Bookmark-Dashboard mit Boards, Widgets und 11 Themes. Komplett lokal, keine Cloud, kein Tracking." }
 }
@@ -0,0 +1,4 @@
 {
  "extName": { "message": "Hellion NewTab" },
  "extDesc": { "message": "Personal bookmark dashboard with boards, widgets, and 11 themes. Local-only, no cloud, no tracking." }
 }
@@ -0,0 +1,316 @@
 # Hellion Dashboard — Design & Theme System
 > This document is intentionally written in English. Full German/English i18n support
 > is planned for v2.0 — until then, English keeps the docs accessible to anyone
 > who wants to contribute or fork the project.
 ---
 ## Design Pillars
 | Pillar | Description |
 |---|---|
 | **Immersion** | The interface feels like a HUD floating over the scene, not a foreign object sitting on top of it |
 | **Visual Clarity** | Deliberate use of `blur` separates UI from background and reduces visual noise and cognitive load |
 | **Harmony** | Every theme pulls its colors from the dominant light sources in its background image |
 ---
 ## Background Images — WebP Only
 **All background images must be in WebP format.** This is an intentional architectural
 decision to keep storage quota usage predictable and leave room for future features
 (widgets, image references, etc.) that also compete for the 10 MB `chrome.storage` limit.
 JPG, PNG and other formats are not accepted, so convert before adding a theme.
 ### Recommended Settings
 | Quality | When to use |
 |---|---|
 | 85 | Default, good balance of size and sharpness |
 | 80 | For images over 500 KB |
 | 90 | For images with fine details (stars, in-game UI text) |
 ### Conversion Tools
 **Squoosh** (squoosh.app) — browser-based, no install, nothing gets uploaded to external servers.
 Drag in the image, pick WebP, set quality to 85, download. Done.
 **cwebp** (command line):
 ```bash
 cwebp -q 85 input.jpg -o output.webp
 ```
 ### Current Theme Images
 | File | Status |
 |---|---|
 | `bg-nebula.webp` | ✅ WebP |
 | `bg-crescent.webp` | ✅ WebP |
 | `bg-event-horizon.webp` | ✅ WebP |
 | `bg-merchantman.webp` | ✅ WebP |
 | `bg-julia-jin.webp` | ✅ WebP |
 | `bg-sc-sunset.webp` | ✅ WebP |
 | `bg-hellion-hud.webp` | ✅ WebP |
 | `bg-hellion-energy.webp` | ✅ WebP |
 | `bg-satisfactory.webp` | ✅ WebP |
 | `bg-avorion.webp` | ✅ WebP |
 | `bg-scPolaris.webp` | ✅ WebP |
 ---
 ## Anatomy of a Theme
 Every theme lives in `main.css` as a `[data-theme="name"]` block. Copy this template
 to add a new one:
 ```css
 [data-theme="your-theme-name"] {
  /* 1. ACCENTS — The light source */
  --accent:          #HEXCODE;             /* Main color (neon/light) */
  --accent-dim:      rgba(R, G, B, 0.12);  /* Subtle background tint */
  --accent-glow:     rgba(R, G, B, 0.08);  /* Glow for logo & clock */
  --border-accent:   rgba(R, G, B, 0.25);  /* Focus ring */
  /* 2. BASE — The foundation */
  --bg-primary:      #HEXCODE;             /* Darkest point in the image */
  --bg-board:        rgba(R, G, B, 0.55);  /* Glass effect on boards */
  --border:          rgba(R, G, B, 0.12);  /* Default border */
  /* 3. TEXT — Contrast */
  --text-primary:    #FFFFFF;              /* Readable, slightly tinted */
  --text-secondary:  #A0A0A0;             /* Desaturated, less visual weight */
  --text-muted:      #606060;             /* Barely visible, for hints */
  /* 4. OVERLAY — Vignette */
  --overlay-bg: radial-gradient(
    circle at center,
    transparent 0%,
    var(--bg-primary) 100%
  );
  /* 5. COMPONENT COLORS */
  --header-bg:          rgba(R, G, B, 0.94);
  --board-hover-border: rgba(R, G, B, 0.22);
  --toggle-on-bg:       rgba(R, G, B, 0.20);
  --logo-shadow:        rgba(R, G, B, 0.50);
  /* 6. FONTS */
  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'Inter', sans-serif;
 }
 /* Theme-specific overrides */
 [data-theme="your-theme-name"] .logo        { letter-spacing: 4px; }
 [data-theme="your-theme-name"] .clock       { color: var(--accent); }
 [data-theme="your-theme-name"] .board-title { text-transform: uppercase; }
 [data-theme="your-theme-name"] .board       { backdrop-filter: blur(8px); }
 [data-theme="your-theme-name"] .bm-item:hover { background: var(--accent-dim); }
 ```
 After adding the CSS block, register the theme in `src/js/themes.js` and add a preview entry in the theme picker.
 ---
 ## UI Patterns
 ### Frosted Glass
 Hardware-accelerated blur for readability on complex backgrounds:
 ```css
 backdrop-filter: blur(8px);
 ```
 Creates depth and visual calm behind text and UI elements. Standard value is `8px`. Only increase it when the background image has a lot of fine detail that competes with the UI.
 ### Clock Color
 All themes set `color: var(--accent)` on the clock element. This is a consistent
 detail across the entire theme system. Don't skip it for new themes.
 ```css
 [data-theme="your-theme"] .clock { color: var(--accent); }
 ```
 ### Typography Hierarchy
 | Font | Usage |
 |---|---|
 | **Rajdhani** | Display: clock, logo, titles. Anything that should feel like a system readout |
 | **Inter** | Body: bookmark titles, lists, interactive elements |
 | **Cinzel** | Fantasy: reserved for themes with a majestic or ancient aesthetic (Crescent, Julia & Jin) |
 ### Overlay Strategy
 The overlay gradient determines what stays visible in the background image.
 **Radial (default)** draws attention to the center and darkens edges:
 ```css
 --overlay-bg: radial-gradient(circle at center, transparent 0%, var(--bg-primary) 100%);
 ```
 **Linear** darkens top and bottom and leaves the middle open. Use when the subject
 is horizontally centered and should stay visible (Satisfactory factory floor, SC Sunset horizon):
 ```css
 --overlay-bg: linear-gradient(180deg, rgba(R,G,B,0.85) 0%, rgba(R,G,B,0.15) 50%, rgba(R,G,B,0.90) 100%);
 ```
 Choose based on where the most important part of the image is, not by habit.
 ---
 ## Focus & Accessibility
 For backgrounds with a lot of detail (many small elements, high contrast, busy textures),
 increase board alpha and blur to reduce visual noise. This makes boards easier to scan,
 especially for users with ADHD or attention sensitivities.
 ```css
 --bg-board: rgba(R, G, B, 0.65);   /* Up from default 0.55 */
 backdrop-filter: blur(12px);        /* Up from default 8px */
 ```
 This was applied intentionally to the Satisfactory theme, because the factory floor screenshot
 has a lot going on and needed more visual separation between background and UI.
 ---
 ## All 11 Themes
 | Theme | File | Accent | Mood | Overlay |
 |---|---|---|---|---|
 | Nebula | `bg-nebula.webp` | `#b359ff` Magenta | Chill, Cosmic | Radial |
 | Crescent | `bg-crescent.webp` | `#d4bd8a` Gold | Luxury, Night | Radial |
 | Event Horizon | `bg-event-horizon.webp` | `#9d5cff` Purple | Deep Space, Void | Radial |
 | Merchantman | `bg-merchantman.webp` | `#2eb8b8` Emerald | Industrial, Alien | Radial |
 | Julia & Jin | `bg-julia-jin.webp` | `#7db3ff` Aetherial Blue | FFXIV Night | Linear |
 | SC Sunset | `bg-sc-sunset.webp` | `#ff8c3d` Amber | Emotional, Horizon | Linear |
 | Hellion HUD | `bg-hellion-hud.webp` | `#32ff6a` Neon Green | Tactical, Admin | Radial |
 | Hellion Energy | `bg-hellion-energy.webp` | `#1eff8e` Acid Green | Overdrive, Power | Radial |
 | Satisfactory | `bg-satisfactory.webp` | `#00b4d8` Cyan | Industrial Desert | Linear |
 | Avorion | `bg-avorion.webp` | `#2ec4a0` Turquoise | Deep Void | Radial |
 | Hellion Stealth | `bg-scPolaris.webp` | `#5ec2ff` Tech Blue | Tactical Recon | Radial |
 ### Theme Quirks Worth Knowing
 **Julia & Jin** uses `Cinzel` as display font and a linear gradient. The subjects in
 the screenshot are positioned left of center, so radial would soften them.
 **Satisfactory** has increased board alpha (0.65) and stronger blur (12px), an intentional
 ADHD optimization for a visually busy background.
 **Avorion** uses `letter-spacing: 6px` on the logo for maximum HUD feel.
 **Hellion Stealth** is the only theme with `border-left: 2px solid var(--accent)` on
 `.bm-item:hover`. Every other theme uses background tinting only. This is intentional
 and gives Stealth its tactical scanner character. Don't apply it to other themes.
 ---
 ## Registering a Theme in themes.js
 The `THEMES` object in `src/js/themes.js` is the single source of truth for which
 themes exist and which background image they use. CSS handles all the visual variables —
 `themes.js` only needs the image path.
 ```javascript
 const THEMES = {
  'nebula':           { bg: 'assets/themes/bg-nebula.webp' },
  'crescent':         { bg: 'assets/themes/bg-crescent.webp' },
  'event-horizon':    { bg: 'assets/themes/bg-event-horizon.webp' },
  'merchantman':      { bg: 'assets/themes/bg-merchantman.webp' },
  'julia-jin':        { bg: 'assets/themes/bg-julia-jin.webp' },
  'sc-sunset':        { bg: 'assets/themes/bg-sc-sunset.webp' },
  'hellion-hud':      { bg: 'assets/themes/bg-hellion-hud.webp' },
  'hellion-energy':   { bg: 'assets/themes/bg-hellion-energy.webp' },
  'satisfactory':     { bg: 'assets/themes/bg-satisfactory.webp' },
  'avorion':          { bg: 'assets/themes/bg-avorion.webp' },
  'hellion-stealth':  { bg: 'assets/themes/bg-scPolaris.webp' }
 };
 ```
 To add a new theme, add one line. The key must exactly match the `data-theme`
 attribute in the CSS block. If they don't match, `applyTheme()` will silently
 do nothing and no one will know why.
 ```javascript
 // New theme: key must match [data-theme="your-theme-name"] in main.css
 'your-theme-name': { bg: 'assets/themes/bg-your-theme.webp' }
 ```
 ### How applyTheme() works
 ```javascript
 function applyTheme(themeName, skipBgOverride) {
  const theme = THEMES[themeName];
  if (!theme) return;
  // Sets data-theme on <html> — activates the matching CSS variable block
  document.documentElement.setAttribute('data-theme', themeName);
  // Applies the background image unless a custom background is active
  if (!skipBgOverride) {
    document.getElementById('bgLayer').style.backgroundImage = `url('${theme.bg}')`;
  }
  // Updates the active state in the theme picker UI
  document.querySelectorAll('.theme-card').forEach(card => {
    card.classList.toggle('active', card.dataset.value === themeName);
  });
 }
 ```
 The `skipBgOverride` flag exists for one specific case: when a user has set a custom
 background image, switching themes should still update the CSS variables and the picker
 UI, but not wipe their custom image. Pass `true` to skip the background update.
 ---
 ## Adding a Theme Card to newtab.html
 The theme picker modal lives in `newtab.html` as `#themeOverlay`. Every theme
 needs a card in the `.theme-grid` — without it the theme exists in CSS and JS
 but never shows up in the UI.
 Copy this block and add it inside `.theme-grid`, after the last existing card:
 ```html
 <div class="theme-card" data-value="your-theme-name">
  <img class="theme-card-img" src="assets/themes/bg-your-theme.webp" alt="Your Theme" />
  <span class="theme-card-label">Your Theme</span>
  <span class="theme-card-check">✓</span>
 </div>
 ```
 Three things that must match exactly:
 - `data-value` must match the key in `THEMES` in `themes.js`
 - `data-value` must match the `[data-theme="..."]` attribute in `main.css`
 - `src` must point to the correct WebP file in `assets/themes/`
 The label shown in the picker can be shorter than the full theme name — "HUD" and
 "Energy" are good examples of that. Keep it short enough to fit the card.
 The `active` class is toggled by `applyTheme()` automatically, so don't add it
 manually unless you want that theme to be the default on first load (Nebula currently
 has it as fallback).
 ---
 ## Adding a New Theme — Checklist
 - [ ] Background image converted to WebP (quality 85)
 - [ ] Image added to `assets/themes/`
 - [ ] CSS block added to `src/css/main.css`
 - [ ] Theme registered in `src/js/themes.js` (one line, key + bg path)
 - [ ] Theme card added to `.theme-grid` in `newtab.html` (data-value, img src, label)
 - [ ] Theme added to theme table in `README.md`
 - [ ] Theme added to theme table in this document
 - [ ] Image credit added to Bild-Credits table in `README.md`
 - [ ] `CHANGELOG.md` entry added
 ---
 Developed by **[Hellion Online Media — Florian Wathling](https://hellion-media.de)** — JonKazama-Hellion
@@ -0,0 +1,175 @@
 # Hellion Dashboard — Architecture
 > This document is intentionally written in English. Full German/English i18n support
 > is planned for v2.0 — until then, English keeps the docs accessible to anyone
 > who wants to contribute or fork the project.
 ---
 ## Overview
 Hellion Dashboard is a browser extension (NewTab replacement) built with **Vanilla JavaScript ES2020**, **CSS Custom Properties**, and **zero dependencies**. No build step, no framework, no bundler — files are loaded directly via `<script>` tags.
 **Storage:** `chrome.storage.local` with `localStorage` fallback.
 **Manifest:** V3 across all supported browsers (separate files for Firefox and Opera GX).
 ---
 ## File Structure
 ```
 HOM_NewTab_Project/
 ├── newtab.html              # Single HTML entry point
 ├── manifest.json            # Chrome, Edge, Brave, Vivaldi (MV3)
 ├── manifest.firefox.json    # Firefox (MV3)
 ├── manifest.opera.json      # Opera, Opera GX (MV3 + workarounds)
 ├── src/
 │   ├── css/
 │   │   └── main.css         # All styles, 11 themes, responsive breakpoints
 │   └── js/
 │       ├── storage.js        # Storage abstraction layer
 │       ├── state.js          # Global state, defaults, helpers
 │       ├── i18n.js           # Internationalization (DE/EN, t() helper)
 │       ├── dialog.js         # Custom dialog system (alert, confirm)
 │       ├── themes.js         # Theme definitions & application (11 themes)
 │       ├── drag.js           # Drag & drop (Pointer Events API)
 │       ├── boards.js         # Board/bookmark rendering & events
 │       ├── settings.js       # Settings panel, toggles, theme picker
 │       ├── search.js         # Search bar (Google, DuckDuckGo, Bing)
 │       ├── widgets.js        # Widget manager (registry, drag, resize)
 │       ├── notes.js          # Notes/checklists (multi-instance widgets)
 │       ├── calculator.js     # Calculator widget (single-instance)
 │       ├── timer.js          # Timer/countdown widget (single-instance)
 │       ├── image-ref.js      # Image reference widget (multi-instance)
 │       ├── bookmark-import.js # Browser bookmark import (chrome.bookmarks API)
 │       ├── data.js           # JSON export/import (backup & restore)
 │       ├── onboarding.js     # First-run onboarding flow
 │       └── app.js            # Init, clock, global events (entry point)
 ├── assets/
 │   ├── fonts/                # Local fonts (Rajdhani, Inter, Cinzel)
 │   ├── icons/                # Extension icons (16-512px)
 │   └── themes/               # 11 theme background images
 └── docs/                     # You are here
 ```
 ---
 ## Module Responsibilities
 Each module has exactly one responsibility. Communication happens through global references — no import/export, because this is a browser extension without a bundler.
 | Module | Responsibility |
 |---|---|
 | `storage.js` | The **only** place that touches `chrome.storage` / `localStorage`. Everything else goes through `Store.get()` / `Store.set()`. |
 | `state.js` | Global `boards` and `settings` arrays, default values, `uid()`, `escHtml()`, `getFaviconUrl()`. |
 | `i18n.js` | Internationalization module. `STRINGS` object with ~220+ keys (DE/EN), `t(key, vars?)` helper, `applyLanguage()` DOM scanner, `setLanguage()`, `I18n.init()`. |
 | `dialog.js` | `HellionDialog.alert()` and `HellionDialog.confirm()` — custom styled dialogs that replace native browser popups. |
 | `themes.js` | Applies theme CSS variables. 11 themes, each with its own `[data-theme]` block in `main.css`. |
 | `boards.js` | Renders boards and bookmarks. Event delegation on board containers. |
 | `drag.js` | Board and bookmark reordering via Pointer Events API. |
 | `settings.js` | Settings panel UI, toggle handlers, appearance modal, background upload. |
 | `search.js` | Search bar with engine switching (Google, DuckDuckGo, Bing). |
 | `widgets.js` | Widget manager — creates DOM, handles drag/resize/z-index, provides registry. See [widget-schema.md](widget-schema.md). |
 | `notes.js` | Notes and checklists as widgets. Multi-instance (max 5). Notebook sidebar. Also handles widget toolbar events. |
 | `calculator.js` | Calculator widget. Single-instance. Shunting-yard expression parser — no `eval()`. |
 | `timer.js` | Timer/countdown widget. Single-instance. Presets, Web Audio API alarm, tab-title blink on completion. |
 | `image-ref.js` | Image reference widget. Multi-instance (max 3). Canvas API WebP conversion, sessionStorage for image data — cleared on browser close. |
 | `bookmark-import.js` | Direct browser bookmark import via `chrome.bookmarks.getTree()`. Folder selection modal with duplicate detection. |
 | `data.js` | JSON export/import with validation. Covers boards, notes, calculator history and timer presets. |
 | `onboarding.js` | Multi-slide first-run flow including the gaming starter board opt-in. |
 | `app.js` | Entry point. Calls `init()` on DOMContentLoaded. Clock, global event binding. |
 ---
 ## Init Sequence
 ```
 DOMContentLoaded
  → init()
    → Store.get('boards')          # Load saved boards
    → Store.get('settings')        # Load saved settings
    → applySettings()              # Apply theme, toggles, etc.
    → renderBoards()               # Render all boards
    → startClock()                 # Start clock/date display
    → bindGlobalEvents()           # Header buttons, modals
    → bindSettingsEvents()         # Settings toggles, theme picker
    → initSearch()                 # Search bar
    → migrateSticky()              # Legacy sticky note migration (v1.5.x → v1.6+)
    → Notes.init()                 # Notes + widget toolbar
    → Calculator.init()            # Calculator widget
    → Timer.init()                 # Timer widget
    → ImageRef.init()              # Image reference widget
    → initDataButtons()            # Export/import buttons
    → Onboarding check             # First-run onboarding
 ```
 ---
 ## Script Load Order
 Scripts are loaded in `newtab.html` in dependency order. A module may only reference modules loaded before it — there is no bundler to handle this automatically.
 ```html
 <script src="src/js/storage.js"></script>
 <script src="src/js/state.js"></script>
 <script src="src/js/i18n.js"></script>
 <script src="src/js/dialog.js"></script>
 <script src="src/js/themes.js"></script>
 <script src="src/js/drag.js"></script>
 <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/widgets.js"></script>
 <script src="src/js/notes.js"></script>
 <script src="src/js/calculator.js"></script>
 <script src="src/js/timer.js"></script>
 <script src="src/js/image-ref.js"></script>
 <script src="src/js/bookmark-import.js"></script>
 <script src="src/js/data.js"></script>
 <script src="src/js/onboarding.js"></script>
 <script src="src/js/app.js"></script>
 ```
 ---
 ## Z-Index Hierarchy
 | Layer | z-index | Elements |
 |---|---|---|
 | Background | 0-2 | `#bgLayer`, boards |
 | Search bar | 90 | `.search-bar-wrapper` |
 | Widgets + Toolbar | 100+ | `.widget`, `.widget-toolbar` |
 | Header | 100 | `#header` |
 | Settings panel | 200 | `#settingsPanel` |
 | Dialogs / Modals | 300 | `.hellion-dialog-overlay`, modals |
 | Onboarding | 400 | `#onboardingOverlay` |
 Widgets use an incrementing z-index (`WidgetManager._topZ++`) so the last clicked widget always sits on top.
 ---
 ## Storage Keys
 | Key | Type | Content |
 |---|---|---|
 | `boards` | Array | Board objects with bookmarks |
 | `settings` | Object | User preferences (theme, toggles, etc.) |
 | `widgetStates` | Object | All widget data — see [widget-schema.md](widget-schema.md) |
 | `onboardingDone` | Boolean | Whether the first-run onboarding has been completed |
 | `lastBackupReminder` | Number | Timestamp of the last backup reminder |
 ---
 ## Browser Compatibility
 | Browser | Engine | Manifest |
 |---|---|---|
 | Chrome | Chromium MV3 | `manifest.json` |
 | Edge | Chromium MV3 | `manifest.json` |
 | Brave | Chromium MV3 | `manifest.json` |
 | Vivaldi | Chromium MV3 | `manifest.json` |
 | Opera / GX | Chromium MV3 | `manifest.opera.json` |
 | Firefox | Gecko MV3 | `manifest.firefox.json` |
 Any change that touches manifest fields — version numbers, permissions, content scripts —
 needs to be applied to all three files. The CI quality check will catch it if they drift out of sync.
@@ -0,0 +1,308 @@
 # Hellion Dashboard — Code Patterns & Conventions
 > This document is intentionally written in English. Full German/English i18n support
 > is planned for v2.0 — until then, English keeps the docs accessible to anyone
 > who wants to contribute or fork the project.
 ---
 ## Core Principles
 - **Vanilla JS ES2020** — No frameworks, no TypeScript, no build step
 - **Zero dependencies** — Everything is built from scratch
 - **`createElement` only** — Never use `innerHTML` (XSS prevention)
 - **CSS Custom Properties** — No hardcoded colors, everything through `var(--name)`
 - **Event delegation** — One listener per container, not per element
 - **Storage abstraction** — All storage access through `Store.get()` / `Store.set()`
 ---
 ## Pattern: Storage Abstraction
 **File:** `src/js/storage.js`
 All persistent data goes through the `Store` object. Never access `chrome.storage` or `localStorage` directly — `Store` handles the fallback between the two transparently and provides unified error handling when storage is full.
 ```javascript
 // Reading
 const boards = await Store.get('boards');    // Returns null if not found
 const settings = await Store.get('settings');
 // Writing
 await Store.set('boards', boards);
 await Store.set('settings', settings);
 // Quota check (chrome.storage only, 10 MB limit)
 await Store.checkQuota();
 ```
 ---
 ## Pattern: Event Delegation
 One listener on the container, `closest()` to find the target. Much cleaner than attaching a listener to every single element, and it works automatically for dynamically added content.
 ```javascript
 // GOOD — one listener, handles all bookmarks
 container.addEventListener('click', (e) => {
  const bmItem = e.target.closest('.bm-item');
  if (!bmItem) return;
  const id = bmItem.dataset.id;
  // Handle click
 });
 // BAD — listener per element
 bookmarks.forEach(bm => {
  bm.addEventListener('click', handler);  // Don't do this!
 });
 ```
 Used in `boards.js` (board/bookmark events), `notes.js` (toolbar) and `calculator.js` (button grid).
 ---
 ## Pattern: createElement over innerHTML
 Always build DOM with `document.createElement()`. This is the project's #1 security rule — `innerHTML` with user-provided content is an XSS risk, full stop.
 ```javascript
 // GOOD
 const link = document.createElement('a');
 link.href = bookmark.url;
 link.textContent = bookmark.title;
 container.appendChild(link);
 // BAD — XSS risk!
 container.innerHTML = `<a href="${url}">${title}</a>`;
 ```
 ---
 ## Pattern: Shared Storage Key
 All widget modules share the `widgetStates` storage key. Every module that writes to it must read first and preserve what's already there — otherwise modules silently overwrite each other's data.
 ```javascript
 async save() {
  const data = await Store.get('widgetStates') || {};
  // Write your own data
  data.yourKey = { /* ... */ };
  // Don't replace the whole object — other modules live here too
  await Store.set('widgetStates', data);
 }
 ```
 See [widget-schema.md](widget-schema.md) for the full `widgetStates` structure.
 ---
 ## Pattern: Widget Lifecycle Hooks
 Single-instance widgets (Calculator, Timer) need to react when they're closed, minimized, or reopened. They do this by wrapping `WidgetManager` methods in their `init()`.
 ```javascript
 async init() {
  const prevClose = WidgetManager.close;
  const self = this;
  WidgetManager.close = function(id) {
    prevClose.call(WidgetManager, id);
    if (id === self.WIDGET_ID) {
      self.onClose();
    }
  };
  const prevMinimize = WidgetManager.minimize;
  WidgetManager.minimize = async function(id) {
    await prevMinimize.call(WidgetManager, id);
    if (id === self.WIDGET_ID) {
      self._isOpen = false;
      await self.save();
    }
  };
 }
 ```
 Multiple widgets chain these wraps — Calculator wraps first, Timer wraps Calculator's already-wrapped version, and so on. Always call the previous method (`prevClose.call(...)`) or the chain breaks and other widgets stop responding.
 ---
 ## Pattern: Debounced Save
 For frequent updates like typing in notes or dragging widgets, debouncing avoids hammering storage with a write on every keystroke.
 ```javascript
 _saveTimer: null,
 _debouncedSave() {
  clearTimeout(this._saveTimer);
  this._saveTimer = setTimeout(() => this.save(), 500);
 }
 // Use _debouncedSave() instead of save() for frequent events
 textarea.addEventListener('input', () => {
  noteData.content = textarea.value;
  this._debouncedSave();
 });
 ```
 Used in `notes.js` (text editing) and `image-ref.js` (label editing).
 ---
 ## Pattern: Theme System
 All themes use CSS Custom Properties in `[data-theme="name"]` blocks in `main.css`. There are currently 11 themes.
 ```css
 [data-theme="nebula"] {
  --bg-primary: #0a0e17;
  --bg-board: rgba(15, 20, 35, 0.65);
  --text-primary: #e0e6f0;
  --accent: #7db3ff;
  --border: rgba(125, 179, 255, 0.12);
  /* ... more variables */
 }
 ```
 Never hardcode colors in JS. Let CSS handle it.
 ```javascript
 // GOOD
 element.classList.add('active');
 // BAD — breaks every theme that isn't Nebula
 element.style.color = '#7db3ff';
 ```
 ---
 ## Pattern: Onboarding Slides
 The onboarding system in `onboarding.js` is data-driven. Each slide is a plain object — add a new slide by adding an object to the `slides` array, the `_render()` method handles the rest.
 ```javascript
 {
  hero: '🎮',                    // Large emoji/icon
  title: 'Slide Title',
  text: 'Optional description',
  features: ['Item 1', ...],     // Optional bullet list
  showThemes: true,              // Optional theme grid
  interactive: 'gaming-board'    // Optional custom buttons
 }
 ```
 ---
 ## Pattern: Dialog System
 Custom dialogs replace native `alert()` and `confirm()` everywhere in the project.
 ```javascript
 // Informational
 await HellionDialog.alert('Message text', {
  type: 'info',   // 'info', 'success', 'warning', 'danger'
  title: 'Title'
 });
 // Yes/no
 const ok = await HellionDialog.confirm('Are you sure?', {
  type: 'danger',
  title: 'Delete',
  confirmText: 'Delete',
  cancelText: 'Cancel'
 });
 if (ok) { /* user confirmed */ }
 ```
 ---
 ## Pattern: Pointer Events for Drag
 Widget dragging and board reordering use the Pointer Events API instead of mouse events. The reason: Pointer Events work with both mouse and touch, and `setPointerCapture` keeps the events flowing even if the cursor leaves the element mid-drag.
 ```javascript
 element.addEventListener('pointerdown', (e) => {
  element.setPointerCapture(e.pointerId);
  function onMove(ev) {
    // Update position
  }
  function onUp() {
    element.releasePointerCapture(e.pointerId);
    element.removeEventListener('pointermove', onMove);
    element.removeEventListener('pointerup', onUp);
  }
  element.addEventListener('pointermove', onMove);
  element.addEventListener('pointerup', onUp);
 });
 ```
 ---
 ## Pattern: Canvas API Image Processing
 The image reference widget converts uploaded images to WebP locally in the browser — no external service, no upload, nothing leaves the device.
 ```javascript
 _processFile(file) {
  return new Promise((resolve, reject) => {
    const objectUrl = URL.createObjectURL(file);
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      const webpUrl = canvas.toDataURL('image/webp', 0.85);
      URL.revokeObjectURL(objectUrl);   // Always free the object URL
      resolve(webpUrl);
    };
    img.onerror = () => {
      URL.revokeObjectURL(objectUrl);
      reject(new Error('Image could not be loaded'));
    };
    img.src = objectUrl;
  });
 }
 ```
 Always call `URL.revokeObjectURL()` after the image has loaded — skipping it leaks memory.
 ---
 ## Coding Rules Summary
 | Rule | Rationale |
 |---|---|
 | `createElement` only, never `innerHTML` | XSS prevention |
 | All storage through `Store` | Browser compatibility + unified error handling |
 | CSS variables, no hardcoded colors | Theme support across all 11 themes |
 | Event delegation | Performance, works with dynamic content |
 | `const`/`let`, never `var` | Block scoping |
 | No external dependencies | Extension simplicity |
 | No build step | Direct development, no toolchain to break |
 | JSDoc comments on public functions | Documentation for contributors |
 | URL validation before `href` | Security |
 | Error handling on storage operations | Graceful failure |
 | `URL.revokeObjectURL()` after Canvas ops | Memory management |
 ---
 ## Manifest Synchronization
 Three manifest files must always stay in sync:
 - `manifest.json` — Chrome, Edge, Brave, Vivaldi
 - `manifest.firefox.json` — Firefox
 - `manifest.opera.json` — Opera, Opera GX
 Version numbers, permissions and content script entries need to be updated in all three. The CI quality check will catch drift, but it's cleaner not to let it get there in the first place.
@@ -0,0 +1,955 @@
 # Hellion NewTab v2.0.1 Hardening — Implementation Plan
 > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
 **Goal:** Harden v2.0.0 with security fixes, widget event-system refactoring, i18n completeness, and code quality improvements.
 **Architecture:** Foundation-First — build the new widget event system first, then migrate widget modules onto it, then layer security, i18n, and quality fixes. Each task touches isolated files to avoid merge conflicts.
 **Tech Stack:** Vanilla JavaScript ES2020, CSS Custom Properties, Browser Extension Manifest V3, no build step, no npm.
 **Spec:** `docs/superpowers/specs/2026-04-16-hardening-v2.0.1-design.md`
 **Testing:** No automated test framework. Each task includes manual browser-based verification steps. Load the extension in Chrome (`chrome://extensions` → Developer mode → Load unpacked) after each task.
 ---
 ## File Map
 | File | Tasks | Changes |
 |---|---|---|
 | `src/js/widgets.js` | 1, 2 | Add event system (`_emitter`, `on`, `off`), dispatch events in `close`/`minimize`/`openWidget`, replace `setTimeout` with `transitionend` |
 | `src/js/calculator.js` | 3 | Replace monkey-patching (L692-728) with `WidgetManager.on()` listeners |
 | `src/js/timer.js` | 3 | Replace monkey-patching (L723-758) with `WidgetManager.on()` listeners |
 | `src/js/image-ref.js` | 3 | Replace monkey-patching (L463-498) with `WidgetManager.on()` listeners |
 | `src/js/settings.js` | 4 | Add `isValidBgUrl()`, validate in `applySettings()` and file upload + URL input handlers |
 | `src/js/data.js` | 5 | Add `isSafeUrl()`, immutable mapping, string length limits, Notes import via `Notes.init()` |
 | `src/js/state.js` | 6 | Remove `getFaviconUrl()` |
 | `src/js/boards.js` | 6 | Replace `<img>` favicon with local letter-div |
 | `src/css/main.css` | 6, 7 | Replace `.bm-favicon`/`.bm-favicon-fallback` with `.bm-favicon-local`, add `@supports not` fallback, add `--bg-solid-fallback` per theme |
 | `newtab.html` | 8 | Add 5x `data-i18n-title`, 3x `data-i18n` |
 | `src/js/i18n.js` | 8 | Add 10 new keys to `STRINGS.de` and `STRINGS.en` (8 i18n + 2 bgUrl validation) |
 | `src/js/app.js` | 9 | Store `setInterval` ID in variable |
 | `manifest.json` | 9 | Version bump to 2.0.1 |
 | `manifest.firefox.json` | 9 | Version bump to 2.0.1 |
 | `manifest.opera.json` | 9 | Version bump to 2.0.1 |
 | `CHANGELOG.md` | 9 | Add v2.0.1 entry |
 ---
 ### Task 1: Widget Event-System in WidgetManager
 **Files:**
 - Modify: `src/js/widgets.js:6-10` (add emitter + on/off)
 - Modify: `src/js/widgets.js:143-148` (close — dispatch event)
 - [ ] **Step 1: Add event emitter and on/off methods to WidgetManager**
 In `src/js/widgets.js`, add three new properties after `STORAGE_KEY: 'widgetStates',` (line 10):
 ```javascript
  /** @type {EventTarget} Internes Event-System fuer Widget-Lifecycle */
  _emitter: new EventTarget(),
  /**
   * Event-Listener registrieren
   * @param {string} event - z.B. 'widget:close', 'widget:minimize', 'widget:open'
   * @param {Function} handler
   */
  on(event, handler) {
    this._emitter.addEventListener(event, handler);
  },
  /**
   * Event-Listener entfernen
   * @param {string} event
   * @param {Function} handler
   */
  off(event, handler) {
    this._emitter.removeEventListener(event, handler);
  },
 ```
 - [ ] **Step 2: Dispatch `widget:close` event in close()**
 Replace the `close` method (lines 143-148):
 ```javascript
  close(id) {
    const entry = this._widgets.get(id);
    if (!entry) return;
    entry.el.remove();
    this._widgets.delete(id);
    this._emitter.dispatchEvent(new CustomEvent('widget:close', { detail: { id } }));
  },
 ```
 Note: The event fires AFTER `el.remove()` and `_widgets.delete()`. Listeners must not access the widget entry.
 - [ ] **Step 3: Verify event system loads without errors**
 Reload the extension in the browser. Open the console (`F12`). Verify:
 - No JavaScript errors on load
 - `WidgetManager.on` is a function (type `WidgetManager.on` in console)
 - `WidgetManager._emitter` is an EventTarget
 - [ ] **Step 4: Commit**
 ```bash
 git add src/js/widgets.js
 git commit -m "refactor(widgets): add EventTarget-based lifecycle event system
 Add _emitter, on(), off() to WidgetManager. Dispatch widget:close event
 after close(). Foundation for removing monkey-patching from widget modules."
 ```
 ---
 ### Task 2: Minimize with transitionend + openWidget event dispatch
 **Files:**
 - Modify: `src/js/widgets.js:154-163` (minimize)
 - Modify: `src/js/widgets.js:169-180` (openWidget)
 - [ ] **Step 1: Replace setTimeout with transitionend in minimize()**
 Replace the `minimize` method (lines 154-163):
 ```javascript
  async minimize(id) {
    const entry = this._widgets.get(id);
    if (!entry) return;
    entry.state.open = false;
    entry._minimizing = true;
    entry.el.classList.add('widget-minimized');
    entry.el.addEventListener('transitionend', function onEnd(e) {
      if (e.target !== entry.el) return;
      entry.el.removeEventListener('transitionend', onEnd);
      if (entry._minimizing) {
        entry.el.style.display = 'none';
      }
      entry._minimizing = false;
    });
    this._emitter.dispatchEvent(new CustomEvent('widget:minimize', { detail: { id } }));
    await this.save();
  },
 ```
 - [ ] **Step 2: Add race-condition guard and event dispatch to openWidget()**
 Replace the `openWidget` method (lines 169-180):
 ```javascript
  async openWidget(id) {
    const entry = this._widgets.get(id);
    if (!entry) return;
    entry._minimizing = false;
    entry.state.open = true;
    entry.el.style.display = 'flex';
    requestAnimationFrame(() => {
      entry.el.classList.remove('widget-minimized');
    });
    this.bringToFront(id);
    this._emitter.dispatchEvent(new CustomEvent('widget:open', { detail: { id } }));
    await this.save();
  },
 ```
 Key change: `entry._minimizing = false` cancels any in-flight minimize transition.
 - [ ] **Step 3: Verify minimize/open animation works**
 Reload extension. Test:
 1. Create a note → minimize it → verify it fades out and disappears
 2. Click the note in the widget toolbar to reopen → verify it appears smoothly
 3. Rapid test: minimize → immediately reopen before animation ends → verify no display glitch (the race condition fix)
 - [ ] **Step 4: Commit**
 ```bash
 git add src/js/widgets.js
 git commit -m "fix(widgets): replace setTimeout with transitionend in minimize
 Fixes race condition where openWidget() during the 250ms timeout would
 be overridden. Uses _minimizing flag to cancel in-flight transitions.
 Dispatches widget:minimize and widget:open events."
 ```
 ---
 ### Task 3: Migrate Calculator, Timer, ImageRef to Event Listeners
 **Files:**
 - Modify: `src/js/calculator.js:692-728`
 - Modify: `src/js/timer.js:723-758`
 - Modify: `src/js/image-ref.js:463-498`
 - [ ] **Step 1: Replace monkey-patching in calculator.js**
 Replace lines 692-728 (the three monkey-patching blocks in `init()`) with:
 ```javascript
    // Widget-Lifecycle-Events
    const self = this;
    WidgetManager.on('widget:close', (e) => {
      if (e.detail.id === self.WIDGET_ID) {
        self.onClose();
      }
    });
    WidgetManager.on('widget:minimize', (e) => {
      if (e.detail.id === self.WIDGET_ID) {
        self._isOpen = false;
        self.save();
      }
    });
    WidgetManager.on('widget:open', (e) => {
      if (e.detail.id === self.WIDGET_ID) {
        self._isOpen = true;
        const body = WidgetManager.getBody(self.WIDGET_ID);
        if (body && body.children.length === 0) {
          self.renderBody(body);
        }
        const entry = WidgetManager._widgets.get(self.WIDGET_ID);
        if (entry) self._bindKeyboard(entry.el);
        self.save();
      }
    });
 ```
 - [ ] **Step 2: Replace monkey-patching in timer.js**
 Replace lines 723-758 (the three monkey-patching blocks in `init()`) with:
 ```javascript
    // Widget-Lifecycle-Events
    const self = this;
    WidgetManager.on('widget:close', (e) => {
      if (e.detail.id === self.WIDGET_ID) {
        self.onClose();
      }
    });
    WidgetManager.on('widget:minimize', (e) => {
      if (e.detail.id === self.WIDGET_ID) {
        self._isOpen = false;
        self.save();
      }
    });
    WidgetManager.on('widget:open', (e) => {
      if (e.detail.id === self.WIDGET_ID) {
        self._isOpen = true;
        const body = WidgetManager.getBody(self.WIDGET_ID);
        if (body && body.children.length === 0) {
          self.renderBody(body);
        }
        const entry = WidgetManager._widgets.get(self.WIDGET_ID);
        if (entry) self._bindKeyboard(entry.el);
        self.save();
      }
    });
 ```
 - [ ] **Step 3: Replace monkey-patching in image-ref.js**
 Replace lines 463-498 (the three monkey-patching blocks in `init()`) with:
 ```javascript
    // Widget-Lifecycle-Events
    const self = this;
    WidgetManager.on('widget:close', (e) => {
      const isImage = self._images.some(img => img.id === e.detail.id);
      if (isImage) {
        self.onClose(e.detail.id);
      }
    });
    WidgetManager.on('widget:minimize', (e) => {
      const isImage = self._images.some(img => img.id === e.detail.id);
      if (isImage) {
        self.save();
      }
    });
    WidgetManager.on('widget:open', (e) => {
      const imgData = self._images.find(img => img.id === e.detail.id);
      if (imgData) {
        const body = WidgetManager.getBody(e.detail.id);
        if (body && body.children.length === 0) {
          const dataUrl = self._getSessionImage(e.detail.id);
          self.renderBody(imgData, body, dataUrl);
        }
        self.save();
      }
    });
 ```
 - [ ] **Step 4: Verify all three widget types work**
 Reload extension. Test each widget type:
 1. **Calculator:** Open → type a calculation → minimize → reopen → verify history is still there → close → reopen from toolbar
 2. **Timer:** Open → set a time → minimize → reopen → verify time is preserved → close
 3. **Image-Ref:** Enable in Settings → open image widget → add an image → minimize → reopen → verify image displays → close
 Check console for any errors during all operations.
 - [ ] **Step 5: Commit**
 ```bash
 git add src/js/calculator.js src/js/timer.js src/js/image-ref.js
 git commit -m "refactor(widgets): migrate Calculator, Timer, ImageRef to event listeners
 Replace monkey-patching of WidgetManager.close/minimize/openWidget with
 WidgetManager.on() event listeners. Eliminates 3-deep closure chain."
 ```
 ---
 ### Task 4: Security — URL Validation in settings.js
 **Files:**
 - Modify: `src/js/settings.js:52-95` (applySettings)
 - Modify: `src/js/settings.js:166-175` (btnApplyBg handler)
 - Modify: `src/js/settings.js:181-194` (bgFileInput handler)
 - [ ] **Step 1: Add isValidBgUrl() helper**
 Add this function at the top of `settings.js`, after the `closeThemeModal()` function (after line 24):
 ```javascript
 /**
 * Prueft ob eine Background-URL sicher fuer CSS-Einbettung ist.
 * Erlaubt nur blob: und data:image/ Protokolle (aus File Upload).
 * @param {string} url
 * @returns {boolean}
 */
 function isValidBgUrl(url) {
  return typeof url === 'string' && url.length > 0 &&
    (url.startsWith('blob:') || url.startsWith('data:image/'));
 }
 ```
 - [ ] **Step 2: Add validation in applySettings()**
 Replace lines 92-94:
 ```javascript
  if (settings.bgUrl) {
    document.getElementById('bgLayer').style.backgroundImage = `url('${settings.bgUrl}')`;
  }
 ```
 With:
 ```javascript
  if (settings.bgUrl && isValidBgUrl(settings.bgUrl)) {
    document.getElementById('bgLayer').style.backgroundImage = `url('${settings.bgUrl}')`;
  } else if (settings.bgUrl) {
    // Ungueltige URL im Storage — bereinigen
    settings.bgUrl = '';
  }
 ```
 - [ ] **Step 3: Add validation in the URL-input handler (btnApplyBg)**
 Replace lines 169-175:
 ```javascript
  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').classList.add('hidden');
  });
 ```
 With:
 ```javascript
  document.getElementById('btnApplyBg').addEventListener('click', async () => {
    const url = document.getElementById('bgUrlInput').value.trim();
    if (url && !isValidBgUrl(url)) {
      await HellionDialog.alert(t('settings.bg_invalid_url'), { type: 'danger', title: t('settings.bg_invalid_url.title') });
      return;
    }
    settings.bgUrl = url;
    document.getElementById('bgLayer').style.backgroundImage = url ? `url('${url}')` : '';
    await saveSettings();
    document.getElementById('bgInputRow').classList.add('hidden');
  });
 ```
 - [ ] **Step 4: Verify the file upload handler is already safe**
 Read `settings.js:181-194`. The `FileReader.readAsDataURL(file)` produces a `data:image/...` string, which passes `isValidBgUrl()`. The handler at line 186 sets `settings.bgUrl = ev.target.result` — this is already valid output. No change needed here.
 - [ ] **Step 5: Add i18n keys for the validation error dialog**
 These keys will be added in Task 8 together with all other i18n keys. For now, note that we need:
 - `settings.bg_invalid_url` — "Nur lokale Bilder (Upload) sind als Hintergrund erlaubt." / "Only local images (upload) are allowed as background."
 - `settings.bg_invalid_url.title` — "Ungültige URL" / "Invalid URL"
 - [ ] **Step 6: Verify background upload still works**
 Reload extension. Test:
 1. Open Theme Modal → upload a local image → verify it displays as background
 2. Try entering `javascript:alert(1)` in the URL input → verify it's rejected with a dialog
 3. Reload → verify the uploaded background persists
 - [ ] **Step 7: Commit**
 ```bash
 git add src/js/settings.js
 git commit -m "fix(security): validate background URL before CSS injection
 Add isValidBgUrl() that only allows blob: and data:image/ protocols.
 Applied in applySettings() and the manual URL input handler.
 Prevents CSS injection via manipulated bgUrl storage values."
 ```
 ---
 ### Task 5: Security + Quality — Data Import Hardening
 **Files:**
 - Modify: `src/js/data.js:33-127`
 - [ ] **Step 1: Add isSafeUrl() helper at top of data.js**
 Add after the `initDataButtons` function declaration (after line 6, before the function body):
 Actually, add it inside the function before the event listeners, right after `if (!btnExport || !btnImport) return;` (after line 10):
 ```javascript
  /**
   * Prueft ob eine URL ein sicheres Protokoll hat.
   * Blockiert javascript:, data:, vbscript: etc.
   * @param {string} url
   * @returns {boolean}
   */
  function isSafeUrl(url) {
    try {
      const u = new URL(url);
      return ['http:', 'https:', 'ftp:'].includes(u.protocol);
    } catch {
      return false;
    }
  }
 ```
 - [ ] **Step 2: Replace the mutable board/bookmark filter with immutable mapping**
 Replace lines 41-52 (the `validBoards` filter block):
 ```javascript
      const validBoards = data.boards
        .filter(b => b && typeof b.title === 'string' && Array.isArray(b.bookmarks))
        .map(b => ({
          id: b.id || uid(),
          title: String(b.title).slice(0, 100),
          blurred: !!b.blurred,
          bookmarks: b.bookmarks
            .filter(bm => bm && typeof bm.title === 'string' && isSafeUrl(bm.url))
            .map(bm => ({
              id: bm.id || uid(),
              title: String(bm.title).slice(0, 200),
              url: bm.url,
              desc: String(bm.desc || '').slice(0, 500)
            }))
        }));
 ```
 - [ ] **Step 3: Replace the mutable notes filter with immutable mapping**
 Replace lines 68-71 (the `importNotes` filter):
 ```javascript
        const importNotes = data.notes
          .filter(n => n && n.id && n.template)
          .map(n => ({
            id: n.id,
            template: ['note', 'checklist'].includes(n.template) ? n.template : 'note',
            title: String(n.title || '').slice(0, 200),
            content: String(n.content || '').slice(0, 5000),
            x: typeof n.x === 'number' ? n.x : 120,
            y: typeof n.y === 'number' ? n.y : 80,
            width: typeof n.width === 'number' ? n.width : 280,
            height: typeof n.height === 'number' ? n.height : 220,
            open: n.open !== false,
            checklistItems: Array.isArray(n.checklistItems) ? n.checklistItems : []
          }));
 ```
 - [ ] **Step 4: Replace direct Notes._notes mutation with Notes.init()**
 Replace lines 76-81:
 ```javascript
        if (toImport.length > 0) {
          const merged = [...existingNotes, ...toImport];
          existingWidgets.notes = merged;
          Notes._notes = merged;
          notesImported = toImport.length;
        }
 ```
 With:
 ```javascript
        if (toImport.length > 0) {
          const merged = [...existingNotes, ...toImport];
          existingWidgets.notes = merged;
          notesImported = toImport.length;
        }
 ```
 Then after line 113 (`await Store.set('widgetStates', existingWidgets);`), add:
 ```javascript
      // Widget-Module neu aus Storage laden (kein direkter Zugriff auf Internals)
      if (notesImported > 0) await Notes.init();
      if (calcImported) await Calculator.load();
      if (timerImported) await Timer.load();
 ```
 And remove the direct mutations at lines 93 and 107:
 - Remove: `Calculator._history = existingWidgets.calculator.history;` (line 93)
 - Remove: `Timer._presets = existingWidgets.timer.presets;` (line 107)
 - [ ] **Step 5: Verify import functionality**
 Reload extension. Test:
 1. Export current data as JSON
 2. Edit the exported JSON: add a bookmark with `javascript:alert(1)` URL → import → verify the bad bookmark is silently skipped
 3. Import a normal JSON backup → verify boards, notes, calculator history, timer presets all appear correctly
 4. Verify no console errors
 - [ ] **Step 6: Commit**
 ```bash
 git add src/js/data.js
 git commit -m "fix(security): harden JSON import with URL validation and immutable mapping
 Add isSafeUrl() to block javascript:/data: URLs in imported bookmarks.
 Replace mutable object mutation with immutable .map() and string length limits.
 Use Notes.init()/Calculator.load()/Timer.load() instead of direct _notes/_history
 mutation after import."
 ```
 ---
 ### Task 6: Remove Google Favicons — Local Letter Icons
 **Files:**
 - Modify: `src/js/state.js:36-43` (remove `getFaviconUrl`)
 - Modify: `src/js/boards.js:218-230` (replace favicon rendering)
 - Modify: `src/css/main.css:565-571` (replace CSS classes)
 - [ ] **Step 1: Remove getFaviconUrl() from state.js**
 Delete lines 36-43 in `src/js/state.js`:
 ```javascript
 function getFaviconUrl(url) {
  try {
    const u = new URL(url);
    return `https://www.google.com/s2/favicons?domain=${u.hostname}&sz=16`;
  } catch {
    return '';
  }
 }
 ```
 - [ ] **Step 2: Replace favicon rendering in boards.js**
 Replace lines 218-230 in `src/js/boards.js`:
 ```javascript
  const favicon = document.createElement('img');
  favicon.className = 'bm-favicon';
  favicon.width = 14;
  favicon.height = 14;
  favicon.src = getFaviconUrl(bm.url);
  favicon.addEventListener('error', function() {
    this.classList.add('hidden');
    this.nextElementSibling.classList.remove('hidden');
  });
  const fallback = document.createElement('div');
  fallback.className = 'bm-favicon-fallback hidden';
  fallback.textContent = bm.title.charAt(0).toUpperCase();
 ```
 With:
 ```javascript
  const favicon = document.createElement('div');
  favicon.className = 'bm-favicon-local';
  favicon.textContent = bm.title.charAt(0).toUpperCase();
  const hue = (bm.title.charCodeAt(0) * 137) % 360;
  favicon.style.backgroundColor = `hsl(${hue}, 45%, 35%)`;
 ```
 Also update the `appendChild` calls below. The old code appends both `favicon` and `fallback`:
 Find the line that appends the fallback (should be near line 243-244):
 ```javascript
  li.append(favicon, fallback, textDiv, deleteBtn);
 ```
 Replace with:
 ```javascript
  li.append(favicon, textDiv, deleteBtn);
 ```
 - [ ] **Step 3: Replace CSS classes in main.css**
 Replace lines 565-571:
 ```css
 .bm-favicon { width: 14px; height: 14px; flex-shrink: 0; border-radius: 2px; opacity: 0.85; }
 .bm-favicon-fallback {
  width: 14px; height: 14px; flex-shrink: 0;
  background: var(--accent-dim); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: var(--accent);
 }
 ```
 With:
 ```css
 .bm-favicon-local {
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600;
  color: #fff;
  line-height: 1;
 }
 ```
 - [ ] **Step 4: Verify favicons display correctly**
 Reload extension. Check:
 1. All bookmarks show a colored letter icon
 2. Different bookmark titles produce different colors
 3. The icons are aligned and properly sized in all themes
 4. No network requests to google.com in the Network tab (F12 → Network)
 5. No console errors about `getFaviconUrl`
 - [ ] **Step 5: Commit**
 ```bash
 git add src/js/state.js src/js/boards.js src/css/main.css
 git commit -m "feat(privacy): replace Google Favicons with local letter icons
 Remove getFaviconUrl() and all external network requests. Bookmarks now
 show a colored letter icon with deterministic hue based on title.
 Eliminates privacy leak and Brave Shields compatibility issues."
 ```
 ---
 ### Task 7: backdrop-filter Fallback for Brave Shields
 **Files:**
 - Modify: `src/css/main.css` (add `--bg-solid-fallback` per theme + `@supports not` block)
 - [ ] **Step 1: Add --bg-solid-fallback to each theme**
 Add the variable to each theme's `[data-theme]` block. The value is an opaque version of `--bg-board`:
 | Theme | Line | `--bg-solid-fallback` value |
 |---|---|---|
 | nebula | ~82 | `#0a060e` |
 | crescent | ~108 | `#0c0b08` |
 | event-horizon | ~137 | `#06040f` |
 | merchantman | ~163 | `#040d0d` |
 | julia-jin | ~189 | `#080c12` |
 | sc-sunset | ~216 | `#0e0808` |
 | hellion-hud | ~245 | `#04080c` |
 | hellion-energy | ~278 | `#040a08` |
 | satisfactory | ~310 | `#060a0c` |
 | avorion | ~341 | `#040c0a` |
 | hellion-stealth | ~371 | `#060a0e` |
 Add `--bg-solid-fallback: <value>;` as the last variable in each theme block.
 - [ ] **Step 2: Add @supports not block at the end of the general layout section**
 Add after the existing board/widget styles, before the theme-specific sections (around line 75, before the first `[data-theme]` block):
 ```css
 /* Fallback fuer Browser die backdrop-filter blockieren (z.B. Brave Shields) */
@supports not (backdrop-filter: blur(1px)) {
  .board,
  .widget,
  .settings-panel,
  .dialog-box,
  .theme-modal,
  .search-bar {
    background-color: var(--bg-solid-fallback, var(--bg-primary));
  }
 }
 ```
 - [ ] **Step 3: Verify fallback works**
 Test in Brave with Shields set to aggressive. Or test by temporarily adding this CSS rule:
 ```css
 .board { backdrop-filter: none !important; }
 ```
 Verify that boards still have a visible background (opaque, not transparent).
 - [ ] **Step 4: Commit**
 ```bash
 git add src/css/main.css
 git commit -m "fix(compat): add backdrop-filter fallback for Brave Shields
 Add --bg-solid-fallback CSS variable to all 11 themes and a
@supports not (backdrop-filter) block. UI remains usable when
 Brave Shields or strict fingerprinting settings block backdrop-filter."
 ```
 ---
 ### Task 8: Complete i18n Coverage
 **Files:**
 - Modify: `newtab.html:26-42` (add `data-i18n-title` to 5 header buttons)
 - Modify: `newtab.html:198, 215, 374` (add `data-i18n` to 3 setting buttons)
 - Modify: `src/js/i18n.js` (add 10 new keys — 8 from spec + 2 from Task 4)
 - [ ] **Step 1: Add data-i18n-title to header buttons in newtab.html**
 Line 26 — change:
 ```html
 <button class="btn-icon" id="btnImport" title="Bookmarks importieren (HTML)">
 ```
 To:
 ```html
 <button class="btn-icon" id="btnImport" title="Bookmarks importieren (HTML)" data-i18n-title="header.import_title">
 ```
 Line 30 — change:
 ```html
 <button class="btn-icon" id="btnAddBoard" title="Neues Board hinzufügen">
 ```
 To:
 ```html
 <button class="btn-icon" id="btnAddBoard" title="Neues Board hinzufügen" data-i18n-title="header.board_title">
 ```
 Line 34 — change:
 ```html
 <button class="btn-icon" id="btnNote" title="Schnellnotiz">
 ```
 To:
 ```html
 <button class="btn-icon" id="btnNote" title="Schnellnotiz" data-i18n-title="header.note_title">
 ```
 Line 38 — change:
 ```html
 <button class="btn-icon" id="btnTheme" title="Darstellung & Theme">
 ```
 To:
 ```html
 <button class="btn-icon" id="btnTheme" title="Darstellung & Theme" data-i18n-title="header.theme_title">
 ```
 Line 42 — change:
 ```html
 <button class="btn-icon" id="btnSettings" title="Einstellungen">
 ```
 To:
 ```html
 <button class="btn-icon" id="btnSettings" title="Einstellungen" data-i18n-title="header.settings_title">
 ```
 - [ ] **Step 2: Add data-i18n to settings buttons in newtab.html**
 Line 198 — change:
 ```html
 <button class="btn-small" id="btnRestartOnboarding">Start</button>
 ```
 To:
 ```html
 <button class="btn-small" id="btnRestartOnboarding" data-i18n="settings.onboarding_btn">Start</button>
 ```
 Line 215 — change:
 ```html
 <button class="btn-danger" id="btnResetAll">Reset</button>
 ```
 To:
 ```html
 <button class="btn-danger" id="btnResetAll" data-i18n="settings.reset_btn">Reset</button>
 ```
 Line 374 — change:
 ```html
 <button class="btn-small" id="btnBgFile">Upload</button>
 ```
 To:
 ```html
 <button class="btn-small" id="btnBgFile" data-i18n="settings.bg_upload_btn">Upload</button>
 ```
 - [ ] **Step 3: Add new keys to STRINGS.de in i18n.js**
 Add these keys to the `STRINGS.de` object, in the appropriate sections:
 In the Header section:
 ```javascript
    'header.import_title':       'Bookmarks importieren (HTML)',
    'header.board_title':        'Neues Board hinzufügen',
    'header.note_title':         'Schnellnotiz',
    'header.theme_title':        'Darstellung & Theme',
    'header.settings_title':     'Einstellungen',
 ```
 In the Settings section:
 ```javascript
    'settings.onboarding_btn':   'Start',
    'settings.reset_btn':        'Reset',
    'settings.bg_upload_btn':    'Upload',
    'settings.bg_invalid_url':   'Nur lokale Bilder (Upload) sind als Hintergrund erlaubt.',
    'settings.bg_invalid_url.title': 'Ungültige URL',
 ```
 - [ ] **Step 4: Add new keys to STRINGS.en in i18n.js**
 Add the matching English keys to `STRINGS.en`:
 In the Header section:
 ```javascript
    'header.import_title':       'Import bookmarks (HTML)',
    'header.board_title':        'Add new board',
    'header.note_title':         'Quick note',
    'header.theme_title':        'Appearance & Theme',
    'header.settings_title':     'Settings',
 ```
 In the Settings section:
 ```javascript
    'settings.onboarding_btn':   'Start',
    'settings.reset_btn':        'Reset',
    'settings.bg_upload_btn':    'Upload',
    'settings.bg_invalid_url':   'Only local images (upload) are allowed as background.',
    'settings.bg_invalid_url.title': 'Invalid URL',
 ```
 - [ ] **Step 5: Verify translations**
 Reload extension. Test:
 1. Set language to English → hover over header buttons → verify English tooltips
 2. Set language to German → hover → verify German tooltips
 3. Open Settings → verify "Start", "Reset", "Upload" buttons have `data-i18n` attributes (inspect in DevTools)
 - [ ] **Step 6: Commit**
 ```bash
 git add newtab.html src/js/i18n.js
 git commit -m "fix(i18n): complete missing translations for toolbar tooltips and button texts
 Add data-i18n-title to 5 header buttons, data-i18n to 3 settings buttons.
 Add 10 new keys to STRINGS.de and STRINGS.en including background URL
 validation error messages."
 ```
 ---
 ### Task 9: Version Bump, Changelog, Clock Cleanup
 **Files:**
 - Modify: `src/js/app.js:135`
 - Modify: `manifest.json:5`
 - Modify: `manifest.firefox.json` (version field)
 - Modify: `manifest.opera.json` (version field)
 - Modify: `CHANGELOG.md`
 - [ ] **Step 1: Store clock interval ID in app.js**
 Replace line 135 in `src/js/app.js`:
 ```javascript
  setInterval(tick, 1000);
 ```
 With:
 ```javascript
  const clockInterval = setInterval(tick, 1000);
 ```
 - [ ] **Step 2: Bump version in all three manifests**
 In `manifest.json`, `manifest.firefox.json`, and `manifest.opera.json`, change:
 ```json
 "version": "2.0.0",
 ```
 To:
 ```json
 "version": "2.0.1",
 ```
 - [ ] **Step 3: Add CHANGELOG entry**
 Add this block at the top of `CHANGELOG.md`, after the header and before the v2.0.0 entry:
 ```markdown
 ### v2.0.1 — 16.04.2026
 #### Security
 - **Background URL validation** — Only `blob:` and `data:image/` protocols allowed in CSS `backgroundImage` (prevents CSS injection via manipulated storage)
 - **Import URL validation** — `javascript:`, `data:`, and other unsafe protocols are blocked during JSON import
 - **Immutable import mapping** — Imported boards, bookmarks, and notes are sanitized with explicit field selection and string length limits
 #### Fixed
 - **Widget minimize race condition** — Replaced `setTimeout` with `transitionend` event; `openWidget()` during animation no longer causes display glitch
 - **Notes import mutation** — Import now uses `Notes.init()` instead of directly setting `Notes._notes`
 - **Complete i18n coverage** — 5 header button tooltips and 3 settings button texts now have `data-i18n` attributes (10 new translation keys)
 #### Changed
 - **Widget event system** — `WidgetManager` now dispatches `widget:close`, `widget:minimize`, `widget:open` CustomEvents via `EventTarget`. Calculator, Timer, and ImageRef use `WidgetManager.on()` instead of monkey-patching
 - **Local favicon icons** — Replaced Google Favicons API with local colored letter icons (deterministic hue per title). Zero external network requests, Brave Shields compatible
 - **backdrop-filter fallback** — `@supports not (backdrop-filter)` block with `--bg-solid-fallback` per theme for Brave Shields compatibility
 - **Clock interval cleanup** — `setInterval` ID stored in variable
 ---
 ```
 - [ ] **Step 4: Verify everything**
 Full manual test:
 1. Reload extension
 2. Verify version in `chrome://extensions` shows 2.0.1
 3. Open/close/minimize/reopen widgets of all types
 4. Switch language DE/EN — all tooltips translate
 5. Import/export JSON data
 6. Upload background image
 7. Check Network tab — zero external requests
 8. Check Console — zero errors
 - [ ] **Step 5: Commit**
 ```bash
 git add src/js/app.js manifest.json manifest.firefox.json manifest.opera.json CHANGELOG.md
 git commit -m "chore(release): bump version to v2.0.1 — hardening release
 Security fixes, widget event system, local favicons, i18n completeness,
 backdrop-filter fallback, code quality improvements. See CHANGELOG.md."
 ```
@@ -0,0 +1,581 @@
 # Hellion NewTab — Calculator Upgrade Design
 **Datum:** 2026-04-16
 **Autor:** Florian Wathling / Claude Code
 **Status:** Approved
 **Scope:** Calculator erweitern um Scientific, Unit-Converter und Game-Rechner (Satisfactory, Factorio, Stationeers)
 **Ziel-Version:** v2.1.0
 ---
 ## Kontext
 Der Calculator ist aktuell ein reiner Grundrechenarten-Taschenrechner (720 Zeilen, Shunting-Yard Parser, 4x5 Button-Grid, History). Das Upgrade macht ihn zum zentralen Tool-Widget mit 6 Modi:
 1. **Standard** (bestehend)
 2. **Scientific** (Wurzel, Potenz, Pi, Formel-Helfer)
 3. **Unit-Converter** (Länge, Gewicht, Temperatur, Volumen, Geschwindigkeit, Fläche)
 4. **Satisfactory** (Items/Min, Overclock-Power, Maschinen-Rechner)
 5. **Factorio** (Assembler-Ratios, Belt-Throughput, Maschinen-Rechner)
 6. **Stationeers** (Idealgas, Furnace/Verbrennung, Solar/Batterie, Atmosphäre)
 ---
 ## Sektion 1: Architektur und Dateistruktur
 ### Datei-Aufteilung
 ```
 src/js/
 ├── calculator.js          # Core: Tab-System, Standard-Modus, erweiterter Shunting-Yard Parser
 ├── calc-scientific.js     # Scientific-Modus
 ├── calc-converter.js      # Unit-Converter
 ├── calc-satisfactory.js   # Satisfactory Calculator
 ├── calc-factorio.js       # Factorio Calculator
 └── calc-stationeers.js    # Stationeers Calculator
 ```
 ### Load-Order in newtab.html
 ```
 ... → widgets.js → notes.js → calculator.js → calc-scientific.js → calc-converter.js →
 calc-satisfactory.js → calc-factorio.js → calc-stationeers.js → timer.js → ...
 ```
 Alle Mode-Dateien laden nach `calculator.js` und vor `timer.js`. Kein zirkulärer Dependency-Konflikt.
 ### Registrierungs-Pattern
 Jede Mode-Datei registriert sich beim Calculator-Objekt:
 ```javascript
 Calculator.registerMode('scientific', {
  label: '\uD83D\uDCD0',        // Icon
  shortName: 'Sci',              // Tab-Label (3 Zeichen)
  titleKey: 'calculator.tab.scientific',  // i18n-Key
  render(bodyEl) { /* UI aufbauen */ },
  destroy() { /* Cleanup, Event-Listener entfernen */ }
 });
 ```
 `calculator.js` bekommt:
 ```javascript
 _modes: new Map(),
 _activeMode: 'standard',
 registerMode(name, config) {
  this._modes.set(name, config);
 },
 ```
 Die Tab-Leiste wird dynamisch aus `_modes` gebaut. Standard-Modus ist immer registriert (intern, nicht per externer Datei). Die anderen Modi kommen dazu wenn ihre Script-Datei geladen ist.
 ### Tab-Wechsel
 ```javascript
 switchMode(name) {
  const mode = this._modes.get(name);
  if (!mode) return;
  this._activeMode = name;
  const body = WidgetManager.getBody(this.WIDGET_ID);
  if (!body) return;
  // Alten Modus aufräumen
  const oldMode = this._modes.get(this._previousMode);
  if (oldMode && oldMode.destroy) oldMode.destroy();
  // Neuen Modus rendern
  body.textContent = '';
  mode.render(body);
  // Tab-UI aktualisieren
  this._updateTabBar();
  // State speichern
  this.save();
 }
 ```
 ### Storage
 Jeder Modus speichert seinen State als Sub-Key unter `calculator` im bestehenden `widgetStates`:
 ```javascript
 {
  calculator: {
    x: 400, y: 120, width: 320, height: 480,
    open: true,
    activeMode: 'standard',
    history: [{ expr: '42 × 7', result: '294' }],
    converter: { lastCategory: 'length', fromUnit: 'cm', toUnit: 'in' },
    satisfactory: { lastSubMode: 'itemsPerMin' },
    factorio: { lastSubMode: 'ratio', lastAssembler: 'asm3' },
    stationeers: { lastSubMode: 'gas' }
  }
 }
 ```
 Read-before-write Pattern bleibt: `const data = await Store.get(this.STORAGE_KEY) || {};`
 ---
 ## Sektion 2: Standard-Modus (Änderungen)
 ### Parser-Erweiterung
 Der Shunting-Yard Parser wird um zwei Operationen erweitert:
 **Potenz-Operator `^`:**
 - Binärer Operator mit höchster Precedence (über `*` und `/`)
 - Rechts-assoziativ: `2^3^2` = `2^(3^2)` = 512
 - Tokenizer erkennt `^` als `{ type: 'op', value: '^' }`
 - parseFactor() → parsePower() → parseFactor() (neue Precedence-Stufe)
 **Wurzel-Funktion `sqrt`:**
 - Wird vom Scientific-Modus als `sqrt(` in die Expression eingefügt
 - Tokenizer erkennt `sqrt` als `{ type: 'func', value: 'sqrt' }`
 - parseFactor() prüft auf Functions vor Numbers
 Die bestehende Operator-Hierarchie wird:
 ```
 parseExpr:   + -
 parseTerm:   * / %
 parsePower:  ^           ← NEU
 parseFactor: number | (expr) | func(expr)  ← func NEU
 ```
 ### Keine Änderungen am Standard-UI
 Das 4x5 Button-Grid, History-Panel und Keyboard-Support bleiben identisch. Die Parser-Erweiterung ist rückwärtskompatibel (keine bestehende Expression bricht).
 ---
 ## Sektion 3: Scientific-Modus
 ### Zusätzliche Buttons
 2 neue Reihen über dem Standard-Grid:
 | Button | Wert | Aktion |
 |---|---|---|
 | √ | `sqrt(` | Unäre Funktion, öffnet Klammer |
 | x² | `^2` | Hängt `^2` an Expression |
 | xⁿ | `^` | Fügt Potenz-Operator ein |
 | π | `3.14159265359` | Konstante einfügen |
 | e | `2.71828182846` | Konstante einfügen |
 | ± | toggle | Vorzeichen des letzten Werts wechseln |
 Darunter das Standard 4x5-Grid (C, Klammern, %, ÷, 0-9, Operatoren, =). Der Scientific-Modus nutzt den gleichen `_handleKey()`/`_calculate()`-Flow.
 ### Formel-Helfer
 Ein Dropdown unter dem Button-Grid mit vorgefertigten Formeln:
 | Formel | Eingabefelder | Berechnung |
 |---|---|---|
 | Kreis-Fläche | Radius (r) | `π × r²` |
 | Kreis-Umfang | Radius (r) | `2 × π × r` |
 | °C → °F | Temperatur | `(C × 9/5) + 32` |
 | °F → °C | Temperatur | `(F - 32) × 5/9` |
 | Pythagoras | a, b | `√(a² + b²)` |
 | Prozent-Wert | Wert, Prozent | `Wert × Prozent / 100` |
 Jede Formel öffnet inline Eingabefelder + Live-Ergebnis. Nutzt `_formatResult()` für einheitliche Zahlenformatierung.
 ### Keyboard
 Gleicher Keyboard-Support wie Standard-Modus, plus:
 - `p` → Pi einfügen
 - `e` → Euler einfügen (kein Konflikt: `e` ist im Standard nicht belegt, nur `c`/`C` und `Escape` sind Clear)
 ---
 ## Sektion 4: Unit-Converter
 ### UI-Aufbau
 ```
 ┌──────────────────────────┐
 │ [Kategorie-Dropdown    ▼]│
 │                          │
 │ [123.45    ] [cm      ▼] │
 │       ⇅ (Swap-Button)    │
 │ [48.622    ] [in      ▼] │
 │                          │
 │ Schnellreferenz:         │
 │  1 cm = 0.3937 in       │
 │  1 in = 2.54 cm         │
 └──────────────────────────┘
 ```
 ### Kategorien und Einheiten
 | Kategorie | Einheiten | Basis-Einheit |
 |---|---|---|
 | Länge | mm, cm, m, km, in, ft, yd, mi | m |
 | Gewicht | mg, g, kg, t, oz, lb | g |
 | Temperatur | °C, °F, K | (Spezialfunktionen) |
 | Volumen | ml, L, m³, gal(US), gal(UK), ft³ | ml |
 | Geschwindigkeit | m/s, km/h, mph, kn | m/s |
 | Fläche | mm², cm², m², km², ha, acre, ft², in² | m² |
 ### Konvertierungs-Logik
 Jede Einheit hat `toBase(value)` und `fromBase(value)`:
 ```javascript
 const LENGTH_UNITS = {
  mm:  { toBase: v => v / 1000,     fromBase: v => v * 1000 },
  cm:  { toBase: v => v / 100,      fromBase: v => v * 100 },
  m:   { toBase: v => v,            fromBase: v => v },
  km:  { toBase: v => v * 1000,     fromBase: v => v / 1000 },
  in:  { toBase: v => v * 0.0254,   fromBase: v => v / 0.0254 },
  ft:  { toBase: v => v * 0.3048,   fromBase: v => v / 0.3048 },
  yd:  { toBase: v => v * 0.9144,   fromBase: v => v / 0.9144 },
  mi:  { toBase: v => v * 1609.344, fromBase: v => v / 1609.344 }
 };
 ```
 Temperatur bekommt eigene Funktionen (nicht linear):
 ```javascript
 const TEMP_CONVERSIONS = {
  'C_F': v => (v * 9/5) + 32,
  'C_K': v => v + 273.15,
  'F_C': v => (v - 32) * 5/9,
  'F_K': v => (v - 32) * 5/9 + 273.15,
  'K_C': v => v - 273.15,
  'K_F': v => (v - 273.15) * 9/5 + 32
 };
 ```
 ### Verhalten
 - Live-Update bei Eingabe (kein "Berechnen"-Button)
 - Swap-Button (⇅) tauscht Quell- und Ziel-Einheit
 - Schnellreferenz zeigt `1 [from] = x [to]` und umgekehrt
 - Kein Keyboard-Override (native `<input>` Felder)
 ### Storage
 ```javascript
 converter: { lastCategory: 'length', fromUnit: 'cm', toUnit: 'in' }
 ```
 ---
 ## Sektion 5: Satisfactory Calculator
 ### Sub-Modi
 Drei Buttons oben wählen den aktiven Rechner:
 #### 5a: Items/Min
 **Eingabefelder:**
 - Items per Craft (default: 1)
 - Craft Time in Sekunden (default: 4)
 - Clock Speed in % (default: 100)
 **Formel:**
 ```
 Output = (ItemsPerCraft × 60) / CraftTime × (ClockSpeed / 100)
 ```
 **Ausgabe:** `X.XX items/min`
 #### 5b: Overclock Power
 **Eingabefelder:**
 - Base Power in MW (default: 30)
 - Clock Speed in % (default: 100)
 **Formeln:**
 ```
 PowerUsage = BasePower × (ClockSpeed / 100) ^ 1.321928
 EnergyPerItem = (ClockSpeed / 100) ^ 0.321928
 ```
 **Ausgabe:**
 - `Power Usage: X.X MW`
 - `Efficiency: ↓ X.X% per item` (nur bei ClockSpeed > 100)
 #### 5c: Maschinen
 **Eingabefelder:**
 - Target Output/Min (default: 60)
 - Items per Craft (default: 1)
 - Craft Time in Sekunden (default: 4)
 - Clock Speed in % (default: 100)
 - Base Power in MW (default: 30)
 **Formeln:**
 ```
 ItemsPerMin = (ItemsPerCraft × 60) / CraftTime × (ClockSpeed / 100)
 Machines = ceil(TargetOutput / ItemsPerMin)
 TotalPower = Machines × BasePower × (ClockSpeed / 100) ^ 1.321928
 ```
 **Ausgabe:**
 - `Machines needed: X`
 - `Total Power: X.X MW`
 ### Verhalten
 Alle Felder berechnen live. `<input type="number">` mit `step`-Attribut für sinnvolle Schrittweiten.
 ---
 ## Sektion 6: Factorio Calculator
 ### Sub-Modi
 #### 6a: Assembler-Ratio
 **Eingabefelder:**
 - Assembler-Dropdown: Assembler 1 (0.5), Assembler 2 (0.75), Assembler 3 (1.25)
 - Recipe Output Count (default: 1)
 - Recipe Time in Sekunden (default: 1)
 **Formel:**
 ```
 OutputPerSecond = RecipeOutput × CraftingSpeed / RecipeTime
 OutputPerMinute = OutputPerSecond × 60
 ```
 **Ausgabe:**
 - `X.XX items/s`
 - `X.XX items/min`
 #### 6b: Belt-Throughput
 **Eingabefelder:**
 - Belt-Dropdown: Yellow (15/s), Red (30/s), Blue (45/s)
 - Items consumed per second per machine (default: 1)
 **Feste Werte:**
 | Belt | Total (items/s) | Per Side (items/s) |
 |---|---|---|
 | Yellow | 15 | 7.5 |
 | Red | 30 | 15 |
 | Blue | 45 | 22.5 |
 **Formel:**
 ```
 MachinesPerBelt = floor(BeltThroughput / ItemsConsumedPerSec)
 Utilization = (ItemsConsumedPerSec × MachinesPerBelt) / BeltThroughput × 100
 ```
 **Ausgabe:**
 - `Machines per belt: X`
 - `Belt utilization: X%`
 #### 6c: Maschinen
 **Eingabefelder:**
 - Assembler-Dropdown
 - Target Output/s (default: 10)
 - Recipe Output Count (default: 1)
 - Recipe Time in Sekunden (default: 1)
 **Formel:**
 ```
 OutputPerMachine = RecipeOutput × CraftingSpeed / RecipeTime
 Machines = ceil(TargetOutput / OutputPerMachine)
 TotalThroughput = Machines × OutputPerMachine
 BeltNeeded = kleinster Belt der TotalThroughput schafft
 ```
 **Ausgabe:**
 - `Machines needed: X`
 - `Belt needed: [Color] (X% utilization)`
 ---
 ## Sektion 7: Stationeers Calculator
 ### Sub-Modi
 Vier Buttons oben (statt drei wie bei den anderen Game-Rechnern).
 #### 7a: Gas (Idealgas PV=nRT)
 **Eingabefelder:**
 - Dropdown: Gesucht = P, V, n oder T
 - Die drei anderen Variablen als Eingabefelder
 **Konstante:** R = 8314.46261815324 (Stationeers-spezifisch, Einheit: L·Pa / mol·K)
 **Formeln:**
 ```
 P = nRT / V
 V = nRT / P
 n = PV / RT
 T = PV / nR
 ```
 **Eingabe-Einheiten:**
 - P in kPa (wird intern × 1000 zu Pa)
 - V in Litern
 - T in Kelvin (Hilfstext zeigt °C-Äquivalent)
 - n in mol
 #### 7b: Furnace / Verbrennung
 **Eingabefelder:**
 - Fuel Ratio (0 bis 1, Anteil Brennstoff am Gesamtgas)
 - Start-Temperatur in Kelvin
 - Start-Druck in kPa
 **Formeln:**
 ```
 T_nach = (T_vor × specificHeat + fuel × 563452) / (specificHeat + fuel × 172.615)
 P_nach = P_vor × T_nach × (1 + 5.7 × fuel) / T_vor
 ```
 Wobei:
 - `fuel = min(ratioO2, ratioVolatile / 2)`
 - `specificHeat` = gewichtete Summe der Gas-Wärmekapazitäten
 - Vereinfachung: Fuel Ratio als einzelner Wert (0-1), `specificHeat(before)` wird aus reinem Fuel berechnet (61.9 J/mol·K für 1:2 O₂:H₂ Mischung)
 - 563452 = Energie pro Mol bei 95% Effizienz
 - 172.615 = 0.95 × (243.6 - 61.9)
 **Validierung:**
 - Warnung wenn Fuel < 0.05 (unter 5% Minimum)
 - Warnung wenn Start-Druck < 10 kPa
 **Ausgabe:**
 - `T after ignition: X K (X °C)`
 - `P after ignition: X kPa`
 #### 7c: Solar / Batterie
 **Eingabefelder:**
 - Anzahl Panels (default: 12)
 - Watt pro Panel (default: 500, Mond-Wert)
 - Tag-Länge in Sekunden (default: 600)
 - Nacht-Länge in Sekunden (default: 600)
 - Verbrauch in Watt (default: 2000)
 **Formeln:**
 ```
 Generation = Panels × WattsPerPanel
 Surplus = Generation - Consumption
 NightEnergy = Consumption × NightLength    (in Watt-Sekunden)
 BatteriesNeeded = ceil(NightEnergy / 50000)  (Station Battery = 50.000 Ws)
 ```
 **Ausgabe:**
 - `Generation: X W`
 - `Surplus: X W` (rot wenn negativ)
 - `Night Energy: X Ws`
 - `Batteries needed: X`
 #### 7d: Atmosphäre / Gas-Mischer
 **Eingabefelder:**
 - Target Temperatur in Kelvin
 - Gas 1 Temperatur in Kelvin
 - Gas 2 Temperatur in Kelvin
 **Formel:**
 ```
 M1 = |T2 - T0| / (|T1 - T0| + |T2 - T0|)
 M2 = 1 - M1
 ```
 **Ausgabe:**
 - `Mixer Input 1: X.X%`
 - `Mixer Input 2: X.X%`
 **Aufklappbare Wärmekapazität-Referenz:**
 | Gas | Cp (J/mol·K) |
 |---|---|
 | O₂ | 21.1 |
 | H₂ | 20.4 |
 | CO₂ | 28.2 |
 | N₂ | 20.6 |
 | H₂O | 72.0 |
 | N₂O | 23.0 |
 | Pollutant | 24.8 |
 ---
 ## Sektion 8: UI, i18n und Widget-Sizing
 ### Tab-Leiste
 Horizontale Leiste direkt unter dem Widget-Header. Immer sichtbar (kein Scrollen).
 | Tab | Icon | Label |
 |---|---|---|
 | Standard | 🔢 | Std |
 | Scientific | 📐 | Sci |
 | Converter | ⚖️ | Unit |
 | Satisfactory | ⚙️ | SAT |
 | Factorio | 🏭 | FAC |
 | Stationeers | 🚀 | STA |
 Aktiver Tab: `border-bottom: 2px solid var(--accent)`, Text in `var(--accent)`.
 Inaktive Tabs: `color: rgba(255,255,255,0.5)`.
 CSS-Klasse: `.calc-tab-bar` und `.calc-tab`.
 ### Widget-Sizing
 - Standard-Modus Minimum: 280 × 400 px
 - Komplexe Modi (Scientific, Game-Rechner): Auto-Resize auf 320 × 480 px (falls aktuell kleiner)
 - User-Resize überschreibt Auto-Resize
 - Widget-System-Minimum bleibt 200 × 150 px
 ### i18n
 Geschätzt ~100 neue Keys in `STRINGS.de` und `STRINGS.en`:
 - 6 Tab-Labels
 - 6 Kategorie-Namen (Converter)
 - ~48 Einheiten-Langformen (Converter)
 - ~30 Feld-Labels (Game-Rechner)
 - ~10 Ergebnis-Labels
 Einheiten-Abkürzungen (cm, kg, °C, kPa) werden nicht übersetzt.
 ### Keyboard
 - Standard-Modus: Bestehender Keyboard-Support (0-9, +, -, *, /, Enter, Backspace, Escape)
 - Scientific-Modus: Gleicher Support + `p` (Pi), `^` (Potenz)
 - Converter und Game-Modi: Kein Custom-Keyboard (native `<input>` Felder)
 ---
 ## Betroffene Dateien (Gesamt)
 | Datei | Änderung |
 |---|---|
 | `src/js/calculator.js` | Tab-System, registerMode(), switchMode(), Parser-Erweiterung (^, sqrt) |
 | `src/js/calc-scientific.js` | NEU: Scientific-Modus |
 | `src/js/calc-converter.js` | NEU: Unit-Converter |
 | `src/js/calc-satisfactory.js` | NEU: Satisfactory Calculator |
 | `src/js/calc-factorio.js` | NEU: Factorio Calculator |
 | `src/js/calc-stationeers.js` | NEU: Stationeers Calculator |
 | `src/css/main.css` | Tab-Bar Styles, Mode-spezifische Styles |
 | `src/js/i18n.js` | ~100 neue Keys (DE + EN) |
 | `newtab.html` | 5 neue `<script>` Tags in Load-Order |
 | `manifest.json` | Version → 2.1.0 |
 | `manifest.firefox.json` | Version → 2.1.0 |
 | `manifest.opera.json` | Version → 2.1.0 |
 | `CHANGELOG.md` | v2.1.0 Eintrag |
 ## Implementierungsreihenfolge
 1. **Calculator Core** — Tab-System, registerMode(), switchMode(), Tab-Bar CSS
 2. **Parser-Erweiterung** — `^` Operator und `sqrt` Funktion
 3. **Scientific-Modus** — Buttons, Formel-Helfer, Registrierung
 4. **Unit-Converter** — Kategorien, Einheiten, Konvertierungs-Logik, UI
 5. **Satisfactory Calculator** — 3 Sub-Modi, Formeln, UI
 6. **Factorio Calculator** — 3 Sub-Modi, Formeln, UI
 7. **Stationeers Calculator** — 4 Sub-Modi, Formeln, UI
 8. **i18n** — Alle neuen Keys (DE + EN)
 9. **Version Bump** — Manifests, CHANGELOG
@@ -0,0 +1,400 @@
 # Hellion NewTab v2.0.1 — Hardening Release Design
 **Datum:** 2026-04-16
 **Autor:** Florian Wathling / Claude Code
 **Status:** Approved
 **Scope:** Security, Stability, i18n, Code Quality
 **Strategie:** Foundation First (Event-System zuerst, dann darauf aufbauen)
 ---
 ## Kontext
 Umfassender Audit von v2.0.0 hat Findings in vier Kategorien ergeben:
 - 3 Sicherheitslücken (HOCH)
 - 2 Stabilitätsprobleme (Race Conditions)
 - 8 fehlende i18n-Attribute
 - 3 Code-Qualität-Items
 Dieses Design beschreibt alle Fixes als zusammenhängendes Hardening-Release.
 ---
 ## Sektion 1: Widget Event-System
 ### Problem
 Calculator (`calculator.js:692-728`), Timer (`timer.js:723-758`) und ImageRef (`image-ref.js:463-498`) überschreiben `WidgetManager.close`, `.minimize` und `.openWidget` durch Monkey-Patching in ihrer `init()`. Das erzeugt eine 3-stufige Closure-Kette pro Methode. Funktional korrekt, aber fragil und schwer debugbar.
 ### Lösung
 WidgetManager bekommt ein internes Event-System basierend auf `EventTarget`.
 **Neue API in `widgets.js`:**
 ```javascript
 _emitter: new EventTarget(),
 on(event, handler) {
  this._emitter.addEventListener(event, handler);
 },
 off(event, handler) {
  this._emitter.removeEventListener(event, handler);
 },
 ```
 **Events:**
 | Event | Feuert nach | Detail |
 |---|---|---|
 | `widget:close` | `entry.el.remove()` + `_widgets.delete(id)` | `{ id }` | **Achtung:** Element bereits entfernt, Listener dürfen nicht auf Widget-Entry zugreifen |
 | `widget:minimize` | State-Änderung + Animation + Save | `{ id }` |
 | `widget:open` | State-Änderung + Display-Reset + Save | `{ id }` |
 **Migration der Widget-Module:**
 Das gesamte Monkey-Patching wird ersetzt durch `WidgetManager.on()` Aufrufe:
 ```javascript
 // Beispiel: Calculator.init()
 WidgetManager.on('widget:close', (e) => {
  if (e.detail.id === self.WIDGET_ID) self.onClose();
 });
 WidgetManager.on('widget:minimize', (e) => {
  if (e.detail.id === self.WIDGET_ID) {
    self._isOpen = false;
    self.save();
  }
 });
 WidgetManager.on('widget:open', (e) => {
  if (e.detail.id === self.WIDGET_ID) {
    self._isOpen = true;
    const body = WidgetManager.getBody(self.WIDGET_ID);
    if (body && body.children.length === 0) self.renderBody(body);
    self.save();
  }
 });
 ```
 ImageRef folgt dem gleichen Pattern, prüft aber per `self._images.some(img => img.id === id)` statt gegen eine feste WIDGET_ID.
 **Load-Order:** Kein Problem. `widgets.js` wird vor allen Widget-Modulen geladen. Die Module rufen `WidgetManager.on()` in ihrer `init()` auf, die erst in `app.js` aufgerufen wird.
 ### Betroffene Dateien
 - `src/js/widgets.js` — Event-System hinzufügen, Events in close/minimize/openWidget dispatchen
 - `src/js/calculator.js` — Monkey-Patching (Z. 692-728) durch Event-Listener ersetzen
 - `src/js/timer.js` — Monkey-Patching (Z. 723-758) durch Event-Listener ersetzen
 - `src/js/image-ref.js` — Monkey-Patching (Z. 463-498) durch Event-Listener ersetzen
 ---
 ## Sektion 2: Minimize-Animation mit `transitionend`
 ### Problem
 `WidgetManager.minimize()` (`widgets.js:154-163`) setzt `display: none` nach 250ms `setTimeout`. Wenn `openWidget()` in diesen 250ms aufgerufen wird, überschreibt der Timeout das `display: flex` wieder (Race Condition).
 ### Lösung
 `setTimeout` wird durch `transitionend` Event ersetzt. Eine `_minimizing` Flag verhindert die Race Condition.
 ```javascript
 async minimize(id) {
  const entry = this._widgets.get(id);
  if (!entry) return;
  entry.state.open = false;
  entry._minimizing = true;
  entry.el.classList.add('widget-minimized');
  entry.el.addEventListener('transitionend', function onEnd(e) {
    if (e.target !== entry.el) return;
    entry.el.removeEventListener('transitionend', onEnd);
    if (entry._minimizing) {
      entry.el.style.display = 'none';
    }
    entry._minimizing = false;
  }, { once: false });
  this._emitter.dispatchEvent(new CustomEvent('widget:minimize', { detail: { id } }));
  await this.save();
 },
 async openWidget(id) {
  const entry = this._widgets.get(id);
  if (!entry) return;
  entry._minimizing = false;  // Race Condition verhindert
  entry.state.open = true;
  entry.el.style.display = 'flex';
  requestAnimationFrame(() => {
    entry.el.classList.remove('widget-minimized');
  });
  this.bringToFront(id);
  this._emitter.dispatchEvent(new CustomEvent('widget:open', { detail: { id } }));
  await this.save();
 },
 ```
 **Warum `_minimizing` Flag:** Robuster als `clearTimeout`, weil sie unabhängig von der CSS-Transition-Duration funktioniert.
 **Fallback:** Falls `transitionend` nicht feuert (kein Transition definiert), bleibt das Widget sichtbar mit der Klasse. Akzeptabel, da alle Widgets in `main.css` eine Transition haben.
 ### Betroffene Dateien
 - `src/js/widgets.js` — `minimize()` und `openWidget()` umschreiben
 ---
 ## Sektion 3: Security Fixes
 ### 3a: URL-Injection in backgroundImage
 **Datei:** `src/js/settings.js:93`
 **Problem:** `settings.bgUrl` wird unvalidiert in CSS-Template-Literal eingefügt.
 **Fix:** Protokoll-Whitelist. Nur `blob:` und `data:image/` erlauben (die einzigen Protokolle die der Upload erzeugt).
 ```javascript
 function isValidBgUrl(url) {
  return typeof url === 'string' &&
    (url.startsWith('blob:') || url.startsWith('data:image/'));
 }
 ```
 Validierung an zwei Stellen: `applySettings()` und beim Speichern nach Upload.
 ### 3b: URL-Validierung beim JSON-Import
 **Datei:** `src/js/data.js:45-49`
 **Problem:** Importierte Bookmark-URLs werden nicht auf Protokoll geprüft. `javascript:` oder `data:` URLs kommen durch.
 **Fix:** Protokoll-Whitelist für importierte URLs.
 ```javascript
 function isSafeUrl(url) {
  try {
    const u = new URL(url);
    return ['http:', 'https:', 'ftp:'].includes(u.protocol);
  } catch {
    return false;
  }
 }
 ```
 Integration in die Bookmark-Filter-Logik: `if (!bm || typeof bm.title !== 'string' || !isSafeUrl(bm.url)) return false;`
 Ungültige Bookmarks werden still übersprungen.
 ### 3c: Objekt-Mutation im Import
 **Datei:** `src/js/data.js:43-48`
 **Problem:** `b.id = b.id || uid()` mutiert das geparste JSON-Objekt direkt. Keine Längenvalidierung.
 **Fix:** Immutable Mapping mit expliziter Feldauswahl und String-Längen-Limits.
 ```javascript
 .map(bm => ({
  id: bm.id || uid(),
  title: String(bm.title).slice(0, 200),
  url: bm.url,
  desc: String(bm.desc || '').slice(0, 500)
 }));
 ```
 Analog für Boards:
 ```javascript
 .map(b => ({
  id: b.id || uid(),
  title: String(b.title).slice(0, 100),
  blurred: !!b.blurred,
  bookmarks: /* bereits sanitized, siehe oben */
 }));
 ```
 Notes-Felder beim Import werden ebenfalls sanitized:
 ```javascript
 .filter(n => n && n.id && n.template)
 .map(n => ({
  id: n.id,
  template: ['note', 'checklist'].includes(n.template) ? n.template : 'note',
  title: String(n.title || '').slice(0, 200),
  content: String(n.content || '').slice(0, 5000),
  checklistItems: Array.isArray(n.checklistItems) ? n.checklistItems : []
 }));
 ```
 ### Betroffene Dateien
 - `src/js/settings.js` — `isValidBgUrl()` + Validierung in `applySettings()`
 - `src/js/data.js` — `isSafeUrl()` + immutable Mapping + Längen-Limits
 ---
 ## Sektion 4: Lokale Favicons
 ### Problem
 `getFaviconUrl()` (`state.js:36-43`) ruft Google Favicons API auf. Brave Shields blockiert das. Jeder Bookmark erzeugt einen fehlgeschlagenen Netzwerk-Request. Zusätzlich leakt jeder Hostname an Google.
 ### Lösung
 Kein externer Request mehr. `getFaviconUrl()` wird entfernt. Bookmarks zeigen ein farbiges Buchstaben-Icon (erster Buchstabe des Titels).
 **state.js:** `getFaviconUrl()` löschen.
 **boards.js:** Statt `<img>` + Error-Fallback nur noch ein `<div>`:
 ```javascript
 const favicon = document.createElement('div');
 favicon.className = 'bm-favicon-local';
 favicon.textContent = bm.title.charAt(0).toUpperCase();
 // Deterministische Farbe pro Buchstabe
 const hue = (bm.title.charCodeAt(0) * 137) % 360;
 favicon.style.backgroundColor = `hsl(${hue}, 45%, 35%)`;
 ```
 Inline-Style für `backgroundColor` ist hier gerechtfertigt, weil der Wert dynamisch pro Bookmark berechnet wird. Restliche Styles (Größe, Border-Radius, Schrift) kommen aus CSS.
 **main.css:** `.bm-favicon` und `.bm-favicon-fallback` ersetzen durch `.bm-favicon-local`.
 ### Was entfällt
 - `getFaviconUrl()` in `state.js`
 - `<img class="bm-favicon">` Erzeugung in `boards.js`
 - Error-Listener für Favicon-Loads
 - `.bm-favicon` und `.bm-favicon-fallback` CSS-Regeln
 - Der einzige externe Netzwerk-Request der Extension
 ### Betroffene Dateien
 - `src/js/state.js` — `getFaviconUrl()` entfernen
 - `src/js/boards.js` — Favicon-Rendering umbauen
 - `src/css/main.css` — CSS-Klassen tauschen
 ---
 ## Sektion 5: i18n-Lücken schließen
 ### 5a: Toolbar-Buttons — fehlende `data-i18n-title`
 Fünf Header-Buttons (`newtab.html:26-42`) haben hardcodierte deutsche `title`-Attribute.
 | Button | Key | DE | EN |
 |---|---|---|---|
 | `#btnImport` | `header.import_title` | Bookmarks importieren (HTML) | Import bookmarks (HTML) |
 | `#btnAddBoard` | `header.board_title` | Neues Board hinzufügen | Add new board |
 | `#btnNote` | `header.note_title` | Schnellnotiz | Quick note |
 | `#btnTheme` | `header.theme_title` | Darstellung & Theme | Appearance & Theme |
 | `#btnSettings` | `header.settings_title` | Einstellungen | Settings |
 **Fix:** `data-i18n-title` Attribute hinzufügen. `applyLanguage()` erkennt diese automatisch.
 ### 5b: Button-Texte ohne i18n
 Drei Settings-Buttons haben hardcodierte Texte.
 | Button | Key | DE | EN |
 |---|---|---|---|
 | `#btnRestartOnboarding` | `settings.onboarding_btn` | Start | Start |
 | `#btnResetAll` | `settings.reset_btn` | Reset | Reset |
 | `#btnBgFile` | `settings.bg_upload_btn` | Upload | Upload |
 Aktuell in beiden Sprachen identisch, aber `data-i18n` wird für Konsistenz und zukünftige Erweiterbarkeit gesetzt.
 ### Betroffene Dateien
 - `newtab.html` — 5x `data-i18n-title`, 3x `data-i18n` hinzufügen
 - `src/js/i18n.js` — 8 neue Keys in `STRINGS.de` und `STRINGS.en`
 ---
 ## Sektion 6: Code-Qualität
 ### 6a: Notes-Mutation beim Import
 **Datei:** `src/js/data.js:~79`
 **Problem:** `Notes._notes = merged` setzt das interne Array direkt, umgeht `Notes.save()`.
 **Fix:** Nach dem Speichern in `widgetStates` wird `Notes.init()` aufgerufen statt das interne Array direkt zu manipulieren.
 ```javascript
 existingWidgets.notes = merged;
 await Store.set('widgetStates', existingWidgets);
 await Notes.init();  // Neu aus Storage laden + UI rendern
 ```
 ### 6b: `backdrop-filter` Fallback
 **Datei:** `src/css/main.css`
 **Problem:** 24 Stellen mit `backdrop-filter`. Brave Shields kann das blockieren.
 **Fix:** Zentraler `@supports not` Block mit solidem Hintergrund-Fallback:
 ```css
@supports not (backdrop-filter: blur(1px)) {
  .board,
  .widget,
  .settings-panel,
  .dialog-box,
  .theme-modal {
    background-color: var(--bg-solid-fallback);
  }
 }
 ```
 Jedes Theme bekommt `--bg-solid-fallback` als deckende Variante der Glassmorphism-Farbe.
 ### 6c: Clock Interval Cleanup
 **Datei:** `src/js/app.js:135`
 **Problem:** `setInterval(tick, 1000)` ID wird nicht gespeichert.
 **Fix:** Interval-ID in Variable speichern. Niedrigste Priorität, da der Interval mit dem Tab stirbt.
 ```javascript
 let _clockInterval = null;
 _clockInterval = setInterval(tick, 1000);
 ```
 ### Betroffene Dateien
 - `src/js/data.js` — Notes-Import über `Notes.init()` statt direkter Mutation
 - `src/css/main.css` — `@supports not` Block + `--bg-solid-fallback` pro Theme
 - `src/js/app.js` — Interval-ID speichern
 ---
 ## Implementierungsreihenfolge (Foundation First)
 1. **Event-System** in `widgets.js` bauen
 2. **Widget-Module** auf Events migrieren (`calculator.js`, `timer.js`, `image-ref.js`)
 3. **Minimize mit `transitionend`** in `widgets.js`
 4. **Security Fixes** in `settings.js` und `data.js`
 5. **Lokale Favicons** in `state.js`, `boards.js`, `main.css`
 6. **i18n-Lücken** in `newtab.html` und `i18n.js`
 7. **Code-Qualität** in `data.js`, `main.css`, `app.js`
 8. **Version Bump** auf 2.0.1 in allen drei Manifests + CHANGELOG
 ## Betroffene Dateien (Gesamt)
 | Datei | Sektionen |
 |---|---|
 | `src/js/widgets.js` | 1, 2 |
 | `src/js/calculator.js` | 1 |
 | `src/js/timer.js` | 1 |
 | `src/js/image-ref.js` | 1 |
 | `src/js/settings.js` | 3a |
 | `src/js/data.js` | 3b, 3c, 6a |
 | `src/js/state.js` | 4 |
 | `src/js/boards.js` | 4 |
 | `src/js/i18n.js` | 5 |
 | `src/js/app.js` | 6c |
 | `src/css/main.css` | 4, 6b |
 | `newtab.html` | 5 |
 | `manifest.json` | 8 |
 | `manifest.firefox.json` | 8 |
 | `manifest.opera.json` | 8 |
 | `CHANGELOG.md` | 8 |
@@ -0,0 +1,327 @@
 # Hellion Dashboard — Widget Schema
 > This document is intentionally written in English. Full German/English i18n support
 > is planned for v2.0 — until then, English keeps the docs accessible to anyone
 > who wants to contribute or fork the project.
 ---
 ## Overview
 The widget system provides draggable, resizable floating panels managed by `WidgetManager` (`src/js/widgets.js`). Each widget type has its own module that handles content rendering and state management — `WidgetManager` only knows about DOM and position, never about content.
 ---
 ## Widget Types
 | Type | Module | Instance | Max | Storage |
 |---|---|---|---|---|
 | `note` | `notes.js` | Multi | 5 | Persistent (`widgetStates.notes`) |
 | `calculator` | `calculator.js` | Single | 1 | Persistent (`widgetStates.calculator`) |
 | `timer` | `timer.js` | Single | 1 | Persistent (`widgetStates.timer`) |
 | `image` | `image-ref.js` | Multi | 3 | Meta: persistent, Image data: sessionStorage |
 ---
 ## WidgetManager API
 ### `create(type, config) → string`
 Creates a widget and appends it to the DOM. Returns the widget ID.
 ```javascript
 const id = WidgetManager.create('note', {
  id: 'note_abc123',  // Optional, auto-generated if omitted
  title: 'My Note',  // Default: 'Note'
  x: 120,            // Left position in px
  y: 80,             // Top position in px
  width: 280,        // Width in px (min: 200)
  height: 220,       // Height in px (min: 150)
  open: true         // Visible state (default: true)
 });
 ```
 ### `getBody(id) → HTMLElement | null`
 Returns the `.widget-body` element. This is where your module renders its content.
 ```javascript
 const body = WidgetManager.getBody('widget_calculator');
 if (body) Calculator.renderBody(body);
 ```
 ### `getState(id) → Object | null`
 Returns the current widget state — position, size, open status.
 ```javascript
 const state = WidgetManager.getState('widget_timer');
 // → { id, type, title, x, y, width, height, open }
 ```
 ### `close(id)`
 Permanently removes a widget from the DOM and registry. No undo.
 ### `minimize(id)`
 Hides a widget with animation. The widget stays in the registry with `open: false` so it can be restored.
 ### `openWidget(id)`
 Restores a minimized widget with animation.
 ### `bringToFront(id)`
 Increments z-index so the widget sits above everything else. Called automatically on `pointerdown`.
 ### `save() → Array`
 Returns an array of all `type: 'note'` widget states. Used by `Notes.save()` to merge position/size data with note content.
 ### `restore(renderCallback)`
 Loads widget states from storage and recreates all note widgets. Single-instance widgets (Calculator, Timer) restore themselves in their own `init()` — `restore()` only handles notes.
 ---
 ## Shared Storage Key: `widgetStates`
 All widget modules share a single storage key. Every module's `save()` must read first and preserve whatever it doesn't own — otherwise modules silently wipe each other's data on every save.
 ```javascript
 // Full widgetStates structure
 {
  notes: [
    {
      id: 'note_abc123',
      title: 'My Note',
      content: 'Hello world',
      template: 'text',      // 'text' or 'checklist'
      x: 120, y: 80,
      width: 280, height: 220,
      open: true,
      checklistItems: [],    // Only used by checklist template
      checkedItems: []       // Checked item IDs
    }
  ],
  calculator: {
    x: 400, y: 120,
    width: 280, height: 400,
    open: false,
    history: [
      { expr: '2 + 3', result: '5' }
    ]
  },
  timer: {
    x: 600, y: 80,
    width: 260, height: 360,
    open: false,
    muted: false,
    presets: [
      { name: 'Forschung', seconds: 2700 }
    ]
  },
  imageRef: {
    images: [
      {
        id: 'image_0',
        label: 'Bauplan',
        x: 200, y: 120,
        width: 320, height: 280,
        open: true
        // Image data is NOT stored here — sessionStorage only
      }
    ]
  }
 }
 ```
 ### The Save Pattern
 Every module that touches `widgetStates` must follow this pattern:
 ```javascript
 // From notes.js — same pattern applies to every widget module
 async save() {
  const existing = await Store.get(this.STORAGE_KEY);
  const saveData = { notes: mergedNotes };
  // Preserve everything we don't own
  if (existing && existing.calculator) saveData.calculator = existing.calculator;
  if (existing && existing.timer)      saveData.timer      = existing.timer;
  if (existing && existing.imageRef)   saveData.imageRef   = existing.imageRef;
  await Store.set(this.STORAGE_KEY, saveData);
 }
 ```
 ---
 ## Creating a New Widget Type
 ### Step 1: Single or Multi-Instance?
 **Single-instance** (Calculator, Timer style): one widget, fixed ID, `toggle()` opens and closes it.
 **Multi-instance** (Notes, ImageRef style): multiple widgets, dynamic IDs, `create()` adds new ones.
 ### Step 2: Create the Module
 Here's a minimal single-instance widget template. Follow the same structure — the lifecycle hooks especially are easy to get wrong.
 ```javascript
 const YourWidget = {
  WIDGET_ID: 'widget_yourwidget',
  STORAGE_KEY: 'widgetStates',
  _isOpen: false,
  async load() {
    const data = await Store.get(this.STORAGE_KEY);
    if (data && data.yourWidget) {
      // Restore your state
    }
  },
  async save() {
    const data = await Store.get(this.STORAGE_KEY) || {};
    if (data.notes === undefined) data.notes = [];
    const widgetState = WidgetManager.getState(this.WIDGET_ID);
    data.yourWidget = {
      x:      widgetState ? widgetState.x      : 400,
      y:      widgetState ? widgetState.y      : 120,
      width:  widgetState ? widgetState.width  : 280,
      height: widgetState ? widgetState.height : 300,
      open:   this._isOpen,
      // ... your custom data
    };
    await Store.set(this.STORAGE_KEY, data);
  },
  async open() {
    if (this._isOpen) {
      WidgetManager.bringToFront(this.WIDGET_ID);
      return;
    }
    const data = await Store.get(this.STORAGE_KEY);
    const saved = (data && data.yourWidget) ? data.yourWidget : {};
    WidgetManager.create('yourwidget', {
      id:     this.WIDGET_ID,
      title:  'Your Widget',
      x:      saved.x      || 400,
      y:      saved.y      || 120,
      width:  saved.width  || 280,
      height: saved.height || 300,
      open:   true
    });
    const body = WidgetManager.getBody(this.WIDGET_ID);
    if (body) this.renderBody(body);
    this._isOpen = true;
    await this.save();
  },
  async toggle() {
    if (this._isOpen) {
      const entry = WidgetManager._widgets.get(this.WIDGET_ID);
      if (entry && entry.state.open) {
        await WidgetManager.minimize(this.WIDGET_ID);
        this._isOpen = false;
        await this.save();
      } else if (entry) {
        await WidgetManager.openWidget(this.WIDGET_ID);
        this._isOpen = true;
        await this.save();
      }
    } else {
      await this.open();
    }
  },
  renderBody(bodyEl) {
    bodyEl.textContent = '';
    // Build your UI with createElement — never innerHTML!
  },
  async init() {
    await this.load();
    const data = await Store.get(this.STORAGE_KEY);
    if (data && data.yourWidget && data.yourWidget.open) {
      await this.open();
    }
    // Lifecycle hooks — always call the previous method first
    // or you'll break every widget that wrapped before yours
    const self = this;
    const prevClose = WidgetManager.close;
    WidgetManager.close = function(id) {
      prevClose.call(WidgetManager, id);
      if (id === self.WIDGET_ID) {
        self._isOpen = false;
        self.save();
      }
    };
    const prevMinimize = WidgetManager.minimize;
    WidgetManager.minimize = async function(id) {
      await prevMinimize.call(WidgetManager, id);
      if (id === self.WIDGET_ID) {
        self._isOpen = false;
        await self.save();
      }
    };
    const prevOpen = WidgetManager.openWidget;
    WidgetManager.openWidget = async function(id) {
      await prevOpen.call(WidgetManager, id);
      if (id === self.WIDGET_ID) {
        self._isOpen = true;
        const body = WidgetManager.getBody(self.WIDGET_ID);
        if (body && body.children.length === 0) {
          self.renderBody(body);
        }
        await self.save();
      }
    };
  }
 };
 ```
 ### Step 3: Integration Checklist
 1. `newtab.html` — Add `<script>` tag after `widgets.js` and before `data.js`
 2. `newtab.html` — Add toolbar button: `<button class="widget-toolbar-btn" data-action="your-action">`
 3. `notes.js` — Add handler in `initToolbar()`: `else if (action === 'your-action') { YourWidget.toggle(); }`
 4. `notes.js` — Preserve your key in `save()`: `if (existing && existing.yourWidget) saveData.yourWidget = existing.yourWidget;`
 5. `app.js` — Add `await YourWidget.init();` to the init sequence
 6. `main.css` — Add widget-specific styles
 7. `data.js` — Add export/import logic if your data should survive a JSON backup
 ---
 ## Widget DOM Structure
 Every widget created by `WidgetManager.create()` has this structure. Your module renders into `.widget-body` via `renderBody()` — never touch the header or resize handle.
 ```html
 <div class="widget" data-widget-id="widget_abc123"
     style="left: 120px; top: 80px; width: 280px; height: 220px;">
  <div class="widget-header">         <!-- Drag handle -->
    <span class="widget-title">Title</span>   <!-- Double-click to edit, max 20 chars -->
    <div class="widget-actions">
      <button class="widget-btn widget-minimize">─</button>
      <button class="widget-btn widget-close">✕</button>
    </div>
  </div>
  <div class="widget-body">
    <!-- Your content goes here via renderBody() -->
  </div>
  <div class="widget-resize-handle"></div>   <!-- Bottom-right, visible on hover -->
 </div>
 ```
@@ -1,22 +1,41 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
-  "name": "Hellion NewTab",
+  "name": "__MSG_extName__",
-  "version": "1.2.0",
+  "default_locale": "en",
-  "description": "Personal bookmark dashboard — local, private, no account needed. By Hellion Online Media.",
+  "version": "2.1.0",
-  "author": "Florian Wathling – hellion-media.de",
+  "description": "__MSG_extDesc__",
  "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"
+      "update_url": "https://hellion-media.de/extensions/firefox/updates.json",
      "strict_min_version": "142.0",
      "data_collection_permissions": {
        "required": [
          "none"
        ]
      }
    }
  },
  "web_accessible_resources": [
    {
      "resources": ["assets/fonts/*.woff2"],
      "matches": ["<all_urls>"]
    }
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  },
  "icons": {
    "16":  "assets/icons/icon16.png",
@@ -1,9 +1,10 @@
 {
  "manifest_version": 3,
-  "name": "Hellion NewTab",
+  "name": "__MSG_extName__",
-  "version": "1.2.0",
+  "default_locale": "en",
-  "description": "Personal bookmark dashboard — local, private, no account needed. By Hellion Online Media.",
+  "version": "2.1.0",
-  "author": "Florian Wathling – hellion-media.de",
+  "description": "__MSG_extDesc__",
  "author": "Hellion Online Media - Florian Wathling",
  "homepage_url": "https://hellion-media.de",
  "chrome_url_overrides": {
    "newtab": "newtab.html"
@@ -12,6 +13,15 @@
    "storage",
    "bookmarks"
  ],
 "web_accessible_resources": [
    {
      "resources": ["assets/fonts/*.woff2"],
      "matches": ["<all_urls>"]
    }
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  },
  "icons": {
    "16":  "assets/icons/icon16.png",
    "48":  "assets/icons/icon48.png",
@@ -0,0 +1,51 @@
 {
  "manifest_version": 3,
  "name": "__MSG_extName__",
  "default_locale": "en",
  "version": "2.1.0",
  "description": "__MSG_extDesc__",
  "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"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  },
  "icons": {
    "16": "assets/icons/icon16.png",
    "48": "assets/icons/icon48.png",
    "128": "assets/icons/icon128.png"
  }
 }
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
-<html lang="de">
+<html lang="en">
 <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>
@@ -26,21 +23,25 @@
      </div>
    </div>
    <div class="header-right">
-      <button class="btn-icon" id="btnImport" title="Bookmarks importieren (HTML)">
+      <button class="btn-icon" id="btnImport" title="Bookmarks importieren (HTML)" data-i18n-title="header.import_title">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-        Import
+        <span data-i18n="header.import">Import</span>
      </button>
-      <button class="btn-icon" id="btnAddBoard" title="Neues Board hinzufügen">
+      <button class="btn-icon" id="btnAddBoard" title="Neues Board hinzufügen" data-i18n-title="header.board_title">
        <svg width="16" height="16" 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>
-        Board
+        <span data-i18n="header.board">Board</span>
      </button>
-      <button class="btn-icon" id="btnNote" title="Schnellnotiz">
+      <button class="btn-icon" id="btnNote" title="Schnellnotiz" data-i18n-title="header.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>
-        Note
+        <span data-i18n="header.note">Note</span>
      </button>
-      <button class="btn-icon" id="btnSettings" title="Einstellungen">
+      <button class="btn-icon" id="btnTheme" title="Darstellung & Theme" data-i18n-title="header.theme_title">
        <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>
        <span data-i18n="header.theme">Darstellung</span>
      </button>
      <button class="btn-icon" id="btnSettings" title="Einstellungen" data-i18n-title="header.settings_title">
        <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
+        <span data-i18n="header.settings">Settings</span>
      </button>
    </div>
  </header>
@@ -48,27 +49,49 @@
  <!-- SEARCH BAR -->
  <div class="search-bar-wrapper" id="searchBarWrapper">
    <div class="search-bar">
-      <button class="search-engine-toggle" id="searchEngineToggle" title="Suchmaschine wechseln">
+      <button class="search-engine-toggle" id="searchEngineToggle" data-i18n-title="settings.search_engine_toggle" title="Suchmaschine wechseln">
        <span id="searchEngineIcon">G</span>
      </button>
-      <input type="text" class="search-input" id="searchInput" placeholder="Search the web…" autocomplete="off" />
+      <input type="text" class="search-input" id="searchInput" data-i18n-placeholder="search.placeholder" placeholder="Search the web…" autocomplete="off" />
-      <button class="search-submit" id="searchSubmit">
+      <button class="search-submit" id="searchSubmit" data-i18n-title="search.submit_title">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      </button>
    </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" data-i18n-title="toolbar.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" data-i18n-title="toolbar.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>
    <button class="widget-toolbar-btn" data-action="calculator" data-i18n-title="toolbar.calculator" title="Taschenrechner">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="8" y1="6" x2="16" y2="6"/><circle cx="8" cy="10" r="0.5"/><circle cx="12" cy="10" r="0.5"/><circle cx="16" cy="10" r="0.5"/><circle cx="8" cy="14" r="0.5"/><circle cx="12" cy="14" r="0.5"/><circle cx="16" cy="14" r="0.5"/><circle cx="8" cy="18" r="0.5"/><circle cx="12" cy="18" r="0.5"/><circle cx="16" cy="18" r="0.5"/></svg>
    </button>
    <button class="widget-toolbar-btn" data-action="timer" data-i18n-title="toolbar.timer" title="Timer">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/><path d="M5 3l2 2"/><path d="M19 3l-2 2"/><line x1="12" y1="1" x2="12" y2="3"/></svg>
    </button>
    <button class="widget-toolbar-btn hidden" data-action="image-ref" data-i18n-title="toolbar.imageref" title="Bild-Referenz">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
    </button>
    <button class="widget-toolbar-btn" data-action="notebook" data-i18n-title="toolbar.notebook" title="Alle Notes">
      <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>
-    <textarea class="sticky-note-body" id="stickyNoteBody" placeholder="Quick note…" spellcheck="false"></textarea>
+
  <!-- NOTEBOOK SIDEBAR -->
  <div class="notebook-overlay" id="notebookOverlay"></div>
  <aside class="notebook-panel" id="notebookPanel">
    <div class="notebook-header">
      <span class="notebook-header-title"><span data-i18n="notebook.title">Notebook</span> <span class="notebook-count" id="notebookCount">0 / 5</span></span>
      <button class="btn-close" id="btnCloseNotebook" data-i18n-title="dialog.close">✕</button>
    </div>
    <div class="notebook-slots" id="notebookSlots">
      <!-- dynamisch via JS -->
    </div>
  </aside>
  <!-- BOARDS CONTAINER -->
  <main class="boards-wrapper" id="boardsWrapper">
@@ -76,168 +99,136 @@
  </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>
  <aside class="settings-panel" id="settingsPanel">
    <div class="panel-header">
-      <span>Settings</span>
+      <span data-i18n="settings.title">Einstellungen</span>
-      <button class="btn-close" id="btnCloseSettings">✕</button>
+      <button class="btn-close" id="btnCloseSettings" data-i18n-title="dialog.close">✕</button>
    </div>
    <div class="panel-body">
-      <!-- APPEARANCE -->
+      <!-- SPRACHE -->
-      <section class="settings-section">
+      <section class="settings-section" data-section="language">
-        <!-- 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">
+          <span data-i18n="settings.section.display">DARSTELLUNG</span>
-          <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>
            <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 & 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>
        <h3 class="settings-section-title">APPEARANCE</h3>
          <div class="setting-row">
            <div class="setting-info">
-            <span class="setting-label">Compact mode</span>
+              <span class="setting-label" data-i18n="settings.language">Sprache</span>
-            <span class="setting-desc">Reduce spacing to show more bookmarks</span>
+              <span class="setting-desc" data-i18n="settings.language.desc">Anzeigesprache wählen</span>
            </div>
-          <label class="toggle"><input type="checkbox" id="settingCompact" /><span class="slider"></span></label>
+            <select class="select-input" id="settingLanguage">
-        </div>
+              <option value="auto" data-i18n="settings.language.auto">Automatisch</option>
-
+              <option value="de">Deutsch</option>
-        <div class="setting-row">
+              <option value="en">English</option>
          <div class="setting-info">
            <span class="setting-label">Shorten long titles</span>
            <span class="setting-desc">Shorten title to one line with "…"</span>
          </div>
          <label class="toggle"><input type="checkbox" id="settingShorten" /><span class="slider"></span></label>
        </div>
        <div class="setting-row">
          <div class="setting-info">
            <span class="setting-label">Background image</span>
            <span class="setting-desc">Custom wallpaper URL or upload</span>
          </div>
          <button class="btn-small" id="btnChangeBg">Change</button>
        </div>
        <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" />
        </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 -->
+      <!-- WIDGETS -->
-      <section class="settings-section">
+      <section class="settings-section" data-section="widgets">
-        <h3 class="settings-section-title">ABOUT</h3>
+        <button class="settings-section-title" type="button">
          <span class="section-chevron">▸</span>
          <span data-i18n="settings.section.widgets">WIDGETS</span>
        </button>
        <div class="section-content">
          <div class="setting-row">
            <div class="setting-info">
              <span class="setting-label" data-i18n="settings.toolbar_pos">Toolbar-Position</span>
              <span class="setting-desc" data-i18n="settings.toolbar_pos.desc">Widget-Toolbar links oder rechts anzeigen</span>
            </div>
            <select class="select-input" id="settingToolbarPos">
              <option value="right" selected data-i18n="settings.toolbar_pos.right">Rechts</option>
              <option value="left" data-i18n="settings.toolbar_pos.left">Links</option>
            </select>
          </div>
          <div class="setting-row">
            <div class="setting-info">
              <span class="setting-label" data-i18n="settings.image_ref">Bild-Referenz Widgets</span>
              <span class="setting-desc" data-i18n="settings.image_ref.desc">Bilder als Referenz anzeigen (nur aktuelle Session)</span>
            </div>
            <label class="toggle">
              <input type="checkbox" id="settingImageRef">
              <span class="slider"></span>
            </label>
          </div>
        </div>
      </section>
      <!-- DATEN & HILFE -->
      <section class="settings-section" data-section="data">
        <button class="settings-section-title" type="button">
          <span class="section-chevron">▸</span>
          <span data-i18n="settings.section.data">DATEN &amp; HILFE</span>
        </button>
        <div class="section-content">
          <div class="setting-row">
            <div class="setting-info">
              <span class="setting-label" data-i18n="settings.export">Backup exportieren</span>
              <span class="setting-desc" data-i18n="settings.export.desc">Alle Boards, Notes und Einstellungen als JSON sichern</span>
            </div>
            <button class="btn-small" id="btnExportJSON" data-i18n="settings.export.btn">Export</button>
          </div>
          <div class="setting-row">
            <div class="setting-info">
              <span class="setting-label" data-i18n="settings.import">Backup importieren</span>
              <span class="setting-desc" data-i18n="settings.import.desc">JSON-Backup wiederherstellen</span>
            </div>
            <button class="btn-small" id="btnImportJSON" data-i18n="header.import">Import</button>
            <input type="file" id="jsonImportInput" accept=".json" class="hidden" />
          </div>
          <div class="setting-row" id="browserImportRow">
            <div class="setting-info">
              <span class="setting-label" data-i18n="settings.browser_import">Browser-Lesezeichen</span>
              <span class="setting-desc" data-i18n="settings.browser_import.desc">Lesezeichen direkt aus dem Browser importieren</span>
            </div>
            <button class="btn-small" id="btnBrowserImport" data-i18n="header.import">Import</button>
          </div>
          <div class="setting-row">
            <div class="setting-info">
              <span class="setting-label" data-i18n="settings.onboarding">Onboarding wiederholen</span>
              <span class="setting-desc" data-i18n="settings.onboarding.desc">Willkommens-Tour erneut anzeigen</span>
            </div>
            <button class="btn-small" id="btnRestartOnboarding" data-i18n="settings.onboarding_btn">Start</button>
          </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>
          <span data-i18n="settings.section.danger">DANGER ZONE</span>
        </button>
        <div class="section-content">
          <div class="setting-row">
            <div class="setting-info">
              <span class="setting-label" data-i18n="settings.reset">Alles zurücksetzen</span>
              <span class="setting-desc" data-i18n="settings.reset.desc">Löscht alle Boards, Notes und Einstellungen</span>
            </div>
            <button class="btn-danger" id="btnResetAll" data-i18n="settings.reset_btn">Reset</button>
          </div>
        </div>
      </section>
    </div>
    <!-- ABOUT — fixiert am unteren Rand -->
    <div class="panel-footer">
      <div class="about-block">
-          <div class="about-logo">⬡ HELLION NEWTAB</div>
+        <div class="about-logo" data-i18n="about.title">⬡ HELLION NEWTAB</div>
-          <div class="about-version">Version 1.2.0 · by Hellion Online Media</div>
+        <div class="about-version">Version 2.1.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
+            <span data-i18n="about.impressum">Impressum</span>
          </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>
@@ -248,34 +239,42 @@
        <div class="about-divider"></div>
        <div class="about-info-row">
-            <span class="about-info-label">Entwickler</span>
+          <span class="about-info-label" data-i18n="about.developer">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-label" data-i18n="about.company">Unternehmen</span>
          <span class="about-info-value">Hellion Online Media</span>
        </div>
        <div class="about-info-row">
-            <span class="about-info-label">Lizenz</span>
+          <span class="about-info-label" data-i18n="about.license">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>
+          <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-label" data-i18n="about.storage">Datenspeicherung</span>
-            <span class="about-info-value">100% lokal · Kein Server · Kein Account</span>
+          <span class="about-info-value" data-i18n="about.storage.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>
+          <span class="about-info-label about-info-label-block" data-i18n="about.bugreport">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" data-i18n="about.support">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" style="display:block;margin-bottom:6px">Kompatible Browser</span>
+          <span class="about-info-label about-info-label-block" data-i18n="about.browsers">Kompatible Browser</span>
          <div class="about-browser-tags">
            <span class="browser-tag">Chrome</span>
            <span class="browser-tag">Edge</span>
@@ -287,62 +286,166 @@
          </div>
        </div>
      </div>
-      </section>
+    </div>
  </aside>
-      <!-- DATA -->
+  <!-- THEME PICKER MODAL -->
-      <section class="settings-section">
+  <div class="modal-overlay" id="themeOverlay">
-        <h3 class="settings-section-title">DATA</h3>
+    <div class="theme-modal" id="themeModal">
      <div class="modal-header">
        <span data-i18n="modal.theme_header">Darstellung</span>
        <button class="btn-close" id="btnCloseTheme" data-i18n-title="dialog.close">✕</button>
      </div>
      <div class="theme-grid">
        <div class="theme-card active" data-value="nebula">
          <img class="theme-card-img" src="assets/themes/bg-nebula.webp" alt="Nebula" />
          <span class="theme-card-label">Nebula</span>
          <span class="theme-card-check">✓</span>
        </div>
        <div class="theme-card" data-value="crescent">
          <img class="theme-card-img" src="assets/themes/bg-crescent.webp" alt="Crescent" />
          <span class="theme-card-label">Crescent</span>
          <span class="theme-card-check">✓</span>
        </div>
        <div class="theme-card" data-value="event-horizon">
          <img class="theme-card-img" src="assets/themes/bg-event-horizon.webp" 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.webp" alt="Julia &amp; Jin" />
          <span class="theme-card-label">Julia &amp; Jin</span>
          <span class="theme-card-check">✓</span>
        </div>
        <div class="theme-card" data-value="sc-sunset">
          <img class="theme-card-img" src="assets/themes/bg-sc-sunset.webp" alt="SC Sunset" />
          <span class="theme-card-label">SC Sunset</span>
          <span class="theme-card-check">✓</span>
        </div>
        <div class="theme-card" data-value="hellion-hud">
          <img class="theme-card-img" src="assets/themes/bg-hellion-hud.webp" alt="Hellion HUD" />
          <span class="theme-card-label">HUD</span>
          <span class="theme-card-check">✓</span>
        </div>
        <div class="theme-card" data-value="hellion-energy">
          <img class="theme-card-img" src="assets/themes/bg-hellion-energy.webp" alt="Hellion Energy" />
          <span class="theme-card-label">Energy</span>
          <span class="theme-card-check">✓</span>
        </div>
        <div class="theme-card" data-value="satisfactory">
          <img class="theme-card-img" src="assets/themes/bg-satisfactory.webp" alt="Satisfactory" />
          <span class="theme-card-label">Satisfactory</span>
          <span class="theme-card-check">✓</span>
        </div>
        <div class="theme-card" data-value="avorion">
          <img class="theme-card-img" src="assets/themes/bg-avorion.webp" alt="Avorion" />
          <span class="theme-card-label">Avorion</span>
          <span class="theme-card-check">✓</span>
        </div>
        <div class="theme-card" data-value="hellion-stealth">
          <img class="theme-card-img" src="assets/themes/bg-scPolaris.webp" alt="Hellion Stealth" />
          <span class="theme-card-label">Stealth</span>
          <span class="theme-card-check">✓</span>
        </div>
      </div>
      <div class="theme-modal-section">
        <h3 class="settings-section-title" data-i18n="settings.section.bg">HINTERGRUND</h3>
        <div class="setting-row">
          <div class="setting-info">
-            <span class="setting-label">Export Boards</span>
+            <span class="setting-label" data-i18n="settings.bg_url">Bild-URL</span>
-            <span class="setting-desc">Alle Boards als JSON sichern</span>
+            <span class="setting-desc" data-i18n="settings.bg_url.desc">Eigenes Hintergrundbild per URL</span>
          </div>
-          <button class="btn-small" id="btnExportJSON">Export</button>
+          <button class="btn-small" id="btnChangeBg" data-i18n="settings.bg_change">Ändern</button>
        </div>
        <div class="setting-row hidden" id="bgInputRow">
          <input type="text" class="text-input full-width" id="bgUrlInput" placeholder="https://... oder leer für Standard" />
          <button class="btn-small" id="btnApplyBg" data-i18n="settings.bg_apply">Übernehmen</button>
        </div>
        <div class="setting-row">
          <div class="setting-info">
-            <span class="setting-label">Import Boards</span>
+            <span class="setting-label" data-i18n="settings.bg_upload">Datei hochladen</span>
-            <span class="setting-desc">JSON-Backup wiederherstellen</span>
+            <span class="setting-desc" data-i18n="settings.bg_upload.desc">Lokales Bild als Hintergrund verwenden</span>
          </div>
-          <button class="btn-small" id="btnImportJSON">Import</button>
+          <button class="btn-small" id="btnBgFile" data-i18n="settings.bg_upload_btn">Upload</button>
-          <input type="file" id="jsonImportInput" accept=".json" style="display:none" />
+          <input type="file" id="bgFileInput" accept="image/*" class="hidden" />
        </div>
      </div>
      <div class="theme-modal-section">
        <h3 class="settings-section-title" data-i18n="settings.section.display">DARSTELLUNG</h3>
        <div class="setting-row">
          <div class="setting-info">
            <span class="setting-label" data-i18n="settings.compact">Kompaktmodus</span>
            <span class="setting-desc" data-i18n="settings.compact.desc">Weniger Abstand für mehr Bookmarks</span>
          </div>
          <label class="toggle"><input type="checkbox" id="settingCompact" /><span class="slider"></span></label>
        </div>
        <div class="setting-row">
          <div class="setting-info">
-            <span class="setting-label">Suchleiste anzeigen</span>
+            <span class="setting-label" data-i18n="settings.shorten">Lange Titel kürzen</span>
-            <span class="setting-desc">Suchleiste unter dem Header ein/aus</span>
+            <span class="setting-desc" data-i18n="settings.shorten.desc">Titel auf eine Zeile mit „…" kürzen</span>
          </div>
          <label class="toggle"><input type="checkbox" id="settingShorten" /><span class="slider"></span></label>
        </div>
        <div class="setting-row">
          <div class="setting-info">
            <span class="setting-label" data-i18n="settings.search">Suchleiste anzeigen</span>
            <span class="setting-desc" data-i18n="settings.search.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-label" data-i18n="settings.newtab">Links in neuem Tab</span>
-            <span class="setting-desc">Deletes all boards and bookmarks</span>
+            <span class="setting-desc" data-i18n="settings.newtab.desc">Bookmarks in neuem Browser-Tab öffnen</span>
          </div>
          <label class="toggle"><input type="checkbox" id="settingNewTab" checked /><span class="slider"></span></label>
        </div>
        <div class="setting-row">
          <div class="setting-info">
            <span class="setting-label" data-i18n="settings.showdesc">Beschreibungen anzeigen</span>
            <span class="setting-desc" data-i18n="settings.showdesc.desc">Gespeicherte Beschreibung unter Bookmarks</span>
          </div>
          <label class="toggle"><input type="checkbox" id="settingShowDesc" /><span class="slider"></span></label>
        </div>
        <div class="setting-row">
          <div class="setting-info">
            <span class="setting-label" data-i18n="settings.hideextra">Bookmarks ausblenden</span>
            <span class="setting-desc" data-i18n="settings.hideextra.desc">Überzählige Bookmarks in langen Boards verstecken</span>
          </div>
          <label class="toggle"><input type="checkbox" id="settingHideExtra" /><span class="slider"></span></label>
        </div>
        <div class="setting-row" id="visibleCountRow">
          <div class="setting-info">
            <span class="setting-label" data-i18n="settings.visible_count">Sichtbare Bookmarks</span>
            <span class="setting-desc" data-i18n="settings.visible_count.desc">Anzahl vor dem Ausblenden</span>
          </div>
          <select class="select-input" id="settingVisibleCount">
            <option value="5">5</option>
            <option value="10" selected>10</option>
            <option value="20">20</option>
          </select>
        </div>
      </div>
          <button class="btn-danger" id="btnResetAll">Reset</button>
    </div>
      </section>
  </div>
  </aside>
  <!-- ADD BOARD MODAL -->
  <div class="modal-overlay" id="addBoardOverlay">
    <div class="modal">
      <div class="modal-header">
-        <span>New Board</span>
+        <span data-i18n="modal.new_board">New Board</span>
-        <button class="btn-close" id="btnCancelBoard">✕</button>
+        <button class="btn-close" id="btnCancelBoard" data-i18n-title="dialog.close">✕</button>
      </div>
      <div class="modal-body">
-        <input type="text" class="text-input full-width" id="newBoardName" placeholder="Board name..." maxlength="40" />
+        <input type="text" class="text-input full-width" id="newBoardName" data-i18n-placeholder="modal.board_name" placeholder="Board name..." maxlength="40" />
      </div>
      <div class="modal-footer">
-        <button class="btn-primary" id="btnConfirmBoard">Create</button>
+        <button class="btn-primary" id="btnConfirmBoard" data-i18n="modal.create">Create</button>
      </div>
    </div>
  </div>
@@ -351,16 +454,16 @@
  <div class="modal-overlay" id="addBookmarkOverlay">
    <div class="modal">
      <div class="modal-header">
-        <span>New Bookmark</span>
+        <span data-i18n="modal.new_bookmark">New Bookmark</span>
-        <button class="btn-close" id="btnCancelBookmark">✕</button>
+        <button class="btn-close" id="btnCancelBookmark" data-i18n-title="dialog.close">✕</button>
      </div>
      <div class="modal-body">
-        <input type="text" class="text-input full-width" id="newBmTitle" placeholder="Title..." maxlength="60" />
+        <input type="text" class="text-input full-width" id="newBmTitle" data-i18n-placeholder="modal.bm_title" 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" data-i18n-placeholder="modal.bm_desc" placeholder="Description (optional)" />
      </div>
      <div class="modal-footer">
-        <button class="btn-primary" id="btnConfirmBookmark">Add</button>
+        <button class="btn-primary" id="btnConfirmBookmark" data-i18n="modal.bm_add">Add</button>
      </div>
    </div>
  </div>
@@ -369,22 +472,31 @@
  <div class="modal-overlay" id="renameOverlay">
    <div class="modal">
      <div class="modal-header">
-        <span>Rename</span>
+        <span data-i18n="modal.rename">Rename</span>
-        <button class="btn-close" id="btnCancelRename">✕</button>
+        <button class="btn-close" id="btnCancelRename" data-i18n-title="dialog.close">✕</button>
      </div>
      <div class="modal-body">
-        <input type="text" class="text-input full-width" id="renameInput" placeholder="New name..." maxlength="60" />
+        <input type="text" class="text-input full-width" id="renameInput" data-i18n-placeholder="modal.rename_placeholder" placeholder="New name..." maxlength="60" />
      </div>
      <div class="modal-footer">
-        <button class="btn-primary" id="btnConfirmRename">Rename</button>
+        <button class="btn-primary" id="btnConfirmRename" data-i18n="modal.rename_confirm">Rename</button>
      </div>
    </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>
  <!-- i18n (nach state.js, vor allen Modulen die t() nutzen könnten) -->
  <script src="src/js/i18n.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 +504,20 @@
  <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/calculator.js"></script>
  <script src="src/js/calc-scientific.js"></script>
  <script src="src/js/calc-converter.js"></script>
  <script src="src/js/calc-satisfactory.js"></script>
  <script src="src/js/calc-factorio.js"></script>
  <script src="src/js/calc-stationeers.js"></script>
  <script src="src/js/timer.js"></script>
  <script src="src/js/image-ref.js"></script>
  <script src="src/js/bookmark-import.js"></script>
  <script src="src/js/data.js"></script>
  <!-- Onboarding -->
  <script src="src/js/onboarding.js"></script>
  <!-- Einstiegspunkt zuletzt -->
  <script src="src/js/app.js"></script>
 </body>
@@ -10,31 +10,129 @@ async function init() {
  boards = savedBoards ?? getDefaultBoards();
  if (savedSettings) Object.assign(settings, savedSettings);
  I18n.init();
  applySettings();
  renderBoards();
  startClock();
  bindGlobalEvents();
  bindSettingsEvents();
  initSearch();
-  initStickyNote();
+  await migrateSticky();
  await Notes.init();
  await Calculator.init();
  await Timer.init();
  await ImageRef.init();
  BrowserBookmarkImport.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(
    t('app.backup_reminder'),
    { type: 'warning', title: t('app.backup_reminder.title'), confirmText: t('app.backup_now'), cancelText: t('app.backup_later') }
  );
  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 calcHistory = (widgetData && widgetData.calculator) ? widgetData.calculator.history || [] : [];
    const timerPresets = (widgetData && widgetData.timer) ? widgetData.timer.presets || [] : [];
    const data = { version: '2.1.0', exported: new Date().toISOString(), boards, settings, notes: notesData, calculator: calcHistory, timerPresets };
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    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 ----
 function startClock() {
-  const DAYS   = ['So','Mo','Di','Mi','Do','Fr','Sa'];
+  const DAY_KEYS   = ['clock.days.sun','clock.days.mon','clock.days.tue','clock.days.wed','clock.days.thu','clock.days.fri','clock.days.sat'];
-  const MONTHS = ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'];
+  const MONTH_KEYS = ['clock.months.jan','clock.months.feb','clock.months.mar','clock.months.apr','clock.months.may','clock.months.jun','clock.months.jul','clock.months.aug','clock.months.sep','clock.months.oct','clock.months.nov','clock.months.dec'];
  function tick() {
    const now = new Date();
    document.getElementById('clock').textContent =
      `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`;
    document.getElementById('date').textContent =
-      `${DAYS[now.getDay()]}, ${String(now.getDate()).padStart(2,'0')}. ${MONTHS[now.getMonth()]}`;
+      `${t(DAY_KEYS[now.getDay()])}, ${String(now.getDate()).padStart(2,'0')}. ${t(MONTH_KEYS[now.getMonth()])}`;
  }
  tick();
-  setInterval(tick, 1000);
+  const clockInterval = setInterval(tick, 1000);
 }
 // ---- GLOBALE EVENTS (Header-Buttons, Modals, Import) ----
@@ -50,12 +148,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(t('app.no_bookmarks'), { type: 'warning', title: t('app.import_title') });
      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(
      t('app.html_import_success', { count: imported.length, total: imported.reduce((s,b) => s + b.bookmarks.length, 0) }),
      { type: 'success', title: t('app.import_success_title') }
    );
  });
  // Add Board Modal
@@ -86,7 +190,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(t('app.invalid_url'), { type: 'warning', title: t('app.invalid_url.title') }); 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 = t('boards.add_board');
    const importStrong = document.createElement('strong');
    importStrong.className = 'accent-text';
    importStrong.textContent = t('boards.import');
    empty.append(
      t('boards.empty_state_pre'), boardStrong, t('boards.empty_state_mid'), importStrong, t('boards.empty_state_post')
    );
    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 = t('boards.drag_title');
-        <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 ? t('boards.unblur') : t('boards.blur');
  btnBlur.textContent = '\uD83D\uDD12';
  const btnRename = document.createElement('button');
  btnRename.className = 'board-action-btn btn-rename-board';
  btnRename.title = t('boards.rename');
  btnRename.textContent = '\u270E';
  const btnDelete = document.createElement('button');
  btnDelete.className = 'board-action-btn btn-delete-board';
  btnDelete.title = t('boards.delete');
  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 ? t('boards.unblur') : t('boards.blur');
    await saveBoards();
  });
  blurOverlay.addEventListener('click', async () => {
    board.blurred = false;
    div.classList.remove('blurred');
-    header.querySelector('.btn-blur-board').title = 'Blur (privat)';
+    btnBlur.title = t('boards.blur');
    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(
      t('boards.delete_confirm', { title: board.title }),
      { type: 'danger', title: t('boards.delete_confirm.title'), confirmText: t('boards.delete') }
    );
    if (ok) {
      boards = boards.filter(b => b.id !== board.id);
-      saveBoards().then(renderBoards);
+      await saveBoards();
      renderBoards();
    }
  });
@@ -108,16 +180,16 @@ function createBoardEl(board) {
    let hiddenEls = [];
    const showMoreBtn = document.createElement('button');
    showMoreBtn.className = 'show-more-btn';
-    showMoreBtn.textContent = `Show ${hidden.length} more…`;
+    showMoreBtn.textContent = t('boards.show_more', { count: hidden.length });
    showMoreBtn.addEventListener('click', () => {
      if (!expanded) {
        hidden.forEach(bm => { const el = createBmEl(bm); hiddenEls.push(el); list.appendChild(el); });
-        showMoreBtn.textContent = 'Show less';
+        showMoreBtn.textContent = t('boards.show_less');
        expanded = true;
      } else {
        hiddenEls.forEach(el => el.remove());
        hiddenEls = [];
-        showMoreBtn.textContent = `Show ${hidden.length} more…`;
+        showMoreBtn.textContent = t('boards.show_more', { count: hidden.length });
        expanded = false;
      }
    });
@@ -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(t('boards.add_link'));
  addBtn.addEventListener('click', () => openAddBookmarkModal(board.id));
  div.appendChild(addBtn);
@@ -142,20 +215,11 @@ function createBmEl(bm) {
  li.dataset.bmUrl = bm.url;
  li.draggable = true;
-  const favicon = document.createElement('img');
+  const favicon = document.createElement('div');
-  favicon.className = 'bm-favicon';
+  favicon.className = 'bm-favicon-local';
-  favicon.width = 14;
+  favicon.textContent = bm.title.charAt(0).toUpperCase();
-  favicon.height = 14;
+  const hue = (bm.title.charCodeAt(0) * 137) % 360;
-  favicon.src = getFaviconUrl(bm.url);
+  favicon.style.backgroundColor = `hsl(${hue}, 45%, 35%)`;
  favicon.addEventListener('error', function() {
    this.style.display = 'none';
    this.nextElementSibling.style.display = 'flex';
  });
  const fallback = document.createElement('div');
  fallback.className = 'bm-favicon-fallback';
  fallback.style.display = 'none';
  fallback.textContent = bm.title.charAt(0).toUpperCase();
  const textDiv = document.createElement('div');
  textDiv.className = 'bm-text';
@@ -171,11 +235,10 @@ function createBmEl(bm) {
  const deleteBtn = document.createElement('button');
  deleteBtn.className = 'bm-delete';
-  deleteBtn.title = 'Entfernen';
+  deleteBtn.title = t('boards.remove_bookmark');
  deleteBtn.textContent = '✕';
  li.appendChild(favicon);
  li.appendChild(fallback);
  li.appendChild(textDiv);
  li.appendChild(deleteBtn);
@@ -0,0 +1,303 @@
 /* =============================================
   HELLION NEWTAB — bookmark-import.js
   Direkt-Import von Browser-Lesezeichen
   via chrome.bookmarks.getTree() / browser.bookmarks.getTree()
   ============================================= */
 const BrowserBookmarkImport = {
  /** Initialisiert den Import-Button */
  init() {
    const btn = document.getElementById('btnBrowserImport');
    const row = document.getElementById('browserImportRow');
    if (!btn || !row) return;
    // API-Verfuegbarkeit pruefen (nicht vorhanden im normalen Browser-Tab)
    const api = this._getApi();
    if (!api) {
      row.style.display = 'none';
      return;
    }
    btn.addEventListener('click', () => this._openFolderModal());
  },
  /**
   * Gibt die Bookmarks-API zurueck (Chrome oder Firefox)
   * @returns {object|null}
   */
  _getApi() {
    if (typeof chrome !== 'undefined' && chrome.bookmarks) return chrome.bookmarks;
    if (typeof browser !== 'undefined' && browser.bookmarks) return browser.bookmarks;
    return null;
  },
  /** Oeffnet das Ordner-Auswahl Modal */
  async _openFolderModal() {
    const api = this._getApi();
    if (!api) return;
    let tree;
    try {
      tree = await api.getTree();
    } catch (err) {
      await HellionDialog.alert(
        t('bm_import.no_access'),
        { type: 'warning', title: t('bm_import.title') }
      );
      return;
    }
    const folders = this._extractFolders(tree[0]);
    if (folders.length === 0) {
      await HellionDialog.alert(
        t('bm_import.no_folders'),
        { type: 'warning', title: t('bm_import.title') }
      );
      return;
    }
    this._renderModal(folders);
  },
  /**
   * Extrahiert alle Ordner rekursiv aus dem Bookmark-Baum
   * @param {object} node - Bookmark-Tree Node
   * @param {number} depth - Einrueckungstiefe
   * @returns {Array}
   */
  _extractFolders(node, depth) {
    if (depth === undefined) depth = 0;
    const result = [];
    if (!node.children) return result;
    for (const child of node.children) {
      if (child.children) {
        const bookmarkCount = child.children.filter(function(c) { return c.url; }).length;
        const subfolderCount = child.children.filter(function(c) { return c.children; }).length;
        result.push({
          id: child.id,
          title: child.title || t('bm_import.unnamed'),
          depth: depth,
          bookmarkCount: bookmarkCount,
          subfolderCount: subfolderCount,
          node: child
        });
        const subFolders = this._extractFolders(child, depth + 1);
        for (const sf of subFolders) {
          result.push(sf);
        }
      }
    }
    return result;
  },
  /**
   * Rendert das Ordner-Auswahl Modal
   * @param {Array} folders - Liste der Ordner
   */
  _renderModal(folders) {
    // Overlay
    const overlay = document.createElement('div');
    overlay.className = 'bm-import-overlay';
    overlay.id = 'bmImportOverlay';
    const modal = document.createElement('div');
    modal.className = 'bm-import-modal';
    // Header
    const header = document.createElement('div');
    header.className = 'bm-import-header';
    const title = document.createElement('span');
    title.textContent = t('bm_import.modal_title');
    header.appendChild(title);
    const closeBtn = document.createElement('button');
    closeBtn.className = 'bm-import-close';
    closeBtn.textContent = '\u00D7';
    closeBtn.addEventListener('click', () => this._closeModal());
    header.appendChild(closeBtn);
    modal.appendChild(header);
    // Info
    const info = document.createElement('div');
    info.className = 'bm-import-info';
    info.textContent = t('bm_import.info');
    modal.appendChild(info);
    // Ordner-Liste
    const list = document.createElement('div');
    list.className = 'bm-import-list';
    for (const folder of folders) {
      const row = document.createElement('label');
      row.className = 'bm-import-folder';
      row.style.paddingLeft = (12 + folder.depth * 20) + 'px';
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.className = 'bm-import-checkbox';
      checkbox.dataset.folderId = folder.id;
      row.appendChild(checkbox);
      const label = document.createElement('span');
      label.className = 'bm-import-folder-name';
      label.textContent = folder.title;
      row.appendChild(label);
      const meta = document.createElement('span');
      meta.className = 'bm-import-folder-meta';
      const parts = [];
      if (folder.bookmarkCount > 0) {
        parts.push(t('bm_import.link_count', { count: folder.bookmarkCount }));
      }
      if (folder.subfolderCount > 0) {
        parts.push(t('bm_import.folder_count', { count: folder.subfolderCount }));
      }
      if (parts.length === 0) {
        parts.push(t('bm_import.empty'));
      }
      meta.textContent = parts.join(', ');
      row.appendChild(meta);
      list.appendChild(row);
    }
    modal.appendChild(list);
    // Footer
    const footer = document.createElement('div');
    footer.className = 'bm-import-footer';
    const selectAll = document.createElement('button');
    selectAll.className = 'btn-secondary';
    selectAll.textContent = t('bm_import.select_all');
    selectAll.addEventListener('click', () => {
      const boxes = list.querySelectorAll('.bm-import-checkbox');
      const allChecked = Array.from(boxes).every(function(cb) { return cb.checked; });
      boxes.forEach(function(cb) { cb.checked = !allChecked; });
      selectAll.textContent = allChecked ? t('bm_import.select_all') : t('bm_import.deselect_all');
    });
    footer.appendChild(selectAll);
    const importBtn = document.createElement('button');
    importBtn.className = 'btn-primary';
    importBtn.textContent = t('bm_import.import_btn');
    importBtn.addEventListener('click', () => this._importSelected(folders));
    footer.appendChild(importBtn);
    modal.appendChild(footer);
    overlay.appendChild(modal);
    document.body.appendChild(overlay);
    // Animation
    requestAnimationFrame(() => overlay.classList.add('active'));
  },
  /** Schliesst das Modal */
  _closeModal() {
    const overlay = document.getElementById('bmImportOverlay');
    if (!overlay) return;
    overlay.classList.remove('active');
    setTimeout(() => overlay.remove(), 250);
  },
  /**
   * Importiert die ausgewaehlten Ordner als Boards
   * @param {Array} folders - Alle Ordner
   */
  async _importSelected(folders) {
    const checkboxes = document.querySelectorAll('.bm-import-checkbox:checked');
    if (checkboxes.length === 0) {
      await HellionDialog.alert(
        t('bm_import.no_selection'),
        { type: 'warning', title: t('bm_import.title') }
      );
      return;
    }
    // Bestehende URLs sammeln fuer Duplikat-Erkennung
    const existingUrls = new Set();
    for (const board of boards) {
      for (const bm of board.bookmarks) {
        existingUrls.add(bm.url);
      }
    }
    const selectedIds = new Set();
    checkboxes.forEach(function(cb) { selectedIds.add(cb.dataset.folderId); });
    let totalImported = 0;
    let totalSkipped = 0;
    let boardsCreated = 0;
    for (const folder of folders) {
      if (!selectedIds.has(folder.id)) continue;
      const bookmarks = [];
      for (const child of folder.node.children) {
        if (!child.url) continue;
        // Nur http/https URLs
        try {
          const parsed = new URL(child.url);
          if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') continue;
        } catch (e) {
          continue;
        }
        // Duplikat-Check
        if (existingUrls.has(child.url)) {
          totalSkipped++;
          continue;
        }
        bookmarks.push({
          id: uid(),
          title: child.title || child.url,
          url: child.url,
          desc: ''
        });
        existingUrls.add(child.url);
        totalImported++;
      }
      if (bookmarks.length === 0) continue;
      boards.push({
        id: uid(),
        title: folder.title,
        bookmarks: bookmarks,
        blurred: false
      });
      boardsCreated++;
    }
    if (boardsCreated > 0) {
      await saveBoards();
      renderBoards();
    }
    this._closeModal();
    // Ergebnis-Dialog
    const lines = [];
    lines.push(t('bm_import.boards_created', { count: boardsCreated }));
    lines.push(t('bm_import.bookmarks_imported', { count: totalImported }));
    if (totalSkipped > 0) {
      lines.push(t('bm_import.duplicates_skipped', { count: totalSkipped }));
    }
    await HellionDialog.alert(
      lines.join('\n'),
      { type: 'success', title: t('bm_import.success_title') }
    );
  }
 };
@@ -0,0 +1,344 @@
 /* =============================================
   HELLION NEWTAB — calc-converter.js
   Unit-Converter Modus für Calculator Widget
   ============================================= */
 (function() {
  'use strict';
  const CATEGORIES = {
    length: {
      titleKey: 'calculator.conv.cat.length',
      baseUnit: 'm',
      units: {
        mm:  { toBase: v => v / 1000,       fromBase: v => v * 1000 },
        cm:  { toBase: v => v / 100,        fromBase: v => v * 100 },
        m:   { toBase: v => v,              fromBase: v => v },
        km:  { toBase: v => v * 1000,       fromBase: v => v / 1000 },
        in:  { toBase: v => v * 0.0254,     fromBase: v => v / 0.0254 },
        ft:  { toBase: v => v * 0.3048,     fromBase: v => v / 0.3048 },
        yd:  { toBase: v => v * 0.9144,     fromBase: v => v / 0.9144 },
        mi:  { toBase: v => v * 1609.344,   fromBase: v => v / 1609.344 }
      }
    },
    weight: {
      titleKey: 'calculator.conv.cat.weight',
      baseUnit: 'g',
      units: {
        mg:  { toBase: v => v / 1000,       fromBase: v => v * 1000 },
        g:   { toBase: v => v,              fromBase: v => v },
        kg:  { toBase: v => v * 1000,       fromBase: v => v / 1000 },
        t:   { toBase: v => v * 1000000,    fromBase: v => v / 1000000 },
        oz:  { toBase: v => v * 28.3495,    fromBase: v => v / 28.3495 },
        lb:  { toBase: v => v * 453.592,    fromBase: v => v / 453.592 }
      }
    },
    temperature: {
      titleKey: 'calculator.conv.cat.temperature',
      baseUnit: null,
      units: { '\u00B0C': null, '\u00B0F': null, 'K': null },
      convert(value, from, to) {
        if (from === to) return value;
        const key = from + '_' + to;
        const conversions = {
          '\u00B0C_\u00B0F': v => (v * 9 / 5) + 32,
          '\u00B0C_K':  v => v + 273.15,
          '\u00B0F_\u00B0C': v => (v - 32) * 5 / 9,
          '\u00B0F_K':  v => (v - 32) * 5 / 9 + 273.15,
          'K_\u00B0C':  v => v - 273.15,
          'K_\u00B0F':  v => (v - 273.15) * 9 / 5 + 32
        };
        const fn = conversions[key];
        return fn ? fn(value) : null;
      }
    },
    volume: {
      titleKey: 'calculator.conv.cat.volume',
      baseUnit: 'ml',
      units: {
        ml:       { toBase: v => v,               fromBase: v => v },
        L:        { toBase: v => v * 1000,         fromBase: v => v / 1000 },
        'm\u00B3':{ toBase: v => v * 1000000,      fromBase: v => v / 1000000 },
        'gal(US)':{ toBase: v => v * 3785.41,      fromBase: v => v / 3785.41 },
        'gal(UK)':{ toBase: v => v * 4546.09,      fromBase: v => v / 4546.09 },
        'ft\u00B3':{ toBase: v => v * 28316.8,     fromBase: v => v / 28316.8 }
      }
    },
    speed: {
      titleKey: 'calculator.conv.cat.speed',
      baseUnit: 'm/s',
      units: {
        'm/s':  { toBase: v => v,             fromBase: v => v },
        'km/h': { toBase: v => v / 3.6,      fromBase: v => v * 3.6 },
        'mph':  { toBase: v => v * 0.44704,   fromBase: v => v / 0.44704 },
        'kn':   { toBase: v => v * 0.514444,  fromBase: v => v / 0.514444 }
      }
    },
    area: {
      titleKey: 'calculator.conv.cat.area',
      baseUnit: 'm\u00B2',
      units: {
        'mm\u00B2': { toBase: v => v / 1000000,     fromBase: v => v * 1000000 },
        'cm\u00B2': { toBase: v => v / 10000,        fromBase: v => v * 10000 },
        'm\u00B2':  { toBase: v => v,                fromBase: v => v },
        'km\u00B2': { toBase: v => v * 1000000,      fromBase: v => v / 1000000 },
        'ha':       { toBase: v => v * 10000,         fromBase: v => v / 10000 },
        'acre':     { toBase: v => v * 4046.86,       fromBase: v => v / 4046.86 },
        'ft\u00B2': { toBase: v => v * 0.092903,     fromBase: v => v / 0.092903 },
        'in\u00B2': { toBase: v => v * 0.00064516,   fromBase: v => v / 0.00064516 }
      }
    }
  };
  const CATEGORY_ORDER = ['length', 'weight', 'temperature', 'volume', 'speed', 'area'];
  let _currentCategory = 'length';
  let _fromUnit = 'cm';
  let _toUnit = 'in';
  let _fromInput = null;
  let _toInput = null;
  let _refEl = null;
  /**
   * Converts a value from one unit to another within the current category.
   * @param {number} value
   * @param {string} from
   * @param {string} to
   * @returns {number|null}
   */
  function convert(value, from, to) {
    const cat = CATEGORIES[_currentCategory];
    if (!cat) return null;
    if (cat.convert) return cat.convert(value, from, to);
    const fromDef = cat.units[from];
    const toDef = cat.units[to];
    if (!fromDef || !toDef) return null;
    const base = fromDef.toBase(value);
    return toDef.fromBase(base);
  }
  /**
   * Recalculates the output field and reference lines based on current input.
   */
  function recalc() {
    if (!_fromInput || !_toInput) return;
    const val = parseFloat(_fromInput.value);
    if (isNaN(val)) {
      _toInput.value = '';
      updateReference();
      return;
    }
    const result = convert(val, _fromUnit, _toUnit);
    if (result === null) {
      _toInput.value = '';
    } else {
      _toInput.value = Calculator._formatResult(result);
    }
    updateReference();
  }
  /**
   * Updates the reference conversion lines below the inputs.
   */
  function updateReference() {
    if (!_refEl) return;
    _refEl.textContent = '';
    const r1 = convert(1, _fromUnit, _toUnit);
    const r2 = convert(1, _toUnit, _fromUnit);
    if (r1 !== null) {
      const line1 = document.createElement('div');
      line1.textContent = '1 ' + _fromUnit + ' = ' + Calculator._formatResult(r1) + ' ' + _toUnit;
      _refEl.appendChild(line1);
    }
    if (r2 !== null) {
      const line2 = document.createElement('div');
      line2.textContent = '1 ' + _toUnit + ' = ' + Calculator._formatResult(r2) + ' ' + _fromUnit;
      _refEl.appendChild(line2);
    }
  }
  /**
   * Populates a unit <select> element with options for the current category.
   * @param {HTMLSelectElement} selectEl
   * @param {string} selectedUnit
   */
  function populateUnitSelect(selectEl, selectedUnit) {
    while (selectEl.firstChild) {
      selectEl.removeChild(selectEl.firstChild);
    }
    const cat = CATEGORIES[_currentCategory];
    if (!cat) return;
    const units = Object.keys(cat.units);
    units.forEach(unit => {
      const opt = document.createElement('option');
      opt.value = unit;
      opt.textContent = unit;
      if (unit === selectedUnit) opt.selected = true;
      selectEl.appendChild(opt);
    });
  }
  /**
   * Returns sensible default from/to units for a given category key.
   * @param {string} catKey
   * @returns {{ from: string, to: string }}
   */
  function getDefaultUnits(catKey) {
    const defaults = {
      length: { from: 'cm', to: 'in' },
      weight: { from: 'kg', to: 'lb' },
      temperature: { from: '\u00B0C', to: '\u00B0F' },
      volume: { from: 'L', to: 'gal(US)' },
      speed: { from: 'km/h', to: 'mph' },
      area: { from: 'm\u00B2', to: 'ft\u00B2' }
    };
    return defaults[catKey] || { from: Object.keys(CATEGORIES[catKey].units)[0], to: Object.keys(CATEGORIES[catKey].units)[1] };
  }
  /**
   * Loads persisted converter state from storage.
   */
  async function loadState() {
    const data = await Store.get(Calculator.STORAGE_KEY);
    if (data && data.calculator && data.calculator.converter) {
      const s = data.calculator.converter;
      if (s.lastCategory && CATEGORIES[s.lastCategory]) _currentCategory = s.lastCategory;
      if (s.fromUnit) _fromUnit = s.fromUnit;
      if (s.toUnit) _toUnit = s.toUnit;
    }
  }
  /**
   * Persists current converter state to storage (read-before-write).
   */
  async function saveState() {
    const data = await Store.get(Calculator.STORAGE_KEY) || {};
    if (!data.calculator) data.calculator = {};
    data.calculator.converter = {
      lastCategory: _currentCategory,
      fromUnit: _fromUnit,
      toUnit: _toUnit
    };
    await Store.set(Calculator.STORAGE_KEY, data);
  }
  /**
   * Builds the converter UI and appends it to the widget body element.
   * @param {HTMLElement} bodyEl
   */
  function buildUI(bodyEl) {
    const catSelect = document.createElement('select');
    catSelect.className = 'calc-conv-select';
    CATEGORY_ORDER.forEach(catKey => {
      const opt = document.createElement('option');
      opt.value = catKey;
      opt.textContent = t(CATEGORIES[catKey].titleKey);
      if (catKey === _currentCategory) opt.selected = true;
      catSelect.appendChild(opt);
    });
    const fromRow = document.createElement('div');
    fromRow.className = 'calc-conv-row';
    _fromInput = document.createElement('input');
    _fromInput.type = 'number';
    _fromInput.className = 'calc-conv-input';
    _fromInput.placeholder = '0';
    _fromInput.step = 'any';
    const fromSelect = document.createElement('select');
    fromSelect.className = 'calc-conv-unit';
    populateUnitSelect(fromSelect, _fromUnit);
    fromRow.append(_fromInput, fromSelect);
    const swapBtn = document.createElement('button');
    swapBtn.type = 'button';
    swapBtn.className = 'calc-conv-swap';
    swapBtn.textContent = '\u21C5';
    swapBtn.title = t('calculator.conv.swap');
    const toRow = document.createElement('div');
    toRow.className = 'calc-conv-row';
    _toInput = document.createElement('input');
    _toInput.type = 'text';
    _toInput.className = 'calc-conv-input';
    _toInput.readOnly = true;
    _toInput.placeholder = '0';
    const toSelect = document.createElement('select');
    toSelect.className = 'calc-conv-unit';
    populateUnitSelect(toSelect, _toUnit);
    toRow.append(_toInput, toSelect);
    _refEl = document.createElement('div');
    _refEl.className = 'calc-conv-ref';
    _fromInput.addEventListener('input', () => recalc());
    fromSelect.addEventListener('change', () => {
      _fromUnit = fromSelect.value;
      recalc();
      saveState();
    });
    toSelect.addEventListener('change', () => {
      _toUnit = toSelect.value;
      recalc();
      saveState();
    });
    swapBtn.addEventListener('click', () => {
      const tmpUnit = _fromUnit;
      _fromUnit = _toUnit;
      _toUnit = tmpUnit;
      populateUnitSelect(fromSelect, _fromUnit);
      populateUnitSelect(toSelect, _toUnit);
      const currentVal = _toInput.value;
      if (currentVal) {
        _fromInput.value = currentVal;
      }
      recalc();
      saveState();
    });
    catSelect.addEventListener('change', () => {
      _currentCategory = catSelect.value;
      const defaults = getDefaultUnits(_currentCategory);
      _fromUnit = defaults.from;
      _toUnit = defaults.to;
      populateUnitSelect(fromSelect, _fromUnit);
      populateUnitSelect(toSelect, _toUnit);
      _fromInput.value = '';
      _toInput.value = '';
      updateReference();
      saveState();
    });
    bodyEl.append(catSelect, fromRow, swapBtn, toRow, _refEl);
    updateReference();
  }
  Calculator.registerMode('converter', {
    label: '⚖️',
    shortName: 'Unit',
    titleKey: 'calculator.tab.converter',
    render(bodyEl) {
      bodyEl.style.padding = '8px';
      bodyEl.style.display = 'flex';
      bodyEl.style.flexDirection = 'column';
      bodyEl.style.gap = '8px';
      loadState().then(() => {
        buildUI(bodyEl);
      });
    },
    destroy() {
      _fromInput = null;
      _toInput = null;
      _refEl = null;
      saveState();
    }
  });
 })();
@@ -0,0 +1,247 @@
 /* =============================================
   HELLION NEWTAB — calc-factorio.js
   Factorio Calculator Modus
   ============================================= */
 (function() {
  'use strict';
  const ASSEMBLERS = [
    { key: 'asm1', speed: 0.5 },
    { key: 'asm2', speed: 0.75 },
    { key: 'asm3', speed: 1.25 }
  ];
  const BELTS = [
    { key: 'yellow', throughput: 15, perSide: 7.5 },
    { key: 'red',    throughput: 30, perSide: 15 },
    { key: 'blue',   throughput: 45, perSide: 22.5 }
  ];
  const SUB_MODES = ['ratio', 'belt', 'machines'];
  let _activeSubMode = 'ratio';
  function createAssemblerSelect(selectedKey) {
    const row = document.createElement('div');
    row.className = 'calc-game-field';
    const label = document.createElement('label');
    label.textContent = t('calculator.fac.assembler');
    const select = document.createElement('select');
    select.className = 'calc-game-input';
    ASSEMBLERS.forEach(asm => {
      const opt = document.createElement('option');
      opt.value = asm.key;
      opt.textContent = t('calculator.fac.asm.' + asm.key) + ' (' + asm.speed + 'x)';
      if (asm.key === selectedKey) opt.selected = true;
      select.appendChild(opt);
    });
    row.append(label, select);
    return { row, select };
  }
  function createBeltSelect(selectedKey) {
    const row = document.createElement('div');
    row.className = 'calc-game-field';
    const label = document.createElement('label');
    label.textContent = t('calculator.fac.belt');
    const select = document.createElement('select');
    select.className = 'calc-game-input';
    BELTS.forEach(belt => {
      const opt = document.createElement('option');
      opt.value = belt.key;
      opt.textContent = t('calculator.fac.belt.' + belt.key) + ' (' + belt.throughput + '/s)';
      if (belt.key === selectedKey) opt.selected = true;
      select.appendChild(opt);
    });
    row.append(label, select);
    return { row, select };
  }
  function getAssemblerSpeed(key) {
    const asm = ASSEMBLERS.find(a => a.key === key);
    return asm ? asm.speed : 1;
  }
  function getBelt(key) {
    return BELTS.find(b => b.key === key) || BELTS[0];
  }
  function findSmallestBelt(throughput) {
    for (const belt of BELTS) {
      if (belt.throughput >= throughput) return belt;
    }
    return null;
  }
  function createField(labelKey, defaultVal, opts) {
    opts = opts || {};
    const row = document.createElement('div');
    row.className = 'calc-game-field';
    const label = document.createElement('label');
    label.textContent = t(labelKey);
    const input = document.createElement('input');
    input.type = 'number';
    input.className = 'calc-game-input';
    input.value = defaultVal;
    if (opts.step) input.step = opts.step;
    if (opts.min !== undefined) input.min = opts.min;
    row.append(label, input);
    return { row, input };
  }
  function createOutput(labelKey) {
    const row = document.createElement('div');
    row.className = 'calc-game-output';
    const label = document.createElement('span');
    label.textContent = t(labelKey);
    const value = document.createElement('span');
    value.className = 'calc-game-value';
    row.append(label, value);
    return { row, value };
  }
  function renderRatio(container) {
    const asmSelect = createAssemblerSelect('asm3');
    const outputField = createField('calculator.fac.recipe_output', 1, { step: 1, min: 1 });
    const timeField = createField('calculator.fac.recipe_time', 1, { step: 0.1, min: 0.1 });
    const perSecOutput = createOutput('calculator.fac.items_per_sec');
    const perMinOutput = createOutput('calculator.fac.items_per_min');
    function calc() {
      const speed = getAssemblerSpeed(asmSelect.select.value);
      const output = parseFloat(outputField.input.value) || 0;
      const time = parseFloat(timeField.input.value) || 1;
      const perSec = output * speed / time;
      const perMin = perSec * 60;
      perSecOutput.value.textContent = Calculator._formatResult(perSec) + ' /s';
      perMinOutput.value.textContent = Calculator._formatResult(perMin) + ' /min';
    }
    [outputField, timeField].forEach(f => f.input.addEventListener('input', calc));
    asmSelect.select.addEventListener('change', calc);
    container.append(asmSelect.row, outputField.row, timeField.row, perSecOutput.row, perMinOutput.row);
    calc();
  }
  function renderBelt(container) {
    const beltSelect = createBeltSelect('yellow');
    const consumeField = createField('calculator.fac.consume_per_sec', 1, { step: 0.1, min: 0.1 });
    const machinesOutput = createOutput('calculator.fac.machines_per_belt');
    const utilOutput = createOutput('calculator.fac.belt_utilization');
    function calc() {
      const belt = getBelt(beltSelect.select.value);
      const consume = parseFloat(consumeField.input.value) || 1;
      const machines = Math.floor(belt.throughput / consume);
      const util = (consume * machines) / belt.throughput * 100;
      machinesOutput.value.textContent = machines;
      utilOutput.value.textContent = Calculator._formatResult(util) + '%';
    }
    consumeField.input.addEventListener('input', calc);
    beltSelect.select.addEventListener('change', calc);
    container.append(beltSelect.row, consumeField.row, machinesOutput.row, utilOutput.row);
    calc();
  }
  function renderMachines(container) {
    const asmSelect = createAssemblerSelect('asm3');
    const targetField = createField('calculator.fac.target_output_sec', 10, { step: 0.1, min: 0.1 });
    const outputField = createField('calculator.fac.recipe_output', 1, { step: 1, min: 1 });
    const timeField = createField('calculator.fac.recipe_time', 1, { step: 0.1, min: 0.1 });
    const machinesOutput = createOutput('calculator.fac.machines_needed');
    const beltOutput = createOutput('calculator.fac.belt_needed');
    function calc() {
      const speed = getAssemblerSpeed(asmSelect.select.value);
      const target = parseFloat(targetField.input.value) || 0;
      const output = parseFloat(outputField.input.value) || 1;
      const time = parseFloat(timeField.input.value) || 1;
      const perMachine = output * speed / time;
      const machines = perMachine > 0 ? Math.ceil(target / perMachine) : 0;
      const totalThroughput = machines * perMachine;
      const belt = findSmallestBelt(totalThroughput);
      machinesOutput.value.textContent = machines;
      if (belt) {
        const util = (totalThroughput / belt.throughput) * 100;
        beltOutput.value.textContent = t('calculator.fac.belt.' + belt.key) + ' (' + Calculator._formatResult(util) + '%)';
      } else {
        beltOutput.value.textContent = t('calculator.fac.exceeds_belt');
      }
    }
    [targetField, outputField, timeField].forEach(f => f.input.addEventListener('input', calc));
    asmSelect.select.addEventListener('change', calc);
    container.append(asmSelect.row, targetField.row, outputField.row, timeField.row, machinesOutput.row, beltOutput.row);
    calc();
  }
  async function loadState() {
    const data = await Store.get(Calculator.STORAGE_KEY);
    if (data && data.calculator && data.calculator.factorio) {
      const s = data.calculator.factorio;
      if (s.lastSubMode && SUB_MODES.includes(s.lastSubMode)) _activeSubMode = s.lastSubMode;
    }
  }
  async function saveState() {
    const data = await Store.get(Calculator.STORAGE_KEY) || {};
    if (!data.calculator) data.calculator = {};
    data.calculator.factorio = { lastSubMode: _activeSubMode };
    await Store.set(Calculator.STORAGE_KEY, data);
  }
  function renderSubMode(container) {
    container.textContent = '';
    switch (_activeSubMode) {
      case 'ratio':    renderRatio(container); break;
      case 'belt':     renderBelt(container); break;
      case 'machines': renderMachines(container); break;
    }
  }
  Calculator.registerMode('factorio', {
    label: '🏭',
    shortName: 'FAC',
    titleKey: 'calculator.tab.factorio',
    render(bodyEl) {
      bodyEl.style.padding = '8px';
      bodyEl.style.display = 'flex';
      bodyEl.style.flexDirection = 'column';
      bodyEl.style.gap = '8px';
      loadState().then(() => {
        const subContent = document.createElement('div');
        subContent.className = 'calc-game-content';
        const bar = document.createElement('div');
        bar.className = 'calc-game-subtabs';
        SUB_MODES.forEach(mode => {
          const btn = document.createElement('button');
          btn.type = 'button';
          btn.className = 'calc-game-subtab' + (mode === _activeSubMode ? ' active' : '');
          btn.textContent = t('calculator.fac.tab.' + mode);
          btn.dataset.mode = mode;
          btn.addEventListener('click', () => {
            bar.querySelectorAll('.calc-game-subtab').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            _activeSubMode = mode;
            renderSubMode(subContent);
            saveState();
          });
          bar.appendChild(btn);
        });
        bodyEl.append(bar, subContent);
        renderSubMode(subContent);
      });
    },
    destroy() {
      saveState();
    }
  });
 })();
@@ -0,0 +1,184 @@
 /* =============================================
   HELLION NEWTAB — calc-satisfactory.js
   Satisfactory Calculator Modus
   ============================================= */
 (function() {
  'use strict';
  const POWER_EXPONENT = 1.321928;
  const SUB_MODES = ['itemsPerMin', 'power', 'machines'];
  let _activeSubMode = 'itemsPerMin';
  function createField(labelKey, defaultVal, opts) {
    opts = opts || {};
    const row = document.createElement('div');
    row.className = 'calc-game-field';
    const label = document.createElement('label');
    label.textContent = t(labelKey);
    const input = document.createElement('input');
    input.type = 'number';
    input.className = 'calc-game-input';
    input.value = defaultVal;
    if (opts.step) input.step = opts.step;
    if (opts.min !== undefined) input.min = opts.min;
    if (opts.max !== undefined) input.max = opts.max;
    row.append(label, input);
    return { row, input };
  }
  function createOutput(labelKey) {
    const row = document.createElement('div');
    row.className = 'calc-game-output';
    const label = document.createElement('span');
    label.textContent = t(labelKey);
    const value = document.createElement('span');
    value.className = 'calc-game-value';
    row.append(label, value);
    return { row, value };
  }
  function renderItemsPerMin(container) {
    const itemsField = createField('calculator.sat.items_per_craft', 1, { step: 1, min: 1 });
    const timeField = createField('calculator.sat.craft_time', 4, { step: 0.1, min: 0.1 });
    const clockField = createField('calculator.sat.clock_speed', 100, { step: 1, min: 1, max: 250 });
    const output = createOutput('calculator.sat.output_per_min');
    function calc() {
      const items = parseFloat(itemsField.input.value) || 0;
      const time = parseFloat(timeField.input.value) || 1;
      const clock = parseFloat(clockField.input.value) || 100;
      const result = (items * 60) / time * (clock / 100);
      output.value.textContent = Calculator._formatResult(result) + ' items/min';
    }
    [itemsField, timeField, clockField].forEach(f => f.input.addEventListener('input', calc));
    container.append(itemsField.row, timeField.row, clockField.row, output.row);
    calc();
  }
  function renderPower(container) {
    const basePowerField = createField('calculator.sat.base_power', 30, { step: 1, min: 0.1 });
    const clockField = createField('calculator.sat.clock_speed', 100, { step: 1, min: 1, max: 250 });
    const powerOutput = createOutput('calculator.sat.power_usage');
    const effOutput = createOutput('calculator.sat.efficiency');
    function calc() {
      const basePower = parseFloat(basePowerField.input.value) || 0;
      const clock = parseFloat(clockField.input.value) || 100;
      const ratio = clock / 100;
      const power = basePower * Math.pow(ratio, POWER_EXPONENT);
      const effPerItem = Math.pow(ratio, POWER_EXPONENT - 1);
      powerOutput.value.textContent = Calculator._formatResult(power) + ' MW';
      if (clock > 100) {
        const overhead = (effPerItem - 1) * 100;
        effOutput.value.textContent = '+' + Calculator._formatResult(overhead) + '% ' + t('calculator.sat.per_item');
        effOutput.row.style.display = '';
      } else {
        effOutput.row.style.display = 'none';
      }
    }
    [basePowerField, clockField].forEach(f => f.input.addEventListener('input', calc));
    container.append(basePowerField.row, clockField.row, powerOutput.row, effOutput.row);
    calc();
  }
  function renderMachines(container) {
    const targetField = createField('calculator.sat.target_output', 60, { step: 1, min: 1 });
    const itemsField = createField('calculator.sat.items_per_craft', 1, { step: 1, min: 1 });
    const timeField = createField('calculator.sat.craft_time', 4, { step: 0.1, min: 0.1 });
    const clockField = createField('calculator.sat.clock_speed', 100, { step: 1, min: 1, max: 250 });
    const basePowerField = createField('calculator.sat.base_power', 30, { step: 1, min: 0.1 });
    const machinesOutput = createOutput('calculator.sat.machines_needed');
    const totalPowerOutput = createOutput('calculator.sat.total_power');
    function calc() {
      const target = parseFloat(targetField.input.value) || 0;
      const items = parseFloat(itemsField.input.value) || 1;
      const time = parseFloat(timeField.input.value) || 1;
      const clock = parseFloat(clockField.input.value) || 100;
      const basePower = parseFloat(basePowerField.input.value) || 0;
      const ratio = clock / 100;
      const itemsPerMin = (items * 60) / time * ratio;
      const machines = itemsPerMin > 0 ? Math.ceil(target / itemsPerMin) : 0;
      const totalPower = machines * basePower * Math.pow(ratio, POWER_EXPONENT);
      machinesOutput.value.textContent = machines;
      totalPowerOutput.value.textContent = Calculator._formatResult(totalPower) + ' MW';
    }
    [targetField, itemsField, timeField, clockField, basePowerField].forEach(f => f.input.addEventListener('input', calc));
    container.append(targetField.row, itemsField.row, timeField.row, clockField.row, basePowerField.row, machinesOutput.row, totalPowerOutput.row);
    calc();
  }
  async function loadState() {
    const data = await Store.get(Calculator.STORAGE_KEY);
    if (data && data.calculator && data.calculator.satisfactory) {
      const s = data.calculator.satisfactory;
      if (s.lastSubMode && SUB_MODES.includes(s.lastSubMode)) _activeSubMode = s.lastSubMode;
    }
  }
  async function saveState() {
    const data = await Store.get(Calculator.STORAGE_KEY) || {};
    if (!data.calculator) data.calculator = {};
    data.calculator.satisfactory = { lastSubMode: _activeSubMode };
    await Store.set(Calculator.STORAGE_KEY, data);
  }
  function renderSubMode(container) {
    container.textContent = '';
    switch (_activeSubMode) {
      case 'itemsPerMin': renderItemsPerMin(container); break;
      case 'power':       renderPower(container); break;
      case 'machines':    renderMachines(container); break;
    }
  }
  Calculator.registerMode('satisfactory', {
    label: '⚙️',
    shortName: 'SAT',
    titleKey: 'calculator.tab.satisfactory',
    render(bodyEl) {
      bodyEl.style.padding = '8px';
      bodyEl.style.display = 'flex';
      bodyEl.style.flexDirection = 'column';
      bodyEl.style.gap = '8px';
      loadState().then(() => {
        const subContent = document.createElement('div');
        subContent.className = 'calc-game-content';
        const bar = document.createElement('div');
        bar.className = 'calc-game-subtabs';
        SUB_MODES.forEach(mode => {
          const btn = document.createElement('button');
          btn.type = 'button';
          btn.className = 'calc-game-subtab' + (mode === _activeSubMode ? ' active' : '');
          btn.textContent = t('calculator.sat.tab.' + mode);
          btn.dataset.mode = mode;
          btn.addEventListener('click', () => {
            bar.querySelectorAll('.calc-game-subtab').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            _activeSubMode = mode;
            renderSubMode(subContent);
            saveState();
          });
          bar.appendChild(btn);
        });
        bodyEl.append(bar, subContent);
        renderSubMode(subContent);
      });
    },
    destroy() {
      saveState();
    }
  });
 })();
@@ -0,0 +1,294 @@
 /* =============================================
   HELLION NEWTAB — calc-scientific.js
   Scientific-Modus für Calculator Widget
   ============================================= */
 (function() {
  'use strict';
  const FORMULAS = [
    {
      key: 'circle_area',
      fields: [{ key: 'radius', default: '' }],
      calc: (vals) => Math.PI * vals.radius * vals.radius
    },
    {
      key: 'circle_circumference',
      fields: [{ key: 'radius', default: '' }],
      calc: (vals) => 2 * Math.PI * vals.radius
    },
    {
      key: 'celsius_to_fahrenheit',
      fields: [{ key: 'temp', default: '' }],
      calc: (vals) => (vals.temp * 9 / 5) + 32
    },
    {
      key: 'fahrenheit_to_celsius',
      fields: [{ key: 'temp', default: '' }],
      calc: (vals) => (vals.temp - 32) * 5 / 9
    },
    {
      key: 'pythagoras',
      fields: [{ key: 'a', default: '' }, { key: 'b', default: '' }],
      calc: (vals) => Math.sqrt(vals.a * vals.a + vals.b * vals.b)
    },
    {
      key: 'percentage',
      fields: [{ key: 'value', default: '' }, { key: 'percent', default: '' }],
      calc: (vals) => vals.value * vals.percent / 100
    }
  ];
  let _keyboardExtHandler = null;
  function renderSciButtons(container) {
    const grid = document.createElement('div');
    grid.className = 'calc-buttons calc-sci-buttons';
    const buttons = [
      ['√',  'sqrt',   'operator'],
      ['x²', 'square', 'operator'],
      ['xⁿ', 'power',  'operator'],
      ['π',  'pi',     'operator'],
      ['e',  'euler',  'operator'],
      ['±',  'negate', 'operator']
    ];
    buttons.forEach(([label, value, cls]) => {
      const btn = document.createElement('button');
      btn.className = 'calc-btn' + (cls ? ' ' + cls : '');
      btn.textContent = label;
      btn.type = 'button';
      btn.addEventListener('click', () => handleSciKey(value));
      grid.appendChild(btn);
    });
    container.appendChild(grid);
  }
  function handleSciKey(key) {
    switch (key) {
      case 'sqrt':
        if (!Calculator._currentExpr && Calculator._lastResult) {
          Calculator._currentExpr = 'sqrt(' + Calculator._lastResult + ')';
          Calculator._lastResult = '';
          Calculator._updateDisplay();
          break;
        }
        Calculator._currentExpr += 'sqrt(';
        Calculator._updateDisplay();
        break;
      case 'square':
        if (!Calculator._currentExpr && Calculator._lastResult) {
          Calculator._currentExpr = Calculator._lastResult;
          Calculator._lastResult = '';
        }
        Calculator._currentExpr += '^2';
        Calculator._updateDisplay();
        break;
      case 'power':
        Calculator._handleKey('^');
        break;
      case 'pi':
        Calculator._currentExpr += '3.14159265359';
        Calculator._updateDisplay();
        break;
      case 'euler':
        Calculator._currentExpr += '2.71828182846';
        Calculator._updateDisplay();
        break;
      case 'negate':
        handleNegate();
        break;
    }
  }
  function handleNegate() {
    const expr = Calculator._currentExpr;
    if (!expr && Calculator._lastResult) {
      const num = parseFloat(Calculator._lastResult);
      if (!isNaN(num)) {
        Calculator._currentExpr = String(-num);
        Calculator._lastResult = '';
        Calculator._updateDisplay();
      }
      return;
    }
    const match = expr.match(/(-?\d*\.?\d+)$/);
    if (match) {
      const num = parseFloat(match[1]);
      const negated = String(-num);
      Calculator._currentExpr = expr.slice(0, expr.length - match[1].length) + negated;
      Calculator._updateDisplay();
    }
  }
  function renderFormulaHelper(container) {
    const wrapper = document.createElement('div');
    wrapper.className = 'calc-formula-helper';
    const label = document.createElement('div');
    label.className = 'calc-formula-label';
    label.textContent = t('calculator.sci.formulas');
    const select = document.createElement('select');
    select.className = 'calc-formula-select';
    const emptyOpt = document.createElement('option');
    emptyOpt.value = '';
    emptyOpt.textContent = t('calculator.sci.select_formula');
    select.appendChild(emptyOpt);
    FORMULAS.forEach((f, i) => {
      const opt = document.createElement('option');
      opt.value = String(i);
      opt.textContent = t('calculator.sci.formula.' + f.key);
      select.appendChild(opt);
    });
    const inputsContainer = document.createElement('div');
    inputsContainer.className = 'calc-formula-inputs';
    const resultContainer = document.createElement('div');
    resultContainer.className = 'calc-formula-result';
    select.addEventListener('change', () => {
      while (inputsContainer.firstChild) {
        inputsContainer.removeChild(inputsContainer.firstChild);
      }
      resultContainer.textContent = '';
      const idx = parseInt(select.value, 10);
      if (isNaN(idx)) return;
      const formula = FORMULAS[idx];
      renderFormulaInputs(formula, inputsContainer, resultContainer);
    });
    wrapper.append(label, select, inputsContainer, resultContainer);
    container.appendChild(wrapper);
  }
  function renderFormulaInputs(formula, inputsEl, resultEl) {
    const inputs = {};
    formula.fields.forEach(field => {
      const row = document.createElement('div');
      row.className = 'calc-formula-row';
      const lbl = document.createElement('label');
      lbl.textContent = t('calculator.sci.field.' + field.key);
      const inp = document.createElement('input');
      inp.type = 'number';
      inp.className = 'calc-formula-input';
      inp.placeholder = '0';
      inp.step = 'any';
      inputs[field.key] = inp;
      inp.addEventListener('input', () => {
        recalcFormula(formula, inputs, resultEl);
      });
      row.append(lbl, inp);
      inputsEl.appendChild(row);
    });
  }
  function recalcFormula(formula, inputs, resultEl) {
    const vals = {};
    let allValid = true;
    for (const field of formula.fields) {
      const v = parseFloat(inputs[field.key].value);
      if (isNaN(v)) { allValid = false; break; }
      vals[field.key] = v;
    }
    if (!allValid) {
      resultEl.textContent = '';
      return;
    }
    const result = formula.calc(vals);
    if (result === null || !isFinite(result)) {
      resultEl.textContent = t('calculator.error');
      return;
    }
    resultEl.textContent = '= ' + Calculator._formatResult(result);
  }
  function bindSciKeyboard(widgetEl) {
    _keyboardExtHandler = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      if (e.target.contentEditable === 'true') return;
      if (e.key === 'p') {
        handleSciKey('pi');
        e.preventDefault();
        e.stopPropagation();
      } else if (e.key === '^') {
        handleSciKey('power');
        e.preventDefault();
        e.stopPropagation();
      }
    };
    widgetEl.addEventListener('keydown', _keyboardExtHandler);
  }
  Calculator.registerMode('scientific', {
    label: '📐',
    shortName: 'Sci',
    titleKey: 'calculator.tab.scientific',
    render(bodyEl) {
      bodyEl.style.padding = '8px';
      bodyEl.style.display = 'flex';
      bodyEl.style.flexDirection = 'column';
      bodyEl.style.flex = '1';
      bodyEl.style.overflow = 'hidden';
      const display = document.createElement('div');
      display.className = 'calc-display';
      const exprEl = document.createElement('div');
      exprEl.className = 'calc-expression';
      Calculator._displayExprEl = exprEl;
      const resultEl = document.createElement('div');
      resultEl.className = 'calc-result';
      resultEl.textContent = Calculator._lastResult || '0';
      Calculator._displayResultEl = resultEl;
      display.append(exprEl, resultEl);
      const sciSection = document.createElement('div');
      renderSciButtons(sciSection);
      const stdButtons = Calculator._createButtons();
      const historyEl = Calculator._createHistoryPanel();
      const formulaSection = document.createElement('div');
      renderFormulaHelper(formulaSection);
      bodyEl.append(display, sciSection, stdButtons, historyEl, formulaSection);
      Calculator._updateDisplay();
      const entry = WidgetManager._widgets.get(Calculator.WIDGET_ID);
      if (entry) bindSciKeyboard(entry.el);
    },
    destroy() {
      if (_keyboardExtHandler) {
        const entry = WidgetManager._widgets.get(Calculator.WIDGET_ID);
        if (entry) {
          entry.el.removeEventListener('keydown', _keyboardExtHandler);
        }
        _keyboardExtHandler = null;
      }
      Calculator._displayExprEl = null;
      Calculator._displayResultEl = null;
    }
  });
 })();
@@ -0,0 +1,361 @@
 /* =============================================
   HELLION NEWTAB — calc-stationeers.js
   Stationeers Calculator Modus
   ============================================= */
 (function() {
  'use strict';
  const R = 8314.46261815324;
  const COMBUSTION_ENERGY = 563452;
  const HEAT_CAP_PURE_FUEL = 61.9;
  const HEAT_CAP_DELTA = 172.615;
  const BATTERY_CAPACITY = 50000;
  const HEAT_CAPS = [
    { gas: 'O\u2082',        cp: 21.1 },
    { gas: 'H\u2082',        cp: 20.4 },
    { gas: 'CO\u2082',       cp: 28.2 },
    { gas: 'N\u2082',        cp: 20.6 },
    { gas: 'H\u2082O',       cp: 72.0 },
    { gas: 'N\u2082O',       cp: 23.0 },
    { gas: 'Pollutant', cp: 24.8 }
  ];
  const GAS_VARS = ['P', 'V', 'n', 'T'];
  const SUB_MODES = ['gas', 'furnace', 'solar', 'atmo'];
  let _activeSubMode = 'gas';
  function createField(labelKey, defaultVal, opts) {
    opts = opts || {};
    const row = document.createElement('div');
    row.className = 'calc-game-field';
    const label = document.createElement('label');
    label.textContent = t(labelKey);
    const input = document.createElement('input');
    input.type = 'number';
    input.className = 'calc-game-input';
    input.value = defaultVal;
    if (opts.step) input.step = opts.step;
    if (opts.min !== undefined) input.min = opts.min;
    if (opts.max !== undefined) input.max = opts.max;
    if (opts.disabled) input.disabled = true;
    row.append(label, input);
    return { row, input };
  }
  function createOutput(labelKey) {
    const row = document.createElement('div');
    row.className = 'calc-game-output';
    const label = document.createElement('span');
    label.textContent = t(labelKey);
    const value = document.createElement('span');
    value.className = 'calc-game-value';
    row.append(label, value);
    return { row, value };
  }
  function renderGas(container) {
    const solveRow = document.createElement('div');
    solveRow.className = 'calc-game-field';
    const solveLabel = document.createElement('label');
    solveLabel.textContent = t('calculator.sta.solve_for');
    const solveSelect = document.createElement('select');
    solveSelect.className = 'calc-game-input';
    GAS_VARS.forEach(v => {
      const opt = document.createElement('option');
      opt.value = v;
      opt.textContent = t('calculator.sta.var.' + v);
      solveSelect.appendChild(opt);
    });
    solveRow.append(solveLabel, solveSelect);
    container.appendChild(solveRow);
    const fields = {};
    const defaults = { P: 101.325, V: 1000, n: 1, T: 293.15 };
    GAS_VARS.forEach(v => {
      const f = createField(
        'calculator.sta.var.' + v + '_label',
        defaults[v],
        { step: 'any' }
      );
      fields[v] = f;
      container.appendChild(f.row);
    });
    const tempHelper = document.createElement('div');
    tempHelper.className = 'calc-game-hint';
    container.appendChild(tempHelper);
    const resultOutput = createOutput('calculator.sta.result');
    container.appendChild(resultOutput.row);
    function calc() {
      const solveFor = solveSelect.value;
      GAS_VARS.forEach(v => {
        fields[v].input.disabled = (v === solveFor);
        fields[v].input.style.opacity = (v === solveFor) ? '0.5' : '1';
      });
      const P_kPa = parseFloat(fields.P.input.value) || 0;
      const P = P_kPa * 1000;
      const V = parseFloat(fields.V.input.value) || 0;
      const n = parseFloat(fields.n.input.value) || 0;
      const T = parseFloat(fields.T.input.value) || 0;
      let result = null;
      let unit = '';
      switch (solveFor) {
        case 'P':
          if (V > 0) { result = (n * R * T) / V; result /= 1000; unit = 'kPa'; }
          break;
        case 'V':
          if (P > 0) { result = (n * R * T) / P; unit = 'L'; }
          break;
        case 'n':
          if (R * T > 0) { result = (P * V) / (R * T); unit = 'mol'; }
          break;
        case 'T':
          if (n * R > 0) { result = (P * V) / (n * R); unit = 'K'; }
          break;
      }
      if (result !== null && isFinite(result)) {
        fields[solveFor].input.value = Calculator._formatResult(result);
        resultOutput.value.textContent = Calculator._formatResult(result) + ' ' + unit;
      } else {
        resultOutput.value.textContent = '-';
      }
      const tempVal = parseFloat(fields.T.input.value) || 0;
      tempHelper.textContent = Calculator._formatResult(tempVal - 273.15) + ' \u00B0C';
    }
    GAS_VARS.forEach(v => {
      fields[v].input.addEventListener('input', calc);
    });
    solveSelect.addEventListener('change', calc);
    calc();
  }
  function renderFurnace(container) {
    const fuelField = createField('calculator.sta.fuel_ratio', 0.5, { step: 0.01, min: 0, max: 1 });
    const tempField = createField('calculator.sta.start_temp', 293.15, { step: 1, min: 0 });
    const pressField = createField('calculator.sta.start_pressure', 101.325, { step: 0.1, min: 0 });
    const tempOutput = createOutput('calculator.sta.temp_after');
    const pressOutput = createOutput('calculator.sta.pressure_after');
    const warningEl = document.createElement('div');
    warningEl.className = 'calc-game-warning';
    function calc() {
      const fuel = parseFloat(fuelField.input.value) || 0;
      const T_vor = parseFloat(tempField.input.value) || 293.15;
      const P_vor = parseFloat(pressField.input.value) || 101.325;
      warningEl.textContent = '';
      if (fuel < 0.05) {
        warningEl.textContent = t('calculator.sta.warn_low_fuel');
      }
      if (P_vor < 10) {
        warningEl.textContent += (warningEl.textContent ? ' ' : '') + t('calculator.sta.warn_low_pressure');
      }
      const specificHeat = HEAT_CAP_PURE_FUEL;
      const T_nach = (T_vor * specificHeat + fuel * COMBUSTION_ENERGY) / (specificHeat + fuel * HEAT_CAP_DELTA);
      const P_nach = P_vor * T_nach * (1 + 5.7 * fuel) / T_vor;
      tempOutput.value.textContent = Calculator._formatResult(T_nach) + ' K (' + Calculator._formatResult(T_nach - 273.15) + ' \u00B0C)';
      pressOutput.value.textContent = Calculator._formatResult(P_nach) + ' kPa';
    }
    [fuelField, tempField, pressField].forEach(f => f.input.addEventListener('input', calc));
    container.append(fuelField.row, tempField.row, pressField.row, warningEl, tempOutput.row, pressOutput.row);
    calc();
  }
  function renderSolar(container) {
    const panelField = createField('calculator.sta.panels', 12, { step: 1, min: 1 });
    const wattField = createField('calculator.sta.watts_per_panel', 500, { step: 10, min: 1 });
    const dayField = createField('calculator.sta.day_length', 600, { step: 1, min: 1 });
    const nightField = createField('calculator.sta.night_length', 600, { step: 1, min: 1 });
    const consumeField = createField('calculator.sta.consumption', 2000, { step: 10, min: 0 });
    const genOutput = createOutput('calculator.sta.generation');
    const surplusOutput = createOutput('calculator.sta.surplus');
    const nightOutput = createOutput('calculator.sta.night_energy');
    const battOutput = createOutput('calculator.sta.batteries_needed');
    function calc() {
      const panels = parseFloat(panelField.input.value) || 0;
      const wpp = parseFloat(wattField.input.value) || 0;
      const nightLen = parseFloat(nightField.input.value) || 0;
      const consume = parseFloat(consumeField.input.value) || 0;
      const generation = panels * wpp;
      const surplus = generation - consume;
      const nightEnergy = consume * nightLen;
      const batteries = nightEnergy > 0 ? Math.ceil(nightEnergy / BATTERY_CAPACITY) : 0;
      genOutput.value.textContent = Calculator._formatResult(generation) + ' W';
      surplusOutput.value.textContent = Calculator._formatResult(surplus) + ' W';
      if (surplus < 0) {
        surplusOutput.value.style.color = 'var(--danger)';
      } else {
        surplusOutput.value.style.color = '';
      }
      nightOutput.value.textContent = Calculator._formatResult(nightEnergy) + ' Ws';
      battOutput.value.textContent = batteries;
    }
    [panelField, wattField, dayField, nightField, consumeField].forEach(f => f.input.addEventListener('input', calc));
    container.append(panelField.row, wattField.row, dayField.row, nightField.row, consumeField.row,
                     genOutput.row, surplusOutput.row, nightOutput.row, battOutput.row);
    calc();
  }
  function renderAtmo(container) {
    const targetField = createField('calculator.sta.target_temp', 293.15, { step: 1 });
    const gas1Field = createField('calculator.sta.gas1_temp', 200, { step: 1 });
    const gas2Field = createField('calculator.sta.gas2_temp', 400, { step: 1 });
    const m1Output = createOutput('calculator.sta.mixer_input1');
    const m2Output = createOutput('calculator.sta.mixer_input2');
    function calc() {
      const T0 = parseFloat(targetField.input.value) || 0;
      const T1 = parseFloat(gas1Field.input.value) || 0;
      const T2 = parseFloat(gas2Field.input.value) || 0;
      const denom = Math.abs(T1 - T0) + Math.abs(T2 - T0);
      if (denom === 0) {
        m1Output.value.textContent = '50%';
        m2Output.value.textContent = '50%';
        return;
      }
      const M1 = Math.abs(T2 - T0) / denom;
      const M2 = 1 - M1;
      m1Output.value.textContent = Calculator._formatResult(M1 * 100) + '%';
      m2Output.value.textContent = Calculator._formatResult(M2 * 100) + '%';
    }
    [targetField, gas1Field, gas2Field].forEach(f => f.input.addEventListener('input', calc));
    container.append(targetField.row, gas1Field.row, gas2Field.row, m1Output.row, m2Output.row);
    calc();
    const details = document.createElement('details');
    details.className = 'calc-game-details';
    const summary = document.createElement('summary');
    summary.textContent = t('calculator.sta.heat_cap_ref');
    details.appendChild(summary);
    const table = document.createElement('table');
    table.className = 'calc-game-table';
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');
    const thGas = document.createElement('th');
    thGas.textContent = t('calculator.sta.gas');
    const thCp = document.createElement('th');
    thCp.textContent = 'Cp (J/mol\u00B7K)';
    headerRow.append(thGas, thCp);
    thead.appendChild(headerRow);
    const tbody = document.createElement('tbody');
    HEAT_CAPS.forEach(entry => {
      const tr = document.createElement('tr');
      const tdGas = document.createElement('td');
      tdGas.textContent = entry.gas;
      const tdCp = document.createElement('td');
      tdCp.textContent = entry.cp;
      tr.append(tdGas, tdCp);
      tbody.appendChild(tr);
    });
    table.append(thead, tbody);
    details.appendChild(table);
    container.appendChild(details);
  }
  async function loadState() {
    const data = await Store.get(Calculator.STORAGE_KEY);
    if (data && data.calculator && data.calculator.stationeers) {
      const s = data.calculator.stationeers;
      if (s.lastSubMode && SUB_MODES.includes(s.lastSubMode)) _activeSubMode = s.lastSubMode;
    }
  }
  async function saveState() {
    const data = await Store.get(Calculator.STORAGE_KEY) || {};
    if (!data.calculator) data.calculator = {};
    data.calculator.stationeers = { lastSubMode: _activeSubMode };
    await Store.set(Calculator.STORAGE_KEY, data);
  }
  function renderSubMode(container) {
    container.textContent = '';
    switch (_activeSubMode) {
      case 'gas':     renderGas(container); break;
      case 'furnace': renderFurnace(container); break;
      case 'solar':   renderSolar(container); break;
      case 'atmo':    renderAtmo(container); break;
    }
  }
  Calculator.registerMode('stationeers', {
    label: '\uD83D\uDE80',
    shortName: 'STA',
    titleKey: 'calculator.tab.stationeers',
    render(bodyEl) {
      bodyEl.style.padding = '8px';
      bodyEl.style.display = 'flex';
      bodyEl.style.flexDirection = 'column';
      bodyEl.style.gap = '8px';
      loadState().then(() => {
        const subContent = document.createElement('div');
        subContent.className = 'calc-game-content';
        const bar = document.createElement('div');
        bar.className = 'calc-game-subtabs';
        SUB_MODES.forEach(mode => {
          const btn = document.createElement('button');
          btn.type = 'button';
          btn.className = 'calc-game-subtab' + (mode === _activeSubMode ? ' active' : '');
          btn.textContent = t('calculator.sta.tab.' + mode);
          btn.dataset.mode = mode;
          btn.addEventListener('click', () => {
            bar.querySelectorAll('.calc-game-subtab').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            _activeSubMode = mode;
            renderSubMode(subContent);
            saveState();
          });
          bar.appendChild(btn);
        });
        bodyEl.append(bar, subContent);
        renderSubMode(subContent);
      });
    },
    destroy() {
      saveState();
    }
  });
 })();
@@ -0,0 +1,929 @@
 /* =============================================
   HELLION NEWTAB — calculator.js
   Taschenrechner Widget: Expression-Parsing,
   History, Tastatureingabe
   ============================================= */
 const Calculator = {
  WIDGET_ID: 'widget_calculator',
  STORAGE_KEY: 'widgetStates',
  MAX_HISTORY: 10,
  /** @type {Array<{expr: string, result: string}>} */
  _history: [],
  _currentExpr: '',
  _lastResult: '',
  _isOpen: false,
  _displayExprEl: null,
  _displayResultEl: null,
  _keydownHandler: null,
  _modes: new Map(),
  _activeMode: 'standard',
  _tabBarEl: null,
  // ---- MODE REGISTRY ----
  /**
   * Modus registrieren (wird von externen Mode-Dateien aufgerufen)
   * @param {string} name - Eindeutiger Modus-Name
   * @param {Object} config - { label, shortName, titleKey, render(bodyEl), destroy() }
   */
  registerMode(name, config) {
    this._modes.set(name, config);
    // Tab-Bar aktualisieren falls Widget bereits offen
    if (this._tabBarEl) this._renderTabBar();
  },
  // ---- STORAGE ----
  /**
   * Calculator-State aus Storage laden
   */
  async load() {
    const data = await Store.get(this.STORAGE_KEY);
    if (data && data.calculator) {
      this._history = Array.isArray(data.calculator.history) ? data.calculator.history : [];
      if (data.calculator.activeMode) {
        this._activeMode = data.calculator.activeMode;
      }
    }
  },
  /**
   * Calculator-State in Storage speichern
   * Bestehende Notes-Daten bleiben erhalten
   */
  async save() {
    const data = await Store.get(this.STORAGE_KEY) || {};
    // Widget-Position aus WidgetManager holen
    const widgetState = WidgetManager.getState(this.WIDGET_ID);
    if (!data.calculator) data.calculator = {};
    data.calculator.x = widgetState ? widgetState.x : 400;
    data.calculator.y = widgetState ? widgetState.y : 120;
    data.calculator.width = widgetState ? widgetState.width : 280;
    data.calculator.height = widgetState ? widgetState.height : 400;
    data.calculator.open = this._isOpen;
    data.calculator.activeMode = this._activeMode;
    data.calculator.history = this._history.slice(0, this.MAX_HISTORY);
    await Store.set(this.STORAGE_KEY, data);
  },
  // ---- WIDGET LIFECYCLE ----
  /**
   * Calculator oeffnen oder in Vordergrund bringen
   */
  async open() {
    if (this._isOpen) {
      WidgetManager.bringToFront(this.WIDGET_ID);
      return;
    }
    // Gespeicherte Position laden
    const data = await Store.get(this.STORAGE_KEY);
    const saved = (data && data.calculator) ? data.calculator : {};
    const widgetId = WidgetManager.create('calculator', {
      id: this.WIDGET_ID,
      title: t('calculator.title'),
      x: saved.x || 400,
      y: saved.y || 120,
      width: saved.width || 280,
      height: saved.height || 400,
      open: true
    });
    const body = WidgetManager.getBody(widgetId);
    if (body) this.renderBody(body);
    this._isOpen = true;
    // Keyboard-Events binden
    const entry = WidgetManager._widgets.get(this.WIDGET_ID);
    if (entry) this._bindKeyboard(entry.el);
    await this.save();
  },
  /**
   * Calculator toggle: oeffnen oder minimieren
   */
  async toggle() {
    if (this._isOpen) {
      const entry = WidgetManager._widgets.get(this.WIDGET_ID);
      if (entry && entry.state.open) {
        await WidgetManager.minimize(this.WIDGET_ID);
        this._isOpen = false;
        await this.save();
      } else if (entry) {
        await WidgetManager.openWidget(this.WIDGET_ID);
        this._isOpen = true;
        await this.save();
      }
    } else {
      await this.open();
    }
  },
  /**
   * Wird aufgerufen wenn Widget geschlossen wird
   */
  async onClose() {
    // Aktiven Modus aufräumen
    const mode = this._modes.get(this._activeMode);
    if (mode && mode.destroy) mode.destroy();
    this._isOpen = false;
    this._unbindKeyboard();
    this._tabBarEl = null;
    this._displayExprEl = null;
    this._displayResultEl = null;
    await this.save();
  },
  // ---- UI RENDERING ----
  /**
   * Calculator-Body rendern: Tab-Bar + aktiver Modus
   * @param {HTMLElement} bodyEl
   */
  renderBody(bodyEl) {
    bodyEl.textContent = '';
    bodyEl.style.padding = '0';
    bodyEl.style.display = 'flex';
    bodyEl.style.flexDirection = 'column';
    bodyEl.style.height = '100%';
    // Tab-Bar
    const tabBar = document.createElement('div');
    tabBar.className = 'calc-tab-bar';
    this._tabBarEl = tabBar;
    this._renderTabBar();
    // Mode-Body Container
    const modeBody = document.createElement('div');
    modeBody.className = 'calc-mode-body';
    bodyEl.append(tabBar, modeBody);
    // Aktiven Modus rendern
    const mode = this._modes.get(this._activeMode);
    if (mode) {
      mode.render(modeBody);
    }
  },
  /**
   * Tab-Bar mit Buttons aus _modes Map befüllen
   */
  _renderTabBar() {
    if (!this._tabBarEl) return;
    while (this._tabBarEl.firstChild) {
      this._tabBarEl.removeChild(this._tabBarEl.firstChild);
    }
    this._modes.forEach((config, name) => {
      const tab = document.createElement('button');
      tab.type = 'button';
      tab.className = 'calc-tab' + (name === this._activeMode ? ' active' : '');
      tab.dataset.mode = name;
      const icon = document.createElement('span');
      icon.className = 'calc-tab-icon';
      icon.textContent = config.label;
      const label = document.createElement('span');
      label.className = 'calc-tab-label';
      label.textContent = config.shortName;
      tab.append(icon, label);
      tab.addEventListener('click', () => this.switchMode(name));
      this._tabBarEl.appendChild(tab);
    });
  },
  /**
   * Aktiven Tab visuell markieren (ohne Neuaufbau)
   */
  _updateTabBar() {
    if (!this._tabBarEl) return;
    const tabs = this._tabBarEl.querySelectorAll('.calc-tab');
    tabs.forEach(tab => {
      tab.classList.toggle('active', tab.dataset.mode === this._activeMode);
    });
  },
  /**
   * Modus wechseln
   * @param {string} name - Ziel-Modus
   */
  async switchMode(name) {
    if (name === this._activeMode) return;
    const mode = this._modes.get(name);
    if (!mode) return;
    // Alten Modus aufräumen
    const oldMode = this._modes.get(this._activeMode);
    if (oldMode && oldMode.destroy) oldMode.destroy();
    this._activeMode = name;
    // Mode-Body leeren und neu rendern
    const entry = WidgetManager._widgets.get(this.WIDGET_ID);
    if (!entry) return;
    const modeBody = entry.el.querySelector('.calc-mode-body');
    if (!modeBody) return;
    modeBody.textContent = '';
    mode.render(modeBody);
    // Tab-UI aktualisieren
    this._updateTabBar();
    // Auto-Resize für komplexe Modi
    const isComplex = name !== 'standard';
    if (isComplex && entry) {
      const state = entry.state;
      if (state) {
        const newW = Math.max(state.width, 320);
        const newH = Math.max(state.height, 480);
        if (newW !== state.width || newH !== state.height) {
          entry.el.style.width = newW + 'px';
          entry.el.style.height = newH + 'px';
          state.width = newW;
          state.height = newH;
        }
      }
    }
    // Keyboard neu binden
    this._unbindKeyboard();
    if (name === 'standard' || name === 'scientific') {
      if (entry) this._bindKeyboard(entry.el);
    }
    await this.save();
  },
  /**
   * Standard-Modus UI rendern
   * @param {HTMLElement} bodyEl
   */
  _renderStandardMode(bodyEl) {
    bodyEl.style.padding = '8px';
    bodyEl.style.display = 'flex';
    bodyEl.style.flexDirection = 'column';
    bodyEl.style.flex = '1';
    bodyEl.style.overflow = 'hidden';
    // Display
    const display = document.createElement('div');
    display.className = 'calc-display';
    const exprEl = document.createElement('div');
    exprEl.className = 'calc-expression';
    this._displayExprEl = exprEl;
    const resultEl = document.createElement('div');
    resultEl.className = 'calc-result';
    resultEl.textContent = '0';
    this._displayResultEl = resultEl;
    display.append(exprEl, resultEl);
    // Buttons
    const buttonsEl = this._createButtons();
    // History
    const historyEl = this._createHistoryPanel();
    bodyEl.append(display, buttonsEl, historyEl);
    // Aktuellen State anzeigen
    this._updateDisplay();
  },
  /**
   * Button-Grid erstellen (4x5)
   * @returns {HTMLElement}
   */
  _createButtons() {
    const grid = document.createElement('div');
    grid.className = 'calc-buttons';
    // Button-Layout: [label, value, cssClass]
    const buttons = [
      ['C',  'clear',     'clear'],
      ['()', 'paren',     'operator'],
      ['%',  '%',         'operator'],
      ['\u00F7', '/',     'operator'],
      ['7',  '7',         ''],
      ['8',  '8',         ''],
      ['9',  '9',         ''],
      ['\u00D7', '*',     'operator'],
      ['4',  '4',         ''],
      ['5',  '5',         ''],
      ['6',  '6',         ''],
      ['\u2212', '-',     'operator'],
      ['1',  '1',         ''],
      ['2',  '2',         ''],
      ['3',  '3',         ''],
      ['+',  '+',         'operator'],
      ['0',  '0',         ''],
      ['.',  '.',         ''],
      ['\u232B', 'backspace', ''],
      ['=',  '=',         'equals']
    ];
    buttons.forEach(([label, value, cls]) => {
      const btn = document.createElement('button');
      btn.className = 'calc-btn' + (cls ? ' ' + cls : '');
      btn.textContent = label;
      btn.type = 'button';
      btn.addEventListener('click', () => this._handleKey(value));
      grid.appendChild(btn);
    });
    return grid;
  },
  /**
   * History-Panel erstellen
   * @returns {HTMLElement}
   */
  _createHistoryPanel() {
    const container = document.createElement('div');
    container.className = 'calc-history';
    container.id = 'calcHistoryPanel';
    const title = document.createElement('div');
    title.className = 'calc-history-title';
    title.textContent = t('calculator.history');
    container.appendChild(title);
    this._renderHistoryItems(container);
    return container;
  },
  /**
   * History-Items rendern
   * @param {HTMLElement} container
   */
  _renderHistoryItems(container) {
    // Alte Items entfernen (nur die .calc-history-item Elemente)
    const oldItems = container.querySelectorAll('.calc-history-item');
    oldItems.forEach(item => item.remove());
    if (this._history.length === 0) return;
    // Neueste zuerst
    const reversed = [...this._history].reverse();
    reversed.forEach(entry => {
      const item = document.createElement('div');
      item.className = 'calc-history-item';
      const exprSpan = document.createElement('span');
      exprSpan.textContent = entry.expr;
      const resultSpan = document.createElement('span');
      resultSpan.className = 'calc-h-result';
      resultSpan.textContent = '= ' + entry.result;
      item.append(exprSpan, resultSpan);
      // Klick uebernimmt Ergebnis als neue Eingabe
      item.addEventListener('click', () => {
        this._currentExpr = entry.result;
        this._lastResult = '';
        this._updateDisplay();
      });
      container.appendChild(item);
    });
  },
  // ---- INPUT HANDLING ----
  /**
   * Taste verarbeiten
   * @param {string} key
   */
  _handleKey(key) {
    switch (key) {
      case 'clear':
        this._currentExpr = '';
        this._lastResult = '';
        break;
      case 'backspace':
        this._currentExpr = this._currentExpr.slice(0, -1);
        break;
      case '=':
        this._calculate();
        return;
      case 'paren': {
        // Smarte Klammern: oeffnende wenn noetig, sonst schliessende
        const openCount = (this._currentExpr.match(/\(/g) || []).length;
        const closeCount = (this._currentExpr.match(/\)/g) || []).length;
        const lastChar = this._currentExpr.slice(-1);
        if (openCount <= closeCount || /[+\-*/%(]$/.test(lastChar) || this._currentExpr === '') {
          this._currentExpr += '(';
        } else {
          this._currentExpr += ')';
        }
        break;
      }
      case '%':
      case '+':
      case '-':
      case '*':
      case '/':
      case '^': {
        // Wenn gerade ein Ergebnis angezeigt wird, damit weiterrechnen
        if (this._lastResult && this._currentExpr === '') {
          this._currentExpr = this._lastResult;
          this._lastResult = '';
        }
        // Doppelte Operatoren verhindern (letzten ersetzen)
        const last = this._currentExpr.slice(-1);
        if (/[+\-*/%^]/.test(last)) {
          this._currentExpr = this._currentExpr.slice(0, -1) + key;
        } else {
          this._currentExpr += key;
        }
        break;
      }
      case '.': {
        // Doppelten Dezimalpunkt im letzten Zahlenblock verhindern
        const parts = this._currentExpr.split(/[+\-*/%()^]/);
        const lastPart = parts[parts.length - 1];
        if (lastPart && lastPart.includes('.')) break;
        this._currentExpr += key;
        break;
      }
      default:
        // Ziffern 0-9
        if (/^[0-9]$/.test(key)) {
          // Wenn ein Ergebnis da ist und User eine Zahl tippt, neue Berechnung starten
          if (this._lastResult && this._currentExpr === '') {
            this._lastResult = '';
          }
          this._currentExpr += key;
        }
        break;
    }
    this._updateDisplay();
  },
  /**
   * Berechnung ausfuehren
   */
  async _calculate() {
    if (!this._currentExpr) return;
    const result = this._evaluate(this._currentExpr);
    if (result === null) {
      this._lastResult = t('calculator.error');
      this._updateDisplay();
      return;
    }
    const resultStr = this._formatResult(result);
    this._addHistory(this._currentExpr, resultStr);
    this._lastResult = resultStr;
    // Display aktualisieren
    if (this._displayExprEl) {
      this._displayExprEl.textContent = this._formatExpression(this._currentExpr) + ' =';
    }
    if (this._displayResultEl) {
      this._displayResultEl.textContent = resultStr;
    }
    this._currentExpr = '';
    // History-Panel aktualisieren
    const historyPanel = document.getElementById('calcHistoryPanel');
    if (historyPanel) this._renderHistoryItems(historyPanel);
    await this.save();
  },
  // ---- EXPRESSION PARSER (Shunting-Yard, KEIN eval!) ----
  /**
   * Expression sicher auswerten
   * @param {string} expr
   * @returns {number|null}
   */
  _evaluate(expr) {
    try {
      // Nur erlaubte Zeichen
      const sanitized = expr.replace(/[^0-9+\-*/.%()^a-z]/g, '');
      if (!sanitized) return null;
      const tokens = this._tokenize(sanitized);
      if (!tokens) return null;
      return this._parseExpression(tokens);
    } catch {
      return null;
    }
  },
  /**
   * Expression in Tokens aufteilen
   * @param {string} expr
   * @returns {Array|null}
   */
  _tokenize(expr) {
    const tokens = [];
    let i = 0;
    while (i < expr.length) {
      const ch = expr[i];
      // Funktion: sqrt
      if (expr.substring(i, i + 4) === 'sqrt') {
        tokens.push({ type: 'func', value: 'sqrt' });
        i += 4;
        continue;
      }
      // Zahl (inkl. Dezimal)
      if (/[0-9.]/.test(ch)) {
        let num = '';
        while (i < expr.length && /[0-9.]/.test(expr[i])) {
          num += expr[i];
          i++;
        }
        const parsed = parseFloat(num);
        if (isNaN(parsed)) return null;
        tokens.push({ type: 'number', value: parsed });
        continue;
      }
      // Operator
      if (/[+\-*/%]/.test(ch)) {
        // Negativer Vorzeichen-Check: am Anfang oder nach Operator/oeffnender Klammer
        if (ch === '-') {
          const prev = tokens[tokens.length - 1];
          if (!prev || prev.type === 'op' || (prev.type === 'paren' && prev.value === '(')) {
            // Negatives Vorzeichen → als Teil der naechsten Zahl lesen
            let num = '-';
            i++;
            while (i < expr.length && /[0-9.]/.test(expr[i])) {
              num += expr[i];
              i++;
            }
            if (num === '-') return null;
            const parsed = parseFloat(num);
            if (isNaN(parsed)) return null;
            tokens.push({ type: 'number', value: parsed });
            continue;
          }
        }
        tokens.push({ type: 'op', value: ch });
        i++;
        continue;
      }
      // Potenz-Operator
      if (ch === '^') {
        tokens.push({ type: 'op', value: '^' });
        i++;
        continue;
      }
      // Klammern
      if (ch === '(' || ch === ')') {
        tokens.push({ type: 'paren', value: ch });
        i++;
        continue;
      }
      // Unbekannte Buchstaben
      if (/[a-z]/.test(ch)) {
        return null;
      }
      // Unbekanntes Zeichen
      return null;
    }
    return tokens;
  },
  /**
   * Rekursiver Descent Parser mit Operator-Precedence
   * Hierarchie: parseExpr (+/-) → parseTerm (*\/%) → parsePower (^) → parseFactor
   * @param {Array} tokens
   * @returns {number|null}
   */
  _parseExpression(tokens) {
    let pos = 0;
    function peek() { return tokens[pos]; }
    function consume() { return tokens[pos++]; }
    function parseExpr() {
      let left = parseTerm();
      if (left === null) return null;
      while (pos < tokens.length) {
        const tk = peek();
        if (!tk || tk.type !== 'op' || (tk.value !== '+' && tk.value !== '-')) break;
        consume();
        const right = parseTerm();
        if (right === null) return null;
        left = tk.value === '+' ? left + right : left - right;
      }
      return left;
    }
    function parseTerm() {
      let left = parsePower();
      if (left === null) return null;
      while (pos < tokens.length) {
        const tk = peek();
        if (!tk || tk.type !== 'op' || (tk.value !== '*' && tk.value !== '/' && tk.value !== '%')) break;
        consume();
        const right = parsePower();
        if (right === null) return null;
        if (tk.value === '*') {
          left = left * right;
        } else if (tk.value === '/') {
          if (right === 0) return null;
          left = left / right;
        } else {
          left = left % right;
        }
      }
      return left;
    }
    // Power: Factor ('^' Power)?  — rechts-assoziativ via Rekursion
    function parsePower() {
      let base = parseFactor();
      if (base === null) return null;
      const tk = peek();
      if (tk && tk.type === 'op' && tk.value === '^') {
        consume();
        const exp = parsePower(); // Rechts-assoziativ!
        if (exp === null) return null;
        return Math.pow(base, exp);
      }
      return base;
    }
    // Factor: func '(' Expression ')' | Number | '(' Expression ')'
    function parseFactor() {
      const tk = peek();
      if (!tk) return null;
      // Funktion: sqrt(...)
      if (tk.type === 'func') {
        const funcName = tk.value;
        consume();
        const open = peek();
        if (!open || open.type !== 'paren' || open.value !== '(') return null;
        consume();
        const val = parseExpr();
        if (val === null) return null;
        const close = peek();
        if (close && close.type === 'paren' && close.value === ')') {
          consume();
        }
        if (funcName === 'sqrt') {
          if (val < 0) return null; // Negativer Radikand nicht erlaubt
          return Math.sqrt(val);
        }
        return null;
      }
      if (tk.type === 'number') {
        consume();
        return tk.value;
      }
      if (tk.type === 'paren' && tk.value === '(') {
        consume();
        const val = parseExpr();
        if (val === null) return null;
        const closing = peek();
        if (closing && closing.type === 'paren' && closing.value === ')') {
          consume();
        }
        return val;
      }
      return null;
    }
    const result = parseExpr();
    // Alle Tokens muessen verbraucht sein
    if (pos < tokens.length) return null;
    if (result === null || !isFinite(result)) return null;
    return result;
  },
  // ---- FORMATTING ----
  /**
   * Ergebnis formatieren (maximal 10 Dezimalstellen, trailing Nullen entfernen)
   * @param {number} num
   * @returns {string}
   */
  _formatResult(num) {
    if (Number.isInteger(num)) return num.toString();
    // Maximal 10 Dezimalstellen, trailing Nullen weg
    const str = num.toFixed(10).replace(/\.?0+$/, '');
    return str;
  },
  /**
   * Expression fuer Anzeige formatieren (× statt *, ÷ statt /)
   * @param {string} expr
   * @returns {string}
   */
  _formatExpression(expr) {
    return expr
      .replace(/\*/g, '\u00D7')
      .replace(/\//g, '\u00F7')
      .replace(/sqrt\(/g, '\u221A(');
  },
  // ---- DISPLAY ----
  /**
   * Display aktualisieren
   */
  _updateDisplay() {
    if (this._displayExprEl) {
      if (this._lastResult) {
        // Ergebnis-Modus: Expression oben, Ergebnis gross
        // (wird von _calculate() direkt gesetzt)
      } else {
        this._displayExprEl.textContent = '';
      }
    }
    if (this._displayResultEl) {
      if (this._lastResult && this._currentExpr === '') {
        this._displayResultEl.textContent = this._lastResult;
      } else {
        this._displayResultEl.textContent = this._formatExpression(this._currentExpr) || '0';
      }
    }
  },
  // ---- HISTORY ----
  /**
   * History-Eintrag hinzufuegen
   * @param {string} expr
   * @param {string} result
   */
  _addHistory(expr, result) {
    this._history.push({
      expr: this._formatExpression(expr),
      result: result
    });
    // Limit einhalten
    if (this._history.length > this.MAX_HISTORY) {
      this._history = this._history.slice(-this.MAX_HISTORY);
    }
  },
  // ---- KEYBOARD ----
  /**
   * Tastatur-Events binden
   * @param {HTMLElement} widgetEl
   */
  _bindKeyboard(widgetEl) {
    this._unbindKeyboard();
    this._keydownHandler = (e) => {
      // Nur reagieren wenn Calculator-Widget fokussiert ist
      // (d.h. nicht wenn User in Textarea/Input tippt)
      if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') return;
      if (e.target.contentEditable === 'true') return;
      const key = e.key;
      let handled = false;
      if (/^[0-9]$/.test(key)) {
        this._handleKey(key);
        handled = true;
      } else if (key === '+' || key === '-' || key === '*' || key === '/') {
        this._handleKey(key);
        handled = true;
      } else if (key === '.') {
        this._handleKey('.');
        handled = true;
      } else if (key === '%') {
        this._handleKey('%');
        handled = true;
      } else if (key === '(' || key === ')') {
        this._handleKey('paren');
        handled = true;
      } else if (key === 'Enter' || key === '=') {
        this._handleKey('=');
        handled = true;
      } else if (key === 'Backspace') {
        this._handleKey('backspace');
        handled = true;
      } else if (key === 'Escape' || key === 'c' || key === 'C') {
        this._handleKey('clear');
        handled = true;
      }
      if (handled) {
        e.preventDefault();
        e.stopPropagation();
      }
    };
    widgetEl.addEventListener('keydown', this._keydownHandler);
    // Widget fokussierbar machen
    widgetEl.tabIndex = 0;
    widgetEl.focus();
  },
  /**
   * Keyboard-Events entfernen
   */
  _unbindKeyboard() {
    if (this._keydownHandler) {
      const entry = WidgetManager._widgets.get(this.WIDGET_ID);
      if (entry) {
        entry.el.removeEventListener('keydown', this._keydownHandler);
      }
      this._keydownHandler = null;
    }
  },
  // ---- INIT ----
  /**
   * Calculator initialisieren (aus app.js aufgerufen)
   */
  async init() {
    await this.load();
    // Standard-Modus ZUERST registrieren, bevor open() aufgerufen wird
    this._modes.set('standard', {
      label: '🔢',
      shortName: 'Std',
      titleKey: 'calculator.tab.standard',
      render: (bodyEl) => this._renderStandardMode(bodyEl),
      destroy: () => {
        this._displayExprEl = null;
        this._displayResultEl = null;
      }
    });
    // Wenn Calculator beim letzten Mal offen war, wiederherstellen
    const data = await Store.get(this.STORAGE_KEY);
    if (data && data.calculator && data.calculator.open) {
      await this.open();
    }
    // Widget-Lifecycle-Events
    const self = this;
    WidgetManager.on('widget:close', (e) => {
      if (e.detail.id === self.WIDGET_ID) {
        self.onClose();
      }
    });
    WidgetManager.on('widget:minimize', (e) => {
      if (e.detail.id === self.WIDGET_ID) {
        self._isOpen = false;
        self.save();
      }
    });
    WidgetManager.on('widget:open', (e) => {
      if (e.detail.id === self.WIDGET_ID) {
        self._isOpen = true;
        const body = WidgetManager.getBody(self.WIDGET_ID);
        if (body && body.children.length === 0) {
          self.renderBody(body);
        }
        const entry = WidgetManager._widgets.get(self.WIDGET_ID);
        if (entry) self._bindKeyboard(entry.el);
        self.save();
      }
    });
  }
 };
@@ -9,9 +9,33 @@ function initDataButtons() {
  const jsonInput = document.getElementById('jsonImportInput');
  if (!btnExport || !btnImport) return;
-  // Export
+  /**
-  btnExport.addEventListener('click', () => {
+   * Prueft ob eine URL ein sicheres Protokoll hat.
-    const data = { version: '1.2.0', exported: new Date().toISOString(), boards, settings };
+   * Blockiert javascript:, data:, vbscript: etc.
   * @param {string} url
   * @returns {boolean}
   */
  function isSafeUrl(url) {
    try {
      const u = new URL(url);
      return ['http:', 'https:', 'ftp:'].includes(u.protocol);
    } catch {
      return false;
    }
  }
  // Export (inkl. Notes)
  btnExport.addEventListener('click', async () => {
    const widgetData = await Store.get('widgetStates');
    const data = {
      version: '2.1.0',
      exported: new Date().toISOString(),
      boards,
      settings,
      notes: widgetData && Array.isArray(widgetData.notes) ? widgetData.notes : [],
      calculator: widgetData && widgetData.calculator ? widgetData.calculator.history || [] : [],
      timerPresets: widgetData && widgetData.timer ? widgetData.timer.presets || [] : []
    };
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
@@ -28,27 +52,104 @@ function initDataButtons() {
    if (!file) return;
    try {
      const data = JSON.parse(await file.text());
-      if (!Array.isArray(data.boards)) throw new Error('Ungültiges Format');
+      if (!Array.isArray(data.boards)) throw new Error(t('data.invalid_format'));
-      const validBoards = data.boards.filter(b => {
+      const validBoards = data.boards
-        if (!b || typeof b.title !== 'string' || !Array.isArray(b.bookmarks)) return false;
+        .filter(b => b && typeof b.title === 'string' && Array.isArray(b.bookmarks))
-        b.id = b.id || uid();
+        .map(b => ({
-        b.blurred = !!b.blurred;
+          id: b.id || uid(),
-        b.bookmarks = b.bookmarks.filter(bm => {
+          title: String(b.title).slice(0, 100),
-          if (!bm || typeof bm.title !== 'string' || typeof bm.url !== 'string') return false;
+          blurred: !!b.blurred,
-          bm.id = bm.id || uid();
+          bookmarks: b.bookmarks
-          bm.desc = bm.desc || '';
+            .filter(bm => bm && typeof bm.title === 'string' && isSafeUrl(bm.url))
-          return true;
+            .map(bm => ({
-        });
+              id: bm.id || uid(),
-        return true;
+              title: String(bm.title).slice(0, 200),
-      });
+              url: bm.url,
-      if (validBoards.length === 0) throw new Error('Keine gültigen Boards gefunden');
+              desc: String(bm.desc || '').slice(0, 500)
-      if (!confirm(`${validBoards.length} Boards importieren? Bestehende Daten bleiben erhalten.`)) return;
+            }))
        }));
      if (validBoards.length === 0) throw new Error(t('data.no_boards'));
      const ok = await HellionDialog.confirm(
        t('data.import_confirm', { count: validBoards.length }),
        { type: 'info', title: t('data.import_confirm.title') }
      );
      if (!ok) return;
      boards = [...boards, ...validBoards];
      await saveBoards();
      renderBoards();
-      alert(`✓ ${validBoards.length} Board(s) importiert.`);
+
      // Notes importieren (falls vorhanden)
      let notesImported = 0;
      const existingWidgets = await Store.get('widgetStates') || {};
      if (Array.isArray(data.notes) && data.notes.length > 0) {
        const existingNotes = Array.isArray(existingWidgets.notes) ? existingWidgets.notes : [];
        const importNotes = data.notes
          .filter(n => n && n.id && n.template)
          .map(n => ({
            id: n.id,
            template: ['note', 'checklist'].includes(n.template) ? n.template : 'note',
            title: String(n.title || '').slice(0, 200),
            content: String(n.content || '').slice(0, 5000),
            x: typeof n.x === 'number' ? n.x : 120,
            y: typeof n.y === 'number' ? n.y : 80,
            width: typeof n.width === 'number' ? n.width : 280,
            height: typeof n.height === 'number' ? n.height : 220,
            open: n.open !== false,
            checklistItems: Array.isArray(n.checklistItems) ? n.checklistItems : []
          }));
        // Limit beachten
        const spaceLeft = Notes.MAX_NOTES - existingNotes.length;
        const toImport = importNotes.slice(0, spaceLeft);
        if (toImport.length > 0) {
          const merged = [...existingNotes, ...toImport];
          existingWidgets.notes = merged;
          notesImported = toImport.length;
        }
      }
      // Calculator-History importieren (falls vorhanden)
      let calcImported = false;
      if (Array.isArray(data.calculator) && data.calculator.length > 0) {
        const calcHistory = data.calculator.filter(h => h && typeof h.expr === 'string' && typeof h.result === 'string');
        if (calcHistory.length > 0) {
          if (!existingWidgets.calculator) {
            existingWidgets.calculator = { x: 400, y: 120, width: 280, height: 400, open: false, history: [] };
          }
          existingWidgets.calculator.history = calcHistory.slice(0, Calculator.MAX_HISTORY);
          calcImported = true;
        }
      }
      // Timer-Presets importieren (falls vorhanden)
      let timerImported = false;
      if (Array.isArray(data.timerPresets) && data.timerPresets.length > 0) {
        const validPresets = data.timerPresets.filter(p => p && typeof p.name === 'string' && typeof p.seconds === 'number');
        if (validPresets.length > 0) {
          if (!existingWidgets.timer) {
            existingWidgets.timer = { x: 600, y: 80, width: 260, height: 360, open: false, presets: [] };
          }
          existingWidgets.timer.presets = validPresets.slice(0, Timer.MAX_PRESETS);
          timerImported = true;
        }
      }
      // Gemeinsam speichern
      await Store.set('widgetStates', existingWidgets);
      // Widget-Module neu aus Storage laden (kein direkter Zugriff auf Internals)
      if (notesImported > 0) await Notes.init();
      if (calcImported) await Calculator.load();
      if (timerImported) await Timer.load();
      const noteMsg = notesImported > 0 ? t('data.notes_suffix', { count: notesImported }) : '';
      const calcMsg = calcImported ? t('data.calc_suffix') : '';
      const timerMsg = timerImported ? t('data.timer_suffix') : '';
      await HellionDialog.alert(
        t('data.import_success', { boards: validBoards.length, notes: noteMsg, calc: calcMsg, timer: timerMsg }),
        { type: 'success', title: t('data.import_success.title') }
      );
    } catch (err) {
-      alert('Fehler beim Import: ' + err.message);
+      await HellionDialog.alert(t('data.import_error', { error: err.message }), { type: 'danger', title: t('data.import_error.title') });
    }
    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 || t('dialog.default_title'),
      confirmText: opts.confirmText || t('dialog.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 || t('dialog.confirm_title'),
      confirmText: opts.confirmText || t('dialog.ok'),
      cancelText: opts.cancelText || t('dialog.cancel'),
      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,21 +102,35 @@ 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');
    if (!item) return;
    dragSrcBmId = item.dataset.bmId;
    e.dataTransfer.effectAllowed = 'move';
-      setTimeout(() => item.style.opacity = '0.4', 0);
+    setTimeout(() => item.classList.add('dragging-source'), 0);
  });
-    item.addEventListener('dragend',  () => { item.style.opacity = ''; });
+
-    item.addEventListener('dragover', e => {
+  listEl.addEventListener('dragend', e => {
    const item = e.target.closest('.bm-item');
    if (item) item.classList.remove('dragging-source');
  });
  listEl.addEventListener('dragover', e => {
    e.preventDefault();
-      item.style.background = 'rgba(255,160,50,0.07)';
+    const item = e.target.closest('.bm-item');
    if (item) item.classList.add('drag-over');
  });
-    item.addEventListener('dragleave', () => { item.style.background = ''; });
+
-    item.addEventListener('drop', async e => {
+  listEl.addEventListener('dragleave', e => {
    const item = e.target.closest('.bm-item');
    if (item) item.classList.remove('drag-over');
  });
  listEl.addEventListener('drop', async e => {
    e.preventDefault(); e.stopPropagation();
-      item.style.background = '';
+    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);
@@ -128,5 +140,4 @@ function initBookmarkDragDrop(listEl, board) {
    await saveBoards();
    renderBoards();
  });
  });
 }
@@ -0,0 +1,910 @@
 /* =============================================
   HELLION NEWTAB — i18n.js
   Internationalisierung: DE/EN Sprachumschaltung
   ============================================= */
 const STRINGS = {
  de: {
    // Dialog-System
    'dialog.default_title':    'Hinweis',
    'dialog.ok':               'OK',
    'dialog.confirm_title':    'Bestätigung',
    'dialog.cancel':           'Abbrechen',
    'dialog.close':            'Schließen',
    // Boards
    'boards.empty_state_pre':  'Noch keine Boards. Klicke auf ',
    'boards.add_board':        '+ Board',
    'boards.empty_state_mid':  ' um eins zu erstellen, oder nutze ',
    'boards.import':           'Import',
    'boards.empty_state_post': ' um deine Browser-Lesezeichen zu laden.',
    'boards.drag_title':       'Board verschieben',
    'boards.blur':             'Blur (privat)',
    'boards.unblur':           'Unblur',
    'boards.rename':           'Umbenennen',
    'boards.delete':           'Löschen',
    'boards.delete_confirm':   'Board „{title}" wirklich löschen?',
    'boards.delete_confirm.title': 'Board löschen',
    'boards.show_more':        '{count} weitere anzeigen…',
    'boards.show_less':        'Weniger anzeigen',
    'boards.add_link':         ' Link hinzufügen',
    'boards.remove_bookmark':  'Entfernen',
    // Onboarding
    'onboarding.skip':         'Überspringen',
    'onboarding.back':         'Zurück',
    'onboarding.next':         'Weiter',
    'onboarding.start':        'Los geht\'s!',
    'onboarding.yes':          'Ja, gerne',
    'onboarding.no':           'Nein danke',
    'onboarding.s1.title':     'Willkommen bei Hellion Dashboard',
    'onboarding.s1.text':      'Dein neuer Browser-Startbildschirm. Minimalistisch, schnell und vollständig lokal — keine Cloud, kein Account, keine Datensammlung.',
    'onboarding.s2.title':     'Boards & Bookmarks',
    'onboarding.s2.f1':        'Erstelle Boards mit dem „+ Board" Button oben',
    'onboarding.s2.f2':        'Importiere Browser-Lesezeichen über den „Import" Button im Header',
    'onboarding.s2.f3':        'Drag & Drop zum Umsortieren von Boards und Links',
    'onboarding.s2.f4':        'Blur-Modus für private Boards (🔒 Icon)',
    'onboarding.s3.title':     '11 handgefertigte Themes',
    'onboarding.s3.text':      'Klicke auf den „Theme" Button im Header um dein Theme zu wählen. Jedes hat seinen eigenen Stil und Farbpalette.',
    'onboarding.s4.title':     'Widget-Toolbar',
    'onboarding.s4.f1':        'Die schwebenden Buttons rechts öffnen Widgets',
    'onboarding.s4.f2':        'Notes und Checklisten für schnelle Notizen',
    'onboarding.s4.f3':        'Taschenrechner mit History',
    'onboarding.s4.f4':        'Timer/Countdown mit speicherbaren Presets',
    'onboarding.s4.f5':        'Bild-Referenz Widgets (aktivierbar in Settings)',
    'onboarding.s4.f6':        'Notebook-Sidebar zeigt alle Notes auf einen Blick',
    'onboarding.s5.title':     'Backups nicht vergessen!',
    'onboarding.s5.text':      'Deine Daten sind lokal im Browser gespeichert. Wenn du Browserdaten löschst, gehen sie verloren! Sichere regelmäßig über Settings → Data → Export. Wir erinnern dich alle 7 Tage daran.',
    'onboarding.s6.title':     'Gaming Starter Board',
    'onboarding.s6.text':      'Spielst du Games wie Satisfactory, Factorio oder Star Citizen? Ich kann ein Board mit nützlichen Community-Links anlegen.',
    'onboarding.tradecenter_desc': 'Trade Center für Star Citizen',
    'onboarding.s7.title':     'Bereit!',
    'onboarding.s7.text':      'Erstelle dein erstes Board mit „+ Board" oder importiere deine Browser-Lesezeichen über den Import-Button im Header. Viel Spaß!',
    // Notes
    'notes.limit_message':     'Maximale Anzahl erreicht! Du kannst maximal {max} Notes gleichzeitig haben. Lösche eine bestehende Note um eine neue zu erstellen.',
    'notes.limit_title':       'Limit erreicht',
    'notes.checklist_title':   'Checkliste',
    'notes.default_title':     'Note',
    'notes.placeholder':       'Notiz schreiben...',
    'notes.checklist_placeholder': 'Neues Item...',
    'notes.delete_confirm':    'Note endgültig löschen? Das kann nicht rückgängig gemacht werden.',
    'notes.delete_title':      'Note löschen',
    'notes.delete_button':     'Löschen',
    'notes.checklist_progress': '{done}/{total} erledigt',
    'notes.empty_preview':     'Leer',
    'notes.export':            'Export',
    'notes.export_footer':     'Exportiert aus Hellion Dashboard',
    'notes.create':            '+ Note erstellen',
    'notes.text_type':         '✎ Freitext',
    'notes.checklist_type':    '☑ Checkliste',
    // Calculator
    'calculator.title':        'Taschenrechner',
    'calculator.history':      'History',
    'calculator.error':        'Fehler',
    'calculator.tab.standard': 'Standard',
    'calculator.tab.scientific':         'Wissenschaftlich',
    'calculator.sci.formulas':           'Formel-Helfer',
    'calculator.sci.select_formula':     'Formel wählen…',
    'calculator.sci.formula.circle_area':         'Kreisfläche (π×r²)',
    'calculator.sci.formula.circle_circumference':'Kreisumfang (2πr)',
    'calculator.sci.formula.celsius_to_fahrenheit':'°C → °F',
    'calculator.sci.formula.fahrenheit_to_celsius':'°F → °C',
    'calculator.sci.formula.pythagoras':          'Pythagoras (√(a²+b²))',
    'calculator.sci.formula.percentage':          'Prozentwert',
    'calculator.sci.field.radius':       'Radius',
    'calculator.sci.field.temp':         'Temperatur',
    'calculator.sci.field.a':            'Seite a',
    'calculator.sci.field.b':            'Seite b',
    'calculator.sci.field.value':        'Wert',
    'calculator.sci.field.percent':      'Prozent',
    'calculator.tab.converter':          'Umrechner',
    'calculator.conv.swap':              'Einheiten tauschen',
    'calculator.conv.cat.length':        'Länge',
    'calculator.conv.cat.weight':        'Gewicht',
    'calculator.conv.cat.temperature':   'Temperatur',
    'calculator.conv.cat.volume':        'Volumen',
    'calculator.conv.cat.speed':         'Geschwindigkeit',
    'calculator.conv.cat.area':          'Fläche',
    'calculator.tab.satisfactory':       'Satisfactory',
    'calculator.sat.tab.itemsPerMin':    'Items/Min',
    'calculator.sat.tab.power':          'Strom',
    'calculator.sat.tab.machines':       'Maschinen',
    'calculator.sat.items_per_craft':    'Items/Craft',
    'calculator.sat.craft_time':         'Craftzeit (s)',
    'calculator.sat.clock_speed':        'Taktrate (%)',
    'calculator.sat.base_power':         'Grundleistung (MW)',
    'calculator.sat.target_output':      'Ziel Output/Min',
    'calculator.sat.output_per_min':     'Output',
    'calculator.sat.power_usage':        'Stromverbrauch',
    'calculator.sat.efficiency':         'Effizienz',
    'calculator.sat.per_item':           'pro Item',
    'calculator.sat.machines_needed':    'Maschinen benötigt',
    'calculator.sat.total_power':        'Gesamtleistung',
    // Factorio Calculator
    'calculator.tab.factorio':           'Factorio',
    'calculator.fac.tab.ratio':          'Ratio',
    'calculator.fac.tab.belt':           'Belt',
    'calculator.fac.tab.machines':       'Maschinen',
    'calculator.fac.assembler':          'Assembler',
    'calculator.fac.asm.asm1':           'Assembler 1',
    'calculator.fac.asm.asm2':           'Assembler 2',
    'calculator.fac.asm.asm3':           'Assembler 3',
    'calculator.fac.belt':               'Belt-Typ',
    'calculator.fac.belt.yellow':        'Gelb',
    'calculator.fac.belt.red':           'Rot',
    'calculator.fac.belt.blue':          'Blau',
    'calculator.fac.recipe_output':      'Rezept-Output',
    'calculator.fac.recipe_time':        'Rezeptzeit (s)',
    'calculator.fac.consume_per_sec':    'Verbrauch/s',
    'calculator.fac.target_output_sec':  'Ziel Output/s',
    'calculator.fac.items_per_sec':      'Items/s',
    'calculator.fac.items_per_min':      'Items/min',
    'calculator.fac.machines_per_belt':  'Maschinen/Belt',
    'calculator.fac.belt_utilization':   'Belt-Auslastung',
    'calculator.fac.machines_needed':    'Maschinen benötigt',
    'calculator.fac.belt_needed':        'Belt benötigt',
    'calculator.fac.exceeds_belt':       'Übersteigt max. Belt',
    // Stationeers Calculator
    'calculator.tab.stationeers':        'Stationeers',
    'calculator.sta.tab.gas':            'Gas',
    'calculator.sta.tab.furnace':        'Ofen',
    'calculator.sta.tab.solar':          'Solar',
    'calculator.sta.tab.atmo':           'Atmo',
    'calculator.sta.solve_for':          'Gesucht',
    'calculator.sta.var.P':              'Druck (P)',
    'calculator.sta.var.V':              'Volumen (V)',
    'calculator.sta.var.n':              'Stoffmenge (n)',
    'calculator.sta.var.T':              'Temperatur (T)',
    'calculator.sta.var.P_label':        'Druck (kPa)',
    'calculator.sta.var.V_label':        'Volumen (L)',
    'calculator.sta.var.n_label':        'Stoffmenge (mol)',
    'calculator.sta.var.T_label':        'Temperatur (K)',
    'calculator.sta.result':             'Ergebnis',
    'calculator.sta.fuel_ratio':         'Fuel-Anteil (0-1)',
    'calculator.sta.start_temp':         'Start-Temperatur (K)',
    'calculator.sta.start_pressure':     'Start-Druck (kPa)',
    'calculator.sta.temp_after':         'T nach Zündung',
    'calculator.sta.pressure_after':     'P nach Zündung',
    'calculator.sta.warn_low_fuel':      '\u26A0 Fuel unter 5%',
    'calculator.sta.warn_low_pressure':  '\u26A0 Druck unter 10 kPa',
    'calculator.sta.panels':             'Anzahl Panels',
    'calculator.sta.watts_per_panel':    'Watt/Panel',
    'calculator.sta.day_length':         'Taglänge (s)',
    'calculator.sta.night_length':       'Nachtlänge (s)',
    'calculator.sta.consumption':        'Verbrauch (W)',
    'calculator.sta.generation':         'Erzeugung',
    'calculator.sta.surplus':            'Überschuss',
    'calculator.sta.night_energy':       'Nacht-Energie',
    'calculator.sta.batteries_needed':   'Batterien benötigt',
    'calculator.sta.target_temp':        'Ziel-Temperatur (K)',
    'calculator.sta.gas1_temp':          'Gas 1 Temperatur (K)',
    'calculator.sta.gas2_temp':          'Gas 2 Temperatur (K)',
    'calculator.sta.mixer_input1':       'Mixer Input 1',
    'calculator.sta.mixer_input2':       'Mixer Input 2',
    'calculator.sta.heat_cap_ref':       'Wärmekapazitäten (Referenz)',
    'calculator.sta.gas':                'Gas',
    // Timer
    'timer.title':             'Timer',
    'timer.start':             'Start',
    'timer.pause':             'Pause',
    'timer.reset':             'Reset',
    'timer.restart':           'Neustart',
    'timer.presets':           'Presets',
    'timer.save_preset':       'Preset speichern',
    'timer.preset_name_placeholder': 'Name...',
    'timer.ok':                'OK',
    'timer.limit_title':       'Limit erreicht',
    'timer.limit_message':     'Maximale Anzahl erreicht! Du kannst maximal {max} Presets speichern.',
    'timer.no_time_title':     'Keine Zeit',
    'timer.no_time_message':   'Gib zuerst eine Zeit ein, bevor du ein Preset speicherst.',
    'timer.mute':              'Ton ausschalten',
    'timer.unmute':            'Ton einschalten',
    'timer.finished_title':    '[!] Timer abgelaufen',
    'timer.default_page_title': 'Hellion Dashboard',
    // Bild-Referenz
    'imageref.title':          'Bild-Referenz',
    'imageref.dropzone':       'Klicken oder Bild hierher ziehen',
    'imageref.replace':        'Bild ersetzen',
    'imageref.label_placeholder': 'Beschriftung (optional)',
    'imageref.storage_error':  'Bild konnte nicht gespeichert werden. Der Browser-Speicher ist voll.',
    'imageref.storage_error.title': 'Speicherfehler',
    'imageref.limit':          'Maximal {max} Bild-Widgets gleichzeitig. Schliesse eines um ein neues zu oeffnen.',
    'imageref.limit.title':    'Limit erreicht',
    'imageref.load_error':     'Bild konnte nicht geladen werden: {error}',
    'imageref.load_error.title': 'Bildfehler',
    'imageref.invalid_file':   'Bitte eine Bilddatei verwenden (PNG, JPG, WebP, etc.).',
    'imageref.invalid_file.title': 'Kein Bild',
    // Widget-Manager
    'widget.minimize':         'Minimieren',
    'widget.close':            'Schließen',
    // Daten (Export/Import)
    'data.invalid_format':     'Ungültiges Format',
    'data.no_boards':          'Keine gültigen Boards gefunden',
    'data.import_confirm':     '{count} Boards importieren? Bestehende Daten bleiben erhalten.',
    'data.import_confirm.title': 'JSON Import',
    'data.import_success':     '{boards} Board(s){notes}{calc}{timer} erfolgreich importiert.',
    'data.import_success.title': 'Import erfolgreich',
    'data.import_error':       'Fehler beim Import: {error}',
    'data.import_error.title': 'Import fehlgeschlagen',
    'data.notes_suffix':       ' + {count} Note(s)',
    'data.calc_suffix':        ' + Calculator-History',
    'data.timer_suffix':       ' + Timer-Presets',
    // Browser-Lesezeichen Import
    'bm_import.no_access':     'Zugriff auf Browser-Lesezeichen nicht möglich. Stelle sicher, dass die Extension die nötigen Berechtigungen hat.',
    'bm_import.title':         'Lesezeichen-Import',
    'bm_import.no_folders':    'Keine Lesezeichen-Ordner gefunden.',
    'bm_import.modal_title':   'Browser-Lesezeichen importieren',
    'bm_import.info':          'Wähle die Ordner aus, die als Boards importiert werden sollen. Jeder Ordner wird ein eigenes Board.',
    'bm_import.unnamed':       'Unbenannt',
    'bm_import.link_count':    '{count} Link(s)',
    'bm_import.folder_count':  '{count} Ordner',
    'bm_import.empty':         'leer',
    'bm_import.select_all':    'Alle auswählen',
    'bm_import.deselect_all':  'Alle abwählen',
    'bm_import.import_btn':    'Importieren',
    'bm_import.no_selection':  'Bitte wähle mindestens einen Ordner aus.',
    'bm_import.boards_created':    '{count} Board(s) erstellt',
    'bm_import.bookmarks_imported': '{count} Lesezeichen importiert',
    'bm_import.duplicates_skipped': '{count} Duplikat(e) übersprungen',
    'bm_import.success_title': 'Import abgeschlossen',
    // Storage
    'storage.quota_full':      'Speicher voll! Bitte lösche alte Boards oder das Hintergrundbild, um Platz zu schaffen.',
    'storage.quota_full.title': 'Speicher voll',
    // App
    'app.backup_reminder':     'Du hast seit über einer Woche kein Backup gemacht. Beim Löschen der Browserdaten gehen deine Boards verloren. Jetzt sichern?',
    'app.backup_reminder.title': 'Backup-Erinnerung',
    'app.backup_now':          'Jetzt sichern',
    'app.backup_later':        'Später',
    'app.no_bookmarks':        'Keine Bookmarks in dieser Datei gefunden.',
    'app.import_title':        'Import',
    'app.html_import_success': '{count} Board(s) mit {total} Bookmarks importiert.',
    'app.import_success_title': 'Import erfolgreich',
    'app.invalid_url':         'Ungültige URL. Bitte mit https:// beginnen.',
    'app.invalid_url.title':   'URL ungültig',
    // Uhr
    'clock.days.sun':          'So',
    'clock.days.mon':          'Mo',
    'clock.days.tue':          'Di',
    'clock.days.wed':          'Mi',
    'clock.days.thu':          'Do',
    'clock.days.fri':          'Fr',
    'clock.days.sat':          'Sa',
    'clock.months.jan':        'Jan',
    'clock.months.feb':        'Feb',
    'clock.months.mar':        'Mär',
    'clock.months.apr':        'Apr',
    'clock.months.may':        'Mai',
    'clock.months.jun':        'Jun',
    'clock.months.jul':        'Jul',
    'clock.months.aug':        'Aug',
    'clock.months.sep':        'Sep',
    'clock.months.oct':        'Okt',
    'clock.months.nov':        'Nov',
    'clock.months.dec':        'Dez',
    // Settings
    'settings.file_read_error': 'Fehler beim Lesen der Datei. Bitte eine andere Datei wählen.',
    'settings.file_read_error.title': 'Dateifehler',
    'settings.reset_confirm':  'Wirklich alle Boards und Einstellungen löschen? Das kann nicht rückgängig gemacht werden.',
    'settings.reset_confirm.title':   'Alles zurücksetzen',
    'settings.reset_confirm.button':  'Alles löschen',
    // Header
    'header.import':           'Import',
    'header.board':            'Board',
    'header.note':             'Note',
    'header.theme':            'Darstellung',
    'header.settings':         'Einstellungen',
    // Header Tooltips
    'header.import_title':       'Bookmarks importieren (HTML)',
    'header.board_title':        'Neues Board hinzufügen',
    'header.note_title':         'Schnellnotiz',
    'header.theme_title':        'Darstellung & Theme',
    'header.settings_title':     'Einstellungen',
    // Settings-Panel Überschrift
    'settings.title':          'Einstellungen',
    // Settings-Panel Sektionen
    'settings.section.widgets':   'WIDGETS',
    'settings.section.data':      'DATEN & HILFE',
    'settings.section.danger':    'DANGER ZONE',
    'settings.section.bg':        'HINTERGRUND',
    'settings.section.display':   'DARSTELLUNG',
    // Settings-Zeilen
    'settings.language':           'Sprache',
    'settings.language.desc':      'Anzeigesprache wählen',
    'settings.language.auto':      'Automatisch',
    'settings.toolbar_pos':        'Toolbar-Position',
    'settings.toolbar_pos.desc':   'Widget-Toolbar links oder rechts anzeigen',
    'settings.toolbar_pos.right':  'Rechts',
    'settings.toolbar_pos.left':   'Links',
    'settings.image_ref':          'Bild-Referenz Widgets',
    'settings.image_ref.desc':     'Bilder als Referenz anzeigen (nur aktuelle Session)',
    'settings.export':             'Backup exportieren',
    'settings.export.desc':        'Alle Boards, Notes und Einstellungen als JSON sichern',
    'settings.export.btn':         'Export',
    'settings.import':             'Backup importieren',
    'settings.import.desc':        'JSON-Backup wiederherstellen',
    'settings.browser_import':     'Browser-Lesezeichen',
    'settings.browser_import.desc': 'Lesezeichen direkt aus dem Browser importieren',
    'settings.onboarding':         'Onboarding wiederholen',
    'settings.onboarding.desc':    'Willkommens-Tour erneut anzeigen',
    'settings.reset':              'Alles zurücksetzen',
    'settings.reset.desc':         'Löscht alle Boards, Notes und Einstellungen',
    'settings.compact':            'Kompaktmodus',
    'settings.compact.desc':       'Weniger Abstand für mehr Bookmarks',
    'settings.shorten':            'Lange Titel kürzen',
    'settings.shorten.desc':       'Titel auf eine Zeile mit „…" kürzen',
    'settings.search':             'Suchleiste anzeigen',
    'settings.search.desc':        'Suchleiste unter dem Header ein/aus',
    'settings.newtab':             'Links in neuem Tab',
    'settings.newtab.desc':        'Bookmarks in neuem Browser-Tab öffnen',
    'settings.showdesc':           'Beschreibungen anzeigen',
    'settings.showdesc.desc':      'Gespeicherte Beschreibung unter Bookmarks',
    'settings.hideextra':          'Bookmarks ausblenden',
    'settings.hideextra.desc':     'Überzählige Bookmarks in langen Boards verstecken',
    'settings.visible_count':      'Sichtbare Bookmarks',
    'settings.visible_count.desc': 'Anzahl vor dem Ausblenden',
    'settings.bg_url':             'Bild-URL',
    'settings.bg_url.desc':        'Eigenes Hintergrundbild per URL',
    'settings.bg_change':          'Ändern',
    'settings.bg_apply':           'Übernehmen',
    'settings.bg_upload':          'Datei hochladen',
    'settings.bg_upload.desc':     'Lokales Bild als Hintergrund verwenden',
    'settings.search_engine_toggle': 'Suchmaschine wechseln',
    // Settings Buttons + Validierung
    'settings.onboarding_btn':   'Start',
    'settings.reset_btn':        'Reset',
    'settings.bg_upload_btn':    'Upload',
    'settings.bg_invalid_url':   'Nur lokale Bilder (Upload) sind als Hintergrund erlaubt.',
    'settings.bg_invalid_url.title': 'Ungültige URL',
    // Modals
    'modal.new_board':         'Neues Board',
    'modal.board_name':        'Board-Name...',
    'modal.create':            'Erstellen',
    'modal.new_bookmark':      'Neues Lesezeichen',
    'modal.bm_title':          'Titel...',
    'modal.bm_desc':           'Beschreibung (optional)',
    'modal.bm_add':            'Hinzufügen',
    'modal.rename':            'Umbenennen',
    'modal.rename_placeholder': 'Neuer Name...',
    'modal.rename_confirm':    'Umbenennen',
    'modal.theme_header':      'Darstellung',
    // About
    'about.title':             '⬡ HELLION NEWTAB',
    'about.impressum':         'Impressum',
    'about.developer':         'Entwickler',
    'about.company':           'Unternehmen',
    'about.license':           'Lizenz',
    'about.storage':           'Datenspeicherung',
    'about.storage.value':     '100% lokal · Kein Server · Kein Account',
    'about.bugreport':         'Bug Report / Feedback',
    'about.support':           'Support',
    'about.browsers':          'Kompatible Browser',
    // Notebook
    'notebook.title':          'Notebook',
    // Suche
    'search.placeholder':      'Im Web suchen…',
    'search.submit_title':     'Suchen',
    // Widget-Toolbar Tooltips
    'toolbar.note':            'Note erstellen',
    'toolbar.checklist':       'Checkliste erstellen',
    'toolbar.calculator':      'Taschenrechner',
    'toolbar.timer':           'Timer',
    'toolbar.imageref':        'Bild-Referenz',
    'toolbar.notebook':        'Alle Notes'
  },
  en: {
    // Dialog system
    'dialog.default_title':    'Notice',
    'dialog.ok':               'OK',
    'dialog.confirm_title':    'Confirmation',
    'dialog.cancel':           'Cancel',
    'dialog.close':            'Close',
    // Boards
    'boards.empty_state_pre':  'No boards yet. Click ',
    'boards.add_board':        '+ Board',
    'boards.empty_state_mid':  ' to create one, or use ',
    'boards.import':           'Import',
    'boards.empty_state_post': ' to load your browser bookmarks.',
    'boards.drag_title':       'Move board',
    'boards.blur':             'Blur (private)',
    'boards.unblur':           'Unblur',
    'boards.rename':           'Rename',
    'boards.delete':           'Delete',
    'boards.delete_confirm':   'Really delete board "{title}"?',
    'boards.delete_confirm.title': 'Delete board',
    'boards.show_more':        'Show {count} more…',
    'boards.show_less':        'Show less',
    'boards.add_link':         ' Add link',
    'boards.remove_bookmark':  'Remove',
    // Onboarding
    'onboarding.skip':         'Skip',
    'onboarding.back':         'Back',
    'onboarding.next':         'Next',
    'onboarding.start':        'Let\'s go!',
    'onboarding.yes':          'Yes please',
    'onboarding.no':           'No thanks',
    'onboarding.s1.title':     'Welcome to Hellion Dashboard',
    'onboarding.s1.text':      'Your new browser start screen. Minimalist, fast and fully local — no cloud, no account, no data collection.',
    'onboarding.s2.title':     'Boards & Bookmarks',
    'onboarding.s2.f1':        'Create boards with the "+ Board" button at the top',
    'onboarding.s2.f2':        'Import browser bookmarks via the "Import" button in the header',
    'onboarding.s2.f3':        'Drag & drop to reorder boards and links',
    'onboarding.s2.f4':        'Blur mode for private boards (🔒 icon)',
    'onboarding.s3.title':     '11 handcrafted themes',
    'onboarding.s3.text':      'Click the "Theme" button in the header to choose your theme. Each has its own style and color palette.',
    'onboarding.s4.title':     'Widget Toolbar',
    'onboarding.s4.f1':        'The floating buttons on the right open widgets',
    'onboarding.s4.f2':        'Notes and checklists for quick notes',
    'onboarding.s4.f3':        'Calculator with history',
    'onboarding.s4.f4':        'Timer/countdown with saveable presets',
    'onboarding.s4.f5':        'Image reference widgets (enable in Settings)',
    'onboarding.s4.f6':        'Notebook sidebar shows all notes at a glance',
    'onboarding.s5.title':     'Don\'t forget backups!',
    'onboarding.s5.text':      'Your data is stored locally in the browser. If you clear browser data, it\'s gone! Back up regularly via Settings → Data → Export. We\'ll remind you every 7 days.',
    'onboarding.s6.title':     'Gaming Starter Board',
    'onboarding.s6.text':      'Do you play games like Satisfactory, Factorio or Star Citizen? I can create a board with useful community links.',
    'onboarding.tradecenter_desc': 'Trade Center for Star Citizen',
    'onboarding.s7.title':     'Ready!',
    'onboarding.s7.text':      'Create your first board with "+ Board" or import your browser bookmarks via the Import button in the header. Have fun!',
    // Notes
    'notes.limit_message':     'Maximum reached! You can have at most {max} notes at the same time. Delete an existing note to create a new one.',
    'notes.limit_title':       'Limit reached',
    'notes.checklist_title':   'Checklist',
    'notes.default_title':     'Note',
    'notes.placeholder':       'Write a note...',
    'notes.checklist_placeholder': 'New item...',
    'notes.delete_confirm':    'Permanently delete note? This cannot be undone.',
    'notes.delete_title':      'Delete note',
    'notes.delete_button':     'Delete',
    'notes.checklist_progress': '{done}/{total} done',
    'notes.empty_preview':     'Empty',
    'notes.export':            'Export',
    'notes.export_footer':     'Exported from Hellion Dashboard',
    'notes.create':            '+ Create note',
    'notes.text_type':         '✎ Free text',
    'notes.checklist_type':    '☑ Checklist',
    // Calculator
    'calculator.title':        'Calculator',
    'calculator.history':      'History',
    'calculator.error':        'Error',
    'calculator.tab.standard': 'Standard',
    'calculator.tab.scientific':         'Scientific',
    'calculator.sci.formulas':           'Formula Helper',
    'calculator.sci.select_formula':     'Choose formula…',
    'calculator.sci.formula.circle_area':         'Circle Area (π×r²)',
    'calculator.sci.formula.circle_circumference':'Circle Circumference (2πr)',
    'calculator.sci.formula.celsius_to_fahrenheit':'°C → °F',
    'calculator.sci.formula.fahrenheit_to_celsius':'°F → °C',
    'calculator.sci.formula.pythagoras':          'Pythagoras (√(a²+b²))',
    'calculator.sci.formula.percentage':          'Percentage',
    'calculator.sci.field.radius':       'Radius',
    'calculator.sci.field.temp':         'Temperature',
    'calculator.sci.field.a':            'Side a',
    'calculator.sci.field.b':            'Side b',
    'calculator.sci.field.value':        'Value',
    'calculator.sci.field.percent':      'Percent',
    'calculator.tab.converter':          'Converter',
    'calculator.conv.swap':              'Swap units',
    'calculator.conv.cat.length':        'Length',
    'calculator.conv.cat.weight':        'Weight',
    'calculator.conv.cat.temperature':   'Temperature',
    'calculator.conv.cat.volume':        'Volume',
    'calculator.conv.cat.speed':         'Speed',
    'calculator.conv.cat.area':          'Area',
    'calculator.tab.satisfactory':       'Satisfactory',
    'calculator.sat.tab.itemsPerMin':    'Items/Min',
    'calculator.sat.tab.power':          'Power',
    'calculator.sat.tab.machines':       'Machines',
    'calculator.sat.items_per_craft':    'Items/Craft',
    'calculator.sat.craft_time':         'Craft Time (s)',
    'calculator.sat.clock_speed':        'Clock Speed (%)',
    'calculator.sat.base_power':         'Base Power (MW)',
    'calculator.sat.target_output':      'Target Output/Min',
    'calculator.sat.output_per_min':     'Output',
    'calculator.sat.power_usage':        'Power Usage',
    'calculator.sat.efficiency':         'Efficiency',
    'calculator.sat.per_item':           'per item',
    'calculator.sat.machines_needed':    'Machines needed',
    'calculator.sat.total_power':        'Total Power',
    // Factorio Calculator
    'calculator.tab.factorio':           'Factorio',
    'calculator.fac.tab.ratio':          'Ratio',
    'calculator.fac.tab.belt':           'Belt',
    'calculator.fac.tab.machines':       'Machines',
    'calculator.fac.assembler':          'Assembler',
    'calculator.fac.asm.asm1':           'Assembler 1',
    'calculator.fac.asm.asm2':           'Assembler 2',
    'calculator.fac.asm.asm3':           'Assembler 3',
    'calculator.fac.belt':               'Belt Type',
    'calculator.fac.belt.yellow':        'Yellow',
    'calculator.fac.belt.red':           'Red',
    'calculator.fac.belt.blue':          'Blue',
    'calculator.fac.recipe_output':      'Recipe Output',
    'calculator.fac.recipe_time':        'Recipe Time (s)',
    'calculator.fac.consume_per_sec':    'Consume/s',
    'calculator.fac.target_output_sec':  'Target Output/s',
    'calculator.fac.items_per_sec':      'Items/s',
    'calculator.fac.items_per_min':      'Items/min',
    'calculator.fac.machines_per_belt':  'Machines/Belt',
    'calculator.fac.belt_utilization':   'Belt Utilization',
    'calculator.fac.machines_needed':    'Machines needed',
    'calculator.fac.belt_needed':        'Belt needed',
    'calculator.fac.exceeds_belt':       'Exceeds max belt',
    // Stationeers Calculator
    'calculator.tab.stationeers':        'Stationeers',
    'calculator.sta.tab.gas':            'Gas',
    'calculator.sta.tab.furnace':        'Furnace',
    'calculator.sta.tab.solar':          'Solar',
    'calculator.sta.tab.atmo':           'Atmo',
    'calculator.sta.solve_for':          'Solve for',
    'calculator.sta.var.P':              'Pressure (P)',
    'calculator.sta.var.V':              'Volume (V)',
    'calculator.sta.var.n':              'Amount (n)',
    'calculator.sta.var.T':              'Temperature (T)',
    'calculator.sta.var.P_label':        'Pressure (kPa)',
    'calculator.sta.var.V_label':        'Volume (L)',
    'calculator.sta.var.n_label':        'Amount (mol)',
    'calculator.sta.var.T_label':        'Temperature (K)',
    'calculator.sta.result':             'Result',
    'calculator.sta.fuel_ratio':         'Fuel Ratio (0-1)',
    'calculator.sta.start_temp':         'Start Temperature (K)',
    'calculator.sta.start_pressure':     'Start Pressure (kPa)',
    'calculator.sta.temp_after':         'T after ignition',
    'calculator.sta.pressure_after':     'P after ignition',
    'calculator.sta.warn_low_fuel':      '\u26A0 Fuel below 5%',
    'calculator.sta.warn_low_pressure':  '\u26A0 Pressure below 10 kPa',
    'calculator.sta.panels':             'Panel Count',
    'calculator.sta.watts_per_panel':    'Watts/Panel',
    'calculator.sta.day_length':         'Day Length (s)',
    'calculator.sta.night_length':       'Night Length (s)',
    'calculator.sta.consumption':        'Consumption (W)',
    'calculator.sta.generation':         'Generation',
    'calculator.sta.surplus':            'Surplus',
    'calculator.sta.night_energy':       'Night Energy',
    'calculator.sta.batteries_needed':   'Batteries needed',
    'calculator.sta.target_temp':        'Target Temperature (K)',
    'calculator.sta.gas1_temp':          'Gas 1 Temperature (K)',
    'calculator.sta.gas2_temp':          'Gas 2 Temperature (K)',
    'calculator.sta.mixer_input1':       'Mixer Input 1',
    'calculator.sta.mixer_input2':       'Mixer Input 2',
    'calculator.sta.heat_cap_ref':       'Heat Capacities (Reference)',
    'calculator.sta.gas':                'Gas',
    // Timer
    'timer.title':             'Timer',
    'timer.start':             'Start',
    'timer.pause':             'Pause',
    'timer.reset':             'Reset',
    'timer.restart':           'Restart',
    'timer.presets':           'Presets',
    'timer.save_preset':       'Save preset',
    'timer.preset_name_placeholder': 'Name...',
    'timer.ok':                'OK',
    'timer.limit_title':       'Limit reached',
    'timer.limit_message':     'Maximum reached! You can save at most {max} presets.',
    'timer.no_time_title':     'No time',
    'timer.no_time_message':   'Enter a time before saving a preset.',
    'timer.mute':              'Mute sound',
    'timer.unmute':            'Unmute sound',
    'timer.finished_title':    '[!] Timer finished',
    'timer.default_page_title': 'Hellion Dashboard',
    // Image reference
    'imageref.title':          'Image Reference',
    'imageref.dropzone':       'Click or drag image here',
    'imageref.replace':        'Replace image',
    'imageref.label_placeholder': 'Caption (optional)',
    'imageref.storage_error':  'Image could not be saved. Browser storage is full.',
    'imageref.storage_error.title': 'Storage error',
    'imageref.limit':          'Maximum {max} image widgets at a time. Close one to open a new one.',
    'imageref.limit.title':    'Limit reached',
    'imageref.load_error':     'Image could not be loaded: {error}',
    'imageref.load_error.title': 'Image error',
    'imageref.invalid_file':   'Please use an image file (PNG, JPG, WebP, etc.).',
    'imageref.invalid_file.title': 'Not an image',
    // Widget manager
    'widget.minimize':         'Minimize',
    'widget.close':            'Close',
    // Data (export/import)
    'data.invalid_format':     'Invalid format',
    'data.no_boards':          'No valid boards found',
    'data.import_confirm':     'Import {count} boards? Existing data will be preserved.',
    'data.import_confirm.title': 'JSON Import',
    'data.import_success':     '{boards} board(s){notes}{calc}{timer} successfully imported.',
    'data.import_success.title': 'Import successful',
    'data.import_error':       'Import error: {error}',
    'data.import_error.title': 'Import failed',
    'data.notes_suffix':       ' + {count} note(s)',
    'data.calc_suffix':        ' + Calculator history',
    'data.timer_suffix':       ' + Timer presets',
    // Browser bookmark import
    'bm_import.no_access':     'Cannot access browser bookmarks. Make sure the extension has the required permissions.',
    'bm_import.title':         'Bookmark import',
    'bm_import.no_folders':    'No bookmark folders found.',
    'bm_import.modal_title':   'Import browser bookmarks',
    'bm_import.info':          'Select the folders to import as boards. Each folder becomes its own board.',
    'bm_import.unnamed':       'Unnamed',
    'bm_import.link_count':    '{count} link(s)',
    'bm_import.folder_count':  '{count} folder(s)',
    'bm_import.empty':         'empty',
    'bm_import.select_all':    'Select all',
    'bm_import.deselect_all':  'Deselect all',
    'bm_import.import_btn':    'Import',
    'bm_import.no_selection':  'Please select at least one folder.',
    'bm_import.boards_created':    '{count} board(s) created',
    'bm_import.bookmarks_imported': '{count} bookmarks imported',
    'bm_import.duplicates_skipped': '{count} duplicate(s) skipped',
    'bm_import.success_title': 'Import complete',
    // Storage
    'storage.quota_full':      'Storage full! Please delete old boards or the background image to free up space.',
    'storage.quota_full.title': 'Storage full',
    // App
    'app.backup_reminder':     'You haven\'t made a backup in over a week. If you clear browser data, your boards will be lost. Back up now?',
    'app.backup_reminder.title': 'Backup reminder',
    'app.backup_now':          'Back up now',
    'app.backup_later':        'Later',
    'app.no_bookmarks':        'No bookmarks found in this file.',
    'app.import_title':        'Import',
    'app.html_import_success': '{count} board(s) with {total} bookmarks imported.',
    'app.import_success_title': 'Import successful',
    'app.invalid_url':         'Invalid URL. Please start with https://.',
    'app.invalid_url.title':   'Invalid URL',
    // Clock
    'clock.days.sun':          'Sun',
    'clock.days.mon':          'Mon',
    'clock.days.tue':          'Tue',
    'clock.days.wed':          'Wed',
    'clock.days.thu':          'Thu',
    'clock.days.fri':          'Fri',
    'clock.days.sat':          'Sat',
    'clock.months.jan':        'Jan',
    'clock.months.feb':        'Feb',
    'clock.months.mar':        'Mar',
    'clock.months.apr':        'Apr',
    'clock.months.may':        'May',
    'clock.months.jun':        'Jun',
    'clock.months.jul':        'Jul',
    'clock.months.aug':        'Aug',
    'clock.months.sep':        'Sep',
    'clock.months.oct':        'Oct',
    'clock.months.nov':        'Nov',
    'clock.months.dec':        'Dec',
    // Settings
    'settings.file_read_error': 'Error reading file. Please choose a different file.',
    'settings.file_read_error.title': 'File error',
    'settings.reset_confirm':  'Really delete all boards and settings? This cannot be undone.',
    'settings.reset_confirm.title':   'Reset everything',
    'settings.reset_confirm.button':  'Delete all',
    // Header
    'header.import':           'Import',
    'header.board':            'Board',
    'header.note':             'Note',
    'header.theme':            'Theme',
    'header.settings':         'Settings',
    // Header Tooltips
    'header.import_title':       'Import bookmarks (HTML)',
    'header.board_title':        'Add new board',
    'header.note_title':         'Quick note',
    'header.theme_title':        'Appearance & Theme',
    'header.settings_title':     'Settings',
    // Settings panel heading
    'settings.title':          'Settings',
    // Settings panel sections
    'settings.section.widgets':   'WIDGETS',
    'settings.section.data':      'DATA & HELP',
    'settings.section.danger':    'DANGER ZONE',
    'settings.section.bg':        'BACKGROUND',
    'settings.section.display':   'DISPLAY',
    // Settings rows
    'settings.language':           'Language',
    'settings.language.desc':      'Choose display language',
    'settings.language.auto':      'Automatic',
    'settings.toolbar_pos':        'Toolbar position',
    'settings.toolbar_pos.desc':   'Show widget toolbar on the left or right',
    'settings.toolbar_pos.right':  'Right',
    'settings.toolbar_pos.left':   'Left',
    'settings.image_ref':          'Image reference widgets',
    'settings.image_ref.desc':     'Show images as reference (current session only)',
    'settings.export':             'Export backup',
    'settings.export.desc':        'Save all boards, notes and settings as JSON',
    'settings.export.btn':         'Export',
    'settings.import':             'Import backup',
    'settings.import.desc':        'Restore a JSON backup',
    'settings.browser_import':     'Browser bookmarks',
    'settings.browser_import.desc': 'Import bookmarks directly from the browser',
    'settings.onboarding':         'Replay onboarding',
    'settings.onboarding.desc':    'Show the welcome tour again',
    'settings.reset':              'Reset everything',
    'settings.reset.desc':         'Deletes all boards, notes and settings',
    'settings.compact':            'Compact mode',
    'settings.compact.desc':       'Less spacing for more bookmarks',
    'settings.shorten':            'Shorten long titles',
    'settings.shorten.desc':       'Truncate titles to one line with "…"',
    'settings.search':             'Show search bar',
    'settings.search.desc':        'Toggle search bar below the header',
    'settings.newtab':             'Links in new tab',
    'settings.newtab.desc':        'Open bookmarks in a new browser tab',
    'settings.showdesc':           'Show descriptions',
    'settings.showdesc.desc':      'Show saved description below bookmarks',
    'settings.hideextra':          'Hide bookmarks',
    'settings.hideextra.desc':     'Hide excess bookmarks in long boards',
    'settings.visible_count':      'Visible bookmarks',
    'settings.visible_count.desc': 'Number before hiding',
    'settings.bg_url':             'Image URL',
    'settings.bg_url.desc':        'Custom background image via URL',
    'settings.bg_change':          'Change',
    'settings.bg_apply':           'Apply',
    'settings.bg_upload':          'Upload file',
    'settings.bg_upload.desc':     'Use a local image as background',
    'settings.search_engine_toggle': 'Switch search engine',
    // Settings Buttons + Validation
    'settings.onboarding_btn':   'Start',
    'settings.reset_btn':        'Reset',
    'settings.bg_upload_btn':    'Upload',
    'settings.bg_invalid_url':   'Only local images (upload) are allowed as background.',
    'settings.bg_invalid_url.title': 'Invalid URL',
    // Modals
    'modal.new_board':         'New Board',
    'modal.board_name':        'Board name...',
    'modal.create':            'Create',
    'modal.new_bookmark':      'New Bookmark',
    'modal.bm_title':          'Title...',
    'modal.bm_desc':           'Description (optional)',
    'modal.bm_add':            'Add',
    'modal.rename':            'Rename',
    'modal.rename_placeholder': 'New name...',
    'modal.rename_confirm':    'Rename',
    'modal.theme_header':      'Theme',
    // About
    'about.title':             '⬡ HELLION NEWTAB',
    'about.impressum':         'Legal Notice',
    'about.developer':         'Developer',
    'about.company':           'Company',
    'about.license':           'License',
    'about.storage':           'Data storage',
    'about.storage.value':     '100% local · No server · No account',
    'about.bugreport':         'Bug Report / Feedback',
    'about.support':           'Support',
    'about.browsers':          'Compatible browsers',
    // Notebook
    'notebook.title':          'Notebook',
    // Search
    'search.placeholder':      'Search the web…',
    'search.submit_title':     'Search',
    // Widget toolbar tooltips
    'toolbar.note':            'Create note',
    'toolbar.checklist':       'Create checklist',
    'toolbar.calculator':      'Calculator',
    'toolbar.timer':           'Timer',
    'toolbar.imageref':        'Image reference',
    'toolbar.notebook':        'All notes'
  }
 };
 /** @type {string} Aktuell aktive Sprache */
 let currentLang = 'de';
 /**
 * Übersetzungsstring abrufen mit optionalen Platzhaltern
 * @param {string} key - Schlüssel im STRINGS-Objekt
 * @param {Object} [vars] - Platzhalter-Werte (z.B. { max: 5 })
 * @returns {string}
 */
 function t(key, vars) {
  let str = (STRINGS[currentLang] && STRINGS[currentLang][key])
    || (STRINGS['en'] && STRINGS['en'][key])
    || key;
  if (vars) {
    for (const [k, v] of Object.entries(vars)) {
      str = str.replaceAll('{' + k + '}', v);
    }
  }
  return str;
 }
 /**
 * Alle data-i18n Elemente im Dokument mit aktueller Sprache befüllen
 */
 function applyLanguage() {
  document.querySelectorAll('[data-i18n]').forEach(el => {
    el.textContent = t(el.dataset.i18n);
  });
  document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
    el.placeholder = t(el.dataset.i18nPlaceholder);
  });
  document.querySelectorAll('[data-i18n-title]').forEach(el => {
    const text = t(el.dataset.i18nTitle);
    el.title = text;
    el.setAttribute('aria-label', text);
  });
 }
 /**
 * 'auto' auflösen zu konkretem Sprachcode
 * @param {string} lang - 'de', 'en' oder 'auto'
 * @returns {string} 'de' oder 'en'
 */
 function resolveLang(lang) {
  return (lang === 'auto')
    ? (navigator.language.startsWith('de') ? 'de' : 'en')
    : lang;
 }
 /**
 * Sprache setzen, speichern und DOM aktualisieren
 * @param {string} lang - 'de', 'en' oder 'auto'
 */
 function setLanguage(lang) {
  currentLang = resolveLang(lang);
  document.documentElement.lang = currentLang;
  applyLanguage();
 }
 /**
 * i18n-Modul — öffentliche API
 */
 const I18n = {
  /** Aktuell aktive Sprache (nach Auto-Auflösung) */
  get currentLang() { return currentLang; },
  /**
   * Initialisierung: Sprache aus Settings lesen, auflösen, DOM anwenden
   * Muss NACH dem Laden des settings-Objekts aufgerufen werden
   */
  init() {
    const lang = (typeof settings !== 'undefined' && settings.language)
      ? settings.language
      : 'auto';
    currentLang = resolveLang(lang);
    document.documentElement.lang = currentLang;
    applyLanguage();
  }
 };
@@ -0,0 +1,491 @@
 /* =============================================
   HELLION NEWTAB — image-ref.js
   Bild-Referenz Widget: Session-only Bildanzeige
   mit Canvas API WebP-Konvertierung
   ============================================= */
 const ImageRef = {
  MAX_IMAGES: 3,
  STORAGE_KEY: 'widgetStates',
  SESSION_KEY: 'imageRefData',
  /** @type {Array<{id: string, label: string, x: number, y: number, width: number, height: number, open: boolean}>} */
  _images: [],
  _saveTimer: null,
  // ---- STORAGE (persistent: Position/Meta) ----
  /**
   * Widget-Meta aus persistentem Storage laden
   */
  async load() {
    const data = await Store.get(this.STORAGE_KEY);
    if (data && data.imageRef && Array.isArray(data.imageRef.images)) {
      this._images = data.imageRef.images;
    }
  },
  /**
   * Widget-Meta persistent speichern
   * Bestehende Notes, Calculator, Timer bleiben erhalten
   */
  async save() {
    const data = await Store.get(this.STORAGE_KEY) || {};
    if (data.notes === undefined) data.notes = [];
    // Positionen aus WidgetManager aktualisieren
    const updated = this._images.map(img => {
      const ws = WidgetManager.getState(img.id);
      if (ws) {
        img.x = ws.x;
        img.y = ws.y;
        img.width = ws.width;
        img.height = ws.height;
        img.open = ws.open;
      }
      return img;
    });
    data.imageRef = { images: updated };
    await Store.set(this.STORAGE_KEY, data);
  },
  /**
   * Debounced Save
   */
  _debouncedSave() {
    clearTimeout(this._saveTimer);
    this._saveTimer = setTimeout(() => this.save(), 500);
  },
  // ---- SESSION STORAGE (Bilddaten) ----
  /**
   * Bilddaten in sessionStorage speichern
   */
  _saveSession() {
    try {
      const sessionData = {};
      this._images.forEach(img => {
        const dataUrl = this._getSessionImage(img.id);
        if (dataUrl) sessionData[img.id] = dataUrl;
      });
      sessionStorage.setItem(this.SESSION_KEY, JSON.stringify(sessionData));
    } catch (e) {
      console.warn('ImageRef: sessionStorage Write fehlgeschlagen', e);
    }
  },
  /**
   * Bilddaten aus sessionStorage laden
   * @returns {Object} - { id: dataUrl, ... }
   */
  _loadSessionAll() {
    try {
      const raw = sessionStorage.getItem(this.SESSION_KEY);
      if (!raw) return {};
      return JSON.parse(raw);
    } catch (e) {
      console.warn('ImageRef: sessionStorage Read fehlgeschlagen', e);
      return {};
    }
  },
  /**
   * Einzelnes Bild aus sessionStorage lesen
   * @param {string} id
   * @returns {string|null}
   */
  _getSessionImage(id) {
    const all = this._loadSessionAll();
    return all[id] || null;
  },
  /**
   * Einzelnes Bild in sessionStorage setzen
   * @param {string} id
   * @param {string} dataUrl
   */
  _setSessionImage(id, dataUrl) {
    try {
      const all = this._loadSessionAll();
      all[id] = dataUrl;
      sessionStorage.setItem(this.SESSION_KEY, JSON.stringify(all));
    } catch (e) {
      console.warn('ImageRef: sessionStorage Write fehlgeschlagen', e);
      HellionDialog.alert(
        t('imageref.storage_error'),
        { type: 'danger', title: t('imageref.storage_error.title') }
      );
    }
  },
  /**
   * Einzelnes Bild aus sessionStorage entfernen
   * @param {string} id
   */
  _removeSessionImage(id) {
    try {
      const all = this._loadSessionAll();
      delete all[id];
      sessionStorage.setItem(this.SESSION_KEY, JSON.stringify(all));
    } catch (e) {
      console.warn('ImageRef: sessionStorage Remove fehlgeschlagen', e);
    }
  },
  // ---- WIDGET LIFECYCLE ----
  /**
   * Neues Bild-Widget erstellen (oeffnet File-Dialog)
   */
  async create() {
    if (!settings.imageRefEnabled) return;
    if (this._images.length >= this.MAX_IMAGES) {
      await HellionDialog.alert(
        t('imageref.limit', { max: this.MAX_IMAGES }),
        { type: 'warning', title: t('imageref.limit.title') }
      );
      return;
    }
    // Freie ID finden
    const usedIds = new Set(this._images.map(i => i.id));
    let slotId = null;
    for (let i = 0; i < this.MAX_IMAGES; i++) {
      const candidate = 'image_' + i;
      if (!usedIds.has(candidate)) {
        slotId = candidate;
        break;
      }
    }
    if (!slotId) return;
    // File-Dialog
    const file = await this._pickFile();
    if (!file) return;
    // Bild verarbeiten
    let dataUrl;
    try {
      dataUrl = await this._processFile(file);
    } catch (err) {
      await HellionDialog.alert(
        t('imageref.load_error', { error: err.message }),
        { type: 'danger', title: t('imageref.load_error.title') }
      );
      return;
    }
    // In sessionStorage speichern
    this._setSessionImage(slotId, dataUrl);
    // Meta erstellen
    const imageData = {
      id: slotId,
      label: '',
      x: 200 + (this._images.length * 40),
      y: 120 + (this._images.length * 30),
      width: 320,
      height: 280,
      open: true
    };
    this._images.push(imageData);
    // Widget erstellen
    this._createWidget(imageData, dataUrl);
    await this.save();
  },
  /**
   * Widget im DOM erstellen
   * @param {Object} imageData
   * @param {string|null} dataUrl
   */
  _createWidget(imageData, dataUrl) {
    WidgetManager.create('image', {
      id: imageData.id,
      title: imageData.label || t('imageref.title'),
      x: imageData.x,
      y: imageData.y,
      width: imageData.width,
      height: imageData.height,
      open: imageData.open !== false
    });
    const body = WidgetManager.getBody(imageData.id);
    if (body) this.renderBody(imageData, body, dataUrl);
  },
  /**
   * Widget geschlossen — Daten aufraeumen
   * @param {string} id
   */
  async onClose(id) {
    this._removeSessionImage(id);
    this._images = this._images.filter(img => img.id !== id);
    await this.save();
  },
  // ---- UI RENDERING ----
  /**
   * Widget-Body rendern
   * @param {Object} imageData
   * @param {HTMLElement} bodyEl
   * @param {string|null} dataUrl
   */
  renderBody(imageData, bodyEl, dataUrl) {
    bodyEl.textContent = '';
    const container = document.createElement('div');
    container.className = 'imgref-container';
    if (dataUrl) {
      // Bild anzeigen
      const wrapper = document.createElement('div');
      wrapper.className = 'imgref-img-wrapper';
      const img = document.createElement('img');
      img.className = 'imgref-img';
      img.src = dataUrl;
      img.alt = imageData.label || t('imageref.title');
      wrapper.appendChild(img);
      // Bild ersetzen Button
      const replaceBtn = document.createElement('button');
      replaceBtn.className = 'imgref-replace-btn';
      replaceBtn.type = 'button';
      replaceBtn.textContent = t('imageref.replace');
      replaceBtn.addEventListener('click', async () => {
        const file = await this._pickFile();
        if (!file) return;
        try {
          const newDataUrl = await this._processFile(file);
          this._setSessionImage(imageData.id, newDataUrl);
          this.renderBody(imageData, bodyEl, newDataUrl);
        } catch (err) {
          await HellionDialog.alert(
            t('imageref.load_error', { error: err.message }),
            { type: 'danger', title: t('imageref.load_error.title') }
          );
        }
      });
      container.append(wrapper, replaceBtn);
    } else {
      // Drop-Zone (kein Bild vorhanden)
      const dropzone = this._createDropzone(imageData, bodyEl);
      container.appendChild(dropzone);
    }
    // Label-Input
    const label = document.createElement('input');
    label.className = 'imgref-label';
    label.type = 'text';
    label.placeholder = t('imageref.label_placeholder');
    label.maxLength = 100;
    label.value = imageData.label || '';
    label.addEventListener('input', () => {
      const text = label.value.trim().slice(0, 100);
      imageData.label = text;
      // Widget-Titel aktualisieren
      const entry = WidgetManager._widgets.get(imageData.id);
      if (entry) {
        const titleEl = entry.el.querySelector('.widget-title');
        if (titleEl) titleEl.textContent = text || t('imageref.title');
        entry.state.title = text || t('imageref.title');
      }
      this._debouncedSave();
    });
    container.appendChild(label);
    bodyEl.appendChild(container);
  },
  /**
   * Drop-Zone erstellen (fuer leere Widgets / neue Bilder)
   * @param {Object} imageData
   * @param {HTMLElement} bodyEl
   * @returns {HTMLElement}
   */
  _createDropzone(imageData, bodyEl) {
    const dropzone = document.createElement('div');
    dropzone.className = 'imgref-dropzone';
    const icon = document.createElement('div');
    icon.className = 'imgref-dropzone-icon';
    icon.textContent = '\uD83D\uDDBC\uFE0F';
    const text = document.createElement('span');
    text.textContent = t('imageref.dropzone');
    dropzone.append(icon, text);
    // Klick -> File-Dialog
    dropzone.addEventListener('click', async () => {
      const file = await this._pickFile();
      if (!file) return;
      try {
        const dataUrl = await this._processFile(file);
        this._setSessionImage(imageData.id, dataUrl);
        this.renderBody(imageData, bodyEl, dataUrl);
        await this.save();
      } catch (err) {
        await HellionDialog.alert(
          t('imageref.load_error', { error: err.message }),
          { type: 'danger', title: t('imageref.load_error.title') }
        );
      }
    });
    // Drag & Drop
    dropzone.addEventListener('dragover', (e) => {
      e.preventDefault();
      e.stopPropagation();
      dropzone.classList.add('dragover');
    });
    dropzone.addEventListener('dragleave', (e) => {
      e.preventDefault();
      e.stopPropagation();
      dropzone.classList.remove('dragover');
    });
    dropzone.addEventListener('drop', async (e) => {
      e.preventDefault();
      e.stopPropagation();
      dropzone.classList.remove('dragover');
      const file = e.dataTransfer.files[0];
      if (!file || !file.type.startsWith('image/')) {
        await HellionDialog.alert(
          t('imageref.invalid_file'),
          { type: 'warning', title: t('imageref.invalid_file.title') }
        );
        return;
      }
      try {
        const dataUrl = await this._processFile(file);
        this._setSessionImage(imageData.id, dataUrl);
        this.renderBody(imageData, bodyEl, dataUrl);
        await this.save();
      } catch (err) {
        await HellionDialog.alert(
          t('imageref.load_error', { error: err.message }),
          { type: 'danger', title: t('imageref.load_error.title') }
        );
      }
    });
    return dropzone;
  },
  // ---- FILE HANDLING ----
  /**
   * File-Dialog oeffnen
   * @returns {Promise<File|null>}
   */
  _pickFile() {
    return new Promise(resolve => {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';
      input.addEventListener('change', () => {
        resolve(input.files[0] || null);
      });
      // Cancel erkennen
      input.addEventListener('cancel', () => resolve(null));
      input.click();
    });
  },
  /**
   * Bild per Canvas API zu WebP konvertieren
   * @param {File} file
   * @returns {Promise<string>} WebP DataURL
   */
  _processFile(file) {
    return new Promise((resolve, reject) => {
      const objectUrl = URL.createObjectURL(file);
      const img = new Image();
      img.onload = () => {
        try {
          const canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0);
          const webpUrl = canvas.toDataURL('image/webp', 0.85);
          URL.revokeObjectURL(objectUrl);
          resolve(webpUrl);
        } catch (err) {
          URL.revokeObjectURL(objectUrl);
          reject(err);
        }
      };
      img.onerror = () => {
        URL.revokeObjectURL(objectUrl);
        reject(new Error(t('imageref.load_error', { error: 'unknown' })));
      };
      img.src = objectUrl;
    });
  },
  // ---- INIT ----
  /**
   * ImageRef initialisieren (aus app.js aufgerufen)
   */
  async init() {
    await this.load();
    // Widgets wiederherstellen (nur wenn Feature aktiviert)
    if (settings.imageRefEnabled && this._images.length > 0) {
      const sessionData = this._loadSessionAll();
      this._images.forEach(imageData => {
        if (imageData.open !== false) {
          const dataUrl = sessionData[imageData.id] || null;
          this._createWidget(imageData, dataUrl);
        }
      });
    }
    // Widget-Lifecycle-Events
    const self = this;
    WidgetManager.on('widget:close', (e) => {
      const isImage = self._images.some(img => img.id === e.detail.id);
      if (isImage) {
        self.onClose(e.detail.id);
      }
    });
    WidgetManager.on('widget:minimize', (e) => {
      const isImage = self._images.some(img => img.id === e.detail.id);
      if (isImage) {
        self.save();
      }
    });
    WidgetManager.on('widget:open', (e) => {
      const imgData = self._images.find(img => img.id === e.detail.id);
      if (imgData) {
        const body = WidgetManager.getBody(e.detail.id);
        if (body && body.children.length === 0) {
          const dataUrl = self._getSessionImage(e.detail.id);
          self.renderBody(imgData, body, dataUrl);
        }
        self.save();
      }
    });
  }
 };
@@ -0,0 +1,573 @@
 /* =============================================
   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;
    });
    // Calculator- und Timer-State beibehalten falls vorhanden
    const existing = await Store.get(this.STORAGE_KEY);
    const saveData = { notes: merged };
    if (existing && existing.calculator) {
      saveData.calculator = existing.calculator;
    }
    if (existing && existing.timer) {
      saveData.timer = existing.timer;
    }
    if (existing && existing.imageRef) {
      saveData.imageRef = existing.imageRef;
    }
    await Store.set(this.STORAGE_KEY, saveData);
  },
  /**
   * 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(
        t('notes.limit_message', { max: this.MAX_NOTES }),
        { type: 'warning', title: t('notes.limit_title') }
      );
      return null;
    }
    const noteData = {
      id: 'note_' + uid(),
      title: template === 'checklist' ? t('notes.checklist_title') : t('notes.default_title'),
      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 = t('notes.placeholder');
    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 = t('notes.checklist_placeholder');
    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 = t('notes.checklist_progress', { done: done, total: total });
      const titleEl = widgetEntry.el.querySelector('.widget-title');
      if (titleEl && titleEl.contentEditable !== 'true') {
        // Nur wenn Titel noch Standard ist
        if (noteData.title === t('notes.checklist_title') || /^\d+\/\d+\s/.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(
      t('notes.delete_confirm'),
      { type: 'danger', title: t('notes.delete_title'), confirmText: t('notes.delete_button') }
    );
    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*' + t('notes.export_footer') + '*\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 = t('notes.checklist_progress', { done: done, total: total });
    } else {
      preview.textContent = (note.content || '').slice(0, 50) || t('notes.empty_preview');
    }
    // Actions
    const actions = document.createElement('div');
    actions.className = 'notebook-slot-actions';
    const btnExport = document.createElement('button');
    btnExport.className = 'notebook-slot-btn';
    btnExport.textContent = t('notes.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 = t('notes.create');
    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 = t('notes.text_type');
      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 = t('notes.checklist_type');
      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 === 'calculator') {
        Calculator.toggle();
      } else if (action === 'timer') {
        Timer.toggle();
      } else if (action === 'image-ref') {
        ImageRef.create();
      } 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,252 @@
 /* =============================================
   HELLION NEWTAB — onboarding.js
   Mehrstufiger Willkommens-Flow beim ersten Start
   ============================================= */
 const Onboarding = {
  currentSlide: 0,
  slides: [
    {
      hero: '\u2B21',
      titleKey: 'onboarding.s1.title',
      textKey: 'onboarding.s1.text'
    },
    {
      hero: '\uD83D\uDCCB',
      titleKey: 'onboarding.s2.title',
      featureKeys: ['onboarding.s2.f1', 'onboarding.s2.f2', 'onboarding.s2.f3', 'onboarding.s2.f4']
    },
    {
      hero: '\uD83C\uDFA8',
      titleKey: 'onboarding.s3.title',
      textKey: 'onboarding.s3.text',
      showThemes: true
    },
    {
      hero: '\uD83E\uDDF0',
      titleKey: 'onboarding.s4.title',
      featureKeys: ['onboarding.s4.f1', 'onboarding.s4.f2', 'onboarding.s4.f3', 'onboarding.s4.f4', 'onboarding.s4.f5', 'onboarding.s4.f6']
    },
    {
      hero: '\uD83D\uDEE1\uFE0F',
      titleKey: 'onboarding.s5.title',
      textKey: 'onboarding.s5.text'
    },
    {
      hero: '\uD83C\uDFAE',
      titleKey: 'onboarding.s6.title',
      textKey: 'onboarding.s6.text',
      interactive: 'gaming-board'
    },
    {
      hero: '\uD83D\uDE80',
      titleKey: 'onboarding.s7.title',
      textKey: 'onboarding.s7.text'
    }
  ],
  /** 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 = t('onboarding.skip');
      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 = t(slide.titleKey);
    slideEl.appendChild(title);
    if (slide.textKey) {
      const text = document.createElement('div');
      text.className = 'onboarding-text';
      text.textContent = t(slide.textKey);
      slideEl.appendChild(text);
    }
    if (slide.featureKeys) {
      const list = document.createElement('ul');
      list.className = 'onboarding-feature-list';
      slide.featureKeys.forEach(key => {
        const li = document.createElement('li');
        li.textContent = t(key);
        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', 'Satisfactory', 'Avorion', 'Hellion Stealth'];
      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 = t('onboarding.back');
      backBtn.addEventListener('click', () => {
        this.currentSlide--;
        this._render();
      });
      nav.appendChild(backBtn);
    }
    if (slide.interactive === 'gaming-board') {
      // Interaktive Slide: Zwei Buttons statt "Weiter"
      const noBtn = document.createElement('button');
      noBtn.className = 'btn-secondary';
      noBtn.textContent = t('onboarding.no');
      noBtn.addEventListener('click', () => {
        this.currentSlide++;
        this._render();
      });
      const yesBtn = document.createElement('button');
      yesBtn.className = 'btn-primary';
      yesBtn.textContent = t('onboarding.yes');
      yesBtn.addEventListener('click', async () => {
        await this._createGamingBoard();
        this.currentSlide++;
        this._render();
      });
      nav.append(noBtn, yesBtn);
    } else if (isLast) {
      const startBtn = document.createElement('button');
      startBtn.className = 'btn-primary';
      startBtn.textContent = t('onboarding.start');
      startBtn.addEventListener('click', () => this._finish());
      nav.appendChild(startBtn);
    } else {
      const nextBtn = document.createElement('button');
      nextBtn.className = 'btn-primary';
      nextBtn.textContent = t('onboarding.next');
      nextBtn.addEventListener('click', () => {
        this.currentSlide++;
        this._render();
      });
      nav.appendChild(nextBtn);
    }
    footer.appendChild(nav);
    modal.appendChild(footer);
  },
  /**
   * Gaming Starter Board erstellen
   * Vorbefuelltes Board mit Community-Links fuer Factory/Space Games
   */
  async _createGamingBoard() {
    const gamingBoard = {
      id: uid(),
      title: '\uD83C\uDFAE Gaming',
      bookmarks: [
        { id: uid(), title: 'Satisfactory Wiki', url: 'https://satisfactory.wiki.gg', desc: '' },
        { id: uid(), title: 'Satisfactory Calculator', url: 'https://satisfactorytools.com', desc: '' },
        { id: uid(), title: 'Factorio Wiki', url: 'https://wiki.factorio.com', desc: '' },
        { id: uid(), title: 'Factorio Cheatsheet', url: 'https://factoriocheatsheet.com', desc: '' },
        { id: uid(), title: 'Avorion Wiki', url: 'https://wiki.avorion.net', desc: '' },
        { id: uid(), title: 'Minecraft Wiki', url: 'https://minecraft.wiki', desc: '' },
        { id: uid(), title: 'Modrinth (Mods)', url: 'https://modrinth.com', desc: '' },
        { id: uid(), title: 'Star Citizen Wiki', url: 'https://starcitizen.tools', desc: '' },
        { id: uid(), title: 'UEX Corp (Trading)', url: 'https://uexcorp.space', desc: '' },
        { id: uid(), title: 'Hellion TradeCenter', url: 'https://hellion-initiative.online/tradecenter', desc: t('onboarding.tradecenter_desc') }
      ],
      blurred: false
    };
    boards.push(gamingBoard);
    await saveBoards();
    renderBoards();
  },
  /** 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,62 @@
 # ⬡ Opera GX — New-Tab Workaround
 Opera GX ist der einzige Browser in diesem Projekt der sich aktiv dagegen wehrt,
 eine eigene New-Tab-Seite zu nutzen. Während Chrome, Edge, Firefox und selbst Vivaldi
 einfach `chrome_url_overrides` respektieren, priorisiert Opera GX seine eigene
 Speed Dial Seite und ignoriert den Standard-Override für entpackte Erweiterungen.
 Das Ergebnis: vier Stunden Debugging, zwei Workaround-Skripte und ein Reddit-Thread
 der tatsächlich geholfen hat. Hier ist was dabei rausgekommen ist.
 ---
 ## Warum zwei extra Skripte?
 | Browser | New-Tab Override | Zusatzaufwand |
 |---|---|---|
 | Chrome / Edge / Brave / Vivaldi | `chrome_url_overrides` | Keiner |
 | Firefox | `chrome_url_overrides` (MV3) | Eigenes Manifest |
 | Opera / Opera GX | Blockiert durch Speed Dial | Dieser Ordner hier |
 ---
 ## Was passiert hier?
 ### `background.js` — Tab-Management
 Überwacht Tab-Aktivitäten im Hintergrund und greift ein bevor Opera seine Startseite laden kann.
 - Erkennt `opera://startpage/` und `chrome://startpage/`
 - Leitet per `chrome.tabs.update` auf `newtab.html` um
 - Prüft zusätzlich bei `onActivated`, weil Opera manche Tabs im Hintergrund lädt
  und der erste Redirect dann nicht greift
 ### `redirect.js` — In-Page Redirect
 Manche Opera-Systemprozesse sind so weit isoliert dass ein externer Eingriff
 nicht zuverlässig ankommt. Also nochmal von innen.
 - Wird als Content Script direkt in Opera-Startseiten-Bereiche injiziert
 - Löst den Redirect bei `document_start` aus, bevor die Speed Dial Seite
  überhaupt anfangen kann sich aufzubauen
 Ja, es braucht wirklich beide Skripte. Opera GX hat das so entschieden.
 Das Gute daran: die GitHub Actions kümmern sich darum dass jeder Browser nur bekommt
 was er braucht. Das Opera-ZIP enthält die Workaround-Skripte, das Chrome-ZIP nicht.
 Wer sich das manuell zusammensuchen müsste wäre vermutlich genauso genervt wie ich
 beim Debuggen war.
 ---
 ## Datenschutz
 Kein Tracking, keine Speicherung, keine externen Requests.
 Nur Standard-Browser-APIs, `chrome.tabs`, um zurückzubekommen was eigentlich
 standardmäßig funktionieren sollte.
 **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,54 @@ 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');
 }
 /**
 * Prueft ob eine Background-URL sicher fuer CSS-Einbettung ist.
 * Erlaubt nur blob: und data:image/ Protokolle (aus File Upload).
 * @param {string} url
 * @returns {boolean}
 */
 function isValidBgUrl(url) {
  return typeof url === 'string' && url.length > 0 &&
    (url.startsWith('blob:') || url.startsWith('data:image/'));
 }
 // ---- ACCORDION ----
 function initAccordion() {
  const defaultOpen = new Set(['widgets']);
  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 +73,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,20 +82,46 @@ function applySettings() {
  const showSearchEl = document.getElementById('settingShowSearch');
  if (showSearchEl) showSearchEl.checked = settings.showSearch;
  // Image-Ref Toggle
  if (settings.imageRefEnabled === undefined) settings.imageRefEnabled = false;
  const imgRefCheckbox = document.getElementById('settingImageRef');
  if (imgRefCheckbox) imgRefCheckbox.checked = settings.imageRefEnabled;
  const imgRefBtn = document.querySelector('[data-action="image-ref"]');
  if (imgRefBtn) imgRefBtn.classList.toggle('hidden', !settings.imageRefEnabled);
  // Toolbar-Position
  document.body.classList.toggle('toolbar-left', settings.toolbarPos === 'left');
  const toolbarPosEl = document.getElementById('settingToolbarPos');
  if (toolbarPosEl) toolbarPosEl.value = settings.toolbarPos || 'right';
  // Sprache (Dropdown-Wert setzen — I18n.init() übernimmt die eigentliche Anwendung)
  const langEl = document.getElementById('settingLanguage');
  if (langEl) langEl.value = settings.language || 'auto';
  applyTheme(settings.theme || 'nebula', !!settings.bgUrl);
-  if (settings.bgUrl) {
+  if (settings.bgUrl && isValidBgUrl(settings.bgUrl)) {
    document.getElementById('bgLayer').style.backgroundImage = `url('${settings.bgUrl}')`;
  } else if (settings.bgUrl) {
    settings.bgUrl = '';
  }
 }
 // ---- 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 +134,9 @@ function bindSettingsEvents() {
    });
  });
  // Accordion initialisieren
  initAccordion();
  // Toggles
  const toggleMap = {
    settingCompact:   v => { settings.compact       = v; document.body.classList.toggle('compact', v); },
@@ -67,12 +145,17 @@ 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 => {
      settings.showSearch = v;
      document.getElementById('searchBarWrapper').classList.toggle('hidden', !v);
    },
    settingImageRef: v => {
      settings.imageRefEnabled = v;
      const imgBtn = document.querySelector('[data-action="image-ref"]');
      if (imgBtn) imgBtn.classList.toggle('hidden', !v);
    }
  };
@@ -92,20 +175,23 @@ 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();
    if (url && !isValidBgUrl(url)) {
      await HellionDialog.alert(t('settings.bg_invalid_url'), { type: 'danger', title: t('settings.bg_invalid_url.title') });
      return;
    }
    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();
  });
@@ -114,25 +200,60 @@ function bindSettingsEvents() {
    if (!file) return;
    const reader = new FileReader();
    reader.onload = async ev => {
      if (!isValidBgUrl(ev.target.result)) return;
      settings.bgUrl = ev.target.result;
      document.getElementById('bgLayer').style.backgroundImage = `url('${ev.target.result}')`;
      await saveSettings();
    };
    reader.onerror = () => {
-      alert('Fehler beim Lesen der Datei. Bitte eine andere Datei wählen.');
+      HellionDialog.alert(t('settings.file_read_error'), { type: 'danger', title: t('settings.file_read_error.title') });
    };
    reader.readAsDataURL(file);
  });
  // Sprach-Einstellung
  const languageEl = document.getElementById('settingLanguage');
  if (languageEl) {
    languageEl.value = settings.language || 'auto';
    languageEl.addEventListener('change', async (e) => {
      settings.language = e.target.value;
      setLanguage(e.target.value);
      await saveSettings();
    });
  }
  // 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(
      t('settings.reset_confirm'),
      { type: 'danger', title: t('settings.reset_confirm.title'), confirmText: t('settings.reset_confirm.button') }
    );
    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',
                 imageRefEnabled: false, language: 'auto' };
    await saveBoards();
    await saveSettings();
    setLanguage('auto');
    applySettings();
    renderBoards();
    closeSettings();
@@ -15,7 +15,10 @@ let settings = {
  bgUrl:         '',
  theme:         'nebula',
  showSearch:    true,
-  searchEngine:  'google'
+  searchEngine:  'google',
  toolbarPos:    'right',
  imageRefEnabled: false,
  language:      'auto'
 };
 function uid() {
@@ -30,15 +33,6 @@ function escHtml(str) {
    .replace(/"/g, '&quot;');
 }
 function getFaviconUrl(url) {
  try {
    const u = new URL(url);
    return `https://www.google.com/s2/favicons?domain=${u.hostname}&sz=16`;
  } catch {
    return '';
  }
 }
 function getDefaultBoards() {
  return [
    {
@@ -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(t('storage.quota_full'), { type: 'danger', title: t('storage.quota_full.title') });
            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(t('storage.quota_full'), { type: 'danger', title: t('storage.quota_full.title') });
          reject(e);
        }
      }
@@ -4,14 +4,17 @@
   ============================================= */
 const THEMES = {
-  'nebula':          { bg: 'assets/themes/bg-nebula.jpg' },
+  'nebula':          { bg: 'assets/themes/bg-nebula.webp' },
-  'crescent':        { bg: 'assets/themes/bg-crescent.jpg' },
+  'crescent':        { bg: 'assets/themes/bg-crescent.webp' },
-  'event-horizon':   { bg: 'assets/themes/bg-event-horizon.jpg' },
+  'event-horizon':   { bg: 'assets/themes/bg-event-horizon.webp' },
  'merchantman':    { bg: 'assets/themes/bg-merchantman.webp' },
-  'julia-jin':      { bg: 'assets/themes/bg-julia-jin.png' },
+  'julia-jin':      { bg: 'assets/themes/bg-julia-jin.webp' },
-  'sc-sunset':      { bg: 'assets/themes/bg-sc-sunset.jpg' },
+  'sc-sunset':      { bg: 'assets/themes/bg-sc-sunset.webp' },
-  'hellion-hud':    { bg: 'assets/themes/bg-hellion-hud.png' },
+  'hellion-hud':    { bg: 'assets/themes/bg-hellion-hud.webp' },
-  'hellion-energy': { bg: 'assets/themes/bg-hellion-energy.jpg' }
+  'hellion-energy': { bg: 'assets/themes/bg-hellion-energy.webp' },
  'satisfactory':   { bg: 'assets/themes/bg-satisfactory.webp' },
  'avorion':        { bg: 'assets/themes/bg-avorion.webp' },
  'hellion-stealth': { bg: 'assets/themes/bg-scPolaris.webp' }
 };
 function applyTheme(themeName, skipBgOverride) {
@@ -0,0 +1,751 @@
 /* =============================================
   HELLION NEWTAB — timer.js
   Timer / Countdown Widget: Presets, Alarm,
   Tab-Titel-Blink
   ============================================= */
 const Timer = {
  WIDGET_ID: 'widget_timer',
  STORAGE_KEY: 'widgetStates',
  MAX_PRESETS: 5,
  /** @type {Array<{name: string, seconds: number}>} */
  _presets: [],
  _isOpen: false,
  _seconds: 0,
  _remaining: 0,
  _intervalId: null,
  _running: false,
  _finished: false,
  _blinkIntervalId: null,
  _originalTitle: '',
  _keydownHandler: null,
  _muted: false,
  // UI-Referenzen
  _timeEl: null,
  _muteBtn: null,
  _inputEl: null,
  _inputRow: null,
  _btnStart: null,
  _btnPause: null,
  _btnReset: null,
  // ---- STORAGE ----
  /**
   * Timer-State aus Storage laden
   */
  async load() {
    const data = await Store.get(this.STORAGE_KEY);
    if (data && data.timer) {
      this._presets = Array.isArray(data.timer.presets) ? data.timer.presets : [];
      if (typeof data.timer.muted === 'boolean') this._muted = data.timer.muted;
    }
  },
  /**
   * Timer-State in Storage speichern
   * Bestehende Notes + Calculator bleiben erhalten
   */
  async save() {
    const data = await Store.get(this.STORAGE_KEY) || {};
    if (data.notes === undefined) data.notes = [];
    const widgetState = WidgetManager.getState(this.WIDGET_ID);
    data.timer = {
      x: widgetState ? widgetState.x : 600,
      y: widgetState ? widgetState.y : 80,
      width: widgetState ? widgetState.width : 260,
      height: widgetState ? widgetState.height : 360,
      open: this._isOpen,
      presets: this._presets.slice(0, this.MAX_PRESETS),
      muted: this._muted
    };
    await Store.set(this.STORAGE_KEY, data);
  },
  // ---- WIDGET LIFECYCLE ----
  /**
   * Timer-Widget oeffnen oder in Vordergrund bringen
   */
  async open() {
    if (this._isOpen) {
      WidgetManager.bringToFront(this.WIDGET_ID);
      return;
    }
    const data = await Store.get(this.STORAGE_KEY);
    const saved = (data && data.timer) ? data.timer : {};
    WidgetManager.create('timer', {
      id: this.WIDGET_ID,
      title: t('timer.title'),
      x: saved.x || 600,
      y: saved.y || 80,
      width: saved.width || 260,
      height: saved.height || 360,
      open: true
    });
    const body = WidgetManager.getBody(this.WIDGET_ID);
    if (body) this.renderBody(body);
    this._isOpen = true;
    const entry = WidgetManager._widgets.get(this.WIDGET_ID);
    if (entry) this._bindKeyboard(entry.el);
    await this.save();
  },
  /**
   * Timer toggle: oeffnen oder minimieren
   */
  async toggle() {
    if (this._isOpen) {
      const entry = WidgetManager._widgets.get(this.WIDGET_ID);
      if (entry && entry.state.open) {
        await WidgetManager.minimize(this.WIDGET_ID);
        this._isOpen = false;
        await this.save();
      } else if (entry) {
        await WidgetManager.openWidget(this.WIDGET_ID);
        this._isOpen = true;
        await this.save();
      }
    } else {
      await this.open();
    }
  },
  /**
   * Wird aufgerufen wenn Widget geschlossen wird
   */
  async onClose() {
    this._isOpen = false;
    this._unbindKeyboard();
    this._stopCountdown();
    this._stopAlarm();
    this._timeEl = null;
    this._inputEl = null;
    this._inputRow = null;
    this._btnStart = null;
    this._btnPause = null;
    this._btnReset = null;
    this._muteBtn = null;
    await this.save();
  },
  // ---- UI RENDERING ----
  /**
   * Timer-Body rendern
   * @param {HTMLElement} bodyEl
   */
  renderBody(bodyEl) {
    bodyEl.textContent = '';
    bodyEl.style.padding = '8px';
    bodyEl.style.display = 'flex';
    bodyEl.style.flexDirection = 'column';
    // Display
    const display = document.createElement('div');
    display.className = 'timer-display';
    const timeEl = document.createElement('div');
    timeEl.className = 'timer-time';
    timeEl.textContent = '00:00';
    this._timeEl = timeEl;
    display.appendChild(timeEl);
    // Input
    const inputRow = document.createElement('div');
    inputRow.className = 'timer-input-row';
    this._inputRow = inputRow;
    const input = document.createElement('input');
    input.className = 'timer-input';
    input.type = 'text';
    input.placeholder = 'mm:ss';
    input.maxLength = 8;
    this._inputEl = input;
    input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        this._applyInput();
        this._start();
      }
    });
    inputRow.appendChild(input);
    // Controls
    const controls = document.createElement('div');
    controls.className = 'timer-controls';
    const btnStart = document.createElement('button');
    btnStart.className = 'timer-ctrl-btn primary';
    btnStart.type = 'button';
    btnStart.textContent = t('timer.start');
    btnStart.addEventListener('click', () => {
      if (!this._running && this._remaining === 0) {
        this._applyInput();
      }
      this._start();
    });
    this._btnStart = btnStart;
    const btnPause = document.createElement('button');
    btnPause.className = 'timer-ctrl-btn';
    btnPause.type = 'button';
    btnPause.textContent = t('timer.pause');
    btnPause.disabled = true;
    btnPause.addEventListener('click', () => this._pause());
    this._btnPause = btnPause;
    const btnReset = document.createElement('button');
    btnReset.className = 'timer-ctrl-btn danger';
    btnReset.type = 'button';
    btnReset.textContent = t('timer.reset');
    btnReset.addEventListener('click', () => this._reset());
    this._btnReset = btnReset;
    controls.append(btnStart, btnPause, btnReset);
    // Mute Toggle (in Controls-Zeile)
    const muteBtn = document.createElement('button');
    muteBtn.className = 'timer-mute-btn';
    muteBtn.type = 'button';
    this._muteBtn = muteBtn;
    this._updateMuteBtn();
    muteBtn.addEventListener('click', async () => {
      this._muted = !this._muted;
      this._updateMuteBtn();
      await this.save();
    });
    controls.appendChild(muteBtn);
    // Presets
    const presetsEl = this._createPresetsPanel();
    bodyEl.append(display, inputRow, controls, presetsEl);
    // State wiederherstellen
    this._updateDisplay();
    this._updateControls();
  },
  /**
   * Presets-Panel erstellen
   * @returns {HTMLElement}
   */
  _createPresetsPanel() {
    const container = document.createElement('div');
    container.className = 'timer-presets';
    container.id = 'timerPresetsPanel';
    const header = document.createElement('div');
    header.className = 'timer-presets-header';
    const title = document.createElement('span');
    title.className = 'timer-presets-title';
    title.textContent = t('timer.presets');
    const addBtn = document.createElement('button');
    addBtn.className = 'timer-preset-add';
    addBtn.type = 'button';
    addBtn.textContent = '+';
    addBtn.title = t('timer.save_preset');
    addBtn.addEventListener('click', () => this._showAddPreset(container));
    header.append(title, addBtn);
    container.appendChild(header);
    this._renderPresetItems(container);
    return container;
  },
  /**
   * Preset-Items rendern
   * @param {HTMLElement} container
   */
  _renderPresetItems(container) {
    // Alte Items entfernen
    const oldItems = container.querySelectorAll('.timer-preset-item, .timer-add-row');
    oldItems.forEach(item => item.remove());
    this._presets.forEach((preset, idx) => {
      const item = document.createElement('div');
      item.className = 'timer-preset-item';
      const name = document.createElement('span');
      name.className = 'timer-preset-name';
      name.textContent = preset.name;
      const time = document.createElement('span');
      time.className = 'timer-preset-time';
      time.textContent = this._formatTime(preset.seconds);
      const del = document.createElement('button');
      del.className = 'timer-preset-del';
      del.type = 'button';
      del.textContent = '\u2715';
      del.addEventListener('click', async (e) => {
        e.stopPropagation();
        await this._deletePreset(idx);
        this._renderPresetItems(container);
      });
      item.append(name, time, del);
      // Klick laedt Preset
      item.addEventListener('click', () => {
        this._loadPreset(preset);
      });
      container.appendChild(item);
    });
  },
  /**
   * Add-Preset UI anzeigen
   * @param {HTMLElement} container
   */
  _showAddPreset(container) {
    // Nur einmal anzeigen
    if (container.querySelector('.timer-add-row')) return;
    if (this._presets.length >= this.MAX_PRESETS) {
      HellionDialog.alert(
        t('timer.limit_message', { max: this.MAX_PRESETS }),
        { type: 'warning', title: t('timer.limit_title') }
      );
      return;
    }
    // Aktuelle Zeit als Vorlage
    const currentSeconds = this._remaining > 0 ? this._seconds : 0;
    if (currentSeconds === 0 && this._inputEl) {
      const parsed = this._parseTimeInput(this._inputEl.value);
      if (parsed === 0) {
        HellionDialog.alert(
          t('timer.no_time_message'),
          { type: 'info', title: t('timer.no_time_title') }
        );
        return;
      }
    }
    const row = document.createElement('div');
    row.className = 'timer-add-row';
    const nameInput = document.createElement('input');
    nameInput.className = 'timer-add-input';
    nameInput.type = 'text';
    nameInput.placeholder = t('timer.preset_name_placeholder');
    nameInput.maxLength = 20;
    const confirmBtn = document.createElement('button');
    confirmBtn.className = 'timer-add-confirm';
    confirmBtn.type = 'button';
    confirmBtn.textContent = t('timer.ok');
    const doAdd = async () => {
      const name = nameInput.value.trim();
      if (!name) return;
      let secs = this._seconds;
      if (secs === 0 && this._inputEl) {
        secs = this._parseTimeInput(this._inputEl.value);
      }
      if (secs === 0) return;
      await this._addPreset(name, secs);
      this._renderPresetItems(container);
    };
    confirmBtn.addEventListener('click', doAdd);
    nameInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') doAdd();
      if (e.key === 'Escape') row.remove();
    });
    row.append(nameInput, confirmBtn);
    container.appendChild(row);
    nameInput.focus();
  },
  // ---- TIMER LOGIC ----
  /**
   * Input-Feld auslesen und als Sekunden setzen
   */
  _applyInput() {
    if (!this._inputEl) return;
    const secs = this._parseTimeInput(this._inputEl.value);
    if (secs > 0) {
      this._seconds = secs;
      this._remaining = secs;
    }
  },
  /**
   * Timer starten
   */
  _start() {
    if (this._running) return;
    if (this._remaining <= 0) return;
    // Falls gerade Alarm laeuft, stoppen
    if (this._finished) {
      this._stopAlarm();
      this._finished = false;
    }
    this._running = true;
    this._updateControls();
    // Input verstecken
    if (this._inputRow) this._inputRow.style.display = 'none';
    this._intervalId = setInterval(() => this._tick(), 1000);
  },
  /**
   * Timer pausieren
   */
  _pause() {
    if (!this._running) return;
    this._running = false;
    this._stopCountdown();
    this._updateControls();
  },
  /**
   * Timer zuruecksetzen
   */
  _reset() {
    this._stopCountdown();
    this._stopAlarm();
    this._running = false;
    this._finished = false;
    this._remaining = 0;
    this._seconds = 0;
    // Input wieder anzeigen
    if (this._inputRow) this._inputRow.style.display = 'flex';
    if (this._inputEl) this._inputEl.value = '';
    this._updateDisplay();
    this._updateControls();
  },
  /**
   * Jede Sekunde: remaining verringern, Display aktualisieren
   */
  _tick() {
    this._remaining--;
    if (this._remaining <= 0) {
      this._remaining = 0;
      this._stopCountdown();
      this._running = false;
      this._finished = true;
      this._onFinish();
    }
    this._updateDisplay();
    this._updateControls();
  },
  /**
   * Interval stoppen
   */
  _stopCountdown() {
    if (this._intervalId) {
      clearInterval(this._intervalId);
      this._intervalId = null;
    }
  },
  /**
   * Timer abgelaufen — Alarm + Tab-Blink
   */
  _onFinish() {
    if (!this._muted) this._playAlarm();
    this._startTitleBlink();
  },
  /**
   * Akustisches Signal (Browser Audio API, kein externer Request)
   */
  _playAlarm() {
    try {
      const ctx = new AudioContext();
      [0, 0.3, 0.6].forEach(delay => {
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.frequency.value = 800;
        gain.gain.value = 0.07;
        osc.start(ctx.currentTime + delay);
        osc.stop(ctx.currentTime + delay + 0.2);
      });
    } catch (e) {
      console.warn('Timer: Audio nicht verfuegbar', e);
    }
  },
  /**
   * Tab-Titel blinken lassen
   */
  _startTitleBlink() {
    this._originalTitle = document.title;
    this._blinkIntervalId = setInterval(() => {
      document.title = document.title === t('timer.finished_title')
        ? this._originalTitle
        : t('timer.finished_title');
    }, 1000);
  },
  /**
   * Tab-Titel Blink und Alarm stoppen
   */
  _stopAlarm() {
    if (this._blinkIntervalId) {
      clearInterval(this._blinkIntervalId);
      this._blinkIntervalId = null;
      document.title = this._originalTitle || t('timer.default_page_title');
    }
    this._finished = false;
    this._updateDisplay();
    this._updateControls();
  },
  /**
   * Mute-Button Text/Titel aktualisieren
   */
  _updateMuteBtn() {
    if (!this._muteBtn) return;
    this._muteBtn.textContent = this._muted ? '\uD83D\uDD07' : '\uD83D\uDD0A';
    this._muteBtn.title = this._muted ? t('timer.unmute') : t('timer.mute');
    this._muteBtn.classList.toggle('muted', this._muted);
  },
  // ---- DISPLAY ----
  /**
   * Zeitanzeige aktualisieren
   */
  _updateDisplay() {
    if (!this._timeEl) return;
    this._timeEl.textContent = this._formatTime(this._remaining);
    this._timeEl.classList.toggle('finished', this._finished);
  },
  /**
   * Button-States aktualisieren
   */
  _updateControls() {
    if (this._btnStart) {
      this._btnStart.disabled = this._running;
      this._btnStart.textContent = this._finished ? t('timer.restart') : t('timer.start');
    }
    if (this._btnPause) {
      this._btnPause.disabled = !this._running;
    }
  },
  // ---- PRESETS ----
  /**
   * Preset hinzufuegen
   * @param {string} name
   * @param {number} seconds
   */
  async _addPreset(name, seconds) {
    if (this._presets.length >= this.MAX_PRESETS) return;
    this._presets.push({ name, seconds });
    await this.save();
  },
  /**
   * Preset loeschen
   * @param {number} index
   */
  async _deletePreset(index) {
    this._presets.splice(index, 1);
    await this.save();
  },
  /**
   * Preset laden (Zeit setzen)
   * @param {Object} preset - { name, seconds }
   */
  _loadPreset(preset) {
    // Falls laufend, erst stoppen
    this._stopCountdown();
    this._stopAlarm();
    this._running = false;
    this._finished = false;
    this._seconds = preset.seconds;
    this._remaining = preset.seconds;
    if (this._inputRow) this._inputRow.style.display = 'none';
    this._updateDisplay();
    this._updateControls();
  },
  // ---- FORMATTING ----
  /**
   * Sekunden in Zeitformat umwandeln
   * @param {number} totalSeconds
   * @returns {string} "05:30" oder "1:05:30"
   */
  _formatTime(totalSeconds) {
    const h = Math.floor(totalSeconds / 3600);
    const m = Math.floor((totalSeconds % 3600) / 60);
    const s = totalSeconds % 60;
    const mm = String(m).padStart(2, '0');
    const ss = String(s).padStart(2, '0');
    if (h > 0) {
      return h + ':' + mm + ':' + ss;
    }
    return mm + ':' + ss;
  },
  /**
   * Zeit-String in Sekunden parsen
   * Akzeptiert: "5:30", "05:30", "1:05:30", "90" (Sekunden)
   * @param {string} str
   * @returns {number}
   */
  _parseTimeInput(str) {
    const trimmed = (str || '').trim();
    if (!trimmed) return 0;
    const parts = trimmed.split(':');
    if (parts.length === 1) {
      // Nur Zahl = Sekunden
      const secs = parseInt(parts[0], 10);
      return isNaN(secs) ? 0 : Math.max(0, secs);
    }
    if (parts.length === 2) {
      // mm:ss
      const m = parseInt(parts[0], 10);
      const s = parseInt(parts[1], 10);
      if (isNaN(m) || isNaN(s)) return 0;
      return Math.max(0, m * 60 + s);
    }
    if (parts.length === 3) {
      // hh:mm:ss
      const h = parseInt(parts[0], 10);
      const m = parseInt(parts[1], 10);
      const s = parseInt(parts[2], 10);
      if (isNaN(h) || isNaN(m) || isNaN(s)) return 0;
      return Math.max(0, h * 3600 + m * 60 + s);
    }
    return 0;
  },
  // ---- KEYBOARD ----
  /**
   * Tastatur-Events binden
   * @param {HTMLElement} widgetEl
   */
  _bindKeyboard(widgetEl) {
    this._unbindKeyboard();
    this._keydownHandler = (e) => {
      // Nicht reagieren wenn User in Input tippt
      if (e.target.tagName === 'INPUT') return;
      if (e.key === ' ' || e.key === 'Enter') {
        e.preventDefault();
        if (this._running) {
          this._pause();
        } else if (this._remaining > 0) {
          this._start();
        }
      } else if (e.key === 'Escape' || e.key === 'r' || e.key === 'R') {
        e.preventDefault();
        this._reset();
      }
    };
    widgetEl.addEventListener('keydown', this._keydownHandler);
    widgetEl.tabIndex = 0;
  },
  /**
   * Keyboard-Events entfernen
   */
  _unbindKeyboard() {
    if (this._keydownHandler) {
      const entry = WidgetManager._widgets.get(this.WIDGET_ID);
      if (entry) {
        entry.el.removeEventListener('keydown', this._keydownHandler);
      }
      this._keydownHandler = null;
    }
  },
  // ---- INIT ----
  /**
   * Timer initialisieren (aus app.js aufgerufen)
   */
  async init() {
    await this.load();
    // Wenn Timer beim letzten Mal offen war, wiederherstellen
    const data = await Store.get(this.STORAGE_KEY);
    if (data && data.timer && data.timer.open) {
      await this.open();
    }
    // Widget-Lifecycle-Events
    const self = this;
    WidgetManager.on('widget:close', (e) => {
      if (e.detail.id === self.WIDGET_ID) {
        self.onClose();
      }
    });
    WidgetManager.on('widget:minimize', (e) => {
      if (e.detail.id === self.WIDGET_ID) {
        self._isOpen = false;
        self.save();
      }
    });
    WidgetManager.on('widget:open', (e) => {
      if (e.detail.id === self.WIDGET_ID) {
        self._isOpen = true;
        const body = WidgetManager.getBody(self.WIDGET_ID);
        if (body && body.children.length === 0) {
          self.renderBody(body);
        }
        const entry = WidgetManager._widgets.get(self.WIDGET_ID);
        if (entry) self._bindKeyboard(entry.el);
        self.save();
      }
    });
  }
 };
@@ -0,0 +1,412 @@
 /* =============================================
   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: 100,
  STORAGE_KEY: 'widgetStates',
  /** @type {EventTarget} Internes Event-System fuer Widget-Lifecycle */
  _emitter: new EventTarget(),
  /**
   * Event-Listener registrieren
   * @param {string} event - z.B. 'widget:close', 'widget:minimize', 'widget:open'
   * @param {Function} handler
   */
  on(event, handler) {
    this._emitter.addEventListener(event, handler);
  },
  /**
   * Event-Listener entfernen
   * @param {string} event
   * @param {Function} handler
   */
  off(event, handler) {
    this._emitter.removeEventListener(event, handler);
  },
  /**
   * 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 || t('notes.default_title'),
      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, _minimizing: false });
    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 || t('notes.default_title');
      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 = t('widget.minimize');
    btnMin.textContent = '\u2500';
    btnMin.addEventListener('click', () => this.minimize(state.id));
    const btnClose = document.createElement('button');
    btnClose.className = 'widget-btn widget-close';
    btnClose.title = t('widget.close');
    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._emitter.dispatchEvent(new CustomEvent('widget:close', { detail: { id } }));
    this._widgets.delete(id);
  },
  /**
   * Widget minimieren (aus DOM verstecken, bleibt im Notebook).
   * Nutzt transitionend statt setTimeout — _minimizing Flag verhindert Race Condition
   * mit openWidget(). Fallback-Timer fuer prefers-reduced-motion / fehlende Transition.
   * @param {string} id
   */
  async minimize(id) {
    const entry = this._widgets.get(id);
    if (!entry) return;
    entry.state.open = false;
    entry._minimizing = true;
    entry.el.classList.add('widget-minimized');
    const MINIMIZE_FALLBACK_MS = 350;
    function onEnd(e) {
      if (e.target !== entry.el || e.propertyName !== 'opacity') return;
      clearTimeout(fallbackTimer);
      entry.el.removeEventListener('transitionend', onEnd);
      if (entry._minimizing) {
        entry.el.style.display = 'none';
      }
      entry._minimizing = false;
    }
    entry.el.addEventListener('transitionend', onEnd);
    const fallbackTimer = setTimeout(() => {
      entry.el.removeEventListener('transitionend', onEnd);
      if (entry._minimizing) {
        entry.el.style.display = 'none';
        entry._minimizing = false;
      }
    }, MINIMIZE_FALLBACK_MS);
    await this.save();
    this._emitter.dispatchEvent(new CustomEvent('widget:minimize', { detail: { id } }));
  },
  /**
   * Widget oeffnen (aus minimiertem Zustand wiederherstellen)
   * @param {string} id
   */
  async openWidget(id) {
    const entry = this._widgets.get(id);
    if (!entry) return;
    entry._minimizing = false;
    entry.state.open = true;
    entry.el.style.display = 'flex';
    requestAnimationFrame(() => {
      entry.el.classList.remove('widget-minimized');
    });
    this.bringToFront(id);
    await this.save();
    this._emitter.dispatchEvent(new CustomEvent('widget:open', { detail: { id } }));
  },
  /**
   * 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	60a1bec00d	feat(release): Version auf v2.1.0 bumpen — Calculator Upgrade Alle 3 Manifests, newtab.html, data.js, app.js auf 2.1.0. CHANGELOG-Eintrag mit allen 6 neuen Calculator-Modi. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 22:21:45 +02:00
JonKazama-Hellion	153db9c24d	feat(calculator): Stationeers Calculator mit Gas/Furnace/Solar/Atmo 4 Sub-Modi: PV=nRT Gas-Rechner, Furnace Combustion, Solar/Battery Planung und Atmosphere Mixer. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 22:20:09 +02:00
JonKazama-Hellion	2e691b8b51	fix(calculator): save() überschreibt Game-Mode Sub-States nicht mehr data.calculator wurde bei jedem save() komplett ersetzt, wodurch factorio/satisfactory Sub-Mode-Präferenzen verloren gingen. Jetzt werden nur die Core-Properties einzeln gesetzt. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 22:16:19 +02:00
JonKazama-Hellion	11419bd589	feat(calculator): Factorio Calculator mit Ratio, Belt und Maschinen-Modus Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-16 22:12:28 +02:00
JonKazama-Hellion	27fa4f53af	feat(calculator): Satisfactory Calculator mit Overclock-Power	2026-04-16 22:10:11 +02:00
JonKazama-Hellion	8fdd46beec	feat(calculator): Unit-Converter mit 6 Kategorien	2026-04-16 22:05:51 +02:00
JonKazama-Hellion	3dd9723271	fix(calc-scientific): sqrt/square mit lastResult, Negate-Regex sqrt und x² transferieren _lastResult in _currentExpr wenn Expression leer. handleNegate Regex akzeptiert auch dezimal-first Zahlen (.5). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 22:03:02 +02:00
JonKazama-Hellion	2f23c13de1	feat(calculator): Scientific-Modus implementieren Neuer Taschenrechner-Modus mit 6 wissenschaftlichen Buttons (√, x², xⁿ, π, e, ±), Formel-Helfer (Kreisfläche, Kreisumfang, °C↔°F, Pythagoras, Prozent) und erweiterter Tastaturunterstützung (p → Pi, ^ → Potenz). - calc-scientific.js: IIFE, registriert 'scientific' Mode via Calculator.registerMode() - newtab.html: Script-Tag nach calculator.js eingefügt (Load-Order eingehalten) - i18n.js: 15 neue Keys pro Sprache (DE + EN) - main.css: Styles für .calc-sci-buttons und .calc-formula-* Komponenten	2026-04-16 21:59:10 +02:00
JonKazama-Hellion	f5cebd8d34	fix(calculator): Dezimal-Eingabe nach ^ ermöglichen Split-Regex für Dezimalpunkt-Check um ^ erweitern, damit z.B. 2.3^1.5 korrekt eingegeben werden kann. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 21:56:29 +02:00
JonKazama-Hellion	10318008e6	feat(calculator): Parser um ^ (Potenz) und sqrt() erweitern	2026-04-16 21:51:30 +02:00
JonKazama-Hellion	50319f8ba9	fix(calculator): init-Reihenfolge und save() Daten-Erhalt Standard-Modus vor open() registrieren (verhindert leeres Widget bei Restore). save() nutzt read-modify-write statt Overwrite (bewahrt Timer/ImageRef-Daten). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 21:49:51 +02:00
JonKazama-Hellion	b71e8cde1b	fix(calculator): Auto-Resize via DOM statt nicht-existierendem WidgetManager.resize() Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 21:45:35 +02:00
JonKazama-Hellion	2487ac772f	feat(calculator): Tab-System mit registerMode() und switchMode() - Neue Eigenschaften: _modes (Map), _activeMode, _tabBarEl - registerMode() für externe Mode-Dateien, aktualisiert Tab-Bar live - renderBody() baut jetzt Tab-Bar + .calc-mode-body Container - _renderTabBar(), _updateTabBar(), switchMode() implementiert - _renderStandardMode() extrahiert aus altem renderBody() - save()/load(): activeMode wird persistiert und wiederhergestellt - onClose(): aktiven Modus sauber aufräumen, _tabBarEl zurücksetzen - CSS: .calc-tab-bar, .calc-tab, .calc-tab-icon, .calc-tab-label, .calc-mode-body - i18n: calculator.tab.standard (DE + EN)	2026-04-16 21:43:03 +02:00
JonKazama-Hellion	7be391de99	docs(plan): Calculator Upgrade v2.1.0 Implementierungsplan Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 21:38:57 +02:00
JonKazama-Hellion	cebf277a5d	docs(spec): Calculator Upgrade v2.1.0 Design-Spec 6 Modi: Standard, Scientific, Unit-Converter, Satisfactory, Factorio, Stationeers. Tab-basierte Architektur, Registrierungs-Pattern, erweiteter Shunting-Yard Parser. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 21:22:07 +02:00
JonKazama-Hellion	92c5b23b44	fix: image-ref Titel-Bug, CSP, ARIA-Labels, Onboarding i18n - image-ref.js: .widget-title-text → .widget-title (Titel-Update war kaputt) - Alle 3 Manifests: explizites content_security_policy (script-src/object-src 'self') - i18n.js: applyLanguage() setzt aria-label synchron zu title - newtab.html: 6 Close-Buttons + Search-Submit mit data-i18n-title - i18n.js: 4 neue Keys (dialog.close, search.submit_title, onboarding.tradecenter_desc) - onboarding.js: TradeCenter-Beschreibung auf t() umgestellt Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 20:51:54 +02:00
JonKazama-Hellion	7f22627272	Merge branch 'feature/hardening-v2.0.1' — Hardening Release v2.0.1 Security: URL-Validierung (bgUrl + Import), immutable Data-Mapping Stability: Widget Event-System (EventTarget), transitionend Race Fix Privacy: Lokale Letter-Icons statt Google Favicons API Compat: backdrop-filter Fallback, _locales in Release-ZIPs i18n: 10 fehlende Übersetzungs-Keys ergänzt Quality: Clock Interval ID, Notes-Import über init()	2026-04-16 20:37:03 +02:00
JonKazama-Hellion	9b6515aab3	fix(ci): _locales/ in alle Release-ZIPs aufnehmen Manifest nutzt __MSG_extName__ / __MSG_extDesc__ mit default_locale, aber die _locales/ Dateien fehlten in allen drei ZIP-Befehlen. Ohne sie kann der Browser die Extension nicht laden. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 20:35:59 +02:00
JonKazama-Hellion	675e21d886	fix(release): fehlende Versionsnummern + bgUrl-Validierung Drei Stellen hatten noch '2.0.0' statt '2.0.1': newtab.html About-Sektion, data.js Export und app.js Backup-Export. FileReader-Upload in settings.js validiert jetzt bgUrl via isValidBgUrl() (Defense-in-Depth). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 20:33:38 +02:00
JonKazama-Hellion	536e0771a4	chore(release): bump version to v2.0.1 — hardening release Security fixes, widget event system, local favicons, i18n completeness, backdrop-filter fallback, code quality improvements. See CHANGELOG.md.	2026-04-16 20:28:22 +02:00
JonKazama-Hellion	02cdee76a8	fix(i18n): complete missing translations for toolbar tooltips and button texts Add data-i18n-title to 5 header buttons, data-i18n to 3 settings buttons. Add 10 new keys to STRINGS.de and STRINGS.en including background URL validation error messages.	2026-04-16 20:27:17 +02:00
JonKazama-Hellion	b6d347cd15	fix(compat): add backdrop-filter fallback for Brave Shields Add --bg-solid-fallback CSS variable to all 11 themes and a @supports not (backdrop-filter) block. UI remains usable when Brave Shields or strict fingerprinting settings block backdrop-filter.	2026-04-16 20:25:10 +02:00
JonKazama-Hellion	6704f4c955	feat(privacy): replace Google Favicons with local letter icons Remove getFaviconUrl() and all external network requests. Bookmarks now show a colored letter icon with deterministic hue based on title. Eliminates privacy leak and Brave Shields compatibility issues.	2026-04-16 20:22:18 +02:00
JonKazama-Hellion	a3e21a760f	fix(security): harden JSON import with URL validation and immutable mapping Add isSafeUrl() to block javascript:/data: URLs in imported bookmarks. Replace mutable object mutation with immutable .map() and string length limits. Use Notes.init()/Calculator.load()/Timer.load() instead of direct internal mutation after import.	2026-04-16 20:20:38 +02:00
JonKazama-Hellion	82dd6e026a	fix(security): validate background URL before CSS injection Add isValidBgUrl() that only allows blob: and data:image/ protocols. Applied in applySettings() and the manual URL input handler. Prevents CSS injection via manipulated bgUrl storage values.	2026-04-16 20:18:42 +02:00
JonKazama-Hellion	2430d65e3a	refactor(widgets): migrate Calculator, Timer, ImageRef to event listeners Replace monkey-patching of WidgetManager.close/minimize/openWidget with WidgetManager.on() event listeners. Eliminates 3-deep closure chain.	2026-04-16 20:15:08 +02:00
JonKazama-Hellion	30df93a4cc	fix(widgets): harden minimize transitionend with fallback and property filter - Filter transitionend by propertyName=opacity to prevent double-fire - Add 350ms fallback setTimeout for prefers-reduced-motion / zero-duration - Initialize _minimizing: false in create() for clean state - Dispatch events after save() for consistent state in listeners Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 20:13:47 +02:00
JonKazama-Hellion	b92ea5a1a4	fix(widgets): replace setTimeout with transitionend in minimize Fixes race condition where openWidget() during the 250ms timeout would be overridden. Uses _minimizing flag to cancel in-flight transitions. Dispatches widget:minimize and widget:open events.	2026-04-16 20:10:30 +02:00
JonKazama-Hellion	fde1fdd002	fix(widgets): dispatch close event before registry cleanup Move widget:close dispatch before _widgets.delete() so handlers can still query WidgetManager for the widget's state during the event. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 20:09:43 +02:00
JonKazama-Hellion	7cda3019c8	refactor(widgets): add EventTarget-based lifecycle event system Add _emitter, on(), off() to WidgetManager. Dispatch widget:close event after close(). Foundation for removing monkey-patching from widget modules.	2026-04-16 20:07:04 +02:00
JonKazama-Hellion	3de1dd3b8b	docs(plan): Hardening v2.0.1 Implementierungsplan erstellen 9 Tasks, 16 Dateien, Foundation-First-Strategie. Event-System → Widget-Migration → Security → Favicons → i18n → Quality → Release. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 15:29:14 +02:00
JonKazama-Hellion	63825cd393	docs(spec): Hardening v2.0.1 Design-Dokument erstellen Audit-basierte Spec für Security, Stability, i18n und Code-Quality Fixes. Foundation-First-Strategie: Event-System → Widget-Migration → Security → i18n → Quality. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-16 15:25:03 +02:00
JonKazama-Hellion	c6c0d5c468	docs(release): architecture.md auf v2.0.0 aktualisieren i18n.js und bookmark-import.js ergänzen, Load-Order und Module-Tabelle an aktuelle newtab.html synchronisieren.	2026-03-22 18:38:18 +01:00
JonKazama-Hellion	dbd209bc2b	docs(release): README auf v2.0.0 mit i18n-Feature aktualisieren Version, i18n-Sektion, Architecture-Tree mit i18n.js und _locales, Modulanzahl und Release-Beispiel aktualisiert.	2026-03-22 18:33:27 +01:00
JonKazama-Hellion	7900962c5a	fix(i18n): Review-Findings beheben - Version in newtab.html auf 2.0.0 aktualisieren - dialog.js OK-Fallback auf t('dialog.ok') umstellen - Duplikat-Keys widgets.minimize/close entfernen (widget.* wird genutzt)	2026-03-22 18:28:35 +01:00
JonKazama-Hellion	1bbdbdef1c	feat(release): Version auf v2.0.0 bumpen — i18n Release Alle drei Manifests, Export-Versionen und CHANGELOG aktualisiert.	2026-03-22 18:28:35 +01:00
JonKazama-Hellion	f07200cd8e	feat(i18n): settings.js und widgets.js auf t() umstellen Reset-Dialog, Dateifehler, Widget-Buttons (Minimieren/Schließen) und Default-Titel verwenden jetzt i18n-Keys.	2026-03-22 18:28:35 +01:00
JonKazama-Hellion	ab165d4f75	feat(i18n): app.js Strings auf t() umstellen Clock-Tage/Monate, Backup-Reminder, HTML-Import und URL-Validierung verwenden jetzt i18n-Keys.	2026-03-22 18:28:35 +01:00
JonKazama-Hellion	4a66015258	feat(i18n): data.js, bookmark-import.js, storage.js auf t() umstellen	2026-03-22 18:28:35 +01:00
JonKazama-Hellion	d0f870ace1	feat(i18n): calculator.js, timer.js, image-ref.js auf t() umstellen	2026-03-22 18:28:35 +01:00
JonKazama-Hellion	daea57a9df	feat(i18n): notes.js Strings auf t() umstellen	2026-03-22 18:28:35 +01:00
JonKazama-Hellion	f937f7c39c	feat(i18n): onboarding.js Strings auf t() umstellen	2026-03-22 18:28:31 +01:00
JonKazama-Hellion	3ab8847f31	feat(i18n): boards.js Strings auf t() umstellen	2026-03-22 18:28:25 +01:00
JonKazama-Hellion	36335d3cc4	feat(i18n): dialog.js Defaults auf t() umstellen	2026-03-22 18:28:20 +01:00
JonKazama-Hellion	1b39ac863b	fix(i18n): Code-Quality-Review Korrekturen - resolveLang() Hilfsfunktion extrahieren (DRY) - JSDoc-Kommentar in I18n.init() korrigieren - settings.export.btn Key für Export-Button trennen - setLanguage('auto') im Reset-Handler aufrufen	2026-03-22 14:07:17 +01:00
JonKazama-Hellion	522b177470	fix(i18n): Spec-Review-Korrekturen für i18n-Grundgerüst - header.settings DE-String korrigiert (war englisch) - ~17 deutsche Strings die englisch waren gefixt - I18n.init() vor applySettings() in app.js - html lang-Attribut dynamisch via I18n setzen - Default html lang auf en (passend zu default_locale)	2026-03-22 14:04:04 +01:00
JonKazama-Hellion	f2d4e22b86	feat(i18n): i18n-Modul, _locales und data-i18n Attribute einrichten	2026-03-22 13:56:04 +01:00
JonKazama-Hellion	677344f24d	docs(release): Dokumentation ins Englische übersetzen und v1.11.1 Docs - README, CHANGELOG, DISCLAIMER, SECURITY auf Englisch übersetzen - Projekt-Docs (architecture, patterns, widget-schema, style-guide) übersetzen - CODEOWNERS für Master-Branch-Schutz hinzufügen - release.yml auf Englisch übersetzen - STYLE_GUIDE von src/css/ nach docs/ verschieben	2026-03-22 13:12:24 +01:00
JonKazama-Hellion	40d4d9f37a	feat(app): 3 neue Themes, WebP-Konvertierung und Browser-Bookmark-Import - Satisfactory, Avorion und Hellion Stealth als neue Themes - Alle 11 Theme-Bilder von JPG/PNG nach WebP konvertieren (~12 MB → 1.1 MB) - Browser-Lesezeichen direkt importieren mit Ordner-Auswahl Modal - Duplikat-Erkennung, URL-Validierung, Chrome/Firefox-Kompatibilität - Version auf 1.11.1 aktualisieren (Manifeste, data.js, newtab.html, app.js)	2026-03-22 13:12:24 +01:00
JonKazama-Hellion	198171b6c2	feat(app): Onboarding, Settings-Redesign und Docs für v1.9.0 - Onboarding mit Widget-Toolbar Slide und Gaming Starter Board - Settings in Darstellung-Modal und schlankes Settings-Panel - About-Block als fixierten Footer im Settings-Panel - Dropdown-Optionen an Theme-Farben anpassen - Projekt-Dokumentation (Architektur, Widget-Schema, Patterns) - Firefox Update-URL für Store-Veröffentlichung - Versions-Bump auf 1.9.0 in allen Manifests	2026-03-22 13:12:24 +01:00
JonKazama-Hellion	51947b229c	feat(image-ref): Bild-Referenz Widget mit Session-Storage Opt-in Widget fuer Bild-Referenzen (max. 3 gleichzeitig). Canvas API konvertiert zu WebP, sessionStorage fuer Bilddaten. Positionen und Labels bleiben persistent, Bilder nur pro Session.	2026-03-22 13:12:24 +01:00
JonKazama-Hellion	2f0b76eb4e	feat(timer): Timer/Countdown-Widget mit Presets und Alarm Countdown-Timer als Single-Instance-Widget mit Preset-System (max. 5), Web Audio API Alarm und Tab-Titel-Blink bei Ablauf. Mute-Toggle zum Stummschalten des Alarms. Z-Index-Hierarchie für Widgets auf 100 angehoben.	2026-03-22 13:12:24 +01:00
JonKazama-Hellion	32a6fe88dc	feat(calculator): Taschenrechner-Widget mit History und Tastatureingabe Neues Widget-Modul mit Shunting-Yard Parser, 4x5 Button-Grid, persistenter History (max 10) und Keyboard-Support. Storage-Handling in Notes/Data erweitert fuer parallele Persistierung.	2026-03-22 13:12:24 +01:00
JonKazama-Hellion	95e45948be	Add CODEOWNER file to github	2026-03-22 12:45:04 +01:00
JonKazama-Hellion	a76f63c407	Add Ko-fi funding information Added Ko-fi username for funding support.	2026-03-21 19:56:41 +01:00
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