Fix invisible Stripe pay button, add brand favicon/OG image, navbar 3x3-System CTA, blog hero crop

- PaymentStep: bg-brand-primary was never a real Tailwind class, leaving
  the "Jetzt bezahlen" button unstyled/invisible; switched to bg-brand
  with dark text, matching every other CTA on the site.
- New app/icon.svg + app/apple-icon.png + app/favicon.ico: brand-yellow
  rounded square with a bold italic "e", replacing the Next.js default.
- New public/og-image.png (logo on the site's cream background) wired in
  as the SEO fallback default OG image/description/title in payload.ts.
- Navbar CTA: "Klarheitskompass" -> "Mein 3x3-System", now links to
  /3x3-system (page not built yet).
- Blog overview hero image anchored to the top instead of center-cropped.

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

app/lib/payload.ts

@@ -964,10 +964,11 @@ export type SeoSettings = {
 // filling in the CompanySettings SEO tab is optional, not a hard
 // dependency for the site to render sensible metadata.
 const SEO_SETTINGS_FALLBACK: SeoSettings = {
-  defaultTitle: "einfach produktiv. – Werkzeuge und Impulse für einen leichteren Alltag",
+  defaultTitle: "einfach produktiv. – Weil du auch noch ein Leben hast",
   titleTemplate: "%s | einfach produktiv.",
-  defaultDescription: "Werkzeuge, Impulse und ein Blog für mehr Klarheit im Alltag.",
-  defaultOgImage: null,
+  defaultDescription:
+    "Kleine Impulse, praktische Werkzeuge und ehrliche Gedanken für mehr Klarheit im Alltag – weil du auch noch ein Leben hast.",
+  defaultOgImage: "/og-image.png",
 };
 
 // Same ISR-cached, public-catalog-freshness fetch as getKleinunternehmer()