feat(docs-site): use the funk wordmark logo instead of "punktfunk" text

Swap the plain "punktfunk" text in the nav and landing hero for the real
brand wordmark from the marketing site. The source asset is a single
light-violet variant (made for dark surfaces), so it's painted as a CSS
mask and coloured per theme — deep-violet on light, light-violet on dark —
to stay legible with the docs' light/dark toggle.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

docs-site/src/components/Wordmark.tsx

@@ -0,0 +1,27 @@
+// The punktfunk "funk" wordmark — the real brand typo from the marketing site.
+// The source asset is a single light-violet variant (made for dark surfaces), so
+// rather than an <img> we paint it as a CSS mask and colour it per theme: the
+// deep-violet brand on light, the light-violet lens highlight on dark (matching
+// the site). Size it by setting a height (e.g. `h-5`); width follows the 579×136
+// aspect ratio.
+const maskStyle = {
+  maskImage: 'url(/funk-wordmark.webp)',
+  WebkitMaskImage: 'url(/funk-wordmark.webp)',
+  maskRepeat: 'no-repeat',
+  WebkitMaskRepeat: 'no-repeat',
+  maskSize: 'contain',
+  WebkitMaskSize: 'contain',
+  maskPosition: 'center',
+  WebkitMaskPosition: 'center',
+} as const
+
+export default function Wordmark({ className = '' }: { className?: string }) {
+  return (
+    <span
+      role="img"
+      aria-label="punktfunk"
+      style={maskStyle}
+      className={`inline-block aspect-[579/136] bg-[var(--pf-brand)] dark:bg-[var(--pf-highlight)] ${className}`}
+    />
+  )
+}