feat: dark theme foundation, new header/footer, shared site primitives

Adds dark design tokens, Inter + JetBrains Mono, a header with Notes,
Process, About and a Book a call button, and a footer with the availability
line driven by the tested domain core. Shared primitives live in
src/components/site, site constants in src/content/site.ts. Legacy pages
(blog, legal, contact, tags, technologies) keep a light surface via
LegacyLightSurface. Stub routes for /notes, /process and /book.

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

apps/web/src/components/Footer.tsx

@@ -1,66 +1,71 @@
-import Image from "next/image";
+import Link from "next/link";
 import * as React from "react";
 
-import LogoBlack from "../assets/logo/Logo-Black-Transparent.svg";
+import { AVAILABILITY_CONFIG } from "../content/site";
+import {
+  formatAvailability,
+  resolveAvailability,
+} from "../domain/availability";
+
+const NAV_LINKS = [
+  { href: "/notes", label: "Notes" },
+  { href: "/process", label: "Process" },
+  { href: "/about", label: "About" },
+  { href: "/book", label: "Book a call" },
+] as const;
+
+const LEGAL_LINKS = [
+  { href: "/legal/impressum", label: "Imprint" },
+  { href: "/legal/datenschutz", label: "Privacy" },
+  { href: "/legal/agb", label: "Terms" },
+] as const;
+
+const LINK_CLASS = "text-muted transition-colors hover:text-fg";
 
 export const Footer: React.FC = () => {
-  const currentYear = new Date().getFullYear();
+  const now = new Date();
+  const today = now.toISOString().slice(0, 10);
+  const availability = formatAvailability(
+    resolveAvailability(AVAILABILITY_CONFIG, today),
+  );
 
   return (
-    <footer className="relative py-10 md:py-16 mt-8 md:mt-24 border-t border-slate-100 bg-white z-10">
-      {/* Tech border at top */}
-      <div className="absolute top-0 left-0 right-0 h-px overflow-hidden">
-        <div
-          className="h-full w-full"
-          style={{
-            background:
-              "linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.15) 25%, rgba(191, 206, 228, 0.1) 50%, rgba(148, 163, 184, 0.15) 75%, transparent 100%)",
-          }}
-        />
-      </div>
-
-      <div className="narrow-container">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-end">
-          <div className="space-y-6">
-            <div className="flex items-center gap-3">
-              <Image
-                src={LogoBlack}
-                alt="Marc Mintel"
-                height={64}
-                className="h-12 md:h-16 w-auto"
-              />
-            </div>
-          </div>
-
-          <div className="flex flex-col md:items-end gap-3 md:gap-4 text-xs md:text-sm font-mono text-slate-300 uppercase tracking-widest">
-            <span>© {currentYear}</span>
-            <div className="flex gap-8">
-              <a
-                href="/about"
-                className="hover:text-slate-900 transition-colors duration-300 no-underline"
-              >
-                Über mich
-              </a>
-              <a
-                href="/contact"
-                className="hover:text-slate-900 transition-colors duration-300 no-underline"
-              >
-                Kontakt
-              </a>
-              <a
-                href="https://github.com/marcmintel"
-                className="hover:text-slate-900 transition-colors duration-300 no-underline"
-              >
-                GitHub
-              </a>
-            </div>
-            {/* Subtle binary decoration */}
-            <span
-              className="text-[8px] text-slate-200 tracking-[0.5em] select-none font-mono"
-              aria-hidden="true"
+    <footer className="relative z-10 mt-16 border-t border-border bg-bg py-10 md:mt-24 md:py-14">
+      <div className="mx-auto w-full max-w-6xl px-5 md:px-8">
+        <p className="!mb-8 flex items-center gap-2 font-mono text-sm text-fg">
+          <span aria-hidden="true" className="h-2 w-2 rounded-full bg-accent" />
+          {availability}
+        </p>
+        <div className="flex flex-col gap-8 md:flex-row md:items-end md:justify-between">
+          <div className="space-y-4">
+            <p className="!mb-0 font-mono text-lg font-semibold text-fg">
+              mintel<span className="text-accent">.</span>me
+            </p>
+            <nav
+              aria-label="Footer"
+              className="flex flex-wrap gap-x-6 gap-y-2 text-sm"
             >
-              01001101 01001001 01001110
-            </span>
+              {NAV_LINKS.map((link) => (
+                <Link key={link.href} href={link.href} className={LINK_CLASS}>
+                  {link.label}
+                </Link>
+              ))}
+            </nav>
+          </div>
+          <div className="space-y-4 text-sm md:text-right">
+            <nav
+              aria-label="Legal"
+              className="flex flex-wrap gap-x-6 gap-y-2 md:justify-end"
+            >
+              {LEGAL_LINKS.map((link) => (
+                <Link key={link.href} href={link.href} className={LINK_CLASS}>
+                  {link.label}
+                </Link>
+              ))}
+            </nav>
+            <p className="!mb-0 font-mono text-xs text-faint">
+              © {now.getFullYear()} Marc Mintel
+            </p>
           </div>
         </div>
       </div>