From ce923bbdc7a4033e3e21497a620788f94bb6089f Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 21 May 2026 14:56:54 +0200
Subject: [PATCH] shared-ui: Sync auf mana/shared-ui v1.0.0 + AppSlider tot weg
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Workspace-Kopie in packages/shared-ui synchronisiert mit
mana@1dc8a98 (Compat-Layer für alle v0.1.x-Patterns). 219 Files
geändert — alter Code (Charts, Quick-Input-Originale, Help, Onboarding,
Settings, Bottom-Stack, Search-Core, ColorPicker, Actions) entfällt;
neue v1.0.0-Komponenten kommen rein.

tsconfig.json self-contained (kein extends auf nicht-existierenden
managarten/tsconfig.base.json).

pnpm check ergibt jetzt 0 Errors über alle 10086 Files
(Stand vorher: 204 Errors mit dem unverarbeiteten Sync). Zwei
non-blocking Warnings stehen offen (SSR-nested-button bei TagChip,
ARIA-Role bei Pill mit click-handler).

AppSlider toter Code in apps/mana/apps/web/src/lib/components/
AppSlider.svelte entfernt — der Wrapper hatte keine Aufrufer mehr.

mana-internal Configs (Storybook, lost-pixel, vite.config, Dockerfile,
infrastructure, PORTING_PLAN.md) bewusst NICHT gesynced — die wandern
nur im mana-Repo. managarten-shared-ui ist eingefrorene Kopie, kein
publish-target.

scripts/validate-disziplin.mjs: ungenutzte lines-Variable entfernt
(ESLint no-unused-vars).
---
 .../web/src/lib/components/AppSlider.svelte   |  33 -
 packages/shared-ui/.gitignore                 |  10 +
 packages/shared-ui/README.md                  |  75 ++
 packages/shared-ui/package.json               |  72 +-
 .../shared-ui/scripts/validate-disziplin.mjs  | 160 ++++
 packages/shared-ui/src/actions/focusTrap.ts   |  69 --
 packages/shared-ui/src/actions/index.ts       |   1 -
 .../shared-ui/src/atoms/Badge.stories.svelte  |  47 ++
 packages/shared-ui/src/atoms/Badge.svelte     | 108 ++-
 .../shared-ui/src/atoms/Button.stories.svelte |  77 ++
 packages/shared-ui/src/atoms/Button.svelte    | 206 ++++-
 .../shared-ui/src/atoms/Card.stories.svelte   |  94 +++
 packages/shared-ui/src/atoms/Card.svelte      | 191 ++---
 .../src/atoms/DynamicIcon.stories.svelte      | 112 +++
 .../shared-ui/src/atoms/DynamicIcon.svelte    | 204 ++++-
 .../src/atoms/Skeleton.stories.svelte         |  58 ++
 packages/shared-ui/src/atoms/Skeleton.svelte  | 111 +++
 .../src/atoms/Spinner.stories.svelte          |  49 ++
 packages/shared-ui/src/atoms/Spinner.svelte   |  93 +++
 .../shared-ui/src/atoms/Text.stories.svelte   |  53 ++
 packages/shared-ui/src/atoms/Text.svelte      | 139 +++-
 packages/shared-ui/src/atoms/index.ts         |   4 +-
 .../src/bottom-stack/BottomStack.svelte       | 121 ---
 .../src/bottom-stack/MinimizedTabs.svelte     | 174 -----
 .../src/bottom-stack/NotificationBar.svelte   | 165 ----
 packages/shared-ui/src/bottom-stack/index.ts  |   4 -
 packages/shared-ui/src/bottom-stack/types.ts  |  20 -
 .../src/charts/ActivityHeatmap.svelte         | 294 -------
 .../shared-ui/src/charts/DonutChart.svelte    | 260 -------
 .../shared-ui/src/charts/ProgressBars.svelte  | 192 -----
 .../src/charts/StatisticsSkeleton.svelte      | 272 -------
 .../shared-ui/src/charts/StatsGrid.svelte     | 136 ----
 .../src/charts/TrendLineChart.svelte          | 241 ------
 packages/shared-ui/src/charts/index.ts        |  20 -
 packages/shared-ui/src/charts/types.ts        |  62 --
 .../src/components/DevBuildBadge.svelte       |  77 --
 .../src/components/ImmersiveModeToggle.svelte | 113 ---
 .../src/components/SyncIndicator.svelte       |  66 --
 packages/shared-ui/src/context-menu/index.ts  |   3 -
 packages/shared-ui/src/context-menu/types.ts  |  46 --
 packages/shared-ui/src/dnd/ActionZone.svelte  | 123 ++-
 packages/shared-ui/src/dnd/DragPreview.svelte |  37 +-
 packages/shared-ui/src/help/HelpModal.svelte  | 184 -----
 .../src/help/KeyboardShortcutsPanel.svelte    | 251 ------
 .../shared-ui/src/help/SyntaxHelpPanel.svelte | 415 ----------
 packages/shared-ui/src/help/constants.ts      | 122 ---
 packages/shared-ui/src/help/index.ts          |  18 -
 packages/shared-ui/src/help/types.ts          |  93 ---
 packages/shared-ui/src/index.ts               | 317 +-------
 .../src/molecules/Checkbox.stories.svelte     |  52 ++
 .../shared-ui/src/molecules/Checkbox.svelte   | 233 +++---
 .../src/molecules/ColorPicker.constants.ts    |  47 --
 .../src/molecules/ColorPicker.svelte          |  83 --
 .../src/molecules/ColorPicker.test.ts         |  69 --
 .../src/molecules/ConfirmationPopover.svelte  | 415 ----------
 .../molecules/ContactAvatar.stories.svelte    |  50 ++
 .../src/molecules/ContactAvatar.svelte        | 133 ++++
 .../src/molecules/DataCard.stories.svelte     |  53 ++
 .../shared-ui/src/molecules/DataCard.svelte   | 238 +++---
 .../shared-ui/src/molecules/EmptyState.svelte |  99 +++
 .../src/molecules/FavoriteButton.svelte       |  98 ++-
 .../src/molecules/FavoriteButton.test.ts      |  47 --
 .../src/molecules/FilterDropdown.svelte       | 716 ------------------
 .../src/molecules/FilterDropdown.types.ts     |   8 -
 .../src/molecules/IconPicker.constants.ts     |   3 -
 .../shared-ui/src/molecules/IconPicker.svelte | 280 ++++---
 .../src/molecules/Input.stories.svelte        |  57 ++
 packages/shared-ui/src/molecules/Input.svelte | 217 ++++--
 .../molecules/KeyboardShortcutsPanel.svelte   | 173 -----
 .../src/molecules/ModalFooter.svelte          |  85 ---
 .../src/molecules/PageHeader.stories.svelte   |  72 ++
 .../shared-ui/src/molecules/PageHeader.svelte | 280 ++-----
 .../src/molecules/ReminderPicker.svelte       |  83 +-
 .../src/molecules/ReminderPicker.test.ts      |  57 --
 .../src/molecules/Select.stories.svelte       |  57 ++
 .../shared-ui/src/molecules/Select.svelte     | 187 ++---
 .../shared-ui/src/molecules/Select.types.ts   |   5 -
 .../src/molecules/TagBadge.stories.svelte     |  36 +
 .../shared-ui/src/molecules/TagBadge.svelte   |  64 ++
 .../src/molecules/TagChip.stories.svelte      |  56 ++
 .../shared-ui/src/molecules/TagChip.svelte    | 169 +++++
 .../shared-ui/src/molecules/TagField.svelte   |  56 ++
 .../src/molecules/TagSelector.stories.svelte  |  86 +++
 .../src/molecules/TagSelector.svelte          | 316 ++++++++
 .../src/molecules/Textarea.stories.svelte     |  56 ++
 .../shared-ui/src/molecules/Textarea.svelte   | 231 +++---
 .../src/molecules/Toggle.stories.svelte       |  50 ++
 .../shared-ui/src/molecules/Toggle.svelte     | 185 ++++-
 .../molecules/contacts/ContactAvatar.svelte   | 100 ---
 .../molecules/contacts/ContactBadge.svelte    | 185 -----
 .../molecules/contacts/ContactSelector.svelte | 711 -----------------
 .../shared-ui/src/molecules/contacts/index.ts |   4 -
 .../src/molecules/feedback/EmptyState.svelte  | 121 ---
 .../shared-ui/src/molecules/feedback/index.ts |   4 -
 packages/shared-ui/src/molecules/index.ts     |  75 +-
 .../loaders/AppLoadingSkeleton.svelte         | 466 ------------
 .../molecules/loaders/SkeletonAvatar.svelte   |  24 -
 .../src/molecules/loaders/SkeletonBox.svelte  |  79 --
 .../src/molecules/loaders/SkeletonCard.svelte |  69 --
 .../src/molecules/loaders/SkeletonGrid.svelte |  61 --
 .../src/molecules/loaders/SkeletonList.svelte |  51 --
 .../src/molecules/loaders/SkeletonRow.svelte  |  60 --
 .../src/molecules/loaders/SkeletonText.svelte |  42 -
 .../shared-ui/src/molecules/loaders/index.ts  |  34 -
 .../shared-ui/src/molecules/loaders/utils.ts  |  30 -
 .../src/molecules/media/AudioPlayer.svelte    | 287 -------
 .../shared-ui/src/molecules/media/index.ts    |   1 -
 .../src/molecules/stats/GlassCard.svelte      |  25 -
 .../src/molecules/stats/StatRow.svelte        |  39 -
 .../shared-ui/src/molecules/stats/index.ts    |   2 -
 .../src/molecules/tags/TagBadge.svelte        | 106 ---
 .../src/molecules/tags/TagBadge.test.ts       |  92 ---
 .../src/molecules/tags/TagChip.svelte         |  26 -
 .../src/molecules/tags/TagChip.test.ts        |  32 -
 .../src/molecules/tags/TagColorPicker.svelte  |  21 -
 .../src/molecules/tags/TagColorPicker.test.ts |  76 --
 .../src/molecules/tags/TagEditModal.svelte    | 145 ----
 .../src/molecules/tags/TagField.svelte        |  55 --
 .../src/molecules/tags/TagList.svelte         | 160 ----
 .../src/molecules/tags/TagSelector.svelte     | 257 -------
 .../src/molecules/tags/TagSelector.test.ts    | 147 ----
 .../src/molecules/tags/constants.test.ts      |  56 --
 .../shared-ui/src/molecules/tags/constants.ts |  56 --
 .../shared-ui/src/molecules/tags/index.ts     |  12 -
 .../shared-ui/src/navigation/AppDrawer.svelte |   6 +-
 .../src/navigation/GlobalSpotlight.svelte     |   2 +-
 .../navigation/ManaLogoIcon.stories.svelte    |  44 ++
 .../src/navigation/ManaLogoIcon.svelte        | 199 ++++-
 .../src/navigation/NavLink.stories.svelte     |  33 +
 .../shared-ui/src/navigation/NavLink.svelte   | 228 ++----
 .../src/navigation/Navbar.stories.svelte      | 111 +++
 .../shared-ui/src/navigation/Navbar.svelte    | 268 +------
 .../src/navigation/Pill.stories.svelte        |  61 ++
 packages/shared-ui/src/navigation/Pill.svelte | 288 ++++---
 .../src/navigation/PillDropdown.svelte        | 415 ++++------
 .../src/navigation/PillDropdownBar.svelte     |  92 +--
 .../src/navigation/PillNavigation.svelte      |  96 +--
 .../navigation/PillTabGroup.stories.svelte    |  58 ++
 .../src/navigation/PillTabGroup.svelte        | 219 +-----
 .../src/navigation/PillTagSelector.svelte     | 135 +---
 .../navigation/PillTimeRangeSelector.svelte   | 468 ------------
 .../src/navigation/PillToolbar.svelte         |  83 --
 .../src/navigation/PillToolbarButton.svelte   |  83 --
 .../src/navigation/PillToolbarDivider.svelte  |  18 -
 .../src/navigation/PillViewSwitcher.svelte    | 178 -----
 .../shared-ui/src/navigation/Sidebar.svelte   | 275 -------
 .../src/navigation/SidebarSection.svelte      | 107 ---
 .../shared-ui/src/navigation/TagStrip.svelte  | 110 ++-
 .../src/navigation/UserMenuPanel.svelte       |  65 +-
 .../ExpandableToolbar.svelte                  | 190 -----
 .../navigation/expandable-toolbar/index.ts    |   2 -
 .../navigation/expandable-toolbar/types.ts    |  28 -
 packages/shared-ui/src/navigation/index.ts    |  53 +-
 .../src/navigation/phosphor-icon-map.ts       | 130 ----
 packages/shared-ui/src/navigation/types.ts    | 277 +------
 .../src/onboarding/MiniOnboardingModal.svelte | 208 -----
 .../create-app-onboarding.svelte.ts           | 222 ------
 packages/shared-ui/src/onboarding/types.ts    | 157 ----
 .../shared-ui/src/organisms/AppSlider.svelte  | 651 ----------------
 .../src/organisms/AppSlider.types.ts          |   9 -
 .../src/organisms/BaseListView.svelte         |  78 +-
 .../ConfirmationModal.stories.svelte          |  52 ++
 .../src/organisms/ConfirmationModal.svelte    | 195 ++---
 .../ContextMenu.svelte                        | 108 +--
 .../src/organisms/FormModal.stories.svelte    |  72 ++
 .../shared-ui/src/organisms/FormModal.svelte  | 155 ++--
 .../src/organisms/Modal.stories.svelte        |  85 +++
 packages/shared-ui/src/organisms/Modal.svelte | 228 +++---
 .../src/organisms/NotificationBar.svelte      | 166 ++++
 packages/shared-ui/src/organisms/index.ts     |  28 +-
 .../organisms/network/NetworkControls.svelte  | 619 ---------------
 .../src/organisms/network/NetworkGraph.svelte | 682 -----------------
 .../src/organisms/network/constants.ts        |  86 ---
 .../shared-ui/src/organisms/network/index.ts  |  25 -
 .../src/organisms/network/network.types.ts    | 112 ---
 packages/shared-ui/src/pages/AppsPage.svelte  | 661 ----------------
 .../shared-ui/src/pages/OfflinePage.svelte    | 170 +++--
 .../shared-ui/src/pages/ProfilePage.svelte    | 539 -------------
 packages/shared-ui/src/pages/index.ts         |   1 +
 packages/shared-ui/src/pages/profile-types.ts |  37 -
 .../shared-ui/src/quick-input/InputBar.svelte |  19 +-
 .../quick-input/InputBarContextMenu.svelte    |  22 +-
 .../src/quick-input/InputBarHelpModal.svelte  |  27 -
 .../src/quick-input/highlightPatterns.ts      | 130 +++-
 packages/shared-ui/src/quick-input/index.ts   |  32 +-
 packages/shared-ui/src/quick-input/types.ts   |   7 +-
 packages/shared-ui/src/search-core/config.ts  |   9 -
 .../shared-ui/src/search-core/highlight.ts    | 127 ----
 packages/shared-ui/src/search-core/index.ts   |   3 -
 .../src/settings/GlobalSettingsSection.svelte | 338 ---------
 .../src/settings/NavVisibilitySettings.svelte | 197 -----
 .../src/settings/SettingsCard.svelte          |  62 --
 .../src/settings/SettingsDangerButton.svelte  |  75 --
 .../src/settings/SettingsDangerZone.svelte    |  28 -
 .../src/settings/SettingsNumberInput.svelte   | 112 ---
 .../src/settings/SettingsPage.svelte          | 262 -------
 .../shared-ui/src/settings/SettingsRow.svelte | 148 ----
 .../src/settings/SettingsSection.svelte       | 119 ---
 .../src/settings/SettingsSelect.svelte        | 111 ---
 .../src/settings/SettingsTimeInput.svelte     | 116 ---
 .../src/settings/SettingsToggle.svelte        |  89 ---
 packages/shared-ui/src/settings/index.ts      |  13 -
 packages/shared-ui/src/test/setup.ts          |   5 -
 .../shared-ui/src/toast/ToastContainer.svelte | 173 -----
 .../src/toast/ToastStack.stories.svelte       |  61 ++
 .../shared-ui/src/toast/ToastStack.svelte     | 161 ++++
 .../shared-ui/src/toast/globalErrorHandler.ts | 180 -----
 packages/shared-ui/src/toast/index.ts         |  14 +-
 packages/shared-ui/src/toast/legacy-store.ts  |  37 +
 packages/shared-ui/src/toast/store.svelte.ts  |  83 ++
 packages/shared-ui/src/toast/toast.svelte.ts  | 171 -----
 packages/shared-ui/tsconfig.json              |   2 +-
 packages/shared-ui/vitest.config.ts           |  25 -
 213 files changed, 6712 insertions(+), 20619 deletions(-)
 delete mode 100644 apps/mana/apps/web/src/lib/components/AppSlider.svelte
 create mode 100644 packages/shared-ui/.gitignore
 create mode 100644 packages/shared-ui/README.md
 create mode 100644 packages/shared-ui/scripts/validate-disziplin.mjs
 delete mode 100644 packages/shared-ui/src/actions/focusTrap.ts
 delete mode 100644 packages/shared-ui/src/actions/index.ts
 create mode 100644 packages/shared-ui/src/atoms/Badge.stories.svelte
 create mode 100644 packages/shared-ui/src/atoms/Button.stories.svelte
 create mode 100644 packages/shared-ui/src/atoms/Card.stories.svelte
 create mode 100644 packages/shared-ui/src/atoms/DynamicIcon.stories.svelte
 create mode 100644 packages/shared-ui/src/atoms/Skeleton.stories.svelte
 create mode 100644 packages/shared-ui/src/atoms/Skeleton.svelte
 create mode 100644 packages/shared-ui/src/atoms/Spinner.stories.svelte
 create mode 100644 packages/shared-ui/src/atoms/Spinner.svelte
 create mode 100644 packages/shared-ui/src/atoms/Text.stories.svelte
 delete mode 100644 packages/shared-ui/src/bottom-stack/BottomStack.svelte
 delete mode 100644 packages/shared-ui/src/bottom-stack/MinimizedTabs.svelte
 delete mode 100644 packages/shared-ui/src/bottom-stack/NotificationBar.svelte
 delete mode 100644 packages/shared-ui/src/bottom-stack/index.ts
 delete mode 100644 packages/shared-ui/src/bottom-stack/types.ts
 delete mode 100644 packages/shared-ui/src/charts/ActivityHeatmap.svelte
 delete mode 100644 packages/shared-ui/src/charts/DonutChart.svelte
 delete mode 100644 packages/shared-ui/src/charts/ProgressBars.svelte
 delete mode 100644 packages/shared-ui/src/charts/StatisticsSkeleton.svelte
 delete mode 100644 packages/shared-ui/src/charts/StatsGrid.svelte
 delete mode 100644 packages/shared-ui/src/charts/TrendLineChart.svelte
 delete mode 100644 packages/shared-ui/src/charts/index.ts
 delete mode 100644 packages/shared-ui/src/charts/types.ts
 delete mode 100644 packages/shared-ui/src/components/DevBuildBadge.svelte
 delete mode 100644 packages/shared-ui/src/components/ImmersiveModeToggle.svelte
 delete mode 100644 packages/shared-ui/src/components/SyncIndicator.svelte
 delete mode 100644 packages/shared-ui/src/context-menu/index.ts
 delete mode 100644 packages/shared-ui/src/context-menu/types.ts
 delete mode 100644 packages/shared-ui/src/help/HelpModal.svelte
 delete mode 100644 packages/shared-ui/src/help/KeyboardShortcutsPanel.svelte
 delete mode 100644 packages/shared-ui/src/help/SyntaxHelpPanel.svelte
 delete mode 100644 packages/shared-ui/src/help/constants.ts
 delete mode 100644 packages/shared-ui/src/help/index.ts
 delete mode 100644 packages/shared-ui/src/help/types.ts
 create mode 100644 packages/shared-ui/src/molecules/Checkbox.stories.svelte
 delete mode 100644 packages/shared-ui/src/molecules/ColorPicker.constants.ts
 delete mode 100644 packages/shared-ui/src/molecules/ColorPicker.svelte
 delete mode 100644 packages/shared-ui/src/molecules/ColorPicker.test.ts
 delete mode 100644 packages/shared-ui/src/molecules/ConfirmationPopover.svelte
 create mode 100644 packages/shared-ui/src/molecules/ContactAvatar.stories.svelte
 create mode 100644 packages/shared-ui/src/molecules/ContactAvatar.svelte
 create mode 100644 packages/shared-ui/src/molecules/DataCard.stories.svelte
 create mode 100644 packages/shared-ui/src/molecules/EmptyState.svelte
 delete mode 100644 packages/shared-ui/src/molecules/FavoriteButton.test.ts
 delete mode 100644 packages/shared-ui/src/molecules/FilterDropdown.svelte
 delete mode 100644 packages/shared-ui/src/molecules/FilterDropdown.types.ts
 delete mode 100644 packages/shared-ui/src/molecules/IconPicker.constants.ts
 create mode 100644 packages/shared-ui/src/molecules/Input.stories.svelte
 delete mode 100644 packages/shared-ui/src/molecules/KeyboardShortcutsPanel.svelte
 delete mode 100644 packages/shared-ui/src/molecules/ModalFooter.svelte
 create mode 100644 packages/shared-ui/src/molecules/PageHeader.stories.svelte
 delete mode 100644 packages/shared-ui/src/molecules/ReminderPicker.test.ts
 create mode 100644 packages/shared-ui/src/molecules/Select.stories.svelte
 delete mode 100644 packages/shared-ui/src/molecules/Select.types.ts
 create mode 100644 packages/shared-ui/src/molecules/TagBadge.stories.svelte
 create mode 100644 packages/shared-ui/src/molecules/TagBadge.svelte
 create mode 100644 packages/shared-ui/src/molecules/TagChip.stories.svelte
 create mode 100644 packages/shared-ui/src/molecules/TagChip.svelte
 create mode 100644 packages/shared-ui/src/molecules/TagField.svelte
 create mode 100644 packages/shared-ui/src/molecules/TagSelector.stories.svelte
 create mode 100644 packages/shared-ui/src/molecules/TagSelector.svelte
 create mode 100644 packages/shared-ui/src/molecules/Textarea.stories.svelte
 create mode 100644 packages/shared-ui/src/molecules/Toggle.stories.svelte
 delete mode 100644 packages/shared-ui/src/molecules/contacts/ContactAvatar.svelte
 delete mode 100644 packages/shared-ui/src/molecules/contacts/ContactBadge.svelte
 delete mode 100644 packages/shared-ui/src/molecules/contacts/ContactSelector.svelte
 delete mode 100644 packages/shared-ui/src/molecules/contacts/index.ts
 delete mode 100644 packages/shared-ui/src/molecules/feedback/EmptyState.svelte
 delete mode 100644 packages/shared-ui/src/molecules/feedback/index.ts
 delete mode 100644 packages/shared-ui/src/molecules/loaders/AppLoadingSkeleton.svelte
 delete mode 100644 packages/shared-ui/src/molecules/loaders/SkeletonAvatar.svelte
 delete mode 100644 packages/shared-ui/src/molecules/loaders/SkeletonBox.svelte
 delete mode 100644 packages/shared-ui/src/molecules/loaders/SkeletonCard.svelte
 delete mode 100644 packages/shared-ui/src/molecules/loaders/SkeletonGrid.svelte
 delete mode 100644 packages/shared-ui/src/molecules/loaders/SkeletonList.svelte
 delete mode 100644 packages/shared-ui/src/molecules/loaders/SkeletonRow.svelte
 delete mode 100644 packages/shared-ui/src/molecules/loaders/SkeletonText.svelte
 delete mode 100644 packages/shared-ui/src/molecules/loaders/index.ts
 delete mode 100644 packages/shared-ui/src/molecules/loaders/utils.ts
 delete mode 100644 packages/shared-ui/src/molecules/media/AudioPlayer.svelte
 delete mode 100644 packages/shared-ui/src/molecules/media/index.ts
 delete mode 100644 packages/shared-ui/src/molecules/stats/GlassCard.svelte
 delete mode 100644 packages/shared-ui/src/molecules/stats/StatRow.svelte
 delete mode 100644 packages/shared-ui/src/molecules/stats/index.ts
 delete mode 100644 packages/shared-ui/src/molecules/tags/TagBadge.svelte
 delete mode 100644 packages/shared-ui/src/molecules/tags/TagBadge.test.ts
 delete mode 100644 packages/shared-ui/src/molecules/tags/TagChip.svelte
 delete mode 100644 packages/shared-ui/src/molecules/tags/TagChip.test.ts
 delete mode 100644 packages/shared-ui/src/molecules/tags/TagColorPicker.svelte
 delete mode 100644 packages/shared-ui/src/molecules/tags/TagColorPicker.test.ts
 delete mode 100644 packages/shared-ui/src/molecules/tags/TagEditModal.svelte
 delete mode 100644 packages/shared-ui/src/molecules/tags/TagField.svelte
 delete mode 100644 packages/shared-ui/src/molecules/tags/TagList.svelte
 delete mode 100644 packages/shared-ui/src/molecules/tags/TagSelector.svelte
 delete mode 100644 packages/shared-ui/src/molecules/tags/TagSelector.test.ts
 delete mode 100644 packages/shared-ui/src/molecules/tags/constants.test.ts
 delete mode 100644 packages/shared-ui/src/molecules/tags/constants.ts
 delete mode 100644 packages/shared-ui/src/molecules/tags/index.ts
 create mode 100644 packages/shared-ui/src/navigation/ManaLogoIcon.stories.svelte
 create mode 100644 packages/shared-ui/src/navigation/NavLink.stories.svelte
 create mode 100644 packages/shared-ui/src/navigation/Navbar.stories.svelte
 create mode 100644 packages/shared-ui/src/navigation/Pill.stories.svelte
 create mode 100644 packages/shared-ui/src/navigation/PillTabGroup.stories.svelte
 delete mode 100644 packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
 delete mode 100644 packages/shared-ui/src/navigation/PillToolbar.svelte
 delete mode 100644 packages/shared-ui/src/navigation/PillToolbarButton.svelte
 delete mode 100644 packages/shared-ui/src/navigation/PillToolbarDivider.svelte
 delete mode 100644 packages/shared-ui/src/navigation/PillViewSwitcher.svelte
 delete mode 100644 packages/shared-ui/src/navigation/Sidebar.svelte
 delete mode 100644 packages/shared-ui/src/navigation/SidebarSection.svelte
 delete mode 100644 packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte
 delete mode 100644 packages/shared-ui/src/navigation/expandable-toolbar/index.ts
 delete mode 100644 packages/shared-ui/src/navigation/expandable-toolbar/types.ts
 delete mode 100644 packages/shared-ui/src/navigation/phosphor-icon-map.ts
 delete mode 100644 packages/shared-ui/src/onboarding/MiniOnboardingModal.svelte
 delete mode 100644 packages/shared-ui/src/onboarding/create-app-onboarding.svelte.ts
 delete mode 100644 packages/shared-ui/src/onboarding/types.ts
 delete mode 100644 packages/shared-ui/src/organisms/AppSlider.svelte
 delete mode 100644 packages/shared-ui/src/organisms/AppSlider.types.ts
 create mode 100644 packages/shared-ui/src/organisms/ConfirmationModal.stories.svelte
 rename packages/shared-ui/src/{context-menu => organisms}/ContextMenu.svelte (72%)
 create mode 100644 packages/shared-ui/src/organisms/FormModal.stories.svelte
 create mode 100644 packages/shared-ui/src/organisms/Modal.stories.svelte
 create mode 100644 packages/shared-ui/src/organisms/NotificationBar.svelte
 delete mode 100644 packages/shared-ui/src/organisms/network/NetworkControls.svelte
 delete mode 100644 packages/shared-ui/src/organisms/network/NetworkGraph.svelte
 delete mode 100644 packages/shared-ui/src/organisms/network/constants.ts
 delete mode 100644 packages/shared-ui/src/organisms/network/index.ts
 delete mode 100644 packages/shared-ui/src/organisms/network/network.types.ts
 delete mode 100644 packages/shared-ui/src/pages/AppsPage.svelte
 delete mode 100644 packages/shared-ui/src/pages/ProfilePage.svelte
 create mode 100644 packages/shared-ui/src/pages/index.ts
 delete mode 100644 packages/shared-ui/src/pages/profile-types.ts
 delete mode 100644 packages/shared-ui/src/quick-input/InputBarHelpModal.svelte
 delete mode 100644 packages/shared-ui/src/search-core/config.ts
 delete mode 100644 packages/shared-ui/src/search-core/highlight.ts
 delete mode 100644 packages/shared-ui/src/search-core/index.ts
 delete mode 100644 packages/shared-ui/src/settings/GlobalSettingsSection.svelte
 delete mode 100644 packages/shared-ui/src/settings/NavVisibilitySettings.svelte
 delete mode 100644 packages/shared-ui/src/settings/SettingsCard.svelte
 delete mode 100644 packages/shared-ui/src/settings/SettingsDangerButton.svelte
 delete mode 100644 packages/shared-ui/src/settings/SettingsDangerZone.svelte
 delete mode 100644 packages/shared-ui/src/settings/SettingsNumberInput.svelte
 delete mode 100644 packages/shared-ui/src/settings/SettingsPage.svelte
 delete mode 100644 packages/shared-ui/src/settings/SettingsRow.svelte
 delete mode 100644 packages/shared-ui/src/settings/SettingsSection.svelte
 delete mode 100644 packages/shared-ui/src/settings/SettingsSelect.svelte
 delete mode 100644 packages/shared-ui/src/settings/SettingsTimeInput.svelte
 delete mode 100644 packages/shared-ui/src/settings/SettingsToggle.svelte
 delete mode 100644 packages/shared-ui/src/settings/index.ts
 delete mode 100644 packages/shared-ui/src/test/setup.ts
 delete mode 100644 packages/shared-ui/src/toast/ToastContainer.svelte
 create mode 100644 packages/shared-ui/src/toast/ToastStack.stories.svelte
 create mode 100644 packages/shared-ui/src/toast/ToastStack.svelte
 delete mode 100644 packages/shared-ui/src/toast/globalErrorHandler.ts
 create mode 100644 packages/shared-ui/src/toast/legacy-store.ts
 create mode 100644 packages/shared-ui/src/toast/store.svelte.ts
 delete mode 100644 packages/shared-ui/src/toast/toast.svelte.ts
 delete mode 100644 packages/shared-ui/vitest.config.ts

diff --git a/apps/mana/apps/web/src/lib/components/AppSlider.svelte b/apps/mana/apps/web/src/lib/components/AppSlider.svelte
deleted file mode 100644
index 746060783..000000000
--- a/apps/mana/apps/web/src/lib/components/AppSlider.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-	import { AppSlider } from '@mana/shared-ui';
-	import type { AppItem } from '@mana/shared-ui';
-	import { getActiveManaApps, APP_STATUS_LABELS, APP_SLIDER_LABELS } from '@mana/shared-branding';
-
-	// Convert MANA_APPS to AppItem format (German)
-	const apps: AppItem[] = getActiveManaApps().map((app) => ({
-		name: app.name,
-		description: app.description.de,
-		longDescription: app.longDescription.de,
-		icon: app.icon,
-		color: app.color,
-		comingSoon: app.comingSoon,
-		status: app.status,
-	}));
-
-	const statusLabels = APP_STATUS_LABELS.de;
-	const labels = APP_SLIDER_LABELS.de;
-
-	function handleAppClick(_app: AppItem, _index: number) {
-		// Navigation handled by AppSlider component
-	}
-</script>
-
-<AppSlider
-	{apps}
-	title={labels.title}
-	isDark={false}
-	{statusLabels}
-	comingSoonLabel={labels.comingSoon}
-	openAppLabel={labels.openApp}
-	onAppClick={handleAppClick}
-/>
diff --git a/packages/shared-ui/.gitignore b/packages/shared-ui/.gitignore
new file mode 100644
index 000000000..4fa47c3ea
--- /dev/null
+++ b/packages/shared-ui/.gitignore
@@ -0,0 +1,10 @@
+# Storybook static-build (Output, kein Source)
+storybook-static/
+
+# Lost-Pixel-Artefakte pro Run — nur die Baseline wird versioniert
+lost-pixel/current/
+lost-pixel/diff/
+
+# Vite/Svelte caches
+.svelte-kit/
+.vite/
diff --git a/packages/shared-ui/README.md b/packages/shared-ui/README.md
new file mode 100644
index 000000000..1313f7bd9
--- /dev/null
+++ b/packages/shared-ui/README.md
@@ -0,0 +1,75 @@
+# `@mana/shared-ui`
+
+Vereins-UI-Komponenten — Svelte 5, strikte 12-Token-Disziplin nach
+[`mana/docs/THEMING.md`](../../docs/THEMING.md). Konsumiert von allen
+mana-e.V.-Apps (managarten, zitare, nutriphi, wordeck, manawald, …).
+
+> **Stand:** v1.0.0 (2026-05-21). Konsolidiert aus `shared-ui@0.1.x` +
+> `shared-ui-2@0.1.x`. Ehemalige Doppel-Bibliothek ist Geschichte —
+> eine UI-Foundation, ein Disziplin-Set, ein Verzeichnis.
+
+## Disziplin
+
+1. **Styles ausschließlich in `<style>`-Block.** Keine
+   Tailwind-Utility-Klassen für Farben (`bg-card`, `text-foreground`).
+   Layout-Klassen (`flex`, `gap-2`) sind okay, wenn der Konsument
+   Tailwind nutzt.
+2. **Nur die 12 Tokens** aus `THEMING.md`:
+   `background, foreground, surface, surface-hover, muted,
+   muted-foreground, border, primary, primary-foreground, error,
+   success, warning`. Kein 13. Token. Sub-Tokens werden via
+   `color-mix(in srgb, var(--color-surface) 95%, var(--color-foreground))`
+   oder Alpha-Modifier (`hsl(var(--color-primary) / 0.12)`) gelöst.
+3. **`hsl()`-Wrap immer.** `color: hsl(var(--color-foreground))`,
+   nie bare `var(--color-X)`.
+4. **Keine Hex-Farben** außer in der `--brand-*`-Schicht (für
+   App-Brand-Identität, NICHT für Theme-Tokens).
+5. **Phosphor-Icons sind raus.** `DynamicIcon` (40+ Inline-SVGs, 16×16,
+   currentColor, stroke 1.4-1.6) ersetzt die phosphor-svelte-Peer-Dep.
+   Komponenten die in v0.x noch `icon: Component` hatten, akzeptieren
+   in v1.0.0 nur noch `iconSvg: string`.
+6. **A11y-Pflichten:** ARIA-Labels für Icon-Buttons, semantisches HTML,
+   `:focus-visible` mit sichtbarem Outline, keyboard-Navigation.
+7. **Storybook + Lost-Pixel** für die Komponenten, die diese Disziplin
+   schon mit Stories+Baseline belegt haben (siehe
+   [`PORTING_PLAN.md`](./PORTING_PLAN.md), Status ✅ vs 🚧).
+
+## Installation
+
+```bash
+pnpm add @mana/shared-ui
+```
+
+Voraussetzung: 12 Tokens aus
+[`@mana/themes`](../themes/README.md) (oder eigene Variant) im
+`<html data-theme="...">`-Kontext aktiv.
+
+## Nutzung
+
+```svelte
+<script>
+  import { Button, Card, Badge } from '@mana/shared-ui/atoms';
+  import { PillTabGroup, PillDropdown } from '@mana/shared-ui/navigation';
+  import { Modal, ContextMenu, NotificationBar } from '@mana/shared-ui/organisms';
+  import { dragSource, dropTarget } from '@mana/shared-ui/dnd';
+</script>
+```
+
+## Tests
+
+```bash
+pnpm validate         # Disziplin-Validator (12-Token-Allowlist, hsl-wrap-Pflicht)
+pnpm storybook        # Storybook auf :6006
+pnpm test:visual      # Lost-Pixel-Run gegen Baseline
+pnpm test:visual:update  # Baseline aktualisieren (nach bewusster Änderung)
+```
+
+## Vorgeschichte
+
+v0.1.1 (alt, organisch über 3 Jahre gewachsen) und v0.1.0 als
+`shared-ui-2` (Greenfield-Refactor seit 2026-05-09) liefen 12 Tage
+parallel. Konsolidierung am 2026-05-21: alle 12 zusätzlich benötigten
+Komponenten portiert, AppSlider als tot identifiziert, alte v1
+vollständig durch v2-Code ersetzt, Paket-Name zurück auf
+`@mana/shared-ui`. Details: Phasen-Log in
+[`PORTING_PLAN.md`](./PORTING_PLAN.md).
diff --git a/packages/shared-ui/package.json b/packages/shared-ui/package.json
index bede3a2a3..d342ba234 100644
--- a/packages/shared-ui/package.json
+++ b/packages/shared-ui/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@mana/shared-ui",
-	"version": "0.1.0",
-	"private": true,
+	"version": "1.0.0",
+	"description": "Vereins-UI-Komponenten — Svelte 5, strikte 12-Token-Disziplin (siehe mana/docs/THEMING.md). Konsolidiert aus shared-ui v0.1.x + shared-ui-2 v0.1.x in 2026-05-21.",
 	"type": "module",
 	"sideEffects": [
 		"**/*.svelte",
@@ -21,6 +21,11 @@
 			"types": "./src/atoms/index.ts",
 			"default": "./src/atoms/index.ts"
 		},
+		"./navigation": {
+			"svelte": "./src/navigation/index.ts",
+			"types": "./src/navigation/index.ts",
+			"default": "./src/navigation/index.ts"
+		},
 		"./molecules": {
 			"svelte": "./src/molecules/index.ts",
 			"types": "./src/molecules/index.ts",
@@ -31,11 +36,21 @@
 			"types": "./src/organisms/index.ts",
 			"default": "./src/organisms/index.ts"
 		},
+		"./pages": {
+			"svelte": "./src/pages/index.ts",
+			"types": "./src/pages/index.ts",
+			"default": "./src/pages/index.ts"
+		},
 		"./dnd": {
 			"svelte": "./src/dnd/index.ts",
 			"types": "./src/dnd/index.ts",
 			"default": "./src/dnd/index.ts"
 		},
+		"./quick-input": {
+			"svelte": "./src/quick-input/index.ts",
+			"types": "./src/quick-input/index.ts",
+			"default": "./src/quick-input/index.ts"
+		},
 		"./toast": {
 			"svelte": "./src/toast/index.ts",
 			"types": "./src/toast/index.ts",
@@ -43,35 +58,38 @@
 		}
 	},
 	"scripts": {
-		"lint": "eslint .",
-		"test": "vitest run",
-		"test:watch": "vitest",
-		"test:coverage": "vitest run --coverage"
+		"storybook": "storybook dev -p 6006",
+		"build:storybook": "storybook build",
+		"test:visual": "lost-pixel",
+		"test:visual:update": "lost-pixel update",
+		"validate": "node scripts/validate-disziplin.mjs",
+		"test": "pnpm validate"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.0.0",
+		"@mana/shared-icons": "*"
 	},
-	"dependencies": {
-		"@mana/shared-branding": "workspace:*",
-		"@mana/shared-icons": "workspace:*",
-		"@mana/shared-theme": "workspace:*",
-		"@mana/shared-types": "workspace:*",
-		"d3-force": "^3.0.0",
-		"d3-selection": "^3.0.0",
-		"d3-transition": "^3.0.0",
-		"d3-zoom": "^3.0.0",
-		"date-fns": "^4.1.0"
+	"peerDependenciesMeta": {
+		"@mana/shared-icons": {
+			"optional": true
+		}
 	},
 	"devDependencies": {
-		"@sveltejs/vite-plugin-svelte": "^7.0.0",
-		"@testing-library/jest-dom": "^6.9.1",
-		"@testing-library/svelte": "^5.3.1",
-		"@types/d3-force": "^3.0.10",
-		"@types/d3-selection": "^3.0.11",
-		"@types/d3-transition": "^3.0.9",
-		"@types/d3-zoom": "^3.0.8",
-		"@vitest/coverage-v8": "^4.1.2",
-		"jsdom": "^29.0.1",
-		"vitest": "^4.1.2"
+		"@storybook/addon-essentials": "^8.4.0",
+		"@storybook/addon-interactions": "^8.4.0",
+		"@storybook/addon-svelte-csf": "^5.0.0",
+		"@storybook/svelte": "^8.4.0",
+		"@storybook/sveltekit": "^8.4.0",
+		"@storybook/test": "^8.4.0",
+		"@sveltejs/kit": "^2.8.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"lost-pixel": "^3.22.0",
+		"storybook": "^8.4.0",
+		"svelte": "^5.0.0",
+		"vite": "^5.4.0"
+	},
+	"publishConfig": {
+		"access": "restricted",
+		"registry": "https://npm.mana.how/"
 	}
 }
diff --git a/packages/shared-ui/scripts/validate-disziplin.mjs b/packages/shared-ui/scripts/validate-disziplin.mjs
new file mode 100644
index 000000000..4f06664f8
--- /dev/null
+++ b/packages/shared-ui/scripts/validate-disziplin.mjs
@@ -0,0 +1,160 @@
+#!/usr/bin/env node
+/**
+ * shared-ui-2 Disziplin-Validator
+ *
+ * Prüft jede .svelte-Datei in src/ gegen die Konvention aus README.md:
+ *
+ * 1. Keine Tailwind-Color-Utility-Klassen in `class=`
+ *    (`bg-card`, `text-foreground`, `border-primary`, ...)
+ * 2. Keine bare `var(--color-X)` — nur `hsl(var(--color-X))`
+ * 3. Tokens nur aus der 12-Token-Allowlist
+ * 4. Keine Hex-Farben (außer in `--brand-*`-Definitionen oder Kommentaren)
+ *
+ * Keine externen Dependencies. Pure Node.
+ */
+
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import { join, dirname, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const SRC = join(__dirname, '..', 'src');
+
+const ALLOWED_TOKENS = new Set([
+	'background',
+	'foreground',
+	'surface',
+	'surface-hover',
+	'muted',
+	'muted-foreground',
+	'border',
+	'primary',
+	'primary-foreground',
+	'error',
+	'success',
+	'warning',
+]);
+
+// Tailwind-Color-Utility-Patterns (in class= attribute or Tailwind arbitrary values)
+const FORBIDDEN_TAILWIND_COLOR_PATTERNS = [
+	/\b(?:bg|text|border|ring|outline|fill|stroke|from|via|to|placeholder|caret|accent|decoration|divide|shadow)-(?:foreground|background|surface|surface-hover|muted|muted-foreground|border|primary|primary-foreground|error|success|warning|card|popover|secondary|accent|input|ring|destructive)\b/g,
+];
+
+function walkSvelteFiles(dir) {
+	const out = [];
+	for (const entry of readdirSync(dir)) {
+		const p = join(dir, entry);
+		const s = statSync(p);
+		if (s.isDirectory()) out.push(...walkSvelteFiles(p));
+		else if (entry.endsWith('.svelte')) out.push(p);
+	}
+	return out;
+}
+
+function checkFile(file) {
+	const text = readFileSync(file, 'utf8');
+	const errors = [];
+
+	// Split into class attributes and style blocks for pattern-specific checks
+	const styleBlockRe = /<style[^>]*>([\s\S]*?)<\/style>/g;
+	const styleBlocks = [];
+	let m;
+	while ((m = styleBlockRe.exec(text)) !== null) {
+		styleBlocks.push({ start: m.index, end: m.index + m[0].length, content: m[1] });
+	}
+
+	// Check 1: bare var(--color-X) without hsl-wrap (anywhere in file)
+	const varColorRe = /var\(--color-([a-z-]+)\)/g;
+	let varM;
+	while ((varM = varColorRe.exec(text)) !== null) {
+		const idx = varM.index;
+		const before = text.slice(Math.max(0, idx - 4), idx);
+		// Allow bare var() inside --brand-* definitions and comments — coarse heuristic
+		const lineStart = text.lastIndexOf('\n', idx) + 1;
+		const lineEnd = text.indexOf('\n', idx);
+		const line = text.slice(lineStart, lineEnd === -1 ? text.length : lineEnd);
+		if (line.trim().startsWith('//') || line.trim().startsWith('*')) continue;
+		if (before !== 'hsl(') {
+			const lineNo = text.slice(0, idx).split('\n').length;
+			errors.push(`  L${lineNo}: bare var(--color-${varM[1]}) — wrap with hsl()`);
+		}
+	}
+
+	// Check 2: forbidden Tailwind-Color-Utility-Klassen (in class= attributes)
+	const classAttrRe = /\bclass(?:Name)?\s*=\s*"([^"]*)"|\bclass(?:Name)?\s*=\s*'([^']*)'/g;
+	let cm;
+	while ((cm = classAttrRe.exec(text)) !== null) {
+		const classValue = cm[1] || cm[2] || '';
+		for (const pattern of FORBIDDEN_TAILWIND_COLOR_PATTERNS) {
+			pattern.lastIndex = 0;
+			let pm;
+			while ((pm = pattern.exec(classValue)) !== null) {
+				const lineNo = text.slice(0, cm.index).split('\n').length;
+				errors.push(`  L${lineNo}: Tailwind-Color-Klasse "${pm[0]}" — Styles in <style>-Block`);
+			}
+		}
+	}
+
+	// Check 3: tokens outside the 12-set in --color-* definitions or var() refs
+	const tokenRefRe = /--color-([a-z-]+)/g;
+	let tm;
+	const seenViolations = new Set();
+	while ((tm = tokenRefRe.exec(text)) !== null) {
+		const token = tm[1];
+		if (!ALLOWED_TOKENS.has(token)) {
+			const key = `${token}@${tm.index}`;
+			if (seenViolations.has(key)) continue;
+			seenViolations.add(key);
+			const lineNo = text.slice(0, tm.index).split('\n').length;
+			errors.push(`  L${lineNo}: --color-${token} not in 12-token allowlist`);
+		}
+	}
+
+	// Check 4: hex colors in <style>-Blocks (excluding --brand-* lines)
+	for (const block of styleBlocks) {
+		const blockLines = block.content.split('\n');
+		blockLines.forEach((line, i) => {
+			// allow --brand-* hex declarations
+			if (/^\s*--brand-/.test(line)) return;
+			// allow url(...data:...) literals (not actual color values)
+			if (/data:image/.test(line)) return;
+			// allow comments
+			if (/^\s*\/\*/.test(line) || /^\s*\*/.test(line)) return;
+			const hexRe = /#[0-9a-fA-F]{3,8}\b/g;
+			let hm;
+			while ((hm = hexRe.exec(line)) !== null) {
+				// Compute rough line number in original file
+				const blockLineStart = text.slice(0, block.start).split('\n').length;
+				const lineNo = blockLineStart + i;
+				errors.push(`  L${lineNo}: hex color "${hm[0]}" — use 12 tokens or --brand-*`);
+			}
+		});
+	}
+
+	return errors;
+}
+
+let totalErrors = 0;
+const files = walkSvelteFiles(SRC);
+console.log(`Validating ${files.length} components...\n`);
+
+for (const file of files) {
+	const rel = relative(SRC, file);
+	const errors = checkFile(file);
+	if (errors.length === 0) {
+		console.log(`  ✓ ${rel}`);
+	} else {
+		console.log(`  ✗ ${rel}`);
+		errors.forEach((e) => console.log(e));
+		totalErrors += errors.length;
+	}
+}
+
+console.log();
+if (totalErrors > 0) {
+	console.error(`FAIL: ${totalErrors} disziplin violation(s)`);
+	process.exit(1);
+}
+console.log(
+	'PASS: all components pass disziplin check (12 tokens, hsl-wrap, no Tailwind color classes, no bare hex)'
+);
diff --git a/packages/shared-ui/src/actions/focusTrap.ts b/packages/shared-ui/src/actions/focusTrap.ts
deleted file mode 100644
index 4e86c96e4..000000000
--- a/packages/shared-ui/src/actions/focusTrap.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Svelte action that traps focus within an element.
- * Useful for modals and dialogs to prevent tabbing outside.
- */
-export function focusTrap(node: HTMLElement) {
-	const focusableSelectors = [
-		'a[href]',
-		'button:not([disabled])',
-		'input:not([disabled])',
-		'select:not([disabled])',
-		'textarea:not([disabled])',
-		'[tabindex]:not([tabindex="-1"])',
-	].join(', ');
-
-	let previouslyFocused: HTMLElement | null = null;
-
-	function getFocusableElements(): HTMLElement[] {
-		return Array.from(node.querySelectorAll<HTMLElement>(focusableSelectors)).filter(
-			(el) => !el.hasAttribute('disabled') && el.offsetParent !== null
-		);
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key !== 'Tab') return;
-
-		const focusable = getFocusableElements();
-		if (focusable.length === 0) return;
-
-		const first = focusable[0];
-		const last = focusable[focusable.length - 1];
-
-		if (e.shiftKey) {
-			if (document.activeElement === first) {
-				e.preventDefault();
-				last.focus();
-			}
-		} else {
-			if (document.activeElement === last) {
-				e.preventDefault();
-				first.focus();
-			}
-		}
-	}
-
-	// Save currently focused element and focus first focusable in trap
-	previouslyFocused = document.activeElement as HTMLElement;
-
-	// Use requestAnimationFrame to ensure the DOM is ready
-	requestAnimationFrame(() => {
-		const focusable = getFocusableElements();
-		if (focusable.length > 0) {
-			focusable[0].focus();
-		} else {
-			node.focus();
-		}
-	});
-
-	node.addEventListener('keydown', handleKeydown);
-
-	return {
-		destroy() {
-			node.removeEventListener('keydown', handleKeydown);
-			// Restore focus to previously focused element
-			if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
-				previouslyFocused.focus();
-			}
-		},
-	};
-}
diff --git a/packages/shared-ui/src/actions/index.ts b/packages/shared-ui/src/actions/index.ts
deleted file mode 100644
index bd71e8799..000000000
--- a/packages/shared-ui/src/actions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { focusTrap } from './focusTrap';
diff --git a/packages/shared-ui/src/atoms/Badge.stories.svelte b/packages/shared-ui/src/atoms/Badge.stories.svelte
new file mode 100644
index 000000000..085d8ddbb
--- /dev/null
+++ b/packages/shared-ui/src/atoms/Badge.stories.svelte
@@ -0,0 +1,47 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Badge from './Badge.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Badge',
+		component: Badge,
+		tags: ['autodocs'],
+		argTypes: {
+			variant: {
+				control: { type: 'select' },
+				options: ['neutral', 'primary', 'success', 'warning', 'error'],
+			},
+			size: {
+				control: { type: 'select' },
+				options: ['sm', 'md'],
+			},
+		},
+	});
+</script>
+
+<Story name="Default" args={{ variant: 'neutral' }}>
+	{#snippet children(args: any)}
+		<Badge {...args}>Entwurf</Badge>
+	{/snippet}
+</Story>
+
+<Story name="VariantSweep">
+	{#snippet children()}
+		<div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
+			<Badge variant="neutral">Neutral</Badge>
+			<Badge variant="primary">Primary</Badge>
+			<Badge variant="success">Erfolg</Badge>
+			<Badge variant="warning">Warnung</Badge>
+			<Badge variant="error">Fehler</Badge>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="SizeSweep">
+	{#snippet children()}
+		<div style="display:flex; gap:0.5rem; align-items:center;">
+			<Badge variant="primary" size="sm">Klein</Badge>
+			<Badge variant="primary" size="md">Mittel</Badge>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/atoms/Badge.svelte b/packages/shared-ui/src/atoms/Badge.svelte
index 3ce9537d7..86f39b789 100644
--- a/packages/shared-ui/src/atoms/Badge.svelte
+++ b/packages/shared-ui/src/atoms/Badge.svelte
@@ -1,37 +1,93 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
-	type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
-	type BadgeSize = 'sm' | 'md';
+	type Variant =
+		| 'neutral'
+		| 'primary'
+		| 'success'
+		| 'warning'
+		| 'error'
+		| 'default'
+		| 'info'
+		| 'danger';
+	type Size = 'sm' | 'md';
 
 	interface Props {
-		variant?: BadgeVariant;
-		size?: BadgeSize;
-		class?: string;
+		variant?: Variant;
+		size?: Size;
 		children?: Snippet;
 	}
 
-	let { variant = 'default', size = 'md', class: className = '', children }: Props = $props();
-
-	const variantClasses: Record<BadgeVariant, string> = {
-		default: 'bg-menu text-theme border-theme',
-		primary: 'bg-primary/20 text-primary border-primary/30',
-		success: 'bg-green-500/20 text-green-600 dark:text-green-400 border-green-500/30',
-		warning: 'bg-yellow-500/20 text-yellow-600 dark:text-yellow-400 border-yellow-500/30',
-		danger: 'bg-red-500/20 text-red-600 dark:text-red-400 border-red-500/30',
-		info: 'bg-blue-500/20 text-blue-600 dark:text-blue-400 border-blue-500/30',
-	};
-
-	const sizeClasses: Record<BadgeSize, string> = {
-		sm: 'px-1.5 py-0.5 text-xs',
-		md: 'px-2 py-1 text-sm',
-	};
-
-	const classes = $derived(
-		`inline-flex items-center rounded-full border font-medium ${variantClasses[variant]} ${sizeClasses[size]} ${className}`
-	);
+	let { variant = 'neutral', size = 'sm', children }: Props = $props();
 </script>
 
-<span class={classes}>
-	{@render children?.()}
+<span class="badge badge-{variant} badge-{size}">
+	{#if children}{@render children()}{/if}
 </span>
+
+<style>
+	.badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		border-radius: 9999px;
+		border: 1px solid transparent;
+		font-weight: 500;
+		white-space: nowrap;
+		font-family: inherit;
+	}
+
+	.badge-sm {
+		padding: 0.125rem 0.5rem;
+		font-size: 0.75rem;
+		line-height: 1.25;
+	}
+	.badge-md {
+		padding: 0.25rem 0.625rem;
+		font-size: 0.8125rem;
+		line-height: 1.25;
+	}
+
+	.badge-neutral {
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.badge-primary {
+		background: hsl(var(--color-primary) / 0.12);
+		color: hsl(var(--color-primary));
+		border-color: hsl(var(--color-primary) / 0.3);
+	}
+
+	.badge-success {
+		background: hsl(var(--color-success) / 0.12);
+		color: hsl(var(--color-success));
+		border-color: hsl(var(--color-success) / 0.3);
+	}
+
+	.badge-warning {
+		background: hsl(var(--color-warning) / 0.15);
+		color: hsl(var(--color-warning));
+		border-color: hsl(var(--color-warning) / 0.4);
+	}
+
+	.badge-error,
+	.badge-danger {
+		background: hsl(var(--color-error) / 0.12);
+		color: hsl(var(--color-error));
+		border-color: hsl(var(--color-error) / 0.3);
+	}
+
+	/* v0.1.x-Compat */
+	.badge-default {
+		background: hsl(var(--color-surface));
+		color: hsl(var(--color-muted-foreground));
+		border-color: hsl(var(--color-border));
+	}
+
+	.badge-info {
+		background: hsl(var(--color-primary) / 0.12);
+		color: hsl(var(--color-primary));
+		border-color: hsl(var(--color-primary) / 0.3);
+	}
+</style>
diff --git a/packages/shared-ui/src/atoms/Button.stories.svelte b/packages/shared-ui/src/atoms/Button.stories.svelte
new file mode 100644
index 000000000..1647aefaa
--- /dev/null
+++ b/packages/shared-ui/src/atoms/Button.stories.svelte
@@ -0,0 +1,77 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Button from './Button.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Button',
+		component: Button,
+		tags: ['autodocs'],
+		argTypes: {
+			variant: {
+				control: { type: 'select' },
+				options: ['primary', 'secondary', 'ghost', 'danger'],
+			},
+			size: {
+				control: { type: 'select' },
+				options: ['sm', 'md', 'lg'],
+			},
+		},
+	});
+</script>
+
+<Story name="Default" args={{ variant: 'secondary' }}>
+	{#snippet children(args: any)}
+		<Button {...args}>Speichern</Button>
+	{/snippet}
+</Story>
+
+<Story name="Primary" args={{ variant: 'primary' }}>
+	{#snippet children(args: any)}
+		<Button {...args}>Aktion ausführen</Button>
+	{/snippet}
+</Story>
+
+<Story name="Ghost" args={{ variant: 'ghost' }}>
+	{#snippet children(args: any)}
+		<Button {...args}>Abbrechen</Button>
+	{/snippet}
+</Story>
+
+<Story name="Danger" args={{ variant: 'danger' }}>
+	{#snippet children(args: any)}
+		<Button {...args}>Löschen</Button>
+	{/snippet}
+</Story>
+
+<Story name="Loading" args={{ variant: 'primary', loading: true }}>
+	{#snippet children(args: any)}
+		<Button {...args}>Speichern</Button>
+	{/snippet}
+</Story>
+
+<Story name="Disabled" args={{ variant: 'primary', disabled: true }}>
+	{#snippet children(args: any)}
+		<Button {...args}>Speichern</Button>
+	{/snippet}
+</Story>
+
+<Story name="VariantSweep">
+	{#snippet children()}
+		<div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
+			<Button variant="primary">Primary</Button>
+			<Button variant="secondary">Secondary</Button>
+			<Button variant="ghost">Ghost</Button>
+			<Button variant="danger">Danger</Button>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="SizeSweep">
+	{#snippet children()}
+		<div style="display:flex; gap:0.5rem; align-items:center;">
+			<Button variant="primary" size="sm">Klein</Button>
+			<Button variant="primary" size="md">Mittel</Button>
+			<Button variant="primary" size="lg">Groß</Button>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/atoms/Button.svelte b/packages/shared-ui/src/atoms/Button.svelte
index c18008fd1..40586c7b9 100644
--- a/packages/shared-ui/src/atoms/Button.svelte
+++ b/packages/shared-ui/src/atoms/Button.svelte
@@ -1,62 +1,190 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
-	type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline' | 'success';
-	type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+	type Variant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'default' | 'info';
+	type Size = 'sm' | 'md' | 'lg';
 
 	interface Props {
-		variant?: ButtonVariant;
-		size?: ButtonSize;
+		variant?: Variant;
+		size?: Size;
+		type?: 'button' | 'submit' | 'reset';
 		disabled?: boolean;
 		loading?: boolean;
-		class?: string;
+		fullWidth?: boolean;
+		ariaLabel?: string;
 		onclick?: (e: MouseEvent) => void;
-		type?: 'button' | 'submit' | 'reset';
 		children?: Snippet;
+		leading?: Snippet;
+		trailing?: Snippet;
+		/** v0.1.x-Compat. */
+		class?: string;
 	}
 
 	let {
-		variant = 'primary',
+		variant = 'secondary',
 		size = 'md',
+		type = 'button',
 		disabled = false,
 		loading = false,
+		fullWidth = false,
+		ariaLabel,
 		class: className = '',
 		onclick,
-		type = 'button',
 		children,
+		leading,
+		trailing,
 	}: Props = $props();
-
-	const variantClasses: Record<ButtonVariant, string> = {
-		primary: 'bg-primary text-white hover:bg-primary/90 border-transparent',
-		secondary: 'bg-menu text-theme hover:bg-menu-hover border-theme',
-		ghost: 'bg-transparent text-theme hover:bg-menu-hover border-transparent',
-		danger: 'bg-red-600 text-white hover:bg-red-700 border-transparent',
-		outline: 'bg-transparent text-primary border-primary hover:bg-primary/10',
-		success: 'bg-green-600 text-white hover:bg-green-700 border-transparent',
-	};
-
-	const sizeClasses: Record<ButtonSize, string> = {
-		sm: 'px-3 py-1.5 text-sm',
-		md: 'px-4 py-2 text-base',
-		lg: 'px-6 py-3 text-lg',
-		xl: 'px-8 py-4 text-xl',
-	};
-
-	const classes = $derived(
-		`inline-flex items-center justify-center gap-2 rounded-lg border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed ${variantClasses[variant]} ${sizeClasses[size]} ${className}`
-	);
 </script>
 
-<button {type} class={classes} disabled={disabled || loading} {onclick}>
-	{#if loading}
-		<svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
-			<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-			<path
-				class="opacity-75"
-				fill="currentColor"
-				d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-			/>
-		</svg>
+<button
+	{type}
+	class="btn btn-{variant} btn-{size} {className}"
+	class:full={fullWidth}
+	class:loading
+	disabled={disabled || loading}
+	aria-label={ariaLabel}
+	aria-busy={loading || undefined}
+	{onclick}
+>
+	{#if leading}
+		<span class="leading">{@render leading()}</span>
+	{/if}
+	{#if loading}
+		<span class="spinner" aria-hidden="true"></span>
+	{/if}
+	{#if children}
+		<span class="label">{@render children()}</span>
+	{/if}
+	{#if trailing}
+		<span class="trailing">{@render trailing()}</span>
 	{/if}
-	{@render children?.()}
 </button>
+
+<style>
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		border-radius: 0.5rem;
+		border: 1px solid transparent;
+		font-weight: 500;
+		cursor: pointer;
+		transition:
+			background-color 0.15s ease,
+			border-color 0.15s ease,
+			color 0.15s ease;
+		font-family: inherit;
+	}
+
+	.btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.btn:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
+	}
+
+	.btn.full {
+		width: 100%;
+	}
+
+	/* sizes */
+	.btn-sm {
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+	}
+	.btn-md {
+		padding: 0.5rem 1rem;
+		font-size: 0.9375rem;
+	}
+	.btn-lg {
+		padding: 0.75rem 1.25rem;
+		font-size: 1rem;
+	}
+
+	/* primary */
+	.btn-primary {
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
+	}
+	.btn-primary:not(:disabled):hover {
+		background: hsl(var(--color-primary) / 0.9);
+	}
+
+	/* secondary */
+	.btn-secondary {
+		background: hsl(var(--color-surface));
+		color: hsl(var(--color-foreground));
+		border-color: hsl(var(--color-border));
+	}
+	.btn-secondary:not(:disabled):hover {
+		background: hsl(var(--color-surface-hover));
+	}
+
+	/* ghost */
+	.btn-ghost {
+		background: transparent;
+		color: hsl(var(--color-foreground));
+	}
+	.btn-ghost:not(:disabled):hover {
+		background: hsl(var(--color-surface-hover));
+	}
+
+	/* danger */
+	.btn-danger {
+		background: hsl(var(--color-error) / 0.1);
+		color: hsl(var(--color-error));
+		border-color: hsl(var(--color-error) / 0.3);
+	}
+	.btn-danger:not(:disabled):hover {
+		background: hsl(var(--color-error) / 0.15);
+		border-color: hsl(var(--color-error) / 0.5);
+	}
+
+	/* v0.1.x-Compat: 'default' = secondary, 'info' = ghost mit primary-Akzent */
+	.btn-default {
+		background: hsl(var(--color-surface));
+		color: hsl(var(--color-foreground));
+		border-color: hsl(var(--color-border));
+	}
+	.btn-default:not(:disabled):hover {
+		background: hsl(var(--color-surface-hover));
+	}
+	.btn-info {
+		background: hsl(var(--color-primary) / 0.1);
+		color: hsl(var(--color-primary));
+		border-color: hsl(var(--color-primary) / 0.3);
+	}
+	.btn-info:not(:disabled):hover {
+		background: hsl(var(--color-primary) / 0.15);
+	}
+
+	/* spinner */
+	.spinner {
+		width: 0.875em;
+		height: 0.875em;
+		border: 2px solid currentColor;
+		border-right-color: transparent;
+		border-radius: 50%;
+		animation: spin 0.6s linear infinite;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.btn {
+			transition: none;
+		}
+		.spinner {
+			animation: none;
+			border-right-color: currentColor;
+		}
+	}
+</style>
diff --git a/packages/shared-ui/src/atoms/Card.stories.svelte b/packages/shared-ui/src/atoms/Card.stories.svelte
new file mode 100644
index 000000000..ed8f306ef
--- /dev/null
+++ b/packages/shared-ui/src/atoms/Card.stories.svelte
@@ -0,0 +1,94 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Card from './Card.svelte';
+	import Badge from './Badge.svelte';
+	import Button from './Button.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Card',
+		component: Card,
+		tags: ['autodocs'],
+		argTypes: {
+			padding: {
+				control: { type: 'select' },
+				options: ['none', 'sm', 'md', 'lg'],
+			},
+			interactive: { control: 'boolean' },
+		},
+	});
+</script>
+
+<Story name="Default" args={{ padding: 'md' }}>
+	{#snippet children(args: any)}
+		<div style="width: 320px;">
+			<Card {...args}>
+				<h3 style="margin:0 0 0.5rem;">Karten-Titel</h3>
+				<p style="margin:0; color: hsl(var(--color-muted-foreground));">
+					Beschreibender Sekundärtext, ungefähr eine Zeile lang.
+				</p>
+			</Card>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithBadge" args={{ padding: 'md' }}>
+	{#snippet children(args: any)}
+		<div style="width: 320px;">
+			<Card {...args}>
+				<div style="display:flex; gap:0.5rem; align-items:center; margin-bottom:0.5rem;">
+					<Badge variant="primary">Neu</Badge>
+					<Badge variant="warning">3 ausstehend</Badge>
+				</div>
+				<h3 style="margin:0 0 0.5rem;">Mit Badges</h3>
+				<p style="margin:0; color: hsl(var(--color-muted-foreground));">
+					Badges sitzen oben links.
+				</p>
+			</Card>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Interactive" args={{ padding: 'md', interactive: true }}>
+	{#snippet children(args: any)}
+		<div style="width: 320px;">
+			<Card {...args} ariaLabel="Klick mich">
+				<h3 style="margin:0 0 0.5rem;">Klickbare Karte</h3>
+				<p style="margin:0; color: hsl(var(--color-muted-foreground));">
+					Hover/Focus zeigt Primary-Border.
+				</p>
+			</Card>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithActions" args={{ padding: 'md' }}>
+	{#snippet children(args: any)}
+		<div style="width: 320px;">
+			<Card {...args}>
+				<h3 style="margin:0 0 0.5rem;">Karte mit Aktionen</h3>
+				<p style="margin:0 0 1rem; color: hsl(var(--color-muted-foreground));">
+					Action-Row am Ende.
+				</p>
+				<div style="display:flex; gap:0.5rem; justify-content:flex-end;">
+					<Button variant="ghost" size="sm">Abbrechen</Button>
+					<Button variant="primary" size="sm">Speichern</Button>
+				</div>
+			</Card>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="PaddingSweep">
+	{#snippet children()}
+		<div style="display:flex; flex-direction:column; gap:1rem; width: 280px;">
+			<Card padding="none">
+				<div style="padding:0.25rem; background: hsl(var(--color-muted));">
+					padding=none (kein inneres Spacing)
+				</div>
+			</Card>
+			<Card padding="sm">padding=sm</Card>
+			<Card padding="md">padding=md</Card>
+			<Card padding="lg">padding=lg</Card>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/atoms/Card.svelte b/packages/shared-ui/src/atoms/Card.svelte
index 0b07d31c2..815d0f8ff 100644
--- a/packages/shared-ui/src/atoms/Card.svelte
+++ b/packages/shared-ui/src/atoms/Card.svelte
@@ -1,189 +1,88 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
-	type CardVariant = 'elevated' | 'outlined' | 'ghost' | 'filled';
-	type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+	type Padding = 'none' | 'sm' | 'md' | 'lg';
 
 	interface Props {
-		/** Visual variant of the card */
-		variant?: CardVariant;
-		/** Padding size */
-		padding?: CardPadding;
-		/** Make card interactive (adds hover effects) */
+		padding?: Padding;
 		interactive?: boolean;
-		/** Makes card take full width */
-		fullWidth?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-		/** Click handler */
+		ariaLabel?: string;
 		onclick?: (e: MouseEvent) => void;
-		/** Header slot */
-		header?: Snippet;
-		/** Footer slot */
-		footer?: Snippet;
-		/** Main content */
-		children: Snippet;
+		children?: Snippet;
+		/** v0.1.x-Compat: zusätzliche CSS-Klassen auf dem Wrapper. */
+		class?: string;
 	}
 
 	let {
-		variant = 'elevated',
 		padding = 'md',
 		interactive = false,
-		fullWidth = false,
-		class: className = '',
+		ariaLabel,
 		onclick,
-		header,
-		footer,
 		children,
+		class: className = '',
 	}: Props = $props();
-
-	// Determine if card should be interactive
-	const isInteractive = $derived(interactive || !!onclick);
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<div
-	class="card card--{variant} card--padding-{padding} {isInteractive
-		? 'card--interactive'
-		: ''} {fullWidth ? 'card--full-width' : ''} {className}"
-	{onclick}
-	role={isInteractive ? 'button' : undefined}
-	tabindex={isInteractive ? 0 : undefined}
-	onkeydown={(e) => {
-		if (isInteractive && onclick && (e.key === 'Enter' || e.key === ' ')) {
-			e.preventDefault();
-			onclick(e as unknown as MouseEvent);
-		}
-	}}
->
-	{#if header}
-		<div class="card__header">
-			{@render header()}
-		</div>
-	{/if}
-
-	<div class="card__body">
-		{@render children()}
+{#if interactive}
+	<button
+		class="card card-{padding} interactive {className}"
+		aria-label={ariaLabel}
+		{onclick}
+		type="button"
+	>
+		{#if children}{@render children()}{/if}
+	</button>
+{:else}
+	<div class="card card-{padding} {className}">
+		{#if children}{@render children()}{/if}
 	</div>
-
-	{#if footer}
-		<div class="card__footer">
-			{@render footer()}
-		</div>
-	{/if}
-</div>
+{/if}
 
 <style>
 	.card {
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.75rem;
-		overflow: hidden;
-		transition: all 0.15s ease;
+		color: hsl(var(--color-foreground));
+		font-family: inherit;
+		text-align: inherit;
+		width: 100%;
+		display: block;
 	}
 
-	/* Variants */
-	.card--elevated {
-		background-color: hsl(var(--color-surface-elevated));
-		border: 1px solid hsl(var(--color-border));
-		box-shadow:
-			0 1px 3px 0 rgba(0, 0, 0, 0.1),
-			0 1px 2px -1px rgba(0, 0, 0, 0.1);
-	}
-
-	.card--outlined {
-		background-color: hsl(var(--color-surface));
-		border: 1px solid hsl(var(--color-border));
-	}
-
-	.card--ghost {
-		background-color: transparent;
-	}
-
-	.card--filled {
-		background-color: hsl(var(--color-muted));
-	}
-
-	/* Padding */
-	.card--padding-none .card__body {
+	.card-none {
 		padding: 0;
 	}
-
-	.card--padding-sm .card__body {
+	.card-sm {
 		padding: 0.75rem;
 	}
-
-	.card--padding-md .card__body {
+	.card-md {
 		padding: 1rem;
 	}
-
-	.card--padding-lg .card__body {
+	.card-lg {
 		padding: 1.5rem;
 	}
 
-	/* Full width */
-	.card--full-width {
-		width: 100%;
-	}
-
-	/* Interactive */
-	.card--interactive {
+	button.card.interactive {
 		cursor: pointer;
+		transition:
+			background-color 0.15s ease,
+			border-color 0.15s ease;
 	}
 
-	.card--interactive:hover {
-		border-color: hsl(var(--color-border-strong));
+	button.card.interactive:hover {
+		background: hsl(var(--color-surface-hover));
+		border-color: hsl(var(--color-primary) / 0.3);
 	}
 
-	.card--elevated.card--interactive:hover {
-		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -2px rgba(0, 0, 0, 0.1);
-		transform: translateY(-1px);
-	}
-
-	.card--interactive:focus-visible {
-		outline: 2px solid hsl(var(--color-ring));
+	button.card.interactive:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
 		outline-offset: 2px;
 	}
 
-	/* Header */
-	.card__header {
-		padding: 1rem;
-		border-bottom: 1px solid hsl(var(--color-border));
-	}
-
-	.card--padding-sm .card__header {
-		padding: 0.75rem;
-	}
-
-	.card--padding-lg .card__header {
-		padding: 1.25rem 1.5rem;
-	}
-
-	.card--padding-none .card__header {
-		padding: 0;
-		border-bottom: none;
-	}
-
-	/* Body - padding applied via variant classes above */
-
-	/* Footer */
-	.card__footer {
-		padding: 1rem;
-		border-top: 1px solid hsl(var(--color-border));
-		background-color: hsl(var(--color-muted) / 0.3);
-	}
-
-	.card--padding-sm .card__footer {
-		padding: 0.75rem;
-	}
-
-	.card--padding-lg .card__footer {
-		padding: 1.25rem 1.5rem;
-	}
-
-	.card--padding-none .card__footer {
-		padding: 0;
-		border-top: none;
-		background-color: transparent;
+	@media (prefers-reduced-motion: reduce) {
+		button.card.interactive {
+			transition: none;
+		}
 	}
 </style>
diff --git a/packages/shared-ui/src/atoms/DynamicIcon.stories.svelte b/packages/shared-ui/src/atoms/DynamicIcon.stories.svelte
new file mode 100644
index 000000000..0ed7f1900
--- /dev/null
+++ b/packages/shared-ui/src/atoms/DynamicIcon.stories.svelte
@@ -0,0 +1,112 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DynamicIcon from './DynamicIcon.svelte';
+
+	const ALL_ICONS = [
+		'check',
+		'x',
+		'plus',
+		'minus',
+		'search',
+		'user',
+		'users',
+		'gear',
+		'home',
+		'tag',
+		'heart',
+		'star',
+		'caret-down',
+		'caret-up',
+		'caret-left',
+		'caret-right',
+		'arrow-left',
+		'arrow-right',
+		'info',
+		'warning',
+		'error',
+		'success',
+		'trash',
+		'edit',
+		'eye',
+		'eye-off',
+		'calendar',
+		'clock',
+		'mail',
+		'link',
+		'external',
+	];
+
+	const { Story } = defineMeta({
+		title: 'Atoms/DynamicIcon',
+		component: DynamicIcon,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<DynamicIcon name="check" />
+	{/snippet}
+</Story>
+
+<Story name="SizeSweep">
+	{#snippet children()}
+		<div style="display:flex; gap:1rem; align-items:center;">
+			<DynamicIcon name="star" size="xs" />
+			<DynamicIcon name="star" size="sm" />
+			<DynamicIcon name="star" size="md" />
+			<DynamicIcon name="star" size="lg" />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="AllIcons">
+	{#snippet children()}
+		<div
+			style="display:grid; grid-template-columns:repeat(8, minmax(4rem, 1fr)); gap:0.75rem; max-width:48rem;"
+		>
+			{#each ALL_ICONS as iconName (iconName)}
+				<div
+					style="display:flex; flex-direction:column; align-items:center; gap:0.25rem; padding:0.5rem; border:1px solid hsl(var(--color-border)); border-radius:0.375rem;"
+				>
+					<DynamicIcon name={iconName as any} size="md" />
+					<span style="font-size:0.625rem; color:hsl(var(--color-muted-foreground));"
+						>{iconName}</span
+					>
+				</div>
+			{/each}
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="ColoredContext">
+	{#snippet children()}
+		<div style="display:flex; gap:1rem; align-items:center; font-size:0.875rem;">
+			<span
+				style="color:hsl(var(--color-success)); display:inline-flex; gap:0.375rem; align-items:center;"
+			>
+				<DynamicIcon name="success" /> erledigt
+			</span>
+			<span
+				style="color:hsl(var(--color-warning)); display:inline-flex; gap:0.375rem; align-items:center;"
+			>
+				<DynamicIcon name="warning" /> warnung
+			</span>
+			<span
+				style="color:hsl(var(--color-error)); display:inline-flex; gap:0.375rem; align-items:center;"
+			>
+				<DynamicIcon name="error" /> fehler
+			</span>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="CustomSvg">
+	{#snippet children()}
+		<DynamicIcon
+			ariaLabel="Custom Icon"
+			iconSvg="<circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="8" r="2" fill="currentColor"/>"
+			size="lg"
+		/>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/atoms/DynamicIcon.svelte b/packages/shared-ui/src/atoms/DynamicIcon.svelte
index 4679fdd36..646044ebc 100644
--- a/packages/shared-ui/src/atoms/DynamicIcon.svelte
+++ b/packages/shared-ui/src/atoms/DynamicIcon.svelte
@@ -1,26 +1,200 @@
-<!--
-  DynamicIcon — renders a Phosphor icon by string name.
-  Uses the curated icon registry from @mana/shared-icons.
-
-  Usage:
-    <DynamicIcon name="coffee" size={24} weight="bold" />
--->
 <script lang="ts">
-	import { getIconComponent } from '@mana/shared-icons';
+	/**
+	 * DynamicIcon — kleine Inline-SVG-Map für die meistgenutzten UI-Icons.
+	 *
+	 * Bewusst KEIN phosphor-svelte-Peer-Dep — shared-ui-2 hält die
+	 * Konsumenten-Bundle klein. Konsumenten die eigene Icons brauchen,
+	 * passen sie als `iconSvg`-String oder direkt als child-Snippet an
+	 * Komponenten wie Pill / Button / TagChip.
+	 *
+	 * Icons sind als Inline-Strings im 16×16-viewBox, `currentColor`,
+	 * `stroke-width: 1.6`. Das passt zu den Pill/Badge/Button-Größen
+	 * und folgt dem Mana-Stroke-basierten Symbol-Vokabular (siehe
+	 * mana/docs/SYMBOLS.md — gleicher Pattern, nur generischere
+	 * Funktional-Icons).
+	 */
+
+	type Size = 'xs' | 'sm' | 'md' | 'lg';
 
 	interface Props {
-		name: string;
-		size?: number;
+		name?: IconName | string;
+		iconSvg?: string;
+		/** Symbolische Größe oder Pixel-Wert (v0.1.x-Compat). */
+		size?: Size | number;
+		ariaLabel?: string;
+		/** v0.1.x-Compat: Phosphor-Property, heute ignoriert (alle Icons sind outline-only mit Fill-Varianten als eigene Namen). */
 		weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
+		/** v0.1.x-Compat: Custom-Class auf SVG. */
 		class?: string;
+		/** v0.1.x-Compat: Direkte Farbe (heute über CSS-color steuerbar; Prop wird ignoriert wenn leer). */
 		color?: string;
 	}
 
-	let { name, size = 24, weight = 'regular', class: className = '', color }: Props = $props();
+	let { name, iconSvg, size = 'md', ariaLabel, class: className = '', color }: Props = $props();
 
-	let IconComponent = $derived(getIconComponent(name));
+	const normalizedSize = $derived.by<Size>(() => {
+		if (typeof size === 'number') {
+			if (size <= 12) return 'xs';
+			if (size <= 14) return 'sm';
+			if (size <= 20) return 'md';
+			return 'lg';
+		}
+		return size;
+	});
+
+	type IconName =
+		| 'check'
+		| 'x'
+		| 'plus'
+		| 'minus'
+		| 'search'
+		| 'user'
+		| 'users'
+		| 'gear'
+		| 'home'
+		| 'tag'
+		| 'heart'
+		| 'star'
+		| 'caret-down'
+		| 'caret-up'
+		| 'caret-left'
+		| 'caret-right'
+		| 'arrow-left'
+		| 'arrow-right'
+		| 'info'
+		| 'warning'
+		| 'error'
+		| 'success'
+		| 'trash'
+		| 'edit'
+		| 'eye'
+		| 'eye-off'
+		| 'calendar'
+		| 'clock'
+		| 'mail'
+		| 'link'
+		| 'external'
+		| 'pin'
+		| 'pin-fill'
+		| 'heart-fill'
+		| 'star-fill'
+		| 'bell'
+		| 'bell-fill'
+		| 'bell-slash'
+		| 'archive'
+		| 'folder-open';
+
+	const ICONS: Record<IconName, string> = {
+		check:
+			'<path d="M3 8l3.5 3.5L13 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>',
+		x: '<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+		plus: '<path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+		minus: '<path d="M3 8h10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+		search:
+			'<circle cx="7" cy="7" r="4" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M10 10l3 3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+		user: '<circle cx="8" cy="6" r="3" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M3 14c0-2.5 2.2-4 5-4s5 1.5 5 4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>',
+		users:
+			'<circle cx="6" cy="6" r="2.5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="11.5" cy="7" r="2" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M2 13.5c0-2 1.7-3.5 4-3.5s4 1.5 4 3.5M14.5 13c0-1.5-1.2-2.5-3-2.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>',
+		gear: '<circle cx="8" cy="8" r="2" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M8 1.5v2M8 12.5v2M14.5 8h-2M3.5 8h-2M12.6 3.4l-1.4 1.4M4.8 11.2l-1.4 1.4M12.6 12.6l-1.4-1.4M4.8 4.8l-1.4-1.4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>',
+		home: '<path d="M2 7.5L8 2l6 5.5V14H2.5V7.5z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>',
+		tag: '<path d="M8 1.5h5.5V7L7 13.5l-5.5-5.5L8 1.5z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><circle cx="11" cy="5" r="0.9" fill="currentColor"/>',
+		heart:
+			'<path d="M8 13.5s-5-3-5-7a3 3 0 015-2 3 3 0 015 2c0 4-5 7-5 7z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>',
+		star: '<path d="M8 1.5l1.9 4 4.4.6-3.2 3 .8 4.3L8 11.4l-3.9 2 .8-4.3-3.2-3 4.4-.6L8 1.5z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>',
+		'caret-down':
+			'<path d="M3 6l5 5 5-5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>',
+		'caret-up':
+			'<path d="M3 10l5-5 5 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>',
+		'caret-left':
+			'<path d="M10 3l-5 5 5 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>',
+		'caret-right':
+			'<path d="M6 3l5 5-5 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>',
+		'arrow-left':
+			'<path d="M13 8H3M7 4l-4 4 4 4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>',
+		'arrow-right':
+			'<path d="M3 8h10M9 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>',
+		info: '<circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M8 7v4M8 5v0.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+		warning:
+			'<path d="M8 1.5L14.5 13.5h-13L8 1.5z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 6.5v3.5M8 11.5v0.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+		error:
+			'<circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M8 4.5v4M8 11v0.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+		success:
+			'<circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M5 8l2 2 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>',
+		trash:
+			'<path d="M3 4.5h10M5.5 4.5V3a1 1 0 011-1h3a1 1 0 011 1v1.5M4.5 4.5v9.5h7V4.5M7 7v5M9 7v5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>',
+		edit: '<path d="M11 2.5l2.5 2.5L5 13.5H2.5V11L11 2.5z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>',
+		eye: '<path d="M1.5 8s2.5-4.5 6.5-4.5S14.5 8 14.5 8s-2.5 4.5-6.5 4.5S1.5 8 1.5 8z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><circle cx="8" cy="8" r="2" fill="none" stroke="currentColor" stroke-width="1.4"/>',
+		'eye-off':
+			'<path d="M2 2l12 12M3 5C2 6.5 1.5 8 1.5 8s2.5 4.5 6.5 4.5c1.2 0 2.2-.4 3.1-.9M6.5 4c.5-.2 1-.3 1.5-.3 4 0 6.5 4.3 6.5 4.3s-.6 1-1.7 2.2" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>',
+		calendar:
+			'<rect x="2.5" y="3.5" width="11" height="10" rx="1" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M2.5 6.5h11M5.5 2v3M10.5 2v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>',
+		clock:
+			'<circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M8 4.5V8l2.5 2" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>',
+		mail: '<rect x="2" y="3.5" width="12" height="9" rx="1" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M2 4.5l6 4 6-4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>',
+		link: '<path d="M7 9l2-2M9 4l1-1a3 3 0 014.2 4.2L13 8.5M7 12l-1 1a3 3 0 01-4.2-4.2L3 7.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>',
+		external:
+			'<path d="M9 2.5h4.5V7M13.5 2.5L7.5 8.5M11 9v4.5H2.5V5H7" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>',
+		pin: '<path d="M10 1.5l4.5 4.5-3 1-2 4-1.5-1.5-3 3v-3l3-3-1.5-1.5 4-2 1.5-1.5z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>',
+		'pin-fill':
+			'<path d="M10 1.5l4.5 4.5-3 1-2 4-1.5-1.5-3 3v-3l3-3-1.5-1.5 4-2 1.5-1.5z" fill="currentColor" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>',
+		'heart-fill':
+			'<path d="M8 13.5s-5-3-5-7a3 3 0 015-2 3 3 0 015 2c0 4-5 7-5 7z" fill="currentColor" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>',
+		'star-fill':
+			'<path d="M8 1.5l1.9 4 4.4.6-3.2 3 .8 4.3L8 11.4l-3.9 2 .8-4.3-3.2-3 4.4-.6L8 1.5z" fill="currentColor" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>',
+		bell: '<path d="M8 2v1M4.5 6a3.5 3.5 0 117 0c0 3 1 4 1.5 5h-10c.5-1 1.5-2 1.5-5zM6.5 13a1.5 1.5 0 003 0" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>',
+		'bell-fill':
+			'<path d="M4.5 6a3.5 3.5 0 117 0c0 3 1 4 1.5 5h-10c.5-1 1.5-2 1.5-5z" fill="currentColor" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 2v1M6.5 13a1.5 1.5 0 003 0" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>',
+		'bell-slash':
+			'<path d="M2 2l12 12M4.5 6a3.5 3.5 0 016-2.5M11.5 6c0 3 1 4 1.5 5H6M3 11h.5c.5-1 1-2 1-5M6.5 13a1.5 1.5 0 003 0" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>',
+		archive:
+			'<path d="M2 3.5h12v3H2zM3 6.5v8h10v-8M6 9h4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>',
+		'folder-open':
+			'<path d="M2 5.5V13a1 1 0 001 1h10.5l1.5-6H4.5L3 13" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M2 5.5V4a1 1 0 011-1h3l1.5 1.5H13a1 1 0 011 1V8" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>',
+	};
+
+	const resolvedSvg = $derived.by(() => {
+		if (iconSvg) return iconSvg;
+		if (name && (ICONS as Record<string, string>)[name])
+			return (ICONS as Record<string, string>)[name];
+		// Fallback: Frage-Markierung
+		return '<path d="M5 6a3 3 0 016 0c0 1.5-1.5 2-2 2.5v1M8 12.5v0.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>';
+	});
 </script>
 
-{#if IconComponent}
-	<IconComponent {size} {weight} class={className} {color} />
-{/if}
+<svg
+	class="icon size-{normalizedSize} {className}"
+	style:color={color ?? undefined}
+	viewBox="0 0 16 16"
+	xmlns="http://www.w3.org/2000/svg"
+	role={ariaLabel ? 'img' : undefined}
+	aria-label={ariaLabel}
+	aria-hidden={ariaLabel ? undefined : 'true'}
+>
+	{@html resolvedSvg}
+</svg>
+
+<style>
+	.icon {
+		display: inline-block;
+		flex-shrink: 0;
+		color: currentColor;
+		vertical-align: middle;
+	}
+
+	.size-xs {
+		width: 0.75rem;
+		height: 0.75rem;
+	}
+	.size-sm {
+		width: 0.875rem;
+		height: 0.875rem;
+	}
+	.size-md {
+		width: 1rem;
+		height: 1rem;
+	}
+	.size-lg {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+</style>
diff --git a/packages/shared-ui/src/atoms/Skeleton.stories.svelte b/packages/shared-ui/src/atoms/Skeleton.stories.svelte
new file mode 100644
index 000000000..430217f1a
--- /dev/null
+++ b/packages/shared-ui/src/atoms/Skeleton.stories.svelte
@@ -0,0 +1,58 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Skeleton from './Skeleton.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Skeleton',
+		component: Skeleton,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<Skeleton width="240px" height="0.875rem" />
+	{/snippet}
+</Story>
+
+<Story name="ShapeSweep">
+	{#snippet children()}
+		<div style="display:flex; flex-direction:column; gap:1rem; width: 280px;">
+			<Skeleton shape="rect" width="100%" height="2.5rem" />
+			<Skeleton shape="line" width="80%" />
+			<Skeleton shape="circle" height="3rem" />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="ListLoading">
+	{#snippet children()}
+		<div style="width: 280px;">
+			<Skeleton shape="line" count={5} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="CardSkeleton">
+	{#snippet children()}
+		<div style="width: 320px;">
+			<Skeleton shape="card" />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="ListWithAvatar">
+	{#snippet children()}
+		<div style="display:flex; flex-direction:column; gap:0.75rem; width: 320px;">
+			{#each Array(3) as _, i (i)}
+				<div style="display:flex; gap:0.75rem; align-items:center;">
+					<Skeleton shape="circle" height="2.5rem" />
+					<div style="flex:1; display:flex; flex-direction:column; gap:0.375rem;">
+						<Skeleton shape="line" width="60%" />
+						<Skeleton shape="line" width="100%" />
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/atoms/Skeleton.svelte b/packages/shared-ui/src/atoms/Skeleton.svelte
new file mode 100644
index 000000000..4fe0cbc03
--- /dev/null
+++ b/packages/shared-ui/src/atoms/Skeleton.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+	type Shape = 'rect' | 'line' | 'circle' | 'card';
+
+	interface Props {
+		shape?: Shape;
+		width?: string;
+		height?: string;
+		count?: number;
+		ariaLabel?: string;
+	}
+
+	let { shape = 'rect', width, height, count = 1, ariaLabel = 'Lade Inhalt …' }: Props = $props();
+</script>
+
+{#if shape === 'card'}
+	<div
+		class="skeleton-card"
+		style:width
+		style:height
+		role="status"
+		aria-busy="true"
+		aria-label={ariaLabel}
+	>
+		<div class="skeleton shape-line" style:width="40%"></div>
+		<div class="skeleton shape-line" style:width="100%"></div>
+		<div class="skeleton shape-line" style:width="80%"></div>
+	</div>
+{:else if count > 1}
+	<div role="status" aria-busy="true" aria-label={ariaLabel} class="skeleton-stack">
+		{#each Array(count) as _, i (i)}
+			<div class="skeleton shape-{shape}" style:width style:height></div>
+		{/each}
+	</div>
+{:else}
+	<div
+		class="skeleton shape-{shape}"
+		style:width
+		style:height
+		role="status"
+		aria-busy="true"
+		aria-label={ariaLabel}
+	></div>
+{/if}
+
+<style>
+	.skeleton {
+		background: hsl(var(--color-muted));
+		position: relative;
+		overflow: hidden;
+	}
+
+	.skeleton::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(90deg, transparent, hsl(var(--color-surface) / 0.6), transparent);
+		animation: shimmer 1.6s linear infinite;
+	}
+
+	.shape-rect {
+		border-radius: 0.375rem;
+		min-height: 1rem;
+	}
+
+	.shape-line {
+		border-radius: 0.25rem;
+		height: 0.875rem;
+	}
+
+	.shape-circle {
+		border-radius: 9999px;
+		aspect-ratio: 1;
+		min-height: 2rem;
+	}
+
+	.skeleton-card {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding: 1rem;
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.75rem;
+	}
+
+	.skeleton-stack {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.skeleton-stack > .skeleton {
+		min-height: 0.875rem;
+	}
+
+	@keyframes shimmer {
+		from {
+			transform: translateX(-100%);
+		}
+		to {
+			transform: translateX(100%);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.skeleton::after {
+			animation: none;
+			background: hsl(var(--color-surface) / 0.4);
+		}
+	}
+</style>
diff --git a/packages/shared-ui/src/atoms/Spinner.stories.svelte b/packages/shared-ui/src/atoms/Spinner.stories.svelte
new file mode 100644
index 000000000..ccce7838e
--- /dev/null
+++ b/packages/shared-ui/src/atoms/Spinner.stories.svelte
@@ -0,0 +1,49 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Spinner from './Spinner.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Spinner',
+		component: Spinner,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<Spinner />
+	{/snippet}
+</Story>
+
+<Story name="SizeSweep">
+	{#snippet children()}
+		<div style="display:flex; gap:1rem; align-items:center;">
+			<Spinner size="xs" />
+			<Spinner size="sm" />
+			<Spinner size="md" />
+			<Spinner size="lg" />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="ToneSweep">
+	{#snippet children()}
+		<div style="display:flex; gap:1rem; align-items:center;">
+			<Spinner tone="default" />
+			<Spinner tone="muted" />
+			<Spinner tone="primary" />
+			<span style="color: hsl(var(--color-error));">
+				<Spinner tone="inherit" />
+			</span>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="InText">
+	{#snippet children()}
+		<p style="display:inline-flex; gap:0.5rem; align-items:center;">
+			<Spinner size="sm" tone="primary" />
+			<span>Lade Karten …</span>
+		</p>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/atoms/Spinner.svelte b/packages/shared-ui/src/atoms/Spinner.svelte
new file mode 100644
index 000000000..37cc5d3e8
--- /dev/null
+++ b/packages/shared-ui/src/atoms/Spinner.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+	type Size = 'xs' | 'sm' | 'md' | 'lg';
+	type Tone = 'default' | 'muted' | 'primary' | 'inherit';
+
+	interface Props {
+		size?: Size;
+		tone?: Tone;
+		ariaLabel?: string;
+		/** v0.1.x-Compat. */
+		class?: string;
+	}
+
+	let {
+		size = 'md',
+		tone = 'inherit',
+		ariaLabel = 'Lade …',
+		class: className = '',
+	}: Props = $props();
+</script>
+
+<span
+	class="spinner size-{size} tone-{tone} {className}"
+	role="status"
+	aria-live="polite"
+	aria-label={ariaLabel}
+></span>
+
+<style>
+	.spinner {
+		display: inline-block;
+		border-style: solid;
+		border-radius: 50%;
+		border-right-color: transparent;
+		animation: spin 0.6s linear infinite;
+	}
+
+	.size-xs {
+		width: 0.75rem;
+		height: 0.75rem;
+		border-width: 1.5px;
+	}
+	.size-sm {
+		width: 1rem;
+		height: 1rem;
+		border-width: 2px;
+	}
+	.size-md {
+		width: 1.5rem;
+		height: 1.5rem;
+		border-width: 2px;
+	}
+	.size-lg {
+		width: 2rem;
+		height: 2rem;
+		border-width: 2.5px;
+	}
+
+	.tone-default {
+		border-color: hsl(var(--color-foreground));
+		border-right-color: transparent;
+	}
+	.tone-muted {
+		border-color: hsl(var(--color-muted-foreground));
+		border-right-color: transparent;
+	}
+	.tone-primary {
+		border-color: hsl(var(--color-primary));
+		border-right-color: transparent;
+	}
+	.tone-inherit {
+		border-color: currentColor;
+		border-right-color: transparent;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.spinner {
+			animation: none;
+			/* Static ring full-color so it remains a meaningful loading indicator */
+			border-right-color: currentColor;
+		}
+		.tone-default,
+		.tone-muted,
+		.tone-primary {
+			border-right-color: inherit;
+		}
+	}
+</style>
diff --git a/packages/shared-ui/src/atoms/Text.stories.svelte b/packages/shared-ui/src/atoms/Text.stories.svelte
new file mode 100644
index 000000000..05451dd82
--- /dev/null
+++ b/packages/shared-ui/src/atoms/Text.stories.svelte
@@ -0,0 +1,53 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Text from './Text.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Text',
+		component: Text,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<Text>Standardtext im Body-Modus.</Text>
+	{/snippet}
+</Story>
+
+<Story name="ToneSweep">
+	{#snippet children()}
+		<div style="display:flex; flex-direction:column; gap:0.5rem;">
+			<Text tone="default">Default — Standard-Foreground</Text>
+			<Text tone="muted">Muted — sekundärer Text, Caption, Meta</Text>
+			<Text tone="primary">Primary — Akzent-Farbe</Text>
+			<Text tone="error">Error — Fehler, kritisch</Text>
+			<Text tone="success">Success — Erfolg</Text>
+			<Text tone="warning">Warning — Warnung</Text>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="SizeSweep">
+	{#snippet children()}
+		<div style="display:flex; flex-direction:column; gap:0.5rem;">
+			<Text size="2xl" weight="bold" as="h1">2xl bold (h1)</Text>
+			<Text size="xl" weight="semibold" as="h2">xl semibold (h2)</Text>
+			<Text size="lg" weight="medium" as="h3">lg medium (h3)</Text>
+			<Text size="base">base normal</Text>
+			<Text size="sm" tone="muted">sm muted (caption)</Text>
+			<Text size="xs" tone="muted">xs muted (meta)</Text>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Truncate">
+	{#snippet children()}
+		<div style="width: 240px;">
+			<Text truncate>
+				Sehr langer Text, der über die verfügbare Breite hinausgeht und mit Ellipsis abgeschnitten
+				werden soll.
+			</Text>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/atoms/Text.svelte b/packages/shared-ui/src/atoms/Text.svelte
index 1b259e8e3..9150f6180 100644
--- a/packages/shared-ui/src/atoms/Text.svelte
+++ b/packages/shared-ui/src/atoms/Text.svelte
@@ -1,54 +1,111 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
 	import type { Snippet } from 'svelte';
 
-	type TextVariant = 'body' | 'body-secondary' | 'small' | 'large' | 'muted';
-	type TextAlign = 'left' | 'center' | 'right';
-	type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+	type As = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+	type Tone = 'default' | 'muted' | 'primary' | 'error' | 'success' | 'warning';
+	type Size = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl';
+	type Weight = 'normal' | 'medium' | 'semibold' | 'bold';
 
-	interface Props extends HTMLAttributes<HTMLParagraphElement> {
-		variant?: TextVariant;
-		align?: TextAlign;
-		weight?: TextWeight;
-		class?: string;
+	interface Props {
+		as?: As;
+		tone?: Tone;
+		size?: Size;
+		weight?: Weight;
+		truncate?: boolean;
+		ariaLabel?: string;
+		id?: string;
 		children?: Snippet;
 	}
 
 	let {
-		variant = 'body',
-		align = 'left',
+		as = 'p',
+		tone = 'default',
+		size = 'base',
 		weight = 'normal',
-		class: className = '',
+		truncate = false,
+		ariaLabel,
+		id,
 		children,
-		...restProps
 	}: Props = $props();
-
-	const variantClasses: Record<TextVariant, string> = {
-		body: 'text-base text-theme leading-relaxed',
-		'body-secondary': 'text-base text-theme-secondary leading-relaxed',
-		small: 'text-sm text-theme',
-		large: 'text-lg text-theme leading-relaxed',
-		muted: 'text-sm text-theme-muted',
-	};
-
-	const alignClasses: Record<TextAlign, string> = {
-		left: 'text-left',
-		center: 'text-center',
-		right: 'text-right',
-	};
-
-	const weightClasses: Record<TextWeight, string> = {
-		normal: 'font-normal',
-		medium: 'font-medium',
-		semibold: 'font-semibold',
-		bold: 'font-bold',
-	};
-
-	const classes = $derived(
-		`${variantClasses[variant]} ${alignClasses[align]} ${weightClasses[weight]} ${className}`
-	);
 </script>
 
-<p class={classes} {...restProps}>
-	{@render children?.()}
-</p>
+<svelte:element
+	this={as}
+	class="text tone-{tone} size-{size} weight-{weight}"
+	class:truncate
+	aria-label={ariaLabel}
+	{id}
+>
+	{#if children}{@render children()}{/if}
+</svelte:element>
+
+<style>
+	.text {
+		margin: 0;
+		font-family: inherit;
+		line-height: 1.5;
+	}
+
+	.truncate {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* tones */
+	.tone-default {
+		color: hsl(var(--color-foreground));
+	}
+	.tone-muted {
+		color: hsl(var(--color-muted-foreground));
+	}
+	.tone-primary {
+		color: hsl(var(--color-primary));
+	}
+	.tone-error {
+		color: hsl(var(--color-error));
+	}
+	.tone-success {
+		color: hsl(var(--color-success));
+	}
+	.tone-warning {
+		color: hsl(var(--color-warning));
+	}
+
+	/* sizes */
+	.size-xs {
+		font-size: 0.75rem;
+	}
+	.size-sm {
+		font-size: 0.875rem;
+	}
+	.size-base {
+		font-size: 1rem;
+	}
+	.size-lg {
+		font-size: 1.125rem;
+		line-height: 1.4;
+	}
+	.size-xl {
+		font-size: 1.25rem;
+		line-height: 1.35;
+	}
+	.size-2xl {
+		font-size: 1.5rem;
+		line-height: 1.3;
+	}
+
+	/* weights */
+	.weight-normal {
+		font-weight: 400;
+	}
+	.weight-medium {
+		font-weight: 500;
+	}
+	.weight-semibold {
+		font-weight: 600;
+	}
+	.weight-bold {
+		font-weight: 700;
+	}
+</style>
diff --git a/packages/shared-ui/src/atoms/index.ts b/packages/shared-ui/src/atoms/index.ts
index 1ff0414a7..ffa1f5f0f 100644
--- a/packages/shared-ui/src/atoms/index.ts
+++ b/packages/shared-ui/src/atoms/index.ts
@@ -1,5 +1,7 @@
-export { default as Text } from './Text.svelte';
 export { default as Button } from './Button.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Card } from './Card.svelte';
+export { default as Text } from './Text.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Spinner } from './Spinner.svelte';
 export { default as DynamicIcon } from './DynamicIcon.svelte';
diff --git a/packages/shared-ui/src/bottom-stack/BottomStack.svelte b/packages/shared-ui/src/bottom-stack/BottomStack.svelte
deleted file mode 100644
index 8c7503ec4..000000000
--- a/packages/shared-ui/src/bottom-stack/BottomStack.svelte
+++ /dev/null
@@ -1,121 +0,0 @@
-<script lang="ts">
-	/**
-	 * BottomStack — offset coordinator for the fixed bottom bar stack.
-	 *
-	 * Stack order (bottom → top):
-	 *   QuickInputBar (always at bottom, fixed offset)
-	 *   → PillNav (above input bar)
-	 *     → TagStrip (above PillNav)
-	 *       → children (e.g. MinimizedTabs)
-	 *         → top (e.g. NotificationBar)
-	 *
-	 * Computes and exposes offsets for each layer so apps don't
-	 * need manual pixel arithmetic. Renders "middle" and "top"
-	 * content at the correct positions.
-	 */
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		/** Height of the QuickInputBar in px (default: 72) */
-		inputBarHeight?: number;
-		/** Is PillNav currently visible? */
-		pillNavVisible?: boolean;
-		/** Height of PillNav in px (default: 68) */
-		pillNavHeight?: number;
-		/** Is TagStrip currently visible? */
-		tagStripVisible?: boolean;
-		/** Height of TagStrip in px (default: 50) */
-		tagStripHeight?: number;
-		/** Content rendered above TagStrip (e.g. MinimizedTabs) */
-		children?: Snippet;
-		/** Content rendered at the very top (e.g. NotificationBar) */
-		top?: Snippet;
-		/** Computed bottom offset for PillNav (bind this) */
-		pillNavOffset?: string;
-		/** Computed bottom offset for TagStrip (bind this) */
-		tagStripOffset?: string;
-		/** Computed bottom offset for FAB (bind this) */
-		fabOffset?: string;
-	}
-
-	let {
-		inputBarHeight = 72,
-		pillNavVisible = false,
-		pillNavHeight = 68,
-		tagStripVisible = false,
-		tagStripHeight = 50,
-		children,
-		top,
-		pillNavOffset = $bindable('0px'),
-		tagStripOffset = $bindable('72px'),
-		fabOffset = $bindable('20px'),
-	}: Props = $props();
-
-	const BASE = 16;
-
-	// PillNav sits above the InputBar
-	let pillNavBottom = $derived(inputBarHeight);
-
-	// TagStrip sits above PillNav (only when PillNav is visible)
-	let tagStripBottom = $derived(inputBarHeight + (pillNavVisible ? pillNavHeight : 0));
-
-	// Middle content sits above all fixed bars
-	let aboveFixedBars = $derived(
-		inputBarHeight +
-			(pillNavVisible ? pillNavHeight : 0) +
-			(pillNavVisible && tagStripVisible ? tagStripHeight : 0)
-	);
-
-	// Measure middle and top content heights
-	let middleHeight = $state(0);
-	let topHeight = $state(0);
-
-	// Top content sits above middle
-	let topBottom = $derived(aboveFixedBars + middleHeight);
-
-	// FAB should be above everything
-	let fabBottom = $derived(BASE + 4 + aboveFixedBars + middleHeight + topHeight);
-
-	// Sync bindable outputs
-	$effect(() => {
-		pillNavOffset = `${pillNavBottom}px`;
-	});
-	$effect(() => {
-		tagStripOffset = `${tagStripBottom}px`;
-	});
-	$effect(() => {
-		fabOffset = `${fabBottom}px`;
-	});
-</script>
-
-{#if children}
-	<div
-		class="bottom-stack-layer"
-		style="bottom: calc({aboveFixedBars}px + env(safe-area-inset-bottom, 0px))"
-		bind:clientHeight={middleHeight}
-	>
-		{@render children()}
-	</div>
-{/if}
-
-{#if top}
-	<div
-		class="bottom-stack-layer"
-		style="bottom: calc({topBottom}px + env(safe-area-inset-bottom, 0px))"
-		bind:clientHeight={topHeight}
-	>
-		{@render top()}
-	</div>
-{/if}
-
-<style>
-	.bottom-stack-layer {
-		position: fixed;
-		left: 50%;
-		transform: translateX(-50%);
-		z-index: 1001;
-		display: flex;
-		justify-content: center;
-		padding: 0.25rem 0;
-	}
-</style>
diff --git a/packages/shared-ui/src/bottom-stack/MinimizedTabs.svelte b/packages/shared-ui/src/bottom-stack/MinimizedTabs.svelte
deleted file mode 100644
index 82b4be7a1..000000000
--- a/packages/shared-ui/src/bottom-stack/MinimizedTabs.svelte
+++ /dev/null
@@ -1,174 +0,0 @@
-<script lang="ts">
-	import { X, Plus, CornersOut, ArrowLineUp } from '@mana/shared-icons';
-	import type { MinimizedPage } from './types';
-
-	interface Props {
-		pages: MinimizedPage[];
-		onRestore: (pageId: string) => void;
-		onRemove: (pageId: string) => void;
-		onMaximize?: (pageId: string) => void;
-		onAdd: () => void;
-	}
-
-	let { pages, onRestore, onRemove, onMaximize, onAdd }: Props = $props();
-</script>
-
-{#if pages.length > 0}
-	<div class="minimized-tabs">
-		{#each pages as pg (pg.id)}
-			<div
-				class="minimized-tab"
-				role="button"
-				tabindex="0"
-				onclick={() => onRestore(pg.id)}
-				onkeydown={(e) => e.key === 'Enter' && onRestore(pg.id)}
-			>
-				<span class="minimized-tab-dot" style="background-color: {pg.color}"></span>
-				<span class="minimized-tab-title">{pg.title}</span>
-				<div class="minimized-tab-actions">
-					<button
-						class="minimized-tab-btn"
-						onclick={(e) => {
-							e.stopPropagation();
-							onRestore(pg.id);
-						}}
-						title="Wiederherstellen"
-					>
-						<ArrowLineUp size={12} />
-					</button>
-					{#if onMaximize}
-						<button
-							class="minimized-tab-btn"
-							onclick={(e) => {
-								e.stopPropagation();
-								onMaximize(pg.id);
-							}}
-							title="Maximieren"
-						>
-							<CornersOut size={12} />
-						</button>
-					{/if}
-					<button
-						class="minimized-tab-btn"
-						onclick={(e) => {
-							e.stopPropagation();
-							onRemove(pg.id);
-						}}
-						title="Schließen"
-					>
-						<X size={12} />
-					</button>
-				</div>
-			</div>
-		{/each}
-		<button class="minimized-tab-add" onclick={onAdd} title="Neue Seite hinzufügen">
-			<Plus size={14} />
-		</button>
-	</div>
-{/if}
-
-<style>
-	.minimized-tabs {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 0.25rem;
-		padding: 0.3rem 0.5rem;
-		background: var(--color-surface-elevated, #fffef5);
-		border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
-		border-radius: 0.625rem;
-		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-		overflow-x: auto;
-		scrollbar-width: none;
-		width: fit-content;
-	}
-	:global(.dark) .minimized-tabs {
-		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-	}
-	.minimized-tabs::-webkit-scrollbar {
-		display: none;
-	}
-
-	.minimized-tab {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.25rem 0.5rem;
-		background: transparent;
-		border: none;
-		border-radius: 0.3rem;
-		cursor: pointer;
-		transition: all 0.15s;
-		white-space: nowrap;
-		flex-shrink: 0;
-		font-family: inherit;
-	}
-	.minimized-tab:hover {
-		background: rgba(0, 0, 0, 0.05);
-	}
-	:global(.dark) .minimized-tab:hover {
-		background: rgba(255, 255, 255, 0.08);
-	}
-
-	.minimized-tab-dot {
-		width: 0.5rem;
-		height: 0.5rem;
-		border-radius: 9999px;
-		flex-shrink: 0;
-	}
-
-	.minimized-tab-title {
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: var(--color-muted-foreground, #6b7280);
-	}
-
-	.minimized-tab-actions {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-	}
-
-	.minimized-tab-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 24px;
-		height: 24px;
-		border: none;
-		background: transparent;
-		color: var(--color-muted-foreground, #d1d5db);
-		border-radius: 0.25rem;
-		cursor: pointer;
-		padding: 0;
-		transition: all 0.15s;
-		opacity: 0.5;
-	}
-	.minimized-tab-btn:hover {
-		opacity: 1;
-		background: rgba(0, 0, 0, 0.06);
-	}
-	:global(.dark) .minimized-tab-btn:hover {
-		background: rgba(255, 255, 255, 0.08);
-	}
-
-	.minimized-tab-add {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 24px;
-		height: 24px;
-		border-radius: 0.3rem;
-		border: none;
-		background: transparent;
-		color: var(--color-muted-foreground, #9ca3af);
-		cursor: pointer;
-		flex-shrink: 0;
-		transition: all 0.15s;
-		opacity: 0.6;
-	}
-	.minimized-tab-add:hover {
-		opacity: 1;
-		color: var(--color-primary, #8b5cf6);
-	}
-</style>
diff --git a/packages/shared-ui/src/bottom-stack/NotificationBar.svelte b/packages/shared-ui/src/bottom-stack/NotificationBar.svelte
deleted file mode 100644
index 5d950d40f..000000000
--- a/packages/shared-ui/src/bottom-stack/NotificationBar.svelte
+++ /dev/null
@@ -1,165 +0,0 @@
-<script lang="ts">
-	import { X, ArrowRight } from '@mana/shared-icons';
-	import type { BottomNotification } from './types';
-
-	interface Props {
-		notifications: BottomNotification[];
-	}
-
-	let { notifications }: Props = $props();
-
-	// Show highest priority notification (error > warning > info)
-	const PRIORITY: Record<string, number> = { error: 3, warning: 2, info: 1 };
-	let active = $derived(
-		notifications.length > 0
-			? [...notifications].sort((a, b) => (PRIORITY[b.type] ?? 0) - (PRIORITY[a.type] ?? 0))[0]
-			: null
-	);
-
-	function handleDismiss() {
-		if (active?.onDismiss) active.onDismiss();
-	}
-</script>
-
-{#if active}
-	<div
-		class="notification-bar"
-		class:warning={active.type === 'warning'}
-		class:error={active.type === 'error'}
-	>
-		<p class="notification-message">{active.message}</p>
-		<div class="notification-actions">
-			{#if active.action}
-				<button class="notification-action" onclick={active.action.onClick}>
-					{#if active.action.icon}
-						{@const ActionIcon = active.action.icon}
-						<ActionIcon size={14} weight="bold" />
-					{/if}
-					{active.action.label}
-					<ArrowRight size={12} />
-				</button>
-			{/if}
-			{#if active.dismissible !== false}
-				<button class="notification-dismiss" onclick={handleDismiss} aria-label="Schließen">
-					<X size={14} />
-				</button>
-			{/if}
-		</div>
-	</div>
-{/if}
-
-<style>
-	.notification-bar {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		padding: 0.625rem 0.625rem 0.625rem 1rem;
-		background: hsl(var(--color-surface-elevated));
-		border: 1px solid hsl(var(--color-border-strong, var(--color-border)));
-		border-radius: 0.875rem;
-		box-shadow:
-			0 8px 24px rgba(0, 0, 0, 0.12),
-			0 2px 6px rgba(0, 0, 0, 0.06);
-		backdrop-filter: blur(16px);
-		-webkit-backdrop-filter: blur(16px);
-		max-width: 480px;
-		width: max-content;
-		animation: slideUp 250ms ease-out;
-	}
-	:global(.dark) .notification-bar {
-		box-shadow:
-			0 12px 32px rgba(0, 0, 0, 0.45),
-			0 2px 8px rgba(0, 0, 0, 0.25);
-	}
-
-	.notification-bar.warning {
-		border-color: rgba(245, 158, 11, 0.3);
-	}
-	.notification-bar.error {
-		border-color: rgba(239, 68, 68, 0.3);
-	}
-
-	@keyframes slideUp {
-		from {
-			opacity: 0;
-			transform: translateY(8px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	.notification-message {
-		flex: 1;
-		margin: 0;
-		font-size: 0.8125rem;
-		line-height: 1.4;
-		color: hsl(var(--color-foreground) / 0.85);
-	}
-
-	.notification-actions {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		flex-shrink: 0;
-	}
-
-	.notification-action {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.4rem;
-		padding: 0.5rem 0.95rem;
-		font-size: 0.8125rem;
-		font-weight: 600;
-		color: white;
-		background: var(--color-primary, #7c3aed);
-		border: 1px solid rgba(255, 255, 255, 0.18);
-		border-radius: 0.625rem;
-		cursor: pointer;
-		transition:
-			background 150ms ease,
-			transform 150ms ease,
-			box-shadow 150ms ease;
-		white-space: nowrap;
-		font-family: inherit;
-		box-shadow:
-			0 4px 12px rgba(124, 58, 237, 0.35),
-			0 1px 2px rgba(0, 0, 0, 0.1);
-	}
-	.notification-action:hover {
-		filter: brightness(1.08);
-		transform: translateY(-1px);
-		box-shadow:
-			0 6px 16px rgba(124, 58, 237, 0.45),
-			0 2px 4px rgba(0, 0, 0, 0.12);
-	}
-	.notification-action:active {
-		transform: translateY(0);
-	}
-
-	.notification-dismiss {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 24px;
-		height: 24px;
-		padding: 0;
-		color: hsl(var(--color-foreground) / 0.45);
-		background: transparent;
-		border: none;
-		border-radius: 0.25rem;
-		cursor: pointer;
-		transition: all 150ms ease;
-	}
-	.notification-dismiss:hover {
-		background: hsl(var(--color-foreground) / 0.08);
-		color: hsl(var(--color-foreground) / 0.85);
-	}
-
-	@media (max-width: 480px) {
-		.notification-bar {
-			max-width: calc(100vw - 2rem);
-		}
-	}
-</style>
diff --git a/packages/shared-ui/src/bottom-stack/index.ts b/packages/shared-ui/src/bottom-stack/index.ts
deleted file mode 100644
index b0b589f01..000000000
--- a/packages/shared-ui/src/bottom-stack/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as BottomStack } from './BottomStack.svelte';
-export { default as MinimizedTabs } from './MinimizedTabs.svelte';
-export { default as NotificationBar } from './NotificationBar.svelte';
-export type { MinimizedPage, MinimizedTabsCallbacks, BottomNotification } from './types';
diff --git a/packages/shared-ui/src/bottom-stack/types.ts b/packages/shared-ui/src/bottom-stack/types.ts
deleted file mode 100644
index e14eb0e52..000000000
--- a/packages/shared-ui/src/bottom-stack/types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export interface MinimizedPage {
-	id: string;
-	title: string;
-	color: string;
-}
-
-export interface MinimizedTabsCallbacks {
-	restore: (pageId: string) => void;
-	remove: (pageId: string) => void;
-	add: () => void;
-}
-
-export interface BottomNotification {
-	id: string;
-	message: string;
-	type: 'info' | 'warning' | 'error';
-	action?: { label: string; icon?: any; onClick: () => void };
-	dismissible?: boolean;
-	onDismiss?: () => void;
-}
diff --git a/packages/shared-ui/src/charts/ActivityHeatmap.svelte b/packages/shared-ui/src/charts/ActivityHeatmap.svelte
deleted file mode 100644
index b169483c7..000000000
--- a/packages/shared-ui/src/charts/ActivityHeatmap.svelte
+++ /dev/null
@@ -1,294 +0,0 @@
-<script lang="ts">
-	import { format, parseISO, getMonth } from 'date-fns';
-	import { de } from 'date-fns/locale';
-	import type { HeatmapDataPoint } from './types';
-
-	interface Props {
-		data: HeatmapDataPoint[];
-		title?: string;
-		/** Number of days to display (default: 180) */
-		daysCount?: number;
-		/** Custom tooltip formatter */
-		tooltipFormatter?: (point: HeatmapDataPoint) => string;
-		/** Item name for tooltip (e.g., "Aufgabe", "Event", "Kontakt") */
-		itemName?: string;
-		/** Plural item name for tooltip (e.g., "Aufgaben", "Events", "Kontakte") */
-		itemNamePlural?: string;
-	}
-
-	let {
-		data,
-		title = 'Aktivität',
-		daysCount = 180,
-		tooltipFormatter,
-		itemName = 'Aufgabe',
-		itemNamePlural = 'Aufgaben',
-	}: Props = $props();
-
-	// Constants
-	const CELL_SIZE = 12;
-	const CELL_GAP = 3;
-	const DAY_LABELS = ['Mo', '', 'Mi', '', 'Fr', '', 'So'];
-
-	// Calculate max for color scaling
-	let maxCount = $derived(Math.max(...data.map((d) => d.count), 1));
-
-	// Get color intensity based on count (uses CSS variable --primary)
-	function getColorClass(count: number): string {
-		if (count === 0) return 'intensity-0';
-		const ratio = count / maxCount;
-		if (ratio <= 0.25) return 'intensity-1';
-		if (ratio <= 0.5) return 'intensity-2';
-		if (ratio <= 0.75) return 'intensity-3';
-		return 'intensity-4';
-	}
-
-	// Group data by weeks
-	let weeks = $derived.by(() => {
-		const result: HeatmapDataPoint[][] = [];
-		let currentWeek: HeatmapDataPoint[] = [];
-
-		// Adjust for Monday start
-		const adjustedData = [...data];
-
-		// Fill initial gap if first day isn't Monday
-		if (adjustedData.length > 0) {
-			const firstDay = adjustedData[0];
-			// Convert Sunday (0) to 6, Monday (1) to 0, etc.
-			const adjustedDayOfWeek = firstDay.dayOfWeek === 0 ? 6 : firstDay.dayOfWeek - 1;
-
-			for (let i = 0; i < adjustedDayOfWeek; i++) {
-				currentWeek.push({ date: '', count: 0, dayOfWeek: i });
-			}
-		}
-
-		adjustedData.forEach((day) => {
-			// Convert to Monday-based index
-			const adjustedDayOfWeek = day.dayOfWeek === 0 ? 6 : day.dayOfWeek - 1;
-
-			if (adjustedDayOfWeek === 0 && currentWeek.length > 0) {
-				result.push(currentWeek);
-				currentWeek = [];
-			}
-			currentWeek.push({ ...day, dayOfWeek: adjustedDayOfWeek });
-		});
-
-		if (currentWeek.length > 0) {
-			result.push(currentWeek);
-		}
-
-		return result;
-	});
-
-	// Calculate month labels
-	let monthLabels = $derived.by(() => {
-		const labels: { month: string; weekIndex: number }[] = [];
-		let lastMonth = -1;
-
-		weeks.forEach((week, weekIndex) => {
-			const validDay = week.find((d) => d.date);
-			if (validDay) {
-				const date = parseISO(validDay.date);
-				const month = getMonth(date);
-				if (month !== lastMonth) {
-					labels.push({
-						month: format(date, 'MMM', { locale: de }),
-						weekIndex,
-					});
-					lastMonth = month;
-				}
-			}
-		});
-
-		return labels;
-	});
-
-	// Calculate SVG dimensions
-	let svgWidth = $derived(weeks.length * (CELL_SIZE + CELL_GAP) + 30);
-	let svgHeight = 7 * (CELL_SIZE + CELL_GAP) + 30;
-
-	function formatTooltip(day: HeatmapDataPoint): string {
-		if (!day.date) return '';
-		if (tooltipFormatter) return tooltipFormatter(day);
-		const date = format(parseISO(day.date), 'EEEE, d. MMMM yyyy', { locale: de });
-		const name = day.count === 1 ? itemName : itemNamePlural;
-		return `${day.count} ${name} am ${date}`;
-	}
-</script>
-
-<div class="heatmap-container">
-	<h3 class="heatmap-title">{title}</h3>
-
-	<div class="heatmap-scroll">
-		<svg
-			width={svgWidth}
-			height={svgHeight}
-			viewBox="0 0 {svgWidth} {svgHeight}"
-			class="heatmap-svg"
-		>
-			<!-- Month labels -->
-			{#each monthLabels as label}
-				<text x={30 + label.weekIndex * (CELL_SIZE + CELL_GAP)} y={10} class="month-label">
-					{label.month}
-				</text>
-			{/each}
-
-			<!-- Day labels -->
-			{#each DAY_LABELS as label, i}
-				{#if label}
-					<text x={0} y={22 + i * (CELL_SIZE + CELL_GAP) + CELL_SIZE / 2 + 4} class="day-label">
-						{label}
-					</text>
-				{/if}
-			{/each}
-
-			<!-- Cells -->
-			{#each weeks as week, weekIndex}
-				{#each week as day, dayIndex}
-					{#if day.date}
-						<rect
-							x={30 + weekIndex * (CELL_SIZE + CELL_GAP)}
-							y={20 + dayIndex * (CELL_SIZE + CELL_GAP)}
-							width={CELL_SIZE}
-							height={CELL_SIZE}
-							rx={2}
-							class="cell {getColorClass(day.count)}"
-						>
-							<title>{formatTooltip(day)}</title>
-						</rect>
-					{:else}
-						<rect
-							x={30 + weekIndex * (CELL_SIZE + CELL_GAP)}
-							y={20 + dayIndex * (CELL_SIZE + CELL_GAP)}
-							width={CELL_SIZE}
-							height={CELL_SIZE}
-							rx={2}
-							class="cell empty"
-						/>
-					{/if}
-				{/each}
-			{/each}
-		</svg>
-	</div>
-
-	<!-- Legend -->
-	<div class="legend">
-		<span class="legend-label">Weniger</span>
-		<div class="legend-cells">
-			<div class="legend-cell intensity-0"></div>
-			<div class="legend-cell intensity-1"></div>
-			<div class="legend-cell intensity-2"></div>
-			<div class="legend-cell intensity-3"></div>
-			<div class="legend-cell intensity-4"></div>
-		</div>
-		<span class="legend-label">Mehr</span>
-	</div>
-</div>
-
-<style>
-	.heatmap-container {
-		background: rgba(255, 255, 255, 0.95);
-		backdrop-filter: blur(20px);
-		-webkit-backdrop-filter: blur(20px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		border-radius: 1.5rem;
-		padding: 1.5rem;
-	}
-
-	:global(.dark) .heatmap-container {
-		background: rgba(30, 30, 30, 0.95);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-	}
-
-	.heatmap-title {
-		font-size: 1rem;
-		font-weight: 600;
-		color: hsl(var(--color-foreground));
-		margin: 0 0 1rem 0;
-	}
-
-	.heatmap-scroll {
-		overflow-x: auto;
-		padding-bottom: 0.5rem;
-	}
-
-	.heatmap-svg {
-		display: block;
-	}
-
-	.month-label {
-		font-size: 10px;
-		fill: hsl(var(--color-muted-foreground));
-	}
-
-	.day-label {
-		font-size: 10px;
-		fill: hsl(var(--color-muted-foreground));
-	}
-
-	.cell {
-		transition: opacity 0.15s ease;
-	}
-
-	.cell:hover {
-		opacity: 0.8;
-	}
-
-	.cell.empty {
-		fill: transparent;
-	}
-
-	:global(.dark) .cell.empty {
-		fill: transparent;
-	}
-
-	.legend {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		gap: 0.5rem;
-		margin-top: 1rem;
-	}
-
-	.legend-label {
-		font-size: 0.75rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.legend-cells {
-		display: flex;
-		gap: 3px;
-	}
-
-	.legend-cell {
-		width: 12px;
-		height: 12px;
-		border-radius: 2px;
-	}
-
-	/* Intensity classes using theme primary color */
-	.intensity-0 {
-		fill: hsl(var(--color-muted) / 0.3);
-		background: hsl(var(--color-muted) / 0.3);
-	}
-
-	.intensity-1 {
-		fill: hsl(var(--color-primary) / 0.3);
-		background: hsl(var(--color-primary) / 0.3);
-	}
-
-	.intensity-2 {
-		fill: hsl(var(--color-primary) / 0.5);
-		background: hsl(var(--color-primary) / 0.5);
-	}
-
-	.intensity-3 {
-		fill: hsl(var(--color-primary) / 0.7);
-		background: hsl(var(--color-primary) / 0.7);
-	}
-
-	.intensity-4 {
-		fill: hsl(var(--color-primary));
-		background: hsl(var(--color-primary));
-	}
-</style>
diff --git a/packages/shared-ui/src/charts/DonutChart.svelte b/packages/shared-ui/src/charts/DonutChart.svelte
deleted file mode 100644
index f0b69678e..000000000
--- a/packages/shared-ui/src/charts/DonutChart.svelte
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts">
-	import type { DonutSegment } from './types';
-
-	interface Props {
-		data: DonutSegment[];
-		title?: string;
-		centerLabel?: string;
-		centerValue?: number | string;
-		showLegend?: boolean;
-	}
-
-	let {
-		data,
-		title = 'Verteilung',
-		centerLabel = 'Gesamt',
-		centerValue,
-		showLegend = true,
-	}: Props = $props();
-
-	// Chart settings
-	const SIZE = 200;
-	const CENTER = SIZE / 2;
-	const RADIUS = 80;
-	const INNER_RADIUS = 50;
-
-	// Total count
-	let total = $derived(centerValue ?? data.reduce((sum, d) => sum + d.count, 0));
-
-	// Generate arc paths
-	let arcs = $derived.by(() => {
-		const totalCount = data.reduce((sum, d) => sum + d.count, 0);
-		if (totalCount === 0) return [];
-
-		const result: Array<{
-			path: string;
-			color: string;
-			id: string;
-			label: string;
-			count: number;
-			percentage: number;
-		}> = [];
-
-		let currentAngle = -90; // Start at top
-
-		data.forEach((segment) => {
-			if (segment.count === 0) return;
-
-			const angle = (segment.count / totalCount) * 360;
-			const startAngle = currentAngle;
-			const endAngle = currentAngle + angle;
-
-			// Convert angles to radians
-			const startRad = (startAngle * Math.PI) / 180;
-			const endRad = (endAngle * Math.PI) / 180;
-
-			// Calculate points
-			const x1 = CENTER + RADIUS * Math.cos(startRad);
-			const y1 = CENTER + RADIUS * Math.sin(startRad);
-			const x2 = CENTER + RADIUS * Math.cos(endRad);
-			const y2 = CENTER + RADIUS * Math.sin(endRad);
-			const x3 = CENTER + INNER_RADIUS * Math.cos(endRad);
-			const y3 = CENTER + INNER_RADIUS * Math.sin(endRad);
-			const x4 = CENTER + INNER_RADIUS * Math.cos(startRad);
-			const y4 = CENTER + INNER_RADIUS * Math.sin(startRad);
-
-			const largeArc = angle > 180 ? 1 : 0;
-
-			// Create arc path
-			const path = [
-				`M ${x1} ${y1}`,
-				`A ${RADIUS} ${RADIUS} 0 ${largeArc} 1 ${x2} ${y2}`,
-				`L ${x3} ${y3}`,
-				`A ${INNER_RADIUS} ${INNER_RADIUS} 0 ${largeArc} 0 ${x4} ${y4}`,
-				'Z',
-			].join(' ');
-
-			result.push({
-				path,
-				color: segment.color,
-				id: segment.id,
-				label: segment.label,
-				count: segment.count,
-				percentage: segment.percentage,
-			});
-
-			currentAngle = endAngle;
-		});
-
-		return result;
-	});
-
-	// Hover state
-	let hoveredSegment = $state<string | null>(null);
-</script>
-
-<div class="donut-container">
-	<h3 class="donut-title">{title}</h3>
-
-	<div class="donut-content">
-		<div class="donut-chart">
-			<svg viewBox="0 0 {SIZE} {SIZE}" class="donut-svg">
-				{#each arcs as arc}
-					<path
-						d={arc.path}
-						fill={arc.color}
-						class="arc-segment"
-						class:hovered={hoveredSegment === arc.id}
-						onmouseenter={() => (hoveredSegment = arc.id)}
-						onmouseleave={() => (hoveredSegment = null)}
-						role="graphics-symbol"
-						aria-label="{arc.label}: {arc.count}"
-					>
-						<title>{arc.label}: {arc.count} ({arc.percentage}%)</title>
-					</path>
-				{/each}
-
-				<!-- Center text -->
-				<text x={CENTER} y={CENTER - 8} class="center-count">
-					{total}
-				</text>
-				<text x={CENTER} y={CENTER + 12} class="center-label">
-					{centerLabel}
-				</text>
-			</svg>
-		</div>
-
-		<!-- Legend -->
-		{#if showLegend}
-			<div class="donut-legend">
-				{#each data as item}
-					<div
-						class="legend-item"
-						class:active={hoveredSegment === item.id}
-						onmouseenter={() => (hoveredSegment = item.id)}
-						onmouseleave={() => (hoveredSegment = null)}
-						role="button"
-						tabindex="0"
-					>
-						<span class="legend-color" style="background-color: {item.color}"></span>
-						<span class="legend-label">{item.label}</span>
-						<span class="legend-count">{item.count}</span>
-					</div>
-				{/each}
-			</div>
-		{/if}
-	</div>
-</div>
-
-<style>
-	.donut-container {
-		background: rgba(255, 255, 255, 0.95);
-		backdrop-filter: blur(20px);
-		-webkit-backdrop-filter: blur(20px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		border-radius: 1.5rem;
-		padding: 1.5rem;
-	}
-
-	:global(.dark) .donut-container {
-		background: rgba(30, 30, 30, 0.95);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-	}
-
-	.donut-title {
-		font-size: 1rem;
-		font-weight: 600;
-		color: hsl(var(--color-foreground));
-		margin: 0 0 1rem 0;
-	}
-
-	.donut-content {
-		display: flex;
-		align-items: center;
-		gap: 1.5rem;
-	}
-
-	@media (max-width: 400px) {
-		.donut-content {
-			flex-direction: column;
-		}
-	}
-
-	.donut-chart {
-		flex-shrink: 0;
-	}
-
-	.donut-svg {
-		width: 140px;
-		height: 140px;
-	}
-
-	.arc-segment {
-		transition:
-			opacity 0.15s ease,
-			transform 0.15s ease;
-		transform-origin: center;
-		cursor: pointer;
-	}
-
-	.arc-segment:hover,
-	.arc-segment.hovered {
-		opacity: 0.85;
-		transform: scale(1.02);
-	}
-
-	.center-count {
-		font-size: 28px;
-		font-weight: 700;
-		fill: hsl(var(--color-foreground));
-		text-anchor: middle;
-	}
-
-	.center-label {
-		font-size: 12px;
-		fill: hsl(var(--color-muted-foreground));
-		text-anchor: middle;
-	}
-
-	.donut-legend {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		flex: 1;
-		min-width: 0;
-	}
-
-	.legend-item {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.375rem 0.5rem;
-		border-radius: 0.5rem;
-		cursor: pointer;
-		transition: background-color 0.15s ease;
-	}
-
-	.legend-item:hover,
-	.legend-item.active {
-		background: hsl(var(--color-muted) / 0.3);
-	}
-
-	.legend-color {
-		width: 12px;
-		height: 12px;
-		border-radius: 3px;
-		flex-shrink: 0;
-	}
-
-	.legend-label {
-		font-size: 0.875rem;
-		color: hsl(var(--color-foreground));
-		flex: 1;
-	}
-
-	.legend-count {
-		font-size: 0.875rem;
-		font-weight: 600;
-		color: hsl(var(--color-muted-foreground));
-	}
-</style>
diff --git a/packages/shared-ui/src/charts/ProgressBars.svelte b/packages/shared-ui/src/charts/ProgressBars.svelte
deleted file mode 100644
index 1e89272d3..000000000
--- a/packages/shared-ui/src/charts/ProgressBars.svelte
+++ /dev/null
@@ -1,192 +0,0 @@
-<script lang="ts">
-	import type { ProgressItem } from './types';
-
-	interface Props {
-		data: ProgressItem[];
-		title?: string;
-		maxItems?: number;
-		emptyMessage?: string;
-	}
-
-	let {
-		data,
-		title = 'Fortschritt',
-		maxItems = 8,
-		emptyMessage = 'Keine Daten vorhanden',
-	}: Props = $props();
-
-	// Sort by total (descending) and limit to maxItems
-	let sortedData = $derived(data.slice(0, maxItems));
-</script>
-
-<div class="progress-container">
-	<h3 class="progress-title">{title}</h3>
-
-	{#if sortedData.length === 0}
-		<p class="no-data">{emptyMessage}</p>
-	{:else}
-		<div class="progress-list">
-			{#each sortedData as item (item.id)}
-				<div class="progress-row">
-					<div class="progress-header">
-						<div class="progress-name">
-							<span class="progress-dot" style="background-color: {item.color}"></span>
-							<span class="name-text">{item.name}</span>
-						</div>
-						<span class="progress-stats">
-							{item.completed}/{item.total}
-						</span>
-					</div>
-
-					<div class="progress-bar-container">
-						<div class="progress-bar">
-							<!-- Completed segment -->
-							{#if item.completed > 0}
-								<div
-									class="progress-segment completed"
-									style="width: {(item.completed / item.total) *
-										100}%; background-color: {item.color}"
-								></div>
-							{/if}
-
-							<!-- In Progress segment -->
-							{#if item.inProgress && item.inProgress > 0}
-								<div
-									class="progress-segment in-progress"
-									style="width: {(item.inProgress / item.total) *
-										100}%; background-color: {item.color}; opacity: 0.4"
-								></div>
-							{/if}
-						</div>
-
-						<span class="percentage">{item.percentage}%</span>
-					</div>
-				</div>
-			{/each}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.progress-container {
-		background: rgba(255, 255, 255, 0.95);
-		backdrop-filter: blur(20px);
-		-webkit-backdrop-filter: blur(20px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		border-radius: 1.5rem;
-		padding: 1.5rem;
-	}
-
-	:global(.dark) .progress-container {
-		background: rgba(30, 30, 30, 0.95);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-	}
-
-	.progress-title {
-		font-size: 1rem;
-		font-weight: 600;
-		color: hsl(var(--color-foreground));
-		margin: 0 0 1rem 0;
-	}
-
-	.no-data {
-		font-size: 0.875rem;
-		color: hsl(var(--color-muted-foreground));
-		text-align: center;
-		padding: 2rem;
-	}
-
-	.progress-list {
-		display: flex;
-		flex-direction: column;
-		gap: 0.875rem;
-	}
-
-	.progress-row {
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-	}
-
-	.progress-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.progress-name {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		min-width: 0;
-	}
-
-	.progress-dot {
-		width: 10px;
-		height: 10px;
-		border-radius: 50%;
-		flex-shrink: 0;
-	}
-
-	.name-text {
-		font-size: 0.875rem;
-		color: hsl(var(--color-foreground));
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.progress-stats {
-		font-size: 0.75rem;
-		color: hsl(var(--color-muted-foreground));
-		flex-shrink: 0;
-	}
-
-	.progress-bar-container {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-	}
-
-	.progress-bar {
-		flex: 1;
-		height: 8px;
-		background: hsl(var(--color-muted) / 0.3);
-		border-radius: 4px;
-		overflow: hidden;
-		display: flex;
-	}
-
-	:global(.dark) .progress-bar {
-		background: rgba(255, 255, 255, 0.1);
-	}
-
-	.progress-segment {
-		height: 100%;
-		transition: width 0.3s ease;
-	}
-
-	.progress-segment.completed {
-		border-radius: 4px 0 0 4px;
-	}
-
-	.progress-segment.in-progress {
-		/* Striped pattern for in-progress */
-		background-image: repeating-linear-gradient(
-			45deg,
-			transparent,
-			transparent 4px,
-			rgba(255, 255, 255, 0.3) 4px,
-			rgba(255, 255, 255, 0.3) 8px
-		);
-	}
-
-	.percentage {
-		font-size: 0.75rem;
-		font-weight: 600;
-		color: hsl(var(--color-muted-foreground));
-		width: 36px;
-		text-align: right;
-		flex-shrink: 0;
-	}
-</style>
diff --git a/packages/shared-ui/src/charts/StatisticsSkeleton.svelte b/packages/shared-ui/src/charts/StatisticsSkeleton.svelte
deleted file mode 100644
index 7e0e23c84..000000000
--- a/packages/shared-ui/src/charts/StatisticsSkeleton.svelte
+++ /dev/null
@@ -1,272 +0,0 @@
-<script lang="ts">
-	/**
-	 * StatisticsSkeleton - Skeleton for statistics page loading
-	 */
-
-	import { SkeletonBox } from '../molecules';
-
-	interface Props {
-		/** Number of stat cards to show (default: 6) */
-		statCards?: number;
-		/** Number of progress items to show (default: 4) */
-		progressItems?: number;
-		/** Number of legend items for donut chart (default: 4) */
-		legendItems?: number;
-		/** Show additional stats section (default: true) */
-		showAdditionalStats?: boolean;
-	}
-
-	let {
-		statCards = 6,
-		progressItems = 4,
-		legendItems = 4,
-		showAdditionalStats = true,
-	}: Props = $props();
-</script>
-
-<div class="statistics-skeleton" role="status" aria-label="Statistiken werden geladen...">
-	<!-- Stats Overview Cards -->
-	<div class="stats-overview">
-		{#each Array(statCards) as _, i}
-			<div class="stat-card" style="opacity: {Math.max(0.5, 1 - i * 0.08)};">
-				<SkeletonBox width="40px" height="40px" borderRadius="10px" />
-				<div class="stat-content">
-					<SkeletonBox width="48px" height="28px" />
-					<SkeletonBox width="80px" height="14px" />
-				</div>
-			</div>
-		{/each}
-	</div>
-
-	<!-- Charts Grid -->
-	<div class="charts-grid">
-		<!-- Activity Heatmap -->
-		<div class="chart-card heatmap">
-			<div class="chart-header">
-				<SkeletonBox width="140px" height="20px" />
-			</div>
-			<div class="heatmap-grid">
-				{#each Array(7) as _}
-					<div class="heatmap-row">
-						{#each Array(12) as _}
-							<SkeletonBox width="16px" height="16px" borderRadius="3px" />
-						{/each}
-					</div>
-				{/each}
-			</div>
-		</div>
-
-		<!-- Charts Row -->
-		<div class="charts-row">
-			<!-- Weekly Trend Chart -->
-			<div class="chart-card trend">
-				<div class="chart-header">
-					<SkeletonBox width="120px" height="20px" />
-				</div>
-				<div class="trend-bars">
-					{#each Array(7) as _, i}
-						<div class="bar-wrapper">
-							<SkeletonBox width="32px" height="{40 + Math.random() * 60}px" borderRadius="4px" />
-							<SkeletonBox width="24px" height="12px" />
-						</div>
-					{/each}
-				</div>
-			</div>
-
-			<!-- Priority Donut Chart -->
-			<div class="chart-card donut">
-				<div class="chart-header">
-					<SkeletonBox width="100px" height="20px" />
-				</div>
-				<div class="donut-wrapper">
-					<SkeletonBox width="140px" height="140px" borderRadius="50%" />
-				</div>
-				<div class="legend">
-					{#each Array(legendItems) as _}
-						<div class="legend-item">
-							<SkeletonBox width="12px" height="12px" borderRadius="3px" />
-							<SkeletonBox width="60px" height="14px" />
-						</div>
-					{/each}
-				</div>
-			</div>
-		</div>
-
-		<!-- Project Progress -->
-		<div class="chart-card projects">
-			<div class="chart-header">
-				<SkeletonBox width="130px" height="20px" />
-			</div>
-			<div class="progress-bars">
-				{#each Array(progressItems) as _, i}
-					<div class="progress-item" style="opacity: {Math.max(0.4, 1 - i * 0.15)};">
-						<div class="progress-header">
-							<SkeletonBox width="{100 + i * 20}px" height="16px" />
-							<SkeletonBox width="40px" height="14px" />
-						</div>
-						<SkeletonBox width="100%" height="8px" borderRadius="4px" />
-					</div>
-				{/each}
-			</div>
-		</div>
-	</div>
-
-	<!-- Additional Stats -->
-	{#if showAdditionalStats}
-		<div class="additional-stats">
-			{#each Array(3) as _}
-				<div class="small-stat">
-					<SkeletonBox width="120px" height="12px" />
-					<SkeletonBox width="80px" height="18px" />
-				</div>
-			{/each}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.statistics-skeleton {
-		display: flex;
-		flex-direction: column;
-		gap: 1.5rem;
-	}
-
-	/* Stats Overview */
-	.stats-overview {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-		gap: 1rem;
-	}
-
-	.stat-card {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-		padding: 1rem;
-		background: hsl(var(--color-card));
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 1rem;
-	}
-
-	.stat-content {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-	}
-
-	/* Charts Grid */
-	.charts-grid {
-		display: flex;
-		flex-direction: column;
-		gap: 1.5rem;
-	}
-
-	.chart-card {
-		background: hsl(var(--color-card));
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 1rem;
-		padding: 1.25rem;
-	}
-
-	.chart-header {
-		margin-bottom: 1rem;
-	}
-
-	/* Heatmap */
-	.heatmap-grid {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	.heatmap-row {
-		display: flex;
-		gap: 4px;
-	}
-
-	/* Charts Row */
-	.charts-row {
-		display: grid;
-		grid-template-columns: 1fr;
-		gap: 1.5rem;
-	}
-
-	@media (min-width: 768px) {
-		.charts-row {
-			grid-template-columns: 2fr 1fr;
-		}
-	}
-
-	/* Trend Chart */
-	.trend-bars {
-		display: flex;
-		align-items: flex-end;
-		justify-content: space-between;
-		height: 120px;
-		padding-top: 1rem;
-	}
-
-	.bar-wrapper {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	/* Donut Chart */
-	.donut-wrapper {
-		display: flex;
-		justify-content: center;
-		padding: 1rem 0;
-	}
-
-	.legend {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.75rem;
-		justify-content: center;
-		margin-top: 1rem;
-	}
-
-	.legend-item {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-	}
-
-	/* Project Progress */
-	.progress-bars {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
-
-	.progress-item {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.progress-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	/* Additional Stats */
-	.additional-stats {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-		gap: 1rem;
-	}
-
-	.small-stat {
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-		padding: 1rem;
-		background: hsl(var(--color-card));
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 1rem;
-	}
-</style>
diff --git a/packages/shared-ui/src/charts/StatsGrid.svelte b/packages/shared-ui/src/charts/StatsGrid.svelte
deleted file mode 100644
index d23057011..000000000
--- a/packages/shared-ui/src/charts/StatsGrid.svelte
+++ /dev/null
@@ -1,136 +0,0 @@
-<script lang="ts">
-	import type { StatItem } from './types';
-	import { STAT_VARIANT_COLORS } from './types';
-
-	interface Props {
-		items: StatItem[];
-		columns?: 2 | 3 | 4 | 6;
-	}
-
-	let { items, columns = 6 }: Props = $props();
-
-	// Filter items based on showCondition
-	let visibleItems = $derived(items.filter((item) => item.showCondition !== false));
-</script>
-
-<div
-	class="stats-grid"
-	class:cols-2={columns === 2}
-	class:cols-3={columns === 3}
-	class:cols-4={columns === 4}
-	class:cols-6={columns === 6}
->
-	{#each visibleItems as item (item.id)}
-		<div class="stat-card">
-			<div
-				class="stat-icon"
-				style="background-color: {STAT_VARIANT_COLORS[item.variant]
-					.bg}; color: {STAT_VARIANT_COLORS[item.variant].color}"
-			>
-				<item.icon size={24} />
-			</div>
-			<div class="stat-content">
-				<span class="stat-value">{item.value}</span>
-				<span class="stat-label">{item.label}</span>
-			</div>
-		</div>
-	{/each}
-</div>
-
-<style>
-	.stats-grid {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		gap: 1rem;
-	}
-
-	/* Default responsive behavior for 6 columns */
-	.stats-grid.cols-6 {
-		grid-template-columns: repeat(2, 1fr);
-	}
-
-	@media (min-width: 640px) {
-		.stats-grid.cols-6 {
-			grid-template-columns: repeat(3, 1fr);
-		}
-		.stats-grid.cols-3 {
-			grid-template-columns: repeat(3, 1fr);
-		}
-		.stats-grid.cols-4 {
-			grid-template-columns: repeat(2, 1fr);
-		}
-	}
-
-	@media (min-width: 1024px) {
-		.stats-grid.cols-6 {
-			grid-template-columns: repeat(6, 1fr);
-		}
-		.stats-grid.cols-4 {
-			grid-template-columns: repeat(4, 1fr);
-		}
-	}
-
-	.stats-grid.cols-2 {
-		grid-template-columns: repeat(2, 1fr);
-	}
-
-	.stats-grid.cols-3 {
-		grid-template-columns: repeat(2, 1fr);
-	}
-
-	.stat-card {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		padding: 1rem;
-		background: rgba(255, 255, 255, 0.95);
-		backdrop-filter: blur(20px);
-		-webkit-backdrop-filter: blur(20px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		border-radius: 1rem;
-		transition:
-			transform 0.2s ease,
-			box-shadow 0.2s ease;
-	}
-
-	.stat-card:hover {
-		transform: translateY(-2px);
-		box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
-	}
-
-	:global(.dark) .stat-card {
-		background: rgba(30, 30, 30, 0.95);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-	}
-
-	.stat-icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 44px;
-		height: 44px;
-		border-radius: 0.75rem;
-		flex-shrink: 0;
-	}
-
-	.stat-content {
-		display: flex;
-		flex-direction: column;
-		min-width: 0;
-	}
-
-	.stat-value {
-		font-size: 1.5rem;
-		font-weight: 700;
-		line-height: 1.2;
-		color: hsl(var(--color-foreground));
-	}
-
-	.stat-label {
-		font-size: 0.75rem;
-		color: hsl(var(--color-muted-foreground));
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-</style>
diff --git a/packages/shared-ui/src/charts/TrendLineChart.svelte b/packages/shared-ui/src/charts/TrendLineChart.svelte
deleted file mode 100644
index 6766a6056..000000000
--- a/packages/shared-ui/src/charts/TrendLineChart.svelte
+++ /dev/null
@@ -1,241 +0,0 @@
-<script lang="ts">
-	import type { TrendDataPoint } from './types';
-
-	interface Props {
-		data: TrendDataPoint[];
-		title?: string;
-		height?: number;
-		/** Item name for tooltip (e.g., "Aufgabe", "Event", "Kontakt") */
-		itemName?: string;
-		/** Plural item name for tooltip (e.g., "Aufgaben", "Events", "Kontakte") */
-		itemNamePlural?: string;
-	}
-
-	let {
-		data,
-		title = 'Trend (letzte 4 Wochen)',
-		height = 200,
-		itemName = 'Aufgabe',
-		itemNamePlural = 'Aufgaben',
-	}: Props = $props();
-
-	// Chart dimensions
-	const WIDTH = 600;
-	const PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
-
-	let chartWidth = WIDTH - PADDING.left - PADDING.right;
-	// svelte-ignore state_referenced_locally
-	let chartHeight = height - PADDING.top - PADDING.bottom;
-
-	// Calculate max for scaling
-	let maxCount = $derived(Math.max(...data.map((d) => d.count), 1));
-
-	// Scale functions
-	function scaleX(index: number): number {
-		if (data.length <= 1) return PADDING.left;
-		return PADDING.left + (index / (data.length - 1)) * chartWidth;
-	}
-
-	function scaleY(value: number): number {
-		return PADDING.top + chartHeight - (value / maxCount) * chartHeight;
-	}
-
-	// Generate path for the line
-	let linePath = $derived.by(() => {
-		if (data.length === 0) return '';
-
-		const points = data.map((d, i) => ({
-			x: scaleX(i),
-			y: scaleY(d.count),
-		}));
-
-		// Create smooth curve using cubic bezier
-		let path = `M ${points[0].x} ${points[0].y}`;
-
-		for (let i = 1; i < points.length; i++) {
-			const prev = points[i - 1];
-			const curr = points[i];
-			const cpX = (prev.x + curr.x) / 2;
-			path += ` C ${cpX} ${prev.y}, ${cpX} ${curr.y}, ${curr.x} ${curr.y}`;
-		}
-
-		return path;
-	});
-
-	// Generate path for the area fill
-	let areaPath = $derived.by(() => {
-		if (data.length === 0) return '';
-
-		const baseline = PADDING.top + chartHeight;
-		return `${linePath} L ${scaleX(data.length - 1)} ${baseline} L ${scaleX(0)} ${baseline} Z`;
-	});
-
-	// Y-axis ticks
-	let yTicks = $derived.by(() => {
-		const tickCount = 4;
-		const step = maxCount / tickCount;
-		return Array.from({ length: tickCount + 1 }, (_, i) => Math.round(i * step));
-	});
-
-	// X-axis labels (show every 7th day for weekly labels)
-	let xLabels = $derived.by(() => {
-		const labels: { index: number; label: string }[] = [];
-		const step = Math.max(1, Math.floor(data.length / 4));
-
-		for (let i = 0; i < data.length; i += step) {
-			if (data[i]) {
-				labels.push({ index: i, label: data[i].date.slice(5) }); // MM-DD format
-			}
-		}
-
-		return labels;
-	});
-
-	// Generate unique gradient ID
-	let gradientId = $derived(`areaGradient-${Math.random().toString(36).slice(2, 9)}`);
-
-	function formatTooltip(point: TrendDataPoint): string {
-		const name = point.count === 1 ? itemName : itemNamePlural;
-		return `${point.count} ${name} am ${point.date}`;
-	}
-</script>
-
-<div class="chart-container">
-	<h3 class="chart-title">{title}</h3>
-
-	<svg viewBox="0 0 {WIDTH} {height}" class="chart-svg" preserveAspectRatio="xMidYMid meet">
-		<!-- Grid lines -->
-		{#each yTicks as tick}
-			<line
-				x1={PADDING.left}
-				y1={scaleY(tick)}
-				x2={WIDTH - PADDING.right}
-				y2={scaleY(tick)}
-				class="grid-line"
-			/>
-		{/each}
-
-		<!-- Area fill with gradient -->
-		<defs>
-			<linearGradient id={gradientId} x1="0%" y1="0%" x2="0%" y2="100%">
-				<stop offset="0%" class="gradient-start" />
-				<stop offset="100%" class="gradient-end" />
-			</linearGradient>
-		</defs>
-
-		<path d={areaPath} fill="url(#{gradientId})" class="area-path" />
-
-		<!-- Line -->
-		<path d={linePath} class="line-path" />
-
-		<!-- Data points -->
-		{#each data as point, i}
-			<circle cx={scaleX(i)} cy={scaleY(point.count)} r={4} class="data-point">
-				<title>{formatTooltip(point)}</title>
-			</circle>
-		{/each}
-
-		<!-- Y-axis labels -->
-		{#each yTicks as tick}
-			<text x={PADDING.left - 8} y={scaleY(tick) + 4} class="y-label">
-				{tick}
-			</text>
-		{/each}
-
-		<!-- X-axis labels -->
-		{#each xLabels as label}
-			<text x={scaleX(label.index)} y={height - 8} class="x-label">
-				{label.label}
-			</text>
-		{/each}
-	</svg>
-</div>
-
-<style>
-	.chart-container {
-		background: rgba(255, 255, 255, 0.95);
-		backdrop-filter: blur(20px);
-		-webkit-backdrop-filter: blur(20px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		border-radius: 1.5rem;
-		padding: 1.5rem;
-	}
-
-	:global(.dark) .chart-container {
-		background: rgba(30, 30, 30, 0.95);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-	}
-
-	.chart-title {
-		font-size: 1rem;
-		font-weight: 600;
-		color: hsl(var(--color-foreground));
-		margin: 0 0 1rem 0;
-	}
-
-	.chart-svg {
-		width: 100%;
-		height: auto;
-		max-height: 200px;
-	}
-
-	.grid-line {
-		stroke: hsl(var(--color-muted) / 0.3);
-		stroke-width: 1;
-		stroke-dasharray: 4 4;
-	}
-
-	:global(.dark) .grid-line {
-		stroke: rgba(255, 255, 255, 0.1);
-	}
-
-	.area-path {
-		transition: opacity 0.3s ease;
-	}
-
-	.gradient-start {
-		stop-color: hsl(var(--color-primary));
-		stop-opacity: 0.3;
-	}
-
-	.gradient-end {
-		stop-color: hsl(var(--color-primary));
-		stop-opacity: 0.05;
-	}
-
-	.line-path {
-		fill: none;
-		stroke: hsl(var(--color-primary));
-		stroke-width: 2.5;
-		stroke-linecap: round;
-		stroke-linejoin: round;
-	}
-
-	.data-point {
-		fill: hsl(var(--color-primary));
-		stroke: white;
-		stroke-width: 2;
-		cursor: pointer;
-		transition: r 0.15s ease;
-	}
-
-	.data-point:hover {
-		r: 6;
-	}
-
-	:global(.dark) .data-point {
-		stroke: #1e1e1e;
-	}
-
-	.y-label {
-		font-size: 10px;
-		fill: hsl(var(--color-muted-foreground));
-		text-anchor: end;
-	}
-
-	.x-label {
-		font-size: 10px;
-		fill: hsl(var(--color-muted-foreground));
-		text-anchor: middle;
-	}
-</style>
diff --git a/packages/shared-ui/src/charts/index.ts b/packages/shared-ui/src/charts/index.ts
deleted file mode 100644
index 6246fd8a8..000000000
--- a/packages/shared-ui/src/charts/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Charts - Statistics Visualization Components
-export { default as StatsGrid } from './StatsGrid.svelte';
-export { default as ActivityHeatmap } from './ActivityHeatmap.svelte';
-export { default as TrendLineChart } from './TrendLineChart.svelte';
-export { default as DonutChart } from './DonutChart.svelte';
-export { default as ProgressBars } from './ProgressBars.svelte';
-export { default as StatisticsSkeleton } from './StatisticsSkeleton.svelte';
-
-// Types
-export type {
-	StatVariant,
-	StatItem,
-	HeatmapDataPoint,
-	TrendDataPoint,
-	DonutSegment,
-	ProgressItem,
-} from './types';
-
-// Constants
-export { STAT_VARIANT_COLORS } from './types';
diff --git a/packages/shared-ui/src/charts/types.ts b/packages/shared-ui/src/charts/types.ts
deleted file mode 100644
index 774b0d993..000000000
--- a/packages/shared-ui/src/charts/types.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Shared Types for Chart Components
- */
-
-import type { Component } from 'svelte';
-
-// Stat card variant colors
-export type StatVariant = 'success' | 'primary' | 'neutral' | 'danger' | 'info' | 'accent';
-
-export const STAT_VARIANT_COLORS: Record<StatVariant, { bg: string; color: string }> = {
-	success: { bg: 'rgba(16, 185, 129, 0.15)', color: '#10B981' },
-	primary: { bg: 'rgba(139, 92, 246, 0.15)', color: '#8B5CF6' },
-	neutral: { bg: 'rgba(107, 114, 128, 0.15)', color: '#6B7280' },
-	danger: { bg: 'rgba(239, 68, 68, 0.15)', color: '#EF4444' },
-	info: { bg: 'rgba(59, 130, 246, 0.15)', color: '#3B82F6' },
-	accent: { bg: 'rgba(236, 72, 153, 0.15)', color: '#EC4899' },
-};
-
-// StatsGrid types
-export interface StatItem {
-	id: string;
-	label: string;
-	value: number | string;
-	icon: Component;
-	variant: StatVariant;
-	/** Optional: only show this stat if condition is true */
-	showCondition?: boolean;
-}
-
-// ActivityHeatmap types
-export interface HeatmapDataPoint {
-	date: string; // YYYY-MM-DD format
-	count: number;
-	dayOfWeek: number; // 0-6 (Sunday-Saturday)
-}
-
-// TrendLineChart types
-export interface TrendDataPoint {
-	date: string; // YYYY-MM-DD format
-	count: number;
-	label?: string;
-}
-
-// DonutChart types
-export interface DonutSegment {
-	id: string;
-	label: string;
-	count: number;
-	percentage: number;
-	color: string;
-}
-
-// ProgressBars types
-export interface ProgressItem {
-	id: string;
-	name: string;
-	color: string;
-	total: number;
-	completed: number;
-	inProgress?: number;
-	percentage: number;
-}
diff --git a/packages/shared-ui/src/components/DevBuildBadge.svelte b/packages/shared-ui/src/components/DevBuildBadge.svelte
deleted file mode 100644
index 1de94ebaf..000000000
--- a/packages/shared-ui/src/components/DevBuildBadge.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts">
-	interface Props {
-		commitHash?: string;
-		buildTime?: string;
-	}
-
-	let { commitHash = 'unknown', buildTime = '' }: Props = $props();
-
-	let formattedTime = $derived.by(() => {
-		if (!buildTime) return '';
-		try {
-			const d = new Date(buildTime);
-			return d.toLocaleString('de-DE', {
-				month: '2-digit',
-				day: '2-digit',
-				hour: '2-digit',
-				minute: '2-digit',
-			});
-		} catch {
-			return buildTime;
-		}
-	});
-
-	let expanded = $state(false);
-</script>
-
-<button
-	class="dev-badge"
-	class:expanded
-	onclick={() => (expanded = !expanded)}
-	title="Build: {commitHash} | {buildTime}"
->
-	{#if expanded}
-		<span class="dev-badge-detail">{commitHash} &middot; {formattedTime}</span>
-	{:else}
-		<span class="dev-badge-hash">{commitHash}</span>
-	{/if}
-</button>
-
-<style>
-	.dev-badge {
-		position: fixed;
-		bottom: 8px;
-		right: 8px;
-		z-index: 9999;
-		font-family: ui-monospace, monospace;
-		font-size: 10px;
-		line-height: 1;
-		padding: 3px 6px;
-		border-radius: 4px;
-		border: none;
-		background: rgba(0, 0, 0, 0.4);
-		color: rgba(255, 255, 255, 0.7);
-		cursor: pointer;
-		pointer-events: auto;
-		opacity: 0.5;
-		transition: opacity 150ms ease;
-		backdrop-filter: blur(4px);
-		-webkit-backdrop-filter: blur(4px);
-	}
-
-	.dev-badge:hover {
-		opacity: 1;
-	}
-
-	.dev-badge.expanded {
-		opacity: 0.85;
-	}
-
-	.dev-badge-hash {
-		letter-spacing: 0.5px;
-	}
-
-	.dev-badge-detail {
-		white-space: nowrap;
-	}
-</style>
diff --git a/packages/shared-ui/src/components/ImmersiveModeToggle.svelte b/packages/shared-ui/src/components/ImmersiveModeToggle.svelte
deleted file mode 100644
index 31d9bec91..000000000
--- a/packages/shared-ui/src/components/ImmersiveModeToggle.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script lang="ts">
-	import { CaretDown, CaretUp } from '@mana/shared-icons';
-
-	interface Props {
-		/** Whether immersive mode is currently enabled */
-		isImmersive: boolean;
-		/** Callback to toggle immersive mode */
-		onToggle: () => void;
-		/** Whether to show the toggle (e.g., only on main page) */
-		visible?: boolean;
-	}
-
-	let { isImmersive, onToggle, visible = true }: Props = $props();
-</script>
-
-{#if visible}
-	<button
-		class="immersive-toggle"
-		class:immersive={isImmersive}
-		onclick={onToggle}
-		title={isImmersive ? 'UI anzeigen (F)' : 'UI verstecken (F)'}
-	>
-		{#if isImmersive}
-			<CaretUp size={20} />
-		{:else}
-			<CaretDown size={20} />
-		{/if}
-	</button>
-{/if}
-
-<style>
-	.immersive-toggle {
-		position: fixed;
-		bottom: 0;
-		left: 50%;
-		transform: translateX(-50%);
-		z-index: 9999;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 80px;
-		height: 24px;
-		border-radius: 8px 8px 0 0;
-		border: none;
-		background: transparent;
-		color: hsl(var(--color-muted-foreground));
-		cursor: pointer;
-		pointer-events: auto;
-		transition:
-			opacity 300ms ease,
-			background 150ms ease,
-			color 150ms ease;
-	}
-
-	.immersive-toggle:hover {
-		background: rgba(255, 255, 255, 0.85);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		color: #374151;
-		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -2px rgba(0, 0, 0, 0.1);
-	}
-
-	.immersive-toggle:active {
-		background: rgba(255, 255, 255, 0.95);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-	}
-
-	/* Dark mode hover */
-	:global(.dark) .immersive-toggle:hover {
-		background: rgba(255, 255, 255, 0.12);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-		color: #f3f4f6;
-	}
-
-	:global(.dark) .immersive-toggle:active {
-		background: rgba(255, 255, 255, 0.2);
-	}
-
-	/* Immersive mode: even more subtle, full opacity on hover */
-	.immersive-toggle.immersive {
-		opacity: 0.2;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.immersive-toggle.immersive:hover {
-		opacity: 1;
-		background: rgba(255, 255, 255, 0.85);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		color: #374151;
-		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -2px rgba(0, 0, 0, 0.1);
-	}
-
-	:global(.dark) .immersive-toggle.immersive:hover {
-		background: rgba(255, 255, 255, 0.12);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-		color: #f3f4f6;
-	}
-
-	/* Mobile adjustments */
-	@media (max-width: 640px) {
-		.immersive-toggle {
-			bottom: env(safe-area-inset-bottom);
-		}
-	}
-</style>
diff --git a/packages/shared-ui/src/components/SyncIndicator.svelte b/packages/shared-ui/src/components/SyncIndicator.svelte
deleted file mode 100644
index a4bd39bb2..000000000
--- a/packages/shared-ui/src/components/SyncIndicator.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<!--
-  SyncIndicator — Shows online/offline status as a floating pill.
-  Appears when browser goes offline. Shows "Wieder online" briefly on reconnect.
-  Usage: Just add <SyncIndicator /> to any layout. No props needed.
--->
-
-<script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
-	import { Check } from '@mana/shared-icons';
-
-	let isOnline = $state(true);
-	let showReconnected = $state(false);
-	let visible = $state(false);
-
-	function handleOnline() {
-		isOnline = true;
-		showReconnected = true;
-		visible = true;
-		setTimeout(() => {
-			showReconnected = false;
-			visible = false;
-		}, 3000);
-	}
-
-	function handleOffline() {
-		isOnline = false;
-		visible = true;
-	}
-
-	onMount(() => {
-		isOnline = navigator.onLine;
-		visible = !isOnline;
-		window.addEventListener('online', handleOnline);
-		window.addEventListener('offline', handleOffline);
-	});
-
-	onDestroy(() => {
-		if (typeof window !== 'undefined') {
-			window.removeEventListener('online', handleOnline);
-			window.removeEventListener('offline', handleOffline);
-		}
-	});
-</script>
-
-{#if visible}
-	{@const colorClass = isOnline ? 'bg-green-600 text-green-50' : 'bg-amber-600 text-amber-50'}
-	<div
-		class="fixed bottom-20 right-4 z-40 flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium shadow-lg backdrop-blur-sm transition-all duration-300 {colorClass}"
-	>
-		{#if !isOnline}
-			<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M18.364 5.636a9 9 0 010 12.728M5.636 5.636a9 9 0 000 12.728"
-				/>
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1l22 22" />
-			</svg>
-			<span>Offline</span>
-		{:else if showReconnected}
-			<Check size={20} />
-			<span>Wieder online</span>
-		{/if}
-	</div>
-{/if}
diff --git a/packages/shared-ui/src/context-menu/index.ts b/packages/shared-ui/src/context-menu/index.ts
deleted file mode 100644
index 59acefbf5..000000000
--- a/packages/shared-ui/src/context-menu/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as ContextMenu } from './ContextMenu.svelte';
-export type { ContextMenuItem, ContextMenuState } from './types';
-export { createContextMenuState } from './types';
diff --git a/packages/shared-ui/src/context-menu/types.ts b/packages/shared-ui/src/context-menu/types.ts
deleted file mode 100644
index c1bb498ba..000000000
--- a/packages/shared-ui/src/context-menu/types.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { Component } from 'svelte';
-
-export interface ContextMenuItem {
-	/** Unique identifier for the item */
-	id: string;
-	/** Display label */
-	label: string;
-	/** Icon component to render (Phosphor icon or any Svelte component) */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	icon?: Component<any>;
-	/** Keyboard shortcut hint */
-	shortcut?: string;
-	/** Whether the item is disabled */
-	disabled?: boolean;
-	/** Visual variant */
-	variant?: 'default' | 'danger';
-	/** Item type - use 'divider' for separator */
-	type?: 'item' | 'divider';
-	/** Action to perform when clicked */
-	action?: () => void;
-	/** Additional data attached to the item */
-	data?: unknown;
-	/** Show a toggle switch (for boolean settings) */
-	toggle?: boolean;
-	/** Current toggle state (only used when toggle is true) */
-	checked?: boolean;
-}
-
-export interface ContextMenuState<T = unknown> {
-	visible: boolean;
-	x: number;
-	y: number;
-	target: T | null;
-}
-
-/**
- * Creates a context menu state object
- */
-export function createContextMenuState<T = unknown>(): ContextMenuState<T> {
-	return {
-		visible: false,
-		x: 0,
-		y: 0,
-		target: null,
-	};
-}
diff --git a/packages/shared-ui/src/dnd/ActionZone.svelte b/packages/shared-ui/src/dnd/ActionZone.svelte
index 05f8b6050..067146533 100644
--- a/packages/shared-ui/src/dnd/ActionZone.svelte
+++ b/packages/shared-ui/src/dnd/ActionZone.svelte
@@ -1,57 +1,45 @@
 <script lang="ts">
 	/**
 	 * Drop zone that appears when a drag is active (Layer 1 or Layer 2).
-	 *
-	 * Slides in from the bottom during any drag, acts as a drop target
-	 * for actions like delete, archive, etc.
-	 *
-	 * Usage:
-	 *   <ActionZone
-	 *     accepts={['task', 'card']}
-	 *     onDrop={(payload) => deleteItem(payload.data.id)}
-	 *     variant="danger"
-	 *     label="Löschen"
-	 *   />
 	 */
-
 	import { dragState } from './drag-state.svelte';
 	import { dropTarget } from './drop-target';
 	import { passiveDropZone } from './passive-drop';
 	import type { DragPayload, DragType } from './types';
-	import { Trash, Archive, FolderOpen } from '@mana/shared-icons';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
+
+	type Variant = 'danger' | 'warning' | 'info' | 'success';
 
 	interface Props {
 		accepts: DragType[];
 		onDrop: (payload: DragPayload) => void;
 		canDrop?: (payload: DragPayload) => boolean;
-		variant?: 'danger' | 'warning' | 'info' | 'success';
+		variant?: Variant;
 		label?: string;
-		icon?: typeof Trash;
+		/** Custom inline SVG path for the icon. Falls back to a per-variant default. */
+		iconSvg?: string;
 	}
 
-	let { accepts, onDrop, canDrop, variant = 'danger', label = '', icon }: Props = $props();
+	let { accepts, onDrop, canDrop, variant = 'danger', label = '', iconSvg }: Props = $props();
 
 	const visible = $derived(dragState.anyDragActive);
 
-	const iconComponent = $derived(
-		icon ?? (variant === 'danger' ? Trash : variant === 'warning' ? Archive : FolderOpen)
-	);
+	const defaultIconName = $derived.by(() => {
+		if (variant === 'danger') return 'trash' as const;
+		if (variant === 'warning') return 'archive' as const;
+		if (variant === 'info') return 'info' as const;
+		return 'check' as const;
+	});
 
-	// The zone is both a Layer 1 drop target and a Layer 2 passive zone
 	function handleDrop(payload: DragPayload) {
 		onDrop(payload);
 	}
 </script>
 
 {#if visible}
-	{@const Icon = iconComponent}
 	<div
 		class="action-zone variant-{variant}"
-		use:dropTarget={{
-			accepts,
-			onDrop: handleDrop,
-			canDrop,
-		}}
+		use:dropTarget={{ accepts, onDrop: handleDrop, canDrop }}
 		use:passiveDropZone={{
 			accepts,
 			onDrop: handleDrop,
@@ -61,7 +49,11 @@
 		role="button"
 		tabindex="-1"
 	>
-		<Icon size={20} weight="bold" />
+		{#if iconSvg}
+			<DynamicIcon {iconSvg} size="lg" />
+		{:else}
+			<DynamicIcon name={defaultIconName} size="lg" />
+		{/if}
 		{#if label}
 			<span class="action-label">{label}</span>
 		{/if}
@@ -80,11 +72,15 @@
 		gap: 0.5rem;
 		padding: 0.75rem 1.5rem;
 		border-radius: 9999px;
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		transition: all 0.2s ease;
+		border-width: 1.5px;
+		border-style: solid;
+		transition:
+			background-color 200ms ease,
+			border-color 200ms ease,
+			transform 200ms ease;
 		animation: action-zone-in 200ms ease-out;
 		cursor: default;
+		font-family: inherit;
 	}
 
 	@keyframes action-zone-in {
@@ -104,32 +100,30 @@
 		white-space: nowrap;
 	}
 
-	/* Variants */
 	.variant-danger {
-		background: rgba(239, 68, 68, 0.15);
-		border: 1.5px solid rgba(239, 68, 68, 0.3);
-		color: #ef4444;
+		background: hsl(var(--color-error) / 0.15);
+		border-color: hsl(var(--color-error) / 0.3);
+		color: hsl(var(--color-error));
 	}
 
 	.variant-warning {
-		background: rgba(245, 158, 11, 0.15);
-		border: 1.5px solid rgba(245, 158, 11, 0.3);
-		color: #f59e0b;
+		background: hsl(var(--color-warning) / 0.15);
+		border-color: hsl(var(--color-warning) / 0.3);
+		color: hsl(var(--color-warning));
 	}
 
 	.variant-info {
-		background: rgba(59, 130, 246, 0.15);
-		border: 1.5px solid rgba(59, 130, 246, 0.3);
-		color: #3b82f6;
+		background: hsl(var(--color-primary) / 0.15);
+		border-color: hsl(var(--color-primary) / 0.3);
+		color: hsl(var(--color-primary));
 	}
 
 	.variant-success {
-		background: rgba(16, 185, 129, 0.15);
-		border: 1.5px solid rgba(16, 185, 129, 0.3);
-		color: #10b981;
+		background: hsl(var(--color-success) / 0.15);
+		border-color: hsl(var(--color-success) / 0.3);
+		color: hsl(var(--color-success));
 	}
 
-	/* Hover state (when item is over the zone) */
 	:global(.action-zone.mana-drop-target-hover),
 	:global(.action-zone.action-zone-active) {
 		transform: translateX(-50%) scale(1.1);
@@ -137,33 +131,28 @@
 
 	:global(.variant-danger.mana-drop-target-hover),
 	:global(.variant-danger.action-zone-active) {
-		background: rgba(239, 68, 68, 0.3);
-		border-color: rgba(239, 68, 68, 0.6);
-		box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
+		background: hsl(var(--color-error) / 0.3);
+		border-color: hsl(var(--color-error) / 0.6);
 	}
 
 	:global(.variant-warning.mana-drop-target-hover),
 	:global(.variant-warning.action-zone-active) {
-		background: rgba(245, 158, 11, 0.3);
-		border-color: rgba(245, 158, 11, 0.6);
-		box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
+		background: hsl(var(--color-warning) / 0.3);
+		border-color: hsl(var(--color-warning) / 0.6);
 	}
 
 	:global(.variant-info.mana-drop-target-hover),
 	:global(.variant-info.action-zone-active) {
-		background: rgba(59, 130, 246, 0.3);
-		border-color: rgba(59, 130, 246, 0.6);
-		box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
+		background: hsl(var(--color-primary) / 0.3);
+		border-color: hsl(var(--color-primary) / 0.6);
 	}
 
 	:global(.variant-success.mana-drop-target-hover),
 	:global(.variant-success.action-zone-active) {
-		background: rgba(16, 185, 129, 0.3);
-		border-color: rgba(16, 185, 129, 0.6);
-		box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
+		background: hsl(var(--color-success) / 0.3);
+		border-color: hsl(var(--color-success) / 0.6);
 	}
 
-	/* Success flash after drop */
 	:global(.action-zone.mana-drop-target-success),
 	:global(.action-zone.mana-passive-zone-success) {
 		animation: action-success 400ms ease-out;
@@ -180,24 +169,4 @@
 			transform: translateX(-50%) scale(1);
 		}
 	}
-
-	:global(.dark) .variant-danger {
-		background: rgba(239, 68, 68, 0.2);
-		border-color: rgba(239, 68, 68, 0.4);
-	}
-
-	:global(.dark) .variant-warning {
-		background: rgba(245, 158, 11, 0.2);
-		border-color: rgba(245, 158, 11, 0.4);
-	}
-
-	:global(.dark) .variant-info {
-		background: rgba(59, 130, 246, 0.2);
-		border-color: rgba(59, 130, 246, 0.4);
-	}
-
-	:global(.dark) .variant-success {
-		background: rgba(16, 185, 129, 0.2);
-		border-color: rgba(16, 185, 129, 0.4);
-	}
 </style>
diff --git a/packages/shared-ui/src/dnd/DragPreview.svelte b/packages/shared-ui/src/dnd/DragPreview.svelte
index 863deb0b7..2367d67a0 100644
--- a/packages/shared-ui/src/dnd/DragPreview.svelte
+++ b/packages/shared-ui/src/dnd/DragPreview.svelte
@@ -6,15 +6,12 @@
 	 *   <DragPreview />
 	 *
 	 * It reads from dragState and renders a pill showing what's being dragged.
-	 * For tags: colored dot + tag name.
-	 * For entities: app color dot + item title + app name.
 	 */
 
 	import { dragState } from './drag-state.svelte';
 	import type { TagDragData } from './types';
 
 	interface Props {
-		/** Resolve display data for a dragged entity. */
 		resolveEntity?: (
 			type: string,
 			data: Record<string, unknown>
@@ -55,7 +52,11 @@
 			<span class="preview-title">{tagData.name}</span>
 		{:else if entityData()}
 			{@const entity = entityData()}
-			<span class="preview-dot" style="background-color: {entity?.color ?? '#6B7280'}"></span>
+			{#if entity?.color}
+				<span class="preview-dot" style="background-color: {entity.color}"></span>
+			{:else}
+				<span class="preview-dot fallback-dot"></span>
+			{/if}
 			<span class="preview-title">{entity?.title}</span>
 			{#if entity?.appName}
 				<span class="preview-app">{entity.appName}</span>
@@ -76,23 +77,14 @@
 		gap: 0.375rem;
 		padding: 0.375rem 0.75rem;
 		border-radius: 9999px;
-		background: rgba(255, 255, 255, 0.95);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid rgba(0, 0, 0, 0.12);
-		box-shadow:
-			0 8px 24px -4px rgba(0, 0, 0, 0.15),
-			0 2px 6px -1px rgba(0, 0, 0, 0.1);
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
 		font-size: 0.8125rem;
 		white-space: nowrap;
 		max-width: 280px;
 		transform: scale(1.05);
 		animation: drag-preview-in 150ms ease-out;
-	}
-
-	:global(.dark) .drag-preview {
-		background: rgba(30, 30, 30, 0.95);
-		border-color: rgba(255, 255, 255, 0.15);
+		font-family: inherit;
 	}
 
 	@keyframes drag-preview-in {
@@ -113,18 +105,19 @@
 		flex-shrink: 0;
 	}
 
+	.fallback-dot {
+		background: hsl(var(--color-muted-foreground));
+	}
+
 	.preview-title {
 		font-weight: 600;
-		color: #1a1a1a;
+		color: hsl(var(--color-foreground));
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-	:global(.dark) .preview-title {
-		color: #e5e5e5;
-	}
 
 	.preview-title.fallback {
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		text-transform: capitalize;
 		font-weight: 500;
 	}
@@ -132,7 +125,7 @@
 	.preview-app {
 		font-size: 0.6875rem;
 		font-weight: 400;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		flex-shrink: 0;
 	}
 </style>
diff --git a/packages/shared-ui/src/help/HelpModal.svelte b/packages/shared-ui/src/help/HelpModal.svelte
deleted file mode 100644
index 4ad0f29a9..000000000
--- a/packages/shared-ui/src/help/HelpModal.svelte
+++ /dev/null
@@ -1,184 +0,0 @@
-<script lang="ts">
-	import { Modal } from '../organisms';
-	import { Keyboard, Hash, X } from '@mana/shared-icons';
-	import KeyboardShortcutsPanel from './KeyboardShortcutsPanel.svelte';
-	import SyntaxHelpPanel from './SyntaxHelpPanel.svelte';
-	import type { HelpModalConfig } from './types';
-
-	interface Props {
-		/** Whether the modal is open */
-		open: boolean;
-		/** Close handler */
-		onClose: () => void;
-		/** Configuration for the modal content */
-		config: HelpModalConfig;
-	}
-
-	let { open, onClose, config }: Props = $props();
-
-	// Determine which tabs to show
-	const hasShortcuts = $derived((config.shortcuts?.length ?? 0) > 0);
-	const hasSyntax = $derived((config.syntax?.length ?? 0) > 0);
-	const showTabs = $derived(config.showTabs ?? (hasShortcuts && hasSyntax));
-
-	// Active tab state
-	// svelte-ignore state_referenced_locally
-	let activeTab = $state<'shortcuts' | 'syntax'>(config.defaultTab ?? 'shortcuts');
-
-	// Reset to default tab when modal opens
-	$effect(() => {
-		if (open) {
-			activeTab = config.defaultTab ?? 'shortcuts';
-		}
-	});
-
-	// If only one type is available, show that one
-	const effectiveTab = $derived(() => {
-		if (!hasShortcuts) return 'syntax';
-		if (!hasSyntax) return 'shortcuts';
-		return activeTab;
-	});
-</script>
-
-<Modal visible={open} {onClose} title="" showHeader={false} maxWidth="md">
-	<div class="help-modal">
-		<!-- Header with Tabs -->
-		<div class="modal-header">
-			{#if showTabs}
-				<div class="tabs">
-					{#if hasShortcuts}
-						<button
-							class="tab"
-							class:active={effectiveTab() === 'shortcuts'}
-							onclick={() => (activeTab = 'shortcuts')}
-						>
-							<Keyboard size={16} weight="bold" />
-							<span>Tastenkürzel</span>
-						</button>
-					{/if}
-					{#if hasSyntax}
-						<button
-							class="tab"
-							class:active={effectiveTab() === 'syntax'}
-							onclick={() => (activeTab = 'syntax')}
-						>
-							<Hash size={16} weight="bold" />
-							<span>Syntax</span>
-						</button>
-					{/if}
-				</div>
-			{:else}
-				<div class="header-title">
-					{#if hasShortcuts}
-						<Keyboard size={18} weight="bold" />
-						<span>Tastenkürzel</span>
-					{:else if hasSyntax}
-						<Hash size={18} weight="bold" />
-						<span>Syntax-Hilfe</span>
-					{/if}
-				</div>
-			{/if}
-			<button class="close-btn" onclick={onClose} aria-label="Schließen">
-				<X size={18} weight="bold" />
-			</button>
-		</div>
-
-		<!-- Content -->
-		<div class="modal-content">
-			{#if effectiveTab() === 'shortcuts' && config.shortcuts}
-				<KeyboardShortcutsPanel categories={config.shortcuts} />
-			{:else if effectiveTab() === 'syntax' && config.syntax}
-				<SyntaxHelpPanel
-					groups={config.syntax}
-					showLiveExample={!!config.liveExample}
-					liveExample={config.liveExample}
-				/>
-			{/if}
-		</div>
-	</div>
-</Modal>
-
-<style>
-	.help-modal {
-		margin: -1.5rem;
-	}
-
-	/* Header */
-	.modal-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0.75rem 1rem;
-		border-bottom: 1px solid hsl(var(--color-border));
-		background: hsl(var(--color-muted) / 0.3);
-	}
-
-	.header-title {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		font-size: 0.9375rem;
-		font-weight: 600;
-		color: hsl(var(--color-foreground));
-	}
-
-	/* Tabs */
-	.tabs {
-		display: flex;
-		gap: 0.25rem;
-		padding: 0.25rem;
-		background: hsl(var(--color-muted) / 0.5);
-		border-radius: var(--radius-lg);
-	}
-
-	.tab {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 1rem;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		color: hsl(var(--color-muted-foreground));
-		background: transparent;
-		border: none;
-		border-radius: var(--radius-md);
-		cursor: pointer;
-		transition: all 0.15s ease;
-	}
-
-	.tab:hover {
-		color: hsl(var(--color-foreground));
-	}
-
-	.tab.active {
-		background: hsl(var(--color-background));
-		color: hsl(var(--color-foreground));
-		box-shadow: 0 1px 3px hsl(var(--color-foreground) / 0.1);
-	}
-
-	.close-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 32px;
-		height: 32px;
-		background: transparent;
-		border: none;
-		border-radius: var(--radius-md);
-		color: hsl(var(--color-muted-foreground));
-		cursor: pointer;
-		transition: all 0.15s ease;
-	}
-
-	.close-btn:hover {
-		background: hsl(var(--color-muted));
-		color: hsl(var(--color-foreground));
-	}
-
-	/* Content */
-	.modal-content {
-		padding: 1.25rem;
-		max-height: 70vh;
-		overflow-y: auto;
-	}
-</style>
diff --git a/packages/shared-ui/src/help/KeyboardShortcutsPanel.svelte b/packages/shared-ui/src/help/KeyboardShortcutsPanel.svelte
deleted file mode 100644
index b484e9b64..000000000
--- a/packages/shared-ui/src/help/KeyboardShortcutsPanel.svelte
+++ /dev/null
@@ -1,251 +0,0 @@
-<script lang="ts">
-	import {
-		Keyboard,
-		ArrowBendDownLeft,
-		ArrowsVertical,
-		X,
-		Mouse,
-		Sparkle,
-		ChatCircle,
-		NavigationArrow,
-	} from '@mana/shared-icons';
-	import type { ShortcutCategory } from './types';
-
-	interface Props {
-		/** Shortcut categories to display */
-		categories: ShortcutCategory[];
-		/** Compact mode for smaller displays */
-		compact?: boolean;
-	}
-
-	let { categories, compact = false }: Props = $props();
-
-	// Default icons for common categories
-	const categoryIcons: Record<string, typeof Keyboard> = {
-		inputbar: Keyboard,
-		dialogs: ChatCircle,
-		navigation: NavigationArrow,
-	};
-
-	// Default icons for common shortcuts based on first key
-	const shortcutIcons: Record<string, typeof Keyboard> = {
-		Enter: ArrowBendDownLeft,
-		Cmd: Sparkle,
-		Ctrl: Sparkle,
-		Esc: X,
-		'↑': ArrowsVertical,
-		'↓': ArrowsVertical,
-		Rechtsklick: Mouse,
-	};
-
-	function getShortcutIcon(keys: string[]) {
-		for (const key of keys) {
-			if (shortcutIcons[key]) {
-				return shortcutIcons[key];
-			}
-		}
-		return Keyboard;
-	}
-
-	function getCategoryIcon(category: ShortcutCategory) {
-		if (category.icon) return category.icon;
-		return categoryIcons[category.id] || Keyboard;
-	}
-</script>
-
-<div class="shortcuts-panel" class:compact>
-	{#each categories as category}
-		{@const CategoryIcon = getCategoryIcon(category)}
-		<div class="category">
-			<div class="category-header">
-				<CategoryIcon size={16} weight="bold" />
-				<span>{category.title}</span>
-			</div>
-
-			<div class="shortcuts-list">
-				{#each category.shortcuts as shortcut}
-					{@const ShortcutIcon = getShortcutIcon(shortcut.keys)}
-					<div class="shortcut-item">
-						<div class="shortcut-icon">
-							<ShortcutIcon size={18} weight="bold" />
-						</div>
-						<div class="shortcut-keys">
-							{#each shortcut.keys as key, i}
-								{#if i > 0}<span class="key-separator">+</span>{/if}
-								<kbd>{key}</kbd>
-							{/each}
-							{#if shortcut.altKeys && !compact}
-								<span class="alt-keys">
-									oder
-									{#each shortcut.altKeys as key, i}
-										{#if i > 0}<span class="key-separator">+</span>{/if}
-										<kbd>{key}</kbd>
-									{/each}
-								</span>
-							{/if}
-						</div>
-						<span class="shortcut-desc">{shortcut.description}</span>
-					</div>
-				{/each}
-			</div>
-		</div>
-	{/each}
-</div>
-
-<style>
-	.shortcuts-panel {
-		display: flex;
-		flex-direction: column;
-		gap: 1.25rem;
-	}
-
-	.category {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.category-header {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		font-size: 0.8125rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.shortcuts-list {
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-	}
-
-	.shortcut-item {
-		display: grid;
-		grid-template-columns: 36px 1fr 1fr;
-		gap: 0.75rem;
-		align-items: center;
-		padding: 0.625rem 0.75rem;
-		background: hsl(var(--color-muted) / 0.3);
-		border-radius: var(--radius-md);
-		transition: background 0.15s ease;
-	}
-
-	.shortcut-item:hover {
-		background: hsl(var(--color-muted) / 0.5);
-	}
-
-	.shortcut-icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 36px;
-		height: 36px;
-		background: hsl(var(--color-primary) / 0.1);
-		color: hsl(var(--color-primary));
-		border-radius: var(--radius-sm);
-	}
-
-	.shortcut-keys {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		flex-wrap: wrap;
-	}
-
-	.shortcut-keys kbd {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 28px;
-		height: 28px;
-		padding: 0 0.5rem;
-		font-size: 0.8125rem;
-		font-weight: 600;
-		font-family: inherit;
-		color: hsl(var(--color-foreground));
-		background: hsl(var(--color-background));
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 6px;
-		box-shadow:
-			0 1px 0 1px hsl(var(--color-border)),
-			0 2px 0 hsl(var(--color-muted));
-	}
-
-	.key-separator {
-		font-size: 0.8125rem;
-		color: hsl(var(--color-muted-foreground));
-		margin: 0 0.1875rem;
-	}
-
-	.alt-keys {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		margin-left: 0.5rem;
-		font-size: 0.8125rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.shortcut-desc {
-		font-size: 0.9375rem;
-		color: hsl(var(--color-foreground));
-	}
-
-	/* Compact mode */
-	.shortcuts-panel.compact .shortcut-item {
-		grid-template-columns: 24px 1fr;
-		grid-template-rows: auto auto;
-		padding: 0.375rem 0.5rem;
-	}
-
-	.shortcuts-panel.compact .shortcut-icon {
-		grid-row: span 2;
-		width: 24px;
-		height: 24px;
-	}
-
-	.shortcuts-panel.compact .shortcut-keys {
-		grid-column: 2;
-	}
-
-	.shortcuts-panel.compact .shortcut-desc {
-		grid-column: 2;
-		font-size: 0.6875rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.shortcuts-panel.compact .alt-keys {
-		display: none;
-	}
-
-	/* Responsive */
-	@media (max-width: 480px) {
-		.shortcut-item {
-			grid-template-columns: 24px 1fr;
-			grid-template-rows: auto auto;
-		}
-
-		.shortcut-icon {
-			grid-row: span 2;
-			width: 24px;
-			height: 24px;
-		}
-
-		.shortcut-keys {
-			grid-column: 2;
-		}
-
-		.shortcut-desc {
-			grid-column: 2;
-			font-size: 0.6875rem;
-			color: hsl(var(--color-muted-foreground));
-		}
-
-		.alt-keys {
-			display: none;
-		}
-	}
-</style>
diff --git a/packages/shared-ui/src/help/SyntaxHelpPanel.svelte b/packages/shared-ui/src/help/SyntaxHelpPanel.svelte
deleted file mode 100644
index 164e0f003..000000000
--- a/packages/shared-ui/src/help/SyntaxHelpPanel.svelte
+++ /dev/null
@@ -1,415 +0,0 @@
-<script lang="ts">
-	import { Hash, At, Calendar, Clock, ArrowFatLineRight } from '@mana/shared-icons';
-	import type { SyntaxGroup, SyntaxColor } from './types';
-
-	interface Props {
-		/** Syntax groups to display */
-		groups: SyntaxGroup[];
-		/** Show live example at the bottom */
-		showLiveExample?: boolean;
-		/** Custom live example */
-		liveExample?: {
-			text: string;
-			highlights: Array<{
-				type: 'text' | 'tag' | 'reference' | 'date' | 'time' | 'priority';
-				content: string;
-			}>;
-		};
-		/** Intro text shown at the top */
-		introText?: string;
-		/** Compact mode for smaller displays */
-		compact?: boolean;
-	}
-
-	let {
-		groups,
-		showLiveExample = true,
-		liveExample,
-		introText = 'Erstelle Einträge mit natürlicher Sprache. Schreibe einfach los – die InputBar erkennt automatisch Daten, Zeiten, Tags und mehr.',
-		compact = false,
-	}: Props = $props();
-
-	// Default icons for common patterns
-	const patternIcons: Record<string, typeof Hash> = {
-		'#tag': Hash,
-		'@name': At,
-		Datum: Calendar,
-		Uhrzeit: Clock,
-		Priorität: ArrowFatLineRight,
-	};
-
-	function getPatternIcon(pattern: string) {
-		return patternIcons[pattern] || Hash;
-	}
-
-	// Default live example if none provided
-	const defaultLiveExample = {
-		text: 'Meeting mit Team morgen 14:00 @arbeit #wichtig',
-		highlights: [
-			{ type: 'text' as const, content: 'Meeting mit Team ' },
-			{ type: 'date' as const, content: 'morgen' },
-			{ type: 'text' as const, content: ' ' },
-			{ type: 'time' as const, content: '14:00' },
-			{ type: 'text' as const, content: ' ' },
-			{ type: 'reference' as const, content: '@arbeit' },
-			{ type: 'text' as const, content: ' ' },
-			{ type: 'tag' as const, content: '#wichtig' },
-		],
-	};
-
-	const example = $derived(liveExample ?? defaultLiveExample);
-</script>
-
-<div class="syntax-panel" class:compact>
-	{#if introText && !compact}
-		<p class="intro-text">{introText}</p>
-	{/if}
-
-	{#each groups as group}
-		<div class="syntax-group">
-			<h3 class="group-title">{group.title}</h3>
-			<div class="group-items">
-				{#each group.items as item}
-					{@const Icon = item.icon ?? getPatternIcon(item.pattern)}
-					<div class="syntax-item">
-						<div class="syntax-icon" data-color={item.color}>
-							<Icon size={compact ? 16 : 20} weight="bold" />
-						</div>
-						<div class="syntax-content">
-							<div class="syntax-header">
-								<code class="pattern" data-color={item.color}>{item.pattern}</code>
-								<span class="syntax-desc">{item.description}</span>
-							</div>
-							<div class="syntax-examples">
-								{#each item.examples as ex}
-									{#if typeof ex === 'string'}
-										<span class="example-tag" data-color={item.color}>{ex}</span>
-									{:else}
-										<span class="example-tag" data-color={ex.color ?? item.color}>
-											{ex.text}
-											{#if ex.label}
-												<span class="example-label">{ex.label}</span>
-											{/if}
-										</span>
-									{/if}
-								{/each}
-							</div>
-						</div>
-					</div>
-				{/each}
-			</div>
-		</div>
-	{/each}
-
-	{#if showLiveExample && !compact}
-		<div class="live-example">
-			<div class="live-label">Beispiel-Eingabe</div>
-			<div class="live-input">
-				{#each example.highlights as hl}
-					<span class="hl-{hl.type}">{hl.content}</span>
-				{/each}
-			</div>
-		</div>
-	{/if}
-</div>
-
-<style>
-	.syntax-panel {
-		display: flex;
-		flex-direction: column;
-		gap: 1.25rem;
-	}
-
-	.intro-text {
-		font-size: 0.9375rem;
-		line-height: 1.5;
-		color: hsl(var(--color-muted-foreground));
-		margin: 0;
-	}
-
-	.syntax-group {
-		display: flex;
-		flex-direction: column;
-		gap: 0.625rem;
-	}
-
-	.group-title {
-		font-size: 0.8125rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: hsl(var(--color-muted-foreground));
-		margin: 0;
-	}
-
-	.group-items {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.syntax-item {
-		display: flex;
-		gap: 0.75rem;
-		padding: 0.75rem;
-		background: hsl(var(--color-muted) / 0.3);
-		border-radius: var(--radius-md);
-		transition: background 0.15s ease;
-	}
-
-	.syntax-item:hover {
-		background: hsl(var(--color-muted) / 0.5);
-	}
-
-	.syntax-icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 40px;
-		height: 40px;
-		border-radius: var(--radius-sm);
-		flex-shrink: 0;
-	}
-
-	.syntax-icon[data-color='primary'] {
-		background: hsl(var(--color-primary) / 0.15);
-		color: hsl(var(--color-primary));
-	}
-
-	.syntax-icon[data-color='success'] {
-		background: hsl(var(--color-success) / 0.15);
-		color: hsl(var(--color-success));
-	}
-
-	.syntax-icon[data-color='accent'] {
-		background: hsl(var(--color-accent, 262 83% 58%) / 0.15);
-		color: hsl(var(--color-accent, 262 83% 58%));
-	}
-
-	.syntax-icon[data-color='error'] {
-		background: hsl(var(--color-error) / 0.15);
-		color: hsl(var(--color-error));
-	}
-
-	.syntax-icon[data-color='warning'] {
-		background: hsl(var(--color-warning, 25 95% 53%) / 0.15);
-		color: hsl(var(--color-warning, 25 95% 53%));
-	}
-
-	.syntax-icon[data-color='warning-soft'] {
-		background: hsl(var(--color-warning, 48 96% 53%) / 0.15);
-		color: hsl(var(--color-warning, 48 96% 53%));
-	}
-
-	.syntax-content {
-		flex: 1;
-		min-width: 0;
-	}
-
-	.syntax-header {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		margin-bottom: 0.375rem;
-	}
-
-	.pattern {
-		font-size: 0.9375rem;
-		font-weight: 600;
-		padding: 0.1875rem 0.5rem;
-		border-radius: var(--radius-sm);
-		background: transparent;
-	}
-
-	.pattern[data-color='primary'] {
-		color: hsl(var(--color-primary));
-		background: hsl(var(--color-primary) / 0.15);
-	}
-
-	.pattern[data-color='success'] {
-		color: hsl(var(--color-success));
-		background: hsl(var(--color-success) / 0.15);
-	}
-
-	.pattern[data-color='accent'] {
-		color: hsl(var(--color-accent, 262 83% 58%));
-		background: hsl(var(--color-accent, 262 83% 58%) / 0.15);
-	}
-
-	.pattern[data-color='error'] {
-		color: hsl(var(--color-error));
-		background: hsl(var(--color-error) / 0.15);
-	}
-
-	.pattern[data-color='warning'] {
-		color: hsl(var(--color-warning, 25 95% 53%));
-		background: hsl(var(--color-warning, 25 95% 53%) / 0.15);
-	}
-
-	.pattern[data-color='warning-soft'] {
-		color: hsl(var(--color-warning, 48 96% 53%));
-		background: hsl(var(--color-warning, 48 96% 53%) / 0.15);
-	}
-
-	.syntax-desc {
-		font-size: 0.9375rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.syntax-examples {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.375rem;
-	}
-
-	.example-tag {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.375rem;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		padding: 0.25rem 0.625rem;
-		border-radius: 9999px;
-	}
-
-	.example-tag[data-color='primary'] {
-		color: hsl(var(--color-primary));
-		background: hsl(var(--color-primary) / 0.1);
-	}
-
-	.example-tag[data-color='success'] {
-		color: hsl(var(--color-success));
-		background: hsl(var(--color-success) / 0.1);
-	}
-
-	.example-tag[data-color='accent'] {
-		color: hsl(var(--color-accent, 262 83% 58%));
-		background: hsl(var(--color-accent, 262 83% 58%) / 0.1);
-	}
-
-	.example-tag[data-color='error'] {
-		color: hsl(var(--color-error));
-		background: hsl(var(--color-error) / 0.1);
-	}
-
-	.example-tag[data-color='warning'] {
-		color: hsl(var(--color-warning, 25 95% 53%));
-		background: hsl(var(--color-warning, 25 95% 53%) / 0.1);
-	}
-
-	.example-tag[data-color='warning-soft'] {
-		color: hsl(var(--color-warning, 48 96% 53%));
-		background: hsl(var(--color-warning, 48 96% 53%) / 0.1);
-	}
-
-	.example-label {
-		font-size: 0.625rem;
-		opacity: 0.7;
-	}
-
-	/* Live Example */
-	.live-example {
-		padding: 1rem;
-		background: hsl(var(--color-muted) / 0.5);
-		border-radius: var(--radius-lg);
-		border: 1px dashed hsl(var(--color-border));
-	}
-
-	.live-label {
-		font-size: 0.6875rem;
-		font-weight: 500;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: hsl(var(--color-muted-foreground));
-		margin-bottom: 0.625rem;
-	}
-
-	.live-input {
-		font-size: 0.9375rem;
-		font-weight: 500;
-		line-height: 1.6;
-		color: hsl(var(--color-foreground));
-	}
-
-	.live-input :global(.hl-text) {
-		color: hsl(var(--color-foreground));
-	}
-
-	.live-input :global(.hl-tag) {
-		color: hsl(var(--color-primary));
-		font-weight: 600;
-	}
-
-	.live-input :global(.hl-reference) {
-		color: hsl(var(--color-success));
-		font-weight: 600;
-	}
-
-	.live-input :global(.hl-date),
-	.live-input :global(.hl-time) {
-		color: hsl(var(--color-accent, 262 83% 58%));
-		font-weight: 600;
-	}
-
-	.live-input :global(.hl-priority) {
-		color: hsl(var(--color-error));
-		font-weight: 600;
-	}
-
-	/* Compact mode */
-	.syntax-panel.compact {
-		gap: 1rem;
-	}
-
-	.syntax-panel.compact .syntax-item {
-		padding: 0.5rem 0.625rem;
-		gap: 0.5rem;
-	}
-
-	.syntax-panel.compact .syntax-icon {
-		width: 28px;
-		height: 28px;
-	}
-
-	.syntax-panel.compact .syntax-header {
-		margin-bottom: 0.25rem;
-	}
-
-	.syntax-panel.compact .pattern {
-		font-size: 0.6875rem;
-	}
-
-	.syntax-panel.compact .syntax-desc {
-		font-size: 0.75rem;
-	}
-
-	.syntax-panel.compact .example-tag {
-		font-size: 0.625rem;
-		padding: 0.125rem 0.375rem;
-	}
-
-	/* Responsive */
-	@media (max-width: 480px) {
-		.syntax-item {
-			flex-direction: column;
-			gap: 0.5rem;
-		}
-
-		.syntax-icon {
-			width: 28px;
-			height: 28px;
-		}
-
-		.syntax-header {
-			flex-wrap: wrap;
-		}
-
-		.live-example {
-			padding: 0.75rem;
-		}
-
-		.live-input {
-			font-size: 0.875rem;
-		}
-	}
-</style>
diff --git a/packages/shared-ui/src/help/constants.ts b/packages/shared-ui/src/help/constants.ts
deleted file mode 100644
index e57e158a7..000000000
--- a/packages/shared-ui/src/help/constants.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { ShortcutCategory, SyntaxGroup } from './types';
-
-/**
- * Common keyboard shortcuts shared across all apps with InputBar
- */
-export const COMMON_SHORTCUTS: ShortcutCategory[] = [
-	{
-		id: 'inputbar',
-		title: 'Eingabefeld',
-		shortcuts: [
-			{
-				keys: ['Enter'],
-				description: 'Auswahl bestätigen / Erstellen',
-				category: 'inputbar',
-			},
-			{
-				keys: ['Cmd', 'Enter'],
-				altKeys: ['Ctrl', 'Enter'],
-				description: 'Direkt erstellen',
-				category: 'inputbar',
-			},
-			{
-				keys: ['Esc'],
-				description: 'Schließen & Eingabe löschen',
-				category: 'inputbar',
-			},
-			{
-				keys: ['↑', '↓'],
-				description: 'Durch Ergebnisse navigieren',
-				category: 'inputbar',
-			},
-			{
-				keys: ['Rechtsklick'],
-				description: 'Einstellungen öffnen',
-				category: 'inputbar',
-			},
-		],
-	},
-	{
-		id: 'dialogs',
-		title: 'Dialoge',
-		shortcuts: [
-			{
-				keys: ['Esc'],
-				description: 'Dialog schließen',
-				category: 'dialogs',
-			},
-		],
-	},
-];
-
-/**
- * Common syntax patterns shared across all apps with InputBar
- */
-export const COMMON_SYNTAX: SyntaxGroup[] = [
-	{
-		title: 'Kategorien & Tags',
-		items: [
-			{
-				pattern: '#tag',
-				description: 'Tag hinzufügen',
-				examples: ['#arbeit', '#privat', '#wichtig'],
-				color: 'primary',
-			},
-			{
-				pattern: '@name',
-				description: 'Kalender oder Projekt zuweisen',
-				examples: ['@team', '@privat', '@projekt'],
-				color: 'success',
-			},
-		],
-	},
-	{
-		title: 'Zeit & Datum',
-		items: [
-			{
-				pattern: 'Datum',
-				description: 'Natürliche Datumsangaben',
-				examples: ['heute', 'morgen', 'montag', 'in 3 tagen', 'nächste woche'],
-				color: 'accent',
-			},
-			{
-				pattern: 'Uhrzeit',
-				description: 'Zeitangaben',
-				examples: ['14:00', '9 uhr', 'um 15:30'],
-				color: 'accent',
-			},
-		],
-	},
-	{
-		title: 'Priorität',
-		items: [
-			{
-				pattern: 'Priorität',
-				description: 'Dringlichkeit festlegen',
-				examples: [
-					{ text: '!!!', label: 'dringend', color: 'error' },
-					{ text: '!!', label: 'hoch', color: 'warning' },
-					{ text: '!', label: 'normal', color: 'warning-soft' },
-				],
-				color: 'error',
-			},
-		],
-	},
-];
-
-/**
- * Default live example for syntax highlighting demo
- */
-export const DEFAULT_LIVE_EXAMPLE = {
-	text: 'Meeting mit Team morgen 14:00 @arbeit #wichtig',
-	highlights: [
-		{ type: 'text' as const, content: 'Meeting mit Team ' },
-		{ type: 'date' as const, content: 'morgen' },
-		{ type: 'text' as const, content: ' ' },
-		{ type: 'time' as const, content: '14:00' },
-		{ type: 'text' as const, content: ' ' },
-		{ type: 'reference' as const, content: '@arbeit' },
-		{ type: 'text' as const, content: ' ' },
-		{ type: 'tag' as const, content: '#wichtig' },
-	],
-};
diff --git a/packages/shared-ui/src/help/index.ts b/packages/shared-ui/src/help/index.ts
deleted file mode 100644
index cf2bbb318..000000000
--- a/packages/shared-ui/src/help/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Help Components
-export { default as HelpModal } from './HelpModal.svelte';
-export { default as KeyboardShortcutsPanel } from './KeyboardShortcutsPanel.svelte';
-export { default as SyntaxHelpPanel } from './SyntaxHelpPanel.svelte';
-
-// Types
-export type {
-	KeyboardShortcut,
-	ShortcutCategory,
-	SyntaxColor,
-	SyntaxExample,
-	SyntaxPattern,
-	SyntaxGroup,
-	HelpModalConfig,
-} from './types';
-
-// Constants
-export { COMMON_SHORTCUTS, COMMON_SYNTAX, DEFAULT_LIVE_EXAMPLE } from './constants';
diff --git a/packages/shared-ui/src/help/types.ts b/packages/shared-ui/src/help/types.ts
deleted file mode 100644
index 6fca61d09..000000000
--- a/packages/shared-ui/src/help/types.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import type { Component } from 'svelte';
-
-/**
- * Represents a single keyboard shortcut
- */
-export interface KeyboardShortcut {
-	/** Keys to press, e.g. ['Cmd', 'Enter'] or ['↑', '↓'] */
-	keys: string[];
-	/** Description of what the shortcut does */
-	description: string;
-	/** Category ID for grouping */
-	category: string;
-	/** Alternative keys (e.g. Ctrl instead of Cmd) */
-	altKeys?: string[];
-}
-
-/**
- * A category/group of related shortcuts
- */
-export interface ShortcutCategory {
-	/** Unique identifier */
-	id: string;
-	/** Display title */
-	title: string;
-	/** Optional icon component */
-	icon?: Component;
-	/** Shortcuts in this category */
-	shortcuts: KeyboardShortcut[];
-}
-
-/**
- * Color variants for syntax highlighting
- */
-export type SyntaxColor = 'primary' | 'success' | 'accent' | 'error' | 'warning' | 'warning-soft';
-
-/**
- * A syntax example - can be a simple string or an object with label
- */
-export type SyntaxExample =
-	| string
-	| {
-			text: string;
-			label?: string;
-			color?: SyntaxColor;
-	  };
-
-/**
- * A syntax pattern that can be used in the InputBar
- */
-export interface SyntaxPattern {
-	/** The pattern syntax, e.g. '#tag', '@name', 'Datum' */
-	pattern: string;
-	/** Description of what the pattern does */
-	description: string;
-	/** Example usages */
-	examples: SyntaxExample[];
-	/** Color for highlighting */
-	color: SyntaxColor;
-	/** Optional icon component */
-	icon?: Component;
-}
-
-/**
- * A group of related syntax patterns
- */
-export interface SyntaxGroup {
-	/** Group title */
-	title: string;
-	/** Patterns in this group */
-	items: SyntaxPattern[];
-}
-
-/**
- * Configuration for the HelpModal
- */
-export interface HelpModalConfig {
-	/** Shortcut categories to display */
-	shortcuts?: ShortcutCategory[];
-	/** Syntax groups to display */
-	syntax?: SyntaxGroup[];
-	/** Whether to show tabs (auto-detected if both shortcuts and syntax are provided) */
-	showTabs?: boolean;
-	/** Default tab to show */
-	defaultTab?: 'shortcuts' | 'syntax';
-	/** Live example text for syntax highlighting demo */
-	liveExample?: {
-		text: string;
-		highlights: Array<{
-			type: 'text' | 'tag' | 'reference' | 'date' | 'time' | 'priority';
-			content: string;
-		}>;
-	};
-}
diff --git a/packages/shared-ui/src/index.ts b/packages/shared-ui/src/index.ts
index 38a03b227..e01e7b29e 100644
--- a/packages/shared-ui/src/index.ts
+++ b/packages/shared-ui/src/index.ts
@@ -1,304 +1,15 @@
-// Atoms
-export { Text, Button, Badge, Card } from './atoms';
+/**
+ * @mana/shared-ui — Vereins-UI-Komponenten, strikte 12-Token-Disziplin.
+ *
+ * Detail-Spec: mana/docs/THEMING.md
+ * Status: PORTING_PLAN.md
+ */
 
-// Molecules
-export {
-	Toggle,
-	Input,
-	Select,
-	Textarea,
-	Checkbox,
-	FilterDropdown,
-	FavoriteButton,
-	ColorPicker,
-	COLORS_12,
-	COLORS_16,
-	DEFAULT_COLOR,
-	getRandomColor,
-	ReminderPicker,
-} from './molecules';
-export type { SelectOption, FilterDropdownOption } from './molecules';
-
-// Stats
-export { GlassCard, StatRow } from './molecules';
-
-// Tags
-export {
-	TagBadge,
-	TagChip,
-	TagColorPicker,
-	TagEditModal,
-	TagSelector,
-	TagField,
-	TagList,
-	TAG_COLORS,
-	DEFAULT_TAG_COLOR,
-	getRandomTagColor,
-	getTagColorByName,
-} from './molecules';
-export type { Tag, TagData, TagColorName, TagColorHex } from './molecules';
-
-// Media
-export { AudioPlayer } from './molecules';
-
-// Loading/Skeletons
-export {
-	SkeletonBox,
-	SkeletonText,
-	SkeletonAvatar,
-	SkeletonRow,
-	SkeletonList,
-	SkeletonCard,
-	SkeletonGrid,
-	AppLoadingSkeleton,
-	calculateFadeOpacity,
-} from './molecules';
-
-// Feedback
-export { EmptyState } from './molecules';
-
-// Contacts
-export { ContactAvatar, ContactBadge, ContactSelector } from './molecules';
-
-// Layout
-export { ModalFooter, DataCard, PageHeader, KeyboardShortcutsPanel } from './molecules';
-
-// Confirmation (inline popover)
-export { ConfirmationPopover } from './molecules';
-
-// Organisms
-export { Modal, ConfirmationModal, FormModal, AppSlider, BaseListView } from './organisms';
-export type { AppItem } from './organisms';
-
-// Network Graph
-export {
-	NetworkGraph,
-	NetworkControls,
-	stringToColor,
-	getInitials,
-	SIMULATION_CONFIG,
-	NODE_CONFIG,
-	LABEL_CONFIG,
-} from './organisms';
-export type {
-	NetworkNode,
-	NetworkLink,
-	NetworkTag,
-	NetworkTransform,
-	NetworkGraphProps,
-	NetworkControlsProps,
-	NetworkGraphResponse,
-	SimulationNode,
-	SimulationLink,
-} from './organisms';
-
-// Navigation
-export {
-	NavLink,
-	Navbar,
-	Sidebar,
-	SidebarSection,
-	PillNavigation,
-	PillDropdown,
-	PillDropdownBar,
-	AppDrawer,
-	GlobalSpotlight,
-	createGlobalSpotlightState,
-	PillTabGroup,
-	PillTagSelector,
-	PillTimeRangeSelector,
-	PillViewSwitcher,
-	PillToolbar,
-	PillToolbarButton,
-	PillToolbarDivider,
-	TagStrip,
-	ExpandableToolbar,
-	createAppNavigationStore,
-	getFavoriteApps,
-	getRecentApps,
-	getUsageCounts,
-	toggleFavoriteApp,
-	recordAppVisit,
-	clearRecentApps,
-} from './navigation';
-export type {
-	NavItem,
-	NavbarProps,
-	SidebarProps,
-	NavLinkProps,
-	KeyboardShortcut,
-	PillNavItem,
-	PillDropdownItem,
-	PillNavElement,
-	PillBarConfig,
-	PillNavigationProps,
-	PillTabOption,
-	PillTabGroupConfig,
-	PillTagItem,
-	PillTagSelectorConfig,
-	ExpandableToolbarProps,
-	RecentAppEntry,
-	SpotlightAction,
-	ContentSearcher,
-	ContentSearchResult,
-	ContentSearchGroup,
-} from './navigation';
-
-// Settings
-export {
-	SettingsPage,
-	SettingsSection,
-	SettingsCard,
-	SettingsRow,
-	SettingsToggle,
-	SettingsSelect,
-	SettingsNumberInput,
-	SettingsTimeInput,
-	SettingsDangerZone,
-	SettingsDangerButton,
-	GlobalSettingsSection,
-} from './settings';
-
-// Input Bar
-export {
-	InputBar,
-	QuickInputBar,
-	InputBarContextMenu,
-	InputBarHelpModal,
-	// Recent history
-	getRecentTags,
-	getRecentReferences,
-	addRecentTag,
-	addRecentReference,
-	extractAndSaveFromInput,
-	clearRecentHistory,
-	createRecentInputHistoryStore,
-	// Settings
-	loadInputBarSettings,
-	saveInputBarSettings,
-	updateInputBarSetting,
-	resetInputBarSettings,
-	createInputBarSettingsStore,
-	getInputBarSettingsStore,
-} from './quick-input';
-export type { QuickInputItem, QuickAction, CreatePreview, InputBarSettings } from './quick-input';
-
-// Shared search/command core — highlight patterns, debounce, common helpers.
-export { getHighlightPatterns, highlightText, SEARCH_DEBOUNCE_MS } from './search-core';
-export type { HighlightPattern } from './search-core';
-
-// Pages
-export { default as AppsPage } from './pages/AppsPage.svelte';
-export { default as OfflinePage } from './pages/OfflinePage.svelte';
-export { default as ProfilePage } from './pages/ProfilePage.svelte';
-export type { UserProfile, ProfileActions } from './pages/profile-types';
-
-// Onboarding
-export { createAppOnboardingStore } from './onboarding/create-app-onboarding.svelte';
-export { default as MiniOnboardingModal } from './onboarding/MiniOnboardingModal.svelte';
-export type {
-	AppOnboardingOption,
-	AppOnboardingStepType,
-	AppOnboardingStepBase,
-	AppOnboardingSelectStep,
-	AppOnboardingToggleStep,
-	AppOnboardingInfoStep,
-	AppOnboardingStep,
-	AppOnboardingConfig,
-	AppOnboardingPreferences,
-	AppOnboardingStore,
-	MiniOnboardingModalProps,
-} from './onboarding/types';
-
-// Charts - Statistics Visualization
-export {
-	StatsGrid,
-	ActivityHeatmap,
-	TrendLineChart,
-	DonutChart,
-	ProgressBars,
-	StatisticsSkeleton,
-	STAT_VARIANT_COLORS,
-} from './charts';
-export type {
-	StatVariant,
-	StatItem,
-	HeatmapDataPoint,
-	TrendDataPoint,
-	DonutSegment,
-	ProgressItem,
-} from './charts';
-
-// Context Menu
-export { ContextMenu, createContextMenuState } from './context-menu';
-export type { ContextMenuItem, ContextMenuState } from './context-menu';
-
-// Help Components
-export {
-	HelpModal,
-	KeyboardShortcutsPanel as HelpKeyboardShortcutsPanel,
-	SyntaxHelpPanel,
-	COMMON_SHORTCUTS,
-	COMMON_SYNTAX,
-	DEFAULT_LIVE_EXAMPLE,
-} from './help';
-export type {
-	KeyboardShortcut as HelpKeyboardShortcut,
-	ShortcutCategory,
-	SyntaxColor,
-	SyntaxExample,
-	SyntaxPattern,
-	SyntaxGroup,
-	HelpModalConfig,
-} from './help';
-
-// Immersive Mode
-export { default as ImmersiveModeToggle } from './components/ImmersiveModeToggle.svelte';
-export { default as DevBuildBadge } from './components/DevBuildBadge.svelte';
-export { default as SyncIndicator } from './components/SyncIndicator.svelte';
-
-// Toast & Global Error Handling
-export {
-	toastStore,
-	toast,
-	handleApiError,
-	ToastContainer,
-	setupGlobalErrorHandler,
-	GLOBAL_ERROR_TRANSLATIONS,
-} from './toast';
-export type {
-	Toast,
-	ToastType,
-	GlobalErrorHandlerOptions,
-	GlobalErrorHandlerTranslations,
-} from './toast';
-
-// Bottom Stack
-export { BottomStack, MinimizedTabs, NotificationBar } from './bottom-stack';
-export type { MinimizedPage, MinimizedTabsCallbacks, BottomNotification } from './bottom-stack';
-
-// Actions
-export { focusTrap } from './actions';
-
-// Drag & Drop
-export {
-	dragSource,
-	dropTarget,
-	passiveDropZone,
-	dragState,
-	registerSvelteActionDrag,
-	clearSvelteActionDrag,
-	isTypeBeingDragged,
-	DragPreview,
-	ActionZone,
-} from './dnd';
-export type {
-	DragType,
-	DragPayload,
-	TagDragData,
-	TaskDragData,
-	DragSourceOptions,
-	DropTargetOptions,
-	PassiveDropZoneOptions,
-	ActionZoneProps,
-} from './dnd';
+export * from './atoms/index';
+export * from './molecules/index';
+export * from './navigation/index';
+export * from './organisms/index';
+export * from './pages/index';
+export * from './toast/index';
+export * from './dnd/index';
+export * from './quick-input/index';
diff --git a/packages/shared-ui/src/molecules/Checkbox.stories.svelte b/packages/shared-ui/src/molecules/Checkbox.stories.svelte
new file mode 100644
index 000000000..70fd947ef
--- /dev/null
+++ b/packages/shared-ui/src/molecules/Checkbox.stories.svelte
@@ -0,0 +1,52 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Checkbox from './Checkbox.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Molecules/Checkbox',
+		component: Checkbox,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<Checkbox label="Newsletter abonnieren" />
+	{/snippet}
+</Story>
+
+<Story name="Checked">
+	{#snippet children()}
+		<Checkbox label="Datenschutz akzeptiert" checked={true} />
+	{/snippet}
+</Story>
+
+<Story name="WithHint">
+	{#snippet children()}
+		<Checkbox
+			label="Verein-Mitgliedschaft anzeigen"
+			hint="Auf deinem öffentlichen Profil sichtbar."
+		/>
+	{/snippet}
+</Story>
+
+<Story name="Indeterminate">
+	{#snippet children()}
+		<Checkbox label="Alle 12 Karten ausgewählt" indeterminate={true} />
+	{/snippet}
+</Story>
+
+<Story name="Disabled">
+	{#snippet children()}
+		<div style="display:flex; flex-direction:column; gap:0.5rem;">
+			<Checkbox label="Disabled (unchecked)" disabled />
+			<Checkbox label="Disabled (checked)" checked={true} disabled />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Required">
+	{#snippet children()}
+		<Checkbox label="AGB akzeptieren" required hint="Pflicht für die Anmeldung." />
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/molecules/Checkbox.svelte b/packages/shared-ui/src/molecules/Checkbox.svelte
index 158808706..e4d75225e 100644
--- a/packages/shared-ui/src/molecules/Checkbox.svelte
+++ b/packages/shared-ui/src/molecules/Checkbox.svelte
@@ -1,173 +1,160 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+
 	interface Props {
-		/** Whether the checkbox is checked */
-		checked: boolean;
-		/** Called when checked state changes */
-		onchange?: (checked: boolean) => void;
-		/** Label text */
+		checked?: boolean;
 		label?: string;
-		/** Description text below label */
-		description?: string;
-		/** Disable the checkbox */
+		hint?: string;
 		disabled?: boolean;
-		/** Show indeterminate state */
+		required?: boolean;
 		indeterminate?: boolean;
-		/** Additional CSS classes */
-		class?: string;
+		id?: string;
+		name?: string;
+		ariaLabel?: string;
+		onchange?: (e: Event) => void;
+		children?: Snippet;
 	}
 
 	let {
-		checked = $bindable(),
-		onchange,
+		checked = $bindable(false),
 		label,
-		description,
+		hint,
 		disabled = false,
+		required = false,
 		indeterminate = false,
-		class: className = '',
+		id,
+		name,
+		ariaLabel,
+		onchange,
+		children,
 	}: Props = $props();
 
-	let inputElement: HTMLInputElement | null = $state(null);
+	const inputId = $derived(id ?? `checkbox-${Math.random().toString(36).slice(2, 9)}`);
+	const hintId = $derived(hint ? `${inputId}-hint` : undefined);
 
-	$effect(() => {
-		if (inputElement) {
-			inputElement.indeterminate = indeterminate;
-		}
-	});
-
-	function handleChange(e: Event) {
-		const target = e.target as HTMLInputElement;
-		checked = target.checked;
-		onchange?.(target.checked);
+	function handleRef(node: HTMLInputElement) {
+		node.indeterminate = indeterminate;
+		$effect(() => {
+			node.indeterminate = indeterminate;
+		});
 	}
 </script>
 
-<label class="checkbox-wrapper {disabled ? 'checkbox-wrapper--disabled' : ''} {className}">
-	<div class="checkbox-input-wrapper">
-		<input
-			bind:this={inputElement}
-			type="checkbox"
-			{checked}
-			{disabled}
-			onchange={handleChange}
-			class="checkbox-input"
-		/>
-		<div class="checkbox-box">
-			{#if indeterminate}
-				<svg
-					class="checkbox-icon"
-					viewBox="0 0 24 24"
+<label class="checkbox" class:disabled for={inputId}>
+	<input
+		type="checkbox"
+		id={inputId}
+		{name}
+		{disabled}
+		{required}
+		aria-label={ariaLabel}
+		aria-describedby={hintId}
+		bind:checked
+		{onchange}
+		use:handleRef
+	/>
+	<span class="indicator" aria-hidden="true">
+		{#if indeterminate}
+			<svg viewBox="0 0 16 16" width="12" height="12">
+				<path d="M3 8h10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
+			</svg>
+		{:else if checked}
+			<svg viewBox="0 0 16 16" width="12" height="12">
+				<path
+					d="M3 8l3.5 3.5L13 5"
 					fill="none"
 					stroke="currentColor"
-					stroke-width="3"
-				>
-					<line x1="5" y1="12" x2="19" y2="12" />
-				</svg>
-			{:else if checked}
-				<svg
-					class="checkbox-icon"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="3"
-				>
-					<polyline points="20 6 9 17 4 12" />
-				</svg>
-			{/if}
-		</div>
-	</div>
-
-	{#if label || description}
-		<div class="checkbox-content">
-			{#if label}
-				<span class="checkbox-label">{label}</span>
-			{/if}
-			{#if description}
-				<span class="checkbox-description">{description}</span>
-			{/if}
-		</div>
-	{/if}
+					stroke-width="2.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		{/if}
+	</span>
+	<span class="label-text">
+		{#if children}
+			{@render children()}
+		{:else if label}
+			{label}
+		{/if}
+		{#if required}<span class="required" aria-hidden="true">*</span>{/if}
+		{#if hint}
+			<span class="hint" id={hintId}>{hint}</span>
+		{/if}
+	</span>
 </label>
 
 <style>
-	.checkbox-wrapper {
-		display: flex;
+	.checkbox {
+		display: inline-flex;
 		align-items: flex-start;
-		gap: 0.75rem;
+		gap: 0.5rem;
 		cursor: pointer;
+		font: inherit;
+		color: hsl(var(--color-foreground));
 	}
 
-	.checkbox-wrapper--disabled {
-		opacity: 0.5;
+	.checkbox.disabled {
 		cursor: not-allowed;
+		opacity: 0.6;
 	}
 
-	.checkbox-input-wrapper {
-		position: relative;
-		flex-shrink: 0;
-	}
-
-	.checkbox-input {
+	input {
 		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-		border: 0;
+		opacity: 0;
+		pointer-events: none;
+		width: 1rem;
+		height: 1rem;
 	}
 
-	.checkbox-box {
-		display: flex;
+	.indicator {
+		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: 1.25rem;
-		height: 1.25rem;
-		background-color: hsl(var(--color-surface));
-		border: 2px solid hsl(var(--color-border-strong));
+		width: 1rem;
+		height: 1rem;
+		flex-shrink: 0;
+		margin-top: 0.125rem;
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.25rem;
-		transition: all 0.15s ease;
+		color: hsl(var(--color-primary-foreground));
+		transition:
+			background-color 0.15s ease,
+			border-color 0.15s ease;
 	}
 
-	.checkbox-input:hover:not(:disabled) + .checkbox-box {
+	input:checked + .indicator,
+	input:indeterminate + .indicator {
+		background: hsl(var(--color-primary));
 		border-color: hsl(var(--color-primary));
 	}
 
-	.checkbox-input:focus-visible + .checkbox-box {
-		outline: 2px solid hsl(var(--color-ring));
+	input:focus-visible + .indicator {
+		outline: 2px solid hsl(var(--color-primary));
 		outline-offset: 2px;
 	}
 
-	.checkbox-input:checked + .checkbox-box,
-	.checkbox-input:indeterminate + .checkbox-box {
-		background-color: hsl(var(--color-primary));
-		border-color: hsl(var(--color-primary));
+	.label-text {
+		font-size: 0.9375rem;
+		line-height: 1.35;
 	}
 
-	.checkbox-icon {
-		width: 0.875rem;
-		height: 0.875rem;
-		stroke: hsl(var(--color-primary-foreground));
+	.required {
+		color: hsl(var(--color-error));
+		margin-left: 0.125rem;
 	}
 
-	.checkbox-content {
-		display: flex;
-		flex-direction: column;
-		gap: 0.125rem;
-		padding-top: 0.0625rem;
-	}
-
-	.checkbox-label {
-		font-size: 0.875rem;
-		font-weight: 500;
-		color: hsl(var(--color-foreground));
-		line-height: 1.25rem;
-	}
-
-	.checkbox-description {
-		font-size: 0.75rem;
+	.hint {
+		display: block;
+		margin-top: 0.125rem;
+		font-size: 0.8125rem;
 		color: hsl(var(--color-muted-foreground));
-		line-height: 1.25;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.indicator {
+			transition: none;
+		}
 	}
 </style>
diff --git a/packages/shared-ui/src/molecules/ColorPicker.constants.ts b/packages/shared-ui/src/molecules/ColorPicker.constants.ts
deleted file mode 100644
index 852446530..000000000
--- a/packages/shared-ui/src/molecules/ColorPicker.constants.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Standard color palettes for use with ColorPicker.
- */
-
-/** 12-color palette (same as TAG_COLORS) — good for tags, labels, categories */
-export const COLORS_12 = [
-	'#ef4444',
-	'#f97316',
-	'#f59e0b',
-	'#84cc16',
-	'#22c55e',
-	'#14b8a6',
-	'#06b6d4',
-	'#3b82f6',
-	'#6366f1',
-	'#8b5cf6',
-	'#ec4899',
-	'#64748b',
-] as const;
-
-/** 16-color extended palette — good for projects, clients, folders */
-export const COLORS_16 = [
-	'#ef4444',
-	'#f97316',
-	'#f59e0b',
-	'#eab308',
-	'#84cc16',
-	'#22c55e',
-	'#14b8a6',
-	'#06b6d4',
-	'#0ea5e9',
-	'#3b82f6',
-	'#6366f1',
-	'#8b5cf6',
-	'#a855f7',
-	'#d946ef',
-	'#ec4899',
-	'#f43f5e',
-] as const;
-
-/** Default color (blue) */
-export const DEFAULT_COLOR = '#3b82f6';
-
-/** Get a random color from the 12-color palette */
-export function getRandomColor(): string {
-	return COLORS_12[Math.floor(Math.random() * COLORS_12.length)];
-}
diff --git a/packages/shared-ui/src/molecules/ColorPicker.svelte b/packages/shared-ui/src/molecules/ColorPicker.svelte
deleted file mode 100644
index 6bfb3244c..000000000
--- a/packages/shared-ui/src/molecules/ColorPicker.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-	import { Check } from '@mana/shared-icons';
-
-	/**
-	 * Generic color picker with predefined palette.
-	 * Renders a grid of color circles with selection indicator.
-	 */
-
-	interface Props {
-		/** Available colors (hex strings) */
-		colors: string[];
-		/** Currently selected color */
-		selectedColor?: string;
-		/** Called when a color is selected */
-		onColorChange: (color: string) => void;
-		/** Button size */
-		size?: 'sm' | 'md' | 'lg';
-		/** Accessible label for the group */
-		label?: string;
-	}
-
-	let {
-		colors,
-		selectedColor,
-		onColorChange,
-		size = 'md',
-		label = 'Farbe wählen',
-	}: Props = $props();
-
-	const sizeClasses = {
-		sm: 'w-6 h-6',
-		md: 'w-8 h-8',
-		lg: 'w-10 h-10',
-	};
-
-	const iconSizes = {
-		sm: 12,
-		md: 14,
-		lg: 18,
-	};
-
-	const gapClasses = {
-		sm: 'gap-1.5',
-		md: 'gap-2',
-		lg: 'gap-2.5',
-	};
-
-	function handleKeyDown(e: KeyboardEvent, hex: string) {
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			onColorChange(hex);
-		}
-	}
-</script>
-
-<div class="flex flex-wrap {gapClasses[size]}" role="radiogroup" aria-label={label}>
-	{#each colors as color}
-		{@const isSelected = selectedColor?.toLowerCase() === color.toLowerCase()}
-		<button
-			type="button"
-			class="
-				{sizeClasses[size]}
-				rounded-full
-				flex items-center justify-center
-				transition-all duration-150
-				ring-offset-2 ring-offset-white dark:ring-offset-gray-900
-				focus:outline-none focus:ring-2 focus:ring-primary
-				{isSelected ? 'ring-2 ring-black/30 dark:ring-white/50 scale-110' : 'hover:scale-110'}
-			"
-			style="background-color: {color}"
-			onclick={() => onColorChange(color)}
-			onkeydown={(e) => handleKeyDown(e, color)}
-			role="radio"
-			aria-checked={isSelected}
-			aria-label={color}
-			title={color}
-		>
-			{#if isSelected}
-				<Check size={iconSizes[size]} weight="bold" class="text-white drop-shadow-sm" />
-			{/if}
-		</button>
-	{/each}
-</div>
diff --git a/packages/shared-ui/src/molecules/ColorPicker.test.ts b/packages/shared-ui/src/molecules/ColorPicker.test.ts
deleted file mode 100644
index 111d7567a..000000000
--- a/packages/shared-ui/src/molecules/ColorPicker.test.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import ColorPicker from './ColorPicker.svelte';
-import { COLORS_12, COLORS_16, DEFAULT_COLOR, getRandomColor } from './ColorPicker.constants';
-
-const testColors = ['#ef4444', '#3b82f6', '#22c55e'];
-
-describe('ColorPicker', () => {
-	it('renders all provided colors as radio buttons', () => {
-		render(ColorPicker, { props: { colors: testColors, onColorChange: vi.fn() } });
-		const radios = screen.getAllByRole('radio');
-		expect(radios).toHaveLength(3);
-	});
-
-	it('marks selected color as checked', () => {
-		render(ColorPicker, {
-			props: { colors: testColors, selectedColor: '#3b82f6', onColorChange: vi.fn() },
-		});
-		const blue = screen.getByRole('radio', { name: '#3b82f6' });
-		expect(blue.getAttribute('aria-checked')).toBe('true');
-	});
-
-	it('calls onColorChange when clicked', async () => {
-		const onColorChange = vi.fn();
-		render(ColorPicker, { props: { colors: testColors, onColorChange } });
-		await fireEvent.click(screen.getByRole('radio', { name: '#22c55e' }));
-		expect(onColorChange).toHaveBeenCalledWith('#22c55e');
-	});
-
-	it('supports keyboard selection', async () => {
-		const onColorChange = vi.fn();
-		render(ColorPicker, { props: { colors: testColors, onColorChange } });
-		await fireEvent.keyDown(screen.getByRole('radio', { name: '#ef4444' }), { key: 'Enter' });
-		expect(onColorChange).toHaveBeenCalledWith('#ef4444');
-	});
-
-	it('has accessible radiogroup role', () => {
-		render(ColorPicker, { props: { colors: testColors, onColorChange: vi.fn() } });
-		expect(screen.getByRole('radiogroup')).toBeInTheDocument();
-	});
-
-	it('uses custom label', () => {
-		render(ColorPicker, {
-			props: { colors: testColors, onColorChange: vi.fn(), label: 'Pick a color' },
-		});
-		expect(screen.getByRole('radiogroup', { name: 'Pick a color' })).toBeInTheDocument();
-	});
-});
-
-describe('Color constants', () => {
-	it('COLORS_12 has 12 entries', () => {
-		expect(COLORS_12).toHaveLength(12);
-	});
-
-	it('COLORS_16 has 16 entries', () => {
-		expect(COLORS_16).toHaveLength(16);
-	});
-
-	it('DEFAULT_COLOR is blue', () => {
-		expect(DEFAULT_COLOR).toBe('#3b82f6');
-	});
-
-	it('getRandomColor returns a color from COLORS_12', () => {
-		const validColors = new Set(COLORS_12);
-		for (let i = 0; i < 30; i++) {
-			expect(validColors.has(getRandomColor() as (typeof COLORS_12)[number])).toBe(true);
-		}
-	});
-});
diff --git a/packages/shared-ui/src/molecules/ConfirmationPopover.svelte b/packages/shared-ui/src/molecules/ConfirmationPopover.svelte
deleted file mode 100644
index 829e5eec4..000000000
--- a/packages/shared-ui/src/molecules/ConfirmationPopover.svelte
+++ /dev/null
@@ -1,415 +0,0 @@
-<script lang="ts">
-	/**
-	 * ConfirmationPopover - Inline confirmation dialog
-	 *
-	 * A wrapper component that shows a confirmation popover directly at the
-	 * trigger element position, minimizing mouse travel for quick confirmations.
-	 * Uses a portal to escape parent overflow constraints.
-	 *
-	 * @example Delete confirmation
-	 * ```svelte
-	 * <ConfirmationPopover
-	 *   onConfirm={handleDelete}
-	 *   variant="danger"
-	 *   title="Löschen?"
-	 *   confirmLabel="Löschen"
-	 * >
-	 *   <button class="delete-btn">🗑️</button>
-	 * </ConfirmationPopover>
-	 * ```
-	 */
-
-	import type { Snippet } from 'svelte';
-	import { Trash, Warning, Check, X } from '@mana/shared-icons';
-
-	type ConfirmationVariant = 'danger' | 'warning' | 'info';
-	type Placement = 'top' | 'bottom' | 'left' | 'right';
-
-	interface Props {
-		/** Trigger element (usually a button) */
-		children: Snippet;
-		/** Called when user confirms the action */
-		onConfirm: () => void | Promise<void>;
-		/** Visual variant */
-		variant?: ConfirmationVariant;
-		/** Popover title */
-		title?: string;
-		/** Optional message */
-		message?: string;
-		/** Confirm button label */
-		confirmLabel?: string;
-		/** Cancel button label */
-		cancelLabel?: string;
-		/** Whether confirm action is in progress */
-		loading?: boolean;
-		/** Preferred placement */
-		placement?: Placement;
-		/** Disabled state - prevents popover from opening */
-		disabled?: boolean;
-	}
-
-	let {
-		children,
-		onConfirm,
-		variant = 'danger',
-		title = 'Bestätigen?',
-		message,
-		confirmLabel = 'Bestätigen',
-		cancelLabel = 'Abbrechen',
-		loading = false,
-		placement = 'bottom',
-		disabled = false,
-	}: Props = $props();
-
-	let visible = $state(false);
-	let triggerRef = $state<HTMLDivElement | null>(null);
-	let popoverRef = $state<HTMLDivElement | null>(null);
-	let confirmBtnRef = $state<HTMLButtonElement | null>(null);
-	let popoverPosition = $state({ top: 0, left: 0 });
-
-	// Portal action - moves element to body to escape overflow constraints
-	function portal(node: HTMLElement) {
-		document.body.appendChild(node);
-		return {
-			destroy() {
-				node.remove();
-			},
-		};
-	}
-
-	const variantConfig: Record<
-		ConfirmationVariant,
-		{
-			iconColor: string;
-			iconBg: string;
-			buttonColor: string;
-			buttonHover: string;
-			borderColor: string;
-		}
-	> = {
-		danger: {
-			iconColor: 'text-red-500',
-			iconBg: 'bg-red-500/10',
-			buttonColor: 'bg-red-500 text-white',
-			buttonHover: 'hover:bg-red-600',
-			borderColor: 'border-red-500/20',
-		},
-		warning: {
-			iconColor: 'text-yellow-500',
-			iconBg: 'bg-yellow-500/10',
-			buttonColor: 'bg-yellow-500 text-white',
-			buttonHover: 'hover:bg-yellow-600',
-			borderColor: 'border-yellow-500/20',
-		},
-		info: {
-			iconColor: 'text-blue-500',
-			iconBg: 'bg-blue-500/10',
-			buttonColor: 'bg-blue-500 text-white',
-			buttonHover: 'hover:bg-blue-600',
-			borderColor: 'border-blue-500/20',
-		},
-	};
-
-	const config = $derived(variantConfig[variant]);
-
-	function handleTriggerClick(e: MouseEvent) {
-		if (disabled || loading) return;
-		e.stopPropagation();
-
-		// Get position from the clicked element
-		const target = e.currentTarget as HTMLElement;
-		if (target) {
-			const rect = target.getBoundingClientRect();
-			calculatePosition(rect);
-		}
-
-		visible = true;
-
-		// Focus confirm button after popover appears
-		requestAnimationFrame(() => {
-			confirmBtnRef?.focus();
-		});
-	}
-
-	function calculatePosition(rect: DOMRect) {
-		if (rect.width === 0 && rect.height === 0) return;
-
-		const popoverWidth = 240;
-		const popoverHeight = 120;
-		const gap = 8;
-
-		let top = 0;
-		let left = 0;
-
-		switch (placement) {
-			case 'top':
-				top = rect.top - popoverHeight - gap;
-				left = rect.left + rect.width / 2 - popoverWidth / 2;
-				break;
-			case 'bottom':
-				top = rect.bottom + gap;
-				left = rect.left + rect.width / 2 - popoverWidth / 2;
-				break;
-			case 'left':
-				top = rect.top + rect.height / 2 - popoverHeight / 2;
-				left = rect.left - popoverWidth - gap;
-				break;
-			case 'right':
-				top = rect.top + rect.height / 2 - popoverHeight / 2;
-				left = rect.right + gap;
-				break;
-		}
-
-		// Keep within viewport bounds
-		const viewportWidth = window.innerWidth;
-		const viewportHeight = window.innerHeight;
-
-		if (left < 8) left = 8;
-		if (left + popoverWidth > viewportWidth - 8) left = viewportWidth - popoverWidth - 8;
-		if (top < 8) top = 8;
-		if (top + popoverHeight > viewportHeight - 8) {
-			if (placement === 'bottom') {
-				top = rect.top - popoverHeight - gap;
-			}
-		}
-
-		popoverPosition = { top, left };
-	}
-
-	function handleCancel() {
-		if (loading) return;
-		visible = false;
-	}
-
-	async function handleConfirm() {
-		try {
-			await onConfirm();
-			visible = false;
-		} catch {
-			// Keep popover open on error
-		}
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (!visible) return;
-
-		if (e.key === 'Escape') {
-			e.preventDefault();
-			handleCancel();
-		} else if (e.key === 'Enter' && !loading) {
-			e.preventDefault();
-			handleConfirm();
-		}
-	}
-
-	function handleClickOutside(e: MouseEvent) {
-		if (!visible || loading) return;
-
-		const target = e.target as Node;
-		// Check if click is inside trigger or popover
-		if (triggerRef?.contains(target)) return;
-		if (popoverRef?.contains(target)) return;
-
-		visible = false;
-	}
-</script>
-
-<svelte:window onkeydown={handleKeydown} onclick={handleClickOutside} />
-
-<!-- Trigger wrapper -->
-<div
-	class="confirmation-popover-trigger"
-	bind:this={triggerRef}
-	onclick={handleTriggerClick}
-	onkeydown={(e) => {
-		if (e.key === 'Enter' || e.key === ' ') handleTriggerClick(e as unknown as MouseEvent);
-	}}
-	role="button"
-	tabindex="0"
->
-	{@render children()}
-</div>
-
-<!-- Portal: Popover rendered to body to escape overflow constraints -->
-{#if visible}
-	<div
-		use:portal
-		class="confirmation-popover {config.borderColor}"
-		bind:this={popoverRef}
-		style="position: fixed; top: {popoverPosition.top}px; left: {popoverPosition.left}px; z-index: 999999;"
-		role="dialog"
-		aria-modal="true"
-		aria-label={title}
-	>
-		<!-- Content -->
-		<div class="popover-content">
-			<div class="popover-header">
-				<div class="popover-icon {config.iconBg} {config.iconColor}">
-					{#if variant === 'danger'}
-						<Trash size={16} weight="bold" />
-					{:else if variant === 'warning'}
-						<Warning size={16} weight="bold" />
-					{:else}
-						<Check size={16} weight="bold" />
-					{/if}
-				</div>
-				<span class="popover-title">{title}</span>
-			</div>
-
-			{#if message}
-				<p class="popover-message">{message}</p>
-			{/if}
-
-			<div class="popover-actions">
-				<button type="button" class="btn-cancel" onclick={handleCancel} disabled={loading}>
-					<X size={14} weight="bold" />
-					{cancelLabel}
-				</button>
-				<button
-					type="button"
-					class="btn-confirm {config.buttonColor} {config.buttonHover}"
-					onclick={handleConfirm}
-					disabled={loading}
-					bind:this={confirmBtnRef}
-				>
-					{#if loading}
-						<svg class="spinner" viewBox="0 0 24 24" fill="none">
-							<circle
-								class="opacity-25"
-								cx="12"
-								cy="12"
-								r="10"
-								stroke="currentColor"
-								stroke-width="4"
-							/>
-							<path
-								class="opacity-75"
-								fill="currentColor"
-								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-							/>
-						</svg>
-					{:else if variant === 'danger'}
-						<Trash size={14} weight="bold" />
-					{:else}
-						<Check size={14} weight="bold" />
-					{/if}
-					{confirmLabel}
-				</button>
-			</div>
-		</div>
-	</div>
-{/if}
-
-<style>
-	.confirmation-popover-trigger {
-		display: inline-flex;
-	}
-
-	.confirmation-popover {
-		min-width: 220px;
-		max-width: 280px;
-		background: var(--color-surface-elevated-3);
-		border: 1px solid hsl(var(--color-border));
-		border-radius: var(--radius-lg, 12px);
-		box-shadow:
-			0 10px 25px -5px rgb(0 0 0 / 0.15),
-			0 8px 10px -6px rgb(0 0 0 / 0.1);
-		animation: popoverIn 150ms ease-out;
-	}
-
-	@keyframes popoverIn {
-		from {
-			opacity: 0;
-			transform: scale(0.95);
-		}
-		to {
-			opacity: 1;
-			transform: scale(1);
-		}
-	}
-
-	.popover-content {
-		padding: 12px;
-	}
-
-	.popover-header {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		margin-bottom: 8px;
-	}
-
-	.popover-icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 28px;
-		height: 28px;
-		border-radius: var(--radius-md, 8px);
-		flex-shrink: 0;
-	}
-
-	.popover-title {
-		font-size: 0.875rem;
-		font-weight: 600;
-		color: hsl(var(--color-foreground));
-	}
-
-	.popover-message {
-		font-size: 0.8125rem;
-		color: hsl(var(--color-muted-foreground));
-		margin: 0 0 12px;
-		line-height: 1.4;
-	}
-
-	.popover-actions {
-		display: flex;
-		gap: 8px;
-	}
-
-	.btn-cancel,
-	.btn-confirm {
-		flex: 1;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 4px;
-		padding: 8px 12px;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		border-radius: var(--radius-md, 8px);
-		border: none;
-		cursor: pointer;
-		transition: all 150ms;
-	}
-
-	.btn-cancel {
-		background: hsl(var(--color-muted) / 0.5);
-		color: hsl(var(--color-foreground));
-	}
-
-	.btn-cancel:hover:not(:disabled) {
-		background: hsl(var(--color-muted));
-	}
-
-	.btn-cancel:disabled,
-	.btn-confirm:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.spinner {
-		width: 14px;
-		height: 14px;
-		animation: spin 1s linear infinite;
-	}
-
-	@keyframes spin {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
-</style>
diff --git a/packages/shared-ui/src/molecules/ContactAvatar.stories.svelte b/packages/shared-ui/src/molecules/ContactAvatar.stories.svelte
new file mode 100644
index 000000000..a58a23e2b
--- /dev/null
+++ b/packages/shared-ui/src/molecules/ContactAvatar.stories.svelte
@@ -0,0 +1,50 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ContactAvatar from './ContactAvatar.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Molecules/ContactAvatar',
+		component: ContactAvatar,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Initials">
+	{#snippet children()}
+		<ContactAvatar name="Till Zimmer" />
+	{/snippet}
+</Story>
+
+<Story name="Email">
+	{#snippet children()}
+		<ContactAvatar email="anna.maier@beispiel.de" />
+	{/snippet}
+</Story>
+
+<Story name="Placeholder">
+	{#snippet children()}
+		<ContactAvatar />
+	{/snippet}
+</Story>
+
+<Story name="SizeSweep">
+	{#snippet children()}
+		<div style="display:flex; gap:0.75rem; align-items:center;">
+			<ContactAvatar name="Till Zimmer" size="xs" />
+			<ContactAvatar name="Till Zimmer" size="sm" />
+			<ContactAvatar name="Till Zimmer" size="md" />
+			<ContactAvatar name="Till Zimmer" size="lg" />
+			<ContactAvatar name="Till Zimmer" size="xl" />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithStatus">
+	{#snippet children()}
+		<div style="display:flex; gap:1rem; align-items:center;">
+			<ContactAvatar name="Till Zimmer" status="online" size="lg" />
+			<ContactAvatar name="Anna Maier" status="busy" size="lg" />
+			<ContactAvatar name="Lukas Berg" status="offline" size="lg" />
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/molecules/ContactAvatar.svelte b/packages/shared-ui/src/molecules/ContactAvatar.svelte
new file mode 100644
index 000000000..180c6cf76
--- /dev/null
+++ b/packages/shared-ui/src/molecules/ContactAvatar.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
+
+	type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	type Status = null | 'online' | 'busy' | 'offline';
+
+	interface Props {
+		name?: string;
+		email?: string;
+		imageUrl?: string;
+		size?: Size;
+		status?: Status;
+		ariaLabel?: string;
+	}
+
+	let { name, email, imageUrl, size = 'md', status = null, ariaLabel }: Props = $props();
+
+	const initials = $derived.by(() => {
+		const source = (name ?? email ?? '').trim();
+		if (!source) return '';
+		// Bei Email: lokalen Teil nehmen, sonst Wort-Anfänge
+		const base = source.includes('@') ? source.split('@')[0] : source;
+		const parts = base.split(/[\s._-]+/).filter(Boolean);
+		if (parts.length === 0) return '';
+		if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+		return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+	});
+
+	const label = $derived(ariaLabel ?? name ?? email ?? 'Avatar');
+</script>
+
+<span class="avatar size-{size}" aria-label={label} title={label}>
+	{#if imageUrl}
+		<img src={imageUrl} alt="" loading="lazy" />
+	{:else if initials}
+		<span class="initials" aria-hidden="true">{initials}</span>
+	{:else}
+		<span class="placeholder" aria-hidden="true">
+			<DynamicIcon name="user" size={size === 'xs' || size === 'sm' ? 'xs' : 'sm'} />
+		</span>
+	{/if}
+
+	{#if status}
+		<span class="status status-{status}" aria-label={status}></span>
+	{/if}
+</span>
+
+<style>
+	.avatar {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		border-radius: 9999px;
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-foreground));
+		font-family: inherit;
+		font-weight: 600;
+		text-transform: uppercase;
+		overflow: visible;
+	}
+
+	.size-xs {
+		width: 1.25rem;
+		height: 1.25rem;
+		font-size: 0.5625rem;
+	}
+	.size-sm {
+		width: 1.75rem;
+		height: 1.75rem;
+		font-size: 0.6875rem;
+	}
+	.size-md {
+		width: 2.25rem;
+		height: 2.25rem;
+		font-size: 0.8125rem;
+	}
+	.size-lg {
+		width: 3rem;
+		height: 3rem;
+		font-size: 1rem;
+	}
+	.size-xl {
+		width: 4rem;
+		height: 4rem;
+		font-size: 1.25rem;
+	}
+
+	img {
+		width: 100%;
+		height: 100%;
+		border-radius: inherit;
+		object-fit: cover;
+		display: block;
+	}
+
+	.initials,
+	.placeholder {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		border-radius: inherit;
+	}
+
+	.placeholder {
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.status {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		width: 30%;
+		height: 30%;
+		min-width: 0.5rem;
+		min-height: 0.5rem;
+		border-radius: 50%;
+		border: 2px solid hsl(var(--color-background));
+	}
+
+	.status-online {
+		background: hsl(var(--color-success));
+	}
+	.status-busy {
+		background: hsl(var(--color-error));
+	}
+	.status-offline {
+		background: hsl(var(--color-muted-foreground));
+	}
+</style>
diff --git a/packages/shared-ui/src/molecules/DataCard.stories.svelte b/packages/shared-ui/src/molecules/DataCard.stories.svelte
new file mode 100644
index 000000000..64175406a
--- /dev/null
+++ b/packages/shared-ui/src/molecules/DataCard.stories.svelte
@@ -0,0 +1,53 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DataCard from './DataCard.svelte';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Molecules/DataCard',
+		component: DataCard,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<div style="width:14rem;">
+			<DataCard label="Reviews heute" value={42} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithChange">
+	{#snippet children()}
+		<div style="display:grid; grid-template-columns:repeat(3, 14rem); gap:1rem;">
+			<DataCard label="Reviews heute" value={42} change="+12" trend="up" hint="vs gestern" />
+			<DataCard label="Streak" value="7 Tage" change="−1" trend="down" hint="vs Ziel" />
+			<DataCard label="Karten gelernt" value={234} change="±0" trend="flat" hint="diese Woche" />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithIcon">
+	{#snippet children()}
+		<div style="width:14rem;">
+			<DataCard label="Stapel" value={12} hint="3 mit fälligen Karten">
+				{#snippet icon()}<DynamicIcon name="tag" size="sm" />{/snippet}
+			</DataCard>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="LongLabel">
+	{#snippet children()}
+		<div style="width:14rem;">
+			<DataCard
+				label="Durchschnittliche Antwortzeit"
+				value="2.4s"
+				change="−0.3s"
+				trend="up"
+				hint="schneller als Vorwoche"
+			/>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/molecules/DataCard.svelte b/packages/shared-ui/src/molecules/DataCard.svelte
index 4ae54ef16..cca4d8c49 100644
--- a/packages/shared-ui/src/molecules/DataCard.svelte
+++ b/packages/shared-ui/src/molecules/DataCard.svelte
@@ -1,161 +1,109 @@
 <script lang="ts">
-	/**
-	 * DataCard - Generic card for displaying data items
-	 *
-	 * Used for displaying items like memos, decks, blueprints, etc.
-	 * Provides consistent layout with title, description, metadata, and actions.
-	 *
-	 * @example Basic usage
-	 * ```svelte
-	 * <DataCard
-	 *   title="My Deck"
-	 *   description="A collection of flashcards"
-	 *   onclick={() => openDeck(deck.id)}
-	 * />
-	 * ```
-	 *
-	 * @example With metadata and actions
-	 * ```svelte
-	 * <DataCard title={memo.title} description={memo.summary}>
-	 *   {#snippet metadata()}
-	 *     <span>5 min ago</span>
-	 *     <Badge>Audio</Badge>
-	 *   {/snippet}
-	 *   {#snippet actions()}
-	 *     <Button variant="ghost" size="sm" onclick={edit}>Edit</Button>
-	 *     <Button variant="ghost" size="sm" onclick={del}>Delete</Button>
-	 *   {/snippet}
-	 * </DataCard>
-	 * ```
-	 */
-
 	import type { Snippet } from 'svelte';
-	import { Text } from '../atoms';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
 
-	type CardVariant = 'default' | 'elevated' | 'outlined' | 'ghost';
+	type Trend = 'up' | 'down' | 'flat';
 
 	interface Props {
-		/** Card title */
-		title: string;
-		/** Card description/subtitle */
-		description?: string;
-		/** Card variant */
-		variant?: CardVariant;
-		/** Whether card is interactive (clickable) */
-		interactive?: boolean;
-		/** Click handler */
-		onclick?: () => void;
-		/** Icon/thumbnail snippet (left side) */
+		label: string;
+		value: string | number;
+		hint?: string;
+		change?: string;
+		trend?: Trend;
 		icon?: Snippet;
-		/** Metadata snippet (below description) */
-		metadata?: Snippet;
-		/** Actions snippet (right side or bottom) */
-		actions?: Snippet;
-		/** Badge/status snippet (top right) */
-		badge?: Snippet;
-		/** Additional CSS classes */
-		class?: string;
 	}
 
-	let {
-		title,
-		description,
-		variant = 'default',
-		interactive = false,
-		onclick,
-		icon,
-		metadata,
-		actions,
-		badge,
-		class: className = '',
-	}: Props = $props();
-
-	const variantClasses: Record<CardVariant, string> = {
-		default: 'bg-menu border border-theme',
-		elevated: 'bg-menu border border-theme shadow-md',
-		outlined: 'bg-transparent border-2 border-theme',
-		ghost: 'bg-transparent border-transparent hover:bg-menu-hover',
-	};
-
-	const isClickable = $derived(interactive || !!onclick);
+	let { label, value, hint, change, trend, icon }: Props = $props();
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<div
-	class="data-card rounded-xl p-4 transition-colors {variantClasses[variant]} {isClickable
-		? 'cursor-pointer hover:bg-menu-hover'
-		: ''} {className}"
-	{onclick}
-	onkeydown={(e) => {
-		if (isClickable && onclick && (e.key === 'Enter' || e.key === ' ')) {
-			e.preventDefault();
-			onclick();
-		}
-	}}
-	role={isClickable ? 'button' : undefined}
-	tabindex={isClickable ? 0 : undefined}
->
-	<div class="flex items-start gap-3">
-		<!-- Icon/Thumbnail -->
-		{#if icon}
-			<div class="data-card__icon flex-shrink-0">
-				{@render icon()}
-			</div>
-		{/if}
-
-		<!-- Content -->
-		<div class="data-card__content flex-1 min-w-0">
-			<div class="flex items-start justify-between gap-2">
-				<div class="min-w-0">
-					<!-- Title -->
-					<Text variant="body" weight="semibold" class="truncate">
-						{title}
-					</Text>
-
-					<!-- Description -->
-					{#if description}
-						<Text variant="muted" class="mt-1 line-clamp-2">
-							{description}
-						</Text>
+<article class="data-card">
+	<header class="head">
+		<span class="label">{label}</span>
+		{#if icon}<span class="icon-slot">{@render icon()}</span>{/if}
+	</header>
+	<p class="value">{value}</p>
+	{#if change || hint}
+		<footer class="foot">
+			{#if change}
+				<span class="change trend-{trend ?? 'flat'}">
+					{#if trend === 'up'}
+						<DynamicIcon name="caret-up" size="xs" />
+					{:else if trend === 'down'}
+						<DynamicIcon name="caret-down" size="xs" />
 					{/if}
-				</div>
-
-				<!-- Badge -->
-				{#if badge}
-					<div class="data-card__badge flex-shrink-0">
-						{@render badge()}
-					</div>
-				{/if}
-			</div>
-
-			<!-- Metadata -->
-			{#if metadata}
-				<div class="data-card__metadata mt-2 flex items-center gap-2 text-sm text-theme-secondary">
-					{@render metadata()}
-				</div>
+					{change}
+				</span>
 			{/if}
-		</div>
-
-		<!-- Actions -->
-		{#if actions}
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class="data-card__actions flex-shrink-0 flex items-center gap-1"
-				onclick={(e) => e.stopPropagation()}
-				role="none"
-			>
-				{@render actions()}
-			</div>
-		{/if}
-	</div>
-</div>
+			{#if hint}<span class="hint">{hint}</span>{/if}
+		</footer>
+	{/if}
+</article>
 
 <style>
-	.line-clamp-2 {
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		line-clamp: 2;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
+	.data-card {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding: 1rem 1.125rem;
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.625rem;
+		font-family: inherit;
+	}
+
+	.head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	.label {
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+		font-weight: 500;
+	}
+
+	.icon-slot {
+		color: hsl(var(--color-muted-foreground));
+		display: inline-flex;
+	}
+
+	.value {
+		margin: 0;
+		font-size: 1.875rem;
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+		color: hsl(var(--color-foreground));
+		line-height: 1.1;
+	}
+
+	.foot {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		gap: 0.5rem;
+		font-size: 0.8125rem;
+	}
+
+	.change {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.125rem;
+		font-weight: 500;
+	}
+
+	.trend-up {
+		color: hsl(var(--color-success));
+	}
+	.trend-down {
+		color: hsl(var(--color-error));
+	}
+	.trend-flat {
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.hint {
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
diff --git a/packages/shared-ui/src/molecules/EmptyState.svelte b/packages/shared-ui/src/molecules/EmptyState.svelte
new file mode 100644
index 000000000..1479be5a8
--- /dev/null
+++ b/packages/shared-ui/src/molecules/EmptyState.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Text from '../atoms/Text.svelte';
+	import Button from '../atoms/Button.svelte';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
+
+	type Variant = 'default' | 'compact' | 'centered';
+
+	interface Props {
+		title: string;
+		message?: string;
+		actionLabel?: string;
+		onAction?: () => void;
+		secondaryActionLabel?: string;
+		onSecondaryAction?: () => void;
+		variant?: Variant;
+		icon?: Snippet;
+	}
+
+	let {
+		title,
+		message,
+		actionLabel,
+		onAction,
+		secondaryActionLabel,
+		onSecondaryAction,
+		variant = 'default',
+		icon,
+	}: Props = $props();
+</script>
+
+<div class="empty-state variant-{variant}">
+	<div class="icon-wrap">
+		{#if icon}
+			{@render icon()}
+		{:else}
+			<DynamicIcon name="search" size="lg" ariaLabel="Leer" />
+		{/if}
+	</div>
+
+	<Text as="p" weight="semibold">{title}</Text>
+
+	{#if message}
+		<p class="message">{message}</p>
+	{/if}
+
+	{#if actionLabel || secondaryActionLabel}
+		<div class="actions">
+			{#if secondaryActionLabel && onSecondaryAction}
+				<Button variant="ghost" onclick={onSecondaryAction}>{secondaryActionLabel}</Button>
+			{/if}
+			{#if actionLabel && onAction}
+				<Button variant="primary" onclick={onAction}>{actionLabel}</Button>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		font-family: inherit;
+	}
+
+	.empty-state.variant-default {
+		padding: 3rem 1.5rem;
+	}
+
+	.empty-state.variant-compact {
+		padding: 1.5rem 1rem;
+	}
+
+	.empty-state.variant-centered {
+		padding: 4rem 2rem;
+	}
+
+	.icon-wrap {
+		margin-bottom: 1rem;
+		color: hsl(var(--color-muted-foreground));
+		opacity: 0.6;
+	}
+
+	.message {
+		margin: 0.5rem 0 1rem 0;
+		max-width: 24rem;
+		font-size: 0.875rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.actions {
+		display: flex;
+		gap: 0.75rem;
+		margin-top: 0.5rem;
+	}
+</style>
diff --git a/packages/shared-ui/src/molecules/FavoriteButton.svelte b/packages/shared-ui/src/molecules/FavoriteButton.svelte
index 5d3f69ac0..c6090ff84 100644
--- a/packages/shared-ui/src/molecules/FavoriteButton.svelte
+++ b/packages/shared-ui/src/molecules/FavoriteButton.svelte
@@ -1,38 +1,24 @@
 <script lang="ts">
-	import { Heart, Star, PushPin } from '@mana/shared-icons';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
 
-	/**
-	 * Reusable favorite/pin toggle button.
-	 * Renders a heart, star, or pin icon that toggles between filled and outline.
-	 */
+	type Variant = 'heart' | 'star' | 'pin';
 
 	interface Props {
 		active: boolean;
 		onclick: () => void;
-		/** Icon variant */
-		variant?: 'heart' | 'star' | 'pin';
-		/** Icon size in pixels */
-		size?: number;
-		/** Active color (CSS color) */
-		activeColor?: string;
-		/** Inactive color (CSS color) */
-		inactiveColor?: string;
-		/** Extra CSS classes on the button */
-		class?: string;
-		/** Accessible label */
+		variant?: Variant;
+		size?: 'sm' | 'md' | number;
 		label?: string;
+		/** v0.1.x-Compat: aktive Farbe (heute ignoriert — Token primary). */
+		activeColor?: string;
+		/** v0.1.x-Compat. */
+		class?: string;
 	}
 
-	let {
-		active,
-		onclick,
-		variant = 'heart',
-		size = 18,
-		activeColor = variant === 'pin' ? 'var(--color-primary, #3b82f6)' : '#ef4444',
-		inactiveColor = 'currentColor',
-		class: className = '',
-		label,
-	}: Props = $props();
+	let { active, onclick, variant = 'heart', size = 'md', label }: Props = $props();
+	const normalizedSize = $derived<'sm' | 'md'>(
+		typeof size === 'number' ? (size < 16 ? 'sm' : 'md') : size
+	);
 
 	const defaultLabel = $derived(
 		variant === 'pin'
@@ -44,21 +30,63 @@
 				: 'Favorit'
 	);
 
-	const icons = { heart: Heart, star: Star, pin: PushPin };
-	const Icon = $derived(icons[variant]);
+	const iconName = $derived.by(() => {
+		if (active) return `${variant}-fill` as const;
+		return variant;
+	});
+
+	const iconSize = $derived(size === 'sm' ? ('sm' as const) : ('md' as const));
 </script>
 
 <button
 	type="button"
 	{onclick}
-	class="inline-flex items-center justify-center rounded-md p-1 transition-colors hover:bg-black/5 dark:hover:bg-white/10 {className}"
+	class="favorite-btn size-{normalizedSize}"
+	class:active
 	aria-label={label ?? defaultLabel}
+	aria-pressed={active}
 	title={label ?? defaultLabel}
 >
-	<Icon
-		{size}
-		weight={active ? 'fill' : 'regular'}
-		class="transition-colors"
-		style="color: {active ? activeColor : inactiveColor}"
-	/>
+	<DynamicIcon name={iconName} size={iconSize} />
 </button>
+
+<style>
+	.favorite-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.25rem;
+		background: transparent;
+		border: none;
+		border-radius: 0.375rem;
+		color: hsl(var(--color-muted-foreground));
+		cursor: pointer;
+		transition:
+			background-color 120ms,
+			color 120ms;
+		font-family: inherit;
+	}
+
+	.favorite-btn.size-sm {
+		padding: 0.125rem;
+	}
+
+	.favorite-btn:hover {
+		background: hsl(var(--color-surface-hover));
+		color: hsl(var(--color-foreground));
+	}
+
+	.favorite-btn:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
+	}
+
+	.favorite-btn.active {
+		color: hsl(var(--color-primary));
+	}
+
+	.favorite-btn.active:hover {
+		color: hsl(var(--color-primary));
+		background: hsl(var(--color-primary) / 0.08);
+	}
+</style>
diff --git a/packages/shared-ui/src/molecules/FavoriteButton.test.ts b/packages/shared-ui/src/molecules/FavoriteButton.test.ts
deleted file mode 100644
index e0e00c330..000000000
--- a/packages/shared-ui/src/molecules/FavoriteButton.test.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import FavoriteButton from './FavoriteButton.svelte';
-
-describe('FavoriteButton', () => {
-	it('renders with heart icon by default', () => {
-		const { container } = render(FavoriteButton, {
-			props: { active: false, onclick: vi.fn() },
-		});
-		expect(container.querySelector('button')).toBeInTheDocument();
-	});
-
-	it('has correct aria-label when inactive', () => {
-		render(FavoriteButton, {
-			props: { active: false, onclick: vi.fn() },
-		});
-		expect(screen.getByRole('button', { name: 'Favorit' })).toBeInTheDocument();
-	});
-
-	it('has correct aria-label when active', () => {
-		render(FavoriteButton, {
-			props: { active: true, onclick: vi.fn() },
-		});
-		expect(screen.getByRole('button', { name: 'Favorit entfernen' })).toBeInTheDocument();
-	});
-
-	it('calls onclick when clicked', async () => {
-		const onclick = vi.fn();
-		render(FavoriteButton, { props: { active: false, onclick } });
-		await fireEvent.click(screen.getByRole('button'));
-		expect(onclick).toHaveBeenCalledOnce();
-	});
-
-	it('uses pin labels for pin variant', () => {
-		render(FavoriteButton, {
-			props: { active: false, onclick: vi.fn(), variant: 'pin' },
-		});
-		expect(screen.getByRole('button', { name: 'Anpinnen' })).toBeInTheDocument();
-	});
-
-	it('uses custom label when provided', () => {
-		render(FavoriteButton, {
-			props: { active: false, onclick: vi.fn(), label: 'Custom' },
-		});
-		expect(screen.getByRole('button', { name: 'Custom' })).toBeInTheDocument();
-	});
-});
diff --git a/packages/shared-ui/src/molecules/FilterDropdown.svelte b/packages/shared-ui/src/molecules/FilterDropdown.svelte
deleted file mode 100644
index 5c6063e0a..000000000
--- a/packages/shared-ui/src/molecules/FilterDropdown.svelte
+++ /dev/null
@@ -1,716 +0,0 @@
-<script lang="ts">
-	import { tick } from 'svelte';
-	import { fly } from 'svelte/transition';
-	import type { FilterDropdownOption } from './FilterDropdown.types';
-
-	interface Props {
-		/** Available options */
-		options: FilterDropdownOption[];
-		/** Current selected value(s) - string for single, string[] for multi */
-		value: string | string[] | null;
-		/** Callback when selection changes */
-		onChange: (value: string | string[] | null) => void;
-		/** Placeholder text when no value selected */
-		placeholder?: string;
-		/** Enable multi-select mode with checkboxes */
-		multiSelect?: boolean;
-		/** Force searchable mode (auto-enabled at 8+ options) */
-		searchable?: boolean;
-		/** Dropdown direction */
-		direction?: 'up' | 'down';
-		/** Embedded mode for toolbar usage (smaller, no shadow) */
-		embedded?: boolean;
-		/** Max dropdown height */
-		maxHeight?: string;
-		/** Disabled state */
-		disabled?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		options,
-		value,
-		onChange,
-		placeholder = 'Select...',
-		multiSelect = false,
-		searchable = false,
-		direction = 'down',
-		embedded = false,
-		maxHeight = '300px',
-		disabled = false,
-		class: className = '',
-	}: Props = $props();
-
-	// State
-	let isOpen = $state(false);
-	let searchQuery = $state('');
-	let triggerRef: HTMLButtonElement | undefined = $state();
-	let searchInputRef: HTMLInputElement | undefined = $state();
-	let dropdownPosition = $state({ top: 0, left: 0, width: 0 });
-	let focusedIndex = $state(-1);
-
-	// Auto-searchable at 8+ options
-	let showSearch = $derived(searchable || options.length >= 8);
-
-	// Filtered options based on search
-	let filteredOptions = $derived(
-		searchQuery
-			? options.filter(
-					(o) => !o.divider && o.label.toLowerCase().includes(searchQuery.toLowerCase())
-				)
-			: options
-	);
-
-	// Group options by group property
-	let groupedOptions = $derived.by(() => {
-		const groups = new Map<string | null, FilterDropdownOption[]>();
-		for (const opt of filteredOptions) {
-			if (opt.divider) continue;
-			const key = opt.group || null;
-			if (!groups.has(key)) groups.set(key, []);
-			groups.get(key)!.push(opt);
-		}
-		return groups;
-	});
-
-	// Flat list of selectable options for keyboard navigation
-	let selectableOptions = $derived(filteredOptions.filter((o) => !o.divider && !o.disabled));
-
-	// Display label for trigger
-	let displayLabel = $derived.by(() => {
-		if (multiSelect && Array.isArray(value) && value.length > 0) {
-			if (value.length === 1) {
-				const opt = options.find((o) => o.value === value[0]);
-				return opt?.label || placeholder;
-			}
-			return `${value.length} ausgewählt`;
-		}
-		if (typeof value === 'string' && value) {
-			const selected = options.find((o) => o.value === value);
-			return selected?.label || placeholder;
-		}
-		return placeholder;
-	});
-
-	// Is active (has non-default value)
-	let isActive = $derived(
-		multiSelect
-			? Array.isArray(value) && value.length > 0
-			: value !== null && value !== '' && value !== undefined
-	);
-
-	// Portal action
-	function portal(node: HTMLElement) {
-		document.body.appendChild(node);
-		return {
-			destroy() {
-				node.remove();
-			},
-		};
-	}
-
-	// Update dropdown position
-	async function updatePosition() {
-		if (!triggerRef) return;
-		await tick();
-		const rect = triggerRef.getBoundingClientRect();
-		const viewportHeight = window.innerHeight;
-
-		let top: number;
-		if (direction === 'up') {
-			top = rect.top - 8;
-		} else {
-			top = rect.bottom + 8;
-		}
-
-		// Adjust if would go off-screen
-		const dropdownHeight = 250; // Approximate
-		if (direction === 'down' && top + dropdownHeight > viewportHeight - 20) {
-			top = rect.top - dropdownHeight - 8;
-		}
-
-		dropdownPosition = {
-			top,
-			left: rect.left,
-			width: Math.max(rect.width, 160),
-		};
-	}
-
-	function open() {
-		if (disabled) return;
-		isOpen = true;
-		searchQuery = '';
-		focusedIndex = -1;
-		updatePosition();
-		// Focus search input if shown
-		tick().then(() => {
-			if (showSearch && searchInputRef) {
-				searchInputRef.focus();
-			}
-		});
-	}
-
-	function close() {
-		isOpen = false;
-		searchQuery = '';
-		focusedIndex = -1;
-	}
-
-	function toggle() {
-		if (isOpen) {
-			close();
-		} else {
-			open();
-		}
-	}
-
-	function isSelected(optionValue: string): boolean {
-		if (multiSelect && Array.isArray(value)) {
-			return value.includes(optionValue);
-		}
-		return value === optionValue;
-	}
-
-	function select(option: FilterDropdownOption) {
-		if (option.disabled) return;
-
-		if (multiSelect) {
-			const currentValue = Array.isArray(value) ? value : [];
-			if (currentValue.includes(option.value)) {
-				// Remove
-				const newValue = currentValue.filter((v) => v !== option.value);
-				onChange(newValue.length > 0 ? newValue : null);
-			} else {
-				// Add
-				onChange([...currentValue, option.value]);
-			}
-		} else {
-			// Single select - also allow deselecting by clicking same option
-			if (value === option.value) {
-				onChange(null);
-			} else {
-				onChange(option.value);
-			}
-			close();
-		}
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (!isOpen) {
-			if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-				e.preventDefault();
-				open();
-			}
-			return;
-		}
-
-		switch (e.key) {
-			case 'Escape':
-				e.preventDefault();
-				close();
-				triggerRef?.focus();
-				break;
-			case 'ArrowDown':
-				e.preventDefault();
-				focusedIndex = Math.min(focusedIndex + 1, selectableOptions.length - 1);
-				break;
-			case 'ArrowUp':
-				e.preventDefault();
-				focusedIndex = Math.max(focusedIndex - 1, 0);
-				break;
-			case 'Enter':
-			case ' ':
-				e.preventDefault();
-				if (focusedIndex >= 0 && focusedIndex < selectableOptions.length) {
-					select(selectableOptions[focusedIndex]);
-				}
-				break;
-			case 'Tab':
-				close();
-				break;
-		}
-	}
-
-	// Icon paths for common icons
-	const iconPaths: Record<string, string> = {
-		check: 'M5 13l4 4L19 7',
-		chevronDown: 'M19 9l-7 7-7-7',
-		search: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
-		x: 'M6 18L18 6M6 6l12 12',
-	};
-</script>
-
-<div class="filter-dropdown-wrapper {className}" class:embedded>
-	<!-- Trigger Button -->
-	<button
-		bind:this={triggerRef}
-		type="button"
-		onclick={toggle}
-		onkeydown={handleKeydown}
-		class="filter-trigger"
-		class:active={isActive}
-		class:open={isOpen}
-		class:embedded
-		{disabled}
-		aria-haspopup="listbox"
-		aria-expanded={isOpen}
-	>
-		<span class="trigger-label">{displayLabel}</span>
-		<svg
-			class="trigger-chevron"
-			class:rotated={isOpen}
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d={iconPaths.chevronDown}
-			/>
-		</svg>
-	</button>
-
-	{#if isOpen}
-		<!-- Backdrop -->
-		<button
-			use:portal
-			type="button"
-			class="filter-backdrop"
-			onclick={close}
-			aria-label="Close dropdown"
-		></button>
-
-		<!-- Dropdown Panel -->
-		<div
-			use:portal
-			class="filter-dropdown-panel"
-			class:direction-up={direction === 'up'}
-			class:embedded
-			style="
-				top: {dropdownPosition.top}px;
-				left: {dropdownPosition.left}px;
-				min-width: {dropdownPosition.width}px;
-				max-height: {maxHeight};
-			"
-			transition:fly={{ duration: 150, y: direction === 'up' ? 8 : -8 }}
-			role="listbox"
-			aria-multiselectable={multiSelect}
-		>
-			<!-- Search Input -->
-			{#if showSearch}
-				<div class="search-container">
-					<svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d={iconPaths.search}
-						/>
-					</svg>
-					<input
-						bind:this={searchInputRef}
-						type="text"
-						bind:value={searchQuery}
-						placeholder="Suchen..."
-						class="search-input"
-						onkeydown={handleKeydown}
-					/>
-					{#if searchQuery}
-						<button
-							type="button"
-							class="search-clear"
-							onclick={() => (searchQuery = '')}
-							aria-label="Suche löschen"
-						>
-							<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d={iconPaths.x}
-								/>
-							</svg>
-						</button>
-					{/if}
-				</div>
-			{/if}
-
-			<!-- Options List -->
-			<div class="options-list">
-				{#if filteredOptions.length === 0}
-					<div class="no-results">Keine Ergebnisse</div>
-				{:else}
-					{#each [...groupedOptions] as [groupName, groupOptions], groupIndex}
-						{#if groupName}
-							<div class="group-header">{groupName}</div>
-						{/if}
-						{#each groupOptions as option, optionIndex}
-							{@const flatIndex = selectableOptions.indexOf(option)}
-							<button
-								type="button"
-								class="option-item"
-								class:selected={isSelected(option.value)}
-								class:focused={flatIndex === focusedIndex}
-								class:disabled={option.disabled}
-								onclick={() => select(option)}
-								role="option"
-								aria-selected={isSelected(option.value)}
-								disabled={option.disabled}
-							>
-								<!-- Checkbox/Check indicator -->
-								<span class="option-indicator">
-									{#if multiSelect}
-										<span class="checkbox" class:checked={isSelected(option.value)}>
-											{#if isSelected(option.value)}
-												<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-													<path
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														stroke-width="3"
-														d={iconPaths.check}
-													/>
-												</svg>
-											{/if}
-										</span>
-									{:else if isSelected(option.value)}
-										<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d={iconPaths.check}
-											/>
-										</svg>
-									{/if}
-								</span>
-								<span class="option-label">{option.label}</span>
-							</button>
-						{/each}
-					{/each}
-				{/if}
-			</div>
-
-			<!-- Multi-select footer -->
-			{#if multiSelect && Array.isArray(value) && value.length > 0}
-				<div class="dropdown-footer">
-					<button type="button" class="clear-all-btn" onclick={() => onChange(null)}>
-						Alle entfernen
-					</button>
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.filter-dropdown-wrapper {
-		position: relative;
-		display: inline-flex;
-	}
-
-	/* Trigger Button */
-	.filter-trigger {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.5rem 0.75rem;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		color: hsl(var(--color-foreground));
-		background: hsl(var(--color-surface));
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.5rem;
-		cursor: pointer;
-		transition: all 0.15s ease;
-		white-space: nowrap;
-	}
-
-	.filter-trigger:hover:not(:disabled) {
-		border-color: hsl(var(--color-border-strong, var(--color-border)));
-		background: hsl(var(--color-muted) / 0.5);
-	}
-
-	.filter-trigger:focus {
-		outline: none;
-		border-color: hsl(var(--color-primary));
-		box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.2);
-	}
-
-	.filter-trigger:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.filter-trigger.active {
-		background: color-mix(in srgb, #3b82f6 15%, transparent 85%);
-		color: #3b82f6;
-		border-color: #3b82f6;
-	}
-
-	.filter-trigger.open {
-		border-color: hsl(var(--color-primary));
-	}
-
-	/* Embedded mode - pill style for toolbars */
-	.filter-trigger.embedded {
-		padding: 0.375rem 0.5rem;
-		font-size: 0.75rem;
-		background: hsl(var(--color-muted) / 0.5);
-		border: 1px solid transparent;
-		border-radius: 9999px;
-	}
-
-	.filter-trigger.embedded:hover:not(:disabled) {
-		background: hsl(var(--color-muted));
-		border-color: hsl(var(--color-border));
-	}
-
-	.filter-trigger.embedded.active {
-		background: color-mix(in srgb, #3b82f6 15%, transparent 85%);
-		color: #3b82f6;
-		border-color: #3b82f6;
-	}
-
-	.trigger-label {
-		flex: 1;
-		text-align: left;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.trigger-chevron {
-		width: 0.875rem;
-		height: 0.875rem;
-		flex-shrink: 0;
-		transition: transform 0.2s ease;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.trigger-chevron.rotated {
-		transform: rotate(180deg);
-	}
-
-	.filter-trigger.active .trigger-chevron {
-		color: #3b82f6;
-	}
-
-	/* Backdrop */
-	:global(.filter-backdrop) {
-		position: fixed;
-		inset: 0;
-		z-index: 9998;
-		background: transparent;
-		border: none;
-		cursor: default;
-	}
-
-	/* Dropdown Panel */
-	:global(.filter-dropdown-panel) {
-		position: fixed;
-		z-index: 9999;
-		display: flex;
-		flex-direction: column;
-		min-width: 160px;
-		max-width: 320px;
-		background: hsl(var(--color-surface) / 0.98);
-		backdrop-filter: blur(16px);
-		-webkit-backdrop-filter: blur(16px);
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.75rem;
-		box-shadow:
-			0 10px 25px -5px rgba(0, 0, 0, 0.15),
-			0 8px 10px -6px rgba(0, 0, 0, 0.1);
-		overflow: hidden;
-	}
-
-	:global(.filter-dropdown-panel.direction-up) {
-		transform: translateY(-100%);
-	}
-
-	:global(.filter-dropdown-panel.embedded) {
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-	}
-
-	/* Search Container */
-	.search-container {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 0.625rem;
-		border-bottom: 1px solid hsl(var(--color-border) / 0.5);
-	}
-
-	.search-icon {
-		width: 1rem;
-		height: 1rem;
-		color: hsl(var(--color-muted-foreground));
-		flex-shrink: 0;
-	}
-
-	.search-input {
-		flex: 1;
-		border: none;
-		background: transparent;
-		font-size: 0.8125rem;
-		color: hsl(var(--color-foreground));
-		outline: none;
-	}
-
-	.search-input::placeholder {
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.search-clear {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0.25rem;
-		background: transparent;
-		border: none;
-		border-radius: 0.25rem;
-		cursor: pointer;
-		color: hsl(var(--color-muted-foreground));
-		transition: all 0.15s;
-	}
-
-	.search-clear:hover {
-		background: hsl(var(--color-muted));
-		color: hsl(var(--color-foreground));
-	}
-
-	.search-clear svg {
-		width: 0.75rem;
-		height: 0.75rem;
-	}
-
-	/* Options List */
-	.options-list {
-		overflow-y: auto;
-		padding: 0.375rem;
-	}
-
-	.no-results {
-		padding: 0.75rem;
-		text-align: center;
-		font-size: 0.8125rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	/* Group Header */
-	.group-header {
-		padding: 0.5rem 0.625rem 0.25rem;
-		font-size: 0.6875rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.025em;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	/* Option Item */
-	.option-item {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		width: 100%;
-		padding: 0.5rem 0.625rem;
-		font-size: 0.8125rem;
-		color: hsl(var(--color-foreground));
-		background: transparent;
-		border: none;
-		border-radius: 0.5rem;
-		cursor: pointer;
-		transition: all 0.1s ease;
-		text-align: left;
-	}
-
-	.option-item:hover:not(.disabled) {
-		background: hsl(var(--color-muted));
-	}
-
-	.option-item.focused {
-		background: hsl(var(--color-muted));
-		outline: 2px solid hsl(var(--color-primary) / 0.5);
-		outline-offset: -2px;
-	}
-
-	.option-item.selected {
-		color: #3b82f6;
-	}
-
-	.option-item.disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	/* Option Indicator (checkbox or check) */
-	.option-indicator {
-		width: 1.125rem;
-		height: 1.125rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-	}
-
-	.checkbox {
-		width: 1rem;
-		height: 1rem;
-		border: 2px solid hsl(var(--color-border-strong, var(--color-border)));
-		border-radius: 0.25rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: all 0.15s ease;
-	}
-
-	.checkbox.checked {
-		background: #3b82f6;
-		border-color: #3b82f6;
-	}
-
-	.checkbox svg {
-		width: 0.625rem;
-		height: 0.625rem;
-		color: white;
-	}
-
-	.check-icon {
-		width: 1rem;
-		height: 1rem;
-		color: #3b82f6;
-	}
-
-	.option-label {
-		flex: 1;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	/* Dropdown Footer */
-	.dropdown-footer {
-		padding: 0.5rem 0.625rem;
-		border-top: 1px solid hsl(var(--color-border) / 0.5);
-	}
-
-	.clear-all-btn {
-		width: 100%;
-		padding: 0.375rem 0.5rem;
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: hsl(var(--color-muted-foreground));
-		background: transparent;
-		border: none;
-		border-radius: 0.375rem;
-		cursor: pointer;
-		transition: all 0.15s;
-	}
-
-	.clear-all-btn:hover {
-		background: hsl(var(--color-muted));
-		color: hsl(var(--color-foreground));
-	}
-</style>
diff --git a/packages/shared-ui/src/molecules/FilterDropdown.types.ts b/packages/shared-ui/src/molecules/FilterDropdown.types.ts
deleted file mode 100644
index 39e45266c..000000000
--- a/packages/shared-ui/src/molecules/FilterDropdown.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface FilterDropdownOption {
-	value: string;
-	label: string;
-	icon?: string;
-	disabled?: boolean;
-	divider?: boolean;
-	group?: string;
-}
diff --git a/packages/shared-ui/src/molecules/IconPicker.constants.ts b/packages/shared-ui/src/molecules/IconPicker.constants.ts
deleted file mode 100644
index b535afddb..000000000
--- a/packages/shared-ui/src/molecules/IconPicker.constants.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { ICON_CATEGORIES, getAllIconNames } from '@mana/shared-icons';
-
-export const DEFAULT_ICON = 'star';
diff --git a/packages/shared-ui/src/molecules/IconPicker.svelte b/packages/shared-ui/src/molecules/IconPicker.svelte
index a363578cd..31e1fe9af 100644
--- a/packages/shared-ui/src/molecules/IconPicker.svelte
+++ b/packages/shared-ui/src/molecules/IconPicker.svelte
@@ -1,65 +1,48 @@
-<!--
-  IconPicker — reusable Phosphor icon picker with search and categories.
-  Follows the same pattern as ColorPicker (size variants, a11y, Tailwind).
--->
 <script lang="ts">
-	import { ICON_CATEGORIES, getIconComponent, type IconName } from '@mana/shared-icons';
-	import { Check } from '@mana/shared-icons';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
+
+	export interface IconSlot {
+		name: string;
+		svg: string;
+	}
+
+	type Size = 'sm' | 'md' | 'lg';
 
 	interface Props {
 		selectedIcon?: string;
 		onIconChange: (icon: string) => void;
-		size?: 'sm' | 'md' | 'lg';
+		/** Wenn nicht gesetzt, rendert IconPicker eine leere Liste (v0.1.x-Compat: Konsument lieferte phosphor-Inventar implizit). */
+		categories?: Record<string, IconSlot[]>;
+		size?: Size;
 		label?: string;
 		showSearch?: boolean;
 		showCategories?: boolean;
+		searchPlaceholder?: string;
+		emptyLabel?: string;
 	}
 
 	let {
 		selectedIcon,
 		onIconChange,
+		categories = {},
 		size = 'md',
 		label = 'Icon wählen',
 		showSearch = true,
 		showCategories = true,
+		searchPlaceholder = 'Icon suchen …',
+		emptyLabel = 'Kein Icon gefunden',
 	}: Props = $props();
 
 	let searchQuery = $state('');
 
-	const sizeClasses: Record<string, string> = {
-		sm: 'w-8 h-8',
-		md: 'w-10 h-10',
-		lg: 'w-12 h-12',
-	};
-
-	const iconSizes: Record<string, number> = {
-		sm: 16,
-		md: 20,
-		lg: 24,
-	};
-
-	const checkSizes: Record<string, number> = {
-		sm: 8,
-		md: 10,
-		lg: 12,
-	};
-
-	const gapClasses: Record<string, string> = {
-		sm: 'gap-1',
-		md: 'gap-1.5',
-		lg: 'gap-2',
-	};
-
-	let filteredCategories = $derived.by(() => {
+	const filteredCategories = $derived.by(() => {
 		const query = searchQuery.toLowerCase().trim();
-		if (!query) return ICON_CATEGORIES;
+		if (!query) return categories;
 
-		const result: Record<string, string[]> = {};
-		for (const [category, icons] of Object.entries(ICON_CATEGORIES)) {
-			const matched = icons.filter((name) => name.includes(query));
-			if (matched.length > 0) {
-				result[category] = matched;
-			}
+		const result: Record<string, IconSlot[]> = {};
+		for (const [category, icons] of Object.entries(categories)) {
+			const matched = icons.filter((icon) => icon.name.toLowerCase().includes(query));
+			if (matched.length > 0) result[category] = matched;
 		}
 		return result;
 	});
@@ -70,76 +53,179 @@
 			onIconChange(iconName);
 		}
 	}
+
+	const iconSize = $derived(
+		size === 'sm' ? ('sm' as const) : size === 'lg' ? ('md' as const) : ('md' as const)
+	);
 </script>
 
-<div class="flex flex-col gap-2" role="group" aria-label={label}>
+<div class="icon-picker" role="group" aria-label={label}>
 	{#if showSearch}
-		<input
-			type="text"
-			class="w-full rounded-md border border-white/10 bg-transparent px-3 py-1.5 text-sm
-				text-[var(--color-foreground,#fff)] placeholder-[var(--color-muted-foreground,#888)]
-				outline-none focus:border-[var(--color-primary,#6366f1)]"
-			placeholder="Icon suchen..."
-			bind:value={searchQuery}
-		/>
+		<input type="text" class="search" placeholder={searchPlaceholder} bind:value={searchQuery} />
 	{/if}
 
-	{#each Object.entries(filteredCategories) as [category, icons]}
-		<div>
+	{#each Object.entries(filteredCategories) as [category, icons] (category)}
+		<div class="category">
 			{#if showCategories}
-				<div
-					class="mb-1 text-xs font-semibold uppercase tracking-wider text-[var(--color-muted-foreground,#888)]"
-				>
-					{category}
-				</div>
+				<div class="category-label">{category}</div>
 			{/if}
-			<div class="flex flex-wrap {gapClasses[size]}" role="radiogroup" aria-label={category}>
-				{#each icons as iconName}
-					{@const isSelected = selectedIcon === iconName}
-					{@const IconComp = getIconComponent(iconName)}
-					{#if IconComp}
-						<button
-							type="button"
-							class="
-								{sizeClasses[size]}
-								relative rounded-lg
-								flex items-center justify-center
-								transition-all duration-150
-								focus:outline-none focus:ring-2 focus:ring-[var(--color-primary,#6366f1)]
-								{isSelected
-								? 'bg-[var(--color-primary,#6366f1)]/20 ring-2 ring-[var(--color-primary,#6366f1)] scale-110'
-								: 'bg-white/5 hover:bg-white/10 hover:scale-110'}
-							"
-							onclick={() => onIconChange(iconName)}
-							onkeydown={(e) => handleKeyDown(e, iconName)}
-							role="radio"
-							aria-checked={isSelected}
-							aria-label={iconName}
-							title={iconName}
-						>
-							<IconComp
-								size={iconSizes[size]}
-								weight={isSelected ? 'bold' : 'regular'}
-								class="text-[var(--color-foreground,#fff)]"
-							/>
-							{#if isSelected}
-								<div
-									class="absolute -right-0.5 -top-0.5 flex h-3.5 w-3.5 items-center justify-center
-										rounded-full bg-[var(--color-primary,#6366f1)]"
-								>
-									<Check size={checkSizes[size]} weight="bold" class="text-white" />
-								</div>
-							{/if}
-						</button>
-					{/if}
+			<div class="grid size-{size}" role="radiogroup" aria-label={category}>
+				{#each icons as icon (icon.name)}
+					{@const isSelected = selectedIcon === icon.name}
+					<button
+						type="button"
+						class="slot size-{size}"
+						class:selected={isSelected}
+						onclick={() => onIconChange(icon.name)}
+						onkeydown={(e) => handleKeyDown(e, icon.name)}
+						role="radio"
+						aria-checked={isSelected}
+						aria-label={icon.name}
+						title={icon.name}
+					>
+						<DynamicIcon iconSvg={icon.svg} size={iconSize} />
+						{#if isSelected}
+							<span class="check" aria-hidden="true">
+								<DynamicIcon name="check" size="xs" />
+							</span>
+						{/if}
+					</button>
 				{/each}
 			</div>
 		</div>
 	{/each}
 
 	{#if Object.keys(filteredCategories).length === 0}
-		<p class="py-2 text-center text-sm text-[var(--color-muted-foreground,#888)]">
-			Kein Icon gefunden
-		</p>
+		<p class="empty">{emptyLabel}</p>
 	{/if}
 </div>
+
+<style>
+	.icon-picker {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		font-family: inherit;
+	}
+
+	.search {
+		width: 100%;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+		color: hsl(var(--color-foreground));
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.375rem;
+		outline: none;
+		font: inherit;
+		font-size: 0.875rem;
+	}
+
+	.search::placeholder {
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.search:focus-visible {
+		border-color: hsl(var(--color-primary));
+		outline: 2px solid hsl(var(--color-primary) / 0.3);
+		outline-offset: 0;
+	}
+
+	.category-label {
+		margin-bottom: 0.25rem;
+		font-size: 0.6875rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.grid {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.grid.size-sm {
+		gap: 0.25rem;
+	}
+
+	.grid.size-md {
+		gap: 0.375rem;
+	}
+
+	.grid.size-lg {
+		gap: 0.5rem;
+	}
+
+	.slot {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		color: hsl(var(--color-foreground));
+		background: hsl(var(--color-surface));
+		border: 1px solid transparent;
+		border-radius: 0.5rem;
+		cursor: pointer;
+		transition:
+			background-color 120ms,
+			transform 120ms,
+			border-color 120ms;
+		font-family: inherit;
+	}
+
+	.slot.size-sm {
+		width: 2rem;
+		height: 2rem;
+	}
+
+	.slot.size-md {
+		width: 2.5rem;
+		height: 2.5rem;
+	}
+
+	.slot.size-lg {
+		width: 3rem;
+		height: 3rem;
+	}
+
+	.slot:hover {
+		background: hsl(var(--color-surface-hover));
+		transform: scale(1.08);
+	}
+
+	.slot:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
+	}
+
+	.slot.selected {
+		background: hsl(var(--color-primary) / 0.12);
+		border-color: hsl(var(--color-primary));
+		color: hsl(var(--color-primary));
+		transform: scale(1.08);
+	}
+
+	.check {
+		position: absolute;
+		top: -0.25rem;
+		right: -0.25rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 0.875rem;
+		height: 0.875rem;
+		color: hsl(var(--color-primary-foreground));
+		background: hsl(var(--color-primary));
+		border-radius: 50%;
+	}
+
+	.empty {
+		margin: 0.5rem 0;
+		padding: 0.5rem 0;
+		text-align: center;
+		font-size: 0.875rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+</style>
diff --git a/packages/shared-ui/src/molecules/Input.stories.svelte b/packages/shared-ui/src/molecules/Input.stories.svelte
new file mode 100644
index 000000000..07eaab551
--- /dev/null
+++ b/packages/shared-ui/src/molecules/Input.stories.svelte
@@ -0,0 +1,57 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Input from './Input.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Molecules/Input',
+		component: Input,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<div style="width: 320px;">
+			<Input label="E-Mail" type="email" placeholder="dich@beispiel.de" />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithHint">
+	{#snippet children()}
+		<div style="width: 320px;">
+			<Input
+				label="Passwort"
+				type="password"
+				hint="Mindestens 12 Zeichen, sicher generiert."
+				required
+			/>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithError">
+	{#snippet children()}
+		<div style="width: 320px;">
+			<Input label="Benutzername" value="🐭" error="Mindestens 3 Buchstaben oder Zahlen." />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Disabled">
+	{#snippet children()}
+		<div style="width: 320px;">
+			<Input label="Versionsname" value="Phase 0" disabled hint="Wird aus dem Repo abgeleitet." />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="SizeSweep">
+	{#snippet children()}
+		<div style="display:flex; flex-direction:column; gap:0.75rem; width: 320px;">
+			<Input size="sm" label="sm" placeholder="kompakt" />
+			<Input size="md" label="md" placeholder="standard" />
+			<Input size="lg" label="lg" placeholder="komfortabel" />
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/molecules/Input.svelte b/packages/shared-ui/src/molecules/Input.svelte
index 001840ab5..7d0d45c8d 100644
--- a/packages/shared-ui/src/molecules/Input.svelte
+++ b/packages/shared-ui/src/molecules/Input.svelte
@@ -1,80 +1,193 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	type Type = 'text' | 'email' | 'url' | 'password' | 'number' | 'search' | 'tel' | 'date' | 'time';
+	type Size = 'sm' | 'md' | 'lg';
 
 	interface Props {
-		value: string;
-		oninput?: (value: string) => void;
-		onchange?: (value: string) => void;
-		onkeydown?: (e: KeyboardEvent) => void;
-		label?: string;
+		type?: Type;
+		value?: string | number;
 		placeholder?: string;
-		type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+		label?: string;
+		hint?: string;
 		error?: string;
 		disabled?: boolean;
+		readonly?: boolean;
 		required?: boolean;
-		autocomplete?: HTMLInputAttributes['autocomplete'];
-		class?: string;
+		size?: Size;
 		id?: string;
 		name?: string;
+		autocomplete?: string;
+		ariaLabel?: string;
+		leading?: Snippet;
+		trailing?: Snippet;
+		oninput?: (e: Event) => void;
+		onchange?: (e: Event) => void;
+		onblur?: (e: FocusEvent) => void;
+		onfocus?: (e: FocusEvent) => void;
+		/** v0.1.x-Compat. */
+		class?: string;
 	}
 
 	let {
-		value = $bindable(),
-		oninput,
-		onchange,
-		onkeydown,
-		label,
-		placeholder,
 		type = 'text',
+		value = $bindable(''),
+		placeholder,
+		label,
+		hint,
 		error,
 		disabled = false,
+		readonly = false,
 		required = false,
-		autocomplete,
-		class: className = '',
-		id = `input-${Math.random().toString(36).slice(2, 9)}`,
+		size = 'md',
+		id,
 		name,
+		autocomplete,
+		ariaLabel,
+		leading,
+		trailing,
+		oninput,
+		onchange,
+		onblur,
+		onfocus,
+		class: className = '',
 	}: Props = $props();
 
-	function handleInput(e: Event) {
-		const target = e.target as HTMLInputElement;
-		value = target.value;
-		oninput?.(target.value);
-	}
-
-	function handleChange(e: Event) {
-		const target = e.target as HTMLInputElement;
-		onchange?.(target.value);
-	}
+	const inputId = $derived(id ?? `input-${Math.random().toString(36).slice(2, 9)}`);
+	const hintId = $derived(hint || error ? `${inputId}-hint` : undefined);
 </script>
 
-<div class="flex flex-col gap-1.5 {className}">
+<div class="field {className}">
 	{#if label}
-		<label for={id} class="text-sm font-medium text-theme">
+		<label for={inputId}>
 			{label}
-			{#if required}
-				<span class="text-red-500">*</span>
-			{/if}
+			{#if required}<span class="required" aria-hidden="true">*</span>{/if}
 		</label>
 	{/if}
-
-	<input
-		{id}
-		{name}
-		{type}
-		{value}
-		{placeholder}
-		{disabled}
-		{required}
-		autocomplete={autocomplete as HTMLInputAttributes['autocomplete']}
-		oninput={handleInput}
-		onchange={handleChange}
-		{onkeydown}
-		class="w-full rounded-lg border px-4 py-2.5 text-theme bg-content transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed {error
-			? 'border-red-500 focus:ring-red-500/50'
-			: 'border-theme'}"
-	/>
-
+	<div class="input-wrap size-{size}" class:disabled class:has-error={!!error}>
+		{#if leading}<span class="affix leading">{@render leading()}</span>{/if}
+		<input
+			id={inputId}
+			{type}
+			{name}
+			{placeholder}
+			{disabled}
+			{readonly}
+			{required}
+			autocomplete={autocomplete as never}
+			aria-label={ariaLabel}
+			aria-invalid={error ? 'true' : undefined}
+			aria-describedby={hintId}
+			bind:value
+			{oninput}
+			{onchange}
+			{onblur}
+			{onfocus}
+		/>
+		{#if trailing}<span class="affix trailing">{@render trailing()}</span>{/if}
+	</div>
 	{#if error}
-		<p class="text-sm text-red-500">{error}</p>
+		<p class="hint error" id={hintId} role="alert">{error}</p>
+	{:else if hint}
+		<p class="hint" id={hintId}>{hint}</p>
 	{/if}
 </div>
+
+<style>
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	label {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: hsl(var(--color-foreground));
+	}
+
+	.required {
+		color: hsl(var(--color-error));
+		margin-left: 0.125rem;
+	}
+
+	.input-wrap {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.5rem;
+		transition:
+			border-color 0.15s ease,
+			box-shadow 0.15s ease;
+	}
+
+	.input-wrap:focus-within {
+		border-color: hsl(var(--color-primary));
+		box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.2);
+	}
+
+	.input-wrap.disabled {
+		opacity: 0.6;
+		background: hsl(var(--color-muted));
+	}
+
+	.input-wrap.has-error {
+		border-color: hsl(var(--color-error));
+	}
+
+	.input-wrap.has-error:focus-within {
+		box-shadow: 0 0 0 2px hsl(var(--color-error) / 0.2);
+	}
+
+	.size-sm {
+		padding: 0.25rem 0.625rem;
+	}
+	.size-md {
+		padding: 0.5rem 0.75rem;
+	}
+	.size-lg {
+		padding: 0.625rem 0.875rem;
+	}
+
+	input {
+		flex: 1;
+		min-width: 0;
+		border: none;
+		background: transparent;
+		color: hsl(var(--color-foreground));
+		font: inherit;
+		outline: none;
+	}
+
+	input::placeholder {
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	input:disabled {
+		cursor: not-allowed;
+	}
+
+	.affix {
+		display: inline-flex;
+		align-items: center;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.hint {
+		margin: 0;
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.hint.error {
+		color: hsl(var(--color-error));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.input-wrap {
+			transition: none;
+		}
+	}
+</style>
diff --git a/packages/shared-ui/src/molecules/KeyboardShortcutsPanel.svelte b/packages/shared-ui/src/molecules/KeyboardShortcutsPanel.svelte
deleted file mode 100644
index 5bb25f2ba..000000000
--- a/packages/shared-ui/src/molecules/KeyboardShortcutsPanel.svelte
+++ /dev/null
@@ -1,173 +0,0 @@
-<script lang="ts">
-	/**
-	 * KeyboardShortcutsPanel - Collapsible panel showing keyboard shortcuts
-	 *
-	 * Used in sidebars to show available keyboard shortcuts.
-	 * Supports grouping shortcuts by category.
-	 *
-	 * @example Basic usage
-	 * ```svelte
-	 * <KeyboardShortcutsPanel
-	 *   shortcuts={[
-	 *     { keys: ['Ctrl', 'S'], label: 'Save' },
-	 *     { keys: ['Ctrl', 'Z'], label: 'Undo' }
-	 *   ]}
-	 * />
-	 * ```
-	 *
-	 * @example With categories
-	 * ```svelte
-	 * <KeyboardShortcutsPanel
-	 *   shortcuts={[
-	 *     { keys: ['Ctrl', 'W'], label: 'Close Tab', category: 'Navigation' },
-	 *     { keys: ['Ctrl', '1'], label: 'Go to Record', category: 'Quick Access' }
-	 *   ]}
-	 *   title="Keyboard Shortcuts"
-	 * />
-	 * ```
-	 */
-
-	import { Text } from '../atoms';
-	import { CaretDown } from '@mana/shared-icons';
-
-	export interface KeyboardShortcut {
-		/** Key combination (e.g., ['Ctrl', 'S'] or ['Cmd', 'Shift', 'P']) */
-		keys: string[];
-		/** Description of what the shortcut does */
-		label: string;
-		/** Category for grouping (optional) */
-		category?: string;
-	}
-
-	interface Props {
-		/** List of keyboard shortcuts */
-		shortcuts: KeyboardShortcut[];
-		/** Panel title */
-		title?: string;
-		/** Whether panel is initially expanded */
-		expanded?: boolean;
-		/** Whether panel is collapsible */
-		collapsible?: boolean;
-		/** Whether to show in compact mode (for minimized sidebar) */
-		compact?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		shortcuts,
-		title = 'Shortcuts',
-		expanded = $bindable(false),
-		collapsible = true,
-		compact = false,
-		class: className = '',
-	}: Props = $props();
-
-	// Group shortcuts by category
-	const groupedShortcuts = $derived(() => {
-		const groups: Record<string, KeyboardShortcut[]> = {};
-
-		for (const shortcut of shortcuts) {
-			const category = shortcut.category || 'General';
-			if (!groups[category]) {
-				groups[category] = [];
-			}
-			groups[category].push(shortcut);
-		}
-
-		return groups;
-	});
-
-	function toggleExpanded() {
-		if (collapsible) {
-			expanded = !expanded;
-		}
-	}
-</script>
-
-{#if !compact}
-	<div class="keyboard-shortcuts-panel {className}">
-		<!-- Header -->
-		<button
-			type="button"
-			class="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-menu-hover rounded-lg transition-colors"
-			onclick={toggleExpanded}
-			disabled={!collapsible}
-		>
-			<div class="flex items-center gap-2">
-				<svg
-					class="w-4 h-4 text-theme-secondary"
-					fill="none"
-					stroke="currentColor"
-					viewBox="0 0 24 24"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"
-					/>
-				</svg>
-				<Text variant="small" weight="medium">{title}</Text>
-			</div>
-			{#if collapsible}
-				<CaretDown
-					size={16}
-					class="text-theme-secondary transition-transform {expanded ? 'rotate-180' : ''}"
-				/>
-			{/if}
-		</button>
-
-		<!-- Content -->
-		{#if expanded || !collapsible}
-			<div class="mt-2 space-y-3 px-3 pb-3">
-				{#each Object.entries(groupedShortcuts()) as [category, categoryShortcuts]}
-					<div class="shortcut-group">
-						{#if Object.keys(groupedShortcuts()).length > 1}
-							<Text variant="small" class="text-theme-tertiary mb-1.5 block">
-								{category}
-							</Text>
-						{/if}
-						<div class="space-y-1.5">
-							{#each categoryShortcuts as shortcut}
-								<div class="flex items-center justify-between gap-2">
-									<Text variant="small" class="text-theme-secondary truncate">
-										{shortcut.label}
-									</Text>
-									<div class="flex items-center gap-1 flex-shrink-0">
-										{#each shortcut.keys as key, i}
-											<kbd
-												class="px-1.5 py-0.5 text-xs font-mono bg-surface-secondary rounded border border-theme"
-											>
-												{key}
-											</kbd>
-											{#if i < shortcut.keys.length - 1}
-												<span class="text-theme-tertiary text-xs">+</span>
-											{/if}
-										{/each}
-									</div>
-								</div>
-							{/each}
-						</div>
-					</div>
-				{/each}
-			</div>
-		{/if}
-	</div>
-{:else}
-	<!-- Compact mode: just show icon with tooltip -->
-	<button
-		type="button"
-		class="w-full flex items-center justify-center p-2 hover:bg-menu-hover rounded-lg transition-colors group relative"
-		{title}
-	>
-		<svg class="w-5 h-5 text-theme-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"
-			/>
-		</svg>
-	</button>
-{/if}
diff --git a/packages/shared-ui/src/molecules/ModalFooter.svelte b/packages/shared-ui/src/molecules/ModalFooter.svelte
deleted file mode 100644
index f7d7fbb16..000000000
--- a/packages/shared-ui/src/molecules/ModalFooter.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script lang="ts">
-	/**
-	 * ModalFooter - Standardized modal footer with button layout
-	 *
-	 * Provides consistent button arrangement for modal dialogs.
-	 *
-	 * @example Basic cancel/confirm
-	 * ```svelte
-	 * <ModalFooter
-	 *   cancelLabel="Cancel"
-	 *   confirmLabel="Save"
-	 *   onCancel={() => close()}
-	 *   onConfirm={() => save()}
-	 * />
-	 * ```
-	 *
-	 * @example With loading state
-	 * ```svelte
-	 * <ModalFooter
-	 *   confirmLabel="Deleting..."
-	 *   confirmVariant="danger"
-	 *   loading={isDeleting}
-	 *   onCancel={close}
-	 *   onConfirm={handleDelete}
-	 * />
-	 * ```
-	 */
-
-	import { Button } from '../atoms';
-
-	type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'outline';
-
-	interface Props {
-		/** Cancel button label (omit to hide) */
-		cancelLabel?: string;
-		/** Confirm button label */
-		confirmLabel?: string;
-		/** Cancel button callback */
-		onCancel?: () => void;
-		/** Confirm button callback */
-		onConfirm?: () => void | Promise<void>;
-		/** Confirm button variant */
-		confirmVariant?: ButtonVariant;
-		/** Whether confirm action is loading */
-		loading?: boolean;
-		/** Disable all buttons */
-		disabled?: boolean;
-		/** Alignment of buttons */
-		align?: 'start' | 'center' | 'end' | 'between';
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		cancelLabel = 'Cancel',
-		confirmLabel = 'Confirm',
-		onCancel,
-		onConfirm,
-		confirmVariant = 'primary',
-		loading = false,
-		disabled = false,
-		align = 'end',
-		class: className = '',
-	}: Props = $props();
-
-	const alignClasses: Record<string, string> = {
-		start: 'justify-start',
-		center: 'justify-center',
-		end: 'justify-end',
-		between: 'justify-between',
-	};
-</script>
-
-<div class="modal-footer flex gap-3 {alignClasses[align]} {className}">
-	{#if cancelLabel && onCancel}
-		<Button variant="ghost" onclick={onCancel} disabled={disabled || loading}>
-			{cancelLabel}
-		</Button>
-	{/if}
-	{#if confirmLabel && onConfirm}
-		<Button variant={confirmVariant} onclick={onConfirm} {loading} {disabled}>
-			{confirmLabel}
-		</Button>
-	{/if}
-</div>
diff --git a/packages/shared-ui/src/molecules/PageHeader.stories.svelte b/packages/shared-ui/src/molecules/PageHeader.stories.svelte
new file mode 100644
index 000000000..ae0c5b233
--- /dev/null
+++ b/packages/shared-ui/src/molecules/PageHeader.stories.svelte
@@ -0,0 +1,72 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import PageHeader from './PageHeader.svelte';
+	import Button from '../atoms/Button.svelte';
+	import NavLink from '../navigation/NavLink.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Molecules/PageHeader',
+		component: PageHeader,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<div style="width:42rem; max-width:100%;">
+			<PageHeader title="Decks" />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithSubtitle">
+	{#snippet children()}
+		<div style="width:42rem; max-width:100%;">
+			<PageHeader
+				title="Spanisch — Alltagsvokabular"
+				subtitle="24 Karten · 4 fällig · zuletzt gelernt vor 2 Tagen"
+			/>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithEyebrow">
+	{#snippet children()}
+		<div style="width:42rem; max-width:100%;">
+			<PageHeader
+				eyebrow="Phase 12"
+				title="Marketplace-Restore"
+				subtitle="6 Phasen, schrittweise Wiederherstellung des Marketplace-Codes."
+			/>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithActions">
+	{#snippet children()}
+		<div style="width:42rem; max-width:100%;">
+			<PageHeader title="Stapel" subtitle="6 Stapel insgesamt">
+				{#snippet actions()}
+					<Button variant="ghost" size="sm">✨ KI-Deck</Button>
+					<Button variant="primary" size="sm">Neues Deck</Button>
+				{/snippet}
+			</PageHeader>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithBreadcrumb">
+	{#snippet children()}
+		<div style="width:42rem; max-width:100%;">
+			<PageHeader title="Karte bearbeiten" subtitle="basic-reverse · zuletzt 03.05.">
+				{#snippet breadcrumb()}
+					<NavLink href="/decks">Decks</NavLink>
+					<span style="color:hsl(var(--color-muted-foreground));"> / </span>
+					<NavLink href="/decks/spanisch">Spanisch</NavLink>
+					<span style="color:hsl(var(--color-muted-foreground));"> / </span>
+					<span>Karte 12</span>
+				{/snippet}
+			</PageHeader>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/molecules/PageHeader.svelte b/packages/shared-ui/src/molecules/PageHeader.svelte
index 08b0fc0f1..37026279a 100644
--- a/packages/shared-ui/src/molecules/PageHeader.svelte
+++ b/packages/shared-ui/src/molecules/PageHeader.svelte
@@ -1,213 +1,99 @@
 <script lang="ts">
-	/**
-	 * PageHeader - Standardized page header layout
-	 *
-	 * Provides consistent page title, description, and action buttons layout.
-	 *
-	 * @example Basic usage
-	 * ```svelte
-	 * <PageHeader title="My Memos" />
-	 * ```
-	 *
-	 * @example With description and actions
-	 * ```svelte
-	 * <PageHeader
-	 *   title="Flashcard Decks"
-	 *   description="Manage your study decks"
-	 * >
-	 *   {#snippet actions()}
-	 *     <Button onclick={createDeck}>New Deck</Button>
-	 *   {/snippet}
-	 * </PageHeader>
-	 * ```
-	 *
-	 * @example With back navigation
-	 * ```svelte
-	 * <PageHeader title="Space Details" backHref="/spaces" />
-	 * ```
-	 *
-	 * @example With breadcrumb and icon
-	 * ```svelte
-	 * <PageHeader title="Edit Profile">
-	 *   {#snippet breadcrumb()}
-	 *     <a href="/settings">Settings</a> / Profile
-	 *   {/snippet}
-	 *   {#snippet icon()}
-	 *     <UserIcon />
-	 *   {/snippet}
-	 * </PageHeader>
-	 * ```
-	 */
-
 	import type { Snippet } from 'svelte';
-	import { Text } from '../atoms';
-	import { CaretLeft } from '@mana/shared-icons';
-
-	type HeaderSize = 'sm' | 'md' | 'lg';
 
 	interface Props {
-		/** Page title */
 		title: string;
-		/** Page description/subtitle */
+		subtitle?: string;
+		/** Alias für subtitle (v0.1.x-Compat). */
 		description?: string;
-		/** Header size variant */
-		size?: HeaderSize;
-		/** Whether to show bottom border */
-		bordered?: boolean;
-		/** Center the title (with actions on the right, back on the left) */
-		centered?: boolean;
-		/** Back navigation href (shows back arrow button) */
-		backHref?: string;
-		/** Sticky position at top of viewport with frosted-glass background */
-		sticky?: boolean;
-		/** Icon snippet (before title) */
-		icon?: Snippet;
-		/** Breadcrumb snippet (above title) */
-		breadcrumb?: Snippet;
-		/** Actions snippet (right side) */
+		eyebrow?: string;
 		actions?: Snippet;
-		/** Tabs or navigation snippet (below header) */
-		tabs?: Snippet;
-		/** Additional CSS classes */
+		breadcrumb?: Snippet;
+		/** v0.1.x-Compat: heute ignoriert, alle Header rendern in der gleichen Größe. */
+		size?: 'sm' | 'md' | 'lg';
+		/** v0.1.x-Compat: Header zentrieren statt links-bündig. */
+		centered?: boolean;
+		/** v0.1.x-Compat. */
 		class?: string;
 	}
 
-	let {
-		title,
-		description,
-		size = 'md',
-		bordered = false,
-		centered = false,
-		backHref,
-		sticky = false,
-		icon,
-		breadcrumb,
-		actions,
-		tabs,
-		class: className = '',
-	}: Props = $props();
-
-	const stickyClasses =
-		'sticky top-0 z-40 backdrop-blur-lg bg-[hsl(var(--color-background,0_0%_100%)/0.8)] border-b border-[hsl(var(--color-border)/0.3)]';
-
-	const sizeClasses: Record<HeaderSize, { container: string; title: string }> = {
-		sm: {
-			container: 'py-3',
-			title: 'text-lg',
-		},
-		md: {
-			container: 'py-4',
-			title: 'text-xl',
-		},
-		lg: {
-			container: 'py-6',
-			title: 'text-2xl',
-		},
-	};
+	let { title, subtitle, description, eyebrow, actions, breadcrumb }: Props = $props();
+	const effectiveSubtitle = $derived(subtitle ?? description);
 </script>
 
-<header
-	class="page-header {sizeClasses[size].container} {bordered ? 'border-b border-theme' : ''} {sticky
-		? stickyClasses
-		: ''} {className}"
->
-	<!-- Breadcrumb -->
+<header class="page-header">
 	{#if breadcrumb}
-		<div
-			class="page-header__breadcrumb mb-2 text-sm text-theme-secondary {centered
-				? 'text-center'
-				: ''}"
-		>
-			{@render breadcrumb()}
-		</div>
+		<div class="breadcrumb">{@render breadcrumb()}</div>
 	{/if}
-
-	{#if centered}
-		<!-- Centered Layout -->
-		<div class="relative flex items-center justify-center min-h-[2.5rem]">
-			<!-- Back Button (left) -->
-			{#if backHref}
-				<a
-					href={backHref}
-					class="absolute left-0 p-1.5 rounded-lg text-theme-secondary hover:text-theme hover:bg-theme-secondary/10 transition-colors"
-					aria-label="Zurück"
-				>
-					<CaretLeft size={20} />
-				</a>
-			{/if}
-
-			<!-- Centered Title & Description -->
-			<div class="text-center">
-				{#if icon}
-					<div class="page-header__icon inline-block text-theme-secondary mb-1">
-						{@render icon()}
-					</div>
-				{/if}
-				<h1 class="font-semibold text-theme {sizeClasses[size].title}">
-					{title}
-				</h1>
-				{#if description}
-					<Text variant="muted" class="mt-1">
-						{description}
-					</Text>
-				{/if}
-			</div>
-
-			<!-- Actions (right) -->
-			{#if actions}
-				<div class="absolute right-0 flex items-center gap-2">
-					{@render actions()}
-				</div>
-			{/if}
+	<div class="header-row">
+		<div class="header-text">
+			{#if eyebrow}<p class="eyebrow">{eyebrow}</p>{/if}
+			<h1 class="title">{title}</h1>
+			{#if effectiveSubtitle}<p class="subtitle">{effectiveSubtitle}</p>{/if}
 		</div>
-	{:else}
-		<!-- Default Layout -->
-		<div class="flex items-center justify-between gap-4">
-			<div class="flex items-center gap-3 min-w-0">
-				<!-- Back Button -->
-				{#if backHref}
-					<a
-						href={backHref}
-						class="page-header__back flex-shrink-0 p-1.5 -ml-1.5 rounded-lg text-theme-secondary hover:text-theme hover:bg-theme-secondary/10 transition-colors"
-						aria-label="Zurück"
-					>
-						<CaretLeft size={20} />
-					</a>
-				{/if}
-
-				<!-- Icon -->
-				{#if icon}
-					<div class="page-header__icon flex-shrink-0 text-theme-secondary">
-						{@render icon()}
-					</div>
-				{/if}
-
-				<!-- Title & Description -->
-				<div class="min-w-0">
-					<h1 class="font-semibold text-theme {sizeClasses[size].title} truncate">
-						{title}
-					</h1>
-					{#if description}
-						<Text variant="muted" class="mt-1">
-							{description}
-						</Text>
-					{/if}
-				</div>
-			</div>
-
-			<!-- Actions -->
-			{#if actions}
-				<div class="page-header__actions flex-shrink-0 flex items-center gap-2">
-					{@render actions()}
-				</div>
-			{/if}
-		</div>
-	{/if}
-
-	<!-- Tabs/Navigation -->
-	{#if tabs}
-		<div class="page-header__tabs mt-4">
-			{@render tabs()}
-		</div>
-	{/if}
+		{#if actions}
+			<div class="header-actions">{@render actions()}</div>
+		{/if}
+	</div>
 </header>
+
+<style>
+	.page-header {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding-bottom: 1rem;
+		margin-bottom: 1.5rem;
+		border-bottom: 1px solid hsl(var(--color-border));
+		font-family: inherit;
+	}
+
+	.breadcrumb {
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.header-row {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-items: flex-start;
+		gap: 1rem;
+	}
+
+	.header-text {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.eyebrow {
+		margin: 0 0 0.25rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.title {
+		margin: 0;
+		font-size: 1.5rem;
+		font-weight: 600;
+		line-height: 1.25;
+		color: hsl(var(--color-foreground));
+	}
+
+	.subtitle {
+		margin: 0.375rem 0 0;
+		font-size: 0.9375rem;
+		color: hsl(var(--color-muted-foreground));
+		line-height: 1.45;
+	}
+
+	.header-actions {
+		display: flex;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+		flex-shrink: 0;
+	}
+</style>
diff --git a/packages/shared-ui/src/molecules/ReminderPicker.svelte b/packages/shared-ui/src/molecules/ReminderPicker.svelte
index e20f9c6ad..256bfb1ad 100644
--- a/packages/shared-ui/src/molecules/ReminderPicker.svelte
+++ b/packages/shared-ui/src/molecules/ReminderPicker.svelte
@@ -1,24 +1,15 @@
 <script lang="ts">
-	import { Bell, BellSlash } from '@mana/shared-icons';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
 
-	/**
-	 * Reusable reminder time picker dropdown.
-	 * Lets user select "X minutes before" for reminders on tasks, events, etc.
-	 */
-
-	interface ReminderOption {
+	export interface ReminderOption {
 		value: number | null;
 		label: string;
 	}
 
 	interface Props {
-		/** Selected value in minutes (null = no reminder) */
 		value: number | null;
-		/** Called when selection changes */
 		onChange: (minutes: number | null) => void;
-		/** Custom options (defaults to standard set) */
 		options?: ReminderOption[];
-		/** Disable the picker */
 		disabled?: boolean;
 	}
 
@@ -39,30 +30,56 @@
 		onChange(raw === '' ? null : parseInt(raw, 10));
 	}
 
-	const displayLabel = $derived(
-		options.find((o) => o.value === value)?.label ?? 'Keine Erinnerung'
-	);
-
 	const hasReminder = $derived(value !== null);
 </script>
 
-<div class="inline-flex items-center gap-1.5">
-	{#if hasReminder}
-		<Bell size={14} weight="fill" class="text-primary flex-shrink-0" />
-	{:else}
-		<BellSlash size={14} class="text-muted-foreground flex-shrink-0" />
-	{/if}
-	<select
-		class="appearance-none bg-transparent text-xs cursor-pointer
-			{hasReminder ? 'text-primary font-medium' : 'text-muted-foreground'}
-			focus:outline-none"
-		{disabled}
-		onchange={handleChange}
-	>
-		{#each options as option}
-			<option value={option.value ?? ''} selected={option.value === value}>
-				{option.label}
-			</option>
+<label class="reminder-picker" class:active={hasReminder}>
+	<DynamicIcon name={hasReminder ? 'bell-fill' : 'bell-slash'} size="sm" ariaLabel="Erinnerung" />
+	<select {disabled} onchange={handleChange} value={value ?? ''}>
+		{#each options as option (option.value ?? 'none')}
+			<option value={option.value ?? ''}>{option.label}</option>
 		{/each}
 	</select>
-</div>
+</label>
+
+<style>
+	.reminder-picker {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.125rem 0.25rem;
+		color: hsl(var(--color-muted-foreground));
+		font-family: inherit;
+	}
+
+	.reminder-picker.active {
+		color: hsl(var(--color-primary));
+	}
+
+	.reminder-picker select {
+		appearance: none;
+		-webkit-appearance: none;
+		background: transparent;
+		border: none;
+		color: inherit;
+		font: inherit;
+		font-size: 0.75rem;
+		cursor: pointer;
+		padding: 0;
+	}
+
+	.reminder-picker.active select {
+		font-weight: 500;
+	}
+
+	.reminder-picker select:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
+		border-radius: 0.25rem;
+	}
+
+	.reminder-picker select:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>
diff --git a/packages/shared-ui/src/molecules/ReminderPicker.test.ts b/packages/shared-ui/src/molecules/ReminderPicker.test.ts
deleted file mode 100644
index fa5ab926c..000000000
--- a/packages/shared-ui/src/molecules/ReminderPicker.test.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import ReminderPicker from './ReminderPicker.svelte';
-
-describe('ReminderPicker', () => {
-	it('renders a select element', () => {
-		const { container } = render(ReminderPicker, {
-			props: { value: null, onChange: vi.fn() },
-		});
-		expect(container.querySelector('select')).toBeInTheDocument();
-	});
-
-	it('renders default options', () => {
-		const { container } = render(ReminderPicker, {
-			props: { value: null, onChange: vi.fn() },
-		});
-		const options = container.querySelectorAll('option');
-		expect(options.length).toBeGreaterThanOrEqual(5);
-	});
-
-	it('shows bell icon when reminder is set', () => {
-		const { container } = render(ReminderPicker, {
-			props: { value: 15, onChange: vi.fn() },
-		});
-		// Bell icon should be present (not BellSlash)
-		const svgs = container.querySelectorAll('svg');
-		expect(svgs.length).toBeGreaterThan(0);
-	});
-
-	it('calls onChange when selection changes', async () => {
-		const onChange = vi.fn();
-		const { container } = render(ReminderPicker, {
-			props: { value: null, onChange },
-		});
-		const select = container.querySelector('select')!;
-		await fireEvent.change(select, { target: { value: '30' } });
-		expect(onChange).toHaveBeenCalledWith(30);
-	});
-
-	it('calls onChange with null for "no reminder"', async () => {
-		const onChange = vi.fn();
-		const { container } = render(ReminderPicker, {
-			props: { value: 15, onChange },
-		});
-		const select = container.querySelector('select')!;
-		await fireEvent.change(select, { target: { value: '' } });
-		expect(onChange).toHaveBeenCalledWith(null);
-	});
-
-	it('supports disabled state', () => {
-		const { container } = render(ReminderPicker, {
-			props: { value: null, onChange: vi.fn(), disabled: true },
-		});
-		const select = container.querySelector('select')!;
-		expect(select.disabled).toBe(true);
-	});
-});
diff --git a/packages/shared-ui/src/molecules/Select.stories.svelte b/packages/shared-ui/src/molecules/Select.stories.svelte
new file mode 100644
index 000000000..f1c30c57f
--- /dev/null
+++ b/packages/shared-ui/src/molecules/Select.stories.svelte
@@ -0,0 +1,57 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Select from './Select.svelte';
+
+	const variantOptions = [
+		{ value: 'mana', label: 'Mana — Verein-Brand' },
+		{ value: 'paper', label: 'Paper — Sepia, lese-fokussiert' },
+		{ value: 'forest', label: 'Forest — Tiefgrün' },
+		{ value: 'lume', label: 'Lume — Gold-Akzent' },
+		{ value: 'twilight', label: 'Twilight — Indigo' },
+		{ value: 'monochrome', label: 'Monochrom' },
+	];
+
+	const { Story } = defineMeta({
+		title: 'Molecules/Select',
+		component: Select,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<div style="width: 320px;">
+			<Select label="Theme-Variant" placeholder="Wählen …" options={variantOptions} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithValue">
+	{#snippet children()}
+		<div style="width: 320px;">
+			<Select label="Aktives Theme" value="forest" options={variantOptions} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithError">
+	{#snippet children()}
+		<div style="width: 320px;">
+			<Select
+				label="Pflichtfeld"
+				placeholder="Wählen …"
+				options={variantOptions}
+				error="Bitte ein Theme auswählen."
+				required
+			/>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Disabled">
+	{#snippet children()}
+		<div style="width: 320px;">
+			<Select label="Theme" value="mana" options={variantOptions} disabled />
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/molecules/Select.svelte b/packages/shared-ui/src/molecules/Select.svelte
index 33c4a16fb..00eb15393 100644
--- a/packages/shared-ui/src/molecules/Select.svelte
+++ b/packages/shared-ui/src/molecules/Select.svelte
@@ -1,159 +1,174 @@
 <script lang="ts">
-	import type { SelectOption } from './Select.types';
-	import { CaretDown } from '@mana/shared-icons';
+	type Size = 'sm' | 'md' | 'lg';
+
+	interface Option {
+		value: string;
+		label: string;
+		disabled?: boolean;
+	}
 
 	interface Props {
-		/** Current selected value */
-		value: string;
-		/** Available options */
-		options: SelectOption[];
-		/** Called when selection changes */
-		onchange?: (value: string) => void;
-		/** Label text */
+		value?: string;
+		options: Option[];
 		label?: string;
-		/** Placeholder text (shown as first disabled option) */
 		placeholder?: string;
-		/** Error message */
+		hint?: string;
 		error?: string;
-		/** Disable the select */
 		disabled?: boolean;
-		/** Mark as required */
 		required?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-		/** Unique ID for accessibility */
+		size?: Size;
 		id?: string;
+		name?: string;
+		ariaLabel?: string;
+		onchange?: (e: Event) => void;
 	}
 
 	let {
-		value = $bindable(),
+		value = $bindable(''),
 		options,
-		onchange,
 		label,
 		placeholder,
+		hint,
 		error,
 		disabled = false,
 		required = false,
-		class: className = '',
-		id = `select-${Math.random().toString(36).slice(2, 9)}`,
+		size = 'md',
+		id,
+		name,
+		ariaLabel,
+		onchange,
 	}: Props = $props();
 
-	function handleChange(e: Event) {
-		const target = e.target as HTMLSelectElement;
-		value = target.value;
-		onchange?.(target.value);
-	}
+	const inputId = $derived(id ?? `select-${Math.random().toString(36).slice(2, 9)}`);
+	const hintId = $derived(hint || error ? `${inputId}-hint` : undefined);
 </script>
 
-<div class="select-wrapper {className}">
+<div class="field">
 	{#if label}
-		<label for={id} class="select-label">
+		<label for={inputId}>
 			{label}
-			{#if required}
-				<span class="select-required">*</span>
-			{/if}
+			{#if required}<span class="required" aria-hidden="true">*</span>{/if}
 		</label>
 	{/if}
-
-	<div class="select-container">
+	<div class="wrap size-{size}" class:disabled class:has-error={!!error}>
 		<select
-			{id}
-			{value}
+			id={inputId}
+			{name}
 			{disabled}
 			{required}
-			onchange={handleChange}
-			class="select-input {error ? 'select-input--error' : ''}"
+			aria-label={ariaLabel}
+			aria-invalid={error ? 'true' : undefined}
+			aria-describedby={hintId}
+			bind:value
+			{onchange}
 		>
 			{#if placeholder}
-				<option value="" disabled selected={!value}>{placeholder}</option>
+				<option value="" disabled selected hidden>{placeholder}</option>
 			{/if}
-			{#each options as option}
-				<option value={option.value} disabled={option.disabled}>
-					{option.label}
-				</option>
+			{#each options as opt}
+				<option value={opt.value} disabled={opt.disabled}>{opt.label}</option>
 			{/each}
 		</select>
-		<div class="select-icon">
-			<CaretDown size={16} />
-		</div>
+		<span class="caret" aria-hidden="true">▾</span>
 	</div>
-
 	{#if error}
-		<p class="select-error">{error}</p>
+		<p class="hint error" id={hintId} role="alert">{error}</p>
+	{:else if hint}
+		<p class="hint" id={hintId}>{hint}</p>
 	{/if}
 </div>
 
 <style>
-	.select-wrapper {
+	.field {
 		display: flex;
 		flex-direction: column;
 		gap: 0.375rem;
 	}
 
-	.select-label {
+	label {
 		font-size: 0.875rem;
 		font-weight: 500;
 		color: hsl(var(--color-foreground));
 	}
 
-	.select-required {
+	.required {
 		color: hsl(var(--color-error));
 		margin-left: 0.125rem;
 	}
 
-	.select-container {
+	.wrap {
 		position: relative;
-	}
-
-	.select-input {
-		width: 100%;
-		appearance: none;
-		padding: 0.625rem 2.5rem 0.625rem 1rem;
-		font-size: 0.875rem;
-		color: hsl(var(--color-foreground));
-		background-color: hsl(var(--color-surface));
+		display: flex;
+		align-items: center;
+		background: hsl(var(--color-surface));
 		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.5rem;
-		cursor: pointer;
-		transition: all 0.15s ease;
+		transition:
+			border-color 0.15s ease,
+			box-shadow 0.15s ease;
 	}
 
-	.select-input:hover:not(:disabled) {
-		border-color: hsl(var(--color-border-strong));
-	}
-
-	.select-input:focus {
-		outline: none;
+	.wrap:focus-within {
 		border-color: hsl(var(--color-primary));
-		box-shadow: 0 0 0 3px hsl(var(--color-primary) / 0.1);
+		box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.2);
 	}
 
-	.select-input:disabled {
-		opacity: 0.5;
+	.wrap.disabled {
+		opacity: 0.6;
+		background: hsl(var(--color-muted));
+	}
+
+	.wrap.has-error {
+		border-color: hsl(var(--color-error));
+	}
+
+	.size-sm select {
+		padding: 0.25rem 2rem 0.25rem 0.625rem;
+	}
+	.size-md select {
+		padding: 0.5rem 2rem 0.5rem 0.75rem;
+	}
+	.size-lg select {
+		padding: 0.625rem 2rem 0.625rem 0.875rem;
+	}
+
+	select {
+		appearance: none;
+		flex: 1;
+		min-width: 0;
+		border: none;
+		background: transparent;
+		color: hsl(var(--color-foreground));
+		font: inherit;
+		outline: none;
+		cursor: pointer;
+	}
+
+	select:disabled {
 		cursor: not-allowed;
 	}
 
-	.select-input--error {
-		border-color: hsl(var(--color-error));
-	}
-
-	.select-input--error:focus {
-		border-color: hsl(var(--color-error));
-		box-shadow: 0 0 0 3px hsl(var(--color-error) / 0.1);
-	}
-
-	.select-icon {
+	.caret {
 		position: absolute;
-		right: 0.75rem;
-		top: 50%;
-		transform: translateY(-50%);
+		right: 0.625rem;
 		pointer-events: none;
 		color: hsl(var(--color-muted-foreground));
+		font-size: 0.875rem;
+	}
+
+	.hint {
+		margin: 0;
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
 	}
 
-	.select-error {
-		font-size: 0.75rem;
+	.hint.error {
 		color: hsl(var(--color-error));
-		margin: 0;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.wrap {
+			transition: none;
+		}
 	}
 </style>
diff --git a/packages/shared-ui/src/molecules/Select.types.ts b/packages/shared-ui/src/molecules/Select.types.ts
deleted file mode 100644
index ca5bc638a..000000000
--- a/packages/shared-ui/src/molecules/Select.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface SelectOption {
-	value: string;
-	label: string;
-	disabled?: boolean;
-}
diff --git a/packages/shared-ui/src/molecules/TagBadge.stories.svelte b/packages/shared-ui/src/molecules/TagBadge.stories.svelte
new file mode 100644
index 000000000..27edfd808
--- /dev/null
+++ b/packages/shared-ui/src/molecules/TagBadge.stories.svelte
@@ -0,0 +1,36 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import TagBadge from './TagBadge.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Molecules/TagBadge',
+		component: TagBadge,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<TagBadge label="Sprache" />
+	{/snippet}
+</Story>
+
+<Story name="WithColor">
+	{#snippet children()}
+		<div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
+			<TagBadge label="Spanisch" color="#FF6600" />
+			<TagBadge label="Geschichte" color="#DC2626" />
+			<TagBadge label="Botanik" color="#16a34a" />
+			<TagBadge label="Akkord" color="#07D6FF" />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="SizeSweep">
+	{#snippet children()}
+		<div style="display:flex; gap:0.5rem; align-items:center;">
+			<TagBadge label="sm" color="#16a34a" size="sm" />
+			<TagBadge label="md" color="#16a34a" size="md" />
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/molecules/TagBadge.svelte b/packages/shared-ui/src/molecules/TagBadge.svelte
new file mode 100644
index 000000000..9a8b994f3
--- /dev/null
+++ b/packages/shared-ui/src/molecules/TagBadge.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	type Size = 'sm' | 'md';
+
+	interface Props {
+		label: string;
+		color?: string | null;
+		size?: Size;
+		title?: string;
+	}
+
+	let { label, color = null, size = 'sm', title }: Props = $props();
+</script>
+
+<span
+	class="tag-badge size-{size}"
+	style:--tag-color={color || null}
+	class:has-color={!!color}
+	{title}
+>
+	{#if color}
+		<span class="dot" aria-hidden="true"></span>
+	{/if}
+	<span class="label">{label}</span>
+</span>
+
+<style>
+	.tag-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.0625rem 0.5rem;
+		border-radius: 9999px;
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-muted-foreground));
+		font-size: 0.75rem;
+		line-height: 1.5;
+		font-family: inherit;
+		white-space: nowrap;
+	}
+
+	.size-md {
+		padding: 0.125rem 0.625rem;
+		font-size: 0.8125rem;
+	}
+
+	.dot {
+		display: inline-block;
+		width: 0.4375rem;
+		height: 0.4375rem;
+		border-radius: 50%;
+		background: var(--tag-color, hsl(var(--color-primary)));
+		flex-shrink: 0;
+	}
+
+	.label {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.has-color {
+		color: hsl(var(--color-foreground));
+	}
+</style>
diff --git a/packages/shared-ui/src/molecules/TagChip.stories.svelte b/packages/shared-ui/src/molecules/TagChip.stories.svelte
new file mode 100644
index 000000000..ea7ad017b
--- /dev/null
+++ b/packages/shared-ui/src/molecules/TagChip.stories.svelte
@@ -0,0 +1,56 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import TagChip from './TagChip.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Molecules/TagChip',
+		component: TagChip,
+		tags: ['autodocs'],
+	});
+
+	let removed = $state(false);
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<TagChip label="Spanisch" color="#FF6600" />
+	{/snippet}
+</Story>
+
+<Story name="Active">
+	{#snippet children()}
+		<TagChip label="aktiv" active />
+	{/snippet}
+</Story>
+
+<Story name="Removable">
+	{#snippet children()}
+		<div style="display:flex; gap:0.5rem; align-items:center;">
+			{#if !removed}
+				<TagChip label="entfernbar" color="#16a34a" removable onRemove={() => (removed = true)} />
+			{:else}
+				<span style="color:hsl(var(--color-muted-foreground)); font-size:0.875rem;">
+					Tag entfernt — Story neu laden zum Reset
+				</span>
+			{/if}
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Clickable">
+	{#snippet children()}
+		<TagChip label="klickbar" color="#6366F1" onclick={() => alert('clicked')} />
+	{/snippet}
+</Story>
+
+<Story name="ChipRow">
+	{#snippet children()}
+		<div style="display:flex; flex-wrap:wrap; gap:0.375rem; max-width:24rem;">
+			<TagChip label="Spanisch" color="#FF6600" />
+			<TagChip label="Vokabular" color="#DC2626" />
+			<TagChip label="A1" color="#07D6FF" />
+			<TagChip label="Reise" color="#16a34a" />
+			<TagChip label="2026" />
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/molecules/TagChip.svelte b/packages/shared-ui/src/molecules/TagChip.svelte
new file mode 100644
index 000000000..9a526f7bd
--- /dev/null
+++ b/packages/shared-ui/src/molecules/TagChip.svelte
@@ -0,0 +1,169 @@
+<script lang="ts">
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
+
+	type Size = 'sm' | 'md';
+
+	interface Props {
+		label?: string;
+		/** v0.1.x-Compat-Alias für `label`. */
+		name?: string;
+		color?: string | null;
+		size?: Size;
+		removable?: boolean;
+		onRemove?: () => void;
+		onclick?: (e: MouseEvent) => void;
+		active?: boolean;
+		removeLabel?: string;
+	}
+
+	let {
+		label,
+		name,
+		color = null,
+		size = 'sm',
+		removable = false,
+		onRemove,
+		onclick,
+		active = false,
+		removeLabel = 'Entfernen',
+	}: Props = $props();
+
+	const effectiveLabel = $derived(label ?? name ?? '');
+
+	function handleRemove(e: MouseEvent) {
+		e.stopPropagation();
+		onRemove?.();
+	}
+</script>
+
+{#if onclick}
+	<button
+		type="button"
+		class="chip size-{size}"
+		class:active
+		class:has-color={!!color}
+		style:--tag-color={color || null}
+		{onclick}
+	>
+		{#if color}
+			<span class="dot" aria-hidden="true"></span>
+		{/if}
+		<span class="label">{effectiveLabel}</span>
+		{#if removable && onRemove}
+			<button type="button" class="remove" aria-label={removeLabel} onclick={handleRemove}>
+				<DynamicIcon name="x" size="xs" />
+			</button>
+		{/if}
+	</button>
+{:else}
+	<span
+		class="chip size-{size}"
+		class:active
+		class:has-color={!!color}
+		style:--tag-color={color || null}
+	>
+		{#if color}
+			<span class="dot" aria-hidden="true"></span>
+		{/if}
+		<span class="label">{effectiveLabel}</span>
+		{#if removable && onRemove}
+			<button type="button" class="remove" aria-label={removeLabel} onclick={handleRemove}>
+				<DynamicIcon name="x" size="xs" />
+			</button>
+		{/if}
+	</span>
+{/if}
+
+<style>
+	.chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.125rem 0.5rem;
+		border-radius: 9999px;
+		background: hsl(var(--color-surface));
+		color: hsl(var(--color-foreground));
+		border: 1px solid hsl(var(--color-border));
+		font-size: 0.8125rem;
+		line-height: 1.4;
+		font-family: inherit;
+		white-space: nowrap;
+		cursor: default;
+	}
+
+	button.chip {
+		cursor: pointer;
+		transition:
+			background-color 0.15s ease,
+			border-color 0.15s ease;
+	}
+
+	button.chip:hover {
+		background: hsl(var(--color-surface-hover));
+		border-color: hsl(var(--color-primary) / 0.4);
+	}
+
+	button.chip:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
+	}
+
+	.size-sm {
+		padding: 0.125rem 0.5rem 0.125rem 0.5rem;
+		font-size: 0.75rem;
+	}
+	.size-md {
+		padding: 0.1875rem 0.625rem;
+		font-size: 0.8125rem;
+	}
+
+	.dot {
+		display: inline-block;
+		width: 0.4375rem;
+		height: 0.4375rem;
+		border-radius: 50%;
+		background: var(--tag-color, hsl(var(--color-primary)));
+		flex-shrink: 0;
+	}
+
+	.label {
+		min-width: 0;
+	}
+
+	.chip.active {
+		background: hsl(var(--color-primary) / 0.12);
+		border-color: hsl(var(--color-primary) / 0.4);
+		color: hsl(var(--color-primary));
+	}
+
+	.remove {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.0625rem;
+		margin-left: 0.0625rem;
+		margin-right: -0.1875rem;
+		border: none;
+		background: transparent;
+		color: hsl(var(--color-muted-foreground));
+		border-radius: 50%;
+		cursor: pointer;
+		font: inherit;
+	}
+
+	.remove:hover {
+		color: hsl(var(--color-error));
+		background: hsl(var(--color-error) / 0.1);
+	}
+
+	.remove:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 1px;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		button.chip {
+			transition: none;
+		}
+	}
+</style>
diff --git a/packages/shared-ui/src/molecules/TagField.svelte b/packages/shared-ui/src/molecules/TagField.svelte
new file mode 100644
index 000000000..bfa04228c
--- /dev/null
+++ b/packages/shared-ui/src/molecules/TagField.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import TagSelector, { type Tag as SelectorTag } from './TagSelector.svelte';
+
+	interface TagShape {
+		id: string;
+		name: string;
+		color?: string | null;
+	}
+
+	interface Props {
+		tags: TagShape[];
+		selectedIds: string[];
+		onChange: (ids: string[]) => void;
+		onCreate?: (name: string) => void;
+		maxTags?: number;
+		label?: string;
+		placeholder?: string;
+	}
+
+	let {
+		tags,
+		selectedIds,
+		onChange,
+		onCreate,
+		maxTags,
+		label,
+		placeholder = 'Tag suchen oder anlegen …',
+	}: Props = $props();
+
+	const selectorTags = $derived<SelectorTag[]>(
+		tags.map((t) => ({ id: t.id, label: t.name, color: t.color ?? null }))
+	);
+
+	function handleToggle(id: string) {
+		if (selectedIds.includes(id)) {
+			onChange(selectedIds.filter((sid) => sid !== id));
+			return;
+		}
+		if (maxTags && selectedIds.length >= maxTags) return;
+		onChange([...selectedIds, id]);
+	}
+
+	function handleClear() {
+		onChange([]);
+	}
+</script>
+
+<TagSelector
+	tags={selectorTags}
+	{selectedIds}
+	onToggle={handleToggle}
+	onCreate={onCreate ? (name) => onCreate(name) : undefined}
+	onClear={selectedIds.length > 0 ? handleClear : undefined}
+	{label}
+	{placeholder}
+/>
diff --git a/packages/shared-ui/src/molecules/TagSelector.stories.svelte b/packages/shared-ui/src/molecules/TagSelector.stories.svelte
new file mode 100644
index 000000000..920c51d39
--- /dev/null
+++ b/packages/shared-ui/src/molecules/TagSelector.stories.svelte
@@ -0,0 +1,86 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import TagSelector, { type Tag } from './TagSelector.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Molecules/TagSelector',
+		component: TagSelector,
+		tags: ['autodocs'],
+	});
+
+	let tags = $state<Tag[]>([
+		{ id: 'spanisch', label: 'Spanisch', color: '#FF6600' },
+		{ id: 'vokabular', label: 'Vokabular', color: '#DC2626' },
+		{ id: 'reise', label: 'Reise', color: '#16a34a' },
+		{ id: 'a1', label: 'A1', color: '#07D6FF' },
+		{ id: 'a2', label: 'A2', color: '#07D6FF' },
+		{ id: 'b1', label: 'B1', color: '#6366F1' },
+		{ id: 'kueche', label: 'Küche', color: '#F59E0B' },
+		{ id: 'bahnhof', label: 'Bahnhof' },
+	]);
+
+	let selected = $state<string[]>(['spanisch', 'a1']);
+	let nextId = 9;
+
+	function toggle(id: string) {
+		selected = selected.includes(id) ? selected.filter((s) => s !== id) : [...selected, id];
+	}
+
+	function create(label: string) {
+		const id = `new-${nextId++}`;
+		tags = [...tags, { id, label }];
+		selected = [...selected, id];
+	}
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<div style="width:18rem;">
+			<TagSelector
+				{tags}
+				selectedIds={selected}
+				onToggle={toggle}
+				onCreate={create}
+				onClear={() => (selected = [])}
+				label="Tags"
+			/>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Empty">
+	{#snippet children()}
+		<div style="width:18rem;">
+			<TagSelector
+				tags={[]}
+				selectedIds={[]}
+				onToggle={() => {}}
+				onCreate={() => {}}
+				placeholder="Erste Tag erstellen …"
+				createLabel="Anlegen:"
+			/>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="ReadOnly">
+	{#snippet children()}
+		<div style="width:18rem;">
+			<TagSelector {tags} selectedIds={['vokabular', 'a2']} onToggle={() => {}} label="Nur Lesen" />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Disabled">
+	{#snippet children()}
+		<div style="width:18rem;">
+			<TagSelector
+				{tags}
+				selectedIds={['spanisch']}
+				onToggle={() => {}}
+				disabled
+				label="Disabled"
+			/>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/molecules/TagSelector.svelte b/packages/shared-ui/src/molecules/TagSelector.svelte
new file mode 100644
index 000000000..8c8b75fcb
--- /dev/null
+++ b/packages/shared-ui/src/molecules/TagSelector.svelte
@@ -0,0 +1,316 @@
+<script lang="ts">
+	import TagChip from './TagChip.svelte';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
+
+	export interface Tag {
+		id: string;
+		/** Anzeige-Name. v0.1.x-Konsumenten haben `name`, v1.0.0 nimmt `label` — beide funktionieren. */
+		label?: string;
+		/** v0.1.x-Alias für `label`. */
+		name?: string;
+		color?: string | null;
+	}
+
+	interface Props {
+		tags: Tag[];
+		selectedIds?: string[];
+		/** v0.1.x-Compat: Tag-Objekte statt Tag-IDs. Bei gesetztem `selectedTags` wird `selectedIds` daraus abgeleitet. */
+		selectedTags?: Tag[];
+		onToggle?: (id: string) => void;
+		/** v0.1.x-Compat: liefert die aktualisierte Tag-Liste. */
+		onTagsChange?: (tags: Tag[]) => void;
+		onCreate?: (label: string) => void;
+		onClear?: () => void;
+		label?: string;
+		placeholder?: string;
+		/** v0.1.x-Compat-Alias für placeholder. */
+		searchPlaceholder?: string;
+		/** v0.1.x-Compat: heute ignoriert. */
+		addTagLabel?: string;
+		clearLabel?: string;
+		createLabel?: string;
+		emptyLabel?: string;
+		disabled?: boolean;
+		/** v0.1.x-Compat: heute ignoriert. */
+		maxTags?: number;
+	}
+
+	let {
+		tags,
+		selectedIds,
+		selectedTags,
+		onToggle,
+		onTagsChange,
+		onCreate,
+		onClear,
+		label,
+		placeholder = 'Suchen oder neu …',
+		searchPlaceholder,
+		clearLabel = 'Auswahl leeren',
+		createLabel = 'Anlegen:',
+		emptyLabel = 'Keine Tags',
+		disabled = false,
+	}: Props = $props();
+
+	// v0.1.x-Compat: selectedTags → selectedIds
+	const effectiveSelectedIds = $derived<string[]>(
+		selectedIds ?? selectedTags?.map((t) => t.id) ?? []
+	);
+
+	const effectivePlaceholder = $derived(searchPlaceholder ?? placeholder);
+
+	function handleToggle(id: string) {
+		if (onToggle) {
+			onToggle(id);
+			return;
+		}
+		if (onTagsChange) {
+			const current = effectiveSelectedIds;
+			if (current.includes(id)) {
+				const next = tags.filter((t) => current.includes(t.id) && t.id !== id);
+				onTagsChange(next);
+			} else {
+				const tag = tags.find((t) => t.id === id);
+				if (tag) {
+					const next = [...tags.filter((t) => current.includes(t.id)), tag];
+					onTagsChange(next);
+				}
+			}
+		}
+	}
+
+	let query = $state('');
+
+	function tagLabel(t: Tag): string {
+		return t.label ?? t.name ?? '';
+	}
+
+	const filtered = $derived.by(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return tags;
+		return tags.filter((t) => tagLabel(t).toLowerCase().includes(q));
+	});
+
+	const exactMatch = $derived.by(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return true;
+		return tags.some((t) => tagLabel(t).toLowerCase() === q);
+	});
+
+	const canCreate = $derived(!!onCreate && query.trim().length > 0 && !exactMatch);
+
+	function isSelected(id: string): boolean {
+		return effectiveSelectedIds.includes(id);
+	}
+
+	function handleCreate() {
+		if (!canCreate || !onCreate) return;
+		onCreate(query.trim());
+		query = '';
+	}
+
+	function handleSearchKey(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			if (canCreate) handleCreate();
+		}
+	}
+</script>
+
+<div class="tag-selector" class:disabled>
+	{#if label}<span class="header-label">{label}</span>{/if}
+
+	{#if effectiveSelectedIds.length > 0}
+		<div class="selected" aria-label="Ausgewählte Tags">
+			{#each tags.filter((t) => isSelected(t.id)) as tag (tag.id)}
+				<TagChip
+					label={tagLabel(tag)}
+					color={tag.color}
+					removable
+					onRemove={() => handleToggle(tag.id)}
+				/>
+			{/each}
+			{#if onClear}
+				<button type="button" class="clear" onclick={() => onClear?.()}>{clearLabel}</button>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="search">
+		<DynamicIcon name="search" size="sm" />
+		<input type="text" {placeholder} bind:value={query} {disabled} onkeydown={handleSearchKey} />
+	</div>
+
+	<div class="options" role="listbox" aria-multiselectable="true">
+		{#if filtered.length === 0 && !canCreate}
+			<p class="empty">{emptyLabel}</p>
+		{:else}
+			{#each filtered as tag (tag.id)}
+				<button
+					type="button"
+					class="option"
+					class:selected={isSelected(tag.id)}
+					role="option"
+					aria-selected={isSelected(tag.id)}
+					onclick={() => handleToggle(tag.id)}
+				>
+					{#if tag.color}
+						<span class="dot" style:background={tag.color} aria-hidden="true"></span>
+					{/if}
+					<span class="opt-label">{tagLabel(tag)}</span>
+					{#if isSelected(tag.id)}
+						<DynamicIcon name="check" size="sm" />
+					{/if}
+				</button>
+			{/each}
+			{#if canCreate}
+				<button type="button" class="option create" onclick={handleCreate}>
+					<DynamicIcon name="plus" size="sm" />
+					<span class="opt-label">{createLabel} <strong>{query.trim()}</strong></span>
+				</button>
+			{/if}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.tag-selector {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding: 0.625rem;
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.625rem;
+		font-family: inherit;
+	}
+
+	.tag-selector.disabled {
+		opacity: 0.6;
+		pointer-events: none;
+	}
+
+	.header-label {
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: hsl(var(--color-foreground));
+	}
+
+	.selected {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+		align-items: center;
+	}
+
+	.clear {
+		margin-left: 0.25rem;
+		padding: 0.125rem 0.5rem;
+		font-size: 0.75rem;
+		color: hsl(var(--color-muted-foreground));
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		font-family: inherit;
+	}
+	.clear:hover {
+		color: hsl(var(--color-foreground));
+	}
+
+	.search {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.5rem;
+		background: hsl(var(--color-muted));
+		border-radius: 0.375rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+	.search:focus-within {
+		background: hsl(var(--color-surface-hover));
+		color: hsl(var(--color-foreground));
+	}
+
+	.search input {
+		flex: 1;
+		min-width: 0;
+		border: none;
+		background: transparent;
+		color: hsl(var(--color-foreground));
+		font: inherit;
+		font-size: 0.8125rem;
+		outline: none;
+	}
+	.search input::placeholder {
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.options {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		max-height: 14rem;
+		overflow-y: auto;
+	}
+
+	.empty {
+		margin: 0.5rem 0;
+		text-align: center;
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.option {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.375rem 0.5rem;
+		background: transparent;
+		border: none;
+		border-radius: 0.375rem;
+		color: hsl(var(--color-foreground));
+		cursor: pointer;
+		font: inherit;
+		font-size: 0.8125rem;
+		text-align: left;
+	}
+
+	.option:hover {
+		background: hsl(var(--color-surface-hover));
+	}
+
+	.option:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: -2px;
+	}
+
+	.option.selected {
+		color: hsl(var(--color-primary));
+		background: hsl(var(--color-primary) / 0.08);
+	}
+
+	.option.create {
+		color: hsl(var(--color-muted-foreground));
+		font-style: italic;
+	}
+	.option.create strong {
+		color: hsl(var(--color-foreground));
+		font-style: normal;
+		font-weight: 500;
+	}
+
+	.dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+
+	.opt-label {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>
diff --git a/packages/shared-ui/src/molecules/Textarea.stories.svelte b/packages/shared-ui/src/molecules/Textarea.stories.svelte
new file mode 100644
index 000000000..4c46e45a8
--- /dev/null
+++ b/packages/shared-ui/src/molecules/Textarea.stories.svelte
@@ -0,0 +1,56 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Textarea from './Textarea.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Molecules/Textarea',
+		component: Textarea,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<div style="width: 360px;">
+			<Textarea label="Notiz" placeholder="Ein paar Gedanken …" rows={4} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithCharCount">
+	{#snippet children()}
+		<div style="width: 360px;">
+			<Textarea
+				label="Kurzbeschreibung"
+				value="Vereins-Karten zur regelmäßigen Wiederholung."
+				maxLength={200}
+				hint="Wird auf der Sammlungs-Seite angezeigt."
+			/>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="NearLimit">
+	{#snippet children()}
+		<div style="width: 360px;">
+			<Textarea
+				label="Knapp am Limit"
+				value="Hier ist ein Text, der sich dem Maximum nähert. Noch wenige Zeichen frei."
+				maxLength={120}
+			/>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithError">
+	{#snippet children()}
+		<div style="width: 360px;">
+			<Textarea
+				label="Antwort"
+				value=""
+				error="Pflichtfeld — bitte mindestens einen Satz schreiben."
+				required
+			/>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/molecules/Textarea.svelte b/packages/shared-ui/src/molecules/Textarea.svelte
index 181c64e3f..6193c717d 100644
--- a/packages/shared-ui/src/molecules/Textarea.svelte
+++ b/packages/shared-ui/src/molecules/Textarea.svelte
@@ -1,201 +1,186 @@
 <script lang="ts">
 	interface Props {
-		/** Current value */
-		value: string;
-		/** Called on input */
-		oninput?: (value: string) => void;
-		/** Called on change (blur) */
-		onchange?: (value: string) => void;
-		/** Label text */
-		label?: string;
-		/** Placeholder text */
+		value?: string;
 		placeholder?: string;
-		/** Number of visible rows */
-		rows?: number;
-		/** Maximum character count */
-		maxlength?: number;
-		/** Show character count */
-		showCount?: boolean;
-		/** Error message */
+		label?: string;
+		hint?: string;
 		error?: string;
-		/** Disable the textarea */
 		disabled?: boolean;
-		/** Mark as required */
+		readonly?: boolean;
 		required?: boolean;
-		/** Enable auto-resize based on content */
-		autoResize?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-		/** Unique ID for accessibility */
+		rows?: number;
+		maxLength?: number;
 		id?: string;
+		name?: string;
+		ariaLabel?: string;
+		oninput?: (e: Event) => void;
+		onchange?: (e: Event) => void;
+		onblur?: (e: FocusEvent) => void;
 	}
 
 	let {
-		value = $bindable(),
-		oninput,
-		onchange,
-		label,
+		value = $bindable(''),
 		placeholder,
-		rows = 3,
-		maxlength,
-		showCount = false,
+		label,
+		hint,
 		error,
 		disabled = false,
+		readonly = false,
 		required = false,
-		autoResize = false,
-		class: className = '',
-		id = `textarea-${Math.random().toString(36).slice(2, 9)}`,
+		rows = 4,
+		maxLength,
+		id,
+		name,
+		ariaLabel,
+		oninput,
+		onchange,
+		onblur,
 	}: Props = $props();
 
-	let textareaElement: HTMLTextAreaElement | null = $state(null);
-
-	const charCount = $derived(value?.length ?? 0);
-	const isOverLimit = $derived(maxlength ? charCount > maxlength : false);
-
-	function handleInput(e: Event) {
-		const target = e.target as HTMLTextAreaElement;
-		value = target.value;
-		oninput?.(target.value);
-
-		if (autoResize && textareaElement) {
-			textareaElement.style.height = 'auto';
-			textareaElement.style.height = `${textareaElement.scrollHeight}px`;
-		}
-	}
-
-	function handleChange(e: Event) {
-		const target = e.target as HTMLTextAreaElement;
-		onchange?.(target.value);
-	}
+	const inputId = $derived(id ?? `textarea-${Math.random().toString(36).slice(2, 9)}`);
+	const hintId = $derived(hint || error ? `${inputId}-hint` : undefined);
+	const remainingChars = $derived(maxLength ? maxLength - (value?.length ?? 0) : null);
 </script>
 
-<div class="textarea-wrapper {className}">
+<div class="field">
 	{#if label}
-		<label for={id} class="textarea-label">
+		<label for={inputId}>
 			{label}
-			{#if required}
-				<span class="textarea-required">*</span>
-			{/if}
+			{#if required}<span class="required" aria-hidden="true">*</span>{/if}
 		</label>
 	{/if}
-
-	<textarea
-		{id}
-		bind:this={textareaElement}
-		{value}
-		{placeholder}
-		{rows}
-		{maxlength}
-		{disabled}
-		{required}
-		oninput={handleInput}
-		onchange={handleChange}
-		class="textarea-input {error || isOverLimit ? 'textarea-input--error' : ''} {autoResize
-			? 'textarea-input--auto-resize'
-			: ''}"
-	></textarea>
-
-	<div class="textarea-footer">
+	<div class="wrap" class:disabled class:has-error={!!error}>
+		<textarea
+			id={inputId}
+			{name}
+			{placeholder}
+			{disabled}
+			{readonly}
+			{required}
+			{rows}
+			maxlength={maxLength}
+			aria-label={ariaLabel}
+			aria-invalid={error ? 'true' : undefined}
+			aria-describedby={hintId}
+			bind:value
+			{oninput}
+			{onchange}
+			{onblur}
+		></textarea>
+	</div>
+	<div class="meta">
 		{#if error}
-			<p class="textarea-error">{error}</p>
+			<p class="hint error" id={hintId} role="alert">{error}</p>
+		{:else if hint}
+			<p class="hint" id={hintId}>{hint}</p>
 		{:else}
 			<span></span>
 		{/if}
-
-		{#if showCount || maxlength}
-			<span class="textarea-count {isOverLimit ? 'textarea-count--error' : ''}">
-				{charCount}{#if maxlength}/{maxlength}{/if}
+		{#if remainingChars !== null}
+			<span class="char-count" class:near-limit={remainingChars <= 20}>
+				{remainingChars}
 			</span>
 		{/if}
 	</div>
 </div>
 
 <style>
-	.textarea-wrapper {
+	.field {
 		display: flex;
 		flex-direction: column;
 		gap: 0.375rem;
 	}
 
-	.textarea-label {
+	label {
 		font-size: 0.875rem;
 		font-weight: 500;
 		color: hsl(var(--color-foreground));
 	}
 
-	.textarea-required {
+	.required {
 		color: hsl(var(--color-error));
 		margin-left: 0.125rem;
 	}
 
-	.textarea-input {
-		width: 100%;
-		padding: 0.625rem 1rem;
-		font-size: 0.875rem;
-		font-family: inherit;
-		line-height: 1.5;
-		color: hsl(var(--color-foreground));
-		background-color: hsl(var(--color-surface));
+	.wrap {
+		background: hsl(var(--color-surface));
 		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.5rem;
-		resize: vertical;
-		transition: all 0.15s ease;
+		transition:
+			border-color 0.15s ease,
+			box-shadow 0.15s ease;
 	}
 
-	.textarea-input:hover:not(:disabled) {
-		border-color: hsl(var(--color-border-strong));
-	}
-
-	.textarea-input:focus {
-		outline: none;
+	.wrap:focus-within {
 		border-color: hsl(var(--color-primary));
-		box-shadow: 0 0 0 3px hsl(var(--color-primary) / 0.1);
+		box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.2);
 	}
 
-	.textarea-input:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-		resize: none;
+	.wrap.disabled {
+		opacity: 0.6;
+		background: hsl(var(--color-muted));
 	}
 
-	.textarea-input--error {
+	.wrap.has-error {
 		border-color: hsl(var(--color-error));
 	}
 
-	.textarea-input--error:focus {
-		border-color: hsl(var(--color-error));
-		box-shadow: 0 0 0 3px hsl(var(--color-error) / 0.1);
+	.wrap.has-error:focus-within {
+		box-shadow: 0 0 0 2px hsl(var(--color-error) / 0.2);
 	}
 
-	.textarea-input--auto-resize {
-		resize: none;
-		overflow: hidden;
+	textarea {
+		display: block;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		border: none;
+		background: transparent;
+		color: hsl(var(--color-foreground));
+		font: inherit;
+		font-family: inherit;
+		outline: none;
+		resize: vertical;
+		min-height: 4rem;
 	}
 
-	.textarea-input::placeholder {
+	textarea::placeholder {
 		color: hsl(var(--color-muted-foreground));
 	}
 
-	.textarea-footer {
+	textarea:disabled {
+		cursor: not-allowed;
+	}
+
+	.meta {
 		display: flex;
 		justify-content: space-between;
-		align-items: center;
-		min-height: 1.25rem;
+		align-items: baseline;
+		gap: 0.5rem;
 	}
 
-	.textarea-error {
-		font-size: 0.75rem;
-		color: hsl(var(--color-error));
+	.hint {
 		margin: 0;
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
 	}
 
-	.textarea-count {
+	.hint.error {
+		color: hsl(var(--color-error));
+	}
+
+	.char-count {
 		font-size: 0.75rem;
 		color: hsl(var(--color-muted-foreground));
-		margin-left: auto;
+		font-variant-numeric: tabular-nums;
 	}
 
-	.textarea-count--error {
-		color: hsl(var(--color-error));
+	.char-count.near-limit {
+		color: hsl(var(--color-warning));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.wrap {
+			transition: none;
+		}
 	}
 </style>
diff --git a/packages/shared-ui/src/molecules/Toggle.stories.svelte b/packages/shared-ui/src/molecules/Toggle.stories.svelte
new file mode 100644
index 000000000..aff57b2c9
--- /dev/null
+++ b/packages/shared-ui/src/molecules/Toggle.stories.svelte
@@ -0,0 +1,50 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Toggle from './Toggle.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Molecules/Toggle',
+		component: Toggle,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<Toggle label="Dark-Mode" />
+	{/snippet}
+</Story>
+
+<Story name="On">
+	{#snippet children()}
+		<Toggle label="Cross-Device-Sync aktiv" checked={true} />
+	{/snippet}
+</Story>
+
+<Story name="WithHint">
+	{#snippet children()}
+		<Toggle
+			label="Reduzierte Bewegung"
+			hint="Animationen werden auf 0.01ms gekürzt."
+			checked={true}
+		/>
+	{/snippet}
+</Story>
+
+<Story name="SizeSweep">
+	{#snippet children()}
+		<div style="display:flex; flex-direction:column; gap:0.625rem;">
+			<Toggle size="sm" label="Klein" />
+			<Toggle size="md" label="Mittel" />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Disabled">
+	{#snippet children()}
+		<div style="display:flex; flex-direction:column; gap:0.5rem;">
+			<Toggle label="Disabled (off)" disabled />
+			<Toggle label="Disabled (on)" checked={true} disabled />
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/molecules/Toggle.svelte b/packages/shared-ui/src/molecules/Toggle.svelte
index 43efad7bf..26abe07a8 100644
--- a/packages/shared-ui/src/molecules/Toggle.svelte
+++ b/packages/shared-ui/src/molecules/Toggle.svelte
@@ -1,39 +1,166 @@
 <script lang="ts">
+	type Size = 'sm' | 'md';
+
 	interface Props {
-		isOn: boolean;
-		onToggle: (value: boolean) => void;
+		checked?: boolean;
+		/** v0.1.x-Compat-Alias für `checked`. */
+		isOn?: boolean;
+		label?: string;
+		hint?: string;
 		disabled?: boolean;
-		size?: 'sm' | 'md';
+		size?: Size;
+		id?: string;
+		name?: string;
+		ariaLabel?: string;
+		onchange?: (e: Event) => void;
+		/** v0.1.x-Compat: Toggle-Callback mit boolean-Wert. */
+		onToggle?: (value: boolean) => void;
 	}
 
-	let { isOn = false, onToggle, disabled = false, size = 'md' }: Props = $props();
+	let {
+		checked = $bindable(false),
+		isOn,
+		label,
+		hint,
+		disabled = false,
+		size = 'md',
+		id,
+		name,
+		ariaLabel,
+		onchange,
+		onToggle,
+	}: Props = $props();
 
-	function handleToggle() {
-		if (!disabled) {
-			onToggle(!isOn);
+	// v0.1.x-Compat: wenn isOn gesetzt, schiebe es auf checked
+	$effect(() => {
+		if (isOn !== undefined && isOn !== checked) {
+			checked = isOn;
 		}
-	}
+	});
 
-	const sizeClasses = {
-		sm: { track: 'h-6 w-10', thumb: 'h-4 w-4 top-1 left-1', translate: 'translate-x-4' },
-		md: { track: 'h-8 w-14', thumb: 'h-6 w-6 top-1 left-1', translate: 'translate-x-6' },
-	};
+	const inputId = $derived(id ?? `toggle-${Math.random().toString(36).slice(2, 9)}`);
+	const hintId = $derived(hint ? `${inputId}-hint` : undefined);
 </script>
 
-<button
-	onclick={handleToggle}
-	class="relative {sizeClasses[size].track} flex-shrink-0 rounded-full transition-colors {isOn
-		? 'bg-primary'
-		: 'bg-menu'} {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
-	role="switch"
-	aria-checked={isOn}
-	aria-label="Toggle"
-	{disabled}
->
-	<span
-		class="absolute {sizeClasses[size]
-			.thumb} rounded-full bg-white shadow-md transition-transform {isOn
-			? sizeClasses[size].translate
-			: 'translate-x-0'}"
-	></span>
-</button>
+<label class="toggle size-{size}" class:disabled for={inputId}>
+	<input
+		type="checkbox"
+		role="switch"
+		id={inputId}
+		{name}
+		{disabled}
+		aria-label={ariaLabel}
+		aria-describedby={hintId}
+		aria-checked={checked}
+		bind:checked
+		onchange={(e) => {
+			onchange?.(e);
+			onToggle?.((e.currentTarget as HTMLInputElement).checked);
+		}}
+	/>
+	<span class="track" aria-hidden="true">
+		<span class="thumb"></span>
+	</span>
+	{#if label || hint}
+		<span class="label-text">
+			{#if label}{label}{/if}
+			{#if hint}<span class="hint" id={hintId}>{hint}</span>{/if}
+		</span>
+	{/if}
+</label>
+
+<style>
+	.toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.625rem;
+		cursor: pointer;
+		font: inherit;
+		color: hsl(var(--color-foreground));
+	}
+
+	.toggle.disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	input {
+		position: absolute;
+		opacity: 0;
+		pointer-events: none;
+		width: 1px;
+		height: 1px;
+	}
+
+	.track {
+		position: relative;
+		display: inline-block;
+		flex-shrink: 0;
+		background: hsl(var(--color-muted));
+		border-radius: 9999px;
+		transition: background-color 0.2s ease;
+	}
+
+	.size-sm .track {
+		width: 1.75rem;
+		height: 1rem;
+	}
+	.size-md .track {
+		width: 2.25rem;
+		height: 1.25rem;
+	}
+
+	.thumb {
+		position: absolute;
+		top: 2px;
+		left: 2px;
+		background: hsl(var(--color-surface));
+		border-radius: 9999px;
+		box-shadow: 0 1px 2px hsl(var(--color-foreground) / 0.15);
+		transition: transform 0.2s ease;
+	}
+
+	.size-sm .thumb {
+		width: 0.75rem;
+		height: 0.75rem;
+	}
+	.size-md .thumb {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	input:checked + .track {
+		background: hsl(var(--color-primary));
+	}
+
+	.size-sm input:checked + .track .thumb {
+		transform: translateX(0.75rem);
+	}
+	.size-md input:checked + .track .thumb {
+		transform: translateX(1rem);
+	}
+
+	input:focus-visible + .track {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
+	}
+
+	.label-text {
+		font-size: 0.9375rem;
+		line-height: 1.35;
+	}
+
+	.hint {
+		display: block;
+		margin-top: 0.125rem;
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.track,
+		.thumb {
+			transition: none;
+		}
+	}
+</style>
diff --git a/packages/shared-ui/src/molecules/contacts/ContactAvatar.svelte b/packages/shared-ui/src/molecules/contacts/ContactAvatar.svelte
deleted file mode 100644
index 58b81b45b..000000000
--- a/packages/shared-ui/src/molecules/contacts/ContactAvatar.svelte
+++ /dev/null
@@ -1,100 +0,0 @@
-<script lang="ts">
-	import { User } from '@mana/shared-icons';
-
-	interface Props {
-		/** Photo URL */
-		photoUrl?: string | null;
-		/** Display name (for initials fallback) */
-		name?: string;
-		/** Size in pixels */
-		size?: 'xs' | 'sm' | 'md' | 'lg';
-		/** Custom class */
-		class?: string;
-	}
-
-	let { photoUrl, name = '', size = 'md', class: className = '' }: Props = $props();
-
-	const sizeClasses = {
-		xs: 'w-5 h-5 text-[10px]',
-		sm: 'w-6 h-6 text-xs',
-		md: 'w-8 h-8 text-sm',
-		lg: 'w-10 h-10 text-base',
-	};
-
-	const iconSizes = {
-		xs: 10,
-		sm: 12,
-		md: 16,
-		lg: 20,
-	};
-
-	// Generate initials from name
-	const initials = $derived.by(() => {
-		if (!name) return '';
-		const parts = name.trim().split(/\s+/);
-		if (parts.length === 1) {
-			return parts[0].charAt(0).toUpperCase();
-		}
-		return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
-	});
-
-	// Generate a consistent background color based on the name
-	const bgColor = $derived.by(() => {
-		if (!name) return 'bg-gray-400';
-		const colors = [
-			'bg-violet-500',
-			'bg-blue-500',
-			'bg-cyan-500',
-			'bg-teal-500',
-			'bg-green-500',
-			'bg-amber-500',
-			'bg-orange-500',
-			'bg-rose-500',
-			'bg-pink-500',
-			'bg-indigo-500',
-		];
-		let hash = 0;
-		for (let i = 0; i < name.length; i++) {
-			hash = name.charCodeAt(i) + ((hash << 5) - hash);
-		}
-		return colors[Math.abs(hash) % colors.length];
-	});
-</script>
-
-{#if photoUrl}
-	<img
-		src={photoUrl}
-		alt={name || 'Kontakt'}
-		class="
-			{sizeClasses[size]}
-			rounded-full object-cover
-			{className}
-		"
-	/>
-{:else if initials}
-	<div
-		class="
-			{sizeClasses[size]}
-			{bgColor}
-			rounded-full
-			flex items-center justify-center
-			text-white font-medium
-			{className}
-		"
-	>
-		{initials}
-	</div>
-{:else}
-	<div
-		class="
-			{sizeClasses[size]}
-			bg-gray-300 dark:bg-gray-600
-			rounded-full
-			flex items-center justify-center
-			text-gray-500 dark:text-gray-400
-			{className}
-		"
-	>
-		<User size={iconSizes[size]} />
-	</div>
-{/if}
diff --git a/packages/shared-ui/src/molecules/contacts/ContactBadge.svelte b/packages/shared-ui/src/molecules/contacts/ContactBadge.svelte
deleted file mode 100644
index 327310ec5..000000000
--- a/packages/shared-ui/src/molecules/contacts/ContactBadge.svelte
+++ /dev/null
@@ -1,185 +0,0 @@
-<script lang="ts">
-	import { X } from '@mana/shared-icons';
-	import ContactAvatar from './ContactAvatar.svelte';
-	import type {
-		ContactReference,
-		ManualContactEntry,
-		ContactOrManual,
-	} from '@mana/shared-types';
-
-	interface Props {
-		/** Contact to display */
-		contact: ContactOrManual;
-		/** Show remove button */
-		removable?: boolean;
-		/** Called when remove is clicked */
-		onRemove?: () => void;
-		/** Size variant */
-		size?: 'sm' | 'md';
-		/** Show email under name */
-		showEmail?: boolean;
-	}
-
-	let { contact, removable = false, onRemove, size = 'md', showEmail = false }: Props = $props();
-
-	// Check if this is a manual entry
-	const isManual = $derived('isManual' in contact && contact.isManual === true);
-
-	// Get display values
-	const displayName = $derived(
-		isManual
-			? (contact as ManualContactEntry).name || (contact as ManualContactEntry).email
-			: (contact as ContactReference).displayName
-	);
-
-	const email = $derived(
-		isManual ? (contact as ManualContactEntry).email : (contact as ContactReference).email
-	);
-
-	const photoUrl = $derived(isManual ? undefined : (contact as ContactReference).photoUrl);
-
-	const avatarSizes = {
-		sm: 'xs' as const,
-		md: 'sm' as const,
-	};
-</script>
-
-<span
-	class="contact-badge"
-	class:size-sm={size === 'sm'}
-	class:size-md={size === 'md'}
-	class:manual={isManual}
->
-	<ContactAvatar {photoUrl} name={displayName} size={avatarSizes[size]} />
-
-	<span class="contact-info">
-		<span class="contact-name">{displayName}</span>
-		{#if showEmail && email && email !== displayName}
-			<span class="contact-email">{email}</span>
-		{/if}
-	</span>
-
-	{#if removable}
-		<button
-			type="button"
-			onclick={(e) => {
-				e.stopPropagation();
-				onRemove?.();
-			}}
-			class="remove-btn"
-			aria-label="Entfernen"
-		>
-			<X size={12} />
-		</button>
-	{/if}
-</span>
-
-<style>
-	.contact-badge {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.375rem;
-		background: rgba(139, 92, 246, 0.12);
-		border: 1px solid rgba(139, 92, 246, 0.2);
-		border-radius: 9999px;
-		transition: all 0.15s;
-	}
-
-	:global(.dark) .contact-badge {
-		background: rgba(139, 92, 246, 0.15);
-		border-color: rgba(139, 92, 246, 0.25);
-	}
-
-	.contact-badge:hover {
-		background: rgba(139, 92, 246, 0.18);
-		border-color: rgba(139, 92, 246, 0.3);
-	}
-
-	:global(.dark) .contact-badge:hover {
-		background: rgba(139, 92, 246, 0.22);
-		border-color: rgba(139, 92, 246, 0.35);
-	}
-
-	/* Manual entry variant (dashed border) */
-	.contact-badge.manual {
-		background: rgba(107, 114, 128, 0.1);
-		border: 1px dashed rgba(107, 114, 128, 0.3);
-	}
-
-	:global(.dark) .contact-badge.manual {
-		background: rgba(156, 163, 175, 0.12);
-		border-color: rgba(156, 163, 175, 0.3);
-	}
-
-	/* Size variants */
-	.size-sm {
-		padding: 0.25rem 0.5rem;
-		font-size: 0.75rem;
-	}
-
-	.size-md {
-		padding: 0.375rem 0.625rem;
-		font-size: 0.8125rem;
-	}
-
-	.contact-info {
-		display: flex;
-		flex-direction: column;
-		line-height: 1.2;
-		min-width: 0;
-	}
-
-	.contact-name {
-		color: #374151;
-		font-weight: 500;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 120px;
-	}
-
-	:global(.dark) .contact-name {
-		color: #f3f4f6;
-	}
-
-	.contact-email {
-		font-size: 0.625rem;
-		color: #6b7280;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 120px;
-	}
-
-	:global(.dark) .contact-email {
-		color: #9ca3af;
-	}
-
-	.remove-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-left: 0.125rem;
-		padding: 0.25rem;
-		border: none;
-		background: transparent;
-		color: #6b7280;
-		cursor: pointer;
-		border-radius: 9999px;
-		transition: all 0.15s;
-	}
-
-	:global(.dark) .remove-btn {
-		color: #9ca3af;
-	}
-
-	.remove-btn:hover {
-		background: rgba(0, 0, 0, 0.08);
-		color: #374151;
-	}
-
-	:global(.dark) .remove-btn:hover {
-		background: rgba(255, 255, 255, 0.1);
-		color: #e5e7eb;
-	}
-</style>
diff --git a/packages/shared-ui/src/molecules/contacts/ContactSelector.svelte b/packages/shared-ui/src/molecules/contacts/ContactSelector.svelte
deleted file mode 100644
index 16acd5d4e..000000000
--- a/packages/shared-ui/src/molecules/contacts/ContactSelector.svelte
+++ /dev/null
@@ -1,711 +0,0 @@
-<script lang="ts">
-	import { Plus, MagnifyingGlass, User, Envelope } from '@mana/shared-icons';
-	import ContactBadge from './ContactBadge.svelte';
-	import ContactAvatar from './ContactAvatar.svelte';
-	import type {
-		ContactReference,
-		ContactSummary,
-		ManualContactEntry,
-		ContactOrManual,
-		createContactReference,
-	} from '@mana/shared-types';
-
-	interface Props {
-		/** Currently selected contacts */
-		selectedContacts: ContactOrManual[];
-		/** Called when selection changes */
-		onContactsChange: (contacts: ContactOrManual[]) => void;
-		/** Function to search contacts (async) */
-		onSearch: (query: string) => Promise<ContactSummary[]>;
-		/** Allow manual email entry (for contacts not in system) */
-		allowManualEntry?: boolean;
-		/** Maximum contacts that can be selected */
-		maxContacts?: number;
-		/** Single select mode (only one contact allowed) */
-		singleSelect?: boolean;
-		/** Placeholder text */
-		placeholder?: string;
-		/** Add button label */
-		addLabel?: string;
-		/** Search placeholder */
-		searchPlaceholder?: string;
-		/** Loading state */
-		loading?: boolean;
-		/** Disabled state */
-		disabled?: boolean;
-		/** Show "not available" message when contacts API is down */
-		unavailableMessage?: string;
-		/** Is contacts API available */
-		isAvailable?: boolean;
-	}
-
-	let {
-		selectedContacts,
-		onContactsChange,
-		onSearch,
-		allowManualEntry = false,
-		maxContacts,
-		singleSelect = false,
-		placeholder = 'Kontakt hinzufügen...',
-		addLabel = 'Kontakt hinzufügen',
-		searchPlaceholder = 'Name oder E-Mail suchen...',
-		loading = false,
-		disabled = false,
-		unavailableMessage = 'Kontakte nicht verfügbar',
-		isAvailable = true,
-	}: Props = $props();
-
-	let isOpen = $state(false);
-	let searchQuery = $state('');
-	let searchResults = $state<ContactSummary[]>([]);
-	let isSearching = $state(false);
-	let showManualEntry = $state(false);
-	let manualEmail = $state('');
-	let manualName = $state('');
-	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
-	let searchInputRef = $state<HTMLInputElement | null>(null);
-	let highlightedIndex = $state(-1);
-
-	// Focus search input when dropdown opens
-	$effect(() => {
-		if (isOpen && searchInputRef) {
-			setTimeout(() => searchInputRef?.focus(), 0);
-			highlightedIndex = -1;
-		}
-	});
-
-	// Reset highlighted index when results change
-	$effect(() => {
-		if (searchResults.length > 0) {
-			highlightedIndex = -1;
-		}
-	});
-
-	const effectiveMax = $derived(singleSelect ? 1 : maxContacts);
-	const canAddMore = $derived(!effectiveMax || selectedContacts.length < effectiveMax);
-
-	// Check if an email looks valid
-	function isValidEmail(email: string): boolean {
-		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-	}
-
-	// Debounced search
-	async function handleSearchInput(query: string) {
-		searchQuery = query;
-
-		if (searchTimeout) {
-			clearTimeout(searchTimeout);
-		}
-
-		if (!query.trim()) {
-			searchResults = [];
-			return;
-		}
-
-		searchTimeout = setTimeout(async () => {
-			if (!isAvailable) return;
-
-			isSearching = true;
-			try {
-				const results = await onSearch(query);
-				// Filter out already selected contacts
-				const selectedIds = new Set(
-					selectedContacts
-						.filter((c): c is ContactReference => 'contactId' in c)
-						.map((c) => c.contactId)
-				);
-				searchResults = results.filter((r) => !selectedIds.has(r.id));
-			} catch (error) {
-				console.error('Contact search failed:', error);
-				searchResults = [];
-			} finally {
-				isSearching = false;
-			}
-		}, 300);
-	}
-
-	function handleSelectContact(contact: ContactSummary) {
-		if (!canAddMore) return;
-
-		const reference: ContactReference = {
-			contactId: contact.id,
-			displayName: contact.displayName,
-			email: contact.email,
-			photoUrl: contact.photoUrl,
-			company: contact.company,
-			fetchedAt: new Date().toISOString(),
-		};
-
-		if (singleSelect) {
-			onContactsChange([reference]);
-		} else {
-			onContactsChange([...selectedContacts, reference]);
-		}
-
-		searchQuery = '';
-		searchResults = [];
-		isOpen = false;
-	}
-
-	function handleRemoveContact(index: number) {
-		onContactsChange(selectedContacts.filter((_, i) => i !== index));
-	}
-
-	function handleAddManualEntry() {
-		if (!manualEmail.trim() || !isValidEmail(manualEmail)) return;
-
-		const entry: ManualContactEntry = {
-			email: manualEmail.trim(),
-			name: manualName.trim() || undefined,
-			isManual: true,
-		};
-
-		if (singleSelect) {
-			onContactsChange([entry]);
-		} else {
-			onContactsChange([...selectedContacts, entry]);
-		}
-
-		manualEmail = '';
-		manualName = '';
-		showManualEntry = false;
-		isOpen = false;
-	}
-
-	function handleClickOutside(e: MouseEvent) {
-		const target = e.target as HTMLElement;
-		if (!target.closest('.contact-selector-container')) {
-			isOpen = false;
-			showManualEntry = false;
-		}
-	}
-
-	function handleKeyDown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			isOpen = false;
-			showManualEntry = false;
-		}
-	}
-
-	function handleSearchKeyDown(e: KeyboardEvent) {
-		if (!isOpen || searchResults.length === 0) return;
-
-		if (e.key === 'ArrowDown') {
-			e.preventDefault();
-			highlightedIndex = Math.min(highlightedIndex + 1, searchResults.length - 1);
-		} else if (e.key === 'ArrowUp') {
-			e.preventDefault();
-			highlightedIndex = Math.max(highlightedIndex - 1, -1);
-		} else if (e.key === 'Enter' && highlightedIndex >= 0) {
-			e.preventDefault();
-			handleSelectContact(searchResults[highlightedIndex]);
-		}
-	}
-</script>
-
-<svelte:window onclick={handleClickOutside} onkeydown={handleKeyDown} />
-
-<div class="contact-selector-container">
-	<!-- Selected Contacts Display -->
-	<div class="selected-contacts">
-		{#each selectedContacts as contact, index (index)}
-			<ContactBadge {contact} removable onRemove={() => handleRemoveContact(index)} />
-		{/each}
-
-		{#if canAddMore && !disabled}
-			<button type="button" onclick={() => (isOpen = !isOpen)} class="add-button" {disabled}>
-				<Plus size={14} weight="bold" />
-				<span>{addLabel}</span>
-			</button>
-		{/if}
-	</div>
-
-	<!-- Dropdown -->
-	{#if isOpen}
-		<div class="dropdown">
-			{#if !isAvailable}
-				<!-- Unavailable State -->
-				<div class="unavailable-state">
-					<User size={24} />
-					<p>{unavailableMessage}</p>
-					{#if allowManualEntry}
-						<button type="button" onclick={() => (showManualEntry = true)} class="manual-link">
-							Manuell hinzufügen
-						</button>
-					{/if}
-				</div>
-			{:else}
-				<!-- Search Input -->
-				<div class="search-section">
-					<div class="search-input-wrapper">
-						<MagnifyingGlass size={16} class="search-icon" />
-						<input
-							bind:this={searchInputRef}
-							type="text"
-							value={searchQuery}
-							oninput={(e) => handleSearchInput(e.currentTarget.value)}
-							onkeydown={handleSearchKeyDown}
-							placeholder={searchPlaceholder}
-							class="search-input"
-						/>
-					</div>
-				</div>
-
-				<!-- Results List -->
-				<div class="results-list">
-					{#if isSearching || loading}
-						<div class="empty-state">Suche...</div>
-					{:else if searchResults.length > 0}
-						{#each searchResults as contact, index (contact.id)}
-							<button
-								type="button"
-								onclick={() => handleSelectContact(contact)}
-								class="result-item"
-								class:highlighted={index === highlightedIndex}
-							>
-								<ContactAvatar photoUrl={contact.photoUrl} name={contact.displayName} size="md" />
-								<div class="result-info">
-									<div class="result-name">{contact.displayName}</div>
-									{#if contact.email}
-										<div class="result-detail">{contact.email}</div>
-									{/if}
-									{#if contact.company}
-										<div class="result-detail">{contact.company}</div>
-									{/if}
-								</div>
-							</button>
-						{/each}
-					{:else if searchQuery.trim()}
-						<div class="empty-state">Kein Kontakt gefunden</div>
-					{:else}
-						<div class="empty-state">Name oder E-Mail eingeben...</div>
-					{/if}
-				</div>
-
-				<!-- Manual Entry Option -->
-				{#if allowManualEntry}
-					<div class="manual-section">
-						{#if showManualEntry}
-							<div class="manual-form">
-								<div class="input-with-icon">
-									<Envelope size={14} />
-									<input
-										type="email"
-										bind:value={manualEmail}
-										placeholder="E-Mail-Adresse *"
-										class="manual-input"
-									/>
-								</div>
-								<div class="input-with-icon">
-									<User size={14} />
-									<input
-										type="text"
-										bind:value={manualName}
-										placeholder="Name (optional)"
-										class="manual-input"
-										onkeydown={(e) => e.key === 'Enter' && handleAddManualEntry()}
-									/>
-								</div>
-								<div class="manual-actions">
-									<button
-										type="button"
-										onclick={() => (showManualEntry = false)}
-										class="btn-cancel"
-									>
-										Abbrechen
-									</button>
-									<button
-										type="button"
-										onclick={handleAddManualEntry}
-										disabled={!manualEmail.trim() || !isValidEmail(manualEmail)}
-										class="btn-add"
-									>
-										Hinzufügen
-									</button>
-								</div>
-							</div>
-						{:else}
-							<button type="button" onclick={() => (showManualEntry = true)} class="manual-trigger">
-								<Envelope size={14} />
-								<span>E-Mail manuell hinzufügen</span>
-							</button>
-						{/if}
-					</div>
-				{/if}
-			{/if}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.contact-selector-container {
-		position: relative;
-	}
-
-	.selected-contacts {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 0.5rem;
-		margin-bottom: 0.5rem;
-	}
-
-	.add-button {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.375rem 0.75rem;
-		font-size: 0.8125rem;
-		color: #6b7280;
-		background: transparent;
-		border: 1px dashed rgba(0, 0, 0, 0.2);
-		border-radius: 9999px;
-		cursor: pointer;
-		transition: all 0.15s;
-	}
-
-	:global(.dark) .add-button {
-		color: #9ca3af;
-		border-color: rgba(255, 255, 255, 0.2);
-	}
-
-	.add-button:hover:not(:disabled) {
-		color: #374151;
-		border-color: rgba(0, 0, 0, 0.3);
-		background: rgba(0, 0, 0, 0.03);
-	}
-
-	:global(.dark) .add-button:hover:not(:disabled) {
-		color: #e5e7eb;
-		border-color: rgba(255, 255, 255, 0.3);
-		background: rgba(255, 255, 255, 0.05);
-	}
-
-	.add-button:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	/* Dropdown */
-	.dropdown {
-		position: absolute;
-		z-index: 50;
-		margin-top: 0.25rem;
-		width: 100%;
-		min-width: 320px;
-		background: rgba(255, 255, 255, 1);
-		backdrop-filter: blur(20px);
-		-webkit-backdrop-filter: blur(20px);
-		border: 1px solid rgba(0, 0, 0, 0.12);
-		border-radius: 1rem;
-		box-shadow:
-			0 12px 28px -5px rgba(0, 0, 0, 0.2),
-			0 0 0 1px rgba(0, 0, 0, 0.05);
-		overflow: hidden;
-	}
-
-	:global(.dark) .dropdown {
-		background: rgba(45, 45, 45, 1);
-		border-color: rgba(255, 255, 255, 0.18);
-		box-shadow:
-			0 12px 28px -5px rgba(0, 0, 0, 0.4),
-			0 0 0 1px rgba(255, 255, 255, 0.05);
-	}
-
-	/* Search Section */
-	.search-section {
-		padding: 0.75rem;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-	}
-
-	:global(.dark) .search-section {
-		border-bottom-color: rgba(255, 255, 255, 0.08);
-	}
-
-	.search-input-wrapper {
-		position: relative;
-	}
-
-	.search-input-wrapper :global(.search-icon) {
-		position: absolute;
-		left: 0.75rem;
-		top: 50%;
-		transform: translateY(-50%);
-		color: #6b7280;
-	}
-
-	:global(.dark) .search-input-wrapper :global(.search-icon) {
-		color: #9ca3af;
-	}
-
-	.search-input {
-		width: 100%;
-		padding: 0.5rem 0.75rem 0.5rem 2.25rem;
-		font-size: 0.875rem;
-		color: #374151;
-		background: rgba(0, 0, 0, 0.04);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		border-radius: 0.75rem;
-		outline: none;
-		transition: all 0.15s;
-	}
-
-	:global(.dark) .search-input {
-		color: #f3f4f6;
-		background: rgba(255, 255, 255, 0.05);
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
-	.search-input:focus {
-		border-color: #8b5cf6;
-		box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
-	}
-
-	.search-input::placeholder {
-		color: #9ca3af;
-	}
-
-	/* Results List */
-	.results-list {
-		max-height: 14rem;
-		overflow-y: auto;
-	}
-
-	.empty-state {
-		padding: 1rem;
-		text-align: center;
-		font-size: 0.875rem;
-		color: #6b7280;
-	}
-
-	:global(.dark) .empty-state {
-		color: #9ca3af;
-	}
-
-	.result-item {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		width: 100%;
-		padding: 0.625rem 1rem;
-		background: transparent;
-		border: none;
-		text-align: left;
-		cursor: pointer;
-		transition: background 0.15s;
-	}
-
-	.result-item:hover,
-	.result-item.highlighted {
-		background: rgba(139, 92, 246, 0.08);
-	}
-
-	:global(.dark) .result-item:hover,
-	:global(.dark) .result-item.highlighted {
-		background: rgba(139, 92, 246, 0.15);
-	}
-
-	.result-info {
-		flex: 1;
-		min-width: 0;
-	}
-
-	.result-name {
-		font-size: 0.875rem;
-		font-weight: 500;
-		color: #374151;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	:global(.dark) .result-name {
-		color: #f3f4f6;
-	}
-
-	.result-detail {
-		font-size: 0.75rem;
-		color: #6b7280;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	:global(.dark) .result-detail {
-		color: #9ca3af;
-	}
-
-	/* Manual Entry Section */
-	.manual-section {
-		padding: 0.75rem;
-		border-top: 1px solid rgba(0, 0, 0, 0.08);
-	}
-
-	:global(.dark) .manual-section {
-		border-top-color: rgba(255, 255, 255, 0.08);
-	}
-
-	.manual-form {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.input-with-icon {
-		position: relative;
-		display: flex;
-		align-items: center;
-	}
-
-	.input-with-icon > :global(svg) {
-		position: absolute;
-		left: 0.75rem;
-		color: #6b7280;
-	}
-
-	:global(.dark) .input-with-icon > :global(svg) {
-		color: #9ca3af;
-	}
-
-	.manual-input {
-		width: 100%;
-		padding: 0.5rem 0.75rem 0.5rem 2.25rem;
-		font-size: 0.875rem;
-		color: #374151;
-		background: rgba(0, 0, 0, 0.04);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		border-radius: 0.75rem;
-		outline: none;
-		transition: all 0.15s;
-	}
-
-	:global(.dark) .manual-input {
-		color: #f3f4f6;
-		background: rgba(255, 255, 255, 0.05);
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
-	.manual-input:focus {
-		border-color: #8b5cf6;
-		box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
-	}
-
-	.manual-input::placeholder {
-		color: #9ca3af;
-	}
-
-	.manual-actions {
-		display: flex;
-		gap: 0.5rem;
-	}
-
-	.btn-cancel {
-		flex: 1;
-		padding: 0.375rem 0.75rem;
-		font-size: 0.875rem;
-		color: #6b7280;
-		background: transparent;
-		border: none;
-		border-radius: 0.75rem;
-		cursor: pointer;
-		transition: background 0.15s;
-	}
-
-	:global(.dark) .btn-cancel {
-		color: #9ca3af;
-	}
-
-	.btn-cancel:hover {
-		background: rgba(0, 0, 0, 0.05);
-	}
-
-	:global(.dark) .btn-cancel:hover {
-		background: rgba(255, 255, 255, 0.08);
-	}
-
-	.btn-add {
-		flex: 1;
-		padding: 0.375rem 0.75rem;
-		font-size: 0.875rem;
-		font-weight: 500;
-		color: white;
-		background: #8b5cf6;
-		border: none;
-		border-radius: 0.75rem;
-		cursor: pointer;
-		transition: opacity 0.15s;
-	}
-
-	.btn-add:hover:not(:disabled) {
-		opacity: 0.9;
-	}
-
-	.btn-add:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.manual-trigger {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 0.5rem;
-		width: 100%;
-		padding: 0.5rem 0.75rem;
-		font-size: 0.875rem;
-		color: #6b7280;
-		background: transparent;
-		border: none;
-		border-radius: 0.75rem;
-		cursor: pointer;
-		transition: all 0.15s;
-	}
-
-	:global(.dark) .manual-trigger {
-		color: #9ca3af;
-	}
-
-	.manual-trigger:hover {
-		color: #374151;
-		background: rgba(0, 0, 0, 0.05);
-	}
-
-	:global(.dark) .manual-trigger:hover {
-		color: #e5e7eb;
-		background: rgba(255, 255, 255, 0.08);
-	}
-
-	/* Unavailable State */
-	.unavailable-state {
-		padding: 1.5rem;
-		text-align: center;
-		color: #6b7280;
-	}
-
-	:global(.dark) .unavailable-state {
-		color: #9ca3af;
-	}
-
-	.unavailable-state > :global(svg) {
-		margin: 0 auto 0.5rem;
-		opacity: 0.5;
-	}
-
-	.unavailable-state p {
-		font-size: 0.875rem;
-		margin-bottom: 0.5rem;
-	}
-
-	.manual-link {
-		font-size: 0.875rem;
-		color: #8b5cf6;
-		background: none;
-		border: none;
-		cursor: pointer;
-		text-decoration: none;
-	}
-
-	.manual-link:hover {
-		text-decoration: underline;
-	}
-</style>
diff --git a/packages/shared-ui/src/molecules/contacts/index.ts b/packages/shared-ui/src/molecules/contacts/index.ts
deleted file mode 100644
index b4f8c5628..000000000
--- a/packages/shared-ui/src/molecules/contacts/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// Contact selection and display components
-export { default as ContactAvatar } from './ContactAvatar.svelte';
-export { default as ContactBadge } from './ContactBadge.svelte';
-export { default as ContactSelector } from './ContactSelector.svelte';
diff --git a/packages/shared-ui/src/molecules/feedback/EmptyState.svelte b/packages/shared-ui/src/molecules/feedback/EmptyState.svelte
deleted file mode 100644
index 234a1999c..000000000
--- a/packages/shared-ui/src/molecules/feedback/EmptyState.svelte
+++ /dev/null
@@ -1,121 +0,0 @@
-<script lang="ts">
-	/**
-	 * EmptyState - Standardized empty state display
-	 *
-	 * Used when a list, search, or section has no content to display.
-	 * Provides consistent visual feedback with optional action button.
-	 *
-	 * @example Basic usage
-	 * ```svelte
-	 * <EmptyState
-	 *   title="No memos yet"
-	 *   message="Start recording to create your first memo"
-	 * />
-	 * ```
-	 *
-	 * @example With action and icon
-	 * ```svelte
-	 * <EmptyState
-	 *   title="No results found"
-	 *   message="Try adjusting your search or filters"
-	 *   actionLabel="Clear filters"
-	 *   onAction={() => clearFilters()}
-	 * >
-	 *   {#snippet icon()}
-	 *     <SearchIcon class="w-12 h-12" />
-	 *   {/snippet}
-	 * </EmptyState>
-	 * ```
-	 */
-
-	import type { Snippet } from 'svelte';
-	import { Text, Button } from '../../atoms';
-	import { Tray } from '@mana/shared-icons';
-
-	type EmptyStateVariant = 'default' | 'compact' | 'centered';
-
-	interface Props {
-		/** Title text */
-		title: string;
-		/** Description message */
-		message?: string;
-		/** Action button label */
-		actionLabel?: string;
-		/** Action button callback */
-		onAction?: () => void;
-		/** Secondary action label */
-		secondaryActionLabel?: string;
-		/** Secondary action callback */
-		onSecondaryAction?: () => void;
-		/** Layout variant */
-		variant?: EmptyStateVariant;
-		/** Custom icon snippet */
-		icon?: Snippet;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		title,
-		message,
-		actionLabel,
-		onAction,
-		secondaryActionLabel,
-		onSecondaryAction,
-		variant = 'default',
-		icon,
-		class: className = '',
-	}: Props = $props();
-
-	const variantClasses: Record<EmptyStateVariant, string> = {
-		default: 'py-12 px-6',
-		compact: 'py-6 px-4',
-		centered: 'py-16 px-8',
-	};
-</script>
-
-<div
-	class="empty-state flex flex-col items-center justify-center text-center {variantClasses[
-		variant
-	]} {className}"
->
-	<!-- Icon -->
-	{#if icon}
-		<div class="empty-state__icon mb-4 text-theme-secondary opacity-50">
-			{@render icon()}
-		</div>
-	{:else}
-		<!-- Default icon -->
-		<div class="empty-state__icon mb-4 text-theme-secondary opacity-50">
-			<Tray size={48} />
-		</div>
-	{/if}
-
-	<!-- Title -->
-	<Text variant="body" weight="semibold" class="mb-2">
-		{title}
-	</Text>
-
-	<!-- Message -->
-	{#if message}
-		<Text variant="muted" class="max-w-sm mb-4">
-			{message}
-		</Text>
-	{/if}
-
-	<!-- Actions -->
-	{#if actionLabel || secondaryActionLabel}
-		<div class="empty-state__actions flex gap-3 mt-2">
-			{#if secondaryActionLabel && onSecondaryAction}
-				<Button variant="ghost" onclick={onSecondaryAction}>
-					{secondaryActionLabel}
-				</Button>
-			{/if}
-			{#if actionLabel && onAction}
-				<Button variant="primary" onclick={onAction}>
-					{actionLabel}
-				</Button>
-			{/if}
-		</div>
-	{/if}
-</div>
diff --git a/packages/shared-ui/src/molecules/feedback/index.ts b/packages/shared-ui/src/molecules/feedback/index.ts
deleted file mode 100644
index a23dd372d..000000000
--- a/packages/shared-ui/src/molecules/feedback/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/**
- * Feedback components for user states
- */
-export { default as EmptyState } from './EmptyState.svelte';
diff --git a/packages/shared-ui/src/molecules/index.ts b/packages/shared-ui/src/molecules/index.ts
index e65671239..5e9851b24 100644
--- a/packages/shared-ui/src/molecules/index.ts
+++ b/packages/shared-ui/src/molecules/index.ts
@@ -1,64 +1,19 @@
-export { default as Toggle } from './Toggle.svelte';
 export { default as Input } from './Input.svelte';
-export { default as Select } from './Select.svelte';
 export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
 export { default as Checkbox } from './Checkbox.svelte';
-export { default as FilterDropdown } from './FilterDropdown.svelte';
-export { default as FavoriteButton } from './FavoriteButton.svelte';
-export { default as ColorPicker } from './ColorPicker.svelte';
-export { COLORS_12, COLORS_16, DEFAULT_COLOR, getRandomColor } from './ColorPicker.constants';
-export { default as IconPicker } from './IconPicker.svelte';
-export { DEFAULT_ICON } from './IconPicker.constants';
-export { default as ReminderPicker } from './ReminderPicker.svelte';
-export type { SelectOption } from './Select.types';
-export type { FilterDropdownOption } from './FilterDropdown.types';
-
-// Stats components
-export { GlassCard, StatRow } from './stats';
-
-// Tag components
-export {
-	TagBadge,
-	TagChip,
-	TagColorPicker,
-	TagEditModal,
-	TagSelector,
-	TagField,
-	TagList,
-	TAG_COLORS,
-	DEFAULT_TAG_COLOR,
-	getRandomTagColor,
-	getTagColorByName,
-} from './tags';
-export type { Tag, TagData, TagColorName, TagColorHex } from './tags';
-
-// Media components
-export { AudioPlayer } from './media';
-
-// Loading components
-export {
-	SkeletonBox,
-	SkeletonText,
-	SkeletonAvatar,
-	SkeletonRow,
-	SkeletonList,
-	SkeletonCard,
-	SkeletonGrid,
-	AppLoadingSkeleton,
-	calculateFadeOpacity,
-} from './loaders';
-
-// Feedback components
-export { EmptyState } from './feedback';
-
-// Contact components
-export { ContactAvatar, ContactBadge, ContactSelector } from './contacts';
-
-// Layout components
-export { default as ModalFooter } from './ModalFooter.svelte';
-export { default as DataCard } from './DataCard.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export { default as ContactAvatar } from './ContactAvatar.svelte';
+export { default as TagBadge } from './TagBadge.svelte';
+export { default as TagChip } from './TagChip.svelte';
+export { default as TagSelector } from './TagSelector.svelte';
+export type { Tag } from './TagSelector.svelte';
 export { default as PageHeader } from './PageHeader.svelte';
-export { default as KeyboardShortcutsPanel } from './KeyboardShortcutsPanel.svelte';
-
-// Confirmation
-export { default as ConfirmationPopover } from './ConfirmationPopover.svelte';
+export { default as DataCard } from './DataCard.svelte';
+export { default as FavoriteButton } from './FavoriteButton.svelte';
+export { default as ReminderPicker } from './ReminderPicker.svelte';
+export type { ReminderOption } from './ReminderPicker.svelte';
+export { default as TagField } from './TagField.svelte';
+export { default as IconPicker } from './IconPicker.svelte';
+export type { IconSlot } from './IconPicker.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
diff --git a/packages/shared-ui/src/molecules/loaders/AppLoadingSkeleton.svelte b/packages/shared-ui/src/molecules/loaders/AppLoadingSkeleton.svelte
deleted file mode 100644
index 0ad7e759a..000000000
--- a/packages/shared-ui/src/molecules/loaders/AppLoadingSkeleton.svelte
+++ /dev/null
@@ -1,466 +0,0 @@
-<script lang="ts">
-	/**
-	 * AppLoadingSkeleton - Full page loading skeleton for app initialization
-	 *
-	 * A flexible loading skeleton that supports different layout presets:
-	 * - list: Default list view with search bar and item rows
-	 * - centered: Centered content (ideal for clock, calendar previews)
-	 * - sidebar: Sidebar + main content layout
-	 * - tasks: Task list with quick-add bar
-	 * - minimal: Just a centered spinner placeholder
-	 *
-	 * @example
-	 * ```svelte
-	 * <AppLoadingSkeleton />
-	 * <AppLoadingSkeleton layout="centered" appLogo="/logo.svg" />
-	 * <AppLoadingSkeleton layout="sidebar" />
-	 * ```
-	 */
-
-	import SkeletonBox from './SkeletonBox.svelte';
-	import type { Snippet } from 'svelte';
-
-	type LayoutPreset = 'list' | 'centered' | 'sidebar' | 'tasks' | 'minimal';
-
-	interface Props {
-		/** Layout preset for the content area */
-		layout?: LayoutPreset;
-		/** Show header skeleton (default: true, false for minimal) */
-		showHeader?: boolean;
-		/** Number of list items to show (for list/tasks layouts) */
-		listItemCount?: number;
-		/** App logo URL (shown in centered layout) */
-		appLogo?: string;
-		/** Loading text for screen readers */
-		loadingLabel?: string;
-		/** Custom content slot (overrides preset content) */
-		children?: Snippet;
-	}
-
-	let {
-		layout = 'list',
-		showHeader = true,
-		listItemCount = 5,
-		appLogo,
-		loadingLabel = 'App wird geladen...',
-		children,
-	}: Props = $props();
-
-	// Hide header in minimal layout by default
-	const displayHeader = $derived(layout === 'minimal' ? false : showHeader);
-</script>
-
-<div
-	class="app-loading-skeleton"
-	class:minimal-layout={layout === 'minimal'}
-	class:sidebar-layout={layout === 'sidebar'}
-	role="status"
-	aria-label={loadingLabel}
->
-	{#if displayHeader}
-		<!-- Header Skeleton -->
-		<div class="header-skeleton">
-			<SkeletonBox width="120px" height="32px" borderRadius="8px" />
-			<div class="header-nav">
-				<SkeletonBox width="80px" height="32px" borderRadius="16px" />
-				<SkeletonBox width="80px" height="32px" borderRadius="16px" />
-				<SkeletonBox width="80px" height="32px" borderRadius="16px" />
-			</div>
-			<SkeletonBox width="36px" height="36px" borderRadius="50%" />
-		</div>
-	{/if}
-
-	<!-- Content Area -->
-	{#if children}
-		<!-- Custom content via slot -->
-		<div class="content-skeleton custom-content">
-			{@render children()}
-		</div>
-	{:else if layout === 'minimal'}
-		<!-- Minimal: Centered spinner placeholder -->
-		<div class="minimal-content">
-			<SkeletonBox width="64px" height="64px" borderRadius="50%" />
-			<SkeletonBox width="120px" height="16px" borderRadius="4px" />
-		</div>
-	{:else if layout === 'centered'}
-		<!-- Centered: Logo + preview card -->
-		<div class="centered-content">
-			{#if appLogo}
-				<img src={appLogo} alt="" class="app-logo" />
-			{:else}
-				<SkeletonBox width="64px" height="64px" borderRadius="16px" />
-			{/if}
-			<SkeletonBox width="180px" height="24px" borderRadius="8px" />
-
-			<div class="centered-card">
-				<div class="card-header">
-					<SkeletonBox width="120px" height="20px" />
-					<div class="card-actions">
-						<SkeletonBox width="32px" height="32px" borderRadius="8px" />
-						<SkeletonBox width="32px" height="32px" borderRadius="8px" />
-					</div>
-				</div>
-				<div class="card-content">
-					{#each Array(4) as _, i}
-						<SkeletonBox
-							width="100%"
-							height="32px"
-							borderRadius="8px"
-							class="opacity-{Math.max(30, 100 - i * 20)}"
-						/>
-					{/each}
-				</div>
-			</div>
-
-			<SkeletonBox width="140px" height="16px" borderRadius="4px" />
-		</div>
-	{:else if layout === 'sidebar'}
-		<!-- Sidebar: Left sidebar + main content -->
-		<div class="sidebar-wrapper">
-			<aside class="sidebar-skeleton">
-				<div class="sidebar-header">
-					<SkeletonBox width="100%" height="40px" borderRadius="8px" />
-				</div>
-				<nav class="sidebar-nav">
-					<SkeletonBox width="100%" height="40px" borderRadius="8px" />
-					<div class="sidebar-divider">
-						<SkeletonBox width="80px" height="12px" />
-					</div>
-					{#each Array(4) as _}
-						<SkeletonBox width="100%" height="40px" borderRadius="8px" />
-					{/each}
-				</nav>
-			</aside>
-			<main class="main-skeleton">
-				<div class="main-header">
-					<SkeletonBox width="200px" height="32px" />
-					<SkeletonBox width="120px" height="16px" />
-				</div>
-				<div class="main-toolbar">
-					<SkeletonBox width="100%" height="40px" borderRadius="8px" class="flex-1" />
-					<SkeletonBox width="120px" height="40px" borderRadius="8px" />
-					<SkeletonBox width="100px" height="40px" borderRadius="8px" />
-				</div>
-				<div class="main-content">
-					{#each Array(listItemCount) as _, i}
-						<div style="opacity: {Math.max(0.3, 1 - i * 0.15)}">
-							<SkeletonBox width="100%" height="80px" borderRadius="12px" />
-						</div>
-					{/each}
-				</div>
-			</main>
-		</div>
-	{:else if layout === 'tasks'}
-		<!-- Tasks: Quick-add + task sections -->
-		<div class="content-skeleton tasks-content">
-			<div class="tasks-header">
-				<SkeletonBox width="180px" height="28px" />
-				<SkeletonBox width="220px" height="16px" />
-			</div>
-
-			<div class="quick-add">
-				<SkeletonBox width="100%" height="52px" borderRadius="12px" />
-			</div>
-
-			<div class="task-section">
-				<div class="section-header">
-					<SkeletonBox width="100px" height="20px" />
-					<SkeletonBox width="28px" height="28px" borderRadius="50%" />
-				</div>
-				<div class="task-list">
-					{#each Array(listItemCount) as _, i}
-						<div class="task-item" style="opacity: {Math.max(0.3, 1 - i * 0.18)}">
-							<SkeletonBox width="22px" height="22px" borderRadius="6px" />
-							<div class="task-content">
-								<SkeletonBox width="{70 - i * 8}%" height="18px" />
-								<SkeletonBox width="{40 + i * 5}%" height="14px" />
-							</div>
-							<SkeletonBox width="24px" height="24px" borderRadius="4px" />
-						</div>
-					{/each}
-				</div>
-			</div>
-		</div>
-	{:else}
-		<!-- List (default): Search + item rows -->
-		<div class="content-skeleton list-content">
-			<div class="title-row">
-				<SkeletonBox width="200px" height="32px" />
-				<SkeletonBox width="120px" height="40px" borderRadius="8px" />
-			</div>
-
-			<SkeletonBox width="100%" height="48px" borderRadius="12px" />
-
-			<div class="list-skeleton">
-				{#each Array(listItemCount) as _, i}
-					<div class="list-item" style="opacity: {Math.max(0.3, 1 - i * 0.15)}">
-						<SkeletonBox width="48px" height="48px" borderRadius="50%" />
-						<div class="item-content">
-							<SkeletonBox width="60%" height="18px" />
-							<SkeletonBox width="40%" height="14px" />
-						</div>
-					</div>
-				{/each}
-			</div>
-		</div>
-	{/if}
-</div>
-
-<style>
-	.app-loading-skeleton {
-		min-height: 100vh;
-		background: hsl(var(--color-background));
-	}
-
-	.app-loading-skeleton.sidebar-layout {
-		display: flex;
-		flex-direction: column;
-	}
-
-	/* Header */
-	.header-skeleton {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 1rem 2rem;
-		border-bottom: 1px solid hsl(var(--color-border));
-	}
-
-	.header-nav {
-		display: flex;
-		gap: 0.5rem;
-	}
-
-	/* Content Areas */
-	.content-skeleton {
-		max-width: 80rem;
-		margin: 0 auto;
-		padding: 2rem;
-	}
-
-	.custom-content {
-		padding: 0;
-		max-width: none;
-	}
-
-	/* Minimal Layout */
-	.minimal-content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		min-height: 100vh;
-		gap: 1rem;
-	}
-
-	/* Centered Layout */
-	.centered-content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		min-height: calc(100vh - 80px);
-		padding: 2rem;
-		gap: 1.5rem;
-	}
-
-	.app-logo {
-		width: 64px;
-		height: 64px;
-		object-fit: contain;
-	}
-
-	.centered-card {
-		width: 100%;
-		max-width: 400px;
-		background: hsl(var(--color-card));
-		border-radius: 16px;
-		padding: 1.5rem;
-	}
-
-	.card-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 1rem;
-	}
-
-	.card-actions {
-		display: flex;
-		gap: 0.5rem;
-	}
-
-	.card-content {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	/* Sidebar Layout */
-	.sidebar-wrapper {
-		display: flex;
-		flex: 1;
-		min-height: calc(100vh - 65px);
-	}
-
-	.sidebar-skeleton {
-		width: 16rem;
-		border-right: 1px solid hsl(var(--color-border));
-		background: hsl(var(--color-card));
-		padding: 1rem;
-	}
-
-	.sidebar-header {
-		padding-bottom: 1rem;
-		border-bottom: 1px solid hsl(var(--color-border));
-		margin-bottom: 1rem;
-	}
-
-	.sidebar-nav {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.sidebar-divider {
-		padding: 1rem 0.75rem 0.5rem;
-	}
-
-	.main-skeleton {
-		flex: 1;
-		padding: 1.5rem;
-	}
-
-	.main-header {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		margin-bottom: 1.5rem;
-	}
-
-	.main-toolbar {
-		display: flex;
-		gap: 1rem;
-		margin-bottom: 1.5rem;
-	}
-
-	.main-content {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-
-	/* Tasks Layout */
-	.tasks-content {
-		max-width: 48rem;
-	}
-
-	.tasks-header {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		margin-bottom: 0.5rem;
-	}
-
-	.quick-add {
-		margin: 1.5rem 0;
-	}
-
-	.task-section {
-		margin-top: 1.5rem;
-	}
-
-	.section-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0.75rem 0;
-		margin-bottom: 0.5rem;
-	}
-
-	.task-list {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.task-item {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		padding: 0.875rem 1rem;
-		background: hsl(var(--color-card));
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 12px;
-	}
-
-	.task-content {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-	}
-
-	/* List Layout (Default) */
-	.list-content {
-		padding: 2rem;
-	}
-
-	.title-row {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 1.5rem;
-	}
-
-	.list-skeleton {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-		margin-top: 1.5rem;
-	}
-
-	.list-item {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-		padding: 1rem;
-		background: hsl(var(--color-card));
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 12px;
-	}
-
-	.item-content {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	/* Responsive */
-	@media (max-width: 768px) {
-		.header-nav {
-			display: none;
-		}
-
-		.header-skeleton {
-			padding: 1rem;
-		}
-
-		.content-skeleton {
-			padding: 1rem;
-		}
-
-		.sidebar-skeleton {
-			display: none;
-		}
-
-		.sidebar-wrapper {
-			min-height: calc(100vh - 57px);
-		}
-
-		.centered-content {
-			padding: 1rem;
-		}
-	}
-</style>
diff --git a/packages/shared-ui/src/molecules/loaders/SkeletonAvatar.svelte b/packages/shared-ui/src/molecules/loaders/SkeletonAvatar.svelte
deleted file mode 100644
index 097cbc1b3..000000000
--- a/packages/shared-ui/src/molecules/loaders/SkeletonAvatar.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	/**
-	 * SkeletonAvatar - Circular skeleton for profile pictures/avatars
-	 *
-	 * @example
-	 * ```svelte
-	 * <SkeletonAvatar size="40px" />
-	 * <SkeletonAvatar size="64px" />
-	 * ```
-	 */
-
-	import SkeletonBox from './SkeletonBox.svelte';
-
-	interface Props {
-		/** Size of the avatar (width & height) */
-		size?: string;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let { size = '40px', class: className = '' }: Props = $props();
-</script>
-
-<SkeletonBox width={size} height={size} circle class={className} />
diff --git a/packages/shared-ui/src/molecules/loaders/SkeletonBox.svelte b/packages/shared-ui/src/molecules/loaders/SkeletonBox.svelte
deleted file mode 100644
index 2a5b844e1..000000000
--- a/packages/shared-ui/src/molecules/loaders/SkeletonBox.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<script lang="ts">
-	/**
-	 * SkeletonBox - Base component for skeleton loading states
-	 *
-	 * Reusable box with shimmer animation for loading states.
-	 * Theme-aware (light/dark mode) and fully customizable.
-	 *
-	 * @example
-	 * ```svelte
-	 * <SkeletonBox width="200px" height="24px" />
-	 * <SkeletonBox width="100%" height="100px" borderRadius="12px" />
-	 * ```
-	 */
-
-	interface Props {
-		/** Width of the skeleton (CSS value) */
-		width?: string;
-		/** Height of the skeleton (CSS value) */
-		height?: string;
-		/** Border radius (CSS value) */
-		borderRadius?: string;
-		/** Make it circular (overrides borderRadius) */
-		circle?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		width = '100%',
-		height = '20px',
-		borderRadius = '4px',
-		circle = false,
-		class: className = '',
-	}: Props = $props();
-
-	const computedRadius = $derived(circle ? '50%' : borderRadius);
-	const computedHeight = $derived(circle ? width : height);
-</script>
-
-<div
-	class="skeleton-box {className}"
-	style="width: {width}; height: {computedHeight}; border-radius: {computedRadius};"
-	role="status"
-	aria-label="Loading"
-></div>
-
-<style>
-	.skeleton-box {
-		background: linear-gradient(
-			90deg,
-			var(--skeleton-base, #e5e7eb) 0%,
-			var(--skeleton-highlight, #f3f4f6) 50%,
-			var(--skeleton-base, #e5e7eb) 100%
-		);
-		background-size: 200% 100%;
-		animation: skeleton-shimmer 1.5s ease-in-out infinite;
-	}
-
-	@keyframes skeleton-shimmer {
-		0% {
-			background-position: 200% 0;
-		}
-		100% {
-			background-position: -200% 0;
-		}
-	}
-
-	/* Light Mode - Default */
-	:global(:root) {
-		--skeleton-base: #e5e7eb;
-		--skeleton-highlight: #f3f4f6;
-	}
-
-	/* Dark Mode */
-	:global(.dark) {
-		--skeleton-base: #2a2a2a;
-		--skeleton-highlight: #3a3a3a;
-	}
-</style>
diff --git a/packages/shared-ui/src/molecules/loaders/SkeletonCard.svelte b/packages/shared-ui/src/molecules/loaders/SkeletonCard.svelte
deleted file mode 100644
index 32df4cd27..000000000
--- a/packages/shared-ui/src/molecules/loaders/SkeletonCard.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-	/**
-	 * SkeletonCard - Configurable card skeleton with avatar, title, body, footer
-	 *
-	 * @example
-	 * ```svelte
-	 * <SkeletonCard showAvatar titleLines={1} bodyLines={2} />
-	 * <SkeletonCard showFooter />
-	 * ```
-	 */
-
-	import SkeletonBox from './SkeletonBox.svelte';
-	import SkeletonText from './SkeletonText.svelte';
-	import SkeletonAvatar from './SkeletonAvatar.svelte';
-
-	interface Props {
-		/** Show avatar/image placeholder */
-		showAvatar?: boolean;
-		/** Avatar size */
-		avatarSize?: string;
-		/** Number of title lines */
-		titleLines?: number;
-		/** Number of body text lines */
-		bodyLines?: number;
-		/** Show footer section */
-		showFooter?: boolean;
-		/** Opacity for fade effect in lists */
-		opacity?: number;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		showAvatar = false,
-		avatarSize = '48px',
-		titleLines = 1,
-		bodyLines = 2,
-		showFooter = false,
-		opacity = 1,
-		class: className = '',
-	}: Props = $props();
-</script>
-
-<div
-	class="skeleton-card rounded-lg border border-border bg-card p-4 {className}"
-	style="opacity: {opacity};"
->
-	<div class="flex gap-3">
-		{#if showAvatar}
-			<SkeletonAvatar size={avatarSize} />
-		{/if}
-		<div class="flex-1 min-w-0">
-			{#if titleLines > 0}
-				<SkeletonText lines={titleLines} lineHeight="18px" gap="6px" lastLineWidth="60%" />
-			{/if}
-			{#if bodyLines > 0}
-				<div class="mt-2">
-					<SkeletonText lines={bodyLines} lineHeight="14px" gap="6px" lastLineWidth="80%" />
-				</div>
-			{/if}
-		</div>
-	</div>
-	{#if showFooter}
-		<div class="mt-4 flex items-center justify-between border-t border-border pt-4">
-			<SkeletonBox width="80px" height="14px" />
-			<SkeletonBox width="60px" height="14px" />
-		</div>
-	{/if}
-</div>
diff --git a/packages/shared-ui/src/molecules/loaders/SkeletonGrid.svelte b/packages/shared-ui/src/molecules/loaders/SkeletonGrid.svelte
deleted file mode 100644
index 7fbf8249e..000000000
--- a/packages/shared-ui/src/molecules/loaders/SkeletonGrid.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-	/**
-	 * SkeletonGrid - Grid of skeleton cards with fade effect
-	 *
-	 * @example
-	 * ```svelte
-	 * <SkeletonGrid count={6} columns={3} />
-	 * <SkeletonGrid count={8} columns={4} showAvatar />
-	 * ```
-	 */
-
-	import SkeletonCard from './SkeletonCard.svelte';
-
-	interface Props {
-		/** Number of cards to show */
-		count?: number;
-		/** Number of columns (CSS grid) */
-		columns?: number;
-		/** Show avatar in cards */
-		showAvatar?: boolean;
-		/** Avatar size */
-		avatarSize?: string;
-		/** Number of body lines per card */
-		bodyLines?: number;
-		/** Apply cascading fade effect */
-		fadeEffect?: boolean;
-		/** Minimum opacity for fade effect */
-		minOpacity?: number;
-		/** Gap between cards */
-		gap?: string;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		count = 6,
-		columns = 3,
-		showAvatar = true,
-		avatarSize = '48px',
-		bodyLines = 2,
-		fadeEffect = true,
-		minOpacity = 0.4,
-		gap = '1rem',
-		class: className = '',
-	}: Props = $props();
-
-	function calculateOpacity(index: number): number {
-		if (!fadeEffect) return 1;
-		const fadeStep = (1 - minOpacity) / Math.max(count - 1, 1);
-		return Math.max(minOpacity, 1 - index * fadeStep);
-	}
-</script>
-
-<div
-	class="skeleton-grid grid {className}"
-	style="grid-template-columns: repeat({columns}, minmax(0, 1fr)); gap: {gap};"
->
-	{#each Array(count) as _, i}
-		<SkeletonCard {showAvatar} {avatarSize} {bodyLines} opacity={calculateOpacity(i)} />
-	{/each}
-</div>
diff --git a/packages/shared-ui/src/molecules/loaders/SkeletonList.svelte b/packages/shared-ui/src/molecules/loaders/SkeletonList.svelte
deleted file mode 100644
index 7f2d62567..000000000
--- a/packages/shared-ui/src/molecules/loaders/SkeletonList.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts">
-	/**
-	 * SkeletonList - List of skeleton rows with cascading fade effect
-	 *
-	 * @example
-	 * ```svelte
-	 * <SkeletonList count={5} />
-	 * <SkeletonList count={10} showAvatar fadeEffect />
-	 * ```
-	 */
-
-	import SkeletonRow from './SkeletonRow.svelte';
-	import { calculateFadeOpacity } from './utils';
-
-	interface Props {
-		/** Number of rows to show */
-		count?: number;
-		/** Show avatar in each row */
-		showAvatar?: boolean;
-		/** Avatar size */
-		avatarSize?: string;
-		/** Apply cascading fade effect (rows fade out towards bottom) */
-		fadeEffect?: boolean;
-		/** Minimum opacity for fade effect */
-		minOpacity?: number;
-		/** Gap between rows */
-		gap?: string;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		count = 5,
-		showAvatar = true,
-		avatarSize = '40px',
-		fadeEffect = true,
-		minOpacity = 0.3,
-		gap = '0',
-		class: className = '',
-	}: Props = $props();
-
-	function getOpacity(index: number): number {
-		return fadeEffect ? calculateFadeOpacity(index, count, minOpacity) : 1;
-	}
-</script>
-
-<div class="skeleton-list flex flex-col {className}" style="gap: {gap};">
-	{#each Array(count) as _, i}
-		<SkeletonRow {showAvatar} {avatarSize} opacity={getOpacity(i)} />
-	{/each}
-</div>
diff --git a/packages/shared-ui/src/molecules/loaders/SkeletonRow.svelte b/packages/shared-ui/src/molecules/loaders/SkeletonRow.svelte
deleted file mode 100644
index 5198a993a..000000000
--- a/packages/shared-ui/src/molecules/loaders/SkeletonRow.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-	/**
-	 * SkeletonRow - Single row skeleton with avatar and text
-	 *
-	 * @example
-	 * ```svelte
-	 * <SkeletonRow showAvatar />
-	 * <SkeletonRow opacity={0.5} />
-	 * ```
-	 */
-
-	import SkeletonBox from './SkeletonBox.svelte';
-	import SkeletonAvatar from './SkeletonAvatar.svelte';
-
-	interface Props {
-		/** Show avatar placeholder */
-		showAvatar?: boolean;
-		/** Avatar size */
-		avatarSize?: string;
-		/** Opacity for fade effect */
-		opacity?: number;
-		/** Show secondary line */
-		showSecondaryLine?: boolean;
-		/** Show right-side content */
-		showRightContent?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		showAvatar = true,
-		avatarSize = '40px',
-		opacity = 1,
-		showSecondaryLine = true,
-		showRightContent = true,
-		class: className = '',
-	}: Props = $props();
-</script>
-
-<div
-	class="skeleton-row flex items-center gap-3 border-b border-border px-4 py-3 {className}"
-	style="opacity: {opacity};"
-	role="status"
-	aria-label="Loading"
->
-	{#if showAvatar}
-		<SkeletonAvatar size={avatarSize} />
-	{/if}
-	<div class="flex-1 min-w-0">
-		<SkeletonBox width="45%" height="16px" />
-		{#if showSecondaryLine}
-			<div class="mt-1.5">
-				<SkeletonBox width="65%" height="13px" />
-			</div>
-		{/if}
-	</div>
-	{#if showRightContent}
-		<SkeletonBox width="70px" height="13px" />
-	{/if}
-</div>
diff --git a/packages/shared-ui/src/molecules/loaders/SkeletonText.svelte b/packages/shared-ui/src/molecules/loaders/SkeletonText.svelte
deleted file mode 100644
index 31db558f3..000000000
--- a/packages/shared-ui/src/molecules/loaders/SkeletonText.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-	/**
-	 * SkeletonText - Multi-line text skeleton
-	 *
-	 * Creates multiple skeleton lines for text content loading states.
-	 *
-	 * @example
-	 * ```svelte
-	 * <SkeletonText lines={3} />
-	 * <SkeletonText lines={2} lastLineWidth="60%" />
-	 * ```
-	 */
-
-	import SkeletonBox from './SkeletonBox.svelte';
-
-	interface Props {
-		/** Number of lines to show */
-		lines?: number;
-		/** Height of each line */
-		lineHeight?: string;
-		/** Gap between lines */
-		gap?: string;
-		/** Width of the last line (to simulate natural text) */
-		lastLineWidth?: string;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		lines = 3,
-		lineHeight = '16px',
-		gap = '8px',
-		lastLineWidth = '70%',
-		class: className = '',
-	}: Props = $props();
-</script>
-
-<div class="skeleton-text {className}" style="display: flex; flex-direction: column; gap: {gap};">
-	{#each Array(lines) as _, i}
-		<SkeletonBox width={i === lines - 1 ? lastLineWidth : '100%'} height={lineHeight} />
-	{/each}
-</div>
diff --git a/packages/shared-ui/src/molecules/loaders/index.ts b/packages/shared-ui/src/molecules/loaders/index.ts
deleted file mode 100644
index 3b4f38e58..000000000
--- a/packages/shared-ui/src/molecules/loaders/index.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Loading state components
- *
- * Primitives:
- * - SkeletonBox: Base rectangular skeleton with shimmer
- * - SkeletonText: Multi-line text skeleton
- * - SkeletonAvatar: Circular avatar skeleton
- *
- * Composites:
- * - SkeletonRow: Single list row with avatar + text
- * - SkeletonList: Multiple rows with fade effect
- * - SkeletonCard: Card with avatar, title, body, footer
- * - SkeletonGrid: Grid of cards with fade effect
- *
- * Full Page:
- * - AppLoadingSkeleton: Full page loading skeleton with layout presets
- */
-
-// Primitives
-export { default as SkeletonBox } from './SkeletonBox.svelte';
-export { default as SkeletonText } from './SkeletonText.svelte';
-export { default as SkeletonAvatar } from './SkeletonAvatar.svelte';
-
-// Composites
-export { default as SkeletonRow } from './SkeletonRow.svelte';
-export { default as SkeletonList } from './SkeletonList.svelte';
-export { default as SkeletonCard } from './SkeletonCard.svelte';
-export { default as SkeletonGrid } from './SkeletonGrid.svelte';
-
-// Full Page
-export { default as AppLoadingSkeleton } from './AppLoadingSkeleton.svelte';
-
-// Utilities
-export { calculateFadeOpacity } from './utils';
diff --git a/packages/shared-ui/src/molecules/loaders/utils.ts b/packages/shared-ui/src/molecules/loaders/utils.ts
deleted file mode 100644
index c2eb11231..000000000
--- a/packages/shared-ui/src/molecules/loaders/utils.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Skeleton utility functions
- */
-
-/**
- * Calculate opacity for cascading fade effect in skeleton lists
- *
- * Creates a smooth fade from 1 at the first item to minOpacity at the last item.
- *
- * @param index Current item index (0-based)
- * @param count Total number of items
- * @param minOpacity Minimum opacity at the last item (default: 0.3)
- * @returns Opacity value between minOpacity and 1
- *
- * @example
- * ```ts
- * // For a list of 5 items with minOpacity 0.3:
- * // index 0 → 1.0
- * // index 1 → 0.825
- * // index 2 → 0.65
- * // index 3 → 0.475
- * // index 4 → 0.3
- * calculateFadeOpacity(0, 5, 0.3) // 1.0
- * calculateFadeOpacity(4, 5, 0.3) // 0.3
- * ```
- */
-export function calculateFadeOpacity(index: number, count: number, minOpacity = 0.3): number {
-	const fadeStep = (1 - minOpacity) / Math.max(count - 1, 1);
-	return Math.max(minOpacity, 1 - index * fadeStep);
-}
diff --git a/packages/shared-ui/src/molecules/media/AudioPlayer.svelte b/packages/shared-ui/src/molecules/media/AudioPlayer.svelte
deleted file mode 100644
index 150844f3b..000000000
--- a/packages/shared-ui/src/molecules/media/AudioPlayer.svelte
+++ /dev/null
@@ -1,287 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import type { Snippet } from 'svelte';
-	import { Text } from '../../atoms';
-	import { Pause, Play, SkipBack, SkipForward } from '@mana/shared-icons';
-
-	interface Props {
-		/** Audio source URL */
-		src: string;
-		/** Optional known duration (seconds) */
-		duration?: number;
-		/** Custom play icon snippet */
-		playIcon?: Snippet;
-		/** Custom pause icon snippet */
-		pauseIcon?: Snippet;
-		/** Custom skip back icon snippet */
-		skipBackIcon?: Snippet;
-		/** Custom skip forward icon snippet */
-		skipForwardIcon?: Snippet;
-	}
-
-	let { src, duration, playIcon, pauseIcon, skipBackIcon, skipForwardIcon }: Props = $props();
-
-	let audio: HTMLAudioElement;
-	let currentTime = $state(0);
-	// svelte-ignore state_referenced_locally
-	let audioDuration = $state(duration || 0);
-	let isPlaying = $state(false);
-	let isLoading = $state(true);
-	let playbackRate = $state(1.0);
-
-	onMount(() => {
-		if (audio) {
-			audio.addEventListener('loadedmetadata', () => {
-				audioDuration = audio.duration;
-				isLoading = false;
-			});
-
-			audio.addEventListener('timeupdate', () => {
-				currentTime = audio.currentTime;
-			});
-
-			audio.addEventListener('ended', () => {
-				isPlaying = false;
-				currentTime = 0;
-			});
-
-			audio.addEventListener('error', () => {
-				isLoading = false;
-			});
-		}
-	});
-
-	function togglePlay() {
-		if (!audio) return;
-
-		if (isPlaying) {
-			audio.pause();
-		} else {
-			audio.play();
-		}
-		isPlaying = !isPlaying;
-	}
-
-	function seek(e: Event) {
-		if (!audio) return;
-		const input = e.target as HTMLInputElement;
-		audio.currentTime = parseFloat(input.value);
-	}
-
-	function changePlaybackRate() {
-		if (!audio) return;
-		const rates = [1.0, 1.25, 1.5, 1.75, 2.0];
-		const currentIndex = rates.indexOf(playbackRate);
-		const nextIndex = (currentIndex + 1) % rates.length;
-		playbackRate = rates[nextIndex];
-		audio.playbackRate = playbackRate;
-	}
-
-	function formatTime(seconds: number) {
-		if (isNaN(seconds)) return '0:00';
-		const mins = Math.floor(seconds / 60);
-		const secs = Math.floor(seconds % 60);
-		return `${mins}:${secs.toString().padStart(2, '0')}`;
-	}
-
-	function skipForward() {
-		if (!audio) return;
-		audio.currentTime = Math.min(audio.currentTime + 10, audioDuration);
-	}
-
-	function skipBackward() {
-		if (!audio) return;
-		audio.currentTime = Math.max(audio.currentTime - 10, 0);
-	}
-
-	// Calculate progress percentage for styling
-	const progressPercent = $derived(audioDuration > 0 ? (currentTime / audioDuration) * 100 : 0);
-</script>
-
-<div class="rounded-2xl border border-theme bg-content p-4">
-	<audio bind:this={audio} {src} preload="metadata"></audio>
-
-	<!-- Progress Bar -->
-	<div class="mb-4">
-		<input
-			type="range"
-			min="0"
-			max={audioDuration || 100}
-			value={currentTime}
-			oninput={seek}
-			class="audio-slider w-full"
-			style="--progress: {progressPercent}%"
-			disabled={isLoading}
-		/>
-		<div class="mt-1 flex justify-between">
-			<Text variant="muted">{formatTime(currentTime)}</Text>
-			<Text variant="muted">{formatTime(audioDuration)}</Text>
-		</div>
-	</div>
-
-	<!-- Controls -->
-	<div class="flex items-center justify-center gap-4">
-		<!-- Skip Backward -->
-		<button
-			onclick={skipBackward}
-			disabled={isLoading}
-			class="rounded-full bg-secondary-button p-2 transition-colors hover:bg-content-hover disabled:opacity-50"
-			type="button"
-			aria-label="Skip backward 10 seconds"
-		>
-			{#if skipBackIcon}
-				{@render skipBackIcon()}
-			{:else}
-				<SkipForward size={20} class="text-theme" />
-			{/if}
-		</button>
-
-		<!-- Play/Pause -->
-		<button
-			onclick={togglePlay}
-			disabled={isLoading}
-			class="rounded-full bg-primary-button p-4 text-primary-button-text transition-colors hover:opacity-90 disabled:opacity-50"
-			type="button"
-			aria-label={isPlaying ? 'Pause' : 'Play'}
-		>
-			{#if isLoading}
-				<svg class="h-6 w-6 animate-spin" fill="none" viewBox="0 0 24 24">
-					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
-					></circle>
-					<path
-						class="opacity-75"
-						fill="currentColor"
-						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-					></path>
-				</svg>
-			{:else if isPlaying}
-				{#if pauseIcon}
-					{@render pauseIcon()}
-				{:else}
-					<Pause size={20} weight="fill" />
-				{/if}
-			{:else if playIcon}
-				{@render playIcon()}
-			{:else}
-				<Play size={20} weight="fill" />
-			{/if}
-		</button>
-
-		<!-- Skip Forward -->
-		<button
-			onclick={skipForward}
-			disabled={isLoading}
-			class="rounded-full bg-secondary-button p-2 transition-colors hover:bg-content-hover disabled:opacity-50"
-			type="button"
-			aria-label="Skip forward 10 seconds"
-		>
-			{#if skipForwardIcon}
-				{@render skipForwardIcon()}
-			{:else}
-				<SkipBack size={20} class="text-theme" />
-			{/if}
-		</button>
-
-		<!-- Playback Speed -->
-		<button
-			onclick={changePlaybackRate}
-			disabled={isLoading}
-			class="rounded-lg bg-secondary-button px-3 py-1 text-sm font-medium text-theme transition-colors hover:bg-content-hover disabled:opacity-50"
-			type="button"
-			aria-label="Change playback speed"
-		>
-			{playbackRate}x
-		</button>
-	</div>
-</div>
-
-<style>
-	/* Custom Range Slider Styling */
-	.audio-slider {
-		-webkit-appearance: none;
-		appearance: none;
-		height: 8px;
-		border-radius: 4px;
-		background: transparent;
-		outline: none;
-		cursor: pointer;
-		position: relative;
-	}
-
-	.audio-slider:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	/* Webkit (Chrome, Safari, Edge) - Track */
-	.audio-slider::-webkit-slider-runnable-track {
-		width: 100%;
-		height: 8px;
-		border-radius: 4px;
-		background: linear-gradient(
-			to right,
-			var(--color-primary-button) 0%,
-			var(--color-primary-button) var(--progress, 0%),
-			var(--color-border) var(--progress, 0%),
-			var(--color-border) 100%
-		);
-	}
-
-	/* Webkit - Thumb */
-	.audio-slider::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 20px;
-		height: 20px;
-		border-radius: 50%;
-		background: var(--color-primary-button);
-		cursor: pointer;
-		border: 3px solid var(--color-content-bg);
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-		margin-top: -6px;
-		transition: transform 0.1s ease;
-	}
-
-	.audio-slider::-webkit-slider-thumb:hover {
-		transform: scale(1.15);
-	}
-
-	.audio-slider::-webkit-slider-thumb:active {
-		transform: scale(1.1);
-	}
-
-	/* Firefox - Track */
-	.audio-slider::-moz-range-track {
-		width: 100%;
-		height: 8px;
-		border-radius: 4px;
-		background: var(--color-border);
-	}
-
-	/* Firefox - Progress */
-	.audio-slider::-moz-range-progress {
-		height: 8px;
-		border-radius: 4px;
-		background: var(--color-primary-button);
-	}
-
-	/* Firefox - Thumb */
-	.audio-slider::-moz-range-thumb {
-		width: 14px;
-		height: 14px;
-		border-radius: 50%;
-		background: var(--color-primary-button);
-		cursor: pointer;
-		border: 3px solid var(--color-content-bg);
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-		transition: transform 0.1s ease;
-	}
-
-	.audio-slider::-moz-range-thumb:hover {
-		transform: scale(1.15);
-	}
-
-	.audio-slider::-moz-range-thumb:active {
-		transform: scale(1.1);
-	}
-</style>
diff --git a/packages/shared-ui/src/molecules/media/index.ts b/packages/shared-ui/src/molecules/media/index.ts
deleted file mode 100644
index 03a982768..000000000
--- a/packages/shared-ui/src/molecules/media/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as AudioPlayer } from './AudioPlayer.svelte';
diff --git a/packages/shared-ui/src/molecules/stats/GlassCard.svelte b/packages/shared-ui/src/molecules/stats/GlassCard.svelte
deleted file mode 100644
index 021676d0f..000000000
--- a/packages/shared-ui/src/molecules/stats/GlassCard.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		/** Content to render inside the card */
-		children: Snippet;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let { children, class: className = '' }: Props = $props();
-</script>
-
-<div
-	class="glass-card relative overflow-hidden rounded-3xl border border-theme bg-black/[0.02] dark:bg-white/[0.02] p-6 shadow-lg {className}"
->
-	{@render children()}
-</div>
-
-<style>
-	/* Glassmorphism effect */
-	.glass-card {
-		backdrop-filter: blur(10px);
-	}
-</style>
diff --git a/packages/shared-ui/src/molecules/stats/StatRow.svelte b/packages/shared-ui/src/molecules/stats/StatRow.svelte
deleted file mode 100644
index 381af6d14..000000000
--- a/packages/shared-ui/src/molecules/stats/StatRow.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { Text } from '../../atoms';
-
-	interface Props {
-		/** Title/label for the stat */
-		title: string;
-		/** Value to display */
-		value: string;
-		/** Optional subtitle/description */
-		subtitle?: string;
-		/** Icon snippet - allows custom icon rendering */
-		icon?: Snippet;
-	}
-
-	let { title, value, subtitle, icon }: Props = $props();
-</script>
-
-<div
-	class="flex items-center gap-3 border border-theme bg-black/[0.03] dark:bg-white/[0.06] px-3 py-2.5 transition-colors hover:bg-black/[0.06] dark:hover:bg-white/[0.12] first:rounded-t-xl last:rounded-b-xl"
->
-	<!-- Icon slot -->
-	{#if icon}
-		<div class="flex-shrink-0 text-theme-secondary">
-			{@render icon()}
-		</div>
-	{/if}
-
-	<!-- Content -->
-	<div class="flex-1">
-		<Text variant="small" weight="medium">{title}</Text>
-		{#if subtitle}
-			<Text variant="muted" class="mt-0.5">{subtitle}</Text>
-		{/if}
-	</div>
-
-	<!-- Value -->
-	<Text variant="body" weight="bold" class="text-right">{value}</Text>
-</div>
diff --git a/packages/shared-ui/src/molecules/stats/index.ts b/packages/shared-ui/src/molecules/stats/index.ts
deleted file mode 100644
index f09dd7ae1..000000000
--- a/packages/shared-ui/src/molecules/stats/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as GlassCard } from './GlassCard.svelte';
-export { default as StatRow } from './StatRow.svelte';
diff --git a/packages/shared-ui/src/molecules/tags/TagBadge.svelte b/packages/shared-ui/src/molecules/tags/TagBadge.svelte
deleted file mode 100644
index fb4289b19..000000000
--- a/packages/shared-ui/src/molecules/tags/TagBadge.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts">
-	import { X } from '@mana/shared-icons';
-
-	/**
-	 * Generic tag badge component
-	 * Displays a colored badge with optional remove button
-	 */
-
-	interface TagData {
-		/** Tag display name */
-		name?: string;
-		/** Alternative name field (for compatibility) */
-		text?: string;
-		/** Tag color (hex) */
-		color?: string | null;
-		/** Nested style object with color */
-		style?: { color?: string };
-	}
-
-	interface Props {
-		/** Tag data object */
-		tag: TagData;
-		/** Show remove button */
-		removable?: boolean;
-		/** Enable click interaction */
-		clickable?: boolean;
-		/** Remove callback */
-		onRemove?: () => void;
-		/** Click callback */
-		onClick?: () => void;
-	}
-
-	let { tag, removable = false, clickable = false, onRemove, onClick }: Props = $props();
-
-	// Get tag color from either style.color (new format) or color (old format)
-	const tagColor = $derived(tag.style?.color || tag.color || '#3b82f6');
-	const tagName = $derived(tag.name || tag.text || '');
-
-	function handleClick() {
-		if (clickable && onClick) {
-			onClick();
-		}
-	}
-
-	function handleRemove(e: Event) {
-		e.stopPropagation();
-		if (onRemove) {
-			onRemove();
-		}
-	}
-
-	function handleKeyDown(e: KeyboardEvent) {
-		if (clickable && (e.key === 'Enter' || e.key === ' ')) {
-			e.preventDefault();
-			handleClick();
-		}
-	}
-</script>
-
-{#if clickable}
-	<span
-		class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-all cursor-pointer hover:scale-105"
-		style="background-color: {tagColor}20; color: {tagColor}"
-		onclick={handleClick}
-		onkeydown={handleKeyDown}
-		role="button"
-		tabindex="0"
-	>
-		<!-- Color indicator dot -->
-		<div class="h-2 w-2 rounded-full" style="background-color: {tagColor}"></div>
-
-		<span>{tagName}</span>
-
-		{#if removable}
-			<button
-				onclick={handleRemove}
-				class="ml-1 rounded-full hover:bg-black/10 p-0.5 transition-colors"
-				type="button"
-				aria-label="Remove tag"
-			>
-				<X size={20} />
-			</button>
-		{/if}
-	</span>
-{:else}
-	<span
-		class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium"
-		style="background-color: {tagColor}20; color: {tagColor}"
-	>
-		<!-- Color indicator dot -->
-		<div class="h-2 w-2 rounded-full" style="background-color: {tagColor}"></div>
-
-		<span>{tagName}</span>
-
-		{#if removable}
-			<button
-				onclick={handleRemove}
-				class="ml-1 rounded-full hover:bg-black/10 p-0.5 transition-colors"
-				type="button"
-				aria-label="Remove tag"
-			>
-				<X size={20} />
-			</button>
-		{/if}
-	</span>
-{/if}
diff --git a/packages/shared-ui/src/molecules/tags/TagBadge.test.ts b/packages/shared-ui/src/molecules/tags/TagBadge.test.ts
deleted file mode 100644
index fb826d713..000000000
--- a/packages/shared-ui/src/molecules/tags/TagBadge.test.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import TagBadge from './TagBadge.svelte';
-
-describe('TagBadge', () => {
-	it('renders tag name from name field', () => {
-		render(TagBadge, { props: { tag: { name: 'Wichtig', color: '#ef4444' } } });
-		expect(screen.getByText('Wichtig')).toBeInTheDocument();
-	});
-
-	it('renders tag name from text field (compat)', () => {
-		render(TagBadge, { props: { tag: { text: 'Fallback' } } });
-		expect(screen.getByText('Fallback')).toBeInTheDocument();
-	});
-
-	it('reads color from style.color (new format)', () => {
-		const { container } = render(TagBadge, {
-			props: { tag: { name: 'Test', style: { color: '#22c55e' } } },
-		});
-		const badge = container.querySelector('span')!;
-		expect(badge.style.color).toBe('rgb(34, 197, 94)');
-	});
-
-	it('reads color from color field (old format)', () => {
-		const { container } = render(TagBadge, {
-			props: { tag: { name: 'Test', color: '#f97316' } },
-		});
-		const badge = container.querySelector('span')!;
-		expect(badge.style.color).toBe('rgb(249, 115, 22)');
-	});
-
-	it('defaults to blue when no color', () => {
-		const { container } = render(TagBadge, {
-			props: { tag: { name: 'NoColor' } },
-		});
-		const badge = container.querySelector('span')!;
-		expect(badge.style.color).toBe('rgb(59, 130, 246)');
-	});
-
-	it('shows color dot indicator', () => {
-		const { container } = render(TagBadge, {
-			props: { tag: { name: 'Test', color: '#ef4444' } },
-		});
-		const dot = container.querySelector('.rounded-full.h-2.w-2');
-		expect(dot).toBeInTheDocument();
-	});
-
-	it('shows remove button when removable', () => {
-		const onRemove = vi.fn();
-		render(TagBadge, {
-			props: { tag: { name: 'Remove Me' }, removable: true, onRemove },
-		});
-		const removeBtn = screen.getByRole('button', { name: 'Remove tag' });
-		expect(removeBtn).toBeInTheDocument();
-	});
-
-	it('calls onRemove when remove button clicked', async () => {
-		const onRemove = vi.fn();
-		render(TagBadge, {
-			props: { tag: { name: 'Remove Me' }, removable: true, onRemove },
-		});
-		const removeBtn = screen.getByRole('button', { name: 'Remove tag' });
-		await fireEvent.click(removeBtn);
-		expect(onRemove).toHaveBeenCalledOnce();
-	});
-
-	it('is clickable when clickable prop is set', () => {
-		const { container } = render(TagBadge, {
-			props: { tag: { name: 'Click' }, clickable: true, onClick: vi.fn() },
-		});
-		const badge = container.querySelector('[role="button"]');
-		expect(badge).toBeInTheDocument();
-	});
-
-	it('calls onClick when clicked in clickable mode', async () => {
-		const onClick = vi.fn();
-		const { container } = render(TagBadge, {
-			props: { tag: { name: 'Click' }, clickable: true, onClick },
-		});
-		const badge = container.querySelector('[role="button"]')!;
-		await fireEvent.click(badge);
-		expect(onClick).toHaveBeenCalledOnce();
-	});
-
-	it('is not clickable by default', () => {
-		const { container } = render(TagBadge, {
-			props: { tag: { name: 'Static' } },
-		});
-		const badge = container.querySelector('[role="button"]');
-		expect(badge).not.toBeInTheDocument();
-	});
-});
diff --git a/packages/shared-ui/src/molecules/tags/TagChip.svelte b/packages/shared-ui/src/molecules/tags/TagChip.svelte
deleted file mode 100644
index 61c808886..000000000
--- a/packages/shared-ui/src/molecules/tags/TagChip.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { DEFAULT_TAG_COLOR } from './constants';
-
-	/**
-	 * Compact inline tag chip for use in list items, cards, and metadata rows.
-	 * Smaller than TagBadge — designed to sit alongside other metadata like dates and icons.
-	 */
-
-	interface Props {
-		name: string;
-		color?: string | null;
-		/** Extra CSS classes */
-		class?: string;
-	}
-
-	let { name, color, class: className = '' }: Props = $props();
-
-	const tagColor = $derived(color ?? DEFAULT_TAG_COLOR);
-</script>
-
-<span
-	class="inline-block rounded-full px-1.5 py-0.5 text-[0.625rem] font-medium leading-tight {className}"
-	style="background: color-mix(in srgb, {tagColor} 15%, transparent); color: {tagColor}"
->
-	{name}
-</span>
diff --git a/packages/shared-ui/src/molecules/tags/TagChip.test.ts b/packages/shared-ui/src/molecules/tags/TagChip.test.ts
deleted file mode 100644
index f43684c70..000000000
--- a/packages/shared-ui/src/molecules/tags/TagChip.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import TagChip from './TagChip.svelte';
-
-describe('TagChip', () => {
-	it('renders tag name', () => {
-		render(TagChip, { props: { name: 'Arbeit' } });
-		expect(screen.getByText('Arbeit')).toBeInTheDocument();
-	});
-
-	it('renders as a span element', () => {
-		const { container } = render(TagChip, { props: { name: 'Test', color: '#ef4444' } });
-		const chip = container.querySelector('span');
-		expect(chip).toBeInTheDocument();
-		expect(chip!.textContent?.trim()).toBe('Test');
-	});
-
-	it('has compact chip styling classes', () => {
-		const { container } = render(TagChip, { props: { name: 'Tag' } });
-		const chip = container.querySelector('span')!;
-		expect(chip.classList.contains('rounded-full')).toBe(true);
-		expect(chip.classList.contains('text-[0.625rem]')).toBe(true);
-		expect(chip.classList.contains('font-medium')).toBe(true);
-		expect(chip.classList.contains('px-1.5')).toBe(true);
-		expect(chip.classList.contains('py-0.5')).toBe(true);
-	});
-
-	it('renders different tag names', () => {
-		render(TagChip, { props: { name: 'Arbeit' } });
-		expect(screen.getByText('Arbeit')).toBeInTheDocument();
-	});
-});
diff --git a/packages/shared-ui/src/molecules/tags/TagColorPicker.svelte b/packages/shared-ui/src/molecules/tags/TagColorPicker.svelte
deleted file mode 100644
index b2f5a9c0f..000000000
--- a/packages/shared-ui/src/molecules/tags/TagColorPicker.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import ColorPicker from '../ColorPicker.svelte';
-	import { TAG_COLORS, DEFAULT_TAG_COLOR } from './constants';
-
-	/**
-	 * Tag-specific color picker using the standard TAG_COLORS palette.
-	 * Wrapper around the generic ColorPicker.
-	 */
-
-	interface Props {
-		selectedColor?: string;
-		onColorChange: (color: string) => void;
-		size?: 'sm' | 'md' | 'lg';
-	}
-
-	let { selectedColor = DEFAULT_TAG_COLOR, onColorChange, size = 'md' }: Props = $props();
-
-	const colors = TAG_COLORS.map((c) => c.hex);
-</script>
-
-<ColorPicker {colors} {selectedColor} {onColorChange} {size} label="Tag color" />
diff --git a/packages/shared-ui/src/molecules/tags/TagColorPicker.test.ts b/packages/shared-ui/src/molecules/tags/TagColorPicker.test.ts
deleted file mode 100644
index 040e6375a..000000000
--- a/packages/shared-ui/src/molecules/tags/TagColorPicker.test.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import TagColorPicker from './TagColorPicker.svelte';
-import { TAG_COLORS, DEFAULT_TAG_COLOR } from './constants';
-
-describe('TagColorPicker', () => {
-	it('renders all 12 color options', () => {
-		render(TagColorPicker, { props: { onColorChange: vi.fn() } });
-		const radioGroup = screen.getByRole('radiogroup');
-		const buttons = radioGroup.querySelectorAll('button');
-		expect(buttons).toHaveLength(12);
-	});
-
-	it('each button has hex color as aria-label', () => {
-		render(TagColorPicker, { props: { onColorChange: vi.fn() } });
-		for (const color of TAG_COLORS) {
-			expect(screen.getByRole('radio', { name: color.hex })).toBeInTheDocument();
-		}
-	});
-
-	it('marks default color as selected', () => {
-		render(TagColorPicker, {
-			props: { selectedColor: DEFAULT_TAG_COLOR, onColorChange: vi.fn() },
-		});
-		const blueBtn = screen.getByRole('radio', { name: '#3b82f6' });
-		expect(blueBtn.getAttribute('aria-checked')).toBe('true');
-	});
-
-	it('marks non-selected colors as unchecked', () => {
-		render(TagColorPicker, {
-			props: { selectedColor: '#ef4444', onColorChange: vi.fn() },
-		});
-		const blueBtn = screen.getByRole('radio', { name: '#3b82f6' });
-		expect(blueBtn.getAttribute('aria-checked')).toBe('false');
-		const redBtn = screen.getByRole('radio', { name: '#ef4444' });
-		expect(redBtn.getAttribute('aria-checked')).toBe('true');
-	});
-
-	it('calls onColorChange when a color is clicked', async () => {
-		const onColorChange = vi.fn();
-		render(TagColorPicker, { props: { onColorChange } });
-		const greenBtn = screen.getByRole('radio', { name: '#22c55e' });
-		await fireEvent.click(greenBtn);
-		expect(onColorChange).toHaveBeenCalledWith('#22c55e');
-	});
-
-	it('supports keyboard selection with Enter', async () => {
-		const onColorChange = vi.fn();
-		render(TagColorPicker, { props: { onColorChange } });
-		const tealBtn = screen.getByRole('radio', { name: '#14b8a6' });
-		await fireEvent.keyDown(tealBtn, { key: 'Enter' });
-		expect(onColorChange).toHaveBeenCalledWith('#14b8a6');
-	});
-
-	it('supports keyboard selection with Space', async () => {
-		const onColorChange = vi.fn();
-		render(TagColorPicker, { props: { onColorChange } });
-		const pinkBtn = screen.getByRole('radio', { name: '#ec4899' });
-		await fireEvent.keyDown(pinkBtn, { key: ' ' });
-		expect(onColorChange).toHaveBeenCalledWith('#ec4899');
-	});
-
-	it('renders different sizes', () => {
-		const { container: smContainer } = render(TagColorPicker, {
-			props: { onColorChange: vi.fn(), size: 'sm' },
-		});
-		const smBtn = smContainer.querySelector('button')!;
-		expect(smBtn.classList.contains('w-6')).toBe(true);
-
-		const { container: lgContainer } = render(TagColorPicker, {
-			props: { onColorChange: vi.fn(), size: 'lg' },
-		});
-		const lgBtn = lgContainer.querySelector('button')!;
-		expect(lgBtn.classList.contains('w-10')).toBe(true);
-	});
-});
diff --git a/packages/shared-ui/src/molecules/tags/TagEditModal.svelte b/packages/shared-ui/src/molecules/tags/TagEditModal.svelte
deleted file mode 100644
index 72d899f82..000000000
--- a/packages/shared-ui/src/molecules/tags/TagEditModal.svelte
+++ /dev/null
@@ -1,145 +0,0 @@
-<script lang="ts">
-	import { Modal } from '../../organisms';
-	import { Input } from '../../molecules';
-	import TagBadge from './TagBadge.svelte';
-	import TagColorPicker from './TagColorPicker.svelte';
-	import { DEFAULT_TAG_COLOR } from './constants';
-	import type { Tag } from './constants';
-
-	interface Props {
-		tag?: Tag | null;
-		isOpen: boolean;
-		onClose: () => void;
-		onSave: (name: string, color: string) => void;
-		onDelete?: () => void;
-		usageCount?: number;
-		title?: string;
-		saveLabel?: string;
-		deleteLabel?: string;
-		cancelLabel?: string;
-		namePlaceholder?: string;
-		colorLabel?: string;
-		previewLabel?: string;
-		usageLabel?: string;
-		deleteConfirmMessage?: string;
-	}
-
-	let {
-		tag = null,
-		isOpen,
-		onClose,
-		onSave,
-		onDelete,
-		usageCount,
-		title = 'Tag bearbeiten',
-		saveLabel = 'Speichern',
-		deleteLabel = 'Löschen',
-		cancelLabel = 'Abbrechen',
-		namePlaceholder = 'Tag Name',
-		colorLabel = 'Farbe',
-		previewLabel = 'Vorschau',
-		usageLabel = 'Verwendung',
-		deleteConfirmMessage = 'Möchtest du diesen Tag wirklich löschen?',
-	}: Props = $props();
-
-	// svelte-ignore state_referenced_locally
-	let name = $state(tag?.name ?? '');
-	// svelte-ignore state_referenced_locally
-	let color = $state(tag?.color ?? tag?.style?.color ?? DEFAULT_TAG_COLOR);
-
-	// Reset form when tag changes
-	$effect(() => {
-		if (isOpen) {
-			name = tag?.name ?? '';
-			color = tag?.color ?? tag?.style?.color ?? DEFAULT_TAG_COLOR;
-		}
-	});
-
-	function handleSave() {
-		if (name.trim()) {
-			onSave(name.trim(), color);
-		}
-	}
-
-	function handleDelete() {
-		if (onDelete && confirm(deleteConfirmMessage)) {
-			onDelete();
-		}
-	}
-
-	function handleKeyDown(e: KeyboardEvent) {
-		if (e.key === 'Enter' && name.trim()) {
-			e.preventDefault();
-			handleSave();
-		}
-	}
-
-	const previewTag = $derived({ name: name || namePlaceholder, color });
-</script>
-
-<Modal visible={isOpen} {onClose} {title} maxWidth="sm">
-	<div class="space-y-6">
-		<!-- Name Input -->
-		<div>
-			<Input bind:value={name} placeholder={namePlaceholder} onkeydown={handleKeyDown} />
-		</div>
-
-		<!-- Color Picker -->
-		<div>
-			<span class="block text-sm font-medium text-muted-foreground mb-3">
-				{colorLabel}
-			</span>
-			<TagColorPicker selectedColor={color} onColorChange={(c) => (color = c)} />
-		</div>
-
-		<!-- Preview -->
-		<div>
-			<span class="block text-sm font-medium text-muted-foreground mb-3">
-				{previewLabel}
-			</span>
-			<div class="flex items-center gap-2">
-				<TagBadge tag={previewTag} />
-			</div>
-		</div>
-
-		<!-- Usage Count (optional) -->
-		{#if usageCount !== undefined && usageCount > 0}
-			<div class="text-sm text-muted-foreground">
-				{usageLabel}: {usageCount}
-			</div>
-		{/if}
-	</div>
-
-	{#snippet footer()}
-		<div class="flex items-center justify-between">
-			<div>
-				{#if onDelete && tag}
-					<button
-						type="button"
-						onclick={handleDelete}
-						class="px-4 py-2 text-sm font-medium text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
-					>
-						{deleteLabel}
-					</button>
-				{/if}
-			</div>
-			<div class="flex items-center gap-3">
-				<button
-					type="button"
-					onclick={onClose}
-					class="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/10 rounded-lg transition-colors"
-				>
-					{cancelLabel}
-				</button>
-				<button
-					type="button"
-					onclick={handleSave}
-					disabled={!name.trim()}
-					class="px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
-				>
-					{saveLabel}
-				</button>
-			</div>
-		</div>
-	{/snippet}
-</Modal>
diff --git a/packages/shared-ui/src/molecules/tags/TagField.svelte b/packages/shared-ui/src/molecules/tags/TagField.svelte
deleted file mode 100644
index dd98a6a21..000000000
--- a/packages/shared-ui/src/molecules/tags/TagField.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts">
-	import TagSelector from './TagSelector.svelte';
-	import type { Tag } from './constants';
-
-	/**
-	 * Form field wrapper for TagSelector.
-	 * Works with tag IDs (string[]) — the common pattern across all modules.
-	 * Pass all available tags and the currently selected IDs.
-	 */
-
-	interface Props {
-		/** All available tags */
-		tags: Array<{ id: string; name: string; color?: string | null }>;
-		/** Currently selected tag IDs */
-		selectedIds: string[];
-		/** Called when selection changes */
-		onChange: (ids: string[]) => void;
-		/** Max number of tags (optional) */
-		maxTags?: number;
-		/** Label for the add button */
-		addLabel?: string;
-		/** Placeholder text */
-		placeholder?: string;
-	}
-
-	let {
-		tags,
-		selectedIds,
-		onChange,
-		maxTags,
-		addLabel = 'Tag hinzufügen',
-		placeholder = 'Tag suchen...',
-	}: Props = $props();
-
-	const tagObjects: Tag[] = $derived(
-		tags.map((t) => ({ id: t.id, name: t.name, color: t.color ?? undefined }))
-	);
-
-	const selectedTags: Tag[] = $derived(
-		selectedIds.map((id) => tagObjects.find((t) => t.id === id)).filter((t): t is Tag => t != null)
-	);
-
-	function handleChange(newTags: Tag[]) {
-		onChange(newTags.map((t) => t.id));
-	}
-</script>
-
-<TagSelector
-	tags={tagObjects}
-	{selectedTags}
-	onTagsChange={handleChange}
-	addTagLabel={addLabel}
-	searchPlaceholder={placeholder}
-	{maxTags}
-/>
diff --git a/packages/shared-ui/src/molecules/tags/TagList.svelte b/packages/shared-ui/src/molecules/tags/TagList.svelte
deleted file mode 100644
index 6e2c5e422..000000000
--- a/packages/shared-ui/src/molecules/tags/TagList.svelte
+++ /dev/null
@@ -1,160 +0,0 @@
-<script lang="ts">
-	import { PencilSimple, Tag as TagIcon, Trash } from '@mana/shared-icons';
-	import { DEFAULT_TAG_COLOR } from './constants';
-	import type { Tag as TagType } from './constants';
-
-	interface Props {
-		tags: TagType[];
-		onEdit?: (tag: TagType) => void;
-		onDelete?: (tag: TagType) => void;
-		onClick?: (tag: TagType) => void;
-		layout?: 'grid' | 'list';
-		emptyMessage?: string;
-		emptyDescription?: string;
-		loading?: boolean;
-	}
-
-	let {
-		tags,
-		onEdit,
-		onDelete,
-		onClick,
-		layout = 'grid',
-		emptyMessage = 'Keine Tags vorhanden',
-		emptyDescription = 'Erstelle deinen ersten Tag',
-		loading = false,
-	}: Props = $props();
-
-	function getTagColor(tag: TagType): string {
-		return tag.color ?? tag.style?.color ?? DEFAULT_TAG_COLOR;
-	}
-
-	function handleKeyDown(e: KeyboardEvent, tag: TagType, action: 'click' | 'edit' | 'delete') {
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			if (action === 'click' && onClick) onClick(tag);
-			if (action === 'edit' && onEdit) onEdit(tag);
-			if (action === 'delete' && onDelete) onDelete(tag);
-		}
-	}
-
-	const gridClasses = 'grid grid-cols-1 sm:grid-cols-2 gap-4';
-	const listClasses = 'flex flex-col gap-3';
-</script>
-
-{#if loading}
-	<!-- Loading Skeleton -->
-	<div class={layout === 'grid' ? gridClasses : listClasses}>
-		{#each Array(6) as _, i}
-			<div
-				class="
-					flex items-center gap-3 p-4
-					bg-gray-100 dark:bg-gray-800
-					rounded-xl animate-pulse
-				"
-			>
-				<div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
-				<div class="flex-1">
-					<div class="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded"></div>
-				</div>
-			</div>
-		{/each}
-	</div>
-{:else if tags.length === 0}
-	<!-- Empty State -->
-	<div class="flex flex-col items-center justify-center py-12 text-center">
-		<div
-			class="w-16 h-16 mb-4 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center"
-		>
-			<TagIcon size={32} class="text-gray-400" />
-		</div>
-		<h3 class="text-lg font-medium text-foreground mb-1">{emptyMessage}</h3>
-		<p class="text-sm text-muted-foreground">{emptyDescription}</p>
-	</div>
-{:else}
-	<!-- Tag Grid/List -->
-	<div class={layout === 'grid' ? gridClasses : listClasses}>
-		{#each tags as tag (tag.id)}
-			{@const color = getTagColor(tag)}
-			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-			<div
-				class="
-					group relative flex items-center gap-3 p-4
-					bg-white dark:bg-white/5
-					border border-gray-200 dark:border-white/10
-					rounded-xl
-					transition-all duration-200
-					hover:shadow-md hover:border-gray-300 dark:hover:border-white/20
-					{onClick ? 'cursor-pointer' : ''}
-				"
-				onclick={() => onClick?.(tag)}
-				onkeydown={(e) => handleKeyDown(e, tag, 'click')}
-				role={onClick ? 'button' : undefined}
-				tabindex={onClick ? 0 : undefined}
-			>
-				<!-- Color Icon -->
-				<div
-					class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
-					style="background-color: {color}20"
-				>
-					<div class="w-4 h-4 rounded-full" style="background-color: {color}"></div>
-				</div>
-
-				<!-- Tag Name -->
-				<span class="flex-1 font-medium text-foreground min-w-0">
-					{tag.name}
-				</span>
-
-				<!-- Actions -->
-				{#if onEdit || onDelete}
-					<div class="flex items-center gap-1 flex-shrink-0">
-						{#if onEdit}
-							<button
-								type="button"
-								onclick={(e) => {
-									e.stopPropagation();
-									onEdit(tag);
-								}}
-								onkeydown={(e) => {
-									e.stopPropagation();
-									handleKeyDown(e, tag, 'edit');
-								}}
-								class="
-									p-2 rounded-lg
-									text-muted-foreground hover:text-foreground
-									hover:bg-gray-100 dark:hover:bg-white/10
-									transition-colors
-								"
-								aria-label="Tag bearbeiten"
-							>
-								<PencilSimple size={16} />
-							</button>
-						{/if}
-						{#if onDelete}
-							<button
-								type="button"
-								onclick={(e) => {
-									e.stopPropagation();
-									onDelete(tag);
-								}}
-								onkeydown={(e) => {
-									e.stopPropagation();
-									handleKeyDown(e, tag, 'delete');
-								}}
-								class="
-									p-2 rounded-lg
-									text-muted-foreground hover:text-red-500
-									hover:bg-red-50 dark:hover:bg-red-900/20
-									transition-colors
-								"
-								aria-label="Tag löschen"
-							>
-								<Trash size={16} />
-							</button>
-						{/if}
-					</div>
-				{/if}
-			</div>
-		{/each}
-	</div>
-{/if}
diff --git a/packages/shared-ui/src/molecules/tags/TagSelector.svelte b/packages/shared-ui/src/molecules/tags/TagSelector.svelte
deleted file mode 100644
index 8a3a05a99..000000000
--- a/packages/shared-ui/src/molecules/tags/TagSelector.svelte
+++ /dev/null
@@ -1,257 +0,0 @@
-<script lang="ts">
-	import { Plus, MagnifyingGlass, X } from '@mana/shared-icons';
-	import TagBadge from './TagBadge.svelte';
-	import TagColorPicker from './TagColorPicker.svelte';
-	import { DEFAULT_TAG_COLOR } from './constants';
-	import type { Tag } from './constants';
-
-	interface Props {
-		tags: Tag[];
-		selectedTags: Tag[];
-		onTagsChange: (tags: Tag[]) => void;
-		onCreateTag?: (name: string, color: string) => Promise<Tag>;
-		placeholder?: string;
-		addTagLabel?: string;
-		searchPlaceholder?: string;
-		createLabel?: string;
-		maxTags?: number;
-	}
-
-	let {
-		tags,
-		selectedTags,
-		onTagsChange,
-		onCreateTag,
-		placeholder = 'Tags hinzufügen...',
-		addTagLabel = 'Tag hinzufügen',
-		searchPlaceholder = 'Tag suchen...',
-		createLabel = 'Erstellen',
-		maxTags,
-	}: Props = $props();
-
-	let isOpen = $state(false);
-	let searchQuery = $state('');
-	let isCreating = $state(false);
-	let newTagName = $state('');
-	let newTagColor = $state(DEFAULT_TAG_COLOR);
-
-	const filteredTags = $derived.by(() => {
-		const selectedIds = new Set(selectedTags.map((t) => t.id));
-		return tags
-			.filter((tag) => !selectedIds.has(tag.id))
-			.filter((tag) => tag.name.toLowerCase().includes(searchQuery.toLowerCase()));
-	});
-
-	const canAddMore = $derived(!maxTags || selectedTags.length < maxTags);
-
-	function handleSelectTag(tag: Tag) {
-		if (canAddMore) {
-			onTagsChange([...selectedTags, tag]);
-			searchQuery = '';
-		}
-	}
-
-	function handleRemoveTag(tag: Tag) {
-		onTagsChange(selectedTags.filter((t) => t.id !== tag.id));
-	}
-
-	async function handleCreateTag() {
-		if (!onCreateTag || !newTagName.trim()) return;
-
-		try {
-			const createdTag = await onCreateTag(newTagName.trim(), newTagColor);
-			onTagsChange([...selectedTags, createdTag]);
-			newTagName = '';
-			newTagColor = DEFAULT_TAG_COLOR;
-			isCreating = false;
-			searchQuery = '';
-		} catch (error) {
-			console.error('Failed to create tag:', error);
-		}
-	}
-
-	function handleClickOutside(e: MouseEvent) {
-		const target = e.target as HTMLElement;
-		if (!target.closest('.tag-selector-container')) {
-			isOpen = false;
-			isCreating = false;
-		}
-	}
-
-	function handleKeyDown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			isOpen = false;
-			isCreating = false;
-		}
-	}
-</script>
-
-<svelte:window onclick={handleClickOutside} onkeydown={handleKeyDown} />
-
-<div class="tag-selector-container relative">
-	<!-- Selected Tags Display -->
-	<div class="flex flex-wrap items-center gap-2 mb-2">
-		{#each selectedTags as tag (tag.id)}
-			<TagBadge {tag} removable onRemove={() => handleRemoveTag(tag)} />
-		{/each}
-
-		{#if canAddMore}
-			<button
-				type="button"
-				onclick={() => (isOpen = !isOpen)}
-				class="
-					inline-flex items-center gap-1.5 px-3 py-1.5
-					text-sm text-muted-foreground
-					border border-dashed border-gray-300 dark:border-gray-600
-					rounded-full
-					hover:border-gray-400 dark:hover:border-gray-500
-					hover:text-foreground
-					transition-colors
-				"
-			>
-				<Plus size={14} weight="bold" />
-				<span>{addTagLabel}</span>
-			</button>
-		{/if}
-	</div>
-
-	<!-- Dropdown -->
-	{#if isOpen}
-		<div
-			class="
-				absolute z-50 mt-1 w-full min-w-[280px]
-				bg-white dark:bg-gray-800
-				border border-gray-200 dark:border-gray-700
-				rounded-xl shadow-lg
-				overflow-hidden
-			"
-		>
-			<!-- Search Input -->
-			<div class="p-3 border-b border-gray-100 dark:border-gray-700">
-				<div class="relative">
-					<MagnifyingGlass
-						size={16}
-						class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-					/>
-					<input
-						type="text"
-						bind:value={searchQuery}
-						placeholder={searchPlaceholder}
-						class="
-							w-full pl-9 pr-3 py-2
-							text-sm
-							bg-gray-50 dark:bg-gray-900
-							border border-gray-200 dark:border-gray-700
-							rounded-lg
-							focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent
-						"
-					/>
-				</div>
-			</div>
-
-			<!-- Tag List -->
-			<div class="max-h-48 overflow-y-auto p-2">
-				{#if filteredTags.length > 0}
-					{#each filteredTags as tag (tag.id)}
-						<button
-							type="button"
-							onclick={() => handleSelectTag(tag)}
-							class="
-								w-full flex items-center gap-2 px-3 py-2
-								text-sm text-left
-								rounded-lg
-								hover:bg-gray-100 dark:hover:bg-gray-700
-								transition-colors
-							"
-						>
-							<span
-								class="w-3 h-3 rounded-full flex-shrink-0"
-								style="background-color: {tag.color ?? tag.style?.color ?? DEFAULT_TAG_COLOR}"
-							></span>
-							<span class="truncate">{tag.name}</span>
-						</button>
-					{/each}
-				{:else if searchQuery && !isCreating}
-					<div class="px-3 py-2 text-sm text-muted-foreground text-center">Kein Tag gefunden</div>
-				{/if}
-			</div>
-
-			<!-- Create New Tag -->
-			{#if onCreateTag}
-				<div class="p-3 border-t border-gray-100 dark:border-gray-700">
-					{#if isCreating}
-						<div class="space-y-3">
-							<input
-								type="text"
-								bind:value={newTagName}
-								{placeholder}
-								class="
-									w-full px-3 py-2
-									text-sm
-									bg-gray-50 dark:bg-gray-900
-									border border-gray-200 dark:border-gray-700
-									rounded-lg
-									focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent
-								"
-								onkeydown={(e) => e.key === 'Enter' && handleCreateTag()}
-							/>
-							<TagColorPicker
-								selectedColor={newTagColor}
-								onColorChange={(c) => (newTagColor = c)}
-								size="sm"
-							/>
-							<div class="flex items-center gap-2">
-								<button
-									type="button"
-									onclick={() => (isCreating = false)}
-									class="
-										flex-1 px-3 py-1.5
-										text-sm text-muted-foreground
-										hover:bg-gray-100 dark:hover:bg-gray-700
-										rounded-lg transition-colors
-									"
-								>
-									<X size={14} class="inline mr-1" />
-									Abbrechen
-								</button>
-								<button
-									type="button"
-									onclick={handleCreateTag}
-									disabled={!newTagName.trim()}
-									class="
-										flex-1 px-3 py-1.5
-										text-sm font-medium
-										bg-primary text-primary-foreground
-										rounded-lg
-										hover:opacity-90 transition-opacity
-										disabled:opacity-50 disabled:cursor-not-allowed
-									"
-								>
-									{createLabel}
-								</button>
-							</div>
-						</div>
-					{:else}
-						<button
-							type="button"
-							onclick={() => {
-								isCreating = true;
-								newTagName = searchQuery;
-							}}
-							class="
-								w-full flex items-center justify-center gap-2 px-3 py-2
-								text-sm font-medium
-								text-primary
-								hover:bg-primary/10
-								rounded-lg transition-colors
-							"
-						>
-							<Plus size={16} weight="bold" />
-							<span>Neuen Tag erstellen</span>
-						</button>
-					{/if}
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>
diff --git a/packages/shared-ui/src/molecules/tags/TagSelector.test.ts b/packages/shared-ui/src/molecules/tags/TagSelector.test.ts
deleted file mode 100644
index bab644682..000000000
--- a/packages/shared-ui/src/molecules/tags/TagSelector.test.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import TagSelector from './TagSelector.svelte';
-import type { Tag } from './constants';
-
-const mockTags: Tag[] = [
-	{ id: '1', name: 'Arbeit', color: '#3b82f6' },
-	{ id: '2', name: 'Persönlich', color: '#22c55e' },
-	{ id: '3', name: 'Familie', color: '#ec4899' },
-	{ id: '4', name: 'Wichtig', color: '#ef4444' },
-];
-
-describe('TagSelector', () => {
-	it('renders add-tag button', () => {
-		render(TagSelector, {
-			props: { tags: mockTags, selectedTags: [], onTagsChange: vi.fn() },
-		});
-		expect(screen.getByText('Tag hinzufügen')).toBeInTheDocument();
-	});
-
-	it('renders selected tags as badges', () => {
-		render(TagSelector, {
-			props: {
-				tags: mockTags,
-				selectedTags: [mockTags[0], mockTags[2]],
-				onTagsChange: vi.fn(),
-			},
-		});
-		expect(screen.getByText('Arbeit')).toBeInTheDocument();
-		expect(screen.getByText('Familie')).toBeInTheDocument();
-	});
-
-	it('opens dropdown on button click', async () => {
-		render(TagSelector, {
-			props: { tags: mockTags, selectedTags: [], onTagsChange: vi.fn() },
-		});
-		await fireEvent.click(screen.getByText('Tag hinzufügen'));
-		expect(screen.getByPlaceholderText('Tag suchen...')).toBeInTheDocument();
-	});
-
-	it('shows unselected tags in dropdown', async () => {
-		render(TagSelector, {
-			props: {
-				tags: mockTags,
-				selectedTags: [mockTags[0]],
-				onTagsChange: vi.fn(),
-			},
-		});
-		await fireEvent.click(screen.getByText('Tag hinzufügen'));
-		// Should not show already selected
-		const dropdownItems = screen.getAllByRole('button');
-		const itemNames = dropdownItems.map((b) => b.textContent?.trim());
-		expect(itemNames).not.toContain('Arbeit');
-		expect(itemNames).toContain('Persönlich');
-	});
-
-	it('calls onTagsChange when a tag is selected', async () => {
-		const onTagsChange = vi.fn();
-		render(TagSelector, {
-			props: { tags: mockTags, selectedTags: [], onTagsChange },
-		});
-		await fireEvent.click(screen.getByText('Tag hinzufügen'));
-		await fireEvent.click(screen.getByText('Wichtig'));
-		expect(onTagsChange).toHaveBeenCalledWith([mockTags[3]]);
-	});
-
-	it('calls onTagsChange when a tag is removed', async () => {
-		const onTagsChange = vi.fn();
-		render(TagSelector, {
-			props: {
-				tags: mockTags,
-				selectedTags: [mockTags[0], mockTags[1]],
-				onTagsChange,
-			},
-		});
-		// Click the remove button on Arbeit badge
-		const removeButtons = screen.getAllByRole('button', { name: 'Remove tag' });
-		await fireEvent.click(removeButtons[0]);
-		expect(onTagsChange).toHaveBeenCalledWith([mockTags[1]]);
-	});
-
-	it('filters tags by search query', async () => {
-		render(TagSelector, {
-			props: { tags: mockTags, selectedTags: [], onTagsChange: vi.fn() },
-		});
-		await fireEvent.click(screen.getByText('Tag hinzufügen'));
-		const searchInput = screen.getByPlaceholderText('Tag suchen...');
-		await fireEvent.input(searchInput, { target: { value: 'Wich' } });
-		expect(screen.getByText('Wichtig')).toBeInTheDocument();
-		expect(screen.queryByText('Arbeit')).not.toBeInTheDocument();
-	});
-
-	it('hides add button when maxTags reached', () => {
-		render(TagSelector, {
-			props: {
-				tags: mockTags,
-				selectedTags: [mockTags[0], mockTags[1]],
-				onTagsChange: vi.fn(),
-				maxTags: 2,
-			},
-		});
-		expect(screen.queryByText('Tag hinzufügen')).not.toBeInTheDocument();
-	});
-
-	it('shows create button when onCreateTag is provided', async () => {
-		render(TagSelector, {
-			props: {
-				tags: mockTags,
-				selectedTags: [],
-				onTagsChange: vi.fn(),
-				onCreateTag: vi.fn(),
-			},
-		});
-		await fireEvent.click(screen.getByText('Tag hinzufügen'));
-		expect(screen.getByText('Neuen Tag erstellen')).toBeInTheDocument();
-	});
-
-	it('does not show create button when onCreateTag is not provided', async () => {
-		render(TagSelector, {
-			props: { tags: mockTags, selectedTags: [], onTagsChange: vi.fn() },
-		});
-		await fireEvent.click(screen.getByText('Tag hinzufügen'));
-		expect(screen.queryByText('Neuen Tag erstellen')).not.toBeInTheDocument();
-	});
-
-	it('supports custom labels', () => {
-		render(TagSelector, {
-			props: {
-				tags: mockTags,
-				selectedTags: [],
-				onTagsChange: vi.fn(),
-				addTagLabel: 'Label hinzufügen',
-			},
-		});
-		expect(screen.getByText('Label hinzufügen')).toBeInTheDocument();
-	});
-
-	it('closes dropdown on Escape', async () => {
-		render(TagSelector, {
-			props: { tags: mockTags, selectedTags: [], onTagsChange: vi.fn() },
-		});
-		await fireEvent.click(screen.getByText('Tag hinzufügen'));
-		expect(screen.getByPlaceholderText('Tag suchen...')).toBeInTheDocument();
-		await fireEvent.keyDown(window, { key: 'Escape' });
-		expect(screen.queryByPlaceholderText('Tag suchen...')).not.toBeInTheDocument();
-	});
-});
diff --git a/packages/shared-ui/src/molecules/tags/constants.test.ts b/packages/shared-ui/src/molecules/tags/constants.test.ts
deleted file mode 100644
index 578677aa6..000000000
--- a/packages/shared-ui/src/molecules/tags/constants.test.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { TAG_COLORS, DEFAULT_TAG_COLOR, getRandomTagColor, getTagColorByName } from './constants';
-
-describe('TAG_COLORS', () => {
-	it('contains 12 colors', () => {
-		expect(TAG_COLORS).toHaveLength(12);
-	});
-
-	it('each color has name and hex', () => {
-		for (const color of TAG_COLORS) {
-			expect(color.name).toBeTruthy();
-			expect(color.hex).toMatch(/^#[0-9a-f]{6}$/i);
-		}
-	});
-
-	it('has no duplicate names', () => {
-		const names = TAG_COLORS.map((c) => c.name);
-		expect(new Set(names).size).toBe(names.length);
-	});
-
-	it('has no duplicate hex values', () => {
-		const hexes = TAG_COLORS.map((c) => c.hex);
-		expect(new Set(hexes).size).toBe(hexes.length);
-	});
-});
-
-describe('DEFAULT_TAG_COLOR', () => {
-	it('is blue (#3b82f6)', () => {
-		expect(DEFAULT_TAG_COLOR).toBe('#3b82f6');
-	});
-
-	it('exists in the TAG_COLORS palette', () => {
-		expect(TAG_COLORS.some((c) => c.hex === DEFAULT_TAG_COLOR)).toBe(true);
-	});
-});
-
-describe('getRandomTagColor', () => {
-	it('returns a hex color from the palette', () => {
-		const validHexes = new Set(TAG_COLORS.map((c) => c.hex));
-		for (let i = 0; i < 50; i++) {
-			expect(validHexes.has(getRandomTagColor())).toBe(true);
-		}
-	});
-});
-
-describe('getTagColorByName', () => {
-	it('returns correct hex for known names', () => {
-		expect(getTagColorByName('red')).toBe('#ef4444');
-		expect(getTagColorByName('blue')).toBe('#3b82f6');
-		expect(getTagColorByName('green')).toBe('#22c55e');
-	});
-
-	it('returns default color for unknown names', () => {
-		expect(getTagColorByName('nonexistent' as any)).toBe(DEFAULT_TAG_COLOR);
-	});
-});
diff --git a/packages/shared-ui/src/molecules/tags/constants.ts b/packages/shared-ui/src/molecules/tags/constants.ts
deleted file mode 100644
index ea3f53740..000000000
--- a/packages/shared-ui/src/molecules/tags/constants.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Centralized tag constants and types for @mana/shared-ui
- */
-
-export const TAG_COLORS = [
-	{ name: 'red', hex: '#ef4444' },
-	{ name: 'orange', hex: '#f97316' },
-	{ name: 'amber', hex: '#f59e0b' },
-	{ name: 'lime', hex: '#84cc16' },
-	{ name: 'green', hex: '#22c55e' },
-	{ name: 'teal', hex: '#14b8a6' },
-	{ name: 'cyan', hex: '#06b6d4' },
-	{ name: 'blue', hex: '#3b82f6' },
-	{ name: 'indigo', hex: '#6366f1' },
-	{ name: 'violet', hex: '#8b5cf6' },
-	{ name: 'pink', hex: '#ec4899' },
-	{ name: 'slate', hex: '#64748b' },
-] as const;
-
-export const DEFAULT_TAG_COLOR = '#3b82f6'; // blue
-
-export type TagColorName = (typeof TAG_COLORS)[number]['name'];
-export type TagColorHex = (typeof TAG_COLORS)[number]['hex'];
-
-export interface Tag {
-	id: string;
-	name: string;
-	color?: string | null;
-	style?: { color?: string };
-}
-
-export interface TagData {
-	name?: string;
-	text?: string;
-	color?: string | null;
-	style?: { color?: string };
-}
-
-/**
- * Get a random color from the palette
- */
-export function getRandomTagColor(): string {
-	return TAG_COLORS[Math.floor(Math.random() * TAG_COLORS.length)].hex;
-}
-
-/**
- * Get color by name
- */
-export function getTagColorByName(name: TagColorName): string {
-	for (const color of TAG_COLORS) {
-		if (color.name === name) {
-			return color.hex;
-		}
-	}
-	return DEFAULT_TAG_COLOR;
-}
diff --git a/packages/shared-ui/src/molecules/tags/index.ts b/packages/shared-ui/src/molecules/tags/index.ts
deleted file mode 100644
index 7a661b47b..000000000
--- a/packages/shared-ui/src/molecules/tags/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Components
-export { default as TagBadge } from './TagBadge.svelte';
-export { default as TagChip } from './TagChip.svelte';
-export { default as TagColorPicker } from './TagColorPicker.svelte';
-export { default as TagEditModal } from './TagEditModal.svelte';
-export { default as TagSelector } from './TagSelector.svelte';
-export { default as TagField } from './TagField.svelte';
-export { default as TagList } from './TagList.svelte';
-
-// Constants and Types
-export { TAG_COLORS, DEFAULT_TAG_COLOR, getRandomTagColor, getTagColorByName } from './constants';
-export type { Tag, TagData, TagColorName, TagColorHex } from './constants';
diff --git a/packages/shared-ui/src/navigation/AppDrawer.svelte b/packages/shared-ui/src/navigation/AppDrawer.svelte
index adcda9dcd..6998720fd 100644
--- a/packages/shared-ui/src/navigation/AppDrawer.svelte
+++ b/packages/shared-ui/src/navigation/AppDrawer.svelte
@@ -301,7 +301,7 @@
 
 	/* Solid theme-tokened pill (formerly the "glass" frosted pill). */
 	.glass-pill {
-		background: hsl(var(--color-card));
+		background: hsl(var(--color-surface));
 		border: 1px solid hsl(var(--color-border));
 		box-shadow:
 			0 1px 2px hsl(0 0% 0% / 0.05),
@@ -311,7 +311,7 @@
 
 	.glass-pill:hover {
 		background: hsl(var(--color-surface-hover));
-		border-color: hsl(var(--color-border-strong, var(--color-border)));
+		border-color: hsl(var(--color-border));
 		box-shadow:
 			0 6px 12px hsl(0 0% 0% / 0.08),
 			0 2px 4px hsl(0 0% 0% / 0.05);
@@ -593,7 +593,7 @@
 	}
 
 	.fav-icon.is-fav {
-		color: #eab308;
+		color: hsl(var(--color-warning));
 	}
 
 	/* Empty state */
diff --git a/packages/shared-ui/src/navigation/GlobalSpotlight.svelte b/packages/shared-ui/src/navigation/GlobalSpotlight.svelte
index 1c246cabb..a82dd1110 100644
--- a/packages/shared-ui/src/navigation/GlobalSpotlight.svelte
+++ b/packages/shared-ui/src/navigation/GlobalSpotlight.svelte
@@ -7,7 +7,7 @@
 		ContentSearcher,
 	} from './types';
 	import { createAppNavigationStore } from './appNavigationStore.svelte';
-	import { SEARCH_DEBOUNCE_MS } from '../search-core';
+	import { SEARCH_DEBOUNCE_MS } from '../quick-input';
 
 	interface Props {
 		open: boolean;
diff --git a/packages/shared-ui/src/navigation/ManaLogoIcon.stories.svelte b/packages/shared-ui/src/navigation/ManaLogoIcon.stories.svelte
new file mode 100644
index 000000000..8269c47fb
--- /dev/null
+++ b/packages/shared-ui/src/navigation/ManaLogoIcon.stories.svelte
@@ -0,0 +1,44 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ManaLogoIcon from './ManaLogoIcon.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Navigation/ManaLogoIcon',
+		component: ManaLogoIcon,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<ManaLogoIcon />
+	{/snippet}
+</Story>
+
+<Story name="SizeSweep">
+	{#snippet children()}
+		<div style="display:flex; flex-direction:column; gap:1rem; align-items:flex-start;">
+			<ManaLogoIcon size="sm" />
+			<ManaLogoIcon size="md" />
+			<ManaLogoIcon size="lg" />
+			<ManaLogoIcon size="xl" />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Animated">
+	{#snippet children()}
+		<div>
+			<ManaLogoIcon size="xl" animated ariaLabel="mana — Welleneintro" />
+			<p style="margin-top:1rem; color: hsl(var(--color-muted-foreground)); font-size: 0.875rem;">
+				M-A-N-A-Sequenz, ~1.1s. Bei `prefers-reduced-motion: reduce` statisch.
+			</p>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithTitle">
+	{#snippet children()}
+		<ManaLogoIcon size="lg" title="mana e.V." />
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/navigation/ManaLogoIcon.svelte b/packages/shared-ui/src/navigation/ManaLogoIcon.svelte
index 925f5d7b8..ddbcc8bed 100644
--- a/packages/shared-ui/src/navigation/ManaLogoIcon.svelte
+++ b/packages/shared-ui/src/navigation/ManaLogoIcon.svelte
@@ -1,21 +1,198 @@
 <script lang="ts">
+	/**
+	 * ManaLogoIcon — Wortmarken-Logo „Mana-Bunt" als Inline-SVG.
+	 *
+	 * Geometrie aus mana/docs/BRAND.md: viewBox 0 0 24 7, 5 Cubic-Bezier-
+	 * Bögen + 2 Querstriche, Spektrum-Farbverlauf je Bogen. Animation
+	 * aus BRAND.md (M-A-N-A-Sequenz, ~1.1s) ist optional via Prop.
+	 *
+	 * Default ist die statische Variante. Animationen respektieren
+	 * `prefers-reduced-motion: reduce` (kein draw-on, statisches Logo).
+	 */
+
+	type Size = 'sm' | 'md' | 'lg' | 'xl';
+
 	interface Props {
-		size?: number;
+		size?: Size | number;
+		animated?: boolean;
+		ariaLabel?: string;
+		title?: string;
+		/** v0.1.x-Compat. */
 		class?: string;
 	}
 
-	let { size = 24, class: className = '' }: Props = $props();
+	let {
+		size = 'md',
+		animated = false,
+		ariaLabel = 'mana',
+		title,
+		class: className = '',
+	}: Props = $props();
+
+	const normalizedSize = $derived.by<Size>(() => {
+		if (typeof size === 'number') {
+			if (size <= 16) return 'sm';
+			if (size <= 24) return 'md';
+			if (size <= 32) return 'lg';
+			return 'xl';
+		}
+		return size;
+	});
 </script>
 
 <svg
-	class={className}
-	viewBox="0 0 24 24"
-	fill="currentColor"
-	width={size}
-	height={size}
-	aria-hidden="true"
+	class="mana-logo size-{normalizedSize} {className}"
+	class:animated
+	viewBox="0 0 24 7"
+	xmlns="http://www.w3.org/2000/svg"
+	role="img"
+	aria-label={ariaLabel}
 >
-	<path
-		d="M12.3047 1C12.3392 1.04573 19.608 10.6706 19.6084 14.6953C19.6084 18.7293 16.3386 21.9998 12.3047 22C8.27061 22 5 18.7294 5 14.6953C5.00041 10.661 12.3047 1 12.3047 1ZM12.3047 7.3916C12.2811 7.42276 8.65234 12.2288 8.65234 14.2393C8.65241 16.2562 10.2877 17.8916 12.3047 17.8916C14.3217 17.8916 15.957 16.2562 15.957 14.2393C15.957 12.2301 12.3331 7.42917 12.3047 7.3916Z"
-	/>
+	{#if title}<title>{title}</title>{/if}
+	<defs>
+		<linearGradient id="mana-arch-1" x1="0" x2="1" y1="0" y2="0">
+			<stop offset="0%" stop-color="#000000" />
+			<stop offset="55%" stop-color="#FFB700" />
+			<stop offset="100%" stop-color="#FF6600" />
+		</linearGradient>
+		<linearGradient id="mana-arch-2" x1="0" x2="1" y1="0" y2="0">
+			<stop offset="0%" stop-color="#FF6600" />
+			<stop offset="55%" stop-color="#FF0000" />
+			<stop offset="100%" stop-color="#FF00AA" />
+		</linearGradient>
+		<linearGradient id="mana-arch-3" x1="0" x2="1" y1="0" y2="0">
+			<stop offset="0%" stop-color="#FF00AA" />
+			<stop offset="55%" stop-color="#8225D4" />
+			<stop offset="100%" stop-color="#004CFF" />
+		</linearGradient>
+		<linearGradient id="mana-arch-4" x1="0" x2="1" y1="0" y2="0">
+			<stop offset="0%" stop-color="#004CFF" />
+			<stop offset="100%" stop-color="#07D6FF" />
+		</linearGradient>
+		<linearGradient id="mana-arch-5" x1="0" x2="1" y1="0" y2="0">
+			<stop offset="0%" stop-color="#07D6FF" />
+			<stop offset="55%" stop-color="#00C013" />
+			<stop offset="100%" stop-color="#FFFFFF" />
+		</linearGradient>
+		<linearGradient id="mana-cross-1" x1="0" x2="1" y1="0" y2="0">
+			<stop offset="0%" stop-color="#F902AC" />
+			<stop offset="100%" stop-color="#05A6FE" />
+		</linearGradient>
+		<linearGradient id="mana-cross-2" x1="0" x2="1" y1="0" y2="0">
+			<stop offset="0%" stop-color="#07D6FE" />
+			<stop offset="100%" stop-color="#9DFFA8" />
+		</linearGradient>
+	</defs>
+
+	<g fill="none" stroke-linecap="round" stroke-width="1.2">
+		<path
+			class="arch arch--1"
+			pathLength="1"
+			stroke="url(#mana-arch-1)"
+			d="M 0 6 C 0.8 1.2 3.2 1.2 4 6"
+		/>
+		<path
+			class="arch arch--2"
+			pathLength="1"
+			stroke="url(#mana-arch-2)"
+			d="M 4 6 C 4.8 1.2 7.2 1.2 8 6"
+		/>
+		<path
+			class="arch arch--3"
+			pathLength="1"
+			stroke="url(#mana-arch-3)"
+			d="M 8 6 C 8.8 1.2 11.2 1.2 12 6"
+		/>
+		<path class="cross cross--1" pathLength="1" stroke="url(#mana-cross-1)" d="M 11 4 L 13 4" />
+		<path
+			class="arch arch--4"
+			pathLength="1"
+			stroke="url(#mana-arch-4)"
+			d="M 12 6 C 12.8 1.2 15.2 1.2 16 6"
+		/>
+		<path
+			class="arch arch--5"
+			pathLength="1"
+			stroke="url(#mana-arch-5)"
+			d="M 16 6 C 16.8 1.2 19.2 1.2 20 6"
+		/>
+		<path class="cross cross--2" pathLength="1" stroke="url(#mana-cross-2)" d="M 19 4 L 21 4" />
+	</g>
 </svg>
+
+<style>
+	.mana-logo {
+		display: inline-block;
+		flex-shrink: 0;
+		overflow: visible;
+	}
+
+	.size-sm {
+		height: 1rem;
+	}
+	.size-md {
+		height: 1.5rem;
+	}
+	.size-lg {
+		height: 2.25rem;
+	}
+	.size-xl {
+		height: 3rem;
+	}
+
+	/* Animation: Wellen-Intro M-A-N-A — Bogen für Bogen, ~1.1s */
+	.animated .arch,
+	.animated .cross {
+		stroke-dasharray: 1;
+		stroke-dashoffset: 1;
+		opacity: 0;
+		animation-fill-mode: forwards;
+		animation-timing-function: ease-out;
+	}
+
+	.animated .arch--1 {
+		animation: draw 0.25s 0s forwards;
+	}
+	.animated .arch--2 {
+		animation: draw 0.25s 0.18s forwards;
+	}
+	.animated .arch--3 {
+		animation: draw 0.25s 0.36s forwards;
+	}
+	.animated .cross--1 {
+		animation: draw 0.12s 0.5s forwards;
+	}
+	.animated .arch--4 {
+		animation: draw 0.25s 0.58s forwards;
+	}
+	.animated .arch--5 {
+		animation: draw 0.25s 0.76s forwards;
+	}
+	.animated .cross--2 {
+		animation: draw 0.12s 0.95s forwards;
+	}
+
+	@keyframes draw {
+		0% {
+			stroke-dashoffset: 1;
+			opacity: 0;
+		}
+		1% {
+			opacity: 1;
+		}
+		100% {
+			stroke-dashoffset: 0;
+			opacity: 1;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.animated .arch,
+		.animated .cross {
+			stroke-dasharray: none;
+			stroke-dashoffset: 0;
+			opacity: 1;
+			animation: none;
+		}
+	}
+</style>
diff --git a/packages/shared-ui/src/navigation/NavLink.stories.svelte b/packages/shared-ui/src/navigation/NavLink.stories.svelte
new file mode 100644
index 000000000..c5de5f392
--- /dev/null
+++ b/packages/shared-ui/src/navigation/NavLink.stories.svelte
@@ -0,0 +1,33 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import NavLink from './NavLink.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Navigation/NavLink',
+		component: NavLink,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<NavLink href="#">Stapel</NavLink>
+	{/snippet}
+</Story>
+
+<Story name="Active">
+	{#snippet children()}
+		<NavLink href="#" active>Stapel (aktive Route)</NavLink>
+	{/snippet}
+</Story>
+
+<Story name="LinkRow">
+	{#snippet children()}
+		<div style="display:flex; gap:1.5rem;">
+			<NavLink href="/decks" active>Stapel</NavLink>
+			<NavLink href="/study">Lernen</NavLink>
+			<NavLink href="/import">Import</NavLink>
+			<NavLink href="/stats">Statistik</NavLink>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/navigation/NavLink.svelte b/packages/shared-ui/src/navigation/NavLink.svelte
index 320c5c3c0..0d2115e42 100644
--- a/packages/shared-ui/src/navigation/NavLink.svelte
+++ b/packages/shared-ui/src/navigation/NavLink.svelte
@@ -1,214 +1,72 @@
 <script lang="ts">
-	import type { NavLinkProps } from './types';
+	import type { Snippet } from 'svelte';
 
-	let {
-		item,
-		active = false,
-		variant = 'default',
-		minimized = false,
-		class: className = '',
-	}: NavLinkProps = $props();
-
-	let showTooltip = $state(false);
-
-	function handleMouseEnter() {
-		if (minimized) {
-			showTooltip = true;
-		}
+	interface Props {
+		href: string;
+		active?: boolean;
+		ariaLabel?: string;
+		title?: string;
+		onclick?: (e: MouseEvent) => void;
+		children?: Snippet;
+		leading?: Snippet;
 	}
 
-	function handleMouseLeave() {
-		showTooltip = false;
-	}
+	let { href, active = false, ariaLabel, title, onclick, children, leading }: Props = $props();
 </script>
 
 <a
-	href={item.href}
-	class="nav-link nav-link--{variant} {active ? 'nav-link--active' : ''} {minimized
-		? 'nav-link--minimized'
-		: ''} {className}"
-	class:nav-link--disabled={item.disabled}
-	onmouseenter={handleMouseEnter}
-	onmouseleave={handleMouseLeave}
+	{href}
+	class="nav-link"
+	class:active
 	aria-current={active ? 'page' : undefined}
-	aria-disabled={item.disabled}
+	aria-label={ariaLabel}
+	{title}
+	{onclick}
 >
-	{#if item.icon}
-		<span class="nav-link__icon">
-			{#if item.icon.startsWith('<svg') || item.icon.startsWith('M')}
-				<!-- SVG path or element -->
-				{@html item.icon.startsWith('M')
-					? `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="${item.icon}"/></svg>`
-					: item.icon}
-			{:else}
-				<!-- Emoji or text icon -->
-				<span class="text-lg">{item.icon}</span>
-			{/if}
-		</span>
-	{/if}
-
-	{#if !minimized}
-		<span class="nav-link__label">{item.label}</span>
-	{/if}
-
-	{#if item.badge !== undefined && !minimized}
-		<span class="nav-link__badge">{item.badge}</span>
-	{/if}
-
-	{#if item.shortcut && !minimized}
-		<kbd class="nav-link__shortcut">{item.shortcut}</kbd>
-	{/if}
-
-	{#if minimized && showTooltip}
-		<span class="nav-link__tooltip">{item.label}</span>
-	{/if}
+	{#if leading}<span class="leading">{@render leading()}</span>{/if}
+	{#if children}<span>{@render children()}</span>{/if}
 </a>
 
 <style>
 	.nav-link {
-		display: flex;
+		display: inline-flex;
 		align-items: center;
-		gap: 0.75rem;
-		padding: 0.5rem 1rem;
-		border-radius: 0.375rem;
-		text-decoration: none;
-		font-size: 0.875rem;
-		font-weight: 500;
+		gap: 0.375rem;
+		padding: 0.25rem 0;
 		color: hsl(var(--color-muted-foreground));
-		transition: all 0.15s ease;
-		position: relative;
+		text-decoration: none;
+		font: inherit;
+		font-weight: 500;
+		border-bottom: 2px solid transparent;
+		transition:
+			color 0.15s ease,
+			border-color 0.15s ease;
 	}
 
-	.nav-link:hover:not(.nav-link--disabled) {
-		background-color: hsl(var(--color-surface-hover));
+	.nav-link:hover {
 		color: hsl(var(--color-foreground));
 	}
 
-	.nav-link--active {
-		background-color: hsl(var(--color-primary) / 0.1);
+	.nav-link:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+
+	.nav-link.active {
 		color: hsl(var(--color-primary));
+		border-color: hsl(var(--color-primary));
 	}
 
-	.nav-link--active:hover {
-		background-color: hsl(var(--color-primary) / 0.15);
-	}
-
-	.nav-link--disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-		pointer-events: none;
-	}
-
-	/* Sidebar variant */
-	.nav-link--sidebar {
-		padding: 0.75rem;
-		border-radius: 0.5rem;
-	}
-
-	/* Mobile variant */
-	.nav-link--mobile {
-		flex-direction: column;
-		gap: 0.25rem;
-		padding: 0.5rem;
-		font-size: 0.75rem;
-	}
-
-	/* Pill variant */
-	.nav-link--pill {
-		padding: 0.5rem 1rem;
-		border-radius: 9999px;
-		background-color: hsl(var(--color-surface));
-	}
-
-	.nav-link--pill:hover:not(.nav-link--disabled) {
-		background-color: hsl(var(--color-surface-hover));
-	}
-
-	.nav-link--pill.nav-link--active {
-		background-color: hsl(var(--color-primary));
-		color: hsl(var(--color-primary-foreground));
-	}
-
-	/* Minimized sidebar */
-	.nav-link--minimized {
-		justify-content: center;
-		padding: 0.75rem;
-	}
-
-	/* Icon */
-	.nav-link__icon {
-		flex-shrink: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 1.25rem;
-		height: 1.25rem;
-	}
-
-	.nav-link__icon :global(svg) {
-		width: 1.25rem;
-		height: 1.25rem;
-	}
-
-	/* Label */
-	.nav-link__label {
-		flex: 1;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	/* Badge */
-	.nav-link__badge {
+	.leading {
 		display: inline-flex;
 		align-items: center;
-		justify-content: center;
-		min-width: 1.25rem;
-		height: 1.25rem;
-		padding: 0 0.375rem;
-		font-size: 0.625rem;
-		font-weight: 600;
-		background-color: hsl(var(--color-primary));
-		color: hsl(var(--color-primary-foreground));
-		border-radius: 9999px;
+		flex-shrink: 0;
 	}
 
-	/* Shortcut */
-	.nav-link__shortcut {
-		font-family: ui-monospace, monospace;
-		font-size: 0.625rem;
-		padding: 0.125rem 0.375rem;
-		background-color: hsl(var(--color-muted));
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.25rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	/* Tooltip */
-	.nav-link__tooltip {
-		position: fixed;
-		left: calc(100% + 0.75rem);
-		top: 50%;
-		transform: translateY(-50%);
-		padding: 0.5rem 0.75rem;
-		background-color: hsl(var(--color-foreground));
-		color: hsl(var(--color-background));
-		font-size: 0.875rem;
-		font-weight: 500;
-		border-radius: 0.375rem;
-		white-space: nowrap;
-		z-index: 50;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-		pointer-events: none;
-	}
-
-	.nav-link__tooltip::before {
-		content: '';
-		position: absolute;
-		right: 100%;
-		top: 50%;
-		transform: translateY(-50%);
-		border: 5px solid transparent;
-		border-right-color: hsl(var(--color-foreground));
+	@media (prefers-reduced-motion: reduce) {
+		.nav-link {
+			transition: none;
+		}
 	}
 </style>
diff --git a/packages/shared-ui/src/navigation/Navbar.stories.svelte b/packages/shared-ui/src/navigation/Navbar.stories.svelte
new file mode 100644
index 000000000..b3c254a45
--- /dev/null
+++ b/packages/shared-ui/src/navigation/Navbar.stories.svelte
@@ -0,0 +1,111 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Navbar from './Navbar.svelte';
+	import NavLink from './NavLink.svelte';
+	import Pill from './Pill.svelte';
+	import PillTabGroup from './PillTabGroup.svelte';
+	import ManaLogoIcon from './ManaLogoIcon.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Navigation/Navbar',
+		component: Navbar,
+		tags: ['autodocs'],
+	});
+
+	let langValue = $state('de');
+	let activeRoute = $state('decks');
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<div style="width: 100%; min-width: 720px;">
+			<Navbar ariaLabel="Hauptnavigation">
+				{#snippet brand()}
+					<ManaLogoIcon size="md" />
+					<span style="font-weight: 600;">mana e.V.</span>
+				{/snippet}
+				{#snippet nav()}
+					<div style="display:flex; gap:1.5rem;">
+						<NavLink href="/" active>Start</NavLink>
+						<NavLink href="/spenden">Spenden</NavLink>
+						<NavLink href="/devlog">Devlog</NavLink>
+						<NavLink href="/transparenz">Transparenz</NavLink>
+					</div>
+				{/snippet}
+				{#snippet actions()}
+					<Pill primary href="/anmelden">Anmelden</Pill>
+				{/snippet}
+			</Navbar>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithPillTabGroup">
+	{#snippet children()}
+		<div style="width: 100%; min-width: 720px;">
+			<Navbar ariaLabel="Cards-Navigation">
+				{#snippet brand()}
+					<span
+						style="display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; border-radius:0.375rem; background: hsl(var(--color-primary)); color: hsl(var(--color-primary-foreground)); font-weight:600;"
+						aria-hidden="true"
+					>
+						C
+					</span>
+					<span style="font-weight: 600;">Cards</span>
+				{/snippet}
+				{#snippet nav()}
+					<PillTabGroup
+						options={[
+							{ id: 'decks', label: 'Stapel' },
+							{ id: 'study', label: 'Lernen' },
+							{ id: 'import', label: 'Import' },
+							{ id: 'stats', label: 'Statistik' },
+						]}
+						value={activeRoute}
+						onChange={(id) => (activeRoute = id)}
+					/>
+				{/snippet}
+				{#snippet actions()}
+					<PillTabGroup
+						options={[
+							{ id: 'de', label: 'DE' },
+							{ id: 'en', label: 'EN' },
+						]}
+						value={langValue}
+						onChange={(id) => (langValue = id)}
+					/>
+					<Pill href="/account" iconOnly ariaLabel="Profil" title="Profil">
+						{#snippet leading()}
+							<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+								<circle cx="8" cy="6" r="3" stroke="currentColor" fill="none" stroke-width="1.4" />
+								<path
+									d="M3 14c0-2.5 2.2-4 5-4s5 1.5 5 4"
+									stroke="currentColor"
+									fill="none"
+									stroke-width="1.4"
+									stroke-linecap="round"
+								/>
+							</svg>
+						{/snippet}
+					</Pill>
+				{/snippet}
+			</Navbar>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="MinimalReadingView">
+	{#snippet children()}
+		<div style="width: 100%; min-width: 540px;">
+			<Navbar>
+				{#snippet brand()}
+					<ManaLogoIcon size="sm" /><span style="font-weight: 600;">Zitare</span>
+				{/snippet}
+				{#snippet actions()}
+					<NavLink href="#">Suche</NavLink>
+					<Pill primary href="#">Beitragen</Pill>
+				{/snippet}
+			</Navbar>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/navigation/Navbar.svelte b/packages/shared-ui/src/navigation/Navbar.svelte
index 945b74af9..1fbca94a6 100644
--- a/packages/shared-ui/src/navigation/Navbar.svelte
+++ b/packages/shared-ui/src/navigation/Navbar.svelte
@@ -1,267 +1,65 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { NavItem } from './types';
-	import NavLink from './NavLink.svelte';
-	import { List, X } from '@mana/shared-icons';
 
 	interface Props {
-		/** Navigation items to display */
-		items: NavItem[];
-		/** Logo snippet */
-		logo?: Snippet;
-		/** App name to display next to logo */
-		appName?: string;
-		/** Logo href */
-		logoHref?: string;
-		/** Current pathname for active state detection */
-		currentPath?: string;
-		/** User email to display */
-		userEmail?: string;
-		/** Called when sign out is clicked */
-		onSignOut?: () => void;
-		/** Sign out button label */
-		signOutLabel?: string;
-		/** Additional CSS classes */
-		class?: string;
+		ariaLabel?: string;
+		sticky?: boolean;
+		brand?: Snippet;
+		nav?: Snippet;
+		actions?: Snippet;
 	}
 
-	let {
-		items,
-		logo,
-		appName = '',
-		logoHref = '/',
-		currentPath = '',
-		userEmail = '',
-		onSignOut,
-		signOutLabel = 'Sign Out',
-		class: className = '',
-	}: Props = $props();
-
-	let mobileMenuOpen = $state(false);
-
-	function isActive(href: string): boolean {
-		if (href === '/') return currentPath === '/';
-		return currentPath.startsWith(href);
-	}
-
-	function toggleMobileMenu() {
-		mobileMenuOpen = !mobileMenuOpen;
-	}
+	let { ariaLabel, sticky = true, brand, nav, actions }: Props = $props();
 </script>
 
-<nav class="navbar {className}">
-	<div class="navbar__container">
-		<div class="navbar__content">
-			<!-- Logo -->
-			<div class="navbar__brand">
-				<a href={logoHref} class="navbar__logo">
-					{#if logo}
-						{@render logo()}
-					{/if}
-					{#if appName}
-						<span class="navbar__app-name">{appName}</span>
-					{/if}
-				</a>
-			</div>
-
-			<!-- Desktop Navigation -->
-			<div class="navbar__nav">
-				{#each items as item}
-					<NavLink {item} active={isActive(item.href)} variant="default" />
-				{/each}
-			</div>
-
-			<!-- User Section -->
-			<div class="navbar__user">
-				{#if userEmail}
-					<span class="navbar__email">{userEmail}</span>
-				{/if}
-				{#if onSignOut}
-					<button onclick={onSignOut} class="navbar__signout">
-						{signOutLabel}
-					</button>
-				{/if}
-			</div>
-
-			<!-- Mobile Menu Button -->
-			<button
-				class="navbar__mobile-toggle"
-				onclick={toggleMobileMenu}
-				aria-expanded={mobileMenuOpen}
-				aria-label="Toggle menu"
-			>
-				{#if mobileMenuOpen}
-					<X size={24} />
-				{:else}
-					<List size={24} />
-				{/if}
-			</button>
-		</div>
+<header class="navbar" class:sticky aria-label={ariaLabel}>
+	<div class="inner">
+		{#if brand}<div class="brand">{@render brand()}</div>{/if}
+		{#if nav}<nav class="nav" aria-label={ariaLabel}>{@render nav()}</nav>{/if}
+		{#if actions}<div class="actions">{@render actions()}</div>{/if}
 	</div>
-
-	<!-- Mobile Menu -->
-	{#if mobileMenuOpen}
-		<div class="navbar__mobile-menu">
-			<div class="navbar__mobile-nav">
-				{#each items as item}
-					<NavLink {item} active={isActive(item.href)} variant="mobile" />
-				{/each}
-			</div>
-			{#if onSignOut}
-				<div class="navbar__mobile-footer">
-					<button onclick={onSignOut} class="navbar__mobile-signout">
-						{signOutLabel}
-					</button>
-				</div>
-			{/if}
-		</div>
-	{/if}
-</nav>
+</header>
 
 <style>
 	.navbar {
+		width: 100%;
+		background: hsl(var(--color-surface));
 		border-bottom: 1px solid hsl(var(--color-border));
-		background-color: hsl(var(--color-surface-elevated));
 	}
 
-	.navbar__container {
-		max-width: 80rem;
-		margin: 0 auto;
-		padding: 0 1rem;
+	.navbar.sticky {
+		position: sticky;
+		top: 0;
+		z-index: 40;
 	}
 
-	.navbar__content {
+	.inner {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		height: 4rem;
+		gap: 1rem;
+		max-width: 72rem;
+		margin: 0 auto;
+		padding: 0.75rem 1rem;
 	}
 
-	/* Brand/Logo */
-	.navbar__brand {
-		display: flex;
-		align-items: center;
-	}
-
-	.navbar__logo {
-		display: flex;
+	.brand {
+		display: inline-flex;
 		align-items: center;
 		gap: 0.5rem;
-		text-decoration: none;
-		color: hsl(var(--color-foreground));
+		flex-shrink: 0;
 	}
 
-	.navbar__app-name {
-		font-size: 1.25rem;
-		font-weight: 700;
-	}
-
-	/* Desktop Navigation */
-	.navbar__nav {
-		display: none;
-		align-items: center;
-		gap: 0.25rem;
-	}
-
-	@media (min-width: 768px) {
-		.navbar__nav {
-			display: flex;
-		}
-	}
-
-	/* User Section */
-	.navbar__user {
-		display: none;
-		align-items: center;
-		gap: 1rem;
-	}
-
-	@media (min-width: 768px) {
-		.navbar__user {
-			display: flex;
-		}
-	}
-
-	.navbar__email {
-		font-size: 0.875rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.navbar__signout {
-		padding: 0.5rem 0.75rem;
-		font-size: 0.875rem;
-		font-weight: 500;
-		color: hsl(var(--color-error));
-		background: transparent;
-		border: none;
-		border-radius: 0.375rem;
-		cursor: pointer;
-		transition: background-color 0.15s ease;
-	}
-
-	.navbar__signout:hover {
-		background-color: hsl(var(--color-error) / 0.1);
-	}
-
-	/* Mobile Menu Toggle */
-	.navbar__mobile-toggle {
+	.nav {
 		display: flex;
 		align-items: center;
-		justify-content: center;
-		padding: 0.5rem;
-		color: hsl(var(--color-muted-foreground));
-		background: transparent;
-		border: none;
-		border-radius: 0.375rem;
-		cursor: pointer;
+		gap: 0;
 	}
 
-	.navbar__mobile-toggle:hover {
-		background-color: hsl(var(--color-surface-hover));
-	}
-
-	@media (min-width: 768px) {
-		.navbar__mobile-toggle {
-			display: none;
-		}
-	}
-
-	/* Mobile Menu */
-	.navbar__mobile-menu {
-		border-top: 1px solid hsl(var(--color-border));
-	}
-
-	@media (min-width: 768px) {
-		.navbar__mobile-menu {
-			display: none;
-		}
-	}
-
-	.navbar__mobile-nav {
-		display: flex;
-		justify-content: space-around;
-		padding: 0.5rem;
-	}
-
-	.navbar__mobile-footer {
-		padding: 0.5rem 1rem 1rem;
-		border-top: 1px solid hsl(var(--color-border));
-	}
-
-	.navbar__mobile-signout {
-		width: 100%;
-		padding: 0.75rem;
-		font-size: 0.875rem;
-		font-weight: 500;
-		color: hsl(var(--color-error));
-		background: transparent;
-		border: 1px solid hsl(var(--color-error) / 0.3);
-		border-radius: 0.375rem;
-		cursor: pointer;
-		transition: background-color 0.15s ease;
-	}
-
-	.navbar__mobile-signout:hover {
-		background-color: hsl(var(--color-error) / 0.1);
+	.actions {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-shrink: 0;
 	}
 </style>
diff --git a/packages/shared-ui/src/navigation/Pill.stories.svelte b/packages/shared-ui/src/navigation/Pill.stories.svelte
new file mode 100644
index 000000000..ec6832f47
--- /dev/null
+++ b/packages/shared-ui/src/navigation/Pill.stories.svelte
@@ -0,0 +1,61 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Pill from './Pill.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Navigation/Pill',
+		component: Pill,
+		tags: ['autodocs'],
+	});
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<Pill>Mein Tag</Pill>
+	{/snippet}
+</Story>
+
+<Story name="Active">
+	{#snippet children()}
+		<Pill active>Aktiver Tab</Pill>
+	{/snippet}
+</Story>
+
+<Story name="Primary">
+	{#snippet children()}
+		<Pill primary>Anmelden</Pill>
+	{/snippet}
+</Story>
+
+<Story name="Danger">
+	{#snippet children()}
+		<Pill danger>Logout</Pill>
+	{/snippet}
+</Story>
+
+<Story name="AsLink">
+	{#snippet children()}
+		<Pill href="#" title="Als Link">Profil</Pill>
+	{/snippet}
+</Story>
+
+<Story name="VariantSweep">
+	{#snippet children()}
+		<div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
+			<Pill>Default</Pill>
+			<Pill active>Active</Pill>
+			<Pill primary>Primary</Pill>
+			<Pill danger>Danger</Pill>
+			<Pill disabled>Disabled</Pill>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="SizeSweep">
+	{#snippet children()}
+		<div style="display:flex; gap:0.5rem; align-items:center;">
+			<Pill size="sm">Klein</Pill>
+			<Pill size="md">Mittel</Pill>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/navigation/Pill.svelte b/packages/shared-ui/src/navigation/Pill.svelte
index 9d924c083..6ec867504 100644
--- a/packages/shared-ui/src/navigation/Pill.svelte
+++ b/packages/shared-ui/src/navigation/Pill.svelte
@@ -1,210 +1,184 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { phosphorIcons } from './phosphor-icon-map';
+
+	type Size = 'sm' | 'md';
 
 	interface Props {
-		/** Phosphor icon name (see phosphor-icon-map.ts). */
-		icon?: string;
-		/** URL to navigate to. If set, renders an <a>; otherwise a <button>. */
+		size?: Size;
 		href?: string;
-		/** Display label. Use `iconOnly` to hide. */
-		label?: string;
-		/** Hide label (label is still used for aria-label/title). */
-		iconOnly?: boolean;
-		/** Height preset. 'sm' = 36px (PillNav), 'md' = 44px (bar pills). */
-		size?: 'sm' | 'md';
-		/** Active/selected state */
-		active?: boolean;
-		/** Primary accent (e.g. "Erstellen") */
-		primary?: boolean;
-		/** Destructive style (e.g. Logout) */
-		danger?: boolean;
-		/** Disabled state (button only) */
-		disabled?: boolean;
-		/** Click handler */
 		onclick?: (e: MouseEvent) => void;
-		/** Right-click handler */
 		oncontextmenu?: (e: MouseEvent) => void;
-		/** Tooltip */
+		/** v0.1.x-Compat PascalCase-Alias für oncontextmenu. */
+		onContextMenu?: (e: MouseEvent) => void;
+		active?: boolean;
+		disabled?: boolean;
+		danger?: boolean;
+		primary?: boolean;
+		iconOnly?: boolean;
+		ariaLabel?: string;
 		title?: string;
-		/** Extra class names (e.g. drag-source marker) */
-		class?: string;
-		/** Bind the rendered <button>/<a> element for programmatic focus/click. */
-		element?: HTMLButtonElement | HTMLAnchorElement | null;
-		/** Arbitrary data-* attributes to forward (e.g. {'data-menu-trigger': ''}). */
-		data?: Record<string, string>;
-		/** Custom content rendered before the label (e.g. colored tag dot). */
+		children?: Snippet;
 		leading?: Snippet;
-		/** Custom content rendered after the label. */
 		trailing?: Snippet;
+		/** v0.1.x-Compat: Label-String als Alternative zum children-Snippet. */
+		label?: string;
+		/** v0.1.x-Compat: Icon-Name oder Component (heute ignoriert; nutze leading-Snippet). */
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		icon?: any;
+		/** v0.1.x-Compat: Custom-Class auf Wrapper. */
+		class?: string;
+		/** v0.1.x-Compat: Bindbares Element-Ref. */
+		element?: HTMLElement | null;
+		/** v0.1.x-Compat: Data-Attribute. */
+		data?: Record<string, string>;
 	}
 
 	let {
-		icon,
-		href,
-		label,
-		iconOnly = false,
 		size = 'md',
-		active = false,
-		primary = false,
-		danger = false,
-		disabled = false,
+		href,
 		onclick,
 		oncontextmenu,
+		onContextMenu,
+		active = false,
+		disabled = false,
+		danger = false,
+		primary = false,
+		iconOnly = false,
+		ariaLabel,
 		title,
-		class: className,
-		element = $bindable(null),
-		data,
+		children,
 		leading,
 		trailing,
+		label,
+		class: className = '',
+		element = $bindable(null),
 	}: Props = $props();
 
-	const IconComp = $derived(icon ? phosphorIcons[icon] : null);
-	const iconPx = $derived(size === 'sm' ? 18 : 20);
-	const ariaLabel = $derived(iconOnly ? label : undefined);
-	const effectiveTitle = $derived(title ?? (iconOnly ? label : undefined));
+	const tag = $derived(href ? 'a' : 'button');
 </script>
 
-{#snippet body()}
-	{#if leading}{@render leading()}{/if}
-	{#if IconComp}
-		<IconComp size={iconPx} weight="bold" class="pill-icon" />
+<svelte:element
+	this={tag}
+	bind:this={element}
+	class="pill size-{size} {className}"
+	class:active
+	class:disabled
+	class:danger
+	class:primary
+	class:icon-only={iconOnly}
+	{href}
+	type={tag === 'button' ? 'button' : undefined}
+	disabled={tag === 'button' ? disabled : undefined}
+	aria-disabled={tag === 'a' && disabled ? 'true' : undefined}
+	aria-pressed={onclick && active ? 'true' : undefined}
+	aria-label={ariaLabel}
+	{title}
+	{onclick}
+	oncontextmenu={oncontextmenu ?? onContextMenu}
+>
+	{#if leading}<span class="affix">{@render leading()}</span>{/if}
+	{#if !iconOnly}
+		{#if children}<span class="label">{@render children()}</span>
+		{:else if label}<span class="label">{label}</span>{/if}
 	{/if}
-	{#if label && !iconOnly}
-		<span class="pill-label">{label}</span>
-	{/if}
-	{#if trailing}{@render trailing()}{/if}
-{/snippet}
-
-{#if href}
-	<a
-		bind:this={element as HTMLAnchorElement}
-		{href}
-		class={[
-			'pill',
-			`pill-${size}`,
-			iconOnly && 'icon-only',
-			active && 'active',
-			primary && 'primary',
-			danger && 'danger',
-			className,
-		]
-			.filter(Boolean)
-			.join(' ')}
-		aria-label={ariaLabel}
-		title={effectiveTitle}
-		{onclick}
-		{oncontextmenu}
-		{...data}
-	>
-		{@render body()}
-	</a>
-{:else}
-	<button
-		bind:this={element as HTMLButtonElement}
-		type="button"
-		class={[
-			'pill',
-			`pill-${size}`,
-			iconOnly && 'icon-only',
-			active && 'active',
-			primary && 'primary',
-			danger && 'danger',
-			className,
-		]
-			.filter(Boolean)
-			.join(' ')}
-		aria-label={ariaLabel}
-		title={effectiveTitle}
-		{disabled}
-		{onclick}
-		{oncontextmenu}
-		{...data}
-	>
-		{@render body()}
-	</button>
-{/if}
+	{#if trailing}<span class="affix">{@render trailing()}</span>{/if}
+</svelte:element>
 
 <style>
 	.pill {
 		display: inline-flex;
 		align-items: center;
 		gap: 0.375rem;
-		padding: 0 0.875rem;
 		border-radius: 9999px;
-		font-size: 0.875rem;
+		border: 1px solid hsl(var(--color-border));
+		background: hsl(var(--color-surface));
+		color: hsl(var(--color-foreground));
+		font-family: inherit;
 		font-weight: 500;
-		white-space: nowrap;
 		text-decoration: none;
 		cursor: pointer;
-		flex-shrink: 0;
-		transition: all 0.15s ease;
-		border: 1px solid hsl(var(--color-border));
-		background: hsl(var(--color-card));
-		color: hsl(var(--color-foreground));
-		box-shadow:
-			0 1px 2px hsl(0 0% 0% / 0.05),
-			0 2px 6px hsl(0 0% 0% / 0.04);
+		transition:
+			background-color 0.15s ease,
+			border-color 0.15s ease,
+			color 0.15s ease;
 	}
 
-	.pill-md {
-		height: 44px;
-	}
-
-	.pill-sm {
-		height: 36px;
-	}
-
-	/* Icon-only pill: wider than tall so it reads as a pill, not a chip. */
-	.pill.icon-only {
-		gap: 0;
-		padding: 0 1.125rem;
-	}
-
-	.pill:hover:not(:disabled) {
-		background: hsl(var(--color-surface-hover, var(--color-card)));
-		border-color: hsl(var(--color-border-strong, var(--color-border)));
-	}
-
-	.pill:disabled {
+	.pill:disabled,
+	.pill.disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
 
+	.pill:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
+	}
+
+	.pill:not(:disabled):not(.disabled):hover {
+		background: hsl(var(--color-surface-hover));
+	}
+
+	/* sizes */
+	.size-sm {
+		padding: 0.25rem 0.625rem;
+		font-size: 0.8125rem;
+	}
+	.size-md {
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+	}
+
+	.size-sm.icon-only {
+		padding: 0.25rem;
+	}
+	.size-md.icon-only {
+		padding: 0.375rem;
+	}
+
+	/* active */
 	.pill.active {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #f8d62b)) 20%,
-			white 80%
-		);
-		border-color: var(--pill-primary-color, var(--color-primary-500, rgba(248, 214, 43, 0.5)));
-		color: #1a1a1a;
-	}
-
-	:global(.dark) .pill.active {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #f8d62b)) 30%,
-			transparent 70%
-		);
-		color: var(--pill-primary-color, var(--color-primary-500, #f8d62b));
+		background: hsl(var(--color-primary) / 0.15);
+		border-color: hsl(var(--color-primary) / 0.4);
+		color: hsl(var(--color-primary));
+	}
+	.pill.active:not(:disabled):hover {
+		background: hsl(var(--color-primary) / 0.2);
 	}
 
+	/* primary — vibrant CTA pill */
 	.pill.primary {
-		background: var(--pill-primary-color, var(--color-primary-500, #6366f1));
-		border-color: transparent;
-		color: white;
+		background: hsl(var(--color-primary));
+		border-color: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
+	}
+	.pill.primary:not(:disabled):hover {
+		background: hsl(var(--color-primary) / 0.9);
 	}
 
+	/* danger */
 	.pill.danger {
-		color: #dc2626;
+		color: hsl(var(--color-error));
+		border-color: hsl(var(--color-error) / 0.3);
+	}
+	.pill.danger:not(:disabled):hover {
+		background: hsl(var(--color-error) / 0.1);
+		border-color: hsl(var(--color-error) / 0.5);
 	}
 
-	:global(.dark) .pill.danger {
-		color: #ef4444;
+	.affix {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
 	}
 
-	.pill :global(.pill-label) {
-		font-weight: 500;
+	.label {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.pill {
+			transition: none;
+		}
 	}
 </style>
diff --git a/packages/shared-ui/src/navigation/PillDropdown.svelte b/packages/shared-ui/src/navigation/PillDropdown.svelte
index ae03656ce..33d8f98f8 100644
--- a/packages/shared-ui/src/navigation/PillDropdown.svelte
+++ b/packages/shared-ui/src/navigation/PillDropdown.svelte
@@ -1,28 +1,52 @@
+<script lang="ts" module>
+	export interface PillDropdownItem {
+		id: string;
+		label: string;
+		/** Inline SVG path string (16×16 viewBox). Optional. */
+		iconSvg?: string;
+		/** Optional image URL (used for app/avatar icons). */
+		imageUrl?: string;
+		onClick?: (event?: MouseEvent) => void;
+		disabled?: boolean;
+		danger?: boolean;
+		primary?: boolean;
+		active?: boolean;
+		divider?: boolean;
+		submenu?: PillDropdownItem[];
+		showSplitButton?: boolean;
+		onSplitClick?: () => void;
+		/** Group ID — items sharing the same group render as a segmented toggle pill in PillDropdownBar. */
+		group?: string;
+		/** Progress value 0–1. When set, PillDropdownBar renders a progress ring instead of the icon. */
+		progress?: number;
+		/** v0.1.x-Compat: Phosphor-Icon-Name-String oder Component. Wird heute ignoriert; nutze iconSvg. */
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		icon?: any;
+	}
+</script>
+
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { PillDropdownItem } from './types';
-	import { Columns } from '@mana/shared-icons';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
 
 	interface Props {
 		items: PillDropdownItem[];
-		direction?: 'up' | 'down';
 		label: string;
-		icon?: 'globe' | 'language' | 'chevronDown' | 'check' | string;
+		/** Inline SVG path for the trigger icon. */
+		iconSvg?: string;
+		direction?: 'up' | 'down';
 		isOpen?: boolean;
 		onToggle?: (open: boolean) => void;
-		/** Optional header content (e.g., mode selector) */
 		header?: Snippet;
-		/** Optional footer content (e.g., a11y toggles) */
 		footer?: Snippet;
-		/** Show only the icon without label */
 		iconOnly?: boolean;
 	}
 
 	let {
 		items,
-		direction = 'down',
 		label,
-		icon,
+		iconSvg,
+		direction = 'down',
 		isOpen = false,
 		onToggle,
 		header,
@@ -31,7 +55,7 @@
 	}: Props = $props();
 
 	let internalOpen = $state(false);
-	let triggerButton: HTMLButtonElement;
+	let triggerButton: HTMLButtonElement | undefined = $state();
 	let dropdownPosition = $state({ top: 0, left: 0 });
 	let openSubmenuId = $state<string | null>(null);
 
@@ -40,33 +64,19 @@
 	function toggle() {
 		if (triggerButton) {
 			const rect = triggerButton.getBoundingClientRect();
-			if (direction === 'down') {
-				dropdownPosition = {
-					top: rect.bottom + 8,
-					left: rect.left,
-				};
-			} else {
-				dropdownPosition = {
-					top: rect.top - 8,
-					left: rect.left,
-				};
-			}
-		}
-
-		if (onToggle) {
-			onToggle(!isOpen);
-		} else {
-			internalOpen = !internalOpen;
+			dropdownPosition =
+				direction === 'down'
+					? { top: rect.bottom + 8, left: rect.left }
+					: { top: rect.top - 8, left: rect.left };
 		}
+		if (onToggle) onToggle(!isOpen);
+		else internalOpen = !internalOpen;
 	}
 
 	function close() {
 		openSubmenuId = null;
-		if (onToggle) {
-			onToggle(false);
-		} else {
-			internalOpen = false;
-		}
+		if (onToggle) onToggle(false);
+		else internalOpen = false;
 	}
 
 	function toggleSubmenu(itemId: string) {
@@ -78,126 +88,61 @@
 			toggleSubmenu(item.id);
 			return;
 		}
-		if (item.onClick) {
-			item.onClick(event);
-		}
+		if (item.onClick) item.onClick(event);
 		close();
 	}
 
 	function handleSplitClick(item: PillDropdownItem, event: MouseEvent) {
 		event.stopPropagation();
-		if (item.onSplitClick) {
-			item.onSplitClick();
-		}
+		if (item.onSplitClick) item.onSplitClick();
 		close();
 	}
 
 	function handleSubmenuItemClick(item: PillDropdownItem) {
-		if (item.onClick) {
-			item.onClick();
-		}
+		if (item.onClick) item.onClick();
 		close();
 	}
-
-	const iconPaths: Record<string, string> = {
-		language:
-			'M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129',
-		check: 'M5 13l4 4L19 7',
-		chevronDown: 'M19 9l-7 7-7-7',
-		chevronRight: 'M9 5l7 7-7 7',
-		globe:
-			'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9',
-		palette:
-			'M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01',
-		// Theme icons (Phosphor-style)
-		sparkle:
-			'M12 2L13.09 8.26L18 6L15.74 10.91L22 12L15.74 13.09L18 18L13.09 15.74L12 22L10.91 15.74L6 18L8.26 13.09L2 12L8.26 10.91L6 6L10.91 8.26L12 2Z',
-		leaf: 'M6.5 21.5C3.5 18.5 3.5 12.5 6.5 8.5C9.5 4.5 15 3 20 3C20 8 18.5 13.5 14.5 16.5C10.5 19.5 4.5 19.5 4.5 19.5M6.5 21.5L4.5 19.5M6.5 21.5C6.5 21.5 12 18 14.5 16.5',
-		hexagon: 'M12 2L21.5 7.5V16.5L12 22L2.5 16.5V7.5L12 2Z',
-		waves:
-			'M2 12C2 12 5 8 9 8C13 8 15 12 15 12C15 12 17 16 21 16M2 17C2 17 5 13 9 13C13 13 15 17 15 17C15 17 17 21 21 21M2 7C2 7 5 3 9 3C13 3 15 7 15 7C15 7 17 11 21 11',
-		// User menu icons
-		user: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
-		settings:
-			'M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93s.844.083 1.16-.175l.713-.57a1.125 1.125 0 011.578.112l.773.773a1.125 1.125 0 01.112 1.578l-.57.713c-.258.316-.29.756-.175 1.16s.506.71.93.78l.894.15c.542.09.94.56.94 1.109v1.094c0 .55-.398 1.02-.94 1.11l-.894.149c-.424.07-.764.384-.93.78s-.083.844.175 1.16l.57.713a1.125 1.125 0 01-.112 1.578l-.773.773a1.125 1.125 0 01-1.578.112l-.713-.57c-.316-.258-.756-.29-1.16-.175s-.71.506-.78.93l-.15.894c-.09.542-.56.94-1.109.94h-1.094c-.55 0-1.02-.398-1.11-.94l-.149-.894c-.07-.424-.384-.764-.78-.93s-.844-.083-1.16.175l-.713.57a1.125 1.125 0 01-1.578-.112l-.773-.773a1.125 1.125 0 01-.112-1.578l.57-.713c.258-.316.29-.756.175-1.16s-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.764-.384.93-.78s.083-.844-.175-1.16l-.57-.713a1.125 1.125 0 01.112-1.578l.773-.773a1.125 1.125 0 011.578-.112l.713.57c.316.258.756.29 1.16.175s.71-.506.78-.93l.15-.894zM15 12a3 3 0 11-6 0 3 3 0 016 0z',
-		logout:
-			'M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1',
-		// App icons
-		grid: 'M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z',
-		// Help icon (question mark circle)
-		help: 'M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm2-1.645A3.502 3.502 0 0012 6.5 3.501 3.501 0 008.645 9h2.012A1.5 1.5 0 0112 8.5c.828 0 1.5.672 1.5 1.5 0 .828-.672 1.5-1.5 1.5a1 1 0 00-1 1V14h2v-.645z',
-		// Mana icon (water drop)
-		mana: 'M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z',
-		// Compute / AI tier icons
-		cpu: 'M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z',
-		server:
-			'M5 12V7a2 2 0 012-2h10a2 2 0 012 2v5M5 12h14M5 12v5a2 2 0 002 2h10a2 2 0 002-2v-5M9 8h.01M9 16h.01',
-		cloud:
-			'M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z',
-		power: 'M12 3v9m6.364-6.364a9 9 0 11-12.728 0',
-		download: 'M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3',
-		creditCard: 'M3 10h18M5 6h14a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2zM7 15h2',
-		spiral: 'M12 4a8 8 0 108 8 6 6 0 00-6-6 4 4 0 00-4 4 2 2 0 002 2 1 1 0 001-1',
-	};
-
-	function getIcon(iconName: string) {
-		return iconPaths[iconName] || iconName;
-	}
 </script>
 
 <div class="pill-dropdown">
-	<!-- Trigger Button -->
 	<button
 		bind:this={triggerButton}
+		type="button"
 		onclick={toggle}
-		class="pill glass-pill trigger-button"
+		class="pill trigger"
 		class:icon-only={iconOnly}
+		aria-expanded={open}
+		aria-haspopup="menu"
 	>
-		{#if icon}
-			<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={getIcon(icon)} />
-			</svg>
+		{#if iconSvg}
+			<span class="pill-icon"><DynamicIcon {iconSvg} size="md" /></span>
 		{/if}
 		{#if !iconOnly}
 			<span class="pill-label">{label}</span>
 		{/if}
-		<svg
-			class="chevron-icon"
-			class:rotated={open}
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d={getIcon('chevronDown')}
-			/>
-		</svg>
+		<span class="chevron" class:rotated={open}>
+			<DynamicIcon name="caret-down" size="xs" />
+		</span>
 	</button>
 
 	{#if open}
-		<!-- Backdrop -->
 		<button
 			class="menu-backdrop"
+			type="button"
 			onclick={close}
 			onkeydown={(e) => e.key === 'Escape' && close()}
-			aria-label="Close dropdown"
+			aria-label="Menü schließen"
 		></button>
 
-		<!-- Dropdown items -->
 		<div
 			class="fan-container"
 			class:fan-up={direction === 'up'}
 			class:fan-down={direction === 'down'}
 			style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px;"
+			role="menu"
 		>
-			<!-- Optional header (e.g., mode selector) -->
 			{#if header}
-				<div class="dropdown-header">
-					{@render header()}
-				</div>
+				<div class="dropdown-header">{@render header()}</div>
 			{/if}
 
 			{#each items.filter((i) => !i.disabled) as item, i (item.id)}
@@ -213,87 +158,61 @@
 						style="animation-delay: {(header ? i + 1 : i) * 15}ms"
 					>
 						<button
+							type="button"
 							onclick={(e) => handleItemClick(item, e)}
-							class="pill glass-pill fan-pill"
+							class="pill fan-pill"
 							class:danger-pill={item.danger}
 							class:primary-pill={item.primary}
 							class:active-pill={item.active}
 							class:has-submenu={item.submenu && item.submenu.length > 0}
 							class:submenu-open={openSubmenuId === item.id}
+							role="menuitem"
 						>
 							{#if item.imageUrl}
 								<img src={item.imageUrl} alt="" class="pill-image-icon" />
-							{:else if item.icon === 'mana'}
-								<svg class="pill-icon" viewBox="0 0 24 24" fill="currentColor">
-									<path d={getIcon('mana')} />
-								</svg>
-							{:else if item.icon}
-								<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d={getIcon(item.icon)}
-									/>
-								</svg>
+							{:else if item.iconSvg}
+								<span class="pill-icon"><DynamicIcon iconSvg={item.iconSvg} size="md" /></span>
 							{/if}
 							<span class="pill-label">{item.label}</span>
 							{#if item.active}
-								<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d={getIcon('check')}
-									/>
-								</svg>
+								<span class="check-icon">
+									<DynamicIcon name="check" size="sm" />
+								</span>
 							{:else if item.submenu && item.submenu.length > 0}
-								<svg
-									class="chevron-submenu"
-									class:rotated={openSubmenuId === item.id}
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d={getIcon('chevronDown')}
-									/>
-								</svg>
+								<span class="chevron-submenu" class:rotated={openSubmenuId === item.id}>
+									<DynamicIcon name="caret-down" size="xs" />
+								</span>
 							{/if}
 						</button>
 						{#if item.showSplitButton && item.onSplitClick}
 							<button
+								type="button"
 								onclick={(e) => handleSplitClick(item, e)}
-								class="split-button glass-pill"
+								class="split-button"
+								aria-label="In Split-Panel öffnen"
 								title="Open in split panel (Ctrl/Cmd+Click)"
 							>
-								<Columns size={20} class="split-icon" />
+								<DynamicIcon name="external" size="sm" />
 							</button>
 						{/if}
 					</div>
-					<!-- Submenu items -->
+
 					{#if item.submenu && item.submenu.length > 0 && openSubmenuId === item.id}
-						<div class="submenu-container">
+						<div class="submenu-container" role="menu">
 							{#each item.submenu.filter((si) => !si.disabled) as subitem, si (subitem.id)}
 								<button
+									type="button"
 									onclick={() => handleSubmenuItemClick(subitem)}
-									class="pill glass-pill fan-pill submenu-item"
+									class="pill fan-pill submenu-item"
 									class:active-pill={subitem.active}
 									style="animation-delay: {si * 15}ms"
+									role="menuitem"
 								>
 									<span class="pill-label">{subitem.label}</span>
 									{#if subitem.active}
-										<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d={getIcon('check')}
-											/>
-										</svg>
+										<span class="check-icon">
+											<DynamicIcon name="check" size="sm" />
+										</span>
 									{/if}
 								</button>
 							{/each}
@@ -302,11 +221,8 @@
 				{/if}
 			{/each}
 
-			<!-- Optional footer (e.g., a11y toggles) -->
 			{#if footer}
-				<div class="dropdown-footer">
-					{@render footer()}
-				</div>
+				<div class="dropdown-footer">{@render footer()}</div>
 			{/if}
 		</div>
 	{/if}
@@ -322,23 +238,26 @@
 		z-index: 10000;
 	}
 
-	.trigger-button {
+	.trigger {
 		position: relative;
 		z-index: 10;
 	}
 
-	.trigger-button.icon-only {
+	.trigger.icon-only {
 		padding: 0.5rem 0.625rem;
 	}
 
-	.chevron-icon {
+	.chevron {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
 		width: 0.75rem;
 		height: 0.75rem;
-		transition: transform 0.2s;
 		margin-left: 0.25rem;
+		transition: transform 200ms;
 	}
 
-	.chevron-icon.rotated {
+	.chevron.rotated {
 		transform: rotate(180deg);
 	}
 
@@ -360,7 +279,7 @@
 	}
 
 	.fan-pill {
-		animation: fanIn 0.15s ease-out forwards;
+		animation: fanIn 150ms ease-out forwards;
 		opacity: 0;
 		transform: translateY(10px);
 	}
@@ -386,73 +305,64 @@
 		font-weight: 500;
 		white-space: nowrap;
 		text-decoration: none;
-		transition: all 0.2s;
-		border: none;
-		cursor: pointer;
-	}
-
-	/* Solid theme-tokened pill (formerly the "glass" frosted pill).
-	   Class name kept for backwards compatibility. */
-	.glass-pill,
-	:global(.fan-container .glass-pill) {
-		background: hsl(var(--color-card));
+		transition:
+			background-color 200ms,
+			border-color 200ms,
+			color 200ms,
+			transform 200ms;
+		background: hsl(var(--color-surface));
 		border: 1px solid hsl(var(--color-border));
-		box-shadow:
-			0 1px 2px hsl(0 0% 0% / 0.05),
-			0 2px 6px hsl(0 0% 0% / 0.04);
 		color: hsl(var(--color-foreground));
+		cursor: pointer;
+		font-family: inherit;
 	}
 
-	.glass-pill:hover {
+	.pill:hover {
 		background: hsl(var(--color-surface-hover));
-		border-color: hsl(var(--color-border-strong, var(--color-border)));
 		transform: translateY(-2px);
-		box-shadow:
-			0 6px 12px hsl(0 0% 0% / 0.08),
-			0 2px 4px hsl(0 0% 0% / 0.05);
+	}
+
+	.pill:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
 	}
 
 	.active-pill {
-		background: var(--color-primary-100, rgba(248, 214, 43, 0.2));
-		border-color: var(--color-primary-200, rgba(248, 214, 43, 0.3));
+		background: hsl(var(--color-primary) / 0.12);
+		border-color: hsl(var(--color-primary) / 0.4);
+		color: hsl(var(--color-primary));
 	}
 
-	:global(.dark) .active-pill {
-		background: var(--color-primary-900, rgba(248, 214, 43, 0.15));
-		border-color: var(--color-primary-800, rgba(248, 214, 43, 0.25));
+	.active-pill:hover {
+		background: hsl(var(--color-primary) / 0.18);
 	}
 
 	.danger-pill {
-		color: #dc2626;
-	}
-
-	:global(.dark) .danger-pill {
-		color: #ef4444;
+		color: hsl(var(--color-error));
 	}
 
 	.danger-pill:hover {
-		background: rgba(220, 38, 38, 0.15);
-		border-color: rgba(220, 38, 38, 0.3);
+		background: hsl(var(--color-error) / 0.12);
+		border-color: hsl(var(--color-error) / 0.4);
 	}
 
-	/* Primary CTA pill — used for the guest "Anmelden" entry */
 	.primary-pill {
 		background: hsl(var(--color-primary));
 		border-color: hsl(var(--color-primary));
-		color: hsl(var(--color-primary-foreground, 0 0% 100%));
+		color: hsl(var(--color-primary-foreground));
 		font-weight: 600;
 	}
 
 	.primary-pill:hover {
 		background: hsl(var(--color-primary) / 0.92);
 		border-color: hsl(var(--color-primary) / 0.92);
-		color: hsl(var(--color-primary-foreground, 0 0% 100%));
-		box-shadow:
-			0 6px 14px hsl(var(--color-primary) / 0.3),
-			0 2px 4px hsl(0 0% 0% / 0.06);
+		color: hsl(var(--color-primary-foreground));
 	}
 
 	.pill-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
 		width: 1rem;
 		height: 1rem;
 		flex-shrink: 0;
@@ -467,10 +377,11 @@
 	}
 
 	.check-icon {
-		width: 0.875rem;
-		height: 0.875rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
 		margin-left: 0.25rem;
-		color: var(--color-primary-500, #f8d62b);
+		color: hsl(var(--color-primary));
 	}
 
 	.pill-label {
@@ -484,11 +395,11 @@
 		background: transparent;
 		border: none;
 		cursor: default;
+		padding: 0;
 	}
 
-	/* Header for custom content (e.g., mode selector) */
 	.dropdown-header {
-		animation: fanIn 0.15s ease-out forwards;
+		animation: fanIn 150ms ease-out forwards;
 		opacity: 0;
 		transform: translateY(10px);
 		position: relative;
@@ -499,25 +410,22 @@
 		transform: translateY(-10px);
 	}
 
-	/* Divider in dropdown */
 	.dropdown-divider {
 		height: 1px;
-		background: rgba(0, 0, 0, 0.1);
+		background: hsl(var(--color-border));
 		margin: 0.25rem 0.5rem;
-		animation: fanIn 0.15s ease-out forwards;
+		animation: fanIn 150ms ease-out forwards;
 		opacity: 0;
 	}
 
-	:global(.dark) .dropdown-divider {
-		background: rgba(255, 255, 255, 0.15);
-	}
-
-	/* Submenu styles */
 	.chevron-submenu {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
 		width: 0.75rem;
 		height: 0.75rem;
 		margin-left: auto;
-		transition: transform 0.2s;
+		transition: transform 200ms;
 	}
 
 	.chevron-submenu.rotated {
@@ -529,25 +437,19 @@
 	}
 
 	.submenu-open {
-		background: rgba(0, 0, 0, 0.05);
-	}
-
-	:global(.dark) .submenu-open {
-		background: rgba(255, 255, 255, 0.1);
+		background: hsl(var(--color-surface-hover));
 	}
 
 	.submenu-container {
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
-		margin-top: 0;
-		margin-bottom: 0;
 	}
 
 	.submenu-item {
 		padding: 0.5rem 0.875rem;
 		font-size: 0.875rem;
-		animation: fanIn 0.15s ease-out forwards;
+		animation: fanIn 150ms ease-out forwards;
 		opacity: 0;
 		justify-content: flex-start;
 	}
@@ -557,12 +459,11 @@
 		text-align: left;
 	}
 
-	/* Split button wrapper */
 	.fan-pill-wrapper {
 		display: flex;
 		align-items: stretch;
 		gap: 2px;
-		animation: fanIn 0.15s ease-out forwards;
+		animation: fanIn 150ms ease-out forwards;
 		opacity: 0;
 		transform: translateY(10px);
 	}
@@ -592,35 +493,34 @@
 		border-bottom-left-radius: 0;
 		border-top-right-radius: 9999px;
 		border-bottom-right-radius: 9999px;
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		color: hsl(var(--color-foreground));
 		cursor: pointer;
-		border: none;
-		transition: all 0.2s;
+		transition:
+			background-color 200ms,
+			color 200ms;
 	}
 
 	.split-button:hover {
-		background: var(--color-primary-100, rgba(59, 130, 246, 0.15));
-		border-color: var(--color-primary-200, rgba(59, 130, 246, 0.3));
+		background: hsl(var(--color-primary) / 0.12);
+		color: hsl(var(--color-primary));
 	}
 
-	:global(.dark) .split-button:hover {
-		background: var(--color-primary-900, rgba(59, 130, 246, 0.2));
-		border-color: var(--color-primary-800, rgba(59, 130, 246, 0.4));
+	.split-button:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
 	}
 
-	/* Footer for custom content (e.g., a11y toggles) */
 	.dropdown-footer {
-		animation: fanIn 0.15s ease-out forwards;
+		animation: fanIn 150ms ease-out forwards;
 		opacity: 0;
 		transform: translateY(10px);
 		position: relative;
 		z-index: 1;
 		margin-top: 0.25rem;
 		padding-top: 0.5rem;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
-	}
-
-	:global(.dark) .dropdown-footer {
-		border-top-color: rgba(255, 255, 255, 0.15);
+		border-top: 1px solid hsl(var(--color-border));
 	}
 
 	.fan-up .dropdown-footer {
@@ -630,14 +530,9 @@
 		padding-top: 0;
 		padding-bottom: 0.5rem;
 		border-top: none;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+		border-bottom: 1px solid hsl(var(--color-border));
 	}
 
-	:global(.dark) .fan-up .dropdown-footer {
-		border-bottom-color: rgba(255, 255, 255, 0.15);
-	}
-
-	/* Mobile: bottom sheet */
 	@media (max-width: 640px) {
 		.fan-container {
 			position: fixed;
@@ -650,19 +545,11 @@
 			overflow-y: auto;
 			padding: 1rem;
 			padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
-			background: rgba(255, 255, 255, 0.95);
-			backdrop-filter: blur(20px);
-			-webkit-backdrop-filter: blur(20px);
-			border-top: 1px solid rgba(0, 0, 0, 0.1);
+			background: hsl(var(--color-background));
+			border-top: 1px solid hsl(var(--color-border));
 			border-radius: 1rem 1rem 0 0;
-			box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.15);
 			transform: none;
-			animation: pillSheetUp 0.2s ease-out;
-		}
-
-		:global(.dark) .fan-container {
-			background: rgba(30, 30, 35, 0.95);
-			border-top-color: rgba(255, 255, 255, 0.12);
+			animation: pillSheetUp 200ms ease-out;
 		}
 
 		.fan-up {
@@ -677,7 +564,7 @@
 		}
 
 		.menu-backdrop {
-			background: rgba(0, 0, 0, 0.3);
+			background: hsl(var(--color-foreground) / 0.3);
 		}
 	}
 
diff --git a/packages/shared-ui/src/navigation/PillDropdownBar.svelte b/packages/shared-ui/src/navigation/PillDropdownBar.svelte
index cce484ccd..30ef9657c 100644
--- a/packages/shared-ui/src/navigation/PillDropdownBar.svelte
+++ b/packages/shared-ui/src/navigation/PillDropdownBar.svelte
@@ -1,24 +1,21 @@
 <script lang="ts">
-	import type { PillDropdownItem } from './types';
-	import { phosphorIcons } from './phosphor-icon-map';
+	import type { PillDropdownItem } from './PillDropdown.svelte';
 	import Pill from './Pill.svelte';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
 
 	interface Props {
-		/** Items to render as pills in the bar */
 		items: PillDropdownItem[];
-		/** Label shown at the start of the bar (title of the opened dropdown) */
 		label?: string;
-		/** Icon rendered next to the label */
-		icon?: string;
-		/** Use 'static' when inside a flex container (bottom-stack pattern). */
+		/** Inline SVG path string for the leading label-pill icon. */
+		iconSvg?: string;
+		/** v0.1.x-Compat: Icon-Namen-String. Wird heute ignoriert; nutze iconSvg. */
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		icon?: any;
 		positioning?: 'fixed' | 'static';
 	}
 
-	let { items, label, icon, positioning = 'static' }: Props = $props();
+	let { items, label, iconSvg, positioning = 'static' }: Props = $props();
 
-	// A render element is either a single item, a divider/section-label, or a
-	// group of items that share the same `group` id (rendered as a segmented
-	// toggle pill).
 	type RenderElement =
 		| { kind: 'item'; id: string; item: PillDropdownItem }
 		| { kind: 'divider'; id: string }
@@ -27,10 +24,8 @@
 
 	const renderElements = $derived.by<RenderElement[]>(() => {
 		const out: RenderElement[] = [];
-		// Track groups already emitted so we only render each once.
 		const emittedGroups = new Set<string>();
 
-		// First flatten submenus, then collect groups.
 		const flat: PillDropdownItem[] = [];
 		for (const item of items) {
 			if (item.submenu && item.submenu.length > 0) {
@@ -71,7 +66,14 @@
 <div class="dropdown-bar-wrapper" class:static={positioning === 'static'}>
 	<div class="dropdown-bar-container">
 		{#if label}
-			<Pill {icon} {label} disabled class="bar-label" />
+			<Pill disabled title={label}>
+				{#snippet leading()}
+					{#if iconSvg}
+						<DynamicIcon {iconSvg} size="md" />
+					{/if}
+				{/snippet}
+				{label}
+			</Pill>
 		{/if}
 
 		{#each renderElements as el (el.id)}
@@ -80,11 +82,8 @@
 			{:else if el.kind === 'section-label'}
 				<div class="bar-section-label">{el.label}</div>
 			{:else if el.kind === 'group'}
-				<!-- Segmented toggle pill. If any label in the group is longer
-					 than 10 chars the group shows icon+label; otherwise icon-only
-					 (e.g. the Light/Dark/System triple). -->
 				{@const showLabels = el.items.some((i) => (i.label?.length ?? 0) > 10)}
-				<div class="segmented-toggle glass-pill" class:with-labels={showLabels}>
+				<div class="segmented-toggle" class:with-labels={showLabels}>
 					{#each el.items as gi (gi.id)}
 						<button
 							type="button"
@@ -107,9 +106,8 @@
 										stroke-dashoffset={8 * 2 * Math.PI * (1 - gi.progress)}
 									/>
 								</svg>
-							{:else if gi.icon && phosphorIcons[gi.icon]}
-								{@const GIcon = phosphorIcons[gi.icon]}
-								<GIcon size={20} weight="bold" class="segmented-icon" />
+							{:else if gi.iconSvg}
+								<span class="segmented-icon"><DynamicIcon iconSvg={gi.iconSvg} size="md" /></span>
 							{/if}
 							{#if showLabels}
 								<span class="segmented-label">{gi.label}</span>
@@ -120,8 +118,6 @@
 			{:else}
 				{@const item = el.item}
 				<Pill
-					icon={item.imageUrl ? undefined : item.icon}
-					label={item.label}
 					active={item.active}
 					primary={item.primary}
 					danger={item.danger}
@@ -132,8 +128,11 @@
 					{#snippet leading()}
 						{#if item.imageUrl}
 							<img src={item.imageUrl} alt="" class="bar-img" />
+						{:else if item.iconSvg}
+							<DynamicIcon iconSvg={item.iconSvg} size="md" />
 						{/if}
 					{/snippet}
+					{item.label}
 				</Pill>
 			{/if}
 		{/each}
@@ -147,7 +146,6 @@
 		align-items: stretch;
 		justify-content: center;
 		pointer-events: none;
-		/* Matches tags/tabbar/quickinput slot (see bottomChromeHeight in (app)/+layout.svelte). */
 		height: 64px;
 	}
 
@@ -188,14 +186,6 @@
 		display: none;
 	}
 
-	/* .bar-label override: muted background, non-interactive */
-	:global(.bar-label) {
-		opacity: 1 !important;
-		cursor: default !important;
-		background: hsl(var(--color-muted, var(--color-card))) !important;
-		font-weight: 600 !important;
-	}
-
 	.bar-divider {
 		width: 1px;
 		height: 1.5rem;
@@ -224,7 +214,6 @@
 		object-fit: cover;
 	}
 
-	/* Segmented toggle pill (e.g. Light / Dark / System three-way) */
 	.segmented-toggle {
 		display: inline-flex;
 		align-items: center;
@@ -233,10 +222,7 @@
 		height: 44px;
 		border-radius: 9999px;
 		border: 1px solid hsl(var(--color-border));
-		background: hsl(var(--color-card));
-		box-shadow:
-			0 1px 2px hsl(0 0% 0% / 0.05),
-			0 2px 6px hsl(0 0% 0% / 0.04);
+		background: hsl(var(--color-surface));
 		flex-shrink: 0;
 	}
 
@@ -252,27 +238,22 @@
 		border-radius: 9999px;
 		cursor: pointer;
 		color: hsl(var(--color-foreground));
-		transition: all 0.15s;
+		transition: background-color 150ms;
+		font-family: inherit;
 	}
 
 	.segmented-btn:hover:not(.active):not(:disabled) {
-		background: hsl(var(--color-surface-hover, var(--color-muted)));
+		background: hsl(var(--color-surface-hover));
+	}
+
+	.segmented-btn:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
 	}
 
 	.segmented-btn.active {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #6366f1)) 20%,
-			white 80%
-		);
-	}
-
-	:global(.dark) .segmented-btn.active {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #6366f1)) 30%,
-			transparent 70%
-		);
+		background: hsl(var(--color-primary) / 0.2);
+		color: hsl(var(--color-primary));
 	}
 
 	.segmented-btn :global(.segmented-icon) {
@@ -280,10 +261,10 @@
 		height: 1.25rem;
 	}
 
-	/* When the group shows labels, give the buttons more padding */
 	.segmented-toggle.with-labels .segmented-btn {
 		gap: 0.375rem;
 		padding: 0.375rem 0.625rem;
+		width: auto;
 	}
 
 	.segmented-label {
@@ -292,7 +273,6 @@
 		white-space: nowrap;
 	}
 
-	/* Inline progress ring (replaces icon when downloading) */
 	.progress-ring-inline {
 		width: 20px;
 		height: 20px;
@@ -308,10 +288,10 @@
 
 	.progress-fill {
 		fill: none;
-		stroke: var(--pill-primary-color, var(--color-primary-500, #6366f1));
+		stroke: hsl(var(--color-primary));
 		stroke-width: 2.5;
 		stroke-linecap: round;
-		transition: stroke-dashoffset 0.3s ease;
+		transition: stroke-dashoffset 300ms ease;
 	}
 
 	.segmented-btn.has-progress {
diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index 9e7bd2510..132575897 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -927,18 +927,9 @@
 		gap: 0.25rem !important;
 		padding: 0.25rem !important;
 		border-radius: 9999px !important;
-		background: rgba(245, 245, 245, 0.95) !important;
-		border: 1px solid rgba(0, 0, 0, 0.1) !important;
-		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
-		color: #374151 !important;
-	}
-
-	:global(.dark .theme-mode-selector) {
-		background: rgba(40, 40, 40, 0.95) !important;
-		border: 1px solid rgba(255, 255, 255, 0.15) !important;
-		color: #f3f4f6 !important;
+		background: hsl(var(--color-surface)) !important;
+		border: 1px solid hsl(var(--color-border)) !important;
+		color: hsl(var(--color-foreground)) !important;
 	}
 
 	:global(.mode-btn) {
@@ -951,37 +942,20 @@
 		background: transparent;
 		border-radius: 9999px;
 		cursor: pointer;
-		color: #374151;
-		transition: all 0.15s;
-	}
-
-	:global(.dark .mode-btn) {
-		color: #f3f4f6;
+		color: hsl(var(--color-foreground));
+		transition:
+			background-color 150ms,
+			color 150ms;
+		font-family: inherit;
 	}
 
 	:global(.mode-btn:hover:not(.active)) {
-		background: rgba(0, 0, 0, 0.05);
-	}
-
-	:global(.dark .mode-btn:hover:not(.active)) {
-		background: rgba(255, 255, 255, 0.1);
+		background: hsl(var(--color-surface-hover));
 	}
 
 	:global(.mode-btn.active) {
-		background: var(--pill-primary-color, var(--color-primary-500, rgba(248, 214, 43, 0.2)));
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #3b82f6)) 20%,
-			white 80%
-		);
-	}
-
-	:global(.dark .mode-btn.active) {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #3b82f6)) 30%,
-			transparent 70%
-		);
+		background: hsl(var(--color-primary) / 0.2);
+		color: hsl(var(--color-primary));
 	}
 
 	:global(.mode-icon) {
@@ -996,15 +970,9 @@
 		gap: 0.25rem !important;
 		padding: 0.25rem !important;
 		border-radius: 9999px !important;
-		background: rgba(245, 245, 245, 0.95) !important;
-		border: 1px solid rgba(0, 0, 0, 0.1) !important;
-		color: #374151 !important;
-	}
-
-	:global(.dark .a11y-quick-toggles) {
-		background: rgba(40, 40, 40, 0.95) !important;
-		border: 1px solid rgba(255, 255, 255, 0.15) !important;
-		color: #f3f4f6 !important;
+		background: hsl(var(--color-surface)) !important;
+		border: 1px solid hsl(var(--color-border)) !important;
+		color: hsl(var(--color-foreground)) !important;
 	}
 
 	:global(.a11y-btn) {
@@ -1016,39 +984,21 @@
 		background: transparent;
 		border-radius: 9999px;
 		cursor: pointer;
-		color: #6b7280;
-		transition: all 0.15s;
-	}
-
-	:global(.dark .a11y-btn) {
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
+		transition:
+			background-color 150ms,
+			color 150ms;
+		font-family: inherit;
 	}
 
 	:global(.a11y-btn:hover:not(.active)) {
-		background: rgba(0, 0, 0, 0.05);
-		color: #374151;
-	}
-
-	:global(.dark .a11y-btn:hover:not(.active)) {
-		background: rgba(255, 255, 255, 0.1);
-		color: #f3f4f6;
+		background: hsl(var(--color-surface-hover));
+		color: hsl(var(--color-foreground));
 	}
 
 	:global(.a11y-btn.active) {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #3b82f6)) 20%,
-			white 80%
-		);
-		color: var(--pill-primary-color, var(--color-primary-500, #3b82f6));
-	}
-
-	:global(.dark .a11y-btn.active) {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #3b82f6)) 30%,
-			transparent 70%
-		);
+		background: hsl(var(--color-primary) / 0.2);
+		color: hsl(var(--color-primary));
 	}
 
 	:global(.a11y-icon) {
diff --git a/packages/shared-ui/src/navigation/PillTabGroup.stories.svelte b/packages/shared-ui/src/navigation/PillTabGroup.stories.svelte
new file mode 100644
index 000000000..d75168e9c
--- /dev/null
+++ b/packages/shared-ui/src/navigation/PillTabGroup.stories.svelte
@@ -0,0 +1,58 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import PillTabGroup from './PillTabGroup.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Navigation/PillTabGroup',
+		component: PillTabGroup,
+		tags: ['autodocs'],
+	});
+
+	let langValue = $state('de');
+	let navValue = $state('decks');
+	let viewValue = $state('list');
+</script>
+
+<Story name="LanguageSwitcher">
+	{#snippet children()}
+		<PillTabGroup
+			options={[
+				{ id: 'de', label: 'DE', title: 'Deutsch' },
+				{ id: 'en', label: 'EN', title: 'English' },
+			]}
+			value={langValue}
+			onChange={(id) => (langValue = id)}
+			ariaLabel="Sprache wechseln"
+		/>
+	{/snippet}
+</Story>
+
+<Story name="RouteNavigation">
+	{#snippet children()}
+		<PillTabGroup
+			options={[
+				{ id: 'decks', label: 'Stapel' },
+				{ id: 'study', label: 'Lernen' },
+				{ id: 'import', label: 'Import' },
+				{ id: 'stats', label: 'Statistik' },
+			]}
+			value={navValue}
+			onChange={(id) => (navValue = id)}
+			ariaLabel="Hauptnavigation"
+		/>
+	{/snippet}
+</Story>
+
+<Story name="WithDisabled">
+	{#snippet children()}
+		<PillTabGroup
+			options={[
+				{ id: 'list', label: 'Liste' },
+				{ id: 'grid', label: 'Raster' },
+				{ id: 'graph', label: 'Graph', disabled: true },
+			]}
+			value={viewValue}
+			onChange={(id) => (viewValue = id)}
+		/>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/navigation/PillTabGroup.svelte b/packages/shared-ui/src/navigation/PillTabGroup.svelte
index 88f078f7e..bf7e9f38d 100644
--- a/packages/shared-ui/src/navigation/PillTabGroup.svelte
+++ b/packages/shared-ui/src/navigation/PillTabGroup.svelte
@@ -1,209 +1,70 @@
 <script lang="ts">
-	import type { PillTabOption } from './types';
-	import {
-		List,
-		Columns,
-		Tag,
-		Heart,
-		House,
-		Gear,
-		GridFour,
-		Clock,
-		Timer,
-		Target,
-		CalendarBlank,
-		Fire,
-		MagnifyingGlass,
-		CheckSquare,
-		Funnel,
-	} from '@mana/shared-icons';
+	import Pill from './Pill.svelte';
 
-	// Map icon names to Phosphor components
-	const phosphorIcons: Record<string, any> = {
-		list: List,
-		columns: Columns,
-		kanban: Columns,
-		tag: Tag,
-		heart: Heart,
-		home: House,
-		settings: Gear,
-		grid: GridFour,
-		clock: Clock,
-		timer: Timer,
-		target: Target,
-		calendar: CalendarBlank,
-		fire: Fire,
-		search: MagnifyingGlass,
-		'check-square': CheckSquare,
-		filter: Funnel,
-	};
+	export interface PillTabOption {
+		id: string;
+		label?: string;
+		title?: string;
+		disabled?: boolean;
+	}
 
 	interface Props {
-		/** Tab options to display */
 		options: PillTabOption[];
-		/** Currently selected tab id */
 		value: string;
-		/** Called when selection changes */
 		onChange: (id: string) => void;
-		/** Optional section label */
 		sectionLabel?: string;
-		/** Primary color for active state */
-		primaryColor?: string;
-		/** Called on right-click (context menu) - receives click coordinates */
+		ariaLabel?: string;
+		/** v0.1.x-Compat: Right-Click-Handler. Heute ignoriert; managarten nutzt onContextMenu auf PillTabGroup-Configs. */
 		onContextMenu?: (x: number, y: number) => void;
+		/** v0.1.x-Compat: heute ignoriert. */
+		size?: 'sm' | 'md' | number;
+		/** v0.1.x-Compat: heute ignoriert. */
+		class?: string;
+		/** v0.1.x-Compat: Primary-Color für aktive Tabs (heute via Token primary). */
+		primaryColor?: string;
 	}
 
-	let { options, value, onChange, sectionLabel, primaryColor, onContextMenu }: Props = $props();
+	let { options, value, onChange, sectionLabel, ariaLabel }: Props = $props();
 
-	function handleContextMenu(event: MouseEvent) {
-		if (onContextMenu) {
-			event.preventDefault();
-			onContextMenu(event.clientX, event.clientY);
-		}
-	}
-
-	function handleClick(optionId: string, disabled?: boolean) {
-		if (!disabled) {
-			onChange(optionId);
-		}
+	function handleClick(id: string, disabled?: boolean) {
+		if (disabled || id === value) return;
+		onChange(id);
 	}
 </script>
 
-<!-- svelte-ignore a11y_interactive_supports_focus -->
-<div class="pill-tab-group" oncontextmenu={handleContextMenu} role="tablist">
-	<div
-		class="tab-container glass-pill"
-		style={primaryColor ? `--pill-primary-color: ${primaryColor}` : ''}
-	>
-		{#each options as option, index}
-			{#if index > 0}
-				<div class="tab-divider"></div>
-			{/if}
-			<button
-				onclick={() => handleClick(option.id, option.disabled)}
-				class="tab-btn"
-				class:active={value === option.id}
-				class:disabled={option.disabled}
-				title={option.title || option.label}
-				disabled={option.disabled}
-			>
-				{#if option.icon}
-					{#if option.iconSvg}
-						{@html option.iconSvg}
-					{:else if phosphorIcons[option.icon]}
-						{@const IconComponent = phosphorIcons[option.icon]}
-						<IconComponent size={18} class="tab-icon" />
-					{/if}
-				{/if}
-				{#if option.label}
-					<span class="tab-label">{option.label}</span>
-				{/if}
-			</button>
-		{/each}
-	</div>
+<div class="pill-tab-group" role="tablist" aria-label={ariaLabel ?? sectionLabel}>
+	{#each options as option, i (option.id)}
+		{#if i > 0}
+			<span class="divider" aria-hidden="true"></span>
+		{/if}
+		<Pill
+			size="sm"
+			active={value === option.id}
+			disabled={option.disabled}
+			title={option.title ?? option.label}
+			ariaLabel={option.label ?? option.title}
+			onclick={() => handleClick(option.id, option.disabled)}
+		>
+			{#snippet children()}{option.label ?? option.id}{/snippet}
+		</Pill>
+	{/each}
 </div>
 
 <style>
 	.pill-tab-group {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.tab-container {
-		display: flex;
+		display: inline-flex;
 		align-items: center;
-		padding: 0;
 		gap: 0;
-		border-radius: 9999px;
-	}
-
-	/* Solid theme-tokened pill (formerly the "glass" frosted pill). */
-	.glass-pill {
-		background: hsl(var(--color-card));
+		padding: 0.125rem;
+		background: hsl(var(--color-surface));
 		border: 1px solid hsl(var(--color-border));
-		box-shadow:
-			0 1px 2px hsl(0 0% 0% / 0.05),
-			0 2px 6px hsl(0 0% 0% / 0.04);
-	}
-
-	.tab-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 0.375rem;
-		padding: 0.5rem 0.75rem;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		color: #6b7280;
-		transition: all 0.2s;
-		flex: 1;
-	}
-
-	:global(.dark) .tab-btn {
-		color: #9ca3af;
-	}
-
-	.tab-btn:first-child {
-		border-radius: 9999px 0 0 9999px;
-	}
-
-	.tab-btn:last-child {
-		border-radius: 0 9999px 9999px 0;
-	}
-
-	.tab-btn:only-child {
 		border-radius: 9999px;
 	}
 
-	.tab-btn:hover:not(.disabled) {
-		background: rgba(0, 0, 0, 0.05);
-		color: #374151;
-	}
-
-	:global(.dark) .tab-btn:hover:not(.disabled) {
-		background: rgba(255, 255, 255, 0.1);
-		color: #f3f4f6;
-	}
-
-	.tab-btn.active {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #3b82f6)) 20%,
-			white 80%
-		);
-		color: var(--pill-primary-color, var(--color-primary-500, #3b82f6));
-	}
-
-	:global(.dark) .tab-btn.active {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #3b82f6)) 30%,
-			transparent 70%
-		);
-		color: var(--pill-primary-color, var(--color-primary-500, #3b82f6));
-	}
-
-	.tab-btn.disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.tab-divider {
+	.divider {
 		width: 1px;
 		height: 1rem;
-		background: rgba(0, 0, 0, 0.1);
+		background: hsl(var(--color-border));
 		flex-shrink: 0;
 	}
-
-	:global(.dark) .tab-divider {
-		background: rgba(255, 255, 255, 0.15);
-	}
-
-	.tab-label {
-		font-size: 0.8125rem;
-		font-weight: 500;
-		white-space: nowrap;
-	}
 </style>
diff --git a/packages/shared-ui/src/navigation/PillTagSelector.svelte b/packages/shared-ui/src/navigation/PillTagSelector.svelte
index c70acc9c3..ecb288b9c 100644
--- a/packages/shared-ui/src/navigation/PillTagSelector.svelte
+++ b/packages/shared-ui/src/navigation/PillTagSelector.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { Tag, X, Plus, CaretDown } from '@mana/shared-icons';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
 
 	export interface TagItem {
 		id: string;
@@ -100,9 +100,11 @@
 		class="pill glass-pill trigger-button"
 		class:has-selection={hasSelection}
 	>
-		<Tag size={16} weight={hasSelection ? 'fill' : 'regular'} />
+		<DynamicIcon name="tag" size="md" />
 		<span class="pill-label">{displayLabel}</span>
-		<CaretDown size={12} class={`chevron-icon ${isOpen ? 'rotated' : ''}`} />
+		<span class="chevron-icon" class:rotated={isOpen}>
+			<DynamicIcon name="caret-down" size="xs" />
+		</span>
 	</button>
 
 	{#if isOpen}
@@ -128,7 +130,7 @@
 					<span>Keine Tags vorhanden</span>
 					{#if onCreate}
 						<button class="create-link" onclick={handleCreateClick}>
-							<Plus size={14} weight="bold" />
+							<DynamicIcon name="plus" size="sm" />
 							<span>Erstellen</span>
 						</button>
 					{/if}
@@ -153,13 +155,13 @@
 				<div class="dropdown-footer">
 					{#if hasSelection}
 						<button class="footer-btn clear-btn" onclick={handleClearClick}>
-							<X size={14} weight="bold" />
+							<DynamicIcon name="x" size="sm" />
 							<span>Löschen</span>
 						</button>
 					{/if}
 					{#if onCreate}
 						<button class="footer-btn create-btn" onclick={handleCreateClick}>
-							<Plus size={14} weight="bold" />
+							<DynamicIcon name="plus" size="sm" />
 							<span>Neuer Tag</span>
 						</button>
 					{/if}
@@ -202,7 +204,7 @@
 
 	/* Solid theme-tokened pill (formerly the "glass" frosted pill). */
 	.glass-pill {
-		background: hsl(var(--color-card));
+		background: hsl(var(--color-surface));
 		border: 1px solid hsl(var(--color-border));
 		box-shadow:
 			0 1px 2px hsl(0 0% 0% / 0.05),
@@ -212,7 +214,7 @@
 
 	.glass-pill:hover {
 		background: hsl(var(--color-surface-hover));
-		border-color: hsl(var(--color-border-strong, var(--color-border)));
+		border-color: hsl(var(--color-border));
 		box-shadow:
 			0 6px 12px hsl(0 0% 0% / 0.08),
 			0 2px 4px hsl(0 0% 0% / 0.05);
@@ -220,13 +222,8 @@
 
 	/* Active selection state */
 	.trigger-button.has-selection {
-		background: color-mix(in srgb, var(--pill-primary-color, #3b82f6) 15%, white 85%);
-		border-color: color-mix(in srgb, var(--pill-primary-color, #3b82f6) 25%, transparent 75%);
-	}
-
-	:global(.dark) .trigger-button.has-selection {
-		background: color-mix(in srgb, var(--pill-primary-color, #3b82f6) 25%, transparent 75%);
-		border-color: color-mix(in srgb, var(--pill-primary-color, #3b82f6) 35%, transparent 65%);
+		background: hsl(var(--color-primary) / 0.15);
+		border-color: hsl(var(--color-primary) / 0.4);
 	}
 
 	:global(.chevron-icon) {
@@ -328,37 +325,29 @@
 		font-size: 0.8125rem;
 		font-weight: 500;
 		cursor: pointer;
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		background: rgba(255, 255, 255, 0.8);
-		color: #374151;
-		transition: all 0.15s ease;
-	}
-
-	:global(.dark) .tag-pill {
-		background: rgba(255, 255, 255, 0.1);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-		color: #f3f4f6;
+		border: 1px solid hsl(var(--color-border));
+		background: hsl(var(--color-surface));
+		color: hsl(var(--color-foreground));
+		transition:
+			background-color 150ms ease,
+			border-color 150ms ease,
+			transform 150ms ease;
+		font-family: inherit;
 	}
 
 	.tag-pill:hover {
 		transform: scale(1.05);
-		background: rgba(255, 255, 255, 0.95);
-		border-color: rgba(0, 0, 0, 0.15);
-	}
-
-	:global(.dark) .tag-pill:hover {
-		background: rgba(255, 255, 255, 0.2);
-		border-color: rgba(255, 255, 255, 0.25);
+		background: hsl(var(--color-surface-hover));
 	}
 
 	.tag-pill.selected {
 		background: var(--tag-color) !important;
 		border-color: var(--tag-color) !important;
-		color: white;
+		color: hsl(var(--color-primary-foreground));
 	}
 
 	.tag-pill.selected .tag-dot {
-		background-color: white;
+		background-color: currentColor;
 	}
 
 	.tag-dot {
@@ -380,11 +369,7 @@
 		justify-content: flex-end;
 		gap: 0.5rem;
 		padding-top: 0.5rem;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
-	}
-
-	:global(.dark) .dropdown-footer {
-		border-top-color: rgba(255, 255, 255, 0.15);
+		border-top: 1px solid hsl(var(--color-border));
 	}
 
 	.footer-btn {
@@ -398,58 +383,34 @@
 		cursor: pointer;
 		border: none;
 		background: transparent;
-		color: #6b7280;
-		transition: all 0.15s ease;
-	}
-
-	:global(.dark) .footer-btn {
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
+		transition:
+			background-color 150ms ease,
+			color 150ms ease;
+		font-family: inherit;
 	}
 
 	.footer-btn:hover {
-		background: rgba(0, 0, 0, 0.05);
-		color: #374151;
-	}
-
-	:global(.dark) .footer-btn:hover {
-		background: rgba(255, 255, 255, 0.1);
-		color: #f3f4f6;
+		background: hsl(var(--color-surface-hover));
+		color: hsl(var(--color-foreground));
 	}
 
 	.clear-btn {
-		color: #ef4444;
+		color: hsl(var(--color-error));
 	}
 
 	.clear-btn:hover {
-		background: rgba(239, 68, 68, 0.1);
-		color: #dc2626;
-	}
-
-	:global(.dark) .clear-btn {
-		color: #f87171;
-	}
-
-	:global(.dark) .clear-btn:hover {
-		background: rgba(239, 68, 68, 0.15);
-		color: #fca5a5;
+		background: hsl(var(--color-error) / 0.12);
+		color: hsl(var(--color-error));
 	}
 
 	.create-btn {
-		color: #3b82f6;
+		color: hsl(var(--color-primary));
 	}
 
 	.create-btn:hover {
-		background: rgba(59, 130, 246, 0.1);
-		color: #2563eb;
-	}
-
-	:global(.dark) .create-btn {
-		color: #60a5fa;
-	}
-
-	:global(.dark) .create-btn:hover {
-		background: rgba(59, 130, 246, 0.15);
-		color: #93c5fd;
+		background: hsl(var(--color-primary) / 0.12);
+		color: hsl(var(--color-primary));
 	}
 
 	/* Loading and empty states */
@@ -458,12 +419,7 @@
 		padding: 1rem;
 		text-align: center;
 		font-size: 0.875rem;
-		color: #6b7280;
-	}
-
-	:global(.dark) .loading-state,
-	:global(.dark) .empty-state {
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.empty-state {
@@ -481,22 +437,15 @@
 		border-radius: 9999px;
 		font-size: 0.8125rem;
 		font-weight: 500;
-		color: #3b82f6;
+		color: hsl(var(--color-primary));
 		background: transparent;
 		border: none;
 		cursor: pointer;
-		transition: all 0.15s ease;
+		transition: background-color 150ms ease;
+		font-family: inherit;
 	}
 
 	.create-link:hover {
-		background: rgba(59, 130, 246, 0.1);
-	}
-
-	:global(.dark) .create-link {
-		color: #60a5fa;
-	}
-
-	:global(.dark) .create-link:hover {
-		background: rgba(59, 130, 246, 0.15);
+		background: hsl(var(--color-primary) / 0.12);
 	}
 </style>
diff --git a/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte b/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
deleted file mode 100644
index 2aff4f947..000000000
--- a/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
+++ /dev/null
@@ -1,468 +0,0 @@
-<script lang="ts">
-	import { CaretDown, Clock } from '@mana/shared-icons';
-
-	// Portal action - moves element to body to escape stacking contexts
-	function portal(node: HTMLElement) {
-		document.body.appendChild(node);
-		return {
-			destroy() {
-				node.remove();
-			},
-		};
-	}
-
-	interface Props {
-		/** Start hour (0-23) */
-		startHour: number;
-		/** End hour (1-24) */
-		endHour: number;
-		/** Called when start hour changes */
-		onStartHourChange: (hour: number) => void;
-		/** Called when end hour changes */
-		onEndHourChange: (hour: number) => void;
-		/** Dropdown direction */
-		direction?: 'up' | 'down';
-		/** Label format - 'range' shows "8-18h", 'icon' shows clock icon only */
-		labelFormat?: 'range' | 'icon';
-		/** Embedded mode - no background/border, for use inside a parent bar */
-		embedded?: boolean;
-		/** Toggle mode - click toggles active state, right-click/long-press opens dropdown */
-		toggleMode?: boolean;
-		/** Whether the filter is active (only used in toggleMode) */
-		active?: boolean;
-		/** Called when toggle state changes (only used in toggleMode) */
-		onToggle?: () => void;
-	}
-
-	let {
-		startHour,
-		endHour,
-		onStartHourChange,
-		onEndHourChange,
-		direction = 'down',
-		labelFormat = 'range',
-		embedded = false,
-		toggleMode = false,
-		active = false,
-		onToggle,
-	}: Props = $props();
-
-	let isOpen = $state(false);
-	let triggerButton: HTMLButtonElement;
-	let dropdownPosition = $state({ top: 0, left: 0 });
-	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
-	let isLongPress = $state(false);
-
-	function openDropdown() {
-		if (triggerButton) {
-			const rect = triggerButton.getBoundingClientRect();
-			if (direction === 'down') {
-				dropdownPosition = {
-					top: rect.bottom + 8,
-					left: rect.left,
-				};
-			} else {
-				dropdownPosition = {
-					top: rect.top - 8,
-					left: rect.left,
-				};
-			}
-		}
-		isOpen = true;
-	}
-
-	function handleClick() {
-		if (toggleMode) {
-			// In toggle mode, click toggles the filter
-			if (!isLongPress) {
-				onToggle?.();
-			}
-			isLongPress = false;
-		} else {
-			// Normal mode - click opens dropdown
-			openDropdown();
-		}
-	}
-
-	function handleContextMenu(e: MouseEvent) {
-		if (toggleMode) {
-			e.preventDefault();
-			openDropdown();
-		}
-	}
-
-	function handlePointerDown() {
-		if (toggleMode) {
-			isLongPress = false;
-			longPressTimer = setTimeout(() => {
-				isLongPress = true;
-				openDropdown();
-			}, 500);
-		}
-	}
-
-	function handlePointerUp() {
-		if (longPressTimer) {
-			clearTimeout(longPressTimer);
-			longPressTimer = null;
-		}
-	}
-
-	function handlePointerLeave() {
-		if (longPressTimer) {
-			clearTimeout(longPressTimer);
-			longPressTimer = null;
-		}
-	}
-
-	function close() {
-		isOpen = false;
-	}
-
-	function handleStartChange(hour: number) {
-		if (hour < endHour) {
-			onStartHourChange(hour);
-		}
-	}
-
-	function handleEndChange(hour: number) {
-		if (hour > startHour) {
-			onEndHourChange(hour);
-		}
-	}
-
-	function formatHour(hour: number): string {
-		return `${hour.toString().padStart(2, '0')}:00`;
-	}
-
-	let label = $derived(labelFormat === 'range' ? `${startHour}-${endHour}h` : '');
-
-	// Generate hour options
-	const startHours = Array.from({ length: 24 }, (_, i) => i);
-	const endHours = Array.from({ length: 24 }, (_, i) => i + 1);
-</script>
-
-<div class="pill-time-selector">
-	<button
-		bind:this={triggerButton}
-		onclick={handleClick}
-		oncontextmenu={handleContextMenu}
-		onpointerdown={handlePointerDown}
-		onpointerup={handlePointerUp}
-		onpointerleave={handlePointerLeave}
-		class="trigger-button"
-		class:pill={!embedded}
-		class:glass-pill={!embedded}
-		class:embedded-btn={embedded}
-		class:active={toggleMode && active}
-		title={toggleMode ? 'Klick: Ein/Aus | Rechtsklick: Zeitbereich' : 'Zeitbereich auswählen'}
-	>
-		<Clock size={20} class="pill-icon" />
-		{#if label}
-			<span class="pill-label">{label}</span>
-		{/if}
-		{#if !toggleMode}
-			<CaretDown size={20} class="chevron-icon" />
-		{/if}
-	</button>
-
-	{#if isOpen}
-		<!-- Backdrop - portal to body -->
-		<button
-			use:portal
-			class="backdrop"
-			onclick={close}
-			onkeydown={(e) => e.key === 'Escape' && close()}
-			aria-label="Close"
-			style="z-index: 99990;"
-		></button>
-
-		<!-- Dropdown - portal to body -->
-		<div
-			use:portal
-			class="dropdown glass-dropdown"
-			class:dropdown-up={direction === 'up'}
-			style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; z-index: 99991;"
-		>
-			<div class="dropdown-header">Zeitbereich</div>
-
-			<div class="time-selectors">
-				<div class="time-column">
-					<span class="column-label">Von</span>
-					<div class="hour-list">
-						{#each startHours as hour}
-							<button
-								class="hour-option"
-								class:active={startHour === hour}
-								class:disabled={hour >= endHour}
-								onclick={() => handleStartChange(hour)}
-								disabled={hour >= endHour}
-							>
-								{formatHour(hour)}
-							</button>
-						{/each}
-					</div>
-				</div>
-
-				<div class="time-divider"></div>
-
-				<div class="time-column">
-					<span class="column-label">Bis</span>
-					<div class="hour-list">
-						{#each endHours as hour}
-							<button
-								class="hour-option"
-								class:active={endHour === hour}
-								class:disabled={hour <= startHour}
-								onclick={() => handleEndChange(hour)}
-								disabled={hour <= startHour}
-							>
-								{formatHour(hour)}
-							</button>
-						{/each}
-					</div>
-				</div>
-			</div>
-
-			<div class="dropdown-footer">
-				<span class="current-range">{formatHour(startHour)} - {formatHour(endHour)}</span>
-			</div>
-		</div>
-	{/if}
-</div>
-
-<style>
-	.pill-time-selector {
-		position: relative;
-	}
-
-	.trigger-button {
-		position: relative;
-	}
-
-	.pill {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.5rem 0.75rem;
-		border-radius: 9999px;
-		font-size: 0.875rem;
-		font-weight: 500;
-		white-space: nowrap;
-		border: none;
-		cursor: pointer;
-		transition: all 0.2s;
-	}
-
-	.glass-pill {
-		background: hsl(var(--color-card));
-		border: 1px solid hsl(var(--color-border));
-		box-shadow:
-			0 1px 2px hsl(0 0% 0% / 0.05),
-			0 2px 6px hsl(0 0% 0% / 0.04);
-		color: hsl(var(--color-foreground));
-	}
-
-	.glass-pill:hover {
-		background: hsl(var(--color-surface-hover));
-		box-shadow:
-			0 6px 12px hsl(0 0% 0% / 0.08),
-			0 2px 4px hsl(0 0% 0% / 0.05);
-	}
-
-	.pill-label {
-		font-size: 0.8125rem;
-	}
-
-	/* Embedded mode - no background/border */
-	.embedded-btn {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.5rem 0.75rem;
-		border-radius: 9999px;
-		font-size: 0.875rem;
-		font-weight: 500;
-		white-space: nowrap;
-		border: none;
-		cursor: pointer;
-		transition: all 0.15s ease;
-		background: transparent;
-		color: hsl(var(--color-foreground));
-	}
-
-	.embedded-btn:hover {
-		background: hsl(var(--color-foreground) / 0.05);
-	}
-
-	/* Active state for toggle mode */
-	.embedded-btn.active {
-		background: hsl(var(--color-primary) / 0.15);
-		color: hsl(var(--color-primary));
-	}
-
-	.glass-pill.active {
-		background: hsl(var(--color-primary) / 0.15);
-		border-color: hsl(var(--color-primary));
-		color: hsl(var(--color-primary));
-	}
-
-	.backdrop {
-		position: fixed;
-		inset: 0;
-		z-index: 9998;
-		background: transparent;
-		border: none;
-		cursor: default;
-	}
-
-	.dropdown {
-		position: fixed;
-		z-index: 9999;
-		min-width: 280px;
-		border-radius: 1rem;
-		overflow: hidden;
-		animation: dropdownIn 0.15s ease-out;
-	}
-
-	.dropdown-up {
-		transform: translateY(-100%);
-	}
-
-	@keyframes dropdownIn {
-		from {
-			opacity: 0;
-			transform: translateY(10px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	.dropdown-up {
-		animation-name: dropdownInUp;
-	}
-
-	@keyframes dropdownInUp {
-		from {
-			opacity: 0;
-			transform: translateY(-100%) translateY(-10px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(-100%);
-		}
-	}
-
-	.glass-dropdown {
-		background: color-mix(in srgb, var(--color-surface-elevated-1) 95%, transparent);
-		backdrop-filter: blur(16px);
-		-webkit-backdrop-filter: blur(16px);
-		border: 1px solid hsl(var(--color-border));
-	}
-
-	.dropdown-header {
-		padding: 0.75rem 1rem;
-		font-size: 0.75rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: hsl(var(--color-muted-foreground));
-		border-bottom: 1px solid hsl(var(--color-border));
-	}
-
-	.time-selectors {
-		display: flex;
-		padding: 0.5rem;
-		gap: 0.5rem;
-	}
-
-	.time-column {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-	}
-
-	.column-label {
-		font-size: 0.6875rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: hsl(var(--color-muted-foreground));
-		padding: 0 0.5rem;
-	}
-
-	.hour-list {
-		display: flex;
-		flex-direction: column;
-		gap: 0.125rem;
-		max-height: 200px;
-		overflow-y: auto;
-		scrollbar-width: thin;
-		scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-	}
-
-	.hour-list::-webkit-scrollbar {
-		width: 4px;
-	}
-
-	.hour-list::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	.hour-list::-webkit-scrollbar-thumb {
-		background: rgba(0, 0, 0, 0.2);
-		border-radius: 2px;
-	}
-
-	:global(.dark) .hour-list::-webkit-scrollbar-thumb {
-		background: rgba(255, 255, 255, 0.2);
-	}
-
-	.hour-option {
-		padding: 0.375rem 0.75rem;
-		border: none;
-		background: transparent;
-		border-radius: 0.5rem;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		color: hsl(var(--color-foreground));
-		cursor: pointer;
-		transition: all 0.15s;
-		text-align: left;
-	}
-
-	.hour-option:hover:not(.disabled) {
-		background: hsl(var(--color-foreground) / 0.05);
-	}
-
-	.hour-option.active {
-		background: hsl(var(--color-primary) / 0.2);
-		color: hsl(var(--color-primary));
-	}
-
-	.hour-option.disabled {
-		opacity: 0.35;
-		cursor: not-allowed;
-	}
-
-	.time-divider {
-		width: 1px;
-		background: hsl(var(--color-border));
-		margin: 0.5rem 0;
-	}
-
-	.dropdown-footer {
-		padding: 0.5rem 1rem;
-		border-top: 1px solid hsl(var(--color-border));
-		text-align: center;
-	}
-
-	.current-range {
-		font-size: 0.8125rem;
-		font-weight: 600;
-		color: hsl(var(--color-primary));
-	}
-</style>
diff --git a/packages/shared-ui/src/navigation/PillToolbar.svelte b/packages/shared-ui/src/navigation/PillToolbar.svelte
deleted file mode 100644
index a9bf1ca30..000000000
--- a/packages/shared-ui/src/navigation/PillToolbar.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		/** Position of toolbar: 'top' or 'bottom' (default: 'top') */
-		position?: 'top' | 'bottom';
-		/** Top offset on desktop when position='top' (default: '70px' - below PillNav) */
-		topOffset?: string;
-		/** Bottom offset on desktop when position='bottom' (default: '70px' - above PillNav) */
-		bottomOffset?: string;
-		/** Bottom offset on mobile (default: '70px' - above PillNav) */
-		mobileBottomOffset?: string;
-		/** Content to render inside the toolbar */
-		children: Snippet;
-	}
-
-	let {
-		position = 'top',
-		topOffset = '70px',
-		bottomOffset = '70px',
-		mobileBottomOffset = '70px',
-		children,
-	}: Props = $props();
-</script>
-
-<div
-	class="pill-toolbar"
-	class:position-bottom={position === 'bottom'}
-	style="--toolbar-top-offset: {topOffset}; --toolbar-bottom-offset: {bottomOffset}; --toolbar-mobile-bottom-offset: {mobileBottomOffset};"
->
-	<div class="toolbar-bar glass-pill">
-		{@render children()}
-	</div>
-</div>
-
-<style>
-	.pill-toolbar {
-		position: fixed;
-		top: var(--toolbar-top-offset, 70px);
-		left: 0;
-		right: 0;
-		z-index: 50;
-		padding: 0.375rem 1rem;
-		pointer-events: none;
-		display: flex;
-		justify-content: center;
-	}
-
-	/* Bottom position */
-	.pill-toolbar.position-bottom {
-		top: auto;
-		bottom: var(--toolbar-bottom-offset, 70px);
-		transition: bottom 0.3s ease;
-	}
-
-	/* Mobile: always position above bottom nav */
-	@media (max-width: 768px) {
-		.pill-toolbar {
-			top: auto;
-			bottom: calc(var(--toolbar-mobile-bottom-offset, 70px) + env(safe-area-inset-bottom, 0px));
-		}
-	}
-
-	/* Single unified bar */
-	.toolbar-bar {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		padding: 0.25rem;
-		pointer-events: auto;
-		max-width: 100%;
-		overflow: visible;
-	}
-
-	.glass-pill {
-		background: hsl(var(--color-card));
-		border: 1px solid hsl(var(--color-border));
-		box-shadow:
-			0 1px 2px hsl(0 0% 0% / 0.05),
-			0 2px 6px hsl(0 0% 0% / 0.04);
-		border-radius: 9999px;
-	}
-</style>
diff --git a/packages/shared-ui/src/navigation/PillToolbarButton.svelte b/packages/shared-ui/src/navigation/PillToolbarButton.svelte
deleted file mode 100644
index 1676a457b..000000000
--- a/packages/shared-ui/src/navigation/PillToolbarButton.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		/** Click handler */
-		onclick: () => void;
-		/** Whether the button is in active state */
-		active?: boolean;
-		/** Tooltip title */
-		title?: string;
-		/** Whether to render as icon-only (smaller padding) */
-		iconOnly?: boolean;
-		/** Disabled state */
-		disabled?: boolean;
-		/** Button content (icon and/or text) */
-		children: Snippet;
-	}
-
-	let {
-		onclick,
-		active = false,
-		title,
-		iconOnly = false,
-		disabled = false,
-		children,
-	}: Props = $props();
-</script>
-
-<button
-	type="button"
-	class="toolbar-btn"
-	class:active
-	class:icon-only={iconOnly}
-	{title}
-	{disabled}
-	{onclick}
->
-	{@render children()}
-</button>
-
-<style>
-	.toolbar-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 0.375rem;
-		padding: 0.5rem 0.75rem;
-		background: transparent;
-		border: none;
-		border-radius: 9999px;
-		cursor: pointer;
-		color: hsl(var(--color-foreground));
-		font-size: 0.875rem;
-		font-weight: 500;
-		white-space: nowrap;
-		transition: all 0.15s ease;
-	}
-
-	.toolbar-btn:hover:not(:disabled) {
-		background: hsl(var(--color-foreground) / 0.05);
-	}
-
-	.toolbar-btn.active {
-		background: hsl(var(--color-primary) / 0.15);
-		color: hsl(var(--color-primary));
-	}
-
-	.toolbar-btn.icon-only {
-		padding: 0.5rem;
-	}
-
-	.toolbar-btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	/* Icon styling */
-	.toolbar-btn :global(svg) {
-		width: 1rem;
-		height: 1rem;
-		flex-shrink: 0;
-	}
-</style>
diff --git a/packages/shared-ui/src/navigation/PillToolbarDivider.svelte b/packages/shared-ui/src/navigation/PillToolbarDivider.svelte
deleted file mode 100644
index 0eaf28f9f..000000000
--- a/packages/shared-ui/src/navigation/PillToolbarDivider.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	// No props needed - simple divider component
-</script>
-
-<div class="toolbar-divider"></div>
-
-<style>
-	.toolbar-divider {
-		width: 1px;
-		height: 1.25rem;
-		background: rgba(0, 0, 0, 0.1);
-		flex-shrink: 0;
-	}
-
-	:global(.dark) .toolbar-divider {
-		background: rgba(255, 255, 255, 0.15);
-	}
-</style>
diff --git a/packages/shared-ui/src/navigation/PillViewSwitcher.svelte b/packages/shared-ui/src/navigation/PillViewSwitcher.svelte
deleted file mode 100644
index e317ace86..000000000
--- a/packages/shared-ui/src/navigation/PillViewSwitcher.svelte
+++ /dev/null
@@ -1,178 +0,0 @@
-<script lang="ts">
-	import { tick } from 'svelte';
-	import { CalendarBlank, List, GridFour, ClipboardText, ListChecks } from '@mana/shared-icons';
-
-	export interface ViewOption {
-		/** Unique identifier */
-		id: string;
-		/** Display label */
-		label: string;
-		/** Optional icon name */
-		icon?: string;
-		/** Optional tooltip */
-		title?: string;
-		/** Whether this option is disabled */
-		disabled?: boolean;
-	}
-
-	interface Props {
-		/** Available view options */
-		options: ViewOption[];
-		/** Currently selected view id */
-		value: string;
-		/** Called when view changes */
-		onChange: (id: string) => void;
-		/** Embedded mode - no background/border, for use inside a parent bar */
-		embedded?: boolean;
-	}
-
-	let { options, value, onChange, embedded = false }: Props = $props();
-
-	let containerRef = $state<HTMLDivElement | null>(null);
-	let indicatorStyle = $state('');
-
-	// Update indicator position when value changes
-	$effect(() => {
-		if (containerRef && value) {
-			tick().then(updateIndicator);
-		}
-	});
-
-	function updateIndicator() {
-		if (!containerRef) return;
-
-		const activeButton = containerRef.querySelector(`[data-id="${value}"]`) as HTMLButtonElement;
-		if (activeButton) {
-			const containerRect = containerRef.getBoundingClientRect();
-			const buttonRect = activeButton.getBoundingClientRect();
-
-			const left = buttonRect.left - containerRect.left;
-			const width = buttonRect.width;
-
-			indicatorStyle = `left: ${left}px; width: ${width}px;`;
-		}
-	}
-
-	function handleClick(optionId: string, disabled?: boolean) {
-		if (!disabled) {
-			onChange(optionId);
-		}
-	}
-
-	// Map icon names to Phosphor components
-	const phosphorIcons: Record<string, any> = {
-		day: CalendarBlank,
-		week: List,
-		month: GridFour,
-		year: ClipboardText,
-		agenda: ListChecks,
-		list: List,
-		grid: GridFour,
-		calendar: CalendarBlank,
-	};
-</script>
-
-<div
-	class="pill-view-switcher"
-	class:glass-pill={!embedded}
-	class:embedded-switcher={embedded}
-	bind:this={containerRef}
->
-	<!-- Sliding indicator -->
-	<div class="sliding-indicator" style={indicatorStyle}></div>
-
-	<!-- Options -->
-	{#each options as option}
-		<button
-			data-id={option.id}
-			onclick={() => handleClick(option.id, option.disabled)}
-			class="switcher-btn"
-			class:active={value === option.id}
-			class:disabled={option.disabled}
-			title={option.title || option.label}
-			disabled={option.disabled}
-		>
-			{#if option.icon && phosphorIcons[option.icon]}
-				{@const IconComponent = phosphorIcons[option.icon]}
-				<IconComponent size={16} class="switcher-icon" />
-			{/if}
-			<span class="switcher-label">{option.label}</span>
-		</button>
-	{/each}
-</div>
-
-<style>
-	.pill-view-switcher {
-		position: relative;
-		display: inline-flex;
-		align-items: center;
-		padding: 0.1875rem;
-		border-radius: 9999px;
-		gap: 0.125rem;
-	}
-
-	.glass-pill {
-		background: hsl(var(--color-card));
-		border: 1px solid hsl(var(--color-border));
-		box-shadow:
-			0 1px 2px hsl(0 0% 0% / 0.05),
-			0 2px 6px hsl(0 0% 0% / 0.04);
-	}
-
-	/* Embedded mode - no background/border */
-	.embedded-switcher {
-		background: transparent;
-		border: none;
-		box-shadow: none;
-		padding: 0;
-		gap: 0;
-	}
-
-	/* Sliding indicator */
-	.sliding-indicator {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		border-radius: 9999px;
-		background: hsl(var(--color-primary) / 0.15);
-		box-shadow: 0 1px 3px hsl(var(--color-foreground) / 0.1);
-		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-		z-index: 0;
-	}
-
-	.switcher-btn {
-		position: relative;
-		z-index: 1;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 0.25rem;
-		padding: 0.5rem 0.875rem;
-		background: transparent;
-		border: none;
-		border-radius: 9999px;
-		cursor: pointer;
-		color: hsl(var(--color-muted-foreground));
-		font-size: 0.875rem;
-		font-weight: 500;
-		white-space: nowrap;
-		transition: color 0.15s ease;
-	}
-
-	.switcher-btn:hover:not(.disabled) {
-		color: hsl(var(--color-foreground));
-	}
-
-	.switcher-btn.active {
-		color: hsl(var(--color-primary));
-	}
-
-	.switcher-btn.disabled {
-		opacity: 0.4;
-		cursor: not-allowed;
-	}
-
-	.switcher-label {
-		line-height: 1;
-	}
-</style>
diff --git a/packages/shared-ui/src/navigation/Sidebar.svelte b/packages/shared-ui/src/navigation/Sidebar.svelte
deleted file mode 100644
index 3a41b831f..000000000
--- a/packages/shared-ui/src/navigation/Sidebar.svelte
+++ /dev/null
@@ -1,275 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { NavItem } from './types';
-	import NavLink from './NavLink.svelte';
-	import { CaretLeft, List, Moon, SignOut, Sun } from '@mana/shared-icons';
-
-	interface Props {
-		/** Navigation items to display */
-		items: NavItem[];
-		/** Logo snippet */
-		logo?: Snippet;
-		/** App name to display */
-		appName?: string;
-		/** Logo href */
-		logoHref?: string;
-		/** Current pathname for active state detection */
-		currentPath?: string;
-		/** Whether sidebar is minimized/collapsed */
-		minimized?: boolean;
-		/** Called when minimize toggle is clicked */
-		onToggleMinimize?: () => void;
-		/** User email to display */
-		userEmail?: string;
-		/** Called when sign out is clicked */
-		onSignOut?: () => void;
-		/** Sign out button label */
-		signOutLabel?: string;
-		/** Show theme toggle */
-		showThemeToggle?: boolean;
-		/** Called when theme toggle is clicked */
-		onToggleTheme?: () => void;
-		/** Current theme mode (for icon display) */
-		isDark?: boolean;
-		/** Light mode label */
-		lightModeLabel?: string;
-		/** Dark mode label */
-		darkModeLabel?: string;
-		/** Minimize label */
-		minimizeLabel?: string;
-		/** Expand label */
-		expandLabel?: string;
-		/** Additional CSS classes */
-		class?: string;
-		/** Footer content slot */
-		footer?: Snippet;
-	}
-
-	let {
-		items,
-		logo,
-		appName = '',
-		logoHref = '/',
-		currentPath = '',
-		minimized = false,
-		onToggleMinimize,
-		userEmail = '',
-		onSignOut,
-		signOutLabel = 'Sign Out',
-		showThemeToggle = false,
-		onToggleTheme,
-		isDark = false,
-		lightModeLabel = 'Light Mode',
-		darkModeLabel = 'Dark Mode',
-		minimizeLabel = 'Minimize',
-		expandLabel = 'Expand',
-		class: className = '',
-		footer,
-	}: Props = $props();
-
-	function isActive(href: string): boolean {
-		if (href === '/') return currentPath === '/';
-		return currentPath.startsWith(href);
-	}
-</script>
-
-<aside class="sidebar {minimized ? 'sidebar--minimized' : ''} {className}">
-	<div class="sidebar__inner">
-		<!-- Logo/Brand -->
-		<div class="sidebar__header">
-			<a href={logoHref} class="sidebar__logo">
-				{#if logo}
-					{@render logo()}
-				{/if}
-				{#if appName && !minimized}
-					<span class="sidebar__app-name">{appName}</span>
-				{/if}
-			</a>
-		</div>
-
-		<!-- Navigation -->
-		<nav class="sidebar__nav">
-			{#each items as item}
-				<NavLink {item} active={isActive(item.href)} variant="sidebar" {minimized} />
-			{/each}
-		</nav>
-
-		<!-- Footer -->
-		<div class="sidebar__footer">
-			{#if footer}
-				{@render footer()}
-			{/if}
-
-			<!-- Theme Toggle -->
-			{#if showThemeToggle && onToggleTheme}
-				<button
-					onclick={onToggleTheme}
-					class="sidebar__action"
-					title={isDark ? lightModeLabel : darkModeLabel}
-				>
-					{#if isDark}
-						<!-- Sun icon -->
-						<Sun size={20} />
-					{:else}
-						<!-- Moon icon -->
-						<Moon size={20} />
-					{/if}
-					{#if !minimized}
-						<span>{isDark ? lightModeLabel : darkModeLabel}</span>
-					{/if}
-				</button>
-			{/if}
-
-			<!-- User Email -->
-			{#if userEmail && !minimized}
-				<div class="sidebar__email">{userEmail}</div>
-			{/if}
-
-			<!-- Sign Out -->
-			{#if onSignOut}
-				<button
-					onclick={onSignOut}
-					class="sidebar__action sidebar__action--danger"
-					title={signOutLabel}
-				>
-					<SignOut size={20} />
-					{#if !minimized}
-						<span>{signOutLabel}</span>
-					{/if}
-				</button>
-			{/if}
-
-			<!-- Toggle Minimize -->
-			{#if onToggleMinimize}
-				<button
-					onclick={onToggleMinimize}
-					class="sidebar__action"
-					title={minimized ? expandLabel : minimizeLabel}
-				>
-					{#if minimized}
-						<!-- Menu icon (expand) -->
-						<List size={20} />
-					{:else}
-						<!-- Chevron left (minimize) -->
-						<CaretLeft size={20} />
-						<span>{minimizeLabel}</span>
-					{/if}
-				</button>
-			{/if}
-		</div>
-	</div>
-</aside>
-
-<style>
-	.sidebar {
-		width: 240px;
-		height: 100vh;
-		position: sticky;
-		top: 0;
-		left: 0;
-		flex-shrink: 0;
-		transition: width 0.2s ease;
-		z-index: 40;
-	}
-
-	.sidebar--minimized {
-		width: 64px;
-	}
-
-	.sidebar__inner {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		background-color: hsl(var(--color-surface));
-		border-right: 1px solid hsl(var(--color-border));
-	}
-
-	/* Header/Logo */
-	.sidebar__header {
-		display: flex;
-		align-items: center;
-		padding: 1rem;
-		border-bottom: 1px solid hsl(var(--color-border));
-	}
-
-	.sidebar__logo {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		text-decoration: none;
-		color: hsl(var(--color-foreground));
-	}
-
-	.sidebar--minimized .sidebar__logo {
-		justify-content: center;
-		width: 100%;
-	}
-
-	.sidebar__app-name {
-		font-size: 1.125rem;
-		font-weight: 700;
-		white-space: nowrap;
-	}
-
-	/* Navigation */
-	.sidebar__nav {
-		flex: 1;
-		overflow-y: auto;
-		padding: 0.5rem;
-	}
-
-	/* Footer */
-	.sidebar__footer {
-		padding: 0.5rem;
-		border-top: 1px solid hsl(var(--color-border));
-	}
-
-	.sidebar__email {
-		padding: 0.5rem 0.75rem;
-		font-size: 0.75rem;
-		color: hsl(var(--color-muted-foreground));
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.sidebar__action {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		width: 100%;
-		padding: 0.75rem;
-		font-size: 0.875rem;
-		font-weight: 500;
-		color: hsl(var(--color-muted-foreground));
-		background: transparent;
-		border: none;
-		border-radius: 0.5rem;
-		cursor: pointer;
-		transition: all 0.15s ease;
-		text-align: left;
-	}
-
-	.sidebar__action:hover {
-		background-color: hsl(var(--color-surface-hover));
-		color: hsl(var(--color-foreground));
-	}
-
-	.sidebar--minimized .sidebar__action {
-		justify-content: center;
-	}
-
-	.sidebar__action--danger {
-		color: hsl(var(--color-error));
-	}
-
-	.sidebar__action--danger:hover {
-		background-color: hsl(var(--color-error) / 0.1);
-		color: hsl(var(--color-error));
-	}
-
-	/* Icon sizing */
-	.sidebar__action :global(svg) {
-		flex-shrink: 0;
-	}
-</style>
diff --git a/packages/shared-ui/src/navigation/SidebarSection.svelte b/packages/shared-ui/src/navigation/SidebarSection.svelte
deleted file mode 100644
index 43522c92e..000000000
--- a/packages/shared-ui/src/navigation/SidebarSection.svelte
+++ /dev/null
@@ -1,107 +0,0 @@
-<script lang="ts">
-	/**
-	 * SidebarSection - Grouped navigation section within a sidebar
-	 *
-	 * Provides a labeled section for organizing related navigation items.
-	 * Supports collapsible behavior and minimized sidebar mode.
-	 *
-	 * @example Basic usage
-	 * ```svelte
-	 * <SidebarSection title="Main" items={mainNavItems} {currentPath} />
-	 * ```
-	 *
-	 * @example Collapsible section
-	 * ```svelte
-	 * <SidebarSection
-	 *   title="Settings"
-	 *   items={settingsItems}
-	 *   collapsible
-	 *   expanded={false}
-	 * />
-	 * ```
-	 */
-
-	import type { NavItem } from './types';
-	import NavLink from './NavLink.svelte';
-	import { Text } from '../atoms';
-	import { CaretDown } from '@mana/shared-icons';
-
-	interface Props {
-		/** Section title (hidden when minimized) */
-		title?: string;
-		/** Navigation items in this section */
-		items: NavItem[];
-		/** Current path for active state */
-		currentPath?: string;
-		/** Whether sidebar is minimized */
-		minimized?: boolean;
-		/** Whether section can be collapsed */
-		collapsible?: boolean;
-		/** Whether section is expanded (when collapsible) */
-		expanded?: boolean;
-		/** Divider above section */
-		divider?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		title,
-		items,
-		currentPath = '',
-		minimized = false,
-		collapsible = false,
-		expanded = $bindable(true),
-		divider = false,
-		class: className = '',
-	}: Props = $props();
-
-	function isActive(item: NavItem): boolean {
-		if (item.active !== undefined) return item.active;
-		return currentPath === item.href || currentPath.startsWith(item.href + '/');
-	}
-
-	function toggleExpanded() {
-		if (collapsible) {
-			expanded = !expanded;
-		}
-	}
-</script>
-
-<div class="sidebar-section {className}">
-	{#if divider && !minimized}
-		<div class="border-t border-theme my-2 mx-3"></div>
-	{/if}
-
-	{#if title && !minimized}
-		{#if collapsible}
-			<button
-				type="button"
-				class="w-full flex items-center justify-between px-3 py-1.5 text-left hover:bg-menu-hover rounded transition-colors"
-				onclick={toggleExpanded}
-			>
-				<Text variant="small" class="text-theme-tertiary uppercase tracking-wider">
-					{title}
-				</Text>
-				<CaretDown
-					size={14}
-					class="text-theme-tertiary transition-transform {expanded ? '' : '-rotate-90'}"
-				/>
-			</button>
-		{:else}
-			<div class="px-3 py-1.5">
-				<Text variant="small" class="text-theme-tertiary uppercase tracking-wider">
-					{title}
-				</Text>
-			</div>
-		{/if}
-	{/if}
-
-	{#if expanded || !collapsible}
-		<nav class="space-y-0.5 {title && !minimized ? 'mt-1' : ''}">
-			{#each items as item}
-				<NavLink {item} variant="sidebar" {minimized} active={isActive(item)} />
-			{/each}
-		</nav>
-	{/if}
-</div>
diff --git a/packages/shared-ui/src/navigation/TagStrip.svelte b/packages/shared-ui/src/navigation/TagStrip.svelte
index ea3cfd515..5bc2c9c5b 100644
--- a/packages/shared-ui/src/navigation/TagStrip.svelte
+++ b/packages/shared-ui/src/navigation/TagStrip.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import { dragSource } from '../dnd/drag-source';
 	import { passiveDropZone } from '../dnd/passive-drop';
 	import type { DragPayload, DragType } from '../dnd/types';
@@ -12,30 +11,27 @@
 	}
 
 	interface Props {
-		/** Available tags to display */
 		tags: TagItem[];
-		/** Currently selected tag IDs */
 		selectedIds: string[];
-		/** Called when a tag is toggled */
 		onToggle: (tagId: string) => void;
-		/** Called when filter is cleared */
 		onClear: () => void;
+		/** Called to navigate (e.g. SvelteKit's `goto`). Required if managementHref/createHref are clicked. */
+		onNavigate?: (href: string) => void;
 		/** Called when an item (task, card, etc.) is dropped on a tag pill */
 		onTagDrop?: (tagId: string, payload: DragPayload) => void;
-		/** Drag types accepted for drop-on-tag (default: ['task']) */
 		dropAccepts?: DragType[];
-		/** Link for "Tags verwalten" pill */
 		managementHref?: string;
-		/** Loading state */
 		loading?: boolean;
-		/** Whether to show the "+ Neuer Tag" button */
 		showCreateButton?: boolean;
-		/** Link for "+ Neuer Tag" pill */
 		createHref?: string;
-		/** Whether the filter strip below is visible (adjusts bottom position) */
 		aboveFilterStrip?: boolean;
 		/** Use 'static' when inside a flex container (bottom-stack pattern). Default: 'fixed'. */
 		positioning?: 'fixed' | 'static';
+		manageLabel?: string;
+		filterLabel?: string;
+		createLabel?: string;
+		emptyLabel?: string;
+		loadingLabel?: string;
 	}
 
 	let {
@@ -43,6 +39,7 @@
 		selectedIds,
 		onToggle,
 		onClear,
+		onNavigate,
 		onTagDrop,
 		dropAccepts = ['task'],
 		managementHref = '/tags',
@@ -51,19 +48,29 @@
 		createHref,
 		aboveFilterStrip = false,
 		positioning = 'fixed',
+		manageLabel = 'Tags verwalten',
+		filterLabel = 'Filter',
+		createLabel = 'Neuer Tag',
+		emptyLabel = 'Keine Tags vorhanden — + Erstellen',
+		loadingLabel = 'Lädt …',
 	}: Props = $props();
 
 	const resolvedCreateHref = $derived(createHref ?? managementHref + '?new=true');
 	const hasSelectedTags = $derived(selectedIds.length > 0);
 	const hasTags = $derived(tags.length > 0);
 
-	const sortedTags = $derived.by(() => {
-		return [...tags].sort((a, b) => a.name.localeCompare(b.name, 'de'));
-	});
+	const sortedTags = $derived.by(() =>
+		[...tags].sort((a, b) => a.name.localeCompare(b.name, 'de'))
+	);
 
 	function isTagSelected(tagId: string): boolean {
 		return selectedIds.includes(tagId);
 	}
+
+	function navigate(href: string) {
+		if (onNavigate) onNavigate(href);
+		else window.location.assign(href);
+	}
 </script>
 
 <div
@@ -72,33 +79,24 @@
 	class:tag-strip-static={positioning === 'static'}
 >
 	<div class="tag-strip-container">
-		<!-- Clear Filter Button (always rendered to prevent layout shift) -->
 		<div class:hidden={!hasSelectedTags} class="filter-slot">
-			<Pill
-				icon="x"
-				label="Filter"
-				danger
-				onclick={() => onClear()}
-				title="Filter löschen"
-				disabled={!hasSelectedTags}
-			/>
+			<Pill danger onclick={() => onClear()} title="Filter löschen" disabled={!hasSelectedTags}>
+				{filterLabel}
+			</Pill>
 		</div>
 
-		<!-- Tags verwalten Pill -->
-		<Pill
-			icon="tag"
-			label="Tags verwalten"
-			onclick={() => goto(managementHref)}
-			title="Tags verwalten"
-		/>
+		<Pill onclick={() => navigate(managementHref)} title={manageLabel}>
+			{manageLabel}
+		</Pill>
 
 		{#if loading}
-			<div class="loading-state">Lädt...</div>
+			<div class="loading-state">{loadingLabel}</div>
 		{:else if !hasTags}
-			<Pill label="Keine Tags vorhanden — + Erstellen" onclick={() => goto(managementHref)} />
+			<Pill onclick={() => navigate(managementHref)}>{emptyLabel}</Pill>
 		{:else}
 			{#each sortedTags as tag (tag.id)}
 				<button
+					type="button"
 					class="tag-pill"
 					class:selected={isTagSelected(tag.id)}
 					onclick={() => onToggle(tag.id)}
@@ -120,15 +118,10 @@
 				</button>
 			{/each}
 
-			<!-- Create Tag Button -->
 			{#if showCreateButton}
-				<Pill
-					icon="plus"
-					label="Neuer Tag"
-					primary
-					onclick={() => goto(resolvedCreateHref)}
-					title="Neuer Tag"
-				/>
+				<Pill primary onclick={() => navigate(resolvedCreateHref)} title={createLabel}>
+					{createLabel}
+				</Pill>
 			{/if}
 		{/if}
 	</div>
@@ -152,12 +145,10 @@
 		align-items: stretch;
 		justify-content: center;
 		pointer-events: none;
-		transition: bottom 0.2s ease;
-		/* Tight wrapper around 44px pills (see bottomChromeHeight in (app)/+layout.svelte). */
+		transition: bottom 200ms ease;
 		height: 64px;
 	}
 
-	/* When filter strip is also visible, stack above it */
 	.tag-strip-wrapper.above-filter-strip {
 		bottom: calc(110px + env(safe-area-inset-bottom, 0px));
 	}
@@ -182,7 +173,6 @@
 		display: none;
 	}
 
-	/* Tag pill — matches Pill base, with drag-source and colored dot. */
 	.tag-pill {
 		display: inline-flex;
 		align-items: center;
@@ -194,31 +184,38 @@
 		font-weight: 500;
 		white-space: nowrap;
 		border: 1px solid hsl(var(--color-border));
-		background: hsl(var(--color-card));
+		background: hsl(var(--color-surface));
 		color: hsl(var(--color-foreground));
-		box-shadow:
-			0 1px 2px hsl(0 0% 0% / 0.05),
-			0 2px 6px hsl(0 0% 0% / 0.04);
 		cursor: pointer;
 		flex-shrink: 0;
-		transition: all 0.15s ease;
+		transition:
+			background-color 150ms ease,
+			border-color 150ms ease,
+			transform 150ms ease;
+		font-family: inherit;
 	}
 
 	.tag-pill:hover {
-		background: hsl(var(--color-surface-hover, var(--color-card)));
+		background: hsl(var(--color-surface-hover));
+	}
+
+	.tag-pill:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
 	}
 
 	.tag-pill.selected {
 		background: var(--tag-color) !important;
 		border-color: var(--tag-color) !important;
+		color: hsl(var(--color-primary-foreground));
 	}
 
 	.tag-pill.selected .tag-dot {
-		background-color: white;
+		background-color: currentColor;
 	}
 
 	.tag-pill.selected .tag-name {
-		color: white;
+		color: inherit;
 	}
 
 	.filter-slot.hidden {
@@ -241,27 +238,21 @@
 	.tag-name {
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		white-space: nowrap;
 	}
 
-	:global(.dark) .tag-name {
-		color: #f3f4f6;
-	}
-
 	.loading-state {
 		font-size: 0.875rem;
 		color: hsl(var(--color-muted-foreground));
 		padding: 0.5rem;
 	}
 
-	/* DnD: Tag is being dragged */
 	:global(.tag-pill.mana-drag-source-active) {
 		opacity: 0.5;
 		transform: scale(0.95) !important;
 	}
 
-	/* DnD: Success flash after drop */
 	:global(.tag-pill.mana-passive-zone-success) {
 		animation: tag-drop-success 400ms ease-out;
 	}
@@ -278,7 +269,6 @@
 		}
 	}
 
-	/* Responsive */
 	@media (max-width: 640px) {
 		.tag-strip-wrapper {
 			left: 0;
diff --git a/packages/shared-ui/src/navigation/UserMenuPanel.svelte b/packages/shared-ui/src/navigation/UserMenuPanel.svelte
index 9da3a8970..381d1e7c4 100644
--- a/packages/shared-ui/src/navigation/UserMenuPanel.svelte
+++ b/packages/shared-ui/src/navigation/UserMenuPanel.svelte
@@ -464,7 +464,7 @@
 		transform: translateX(-50%);
 		display: flex;
 		flex-direction: column;
-		background: hsl(var(--color-card));
+		background: hsl(var(--color-surface));
 		border: 1px solid hsl(var(--color-border));
 		border-radius: 1rem;
 		box-shadow:
@@ -562,7 +562,7 @@
 		padding: 0.375rem 0.625rem;
 		border-radius: 9999px;
 		border: 1px solid hsl(var(--color-border));
-		background: hsl(var(--color-card));
+		background: hsl(var(--color-surface));
 		font-size: 0.8125rem;
 		font-weight: 500;
 		white-space: nowrap;
@@ -572,7 +572,7 @@
 	}
 
 	.chip:hover:not(:disabled) {
-		background: hsl(var(--color-surface-hover, var(--color-muted)));
+		background: hsl(var(--color-surface-hover));
 	}
 
 	.chip:disabled {
@@ -581,22 +581,9 @@
 	}
 
 	.chip.active {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #6366f1)) 20%,
-			white 80%
-		);
-		border-color: var(--pill-primary-color, var(--color-primary-500, rgba(99, 102, 241, 0.4)));
-		color: #1a1a1a;
-	}
-
-	:global(.dark) .chip.active {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #6366f1)) 30%,
-			transparent 70%
-		);
-		color: var(--pill-primary-color, var(--color-primary-500, #6366f1));
+		background: hsl(var(--color-primary) / 0.18);
+		border-color: hsl(var(--color-primary) / 0.4);
+		color: hsl(var(--color-primary));
 	}
 
 	.chip-img {
@@ -614,7 +601,7 @@
 		padding: 0.25rem;
 		border-radius: 9999px;
 		border: 1px solid hsl(var(--color-border));
-		background: hsl(var(--color-card));
+		background: hsl(var(--color-surface));
 		box-shadow:
 			0 1px 2px hsl(0 0% 0% / 0.05),
 			0 2px 6px hsl(0 0% 0% / 0.04);
@@ -637,23 +624,12 @@
 	}
 
 	.segmented-btn:hover:not(.active):not(:disabled) {
-		background: hsl(var(--color-surface-hover, var(--color-muted)));
+		background: hsl(var(--color-surface-hover));
 	}
 
 	.segmented-btn.active {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #6366f1)) 20%,
-			white 80%
-		);
-	}
-
-	:global(.dark) .segmented-btn.active {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #6366f1)) 30%,
-			transparent 70%
-		);
+		background: hsl(var(--color-primary) / 0.2);
+		color: hsl(var(--color-primary));
 	}
 
 	.segmented-btn:disabled {
@@ -677,7 +653,7 @@
 
 	.progress-fill {
 		fill: none;
-		stroke: var(--pill-primary-color, var(--color-primary-500, #6366f1));
+		stroke: hsl(var(--color-primary));
 		stroke-width: 2.5;
 		stroke-linecap: round;
 		transition: stroke-dashoffset 0.3s ease;
@@ -692,8 +668,8 @@
 		padding: 0.625rem 0.875rem;
 		border-radius: 9999px;
 		border: none;
-		background: var(--pill-primary-color, var(--color-primary-500, #6366f1));
-		color: white;
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
 		font-size: 0.875rem;
 		font-weight: 600;
 		cursor: pointer;
@@ -719,21 +695,20 @@
 		padding: 0.5rem 0.875rem;
 		border-radius: 9999px;
 		border: 1px solid hsl(var(--color-border));
-		background: hsl(var(--color-card));
-		color: #dc2626;
+		background: hsl(var(--color-surface));
+		color: hsl(var(--color-error));
 		font-size: 0.8125rem;
 		font-weight: 500;
 		cursor: pointer;
-		transition: all 0.15s;
+		transition:
+			background-color 150ms,
+			color 150ms;
 		justify-content: center;
-	}
-
-	:global(.dark) .logout-btn {
-		color: #ef4444;
+		font-family: inherit;
 	}
 
 	.logout-btn:hover {
-		background: hsl(var(--color-surface-hover, var(--color-muted)));
+		background: hsl(var(--color-surface-hover));
 	}
 
 	/* Mobile: bottom sheet */
diff --git a/packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte b/packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte
deleted file mode 100644
index 6a3f543e9..000000000
--- a/packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte
+++ /dev/null
@@ -1,190 +0,0 @@
-<script lang="ts">
-	import { slide } from 'svelte/transition';
-	import type { Snippet } from 'svelte';
-	import { SlidersHorizontal } from '@mana/shared-icons';
-
-	interface Props {
-		/** Whether the toolbar is collapsed */
-		isCollapsed?: boolean;
-		/** Called when collapsed state changes */
-		onCollapsedChange?: (isCollapsed: boolean) => void;
-		/** Whether in sidebar mode (affects positioning) */
-		isSidebarMode?: boolean;
-		/** Bottom offset from viewport bottom (default: '70px') */
-		bottomOffset?: string;
-		/** Sidebar mode bottom offset (default: '0px') */
-		sidebarBottomOffset?: string;
-		/** Panel height when expanded (default: '70px') */
-		panelHeight?: string;
-		/** FAB tooltip when collapsed */
-		collapsedTitle?: string;
-		/** FAB tooltip when expanded */
-		expandedTitle?: string;
-		/** Custom collapsed icon snippet */
-		collapsedIcon?: Snippet;
-		/** Custom expanded icon snippet */
-		expandedIcon?: Snippet;
-		/** Panel content (required) */
-		children: Snippet;
-		/** Optional right-side content (e.g., layout toggle) */
-		rightActions?: Snippet;
-	}
-
-	let {
-		isCollapsed = true,
-		onCollapsedChange,
-		isSidebarMode = false,
-		bottomOffset = '70px',
-		sidebarBottomOffset = '0px',
-		panelHeight = '70px',
-		collapsedTitle = 'Optionen',
-		expandedTitle = 'Schließen',
-		collapsedIcon,
-		expandedIcon,
-		children,
-		rightActions,
-	}: Props = $props();
-
-	function toggleToolbar() {
-		onCollapsedChange?.(!isCollapsed);
-	}
-</script>
-
-<!-- FAB Button - positioned next to InputBar -->
-<div
-	class="fab-container"
-	class:sidebar-mode={isSidebarMode}
-	class:expanded={!isCollapsed}
-	style="--bottom-offset: {isSidebarMode
-		? sidebarBottomOffset
-		: bottomOffset}; --panel-height: {panelHeight};"
->
-	<button
-		onclick={toggleToolbar}
-		class="toolbar-fab glass-pill"
-		class:active={!isCollapsed}
-		title={isCollapsed ? collapsedTitle : expandedTitle}
-	>
-		<SlidersHorizontal size={20} class="fab-icon" />
-	</button>
-</div>
-
-<!-- Expanded Toolbar Panel - below InputBar, pushes content up -->
-{#if !isCollapsed}
-	<div
-		class="toolbar-bar glass-panel"
-		class:sidebar-mode={isSidebarMode}
-		style="--bottom-offset: {isSidebarMode ? sidebarBottomOffset : bottomOffset};"
-		transition:slide={{ duration: 200 }}
-	>
-		<div class="toolbar-content">
-			{@render children()}
-
-			{#if rightActions}
-				<div class="toolbar-divider"></div>
-				{@render rightActions()}
-			{/if}
-		</div>
-	</div>
-{/if}
-
-<style>
-	/* FAB Container - positioned next to InputBar (aligned with input-container) */
-	.fab-container {
-		position: fixed;
-		bottom: calc(
-			var(--bottom-offset, 70px) + 9px + env(safe-area-inset-bottom, 0px)
-		); /* base offset + 9px to align with input-container */
-		right: calc(50% - 350px - 70px); /* Right of InputBar (max-width 700px / 2 + gap) */
-		z-index: 91; /* Above InputBar (90) */
-		pointer-events: none;
-		transition: bottom 0.2s ease;
-	}
-
-	/* When expanded, move FAB up with InputBar */
-	.fab-container.expanded {
-		bottom: calc(
-			var(--bottom-offset, 70px) + var(--panel-height, 70px) + 9px +
-				env(safe-area-inset-bottom, 0px)
-		);
-	}
-
-	/* Responsive positioning */
-	@media (max-width: 900px) {
-		.fab-container {
-			right: 1rem;
-		}
-	}
-
-	/* Toolbar Bar - full width below InputBar */
-	.toolbar-bar {
-		position: fixed;
-		bottom: calc(var(--bottom-offset, 70px) + env(safe-area-inset-bottom, 0px));
-		left: 0;
-		right: 0;
-		z-index: 89; /* Below InputBar (90) */
-		display: flex;
-		justify-content: center;
-		padding: 0.5rem 1rem;
-	}
-
-	.toolbar-content {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 1rem;
-		background: hsl(var(--color-surface) / 0.92);
-		backdrop-filter: blur(16px);
-		-webkit-backdrop-filter: blur(16px);
-		border: 1px solid hsl(var(--color-border));
-		box-shadow: 0 -2px 16px hsl(var(--color-foreground) / 0.08);
-		border-radius: 1rem;
-		white-space: nowrap;
-		max-width: calc(100vw - 2rem);
-		/* Allow dropdowns to overflow */
-		overflow: visible;
-	}
-
-	/* Solid theme-tokened pill (formerly the "glass" frosted pill). */
-	.glass-pill {
-		background: hsl(var(--color-card));
-		border: 1px solid hsl(var(--color-border));
-		box-shadow:
-			0 1px 2px hsl(0 0% 0% / 0.05),
-			0 2px 6px hsl(0 0% 0% / 0.04);
-		border-radius: 9999px;
-	}
-
-	.glass-panel {
-		background: transparent;
-	}
-
-	/* FAB Button - same height as InputBar (54px) */
-	.toolbar-fab {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 54px;
-		height: 54px;
-		cursor: pointer;
-		border: none;
-		transition: all 0.2s ease;
-		pointer-events: auto;
-	}
-
-	.toolbar-fab:hover {
-		transform: scale(1.05);
-		box-shadow: 0 4px 12px hsl(var(--color-foreground) / 0.15);
-	}
-
-	.toolbar-fab.active {
-		background: hsl(var(--color-muted));
-	}
-
-	.toolbar-divider {
-		width: 1px;
-		height: 1.5rem;
-		background: hsl(var(--color-border));
-		margin: 0 0.25rem;
-	}
-</style>
diff --git a/packages/shared-ui/src/navigation/expandable-toolbar/index.ts b/packages/shared-ui/src/navigation/expandable-toolbar/index.ts
deleted file mode 100644
index db710aed6..000000000
--- a/packages/shared-ui/src/navigation/expandable-toolbar/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as ExpandableToolbar } from './ExpandableToolbar.svelte';
-export type { ExpandableToolbarProps } from './types';
diff --git a/packages/shared-ui/src/navigation/expandable-toolbar/types.ts b/packages/shared-ui/src/navigation/expandable-toolbar/types.ts
deleted file mode 100644
index fec554943..000000000
--- a/packages/shared-ui/src/navigation/expandable-toolbar/types.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { Snippet } from 'svelte';
-
-export interface ExpandableToolbarProps {
-	/** Whether the toolbar is collapsed */
-	isCollapsed?: boolean;
-	/** Called when collapsed state changes */
-	onCollapsedChange?: (isCollapsed: boolean) => void;
-	/** Whether in sidebar mode (affects positioning) */
-	isSidebarMode?: boolean;
-	/** Bottom offset from viewport bottom (default: '70px') */
-	bottomOffset?: string;
-	/** Sidebar mode bottom offset (default: '0px') */
-	sidebarBottomOffset?: string;
-	/** Panel height when expanded (default: '70px') */
-	panelHeight?: string;
-	/** FAB tooltip when collapsed */
-	collapsedTitle?: string;
-	/** FAB tooltip when expanded */
-	expandedTitle?: string;
-	/** Custom collapsed icon snippet */
-	collapsedIcon?: Snippet;
-	/** Custom expanded icon snippet */
-	expandedIcon?: Snippet;
-	/** Panel content (required) */
-	children: Snippet;
-	/** Optional right-side content (e.g., layout toggle) */
-	rightActions?: Snippet;
-}
diff --git a/packages/shared-ui/src/navigation/index.ts b/packages/shared-ui/src/navigation/index.ts
index a3231b7cb..516a9bada 100644
--- a/packages/shared-ui/src/navigation/index.ts
+++ b/packages/shared-ui/src/navigation/index.ts
@@ -1,55 +1,34 @@
-export { default as NavLink } from './NavLink.svelte';
-export { default as Navbar } from './Navbar.svelte';
-export { default as Sidebar } from './Sidebar.svelte';
-export { default as SidebarSection } from './SidebarSection.svelte';
 export { default as Pill } from './Pill.svelte';
+export { default as PillTabGroup } from './PillTabGroup.svelte';
+export type { PillTabOption } from './PillTabGroup.svelte';
 export { default as ManaLogoIcon } from './ManaLogoIcon.svelte';
-export { default as PillNavigation } from './PillNavigation.svelte';
+export { default as Navbar } from './Navbar.svelte';
+export { default as NavLink } from './NavLink.svelte';
 export { default as PillDropdown } from './PillDropdown.svelte';
+export type { PillDropdownItem } from './PillDropdown.svelte';
 export { default as PillDropdownBar } from './PillDropdownBar.svelte';
+export { default as TagStrip } from './TagStrip.svelte';
+
+export { createGlobalSpotlightState } from './useGlobalSpotlight.svelte';
+
+export { default as PillNavigation } from './PillNavigation.svelte';
+export { default as PillTagSelector } from './PillTagSelector.svelte';
 export { default as AppDrawer } from './AppDrawer.svelte';
 export { default as UserMenuPanel } from './UserMenuPanel.svelte';
 export { default as GlobalSpotlight } from './GlobalSpotlight.svelte';
-export { createGlobalSpotlightState } from './useGlobalSpotlight.svelte';
-export {
-	createAppNavigationStore,
-	getFavoriteApps,
-	getRecentApps,
-	getUsageCounts,
-	toggleFavoriteApp,
-	recordAppVisit,
-	clearRecentApps,
-} from './appNavigationStore.svelte';
-export type { RecentAppEntry } from './appNavigationStore.svelte';
-export { default as PillTabGroup } from './PillTabGroup.svelte';
-export { default as PillTagSelector } from './PillTagSelector.svelte';
-export { default as PillTimeRangeSelector } from './PillTimeRangeSelector.svelte';
-export { default as PillViewSwitcher } from './PillViewSwitcher.svelte';
-export { default as PillToolbar } from './PillToolbar.svelte';
-export { default as PillToolbarButton } from './PillToolbarButton.svelte';
-export { default as PillToolbarDivider } from './PillToolbarDivider.svelte';
-export { default as TagStrip } from './TagStrip.svelte';
-export { ExpandableToolbar } from './expandable-toolbar';
-export type { ExpandableToolbarProps } from './expandable-toolbar';
+
 export type {
-	NavItem,
-	NavbarProps,
-	SidebarProps,
-	NavLinkProps,
-	KeyboardShortcut,
 	PillNavItem,
-	PillDropdownItem,
+	PillBarConfig,
 	PillAppItem,
-	PillNavigationProps,
-	PillTabOption,
-	PillTabGroupConfig,
+	PillDivider,
 	PillTagItem,
 	PillTagSelectorConfig,
-	PillDivider,
+	PillTabGroupConfig,
 	PillNavElement,
-	PillBarConfig,
 	SpotlightAction,
 	ContentSearchResult,
 	ContentSearchGroup,
 	ContentSearcher,
+	KeyboardShortcut,
 } from './types';
diff --git a/packages/shared-ui/src/navigation/phosphor-icon-map.ts b/packages/shared-ui/src/navigation/phosphor-icon-map.ts
deleted file mode 100644
index 8edf55d00..000000000
--- a/packages/shared-ui/src/navigation/phosphor-icon-map.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import {
-	Archive,
-	Bell,
-	Buildings,
-	CalendarBlank,
-	CaretDown,
-	ChartBar,
-	ChatCircle,
-	Check,
-	CheckCircle,
-	CheckSquare,
-	Clock,
-	Cloud,
-	Columns,
-	Compass,
-	CreditCard,
-	File,
-	FileText,
-	Fire,
-	Folder,
-	Gear,
-	Gift,
-	Globe,
-	GridFour,
-	Heart,
-	HeartHalf,
-	House,
-	Key,
-	List,
-	MagnifyingGlass,
-	Microphone,
-	Moon,
-	MusicNote,
-	MusicNotes,
-	Palette,
-	Playlist,
-	Plus,
-	Question,
-	Robot,
-	Scales,
-	ShareFat,
-	ShareNetwork,
-	Shield,
-	SignIn,
-	SignOut,
-	Sparkle,
-	Spiral,
-	Cards,
-	Sun,
-	Tag,
-	Target,
-	Timer,
-	Trash,
-	Tray,
-	Upload,
-	User,
-	Users,
-	Waveform,
-	X,
-} from '@mana/shared-icons';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const phosphorIcons: Record<string, any> = {
-	home: House,
-	users: Users,
-	user: User,
-	tag: Tag,
-	heart: Heart,
-	settings: Gear,
-	chat: ChatCircle,
-	'help-circle': Question,
-	help: Question,
-	'share-2': ShareNetwork,
-	bell: Bell,
-	clock: Clock,
-	timer: Timer,
-	target: Target,
-	globe: Globe,
-	inbox: Tray,
-	check: Check,
-	checkCircle: CheckCircle,
-	'check-square': CheckSquare,
-	plus: Plus,
-	columns: Columns,
-	kanban: Columns,
-	mic: Microphone,
-	calendar: CalendarBlank,
-	folder: Folder,
-	archive: Archive,
-	upload: Upload,
-	music: MusicNote,
-	document: File,
-	chart: ChartBar,
-	'bar-chart-3': ChartBar,
-	search: MagnifyingGlass,
-	list: List,
-	compass: Compass,
-	moon: Moon,
-	sun: Sun,
-	login: SignIn,
-	logout: SignOut,
-	chevronDown: CaretDown,
-	menu: List,
-	fire: Fire,
-	grid: GridFour,
-	gridSmall: GridFour,
-	palette: Palette,
-	creditCard: CreditCard,
-	building: Buildings,
-	scale: Scales,
-	robot: Robot,
-	key: Key,
-	'heart-half': HeartHalf,
-	shield: Shield,
-	gift: Gift,
-	'music-notes': MusicNotes,
-	playlist: Playlist,
-	waveform: Waveform,
-	'file-text': FileText,
-	sparkle: Sparkle,
-	sparkles: Sparkle,
-	spiral: Spiral,
-	share: ShareFat,
-	trash: Trash,
-	cloud: Cloud,
-	x: X,
-	close: X,
-	tabs: Cards,
-	cards: Cards,
-};
diff --git a/packages/shared-ui/src/navigation/types.ts b/packages/shared-ui/src/navigation/types.ts
index e102cc40c..ec5085d63 100644
--- a/packages/shared-ui/src/navigation/types.ts
+++ b/packages/shared-ui/src/navigation/types.ts
@@ -1,304 +1,93 @@
-import type { Snippet } from 'svelte';
+/**
+ * Shared navigation types — re-export from individual components +
+ * extras for PillNavigation / GlobalSpotlight that don't yet have a
+ * portable Svelte component.
+ */
 
-export interface KeyboardShortcut {
-	/** Key combination (e.g., ['Ctrl', 'S'] or ['Cmd', 'Shift', 'P']) */
-	keys: string[];
-	/** Description of what the shortcut does */
-	label: string;
-	/** Category for grouping (optional) */
-	category?: string;
-}
+import type { PillDropdownItem } from './PillDropdown.svelte';
 
-// ============ Pill Navigation Types ============
+export type { PillDropdownItem };
+export type { PillTabOption } from './PillTabGroup.svelte';
 
 export interface PillNavItem {
-	/** Display label for the navigation item */
 	label: string;
-	/** URL to navigate to (ignored if onClick is provided) */
 	href: string;
-	/** Icon name (predefined) or 'mana' for special mana icon */
-	icon?: string;
-	/** Custom SVG icon HTML (for custom icons) */
+	/** Inline SVG path string (16×16 viewBox). */
 	iconSvg?: string;
-	/** Click handler - if provided, prevents navigation and calls this instead */
+	/** v0.1.x-Compat: Icon-Namen-String oder 'mana'. Wird intern auf iconSvg gemappt wo möglich. */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	icon?: any;
 	onClick?: () => void;
-	/** Whether this item is currently active/selected (for toggle buttons) */
 	active?: boolean;
-	/** Right-click handler for context menu */
 	onContextMenu?: (e: MouseEvent) => void;
-	/** Show only the icon (hide the label). Label is still used for aria-label/title. */
 	iconOnly?: boolean;
 }
 
 /** Config passed when a PillNavigation dropdown should surface as a bar
  *  in the host's bottom stack instead of an in-place popover. */
 export interface PillBarConfig {
-	/** Stable id (e.g. 'theme', 'ai', 'sync', 'user') */
 	id: string;
-	/** Title shown at the start of the bar */
 	label: string;
-	/** Icon name shown next to the title */
-	icon?: string;
-	/** Items to render as pills */
+	iconSvg?: string;
+	/** v0.1.x-Compat: Icon-Namen-String. */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	icon?: any;
 	items: PillDropdownItem[];
-	/** Progress value 0–1. When set, a progress ring is shown on the trigger pill. */
 	progress?: number;
 }
 
-export interface PillDropdownItem {
-	/** Unique identifier */
-	id: string;
-	/** Display label */
-	label: string;
-	/** Icon name (SVG path) */
-	icon?: string;
-	/** Image URL for icon (data URL or regular URL) */
-	imageUrl?: string;
-	/** Click handler (receives optional MouseEvent for modifier key detection) */
-	onClick?: (event?: MouseEvent) => void;
-	/** Whether item is disabled */
-	disabled?: boolean;
-	/** Whether item should be styled as danger/destructive */
-	danger?: boolean;
-	/** Whether item should be styled prominently with the primary color */
-	primary?: boolean;
-	/** Whether this item is currently active/selected */
-	active?: boolean;
-	/** Whether this item is a divider */
-	divider?: boolean;
-	/** Nested submenu items */
-	submenu?: PillDropdownItem[];
-	/** Group id — items sharing the same group are rendered as a segmented toggle pill */
-	group?: string;
-	/** Progress value 0–1. When set, a circular progress ring is rendered around the icon. */
-	progress?: number;
-	/** Whether to show a split button for opening in panel */
-	showSplitButton?: boolean;
-	/** Click handler for split button */
-	onSplitClick?: () => void;
-}
-
 export interface PillAppItem {
-	/** Unique identifier (app id) */
 	id: string;
-	/** App display name */
 	name: string;
-	/** App URL */
 	url: string;
-	/** App icon (data URL or regular URL) */
 	icon?: string;
-	/** App brand color */
 	color?: string;
-	/** Whether this is the current app */
 	isCurrent?: boolean;
 }
 
-// ============ Pill Tab Group Types ============
-
-export interface PillTabOption {
-	/** Unique identifier for the tab */
-	id: string;
-	/** Icon name (predefined) */
-	icon?: string;
-	/** Custom SVG icon HTML */
-	iconSvg?: string;
-	/** Optional label (shown in sidebar mode) */
-	label?: string;
-	/** Tooltip text */
-	title?: string;
-	/** Whether this option is disabled */
-	disabled?: boolean;
-}
-
-export interface PillTabGroupConfig {
-	/** Discriminator for type checking */
-	type: 'tabs';
-	/** Tab options */
-	options: PillTabOption[];
-	/** Currently selected tab id */
-	value: string;
-	/** Called when selection changes */
-	onChange: (id: string) => void;
-	/** Optional section label (shown above in sidebar mode) */
-	sectionLabel?: string;
-	/** Called on right-click (context menu) - receives click coordinates */
-	onContextMenu?: (x: number, y: number) => void;
-}
-
 export interface PillDivider {
-	/** Discriminator for type checking */
 	type: 'divider';
 }
 
 export interface PillTagItem {
-	/** Unique tag identifier */
 	id: string;
-	/** Tag display name */
 	name: string;
-	/** Tag color (hex) */
 	color: string;
 }
 
 export interface PillTagSelectorConfig {
-	/** Discriminator for type checking */
 	type: 'tag-selector';
-	/** Available tags */
 	tags: PillTagItem[];
-	/** Currently selected tag IDs */
 	selectedIds: string[];
-	/** Called when a tag is toggled */
 	onToggle: (tagId: string) => void;
-	/** Called when selection is cleared */
 	onClear: () => void;
-	/** Called when "New Tag" is clicked (optional) */
 	onCreate?: () => void;
-	/** Loading state */
 	loading?: boolean;
-	/** Label for the selector button */
 	label?: string;
 }
 
+export interface PillTabGroupConfig {
+	type: 'tabs';
+	options: import('./PillTabGroup.svelte').PillTabOption[];
+	value: string;
+	onChange: (id: string) => void;
+	sectionLabel?: string;
+	onContextMenu?: (x: number, y: number) => void;
+}
+
 /** Union type for all elements that can appear in PillNavigation */
 export type PillNavElement = PillNavItem | PillTabGroupConfig | PillDivider | PillTagSelectorConfig;
 
-export interface PillNavigationProps {
-	/** Navigation items */
-	items: PillNavItem[];
-	/** Current active path */
-	currentPath?: string;
-	/** Logo snippet */
-	logo?: Snippet;
-	/** App name */
-	appName?: string;
-	/** Home/default route */
-	homeRoute?: string;
-	/** Called when logout is clicked */
-	onLogout?: () => void;
-	/** Called when theme toggle is clicked */
-	onToggleTheme?: () => void;
-	/** Whether dark mode is active */
-	isDark?: boolean;
-	/** Whether navigation is collapsed (controlled) */
-	isCollapsed?: boolean;
-	/** Called when collapsed state changes */
-	onCollapsedChange?: (isCollapsed: boolean) => void;
-	/** Language dropdown items */
-	languageItems?: PillDropdownItem[];
-	/** Current language label */
-	currentLanguageLabel?: string;
-	/** Show language switcher */
-	showLanguageSwitcher?: boolean;
-	/** Show theme toggle */
-	showThemeToggle?: boolean;
-	/** Show AI tier selector dropdown */
-	showAiTierSelector?: boolean;
-	/** AI tier dropdown items (each representing a toggleable tier) */
-	aiTierItems?: PillDropdownItem[];
-	/** Current AI tier label, e.g. "Browser" or "Server" */
-	currentAiTierLabel?: string;
-	/** Primary color for active state */
-	primaryColor?: string;
-	/** Elements to prepend before nav items (tab groups, dividers, nav items) */
-	prependElements?: PillNavElement[];
-	/** Additional elements to show after nav items (tab groups, dividers) */
-	elements?: PillNavElement[];
-	/**
-	 * Snippet rendered at the very start of the pill bar, before the app
-	 * switcher and any prepend elements. Lets the host drop an arbitrary
-	 * Svelte component (e.g. a Space switcher) into the bar without
-	 * adding another dedicated prop surface. Keep the rendered content
-	 * short — it's first-in-line real estate.
-	 */
-	startSlot?: Snippet;
-	/** Bottom offset from viewport bottom (default: '0px'). Use to position above other fixed bars. */
-	bottomOffset?: string;
-}
-
-export interface NavItem {
-	/** Display label for the navigation item */
-	label: string;
-	/** URL to navigate to */
-	href: string;
-	/** Icon - can be emoji, SVG path, or component name */
-	icon?: string;
-	/** Whether this item is currently active */
-	active?: boolean;
-	/** Badge text (e.g., notification count) */
-	badge?: string | number;
-	/** Whether the item is disabled */
-	disabled?: boolean;
-	/** Keyboard shortcut hint */
-	shortcut?: string;
-}
-
-export interface NavbarProps {
-	/** Navigation items to display */
-	items: NavItem[];
-	/** Logo snippet or component */
-	logo?: Snippet;
-	/** App name to display next to logo */
-	appName?: string;
-	/** Current pathname for active state detection */
-	currentPath?: string;
-	/** User email to display */
-	userEmail?: string;
-	/** Show mobile menu */
-	showMobile?: boolean;
-	/** Called when sign out is clicked */
-	onSignOut?: () => void;
-	/** Additional CSS classes */
-	class?: string;
-}
-
-export interface SidebarProps {
-	/** Navigation items to display */
-	items: NavItem[];
-	/** Logo snippet or component */
-	logo?: Snippet;
-	/** App name to display */
-	appName?: string;
-	/** Current pathname for active state detection */
-	currentPath?: string;
-	/** Whether sidebar is minimized/collapsed */
-	minimized?: boolean;
-	/** Called when minimize toggle is clicked */
-	onToggleMinimize?: () => void;
-	/** User email to display */
-	userEmail?: string;
-	/** Called when sign out is clicked */
-	onSignOut?: () => void;
-	/** Show theme toggle */
-	showThemeToggle?: boolean;
-	/** Called when theme toggle is clicked */
-	onToggleTheme?: () => void;
-	/** Current theme mode (for icon display) */
-	isDark?: boolean;
-	/** Additional CSS classes */
-	class?: string;
-	/** Footer items (shortcuts, etc.) */
-	footerItems?: NavItem[];
-}
-
-export interface NavLinkProps {
-	/** Navigation item data */
-	item: NavItem;
-	/** Whether the link is active */
-	active?: boolean;
-	/** Display variant */
-	variant?: 'default' | 'sidebar' | 'mobile' | 'pill';
-	/** Whether in minimized sidebar mode (show tooltip) */
-	minimized?: boolean;
-	/** Additional CSS classes */
-	class?: string;
-}
-
 // ============ Global Spotlight Types ============
 
 export interface SpotlightAction {
 	id: string;
 	label: string;
 	description?: string;
-	icon?: string;
+	iconSvg?: string;
+	/** v0.1.x-Compat: Phosphor-Component oder Icon-Namen. */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	icon?: any;
 	shortcut?: string;
 	category?: string;
 	onExecute: () => void;
@@ -326,3 +115,11 @@ export interface ContentSearchGroup {
 }
 
 export type ContentSearcher = (query: string, signal: AbortSignal) => Promise<ContentSearchGroup[]>;
+
+// ============ Keyboard Shortcuts ============
+
+export interface KeyboardShortcut {
+	keys: string[];
+	label: string;
+	category?: string;
+}
diff --git a/packages/shared-ui/src/onboarding/MiniOnboardingModal.svelte b/packages/shared-ui/src/onboarding/MiniOnboardingModal.svelte
deleted file mode 100644
index 7fa4b7f83..000000000
--- a/packages/shared-ui/src/onboarding/MiniOnboardingModal.svelte
+++ /dev/null
@@ -1,208 +0,0 @@
-<script lang="ts">
-	import type {
-		AppOnboardingStore,
-		AppOnboardingSelectStep,
-		AppOnboardingToggleStep,
-	} from './types';
-
-	interface Props {
-		store: AppOnboardingStore;
-		appName: string;
-		appEmoji?: string;
-	}
-
-	let { store, appName, appEmoji = '🚀' }: Props = $props();
-
-	function handleNext() {
-		if (store.isLastStep) {
-			store.complete();
-		} else {
-			store.next();
-		}
-	}
-
-	function handlePrev() {
-		store.prev();
-	}
-
-	function handleSkip() {
-		store.skip();
-	}
-
-	function selectOption(stepId: string, optionId: string) {
-		store.setPreference(stepId, optionId);
-	}
-
-	function toggleOption(stepId: string) {
-		const currentValue = store.preferences[stepId] ?? false;
-		store.setPreference(stepId, !currentValue);
-	}
-</script>
-
-<!-- Backdrop -->
-<div class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
-	<!-- Modal Container -->
-	<div
-		class="bg-surface-elevated-2 rounded-2xl shadow-2xl w-full max-w-md max-h-[80vh] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200 border border-border"
-	>
-		<!-- Header -->
-		<header class="border-b px-5 py-4 flex-shrink-0">
-			<div class="flex items-center justify-between mb-3">
-				<div class="flex items-center gap-3">
-					<div
-						class="h-10 w-10 rounded-xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center"
-					>
-						<span class="text-xl">{appEmoji}</span>
-					</div>
-					<div>
-						<h1 class="font-semibold text-sm">{appName} einrichten</h1>
-						<p class="text-xs text-muted-foreground">
-							Schritt {store.currentStep + 1} von {store.totalSteps}
-						</p>
-					</div>
-				</div>
-				<button
-					onclick={handleSkip}
-					class="text-xs text-muted-foreground hover:text-foreground transition-colors"
-				>
-					Überspringen
-				</button>
-			</div>
-
-			<!-- Step dots -->
-			<div class="flex items-center gap-1.5">
-				{#each Array(store.totalSteps) as _, i}
-					<div
-						class="h-1.5 rounded-full transition-all duration-300 {i <= store.currentStep
-							? 'bg-primary'
-							: 'bg-muted'} {i === store.currentStep ? 'w-6' : 'w-1.5'}"
-					></div>
-				{/each}
-			</div>
-		</header>
-
-		<!-- Step content -->
-		<main class="flex-1 overflow-y-auto px-5 py-6">
-			{#if store.currentStepConfig}
-				{@const step = store.currentStepConfig}
-
-				<div class="text-center">
-					<!-- Question -->
-					<h2 class="text-lg font-bold mb-2">{step.question}</h2>
-					{#if step.description}
-						<p class="text-sm text-muted-foreground mb-5">{step.description}</p>
-					{/if}
-
-					<!-- Step content based on type -->
-					<div class="max-w-sm mx-auto">
-						{#if step.type === 'select'}
-							{@const selectStep = step as AppOnboardingSelectStep}
-							<div class="space-y-2">
-								{#each selectStep.options as option}
-									{@const isSelected = store.preferences[step.id] === option.id}
-									<button
-										onclick={() => selectOption(step.id, option.id)}
-										class="w-full p-3 rounded-xl border-2 transition-all text-left {isSelected
-											? 'border-primary bg-primary/15 shadow-sm shadow-primary/20'
-											: 'border-border hover:border-primary/50 bg-surface-elevated-1'}"
-									>
-										<div class="flex items-center gap-3">
-											{#if option.emoji}
-												<span class="text-xl">{option.emoji}</span>
-											{/if}
-											<div class="flex-1">
-												<p class="font-medium text-sm">{option.label}</p>
-												{#if option.description}
-													<p class="text-xs text-muted-foreground">{option.description}</p>
-												{/if}
-											</div>
-											{#if isSelected}
-												<svg
-													class="w-5 h-5 text-primary flex-shrink-0"
-													fill="none"
-													viewBox="0 0 24 24"
-													stroke="currentColor"
-													stroke-width="2.5"
-												>
-													<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-												</svg>
-											{/if}
-										</div>
-									</button>
-								{/each}
-							</div>
-						{:else if step.type === 'toggle'}
-							{@const toggleStep = step as AppOnboardingToggleStep}
-							{@const isEnabled = store.preferences[step.id] ?? toggleStep.defaultValue ?? false}
-							<button
-								onclick={() => toggleOption(step.id)}
-								class="w-full p-4 rounded-xl border-2 transition-all {isEnabled
-									? 'border-primary bg-primary/10'
-									: 'border-border bg-surface-elevated-1'}"
-							>
-								<div class="flex items-center justify-between">
-									<span class="font-medium text-sm">
-										{isEnabled
-											? toggleStep.enabledLabel || 'Aktiviert'
-											: toggleStep.disabledLabel || 'Deaktiviert'}
-									</span>
-									<div
-										class="relative w-11 h-6 rounded-full transition-colors {isEnabled
-											? 'bg-primary'
-											: 'bg-muted'}"
-									>
-										<div
-											class="absolute top-1 left-1 w-4 h-4 rounded-full bg-white shadow transition-transform {isEnabled
-												? 'translate-x-5'
-												: 'translate-x-0'}"
-										></div>
-									</div>
-								</div>
-							</button>
-						{:else if step.type === 'info'}
-							{#if step.bullets}
-								<ul class="text-left space-y-2">
-									{#each step.bullets as bullet}
-										<li class="flex items-start gap-2 text-sm">
-											<span class="text-primary mt-0.5">•</span>
-											<span class="text-muted-foreground">{bullet}</span>
-										</li>
-									{/each}
-								</ul>
-							{/if}
-						{/if}
-					</div>
-				</div>
-			{/if}
-		</main>
-
-		<!-- Footer with navigation -->
-		<footer class="border-t px-5 py-3 flex-shrink-0">
-			<div class="flex justify-between">
-				{#if store.isFirstStep}
-					<div></div>
-				{:else}
-					<button
-						onclick={handlePrev}
-						class="px-4 py-2 text-sm border rounded-lg hover:bg-muted transition-colors"
-					>
-						Zurück
-					</button>
-				{/if}
-				<button
-					onclick={handleNext}
-					disabled={store.saving}
-					class="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium disabled:opacity-50"
-				>
-					{#if store.saving}
-						Speichern...
-					{:else if store.isLastStep}
-						Fertig
-					{:else}
-						Weiter
-					{/if}
-				</button>
-			</div>
-		</footer>
-	</div>
-</div>
diff --git a/packages/shared-ui/src/onboarding/create-app-onboarding.svelte.ts b/packages/shared-ui/src/onboarding/create-app-onboarding.svelte.ts
deleted file mode 100644
index 3b97cec2f..000000000
--- a/packages/shared-ui/src/onboarding/create-app-onboarding.svelte.ts
+++ /dev/null
@@ -1,222 +0,0 @@
-import type {
-	AppOnboardingConfig,
-	AppOnboardingStore,
-	AppOnboardingPreferences,
-	AppOnboardingStep,
-} from './types';
-
-const ONBOARDING_COMPLETED_KEY = 'onboarding_completed';
-const ONBOARDING_PREFERENCES_KEY = 'onboarding_preferences';
-
-/**
- * Create an app-specific onboarding store
- *
- * This factory creates a store that:
- * - Checks if onboarding was already completed (via deviceSettings)
- * - Manages step navigation and preference collection
- * - Saves completion state and preferences to deviceSettings
- *
- * @example
- * ```typescript
- * import { createAppOnboardingStore } from '@mana/shared-app-onboarding';
- *
- * const calendarOnboarding = createAppOnboardingStore({
- *   appId: 'calendar',
- *   steps: [
- *     {
- *       id: 'weekStart',
- *       type: 'select',
- *       question: 'Wann beginnt deine Woche?',
- *       emoji: '📅',
- *       options: [
- *         { id: 'monday', label: 'Montag', emoji: '1️⃣' },
- *         { id: 'sunday', label: 'Sonntag', emoji: '7️⃣' },
- *       ],
- *       defaultValue: 'monday',
- *     },
- *   ],
- *   userSettings,
- * });
- * ```
- */
-export function createAppOnboardingStore(config: AppOnboardingConfig): AppOnboardingStore {
-	const { appId, steps, userSettings, onComplete, onSkip } = config;
-
-	// Build initial preferences from step defaults before creating state
-	const initialPreferences: AppOnboardingPreferences = {};
-	for (const step of steps) {
-		if ((step.type === 'select' || step.type === 'toggle') && step.defaultValue !== undefined) {
-			initialPreferences[step.id] = step.defaultValue;
-		}
-	}
-
-	// State
-	let currentStep = $state(0);
-	let preferences = $state<AppOnboardingPreferences>(initialPreferences);
-	let saving = $state(false);
-	let completed = $state(false);
-
-	// Derived values
-	const totalSteps = $derived(steps.length);
-	const isFirstStep = $derived(currentStep === 0);
-	const isLastStep = $derived(currentStep === steps.length - 1);
-	const progress = $derived(((currentStep + 1) / steps.length) * 100);
-	const currentStepConfig = $derived<AppOnboardingStep | undefined>(steps[currentStep]);
-
-	/**
-	 * Check if onboarding was already completed
-	 */
-	function checkCompleted(): boolean {
-		const deviceAppSettings = userSettings.getDeviceAppSettings();
-		return deviceAppSettings[ONBOARDING_COMPLETED_KEY] === true;
-	}
-
-	// Derived: should show modal
-	const shouldShow = $derived(!completed && !checkCompleted() && userSettings.loaded);
-
-	/**
-	 * Go to next step
-	 */
-	function next(): void {
-		if (currentStep < steps.length - 1) {
-			currentStep++;
-		}
-	}
-
-	/**
-	 * Go to previous step
-	 */
-	function prev(): void {
-		if (currentStep > 0) {
-			currentStep--;
-		}
-	}
-
-	/**
-	 * Go to specific step
-	 */
-	function goToStep(index: number): void {
-		if (index >= 0 && index < steps.length) {
-			currentStep = index;
-		}
-	}
-
-	/**
-	 * Set a preference value
-	 */
-	function setPreference(key: string, value: unknown): void {
-		preferences = { ...preferences, [key]: value };
-	}
-
-	/**
-	 * Complete the onboarding and save preferences
-	 */
-	async function complete(): Promise<void> {
-		saving = true;
-		try {
-			// Save to deviceSettings
-			await userSettings.updateDeviceAppSettings({
-				[ONBOARDING_COMPLETED_KEY]: true,
-				[ONBOARDING_PREFERENCES_KEY]: preferences,
-				...preferences, // Also spread preferences at top level for easy access
-			});
-
-			completed = true;
-
-			// Call completion callback
-			if (onComplete) {
-				await onComplete(preferences);
-			}
-		} finally {
-			saving = false;
-		}
-	}
-
-	/**
-	 * Skip the onboarding entirely
-	 */
-	async function skip(): Promise<void> {
-		saving = true;
-		try {
-			// Mark as completed but don't save preferences
-			await userSettings.updateDeviceAppSettings({
-				[ONBOARDING_COMPLETED_KEY]: true,
-				onboarding_skipped: true,
-			});
-
-			completed = true;
-
-			// Call skip callback
-			if (onSkip) {
-				await onSkip();
-			}
-		} finally {
-			saving = false;
-		}
-	}
-
-	/**
-	 * Reset onboarding (for testing/debugging)
-	 */
-	async function reset(): Promise<void> {
-		saving = true;
-		try {
-			// Remove onboarding flags from deviceSettings
-			await userSettings.updateDeviceAppSettings({
-				[ONBOARDING_COMPLETED_KEY]: false,
-				onboarding_skipped: false,
-			});
-
-			completed = false;
-			currentStep = 0;
-			preferences = { ...initialPreferences };
-		} finally {
-			saving = false;
-		}
-	}
-
-	return {
-		get shouldShow() {
-			return shouldShow;
-		},
-		get currentStep() {
-			return currentStep;
-		},
-		get totalSteps() {
-			return totalSteps;
-		},
-		get isFirstStep() {
-			return isFirstStep;
-		},
-		get isLastStep() {
-			return isLastStep;
-		},
-		get progress() {
-			return progress;
-		},
-		get currentStepConfig() {
-			return currentStepConfig;
-		},
-		get preferences() {
-			return preferences;
-		},
-		get saving() {
-			return saving;
-		},
-		get appId() {
-			return appId;
-		},
-		get steps() {
-			return steps;
-		},
-
-		next,
-		prev,
-		goToStep,
-		setPreference,
-		complete,
-		skip,
-		reset,
-		checkCompleted,
-	};
-}
diff --git a/packages/shared-ui/src/onboarding/types.ts b/packages/shared-ui/src/onboarding/types.ts
deleted file mode 100644
index ded3a1510..000000000
--- a/packages/shared-ui/src/onboarding/types.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import type { UserSettingsStore } from '@mana/shared-theme';
-
-/**
- * Option for a selection-based onboarding step
- */
-export interface AppOnboardingOption {
-	/** Unique identifier for this option */
-	id: string;
-	/** Display label */
-	label: string;
-	/** Optional description */
-	description?: string;
-	/** Optional emoji icon */
-	emoji?: string;
-}
-
-/**
- * Step type determines the UI component used
- */
-export type AppOnboardingStepType = 'select' | 'toggle' | 'info';
-
-/**
- * Base step configuration
- */
-export interface AppOnboardingStepBase {
-	/** Unique identifier for this step */
-	id: string;
-	/** Question or title for this step */
-	question: string;
-	/** Optional subtitle/description */
-	description?: string;
-	/** Emoji icon for the step header */
-	emoji?: string;
-	/** Gradient colors for the icon background */
-	gradient?: { from: string; to: string };
-	/** Whether this step can be skipped */
-	skippable?: boolean;
-}
-
-/**
- * Selection step - user picks one option
- */
-export interface AppOnboardingSelectStep extends AppOnboardingStepBase {
-	type: 'select';
-	/** Available options */
-	options: AppOnboardingOption[];
-	/** Default selected value */
-	defaultValue?: string;
-}
-
-/**
- * Toggle step - user enables/disables something
- */
-export interface AppOnboardingToggleStep extends AppOnboardingStepBase {
-	type: 'toggle';
-	/** Default toggle state */
-	defaultValue?: boolean;
-	/** Label when enabled */
-	enabledLabel?: string;
-	/** Label when disabled */
-	disabledLabel?: string;
-}
-
-/**
- * Info step - just shows information, no input
- */
-export interface AppOnboardingInfoStep extends AppOnboardingStepBase {
-	type: 'info';
-	/** Bullet points to display */
-	bullets?: string[];
-}
-
-/**
- * Union type for all step types
- */
-export type AppOnboardingStep =
-	| AppOnboardingSelectStep
-	| AppOnboardingToggleStep
-	| AppOnboardingInfoStep;
-
-/**
- * Configuration for creating an app onboarding store
- */
-export interface AppOnboardingConfig {
-	/** App identifier (e.g., 'calendar', 'todo', 'chat') */
-	appId: string;
-	/** Steps to show in the onboarding */
-	steps: AppOnboardingStep[];
-	/** User settings store instance (for deviceSettings access) */
-	userSettings: UserSettingsStore;
-	/** Optional callback when onboarding completes */
-	onComplete?: (preferences: Record<string, unknown>) => void | Promise<void>;
-	/** Optional callback when onboarding is skipped */
-	onSkip?: () => void | Promise<void>;
-}
-
-/**
- * Collected preferences from completed steps
- */
-export type AppOnboardingPreferences = Record<string, unknown>;
-
-/**
- * App onboarding store interface
- */
-export interface AppOnboardingStore {
-	/** Whether the onboarding modal should be shown */
-	readonly shouldShow: boolean;
-	/** Current step index (0-based) */
-	readonly currentStep: number;
-	/** Total number of steps */
-	readonly totalSteps: number;
-	/** Whether on the first step */
-	readonly isFirstStep: boolean;
-	/** Whether on the last step */
-	readonly isLastStep: boolean;
-	/** Progress percentage (0-100) */
-	readonly progress: number;
-	/** Current step configuration */
-	readonly currentStepConfig: AppOnboardingStep | undefined;
-	/** Collected preferences so far */
-	readonly preferences: AppOnboardingPreferences;
-	/** Whether currently saving */
-	readonly saving: boolean;
-	/** App ID */
-	readonly appId: string;
-	/** All step configurations */
-	readonly steps: AppOnboardingStep[];
-
-	/** Go to next step */
-	next: () => void;
-	/** Go to previous step */
-	prev: () => void;
-	/** Go to specific step */
-	goToStep: (index: number) => void;
-	/** Set a preference value */
-	setPreference: (key: string, value: unknown) => void;
-	/** Complete the onboarding and save preferences */
-	complete: () => Promise<void>;
-	/** Skip the onboarding entirely */
-	skip: () => Promise<void>;
-	/** Reset onboarding (for testing/debugging) */
-	reset: () => Promise<void>;
-	/** Check if onboarding was completed (reads from deviceSettings) */
-	checkCompleted: () => boolean;
-}
-
-/**
- * Props for the MiniOnboardingModal component
- */
-export interface MiniOnboardingModalProps {
-	/** The onboarding store instance */
-	store: AppOnboardingStore;
-	/** App name for display */
-	appName: string;
-	/** Optional app icon/emoji */
-	appEmoji?: string;
-}
diff --git a/packages/shared-ui/src/organisms/AppSlider.svelte b/packages/shared-ui/src/organisms/AppSlider.svelte
deleted file mode 100644
index d85d3407f..000000000
--- a/packages/shared-ui/src/organisms/AppSlider.svelte
+++ /dev/null
@@ -1,651 +0,0 @@
-<script lang="ts">
-	import type { AppItem } from './AppSlider.types';
-
-	interface Props {
-		apps: AppItem[];
-		title?: string;
-		isDark?: boolean;
-		statusLabels?: {
-			published: string;
-			beta: string;
-			development: string;
-			planning: string;
-		};
-		comingSoonLabel?: string;
-		openAppLabel?: string;
-		onAppClick?: (app: AppItem, index: number) => void;
-	}
-
-	let {
-		apps,
-		title = 'Part of the Mana Ecosystem',
-		isDark = false,
-		statusLabels = {
-			published: 'Live',
-			beta: 'Beta',
-			development: 'In Development',
-			planning: 'Planned',
-		},
-		comingSoonLabel = 'Coming Soon',
-		openAppLabel = 'Open App',
-		onAppClick,
-	}: Props = $props();
-
-	let selectedApp = $state<number | null>(null);
-	let hoveredApp = $state<number | null>(null);
-	let cardRotations = $state<{ [key: number]: { rotateX: number; rotateY: number } }>({});
-	let modalScrollContainer = $state<HTMLDivElement | null>(null);
-
-	function getStatusColor(status: AppItem['status']) {
-		const colors = {
-			published: '#4CAF50',
-			beta: '#FFD700',
-			development: '#FF9800',
-			planning: '#F44336',
-		};
-		return colors[status];
-	}
-
-	function getStatusLabel(status: AppItem['status']) {
-		return statusLabels[status];
-	}
-
-	function openModal(index: number) {
-		selectedApp = index;
-	}
-
-	function closeModal() {
-		selectedApp = null;
-	}
-
-	function handleCardMouseMove(e: MouseEvent, index: number, cardElement: HTMLElement) {
-		const rect = cardElement.getBoundingClientRect();
-		const cardCenterX = rect.left + rect.width / 2;
-		const cardCenterY = rect.top + rect.height / 2;
-
-		const mouseXRelative = e.clientX - cardCenterX;
-		const mouseYRelative = e.clientY - cardCenterY;
-
-		const maxRotation = 3;
-		const rotateY = (mouseXRelative / (rect.width / 2)) * maxRotation;
-		const rotateX = -(mouseYRelative / (rect.height / 2)) * maxRotation;
-
-		cardRotations[index] = { rotateX, rotateY };
-	}
-
-	function handleCardMouseLeave(index: number) {
-		cardRotations[index] = { rotateX: 0, rotateY: 0 };
-	}
-
-	function handleAppAction(app: AppItem, index: number) {
-		if (onAppClick) {
-			onAppClick(app, index);
-		}
-	}
-
-	$effect(() => {
-		if (selectedApp !== null && modalScrollContainer) {
-			const appIndex = selectedApp;
-			setTimeout(() => {
-				const cardWidth = 360 + 24;
-				const scrollPosition = appIndex * cardWidth;
-				modalScrollContainer?.scrollTo({
-					left: scrollPosition,
-					behavior: 'smooth',
-				});
-			}, 50);
-		}
-	});
-</script>
-
-<div class="app-slider-root">
-	<h3 class="slider-title">{title}</h3>
-
-	<div class="slider-scroll-container">
-		<div class="slider-items">
-			{#each apps as app, index}
-				<button
-					class="app-card"
-					style="--index: {index};"
-					onmouseenter={() => (hoveredApp = index)}
-					onmouseleave={() => (hoveredApp = null)}
-					onclick={() => openModal(index)}
-				>
-					<div
-						class="status-indicator"
-						style="background-color: {getStatusColor(
-							app.status
-						)}; box-shadow: 0 0 8px {getStatusColor(app.status)};"
-					></div>
-
-					<div class="app-icon-wrapper">
-						{#if app.icon}
-							<img src={app.icon} alt={app.name} class="app-icon" />
-						{:else}
-							<div class="app-icon-fallback" style="color: {app.color};">
-								{app.name.charAt(0)}
-							</div>
-						{/if}
-					</div>
-
-					<h4 class="app-name">{app.name}</h4>
-				</button>
-			{/each}
-		</div>
-	</div>
-</div>
-
-{#if selectedApp !== null}
-	<div
-		class="modal-overlay"
-		onclick={closeModal}
-		onkeydown={(e) => e.key === 'Escape' && closeModal()}
-		role="dialog"
-		aria-modal="true"
-		tabindex="-1"
-	>
-		<button onclick={closeModal} class="modal-close-btn" aria-label="Close modal">
-			<svg
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path d="M18 6L6 18M6 6l12 12" />
-			</svg>
-		</button>
-
-		<div bind:this={modalScrollContainer} class="modal-scroll-container scrollbar-hide">
-			<div class="modal-cards-wrapper">
-				{#each apps as app, index}
-					<div
-						class="modal-card"
-						class:active={selectedApp === index}
-						style="transform: perspective(1000px) rotateX({cardRotations[index]?.rotateX ||
-							0}deg) rotateY({cardRotations[index]?.rotateY || 0}deg);"
-						onclick={(e) => {
-							e.stopPropagation();
-							selectedApp = index;
-						}}
-						onmouseenter={() => (hoveredApp = index)}
-						onmousemove={(e) => handleCardMouseMove(e, index, e.currentTarget)}
-						onmouseleave={() => {
-							handleCardMouseLeave(index);
-							hoveredApp = null;
-						}}
-						onkeydown={() => {}}
-						role="button"
-						tabindex="0"
-					>
-						<div class="modal-card-status">
-							<div
-								class="modal-status-dot"
-								style="background-color: {getStatusColor(app.status)};"
-							></div>
-							<span class="modal-status-label">{getStatusLabel(app.status)}</span>
-						</div>
-
-						{#if app.icon}
-							<img src={app.icon} alt={app.name} class="modal-app-icon" />
-						{:else}
-							<div class="modal-app-icon-fallback" style="color: {app.color};">
-								{app.name.charAt(0)}
-							</div>
-						{/if}
-
-						<h3 class="modal-app-name">{app.name}</h3>
-
-						<p class="modal-app-tagline" style="color: {app.color};">
-							{app.description}
-						</p>
-
-						<p class="modal-app-description">{app.longDescription}</p>
-
-						<div class="modal-app-action">
-							{#if app.comingSoon}
-								<span class="modal-coming-soon">{comingSoonLabel}</span>
-							{:else}
-								<button
-									class="modal-open-btn"
-									style="background-color: {app.color}40; border-color: {app.color};"
-									onclick={(e) => {
-										e.stopPropagation();
-										handleAppAction(app, index);
-									}}
-								>
-									{openAppLabel}
-								</button>
-							{/if}
-						</div>
-					</div>
-				{/each}
-			</div>
-		</div>
-	</div>
-{/if}
-
-<style>
-	.app-slider-root {
-		width: 100%;
-		max-width: 100%;
-	}
-
-	.slider-title {
-		margin-bottom: 1rem;
-		text-align: center;
-		font-size: 0.875rem;
-		font-weight: 500;
-		color: rgba(255, 255, 255, 0.5);
-	}
-
-	@media (prefers-color-scheme: light) {
-		.slider-title {
-			color: rgba(0, 0, 0, 0.5);
-		}
-	}
-
-	.slider-scroll-container {
-		width: 100%;
-		overflow-x: auto;
-		overflow-y: visible;
-		-ms-overflow-style: none;
-		scrollbar-width: none;
-	}
-
-	.slider-scroll-container::-webkit-scrollbar {
-		display: none;
-	}
-
-	.slider-items {
-		display: flex;
-		gap: 1rem;
-		padding: 1rem;
-		padding-bottom: 1.5rem;
-		width: max-content;
-		margin: 0 auto;
-	}
-
-	.app-card {
-		position: relative;
-		flex-shrink: 0;
-		width: 140px;
-		padding: 1.25rem 1rem;
-		border-radius: 1rem;
-		cursor: pointer;
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		background-color: rgba(255, 255, 255, 0.06);
-		backdrop-filter: blur(10px);
-		transition:
-			transform 0.2s ease,
-			background-color 0.2s ease;
-		/* Staggered entrance animation */
-		animation: fadeInUp 0.4s ease-out both;
-		animation-delay: calc(0.3s + var(--index) * 0.08s);
-	}
-
-	.app-card:hover {
-		transform: scale(1.05);
-		background-color: rgba(255, 255, 255, 0.1);
-	}
-
-	@media (prefers-color-scheme: light) {
-		.app-card {
-			border-color: rgba(0, 0, 0, 0.08);
-			background-color: rgba(255, 255, 255, 0.7);
-		}
-		.app-card:hover {
-			background-color: rgba(255, 255, 255, 0.9);
-		}
-	}
-
-	.status-indicator {
-		position: absolute;
-		top: 0.75rem;
-		right: 0.75rem;
-		width: 0.5rem;
-		height: 0.5rem;
-		border-radius: 50%;
-		animation: pulse 2s ease-in-out infinite;
-	}
-
-	.app-icon-wrapper {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 4rem;
-		height: 4rem;
-		margin: 0 auto 0.75rem;
-		transition: transform 0.2s ease;
-	}
-
-	.app-card:hover .app-icon-wrapper {
-		transform: scale(1.1);
-	}
-
-	.app-icon {
-		width: 3.5rem;
-		height: 3.5rem;
-		object-fit: contain;
-	}
-
-	.app-icon-fallback {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 2.5rem;
-		height: 2.5rem;
-		font-size: 1.25rem;
-		font-weight: 700;
-		border-radius: 0.5rem;
-	}
-
-	.app-name {
-		font-size: 0.875rem;
-		font-weight: 600;
-		text-align: center;
-		color: #fff;
-		margin: 0;
-	}
-
-	@media (prefers-color-scheme: light) {
-		.app-name {
-			color: #000;
-		}
-	}
-
-	/* Entrance animation */
-	@keyframes fadeInUp {
-		from {
-			opacity: 0;
-			transform: translateY(16px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	@keyframes pulse {
-		0%,
-		100% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0.6;
-		}
-	}
-
-	/* Reduced motion */
-	@media (prefers-reduced-motion: reduce) {
-		.app-card {
-			animation: none;
-		}
-		.status-indicator {
-			animation: none;
-		}
-	}
-
-	.scrollbar-hide::-webkit-scrollbar {
-		display: none;
-	}
-
-	.scrollbar-hide {
-		-ms-overflow-style: none;
-		scrollbar-width: none;
-	}
-
-	/* Modal Styles */
-	.modal-overlay {
-		position: fixed;
-		inset: 0;
-		z-index: 50;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: rgba(0, 0, 0, 0.9);
-		backdrop-filter: blur(8px);
-		animation: fadeIn 0.2s ease-out;
-	}
-
-	.modal-close-btn {
-		position: fixed;
-		top: 1.5rem;
-		right: 1.5rem;
-		z-index: 60;
-		width: 3rem;
-		height: 3rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-		border: 1px solid rgba(255, 255, 255, 0.2);
-		background-color: rgba(255, 255, 255, 0.1);
-		color: #fff;
-		cursor: pointer;
-		transition:
-			background-color 0.2s,
-			transform 0.2s;
-	}
-
-	.modal-close-btn:hover {
-		background-color: rgba(255, 255, 255, 0.2);
-		transform: scale(1.05);
-	}
-
-	.modal-scroll-container {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		overflow-x: auto;
-		scroll-snap-type: x mandatory;
-		scroll-behavior: smooth;
-	}
-
-	.modal-cards-wrapper {
-		display: flex;
-		gap: 1.5rem;
-		padding: 2rem;
-		margin: 0 auto;
-	}
-
-	.modal-card {
-		flex-shrink: 0;
-		width: 340px;
-		padding: 2rem;
-		padding-top: 2.5rem;
-		border-radius: 1.5rem;
-		scroll-snap-align: center;
-		position: relative;
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		background-color: rgba(255, 255, 255, 0.08);
-		backdrop-filter: blur(20px);
-		transform-style: preserve-3d;
-		transition:
-			transform 0.1s ease-out,
-			background-color 0.2s ease;
-		animation: modalCardIn 0.3s ease-out both;
-	}
-
-	.modal-card:hover {
-		background-color: rgba(255, 255, 255, 0.12);
-	}
-
-	@media (prefers-color-scheme: light) {
-		.modal-card {
-			background-color: rgba(255, 255, 255, 0.9);
-			border-color: rgba(0, 0, 0, 0.1);
-		}
-		.modal-card:hover {
-			background-color: rgba(255, 255, 255, 0.95);
-		}
-	}
-
-	.modal-card-status {
-		position: absolute;
-		top: 0.875rem;
-		right: 0.875rem;
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.25rem 0.625rem 0.25rem 0.5rem;
-		border-radius: 1rem;
-		background-color: rgba(0, 0, 0, 0.2);
-	}
-
-	@media (prefers-color-scheme: light) {
-		.modal-card-status {
-			background-color: rgba(0, 0, 0, 0.05);
-		}
-	}
-
-	.modal-status-dot {
-		width: 0.375rem;
-		height: 0.375rem;
-		border-radius: 50%;
-		flex-shrink: 0;
-	}
-
-	.modal-status-label {
-		font-size: 0.6875rem;
-		font-weight: 500;
-		color: rgba(255, 255, 255, 0.8);
-	}
-
-	@media (prefers-color-scheme: light) {
-		.modal-status-label {
-			color: rgba(0, 0, 0, 0.6);
-		}
-	}
-
-	.modal-app-icon {
-		width: 5rem;
-		height: 5rem;
-		object-fit: contain;
-		margin: 0 auto 1rem;
-		display: block;
-	}
-
-	.modal-app-icon-fallback {
-		width: 4rem;
-		height: 4rem;
-		margin: 0 auto 1rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 2rem;
-		font-weight: 700;
-		border-radius: 0.75rem;
-	}
-
-	.modal-app-name {
-		font-size: 1.5rem;
-		font-weight: 700;
-		text-align: center;
-		margin: 0 0 0.5rem;
-		color: #fff;
-	}
-
-	@media (prefers-color-scheme: light) {
-		.modal-app-name {
-			color: #000;
-		}
-	}
-
-	.modal-app-tagline {
-		font-size: 0.875rem;
-		font-weight: 500;
-		text-align: center;
-		margin: 0 0 1rem;
-	}
-
-	.modal-app-description {
-		font-size: 0.875rem;
-		line-height: 1.6;
-		text-align: center;
-		margin: 0 0 1.5rem;
-		color: rgba(255, 255, 255, 0.7);
-	}
-
-	@media (prefers-color-scheme: light) {
-		.modal-app-description {
-			color: rgba(0, 0, 0, 0.6);
-		}
-	}
-
-	.modal-app-action {
-		text-align: center;
-	}
-
-	.modal-coming-soon {
-		display: inline-block;
-		padding: 0.625rem 1.25rem;
-		border-radius: 2rem;
-		font-size: 0.875rem;
-		font-weight: 500;
-		background-color: rgba(255, 255, 255, 0.1);
-		color: rgba(255, 255, 255, 0.5);
-	}
-
-	@media (prefers-color-scheme: light) {
-		.modal-coming-soon {
-			background-color: rgba(0, 0, 0, 0.08);
-			color: rgba(0, 0, 0, 0.4);
-		}
-	}
-
-	.modal-open-btn {
-		padding: 0.75rem 2rem;
-		border-radius: 0.75rem;
-		font-size: 0.875rem;
-		font-weight: 600;
-		border: 2px solid;
-		cursor: pointer;
-		transition:
-			opacity 0.2s,
-			transform 0.2s;
-		color: #fff;
-	}
-
-	.modal-open-btn:hover {
-		opacity: 0.85;
-		transform: scale(1.02);
-	}
-
-	@media (prefers-color-scheme: light) {
-		.modal-open-btn {
-			color: #000;
-		}
-	}
-
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-
-	@keyframes modalCardIn {
-		from {
-			opacity: 0;
-			transform: scale(0.95) translateY(10px);
-		}
-		to {
-			opacity: 1;
-			transform: scale(1) translateY(0);
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.modal-overlay,
-		.modal-card {
-			animation: none;
-		}
-	}
-</style>
diff --git a/packages/shared-ui/src/organisms/AppSlider.types.ts b/packages/shared-ui/src/organisms/AppSlider.types.ts
deleted file mode 100644
index 37cea83b5..000000000
--- a/packages/shared-ui/src/organisms/AppSlider.types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface AppItem {
-	name: string;
-	description: string;
-	longDescription: string;
-	icon?: string;
-	color: string;
-	comingSoon?: boolean;
-	status: 'published' | 'beta' | 'development' | 'planning';
-}
diff --git a/packages/shared-ui/src/organisms/BaseListView.svelte b/packages/shared-ui/src/organisms/BaseListView.svelte
index 87200883c..7f09f5107 100644
--- a/packages/shared-ui/src/organisms/BaseListView.svelte
+++ b/packages/shared-ui/src/organisms/BaseListView.svelte
@@ -1,57 +1,18 @@
 <script lang="ts" generics="T">
-	/**
-	 * BaseListView — shared scaffolding for module ListView components.
-	 *
-	 * Encodes the workbench convention every Mana module's ListView shares:
-	 *   wrapper padding → optional stats header → scrollable item region → empty state.
-	 *
-	 * Per-item rendering and data fetching stay with the consumer:
-	 *   - Pass `items` (already filtered & decrypted via queries.ts).
-	 *   - Provide an `item` snippet that renders one row.
-	 *   - Provide an optional `header` snippet for stat counts or filters.
-	 *
-	 * @example
-	 * ```svelte
-	 * <BaseListView items={sorted} getKey={(q) => q.id} emptyTitle="Keine Fragen">
-	 *   {#snippet header()}
-	 *     <span>{questions.length} Fragen</span>
-	 *   {/snippet}
-	 *   {#snippet item(question)}
-	 *     <button onclick={() => navigate('detail', { id: question.id })}>
-	 *       {question.title}
-	 *     </button>
-	 *   {/snippet}
-	 * </BaseListView>
-	 * ```
-	 */
 	import type { Snippet } from 'svelte';
-	import { EmptyState } from '../molecules';
+	import EmptyState from '../molecules/EmptyState.svelte';
 
 	interface Props<TItem> {
-		/** Items to render. Should already be filtered (deletedAt) and decrypted. */
 		items: TItem[];
-		/** Stable key extractor for the {#each} block. */
 		getKey: (item: TItem) => string | number;
-		/** Snippet that renders a single item row. */
 		item: Snippet<[TItem, number]>;
-		/** Optional header snippet (e.g. stat counts, filters). */
 		header?: Snippet;
-		/** Optional snippet rendered above the items but inside the scroll area. */
 		listHeader?: Snippet;
-		/** Optional snippet rendered at the very top, outside the scroll area (toolbar, voice bar, ...). */
 		toolbar?: Snippet;
-		/** Empty-state title. */
 		emptyTitle?: string;
-		/** Empty-state message. */
 		emptyMessage?: string;
-		/** Custom empty-state icon snippet. */
 		emptyIcon?: Snippet;
-		/** Override the entire empty area. */
 		empty?: Snippet;
-		/** Optional outer class override. */
-		class?: string;
-		/** Optional class for the inner scroll/list area. Use this to switch to grid, etc. */
-		listClass?: string;
 	}
 
 	let {
@@ -65,23 +26,21 @@
 		emptyMessage,
 		emptyIcon,
 		empty,
-		class: className = '',
-		listClass = '',
 	}: Props<T> = $props();
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4 {className}">
+<div class="base-list-view">
 	{#if toolbar}
 		{@render toolbar()}
 	{/if}
 
 	{#if header}
-		<div class="flex gap-3 text-xs text-[hsl(var(--color-muted-foreground))]">
+		<div class="header-row">
 			{@render header()}
 		</div>
 	{/if}
 
-	<div class="flex-1 overflow-auto {listClass}">
+	<div class="list-region">
 		{#if listHeader}
 			{@render listHeader()}
 		{/if}
@@ -99,3 +58,32 @@
 		{/if}
 	</div>
 </div>
+
+<style>
+	.base-list-view {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		height: 100%;
+		padding: 0.75rem;
+		font-family: inherit;
+	}
+
+	@media (min-width: 640px) {
+		.base-list-view {
+			padding: 1rem;
+		}
+	}
+
+	.header-row {
+		display: flex;
+		gap: 0.75rem;
+		font-size: 0.75rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.list-region {
+		flex: 1;
+		overflow: auto;
+	}
+</style>
diff --git a/packages/shared-ui/src/organisms/ConfirmationModal.stories.svelte b/packages/shared-ui/src/organisms/ConfirmationModal.stories.svelte
new file mode 100644
index 000000000..287a391e4
--- /dev/null
+++ b/packages/shared-ui/src/organisms/ConfirmationModal.stories.svelte
@@ -0,0 +1,52 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ConfirmationModal from './ConfirmationModal.svelte';
+	import Button from '../atoms/Button.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Organisms/ConfirmationModal',
+		component: ConfirmationModal,
+		tags: ['autodocs'],
+	});
+
+	let confirmOpen = $state(false);
+	let destroyOpen = $state(false);
+	let lastAction = $state('—');
+</script>
+
+<Story name="Default">
+	{#snippet children()}
+		<div style="display:flex; gap:0.75rem; align-items:center;">
+			<Button variant="primary" onclick={() => (confirmOpen = true)}>Aktion bestätigen</Button>
+			<span>Letzte Aktion: <code>{lastAction}</code></span>
+			<ConfirmationModal
+				bind:open={confirmOpen}
+				title="Karte zur Inbox verschieben?"
+				description="Sie wird aus dem aktuellen Stapel entfernt und in die Inbox einsortiert."
+				confirmLabel="Verschieben"
+				cancelLabel="Abbrechen"
+				onConfirm={() => (lastAction = 'confirmed')}
+				onCancel={() => (lastAction = 'cancelled')}
+			/>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Destructive">
+	{#snippet children()}
+		<div style="display:flex; gap:0.75rem; align-items:center;">
+			<Button variant="danger" onclick={() => (destroyOpen = true)}>Stapel löschen</Button>
+			<span>Letzte Aktion: <code>{lastAction}</code></span>
+			<ConfirmationModal
+				bind:open={destroyOpen}
+				title="Stapel unwiderruflich löschen?"
+				description="Alle Karten und Lern-Statistiken gehen verloren. Kein Rückgängig."
+				confirmLabel="Löschen"
+				cancelLabel="Abbrechen"
+				destructive
+				onConfirm={() => (lastAction = 'destroyed')}
+				onCancel={() => (lastAction = 'kept')}
+			/>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/organisms/ConfirmationModal.svelte b/packages/shared-ui/src/organisms/ConfirmationModal.svelte
index 0bbdfff5c..2578677dc 100644
--- a/packages/shared-ui/src/organisms/ConfirmationModal.svelte
+++ b/packages/shared-ui/src/organisms/ConfirmationModal.svelte
@@ -1,175 +1,68 @@
 <script lang="ts">
-	/**
-	 * ConfirmationModal - Pre-styled confirmation dialog
-	 *
-	 * Used for delete confirmations, destructive actions, or any action
-	 * that requires user confirmation before proceeding.
-	 *
-	 * @example Delete confirmation
-	 * ```svelte
-	 * <ConfirmationModal
-	 *   visible={showDeleteModal}
-	 *   onClose={() => showDeleteModal = false}
-	 *   onConfirm={handleDelete}
-	 *   variant="danger"
-	 *   title="Delete memo?"
-	 *   message="This action cannot be undone."
-	 *   confirmLabel="Delete"
-	 * />
-	 * ```
-	 *
-	 * @example Warning confirmation
-	 * ```svelte
-	 * <ConfirmationModal
-	 *   visible={showWarningModal}
-	 *   onClose={() => showWarningModal = false}
-	 *   onConfirm={handleProceed}
-	 *   variant="warning"
-	 *   title="Are you sure?"
-	 *   message="You have unsaved changes that will be lost."
-	 * />
-	 * ```
-	 */
-
-	import { Warning, WarningCircle, Info, X, Trash, Check } from '@mana/shared-icons';
 	import Modal from './Modal.svelte';
-	import { Text } from '../atoms';
-
-	type ConfirmationVariant = 'danger' | 'warning' | 'info';
+	import Button from '../atoms/Button.svelte';
 
 	interface Props {
-		/** Whether the modal is visible */
-		visible: boolean;
-		/** Called when modal is closed (cancel or backdrop click) */
-		onClose: () => void;
-		/** Called when user confirms the action */
-		onConfirm: () => void | Promise<void>;
-		/** Visual variant */
-		variant?: ConfirmationVariant;
-		/** Modal title */
+		open?: boolean;
+		/** v0.1.x-Compat-Alias für `open`. */
+		visible?: boolean;
 		title: string;
-		/** Confirmation message */
+		description?: string;
+		/** v0.1.x-Compat-Alias für `description`. */
 		message?: string;
-		/** Confirm button label */
 		confirmLabel?: string;
-		/** Cancel button label */
 		cancelLabel?: string;
-		/** Whether confirm action is in progress */
-		loading?: boolean;
+		destructive?: boolean;
+		onConfirm: () => void;
+		onCancel?: () => void;
+		/** v0.1.x-Compat: Alias für onCancel. */
+		onClose?: () => void;
+		ariaLabel?: string;
 	}
 
 	let {
+		open = $bindable(false),
 		visible,
-		onClose,
-		onConfirm,
-		variant = 'danger',
 		title,
+		description,
 		message,
-		confirmLabel = 'Confirm',
-		cancelLabel = 'Cancel',
-		loading = false,
+		confirmLabel = 'Bestätigen',
+		cancelLabel = 'Abbrechen',
+		destructive = false,
+		onConfirm,
+		onCancel,
+		onClose,
+		ariaLabel,
 	}: Props = $props();
 
-	const variantConfig: Record<
-		ConfirmationVariant,
-		{ iconColor: string; iconBg: string; buttonColor: string; buttonHover: string }
-	> = {
-		danger: {
-			iconColor: 'text-red-500',
-			iconBg: 'bg-red-500/10',
-			buttonColor: 'bg-red-500 text-white',
-			buttonHover: 'hover:bg-red-600 hover:shadow-lg hover:shadow-red-500/25',
-		},
-		warning: {
-			iconColor: 'text-yellow-500',
-			iconBg: 'bg-yellow-500/10',
-			buttonColor: 'bg-yellow-500 text-white',
-			buttonHover: 'hover:bg-yellow-600 hover:shadow-lg hover:shadow-yellow-500/25',
-		},
-		info: {
-			iconColor: 'text-blue-500',
-			iconBg: 'bg-blue-500/10',
-			buttonColor: 'bg-blue-500 text-white',
-			buttonHover: 'hover:bg-blue-600 hover:shadow-lg hover:shadow-blue-500/25',
-		},
-	};
+	const effectiveCancel = $derived(onCancel ?? onClose);
 
-	const config = $derived(variantConfig[variant]);
+	const effectiveOpen = $derived(visible ?? open);
+	const effectiveDescription = $derived(description ?? message);
 
-	async function handleConfirm() {
-		await onConfirm();
+	function handleClose() {
+		open = false;
+		effectiveCancel?.();
+	}
+
+	function handleConfirm() {
+		open = false;
+		onConfirm();
 	}
 </script>
 
-<Modal {visible} {onClose} {title} maxWidth="sm">
-	{#snippet icon()}
-		<div class="p-2.5 rounded-xl {config.iconBg} {config.iconColor}">
-			{#if variant === 'danger'}
-				<Warning size={20} weight="bold" />
-			{:else if variant === 'warning'}
-				<WarningCircle size={20} weight="bold" />
-			{:else}
-				<Info size={20} weight="bold" />
-			{/if}
-		</div>
-	{/snippet}
-
-	<div class="text-center py-2">
-		{#if message}
-			<Text variant="muted" class="leading-relaxed">
-				{message}
-			</Text>
-		{/if}
-	</div>
-
+<Modal
+	open={effectiveOpen}
+	{title}
+	description={effectiveDescription}
+	size="sm"
+	{ariaLabel}
+	onClose={handleClose}
+>
 	{#snippet footer()}
-		<div class="flex flex-col gap-3">
-			<!-- Confirm Button -->
-			<button
-				onclick={handleConfirm}
-				disabled={loading}
-				class="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-semibold text-sm
-					   {config.buttonColor} {config.buttonHover}
-					   transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0
-					   disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:hover:shadow-none"
-			>
-				{#if loading}
-					<svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
-						<circle
-							class="opacity-25"
-							cx="12"
-							cy="12"
-							r="10"
-							stroke="currentColor"
-							stroke-width="4"
-						/>
-						<path
-							class="opacity-75"
-							fill="currentColor"
-							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-						/>
-					</svg>
-				{:else if variant === 'danger'}
-					<Trash size={18} weight="bold" />
-				{:else}
-					<Check size={18} weight="bold" />
-				{/if}
-				{confirmLabel}
-			</button>
-
-			<!-- Cancel Button -->
-			<button
-				onclick={onClose}
-				disabled={loading}
-				class="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-semibold text-sm
-					   bg-foreground/5 text-foreground
-					   hover:bg-foreground/10 hover:shadow-md
-					   transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0
-					   disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
-			>
-				<X size={18} weight="bold" />
-				{cancelLabel}
-			</button>
-		</div>
+		<Button variant="ghost" size="sm" onclick={handleClose}>{cancelLabel}</Button>
+		<Button variant={destructive ? 'danger' : 'primary'} size="sm" onclick={handleConfirm}>
+			{confirmLabel}
+		</Button>
 	{/snippet}
 </Modal>
diff --git a/packages/shared-ui/src/context-menu/ContextMenu.svelte b/packages/shared-ui/src/organisms/ContextMenu.svelte
similarity index 72%
rename from packages/shared-ui/src/context-menu/ContextMenu.svelte
rename to packages/shared-ui/src/organisms/ContextMenu.svelte
index 1759e589a..aa293a26f 100644
--- a/packages/shared-ui/src/context-menu/ContextMenu.svelte
+++ b/packages/shared-ui/src/organisms/ContextMenu.svelte
@@ -1,7 +1,40 @@
+<script lang="ts" module>
+	export interface ContextMenuItem {
+		id: string;
+		label: string;
+		/** Inline SVG path string (16×16 viewBox). Use `iconSvg` instead of a Component peer-dep. */
+		iconSvg?: string;
+		/** DynamicIcon name as an alternative to `iconSvg`. */
+		iconName?: string;
+		/** v0.1.x-Compat: Phosphor-Icon-Component. Wird heute ignoriert; nutze iconSvg/iconName. */
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		icon?: any;
+		shortcut?: string;
+		disabled?: boolean;
+		variant?: 'default' | 'danger';
+		type?: 'item' | 'divider';
+		action?: () => void;
+		data?: unknown;
+		toggle?: boolean;
+		checked?: boolean;
+	}
+
+	export interface ContextMenuState<T = unknown> {
+		visible: boolean;
+		x: number;
+		y: number;
+		target: T | null;
+	}
+
+	export function createContextMenuState<T = unknown>(): ContextMenuState<T> {
+		return { visible: false, x: 0, y: 0, target: null };
+	}
+</script>
+
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
-	import type { ContextMenuItem } from './types';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
 
 	interface Props {
 		visible: boolean;
@@ -20,59 +53,33 @@
 	// svelte-ignore state_referenced_locally
 	let adjustedY = $state(y);
 
-	// Adjust position to keep menu within viewport
 	$effect(() => {
 		if (visible && menuElement) {
 			const rect = menuElement.getBoundingClientRect();
 			const viewportWidth = window.innerWidth;
 			const viewportHeight = window.innerHeight;
 
-			// Adjust X if menu would overflow right
-			if (x + rect.width > viewportWidth - 10) {
-				adjustedX = x - rect.width;
-			} else {
-				adjustedX = x;
-			}
-
-			// Adjust Y if menu would overflow bottom
-			if (y + rect.height > viewportHeight - 10) {
-				adjustedY = y - rect.height;
-			} else {
-				adjustedY = y;
-			}
+			adjustedX = x + rect.width > viewportWidth - 10 ? x - rect.width : x;
+			adjustedY = y + rect.height > viewportHeight - 10 ? y - rect.height : y;
 		}
 	});
 
 	function handleItemClick(item: ContextMenuItem) {
 		if (item.disabled) return;
-
-		if (item.action) {
-			item.action();
-		}
-		if (onSelect) {
-			onSelect(item);
-		}
+		if (item.action) item.action();
+		if (onSelect) onSelect(item);
 		onClose();
 	}
 
 	function handleKeyDown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			onClose();
-		}
+		if (e.key === 'Escape') onClose();
 	}
 
 	onMount(() => {
-		// Close on click outside
 		const handleClickOutside = (e: MouseEvent) => {
-			if (menuElement && !menuElement.contains(e.target as Node)) {
-				onClose();
-			}
-		};
-
-		// Close on scroll
-		const handleScroll = () => {
-			onClose();
+			if (menuElement && !menuElement.contains(e.target as Node)) onClose();
 		};
+		const handleScroll = () => onClose();
 
 		window.addEventListener('click', handleClickOutside);
 		window.addEventListener('scroll', handleScroll, true);
@@ -87,7 +94,6 @@
 </script>
 
 {#if visible}
-	<!-- Backdrop to block clicks on elements behind -->
 	<div
 		class="context-menu-backdrop"
 		onpointerdown={(e) => {
@@ -124,11 +130,12 @@
 		oncontextmenu={(e) => e.preventDefault()}
 		onkeydown={handleKeyDown}
 	>
-		{#each items as item, index}
+		{#each items as item (item.id)}
 			{#if item.type === 'divider'}
 				<div class="divider"></div>
 			{:else}
 				<button
+					type="button"
 					class="menu-item"
 					class:disabled={item.disabled}
 					class:danger={item.variant === 'danger'}
@@ -143,9 +150,13 @@
 								<span class="toggle-thumb"></span>
 							</span>
 						</span>
-					{:else if item.icon}
+					{:else if item.iconSvg || item.iconName}
 						<span class="item-icon">
-							<item.icon size={16} />
+							{#if item.iconSvg}
+								<DynamicIcon iconSvg={item.iconSvg} size="md" />
+							{:else if item.iconName}
+								<DynamicIcon name={item.iconName as never} size="md" />
+							{/if}
 						</span>
 					{/if}
 					<span class="item-label">{item.label}</span>
@@ -163,9 +174,7 @@
 		position: fixed;
 		inset: 0;
 		z-index: 9998;
-		/* Transparent backdrop - just blocks clicks */
 		background: transparent;
-		/* Ensure backdrop can receive events even when parent has pointer-events: none */
 		pointer-events: auto;
 	}
 
@@ -175,14 +184,11 @@
 		min-width: 180px;
 		max-width: 280px;
 		padding: 0.375rem;
-		background: hsl(var(--color-surface-elevated));
+		background: hsl(var(--color-surface));
 		border: 1px solid hsl(var(--color-border));
-		border-radius: var(--radius-lg);
-		box-shadow:
-			0 4px 16px rgba(0, 0, 0, 0.15),
-			0 1px 4px rgba(0, 0, 0, 0.1);
-		/* Ensure menu can receive events even when parent has pointer-events: none */
+		border-radius: 0.625rem;
 		pointer-events: auto;
+		font-family: inherit;
 	}
 
 	.menu-item {
@@ -193,18 +199,24 @@
 		padding: 0.5rem 0.625rem;
 		border: none;
 		background: transparent;
-		border-radius: var(--radius-md);
+		border-radius: 0.5rem;
 		cursor: pointer;
 		font-size: 0.8125rem;
 		color: hsl(var(--color-foreground));
 		text-align: left;
 		transition: background-color 100ms ease;
+		font-family: inherit;
 	}
 
 	.menu-item:hover:not(.disabled) {
 		background: hsl(var(--color-muted));
 	}
 
+	.menu-item:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: -2px;
+	}
+
 	.menu-item.disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
@@ -252,7 +264,6 @@
 		background: hsl(var(--color-border));
 	}
 
-	/* Toggle switch styles */
 	.menu-item.has-toggle {
 		gap: 0.5rem;
 	}
@@ -281,7 +292,6 @@
 		background: hsl(var(--color-background));
 		border-radius: 50%;
 		transition: transform 150ms ease;
-		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 	}
 
 	.item-toggle.checked .toggle-track {
diff --git a/packages/shared-ui/src/organisms/FormModal.stories.svelte b/packages/shared-ui/src/organisms/FormModal.stories.svelte
new file mode 100644
index 000000000..03ba41b51
--- /dev/null
+++ b/packages/shared-ui/src/organisms/FormModal.stories.svelte
@@ -0,0 +1,72 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FormModal from './FormModal.svelte';
+	import Input from '../molecules/Input.svelte';
+	import Textarea from '../molecules/Textarea.svelte';
+	import Select from '../molecules/Select.svelte';
+	import Button from '../atoms/Button.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Organisms/FormModal',
+		component: FormModal,
+		tags: ['autodocs'],
+	});
+
+	let createOpen = $state(false);
+	let submitting = $state(false);
+	let lastSubmit = $state<{ title?: string; deck?: string; note?: string } | null>(null);
+
+	let titleVal = $state('');
+	let deckVal = $state('default');
+	let noteVal = $state('');
+
+	function submit() {
+		submitting = true;
+		setTimeout(() => {
+			submitting = false;
+			createOpen = false;
+			lastSubmit = { title: titleVal, deck: deckVal, note: noteVal };
+		}, 600);
+	}
+</script>
+
+<Story name="CreateCard">
+	{#snippet children()}
+		<div style="display:flex; flex-direction:column; gap:0.75rem;">
+			<Button variant="primary" onclick={() => (createOpen = true)}>Karte hinzufügen</Button>
+			{#if lastSubmit}
+				<pre style="margin:0; font-size:0.8125rem; color: hsl(var(--color-muted-foreground));">
+{JSON.stringify(lastSubmit, null, 2)}
+				</pre>
+			{/if}
+			<FormModal
+				bind:open={createOpen}
+				title="Neue Karte"
+				description="Wird sofort dem Stapel hinzugefügt."
+				submitLabel="Erstellen"
+				{submitting}
+				canSubmit={titleVal.trim().length > 0}
+				onSubmit={submit}
+			>
+				{#snippet children()}
+					<Input label="Titel" bind:value={titleVal} placeholder="Vorderseite der Karte" required />
+					<Select
+						label="Stapel"
+						bind:value={deckVal}
+						options={[
+							{ value: 'default', label: 'Inbox (Default)' },
+							{ value: 'deutsch-niederlandisch', label: 'Deutsch ↔ Niederländisch' },
+							{ value: 'spanisch-vokabular', label: 'Spanisch-Vokabular' },
+						]}
+					/>
+					<Textarea
+						label="Anmerkung"
+						bind:value={noteVal}
+						hint="Optional. Markdown ist erlaubt."
+						rows={3}
+					/>
+				{/snippet}
+			</FormModal>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/organisms/FormModal.svelte b/packages/shared-ui/src/organisms/FormModal.svelte
index 3bf472fbf..6acf6c354 100644
--- a/packages/shared-ui/src/organisms/FormModal.svelte
+++ b/packages/shared-ui/src/organisms/FormModal.svelte
@@ -1,118 +1,87 @@
 <script lang="ts">
-	/**
-	 * FormModal - Modal with built-in form handling
-	 *
-	 * Extends Modal with form submission, validation error display,
-	 * and standardized footer buttons.
-	 *
-	 * @example Basic form modal
-	 * ```svelte
-	 * <FormModal
-	 *   visible={showModal}
-	 *   onClose={() => showModal = false}
-	 *   onSubmit={handleSubmit}
-	 *   title="Create Item"
-	 *   submitLabel="Create"
-	 * >
-	 *   <Input label="Name" bind:value={name} />
-	 *   <Textarea label="Description" bind:value={description} />
-	 * </FormModal>
-	 * ```
-	 */
-
 	import type { Snippet } from 'svelte';
 	import Modal from './Modal.svelte';
-	import { Button, Text } from '../atoms';
+	import Button from '../atoms/Button.svelte';
 
-	type SubmitVariant = 'primary' | 'danger' | 'success';
+	type Size = 'sm' | 'md' | 'lg';
 
 	interface Props {
-		/** Whether the modal is visible */
-		visible: boolean;
-		/** Called when modal is closed */
-		onClose: () => void;
-		/** Called when form is submitted */
-		onSubmit: () => void | Promise<void>;
-		/** Modal title */
+		open?: boolean;
+		/** v0.1.x-Compat-Alias für `open`. */
+		visible?: boolean;
 		title: string;
-		/** Form content */
-		children: Snippet;
-		/** Icon snippet for header */
-		icon?: Snippet;
-		/** Submit button label */
+		description?: string;
+		size?: Size;
 		submitLabel?: string;
-		/** Cancel button label */
 		cancelLabel?: string;
-		/** Submit button variant */
-		submitVariant?: SubmitVariant;
-		/** Whether submission is in progress */
-		loading?: boolean;
-		/** Error message to display */
-		error?: string | null;
-		/** Max width of modal */
-		maxWidth?: 'sm' | 'md' | 'lg' | 'xl';
-		/** Whether submit button is disabled */
-		submitDisabled?: boolean;
+		submitting?: boolean;
+		canSubmit?: boolean;
+		onSubmit: (e: SubmitEvent) => void;
+		onCancel?: () => void;
+		ariaLabel?: string;
+		children?: Snippet;
 	}
 
 	let {
+		open = $bindable(false),
 		visible,
-		onClose,
-		onSubmit,
 		title,
+		description,
+		size = 'md',
+		submitLabel = 'Speichern',
+		cancelLabel = 'Abbrechen',
+		submitting = false,
+		canSubmit = true,
+		onSubmit,
+		onCancel,
+		ariaLabel,
 		children,
-		icon,
-		submitLabel = 'Submit',
-		cancelLabel = 'Cancel',
-		submitVariant = 'primary',
-		loading = false,
-		error = null,
-		maxWidth = 'md',
-		submitDisabled = false,
 	}: Props = $props();
 
-	async function handleSubmit(e: Event) {
-		e.preventDefault();
-		await onSubmit();
+	let formRef: HTMLFormElement | null = $state(null);
+
+	function handleClose() {
+		open = false;
+		onCancel?.();
 	}
 
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Enter' && e.ctrlKey && !loading && !submitDisabled) {
-			handleSubmit(e);
-		}
+	function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		if (!canSubmit || submitting) return;
+		onSubmit(e);
+	}
+
+	function handleSubmitClick() {
+		formRef?.requestSubmit();
 	}
 </script>
 
-<Modal {visible} {onClose} {title} {icon} {maxWidth}>
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<form onsubmit={handleSubmit} onkeydown={handleKeydown} class="space-y-4">
-		<!-- Error message -->
-		{#if error}
-			<div class="rounded-lg bg-error/10 border border-error/30 p-3">
-				<Text variant="small" class="text-error">
-					{error}
-				</Text>
-			</div>
-		{/if}
-
-		<!-- Form content -->
-		{@render children()}
-	</form>
-
+<Modal open={visible ?? open} {title} {description} {size} {ariaLabel} onClose={handleClose}>
+	{#snippet children()}
+		<form bind:this={formRef} onsubmit={handleSubmit} class="form">
+			{#if children}{@render children()}{/if}
+		</form>
+	{/snippet}
 	{#snippet footer()}
-		<div class="flex gap-3 justify-end">
-			<Button variant="ghost" onclick={onClose} disabled={loading}>
-				{cancelLabel}
-			</Button>
-			<Button
-				variant={submitVariant}
-				type="submit"
-				onclick={handleSubmit}
-				{loading}
-				disabled={submitDisabled}
-			>
-				{submitLabel}
-			</Button>
-		</div>
+		<Button variant="ghost" size="sm" onclick={handleClose} disabled={submitting}>
+			{cancelLabel}
+		</Button>
+		<Button
+			variant="primary"
+			size="sm"
+			loading={submitting}
+			disabled={!canSubmit}
+			onclick={handleSubmitClick}
+		>
+			{submitLabel}
+		</Button>
 	{/snippet}
 </Modal>
+
+<style>
+	.form {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+</style>
diff --git a/packages/shared-ui/src/organisms/Modal.stories.svelte b/packages/shared-ui/src/organisms/Modal.stories.svelte
new file mode 100644
index 000000000..7445e1ce7
--- /dev/null
+++ b/packages/shared-ui/src/organisms/Modal.stories.svelte
@@ -0,0 +1,85 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Modal from './Modal.svelte';
+	import Button from '../atoms/Button.svelte';
+	import Text from '../atoms/Text.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Organisms/Modal',
+		component: Modal,
+		tags: ['autodocs'],
+	});
+
+	let basicOpen = $state(false);
+	let withFooterOpen = $state(false);
+	let largeOpen = $state(false);
+</script>
+
+<Story name="Basic">
+	{#snippet children()}
+		<div>
+			<Button variant="primary" onclick={() => (basicOpen = true)}>Modal öffnen</Button>
+			<Modal
+				bind:open={basicOpen}
+				title="Karten-Detail"
+				description="Klick außerhalb oder Escape schließt."
+			>
+				{#snippet children()}
+					<Text>
+						Standard-Modal mit Titel + Beschreibung. Backdrop-Click und Escape schließen das Modal.
+						Native dialog-Element, kein Focus-Trap-Polyfill nötig.
+					</Text>
+				{/snippet}
+			</Modal>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="WithFooter">
+	{#snippet children()}
+		<div>
+			<Button variant="primary" onclick={() => (withFooterOpen = true)}>Mit Footer</Button>
+			<Modal
+				bind:open={withFooterOpen}
+				title="Karte verschieben"
+				description="Wähle einen Zielstapel."
+			>
+				{#snippet children()}
+					<Text tone="muted">
+						In einer echten App stünden hier Auswahl-Optionen. Footer-Buttons nutzen die
+						standard-Button-Variants.
+					</Text>
+				{/snippet}
+				{#snippet footer()}
+					<Button variant="ghost" size="sm" onclick={() => (withFooterOpen = false)}>
+						Abbrechen
+					</Button>
+					<Button variant="primary" size="sm" onclick={() => (withFooterOpen = false)}>
+						Verschieben
+					</Button>
+				{/snippet}
+			</Modal>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="LargeContent">
+	{#snippet children()}
+		<div>
+			<Button variant="primary" onclick={() => (largeOpen = true)}>Großes Modal</Button>
+			<Modal bind:open={largeOpen} title="Lange Liste" size="lg">
+				{#snippet children()}
+					<div style="display:flex; flex-direction:column; gap:0.5rem;">
+						{#each Array(20) as _, i (i)}
+							<div
+								style="padding:0.5rem 0.75rem; border:1px solid hsl(var(--color-border)); border-radius:0.5rem;"
+							>
+								Eintrag {i + 1}
+							</div>
+						{/each}
+					</div>
+				{/snippet}
+			</Modal>
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/organisms/Modal.svelte b/packages/shared-ui/src/organisms/Modal.svelte
index 6b582bdcb..72126b787 100644
--- a/packages/shared-ui/src/organisms/Modal.svelte
+++ b/packages/shared-ui/src/organisms/Modal.svelte
@@ -1,111 +1,167 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { X } from '@mana/shared-icons';
-	import Text from '../atoms/Text.svelte';
-	import { focusTrap } from '../actions/focusTrap';
+
+	type Size = 'sm' | 'md' | 'lg';
 
 	interface Props {
-		visible: boolean;
-		onClose: () => void;
+		open?: boolean;
+		/** v0.1.x-Compat-Alias für `open`. */
+		visible?: boolean;
+		onClose?: () => void;
 		title?: string;
-		icon?: Snippet;
-		children: Snippet;
+		description?: string;
+		size?: Size;
+		/** v0.1.x-Compat-Alias für `size`. */
+		maxWidth?: Size;
+		closeOnBackdrop?: boolean;
+		ariaLabel?: string;
+		children?: Snippet;
 		footer?: Snippet;
-		maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
-		showHeader?: boolean;
+		/** v0.1.x-Compat: Custom-Class. */
+		class?: string;
 	}
 
 	let {
+		open = $bindable(false),
 		visible,
 		onClose,
 		title,
-		icon,
+		description,
+		size = 'md',
+		maxWidth,
+		closeOnBackdrop = true,
+		ariaLabel,
 		children,
 		footer,
-		maxWidth = 'lg',
-		showHeader = true,
 	}: Props = $props();
 
-	const maxWidthClasses = {
-		sm: 'max-w-sm',
-		md: 'max-w-md',
-		lg: 'max-w-lg',
-		xl: 'max-w-xl',
-		'2xl': 'max-w-2xl',
-		'3xl': 'max-w-3xl',
-	};
+	let dialog: HTMLDialogElement | null = $state(null);
 
-	function handleBackdropClick(e: MouseEvent) {
-		if (e.target === e.currentTarget) {
-			onClose();
+	const effectiveOpen = $derived(visible ?? open);
+	const effectiveSize = $derived(maxWidth ?? size);
+
+	$effect(() => {
+		if (!dialog) return;
+		if (effectiveOpen && !dialog.open) {
+			dialog.showModal();
+		} else if (!effectiveOpen && dialog.open) {
+			dialog.close();
 		}
+	});
+
+	function handleClose() {
+		open = false;
+		onClose?.();
 	}
 
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape' && visible) {
-			onClose();
-		}
+	function handleBackdropClick(e: MouseEvent) {
+		if (!closeOnBackdrop) return;
+		// click on the dialog itself (backdrop area) — content is wrapped in <div class="content">
+		if (e.target === dialog) handleClose();
+	}
+
+	function handleCancel(e: Event) {
+		// fires on Escape — let it bubble to native close, then sync state
+		e.preventDefault();
+		handleClose();
 	}
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-{#if visible}
-	<!-- Modal Backdrop -->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<div
-		class="fixed inset-0 flex items-end sm:items-center justify-center bg-black/50 backdrop-blur-sm p-0 sm:p-4"
-		style="z-index: 9990;"
-		onclick={handleBackdropClick}
-		onkeydown={(e) => e.key === 'Enter' && handleBackdropClick(e as unknown as MouseEvent)}
-		role="dialog"
-		aria-modal="true"
-		tabindex="-1"
-		use:focusTrap
-	>
-		<!-- Modal Content -->
-		<div
-			class="relative flex max-h-[95vh] sm:max-h-[90vh] w-full {maxWidthClasses[
-				maxWidth
-			]} flex-col rounded-t-2xl sm:rounded-2xl border border-border bg-surface-elevated-2 backdrop-blur-xl shadow-2xl"
-			onclick={(e) => e.stopPropagation()}
-			onkeydown={(e) => e.stopPropagation()}
-			role="none"
-		>
-			{#if showHeader}
-				<!-- Header -->
-				<div class="flex items-center justify-between p-4 sm:p-6 border-b border-border">
-					<div class="flex items-center gap-3 flex-1">
-						{#if icon}
-							{@render icon()}
-						{/if}
-						{#if title}
-							<Text variant="large" weight="semibold">
-								{title}
-							</Text>
-						{/if}
-					</div>
-					<button
-						onclick={onClose}
-						class="p-2.5 sm:p-2 rounded-xl bg-foreground/5 hover:bg-foreground/10 transition-all duration-200 hover:scale-105"
-						aria-label="Close"
-					>
-						<X size={18} weight="bold" class="text-muted-foreground" />
-					</button>
-				</div>
-			{/if}
-
-			<!-- Body (scrollable) -->
-			<div class="flex-1 overflow-y-auto p-4 sm:p-6">
-				{@render children()}
-			</div>
-
-			<!-- Footer (optional) -->
-			{#if footer}
-				<div class="border-t border-border p-4 sm:p-6">
-					{@render footer()}
-				</div>
-			{/if}
+<dialog
+	bind:this={dialog}
+	class="modal size-{effectiveSize}"
+	aria-label={ariaLabel ?? title}
+	aria-describedby={description ? 'modal-desc' : undefined}
+	onclick={handleBackdropClick}
+	oncancel={handleCancel}
+>
+	<div class="content" role="document">
+		{#if title || description}
+			<header class="head">
+				{#if title}<h2 class="title">{title}</h2>{/if}
+				{#if description}<p class="desc" id="modal-desc">{description}</p>{/if}
+			</header>
+		{/if}
+		<div class="body">
+			{#if children}{@render children()}{/if}
 		</div>
+		{#if footer}
+			<footer class="foot">{@render footer()}</footer>
+		{/if}
 	</div>
-{/if}
+</dialog>
+
+<style>
+	.modal {
+		padding: 0;
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.875rem;
+		background: hsl(var(--color-surface));
+		color: hsl(var(--color-foreground));
+		font-family: inherit;
+		max-height: 90vh;
+		max-width: 95vw;
+		box-shadow:
+			0 8px 24px hsl(var(--color-foreground) / 0.12),
+			0 2px 6px hsl(var(--color-foreground) / 0.06);
+	}
+
+	.size-sm {
+		width: 26rem;
+	}
+	.size-md {
+		width: 36rem;
+	}
+	.size-lg {
+		width: 52rem;
+	}
+
+	.modal::backdrop {
+		background: hsl(var(--color-foreground) / 0.4);
+		backdrop-filter: blur(2px);
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		max-height: 90vh;
+	}
+
+	.head {
+		padding: 1.25rem 1.25rem 0.75rem;
+		border-bottom: 1px solid hsl(var(--color-border));
+	}
+
+	.title {
+		margin: 0 0 0.25rem;
+		font-size: 1.125rem;
+		font-weight: 600;
+	}
+
+	.desc {
+		margin: 0;
+		font-size: 0.875rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.body {
+		padding: 1.25rem;
+		overflow-y: auto;
+		flex: 1;
+	}
+
+	.foot {
+		padding: 0.875rem 1.25rem;
+		border-top: 1px solid hsl(var(--color-border));
+		display: flex;
+		gap: 0.5rem;
+		justify-content: flex-end;
+		flex-wrap: wrap;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.modal::backdrop {
+			backdrop-filter: none;
+		}
+	}
+</style>
diff --git a/packages/shared-ui/src/organisms/NotificationBar.svelte b/packages/shared-ui/src/organisms/NotificationBar.svelte
new file mode 100644
index 000000000..d0972710c
--- /dev/null
+++ b/packages/shared-ui/src/organisms/NotificationBar.svelte
@@ -0,0 +1,166 @@
+<script lang="ts">
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
+
+	export type NotificationType = 'info' | 'warning' | 'error';
+
+	export interface BottomNotification {
+		id: string;
+		message: string;
+		type: NotificationType;
+		/** Optionale Aktion mit Label + Click. `icon` ist v0.1.x-Compat (wird heute ignoriert). */
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		action?: { label: string; onClick: () => void; icon?: any };
+		dismissible?: boolean;
+		onDismiss?: () => void;
+	}
+
+	interface Props {
+		notifications: BottomNotification[];
+	}
+
+	let { notifications }: Props = $props();
+
+	const PRIORITY: Record<NotificationType, number> = { error: 3, warning: 2, info: 1 };
+
+	const active = $derived(
+		notifications.length > 0
+			? [...notifications].sort((a, b) => PRIORITY[b.type] - PRIORITY[a.type])[0]
+			: null
+	);
+
+	function handleDismiss() {
+		if (active?.onDismiss) active.onDismiss();
+	}
+</script>
+
+{#if active}
+	<div
+		class="notification-bar"
+		class:warning={active.type === 'warning'}
+		class:error={active.type === 'error'}
+		role={active.type === 'error' ? 'alert' : 'status'}
+	>
+		<p class="message">{active.message}</p>
+		<div class="actions">
+			{#if active.action}
+				<button class="action-btn" type="button" onclick={active.action.onClick}>
+					{active.action.label}
+					<DynamicIcon name="arrow-right" size="xs" />
+				</button>
+			{/if}
+			{#if active.dismissible !== false}
+				<button class="dismiss-btn" type="button" onclick={handleDismiss} aria-label="Schließen">
+					<DynamicIcon name="x" size="sm" />
+				</button>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.notification-bar {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.625rem 0.625rem 0.625rem 1rem;
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.875rem;
+		max-width: 480px;
+		width: max-content;
+		animation: slideUp 220ms ease-out;
+	}
+
+	.notification-bar.warning {
+		border-color: hsl(var(--color-warning));
+	}
+
+	.notification-bar.error {
+		border-color: hsl(var(--color-error));
+	}
+
+	@keyframes slideUp {
+		from {
+			opacity: 0;
+			transform: translateY(8px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.message {
+		flex: 1;
+		margin: 0;
+		font-size: 0.8125rem;
+		line-height: 1.4;
+		color: hsl(var(--color-foreground));
+	}
+
+	.actions {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		flex-shrink: 0;
+	}
+
+	.action-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 0.875rem;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: hsl(var(--color-primary-foreground));
+		background: hsl(var(--color-primary));
+		border: none;
+		border-radius: 0.625rem;
+		cursor: pointer;
+		transition: background-color 120ms;
+		white-space: nowrap;
+		font-family: inherit;
+	}
+
+	.action-btn:hover {
+		background: hsl(var(--color-primary) / 0.9);
+	}
+
+	.action-btn:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
+	}
+
+	.dismiss-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		padding: 0;
+		color: hsl(var(--color-muted-foreground));
+		background: transparent;
+		border: none;
+		border-radius: 0.25rem;
+		cursor: pointer;
+		transition:
+			background-color 120ms,
+			color 120ms;
+	}
+
+	.dismiss-btn:hover {
+		background: hsl(var(--color-surface-hover));
+		color: hsl(var(--color-foreground));
+	}
+
+	.dismiss-btn:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
+	}
+
+	@media (max-width: 480px) {
+		.notification-bar {
+			max-width: calc(100vw - 2rem);
+		}
+	}
+</style>
diff --git a/packages/shared-ui/src/organisms/index.ts b/packages/shared-ui/src/organisms/index.ts
index 610da9bfd..90affce5e 100644
--- a/packages/shared-ui/src/organisms/index.ts
+++ b/packages/shared-ui/src/organisms/index.ts
@@ -1,28 +1,8 @@
 export { default as Modal } from './Modal.svelte';
 export { default as ConfirmationModal } from './ConfirmationModal.svelte';
 export { default as FormModal } from './FormModal.svelte';
-export { default as AppSlider } from './AppSlider.svelte';
+export { default as NotificationBar } from './NotificationBar.svelte';
+export type { BottomNotification, NotificationType } from './NotificationBar.svelte';
+export { default as ContextMenu, createContextMenuState } from './ContextMenu.svelte';
+export type { ContextMenuItem, ContextMenuState } from './ContextMenu.svelte';
 export { default as BaseListView } from './BaseListView.svelte';
-export type { AppItem } from './AppSlider.types';
-
-// Network Graph
-export {
-	NetworkGraph,
-	NetworkControls,
-	stringToColor,
-	getInitials,
-	SIMULATION_CONFIG,
-	NODE_CONFIG,
-	LABEL_CONFIG,
-} from './network';
-export type {
-	NetworkNode,
-	NetworkLink,
-	NetworkTag,
-	NetworkTransform,
-	NetworkGraphProps,
-	NetworkControlsProps,
-	NetworkGraphResponse,
-	SimulationNode,
-	SimulationLink,
-} from './network';
diff --git a/packages/shared-ui/src/organisms/network/NetworkControls.svelte b/packages/shared-ui/src/organisms/network/NetworkControls.svelte
deleted file mode 100644
index 55c369131..000000000
--- a/packages/shared-ui/src/organisms/network/NetworkControls.svelte
+++ /dev/null
@@ -1,619 +0,0 @@
-<script lang="ts">
-	import {
-		MagnifyingGlass,
-		MagnifyingGlassPlus,
-		MagnifyingGlassMinus,
-		ArrowCounterClockwise,
-		Funnel,
-		X,
-		Crosshair,
-		Keyboard,
-	} from '@mana/shared-icons';
-	import type { NetworkTag } from './network.types';
-
-	interface Props {
-		searchQuery?: string;
-		tags?: NetworkTag[];
-		selectedTagId?: string | null;
-		subtitles?: string[];
-		selectedSubtitle?: string | null;
-		subtitleLabel?: string;
-		nodeCount?: number;
-		linkCount?: number;
-		nodeLabel?: string;
-		linkLabel?: string;
-		searchPlaceholder?: string;
-		minStrength?: number;
-		showSearch?: boolean;
-		onSearch?: (query: string) => void;
-		onTagFilter?: (tagId: string | null) => void;
-		onSubtitleFilter?: (subtitle: string | null) => void;
-		onStrengthFilter?: (minStrength: number) => void;
-		onZoomIn?: () => void;
-		onZoomOut?: () => void;
-		onResetZoom?: () => void;
-		onFocusSelected?: () => void;
-		onClearFilters?: () => void;
-	}
-
-	let {
-		searchQuery = '',
-		tags = [],
-		selectedTagId = null,
-		subtitles = [],
-		selectedSubtitle = null,
-		subtitleLabel = 'Filter',
-		nodeCount = 0,
-		linkCount = 0,
-		nodeLabel = 'Elemente',
-		linkLabel = 'Verbindungen',
-		searchPlaceholder = 'Suchen...',
-		minStrength = 0,
-		showSearch = true,
-		onSearch,
-		onTagFilter,
-		onSubtitleFilter,
-		onStrengthFilter,
-		onZoomIn,
-		onZoomOut,
-		onResetZoom,
-		onFocusSelected,
-		onClearFilters,
-	}: Props = $props();
-
-	// svelte-ignore state_referenced_locally
-	let searchInput = $state(searchQuery);
-	let showFilters = $state(false);
-	let showKeyboardHelp = $state(false);
-	// svelte-ignore state_referenced_locally
-	let strengthValue = $state(minStrength);
-	let searchInputElement = $state<HTMLInputElement | undefined>(undefined);
-
-	// Sync searchInput with external searchQuery
-	$effect(() => {
-		searchInput = searchQuery;
-	});
-
-	// Sync strength with external minStrength
-	$effect(() => {
-		strengthValue = minStrength;
-	});
-
-	function handleSearchInput(event: Event) {
-		const target = event.target as HTMLInputElement;
-		searchInput = target.value;
-		onSearch?.(target.value);
-	}
-
-	function clearSearch() {
-		searchInput = '';
-		onSearch?.('');
-	}
-
-	function handleTagChange(event: Event) {
-		const target = event.target as HTMLSelectElement;
-		onTagFilter?.(target.value || null);
-	}
-
-	function handleSubtitleChange(event: Event) {
-		const target = event.target as HTMLSelectElement;
-		onSubtitleFilter?.(target.value || null);
-	}
-
-	function clearAllFilters() {
-		searchInput = '';
-		strengthValue = 0;
-		onClearFilters?.();
-	}
-
-	function handleStrengthChange(event: Event) {
-		const target = event.target as HTMLInputElement;
-		strengthValue = parseInt(target.value, 10);
-		onStrengthFilter?.(strengthValue);
-	}
-
-	function focusSearch() {
-		searchInputElement?.focus();
-	}
-
-	const hasActiveFilters = $derived(
-		searchQuery || selectedTagId || selectedSubtitle || minStrength > 0
-	);
-
-	// Keyboard shortcuts info
-	const keyboardShortcuts = [
-		{ key: '+/-', description: 'Zoom in/out' },
-		{ key: '0', description: 'Reset zoom' },
-		{ key: 'F', description: 'Fokus auf Auswahl' },
-		{ key: '/', description: 'Suche fokussieren' },
-		{ key: 'Esc', description: 'Auswahl aufheben' },
-	];
-
-	// Export focus function for parent
-	export { focusSearch };
-</script>
-
-<div class="network-controls">
-	<!-- Search bar -->
-	{#if showSearch}
-		<div class="search-container">
-			<MagnifyingGlass size={18} class="search-icon" />
-			<input
-				bind:this={searchInputElement}
-				type="text"
-				placeholder={searchPlaceholder}
-				value={searchInput}
-				oninput={handleSearchInput}
-				class="search-input"
-			/>
-			{#if searchInput}
-				<button onclick={clearSearch} class="clear-btn" aria-label="Suche löschen">
-					<X size={16} />
-				</button>
-			{/if}
-		</div>
-	{/if}
-
-	<!-- Filter toggle -->
-	{#if tags.length > 0 || subtitles.length > 0}
-		<button
-			onclick={() => (showFilters = !showFilters)}
-			class="control-btn"
-			class:active={showFilters || hasActiveFilters}
-			aria-label="Filter anzeigen"
-			title="Filter"
-		>
-			<Funnel size={18} />
-			{#if hasActiveFilters}
-				<span class="filter-badge"></span>
-			{/if}
-		</button>
-	{/if}
-
-	<!-- Zoom controls -->
-	<div class="zoom-controls">
-		<button onclick={onZoomIn} class="control-btn" aria-label="Vergrößern" title="Vergrößern (+)">
-			<MagnifyingGlassPlus size={18} />
-		</button>
-		<button
-			onclick={onZoomOut}
-			class="control-btn"
-			aria-label="Verkleinern"
-			title="Verkleinern (-)"
-		>
-			<MagnifyingGlassMinus size={18} />
-		</button>
-		<button
-			onclick={onResetZoom}
-			class="control-btn"
-			aria-label="Ansicht zurücksetzen"
-			title="Zurücksetzen (0)"
-		>
-			<ArrowCounterClockwise size={18} />
-		</button>
-		<button
-			onclick={onFocusSelected}
-			class="control-btn"
-			aria-label="Auf Auswahl fokussieren"
-			title="Fokus auf Auswahl (F)"
-		>
-			<Crosshair size={18} />
-		</button>
-	</div>
-
-	<!-- Keyboard help toggle -->
-	<button
-		onclick={() => (showKeyboardHelp = !showKeyboardHelp)}
-		class="control-btn"
-		class:active={showKeyboardHelp}
-		aria-label="Tastaturkürzel anzeigen"
-		title="Tastaturkürzel"
-	>
-		<Keyboard size={18} />
-	</button>
-
-	<!-- Stats -->
-	<div class="stats">
-		<span class="stat">
-			{nodeCount}
-			{nodeLabel}
-		</span>
-		<span class="stat-divider">•</span>
-		<span class="stat">
-			{linkCount}
-			{linkLabel}
-		</span>
-	</div>
-</div>
-
-<!-- Keyboard shortcuts help -->
-{#if showKeyboardHelp}
-	<div class="keyboard-help">
-		<div class="keyboard-help-title">Tastaturkürzel</div>
-		<div class="keyboard-shortcuts">
-			{#each keyboardShortcuts as shortcut}
-				<div class="shortcut">
-					<kbd class="shortcut-key">{shortcut.key}</kbd>
-					<span class="shortcut-desc">{shortcut.description}</span>
-				</div>
-			{/each}
-		</div>
-	</div>
-{/if}
-
-<!-- Filter panel -->
-{#if showFilters}
-	<div class="filter-panel">
-		<div class="filter-row">
-			<!-- Tag filter -->
-			{#if tags.length > 0}
-				<div class="filter-group">
-					<label for="tag-filter" class="filter-label">Tag</label>
-					<select
-						id="tag-filter"
-						onchange={handleTagChange}
-						value={selectedTagId || ''}
-						class="filter-select"
-					>
-						<option value="">Alle Tags</option>
-						{#each tags as tag}
-							<option value={tag.id}>
-								{tag.name}
-							</option>
-						{/each}
-					</select>
-				</div>
-			{/if}
-
-			<!-- Subtitle filter (e.g., Company, Project) -->
-			{#if subtitles.length > 0}
-				<div class="filter-group">
-					<label for="subtitle-filter" class="filter-label">{subtitleLabel}</label>
-					<select
-						id="subtitle-filter"
-						onchange={handleSubtitleChange}
-						value={selectedSubtitle || ''}
-						class="filter-select"
-					>
-						<option value="">Alle</option>
-						{#each subtitles as subtitle}
-							<option value={subtitle}>
-								{subtitle}
-							</option>
-						{/each}
-					</select>
-				</div>
-			{/if}
-
-			<!-- Strength filter slider -->
-			<div class="filter-group strength-group">
-				<label for="strength-filter" class="filter-label">
-					Min. Stärke: {strengthValue}%
-				</label>
-				<input
-					id="strength-filter"
-					type="range"
-					min="0"
-					max="100"
-					step="10"
-					value={strengthValue}
-					oninput={handleStrengthChange}
-					class="strength-slider"
-				/>
-			</div>
-
-			<!-- Clear filters button -->
-			{#if hasActiveFilters}
-				<button onclick={clearAllFilters} class="clear-filters-btn">
-					<X size={14} />
-					Filter löschen
-				</button>
-			{/if}
-		</div>
-	</div>
-{/if}
-
-<style>
-	.network-controls {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		padding: 0.75rem 1rem;
-		background: hsl(var(--color-card) / 0.8);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid hsl(var(--color-border) / 0.5);
-		border-radius: 9999px;
-		flex-wrap: wrap;
-	}
-
-	.search-container {
-		position: relative;
-		flex: 1;
-		min-width: 200px;
-		max-width: 300px;
-	}
-
-	.search-container :global(.search-icon) {
-		position: absolute;
-		left: 0.75rem;
-		top: 50%;
-		transform: translateY(-50%);
-		color: hsl(var(--color-muted-foreground));
-		pointer-events: none;
-	}
-
-	.search-input {
-		width: 100%;
-		padding: 0.5rem 2rem 0.5rem 2.5rem;
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.5rem;
-		background: hsl(var(--color-background));
-		color: hsl(var(--color-foreground));
-		font-size: 0.875rem;
-		transition:
-			border-color 0.2s,
-			box-shadow 0.2s;
-	}
-
-	.search-input:focus {
-		outline: none;
-		border-color: hsl(var(--color-primary));
-		box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.1);
-	}
-
-	.search-input::placeholder {
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.clear-btn {
-		position: absolute;
-		right: 0.5rem;
-		top: 50%;
-		transform: translateY(-50%);
-		padding: 0.25rem;
-		background: none;
-		border: none;
-		color: hsl(var(--color-muted-foreground));
-		cursor: pointer;
-		border-radius: 0.25rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.clear-btn:hover {
-		color: hsl(var(--color-foreground));
-		background: hsl(var(--color-muted));
-	}
-
-	.control-btn {
-		position: relative;
-		padding: 0.5rem;
-		background: hsl(var(--color-background));
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.5rem;
-		color: hsl(var(--color-muted-foreground));
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: all 0.2s;
-	}
-
-	.control-btn:hover {
-		background: hsl(var(--color-muted));
-		color: hsl(var(--color-foreground));
-	}
-
-	.control-btn.active {
-		background: hsl(var(--color-primary) / 0.1);
-		border-color: hsl(var(--color-primary));
-		color: hsl(var(--color-primary));
-	}
-
-	.filter-badge {
-		position: absolute;
-		top: -2px;
-		right: -2px;
-		width: 8px;
-		height: 8px;
-		background: hsl(var(--color-primary));
-		border-radius: 50%;
-	}
-
-	.zoom-controls {
-		display: flex;
-		gap: 0.25rem;
-		padding-left: 0.5rem;
-		border-left: 1px solid hsl(var(--color-border));
-	}
-
-	.stats {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		margin-left: auto;
-		font-size: 0.75rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.stat-divider {
-		opacity: 0.5;
-	}
-
-	/* Filter panel */
-	.filter-panel {
-		margin-top: 0.5rem;
-		padding: 0.75rem 1rem;
-		background: hsl(var(--color-card) / 0.8);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid hsl(var(--color-border) / 0.5);
-		border-radius: 1rem;
-	}
-
-	.filter-row {
-		display: flex;
-		align-items: flex-end;
-		gap: 1rem;
-		flex-wrap: wrap;
-	}
-
-	.filter-group {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		min-width: 150px;
-	}
-
-	.filter-label {
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.filter-select {
-		padding: 0.5rem 0.75rem;
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.5rem;
-		background: hsl(var(--color-background));
-		color: hsl(var(--color-foreground));
-		font-size: 0.875rem;
-		cursor: pointer;
-	}
-
-	.filter-select:focus {
-		outline: none;
-		border-color: hsl(var(--color-primary));
-	}
-
-	.clear-filters-btn {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		padding: 0.5rem 0.75rem;
-		background: hsl(var(--color-error) / 0.1);
-		border: 1px solid hsl(var(--color-error) / 0.2);
-		border-radius: 0.5rem;
-		color: hsl(var(--color-error));
-		font-size: 0.875rem;
-		cursor: pointer;
-		transition: all 0.2s;
-	}
-
-	.clear-filters-btn:hover {
-		background: hsl(var(--color-error) / 0.15);
-	}
-
-	/* Strength slider */
-	.strength-group {
-		min-width: 180px;
-	}
-
-	.strength-slider {
-		width: 100%;
-		height: 6px;
-		border-radius: 3px;
-		background: hsl(var(--color-muted));
-		appearance: none;
-		cursor: pointer;
-	}
-
-	.strength-slider::-webkit-slider-thumb {
-		appearance: none;
-		width: 16px;
-		height: 16px;
-		border-radius: 50%;
-		background: hsl(var(--color-primary));
-		cursor: pointer;
-		transition: transform 0.1s;
-	}
-
-	.strength-slider::-webkit-slider-thumb:hover {
-		transform: scale(1.15);
-	}
-
-	.strength-slider::-moz-range-thumb {
-		width: 16px;
-		height: 16px;
-		border: none;
-		border-radius: 50%;
-		background: hsl(var(--color-primary));
-		cursor: pointer;
-	}
-
-	/* Keyboard help panel */
-	.keyboard-help {
-		margin-top: 0.5rem;
-		padding: 0.75rem 1rem;
-		background: hsl(var(--color-card) / 0.8);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid hsl(var(--color-border) / 0.5);
-		border-radius: 1rem;
-	}
-
-	.keyboard-help-title {
-		font-size: 0.75rem;
-		font-weight: 600;
-		color: hsl(var(--color-muted-foreground));
-		margin-bottom: 0.5rem;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-
-	.keyboard-shortcuts {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.75rem;
-	}
-
-	.shortcut {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	.shortcut-key {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 1.75rem;
-		padding: 0.25rem 0.5rem;
-		background: hsl(var(--color-muted));
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.375rem;
-		font-family: monospace;
-		font-size: 0.75rem;
-		font-weight: 600;
-		color: hsl(var(--color-foreground));
-	}
-
-	.shortcut-desc {
-		font-size: 0.8125rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	@media (max-width: 640px) {
-		.network-controls {
-			flex-direction: column;
-			align-items: stretch;
-		}
-
-		.search-container {
-			max-width: none;
-		}
-
-		.zoom-controls {
-			padding-left: 0;
-			border-left: none;
-			justify-content: center;
-		}
-
-		.stats {
-			justify-content: center;
-			margin-left: 0;
-		}
-	}
-</style>
diff --git a/packages/shared-ui/src/organisms/network/NetworkGraph.svelte b/packages/shared-ui/src/organisms/network/NetworkGraph.svelte
deleted file mode 100644
index ace05fb12..000000000
--- a/packages/shared-ui/src/organisms/network/NetworkGraph.svelte
+++ /dev/null
@@ -1,682 +0,0 @@
-<script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
-	import { zoom, zoomIdentity, type ZoomBehavior } from 'd3-zoom';
-	import { select, type Selection } from 'd3-selection';
-	import 'd3-transition'; // Side-effect import for .transition() method
-	import type { SimulationNode, SimulationLink, NetworkTransform } from './network.types';
-	import { stringToColor, getInitials, NODE_CONFIG, LABEL_CONFIG } from './constants';
-
-	interface Props {
-		nodes: SimulationNode[];
-		links: SimulationLink[];
-		selectedNodeId?: string | null;
-		onNodeClick?: (node: SimulationNode) => void;
-		onNodeDoubleClick?: (node: SimulationNode) => void;
-		onBackgroundClick?: () => void;
-		onDragStart?: (node: SimulationNode) => void;
-		onDrag?: (node: SimulationNode, x: number, y: number) => void;
-		onDragEnd?: (node: SimulationNode) => void;
-		onFocusSearch?: () => void;
-	}
-
-	let {
-		nodes,
-		links,
-		selectedNodeId = null,
-		onNodeClick,
-		onNodeDoubleClick,
-		onBackgroundClick,
-		onDragStart,
-		onDrag,
-		onDragEnd,
-		onFocusSearch,
-	}: Props = $props();
-
-	let svgElement: SVGSVGElement;
-	let containerElement: HTMLDivElement;
-	let zoomBehavior: ZoomBehavior<SVGSVGElement, unknown> | null = null;
-	let transform = $state<NetworkTransform>({ x: 0, y: 0, k: 1 });
-	let draggedNode: SimulationNode | null = null;
-
-	// Tooltip state
-	let hoveredLink = $state<SimulationLink | null>(null);
-	let tooltipPosition = $state({ x: 0, y: 0 });
-
-	// Setup zoom behavior
-	$effect(() => {
-		if (svgElement) {
-			zoomBehavior = zoom<SVGSVGElement, unknown>()
-				.scaleExtent([0.1, 4])
-				.on('zoom', (event) => {
-					transform = {
-						x: event.transform.x,
-						y: event.transform.y,
-						k: event.transform.k,
-					};
-				});
-
-			select(svgElement).call(zoomBehavior);
-		}
-	});
-
-	function handleNodeClick(node: SimulationNode) {
-		onNodeClick?.(node);
-	}
-
-	function handleBackgroundClick(event: MouseEvent) {
-		if (event.target === svgElement) {
-			onBackgroundClick?.();
-		}
-	}
-
-	function handleNodeDoubleClick(node: SimulationNode) {
-		onNodeDoubleClick?.(node);
-	}
-
-	function handleDragStart(event: MouseEvent, node: SimulationNode) {
-		event.stopPropagation();
-		draggedNode = node;
-		onDragStart?.(node);
-	}
-
-	function handleDrag(event: MouseEvent) {
-		if (!draggedNode || !svgElement) return;
-
-		const rect = svgElement.getBoundingClientRect();
-		const x = (event.clientX - rect.left - transform.x) / transform.k;
-		const y = (event.clientY - rect.top - transform.y) / transform.k;
-
-		onDrag?.(draggedNode, x, y);
-	}
-
-	function handleDragEnd() {
-		if (draggedNode) {
-			onDragEnd?.(draggedNode);
-			draggedNode = null;
-		}
-	}
-
-	function resetZoom() {
-		if (svgElement && zoomBehavior) {
-			select(svgElement).transition().duration(300).call(zoomBehavior.transform, zoomIdentity);
-		}
-	}
-
-	function zoomIn() {
-		if (svgElement && zoomBehavior) {
-			select(svgElement).transition().duration(200).call(zoomBehavior.scaleBy, 1.3);
-		}
-	}
-
-	function zoomOut() {
-		if (svgElement && zoomBehavior) {
-			select(svgElement).transition().duration(200).call(zoomBehavior.scaleBy, 0.7);
-		}
-	}
-
-	function focusOnSelectedNode() {
-		if (!selectedNodeId || !svgElement || !zoomBehavior || !containerElement) return;
-		const node = nodes.find((n) => n.id === selectedNodeId);
-		if (!node || node.x === undefined || node.y === undefined) return;
-
-		const rect = containerElement.getBoundingClientRect();
-		const centerX = rect.width / 2;
-		const centerY = rect.height / 2;
-
-		// Calculate transform to center on node
-		const scale = 1.5;
-		const x = centerX - node.x * scale;
-		const y = centerY - node.y * scale;
-
-		select(svgElement)
-			.transition()
-			.duration(500)
-			.call(zoomBehavior.transform, zoomIdentity.translate(x, y).scale(scale));
-	}
-
-	// Keyboard shortcuts
-	function handleKeydown(event: KeyboardEvent) {
-		// Ignore if typing in an input
-		if (
-			event.target instanceof HTMLInputElement ||
-			event.target instanceof HTMLTextAreaElement ||
-			event.target instanceof HTMLSelectElement
-		) {
-			return;
-		}
-
-		switch (event.key) {
-			case '+':
-			case '=':
-				event.preventDefault();
-				zoomIn();
-				break;
-			case '-':
-			case '_':
-				event.preventDefault();
-				zoomOut();
-				break;
-			case '0':
-				event.preventDefault();
-				resetZoom();
-				break;
-			case 'Escape':
-				event.preventDefault();
-				onBackgroundClick?.();
-				break;
-			case 'f':
-			case 'F':
-				if (!event.ctrlKey && !event.metaKey) {
-					event.preventDefault();
-					focusOnSelectedNode();
-				}
-				break;
-			case '/':
-				event.preventDefault();
-				onFocusSearch?.();
-				break;
-		}
-	}
-
-	// Setup keyboard listener
-	$effect(() => {
-		if (typeof window !== 'undefined') {
-			window.addEventListener('keydown', handleKeydown);
-			return () => {
-				window.removeEventListener('keydown', handleKeydown);
-			};
-		}
-	});
-
-	// Get link coordinates
-	function getLinkCoords(link: SimulationLink) {
-		const source = link.source as SimulationNode;
-		const target = link.target as SimulationNode;
-		return {
-			x1: source.x ?? 0,
-			y1: source.y ?? 0,
-			x2: target.x ?? 0,
-			y2: target.y ?? 0,
-		};
-	}
-
-	// Link hover handlers
-	function handleLinkMouseEnter(event: MouseEvent, link: SimulationLink) {
-		hoveredLink = link;
-		updateTooltipPosition(event);
-	}
-
-	function handleLinkMouseMove(event: MouseEvent) {
-		if (hoveredLink) {
-			updateTooltipPosition(event);
-		}
-	}
-
-	function handleLinkMouseLeave() {
-		hoveredLink = null;
-	}
-
-	function updateTooltipPosition(event: MouseEvent) {
-		if (!containerElement) return;
-		const rect = containerElement.getBoundingClientRect();
-		tooltipPosition = {
-			x: event.clientX - rect.left,
-			y: event.clientY - rect.top,
-		};
-	}
-
-	// Get node names for tooltip
-	function getLinkNodeNames(link: SimulationLink): { source: string; target: string } {
-		const source =
-			typeof link.source === 'string' ? nodes.find((n) => n.id === link.source) : link.source;
-		const target =
-			typeof link.target === 'string' ? nodes.find((n) => n.id === link.target) : link.target;
-		return {
-			source: source?.name ?? 'Unknown',
-			target: target?.name ?? 'Unknown',
-		};
-	}
-
-	// Check if a node is connected to selected node
-	function isConnectedToSelected(nodeId: string): boolean {
-		if (!selectedNodeId) return false;
-		if (nodeId === selectedNodeId) return true;
-
-		return links.some((link) => {
-			const sourceId = typeof link.source === 'string' ? link.source : link.source.id;
-			const targetId = typeof link.target === 'string' ? link.target : link.target.id;
-			return (
-				(sourceId === selectedNodeId && targetId === nodeId) ||
-				(targetId === selectedNodeId && sourceId === nodeId)
-			);
-		});
-	}
-
-	// Export functions for parent component
-	export { resetZoom, zoomIn, zoomOut, focusOnSelectedNode };
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-	bind:this={containerElement}
-	class="network-graph-container"
-	onmousemove={handleDrag}
-	onmouseup={handleDragEnd}
-	onmouseleave={handleDragEnd}
-	role="application"
-	aria-label="Network Graph"
->
-	<svg
-		bind:this={svgElement}
-		class="network-graph-svg"
-		style="width: 100%; height: 100%;"
-		onclick={handleBackgroundClick}
-		onkeydown={(e) => e.key === 'Escape' && handleBackgroundClick(e as unknown as MouseEvent)}
-		role="img"
-		aria-label="Network graph visualization"
-	>
-		<g transform="translate({transform.x}, {transform.y}) scale({transform.k})">
-			<!-- Links -->
-			<g class="links">
-				{#each links as link}
-					{@const coords = getLinkCoords(link)}
-					{@const sourceId = typeof link.source === 'string' ? link.source : link.source.id}
-					{@const targetId = typeof link.target === 'string' ? link.target : link.target.id}
-					{@const isHighlighted =
-						selectedNodeId && (sourceId === selectedNodeId || targetId === selectedNodeId)}
-					<!-- svelte-ignore a11y_no_static_element_interactions -->
-					<!-- Invisible wider line for easier hover -->
-					<line
-						x1={coords.x1}
-						y1={coords.y1}
-						x2={coords.x2}
-						y2={coords.y2}
-						stroke="transparent"
-						stroke-width="20"
-						class="link-hitbox"
-						onmouseenter={(e) => handleLinkMouseEnter(e, link)}
-						onmousemove={handleLinkMouseMove}
-						onmouseleave={handleLinkMouseLeave}
-					/>
-					<!-- Visible link -->
-					<line
-						x1={coords.x1}
-						y1={coords.y1}
-						x2={coords.x2}
-						y2={coords.y2}
-						stroke-width={Math.max(1, link.strength / 25)}
-						class="link"
-						class:highlighted={isHighlighted}
-						class:dimmed={selectedNodeId && !isHighlighted}
-						class:hovered={hoveredLink === link}
-						pointer-events="none"
-					/>
-				{/each}
-			</g>
-
-			<!-- Nodes -->
-			<g class="nodes">
-				{#each nodes as node (node.id)}
-					{@const isSelected = node.id === selectedNodeId}
-					{@const isConnected = isConnectedToSelected(node.id)}
-					{@const isDimmed = selectedNodeId && !isConnected}
-					{@const nodeRadius = isSelected ? NODE_CONFIG.selectedRadius : NODE_CONFIG.radius}
-					{@const avatarRadius = isSelected
-						? NODE_CONFIG.selectedAvatarRadius
-						: NODE_CONFIG.avatarRadius}
-					{@const badgeOffset = isSelected
-						? NODE_CONFIG.selectedBadgeOffset
-						: NODE_CONFIG.badgeOffset}
-					<!-- svelte-ignore a11y_click_events_have_key_events -->
-					<g
-						transform="translate({node.x ?? 0}, {node.y ?? 0})"
-						class="node"
-						class:selected={isSelected}
-						class:connected={isConnected && !isSelected}
-						class:dimmed={isDimmed}
-						onmousedown={(e) => handleDragStart(e, node)}
-						onclick={() => handleNodeClick(node)}
-						ondblclick={() => handleNodeDoubleClick(node)}
-						role="button"
-						tabindex="0"
-						aria-label={node.name}
-					>
-						<!-- Node circle -->
-						<circle r={nodeRadius} fill={stringToColor(node.name)} class="node-circle" />
-
-						<!-- Avatar image or initials -->
-						{#if node.photoUrl}
-							<clipPath id="clip-{node.id}">
-								<circle r={avatarRadius} />
-							</clipPath>
-							<image
-								href={node.photoUrl}
-								x={-avatarRadius}
-								y={-avatarRadius}
-								width={avatarRadius * 2}
-								height={avatarRadius * 2}
-								clip-path="url(#clip-{node.id})"
-								preserveAspectRatio="xMidYMid slice"
-							/>
-						{:else}
-							<text
-								class="node-initials"
-								text-anchor="middle"
-								dominant-baseline="central"
-								fill="white"
-								font-size={isSelected
-									? LABEL_CONFIG.selectedInitialsFontSize
-									: LABEL_CONFIG.initialsFontSize}
-								font-weight="600"
-							>
-								{getInitials(node.name)}
-							</text>
-						{/if}
-
-						<!-- Favorite indicator -->
-						{#if node.isFavorite}
-							<circle
-								cx={badgeOffset}
-								cy={-badgeOffset}
-								r="10"
-								fill="hsl(var(--color-background))"
-							/>
-							<text
-								x={badgeOffset}
-								y={-badgeOffset}
-								text-anchor="middle"
-								dominant-baseline="central"
-								font-size="12"
-							>
-								&#11088;
-							</text>
-						{/if}
-
-						<!-- Connection count badge -->
-						{#if node.connectionCount > 0}
-							<circle cx={-badgeOffset} cy={-badgeOffset} r="12" fill="hsl(var(--color-primary))" />
-							<text
-								x={-badgeOffset}
-								y={-badgeOffset}
-								text-anchor="middle"
-								dominant-baseline="central"
-								fill="white"
-								font-size="11"
-								font-weight="600"
-							>
-								{node.connectionCount}
-							</text>
-						{/if}
-
-						<!-- Node label (counter-scaled for zoom independence) -->
-						<g transform="scale({1 / transform.k})">
-							<text
-								y={(isSelected ? LABEL_CONFIG.selectedNameOffset : LABEL_CONFIG.nameOffset) *
-									transform.k}
-								class="node-label"
-								text-anchor="middle"
-								font-size={isSelected
-									? LABEL_CONFIG.selectedNameFontSize
-									: LABEL_CONFIG.nameFontSize}
-								font-weight={isSelected ? '600' : '500'}
-							>
-								{node.name}
-							</text>
-
-							<!-- Subtitle label (e.g., company) -->
-							{#if node.subtitle}
-								{@const labelOffset =
-									(isSelected ? LABEL_CONFIG.selectedNameOffset : LABEL_CONFIG.nameOffset) *
-									transform.k}
-								<text
-									y={labelOffset + LABEL_CONFIG.subtitleGap}
-									class="node-subtitle"
-									text-anchor="middle"
-									font-size={LABEL_CONFIG.subtitleFontSize}
-								>
-									{node.subtitle}
-								</text>
-							{/if}
-						</g>
-					</g>
-				{/each}
-			</g>
-		</g>
-	</svg>
-
-	<!-- Empty state -->
-	{#if nodes.length === 0}
-		<div class="empty-state">
-			<div class="empty-icon">&#128279;</div>
-			<p class="empty-title">Keine Verbindungen gefunden</p>
-			<p class="empty-description">Elemente werden verbunden, wenn sie gemeinsame Tags haben.</p>
-		</div>
-	{/if}
-
-	<!-- Link tooltip -->
-	{#if hoveredLink}
-		{@const names = getLinkNodeNames(hoveredLink)}
-		<div class="link-tooltip" style="left: {tooltipPosition.x}px; top: {tooltipPosition.y}px;">
-			<div class="tooltip-header">
-				<span class="tooltip-source">{names.source}</span>
-				<span class="tooltip-arrow">↔</span>
-				<span class="tooltip-target">{names.target}</span>
-			</div>
-			<div class="tooltip-strength">
-				<span class="strength-label">Stärke:</span>
-				<span class="strength-value">{hoveredLink.strength}%</span>
-				<div class="strength-bar">
-					<div class="strength-fill" style="width: {hoveredLink.strength}%"></div>
-				</div>
-			</div>
-			<div class="tooltip-tags">
-				{#each hoveredLink.sharedTags as tag}
-					<span class="tooltip-tag">{tag}</span>
-				{/each}
-			</div>
-		</div>
-	{/if}
-</div>
-
-<style>
-	.network-graph-container {
-		width: 100%;
-		height: 100%;
-		position: relative;
-		overflow: hidden;
-		background: hsl(var(--color-background));
-	}
-
-	.network-graph-svg {
-		display: block;
-		cursor: grab;
-	}
-
-	.network-graph-svg:active {
-		cursor: grabbing;
-	}
-
-	/* Links */
-	.link {
-		stroke: hsl(var(--color-muted-foreground) / 0.3);
-		transition:
-			stroke 0.2s,
-			stroke-width 0.2s,
-			opacity 0.2s;
-	}
-
-	.link.highlighted {
-		stroke: hsl(var(--color-primary));
-		stroke-width: 3 !important;
-	}
-
-	.link.dimmed {
-		opacity: 0.1;
-	}
-
-	.link.hovered {
-		stroke: hsl(var(--color-primary));
-		stroke-width: 3 !important;
-	}
-
-	.link-hitbox {
-		cursor: pointer;
-	}
-
-	/* Nodes */
-	.node {
-		cursor: pointer;
-		transition: opacity 0.2s;
-	}
-
-	.node:hover .node-circle {
-		filter: brightness(1.1);
-	}
-
-	.node.selected .node-circle {
-		stroke: hsl(var(--color-primary));
-		stroke-width: 4;
-	}
-
-	.node.connected .node-circle {
-		stroke: hsl(var(--color-primary) / 0.5);
-		stroke-width: 2;
-	}
-
-	.node.dimmed {
-		opacity: 0.3;
-	}
-
-	.node-circle {
-		transition:
-			r 0.2s,
-			stroke 0.2s,
-			stroke-width 0.2s,
-			filter 0.2s;
-	}
-
-	.node-initials {
-		pointer-events: none;
-		user-select: none;
-	}
-
-	.node-label {
-		fill: hsl(var(--color-foreground));
-		pointer-events: none;
-		user-select: none;
-	}
-
-	.node-subtitle {
-		fill: hsl(var(--color-muted-foreground));
-		pointer-events: none;
-		user-select: none;
-	}
-
-	/* Empty state */
-	.empty-state {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		text-align: center;
-		padding: 2rem;
-	}
-
-	.empty-icon {
-		font-size: 3rem;
-		margin-bottom: 1rem;
-	}
-
-	.empty-title {
-		font-size: 1.25rem;
-		font-weight: 600;
-		color: hsl(var(--color-foreground));
-		margin-bottom: 0.5rem;
-	}
-
-	.empty-description {
-		color: hsl(var(--color-muted-foreground));
-		max-width: 300px;
-		line-height: 1.5;
-	}
-
-	/* Link tooltip */
-	.link-tooltip {
-		position: absolute;
-		transform: translate(-50%, -100%) translateY(-12px);
-		padding: 0.75rem 1rem;
-		background: hsl(var(--color-card));
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.75rem;
-		box-shadow: 0 4px 12px hsl(var(--color-foreground) / 0.1);
-		pointer-events: none;
-		z-index: 100;
-		min-width: 200px;
-		max-width: 300px;
-	}
-
-	.tooltip-header {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 0.5rem;
-		margin-bottom: 0.5rem;
-		font-size: 0.875rem;
-		font-weight: 500;
-		color: hsl(var(--color-foreground));
-	}
-
-	.tooltip-arrow {
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.tooltip-strength {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		margin-bottom: 0.625rem;
-		font-size: 0.75rem;
-	}
-
-	.strength-label {
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.strength-value {
-		font-weight: 600;
-		color: hsl(var(--color-primary));
-	}
-
-	.strength-bar {
-		flex: 1;
-		height: 4px;
-		background: hsl(var(--color-muted));
-		border-radius: 2px;
-		overflow: hidden;
-	}
-
-	.strength-fill {
-		height: 100%;
-		background: hsl(var(--color-primary));
-		border-radius: 2px;
-		transition: width 0.2s;
-	}
-
-	.tooltip-tags {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.375rem;
-	}
-
-	.tooltip-tag {
-		display: inline-flex;
-		align-items: center;
-		padding: 0.25rem 0.625rem;
-		background: hsl(var(--color-primary) / 0.1);
-		border: 1px solid hsl(var(--color-primary) / 0.2);
-		border-radius: 9999px;
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: hsl(var(--color-primary));
-	}
-</style>
diff --git a/packages/shared-ui/src/organisms/network/constants.ts b/packages/shared-ui/src/organisms/network/constants.ts
deleted file mode 100644
index caa56223d..000000000
--- a/packages/shared-ui/src/organisms/network/constants.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * Generate a consistent HSL color from a string
- * @param str - Input string (e.g., name)
- * @returns HSL color string
- */
-export function stringToColor(str: string): string {
-	let hash = 0;
-	for (let i = 0; i < str.length; i++) {
-		hash = str.charCodeAt(i) + ((hash << 5) - hash);
-	}
-	const hue = hash % 360;
-	return `hsl(${hue}, 70%, 50%)`;
-}
-
-/**
- * Get initials from a name
- * @param name - Full name
- * @returns 1-2 character initials
- */
-export function getInitials(name: string): string {
-	const parts = name.trim().split(' ').filter(Boolean);
-	if (parts.length >= 2) {
-		return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-	}
-	return name.substring(0, 2).toUpperCase();
-}
-
-/**
- * D3 Force simulation default parameters
- */
-export const SIMULATION_CONFIG = {
-	/** Distance between linked nodes */
-	linkDistance: 100,
-	/** Strength of links (0-1) */
-	linkStrength: 0.5,
-	/** Charge strength (negative = repulsion) */
-	chargeStrength: -300,
-	/** Collision radius for nodes */
-	collisionRadius: 50,
-	/** Initial alpha for simulation */
-	initialAlpha: 1,
-	/** Alpha for reheating simulation */
-	reheatAlpha: 0.3,
-	/** Zoom scale extent */
-	zoomExtent: [0.1, 4] as [number, number],
-} as const;
-
-/**
- * Node size configuration
- */
-export const NODE_CONFIG = {
-	/** Default node radius */
-	radius: 36,
-	/** Selected node radius */
-	selectedRadius: 40,
-	/** Avatar clip radius (slightly smaller than node) */
-	avatarRadius: 34,
-	/** Selected avatar clip radius */
-	selectedAvatarRadius: 38,
-	/** Badge offset from center */
-	badgeOffset: 25,
-	/** Selected badge offset */
-	selectedBadgeOffset: 28,
-} as const;
-
-/**
- * Label configuration
- */
-export const LABEL_CONFIG = {
-	/** Font size for name label */
-	nameFontSize: 18,
-	/** Selected name font size */
-	selectedNameFontSize: 20,
-	/** Font size for subtitle label */
-	subtitleFontSize: 14,
-	/** Y offset for name label */
-	nameOffset: 58,
-	/** Selected name Y offset */
-	selectedNameOffset: 62,
-	/** Gap between name and subtitle */
-	subtitleGap: 22,
-	/** Font size for initials */
-	initialsFontSize: 18,
-	/** Selected initials font size */
-	selectedInitialsFontSize: 20,
-} as const;
diff --git a/packages/shared-ui/src/organisms/network/index.ts b/packages/shared-ui/src/organisms/network/index.ts
deleted file mode 100644
index e6eb71cec..000000000
--- a/packages/shared-ui/src/organisms/network/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Components
-export { default as NetworkGraph } from './NetworkGraph.svelte';
-export { default as NetworkControls } from './NetworkControls.svelte';
-
-// Types
-export type {
-	NetworkNode,
-	NetworkLink,
-	NetworkTag,
-	NetworkTransform,
-	NetworkGraphProps,
-	NetworkControlsProps,
-	NetworkGraphResponse,
-	SimulationNode,
-	SimulationLink,
-} from './network.types';
-
-// Constants & Helpers
-export {
-	stringToColor,
-	getInitials,
-	SIMULATION_CONFIG,
-	NODE_CONFIG,
-	LABEL_CONFIG,
-} from './constants';
diff --git a/packages/shared-ui/src/organisms/network/network.types.ts b/packages/shared-ui/src/organisms/network/network.types.ts
deleted file mode 100644
index 9c843b732..000000000
--- a/packages/shared-ui/src/organisms/network/network.types.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import type { SimulationNodeDatum } from 'd3-force';
-
-/**
- * Tag attached to a network node
- */
-export interface NetworkTag {
-	id: string;
-	name: string;
-	color: string | null;
-}
-
-/**
- * Base network node interface (before D3 simulation)
- */
-export interface NetworkNode {
-	id: string;
-	name: string;
-	photoUrl?: string | null;
-	subtitle?: string | null; // e.g., Company, Project, Category
-	isFavorite?: boolean;
-	tags: NetworkTag[];
-	connectionCount: number;
-}
-
-/**
- * Network node with D3 simulation properties
- */
-export interface SimulationNode extends NetworkNode, SimulationNodeDatum {
-	x?: number;
-	y?: number;
-	vx?: number;
-	vy?: number;
-	fx?: number | null;
-	fy?: number | null;
-}
-
-/**
- * Network link between nodes
- */
-export interface NetworkLink {
-	source: string;
-	target: string;
-	type: 'tag';
-	strength: number; // 0-100, based on shared tag count
-	sharedTags: string[];
-}
-
-/**
- * Network link with D3 simulation properties
- * Note: After D3 simulation runs, source/target become SimulationNode objects
- */
-export interface SimulationLink {
-	source: string | SimulationNode;
-	target: string | SimulationNode;
-	type: 'tag';
-	strength: number;
-	sharedTags: string[];
-	index?: number;
-}
-
-/**
- * Zoom/pan transform state
- */
-export interface NetworkTransform {
-	x: number;
-	y: number;
-	k: number; // scale factor
-}
-
-/**
- * Props for NetworkGraph component
- */
-export interface NetworkGraphProps {
-	nodes: SimulationNode[];
-	links: SimulationLink[];
-	selectedNodeId?: string | null;
-	onNodeClick?: (node: SimulationNode) => void;
-	onNodeDoubleClick?: (node: SimulationNode) => void;
-	onBackgroundClick?: () => void;
-}
-
-/**
- * Props for NetworkControls component
- */
-export interface NetworkControlsProps {
-	searchQuery?: string;
-	tags?: NetworkTag[];
-	selectedTagId?: string | null;
-	subtitles?: string[]; // e.g., companies, projects
-	selectedSubtitle?: string | null;
-	subtitleLabel?: string; // e.g., "Firma", "Projekt"
-	nodeCount?: number;
-	linkCount?: number;
-	nodeLabel?: string; // e.g., "Kontakte", "Tasks"
-	linkLabel?: string; // e.g., "Verbindungen"
-	searchPlaceholder?: string;
-	onSearch?: (query: string) => void;
-	onTagFilter?: (tagId: string | null) => void;
-	onSubtitleFilter?: (subtitle: string | null) => void;
-	onZoomIn?: () => void;
-	onZoomOut?: () => void;
-	onResetZoom?: () => void;
-	onClearFilters?: () => void;
-}
-
-/**
- * API response structure for network graph
- */
-export interface NetworkGraphResponse {
-	nodes: NetworkNode[];
-	links: NetworkLink[];
-}
diff --git a/packages/shared-ui/src/pages/AppsPage.svelte b/packages/shared-ui/src/pages/AppsPage.svelte
deleted file mode 100644
index 2d92bc17c..000000000
--- a/packages/shared-ui/src/pages/AppsPage.svelte
+++ /dev/null
@@ -1,661 +0,0 @@
-<script lang="ts">
-	import {
-		MANA_APPS,
-		APP_URLS,
-		APP_STATUS_LABELS,
-		type ManaApp,
-		type AppIconId,
-	} from '@mana/shared-branding';
-
-	interface Props {
-		/** Current app ID to highlight */
-		currentAppId?: AppIconId;
-		/** Page title */
-		title?: string;
-		/** Locale for descriptions */
-		locale?: 'de' | 'en';
-		/** Custom app click handler */
-		onAppClick?: (app: ManaApp) => void;
-	}
-
-	let { currentAppId, title = 'Alle Apps', locale = 'de', onAppClick }: Props = $props();
-
-	// Filter active apps (non-archived)
-	const apps = $derived(MANA_APPS.filter((app) => !app.archived));
-
-	// Get status labels for current locale
-	const statusLabels = $derived(APP_STATUS_LABELS[locale]);
-
-	// Modal state
-	let selectedAppIndex = $state<number | null>(null);
-	let hoveredAppIndex = $state<number | null>(null);
-	let cardRotations = $state<{ [key: number]: { rotateX: number; rotateY: number } }>({});
-	let modalScrollContainer = $state<HTMLDivElement | null>(null);
-
-	// Detect dev mode
-	const isDev = $derived(
-		typeof window !== 'undefined' &&
-			(window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')
-	);
-
-	function getStatusColor(status: ManaApp['status']) {
-		const colors = {
-			published: '#4CAF50',
-			beta: '#FFD700',
-			development: '#FF9800',
-			planning: '#F44336',
-		};
-		return colors[status];
-	}
-
-	function getAppUrl(appId: AppIconId): string | undefined {
-		const urls = APP_URLS[appId];
-		if (!urls) return undefined;
-		return isDev ? urls.dev : urls.prod;
-	}
-
-	function openModal(index: number) {
-		selectedAppIndex = index;
-	}
-
-	function closeModal() {
-		selectedAppIndex = null;
-	}
-
-	function handleCardMouseMove(e: MouseEvent, index: number, cardElement: HTMLElement) {
-		const rect = cardElement.getBoundingClientRect();
-		const cardCenterX = rect.left + rect.width / 2;
-		const cardCenterY = rect.top + rect.height / 2;
-
-		const mouseXRelative = e.clientX - cardCenterX;
-		const mouseYRelative = e.clientY - cardCenterY;
-
-		const maxRotation = 3;
-		const rotateY = (mouseXRelative / (rect.width / 2)) * maxRotation;
-		const rotateX = -(mouseYRelative / (rect.height / 2)) * maxRotation;
-
-		cardRotations[index] = { rotateX, rotateY };
-	}
-
-	function handleCardMouseLeave(index: number) {
-		cardRotations[index] = { rotateX: 0, rotateY: 0 };
-	}
-
-	function handleAppAction(app: ManaApp) {
-		if (onAppClick) {
-			onAppClick(app);
-		} else {
-			const url = getAppUrl(app.id);
-			if (url) {
-				if (app.id === currentAppId) {
-					window.location.href = '/';
-				} else {
-					window.open(url, '_blank', 'noopener,noreferrer');
-				}
-			}
-		}
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape' && selectedAppIndex !== null) {
-			closeModal();
-		}
-	}
-
-	// Scroll to selected app in modal
-	$effect(() => {
-		if (selectedAppIndex !== null && modalScrollContainer) {
-			const appIndex = selectedAppIndex;
-			setTimeout(() => {
-				const cardWidth = 360 + 24;
-				const scrollPosition = appIndex * cardWidth;
-				modalScrollContainer?.scrollTo({
-					left: scrollPosition,
-					behavior: 'smooth',
-				});
-			}, 50);
-		}
-	});
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<div class="apps-page">
-	<h1 class="page-title">{title}</h1>
-
-	<div class="apps-grid">
-		{#each apps as app, index}
-			<div
-				class="app-card"
-				class:current={app.id === currentAppId}
-				style="--app-color: {app.color};"
-				role="button"
-				tabindex="0"
-				onclick={() => openModal(index)}
-				onkeydown={(e) => {
-					if (e.key === 'Enter' || e.key === ' ') {
-						e.preventDefault();
-						openModal(index);
-					}
-				}}
-			>
-				<div
-					class="status-indicator"
-					style="background-color: {getStatusColor(app.status)};"
-					title={statusLabels[app.status]}
-				></div>
-
-				<div class="app-icon-wrapper">
-					{#if app.icon}
-						<img src={app.icon} alt={app.name} class="app-icon" />
-					{:else}
-						<div class="app-icon-fallback" style="color: {app.color};">
-							{app.name.charAt(0)}
-						</div>
-					{/if}
-				</div>
-
-				<a
-					class="app-name app-name-link"
-					href={`/${app.id}`}
-					target="_blank"
-					rel="noopener noreferrer"
-					onclick={(e) => e.stopPropagation()}
-					title={`${app.name} in neuem Tab öffnen`}
-				>
-					{app.name}
-				</a>
-				<p class="app-description">{app.description[locale]}</p>
-			</div>
-		{/each}
-	</div>
-</div>
-
-<!-- Modal -->
-{#if selectedAppIndex !== null}
-	<div
-		class="modal-overlay"
-		onclick={closeModal}
-		onkeydown={(e) => e.key === 'Escape' && closeModal()}
-		role="dialog"
-		aria-modal="true"
-		tabindex="-1"
-	>
-		<button onclick={closeModal} class="modal-close-btn" aria-label="Close modal">
-			<svg
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path d="M18 6L6 18M6 6l12 12" />
-			</svg>
-		</button>
-
-		<div bind:this={modalScrollContainer} class="modal-scroll-container scrollbar-hide">
-			<div class="modal-cards-wrapper">
-				{#each apps as app, index}
-					<div
-						class="modal-card"
-						class:active={selectedAppIndex === index}
-						class:current={app.id === currentAppId}
-						style="--app-color: {app.color}; transform: perspective(1000px) rotateX({cardRotations[
-							index
-						]?.rotateX || 0}deg) rotateY({cardRotations[index]?.rotateY || 0}deg);"
-						onclick={(e) => {
-							e.stopPropagation();
-							selectedAppIndex = index;
-						}}
-						onmouseenter={() => (hoveredAppIndex = index)}
-						onmousemove={(e) => handleCardMouseMove(e, index, e.currentTarget)}
-						onmouseleave={() => {
-							handleCardMouseLeave(index);
-							hoveredAppIndex = null;
-						}}
-						onkeydown={() => {}}
-						role="button"
-						tabindex="0"
-					>
-						<div class="modal-card-status">
-							<div
-								class="modal-status-dot"
-								style="background-color: {getStatusColor(app.status)};"
-							></div>
-							<span class="modal-status-label">{statusLabels[app.status]}</span>
-						</div>
-
-						{#if app.icon}
-							<img src={app.icon} alt={app.name} class="modal-app-icon" />
-						{:else}
-							<div class="modal-app-icon-fallback" style="color: {app.color};">
-								{app.name.charAt(0)}
-							</div>
-						{/if}
-
-						<h3 class="modal-app-name">{app.name}</h3>
-
-						<p class="modal-app-tagline" style="color: {app.color};">
-							{app.description[locale]}
-						</p>
-
-						<p class="modal-app-description">{app.longDescription[locale]}</p>
-
-						<div class="modal-app-action">
-							{#if app.comingSoon}
-								<span class="modal-coming-soon"
-									>{locale === 'de' ? 'Demnächst' : 'Coming Soon'}</span
-								>
-							{:else}
-								<button
-									class="modal-open-btn"
-									style="background-color: {app.color}40; border-color: {app.color};"
-									onclick={(e) => {
-										e.stopPropagation();
-										handleAppAction(app);
-									}}
-								>
-									{app.id === currentAppId
-										? locale === 'de'
-											? 'Zur Startseite'
-											: 'Go to Home'
-										: locale === 'de'
-											? 'App öffnen'
-											: 'Open App'}
-								</button>
-							{/if}
-						</div>
-					</div>
-				{/each}
-			</div>
-		</div>
-	</div>
-{/if}
-
-<style>
-	.apps-page {
-		padding: 1rem;
-		max-width: 1200px;
-		margin: 0 auto;
-	}
-
-	.page-title {
-		font-size: 1.75rem;
-		font-weight: 700;
-		margin-bottom: 2rem;
-		text-align: center;
-		color: hsl(var(--color-foreground, 0 0% 0%));
-	}
-
-	:global(.dark) .page-title {
-		color: hsl(var(--color-foreground, 0 0% 100%));
-	}
-
-	/* Grid Layout */
-	.apps-grid {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		gap: 1rem;
-	}
-
-	@media (min-width: 640px) {
-		.apps-grid {
-			grid-template-columns: repeat(3, 1fr);
-			gap: 1.25rem;
-		}
-	}
-
-	@media (min-width: 1024px) {
-		.apps-grid {
-			grid-template-columns: repeat(4, 1fr);
-			gap: 1.5rem;
-		}
-	}
-
-	/* App Card (Grid) */
-	.app-card {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		padding: 1.5rem 1rem;
-		border-radius: 1rem;
-		cursor: pointer;
-		border: 1px solid rgba(0, 0, 0, 0.08);
-		background-color: rgba(255, 255, 255, 0.8);
-		backdrop-filter: blur(10px);
-		transition:
-			transform 0.2s ease,
-			box-shadow 0.2s ease,
-			border-color 0.2s ease;
-		text-align: center;
-	}
-
-	:global(.dark) .app-card {
-		border-color: rgba(255, 255, 255, 0.1);
-		background-color: rgba(255, 255, 255, 0.06);
-	}
-
-	.app-card:hover {
-		transform: translateY(-4px);
-		box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
-	}
-
-	:global(.dark) .app-card:hover {
-		box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4);
-	}
-
-	.app-card.current {
-		border-color: var(--app-color);
-		box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-color) 20%, transparent);
-	}
-
-	.status-indicator {
-		position: absolute;
-		top: 0.75rem;
-		right: 0.75rem;
-		width: 0.5rem;
-		height: 0.5rem;
-		border-radius: 50%;
-		animation: pulse 2s ease-in-out infinite;
-	}
-
-	.app-icon-wrapper {
-		width: 3.5rem;
-		height: 3.5rem;
-		margin-bottom: 0.75rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.app-icon {
-		width: 100%;
-		height: 100%;
-		object-fit: contain;
-	}
-
-	.app-icon-fallback {
-		width: 3rem;
-		height: 3rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 1.5rem;
-		font-weight: 700;
-		border-radius: 0.5rem;
-	}
-
-	.app-name {
-		font-size: 1rem;
-		font-weight: 600;
-		margin: 0 0 0.375rem;
-		color: #1a1a1a;
-	}
-
-	:global(.dark) .app-name {
-		color: #f3f4f6;
-	}
-
-	.app-name-link {
-		display: inline-block;
-		text-decoration: none;
-		cursor: pointer;
-		transition: color 0.15s;
-	}
-	.app-name-link:hover {
-		color: var(--app-color);
-		text-decoration: underline;
-	}
-
-	.app-description {
-		font-size: 0.75rem;
-		line-height: 1.4;
-		color: #6b7280;
-		margin: 0;
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		line-clamp: 2;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-	}
-
-	:global(.dark) .app-description {
-		color: #9ca3af;
-	}
-
-	/* Animations */
-	@keyframes pulse {
-		0%,
-		100% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0.6;
-		}
-	}
-
-	/* Modal Styles */
-	.modal-overlay {
-		position: fixed;
-		inset: 0;
-		z-index: 50;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: rgba(0, 0, 0, 0.9);
-		backdrop-filter: blur(8px);
-		animation: fadeIn 0.2s ease-out;
-	}
-
-	.modal-close-btn {
-		position: fixed;
-		top: 1.5rem;
-		right: 1.5rem;
-		z-index: 60;
-		width: 3rem;
-		height: 3rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-		border: 1px solid rgba(255, 255, 255, 0.2);
-		background-color: rgba(255, 255, 255, 0.1);
-		color: #fff;
-		cursor: pointer;
-		transition:
-			background-color 0.2s,
-			transform 0.2s;
-	}
-
-	.modal-close-btn:hover {
-		background-color: rgba(255, 255, 255, 0.2);
-		transform: scale(1.05);
-	}
-
-	.modal-scroll-container {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		overflow-x: auto;
-		scroll-snap-type: x mandatory;
-		scroll-behavior: smooth;
-	}
-
-	.scrollbar-hide::-webkit-scrollbar {
-		display: none;
-	}
-
-	.scrollbar-hide {
-		-ms-overflow-style: none;
-		scrollbar-width: none;
-	}
-
-	.modal-cards-wrapper {
-		display: flex;
-		gap: 1.5rem;
-		padding: 2rem;
-		margin: 0 auto;
-	}
-
-	.modal-card {
-		flex-shrink: 0;
-		width: 340px;
-		padding: 2rem;
-		padding-top: 2.5rem;
-		border-radius: 1.5rem;
-		scroll-snap-align: center;
-		position: relative;
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		background-color: rgba(255, 255, 255, 0.08);
-		backdrop-filter: blur(20px);
-		transform-style: preserve-3d;
-		transition:
-			transform 0.1s ease-out,
-			background-color 0.2s ease;
-		animation: modalCardIn 0.3s ease-out both;
-	}
-
-	.modal-card:hover {
-		background-color: rgba(255, 255, 255, 0.12);
-	}
-
-	.modal-card.current {
-		border-color: var(--app-color);
-		box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-color) 30%, transparent);
-	}
-
-	.modal-card-status {
-		position: absolute;
-		top: 0.875rem;
-		right: 0.875rem;
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.25rem 0.625rem 0.25rem 0.5rem;
-		border-radius: 1rem;
-		background-color: rgba(0, 0, 0, 0.2);
-	}
-
-	.modal-status-dot {
-		width: 0.375rem;
-		height: 0.375rem;
-		border-radius: 50%;
-		flex-shrink: 0;
-	}
-
-	.modal-status-label {
-		font-size: 0.6875rem;
-		font-weight: 500;
-		color: rgba(255, 255, 255, 0.8);
-	}
-
-	.modal-app-icon {
-		width: 5rem;
-		height: 5rem;
-		object-fit: contain;
-		margin: 0 auto 1rem;
-		display: block;
-	}
-
-	.modal-app-icon-fallback {
-		width: 4rem;
-		height: 4rem;
-		margin: 0 auto 1rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 2rem;
-		font-weight: 700;
-		border-radius: 0.75rem;
-	}
-
-	.modal-app-name {
-		font-size: 1.5rem;
-		font-weight: 700;
-		text-align: center;
-		margin: 0 0 0.5rem;
-		color: #fff;
-	}
-
-	.modal-app-tagline {
-		font-size: 0.875rem;
-		font-weight: 500;
-		text-align: center;
-		margin: 0 0 1rem;
-	}
-
-	.modal-app-description {
-		font-size: 0.875rem;
-		line-height: 1.6;
-		text-align: center;
-		margin: 0 0 1.5rem;
-		color: rgba(255, 255, 255, 0.7);
-	}
-
-	.modal-app-action {
-		text-align: center;
-	}
-
-	.modal-coming-soon {
-		display: inline-block;
-		padding: 0.625rem 1.25rem;
-		border-radius: 2rem;
-		font-size: 0.875rem;
-		font-weight: 500;
-		background-color: rgba(255, 255, 255, 0.1);
-		color: rgba(255, 255, 255, 0.5);
-	}
-
-	.modal-open-btn {
-		padding: 0.75rem 2rem;
-		border-radius: 0.75rem;
-		font-size: 0.875rem;
-		font-weight: 600;
-		border: 2px solid;
-		cursor: pointer;
-		transition:
-			opacity 0.2s,
-			transform 0.2s;
-		color: #fff;
-	}
-
-	.modal-open-btn:hover {
-		opacity: 0.85;
-		transform: scale(1.02);
-	}
-
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-
-	@keyframes modalCardIn {
-		from {
-			opacity: 0;
-			transform: scale(0.95) translateY(10px);
-		}
-		to {
-			opacity: 1;
-			transform: scale(1) translateY(0);
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.modal-overlay,
-		.modal-card {
-			animation: none;
-		}
-		.status-indicator {
-			animation: none;
-		}
-	}
-</style>
diff --git a/packages/shared-ui/src/pages/OfflinePage.svelte b/packages/shared-ui/src/pages/OfflinePage.svelte
index a39e05a44..2ab9d4d2d 100644
--- a/packages/shared-ui/src/pages/OfflinePage.svelte
+++ b/packages/shared-ui/src/pages/OfflinePage.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { House } from '@mana/shared-icons';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
+	import Spinner from '../atoms/Spinner.svelte';
 
 	interface Props {
 		appName: string;
 		offlineMessage: string;
+		homeHref?: string;
+		/** v0.1.x-Compat: Akzent-Farbe (heute ignoriert — der primary-Token bestimmt das). */
 		accentColor?: string;
 	}
 
-	let { appName, offlineMessage, accentColor = '#3b82f6' }: Props = $props();
+	let { appName, offlineMessage, homeHref = '/' }: Props = $props();
 
 	let isOnline = $state(false);
 
@@ -18,7 +21,7 @@
 		const handleOnline = () => {
 			isOnline = true;
 			setTimeout(() => {
-				window.location.href = '/';
+				window.location.href = homeHref;
 			}, 1000);
 		};
 
@@ -37,77 +40,148 @@
 </script>
 
 <svelte:head>
-	<title>Offline - {appName}</title>
+	<title>Offline – {appName}</title>
 </svelte:head>
 
-<div class="min-h-screen bg-slate-900 flex items-center justify-center px-4">
-	<div class="text-center max-w-md">
-		<div class="mb-8">
-			<svg
-				class="w-24 h-24 mx-auto text-slate-500"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-			>
+<div class="offline-page">
+	<div class="card">
+		<div class="icon-wrap" aria-hidden="true">
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
 				<path
 					stroke-linecap="round"
 					stroke-linejoin="round"
-					stroke-width="1.5"
 					d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a5 5 0 01-.354-7.072L8.95 7.636m1.414 5.657L7.535 16.12m8.485 0a5 5 0 01-7.07 0"
 				/>
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l18 18" />
 			</svg>
 		</div>
 
-		<h1 class="text-2xl font-bold text-white mb-4">
-			{isOnline ? 'Verbindung wiederhergestellt!' : 'Du bist offline'}
-		</h1>
+		<h1>{isOnline ? 'Verbindung wiederhergestellt!' : 'Du bist offline'}</h1>
 
-		<p class="text-slate-400 mb-8">
+		<p class="message">
 			{#if isOnline}
-				Du wirst gleich weitergeleitet...
+				Du wirst gleich weitergeleitet …
 			{:else}
 				{offlineMessage}
 			{/if}
 		</p>
 
 		{#if !isOnline}
-			<div class="space-y-4">
-				<a
-					href="/"
-					class="inline-flex items-center justify-center px-6 py-3 text-white font-medium rounded-lg transition-colors"
-					style="background-color: {accentColor};"
-					onmouseenter={(e) => {
-						e.currentTarget.style.filter = 'brightness(0.85)';
-					}}
-					onmouseleave={(e) => {
-						e.currentTarget.style.filter = '';
-					}}
-				>
-					<House size={20} class="mr-2" />
+			<div class="actions">
+				<a href={homeHref} class="primary-link">
+					<DynamicIcon name="home" size="md" />
 					Zur Startseite
 				</a>
-
-				<button
-					onclick={() => window.location.reload()}
-					class="block w-full px-6 py-3 text-slate-400 hover:text-white transition-colors"
-				>
+				<button type="button" onclick={() => window.location.reload()} class="secondary-btn">
 					Erneut versuchen
 				</button>
 			</div>
 		{:else}
-			<div class="flex items-center justify-center text-green-400">
-				<svg class="w-5 h-5 mr-2 animate-spin" fill="none" viewBox="0 0 24 24">
-					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
-					></circle>
-					<path
-						class="opacity-75"
-						fill="currentColor"
-						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-					></path>
-				</svg>
-				Weiterleitung...
+			<div class="redirecting">
+				<Spinner size="sm" tone="inherit" />
+				<span>Weiterleitung …</span>
 			</div>
 		{/if}
 	</div>
 </div>
+
+<style>
+	.offline-page {
+		min-height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 1rem;
+		background: hsl(var(--color-background));
+		color: hsl(var(--color-foreground));
+	}
+
+	.card {
+		text-align: center;
+		max-width: 28rem;
+	}
+
+	.icon-wrap {
+		display: flex;
+		justify-content: center;
+		margin-bottom: 2rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.icon-wrap svg {
+		width: 6rem;
+		height: 6rem;
+	}
+
+	h1 {
+		font-size: 1.5rem;
+		font-weight: 700;
+		margin: 0 0 1rem 0;
+		color: hsl(var(--color-foreground));
+	}
+
+	.message {
+		color: hsl(var(--color-muted-foreground));
+		margin: 0 0 2rem 0;
+	}
+
+	.actions {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		align-items: stretch;
+	}
+
+	.primary-link {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1.5rem;
+		font-weight: 500;
+		color: hsl(var(--color-primary-foreground));
+		background: hsl(var(--color-primary));
+		border-radius: 0.5rem;
+		text-decoration: none;
+		transition: background-color 120ms;
+		font-family: inherit;
+	}
+
+	.primary-link:hover {
+		background: hsl(var(--color-primary) / 0.9);
+	}
+
+	.primary-link:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
+	}
+
+	.secondary-btn {
+		display: block;
+		width: 100%;
+		padding: 0.75rem 1.5rem;
+		color: hsl(var(--color-muted-foreground));
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		font: inherit;
+		transition: color 120ms;
+	}
+
+	.secondary-btn:hover {
+		color: hsl(var(--color-foreground));
+	}
+
+	.secondary-btn:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
+		border-radius: 0.25rem;
+	}
+
+	.redirecting {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: hsl(var(--color-success));
+	}
+</style>
diff --git a/packages/shared-ui/src/pages/ProfilePage.svelte b/packages/shared-ui/src/pages/ProfilePage.svelte
deleted file mode 100644
index 92c5360fc..000000000
--- a/packages/shared-ui/src/pages/ProfilePage.svelte
+++ /dev/null
@@ -1,539 +0,0 @@
-<script lang="ts">
-	import type { UserProfile, ProfileActions } from './profile-types';
-
-	interface Props {
-		/** User profile data */
-		user: UserProfile;
-		/** App name for the page title */
-		appName: string;
-		/** Profile actions */
-		actions?: ProfileActions;
-		/** Page title */
-		pageTitle?: string;
-		/** Account info section title */
-		accountInfoTitle?: string;
-		/** Account actions section title */
-		actionsTitle?: string;
-		// i18n labels
-		emailLabel?: string;
-		nameLabel?: string;
-		memberSinceLabel?: string;
-		lastLoginLabel?: string;
-		roleLabel?: string;
-		editProfileLabel?: string;
-		changePasswordLabel?: string;
-		logoutLabel?: string;
-		deleteAccountLabel?: string;
-		deleteAccountWarning?: string;
-	}
-
-	let {
-		user,
-		appName,
-		actions,
-		pageTitle = 'Profil',
-		accountInfoTitle = 'Konto-Informationen',
-		actionsTitle = 'Aktionen',
-		emailLabel = 'E-Mail',
-		nameLabel = 'Name',
-		memberSinceLabel = 'Mitglied seit',
-		lastLoginLabel = 'Letzter Login',
-		roleLabel = 'Rolle',
-		editProfileLabel = 'Profil bearbeiten',
-		changePasswordLabel = 'Passwort ändern',
-		logoutLabel = 'Abmelden',
-		deleteAccountLabel = 'Konto löschen',
-		deleteAccountWarning = 'Diese Aktion kann nicht rückgängig gemacht werden.',
-	}: Props = $props();
-
-	// Get display name
-	const displayName = $derived(() => {
-		if (user.displayName) return user.displayName;
-		if (user.firstName && user.lastName) return `${user.firstName} ${user.lastName}`;
-		if (user.firstName) return user.firstName;
-		return null;
-	});
-
-	// Get initials for avatar
-	const initials = $derived(() => {
-		if (user.firstName && user.lastName) {
-			return `${user.firstName[0]}${user.lastName[0]}`.toUpperCase();
-		}
-		if (user.displayName) {
-			const parts = user.displayName.split(' ');
-			if (parts.length >= 2) {
-				return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
-			}
-			return user.displayName.substring(0, 2).toUpperCase();
-		}
-		return user.email.substring(0, 2).toUpperCase();
-	});
-
-	// Format date
-	function formatDate(dateString?: string): string {
-		if (!dateString) return '-';
-		const date = new Date(dateString);
-		return date.toLocaleDateString('de-DE', {
-			day: '2-digit',
-			month: '2-digit',
-			year: 'numeric',
-		});
-	}
-
-	// Format role
-	function formatRole(role?: string): string {
-		if (!role) return '-';
-		const roles: Record<string, string> = {
-			user: 'Benutzer',
-			admin: 'Administrator',
-			moderator: 'Moderator',
-		};
-		return roles[role] || role;
-	}
-</script>
-
-<svelte:head>
-	<title>{pageTitle} - {appName}</title>
-</svelte:head>
-
-<div class="profile-page">
-	<div class="profile-page__content">
-		<div class="profile-page__container">
-			<!-- Header -->
-			<div class="profile-page__header">
-				<!-- Avatar -->
-				<div class="profile-page__avatar">
-					{#if user.avatarUrl}
-						<img src={user.avatarUrl} alt="Avatar" class="profile-page__avatar-image" />
-					{:else}
-						<span class="profile-page__avatar-initials">{initials()}</span>
-					{/if}
-				</div>
-
-				<h1 class="profile-page__title">{displayName() || user.email}</h1>
-				{#if displayName()}
-					<p class="profile-page__subtitle">{user.email}</p>
-				{/if}
-			</div>
-
-			<!-- Account Info Section -->
-			<section class="profile-page__section">
-				<h2 class="profile-page__section-title">{accountInfoTitle}</h2>
-
-				<div class="profile-page__card">
-					<div class="profile-page__info-list">
-						<!-- Email -->
-						<div class="profile-page__info-item">
-							<div class="profile-page__info-icon">
-								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-									/>
-								</svg>
-							</div>
-							<div class="profile-page__info-content">
-								<span class="profile-page__info-label">{emailLabel}</span>
-								<span class="profile-page__info-value">{user.email}</span>
-							</div>
-						</div>
-
-						<!-- Name (if available) -->
-						{#if displayName()}
-							<div class="profile-page__info-item">
-								<div class="profile-page__info-icon">
-									<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-										/>
-									</svg>
-								</div>
-								<div class="profile-page__info-content">
-									<span class="profile-page__info-label">{nameLabel}</span>
-									<span class="profile-page__info-value">{displayName()}</span>
-								</div>
-							</div>
-						{/if}
-
-						<!-- Role -->
-						{#if user.role}
-							<div class="profile-page__info-item">
-								<div class="profile-page__info-icon">
-									<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-										/>
-									</svg>
-								</div>
-								<div class="profile-page__info-content">
-									<span class="profile-page__info-label">{roleLabel}</span>
-									<span class="profile-page__info-value">{formatRole(user.role)}</span>
-								</div>
-							</div>
-						{/if}
-
-						<!-- Member Since -->
-						{#if user.createdAt}
-							<div class="profile-page__info-item">
-								<div class="profile-page__info-icon">
-									<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-										/>
-									</svg>
-								</div>
-								<div class="profile-page__info-content">
-									<span class="profile-page__info-label">{memberSinceLabel}</span>
-									<span class="profile-page__info-value">{formatDate(user.createdAt)}</span>
-								</div>
-							</div>
-						{/if}
-
-						<!-- Last Login -->
-						{#if user.lastLoginAt}
-							<div class="profile-page__info-item">
-								<div class="profile-page__info-icon">
-									<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-										/>
-									</svg>
-								</div>
-								<div class="profile-page__info-content">
-									<span class="profile-page__info-label">{lastLoginLabel}</span>
-									<span class="profile-page__info-value">{formatDate(user.lastLoginAt)}</span>
-								</div>
-							</div>
-						{/if}
-					</div>
-				</div>
-			</section>
-
-			<!-- Actions Section -->
-			{#if actions}
-				<section class="profile-page__section">
-					<h2 class="profile-page__section-title">{actionsTitle}</h2>
-
-					<div class="profile-page__actions">
-						{#if actions.onEditProfile}
-							<button class="profile-page__action-btn" onclick={actions.onEditProfile}>
-								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-									/>
-								</svg>
-								<span>{editProfileLabel}</span>
-							</button>
-						{/if}
-
-						{#if actions.onChangePassword}
-							<button class="profile-page__action-btn" onclick={actions.onChangePassword}>
-								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-									/>
-								</svg>
-								<span>{changePasswordLabel}</span>
-							</button>
-						{/if}
-
-						{#if actions.onLogout}
-							<button
-								class="profile-page__action-btn profile-page__action-btn--secondary"
-								onclick={actions.onLogout}
-							>
-								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-									/>
-								</svg>
-								<span>{logoutLabel}</span>
-							</button>
-						{/if}
-
-						{#if actions.onDeleteAccount}
-							<button
-								class="profile-page__action-btn profile-page__action-btn--danger"
-								onclick={actions.onDeleteAccount}
-							>
-								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-									/>
-								</svg>
-								<span>{deleteAccountLabel}</span>
-							</button>
-							<p class="profile-page__warning">{deleteAccountWarning}</p>
-						{/if}
-					</div>
-				</section>
-			{/if}
-		</div>
-	</div>
-</div>
-
-<style>
-	.profile-page {
-		display: flex;
-		flex-direction: column;
-		min-height: 100%;
-		width: 100%;
-	}
-
-	.profile-page__content {
-		flex: 1;
-		overflow-x: hidden;
-		overflow-y: auto;
-		padding: 1rem;
-		width: 100%;
-		box-sizing: border-box;
-	}
-
-	.profile-page__container {
-		max-width: 40rem;
-		margin: 0 auto;
-		padding-bottom: 3rem;
-		width: 100%;
-		box-sizing: border-box;
-	}
-
-	.profile-page__header {
-		text-align: center;
-		margin-bottom: 2.5rem;
-	}
-
-	.profile-page__avatar {
-		width: 6rem;
-		height: 6rem;
-		margin: 0 auto 1.5rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-		background: rgba(255, 255, 255, 0.85);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06);
-		overflow: hidden;
-	}
-
-	:global(.dark) .profile-page__avatar {
-		background: rgba(255, 255, 255, 0.1);
-		border: 1px solid rgba(255, 255, 255, 0.2);
-	}
-
-	.profile-page__avatar-image {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-
-	.profile-page__avatar-initials {
-		font-size: 1.5rem;
-		font-weight: 600;
-		color: hsl(var(--color-primary, 221 83% 53%));
-	}
-
-	.profile-page__title {
-		font-size: 1.875rem;
-		font-weight: 600;
-		color: hsl(var(--color-foreground));
-		margin: 0 0 0.5rem 0;
-	}
-
-	.profile-page__subtitle {
-		font-size: 1rem;
-		color: hsl(var(--color-muted-foreground));
-		margin: 0;
-	}
-
-	.profile-page__section {
-		margin-bottom: 2rem;
-	}
-
-	.profile-page__section-title {
-		font-size: 1.125rem;
-		font-weight: 600;
-		color: hsl(var(--color-foreground));
-		margin: 0 0 1rem 0;
-	}
-
-	.profile-page__card {
-		padding: 1.25rem;
-		border-radius: 1rem;
-		background: rgba(255, 255, 255, 0.85);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06);
-	}
-
-	:global(.dark) .profile-page__card {
-		background: rgba(255, 255, 255, 0.08);
-		border: 1px solid rgba(255, 255, 255, 0.12);
-	}
-
-	.profile-page__info-list {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
-
-	.profile-page__info-item {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-	}
-
-	.profile-page__info-icon {
-		width: 2.5rem;
-		height: 2.5rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 0.75rem;
-		background: rgba(0, 0, 0, 0.03);
-		flex-shrink: 0;
-	}
-
-	:global(.dark) .profile-page__info-icon {
-		background: rgba(255, 255, 255, 0.05);
-	}
-
-	.profile-page__info-icon svg {
-		width: 1.25rem;
-		height: 1.25rem;
-		color: hsl(var(--color-primary, 221 83% 53%));
-	}
-
-	.profile-page__info-content {
-		display: flex;
-		flex-direction: column;
-		gap: 0.125rem;
-		min-width: 0;
-	}
-
-	.profile-page__info-label {
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.profile-page__info-value {
-		font-size: 0.9375rem;
-		font-weight: 500;
-		color: hsl(var(--color-foreground));
-		word-break: break-word;
-	}
-
-	.profile-page__actions {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-
-	.profile-page__action-btn {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		width: 100%;
-		padding: 1rem 1.25rem;
-		border-radius: 0.75rem;
-		background: rgba(255, 255, 255, 0.85);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-		cursor: pointer;
-		transition: all 0.2s ease;
-		font-size: 0.9375rem;
-		font-weight: 500;
-		color: hsl(var(--color-foreground));
-		text-align: left;
-	}
-
-	:global(.dark) .profile-page__action-btn {
-		background: rgba(255, 255, 255, 0.08);
-		border: 1px solid rgba(255, 255, 255, 0.12);
-	}
-
-	.profile-page__action-btn:hover {
-		transform: translateY(-1px);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-	}
-
-	:global(.dark) .profile-page__action-btn:hover {
-		background: rgba(255, 255, 255, 0.12);
-	}
-
-	.profile-page__action-btn svg {
-		width: 1.25rem;
-		height: 1.25rem;
-		flex-shrink: 0;
-		color: hsl(var(--color-primary, 221 83% 53%));
-	}
-
-	.profile-page__action-btn--secondary {
-		background: rgba(0, 0, 0, 0.03);
-	}
-
-	:global(.dark) .profile-page__action-btn--secondary {
-		background: rgba(255, 255, 255, 0.05);
-	}
-
-	.profile-page__action-btn--secondary svg {
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.profile-page__action-btn--danger {
-		color: hsl(0 84% 60%);
-		border-color: hsla(0, 84%, 60%, 0.2);
-	}
-
-	.profile-page__action-btn--danger svg {
-		color: hsl(0 84% 60%);
-	}
-
-	.profile-page__action-btn--danger:hover {
-		background: hsla(0, 84%, 60%, 0.1);
-		border-color: hsla(0, 84%, 60%, 0.3);
-	}
-
-	.profile-page__warning {
-		margin: 0.5rem 0 0 0;
-		font-size: 0.75rem;
-		color: hsl(var(--color-muted-foreground));
-		padding-left: 0.5rem;
-	}
-</style>
diff --git a/packages/shared-ui/src/pages/index.ts b/packages/shared-ui/src/pages/index.ts
new file mode 100644
index 000000000..2c301f2e0
--- /dev/null
+++ b/packages/shared-ui/src/pages/index.ts
@@ -0,0 +1 @@
+export { default as OfflinePage } from './OfflinePage.svelte';
diff --git a/packages/shared-ui/src/pages/profile-types.ts b/packages/shared-ui/src/pages/profile-types.ts
deleted file mode 100644
index 71a61ff18..000000000
--- a/packages/shared-ui/src/pages/profile-types.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * User profile data for display in ProfilePage
- */
-export interface UserProfile {
-	/** User ID */
-	id: string;
-	/** User email */
-	email: string;
-	/** Display name (optional) */
-	displayName?: string;
-	/** First name (optional) */
-	firstName?: string;
-	/** Last name (optional) */
-	lastName?: string;
-	/** Avatar URL (optional) */
-	avatarUrl?: string;
-	/** Account creation date */
-	createdAt?: string;
-	/** Last login date */
-	lastLoginAt?: string;
-	/** User role */
-	role?: string;
-}
-
-/**
- * Profile action handlers
- */
-export interface ProfileActions {
-	/** Called when user wants to edit profile */
-	onEditProfile?: () => void;
-	/** Called when user wants to change password */
-	onChangePassword?: () => void;
-	/** Called when user wants to delete account */
-	onDeleteAccount?: () => void;
-	/** Called when user wants to logout */
-	onLogout?: () => void;
-}
diff --git a/packages/shared-ui/src/quick-input/InputBar.svelte b/packages/shared-ui/src/quick-input/InputBar.svelte
index e6edf99ed..574ad705a 100644
--- a/packages/shared-ui/src/quick-input/InputBar.svelte
+++ b/packages/shared-ui/src/quick-input/InputBar.svelte
@@ -4,8 +4,9 @@
 	import type { QuickInputItem, CreatePreview } from './types';
 	import InputBarContextMenu from './InputBarContextMenu.svelte';
 	import { getInputBarSettingsStore } from './inputBarSettings.svelte';
-	import { getHighlightPatterns, highlightText, SEARCH_DEBOUNCE_MS } from '../search-core';
-	import type { HighlightPattern } from '../search-core';
+	import { getHighlightPatterns, highlightText } from './highlightPatterns';
+	import { SEARCH_DEBOUNCE_MS } from './index';
+	import type { HighlightPattern } from './types';
 
 	// Settings store
 	const settingsStore = getInputBarSettingsStore();
@@ -16,7 +17,7 @@
 	}
 
 	import type { Snippet } from 'svelte';
-	import { ArrowRight, Heart, MagnifyingGlass, Plus } from '@mana/shared-icons';
+	import DynamicIcon from '../atoms/DynamicIcon.svelte';
 
 	interface Props {
 		onSearch: (query: string) => Promise<QuickInputItem[]>;
@@ -404,7 +405,7 @@
 							{#if creating}
 								<div class="loading-spinner-small"></div>
 							{:else}
-								<Plus size={20} />
+								<DynamicIcon name="plus" size="md" />
 							{/if}
 						</div>
 						<div class="result-info">
@@ -427,7 +428,7 @@
 						onmouseenter={() => (selectedIndex = searchOptionIndex)}
 					>
 						<div class="result-avatar search-avatar">
-							<MagnifyingGlass size={20} />
+							<DynamicIcon name="search" size="md" />
 						</div>
 						<div class="result-info">
 							<div class="result-name">"{searchQuery}" {searchText.toLowerCase()}</div>
@@ -470,7 +471,7 @@
 								{/if}
 							</div>
 							{#if item.isFavorite}
-								<Heart size={20} weight="fill" class="favorite-icon" />
+								<span class="favorite-icon"><DynamicIcon name="heart-fill" size="md" /></span>
 							{/if}
 						</button>
 					{/each}
@@ -524,7 +525,7 @@
 				{#if creating}
 					<div class="loading-spinner-small"></div>
 				{:else}
-					<ArrowRight size={20} />
+					<DynamicIcon name="arrow-right" size="md" />
 				{/if}
 			</button>
 		{/if}
@@ -734,12 +735,12 @@
 	}
 
 	.input-highlight-backdrop :global(.hl-date) {
-		color: hsl(var(--color-accent, 262 83% 58%));
+		color: hsl(var(--color-primary));
 		font-weight: 500;
 	}
 
 	.input-highlight-backdrop :global(.hl-time) {
-		color: hsl(var(--color-accent, 262 83% 58%));
+		color: hsl(var(--color-primary));
 		font-weight: 500;
 	}
 
diff --git a/packages/shared-ui/src/quick-input/InputBarContextMenu.svelte b/packages/shared-ui/src/quick-input/InputBarContextMenu.svelte
index b5739146b..29400d896 100644
--- a/packages/shared-ui/src/quick-input/InputBarContextMenu.svelte
+++ b/packages/shared-ui/src/quick-input/InputBarContextMenu.svelte
@@ -1,13 +1,5 @@
 <script lang="ts">
-	import { ContextMenu, type ContextMenuItem } from '../context-menu';
-	import {
-		HighlighterCircle,
-		Target,
-		Calendar,
-		Trash,
-		Keyboard,
-		Question,
-	} from '@mana/shared-icons';
+	import ContextMenu, { type ContextMenuItem } from '../organisms/ContextMenu.svelte';
 	import { getInputBarSettingsStore } from './inputBarSettings.svelte';
 	import { clearRecentHistory } from './recentInputHistory';
 
@@ -82,7 +74,7 @@
 		items.push({
 			id: 'syntax-highlighting',
 			label: 'Syntax Highlighting',
-			icon: HighlighterCircle,
+			iconName: 'edit',
 			toggle: true,
 			checked: settingsStore.syntaxHighlighting,
 			action: toggleSyntaxHighlighting,
@@ -91,7 +83,7 @@
 		items.push({
 			id: 'auto-focus',
 			label: 'Auto-Focus',
-			icon: Target,
+			iconName: 'eye',
 			toggle: true,
 			checked: settingsStore.autoFocus,
 			action: toggleAutoFocus,
@@ -110,7 +102,7 @@
 			items.push({
 				id: 'default-option-header',
 				label: defaultOptionLabel,
-				icon: Calendar,
+				iconName: 'calendar',
 				disabled: true,
 			});
 
@@ -136,7 +128,7 @@
 		items.push({
 			id: 'clear-history',
 			label: 'Verlauf löschen',
-			icon: Trash,
+			iconName: 'trash',
 			variant: 'danger',
 			action: handleClearHistory,
 		});
@@ -152,7 +144,7 @@
 			items.push({
 				id: 'shortcuts',
 				label: 'Tastenkürzel',
-				icon: Keyboard,
+				iconName: 'gear',
 				shortcut: '?',
 				action: onShowShortcuts,
 			});
@@ -162,7 +154,7 @@
 			items.push({
 				id: 'syntax-help',
 				label: 'Syntax-Hilfe',
-				icon: Question,
+				iconName: 'info',
 				action: onShowSyntaxHelp,
 			});
 		}
diff --git a/packages/shared-ui/src/quick-input/InputBarHelpModal.svelte b/packages/shared-ui/src/quick-input/InputBarHelpModal.svelte
deleted file mode 100644
index 0629d0126..000000000
--- a/packages/shared-ui/src/quick-input/InputBarHelpModal.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { HelpModal } from '../help';
-	import { COMMON_SHORTCUTS, COMMON_SYNTAX, DEFAULT_LIVE_EXAMPLE } from '../help';
-	import type { HelpModalConfig, SyntaxGroup } from '../help';
-
-	interface Props {
-		open: boolean;
-		onClose: () => void;
-		mode?: 'shortcuts' | 'syntax';
-		/** App-specific syntax patterns (shown before common patterns) */
-		appSyntax?: SyntaxGroup[];
-		/** Override the live example */
-		liveExample?: HelpModalConfig['liveExample'];
-	}
-
-	let { open, onClose, mode = 'shortcuts', appSyntax, liveExample }: Props = $props();
-
-	// Build the config for HelpModal: app-specific syntax first, then common
-	const config = $derived<HelpModalConfig>({
-		shortcuts: COMMON_SHORTCUTS,
-		syntax: [...(appSyntax || []), ...COMMON_SYNTAX],
-		defaultTab: mode,
-		liveExample: liveExample || DEFAULT_LIVE_EXAMPLE,
-	});
-</script>
-
-<HelpModal {open} {onClose} {config} />
diff --git a/packages/shared-ui/src/quick-input/highlightPatterns.ts b/packages/shared-ui/src/quick-input/highlightPatterns.ts
index aad8cb544..ac0ed693d 100644
--- a/packages/shared-ui/src/quick-input/highlightPatterns.ts
+++ b/packages/shared-ui/src/quick-input/highlightPatterns.ts
@@ -1,3 +1,127 @@
-// Re-export from the shared search-core for back-compat.
-// Prefer importing from `../search-core` (or `@mana/shared-ui`) in new code.
-export { getHighlightPatterns } from '../search-core/highlight';
+/**
+ * Syntax-highlight patterns for search/command input surfaces
+ * (QuickInputBar, GlobalSpotlight). Patterns are locale-aware for date/priority
+ * keywords; universal patterns (tags, @references, times) apply to every locale.
+ */
+
+export interface HighlightPattern {
+	pattern: RegExp;
+	className: string;
+}
+
+/** Shared patterns that work across all locales (symbols, not words) */
+const UNIVERSAL_PATTERNS: HighlightPattern[] = [
+	// Priority shortcuts: !!! = urgent, !! = high
+	{ pattern: /!{3,}/g, className: 'hl-priority-urgent' },
+	{ pattern: /!{2}/g, className: 'hl-priority-high' },
+	// Tags
+	{ pattern: /#\w+/g, className: 'hl-tag' },
+	// Projects/Calendars/Companies (@reference)
+	{ pattern: /@\w+/g, className: 'hl-reference' },
+	// Time patterns (universal formats)
+	{ pattern: /\b\d{1,2}:\d{2}\b/g, className: 'hl-time' },
+];
+
+/** German date/priority keywords */
+const DE_PATTERNS: HighlightPattern[] = [
+	{ pattern: /\b!?dringend\b/gi, className: 'hl-priority-urgent' },
+	{ pattern: /\b!?wichtig\b/gi, className: 'hl-priority-high' },
+	{ pattern: /\b!?normal\b/gi, className: 'hl-priority-medium' },
+	{ pattern: /\b!?sp[aä]ter\b/gi, className: 'hl-priority-low' },
+	{
+		pattern:
+			/\b(heute|morgen|übermorgen|montag|dienstag|mittwoch|donnerstag|freitag|samstag|sonntag|nächsten?\s+\w+|in\s+\d+\s+tagen?)\b/gi,
+		className: 'hl-date',
+	},
+	{ pattern: /\b(um\s+\d{1,2}(\s*uhr)?|\d{1,2}\s*uhr)\b/gi, className: 'hl-time' },
+];
+
+/** English date/priority keywords */
+const EN_PATTERNS: HighlightPattern[] = [
+	{ pattern: /\b!?urgent\b/gi, className: 'hl-priority-urgent' },
+	{ pattern: /\b!?(important|high)\b/gi, className: 'hl-priority-high' },
+	{ pattern: /\b!?(normal|medium)\b/gi, className: 'hl-priority-medium' },
+	{ pattern: /\b!?(low|later)\b/gi, className: 'hl-priority-low' },
+	{
+		pattern:
+			/\b(today|tomorrow|yesterday|monday|tuesday|wednesday|thursday|friday|saturday|sunday|next\s+\w+|in\s+\d+\s+days?)\b/gi,
+		className: 'hl-date',
+	},
+	{ pattern: /\b(at\s+\d{1,2}(:\d{2})?\s*(am|pm)?)\b/gi, className: 'hl-time' },
+];
+
+/** French date/priority keywords */
+const FR_PATTERNS: HighlightPattern[] = [
+	{ pattern: /\b!?urgent[e]?\b/gi, className: 'hl-priority-urgent' },
+	{ pattern: /\b!?(important[e]?|haut[e]?)\b/gi, className: 'hl-priority-high' },
+	{ pattern: /\b!?(normal[e]?|moyen(?:ne)?)\b/gi, className: 'hl-priority-medium' },
+	{ pattern: /\b!?(bas(?:se)?|plus\s+tard)\b/gi, className: 'hl-priority-low' },
+	{
+		pattern:
+			/\b(aujourd'hui|demain|après-demain|hier|lundi|mardi|mercredi|jeudi|vendredi|samedi|dimanche|prochain[e]?\s+\w+|dans\s+\d+\s+jours?)\b/gi,
+		className: 'hl-date',
+	},
+	{ pattern: /\b(à\s+\d{1,2}[h:]\d{0,2})\b/gi, className: 'hl-time' },
+];
+
+/** Italian date/priority keywords */
+const IT_PATTERNS: HighlightPattern[] = [
+	{ pattern: /\b!?urgente\b/gi, className: 'hl-priority-urgent' },
+	{ pattern: /\b!?(importante|alto)\b/gi, className: 'hl-priority-high' },
+	{ pattern: /\b!?(normale|medio)\b/gi, className: 'hl-priority-medium' },
+	{ pattern: /\b!?(basso|dopo)\b/gi, className: 'hl-priority-low' },
+	{
+		pattern:
+			/\b(oggi|domani|dopodomani|ieri|luned[ìi]|marted[ìi]|mercoled[ìi]|gioved[ìi]|venerd[ìi]|sabato|domenica|prossim[oa]\s+\w+|tra\s+\d+\s+giorn[oi])\b/gi,
+		className: 'hl-date',
+	},
+	{ pattern: /\b(alle\s+\d{1,2}[.:]\d{0,2})\b/gi, className: 'hl-time' },
+];
+
+/** Spanish date/priority keywords */
+const ES_PATTERNS: HighlightPattern[] = [
+	{ pattern: /\b!?urgente\b/gi, className: 'hl-priority-urgent' },
+	{ pattern: /\b!?(importante|alto)\b/gi, className: 'hl-priority-high' },
+	{ pattern: /\b!?(normal|medio)\b/gi, className: 'hl-priority-medium' },
+	{ pattern: /\b!?(bajo|luego)\b/gi, className: 'hl-priority-low' },
+	{
+		pattern:
+			/\b(hoy|mañana|pasado\s+mañana|ayer|lunes|martes|miércoles|jueves|viernes|sábado|domingo|próxim[oa]\s+\w+|en\s+\d+\s+d[ií]as?)\b/gi,
+		className: 'hl-date',
+	},
+	{ pattern: /\b(a\s+las?\s+\d{1,2}[.:]\d{0,2})\b/gi, className: 'hl-time' },
+];
+
+const LOCALE_PATTERNS: Record<string, HighlightPattern[]> = {
+	de: DE_PATTERNS,
+	en: EN_PATTERNS,
+	fr: FR_PATTERNS,
+	it: IT_PATTERNS,
+	es: ES_PATTERNS,
+};
+
+/**
+ * Returns universal + locale-specific highlight patterns. Falls back to German
+ * if the locale is unknown.
+ */
+export function getHighlightPatterns(locale = 'de'): HighlightPattern[] {
+	const lang = locale.split('-')[0].toLowerCase();
+	const localeSpecific = LOCALE_PATTERNS[lang] || LOCALE_PATTERNS['de'];
+	return [...UNIVERSAL_PATTERNS, ...localeSpecific];
+}
+
+/**
+ * Wraps each match of the given patterns in `<span class="{className}">…</span>`.
+ * HTML is escaped first to make the output safe for `{@html}` rendering.
+ */
+export function highlightText(text: string, patterns: HighlightPattern[]): string {
+	if (!text) return '';
+
+	let result = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+	for (const { pattern, className } of patterns) {
+		result = result.replace(pattern, (match) => `<span class="${className}">${match}</span>`);
+	}
+
+	return result;
+}
diff --git a/packages/shared-ui/src/quick-input/index.ts b/packages/shared-ui/src/quick-input/index.ts
index 87daf60d9..9b5a5d84d 100644
--- a/packages/shared-ui/src/quick-input/index.ts
+++ b/packages/shared-ui/src/quick-input/index.ts
@@ -1,14 +1,15 @@
-export { default as InputBar } from './InputBar.svelte';
-// Alias for backwards compatibility
-export { default as QuickInputBar } from './InputBar.svelte';
-export { default as InputBarContextMenu } from './InputBarContextMenu.svelte';
-export { default as InputBarHelpModal } from './InputBarHelpModal.svelte';
+/**
+ * Quick-Input — locale-aware Such-/Command-Eingabe-Helfer.
+ *
+ * Diese Subpfad-Datei enthält **noch nicht** die `InputBar`-Komponente
+ * (alias `QuickInputBar`) — sie steht aussen vor, bis der Sprint 7+8
+ * laut PORTING_PLAN.md abgeschlossen ist. Die TS-Helper hier sind
+ * portiert (highlight-Patterns, recent-Input-History, InputBar-Settings,
+ * Types), damit Apps die Sprachlogik bereits verwenden können.
+ */
+
 export type { QuickInputItem, QuickAction, CreatePreview, HighlightPattern } from './types';
-
-// Highlight patterns (locale-aware syntax highlighting)
-export { getHighlightPatterns } from './highlightPatterns';
-
-// Recent input history (tags, references)
+export { getHighlightPatterns, highlightText } from './highlightPatterns';
 export {
 	getRecentTags,
 	getRecentReferences,
@@ -18,8 +19,6 @@ export {
 	clearRecentHistory,
 	createRecentInputHistoryStore,
 } from './recentInputHistory';
-
-// InputBar settings
 export {
 	loadInputBarSettings,
 	saveInputBarSettings,
@@ -29,3 +28,12 @@ export {
 	getInputBarSettingsStore,
 } from './inputBarSettings.svelte';
 export type { InputBarSettings } from './inputBarSettings.svelte';
+
+/** Default debounce timeout for search inputs (ms). */
+export const SEARCH_DEBOUNCE_MS = 150;
+
+// Komponenten
+export { default as InputBar } from './InputBar.svelte';
+// Alias für Backwards-Compat zu v0.1.x
+export { default as QuickInputBar } from './InputBar.svelte';
+export { default as InputBarContextMenu } from './InputBarContextMenu.svelte';
diff --git a/packages/shared-ui/src/quick-input/types.ts b/packages/shared-ui/src/quick-input/types.ts
index 5138ed3ac..09bdf6092 100644
--- a/packages/shared-ui/src/quick-input/types.ts
+++ b/packages/shared-ui/src/quick-input/types.ts
@@ -21,6 +21,7 @@ export interface CreatePreview {
 	subtitle: string;
 }
 
-// HighlightPattern lives in ../search-core/highlight; re-exported here for
-// back-compat with older imports.
-export type { HighlightPattern } from '../search-core/highlight';
+export interface HighlightPattern {
+	pattern: RegExp;
+	className: string;
+}
diff --git a/packages/shared-ui/src/search-core/config.ts b/packages/shared-ui/src/search-core/config.ts
deleted file mode 100644
index 1ac02d6a2..000000000
--- a/packages/shared-ui/src/search-core/config.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Shared configuration for search/command input surfaces.
- *
- * Both QuickInputBar and GlobalSpotlight debounce their input with the same
- * 150ms window — keep them in sync so the feel of the two surfaces doesn't
- * diverge.
- */
-
-export const SEARCH_DEBOUNCE_MS = 150;
diff --git a/packages/shared-ui/src/search-core/highlight.ts b/packages/shared-ui/src/search-core/highlight.ts
deleted file mode 100644
index ac0ed693d..000000000
--- a/packages/shared-ui/src/search-core/highlight.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * Syntax-highlight patterns for search/command input surfaces
- * (QuickInputBar, GlobalSpotlight). Patterns are locale-aware for date/priority
- * keywords; universal patterns (tags, @references, times) apply to every locale.
- */
-
-export interface HighlightPattern {
-	pattern: RegExp;
-	className: string;
-}
-
-/** Shared patterns that work across all locales (symbols, not words) */
-const UNIVERSAL_PATTERNS: HighlightPattern[] = [
-	// Priority shortcuts: !!! = urgent, !! = high
-	{ pattern: /!{3,}/g, className: 'hl-priority-urgent' },
-	{ pattern: /!{2}/g, className: 'hl-priority-high' },
-	// Tags
-	{ pattern: /#\w+/g, className: 'hl-tag' },
-	// Projects/Calendars/Companies (@reference)
-	{ pattern: /@\w+/g, className: 'hl-reference' },
-	// Time patterns (universal formats)
-	{ pattern: /\b\d{1,2}:\d{2}\b/g, className: 'hl-time' },
-];
-
-/** German date/priority keywords */
-const DE_PATTERNS: HighlightPattern[] = [
-	{ pattern: /\b!?dringend\b/gi, className: 'hl-priority-urgent' },
-	{ pattern: /\b!?wichtig\b/gi, className: 'hl-priority-high' },
-	{ pattern: /\b!?normal\b/gi, className: 'hl-priority-medium' },
-	{ pattern: /\b!?sp[aä]ter\b/gi, className: 'hl-priority-low' },
-	{
-		pattern:
-			/\b(heute|morgen|übermorgen|montag|dienstag|mittwoch|donnerstag|freitag|samstag|sonntag|nächsten?\s+\w+|in\s+\d+\s+tagen?)\b/gi,
-		className: 'hl-date',
-	},
-	{ pattern: /\b(um\s+\d{1,2}(\s*uhr)?|\d{1,2}\s*uhr)\b/gi, className: 'hl-time' },
-];
-
-/** English date/priority keywords */
-const EN_PATTERNS: HighlightPattern[] = [
-	{ pattern: /\b!?urgent\b/gi, className: 'hl-priority-urgent' },
-	{ pattern: /\b!?(important|high)\b/gi, className: 'hl-priority-high' },
-	{ pattern: /\b!?(normal|medium)\b/gi, className: 'hl-priority-medium' },
-	{ pattern: /\b!?(low|later)\b/gi, className: 'hl-priority-low' },
-	{
-		pattern:
-			/\b(today|tomorrow|yesterday|monday|tuesday|wednesday|thursday|friday|saturday|sunday|next\s+\w+|in\s+\d+\s+days?)\b/gi,
-		className: 'hl-date',
-	},
-	{ pattern: /\b(at\s+\d{1,2}(:\d{2})?\s*(am|pm)?)\b/gi, className: 'hl-time' },
-];
-
-/** French date/priority keywords */
-const FR_PATTERNS: HighlightPattern[] = [
-	{ pattern: /\b!?urgent[e]?\b/gi, className: 'hl-priority-urgent' },
-	{ pattern: /\b!?(important[e]?|haut[e]?)\b/gi, className: 'hl-priority-high' },
-	{ pattern: /\b!?(normal[e]?|moyen(?:ne)?)\b/gi, className: 'hl-priority-medium' },
-	{ pattern: /\b!?(bas(?:se)?|plus\s+tard)\b/gi, className: 'hl-priority-low' },
-	{
-		pattern:
-			/\b(aujourd'hui|demain|après-demain|hier|lundi|mardi|mercredi|jeudi|vendredi|samedi|dimanche|prochain[e]?\s+\w+|dans\s+\d+\s+jours?)\b/gi,
-		className: 'hl-date',
-	},
-	{ pattern: /\b(à\s+\d{1,2}[h:]\d{0,2})\b/gi, className: 'hl-time' },
-];
-
-/** Italian date/priority keywords */
-const IT_PATTERNS: HighlightPattern[] = [
-	{ pattern: /\b!?urgente\b/gi, className: 'hl-priority-urgent' },
-	{ pattern: /\b!?(importante|alto)\b/gi, className: 'hl-priority-high' },
-	{ pattern: /\b!?(normale|medio)\b/gi, className: 'hl-priority-medium' },
-	{ pattern: /\b!?(basso|dopo)\b/gi, className: 'hl-priority-low' },
-	{
-		pattern:
-			/\b(oggi|domani|dopodomani|ieri|luned[ìi]|marted[ìi]|mercoled[ìi]|gioved[ìi]|venerd[ìi]|sabato|domenica|prossim[oa]\s+\w+|tra\s+\d+\s+giorn[oi])\b/gi,
-		className: 'hl-date',
-	},
-	{ pattern: /\b(alle\s+\d{1,2}[.:]\d{0,2})\b/gi, className: 'hl-time' },
-];
-
-/** Spanish date/priority keywords */
-const ES_PATTERNS: HighlightPattern[] = [
-	{ pattern: /\b!?urgente\b/gi, className: 'hl-priority-urgent' },
-	{ pattern: /\b!?(importante|alto)\b/gi, className: 'hl-priority-high' },
-	{ pattern: /\b!?(normal|medio)\b/gi, className: 'hl-priority-medium' },
-	{ pattern: /\b!?(bajo|luego)\b/gi, className: 'hl-priority-low' },
-	{
-		pattern:
-			/\b(hoy|mañana|pasado\s+mañana|ayer|lunes|martes|miércoles|jueves|viernes|sábado|domingo|próxim[oa]\s+\w+|en\s+\d+\s+d[ií]as?)\b/gi,
-		className: 'hl-date',
-	},
-	{ pattern: /\b(a\s+las?\s+\d{1,2}[.:]\d{0,2})\b/gi, className: 'hl-time' },
-];
-
-const LOCALE_PATTERNS: Record<string, HighlightPattern[]> = {
-	de: DE_PATTERNS,
-	en: EN_PATTERNS,
-	fr: FR_PATTERNS,
-	it: IT_PATTERNS,
-	es: ES_PATTERNS,
-};
-
-/**
- * Returns universal + locale-specific highlight patterns. Falls back to German
- * if the locale is unknown.
- */
-export function getHighlightPatterns(locale = 'de'): HighlightPattern[] {
-	const lang = locale.split('-')[0].toLowerCase();
-	const localeSpecific = LOCALE_PATTERNS[lang] || LOCALE_PATTERNS['de'];
-	return [...UNIVERSAL_PATTERNS, ...localeSpecific];
-}
-
-/**
- * Wraps each match of the given patterns in `<span class="{className}">…</span>`.
- * HTML is escaped first to make the output safe for `{@html}` rendering.
- */
-export function highlightText(text: string, patterns: HighlightPattern[]): string {
-	if (!text) return '';
-
-	let result = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-
-	for (const { pattern, className } of patterns) {
-		result = result.replace(pattern, (match) => `<span class="${className}">${match}</span>`);
-	}
-
-	return result;
-}
diff --git a/packages/shared-ui/src/search-core/index.ts b/packages/shared-ui/src/search-core/index.ts
deleted file mode 100644
index 23eacd60d..000000000
--- a/packages/shared-ui/src/search-core/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { getHighlightPatterns, highlightText } from './highlight';
-export type { HighlightPattern } from './highlight';
-export { SEARCH_DEBOUNCE_MS } from './config';
diff --git a/packages/shared-ui/src/settings/GlobalSettingsSection.svelte b/packages/shared-ui/src/settings/GlobalSettingsSection.svelte
deleted file mode 100644
index 084603826..000000000
--- a/packages/shared-ui/src/settings/GlobalSettingsSection.svelte
+++ /dev/null
@@ -1,338 +0,0 @@
-<script lang="ts">
-	import type { UserSettingsStore, ThemeMode, WeekStartDay } from '@mana/shared-theme';
-	import { getAvailableRoutes, getDefaultRoute } from '@mana/shared-theme';
-	import SettingsSection from './SettingsSection.svelte';
-	import SettingsCard from './SettingsCard.svelte';
-	import NavVisibilitySettings from './NavVisibilitySettings.svelte';
-	import { Gear } from '@mana/shared-icons';
-
-	interface NavItem {
-		href: string;
-		label: string;
-		icon?: string;
-	}
-
-	interface Props {
-		/** User settings store instance */
-		userSettings: UserSettingsStore;
-		/** App ID for start page selection */
-		appId?: string;
-		/** Navigation items for visibility settings */
-		navItems?: NavItem[];
-		/** Items that should always be visible (e.g., home route) */
-		alwaysVisibleHrefs?: string[];
-		/** Whether to show nav visibility settings */
-		showNavVisibility?: boolean;
-		/** Whether to show theme settings */
-		showTheme?: boolean;
-		/** Whether to show language settings */
-		showLanguage?: boolean;
-		/** Whether to show general settings (start page, sounds, week start) */
-		showGeneral?: boolean;
-		/** Section title */
-		title?: string;
-		/** Section description */
-		description?: string;
-		/** Translation function (optional, falls back to German) */
-		t?: (key: string) => string;
-	}
-
-	let {
-		userSettings,
-		appId,
-		navItems = [],
-		alwaysVisibleHrefs = [],
-		showNavVisibility = true,
-		showTheme = true,
-		showLanguage = true,
-		showGeneral = true,
-		title = 'App-Einstellungen',
-		description = 'Diese Einstellungen gelten für alle Mana Apps',
-		t = (key: string) => key,
-	}: Props = $props();
-
-	// Available routes for start page selection
-	const availableRoutes = $derived(appId ? getAvailableRoutes(appId) : []);
-	const defaultRoute = $derived(appId ? getDefaultRoute(appId) : '/');
-	const currentStartPage = $derived(
-		appId ? userSettings.general?.startPages?.[appId] || defaultRoute : '/'
-	);
-
-	// Theme mode handler
-	async function handleThemeModeChange(mode: ThemeMode) {
-		await userSettings.updateGlobal({
-			theme: { ...userSettings.globalSettings.theme, mode },
-		});
-	}
-
-	// Color scheme handler
-	async function handleColorSchemeChange(colorScheme: string) {
-		await userSettings.updateGlobal({
-			theme: { ...userSettings.globalSettings.theme, colorScheme },
-		});
-	}
-
-	// Locale handler
-	async function handleLocaleChange(locale: string) {
-		await userSettings.updateGlobal({ locale });
-	}
-
-	// Start page handler
-	async function handleStartPageChange(e: Event) {
-		const target = e.target as HTMLSelectElement;
-		if (appId) {
-			await userSettings.setStartPage(appId, target.value);
-		}
-	}
-
-	// Week start handler
-	async function handleWeekStartChange(day: WeekStartDay) {
-		await userSettings.updateGeneral({ weekStartsOn: day });
-	}
-
-	// Sounds handler
-	async function handleSoundsChange(enabled: boolean) {
-		await userSettings.updateGeneral({ soundsEnabled: enabled });
-	}
-
-	const colorSchemes = [
-		{ id: 'ocean', label: 'Ozean', color: 'bg-blue-500' },
-		{ id: 'nature', label: 'Natur', color: 'bg-green-500' },
-		{ id: 'lume', label: 'Lume', color: 'bg-amber-500' },
-		{ id: 'stone', label: 'Stein', color: 'bg-slate-500' },
-	];
-
-	const languages = [
-		{ id: 'de', label: 'DE' },
-		{ id: 'en', label: 'EN' },
-		{ id: 'fr', label: 'FR' },
-		{ id: 'es', label: 'ES' },
-		{ id: 'it', label: 'IT' },
-	];
-</script>
-
-<SettingsSection {title}>
-	{#snippet icon()}
-		<Gear size={20} />
-	{/snippet}
-
-	<SettingsCard>
-		<div class="p-5">
-			<p class="text-sm text-[hsl(var(--color-muted-foreground))] mb-6">{description}</p>
-
-			<div class="space-y-6">
-				{#if showNavVisibility && appId && navItems.length > 0}
-					<!-- Navigation Visibility Settings -->
-					<div class="space-y-4">
-						<NavVisibilitySettings {userSettings} {appId} {navItems} {alwaysVisibleHrefs} />
-					</div>
-				{/if}
-
-				{#if showTheme}
-					<!-- Theme Settings -->
-					<div
-						class="space-y-4 {showNavVisibility && appId
-							? 'pt-4 border-t border-[hsl(var(--color-border))]'
-							: ''}"
-					>
-						<h3
-							class="text-xs font-semibold text-[hsl(var(--color-muted-foreground))] uppercase tracking-wider"
-						>
-							Erscheinungsbild
-						</h3>
-
-						<div class="flex items-center justify-between py-2">
-							<div>
-								<p class="font-medium text-[hsl(var(--color-foreground))]">Farbmodus</p>
-								<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
-									Hell, Dunkel oder automatisch
-								</p>
-							</div>
-							<div class="flex gap-1">
-								{#each ['light', 'dark', 'system'] as mode}
-									<button
-										class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors {userSettings
-											.globalSettings.theme.mode === mode
-											? 'bg-[hsl(var(--color-primary))] text-[hsl(var(--color-primary-foreground))]'
-											: 'bg-[hsl(var(--color-muted))] hover:bg-[hsl(var(--color-muted))]/80 text-[hsl(var(--color-foreground))]'}"
-										onclick={() => handleThemeModeChange(mode as ThemeMode)}
-									>
-										{mode === 'light' ? 'Hell' : mode === 'dark' ? 'Dunkel' : 'System'}
-									</button>
-								{/each}
-							</div>
-						</div>
-
-						<div
-							class="flex items-center justify-between py-2 border-t border-[hsl(var(--color-border))]"
-						>
-							<div>
-								<p class="font-medium text-[hsl(var(--color-foreground))]">Farbschema</p>
-								<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
-									Akzentfarbe der Benutzeroberfläche
-								</p>
-							</div>
-							<div class="flex gap-2">
-								{#each colorSchemes as scheme}
-									<button
-										class="w-7 h-7 rounded-full transition-all {scheme.color} {userSettings
-											.globalSettings.theme.colorScheme === scheme.id
-											? 'ring-2 ring-offset-2 ring-[hsl(var(--color-primary))]'
-											: 'hover:scale-110'}"
-										onclick={() => handleColorSchemeChange(scheme.id)}
-										title={scheme.label}
-									></button>
-								{/each}
-							</div>
-						</div>
-					</div>
-				{/if}
-
-				{#if showLanguage}
-					<!-- Language Settings -->
-					<div
-						class="space-y-4 {showTheme || (showNavVisibility && appId)
-							? 'pt-4 border-t border-[hsl(var(--color-border))]'
-							: ''}"
-					>
-						<h3
-							class="text-xs font-semibold text-[hsl(var(--color-muted-foreground))] uppercase tracking-wider"
-						>
-							Sprache
-						</h3>
-
-						<div class="flex items-center justify-between py-2">
-							<div>
-								<p class="font-medium text-[hsl(var(--color-foreground))]">Anzeigesprache</p>
-								<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
-									Sprache der Benutzeroberfläche
-								</p>
-							</div>
-							<div class="flex gap-1">
-								{#each languages as lang}
-									<button
-										class="px-2.5 py-1.5 text-sm font-medium rounded-lg transition-colors {userSettings
-											.globalSettings.locale === lang.id
-											? 'bg-[hsl(var(--color-primary))] text-[hsl(var(--color-primary-foreground))]'
-											: 'bg-[hsl(var(--color-muted))] hover:bg-[hsl(var(--color-muted))]/80 text-[hsl(var(--color-foreground))]'}"
-										onclick={() => handleLocaleChange(lang.id)}
-									>
-										{lang.label}
-									</button>
-								{/each}
-							</div>
-						</div>
-					</div>
-				{/if}
-
-				{#if showGeneral}
-					<!-- General Settings -->
-					<div
-						class="space-y-4 {showLanguage || showTheme || (showNavVisibility && appId)
-							? 'pt-4 border-t border-[hsl(var(--color-border))]'
-							: ''}"
-					>
-						<h3
-							class="text-xs font-semibold text-[hsl(var(--color-muted-foreground))] uppercase tracking-wider"
-						>
-							Allgemein
-						</h3>
-
-						{#if appId && availableRoutes.length > 1}
-							<!-- Start Page Selector -->
-							<div class="flex items-center justify-between py-2">
-								<div>
-									<p class="font-medium text-[hsl(var(--color-foreground))]">Startseite</p>
-									<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
-										Welche Seite beim Öffnen der App angezeigt wird
-									</p>
-								</div>
-								<select
-									class="px-3 py-1.5 text-sm font-medium rounded-lg bg-[hsl(var(--color-muted))] text-[hsl(var(--color-foreground))] border-none cursor-pointer appearance-none pr-8 bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E')] bg-no-repeat bg-[right_0.5rem_center] bg-[length:1rem]"
-									value={currentStartPage}
-									onchange={handleStartPageChange}
-								>
-									{#each availableRoutes as route}
-										<option value={route.path}>
-											{route.label}
-										</option>
-									{/each}
-								</select>
-							</div>
-						{/if}
-
-						<!-- Week Start Day -->
-						<div
-							class="flex items-center justify-between py-2 {appId && availableRoutes.length > 1
-								? 'border-t border-[hsl(var(--color-border))]'
-								: ''}"
-						>
-							<div>
-								<p class="font-medium text-[hsl(var(--color-foreground))]">Wochenstart</p>
-								<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
-									Erster Tag der Woche in Kalendern
-								</p>
-							</div>
-							<div class="flex gap-2">
-								<button
-									class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors {userSettings
-										.general?.weekStartsOn === 'monday'
-										? 'bg-[hsl(var(--color-primary))] text-[hsl(var(--color-primary-foreground))]'
-										: 'bg-[hsl(var(--color-muted))] hover:bg-[hsl(var(--color-muted))]/80 text-[hsl(var(--color-foreground))]'}"
-									onclick={() => handleWeekStartChange('monday')}
-								>
-									Montag
-								</button>
-								<button
-									class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors {userSettings
-										.general?.weekStartsOn === 'sunday'
-										? 'bg-[hsl(var(--color-primary))] text-[hsl(var(--color-primary-foreground))]'
-										: 'bg-[hsl(var(--color-muted))] hover:bg-[hsl(var(--color-muted))]/80 text-[hsl(var(--color-foreground))]'}"
-									onclick={() => handleWeekStartChange('sunday')}
-								>
-									Sonntag
-								</button>
-							</div>
-						</div>
-
-						<!-- Sounds Toggle -->
-						<div
-							class="flex items-center justify-between py-2 border-t border-[hsl(var(--color-border))]"
-						>
-							<div>
-								<p class="font-medium text-[hsl(var(--color-foreground))]">Sounds</p>
-								<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
-									Sound-Effekte in allen Apps
-								</p>
-							</div>
-							<button
-								class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors {(userSettings
-									.general?.soundsEnabled ?? true)
-									? 'bg-[hsl(var(--color-primary))]'
-									: 'bg-gray-200 dark:bg-gray-700'}"
-								onclick={() => handleSoundsChange(!(userSettings.general?.soundsEnabled ?? true))}
-								aria-label="Toggle sound effects"
-							>
-								<span
-									class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform {(userSettings
-										.general?.soundsEnabled ?? true)
-										? 'translate-x-6'
-										: 'translate-x-1'}"
-								></span>
-							</button>
-						</div>
-					</div>
-				{/if}
-			</div>
-
-			{#if userSettings.syncing}
-				<div class="mt-4 flex items-center gap-2 text-sm text-[hsl(var(--color-muted-foreground))]">
-					<div
-						class="h-4 w-4 animate-spin rounded-full border-2 border-[hsl(var(--color-primary))] border-t-transparent"
-					></div>
-					<span>Synchronisiere...</span>
-				</div>
-			{/if}
-		</div>
-	</SettingsCard>
-</SettingsSection>
diff --git a/packages/shared-ui/src/settings/NavVisibilitySettings.svelte b/packages/shared-ui/src/settings/NavVisibilitySettings.svelte
deleted file mode 100644
index 70818955a..000000000
--- a/packages/shared-ui/src/settings/NavVisibilitySettings.svelte
+++ /dev/null
@@ -1,197 +0,0 @@
-<script lang="ts">
-	import type { UserSettingsStore } from '@mana/shared-theme';
-	import {
-		House,
-		Users,
-		User,
-		Tag,
-		Heart,
-		Gear,
-		ChatCircle,
-		Question,
-		ShareNetwork,
-		Bell,
-		Clock,
-		Timer,
-		Target,
-		Globe,
-		Tray,
-		Check,
-		CheckCircle,
-		CheckSquare,
-		Plus,
-		Columns,
-		Microphone,
-		CalendarBlank,
-		Folder,
-		Archive,
-		Upload,
-		MusicNote,
-		File,
-		ChartBar,
-		MagnifyingGlass,
-		List,
-		Compass,
-		Moon,
-		Sun,
-		SignOut,
-		Fire,
-		GridFour,
-		Palette,
-		CreditCard,
-		Buildings,
-		Scales,
-		Robot,
-		Key,
-		Shield,
-		Sparkle,
-		Star,
-		Image,
-		Copy,
-		DownloadSimple,
-		Stack,
-		TrendUp,
-	} from '@mana/shared-icons';
-
-	interface NavItem {
-		href: string;
-		label: string;
-		icon?: string;
-	}
-
-	interface Props {
-		/** User settings store instance */
-		userSettings: UserSettingsStore;
-		/** Current app ID */
-		appId: string;
-		/** Navigation items from the app layout */
-		navItems: NavItem[];
-		/** Items that should always be visible (e.g., home route) */
-		alwaysVisibleHrefs?: string[];
-	}
-
-	let { userSettings, appId, navItems, alwaysVisibleHrefs = [] }: Props = $props();
-
-	// Filter to only show hideable items (exclude always visible)
-	const hideableItems = $derived(
-		navItems.filter((item) => !alwaysVisibleHrefs.includes(item.href))
-	);
-
-	// Check if there are any routes to configure
-	const hasRoutes = $derived(hideableItems.length > 0);
-
-	// Reactive: get hidden items from nav settings (triggers re-render when hiddenNavItems changes)
-	const hiddenItems = $derived(userSettings.nav.hiddenNavItems?.[appId] || []);
-
-	async function handleToggle(href: string): Promise<void> {
-		await userSettings.toggleNavItemVisibility(appId, href);
-	}
-
-	// Map icon names to Phosphor components
-	const phosphorIcons: Record<string, any> = {
-		home: House,
-		users: Users,
-		user: User,
-		tag: Tag,
-		heart: Heart,
-		settings: Gear,
-		chat: ChatCircle,
-		'help-circle': Question,
-		'share-2': ShareNetwork,
-		bell: Bell,
-		clock: Clock,
-		timer: Timer,
-		target: Target,
-		globe: Globe,
-		inbox: Tray,
-		check: Check,
-		checkCircle: CheckCircle,
-		'check-square': CheckSquare,
-		plus: Plus,
-		columns: Columns,
-		kanban: Columns,
-		mic: Microphone,
-		calendar: CalendarBlank,
-		folder: Folder,
-		archive: Archive,
-		upload: Upload,
-		music: MusicNote,
-		document: File,
-		chart: ChartBar,
-		'bar-chart-3': ChartBar,
-		search: MagnifyingGlass,
-		list: List,
-		compass: Compass,
-		moon: Moon,
-		sun: Sun,
-		logout: SignOut,
-		fire: Fire,
-		grid: GridFour,
-		palette: Palette,
-		creditCard: CreditCard,
-		building: Buildings,
-		scale: Scales,
-		robot: Robot,
-		key: Key,
-		shield: Shield,
-		sparkle: Sparkle,
-		star: Star,
-		image: Image,
-		copy: Copy,
-		download: DownloadSimple,
-		layers: Stack,
-		trending: TrendUp,
-	};
-</script>
-
-{#if hasRoutes}
-	<div class="space-y-4">
-		<div>
-			<h3
-				class="text-xs font-semibold text-[hsl(var(--color-muted-foreground))] uppercase tracking-wider"
-			>
-				Navigation anpassen
-			</h3>
-			<p class="text-sm text-[hsl(var(--color-muted-foreground))] mt-1">
-				Versteckte Seiten bleiben über die URL erreichbar
-			</p>
-		</div>
-
-		<div class="space-y-1">
-			{#each hideableItems as item (item.href)}
-				{@const hidden = hiddenItems.includes(item.href)}
-				{@const IconComponent = item.icon ? phosphorIcons[item.icon] : null}
-				<label
-					class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-[hsl(var(--color-muted))]/50 cursor-pointer transition-colors border border-transparent hover:border-[hsl(var(--color-border))]"
-				>
-					<span
-						class="flex items-center gap-3 text-sm {hidden
-							? 'text-[hsl(var(--color-muted-foreground))]'
-							: 'text-[hsl(var(--color-foreground))]'}"
-					>
-						{#if IconComponent}
-							<span class="flex-shrink-0 {hidden ? 'opacity-50' : ''}">
-								<IconComponent size={16} />
-							</span>
-						{/if}
-						<span class={hidden ? 'line-through' : ''}>{item.label}</span>
-					</span>
-					<button
-						type="button"
-						class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors {!hidden
-							? 'bg-[hsl(var(--color-primary))]'
-							: 'bg-gray-200 dark:bg-gray-700'}"
-						onclick={() => handleToggle(item.href)}
-						aria-label={hidden ? 'Einblenden' : 'Ausblenden'}
-					>
-						<span
-							class="inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform shadow-sm {!hidden
-								? 'translate-x-5'
-								: 'translate-x-0.5'}"
-						></span>
-					</button>
-				</label>
-			{/each}
-		</div>
-	</div>
-{/if}
diff --git a/packages/shared-ui/src/settings/SettingsCard.svelte b/packages/shared-ui/src/settings/SettingsCard.svelte
deleted file mode 100644
index ff330dac8..000000000
--- a/packages/shared-ui/src/settings/SettingsCard.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		/** Card title (optional) */
-		title?: string;
-		/** Card description (optional) */
-		description?: string;
-		/** Visual variant */
-		variant?: 'default' | 'danger';
-		/** Additional CSS classes */
-		class?: string;
-		/** Content (SettingsRow components) */
-		children: Snippet;
-	}
-
-	let {
-		title,
-		description,
-		variant = 'default',
-		class: className = '',
-		children,
-	}: Props = $props();
-
-	// Base card classes using Tailwind
-	const baseCardClasses =
-		'rounded-2xl overflow-hidden shadow-md border backdrop-blur-xl ' +
-		'bg-white/85 border-black/10 ' +
-		'dark:bg-white/[0.06] dark:border-white/10 dark:shadow-lg';
-
-	const dangerCardClasses =
-		'rounded-2xl overflow-hidden shadow-md border backdrop-blur-xl ' +
-		'bg-red-500/[0.08] border-red-500/30 ' +
-		'dark:bg-red-500/[0.12] dark:border-red-500/25 dark:shadow-lg';
-
-	const headerClasses = 'px-5 py-4 border-b border-black/[0.08] dark:border-white/10';
-
-	const dangerHeaderClasses = 'px-5 py-4 border-b border-red-500/20 bg-red-500/10';
-</script>
-
-<div class="{variant === 'danger' ? dangerCardClasses : baseCardClasses} {className}">
-	{#if title || description}
-		<header class={variant === 'danger' ? dangerHeaderClasses : headerClasses}>
-			{#if title}
-				<h3
-					class="text-base font-semibold text-foreground {variant === 'danger'
-						? 'text-red-500 dark:text-red-400'
-						: ''}"
-				>
-					{title}
-				</h3>
-			{/if}
-			{#if description}
-				<p class="text-sm text-muted-foreground mt-1">{description}</p>
-			{/if}
-		</header>
-	{/if}
-
-	<div class="flex flex-col">
-		{@render children()}
-	</div>
-</div>
diff --git a/packages/shared-ui/src/settings/SettingsDangerButton.svelte b/packages/shared-ui/src/settings/SettingsDangerButton.svelte
deleted file mode 100644
index 23891d98d..000000000
--- a/packages/shared-ui/src/settings/SettingsDangerButton.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		/** Button label */
-		label: string;
-		/** Optional description */
-		description?: string;
-		/** Optional icon (Snippet for flexibility) */
-		icon?: Snippet;
-		/** Click handler */
-		onclick: () => void;
-		/** Button text (default: label) */
-		buttonText?: string;
-		/** Show border at bottom */
-		border?: boolean;
-		/** Disabled state */
-		disabled?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		label,
-		description,
-		icon,
-		onclick,
-		buttonText,
-		border = true,
-		disabled = false,
-		class: className = '',
-	}: Props = $props();
-
-	// Tailwind classes
-	const baseClasses = 'flex items-center justify-between gap-4 px-5 py-4';
-	const borderClasses = 'border-b border-red-500/[0.12] dark:border-red-500/[0.18] last:border-b-0';
-	const disabledClasses = 'opacity-50 cursor-not-allowed';
-
-	const iconClasses =
-		'flex items-center justify-center flex-shrink-0 w-9 h-9 rounded-[0.625rem] bg-red-500/10 dark:bg-red-500/[0.15] text-red-500 dark:text-red-400 [&>svg]:w-[1.125rem] [&>svg]:h-[1.125rem]';
-</script>
-
-<div
-	class="{baseClasses} {border ? borderClasses : ''} {disabled ? disabledClasses : ''} {className}"
->
-	<div class="flex items-center gap-3 flex-1 min-w-0">
-		{#if icon}
-			<span class={iconClasses}>
-				{@render icon()}
-			</span>
-		{/if}
-		<div class="flex flex-col gap-0.5 min-w-0">
-			<span class="text-[0.9375rem] font-medium text-gray-700 dark:text-gray-100">{label}</span>
-			{#if description}
-				<span class="text-[0.8125rem] text-gray-500 dark:text-gray-400 leading-snug"
-					>{description}</span
-				>
-			{/if}
-		</div>
-	</div>
-
-	<button
-		type="button"
-		{onclick}
-		class="px-4 py-2 text-sm font-medium text-red-500 dark:text-red-400
-			bg-red-500/10 dark:bg-red-500/[0.15] border border-red-500/20 dark:border-red-500/25
-			rounded-lg cursor-pointer flex-shrink-0 transition-all duration-200
-			hover:bg-red-500/20 dark:hover:bg-red-500/25 hover:border-red-500/30 dark:hover:border-red-500/35
-			focus-visible:outline-2 focus-visible:outline-red-500/40 focus-visible:outline-offset-2
-			disabled:cursor-not-allowed"
-		{disabled}
-	>
-		{buttonText || label}
-	</button>
-</div>
diff --git a/packages/shared-ui/src/settings/SettingsDangerZone.svelte b/packages/shared-ui/src/settings/SettingsDangerZone.svelte
deleted file mode 100644
index 32e0350d9..000000000
--- a/packages/shared-ui/src/settings/SettingsDangerZone.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		/** Section title */
-		title?: string;
-		/** Additional CSS classes */
-		class?: string;
-		/** Content (danger actions) */
-		children: Snippet;
-	}
-
-	let { title = 'Danger Zone', class: className = '', children }: Props = $props();
-</script>
-
-<section
-	class="bg-red-500/[0.08] dark:bg-red-500/[0.12] backdrop-blur-xl border border-red-500/20 dark:border-red-500/25 rounded-2xl overflow-hidden shadow-md {className}"
->
-	<header
-		class="px-5 py-4 border-b border-red-500/[0.15] dark:border-red-500/20 bg-red-500/10 dark:bg-red-500/[0.15]"
-	>
-		<h2 class="text-base font-semibold text-red-500 dark:text-red-400 m-0">{title}</h2>
-	</header>
-
-	<div class="flex flex-col">
-		{@render children()}
-	</div>
-</section>
diff --git a/packages/shared-ui/src/settings/SettingsNumberInput.svelte b/packages/shared-ui/src/settings/SettingsNumberInput.svelte
deleted file mode 100644
index 9d82deb30..000000000
--- a/packages/shared-ui/src/settings/SettingsNumberInput.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		/** Row label */
-		label: string;
-		/** Optional description */
-		description?: string;
-		/** Optional icon (Snippet for flexibility) */
-		icon?: Snippet;
-		/** Current value (null = empty/disabled) */
-		value: number | null;
-		/** Change handler */
-		onchange: (value: number | null) => void;
-		/** Minimum value */
-		min?: number;
-		/** Maximum value */
-		max?: number;
-		/** Step increment */
-		step?: number;
-		/** Placeholder text when empty */
-		placeholder?: string;
-		/** Show border at bottom */
-		border?: boolean;
-		/** Disabled state */
-		disabled?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		label,
-		description,
-		icon,
-		value,
-		onchange,
-		min,
-		max,
-		step = 1,
-		placeholder = '',
-		border = true,
-		disabled = false,
-		class: className = '',
-	}: Props = $props();
-
-	function handleInput(event: Event) {
-		const target = event.target as HTMLInputElement;
-		const rawValue = target.value.trim();
-
-		if (rawValue === '') {
-			onchange(null);
-			return;
-		}
-
-		const numValue = Number(rawValue);
-		if (!isNaN(numValue)) {
-			// Clamp to min/max if specified
-			let clampedValue = numValue;
-			if (min !== undefined && clampedValue < min) clampedValue = min;
-			if (max !== undefined && clampedValue > max) clampedValue = max;
-			onchange(clampedValue);
-		}
-	}
-
-	// Tailwind classes
-	const baseClasses = 'flex items-center justify-between gap-4 px-5 py-4';
-	const borderClasses = 'border-b border-black/[0.08] dark:border-white/10 last:border-b-0';
-	const disabledClasses = 'opacity-50 cursor-not-allowed';
-
-	const iconClasses =
-		'flex items-center justify-center flex-shrink-0 w-9 h-9 rounded-[0.625rem] bg-black/[0.04] dark:bg-white/[0.08] text-primary [&>svg]:w-[1.125rem] [&>svg]:h-[1.125rem]';
-</script>
-
-<div
-	class="{baseClasses} {border ? borderClasses : ''} {disabled ? disabledClasses : ''} {className}"
->
-	<div class="flex items-center gap-3 flex-1 min-w-0">
-		{#if icon}
-			<span class={iconClasses}>
-				{@render icon()}
-			</span>
-		{/if}
-		<div class="flex flex-col gap-0.5 min-w-0">
-			<span class="text-[0.9375rem] font-medium text-gray-700 dark:text-gray-100">{label}</span>
-			{#if description}
-				<span class="text-[0.8125rem] text-gray-500 dark:text-gray-400 leading-snug"
-					>{description}</span
-				>
-			{/if}
-		</div>
-	</div>
-
-	<input
-		type="number"
-		class="w-20 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-100 text-center
-			bg-black/[0.04] dark:bg-white/[0.08] border border-black/10 dark:border-white/[0.15]
-			rounded-lg transition-all duration-200
-			hover:border-black/20 dark:hover:border-white/25 hover:bg-black/[0.06] dark:hover:bg-white/[0.12]
-			focus-visible:outline-2 focus-visible:outline-primary/40 focus-visible:outline-offset-2 focus-visible:border-primary
-			disabled:cursor-not-allowed disabled:opacity-60
-			placeholder:text-gray-400 dark:placeholder:text-gray-500 placeholder:font-normal
-			[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-		value={value ?? ''}
-		oninput={handleInput}
-		{min}
-		{max}
-		{step}
-		{placeholder}
-		{disabled}
-		aria-label={label}
-	/>
-</div>
diff --git a/packages/shared-ui/src/settings/SettingsPage.svelte b/packages/shared-ui/src/settings/SettingsPage.svelte
deleted file mode 100644
index 5d7659d3b..000000000
--- a/packages/shared-ui/src/settings/SettingsPage.svelte
+++ /dev/null
@@ -1,262 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { onMount } from 'svelte';
-
-	interface TocItem {
-		id: string;
-		title: string;
-		icon?: string;
-	}
-
-	interface Props {
-		/** Page title */
-		title: string;
-		/** Optional subtitle/description */
-		subtitle?: string;
-		/** Maximum width of the content */
-		maxWidth?: 'sm' | 'md' | 'lg' | 'xl';
-		/** Additional CSS classes */
-		class?: string;
-		/** Main content */
-		children: Snippet;
-	}
-
-	let { title, subtitle, maxWidth = 'md', class: className = '', children }: Props = $props();
-
-	const maxWidthClasses = {
-		sm: 'max-w-lg',
-		md: 'max-w-2xl',
-		lg: 'max-w-3xl',
-		xl: 'max-w-4xl',
-	};
-
-	let tocItems = $state<TocItem[]>([]);
-	let activeSection = $state<string>('');
-	let contentEl: HTMLElement;
-
-	onMount(() => {
-		// Collect all section headers
-		const sections = contentEl.querySelectorAll('[data-settings-section]');
-		const items: TocItem[] = [];
-
-		sections.forEach((section, index) => {
-			const id = section.getAttribute('data-settings-section') || `section-${index}`;
-			const titleEl = section.querySelector('.section-title');
-			const title = titleEl?.textContent || `Section ${index + 1}`;
-			items.push({ id, title });
-		});
-
-		tocItems = items;
-
-		// Find the currently active section based on scroll position
-		function updateActiveSection() {
-			const scrollPosition = window.scrollY + window.innerHeight;
-			const pageHeight = document.documentElement.scrollHeight;
-			const bottomThreshold = 50;
-
-			// If at bottom of page, activate last section
-			if (pageHeight - scrollPosition <= bottomThreshold && tocItems.length > 0) {
-				activeSection = tocItems[tocItems.length - 1].id;
-				return;
-			}
-
-			// Find which section is currently in view
-			const viewportTop = window.scrollY + 120; // Account for sticky header offset
-
-			let currentSection = '';
-			sections.forEach((section) => {
-				const rect = section.getBoundingClientRect();
-				const sectionTop = rect.top + window.scrollY;
-
-				// Section is active if its top is above our viewport check point
-				if (sectionTop <= viewportTop) {
-					const id = section.getAttribute('data-settings-section');
-					if (id) currentSection = id;
-				}
-			});
-
-			if (currentSection) {
-				activeSection = currentSection;
-			} else if (tocItems.length > 0) {
-				// Default to first section if nothing else matches
-				activeSection = tocItems[0].id;
-			}
-		}
-
-		// Initial check
-		updateActiveSection();
-
-		// Update on scroll
-		window.addEventListener('scroll', updateActiveSection, { passive: true });
-
-		return () => {
-			window.removeEventListener('scroll', updateActiveSection);
-		};
-	});
-
-	function scrollToSection(id: string) {
-		const section = contentEl.querySelector(`[data-settings-section="${id}"]`);
-		if (section) {
-			const y = section.getBoundingClientRect().top + window.scrollY - 100;
-			window.scrollTo({ top: y, behavior: 'smooth' });
-		}
-	}
-</script>
-
-<div class="settings-page bg-background {className}">
-	<!-- Table of Contents - Desktop only -->
-	<aside class="toc-sidebar">
-		<div class="toc-container">
-			<p class="toc-title">Inhalt</p>
-			<nav class="toc-nav">
-				{#each tocItems as item}
-					<button
-						class="toc-item"
-						class:active={activeSection === item.id}
-						onclick={() => scrollToSection(item.id)}
-					>
-						{item.title}
-					</button>
-				{/each}
-			</nav>
-		</div>
-	</aside>
-
-	<!-- Main Content -->
-	<main class="settings-main">
-		<div class="settings-content {maxWidthClasses[maxWidth]}">
-			<header class="settings-header">
-				<h1 class="text-2xl sm:text-[1.75rem] font-bold text-foreground m-0">{title}</h1>
-				{#if subtitle}
-					<p class="text-sm text-muted-foreground mt-1">{subtitle}</p>
-				{/if}
-			</header>
-
-			<div class="sections-container" bind:this={contentEl}>
-				{@render children()}
-			</div>
-		</div>
-	</main>
-</div>
-
-<style>
-	.settings-page {
-		min-height: calc(100vh - 4rem);
-		position: relative;
-	}
-
-	/* Table of Contents Sidebar - Fixed position on the left */
-	.toc-sidebar {
-		display: none;
-	}
-
-	@media (min-width: 1400px) {
-		.toc-sidebar {
-			display: block;
-			position: fixed;
-			left: 2rem;
-			top: 100px;
-			width: 240px;
-			max-height: calc(100vh - 140px);
-			overflow-y: auto;
-			z-index: 10;
-		}
-	}
-
-	.toc-container {
-		background: rgba(255, 255, 255, 0.85);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		border-radius: 1rem;
-		padding: 1.25rem;
-		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06);
-	}
-
-	:global(.dark) .toc-container {
-		background: rgba(255, 255, 255, 0.08);
-		border: 1px solid rgba(255, 255, 255, 0.1);
-	}
-
-	.toc-title {
-		font-size: 0.875rem;
-		font-weight: 600;
-		color: hsl(var(--color-foreground));
-		margin: 0 0 1rem 0;
-		padding-bottom: 0.75rem;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-	}
-
-	:global(.dark) .toc-title {
-		border-bottom-color: rgba(255, 255, 255, 0.1);
-	}
-
-	.toc-nav {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-	}
-
-	.toc-item {
-		display: block;
-		width: 100%;
-		text-align: left;
-		padding: 0.625rem 0.875rem;
-		font-size: 0.875rem;
-		color: hsl(var(--color-muted-foreground));
-		background: transparent;
-		border: none;
-		border-radius: 0.5rem;
-		cursor: pointer;
-		transition: all 0.15s ease;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.toc-item:hover {
-		color: hsl(var(--color-foreground));
-		background: hsl(var(--color-muted) / 0.5);
-	}
-
-	.toc-item.active {
-		color: hsl(var(--color-primary));
-		background: hsl(var(--color-primary) / 0.12);
-		font-weight: 600;
-	}
-
-	/* Main Content Area - Always centered */
-	.settings-main {
-		width: 100%;
-		padding: 2rem 1rem;
-	}
-
-	@media (min-width: 640px) {
-		.settings-main {
-			padding: 2rem 1.5rem;
-		}
-	}
-
-	@media (min-width: 1024px) {
-		.settings-main {
-			padding: 2rem;
-		}
-	}
-
-	.settings-content {
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	.settings-header {
-		margin-bottom: 2rem;
-	}
-
-	.sections-container {
-		display: flex;
-		flex-direction: column;
-		gap: 1.5rem;
-	}
-</style>
diff --git a/packages/shared-ui/src/settings/SettingsRow.svelte b/packages/shared-ui/src/settings/SettingsRow.svelte
deleted file mode 100644
index 86e5afc59..000000000
--- a/packages/shared-ui/src/settings/SettingsRow.svelte
+++ /dev/null
@@ -1,148 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { CaretRight } from '@mana/shared-icons';
-
-	interface Props {
-		/** Row label */
-		label: string;
-		/** Optional description */
-		description?: string;
-		/** Optional icon (Snippet for flexibility) */
-		icon?: Snippet;
-		/** Make the entire row clickable */
-		href?: string;
-		/** Click handler (alternative to href) */
-		onclick?: () => void;
-		/** Show border at bottom */
-		border?: boolean;
-		/** Disabled state */
-		disabled?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-		/** Control element (Toggle, Button, etc.) */
-		children?: Snippet;
-	}
-
-	let {
-		label,
-		description,
-		icon,
-		href,
-		onclick,
-		border = true,
-		disabled = false,
-		class: className = '',
-		children,
-	}: Props = $props();
-
-	const isClickable = $derived(!!href || !!onclick);
-
-	// Tailwind classes
-	const baseRowClasses =
-		'flex items-center justify-between gap-4 px-5 py-4 bg-transparent w-full text-left no-underline transition-all duration-200';
-
-	const borderClasses = 'border-b border-black/[0.08] dark:border-white/10 last:border-b-0';
-
-	const clickableClasses = 'cursor-pointer hover:bg-black/[0.04] dark:hover:bg-white/[0.06]';
-
-	const disabledClasses = 'opacity-50 cursor-not-allowed pointer-events-none';
-
-	const iconClasses =
-		'flex items-center justify-center flex-shrink-0 w-9 h-9 rounded-[0.625rem] bg-black/[0.04] dark:bg-white/[0.08] text-primary';
-
-	function getRowClasses(isBordered: boolean, isClick: boolean, isDisabled: boolean): string {
-		let classes = baseRowClasses;
-		if (isBordered) classes += ' ' + borderClasses;
-		if (isClick) classes += ' ' + clickableClasses;
-		if (isDisabled) classes += ' ' + disabledClasses;
-		return classes;
-	}
-</script>
-
-{#if href}
-	<a {href} class="{getRowClasses(border, true, disabled)} {className}">
-		<div class="flex items-center gap-3 flex-1 min-w-0">
-			{#if icon}
-				<span class={iconClasses}>
-					{@render icon()}
-				</span>
-			{/if}
-			<div class="flex flex-col gap-0.5 min-w-0">
-				<span class="text-[0.9375rem] font-medium text-gray-700 dark:text-gray-100">{label}</span>
-				{#if description}
-					<span class="text-[0.8125rem] text-gray-500 dark:text-gray-400 leading-snug"
-						>{description}</span
-					>
-				{/if}
-			</div>
-		</div>
-		<div class="flex items-center flex-shrink-0">
-			{#if children}
-				{@render children()}
-			{:else}
-				<CaretRight size={20} class="text-gray-400 dark:text-gray-500" />
-			{/if}
-		</div>
-	</a>
-{:else if onclick}
-	<button
-		type="button"
-		{onclick}
-		class="{getRowClasses(border, true, disabled)} {className}"
-		{disabled}
-	>
-		<div class="flex items-center gap-3 flex-1 min-w-0">
-			{#if icon}
-				<span class={iconClasses}>
-					{@render icon()}
-				</span>
-			{/if}
-			<div class="flex flex-col gap-0.5 min-w-0">
-				<span class="text-[0.9375rem] font-medium text-gray-700 dark:text-gray-100">{label}</span>
-				{#if description}
-					<span class="text-[0.8125rem] text-gray-500 dark:text-gray-400 leading-snug"
-						>{description}</span
-					>
-				{/if}
-			</div>
-		</div>
-		<div class="flex items-center flex-shrink-0">
-			{#if children}
-				{@render children()}
-			{:else}
-				<CaretRight size={20} class="text-gray-400 dark:text-gray-500" />
-			{/if}
-		</div>
-	</button>
-{:else}
-	<div class="{getRowClasses(border, false, disabled)} {className}">
-		<div class="flex items-center gap-3 flex-1 min-w-0">
-			{#if icon}
-				<span class={iconClasses}>
-					{@render icon()}
-				</span>
-			{/if}
-			<div class="flex flex-col gap-0.5 min-w-0">
-				<span class="text-[0.9375rem] font-medium text-gray-700 dark:text-gray-100">{label}</span>
-				{#if description}
-					<span class="text-[0.8125rem] text-gray-500 dark:text-gray-400 leading-snug"
-						>{description}</span
-					>
-				{/if}
-			</div>
-		</div>
-		{#if children}
-			<div class="flex items-center flex-shrink-0">
-				{@render children()}
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	/* Keep SVG sizing for icons passed via snippet */
-	:global(svg) {
-		width: 1.125rem;
-		height: 1.125rem;
-	}
-</style>
diff --git a/packages/shared-ui/src/settings/SettingsSection.svelte b/packages/shared-ui/src/settings/SettingsSection.svelte
deleted file mode 100644
index ece974149..000000000
--- a/packages/shared-ui/src/settings/SettingsSection.svelte
+++ /dev/null
@@ -1,119 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		/** Section title */
-		title?: string;
-		/** Optional icon (Snippet for flexibility) */
-		icon?: Snippet;
-		/** Additional CSS classes */
-		class?: string;
-		/** Content (SettingsCard components) */
-		children: Snippet;
-	}
-
-	let { title, icon, class: className = '', children }: Props = $props();
-
-	// Generate a slug from title for TOC navigation
-	const sectionId =
-		// svelte-ignore state_referenced_locally
-		title
-			?.toLowerCase()
-			.replace(/[^a-z0-9]+/g, '-')
-			.replace(/(^-|-$)/g, '') || '';
-</script>
-
-<section class="settings-section {className}" data-settings-section={sectionId}>
-	{#if title}
-		<header class="section-header-wrapper">
-			<div class="section-header-pill">
-				{#if icon}
-					<span class="section-icon">
-						{@render icon()}
-					</span>
-				{/if}
-				<h2 class="section-title">
-					{title}
-				</h2>
-			</div>
-		</header>
-	{/if}
-
-	<div class="section-content">
-		{@render children()}
-	</div>
-</section>
-
-<style>
-	.settings-section {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-
-	.section-header-wrapper {
-		position: sticky;
-		top: 70px;
-		z-index: 20;
-		padding: 0.5rem 0;
-	}
-
-	.section-header-pill {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 1rem;
-		border-radius: 9999px;
-		font-size: 0.9375rem;
-		font-weight: 600;
-		white-space: nowrap;
-		background: rgba(255, 255, 255, 0.85);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06);
-		color: #374151;
-	}
-
-	:global(.dark) .section-header-pill {
-		background: rgba(255, 255, 255, 0.12);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-		color: #f3f4f6;
-	}
-
-	.section-icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 1.5rem;
-		height: 1.5rem;
-		color: hsl(var(--color-primary));
-	}
-
-	.section-icon :global(svg) {
-		width: 1.125rem;
-		height: 1.125rem;
-	}
-
-	.section-title {
-		margin: 0;
-		font-size: inherit;
-		font-weight: inherit;
-		color: inherit;
-		letter-spacing: -0.01em;
-	}
-
-	.section-content {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	@media (max-width: 768px) {
-		.section-header-wrapper {
-			top: 80px;
-		}
-	}
-</style>
diff --git a/packages/shared-ui/src/settings/SettingsSelect.svelte b/packages/shared-ui/src/settings/SettingsSelect.svelte
deleted file mode 100644
index 1c5be0dc2..000000000
--- a/packages/shared-ui/src/settings/SettingsSelect.svelte
+++ /dev/null
@@ -1,111 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface SelectOption {
-		value: string | number | null;
-		label: string;
-	}
-
-	interface Props {
-		/** Row label */
-		label: string;
-		/** Optional description */
-		description?: string;
-		/** Optional icon (Snippet for flexibility) */
-		icon?: Snippet;
-		/** Available options */
-		options: SelectOption[];
-		/** Current selected value */
-		value: string | number | null;
-		/** Change handler */
-		onchange: (value: string | number | null) => void;
-		/** Show border at bottom */
-		border?: boolean;
-		/** Disabled state */
-		disabled?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		label,
-		description,
-		icon,
-		options,
-		value,
-		onchange,
-		border = true,
-		disabled = false,
-		class: className = '',
-	}: Props = $props();
-
-	function handleChange(event: Event) {
-		const target = event.target as HTMLSelectElement;
-		const rawValue = target.value;
-
-		// Handle null values (stored as empty string in select)
-		if (rawValue === '') {
-			onchange(null);
-			return;
-		}
-
-		// Try to parse as number if the original options had numbers
-		const numValue = Number(rawValue);
-		if (!isNaN(numValue) && options.some((o) => o.value === numValue)) {
-			onchange(numValue);
-		} else {
-			onchange(rawValue);
-		}
-	}
-
-	// Tailwind classes
-	const baseClasses = 'flex items-center justify-between gap-4 px-5 py-4';
-	const borderClasses = 'border-b border-black/[0.08] dark:border-white/10 last:border-b-0';
-	const disabledClasses = 'opacity-50 cursor-not-allowed';
-
-	const iconClasses =
-		'flex items-center justify-center flex-shrink-0 w-9 h-9 rounded-[0.625rem] bg-black/[0.04] dark:bg-white/[0.08] text-primary [&>svg]:w-[1.125rem] [&>svg]:h-[1.125rem]';
-</script>
-
-<div
-	class="{baseClasses} {border ? borderClasses : ''} {disabled ? disabledClasses : ''} {className}"
->
-	<div class="flex items-center gap-3 flex-1 min-w-0">
-		{#if icon}
-			<span class={iconClasses}>
-				{@render icon()}
-			</span>
-		{/if}
-		<div class="flex flex-col gap-0.5 min-w-0">
-			<span class="text-[0.9375rem] font-medium text-gray-700 dark:text-gray-100">{label}</span>
-			{#if description}
-				<span class="text-[0.8125rem] text-gray-500 dark:text-gray-400 leading-snug"
-					>{description}</span
-				>
-			{/if}
-		</div>
-	</div>
-
-	<select
-		class="min-w-32 px-3 pr-8 py-2 text-sm font-medium text-gray-700 dark:text-gray-100
-			bg-black/[0.04] dark:bg-white/[0.08] border border-black/10 dark:border-white/[0.15]
-			rounded-lg cursor-pointer appearance-none transition-all duration-200
-			hover:border-black/20 dark:hover:border-white/25 hover:bg-black/[0.06] dark:hover:bg-white/[0.12]
-			focus-visible:outline-2 focus-visible:outline-primary/40 focus-visible:outline-offset-2 focus-visible:border-primary
-			disabled:cursor-not-allowed disabled:opacity-60
-			bg-[url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236b7280%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E')]
-			dark:bg-[url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239ca3af%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E')]
-			bg-no-repeat bg-[right_0.5rem_center] bg-[length:1rem]"
-		value={value ?? ''}
-		onchange={handleChange}
-		{disabled}
-		aria-label={label}
-	>
-		{#each options as option}
-			<option
-				value={option.value ?? ''}
-				class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-100">{option.label}</option
-			>
-		{/each}
-	</select>
-</div>
diff --git a/packages/shared-ui/src/settings/SettingsTimeInput.svelte b/packages/shared-ui/src/settings/SettingsTimeInput.svelte
deleted file mode 100644
index d47b34c2c..000000000
--- a/packages/shared-ui/src/settings/SettingsTimeInput.svelte
+++ /dev/null
@@ -1,116 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { X } from '@mana/shared-icons';
-
-	interface Props {
-		/** Row label */
-		label: string;
-		/** Optional description */
-		description?: string;
-		/** Optional icon (Snippet for flexibility) */
-		icon?: Snippet;
-		/** Current value (HH:mm format, null = not set) */
-		value: string | null;
-		/** Change handler */
-		onchange: (value: string | null) => void;
-		/** Placeholder text when empty */
-		placeholder?: string;
-		/** Show border at bottom */
-		border?: boolean;
-		/** Disabled state */
-		disabled?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		label,
-		description,
-		icon,
-		value,
-		onchange,
-		placeholder = '--:--',
-		border = true,
-		disabled = false,
-		class: className = '',
-	}: Props = $props();
-
-	function handleInput(event: Event) {
-		const target = event.target as HTMLInputElement;
-		const rawValue = target.value.trim();
-
-		if (rawValue === '') {
-			onchange(null);
-			return;
-		}
-
-		// Validate HH:mm format
-		if (/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/.test(rawValue)) {
-			onchange(rawValue);
-		}
-	}
-
-	function handleClear() {
-		onchange(null);
-	}
-
-	// Tailwind classes
-	const baseClasses = 'flex items-center justify-between gap-4 px-5 py-4';
-	const borderClasses = 'border-b border-black/[0.08] dark:border-white/10 last:border-b-0';
-	const disabledClasses = 'opacity-50 cursor-not-allowed';
-
-	const iconClasses =
-		'flex items-center justify-center flex-shrink-0 w-9 h-9 rounded-[0.625rem] bg-black/[0.04] dark:bg-white/[0.08] text-primary [&>svg]:w-[1.125rem] [&>svg]:h-[1.125rem]';
-</script>
-
-<div
-	class="{baseClasses} {border ? borderClasses : ''} {disabled ? disabledClasses : ''} {className}"
->
-	<div class="flex items-center gap-3 flex-1 min-w-0">
-		{#if icon}
-			<span class={iconClasses}>
-				{@render icon()}
-			</span>
-		{/if}
-		<div class="flex flex-col gap-0.5 min-w-0">
-			<span class="text-[0.9375rem] font-medium text-gray-700 dark:text-gray-100">{label}</span>
-			{#if description}
-				<span class="text-[0.8125rem] text-gray-500 dark:text-gray-400 leading-snug"
-					>{description}</span
-				>
-			{/if}
-		</div>
-	</div>
-
-	<div class="flex items-center gap-1">
-		<input
-			type="time"
-			class="w-24 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-100 text-center
-				bg-black/[0.04] dark:bg-white/[0.08] border border-black/10 dark:border-white/[0.15]
-				rounded-lg transition-all duration-200
-				hover:border-black/20 dark:hover:border-white/25 hover:bg-black/[0.06] dark:hover:bg-white/[0.12]
-				focus-visible:outline-2 focus-visible:outline-primary/40 focus-visible:outline-offset-2 focus-visible:border-primary
-				disabled:cursor-not-allowed disabled:opacity-60
-				[&::-webkit-calendar-picker-indicator]:opacity-50 [&::-webkit-calendar-picker-indicator]:cursor-pointer
-				dark:[&::-webkit-calendar-picker-indicator]:invert dark:[&::-webkit-calendar-picker-indicator]:opacity-70"
-			value={value ?? ''}
-			oninput={handleInput}
-			{placeholder}
-			{disabled}
-			aria-label={label}
-		/>
-		{#if value}
-			<button
-				type="button"
-				class="flex items-center justify-center w-7 h-7 p-0 text-gray-500 dark:text-gray-400 bg-transparent border-none rounded-md cursor-pointer transition-all duration-200
-					hover:text-red-500 hover:bg-red-500/10 dark:hover:bg-red-500/20
-					disabled:cursor-not-allowed disabled:opacity-50"
-				onclick={handleClear}
-				aria-label="Clear time"
-				{disabled}
-			>
-				<X size={20} />
-			</button>
-		{/if}
-	</div>
-</div>
diff --git a/packages/shared-ui/src/settings/SettingsToggle.svelte b/packages/shared-ui/src/settings/SettingsToggle.svelte
deleted file mode 100644
index ba7b67375..000000000
--- a/packages/shared-ui/src/settings/SettingsToggle.svelte
+++ /dev/null
@@ -1,89 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		/** Row label */
-		label: string;
-		/** Optional description */
-		description?: string;
-		/** Optional icon (Snippet for flexibility) */
-		icon?: Snippet;
-		/** Toggle state */
-		isOn: boolean;
-		/** Toggle handler */
-		onToggle: (value: boolean) => void;
-		/** Show border at bottom */
-		border?: boolean;
-		/** Disabled state */
-		disabled?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-	}
-
-	let {
-		label,
-		description,
-		icon,
-		isOn = false,
-		onToggle,
-		border = true,
-		disabled = false,
-		class: className = '',
-	}: Props = $props();
-
-	function handleToggle() {
-		if (!disabled) {
-			onToggle(!isOn);
-		}
-	}
-
-	// Tailwind classes
-	const baseClasses = 'flex items-center justify-between gap-4 px-5 py-4';
-	const borderClasses = 'border-b border-black/[0.08] dark:border-white/10 last:border-b-0';
-	const disabledClasses = 'opacity-50 cursor-not-allowed';
-
-	const iconClasses =
-		'flex items-center justify-center flex-shrink-0 w-9 h-9 rounded-[0.625rem] bg-black/[0.04] dark:bg-white/[0.08] text-primary [&>svg]:w-[1.125rem] [&>svg]:h-[1.125rem]';
-</script>
-
-<div
-	class="{baseClasses} {border ? borderClasses : ''} {disabled ? disabledClasses : ''} {className}"
->
-	<div class="flex items-center gap-3 flex-1 min-w-0">
-		{#if icon}
-			<span class={iconClasses}>
-				{@render icon()}
-			</span>
-		{/if}
-		<div class="flex flex-col gap-0.5 min-w-0">
-			<span class="text-[0.9375rem] font-medium text-gray-700 dark:text-gray-100">{label}</span>
-			{#if description}
-				<span class="text-[0.8125rem] text-gray-500 dark:text-gray-400 leading-snug"
-					>{description}</span
-				>
-			{/if}
-		</div>
-	</div>
-
-	<button
-		type="button"
-		onclick={handleToggle}
-		class="relative w-12 h-7 rounded-full border flex-shrink-0 transition-all duration-200
-			{isOn
-			? 'bg-primary border-primary shadow-[0_0_0_2px_hsl(var(--color-primary)/0.2)] dark:shadow-[0_0_0_2px_hsl(var(--color-primary)/0.3)]'
-			: 'bg-black/[0.08] border-black/10 dark:bg-white/[0.12] dark:border-white/[0.15]'}
-			{!disabled
-			? 'cursor-pointer hover:border-black/20 dark:hover:border-white/25'
-			: 'cursor-not-allowed'}
-			focus-visible:outline-2 focus-visible:outline-primary/40 focus-visible:outline-offset-2"
-		role="switch"
-		aria-checked={isOn}
-		aria-label={label}
-		{disabled}
-	>
-		<span
-			class="absolute top-[1px] left-[1px] w-6 h-6 rounded-full bg-white shadow-md transition-transform duration-200
-				{isOn ? 'translate-x-5' : ''}"
-		></span>
-	</button>
-</div>
diff --git a/packages/shared-ui/src/settings/index.ts b/packages/shared-ui/src/settings/index.ts
deleted file mode 100644
index 06db8bce2..000000000
--- a/packages/shared-ui/src/settings/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Settings Components
-export { default as SettingsPage } from './SettingsPage.svelte';
-export { default as SettingsSection } from './SettingsSection.svelte';
-export { default as SettingsCard } from './SettingsCard.svelte';
-export { default as SettingsRow } from './SettingsRow.svelte';
-export { default as SettingsToggle } from './SettingsToggle.svelte';
-export { default as SettingsSelect } from './SettingsSelect.svelte';
-export { default as SettingsNumberInput } from './SettingsNumberInput.svelte';
-export { default as SettingsTimeInput } from './SettingsTimeInput.svelte';
-export { default as SettingsDangerZone } from './SettingsDangerZone.svelte';
-export { default as SettingsDangerButton } from './SettingsDangerButton.svelte';
-export { default as GlobalSettingsSection } from './GlobalSettingsSection.svelte';
-export { default as NavVisibilitySettings } from './NavVisibilitySettings.svelte';
diff --git a/packages/shared-ui/src/test/setup.ts b/packages/shared-ui/src/test/setup.ts
deleted file mode 100644
index 7d03ba8f4..000000000
--- a/packages/shared-ui/src/test/setup.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import { expect } from 'vitest';
-import * as matchers from '@testing-library/jest-dom/matchers';
-
-expect.extend(matchers);
diff --git a/packages/shared-ui/src/toast/ToastContainer.svelte b/packages/shared-ui/src/toast/ToastContainer.svelte
deleted file mode 100644
index 6491058bb..000000000
--- a/packages/shared-ui/src/toast/ToastContainer.svelte
+++ /dev/null
@@ -1,173 +0,0 @@
-<script lang="ts">
-	import { toastStore } from './toast.svelte';
-	import type { Toast } from './toast.svelte';
-	import { X, CheckCircle, XCircle, Warning, Info } from '@mana/shared-icons';
-
-	let toasts = $derived(toastStore.toasts);
-
-	const icons = {
-		success: CheckCircle,
-		error: XCircle,
-		warning: Warning,
-		info: Info,
-	};
-
-	const colors = {
-		success: 'bg-green-500/90 text-white',
-		error: 'bg-destructive/90 text-destructive-foreground',
-		warning: 'bg-amber-500/90 text-white',
-		info: 'bg-primary/90 text-primary-foreground',
-	};
-
-	function handleDismiss(id: string) {
-		toastStore.dismiss(id);
-	}
-</script>
-
-{#if toasts.length > 0}
-	<div class="toast-container">
-		{#each toasts as toast (toast.id)}
-			{@const Icon = icons[toast.type]}
-			<div class="toast-item {colors[toast.type]}" role="alert">
-				<Icon size={20} weight="fill" class="toast-icon" />
-				<p class="toast-message">{toast.message}</p>
-				{#if toast.action}
-					<button
-						onclick={() => {
-							toast.action?.onClick();
-							handleDismiss(toast.id);
-						}}
-						class="toast-action"
-					>
-						{toast.action.label}
-					</button>
-				{/if}
-				<button
-					onclick={() => handleDismiss(toast.id)}
-					class="toast-dismiss"
-					aria-label="Schließen"
-				>
-					<X size={16} weight="bold" />
-				</button>
-			</div>
-		{/each}
-	</div>
-{/if}
-
-<style>
-	.toast-container {
-		position: fixed;
-		bottom: 1.5rem;
-		right: 1.5rem;
-		z-index: 100;
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-		max-width: 24rem;
-	}
-
-	/* Mobile: full width at bottom, above nav bar */
-	@media (max-width: 640px) {
-		.toast-container {
-			left: 0.75rem;
-			right: 0.75rem;
-			bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
-			max-width: none;
-		}
-	}
-
-	.toast-item {
-		display: flex;
-		align-items: flex-start;
-		gap: 0.75rem;
-		padding: 0.75rem 1rem;
-		min-height: 48px;
-		border-radius: 0.75rem;
-		box-shadow:
-			0 10px 15px -3px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
-		backdrop-filter: blur(12px);
-		border: 1px solid rgba(255, 255, 255, 0.2);
-		animation: toast-slide-in 0.3s ease-out;
-	}
-
-	.toast-icon {
-		flex-shrink: 0;
-		margin-top: 0.125rem;
-	}
-
-	.toast-message {
-		flex: 1;
-		font-size: 0.875rem;
-		font-weight: 500;
-		line-height: 1.4;
-		margin: 0;
-	}
-
-	.toast-action {
-		flex-shrink: 0;
-		padding: 0.375rem 0.75rem;
-		min-height: 36px;
-		display: flex;
-		align-items: center;
-		border-radius: 0.375rem;
-		background: rgba(255, 255, 255, 0.2);
-		border: 1px solid rgba(255, 255, 255, 0.3);
-		cursor: pointer;
-		font-size: 0.75rem;
-		font-weight: 600;
-		color: inherit;
-		transition: all 0.15s ease;
-		white-space: nowrap;
-	}
-	.toast-action:hover {
-		background: rgba(255, 255, 255, 0.35);
-	}
-
-	.toast-dismiss {
-		flex-shrink: 0;
-		padding: 0.5rem;
-		min-width: 36px;
-		min-height: 36px;
-		border-radius: 0.5rem;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		opacity: 0.8;
-		transition: all 0.15s ease;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: inherit;
-	}
-
-	.toast-dismiss:hover {
-		opacity: 1;
-		background: rgba(255, 255, 255, 0.2);
-	}
-
-	@keyframes toast-slide-in {
-		from {
-			opacity: 0;
-			transform: translateX(100%);
-		}
-		to {
-			opacity: 1;
-			transform: translateX(0);
-		}
-	}
-
-	/* Mobile: slide up instead of from right */
-	@media (max-width: 640px) {
-		@keyframes toast-slide-in {
-			from {
-				opacity: 0;
-				transform: translateY(100%);
-			}
-			to {
-				opacity: 1;
-				transform: translateY(0);
-			}
-		}
-	}
-</style>
diff --git a/packages/shared-ui/src/toast/ToastStack.stories.svelte b/packages/shared-ui/src/toast/ToastStack.stories.svelte
new file mode 100644
index 000000000..413b6f76a
--- /dev/null
+++ b/packages/shared-ui/src/toast/ToastStack.stories.svelte
@@ -0,0 +1,61 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ToastStack from './ToastStack.svelte';
+	import { toasts } from './store.svelte';
+	import Button from '../atoms/Button.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Toast/ToastStack',
+		component: ToastStack,
+		tags: ['autodocs'],
+	});
+
+	function info() {
+		toasts.info('Sync läuft im Hintergrund.');
+	}
+	function success() {
+		toasts.success('Karte gespeichert.');
+	}
+	function warning() {
+		toasts.warning('Verbindung schwach — manche Aktionen verzögert.');
+	}
+	function error() {
+		toasts.error('Fehler beim Speichern. Bitte erneut versuchen.', { duration: 8000 });
+	}
+	function clearAll() {
+		toasts.clear();
+	}
+</script>
+
+<Story name="BottomRight">
+	{#snippet children()}
+		<div style="display:flex; flex-direction:column; gap:0.5rem;">
+			<div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
+				<Button variant="secondary" size="sm" onclick={info}>Info</Button>
+				<Button variant="primary" size="sm" onclick={success}>Success</Button>
+				<Button variant="secondary" size="sm" onclick={warning}>Warning</Button>
+				<Button variant="danger" size="sm" onclick={error}>Error</Button>
+				<Button variant="ghost" size="sm" onclick={clearAll}>Alle löschen</Button>
+			</div>
+			<p style="font-size:0.8125rem; color:hsl(var(--color-muted-foreground)); margin:0;">
+				Toasts erscheinen rechts unten. Auto-dismiss nach 4–8s je Kind.
+			</p>
+			<ToastStack position="bottom-right" />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="TopCenter">
+	{#snippet children()}
+		<div style="display:flex; flex-direction:column; gap:0.5rem;">
+			<div style="display:flex; gap:0.5rem;">
+				<Button variant="primary" size="sm" onclick={success}>Success-Toast</Button>
+				<Button variant="ghost" size="sm" onclick={clearAll}>Löschen</Button>
+			</div>
+			<p style="font-size:0.8125rem; color:hsl(var(--color-muted-foreground)); margin:0;">
+				Position: oben mittig.
+			</p>
+			<ToastStack position="top-center" />
+		</div>
+	{/snippet}
+</Story>
diff --git a/packages/shared-ui/src/toast/ToastStack.svelte b/packages/shared-ui/src/toast/ToastStack.svelte
new file mode 100644
index 000000000..3b1d5724d
--- /dev/null
+++ b/packages/shared-ui/src/toast/ToastStack.svelte
@@ -0,0 +1,161 @@
+<script lang="ts">
+	import { toasts, type Toast } from './store.svelte';
+
+	type Position = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'top-center';
+
+	interface Props {
+		position?: Position;
+		closeLabel?: string;
+		ariaLabel?: string;
+	}
+
+	let {
+		position = 'bottom-right',
+		closeLabel = 'Schließen',
+		ariaLabel = 'Benachrichtigungen',
+	}: Props = $props();
+
+	function dismiss(t: Toast) {
+		toasts.dismiss(t.id);
+	}
+</script>
+
+{#if toasts.items.length > 0}
+	<div class="stack pos-{position}" role="region" aria-live="polite" aria-label={ariaLabel}>
+		{#each toasts.items as t (t.id)}
+			<div
+				class="toast kind-{t.kind}"
+				role={t.kind === 'error' ? 'alert' : 'status'}
+				aria-atomic="true"
+			>
+				<span class="dot" aria-hidden="true"></span>
+				<span class="message">{t.message}</span>
+				<button class="close" type="button" aria-label={closeLabel} onclick={() => dismiss(t)}>
+					×
+				</button>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.stack {
+		position: fixed;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		z-index: 9999;
+		max-width: min(28rem, calc(100vw - 2rem));
+		pointer-events: none;
+	}
+
+	.pos-bottom-right {
+		bottom: 1rem;
+		right: 1rem;
+	}
+	.pos-bottom-left {
+		bottom: 1rem;
+		left: 1rem;
+	}
+	.pos-top-right {
+		top: 1rem;
+		right: 1rem;
+	}
+	.pos-top-left {
+		top: 1rem;
+		left: 1rem;
+	}
+	.pos-top-center {
+		top: 1rem;
+		left: 50%;
+		transform: translateX(-50%);
+		align-items: center;
+	}
+
+	.toast {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.625rem;
+		padding: 0.75rem 0.875rem;
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.625rem;
+		color: hsl(var(--color-foreground));
+		box-shadow:
+			0 4px 12px hsl(var(--color-foreground) / 0.1),
+			0 1px 3px hsl(var(--color-foreground) / 0.05);
+		font-size: 0.875rem;
+		pointer-events: auto;
+		animation: slide-in 0.2s ease-out;
+	}
+
+	.dot {
+		flex-shrink: 0;
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 50%;
+		margin-top: 0.4375rem;
+	}
+
+	.kind-info .dot {
+		background: hsl(var(--color-primary));
+	}
+	.kind-success .dot {
+		background: hsl(var(--color-success));
+	}
+	.kind-warning .dot {
+		background: hsl(var(--color-warning));
+	}
+	.kind-error .dot {
+		background: hsl(var(--color-error));
+	}
+
+	.kind-error {
+		border-color: hsl(var(--color-error) / 0.4);
+	}
+	.kind-warning {
+		border-color: hsl(var(--color-warning) / 0.4);
+	}
+
+	.message {
+		flex: 1;
+		line-height: 1.4;
+	}
+
+	.close {
+		flex-shrink: 0;
+		background: transparent;
+		border: none;
+		color: hsl(var(--color-muted-foreground));
+		font-size: 1.125rem;
+		line-height: 1;
+		padding: 0 0.25rem;
+		cursor: pointer;
+		font-family: inherit;
+	}
+	.close:hover {
+		color: hsl(var(--color-foreground));
+	}
+	.close:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+
+	@keyframes slide-in {
+		from {
+			opacity: 0;
+			transform: translateY(0.5rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.toast {
+			animation: none;
+		}
+	}
+</style>
diff --git a/packages/shared-ui/src/toast/globalErrorHandler.ts b/packages/shared-ui/src/toast/globalErrorHandler.ts
deleted file mode 100644
index 53703bce5..000000000
--- a/packages/shared-ui/src/toast/globalErrorHandler.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-/**
- * Global Error Handler - Catches unhandled errors and shows toast notifications
- *
- * Usage:
- * ```ts
- * import { setupGlobalErrorHandler } from '@mana/shared-ui';
- * import { onMount } from 'svelte';
- *
- * onMount(() => {
- *   const cleanup = setupGlobalErrorHandler();
- *   return cleanup; // Optional: cleanup on unmount
- * });
- *
- * // With custom translations:
- * setupGlobalErrorHandler({
- *   networkError: 'Network error: Server unreachable',
- *   sessionExpired: 'Session expired. Please log in again.',
- *   unexpectedError: 'An unexpected error occurred',
- *   genericError: 'An error occurred',
- *   offline: 'No internet connection',
- *   online: 'Connection restored',
- * });
- * ```
- */
-
-import { toastStore } from './toast.svelte';
-
-export interface GlobalErrorHandlerTranslations {
-	/** Message for network/fetch errors */
-	networkError: string;
-	/** Message for 401/unauthorized errors */
-	sessionExpired: string;
-	/** Fallback message for unhandled promise rejections */
-	unexpectedError: string;
-	/** Message for general JavaScript errors */
-	genericError: string;
-	/** Message when going offline */
-	offline: string;
-	/** Message when connection is restored */
-	online: string;
-}
-
-const DEFAULT_TRANSLATIONS_DE: GlobalErrorHandlerTranslations = {
-	networkError: 'Netzwerkfehler: Server nicht erreichbar',
-	sessionExpired: 'Sitzung abgelaufen. Bitte erneut anmelden.',
-	unexpectedError: 'Ein unerwarteter Fehler ist aufgetreten',
-	genericError: 'Ein Fehler ist aufgetreten',
-	offline: 'Keine Internetverbindung',
-	online: 'Verbindung wiederhergestellt',
-};
-
-const DEFAULT_TRANSLATIONS_EN: GlobalErrorHandlerTranslations = {
-	networkError: 'Network error: Server unreachable',
-	sessionExpired: 'Session expired. Please log in again.',
-	unexpectedError: 'An unexpected error occurred',
-	genericError: 'An error occurred',
-	offline: 'No internet connection',
-	online: 'Connection restored',
-};
-
-export const GLOBAL_ERROR_TRANSLATIONS = {
-	de: DEFAULT_TRANSLATIONS_DE,
-	en: DEFAULT_TRANSLATIONS_EN,
-} as const;
-
-export interface GlobalErrorHandlerOptions {
-	/** Custom translations (default: German) */
-	translations?: Partial<GlobalErrorHandlerTranslations>;
-	/** Locale key to use built-in translations (overridden by translations if provided) */
-	locale?: 'de' | 'en';
-	/** Duration for offline warning toast in ms (default: 10000) */
-	offlineDuration?: number;
-	/** Enable console logging for debugging (default: false) */
-	debug?: boolean;
-	/** Custom handler for auth errors (e.g., redirect to login) */
-	onAuthError?: () => void;
-}
-
-/**
- * Sets up global error handling for unhandled promise rejections,
- * JavaScript errors, and network connectivity changes.
- *
- * @param options - Configuration options
- * @returns Cleanup function to remove event listeners
- */
-export function setupGlobalErrorHandler(options: GlobalErrorHandlerOptions = {}): () => void {
-	// Don't run on server
-	if (typeof window === 'undefined') {
-		return () => {};
-	}
-
-	const {
-		translations: customTranslations,
-		locale = 'de',
-		offlineDuration = 10000,
-		debug = false,
-		onAuthError,
-	} = options;
-
-	// Merge built-in translations with custom overrides
-	const baseTranslations = GLOBAL_ERROR_TRANSLATIONS[locale] || DEFAULT_TRANSLATIONS_DE;
-	const translations: GlobalErrorHandlerTranslations = {
-		...baseTranslations,
-		...customTranslations,
-	};
-
-	const log = (msg: string, ...args: unknown[]) => {
-		if (debug) {
-			console.log(`[GlobalErrorHandler] ${msg}`, ...args);
-		}
-	};
-
-	// Handle unhandled promise rejections
-	const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
-		const error = event.reason;
-		log('Unhandled rejection:', error);
-
-		let message = translations.unexpectedError;
-
-		if (error instanceof Error) {
-			// Network errors
-			if (error.message === 'Failed to fetch' || error.name === 'TypeError') {
-				message = translations.networkError;
-			}
-			// Auth errors
-			else if (
-				error.message.includes('401') ||
-				error.message.toLowerCase().includes('unauthorized')
-			) {
-				message = translations.sessionExpired;
-				onAuthError?.();
-			}
-			// Other errors with messages
-			else if (error.message) {
-				message = error.message;
-			}
-		}
-
-		toastStore.error(message);
-		event.preventDefault();
-	};
-
-	// Handle general JavaScript errors
-	const handleError = (event: ErrorEvent) => {
-		log('Error event:', event);
-		// Only handle non-script errors (network failures for resources, etc.)
-		if (event.message && !event.filename) {
-			toastStore.error(translations.genericError);
-		}
-	};
-
-	// Handle offline status
-	const handleOffline = () => {
-		log('Offline');
-		toastStore.warning(translations.offline, offlineDuration);
-	};
-
-	// Handle online status
-	const handleOnline = () => {
-		log('Online');
-		toastStore.success(translations.online);
-	};
-
-	// Add event listeners
-	window.addEventListener('unhandledrejection', handleUnhandledRejection);
-	window.addEventListener('error', handleError);
-	window.addEventListener('offline', handleOffline);
-	window.addEventListener('online', handleOnline);
-
-	log('Initialized');
-
-	// Return cleanup function
-	return () => {
-		window.removeEventListener('unhandledrejection', handleUnhandledRejection);
-		window.removeEventListener('error', handleError);
-		window.removeEventListener('offline', handleOffline);
-		window.removeEventListener('online', handleOnline);
-		log('Cleaned up');
-	};
-}
diff --git a/packages/shared-ui/src/toast/index.ts b/packages/shared-ui/src/toast/index.ts
index 3713062b4..64a7e6e87 100644
--- a/packages/shared-ui/src/toast/index.ts
+++ b/packages/shared-ui/src/toast/index.ts
@@ -1,8 +1,6 @@
-export { toastStore, toast, handleApiError } from './toast.svelte';
-export type { Toast, ToastType, ToastAction } from './toast.svelte';
-export { default as ToastContainer } from './ToastContainer.svelte';
-export { setupGlobalErrorHandler, GLOBAL_ERROR_TRANSLATIONS } from './globalErrorHandler';
-export type {
-	GlobalErrorHandlerOptions,
-	GlobalErrorHandlerTranslations,
-} from './globalErrorHandler';
+export { default as ToastStack } from './ToastStack.svelte';
+export { toasts } from './store.svelte';
+export type { Toast, ToastKind, ToastOptions } from './store.svelte';
+export { toastStore } from './legacy-store';
+// v0.1.x-Alias für `toasts` (Singular-Schreibweise war früher üblich)
+export { toasts as toast } from './store.svelte';
diff --git a/packages/shared-ui/src/toast/legacy-store.ts b/packages/shared-ui/src/toast/legacy-store.ts
new file mode 100644
index 000000000..aef9009b9
--- /dev/null
+++ b/packages/shared-ui/src/toast/legacy-store.ts
@@ -0,0 +1,37 @@
+/**
+ * Compat-Alias für die v0.1.x-`toastStore`-API.
+ *
+ * Brücke für managarten + andere ältere Konsumenten, bis sie auf
+ * `toasts.info/success/warning/error` aus `./store.svelte` umstellen.
+ *
+ * **Übergang**: `toastStore.undo(message, callback)` schaltet heute
+ * nur einen Info-Toast ohne Rückgängig-Button. Echte Action-Toasts
+ * brauchen eine erweiterte ToastStack-API (eigener Sprint, siehe
+ * PORTING_PLAN.md).
+ */
+
+import { toasts } from './store.svelte';
+
+export const toastStore = {
+	info(message: string, options?: { duration?: number }) {
+		toasts.info(message, options);
+	},
+	success(message: string, options?: { duration?: number }) {
+		toasts.success(message, options);
+	},
+	warning(message: string, options?: { duration?: number }) {
+		toasts.warning(message, options);
+	},
+	error(message: string, options?: { duration?: number }) {
+		toasts.error(message, options);
+	},
+	/** Backwards-Compat. v0.1.x hatte einen Undo-Toast mit Rückgängig-Button.
+	 *  v1.0.0-Übergang: nur Info-Toast — Callback wird heute NICHT aufgerufen. */
+	undo(message: string, _onUndo?: () => void) {
+		toasts.info(message);
+	},
+	/** Manche v0.1.x-Konsumenten haben `toastStore.show?.(msg)` aufgerufen. */
+	show(message: string) {
+		toasts.info(message);
+	},
+};
diff --git a/packages/shared-ui/src/toast/store.svelte.ts b/packages/shared-ui/src/toast/store.svelte.ts
new file mode 100644
index 000000000..2b428df63
--- /dev/null
+++ b/packages/shared-ui/src/toast/store.svelte.ts
@@ -0,0 +1,83 @@
+/**
+ * Toast-Store — Svelte-5-Runes-Pattern.
+ *
+ * Single Module-State, mutationen reaktiv beobachtbar. Konsumenten
+ * importieren `toasts` und rufen `toasts.info(...)`/`success(...)` etc.
+ * Die `<ToastStack />`-Komponente rendert die aktuellen Items.
+ *
+ *   import { toasts } from '@mana/shared-ui-2/toast';
+ *   toasts.success('Gespeichert.');
+ *   toasts.error('Konnte nicht laden.', { duration: 8000 });
+ */
+
+export type ToastKind = 'info' | 'success' | 'warning' | 'error';
+
+export interface Toast {
+	id: string;
+	kind: ToastKind;
+	message: string;
+	expiresAt: number;
+}
+
+export interface ToastOptions {
+	duration?: number;
+}
+
+class ToastStore {
+	items = $state<Toast[]>([]);
+	private nextId = 1;
+
+	push(kind: ToastKind, message: string, options: ToastOptions = {}): string {
+		const id = `toast-${this.nextId++}`;
+		const duration = options.duration ?? defaultDurationFor(kind);
+		const toast: Toast = {
+			id,
+			kind,
+			message,
+			expiresAt: Date.now() + duration,
+		};
+		this.items = [...this.items, toast];
+		if (duration > 0) {
+			setTimeout(() => this.dismiss(id), duration);
+		}
+		return id;
+	}
+
+	dismiss(id: string): void {
+		this.items = this.items.filter((t) => t.id !== id);
+	}
+
+	clear(): void {
+		this.items = [];
+	}
+
+	info(message: string, options?: ToastOptions): string {
+		return this.push('info', message, options);
+	}
+	success(message: string, options?: ToastOptions): string {
+		return this.push('success', message, options);
+	}
+	warning(message: string, options?: ToastOptions): string {
+		return this.push('warning', message, options);
+	}
+	error(message: string, options?: ToastOptions): string {
+		return this.push('error', message, options);
+	}
+}
+
+function defaultDurationFor(kind: ToastKind): number {
+	// Errors brauchen länger zum Lesen, Info verschwindet schneller
+	switch (kind) {
+		case 'error':
+			return 8000;
+		case 'warning':
+			return 6000;
+		case 'success':
+			return 4000;
+		default:
+			return 4000;
+	}
+}
+
+/** Module-Singleton. */
+export const toasts = new ToastStore();
diff --git a/packages/shared-ui/src/toast/toast.svelte.ts b/packages/shared-ui/src/toast/toast.svelte.ts
deleted file mode 100644
index 38afca00b..000000000
--- a/packages/shared-ui/src/toast/toast.svelte.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-/**
- * Toast Store - Centralized notification system using Svelte 5 runes
- *
- * Usage:
- * ```ts
- * import { toastStore } from '@mana/shared-ui';
- *
- * // Show notifications
- * toastStore.success('Saved successfully');
- * toastStore.error('Something went wrong');
- * toastStore.warning('Please check your input');
- * toastStore.info('New update available');
- *
- * // Manual control
- * const id = toastStore.show('Custom message', 'info', 5000);
- * toastStore.dismiss(id);
- * toastStore.dismissAll();
- * ```
- */
-
-export type ToastType = 'success' | 'error' | 'warning' | 'info';
-
-export interface ToastAction {
-	label: string;
-	onClick: () => void;
-}
-
-export interface Toast {
-	id: string;
-	type: ToastType;
-	message: string;
-	duration: number;
-	action?: ToastAction;
-}
-
-// State
-let toasts = $state<Toast[]>([]);
-
-// Auto-incrementing ID with timestamp for uniqueness
-let nextId = 0;
-
-function generateId(): string {
-	return `toast-${++nextId}-${Date.now()}`;
-}
-
-export const toastStore = {
-	/**
-	 * Get all active toasts (reactive)
-	 */
-	get toasts() {
-		return toasts;
-	},
-
-	/**
-	 * Show a toast notification
-	 * @param message - The message to display
-	 * @param type - Toast type: 'success' | 'error' | 'warning' | 'info'
-	 * @param duration - Duration in ms (0 = permanent, default: 4000)
-	 * @param action - Optional action button { label, onClick }
-	 * @returns The toast ID for manual dismissal
-	 */
-	show(message: string, type: ToastType = 'info', duration = 4000, action?: ToastAction): string {
-		const id = generateId();
-		const toast: Toast = { id, type, message, duration, action };
-
-		toasts = [...toasts, toast];
-
-		// Auto-remove after duration (unless permanent)
-		if (duration > 0) {
-			setTimeout(() => {
-				this.dismiss(id);
-			}, duration);
-		}
-
-		return id;
-	},
-
-	/**
-	 * Show a success toast (green)
-	 * @param message - The message to display
-	 * @param duration - Duration in ms (default: 4000)
-	 */
-	success(message: string, duration?: number): string {
-		return this.show(message, 'success', duration);
-	},
-
-	/**
-	 * Show an error toast (red) - longer default duration
-	 * @param message - The message to display
-	 * @param duration - Duration in ms (default: 6000)
-	 */
-	error(message: string, duration = 6000): string {
-		return this.show(message, 'error', duration);
-	},
-
-	/**
-	 * Show a warning toast (amber)
-	 * @param message - The message to display
-	 * @param duration - Duration in ms (default: 4000)
-	 */
-	warning(message: string, duration?: number): string {
-		return this.show(message, 'warning', duration);
-	},
-
-	/**
-	 * Show an info toast (blue)
-	 * @param message - The message to display
-	 * @param duration - Duration in ms (default: 4000)
-	 */
-	info(message: string, duration?: number): string {
-		return this.show(message, 'info', duration);
-	},
-
-	/**
-	 * Show a success toast with an undo action button.
-	 * @param message - The message to display
-	 * @param onUndo - Callback when "Rückgängig" is clicked
-	 * @param duration - Duration in ms (default: 5000)
-	 */
-	undo(message: string, onUndo: () => void, duration = 5000): string {
-		return this.show(message, 'success', duration, {
-			label: 'Rückgängig',
-			onClick: () => {
-				onUndo();
-				// Find and dismiss this toast after undo
-				const id = toasts.find((t) => t.action?.onClick === onUndo)?.id;
-				if (id) this.dismiss(id);
-			},
-		});
-	},
-
-	/**
-	 * Dismiss a specific toast by ID
-	 * @param id - The toast ID to dismiss
-	 */
-	dismiss(id: string): void {
-		toasts = toasts.filter((t) => t.id !== id);
-	},
-
-	/**
-	 * Dismiss all active toasts
-	 */
-	dismissAll(): void {
-		toasts = [];
-	},
-};
-
-/**
- * Helper function for API error handling
- * Shows an error toast and returns the error message
- *
- * @example
- * ```ts
- * try {
- *   await api.save(data);
- * } catch (error) {
- *   handleApiError(error, 'Could not save data');
- * }
- * ```
- */
-export function handleApiError(
-	error: unknown,
-	fallbackMessage = 'Ein Fehler ist aufgetreten'
-): string {
-	const message = error instanceof Error ? error.message : fallbackMessage;
-	toastStore.error(message);
-	return message;
-}
-
-// Backwards compatible alias
-export const toast = toastStore;
diff --git a/packages/shared-ui/tsconfig.json b/packages/shared-ui/tsconfig.json
index 26f3c4831..c05c7cc81 100644
--- a/packages/shared-ui/tsconfig.json
+++ b/packages/shared-ui/tsconfig.json
@@ -14,6 +14,6 @@
 		"noEmit": true,
 		"types": ["svelte"]
 	},
-	"include": ["src/**/*", "vitest.config.ts"],
+	"include": ["src/**/*"],
 	"exclude": ["node_modules"]
 }
diff --git a/packages/shared-ui/vitest.config.ts b/packages/shared-ui/vitest.config.ts
deleted file mode 100644
index 2ed83cd95..000000000
--- a/packages/shared-ui/vitest.config.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { defineConfig } from 'vitest/config';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
-
-export default defineConfig({
-	plugins: [svelte()],
-	test: {
-		include: ['src/**/*.{test,spec}.{js,ts}'],
-		globals: true,
-		environment: 'jsdom',
-		setupFiles: ['./src/test/setup.ts'],
-		clearMocks: true,
-		mockReset: true,
-		restoreMocks: true,
-		coverage: {
-			provider: 'v8',
-			reporter: ['text', 'lcov', 'json-summary'],
-			reportsDirectory: './coverage',
-			include: ['src/**/*.{ts,svelte}'],
-			exclude: ['src/**/*.{test,spec}.{ts,js}', 'src/**/*.d.ts', 'src/test/**', 'src/**/index.ts'],
-		},
-	},
-	resolve: {
-		conditions: ['browser'],
-	},
-});