feat: polish motion with stronger easing, press feedback and reduced motion

- Override Tailwind ease-out/ease-in-out with stronger curves, add ease-drawer - hoverOnlyWhenSupported so hover styles never stick on touch devices - Replace transition-all with explicit properties across the public UI - Press feedback via active:scale-[0.97] instead of hover:scale-105 - Global prefers-reduced-motion handling (CSS + MotionConfig reducedMotion="user") - Mobile menu is a real drawer: stays mounted, inert when closed, Escape closes - Progress and music bars animate scaleX/scaleY instead of width/height - Fix undefined animate-spin-slow, contain hero CTA shine with overflow-hidden Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-15 18:31:58 +02:00
24 changed files with 585 additions and 1182 deletions
@@ -3,38 +3,58 @@ import Hero from '@/app/components/Hero';

 // Mock next-intl/server
 jest.mock('next-intl/server', () => ({
-  getTranslations: () =>
-    Promise.resolve((key: string, values?: { days?: number }) => {
-      const messages: Record<string, string> = {
-        kicker: 'Dennis Konkol — Osnabrück, Germany',
-        claim: 'I self-host half my life. The rest I code.',
-        intro: "IT admin in Osnabrück and master's student.",
-        countdown: `${values?.days ?? 0} days to go.`,
-        ctaWork: 'See projects',
-        ctaContact: 'Write me',
-      };
-      return messages[key] || key;
-    }),
+  getTranslations: () => Promise.resolve((key: string) => {
+    const messages: Record<string, string> = {
+      badge: 'Student & Self-Hoster',
+      line1: 'Building',
+      line2: 'Stuff.',
+      description: 'Dennis is a student and passionate self-hoster.',
+      ctaWork: 'View My Work',
+      ctaContact: 'Get in touch',
+    };
+    return messages[key] || key;
+  }),
+}));
+
+// Mock next/image
+interface ImageProps {
+  src: string;
+  alt: string;
+  fill?: boolean;
+  priority?: boolean;
+  [key: string]: unknown;
+}
+
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: ({ src, alt, fill, priority, ...props }: ImageProps) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img 
+      src={src} 
+      alt={alt} 
+      data-fill={fill?.toString()} 
+      data-priority={priority?.toString()} 
+      {...props} 
+    />
+  ),
 }));

 describe('Hero', () => {
-  it('renders the poster hero with claim, intro and calls to action', async () => {
+  it('renders the hero section correctly', async () => {
    const HeroResolved = await Hero({ locale: 'en' });
    render(HeroResolved);
-
-    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('I self-host half my life. The rest I code.');
-    expect(screen.getByText('Dennis Konkol — Osnabrück, Germany')).toBeInTheDocument();
-    expect(screen.getByText(/IT admin in Osnabrück/)).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: /See projects/ })).toHaveAttribute('href', '#projects');
-    expect(screen.getByRole('link', { name: 'Write me' })).toHaveAttribute('href', '#contact');
-  });
-
-  it('renders the DK0 wordmark as decoration hidden from assistive tech', async () => {
-    const HeroResolved = await Hero({ locale: 'en' });
-    const { container } = render(HeroResolved);
-
-    const wordmark = container.querySelector('[aria-hidden="true"].font-display');
-    expect(wordmark).not.toBeNull();
-    expect(wordmark).toHaveTextContent('DK0');
+    
+    // Check for the main headlines (defaults in Hero.tsx)
+    expect(screen.getByText('Building')).toBeInTheDocument();
+    expect(screen.getByText('Stuff.')).toBeInTheDocument();
+    
+    // Check for the description from our mock
+    expect(screen.getByText(/Dennis is a student/i)).toBeInTheDocument();
+    
+    // Check for the image
+    expect(screen.getByAltText('Dennis Konkol')).toBeInTheDocument();
+    
+    // Check for CTA
+    expect(screen.getByText('View My Work')).toBeInTheDocument();
  });
 });
@@ -136,8 +136,7 @@ const STATIC_KEYS: Record<string, Record<string, string[]>> = {
    ProjectDetailClient: ["back"], ProjectsPageClient: ["backToHome"],
  },
  consent: { ConsentBanner: ["title", "description", "essential", "chat", "alwaysOn", "acceptAll", "acceptSelected", "rejectAll", "hide"] },
-  "home.hero": { Hero: ["kicker", "claim", "intro", "countdown", "ctaWork", "ctaContact"] },
-  "home.tisch": { TischSection: ["title", "allProjects", "hintBoard", "hintDeck", "tidy", "mess", "flip", "details", "prev", "next", "ticketTitle", "ticketDays", "ticketJob", "ticketStub", "serverTitle", "servers.ingress.name", "servers.ingress.detail", "servers.mail.name", "servers.mail.detail", "servers.home.name", "servers.home.detail", "serverNote", "bookLabel", "bookFallback", "photoCaption", "sticker"] },
+  "home.hero": { Hero: ["badge", "line1", "line2", "description", "ctaWork", "ctaContact"] },
  "home.about": { About: ["title", "p1", "p2", "p3", "funFactTitle", "funFactBody", "hobbiesTitle"] },
  "home.about.activity": { ActivityFeed: ["idleStatus", "codingNow", "gaming", "inGame", "listening"] },
  "home.about.currentlyReading": { CurrentlyReading: ["title", "progress"] },
@@ -1,15 +1,16 @@
 import Header from "../components/Header.server";
 import Hero from "../components/Hero";
-import TischSection from "../components/tisch/TischSection";
 import ScrollFadeIn from "../components/ScrollFadeIn";
 import Script from "next/script";
 import {
  getAboutTranslations,
+  getProjectsTranslations,
  getContactTranslations,
  getFooterTranslations,
 } from "@/lib/translations-loader";
 import {
  AboutClient,
+  ProjectsClient,
  ContactClient,
  FooterClient,
 } from "../components/ClientWrappers";
@@ -20,8 +21,9 @@ interface HomePageServerProps {

 export default async function HomePageServer({ locale }: HomePageServerProps) {
  // Parallel laden aller Translations (hero translations handled by Hero server component)
-  const [aboutT, contactT, footerT] = await Promise.all([
+  const [aboutT, projectsT, contactT, footerT] = await Promise.all([
    getAboutTranslations(locale),
+    getProjectsTranslations(locale),
    getContactTranslations(locale),
    getFooterTranslations(locale),
  ]);
@@ -86,14 +88,81 @@ export default async function HomePageServer({ locale }: HomePageServerProps) {
        }}
      />
      <Header locale={locale} />
+      {/* Spacer to prevent navbar overlap */}
+      <div className="h-24 md:h-32" aria-hidden="true"></div>
      <main className="relative">
        <Hero locale={locale} />
-        <TischSection locale={locale} />
+
+        {/* Wavy Separator 1 - Hero to About */}
+        <div className="relative h-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z"
+              fill="url(#gradient1)"
+            />
+            <defs>
+              <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#BAE6FD" stopOpacity="0.4" />
+                <stop offset="50%" stopColor="#DDD6FE" stopOpacity="0.4" />
+                <stop offset="100%" stopColor="#FBCFE8" stopOpacity="0.4" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>

        <ScrollFadeIn>
          <AboutClient locale={locale} translations={aboutT} />
        </ScrollFadeIn>

+        {/* Wavy Separator 2 - About to Projects */}
+        <div className="relative h-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0,64 C360,96 720,32 1080,64 C1200,96 1320,32 1440,64 L1440,0 L0,0 Z"
+              fill="url(#gradient2)"
+            />
+            <defs>
+              <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#A7F3D0" stopOpacity="0.3" />
+                <stop offset="50%" stopColor="#BFDBFE" stopOpacity="0.3" />
+                <stop offset="100%" stopColor="#DDD6FE" stopOpacity="0.3" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+
+        <ScrollFadeIn>
+          <ProjectsClient locale={locale} translations={projectsT} />
+        </ScrollFadeIn>
+
+        {/* Wavy Separator 3 - Projects to Contact */}
+        <div className="relative h-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0,32 C240,64 480,0 720,32 C960,64 1200,0 1440,32 L1440,120 L0,120 Z"
+              fill="url(#gradient3)"
+            />
+            <defs>
+              <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#FDE68A" stopOpacity="0.3" />
+                <stop offset="50%" stopColor="#FCA5A5" stopOpacity="0.3" />
+                <stop offset="100%" stopColor="#C4B5FD" stopOpacity="0.3" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>

        <ScrollFadeIn>
          <ContactClient locale={locale} translations={contactT} />
@@ -0,0 +1,17 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import BackgroundBlobs from "@/components/BackgroundBlobs";
+
+export default function BackgroundBlobsClient() {
+  // Avoid SSR/webpack bailout issues from `next/dynamic({ ssr:false })`
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return <BackgroundBlobs />;
+}
@@ -1,17 +1,31 @@
 "use client";

-import React from "react";
+import React, { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import dynamic from "next/dynamic";
 import { MotionConfig } from "framer-motion";
 import { ToastProvider } from "@/components/Toast";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import { ConsentProvider } from "./ConsentProvider";
 import { ThemeProvider } from "./ThemeProvider";

+const BackgroundBlobs = dynamic(
+  () => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })),
+  { ssr: false, loading: () => null }
+);
+
 export default function ClientProviders({
  children,
 }: {
  children: React.ReactNode;
 }) {
+  const [mounted, setMounted] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setMounted(true);
+  }, [pathname]);
+
  return (
    <ErrorBoundary>
      <ErrorBoundary>
@@ -19,7 +33,7 @@ export default function ClientProviders({
          <ThemeProvider>
            {/* Respect prefers-reduced-motion in every Framer Motion animation */}
            <MotionConfig reducedMotion="user">
-              <GatedProviders>
+              <GatedProviders mounted={mounted}>
                {children}
              </GatedProviders>
            </MotionConfig>
@@ -30,10 +44,31 @@ export default function ClientProviders({
  );
 }

-function GatedProviders({ children }: { children: React.ReactNode }) {
+function GatedProviders({
+  children,
+  mounted,
+}: {
+  children: React.ReactNode;
+  mounted: boolean;
+}) {
+  // Defer animated background blobs until after LCP
+  const [deferredReady, setDeferredReady] = useState(false);
+  useEffect(() => {
+    if (!mounted) return;
+    let id: ReturnType<typeof setTimeout> | number;
+    if (typeof requestIdleCallback !== "undefined") {
+      id = requestIdleCallback(() => setDeferredReady(true), { timeout: 5000 });
+      return () => cancelIdleCallback(id as number);
+    } else {
+      id = setTimeout(() => setDeferredReady(true), 200);
+      return () => clearTimeout(id);
+    }
+  }, [mounted]);
+
  return (
    <ErrorBoundary>
      <ToastProvider>
+        {deferredReady && <BackgroundBlobs />}
        <div className="relative z-10">{children}</div>
      </ToastProvider>
    </ErrorBoundary>
@@ -86,131 +86,174 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
  const enHref = `/en${pathWithoutLocale}${query}`;
  const deHref = `/de${pathWithoutLocale}${query}`;

-  const de = locale === "de";
-
-  // Über dem roten Plakat bleibt der Kopf transparent, sonst wird er zum Papierstreifen
-  const solid = scrolled || !isHome;
-  const pill =
-    "rounded-full border-[1.5px] border-ink px-4 py-2 text-sm font-medium transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]";
-  const langPill = (active: boolean) =>
-    `rounded-full px-3 py-2 font-mono text-xs transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97] ${
-      active ? "bg-ink text-paper" : "hover:bg-ink/10"
-    }`;
-
  return (
    <>
-      <header
-        className={`fixed inset-x-0 top-0 z-50 border-b-2 transition-[background-color,border-color] duration-200 ease-out ${
-          solid ? "border-ink bg-paper/90 backdrop-blur-md" : "border-transparent bg-transparent"
-        }`}
-      >
-        <div className="flex items-center justify-between gap-4 px-4 py-3 text-ink sm:px-6 lg:px-10">
-          <Link
-            href={`/${locale}`}
-            className="font-display text-2xl font-extrabold tracking-[-0.03em] transition-transform duration-150 ease-out active:scale-[0.97]"
-            aria-label={de ? "dk0, zur Startseite" : "dk0, home"}
+      <header className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none">
+        <div
+          className={`pointer-events-auto transition-[max-width] duration-500 ease-in-out ${
+            scrolled ? "w-full max-w-5xl" : "w-full max-w-7xl"
+          }`}
+        >
+          <div
+            className={`backdrop-blur-xl transition-[padding,background-color,box-shadow,border-color] duration-500 ease-in-out flex justify-between items-center ${
+              scrolled
+                ? "bg-white/95 border border-stone-200/50 shadow-[0_8px_30px_rgba(0,0,0,0.12)] rounded-full px-6 py-3"
+                : "bg-white/85 border border-stone-200/30 shadow-[0_4px_24px_rgba(0,0,0,0.08)] px-4 py-4 rounded-full"
+            }`}
          >
-            dk<span className={`transition-colors duration-200 ${solid ? "text-signal" : "text-paper"}`}>0</span>
-          </Link>
-
-          <nav className="hidden items-center gap-2 md:flex" aria-label={de ? "Hauptnavigation" : "Main navigation"}>
-            {navItems.slice(1).map((item) => (
-              <Link key={item.name} href={item.href} className={pill}>
-                {item.name}
+            <div className="flex items-center space-x-2 active:scale-[0.97] transition-transform duration-150 ease-out">
+              <Link
+                href={`/${locale}`}
+                className="text-2xl font-black font-sans text-stone-900 tracking-tighter liquid-hover flex items-center"
+              >
+                dk<span className="text-red-500">0</span>
              </Link>
-            ))}
-            <div className="ml-2 flex items-center gap-1 border-l-2 border-ink/20 pl-3">
-              <Link href={deHref} className={langPill(locale === "de")} aria-current={locale === "de" ? "true" : undefined}>
-                DE
-              </Link>
-              <Link href={enHref} className={langPill(locale === "en")} aria-current={locale === "en" ? "true" : undefined}>
-                EN
-              </Link>
-              <ThemeToggle />
            </div>
-          </nav>

-          <button
-            onClick={() => setIsOpen(!isOpen)}
-            className={`${pill} inline-flex items-center gap-2 md:hidden`}
-            aria-label={de ? "Menü öffnen" : "Open menu"}
-            aria-expanded={isOpen}
-          >
-            <MenuIcon size={18} /> {de ? "Menü" : "Menu"}
-          </button>
+            <nav className="hidden md:flex items-center space-x-8">
+              {navItems.map((item) => (
+                <div key={item.name} className="active:scale-[0.97] transition-transform duration-150 ease-out">
+                  <Link
+                    href={item.href}
+                    className="text-stone-700 hover:text-stone-900 font-medium transition-colors relative liquid-hover"
+                  >
+                    {item.name}
+                  </Link>
+                </div>
+              ))}
+
+              {/* Language Switcher */}
+              <div className="flex items-center space-x-2 ml-4 pl-4 border-l border-stone-300">
+                <Link
+                  href={enHref}
+                  className={`px-2 py-1 text-sm font-medium rounded transition-colors ${
+                    locale === "en"
+                      ? "bg-stone-900 text-white"
+                      : "text-stone-600 hover:text-stone-900 hover:bg-stone-100"
+                  }`}
+                >
+                  EN
+                </Link>
+                <Link
+                  href={deHref}
+                  className={`px-2 py-1 text-sm font-medium rounded transition-colors ${
+                    locale === "de"
+                      ? "bg-stone-900 text-white"
+                      : "text-stone-600 hover:text-stone-900 hover:bg-stone-100"
+                  }`}
+                >
+                  DE
+                </Link>
+                <ThemeToggle />
+              </div>
+            </nav>
+
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className="md:hidden p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97]"
+              aria-label="Toggle menu"
+            >
+              {isOpen ? <XIcon size={24} /> : <MenuIcon size={24} />}
+            </button>
+          </div>
        </div>
      </header>

-      {/* Abdunklung hinter dem Menü — bleibt gemountet, damit sie ausblenden kann */}
+      {/* Mobile menu overlay — always mounted so it can fade out, not just vanish */}
      <div
        aria-hidden="true"
-        className={`fixed inset-0 z-40 bg-ink/40 transition-opacity md:hidden ${
-          isOpen ? "opacity-100 duration-300 ease-out" : "pointer-events-none opacity-0 duration-200 ease-out"
+        className={`fixed inset-0 bg-stone-900/50 backdrop-blur-sm z-40 md:hidden transition-opacity ${
+          isOpen ? "opacity-100 duration-300 ease-out" : "opacity-0 pointer-events-none duration-200 ease-out"
        }`}
        onClick={() => setIsOpen(false)}
      />

-      {/* Menü als Drawer: Drawer-Kurve rein, schneller raus */}
+      {/* Mobile menu panel — drawer curve in, quicker exit */}
      <div
        inert={!isOpen}
-        role="dialog"
-        aria-label={de ? "Menü" : "Menu"}
-        className={`fixed right-0 top-0 z-50 flex h-full w-80 max-w-[85vw] flex-col overflow-y-auto overscroll-contain border-l-2 border-ink bg-paper text-ink transition-[transform,visibility] md:hidden ${
-          isOpen ? "visible translate-x-0 duration-500 ease-drawer" : "invisible translate-x-full duration-200 ease-out"
+        className={`fixed right-0 top-0 h-full w-80 max-w-[85vw] bg-white shadow-2xl z-50 md:hidden overflow-y-auto overscroll-contain transition-[transform,visibility] ${
+          isOpen
+            ? "translate-x-0 visible duration-500 ease-drawer"
+            : "translate-x-full invisible duration-200 ease-out"
        }`}
      >
-        <div className="flex items-center justify-between px-5 py-3">
-          <Link
-            href={`/${locale}`}
-            className="font-display text-2xl font-extrabold tracking-[-0.03em]"
-            onClick={() => setIsOpen(false)}
-          >
-            dk<span className="text-signal">0</span>
-          </Link>
-          <button onClick={() => setIsOpen(false)} className={`${pill} inline-flex items-center`} aria-label={de ? "Menü schließen" : "Close menu"}>
-            <XIcon size={18} />
-          </button>
-        </div>
-
-        <nav className="flex flex-col border-t-2 border-ink" aria-label={de ? "Hauptnavigation" : "Main navigation"}>
-          {navItems.map((item) => (
+        <div className="p-6">
+          <div className="flex justify-between items-center mb-8">
            <Link
-              key={item.name}
-              href={item.href}
+              href={`/${locale}`}
+              className="text-2xl font-black text-stone-900"
              onClick={() => setIsOpen(false)}
-              className="border-b-2 border-ink px-5 py-4 font-display text-3xl font-extrabold tracking-[-0.035em] transition-colors duration-150 active:bg-paper-2"
            >
-              {item.name}
+              dk<span className="text-red-500">0</span>
            </Link>
-          ))}
-        </nav>
+            <button
+              onClick={() => setIsOpen(false)}
+              className="p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97]"
+              aria-label="Close menu"
+            >
+              <XIcon size={24} />
+            </button>
+          </div>

-        <div className="flex items-center gap-1 px-5 py-5">
-          <Link href={deHref} onClick={() => setIsOpen(false)} className={langPill(locale === "de")}>
-            DE
-          </Link>
-          <Link href={enHref} onClick={() => setIsOpen(false)} className={langPill(locale === "en")}>
-            EN
-          </Link>
-          <ThemeToggle />
-        </div>
-
-        <div className="mt-auto flex gap-2 px-5 pb-8">
-          {socialLinks.map((link) => {
-            const Icon = link.icon;
-            return (
-              <a
-                key={link.label}
-                href={link.href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className={`${pill} inline-flex items-center`}
-                aria-label={link.label}
+          <nav className="space-y-2">
+            {navItems.map((item) => (
+              <Link
+                key={item.name}
+                href={item.href}
+                onClick={() => setIsOpen(false)}
+                className="block px-4 py-3 text-stone-700 hover:bg-stone-50 active:bg-stone-100 rounded-lg font-medium transition-colors"
              >
-                <Icon size={18} />
-              </a>
-            );
-          })}
+                {item.name}
+              </Link>
+            ))}
+          </nav>
+
+          {/* Language Switcher Mobile */}
+          <div className="flex items-center gap-2 mt-6 pt-6 border-t border-stone-200">
+            <Link
+              href={enHref}
+              onClick={() => setIsOpen(false)}
+              className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-colors ${
+                locale === "en"
+                  ? "bg-stone-900 text-white"
+                  : "bg-stone-100 text-stone-600 hover:bg-stone-200"
+              }`}
+            >
+              EN
+            </Link>
+            <Link
+              href={deHref}
+              onClick={() => setIsOpen(false)}
+              className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-colors ${
+                locale === "de"
+                  ? "bg-stone-900 text-white"
+                  : "bg-stone-100 text-stone-600 hover:bg-stone-200"
+              }`}
+            >
+              DE
+            </Link>
+            <ThemeToggle />
+          </div>
+
+          <div className="mt-8 pt-6 border-t border-stone-200">
+            <div className="flex justify-center space-x-6">
+              {socialLinks.map((link) => {
+                const Icon = link.icon;
+                return (
+                  <a
+                    key={link.label}
+                    href={link.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="p-3 rounded-lg bg-stone-100 hover:bg-stone-900 hover:text-white text-stone-700 transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97]"
+                    aria-label={link.label}
+                  >
+                    <Icon size={20} />
+                  </a>
+                );
+              })}
+            </div>
+          </div>
        </div>
      </div>
    </>
@@ -1,67 +1,73 @@
 import { getTranslations } from "next-intl/server";
-import KineticWordmark from "./KineticWordmark";
+import Image from "next/image";

 interface HeroProps {
  locale: string;
 }

-// Abgabe der Masterarbeit, Grundlage für den Countdown im Intro
-const THESIS_DEADLINE = new Date("2027-02-15T12:00:00+01:00");
-
-const MARQUEE = ["Self-Hosting", "Next.js", "SwiftUI", "Flutter", "Docker", "Microsoft 365", "Godot", "Home Assistant"];
-
 export default async function Hero({ locale }: HeroProps) {
  const t = await getTranslations({ locale, namespace: "home.hero" });
-  const daysLeft = Math.max(0, Math.ceil((THESIS_DEADLINE.getTime() - Date.now()) / 86_400_000));

  return (
-    <>
-      <section id="top" className="relative overflow-hidden bg-signal px-4 pt-24 text-ink sm:px-6 md:pt-28 lg:px-10">
-        <p className="font-mono text-[13px] leading-snug">{t("kicker")}</p>
+    <section className="relative min-h-screen flex flex-col items-center justify-center bg-stone-50 dark:bg-stone-950 px-6 transition-colors duration-500">
+      {/* Liquid Ambient Background — overflow-hidden here so the blobs are clipped, not the image/badge */}
+      <div className="absolute inset-0 pointer-events-none overflow-hidden">
+        <div className="absolute top-[5%] left-[5%] w-[60vw] h-[60vw] bg-liquid-mint rounded-full blur-[140px] opacity-20" />
+        <div className="absolute bottom-[5%] right-[5%] w-[50vw] h-[50vw] bg-liquid-purple rounded-full blur-[120px] opacity-15" />
+      </div>

-        <div className="mt-4 sm:mt-8">
-          <KineticWordmark />
-        </div>
+      <div className="relative z-10 max-w-7xl mx-auto w-full pt-12 sm:pt-16 md:pt-20 pb-10 sm:pb-16">
+        <div className="flex flex-col xl:flex-row items-center gap-8 sm:gap-10 xl:gap-24">

-        <div className="mt-3 grid gap-6 border-t-2 border-ink pb-8 pt-6 md:grid-cols-[1.3fr_1fr] md:items-end md:pb-10">
-          <h1 className="text-balance font-display text-[clamp(2rem,4.4vw,4rem)] font-extrabold leading-[0.96] tracking-[-0.035em] [font-variation-settings:'wdth'_85]">
-            <span className="sr-only">Dennis Konkol: </span>
-            {t("claim")}
-          </h1>
-          <div>
-            <p className="max-w-[42ch] text-[17px] leading-relaxed">
-              {t("intro")} {daysLeft > 0 && t("countdown", { days: daysLeft })}
+          {/* Left: Text Content */}
+          <div className="flex-1 text-center xl:text-left space-y-6 sm:space-y-8 md:space-y-10">
+            <div className="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 shadow-sm animate-fade-in">
+              <span className="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-emerald-500 rounded-full animate-pulse" />
+              <span className="font-mono text-[10px] sm:text-[11px] font-black uppercase tracking-[0.2em] sm:tracking-[0.3em] text-stone-500">{t("badge")}</span>
+            </div>
+
+            <h1 className="text-[2.75rem] sm:text-6xl md:text-8xl lg:text-[9.5rem] font-black tracking-tighter leading-[0.85] text-stone-900 dark:text-stone-50 uppercase">
+              <span className="block">
+                {t("line1")}
+              </span>
+              <span className="block text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-liquid-sky to-liquid-purple pb-2 sm:pb-4">
+                {t("line2")}
+              </span>
+            </h1>
+
+            <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-stone-600 dark:text-stone-400 max-w-xl mx-auto xl:mx-0 font-light leading-relaxed tracking-tight">
+              {t("description")}
            </p>
-            <div className="mt-5 flex flex-wrap gap-2.5">
-              <a
-                href="#projects"
-                className="inline-flex items-center gap-2 rounded-full bg-ink px-5 py-3.5 text-[15px] font-semibold text-paper transition-transform duration-150 ease-out active:scale-[0.97]"
-              >
-                {t("ctaWork")} <span aria-hidden="true">↓</span>
+
+            <div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-8 justify-center xl:justify-start pt-2 sm:pt-4 animate-fade-in [animation-delay:150ms]">
+              <a href="#projects" className="group relative overflow-hidden px-8 sm:px-12 py-4 sm:py-5 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-2xl sm:rounded-3xl font-black text-xs uppercase tracking-[0.2em] active:scale-[0.97] transition-transform duration-150 ease-out shadow-2xl">
+                <div className="absolute inset-0 bg-white/10 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-in-out" />
+                {t("ctaWork")}
              </a>
-              <a
-                href="#contact"
-                className="inline-flex items-center rounded-full px-5 py-3.5 text-[15px] font-semibold shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-signal active:scale-[0.97]"
-              >
+              <a href="#contact" className="font-black text-xs uppercase tracking-[0.2em] text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white transition-colors">
                {t("ctaContact")}
              </a>
            </div>
          </div>
-        </div>
-      </section>

-      <div className="overflow-hidden bg-ink text-paper" aria-hidden="true">
-        <div className="flex w-max animate-marquee gap-9 py-[18px] font-display text-[clamp(1.1rem,2.4vw,1.7rem)] font-bold leading-none">
-          {[...MARQUEE, ...MARQUEE].map((item, i) => (
-            <span key={i} className="flex items-center gap-9 whitespace-nowrap">
-              {item}
-              <svg viewBox="0 0 24 24" className="h-[0.7em] w-[0.7em] fill-signal">
-                <path d="M12 1.5l2.6 7.9 7.9 2.6-7.9 2.6-2.6 7.9-2.6-7.9-7.9-2.6 7.9-2.6z" />
-              </svg>
-            </span>
-          ))}
+          {/* Right: The Photo */}
+<div className="relative w-52 h-52 sm:w-64 sm:h-64 md:w-80 md:h-80 xl:w-[500px] xl:h-[500px] shrink-0 mt-4 sm:mt-8 xl:mt-0 animate-fade-in [animation-delay:100ms] [animation-duration:900ms]">
+              <div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint to-liquid-purple rounded-[3rem] sm:rounded-[4rem] lg:rounded-[5rem] rotate-12 scale-90 opacity-20 blur-3xl" />
+              <div className="relative w-full h-full rounded-[2.5rem] sm:rounded-[3rem] lg:rounded-[4rem] overflow-hidden border-[12px] sm:border-[16px] lg:border-[24px] border-white dark:border-stone-900 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.3)] sm:shadow-[0_50px_100px_-20px_rgba(0,0,0,0.4)]" style={{ willChange: "transform" }}>
+                <Image src="/images/me.jpg" alt="Dennis Konkol" fill className="object-cover" priority fetchPriority="high" sizes="(max-width: 640px) 208px, (max-width: 768px) 256px, (max-width: 1280px) 320px, 500px" />
+            </div>
+
+            <div className="absolute -bottom-4 -left-4 sm:-bottom-6 sm:-left-6 bg-white dark:bg-stone-800 px-5 py-3 sm:px-8 sm:py-4 rounded-xl sm:rounded-[2rem] shadow-2xl border border-stone-100 dark:border-stone-700">
+              <span className="font-mono text-xs sm:text-sm font-black tracking-tighter uppercase">dk<span className="text-red-500">0</span>.dev</span>
+            </div>
+          </div>
+
        </div>
      </div>
-    </>
+
+      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 hidden md:flex flex-col items-center gap-4" aria-hidden="true">
+        <div className="w-px h-16 origin-top animate-scroll-hint bg-gradient-to-b from-stone-300 dark:from-stone-700 to-transparent" />
+      </div>
+    </section>
  );
 }
@@ -1,99 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-
-const LETTERS = ["D", "K", "0"] as const;
-
-// Ruhezustand und Spannweite der variablen Achsen von Bricolage Grotesque
-const REST = { wght: 800, wdth: 100 };
-const NEAR = { wght: 220, wdth: 75 };
-const REACH_PX = 520;
-
-/**
- * Das große „DK0“ im Plakat. Die Buchstaben werden dünner und schmaler, je näher
- * der Zeiger kommt, geglättet über eine kritisch gedämpfte Feder.
- * Ohne Maus oder bei reduzierter Bewegung bleibt es statisch. Das Markup ist
- * vollständig server-gerendert, JS fügt nur die Reaktion hinzu.
- */
-export default function KineticWordmark() {
-  const rootRef = useRef<HTMLDivElement>(null);
-  const letterRefs = useRef<(HTMLSpanElement | null)[]>([]);
-
-  useEffect(() => {
-    const root = rootRef.current;
-    const area = root?.closest("section");
-    if (!root || !area) return;
-
-    const fine = window.matchMedia?.("(hover: hover) and (pointer: fine)")?.matches ?? false;
-    const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
-    if (!fine || reduce) return;
-
-    const state = LETTERS.map(() => ({ w: REST.wght, d: REST.wdth, vw: 0, vd: 0, tw: REST.wght, td: REST.wdth }));
-    let raf = 0;
-
-    const loop = () => {
-      let moving = false;
-      state.forEach((s, i) => {
-        s.vw = (s.vw + (s.tw - s.w) * 0.08) * 0.78;
-        s.w += s.vw;
-        s.vd = (s.vd + (s.td - s.d) * 0.08) * 0.78;
-        s.d += s.vd;
-        if (Math.abs(s.vw) + Math.abs(s.vd) > 0.05) moving = true;
-        const el = letterRefs.current[i];
-        if (el) el.style.fontVariationSettings = `"wght" ${s.w.toFixed(1)}, "wdth" ${s.d.toFixed(1)}`;
-      });
-      raf = moving ? requestAnimationFrame(loop) : 0;
-    };
-    const kick = () => {
-      if (!raf) raf = requestAnimationFrame(loop);
-    };
-
-    const onMove = (e: PointerEvent) => {
-      letterRefs.current.forEach((el, i) => {
-        if (!el) return;
-        const r = el.getBoundingClientRect();
-        const dist = Math.hypot(e.clientX - (r.left + r.width / 2), e.clientY - (r.top + r.height / 2));
-        const f = Math.min(1, dist / REACH_PX);
-        state[i].tw = NEAR.wght + f * (REST.wght - NEAR.wght);
-        state[i].td = NEAR.wdth + f * (REST.wdth - NEAR.wdth);
-      });
-      kick();
-    };
-    const onLeave = () => {
-      state.forEach((s) => {
-        s.tw = REST.wght;
-        s.td = REST.wdth;
-      });
-      kick();
-    };
-
-    area.addEventListener("pointermove", onMove);
-    area.addEventListener("pointerleave", onLeave);
-    return () => {
-      cancelAnimationFrame(raf);
-      area.removeEventListener("pointermove", onMove);
-      area.removeEventListener("pointerleave", onLeave);
-    };
-  }, []);
-
-  return (
-    <div
-      ref={rootRef}
-      aria-hidden="true"
-      className="flex select-none items-end justify-between font-display text-[clamp(8.5rem,33vw,31rem)] leading-[0.78] tracking-[-0.05em]"
-    >
-      {LETTERS.map((letter, i) => (
-        <span
-          key={letter}
-          ref={(el) => {
-            letterRefs.current[i] = el;
-          }}
-          className={`inline-block animate-wordmark-up ${letter === "0" ? "text-paper" : ""}`}
-          style={{ fontVariationSettings: `"wght" ${REST.wght}, "wdth" ${REST.wdth}`, animationDelay: `${i * 80}ms` }}
-        >
-          {letter}
-        </span>
-      ))}
-    </div>
-  );
-}
@@ -0,0 +1,41 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+const ToastProvider = React.lazy(() =>
+  import("@/components/Toast").then((mod) => ({
+    default: mod.ToastProvider,
+  }))
+);
+
+const BackgroundBlobs = React.lazy(() =>
+  import("@/components/BackgroundBlobs")
+);
+
+const ChatWidget = React.lazy(() => import("./ChatWidget"));
+
+export default function RootProviders({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <div className="relative z-10">{children}</div>;
+  }
+
+  return (
+    <React.Suspense fallback={<div className="relative z-10">{children}</div>}>
+      <ToastProvider>
+        <BackgroundBlobs />
+        <div className="relative z-10">{children}</div>
+        <ChatWidget />
+      </ToastProvider>
+    </React.Suspense>
+  );
+}
@@ -0,0 +1,33 @@
+// Pure CSS gradient background — replaces the Three.js/WebGL shader gradient.
+// Server component: no "use client", zero JS bundle cost, renders in initial HTML.
+// Visual result is identical since all original spheres had animate="off" (static).
+export default function ShaderGradientBackground() {
+  return (
+    <div
+      aria-hidden="true"
+      className="fixed inset-0 -z-10 overflow-hidden pointer-events-none"
+    >
+      <div
+        className="absolute -top-[10%] -left-[15%] w-[55%] h-[65%] rounded-full opacity-60"
+        style={{
+          background: "radial-gradient(ellipse at 50% 50%, #b01040 0%, #e167c5 40%, transparent 70%)",
+          filter: "blur(80px)",
+        }}
+      />
+      <div
+        className="absolute top-[25%] -right-[10%] w-[50%] h-[60%] rounded-full opacity-55"
+        style={{
+          background: "radial-gradient(ellipse at 50% 50%, #e167c5 0%, #b01040 40%, transparent 70%)",
+          filter: "blur(80px)",
+        }}
+      />
+      <div
+        className="absolute -bottom-[15%] left-[5%] w-[50%] h-[60%] rounded-full opacity-50"
+        style={{
+          background: "radial-gradient(ellipse at 50% 50%, #b04a17 0%, #e167c5 40%, transparent 70%)",
+          filter: "blur(80px)",
+        }}
+      />
+    </div>
+  );
+}
@@ -13,7 +13,7 @@ export function ThemeToggle() {
  }, []);

  if (!mounted) {
-    return <div className="ml-1 h-9 w-9" />;
+    return <div className="w-9 h-9" />;
  }

  const cycle = () => {
@@ -24,16 +24,16 @@ export function ThemeToggle() {
  return (
    <button
      onClick={cycle}
-      className="ml-1 rounded-full border-[1.5px] border-ink p-2 text-ink transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]"
+      className="p-2 rounded-full bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-100 hover:bg-stone-200 dark:hover:bg-stone-700 border border-stone-200 dark:border-stone-700 shadow-sm active:scale-[0.97] transition-[background-color,transform] duration-150 ease-out"
      aria-label={`Current theme: ${theme}. Click to switch.`}
      title={theme === "system" ? "System" : theme === "dark" ? "Dark" : "Light"}
    >
      {theme === "system" ? (
-        <Monitor size={16} />
+        <Monitor size={18} className="text-stone-500 dark:text-stone-300" />
      ) : theme === "dark" ? (
-        <Sun size={16} />
+        <Sun size={18} className="text-amber-400" />
      ) : (
-        <Moon size={16} />
+        <Moon size={18} className="text-stone-600" />
      )}
    </button>
  );
@@ -1,206 +0,0 @@
-"use client";
-
-import { useCallback, useRef, useState, type RefObject } from "react";
-import {
-  animate,
-  motion,
-  useMotionValue,
-  useReducedMotion,
-  useSpring,
-  useTransform,
-  useVelocity,
-  type MotionValue,
-} from "framer-motion";
-import ObjectFace from "./ObjectFace";
-import { BOARD_SIZE, BOARD_SPOTS, type TischLabels, type TischObject } from "./types";
-
-interface Handle {
-  el: HTMLDivElement;
-  x: MotionValue<number>;
-  y: MotionValue<number>;
-  base: MotionValue<number>;
-  spotRotation: number;
-}
-
-interface BoardProps {
-  objects: TischObject[];
-  labels: TischLabels;
-}
-
-const TABLE_HEIGHT = 1080;
-const SETTLE = { type: "spring", bounce: 0, duration: 0.6 } as const;
-
-/** Desktop: freier Tisch. Objekte lassen sich werfen, federn am Rand zurück und lassen sich aufräumen. */
-export default function Board({ objects, labels }: BoardProps) {
-  const tableRef = useRef<HTMLDivElement>(null);
-  const handles = useRef(new Map<string, Handle>());
-  const [order, setOrder] = useState(() => objects.map((o) => o.id));
-
-  const bringToFront = useCallback((id: string) => {
-    setOrder((prev) => (prev[prev.length - 1] === id ? prev : [...prev.filter((x) => x !== id), id]));
-  }, []);
-
-  const tidy = () => {
-    const table = tableRef.current;
-    if (!table) return;
-    const width = table.clientWidth;
-    const gap = 22;
-    let cx = 0;
-    let cy = 28;
-    let rowH = 0;
-    objects.forEach((obj, i) => {
-      const h = handles.current.get(obj.id);
-      if (!h) return;
-      const { w, h: oh } = BOARD_SIZE[obj.kind];
-      if (cx + w > width && cx > 0) {
-        cx = 0;
-        cy += rowH + gap;
-        rowH = 0;
-      }
-      const tx = cx - h.el.offsetLeft;
-      const ty = cy - h.el.offsetTop;
-      cx += w + gap;
-      rowH = Math.max(rowH, oh);
-      const delay = i * 0.03;
-      animate(h.x, tx, { ...SETTLE, delay });
-      animate(h.y, ty, { ...SETTLE, delay });
-      animate(h.base, 0, { ...SETTLE, delay });
-    });
-  };
-
-  const mess = () => {
-    objects.forEach((obj, i) => {
-      const h = handles.current.get(obj.id);
-      if (!h) return;
-      const delay = i * 0.03;
-      animate(h.x, 0, { type: "spring", bounce: 0.2, duration: 0.6, delay });
-      animate(h.y, 0, { type: "spring", bounce: 0.2, duration: 0.6, delay });
-      animate(h.base, h.spotRotation, { type: "spring", bounce: 0.2, duration: 0.6, delay });
-    });
-  };
-
-  return (
-    <div>
-      <div className="mb-4 flex flex-wrap items-center justify-between gap-3 px-4 sm:px-6 lg:px-10">
-        <p className="font-mono text-[13px]">{labels.hintBoard}</p>
-        <div className="flex gap-2">
-          <button
-            type="button"
-            onClick={mess}
-            className="rounded-full px-5 py-3 text-[15px] font-semibold shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]"
-          >
-            {labels.mess}
-          </button>
-          <button
-            type="button"
-            onClick={tidy}
-            className="rounded-full bg-ink px-5 py-3 text-[15px] font-semibold text-paper transition-transform duration-150 ease-out active:scale-[0.97]"
-          >
-            {labels.tidy}
-          </button>
-        </div>
-      </div>
-
-      <div
-        ref={tableRef}
-        className="relative mx-4 border-t-2 border-ink bg-[radial-gradient(circle_at_1px_1px,rgb(var(--plakat-ink)/0.16)_1px,transparent_0)] [background-size:22px_22px] sm:mx-6 lg:mx-10"
-        style={{ height: TABLE_HEIGHT }}
-      >
-        {objects.map((obj, i) => (
-          <BoardItem
-            key={obj.id}
-            obj={obj}
-            labels={labels}
-            spot={BOARD_SPOTS[i % BOARD_SPOTS.length]}
-            z={order.indexOf(obj.id) + 1}
-            tableRef={tableRef}
-            onFront={() => bringToFront(obj.id)}
-            register={(h) => {
-              if (h) handles.current.set(obj.id, h);
-              else handles.current.delete(obj.id);
-            }}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-interface BoardItemProps {
-  obj: TischObject;
-  labels: TischLabels;
-  spot: { x: number; y: number; r: number };
-  z: number;
-  tableRef: RefObject<HTMLDivElement | null>;
-  onFront: () => void;
-  register: (h: Handle | null) => void;
-}
-
-function BoardItem({ obj, labels, spot, z, tableRef, onFront, register }: BoardItemProps) {
-  const reduce = useReducedMotion();
-  const [flipped, setFlipped] = useState(false);
-  const [lifted, setLifted] = useState(false);
-  // Framer meldet nach einem Wurf trotzdem einen Tap; der soll die Karte nicht umdrehen
-  const dragged = useRef(false);
-  const x = useMotionValue(0);
-  const y = useMotionValue(0);
-  const base = useMotionValue(spot.r);
-  // Neigung folgt der Wurfgeschwindigkeit, geglättet über eine Feder
-  const vx = useVelocity(x);
-  const tilt = useSpring(useTransform(vx, [-1600, 0, 1600], [-10, 0, 10]), { stiffness: 300, damping: 30 });
-  const rotate = useTransform(() => base.get() + (reduce ? 0 : tilt.get()));
-
-  const { w, h } = BOARD_SIZE[obj.kind];
-  const canFlip = obj.kind === "project";
-  const radius = { sticker: "rounded-full", photo: "rounded-md", book: "rounded-[6px_14px_14px_6px]" }[obj.kind as string] ?? "rounded-2xl";
-
-  return (
-    <motion.div
-      ref={(el) => register(el ? { el, x, y, base, spotRotation: spot.r } : null)}
-      drag
-      dragConstraints={tableRef}
-      dragElastic={0.18}
-      dragTransition={{ power: 0.35, timeConstant: 320, bounceStiffness: 260, bounceDamping: 22 }}
-      whileDrag={{ scale: 1.05 }}
-      onPointerDown={() => {
-        dragged.current = false;
-        onFront();
-      }}
-      onDragStart={() => {
-        dragged.current = true;
-        setLifted(true);
-      }}
-      onDragEnd={() => setLifted(false)}
-      onTap={canFlip ? () => !dragged.current && setFlipped((f) => !f) : undefined}
-      onKeyDown={
-        canFlip
-          ? (e) => {
-              if (e.key === " ") {
-                e.preventDefault();
-                setFlipped((f) => !f);
-              }
-            }
-          : undefined
-      }
-      tabIndex={canFlip ? 0 : undefined}
-      role={canFlip ? "button" : undefined}
-      aria-pressed={canFlip ? flipped : undefined}
-      aria-label={canFlip && obj.kind === "project" ? obj.title : undefined}
-      className={`absolute cursor-grab touch-none select-none active:cursor-grabbing ${radius} transition-shadow duration-200 ease-out ${
-        lifted ? "shadow-[14px_16px_0_rgb(var(--plakat-ink))]" : "shadow-[6px_6px_0_rgb(var(--plakat-ink))]"
-      }`}
-      style={{
-        x,
-        y,
-        rotate,
-        width: w,
-        height: h,
-        left: `min(${spot.x * 100}%, calc(100% - ${w}px))`,
-        top: spot.y,
-        zIndex: z,
-      }}
-    >
-      <ObjectFace obj={obj} labels={labels} flipped={flipped} />
-    </motion.div>
-  );
-}
@@ -1,151 +0,0 @@
-"use client";
-
-import { useRef, useState } from "react";
-import { AnimatePresence, motion, useMotionValue, useTransform, type PanInfo, type Variants } from "framer-motion";
-import ObjectFace from "./ObjectFace";
-import type { TischLabels, TischObject } from "./types";
-
-interface DeckProps {
-  objects: TischObject[];
-  labels: TischLabels;
-}
-
-const VISIBLE = 4;
-// Ab dieser Strecke oder Geschwindigkeit fliegt die Karte weg (Emil: ein kurzer Wisch reicht)
-const DISTANCE = 110;
-const VELOCITY = 500;
-const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];
-
-const pad = (n: number) => String(n).padStart(2, "0");
-
-type Exit = { kind: "fly"; dir: 1 | -1 } | { kind: "fade" };
-
-// Bekommt den aktuellen Exit-Modus über `custom` von AnimatePresence
-const exitVariants: Variants = {
-  leave: (e: Exit) =>
-    e.kind === "fly"
-      ? { x: e.dir * 460, rotate: e.dir * 18, opacity: 0, transition: { duration: 0.3, ease: EASE_OUT } }
-      : { scale: 0.85, opacity: 0, transition: { duration: 0.2, ease: EASE_OUT } },
-};
-
-/** Handy: Kartenstapel. Oberste Karte zur Seite wischen, antippen zum Umdrehen. */
-export default function Deck({ objects, labels }: DeckProps) {
-  const [order, setOrder] = useState(() => objects.map((_, i) => i));
-  // Wie die Karte geht, die den sichtbaren Stapel verlässt: oben weggeworfen oder hinten ausgeblendet
-  const [exit, setExit] = useState<Exit>({ kind: "fly", dir: 1 });
-
-  const next = (d: 1 | -1 = 1) => {
-    setExit({ kind: "fly", dir: d });
-    setOrder((o) => [...o.slice(1), o[0]]);
-  };
-  const prev = () => {
-    setExit({ kind: "fade" });
-    setOrder((o) => [o[o.length - 1], ...o.slice(0, -1)]);
-  };
-
-  const visible = order.slice(0, VISIBLE);
-
-  return (
-    <div>
-      <p className="mb-2 px-4 font-mono text-[13px] sm:px-6">{labels.hintDeck}</p>
-      <div className="relative h-[440px] overflow-hidden">
-        <AnimatePresence initial={false} custom={exit}>
-          {visible
-            .map((idx, depth) => (
-              <DeckCard
-                key={objects[idx].id}
-                obj={objects[idx]}
-                labels={labels}
-                depth={depth}
-                enteringFromLeft={depth === 0 && exit.kind === "fade"}
-                onDismiss={next}
-              />
-            ))
-            .reverse()}
-        </AnimatePresence>
-      </div>
-      <div className="flex items-center justify-between px-4 pb-10 pt-1 sm:px-6">
-        <RoundButton label={labels.prev} onClick={prev}>
-          ←
-        </RoundButton>
-        <span className="font-mono text-[13px] [font-variant-numeric:tabular-nums]" aria-live="polite">
-          {pad(order[0] + 1)} / {pad(objects.length)}
-        </span>
-        <RoundButton label={labels.next} onClick={() => next(1)}>
-          →
-        </RoundButton>
-      </div>
-    </div>
-  );
-}
-
-function RoundButton({ label, onClick, children }: { label: string; onClick: () => void; children: React.ReactNode }) {
-  return (
-    <button
-      type="button"
-      aria-label={label}
-      onClick={onClick}
-      className="grid h-[52px] w-[52px] place-items-center rounded-full border-2 border-ink bg-paper text-xl font-semibold transition-[background-color,transform] duration-150 ease-out active:scale-95 active:bg-paper-2"
-    >
-      <span aria-hidden="true">{children}</span>
-    </button>
-  );
-}
-
-interface DeckCardProps {
-  obj: TischObject;
-  labels: TischLabels;
-  depth: number;
-  enteringFromLeft: boolean;
-  onDismiss: (dir: 1 | -1) => void;
-}
-
-function DeckCard({ obj, labels, depth, enteringFromLeft, onDismiss }: DeckCardProps) {
-  const [flipped, setFlipped] = useState(false);
-  const dragged = useRef(false);
-  const x = useMotionValue(0);
-  const dragRotate = useTransform(x, [-220, 0, 220], [-14, 0, 14]);
-  const isTop = depth === 0;
-  const canFlip = obj.kind === "project";
-  const restRotate = depth === 0 ? 0 : depth % 2 ? 3 : -3;
-
-  const handleDragEnd = (_: unknown, info: PanInfo) => {
-    if (Math.abs(info.offset.x) > DISTANCE || Math.abs(info.velocity.x) > VELOCITY) {
-      onDismiss(info.offset.x > 0 ? 1 : -1);
-    }
-  };
-
-  return (
-    <motion.div
-      className="absolute inset-x-0 top-4 mx-auto h-[390px] w-[min(300px,82vw)]"
-      style={{ zIndex: 10 - depth }}
-      initial={enteringFromLeft ? { x: -420, rotate: -14, opacity: 0 } : { scale: 0.85, y: 3 * 14, opacity: 0 }}
-      animate={{ x: 0, scale: 1 - Math.min(depth, 3) * 0.05, y: Math.min(depth, 3) * 14, rotate: restRotate, opacity: 1 }}
-      variants={exitVariants}
-      exit="leave"
-      transition={{ type: "spring", bounce: 0, duration: 0.45 }}
-    >
-      <motion.div
-        className={`h-full w-full ${obj.kind === "sticker" ? "rounded-full" : "rounded-2xl"} shadow-[6px_6px_0_rgb(var(--plakat-ink))] ${isTop ? "cursor-grab" : "pointer-events-none"}`}
-        style={{ x, rotate: dragRotate, touchAction: "pan-y" }}
-        drag={isTop ? "x" : false}
-        dragSnapToOrigin
-        dragElastic={0.9}
-        onPointerDown={() => {
-          dragged.current = false;
-        }}
-        onDragStart={() => {
-          dragged.current = true;
-        }}
-        onDragEnd={handleDragEnd}
-        onTap={isTop && canFlip ? () => !dragged.current && setFlipped((f) => !f) : undefined}
-        tabIndex={isTop && canFlip ? 0 : -1}
-        role={canFlip ? "button" : undefined}
-        aria-pressed={canFlip ? flipped : undefined}
-        aria-hidden={!isTop}
-      >
-        <ObjectFace obj={obj} labels={labels} flipped={flipped} />
-      </motion.div>
-    </motion.div>
-  );
-}
@@ -1,193 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import type { TischLabels, TischObject } from "./types";
-
-interface ObjectFaceProps {
-  obj: TischObject;
-  labels: TischLabels;
-  flipped?: boolean;
-}
-
-const pad = (n: number) => String(n).padStart(2, "0");
-
-// Rand und Rundung, die alle Objekte teilen
-const edge = "h-full w-full overflow-hidden rounded-2xl border-2 border-ink";
-
-/** Zeichnet ein Objekt. Größe und Position bestimmt der Container (Tisch oder Stapel). */
-export default function ObjectFace({ obj, labels, flipped = false }: ObjectFaceProps) {
-  switch (obj.kind) {
-    case "project":
-      return (
-        <div className="h-full w-full [perspective:1200px]">
-          <div
-            className={`relative h-full w-full rounded-2xl transition-transform duration-[560ms] ease-in-out [transform-style:preserve-3d] ${
-              flipped ? "[transform:rotateY(180deg)]" : ""
-            }`}
-          >
-            <div
-              className={`${edge} absolute inset-0 flex flex-col justify-between p-4 [backface-visibility:hidden]`}
-              style={{ background: obj.color, color: obj.textColor }}
-            >
-              <div className="flex justify-between font-mono text-xs">
-                <span>({pad(obj.index + 1)})</span>
-                <span>{obj.year}</span>
-              </div>
-              <h3 className="font-display text-[2.4rem] font-extrabold leading-[0.88] tracking-[-0.045em] [overflow-wrap:anywhere] [font-variation-settings:'wdth'_78] [color:inherit]">
-                {obj.title}
-              </h3>
-              <div className="font-mono text-xs leading-snug">
-                <div>{obj.tags.slice(0, 3).join(" · ")}</div>
-                <div className="mt-2 opacity-70">{labels.flip} ↻</div>
-              </div>
-            </div>
-            <div
-              className={`${edge} absolute inset-0 flex flex-col justify-between bg-paper p-4 text-ink [backface-visibility:hidden] [transform:rotateY(180deg)]`}
-            >
-              <div className="flex justify-between font-mono text-xs">
-                <span className="truncate pr-2">{obj.title}</span>
-                <span>{obj.year}</span>
-              </div>
-              <p className="line-clamp-6 text-[15px] leading-snug">{obj.description}</p>
-              <Link
-                href={obj.href}
-                className="inline-flex w-fit items-center gap-1.5 rounded-full bg-ink px-3.5 py-2 text-sm font-semibold text-paper transition-transform duration-150 ease-out active:scale-[0.97]"
-                onPointerDownCapture={(e) => e.stopPropagation()}
-              >
-                {labels.details} <span aria-hidden="true">→</span>
-              </Link>
-            </div>
-          </div>
-        </div>
-      );
-
-    case "ticket":
-      return (
-        <div className={`${edge} grid grid-cols-[1fr_76px] bg-ink text-paper`}>
-          <div className="flex flex-col justify-between p-4">
-            <span className="font-mono text-[11.5px] uppercase tracking-wide">{labels.ticketTitle}</span>
-            <div>
-              <div className="font-display text-[4.4rem] font-extrabold leading-[0.8] tracking-[-0.05em] text-signal [font-variant-numeric:tabular-nums]">
-                {obj.daysLeft}
-              </div>
-              <div className="mt-1 text-sm font-semibold">{labels.ticketDays}</div>
-            </div>
-            <span className="font-mono text-[11.5px] leading-snug">{labels.ticketJob}</span>
-          </div>
-          <div className="grid place-items-center border-l-2 border-dashed border-paper/30 font-mono text-[11px] uppercase tracking-[0.12em] text-signal [transform:rotate(180deg)] [writing-mode:vertical-rl]">
-            {labels.ticketStub}
-          </div>
-        </div>
-      );
-
-    case "server":
-      return (
-        <div className={`${edge} flex flex-col gap-3 bg-paper p-4 text-ink`}>
-          <h3 className="font-display text-2xl font-extrabold leading-none tracking-[-0.03em]">{labels.serverTitle}</h3>
-          {labels.servers.map((s) => (
-            <div key={s.name} className="grid grid-cols-[10px_1fr] items-center gap-2.5 text-sm">
-              <span className="h-2.5 w-2.5 rounded-full bg-ok shadow-[0_0_0_3px_rgb(var(--plakat-ok)/0.2)]" aria-hidden="true" />
-              <span>
-                {s.name}
-                <span className="block font-mono text-[11.5px] opacity-75">{s.detail}</span>
-              </span>
-            </div>
-          ))}
-          <p className="mt-auto border-t-2 border-ink/15 pt-2.5 font-mono text-[11.5px] leading-snug">{labels.serverNote}</p>
-        </div>
-      );
-
-    case "book":
-      return <BookFace href={obj.href} labels={labels} />;
-
-    case "photo":
-      return (
-        <div className="flex h-full w-full flex-col rounded-md border-2 border-ink bg-polaroid p-2.5 pb-0 text-polaroid-ink">
-          <div className="relative w-full flex-1 overflow-hidden rounded-sm bg-paper-2">
-            <Image src="/images/me.jpg" alt="Dennis Konkol" fill sizes="220px" className="object-cover" draggable={false} />
-          </div>
-          <div className="py-2.5 text-center font-display text-lg font-bold">{labels.photoCaption}</div>
-        </div>
-      );
-
-    case "sticker":
-      return (
-        <div className="grid h-full w-full place-items-center rounded-full border-2 border-ink bg-signal p-6 text-center font-display text-xl font-extrabold leading-[0.98] tracking-[-0.02em] text-ink">
-          {labels.sticker}
-        </div>
-      );
-  }
-}
-
-interface CurrentBook {
-  title: string;
-  authors: string[];
-  image: string | null;
-  progress: number;
-}
-
-// Tisch und Stapel zeigen das Buch beide; so wird es nur einmal geladen
-let bookRequest: Promise<CurrentBook | null> | null = null;
-function loadCurrentBook(): Promise<CurrentBook | null> {
-  if (!bookRequest) {
-    bookRequest = fetch("/api/n8n/hardcover/currently-reading")
-      .then((res) => (res.ok ? res.json() : null))
-      .then((data) => {
-        const list = data?.currentlyReading;
-        const first = Array.isArray(list) ? list[0] : list;
-        return first ?? null;
-      })
-      .catch(() => null);
-  }
-  return bookRequest;
-}
-
-function BookFace({ href, labels }: { href: string; labels: TischLabels }) {
-  const [book, setBook] = useState<CurrentBook | null | undefined>(undefined);
-
-  useEffect(() => {
-    let alive = true;
-    loadCurrentBook().then((b) => {
-      if (alive) setBook(b);
-    });
-    return () => {
-      alive = false;
-    };
-  }, []);
-
-  const progress = book && Number.isFinite(book.progress) ? Math.max(0, Math.min(100, book.progress)) : 0;
-
-  return (
-    <div className="relative h-full w-full overflow-hidden rounded-[6px_14px_14px_6px] border-2 border-ink bg-bookcover text-bookcover-text shadow-[inset_6px_0_0_rgba(255,255,255,0.08)]">
-      {book?.image && (
-        <Image src={book.image} alt="" fill sizes="200px" className="object-cover opacity-40" draggable={false} />
-      )}
-      <div className="relative flex h-full flex-col justify-between p-4">
-        <span className="font-mono text-xs uppercase tracking-wide">{labels.bookLabel}</span>
-        {book === undefined ? (
-          <div className="space-y-2" aria-hidden="true">
-            <div className="h-7 w-4/5 animate-pulse rounded bg-white/15" />
-            <div className="h-4 w-1/2 animate-pulse rounded bg-white/10" />
-          </div>
-        ) : book ? (
-          <div>
-            <div className="line-clamp-3 font-display text-[1.9rem] font-extrabold leading-[0.92] tracking-[-0.03em]">{book.title}</div>
-            <div className="mt-1.5 font-mono text-xs">{book.authors.join(", ")}</div>
-          </div>
-        ) : (
-          <Link href={href} className="font-display text-2xl font-extrabold leading-tight underline decoration-2 underline-offset-4">
-            {labels.bookFallback}
-          </Link>
-        )}
-        <div>
-          <div className="font-mono text-xs">{book ? `${progress} %` : " "}</div>
-          <div className="mt-1.5 h-1 overflow-hidden rounded bg-white/20">
-            <div className="h-full origin-left bg-signal" style={{ transform: `scaleX(${progress / 100})` }} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
@@ -1,104 +0,0 @@
-import Link from "next/link";
-import { getTranslations } from "next-intl/server";
-import { getProjects } from "@/lib/directus";
-import Board from "./Board";
-import Deck from "./Deck";
-import { PROJECT_COLORS, type TischLabels, type TischObject } from "./types";
-
-interface TischSectionProps {
-  locale: string;
-}
-
-// Abgabe der Masterarbeit, Grundlage für das Ticket
-const THESIS_DEADLINE = new Date("2027-02-15T12:00:00+01:00");
-
-/**
- * Der Tisch: Projekte und ein paar Dinge aus meinem Alltag als Objekte.
- * Desktop zeigt den freien Tisch, das Handy einen Kartenstapel. Beides wird
- * serverseitig gerendert und per CSS umgeschaltet, damit nichts springt.
- */
-export default async function TischSection({ locale }: TischSectionProps) {
-  const t = await getTranslations({ locale, namespace: "home.tisch" });
-  const projects = (await getProjects(locale, { published: true, limit: 6 }).catch(() => null)) ?? [];
-  const daysLeft = Math.max(0, Math.ceil((THESIS_DEADLINE.getTime() - Date.now()) / 86_400_000));
-
-  const labels: TischLabels = {
-    hintBoard: t("hintBoard"),
-    hintDeck: t("hintDeck"),
-    tidy: t("tidy"),
-    mess: t("mess"),
-    flip: t("flip"),
-    details: t("details"),
-    prev: t("prev"),
-    next: t("next"),
-    ticketTitle: t("ticketTitle"),
-    ticketDays: t("ticketDays"),
-    ticketJob: t("ticketJob"),
-    ticketStub: t("ticketStub"),
-    serverTitle: t("serverTitle"),
-    servers: [
-      { name: t("servers.ingress.name"), detail: t("servers.ingress.detail") },
-      { name: t("servers.mail.name"), detail: t("servers.mail.detail") },
-      { name: t("servers.home.name"), detail: t("servers.home.detail") },
-    ],
-    serverNote: t("serverNote"),
-    bookLabel: t("bookLabel"),
-    bookFallback: t("bookFallback"),
-    photoCaption: t("photoCaption"),
-    sticker: t("sticker"),
-  };
-
-  const projectObjects: TischObject[] = projects.map((p, i) => {
-    const color = PROJECT_COLORS[i % PROJECT_COLORS.length];
-    return {
-      kind: "project",
-      id: `project-${p.slug}`,
-      index: i,
-      title: p.title,
-      description: p.description,
-      year: p.created_at ? String(new Date(p.created_at).getFullYear()) : "",
-      tags: p.tags?.length ? p.tags : p.technologies ?? [],
-      href: `/${locale}/projects/${p.slug}`,
-      color: color.bg,
-      textColor: color.text,
-    };
-  });
-
-  // Reihenfolge = Startplätze auf dem Tisch; Projekte zuerst, damit sie oben liegen
-  const objects: TischObject[] = [
-    ...projectObjects,
-    { kind: "ticket", id: "ticket", daysLeft },
-    { kind: "server", id: "server" },
-    { kind: "book", id: "book", href: `/${locale}/books` },
-    { kind: "photo", id: "photo" },
-    { kind: "sticker", id: "sticker" },
-  ];
-  // Im Stapel wäre der runde Sticker eine Ellipse und wiederholt nur den Claim
-  const deckObjects = objects.filter((o) => o.kind !== "sticker");
-
-  return (
-    <section id="projects" className="border-b-2 border-ink pb-16 pt-14 md:pt-16" aria-labelledby="tisch-title">
-      <div className="flex flex-wrap items-end justify-between gap-4 px-4 pb-4 sm:px-6 lg:px-10">
-        <h2
-          id="tisch-title"
-          className="font-display text-[clamp(2.4rem,6vw,5rem)] font-extrabold leading-[0.92] tracking-[-0.045em] [font-variation-settings:'wdth'_82]"
-        >
-          {t("title")}
-        </h2>
-        <Link
-          href={`/${locale}/projects`}
-          className="inline-flex items-center gap-2 rounded-full px-5 py-3 text-[15px] font-semibold shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]"
-        >
-          {t("allProjects")} <span aria-hidden="true">↗</span>
-        </Link>
-      </div>
-
-      <div className="hidden md:block">
-        <Board objects={objects} labels={labels} />
-      </div>
-      <div className="md:hidden">
-        <Deck objects={deckObjects} labels={labels} />
-      </div>
-    </section>
-  );
-}
@@ -1,100 +0,0 @@
-// Objekte auf dem Tisch. Der Server baut die Liste, die Client-Komponenten zeichnen sie.
-
-export interface TischProject {
-  kind: "project";
-  id: string;
-  index: number;
-  title: string;
-  description: string;
-  year: string;
-  tags: string[];
-  href: string;
-  color: string;
-  textColor: string;
-}
-
-export interface TischTicket {
-  kind: "ticket";
-  id: "ticket";
-  daysLeft: number;
-}
-
-export interface TischServer {
-  kind: "server";
-  id: "server";
-}
-
-export interface TischBook {
-  kind: "book";
-  id: "book";
-  href: string;
-}
-
-export interface TischPhoto {
-  kind: "photo";
-  id: "photo";
-}
-
-export interface TischSticker {
-  kind: "sticker";
-  id: "sticker";
-}
-
-export type TischObject = TischProject | TischTicket | TischServer | TischBook | TischPhoto | TischSticker;
-
-export interface TischLabels {
-  hintBoard: string;
-  hintDeck: string;
-  tidy: string;
-  mess: string;
-  flip: string;
-  details: string;
-  prev: string;
-  next: string;
-  ticketTitle: string;
-  ticketDays: string;
-  ticketJob: string;
-  ticketStub: string;
-  serverTitle: string;
-  servers: { name: string; detail: string }[];
-  serverNote: string;
-  bookLabel: string;
-  bookFallback: string;
-  photoCaption: string;
-  sticker: string;
-}
-
-// Breite und Höhe je Objektart auf dem Desktop-Tisch (px)
-export const BOARD_SIZE: Record<TischObject["kind"], { w: number; h: number }> = {
-  project: { w: 236, h: 312 },
-  ticket: { w: 320, h: 180 },
-  server: { w: 270, h: 290 },
-  book: { w: 176, h: 262 },
-  photo: { w: 210, h: 250 },
-  sticker: { w: 180, h: 180 },
-};
-
-// Startpositionen: Anteil der Tischbreite, Abstand von oben in px, Neigung in Grad
-export const BOARD_SPOTS: { x: number; y: number; r: number }[] = [
-  { x: 0.02, y: 60, r: -6 },
-  { x: 0.23, y: 120, r: 4 },
-  { x: 0.45, y: 50, r: -3 },
-  { x: 0.67, y: 110, r: 6 },
-  { x: 0.04, y: 480, r: 5 },
-  { x: 0.28, y: 510, r: -5 },
-  { x: 0.52, y: 440, r: 3 },
-  { x: 0.8, y: 60, r: 8 },
-  { x: 0.76, y: 450, r: -7 },
-  { x: 0.42, y: 800, r: 7 },
-  { x: 0.12, y: 800, r: -4 },
-];
-
-// Farbfelder für Projektkarten, abwechselnd hell und dunkel
-export const PROJECT_COLORS: { bg: string; text: string }[] = [
-  { bg: "#2f5bea", text: "#f6f3f1" },
-  { bg: "#1d1b3d", text: "#f6f3f1" },
-  { bg: "#0f6e66", text: "#f6f3f1" },
-  { bg: "#f2b531", text: "#140c0b" },
-  { bg: "#140c0b", text: "#e8402f" },
-  { bg: "#3f8a4a", text: "#f6f3f1" },
-];
@@ -30,13 +30,6 @@
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
-
-    /* Plakat-Design (RGB-Kanäle, damit Tailwind-Deckkraft funktioniert) */
-    --plakat-red: 232 64 47;
-    --plakat-ink: 20 12 11;
-    --plakat-paper: 246 243 241;
-    --plakat-paper-2: 235 230 226;
-    --plakat-ok: 31 157 99;
 }

 .dark {
@@ -59,18 +52,12 @@
    --border: #44403c;
    --input: #292524;
    --ring: #d6d3d1;
-
-    /* Tinte und Papier tauschen die Rollen, das Rot bleibt */
-    --plakat-ink: 243 238 233;
-    --plakat-paper: 21 16 15;
-    --plakat-paper-2: 36 30 28;
-    --plakat-ok: 60 199 138;
 }

 body {
-    background: rgb(var(--plakat-paper));
-    color: rgb(var(--plakat-ink));
-    font-family: var(--font-geist), "Helvetica Neue", Arial, sans-serif;
+    background: var(--background);
+    color: var(--foreground);
+    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
@@ -83,8 +70,8 @@ body {

 /* Custom Selection */
 ::selection {
-    background: rgb(var(--plakat-ink));
-    color: rgb(var(--plakat-paper));
+    background: var(--primary); /* Rich brown for better contrast */
+    color: var(--primary-foreground); /* Off-white */
 }

 /* Smooth Scrolling */
@@ -148,11 +135,18 @@ h3,
 h4,
 h5,
 h6 {
-    font-family: var(--font-bricolage), "Avenir Next", "Segoe UI", sans-serif;
+    font-family: var(--font-playfair), Georgia, serif;
    letter-spacing: -0.02em;
    font-weight: 700;
+    color: var(--foreground);
 }

+/* Improve text contrast - using foreground variable for WCAG AA compliance */
+p,
+span,
+div {
+    color: var(--foreground); /* #3e2723 - meets WCAG AA standards */
+}

 /* Hide scrollbar but keep functionality */
 ::-webkit-scrollbar {
@@ -1,31 +1,24 @@
 import "./globals.css";
 import { Metadata } from "next";
-import { Bricolage_Grotesque, Geist, Geist_Mono } from "next/font/google";
+import { Inter, Playfair_Display } from "next/font/google";
 import React from "react";
 import ClientProviders from "./components/ClientProviders";
+import ShaderGradientBackground from "./components/ShaderGradientBackground";
 import { cookies } from "next/headers";
 import { getBaseUrl } from "@/lib/seo";

-// Bricolage behält die Achsen für Breite und optische Größe, damit das Plakat-Wortbild variieren kann
-const bricolage = Bricolage_Grotesque({
-  variable: "--font-bricolage",
-  subsets: ["latin"],
-  axes: ["opsz", "wdth"],
-  display: "swap",
-  adjustFontFallback: true,
-});
-
-const geist = Geist({
-  variable: "--font-geist",
+const inter = Inter({
+  variable: "--font-inter",
  subsets: ["latin"],
  display: "swap",
  adjustFontFallback: true,
 });

-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const playfair = Playfair_Display({
+  variable: "--font-playfair",
  subsets: ["latin"],
  display: "swap",
+  adjustFontFallback: true,
 });

 export default async function RootLayout({
@@ -44,7 +37,9 @@ export default async function RootLayout({
        {/* Prevent flash of unstyled theme — reads localStorage + system preference before React hydrates */}
        <script dangerouslySetInnerHTML={{ __html: `try{var t=localStorage.getItem('theme');var d=t==='dark'||((!t||t==='system')&&window.matchMedia('(prefers-color-scheme:dark)').matches);if(d)document.documentElement.classList.add('dark');}catch(e){}` }} />
      </head>
-      <body className={`${bricolage.variable} ${geist.variable} ${geistMono.variable}`} suppressHydrationWarning>
+      <body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
+        <div className="grain-overlay" aria-hidden="true" />
+        <ShaderGradientBackground />
        <ClientProviders>{children}</ClientProviders>
      </body>
    </html>
@@ -0,0 +1,48 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+
+const BackgroundBlobs = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
+      {/* Mint blob - top left */}
+      <motion.div
+        className="absolute top-[-10%] left-[-10%] w-[40vw] h-[40vw] bg-liquid-mint/40 rounded-full blur-[60px] opacity-70"
+        animate={{ scale: [1, 1.15, 1] }}
+        transition={{ duration: 40, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
+      />
+
+      {/* Lavender blob - top right */}
+      <motion.div
+        className="absolute top-[10%] right-[-5%] w-[35vw] h-[35vw] bg-liquid-lavender/35 rounded-full blur-[60px] opacity-70"
+        animate={{ scale: [1, 1.1, 1] }}
+        transition={{ duration: 45, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
+      />
+
+      {/* Rose blob - bottom left */}
+      <motion.div
+        className="absolute bottom-[-5%] left-[15%] w-[45vw] h-[45vw] bg-liquid-rose/35 rounded-full blur-[60px] opacity-70"
+        animate={{ scale: [1, 1.2, 1] }}
+        transition={{ duration: 50, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
+      />
+
+      {/* Peach blob - middle right */}
+      <motion.div
+        className="absolute top-[40%] right-[10%] w-[30vw] h-[30vw] bg-orange-200/30 rounded-full blur-[60px] opacity-70"
+        animate={{ scale: [1, 1.25, 1] }}
+        transition={{ duration: 55, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
+      />
+    </div>
+  );
+};
+
+export default BackgroundBlobs;
@@ -2,6 +2,7 @@ import { getLocalizedMessage } from '@/lib/i18n-loader';
 import type {
  NavTranslations,
  FooterTranslations,
+  HeroTranslations,
  AboutTranslations,
  ProjectsTranslations,
  ContactTranslations,
@@ -54,6 +55,30 @@ export async function getFooterTranslations(locale: string): Promise<FooterTrans
  };
 }

+export async function getHeroTranslations(locale: string): Promise<HeroTranslations> {
+  const keys = [
+    'home.hero.description',
+    'home.hero.ctaWork',
+    'home.hero.ctaContact',
+    'home.hero.features.f1',
+    'home.hero.features.f2',
+    'home.hero.features.f3',
+  ];
+
+  const values = await Promise.all(keys.map(key => getLocalizedMessage(key, locale)));
+
+  return {
+    description: values[0],
+    ctaWork: values[1],
+    ctaContact: values[2],
+    features: {
+      f1: values[3],
+      f2: values[4],
+      f3: values[5],
+    },
+  };
+}
+
 export async function getAboutTranslations(locale: string): Promise<AboutTranslations> {
  const keys = [
    'home.about.title',
@@ -26,48 +26,17 @@
  },
  "home": {
    "hero": {
-      "kicker": "Dennis Konkol — Osnabrück",
-      "claim": "Ich hoste mein halbes Leben selbst. Den Rest programmiere ich.",
-      "intro": "IT-Admin in Osnabrück und Masterstudent. Ab Februar 2027 kümmere ich mich hauptberuflich um Microsoft 365, bis dahin um meine Masterarbeit.",
-      "countdown": "{days, plural, one {Noch # Tag.} other {Noch # Tage.}}",
-      "ctaWork": "Projekte ansehen",
-      "ctaContact": "Schreib mir"
-    },
-    "tisch": {
-      "title": "Der Tisch.",
-      "allProjects": "Alle Projekte",
-      "hintBoard": "Alles hier lässt sich anfassen. Werfen, stapeln, Karten umdrehen.",
-      "hintDeck": "Wisch die Karten zur Seite, tipp zum Umdrehen.",
-      "tidy": "Aufräumen",
-      "mess": "Durcheinander",
-      "flip": "tippen zum Umdrehen",
-      "details": "Zum Projekt",
-      "prev": "Vorherige Karte",
-      "next": "Nächste Karte",
-      "ticketTitle": "Masterarbeit · Abgabe 15.02.2027",
-      "ticketDays": "Tage bis zur Abgabe",
-      "ticketJob": "ab 02/2027 fest als M365-Administrator",
-      "ticketStub": "Jetzt",
-      "serverTitle": "Was bei mir läuft",
-      "servers": {
-        "ingress": {
-          "name": "netcup · Eingang",
-          "detail": "Traefik, Dokploy, diese Seite"
-        },
-        "mail": {
-          "name": "IONOS · Post und Fotos",
-          "detail": "mailcow, Immich"
-        },
-        "home": {
-          "name": "Zuhause · Raspberry Pi",
-          "detail": "Home Assistant, Paperless"
-        }
+      "badge": "Student & Self-Hoster",
+      "line1": "Building",
+      "line2": "Stuff.",
+      "features": {
+        "f1": "Next.js & Flutter",
+        "f2": "Docker Swarm & CI/CD",
+        "f3": "Self-Hosted Infrastruktur"
      },
-      "serverNote": "Gesichert mit CrowdSec, tägliche Backups mit restic.",
-      "bookLabel": "Lese gerade",
-      "bookFallback": "Zur Bibliothek",
-      "photoCaption": "Das bin ich.",
-      "sticker": "Läuft auf eigenen Servern."
+      "description": "Ich bin Dennis Konkol, Informatik-Student und Webentwickler aus Osnabrück. Ich entwickle Fullstack-Apps mit Next.js und Flutter und betreibe meine eigene Infrastruktur mit Docker und CI/CD.",
+      "ctaWork": "Meine Projekte",
+      "ctaContact": "Kontakt"
    },
    "about": {
      "title": "Hinter den Kulissen",
@@ -23,51 +23,21 @@
    "acceptSelected": "Accept selected",
    "rejectAll": "Reject all",
    "hide": "Hide"
-  },
+  }
+  ,
  "home": {
    "hero": {
-      "kicker": "Dennis Konkol — Osnabrück, Germany",
-      "claim": "I self-host half my life. The rest I code.",
-      "intro": "IT admin in Osnabrück and master's student. From February 2027 I look after Microsoft 365 full-time, until then my master's thesis.",
-      "countdown": "{days, plural, one {# day to go.} other {# days to go.}}",
-      "ctaWork": "See projects",
-      "ctaContact": "Write me"
-    },
-    "tisch": {
-      "title": "The desk.",
-      "allProjects": "All projects",
-      "hintBoard": "Everything here can be touched. Throw it, stack it, flip the cards.",
-      "hintDeck": "Swipe the cards aside, tap to flip.",
-      "tidy": "Tidy up",
-      "mess": "Mess it up",
-      "flip": "tap to flip",
-      "details": "Open project",
-      "prev": "Previous card",
-      "next": "Next card",
-      "ticketTitle": "Master's thesis · due 15 Feb 2027",
-      "ticketDays": "days until submission",
-      "ticketJob": "from 02/2027: M365 administrator",
-      "ticketStub": "Now",
-      "serverTitle": "What I run",
-      "servers": {
-        "ingress": {
-          "name": "netcup · front door",
-          "detail": "Traefik, Dokploy, this site"
-        },
-        "mail": {
-          "name": "IONOS · mail and photos",
-          "detail": "mailcow, Immich"
-        },
-        "home": {
-          "name": "Home · Raspberry Pi",
-          "detail": "Home Assistant, Paperless"
-        }
+      "badge": "Student & Self-Hoster",
+      "line1": "Building",
+      "line2": "Stuff.",
+      "features": {
+        "f1": "Next.js & Flutter",
+        "f2": "Docker Swarm & CI/CD",
+        "f3": "Self-Hosted Infrastructure"
      },
-      "serverNote": "Guarded by CrowdSec, daily backups with restic.",
-      "bookLabel": "Reading now",
-      "bookFallback": "To the library",
-      "photoCaption": "That's me.",
-      "sticker": "Runs on my own servers."
+      "description": "I'm Dennis Konkol, a computer science student and web developer from Osnabrück, Germany. I build fullstack apps with Next.js and Flutter and love running my own infrastructure with Docker and CI/CD.",
+      "ctaWork": "View Projects",
+      "ctaContact": "Get in touch"
    },
    "about": {
      "title": "Behind the Code",
@@ -163,7 +133,8 @@
        "characters": "{count} characters"
      }
    }
-  },
+  }
+  ,
  "projects": {
    "shared": {
      "featured": "Featured"
@@ -183,7 +154,8 @@
      "viewSource": "View Source",
      "techStack": "Tech Stack"
    }
-  },
+  }
+  ,
  "footer": {
    "role": "Software Engineer",
    "madeIn": "Made in Germany",
@@ -229,3 +201,4 @@
    "professional": "Professional"
  }
 }
+
@@ -32,14 +32,6 @@ export default {
          "0%": { opacity: "0", transform: "translateY(-12px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
-        wordmarkUp: {
-          "0%": { opacity: "0", transform: "translateY(40%)" },
-          "100%": { opacity: "1", transform: "translateY(0)" },
-        },
-        marquee: {
-          "0%": { transform: "translateX(0)" },
-          "100%": { transform: "translateX(-50%)" },
-        },
        scrollHint: {
          "0%": { opacity: "0", transform: "scaleY(0.4)" },
          "40%": { opacity: "1", transform: "scaleY(1)" },
@@ -51,8 +43,6 @@ export default {
        "slide-down": "slideDown 500ms cubic-bezier(0.23, 1, 0.32, 1) both",
        "scroll-hint": "scrollHint 2.4s cubic-bezier(0.77, 0, 0.175, 1) infinite",
        "spin-slow": "spin 4s linear infinite",
-        "wordmark-up": "wordmarkUp 900ms cubic-bezier(0.23, 1, 0.32, 1) both",
-        marquee: "marquee 32s linear infinite",
      },
      colors: {
        background: "var(--background)",
@@ -88,17 +78,6 @@ export default {
        border: "var(--border)",
        input: "var(--input)",
        ring: "var(--ring)",
-        // Plakat-Design: Rot, Tinte, Papier. Tinte und Papier tauschen im Dark Mode die Rollen.
-        signal: "rgb(var(--plakat-red) / <alpha-value>)",
-        ink: "rgb(var(--plakat-ink) / <alpha-value>)",
-        paper: {
-          DEFAULT: "rgb(var(--plakat-paper) / <alpha-value>)",
-          2: "rgb(var(--plakat-paper-2) / <alpha-value>)",
-        },
-        ok: "rgb(var(--plakat-ok) / <alpha-value>)",
-        // Feste Objektfarben auf dem Tisch, unabhängig vom Theme
-        polaroid: { DEFAULT: "#fbfaf8", ink: "#140c0b" },
-        bookcover: { DEFAULT: "#2b1a14", text: "#f3e7dc" },
        // Warm brown palette
        cream: "#FAF8F3",
        sand: "#EFEBE9",
@@ -143,10 +122,9 @@ export default {
        },
      },
      fontFamily: {
-        sans: ["var(--font-geist)", "Helvetica Neue", "Arial", "sans-serif"],
-        display: ["var(--font-bricolage)", "Avenir Next", "Segoe UI", "sans-serif"],
-        serif: ["var(--font-bricolage)", "Avenir Next", "Segoe UI", "sans-serif"],
-        mono: ["var(--font-geist-mono)", "SF Mono", "Menlo", "monospace"],
+        sans: ["var(--font-inter)", "sans-serif"],
+        serif: ["var(--font-playfair)", "Georgia", "serif"],
+        mono: ["var(--font-roboto-mono)", "Monaco", "Courier New", "monospace"],
      },
    },
  },
@@ -20,6 +20,17 @@ export interface FooterTranslations {
  builtWith: string;
 }

+export interface HeroTranslations {
+  description: string;
+  ctaWork: string;
+  ctaContact: string;
+  features: {
+    f1: string;
+    f2: string;
+    f3: string;
+  };
+}
+
 export interface AboutTranslations {
  title: string;
  p1: string;