style(design): consistency sweep + UX upgrades

- Palette: gray/zinc/slate/neutral → stein, red → fire, amber → erde,
  sky → himmel, green → wald
- Footer: replaced raw rgb with stein tokens
- Radius: unified to rounded-xs across cards, buttons, inputs, pagination
- Buttons: .btn-primary/.btn-secondary now font-medium; added secondary
- Card hover: -translate-y-0.5 + shadow + wald-300 border
- Header active link: wald border-bottom + wald-700 text
- Mobile nav: bigger touch targets + wald active accent
- Pagination: prev/next text labels + wald-500 active state with
  separated shape/color classes to avoid Tailwind conflicts
- Lead paragraph: scoped .markdown > p:first-child for top-level
  MarkdownBlock only via [data-block-type="markdown"]
- Section dividers: subtle wald-200 gradient between content rows
- Global focus-visible ring (wald-500)
- Inline hex → palette tokens (Badge amber, Tag custom-color contrast)
- Font weights snapped to design system (300/400/500/600/700)
- transition-all → transition-colors where only color changes
- Removed em-dashes from user-visible templates

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/lib/components/Pagination.svelte

@@ -45,32 +45,40 @@
     return Array.from({ length: end - start + 1 }, (_, i) => start + i);
   });
 
-  const paginationLinkClass =
-    " bg-linear-to-b from-stein-50 to-stein-100 rounded-full h-6 w-6 mx-[2px] flex justify-center items-center text-stein-950 no-underline text-xs font-medium border border-stein-200 shadow-md";
+  const baseShape =
+    "rounded-xs h-8 mx-[2px] flex justify-center items-center no-underline text-sm font-medium border transition-colors";
+  const inactiveColors =
+    "text-stein-700 border-stein-200 bg-white hover:bg-stein-50 hover:border-wald-300";
+  const activeColors =
+    "text-white border-wald-500 bg-wald-500 hover:bg-wald-600 hover:border-wald-600 pointer-events-none";
+  const numberShape = "min-w-8 px-2";
+  const navShape = "px-3 gap-1";
 </script>
 
 {#if showPagination}
-  <div class="inline-flex py-4">
-    <div class="flex">
+  <nav class="inline-flex py-4 items-center" aria-label="Seitennavigation">
+    <div class="flex items-center">
       {#if hasPrev}
-        <a href={pageHref(prevPage)} class={paginationLinkClass} aria-label={t(T.pagination_prev)}>
-          <Icon icon="mdi:chevron-left" class="text-xs" aria-hidden="true" />
+        <a href={pageHref(prevPage)} class="{baseShape} {navShape} {inactiveColors}" aria-label={t(T.pagination_prev)}>
+          <Icon icon="mdi:chevron-left" class="size-4" aria-hidden="true" />
+          <span class="hidden sm:inline">{t(T.pagination_prev)}</span>
         </a>
       {/if}
       {#each pageNumbers as num}
         <a
           href={pageHref(num)}
-          class="{paginationLinkClass} {num === currentPage ? 'opacity-50 shadow-none' : ''}"
+          class="{baseShape} {numberShape} {num === currentPage ? activeColors : inactiveColors}"
           aria-current={num === currentPage ? 'page' : undefined}
         >
           {num}
         </a>
       {/each}
       {#if hasNext}
-        <a href={pageHref(nextPage)} class={paginationLinkClass} aria-label={t(T.pagination_next)}>
-          <Icon icon="mdi:chevron-right" class="text-xs" aria-hidden="true" />
+        <a href={pageHref(nextPage)} class="{baseShape} {navShape} {inactiveColors}" aria-label={t(T.pagination_next)}>
+          <span class="hidden sm:inline">{t(T.pagination_next)}</span>
+          <Icon icon="mdi:chevron-right" class="size-4" aria-hidden="true" />
         </a>
       {/if}
     </div>
-  </div>
+  </nav>
 {/if}