diff --git a/backend/static/icons/phosphor.svg b/backend/static/icons/phosphor.svg
index 766b8bc..7f2cf85 100644
--- a/backend/static/icons/phosphor.svg
+++ b/backend/static/icons/phosphor.svg
@@ -160,4 +160,10 @@
   <symbol id="star-four" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.94,166.06,26.5,143a16,16,0,0,1,0-30L89.94,89.94,113,26.5a16,16,0,0,1,30,0l23.07,63.44L229.5,113A15.79,15.79,0,0,1,240,128Z"/></symbol>
 
   <symbol id="person-simple-bike" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M136,52a28,28,0,1,1,28,28A28,28,0,0,1,136,52ZM240,176a40,40,0,1,1-40-40A40,40,0,0,1,240,176Zm-16,0a24,24,0,1,0-24,24A24,24,0,0,0,224,176Zm-24-64a8,8,0,0,0-8-8H155.31L125.66,74.34a8,8,0,0,0-11.32,0l-32,32a8,8,0,0,0,0,11.32L120,155.31V200a8,8,0,0,0,16,0V152a8,8,0,0,0-2.34-5.66L99.31,112,120,91.31l26.34,26.35A8,8,0,0,0,152,120h40A8,8,0,0,0,200,112ZM96,176a40,40,0,1,1-40-40A40,40,0,0,1,96,176Zm-16,0a24,24,0,1,0-24,24A24,24,0,0,0,80,176Z"/></symbol>
+
+  <symbol id="spinner-gap" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM48,136a8,8,0,0,1,0-16H72a8,8,0,0,1,0,16Zm46.06,37.25-17,17a8,8,0,0,1-11.32-11.32l17-17a8,8,0,0,1,11.31,11.31Zm0-79.19a8,8,0,0,1-11.31,0l-17-17A8,8,0,0,1,77.09,65.77l17,17A8,8,0,0,1,94.06,94.06ZM136,208a8,8,0,0,1-16,0V184a8,8,0,0,1,16,0Zm0-136a8,8,0,0,1-16,0V48a8,8,0,0,1,16,0Zm54.23,118.23a8,8,0,0,1-11.32,0l-17-17a8,8,0,0,1,11.31-11.31l17,17A8,8,0,0,1,190.23,190.23ZM208,136H184a8,8,0,0,1,0-16h24a8,8,0,0,1,0,16Z"/></symbol>
+
+  <symbol id="warning-circle" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-8,56a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z"/></symbol>
+
+  <symbol id="note" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H156.69A15.92,15.92,0,0,0,168,219.31L219.31,168A15.92,15.92,0,0,0,224,156.69V48A16,16,0,0,0,208,32ZM96,88h64a8,8,0,0,1,0,16H96a8,8,0,0,1,0-16Zm32,80H96a8,8,0,0,1,0-16h32a8,8,0,0,1,0,16ZM96,136a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm64,68.69V160h44.7Z"/></symbol>
 </svg>
\ No newline at end of file
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index 01072e4..1c458d3 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER = '402'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER = '403'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 
 const App = (() => {
 
diff --git a/backend/static/js/pages/notes.js b/backend/static/js/pages/notes.js
index 97247df..afc38f4 100644
--- a/backend/static/js/pages/notes.js
+++ b/backend/static/js/pages/notes.js
@@ -152,7 +152,7 @@ window.Page_notes = (() => {
         <!-- Suche + Sortierung -->
         <div class="notes-toolbar">
           <div class="notes-search-wrap">
-            <i class="ph ph-magnifying-glass notes-search-icon"></i>
+            <svg class="ph-icon notes-search-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
             <input id="notes-search" type="search" class="notes-search-input"
                    placeholder="Suche…" value="${_esc(_searchQ)}">
           </div>
@@ -206,7 +206,7 @@ window.Page_notes = (() => {
         /* Toolbar */
         .notes-toolbar { display: flex; gap: var(--space-2); align-items: center; }
         .notes-search-wrap { position: relative; flex: 1; }
-        .notes-search-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--c-text-muted); font-size: 1rem; pointer-events: none; }
+        .notes-search-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--c-text-muted); width: 16px; height: 16px; pointer-events: none; }
         .notes-search-input { width: 100%; padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 1.3rem); border: 1.5px solid var(--c-border); border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--c-surface); color: var(--c-text); outline: none; box-sizing: border-box; }
         .notes-search-input:focus { border-color: var(--c-primary); }
         .notes-sort-btns { display: flex; border: 1.5px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; }
