fix: toast notifications no longer overlap bottom nav on mobile

Introduced --nav-bottom-height token (56px scroll + 12px dots indicator = 68px)
so that toast-container bottom and app-content padding-bottom both account for
the full nav-bottom height including the page-dots indicator.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+- Mobile: toast notifications no longer overlap with the bottom navigation bar — introduced `--nav-bottom-height` token (scroll area 56px + dots indicator 12px) used consistently by toast container and app content padding
+
 ### Added
 - Notes: client-side full-text search bar in toolbar — filters by title and content instantly; shows "Keine Treffer" empty state when no match
 - Dashboard: weather widget refresh button (top-right corner) + automatic 30-minute refresh interval; interval is cleared when navigating away

public/styles/layout.css

@@ -95,7 +95,7 @@
  * -------------------------------------------------------- */
 .app-content {
   flex: 1;
-  padding-bottom: calc(var(--nav-height-mobile) + 12px + var(--safe-area-inset-bottom));
+  padding-bottom: calc(var(--nav-bottom-height) + var(--safe-area-inset-bottom));
   overflow-y: auto;
 }
 
@@ -1184,7 +1184,7 @@
  * -------------------------------------------------------- */
 .toast-container {
   position: fixed;
-  bottom: calc(var(--nav-height-mobile) + var(--safe-area-inset-bottom) + var(--space-4));
+  bottom: calc(var(--nav-bottom-height) + var(--safe-area-inset-bottom) + var(--space-4));
   left: 50%;
   transform: translateX(-50%);
   display: flex;

public/styles/tokens.css

@@ -209,6 +209,7 @@
    * 12. Layout
    * -------------------------------------------------------- */
   --nav-height-mobile: 56px;
+  --nav-bottom-height: calc(var(--nav-height-mobile) + 12px); /* scroll (56px) + dots-indicator (12px) */
   --sidebar-width: 56px;             /* collapsed icon-only (1024–1279px) */
   --sidebar-width-expanded: 220px;   /* full sidebar (1280px+), max 240px laut Spec */
   --content-max-width: 1280px;