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/app.css

@@ -315,13 +315,65 @@ main ol:not(.not-prose) li {
 
 /* Buttons – Wald (Primary) */
 .btn-primary {
-  @apply inline-block no-underline transition-colors duration-200 font-light px-4 py-2 rounded-md shadow-sm bg-btn-bg text-btn-txt;
+  @apply inline-block no-underline transition-colors duration-200 font-medium px-4 py-2 rounded-xs shadow-sm bg-btn-bg text-btn-txt;
 }
 
 .btn-primary:hover {
   @apply bg-btn-hover-bg;
 }
 
+/* Buttons – Stein outline (Secondary) */
+.btn-secondary {
+  @apply inline-block no-underline transition-colors duration-200 font-medium px-4 py-2 rounded-xs border border-stein-300 bg-white text-stein-700 shadow-sm;
+}
+
+.btn-secondary:hover {
+  @apply bg-stein-100 border-stein-400;
+}
+
+/* Globaler Focus-Ring – wald-Akzent für Tastatur-Nutzer (a11y + Polish) */
+*:focus-visible {
+  outline: 2px solid var(--color-wald-500);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Lead-Paragraph: erstes <p> in einem Top-Level MarkdownBlock größer + leichter
+   (Editorial). Bewusst nur via [data-block-type="markdown"] gescopt — sonst
+   würden auch Card-Beschreibungen mit `.markdown` getroffen. */
+[data-block-type="markdown"] .markdown > p:first-child {
+  font-size: 1.25rem;
+  line-height: 1.55;
+  font-weight: 300;
+  color: var(--text-secondary);
+  margin-bottom: 1.25em;
+}
+
+@media (min-width: 768px) {
+  [data-block-type="markdown"] .markdown > p:first-child {
+    font-size: 1.375rem;
+  }
+}
+
+/* Content-Row-Trenner: subtiler wald-Verlauf zwischen content-rows (Forest-Identität) */
+.content-row + .content-row {
+  position: relative;
+  margin-top: 2rem;
+}
+.content-row + .content-row::before {
+  content: "";
+  display: block;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--color-wald-200),
+    transparent
+  );
+  margin: 0 auto 2rem;
+  max-width: 50%;
+}
+
 /* Content-Blöcke */
 .content p {
   @apply mb-4;
@@ -372,7 +424,7 @@ main ol:not(.not-prose) li {
 
 /* Markdown-Bilder: /cms-images-Transform, max-height begrenzt Höhe; Link öffnet Bild in neuem Tab */
 .markdown img {
-  @apply max-w-full w-full my-2 border border-stein-200 rounded-md bg-stein-200 shadow-sm inline-block;
+  @apply max-w-full w-full my-2 border border-stein-200 rounded-xs bg-stein-200 shadow-sm inline-block;
   max-height: 30vh;
 }
 
@@ -423,7 +475,7 @@ main code,
 main pre,
 .content pre,
 .markdown pre {
-  @apply mt-3 mb-4 overflow-x-auto rounded-md border border-stein-200 bg-stein-100 px-4 py-3 text-stein-800 leading-normal;
+  @apply mt-3 mb-4 overflow-x-auto rounded-xs border border-stein-200 bg-stein-100 px-4 py-3 text-stein-800 leading-normal;
 }
 
 main pre code,
@@ -462,9 +514,6 @@ blockquote[data-block-type="quote"] cite {
   font-family: var(--font-secondary);
 }
 
-.content-row + .content-row {
-  margin-top: 1.5rem;
-}
 
 /* Footer */
 footer a,