fix(#95): stack save bar buttons full-width on mobile to prevent text wrap

Long button labels (e.g. German "Speichern & Als überprüft markieren")
require ~515px at text-xs tracking-widest — impossible at 320px inline.

Both save bars (new document + edit document) now use flex-col on mobile
with w-full buttons and flex-row on sm+. Primary actions appear first
(top on mobile, right on desktop). Also fixes hardcoded border-gray-300/
text-gray-600 → border-line/text-ink-2 and bg-brand-navy/text-white →
bg-primary/text-primary-fg in these two components.

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

frontend/src/routes/documents/new/+page.svelte

@@ -120,30 +120,35 @@ $effect(() => {
 
 		<!-- Sticky Save Bar -->
 		<div
-			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
+			class="sticky bottom-0 z-10 -mx-4 border-t border-line bg-surface px-4 py-3 shadow-[0_-2px_8px_rgba(0,0,0,0.06)] sm:px-6 sm:py-4"
 		>
-			<a href="/" class="text-sm font-medium text-ink-2 transition-colors hover:text-ink">
-				{m.btn_cancel()}
-			</a>
-			<div class="flex items-center gap-3">
-				<button
-					type="submit"
-					name="metadataComplete"
-					value="false"
-					formaction="?/save"
-					class="rounded-sm border border-gray-300 px-5 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
+			<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+				<a
+					href="/"
+					class="order-last text-center text-sm font-medium text-ink-2 transition-colors hover:text-ink sm:order-first sm:text-left"
 				>
-					{m.btn_save()}
-				</button>
-				<button
-					type="submit"
-					name="metadataComplete"
-					value="true"
-					formaction="?/saveReviewed"
-					class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
-				>
-					{m.btn_save_and_mark_reviewed()}
-				</button>
+					{m.btn_cancel()}
+				</a>
+				<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
+					<button
+						type="submit"
+						name="metadataComplete"
+						value="false"
+						formaction="?/save"
+						class="w-full rounded-sm border border-line px-5 py-2.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted sm:w-auto sm:py-2"
+					>
+						{m.btn_save()}
+					</button>
+					<button
+						type="submit"
+						name="metadataComplete"
+						value="true"
+						formaction="?/saveReviewed"
+						class="w-full rounded-sm bg-primary px-5 py-2.5 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90 sm:w-auto sm:py-2"
+					>
+						{m.btn_save_and_mark_reviewed()}
+					</button>
+				</div>
 			</div>
 		</div>
 	</form>