feat: App-Versionierung + Cookie-Consent Banner

next.config.js

@@ -1,5 +1,10 @@
+const packageJson = require('./package.json')
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  env: {
+    APP_VERSION: packageJson.version,
+  },
   output: 'standalone',
   async headers() {
     return [

src/app/layout.tsx

@@ -4,6 +4,7 @@ import './globals.css'
 import { Toaster } from '@/components/ui/toaster'
 import { AuthProvider } from '@/components/providers/auth-provider'
 import { ServiceWorkerRegister } from '@/components/providers/sw-register'
+import { CookieConsent } from '@/components/ui/cookie-consent'
 
 const inter = Inter({
   subsets: ['latin'],
@@ -109,6 +110,7 @@ export default function RootLayout({
           <ServiceWorkerRegister />
           {children}
           <Toaster />
+          <CookieConsent />
         </AuthProvider>
       </body>
     </html>

src/app/page.tsx

@@ -500,6 +500,7 @@ export default function LandingPage() {
           <div className="border-t border-gray-100 mt-8 pt-6 text-center space-y-1">
             <p className="text-sm text-gray-500">&copy; {new Date().getFullYear()} Lageplan — Purepixel. Alle Rechte vorbehalten.</p>
             <p className="text-xs text-gray-500">Taktische Symbole: Bildquelle Feuerwehr Koordination Schweiz FKS</p>
+            <p className="text-xs text-gray-400 mt-1">v{process.env.APP_VERSION}</p>
           </div>
         </div>
       </footer>

src/components/layout/topbar.tsx

@@ -147,6 +147,7 @@ export function Topbar({
         <div className="flex items-center gap-1.5 md:gap-2">
           <Logo size={32} />
           <span className="font-semibold text-lg hidden md:inline">Lageplan</span>
+          <span className="text-[10px] text-muted-foreground hidden md:inline">v{process.env.APP_VERSION}</span>
         </div>
 
         <div className="h-6 w-px bg-border hidden md:block" />

src/components/ui/cookie-consent.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { Cookie } from 'lucide-react'
+
+export function CookieConsent() {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const consent = localStorage.getItem('cookie-consent')
+    if (!consent) {
+      const timer = setTimeout(() => setVisible(true), 1000)
+      return () => clearTimeout(timer)
+    }
+  }, [])
+
+  const accept = () => {
+    localStorage.setItem('cookie-consent', 'accepted')
+    setVisible(false)
+  }
+
+  const decline = () => {
+    localStorage.setItem('cookie-consent', 'declined')
+    setVisible(false)
+  }
+
+  if (!visible) return null
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-[9999] p-4 animate-in slide-in-from-bottom-4 duration-500">
+      <div className="max-w-3xl mx-auto bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-2xl p-5 md:p-6">
+        <div className="flex items-start gap-4">
+          <div className="shrink-0 mt-0.5">
+            <Cookie className="w-7 h-7 text-red-600" />
+          </div>
+          <div className="flex-1 space-y-3">
+            <h3 className="font-semibold text-gray-900 dark:text-gray-100 text-sm md:text-base">
+              Wir verwenden Cookies
+            </h3>
+            <p className="text-xs md:text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
+              Diese Website verwendet technisch notwendige Cookies, um die Authentifizierung und
+              grundlegende Funktionen zu ermöglichen. Es werden keine Tracking- oder Werbe-Cookies eingesetzt.
+              Weitere Informationen findest du in unserer{' '}
+              <Link href="/datenschutz" className="text-red-600 hover:text-red-500 underline">
+                Datenschutzerklärung
+              </Link>.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-2 pt-1">
+              <Button
+                onClick={accept}
+                className="bg-red-600 hover:bg-red-700 text-white text-sm h-9 px-6"
+              >
+                Akzeptieren
+              </Button>
+              <Button
+                onClick={decline}
+                variant="outline"
+                className="text-sm h-9 px-6"
+              >
+                Nur notwendige
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}