From 27fb01f6195da589ba01758cc1c9a29730a1cbbc Mon Sep 17 00:00:00 2001
From: denode <admin@denode.eu>
Date: Wed, 20 May 2026 21:52:36 +0200
Subject: [PATCH] responsive design

---
 frontend/app/layout.tsx        |  2 +-
 frontend/app/page.tsx          |  2 +-
 frontend/app/sammlung/page.tsx |  2 +-
 frontend/components/ui/Nav.tsx | 52 +++++++++++++++++++++++++++++-----
 4 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index b74c17c..cdf9a87 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -14,7 +14,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <Nav />
         <main className="min-h-screen">{children}</main>
         <footer className="border-t border-[var(--warm)] mt-24 py-10 px-6">
-          <div className="max-w-6xl mx-auto flex items-center justify-between text-sm text-[var(--muted)]">
+          <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 text-sm text-[var(--muted)]">
             <span style={{ fontFamily: "'Syne', sans-serif", fontWeight: 600 }}>
               Kennzeichensammler
             </span>
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 8eebacd..d4b1882 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -67,7 +67,7 @@ export default async function Home() {
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-3 gap-4 mb-20">
+      <div className="grid grid-cols-3 gap-3 sm:gap-4 mb-20">
         {[
           { label: "Kennzeichen", value: stats.kennzeichen.toLocaleString("de") },
           { label: "Diplomaten­kz.", value: stats.diplomaten.toLocaleString("de") },
diff --git a/frontend/app/sammlung/page.tsx b/frontend/app/sammlung/page.tsx
index 64681d4..48cd55c 100644
--- a/frontend/app/sammlung/page.tsx
+++ b/frontend/app/sammlung/page.tsx
@@ -39,7 +39,7 @@ export default async function SammlungPage() {
         <h1 style={{ fontFamily:"'Syne',sans-serif", fontWeight:800, fontSize:"2.25rem", letterSpacing:"-0.03em" }} className="text-[var(--ink)]">Meine Sammlung</h1>
       </div>
       <div className="border border-[var(--warm)] rounded-lg p-8 bg-white/40 mb-8">
-        <div className="flex items-end justify-between mb-4">
+        <div className="flex flex-wrap items-end justify-between gap-2 mb-4">
           <div>
             <div style={{ fontFamily:"'Syne',sans-serif", fontWeight:800, fontSize:"3rem", lineHeight:1 }} className="text-[var(--ink)]">{stats.total.toLocaleString("de")}</div>
             <div className="text-[var(--muted)] text-sm mt-1">von {stats.totalKz.toLocaleString("de")} Kennzeichen gesehen</div>
diff --git a/frontend/components/ui/Nav.tsx b/frontend/components/ui/Nav.tsx
index 6818c22..fed1913 100644
--- a/frontend/components/ui/Nav.tsx
+++ b/frontend/components/ui/Nav.tsx
@@ -1,30 +1,35 @@
 "use client";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useState } from "react";
 import clsx from "clsx";
 
 const links = [
-  { href: "/",                     label: "Start"        },
-  { href: "/kennzeichen",          label: "Datenbank"    },
-  { href: "/diplomatenkennzeichen",label: "Diplomaten"   },
-  { href: "/sammlung",             label: "Sammlung"     },
-  { href: "/blog",                 label: "Blog"         },
+  { href: "/",                      label: "Start"      },
+  { href: "/kennzeichen",           label: "Datenbank"  },
+  { href: "/diplomatenkennzeichen", label: "Diplomaten" },
+  { href: "/sammlung",              label: "Sammlung"   },
+  { href: "/blog",                  label: "Blog"       },
 ];
 
 export default function Nav() {
   const path = usePathname();
+  const [open, setOpen] = useState(false);
 
   return (
     <header className="sticky top-0 z-50 border-b border-[var(--warm)] bg-[var(--paper)]/90 backdrop-blur-sm">
       <div className="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
         <Link
           href="/"
-          style={{ fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 15, letterSpacing: "0em" }}
+          style={{ fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 15 }}
           className="text-[var(--ink)] hover:text-[var(--accent)] transition-colors"
+          onClick={() => setOpen(false)}
         >
           Kennzeichensammler
         </Link>
-        <nav className="flex items-center gap-1">
+
+        {/* Desktop nav */}
+        <nav className="hidden sm:flex items-center gap-1">
           {links.map((l) => (
             <Link
               key={l.href}
@@ -41,7 +46,40 @@ export default function Nav() {
             </Link>
           ))}
         </nav>
+
+        {/* Mobile hamburger */}
+        <button
+          className="sm:hidden flex flex-col gap-1.5 p-2 -mr-2"
+          onClick={() => setOpen((o) => !o)}
+          aria-label="Menü"
+        >
+          <span className={clsx("block w-5 h-0.5 bg-[var(--ink)] transition-all origin-center", open && "rotate-45 translate-y-2")} />
+          <span className={clsx("block w-5 h-0.5 bg-[var(--ink)] transition-all", open && "opacity-0")} />
+          <span className={clsx("block w-5 h-0.5 bg-[var(--ink)] transition-all origin-center", open && "-rotate-45 -translate-y-2")} />
+        </button>
       </div>
+
+      {/* Mobile menu */}
+      {open && (
+        <div className="sm:hidden border-t border-[var(--warm)] bg-[var(--paper)] px-4 py-3 flex flex-col gap-1">
+          {links.map((l) => (
+            <Link
+              key={l.href}
+              href={l.href}
+              onClick={() => setOpen(false)}
+              className={clsx(
+                "px-3 py-2.5 rounded-md text-sm transition-colors",
+                path === l.href
+                  ? "bg-[var(--ink)] text-[var(--paper)]"
+                  : "text-[var(--muted)] hover:text-[var(--ink)] hover:bg-[var(--warm)]"
+              )}
+              style={{ fontFamily: "'Syne', sans-serif", fontWeight: 500 }}
+            >
+              {l.label}
+            </Link>
+          ))}
+        </div>
+      )}
     </header>
   );
 }