@@ -233,6 +233,7 @@ window.Page_notes = (() => {
         .notes-action-btn--danger:hover { background: #fef2f2; color: var(--c-danger); border-color: var(--c-danger); }
 
         .notes-list { display: flex; flex-direction: column; gap: var(--space-4); }
+        @keyframes spin { to { transform: rotate(360deg); } }
       </style>
     `;
 
@@ -247,17 +248,17 @@ window.Page_notes = (() => {
       <div class="notes-ki-panel" id="notes-ki-panel">
         <div class="notes-ki-header" id="notes-ki-toggle">
           <div class="notes-ki-header-left">
-            <i class="ph ph-robot"></i>
+            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#robot"></use></svg>
             Muster-Analyse
           </div>
-          <i class="ph ph-caret-down notes-ki-chevron ${_kiOpen ? 'notes-ki-chevron--open' : ''}" id="notes-ki-chevron"></i>
+          <svg class="ph-icon notes-ki-chevron ${_kiOpen ? 'notes-ki-chevron--open' : ''}" id="notes-ki-chevron" aria-hidden="true"><use href="/icons/phosphor.svg#caret-down"></use></svg>
         </div>
         ${_kiOpen ? `
           <div class="notes-ki-body" id="notes-ki-body">
             <button class="notes-ki-btn" id="notes-ki-analyse-btn" ${_kiLoading ? 'disabled' : ''}>
-              ${_kiLoading ? '<i class="ph ph-spinner-gap"></i> Analysiere…' : 'Analysieren'}
+              ${_kiLoading ? '<svg class="ph-icon" aria-hidden="true" style="animation:spin 1s linear infinite"><use href="/icons/phosphor.svg#spinner-gap"></use></svg> Analysiere…' : 'Analysieren'}
             </button>
-            ${_kiError ? `<div class="notes-ki-error"><i class="ph ph-warning-circle"></i> ${_esc(_kiError)}</div>` : ''}
+            ${_kiError ? `<div class="notes-ki-error"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning-circle"></use></svg> ${_esc(_kiError)}</div>` : ''}
             ${_kiSuggestions ? `
               <div class="notes-ki-suggestions">
                 <ul>
@@ -291,7 +292,7 @@ window.Page_notes = (() => {
         <div class="notes-card-top">
           <span class="notes-rubrik-chip"
                 style="background:${rb.color}22;color:${rb.color}">
-            <i class="ph ph-${rb.icon}"></i>
+            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${rb.icon}"></use></svg>
             ${_esc(rb.label)}
           </span>
           ${note.parent_label
@@ -300,10 +301,10 @@ window.Page_notes = (() => {
           }
           <div class="notes-card-actions">
             <button class="notes-action-btn notes-edit-btn" data-id="${note.id}" title="Bearbeiten">
-              <i class="ph ph-pencil"></i>
+              <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#pencil"></use></svg>
             </button>
             <button class="notes-action-btn notes-action-btn--danger notes-delete-btn" data-id="${note.id}" title="Löschen">
-              <i class="ph ph-trash"></i>
+              <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#trash"></use></svg>
             </button>
           </div>
         </div>
@@ -320,9 +321,9 @@ window.Page_notes = (() => {
 
         <!-- Meta: Zeit + Ort -->
         <div class="notes-card-meta">
-          <i class="ph ph-clock"></i>
+          <svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#clock"></use></svg>
           ${_esc(_formatTime(note.updated_at || note.created_at))}
-          ${hasLocation ? `<i class="ph ph-map-pin"></i> ${_esc(note.location_name)}` : ''}
+          ${hasLocation ? `<svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#map-pin"></use></svg> ${_esc(note.location_name)}` : ''}
         </div>
       </div>
     `;
@@ -467,7 +468,7 @@ window.Page_notes = (() => {
           <span style="display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);
                        font-weight:var(--weight-semibold);padding:2px var(--space-2);border-radius:999px;
                        background:${rb.color}22;color:${rb.color}">
-            <i class="ph ph-${rb.icon}"></i> ${_esc(rb.label)}
+            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${rb.icon}"></use></svg> ${_esc(rb.label)}
           </span>
           <h3 style="font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--c-text);margin:0">
             Notiz bearbeiten
diff --git a/backend/static/sw.js b/backend/static/sw.js
index f548621..fb865ed 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v423';
+const CACHE_VERSION = 'by-v424';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten