feat: plakat redesign phase 3 (windows on desktop, sheets on mobile)

- Tapping an object on the desk opens a window (desktop) or a bottom sheet
  (mobile) instead of flipping: projects, now, servers, reading, about, contact
- Desktop windows in poster style (2px ink rule, hard offset shadow), open
  from the tapped object, thrown by the title bar with momentum and elastic
  viewport edges, stack by focus, minimize into a tray, Escape closes the top
  window, focus moves to close and returns to the trigger
- Mobile sheets via vaul 1.1.2: drag down to dismiss, overlay, focus trap
- Project window shows live/source links from Directus when present
- Hero "Write me" opens the contact window; still a plain #contact link
  without JavaScript
- Shared current-book loader for desk, deck and reading window
- Texts in de/en, i18n key check extended

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

app/__tests__/components/Hero.test.tsx

@@ -3,58 +3,38 @@ import Hero from '@/app/components/Hero';
 
 // Mock next-intl/server
 jest.mock('next-intl/server', () => ({
-  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} 
-    />
-  ),
+  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;
+    }),
 }));
 
 describe('Hero', () => {
-  it('renders the hero section correctly', async () => {
+  it('renders the poster hero with claim, intro and calls to action', async () => {
     const HeroResolved = await Hero({ locale: 'en' });
     render(HeroResolved);
-    
-    // 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();
+
+    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');
   });
 });

app/__tests__/pre-push-check.test.ts

@@ -136,7 +136,9 @@ 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: ["badge", "line1", "line2", "description", "ctaWork", "ctaContact"] },
+  "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.windows": { HomePageServer: ["close", "minimize", "openWindows", "projectPage", "source", "live", "stack", "year", "now.title", "now.days", "now.study.label", "now.study.text", "now.work.label", "now.work.text", "now.side.label", "now.side.text", "server.title", "server.headline", "read.title", "read.progress", "read.empty", "read.library", "about.title", "about.p1", "about.p2", "about.facts.laptop.label", "about.facts.laptop.value", "about.facts.pc.label", "about.facts.pc.value", "about.facts.study.label", "about.facts.study.value", "about.facts.languages.label", "about.facts.languages.value", "contact.title", "contact.body", "contact.copy", "contact.copied", "contact.form"] },
   "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"] },

app/_ui/HomePageServer.tsx

@@ -1,16 +1,17 @@
 import Header from "../components/Header.server";
 import Hero from "../components/Hero";
+import TischSection from "../components/tisch/TischSection";
+import WindowProvider from "../components/fenster/WindowProvider";
+import { getWindowLabels } from "../components/fenster/getWindowLabels";
 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";
@@ -21,11 +22,11 @@ interface HomePageServerProps {
 
 export default async function HomePageServer({ locale }: HomePageServerProps) {
   // Parallel laden aller Translations (hero translations handled by Hero server component)
-  const [aboutT, projectsT, contactT, footerT] = await Promise.all([
+  const [aboutT, contactT, footerT, windowLabels] = await Promise.all([
     getAboutTranslations(locale),
-    getProjectsTranslations(locale),
     getContactTranslations(locale),
     getFooterTranslations(locale),
+    getWindowLabels(locale),
   ]);
 
   return (
@@ -88,89 +89,23 @@ 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} />
+      <WindowProvider labels={windowLabels}>
+        <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>
 
+          <ScrollFadeIn>
+            <ContactClient locale={locale} translations={contactT} />
+          </ScrollFadeIn>
+        </main>
         <ScrollFadeIn>
-          <AboutClient locale={locale} translations={aboutT} />
+          <FooterClient locale={locale} translations={footerT} />
         </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} />
-        </ScrollFadeIn>
-      </main>
-      <ScrollFadeIn>
-        <FooterClient locale={locale} translations={footerT} />
-      </ScrollFadeIn>
+      </WindowProvider>
     </div>
   );
 }

app/components/BackgroundBlobsClient.tsx

@@ -1,17 +0,0 @@
-"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 />;
-}

app/components/ClientProviders.tsx

@@ -1,31 +1,17 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
-import { usePathname } from "next/navigation";
-import dynamic from "next/dynamic";
+import React from "react";
 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>
@@ -33,7 +19,7 @@ export default function ClientProviders({
           <ThemeProvider>
             {/* Respect prefers-reduced-motion in every Framer Motion animation */}
             <MotionConfig reducedMotion="user">
-              <GatedProviders mounted={mounted}>
+              <GatedProviders>
                 {children}
               </GatedProviders>
             </MotionConfig>
@@ -44,31 +30,10 @@ export default function ClientProviders({
   );
 }
 
-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]);
-
+function GatedProviders({ children }: { children: React.ReactNode }) {
   return (
     <ErrorBoundary>
       <ToastProvider>
-        {deferredReady && <BackgroundBlobs />}
         <div className="relative z-10">{children}</div>
       </ToastProvider>
     </ErrorBoundary>

app/components/HeaderClient.tsx

@@ -86,174 +86,131 @@ 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 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"
-            }`}
+      <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"}
           >
-            <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>
+            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}
               </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>
 
-            <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>
+          <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>
         </div>
       </header>
 
-      {/* Mobile menu overlay — always mounted so it can fade out, not just vanish */}
+      {/* Abdunklung hinter dem Menü — bleibt gemountet, damit sie ausblenden kann */}
       <div
         aria-hidden="true"
-        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"
+        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"
         }`}
         onClick={() => setIsOpen(false)}
       />
 
-      {/* Mobile menu panel — drawer curve in, quicker exit */}
+      {/* Menü als Drawer: Drawer-Kurve rein, schneller raus */}
       <div
         inert={!isOpen}
