diff --git a/app/layout.tsx b/app/layout.tsx
index 580fcd6..ba7bf45 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,7 +5,6 @@
  */
 
 import type { Metadata } from 'next';
-import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import './globals.css';
 import { SubpageNav } from '@/components/SubpageNav';
@@ -13,11 +12,8 @@ import { ThemeToggle } from '@/components/ThemeToggle';
 import { ScrollToTop } from '@/components/ScrollToTop';
 import { Footer } from '@/components/Footer';
 import { getConfig, getGoogleFontsUrl, AppConfig } from '@/lib/config';
-
-// Lazy-load DevToolbar — keeps 17KB+ out of the production bundle
-const DevToolbar = dynamic(() => import('@/components/DevToolbar').then(m => ({ default: m.DevToolbar })), {
-  ssr: false,
-});
+// DevToolbarLoader ist eine Client Component (ssr: false nur dort erlaubt)
+import { DevToolbarLoader } from '@/components/DevToolbarLoader';
 
 export async function generateMetadata(): Promise<Metadata> {
   const config = getConfig();
@@ -181,7 +177,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <main className="main">{children}</main>
         <Footer />
         <ScrollToTop />
-        {process.env.NODE_ENV === 'development' && <DevToolbar />}
+        {process.env.NODE_ENV === 'development' && <DevToolbarLoader />}
       </body>
     </html>
   );
diff --git a/components/DevToolbarLoader.tsx b/components/DevToolbarLoader.tsx
new file mode 100644
index 0000000..7d2f179
--- /dev/null
+++ b/components/DevToolbarLoader.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+// ssr: false ist nur in Client Components erlaubt
+const DevToolbar = dynamic(
+  () => import('@/components/DevToolbar').then(m => ({ default: m.DevToolbar })),
+  { ssr: false }
+);
+
+export function DevToolbarLoader() {
+  return <DevToolbar />;
+}