fix: add AdminNav, auth and CSS variables to all CMS admin pages

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

app/admin/galerie/page.tsx

@@ -1,16 +1,28 @@
 export const dynamic = 'force-dynamic'
+import { redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { verifySessionToken } from '@/lib/admin-auth'
+import { AdminNav } from '@/components/admin/AdminNav'
 import { GalerieVerwaltung } from '@/components/admin/GalerieVerwaltung'
 import type { Metadata } from 'next'
 
-export const metadata: Metadata = { title: 'Galerie' }
+export const metadata: Metadata = { title: 'Galerie – Admin' }
+
+export default async function AdminGaleriePage() {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('admin_session')?.value
+  const session = token ? await verifySessionToken(token) : null
+  if (!session) redirect('/admin/login')
 
-export default function AdminGaleriePage() {
   return (
-    <div className="max-w-5xl mx-auto px-4 py-8">
-      <h1 className="text-2xl font-bold tracking-tight mb-6" style={{ color: 'var(--text-primary)' }}>
-        Galerie verwalten
-      </h1>
-      <GalerieVerwaltung />
+    <div className="min-h-screen bg-[#111925]">
+      <AdminNav />
+      <div className="max-w-5xl mx-auto px-4 py-8">
+        <h1 className="text-2xl font-bold tracking-tight mb-6" style={{ color: 'var(--text-primary)' }}>
+          Galerie verwalten
+        </h1>
+        <GalerieVerwaltung />
+      </div>
     </div>
   )
 }

app/admin/hero/page.tsx

@@ -1,16 +1,28 @@
 export const dynamic = 'force-dynamic'
+import { redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { verifySessionToken } from '@/lib/admin-auth'
+import { AdminNav } from '@/components/admin/AdminNav'
 import { HeroVerwaltung } from '@/components/admin/HeroVerwaltung'
 import type { Metadata } from 'next'
 
-export const metadata: Metadata = { title: 'Hero' }
+export const metadata: Metadata = { title: 'Hero – Admin' }
+
+export default async function AdminHeroPage() {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('admin_session')?.value
+  const session = token ? await verifySessionToken(token) : null
+  if (!session) redirect('/admin/login')
 
-export default function AdminHeroPage() {
   return (
-    <div className="max-w-4xl mx-auto px-4 py-8">
-      <h1 className="text-2xl font-bold tracking-tight mb-6" style={{ color: 'var(--text-primary)' }}>
-        Hero-Sektion
-      </h1>
-      <HeroVerwaltung />
+    <div className="min-h-screen bg-[#111925]">
+      <AdminNav />
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <h1 className="text-2xl font-bold tracking-tight mb-6" style={{ color: 'var(--text-primary)' }}>
+          Hero-Sektion
+        </h1>
+        <HeroVerwaltung />
+      </div>
     </div>
   )
 }

app/admin/kontakt/page.tsx

@@ -1,16 +1,28 @@
 export const dynamic = 'force-dynamic'
+import { redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { verifySessionToken } from '@/lib/admin-auth'
+import { AdminNav } from '@/components/admin/AdminNav'
 import { KontaktVerwaltung } from '@/components/admin/KontaktVerwaltung'
 import type { Metadata } from 'next'
 
-export const metadata: Metadata = { title: 'Kontakt' }
+export const metadata: Metadata = { title: 'Kontakt – Admin' }
+
+export default async function AdminKontaktPage() {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('admin_session')?.value
+  const session = token ? await verifySessionToken(token) : null
+  if (!session) redirect('/admin/login')
 
-export default function AdminKontaktPage() {
   return (
-    <div className="max-w-5xl mx-auto px-4 py-8">
-      <h1 className="text-2xl font-bold tracking-tight mb-6" style={{ color: 'var(--text-primary)' }}>
-        Kontaktdaten
-      </h1>
-      <KontaktVerwaltung />
+    <div className="min-h-screen bg-[#111925]">
+      <AdminNav />
+      <div className="max-w-5xl mx-auto px-4 py-8">
+        <h1 className="text-2xl font-bold tracking-tight mb-6" style={{ color: 'var(--text-primary)' }}>
+          Kontaktdaten
+        </h1>
+        <KontaktVerwaltung />
+      </div>
     </div>
   )
 }

app/admin/layout.tsx

@@ -1,5 +1,19 @@
 import { SessionTimeoutProvider } from "@/components/admin/SessionTimeoutProvider";
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
-  return <SessionTimeoutProvider>{children}</SessionTimeoutProvider>;
+  return (
+    <SessionTimeoutProvider>
+      <style>{`
+        :root {
+          --bg: #111925;
+          --surface: #18212f;
+          --border-color: rgba(148, 163, 184, 0.15);
+          --text-primary: #f1f5f9;
+          --text-muted: #64748b;
+          --accent: #f97316;
+        }
+      `}</style>
+      {children}
+    </SessionTimeoutProvider>
+  );
 }

app/admin/passwort/page.tsx

@@ -2,7 +2,11 @@ export const dynamic = 'force-dynamic'
 import { redirect } from 'next/navigation'
 import { cookies } from 'next/headers'
 import { verifySessionToken } from '@/lib/admin-auth'
+import { AdminNav } from '@/components/admin/AdminNav'
 import PasswortAendern from '@/components/admin/PasswortAendern'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = { title: 'Passwort – Admin' }
 
 export default async function PasswortPage() {
   const cookieStore = await cookies()
@@ -11,14 +15,17 @@ export default async function PasswortPage() {
   if (!session) redirect('/admin/login')
 
   return (
-    <div style={{ padding: '32px', maxWidth: '600px' }}>
-      <h1 style={{ fontSize: '20px', fontWeight: 800, color: 'var(--text-primary)', marginBottom: '8px' }}>
-        Passwort ändern
-      </h1>
-      <p style={{ fontSize: '13px', color: 'var(--text-muted)', marginBottom: '28px' }}>
-        Angemeldet als <strong>{session.email}</strong>
-      </p>
-      <PasswortAendern />
+    <div className="min-h-screen bg-[#111925]">
+      <AdminNav />
+      <div className="max-w-2xl mx-auto px-4 py-8">
+        <h1 className="text-2xl font-bold tracking-tight mb-2" style={{ color: 'var(--text-primary)' }}>
+          Passwort ändern
+        </h1>
+        <p style={{ fontSize: '13px', color: 'var(--text-muted)', marginBottom: '28px' }}>
+          Angemeldet als <strong style={{ color: 'var(--text-primary)' }}>{session.email}</strong>
+        </p>
+        <PasswortAendern />
+      </div>
     </div>
   )
 }

app/admin/ueber-uns/page.tsx

@@ -1,16 +1,28 @@
 export const dynamic = 'force-dynamic'
+import { redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { verifySessionToken } from '@/lib/admin-auth'
+import { AdminNav } from '@/components/admin/AdminNav'
 import { UeberUnsVerwaltung } from '@/components/admin/UeberUnsVerwaltung'
 import type { Metadata } from 'next'
 
-export const metadata: Metadata = { title: 'Über uns' }
+export const metadata: Metadata = { title: 'Über uns – Admin' }
+
+export default async function AdminUeberUnsPage() {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('admin_session')?.value
+  const session = token ? await verifySessionToken(token) : null
+  if (!session) redirect('/admin/login')
 
-export default function AdminUeberUnsPage() {
   return (
-    <div className="max-w-4xl mx-auto px-4 py-8">
-      <h1 className="text-2xl font-bold tracking-tight mb-6" style={{ color: 'var(--text-primary)' }}>
-        Über uns
-      </h1>
-      <UeberUnsVerwaltung />
+    <div className="min-h-screen bg-[#111925]">
+      <AdminNav />
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <h1 className="text-2xl font-bold tracking-tight mb-6" style={{ color: 'var(--text-primary)' }}>
+          Über uns
+        </h1>
+        <UeberUnsVerwaltung />
+      </div>
     </div>
   )
 }