-        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"
+        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"
         }`}
       >
-        <div className="p-6">
-          <div className="flex justify-between items-center mb-8">
-            <Link
-              href={`/${locale}`}
-              className="text-2xl font-black text-stone-900"
-              onClick={() => setIsOpen(false)}
-            >
-              dk<span className="text-red-500">0</span>
-            </Link>
-            <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 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="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"
+        <nav className="flex flex-col border-t-2 border-ink" aria-label={de ? "Hauptnavigation" : "Main navigation"}>
+          {navItems.map((item) => (
+            <Link
+              key={item.name}
+              href={item.href}
+              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}
+            </Link>
+          ))}
+        </nav>
+
+        <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}
               >
-                {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>
+                <Icon size={18} />
+              </a>
+            );
+          })}
         </div>
       </div>
     </>

app/components/Hero.tsx

@@ -1,73 +1,69 @@
 import { getTranslations } from "next-intl/server";
-import Image from "next/image";
+import KineticWordmark from "./KineticWordmark";
+import OpenWindowLink from "./fenster/OpenWindowLink";
 
 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 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>
+    <>
+      <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>
 
-      <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-4 sm:mt-8">
+          <KineticWordmark />
+        </div>
 
-          {/* 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")}
+        <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 })}
             </p>
-
-            <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")}
+            <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>
               </a>
-              <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">
+              <OpenWindowLink
+                href="#contact"
+                request={{ kind: "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]"
+              >
                 {t("ctaContact")}
-              </a>
-            </div>
-          </div>
-
-          {/* 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>
+              </OpenWindowLink>
             </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>
+          ))}
         </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>
+    </>
   );
 }

app/components/KineticWordmark.tsx

@@ -0,0 +1,99 @@
+"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>
+  );
+}

app/components/RootProviders.tsx

@@ -1,41 +0,0 @@
-"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>
-  );
-}

app/components/ShaderGradientBackground.tsx

@@ -1,33 +0,0 @@
-// 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>
-  );
-}

app/components/ThemeToggle.tsx

@@ -13,7 +13,7 @@ export function ThemeToggle() {
   }, []);
 
   if (!mounted) {
-    return <div className="w-9 h-9" />;
+    return <div className="ml-1 h-9 w-9" />;
   }
 
   const cycle = () => {
@@ -24,16 +24,16 @@ export function ThemeToggle() {
   return (
     <button
       onClick={cycle}
-      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"
+      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]"
       aria-label={`Current theme: ${theme}. Click to switch.`}
       title={theme === "system" ? "System" : theme === "dark" ? "Dark" : "Light"}
     >
       {theme === "system" ? (
-        <Monitor size={18} className="text-stone-500 dark:text-stone-300" />
+        <Monitor size={16} />
       ) : theme === "dark" ? (
-        <Sun size={18} className="text-amber-400" />
+        <Sun size={16} />
       ) : (
-        <Moon size={18} className="text-stone-600" />
+        <Moon size={16} />
       )}
     </button>
   );

app/components/fenster/OpenWindowLink.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useOpenWindow } from "./WindowProvider";
+import type { WindowRequest } from "./types";
+
+interface OpenWindowLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  request: WindowRequest;
+}
+
+/**
+ * Ein normaler Link (funktioniert ohne JavaScript), der mit JavaScript stattdessen
+ * ein Fenster bzw. Sheet öffnet.
+ */
+export default function OpenWindowLink({ request, onClick, ...props }: OpenWindowLinkProps) {
+  const openWindow = useOpenWindow();
+  return (
+    <a
+      {...props}
+      aria-haspopup={openWindow ? "dialog" : undefined}
+      onClick={(e) => {
+        onClick?.(e);
+        if (!openWindow || e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey) return;
+        e.preventDefault();
+        openWindow(request, e.currentTarget);
+      }}
+    />
+  );
+}

app/components/fenster/WindowContent.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { loadCurrentBook, type CurrentBook } from "../tisch/currentBook";
+import type { WindowLabels, WindowRequest } from "./types";
+
+const EMAIL = "contact@dk0.dev";
+
+const btn =
+  "inline-flex items-center gap-2 rounded-full bg-ink px-4 py-2.5 text-sm font-semibold text-paper transition-transform duration-150 ease-out active:scale-[0.97]";
+const ghost =
+  "inline-flex items-center gap-2 rounded-full px-4 py-2.5 text-sm 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]";
+
+/** Titelzeile eines Fensters, auch für die Ablage-Leiste. */
+export function windowTitle(req: WindowRequest, labels: WindowLabels): string {
+  switch (req.kind) {
+    case "project":
+      return req.project.year ? `${req.project.title} · ${req.project.year}` : req.project.title;
+    case "now":
+      return labels.now.title;
+    case "server":
+      return labels.server.title;
+    case "read":
+      return labels.read.title;
+    case "about":
+      return labels.about.title;
+    case "contact":
+      return labels.contact.title;
+  }
+}
+
+/** Farbe des Punkts in der Ablage-Leiste */
+export function windowAccent(req: WindowRequest): string {
+  if (req.kind === "project") return req.project.color;
+  return { now: "rgb(var(--plakat-red))", server: "rgb(var(--plakat-ok))", read: "#7a5240", about: "#2f5bea", contact: "rgb(var(--plakat-red))" }[req.kind];
+}
+
+interface WindowContentProps {
+  req: WindowRequest;
+  labels: WindowLabels;
+  /** Schließt das Fenster, z. B. wenn ein Link auf der Seite weiterführt */
+  onClose: () => void;
+}
+
+export default function WindowContent({ req, labels, onClose }: WindowContentProps) {
+  switch (req.kind) {
+    case "project": {
+      const p = req.project;
+      return (
+        <>
+          <div
+            className="-mx-5 -mt-5 flex min-h-[150px] flex-col justify-between border-b-2 border-ink p-5"
+            style={{ background: p.color, color: p.textColor }}
+          >
+            <span className="font-mono text-[12.5px]">{p.tags.slice(0, 4).join(" · ")}</span>
+            <span className="font-display text-[clamp(2.4rem,6vw,3.4rem)] font-extrabold leading-[0.86] tracking-[-0.045em] [font-variation-settings:'wdth'_78]">
+              {p.title}
+            </span>
+          </div>
+          <p className="text-[15px] leading-relaxed">{p.description}</p>
+          <dl className="border-t-2 border-ink">
+            {p.year && <Row label={labels.year}>{p.year}</Row>}
+            {p.tags.length > 0 && <Row label={labels.stack}>{p.tags.join(", ")}</Row>}
+          </dl>
+          <div className="flex flex-wrap gap-2">
+            <Link href={p.href} className={btn}>
+              {labels.projectPage} <span aria-hidden="true">→</span>
+            </Link>
+            {p.liveUrl && (
+              <a href={p.liveUrl} target="_blank" rel="noopener noreferrer" className={ghost}>
+                {labels.live} <span aria-hidden="true">↗</span>
+              </a>
+            )}
+            {p.githubUrl && (
+              <a href={p.githubUrl} target="_blank" rel="noopener noreferrer" className={ghost}>
+                {labels.source} <span aria-hidden="true">↗</span>
+              </a>
+            )}
+          </div>
+        </>
+      );
+    }
+
+    case "now":
+      return <NowBody labels={labels} />;
+
+    case "server":
+      return (
+        <>
+          <p className="font-display text-[1.8rem] font-extrabold leading-none tracking-[-0.03em]">{labels.server.headline}</p>
+          <div>
+            {labels.server.rows.map((r) => (
+              <div key={r.name} className="grid grid-cols-[10px_1fr] items-center gap-3 border-b border-ink/20 py-2.5 text-[15px]">
+                <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>
+                  {r.name}
+                  <span className="block font-mono text-xs opacity-75">{r.detail}</span>
+                </span>
+              </div>
+            ))}
+          </div>
+          <p className="font-mono text-[12.5px] leading-snug">{labels.server.note}</p>
+        </>
+      );
+
+    case "read":
+      return <ReadBody labels={labels} />;
+
+    case "about":
+      return (
+        <>
+          {labels.about.paragraphs.map((text) => (
+            <p key={text} className="text-[15px] leading-relaxed">
+              {text}
+            </p>
+          ))}
+          <dl className="border-t-2 border-ink">
+            {labels.about.facts.map((f) => (
+              <Row key={f.label} label={f.label}>
+                {f.value}
+              </Row>
+            ))}
+          </dl>
+        </>
+      );
+
+    case "contact":
+      return <ContactBody labels={labels} onClose={onClose} />;
+  }
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-[110px_minmax(0,1fr)] gap-3 border-b border-ink/20 py-2.5">
+      <dt className="font-mono text-[12.5px] leading-6">{label}</dt>
+      <dd className="m-0 text-[15px]">{children}</dd>
+    </div>
+  );
+}
+
+// Abgabe der Masterarbeit; auf dem Client gerechnet, damit das Fenster nie einen veralteten Stand zeigt
+const THESIS_DEADLINE = new Date("2027-02-15T12:00:00+01:00");
+
+function NowBody({ labels }: { labels: WindowLabels }) {
+  const days = Math.max(0, Math.ceil((THESIS_DEADLINE.getTime() - Date.now()) / 86_400_000));
+  return (
+    <>
+      <div>
+        <div className="font-display text-[5rem] font-extrabold leading-[0.82] tracking-[-0.05em] text-signal [font-variant-numeric:tabular-nums]">
+          {days}
+        </div>
+        <p className="mt-1.5 font-semibold">{labels.now.days}</p>
+      </div>
+      <dl className="border-t-2 border-ink">
+        {labels.now.rows.map((r) => (
+          <Row key={r.label} label={r.label}>
+            {r.text}
+          </Row>
+        ))}
+      </dl>
+    </>
+  );
+}
+
+function ReadBody({ labels }: { labels: WindowLabels }) {
+  const [book, setBook] = useState<CurrentBook | null | undefined>(undefined);
+  useEffect(() => {
+    let alive = true;
+    loadCurrentBook().then((b) => alive && setBook(b));
+    return () => {
+      alive = false;
+    };
+  }, []);
+  const progress = book && Number.isFinite(book.progress) ? Math.max(0, Math.min(100, book.progress)) : 0;
+
+  return (
+    <>
+      {book === undefined ? (
+        <div className="grid grid-cols-[72px_1fr] gap-4" aria-hidden="true">
+          <div className="h-[104px] animate-pulse rounded bg-paper-2" />
+          <div className="space-y-2 pt-1">
+            <div className="h-6 w-4/5 animate-pulse rounded bg-paper-2" />
+            <div className="h-4 w-1/2 animate-pulse rounded bg-paper-2" />
+          </div>
+        </div>
+      ) : book ? (
+        <div className="grid grid-cols-[72px_1fr] items-center gap-4">
+          <div className="relative h-[104px] overflow-hidden rounded-[3px_6px_6px_3px] border-2 border-ink bg-bookcover">
+            {book.image && <Image src={book.image} alt="" fill sizes="72px" className="object-cover" />}
+          </div>
+          <div>
+            <div className="font-display text-xl font-bold leading-tight">{book.title}</div>
+            <div className="font-mono text-xs">{book.authors.join(", ")}</div>
+            <div className="mt-2.5 font-mono text-xs">
+              {progress} % {labels.read.progress}
+            </div>
+            <div className="mt-1.5 h-1 overflow-hidden rounded bg-paper-2">
+              <div className="h-full origin-left bg-ink" style={{ transform: `scaleX(${progress / 100})` }} />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <p>{labels.read.empty}</p>
+      )}
+      <Link href={labels.read.libraryHref} className={`${ghost} w-fit`}>
+        {labels.read.library} <span aria-hidden="true">→</span>
+      </Link>
+    </>
+  );
+}
+
+function ContactBody({ labels, onClose }: { labels: WindowLabels; onClose: () => void }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(EMAIL);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1600);
+    } catch {
+      window.location.href = `mailto:${EMAIL}`;
+    }
+  };
+  return (
+    <>
+      <div className="font-display text-[clamp(1.8rem,5vw,2.4rem)] font-extrabold leading-[0.95] tracking-[-0.04em] [overflow-wrap:anywhere]">
+        contact<span className="text-signal">@</span>dk0.dev
+      </div>
+      <p className="text-[15px] leading-relaxed">{labels.contact.body}</p>
+      <div className="flex flex-wrap gap-2">
+        <button type="button" onClick={copy} className={btn} aria-live="polite">
+          {copied ? labels.contact.copied : labels.contact.copy}
+        </button>
+        <a href="https://github.com/Denshooter" target="_blank" rel="noopener noreferrer" className={ghost}>
+          GitHub
+        </a>
+        <a href="https://linkedin.com/in/dkonkol" target="_blank" rel="noopener noreferrer" className={ghost}>
+          LinkedIn
+        </a>
+        <a href="#contact" className={ghost} onClick={onClose}>
+          {labels.contact.form}
+        </a>
+      </div>
+    </>
+  );
+}

app/components/fenster/WindowProvider.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import { createContext, useCallback, useContext, useEffect, useId, useRef, useState, type RefObject } from "react";
+import { AnimatePresence, motion, useDragControls } from "framer-motion";
+import { Drawer } from "vaul";
+import WindowContent, { windowAccent, windowTitle } from "./WindowContent";
+import { windowId, type WindowLabels, type WindowRequest } from "./types";
+
+type OpenWindow = (req: WindowRequest, trigger?: HTMLElement | null) => void;
+
+const WindowContext = createContext<OpenWindow | null>(null);
+
+/** Öffnet ein Fenster (Desktop) oder Sheet (Handy). Ohne Provider passiert nichts. */
+export function useOpenWindow(): OpenWindow | null {
+  return useContext(WindowContext);
+}
+
+interface WinState {
+  id: string;
+  req: WindowRequest;
+  x: number;
+  y: number;
+  z: number;
+  minimized: boolean;
+  /** Punkt, von dem aus das Fenster aufgeht (relativ zum Fenster) */
+  origin: { x: number; y: number };
+  trigger: HTMLElement | null;
+}
+
+const WIN_WIDTH = 440;
+
+export default function WindowProvider({ labels, children }: { labels: WindowLabels; children: React.ReactNode }) {
+  const [wins, setWins] = useState<WinState[]>([]);
+  const [sheet, setSheet] = useState<{ req: WindowRequest; trigger: HTMLElement | null } | null>(null);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const layerRef = useRef<HTMLDivElement>(null);
+  const zTop = useRef(10);
+  const opened = useRef(0);
+
+  const open = useCallback<OpenWindow>((req, trigger = null) => {
+    const desktop = window.matchMedia?.("(min-width: 768px)")?.matches ?? true;
+    if (!desktop) {
+      setSheet({ req, trigger });
+      setSheetOpen(true);
+      return;
+    }
+    const id = windowId(req);
+    setWins((prev) => {
+      const existing = prev.find((w) => w.id === id);
+      if (existing) {
+        return prev.map((w) => (w.id === id ? { ...w, minimized: false, z: ++zTop.current } : w));
+      }
+      const W = window.innerWidth;
+      const H = window.innerHeight;
+      const width = Math.min(WIN_WIDTH, W - 32);
+      const step = opened.current++ % 5;
+      const x = Math.max(16, Math.min(W - width - 16, W / 2 - width / 2 + step * 34 - 60));
+      const y = Math.max(76, Math.min(H - 420, H * 0.16 + step * 30));
+      const r = trigger?.getBoundingClientRect();
+      const origin = r ? { x: r.left + r.width / 2 - x, y: r.top + r.height / 2 - y } : { x: width / 2, y: 0 };
+      return [...prev, { id, req, x, y, z: ++zTop.current, minimized: false, origin, trigger }];
+    });
+  }, []);
+
+  const close = useCallback((id: string) => {
+    setWins((prev) => {
+      const w = prev.find((x) => x.id === id);
+      // Fokus zurück dorthin, wo das Fenster herkam
+      if (w?.trigger?.isConnected) requestAnimationFrame(() => w.trigger?.focus({ preventScroll: true }));
+      return prev.filter((x) => x.id !== id);
+    });
+  }, []);
+
+  const minimize = useCallback((id: string) => {
+    setWins((prev) => prev.map((w) => (w.id === id ? { ...w, minimized: true } : w)));
+  }, []);
+
+  const focusWin = useCallback((id: string) => {
+    setWins((prev) => {
+      const top = prev.reduce((a, b) => (b.z > a.z ? b : a), prev[0]);
+      // Schon vorn und sichtbar: nichts zu tun (ein abgelegtes Fenster muss trotzdem zurück)
+      if (top?.id === id && !top.minimized) return prev;
+      return prev.map((w) => (w.id === id ? { ...w, z: ++zTop.current, minimized: false } : w));
+    });
+  }, []);
+
+  // Escape schließt das oberste offene Fenster
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape") return;
+      const visible = wins.filter((w) => !w.minimized);
+      if (!visible.length) return;
+      const top = visible.reduce((a, b) => (b.z > a.z ? b : a));
+      close(top.id);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [wins, close]);
+
+  return (
+    <WindowContext.Provider value={open}>
+      {children}
+
+      {/* Desktop: Fenster schweben über der Seite, die Seite bleibt bedienbar */}
+      <div ref={layerRef} className="pointer-events-none fixed inset-0 z-[60]" aria-live="off">
+        <AnimatePresence>
+          {wins
+            .filter((w) => !w.minimized)
+            .map((w) => (
+              <Window
+                key={w.id}
+                win={w}
+                labels={labels}
+                layerRef={layerRef}
+                onClose={() => close(w.id)}
+                onMinimize={() => minimize(w.id)}
+                onFocus={() => focusWin(w.id)}
+              />
+            ))}
+        </AnimatePresence>
+      </div>
+
+      <AnimatePresence>
+        {wins.length > 0 && (
+          <motion.nav
+            aria-label={labels.openWindows}
+            className="fixed bottom-[18px] left-1/2 z-[61] hidden max-w-[calc(100vw-32px)] gap-1.5 overflow-x-auto rounded-full bg-ink p-1.5 md:flex"
+            style={{ x: "-50%" }}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 20 }}
+            transition={{ duration: 0.25, ease: [0.23, 1, 0.32, 1] }}
+          >
+            {wins.map((w) => (
+              <button
+                key={w.id}
+                type="button"
+                onClick={() => focusWin(w.id)}
+                className={`inline-flex items-center gap-2 whitespace-nowrap rounded-full px-3.5 py-2 text-[13px] font-medium transition-[background-color,transform] duration-150 ease-out hover:bg-paper/15 active:scale-[0.97] ${
+                  w.minimized ? "text-paper/60" : "text-paper"
+                }`}
+              >
+                <span className="h-2 w-2 rounded-full border border-paper/40" style={{ background: windowAccent(w.req) }} aria-hidden="true" />
+                {windowTitle(w.req, labels).split(" · ")[0]}
+              </button>
+            ))}
+          </motion.nav>
+        )}
+      </AnimatePresence>
+
+      {/* Handy: ein Sheet von unten, nach unten ziehen schließt */}
+      <Drawer.Root
+        open={sheetOpen}
+        onOpenChange={(o) => {
+          setSheetOpen(o);
+          if (!o && sheet?.trigger?.isConnected) requestAnimationFrame(() => sheet.trigger?.focus({ preventScroll: true }));
+        }}
+      >
+        <Drawer.Portal>
+          <Drawer.Overlay className="fixed inset-0 z-[70] bg-ink/40" />
+          <Drawer.Content
+            className="fixed inset-x-0 bottom-0 z-[71] flex max-h-[88svh] flex-col rounded-t-[22px] border-2 border-b-0 border-ink bg-paper text-ink outline-none"
+            aria-describedby={undefined}
+          >
+            <Drawer.Handle className="!mt-2.5 !h-[5px] !w-11 !bg-ink/30" />
+            {sheet && (
+              <>
+                <div className="flex items-center gap-3 border-b-2 border-ink px-5 pb-3 pt-2">
+                  <Drawer.Title className="flex-1 truncate font-mono text-[13px] font-normal">{windowTitle(sheet.req, labels)}</Drawer.Title>
+                  <Drawer.Close
+                    className="grid h-8 w-8 place-items-center rounded-full border-2 border-ink text-[15px] font-semibold transition-transform duration-150 ease-out active:scale-95"
+                    aria-label={labels.close}
+                  >
+                    ×
+                  </Drawer.Close>
+                </div>
+                <div className="grid gap-4 overflow-y-auto overscroll-contain p-5 pb-[calc(20px+env(safe-area-inset-bottom,0px))]">
+                  <WindowContent req={sheet.req} labels={labels} onClose={() => setSheetOpen(false)} />
+                </div>
+              </>
+            )}
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </WindowContext.Provider>
+  );
+}
+
+interface WindowProps {
+  win: WinState;
+  labels: WindowLabels;
+  layerRef: RefObject<HTMLDivElement | null>;
+  onClose: () => void;
+  onMinimize: () => void;
+  onFocus: () => void;
+}
+
+function Window({ win, labels, layerRef, onClose, onMinimize, onFocus }: WindowProps) {
+  const controls = useDragControls();
+  const [lifted, setLifted] = useState(false);
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const titleId = useId();
+
+  useEffect(() => {
+    closeRef.current?.focus({ preventScroll: true });
+  }, []);
+
+  return (
+    <motion.div
+      role="dialog"
+      aria-labelledby={titleId}
+      drag
+      dragListener={false}
+      dragControls={controls}
+      dragConstraints={layerRef}
+      dragElastic={0.15}
+      dragTransition={{ power: 0.3, timeConstant: 300, bounceStiffness: 260, bounceDamping: 24 }}
+      onDragStart={() => setLifted(true)}
+      onDragEnd={() => setLifted(false)}
+      onPointerDown={onFocus}
+      initial={{ opacity: 0, scale: 0.86 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.96, transition: { duration: 0.15, ease: [0.23, 1, 0.32, 1] } }}
+      transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
+      className={`pointer-events-auto fixed flex max-h-[calc(100vh-120px)] w-[min(440px,calc(100vw-32px))] flex-col rounded-[18px] border-2 border-ink bg-paper text-ink transition-shadow duration-200 ease-out ${
+        lifted ? "shadow-[16px_18px_0_rgb(var(--plakat-ink))]" : "shadow-[8px_8px_0_rgb(var(--plakat-ink))]"
+      }`}
+      style={{ left: win.x, top: win.y, zIndex: win.z, transformOrigin: `${win.origin.x}px ${win.origin.y}px` }}
+    >
+      <div
+        className="flex cursor-grab touch-none select-none items-center gap-2.5 border-b-2 border-ink py-2.5 pl-4 pr-2.5 active:cursor-grabbing"
+        onPointerDown={(e) => {
+          if ((e.target as HTMLElement).closest("button")) return;
+          controls.start(e);
+        }}
+      >
+        <span id={titleId} className="flex-1 truncate font-mono text-[13px]">
+          {windowTitle(win.req, labels)}
+        </span>
+        <HeadButton label={labels.minimize} onClick={onMinimize}>
+          –
+        </HeadButton>
+        <HeadButton label={labels.close} onClick={onClose} buttonRef={closeRef}>
+          ×
+        </HeadButton>
+      </div>
+      <div className="grid gap-4 overflow-y-auto overscroll-contain p-5">
+        <WindowContent req={win.req} labels={labels} onClose={onClose} />
+      </div>
+    </motion.div>
+  );
+}
+
+function HeadButton({
+  label,
+  onClick,
+  buttonRef,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  buttonRef?: RefObject<HTMLButtonElement | null>;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      aria-label={label}
+      onClick={onClick}
+      className="grid h-[30px] w-[30px] place-items-center rounded-full border-2 border-ink bg-paper text-[15px] font-semibold transition-[background-color,transform] duration-150 ease-out hover:bg-signal active:scale-[0.94]"
+    >
+      <span aria-hidden="true">{children}</span>
+    </button>
+  );
+}

app/components/fenster/getWindowLabels.ts

@@ -0,0 +1,55 @@
+import { getTranslations } from "next-intl/server";
+import type { WindowLabels } from "./types";
+
+/** Alle Texte für Fenster und Sheets, serverseitig geladen und als Props weitergereicht. */
+export async function getWindowLabels(locale: string): Promise<WindowLabels> {
+  const t = await getTranslations({ locale, namespace: "home.windows" });
+  const tisch = await getTranslations({ locale, namespace: "home.tisch" });
+
+  return {
+    close: t("close"),
+    minimize: t("minimize"),
+    openWindows: t("openWindows"),
+    projectPage: t("projectPage"),
+    source: t("source"),
+    live: t("live"),
+    stack: t("stack"),
+    year: t("year"),
+    now: {
+      title: t("now.title"),
+      days: t("now.days"),
+      rows: (["study", "work", "side"] as const).map((k) => ({ label: t(`now.${k}.label`), text: t(`now.${k}.text`) })),
+    },
+    server: {
+      title: t("server.title"),
+      headline: t("server.headline"),
+      rows: (["ingress", "mail", "home"] as const).map((k) => ({
+        name: tisch(`servers.${k}.name`),
+        detail: tisch(`servers.${k}.detail`),
+      })),
+      note: tisch("serverNote"),
+    },
+    read: {
+      title: t("read.title"),
+      progress: t("read.progress"),
+      empty: t("read.empty"),
+      library: t("read.library"),
+      libraryHref: `/${locale}/books`,
+    },
+    about: {
+      title: t("about.title"),
+      paragraphs: [t("about.p1"), t("about.p2")],
+      facts: (["laptop", "pc", "study", "languages"] as const).map((k) => ({
+        label: t(`about.facts.${k}.label`),
+        value: t(`about.facts.${k}.value`),
+      })),
+    },
+    contact: {
+      title: t("contact.title"),
+      body: t("contact.body"),
+      copy: t("contact.copy"),
+      copied: t("contact.copied"),
+      form: t("contact.form"),
+    },
+  };
+}

app/components/fenster/types.ts

@@ -0,0 +1,55 @@
+import type { TischProject } from "../tisch/types";
+
+// Was ein Fenster (Desktop) bzw. Sheet (Handy) zeigen kann
+export type WindowRequest =
+  | { kind: "project"; project: TischProject }
+  | { kind: "now" }
+  | { kind: "server" }
+  | { kind: "read" }
+  | { kind: "about" }
+  | { kind: "contact" };
+
+export function windowId(req: WindowRequest): string {
+  return req.kind === "project" ? `project:${req.project.id}` : req.kind;
+}
+
+export interface WindowLabels {
+  close: string;
+  minimize: string;
+  openWindows: string;
+  projectPage: string;
+  source: string;
+  live: string;
+  stack: string;
+  year: string;
+  now: {
+    title: string;
+    days: string;
+    rows: { label: string; text: string }[];
+  };
+  server: {
+    title: string;
+    headline: string;
+    rows: { name: string; detail: string }[];
+    note: string;
+  };
+  read: {
+    title: string;
+    progress: string;
+    empty: string;
+    library: string;
+    libraryHref: string;
+  };
+  about: {
+    title: string;
+    paragraphs: string[];
+    facts: { label: string; value: string }[];
+  };
+  contact: {
+    title: string;
+    body: string;
+    copy: string;
+    copied: string;
+    form: string;
+  };
+}

app/components/tisch/Board.tsx

@@ -0,0 +1,208 @@
+"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 { useOpenWindow } from "../fenster/WindowProvider";
+import { labelFor, windowFor } from "./windowFor";
+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 [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 openWindow = useOpenWindow();
+  const elRef = useRef<HTMLDivElement | null>(null);
+  const openIt = () => openWindow?.(windowFor(obj), elRef.current);
+  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) => {
+        elRef.current = 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={() => !dragged.current && openIt()}
+      onKeyDown={(e) => {
+        if (e.key === " ") {
+          e.preventDefault();
+          openIt();
+        }
+      }}
+      tabIndex={0}
+      role="button"
+      aria-haspopup="dialog"
+      aria-label={labelFor(obj, labels)}
+      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} />
+    </motion.div>
+  );
+}

app/components/tisch/Deck.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { AnimatePresence, motion, useMotionValue, useTransform, type PanInfo, type Variants } from "framer-motion";
+import ObjectFace from "./ObjectFace";
+import { useOpenWindow } from "../fenster/WindowProvider";
+import { labelFor, windowFor } from "./windowFor";
+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 dragged = useRef(false);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const openWindow = useOpenWindow();
+  const openIt = () => openWindow?.(windowFor(obj), cardRef.current);
+  const x = useMotionValue(0);
+  const dragRotate = useTransform(x, [-220, 0, 220], [-14, 0, 14]);
+  const isTop = depth === 0;
+  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
+        ref={cardRef}
+        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 ? () => !dragged.current && openIt() : undefined}
+        onKeyDown={(e) => {
+          if (isTop && e.key === " ") {
+            e.preventDefault();
+            openIt();
+          }
+        }}
+        tabIndex={isTop ? 0 : -1}
+        role="button"
+        aria-haspopup="dialog"
+        aria-label={labelFor(obj, labels)}
+        aria-hidden={!isTop}
+      >
+        <ObjectFace obj={obj} labels={labels} />
+      </motion.div>
+    </motion.div>
+  );
+}

app/components/tisch/ObjectFace.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import type { TischLabels, TischObject } from "./types";
+import { loadCurrentBook, type CurrentBook } from "./currentBook";
+
+interface ObjectFaceProps {
+  obj: TischObject;
+  labels: TischLabels;
+}
+
+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 }: ObjectFaceProps) {
+  switch (obj.kind) {
+    case "project":
+      return (
+        <div className={`${edge} flex flex-col justify-between p-4`} 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>
+      );
+
+    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>
+      );
+  }
+}
+
+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>
+  );
+}

app/components/tisch/TischSection.tsx

@@ -0,0 +1,106 @@
+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,
+      liveUrl: p.live_url && p.live_url !== "#" ? p.live_url : undefined,
+      githubUrl: p.github_url && p.github_url !== "#" ? p.github_url : undefined,
+    };
+  });
+
+  // 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>
+  );
+}

app/components/tisch/currentBook.ts

@@ -0,0 +1,24 @@
+// Aktuelles Buch aus Hardcover (über n8n). Tisch, Stapel und Lese-Fenster teilen sich eine Anfrage.
+
+export 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;
+export 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;
+}

app/components/tisch/types.ts

@@ -0,0 +1,102 @@
+// 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;
+  liveUrl?: string;
+  githubUrl?: 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" },
+];

app/components/tisch/windowFor.ts

@@ -0,0 +1,37 @@
+import type { WindowRequest } from "../fenster/types";
+import type { TischLabels, TischObject } from "./types";
+
+/** Welches Fenster ein Objekt auf dem Tisch öffnet */
+export function windowFor(obj: TischObject): WindowRequest {
+  switch (obj.kind) {
+    case "project":
+      return { kind: "project", project: obj };
+    case "ticket":
+      return { kind: "now" };
+    case "server":
+    case "sticker":
+      return { kind: "server" };
+    case "book":
+      return { kind: "read" };
+    case "photo":
+      return { kind: "about" };
+  }
+}
+
+/** Vorlesetext für das Objekt als Knopf */
+export function labelFor(obj: TischObject, labels: TischLabels): string {
+  switch (obj.kind) {
+    case "project":
+      return obj.title;
+    case "ticket":
+      return labels.ticketTitle;
+    case "server":
+      return labels.serverTitle;
+    case "book":
+      return labels.bookLabel;
+    case "photo":
+      return labels.photoCaption;
+    case "sticker":
+      return labels.sticker;
+  }
+}

app/globals.css

@@ -30,6 +30,13 @@
     --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 {
@@ -52,12 +59,18 @@
     --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: var(--background);
-    color: var(--foreground);
-    font-family: "Inter", sans-serif;
+    background: rgb(var(--plakat-paper));
+    color: rgb(var(--plakat-ink));
+    font-family: var(--font-geist), "Helvetica Neue", Arial, sans-serif;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
@@ -70,8 +83,8 @@ body {
 
 /* Custom Selection */
 ::selection {
-    background: var(--primary); /* Rich brown for better contrast */
-    color: var(--primary-foreground); /* Off-white */
+    background: rgb(var(--plakat-ink));
+    color: rgb(var(--plakat-paper));
 }
 
 /* Smooth Scrolling */
@@ -135,18 +148,11 @@ h3,
 h4,
 h5,
 h6 {
-    font-family: var(--font-playfair), Georgia, serif;
+    font-family: var(--font-bricolage), "Avenir Next", "Segoe UI", sans-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 {

app/layout.tsx

@@ -1,24 +1,31 @@
 import "./globals.css";
 import { Metadata } from "next";
-import { Inter, Playfair_Display } from "next/font/google";
+import { Bricolage_Grotesque, Geist, Geist_Mono } 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";
 
-const inter = Inter({
-  variable: "--font-inter",
+// 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",
   subsets: ["latin"],
   display: "swap",
   adjustFontFallback: true,
 });
 
-const playfair = Playfair_Display({
-  variable: "--font-playfair",
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
   subsets: ["latin"],
   display: "swap",
-  adjustFontFallback: true,
 });
 
 export default async function RootLayout({
@@ -37,9 +44,7 @@ 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={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
-        <div className="grain-overlay" aria-hidden="true" />
-        <ShaderGradientBackground />
+      <body className={`${bricolage.variable} ${geist.variable} ${geistMono.variable}`} suppressHydrationWarning>
         <ClientProviders>{children}</ClientProviders>
       </body>
     </html>

components/BackgroundBlobs.tsx

@@ -1,48 +0,0 @@
-"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;

lib/translations-loader.ts

@@ -2,7 +2,6 @@ import { getLocalizedMessage } from '@/lib/i18n-loader';
 import type {
   NavTranslations,
   FooterTranslations,
-  HeroTranslations,
   AboutTranslations,
   ProjectsTranslations,
   ContactTranslations,
@@ -55,30 +54,6 @@ 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',

messages/de.json

@@ -26,17 +26,114 @@
   },
   "home": {
     "hero": {
-      "badge": "Student & Self-Hoster",
-      "line1": "Building",
-      "line2": "Stuff.",
-      "features": {
-        "f1": "Next.js & Flutter",
-        "f2": "Docker Swarm & CI/CD",
-        "f3": "Self-Hosted Infrastruktur"
+      "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, antippen für Details.",
+      "hintDeck": "Wisch die Karten zur Seite, tipp für Details.",
+      "tidy": "Aufräumen",
+      "mess": "Durcheinander",
+      "flip": "antippen für Details",
+      "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"
+        }
       },
-      "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"
+      "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."
+    },
+    "windows": {
+      "close": "Schließen",
+      "minimize": "Ablegen",
+      "openWindows": "Offene Fenster",
+      "projectPage": "Projektseite",
+      "source": "Quellcode",
+      "live": "Live ansehen",
+      "stack": "Technik",
+      "year": "Jahr",
+      "now": {
+        "title": "jetzt.txt · Stand Oktober 2026",
+        "days": "Tage bis zur Abgabe der Masterarbeit",
+        "study": {
+          "label": "Studium",
+          "text": "Federated Reinforcement Learning für einen Logistik-Hub, Abgabe Mitte Februar 2027"
+        },
+        "work": {
+          "label": "Arbeit",
+          "text": "IT bei einem Unternehmen in Osnabrück, ab Februar 2027 fest als Microsoft-365-Administrator"
+        },
+        "side": {
+          "label": "Nebenher",
+          "text": "nightly, eine App für Gedanken zwischen 2 und 5 Uhr nachts"
+        }
+      },
+      "server": {
+        "title": "server · alle grün",
+        "headline": "Drei Rechner, ein VPN."
+      },
+      "read": {
+        "title": "lesen · aus Hardcover",
+        "progress": "gelesen",
+        "empty": "Gerade liegt kein Buch auf dem Nachttisch.",
+        "library": "Zur Bibliothek"
+      },
+      "about": {
+        "title": "über mich",
+        "p1": "Aufgewachsen bin ich in Lingen, inzwischen wohne ich in Osnabrück. Angefangen hat alles mit einem Raspberry Pi und der Frage, ob ich meine Fotos nicht selbst speichern kann. Daraus sind drei Server geworden.",
+        "p2": "Wenn ich nicht am Rechner sitze, bin ich dienstags bei Body Attack, im Winter auf der Piste oder mit Freunden bei einem Brettspiel.",
+        "facts": {
+          "laptop": {
+            "label": "Arbeitsrechner",
+            "value": "MacBook Pro M4 Pro"
+          },
+          "pc": {
+            "label": "Zum Spielen",
+            "value": "PC mit RTX 3080"
+          },
+          "study": {
+            "label": "Studium",
+            "value": "Master Informatik"
+          },
+          "languages": {
+            "label": "Sprachen",
+            "value": "Deutsch, Englisch"
+          }
+        }
+      },
+      "contact": {
+        "title": "kontakt",
+        "body": "Für Projekte, Fragen zu meinem Setup oder einfach so. Ich antworte normalerweise innerhalb von ein, zwei Tagen.",
+        "copy": "Adresse kopieren",
+        "copied": "Kopiert",
+        "form": "Zum Formular"
+      }
     },
     "about": {
       "title": "Hinter den Kulissen",

messages/en.json

@@ -23,21 +23,117 @@
     "acceptSelected": "Accept selected",
     "rejectAll": "Reject all",
     "hide": "Hide"
-  }
-  ,
+  },
   "home": {
     "hero": {
-      "badge": "Student & Self-Hoster",
-      "line1": "Building",
-      "line2": "Stuff.",
-      "features": {
-        "f1": "Next.js & Flutter",
-        "f2": "Docker Swarm & CI/CD",
-        "f3": "Self-Hosted Infrastructure"
+      "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, tap for details.",
+      "hintDeck": "Swipe the cards aside, tap for details.",
+      "tidy": "Tidy up",
+      "mess": "Mess it up",
+      "flip": "tap for details",
+      "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"
+        }
       },
-      "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"
+      "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."
+    },
+    "windows": {
+      "close": "Close",
+      "minimize": "Minimize",
+      "openWindows": "Open windows",
+      "projectPage": "Project page",
+      "source": "Source",
+      "live": "See it live",
+      "stack": "Stack",
+      "year": "Year",
+      "now": {
+        "title": "now.txt · October 2026",
+        "days": "days until my master's thesis is due",
+        "study": {
+          "label": "Study",
+          "text": "Federated reinforcement learning for a logistics hub, due mid-February 2027"
+        },
+        "work": {
+          "label": "Work",
+          "text": "IT at a company in Osnabrück, from February 2027 full-time as Microsoft 365 administrator"
+        },
+        "side": {
+          "label": "On the side",
+          "text": "nightly, an app for thoughts between 2 and 5 a.m."
+        }
+      },
+      "server": {
+        "title": "servers · all green",
+        "headline": "Three machines, one VPN."
+      },
+      "read": {
+        "title": "reading · from Hardcover",
+        "progress": "read",
+        "empty": "No book on the nightstand right now.",
+        "library": "To the library"
+      },
+      "about": {
+        "title": "about me",
+        "p1": "I grew up in Lingen and now live in Osnabrück. It all started with a Raspberry Pi and the question whether I could store my photos myself. That turned into three servers.",
+        "p2": "When I'm not at the computer, I'm at Body Attack on Tuesdays, on the slopes in winter, or playing board games with friends.",
+        "facts": {
+          "laptop": {
+            "label": "Work machine",
+            "value": "MacBook Pro M4 Pro"
+          },
+          "pc": {
+            "label": "For games",
+            "value": "PC with RTX 3080"
+          },
+          "study": {
+            "label": "Study",
+            "value": "Master's in computer science"
+          },
+          "languages": {
+            "label": "Languages",
+            "value": "German, English"
+          }
+        }
+      },
+      "contact": {
+        "title": "contact",
+        "body": "For projects, questions about my setup or just because. I usually reply within a day or two.",
+        "copy": "Copy address",
+        "copied": "Copied",
+        "form": "To the form"
+      }
     },
     "about": {
       "title": "Behind the Code",
@@ -133,8 +229,7 @@
         "characters": "{count} characters"
       }
     }
-  }
-  ,
+  },
   "projects": {
     "shared": {
       "featured": "Featured"
@@ -154,8 +249,7 @@
       "viewSource": "View Source",
       "techStack": "Tech Stack"
     }
-  }
-  ,
+  },
   "footer": {
     "role": "Software Engineer",
     "madeIn": "Made in Germany",
@@ -201,4 +295,3 @@
     "professional": "Professional"
   }
 }
-

package-lock.json

@@ -34,7 +34,8 @@
         "react-markdown": "^10.1.0",
         "redis": "^5.8.2",
         "sanitize-html": "^2.17.0",
-        "tailwind-merge": "^2.6.0"
+        "tailwind-merge": "^2.6.0",
+        "vaul": "1.1.2"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -2994,6 +2995,323 @@
         "@prisma/debug": "5.22.0"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.2.0.tgz",
+      "integrity": "sha512-KABY+VMIRPJL+Vyzv/335FEhXXD/xDv8BMb1kl48/aXJZMH0LtHCTx5ga5RnxaEP3nZHtmTLf1P9vanmFX46bw==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.5.tgz",
+      "integrity": "sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.3.0.tgz",
+      "integrity": "sha512-v5AYEocMISkbJ+1fTXzZpiFv7NRr3D2WiYbLIKf+FkmJ8VkP6d503eV2n34MFussHXY1pcoq3yfJiQH77dc4Mg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.3.1.tgz",
+      "integrity": "sha512-+0E4qvVTwjAWra9sEhJ+9BTsvHE00zkUuNw1VGh7S+Gc13dfYk+S1PVQdchWDj+XYHhAai7Z7IpzXVDCGsDplg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.2.0",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.3.0",
+        "@radix-ui/react-dismissable-layer": "1.2.1",
+        "@radix-ui/react-focus-guards": "1.2.0",
+        "@radix-ui/react-focus-scope": "1.3.1",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-portal": "1.2.0",
+        "@radix-ui/react-presence": "1.1.11",
+        "@radix-ui/react-primitive": "2.2.0",
+        "@radix-ui/react-slot": "1.5.0",
+        "@radix-ui/react-use-controllable-state": "1.3.0",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.2.1.tgz",
+      "integrity": "sha512-KIfDcAsx+oVylFZ4xryVKusJUrLLhTQmfnJW4kwk4Km5myvhHCrj04hnWWUC166+xD4DHdH8tQGylwYX1h6+Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.2.0",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.2.0",
+        "@radix-ui/react-use-callback-ref": "1.1.5",
+        "@radix-ui/react-use-effect-event": "0.0.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.2.0.tgz",
+      "integrity": "sha512-MPm5R0iRGUDrDnPNxmLBkv+X7pN4XKzt+MbWJEuJQsH3NFH4omrbpXpucyYCCKTSt+na/ZxGhEWQrWTZ0285cA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.3.1.tgz",
+      "integrity": "sha512-ugeMhbXt4y5S2T1GnIqbWDKEN962PDwnX1fN0eKOOgf5f63Dh2mn8F1FUySlgW0iF6GiVsRF32DzuDIWTUyQJg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.2.0",
+        "@radix-ui/react-use-callback-ref": "1.1.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.4.tgz",
+      "integrity": "sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.2.0.tgz",
+      "integrity": "sha512-StX7xXnaRU41VvFtMm9zlhVGz8XF6GmWWTXftkQaY+tqVkbs/R9UmAp5mLzHHapk5hM9RMZQvO/3usyIP/g42g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.2.0",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.11.tgz",
+      "integrity": "sha512-Z7/atlkab36Z8hm+V8zYc79r0W+tiOB1o0tun1By94JyadkekLQmtEAnBSP9XKXBNQsStoStS4+gX10JpS5akA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.2.0.tgz",
+      "integrity": "sha512-HCTSPMNqv55Qk0IX4geJbpyXazmqulcimwuyjxTkKi29v+QZbG2Zho9BnbBq4YS2PF+KlNb2CXoLz66uUmblkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.5.0.tgz",
+      "integrity": "sha512-tyYd9ddPXAysAbdbD9eYxgwpCSv6f3PncqVSNKQFSR5lcJVLz3cb/pANDoYrLiHBpXv7skortyUgGUWsYuPPFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.5.tgz",
+      "integrity": "sha512-Y5GBf4NKeADoXI1geiMlMuMoURT3k9MizzzKhGb/m55H94aGigZ01PIpkvsO6lML13BA6XYAXSJ6gza7vTn5nw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.3.0.tgz",
+      "integrity": "sha512-TAcBI7bw2ljYCbv4+zuTSd6zICu8pRt6SDN2vJ/Z06K2MXh6I9WYFe/A9ovlFDtR5HVHGm5iDxDoABm/++dbKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.2.0",
+        "@radix-ui/react-use-effect-event": "0.0.5",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.5.tgz",
+      "integrity": "sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.4.tgz",
+      "integrity": "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@redis/bloom": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-5.10.0.tgz",
@@ -5013,6 +5331,18 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "license": "Python-2.0"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -6388,6 +6718,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -7742,6 +8078,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -12661,6 +13006,75 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -14518,6 +14932,27 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-intl": {
       "version": "4.8.2",
       "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-4.8.2.tgz",
@@ -14539,6 +14974,28 @@
         "react": "^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0"
       }
     },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
@@ -14577,6 +15034,19 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/vaul": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
+      "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",

package.json

@@ -78,7 +78,8 @@
     "react-markdown": "^10.1.0",
     "redis": "^5.8.2",
     "sanitize-html": "^2.17.0",
-    "tailwind-merge": "^2.6.0"
+    "tailwind-merge": "^2.6.0",
+    "vaul": "1.1.2"
   },
   "browserslist": [
     "chrome >= 100",

tailwind.config.ts

@@ -32,6 +32,14 @@ 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)" },
@@ -43,6 +51,8 @@ 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)",
@@ -78,6 +88,17 @@ 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",
@@ -122,9 +143,10 @@ export default {
         },
       },
       fontFamily: {
-        sans: ["var(--font-inter)", "sans-serif"],
-        serif: ["var(--font-playfair)", "Georgia", "serif"],
-        mono: ["var(--font-roboto-mono)", "Monaco", "Courier New", "monospace"],
+        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"],
       },
     },
   },

types/translations.ts

@@ -20,17 +20,6 @@ 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;