fix: the unsaved state says so in words instead of a dot

A mark has to be known to be read, so the name now carries "• Not saved"
("Nicht gespeichert") instead of a bare dot with a tooltip. In the ribbon
the label sits beside the name box rather than inside it: that box is
capped at 30% of the strip, which would take the width off the name.

src/App.svelte

@@ -1425,7 +1425,7 @@
           onblur={() => (documentName = documentName.trim())}
         />
         <span class="doc-name-ext">.{documentFormat}</span>
-        {#if dirty}<span class="doc-dirty" title={t().app.unsavedChanges}>•</span>{/if}
+        {#if dirty}<span class="doc-dirty">• {t().app.unsavedChanges}</span>{/if}
         <svg class="doc-name-pencil" width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden="true">
           <path d="M11.3 2.3a1 1 0 0 1 1.4 0l1 1a1 1 0 0 1 0 1.4l-7 7-2.8.9.9-2.8 7-7.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round" stroke-linecap="round"/>
         </svg>
@@ -2086,6 +2086,8 @@
 
   .doc-dirty {
     flex-shrink: 0;
+    white-space: nowrap;
+    font-size: 0.72rem;
     color: var(--color-text-muted);
   }
 

src/lib/components/CLAUDE.md

@@ -214,8 +214,10 @@ size alone makes a short word far too small and a long one overflow the page.
 
 ## The unsaved dot (`App.svelte`, both chromes)
 
-A `•` beside the document name while the document differs from what was last written to a
-file. It is an FNV-1a checksum (`utils/hash.ts`) over the text **and** everything
+A `• Not saved` beside the document name while the document differs from what was last
+written to a file — a label rather than a glyph, since a mark has to be known to be read.
+In the ribbon it sits **beside** the name box, whose 30% cap would otherwise squeeze the
+name itself. It is an FNV-1a checksum (`utils/hash.ts`) over the text **and** everything
 `exportArgs()` hands the exporter beside it — page setup, styles, notes, the zones — plus
 the name the file is saved under, so a margin preset or a rename marks the document as much
 as a keystroke does, and an undo back to the saved state clears the dot again. The page count is left out: it is a layout result, and a font

src/lib/components/ribbon/Ribbon.svelte

@@ -311,8 +311,10 @@
         onblur={() => (documentName = documentName.trim())}
       />
       <span class="doc-name-ext">.{documentFormat}</span>
-      {#if dirty}<span class="doc-dirty" title={t().app.unsavedChanges}>•</span>{/if}
     </div>
+    <!-- Beside the name, not inside it: the name box is capped at 30% of the strip,
+         and the label would take that width off the name itself. -->
+    {#if dirty}<span class="doc-dirty">• {t().app.unsavedChanges}</span>{/if}
 
     <!-- Word puts this chevron in the band's corner. It rides the strip so the band
          keeps its full width: a flex row can only reserve a column, never a corner. -->
@@ -619,7 +621,7 @@
   .doc-name-input:focus { outline: none; border-color: var(--w-accent); color: var(--w-text); }
 
   .doc-name-ext { margin-right: 6px; }
-  .doc-dirty { margin: 0 6px 0 -4px; color: var(--w-text-dim); }
+  .doc-dirty { margin: 0 6px 0 -4px; white-space: nowrap; font-size: 11px; color: var(--w-text-dim); }
 
   .ribbon-body {
     display: flex;

src/lib/i18n/locales/de.ts

@@ -1040,7 +1040,7 @@ const de: Messages = {
     open: 'Öffnen…',
     save: '.odt speichern',
     saveExport: 'Speichern / Exportieren',
-    unsavedChanges: 'Nicht gespeicherte Änderungen',
+    unsavedChanges: 'Nicht gespeichert',
     saveAsFormats: '.odt oder .docx',
     odt: 'ODT',
     openDocument: 'OpenDocument',

src/lib/i18n/locales/en.ts

@@ -1046,7 +1046,7 @@ const en = {
     open: 'Open…',
     save: 'Save .odt',
     saveExport: 'Save / Export',
-    unsavedChanges: 'Unsaved changes',
+    unsavedChanges: 'Not saved',
     saveAsFormats: '.odt or .docx',
     odt: 'ODT',
     openDocument: 'OpenDocument',