feat: ultimate dynamic editorial overhaul

Automated CMS content seeding, integrated interactive AI Chat into Bento grid, implemented intelligent idle quote logic, and unified editorial styling across all sub-pages.

app/legal-notice/page.tsx

@@ -24,42 +24,34 @@ export default function LegalNotice() {
           `/api/content/page?key=${encodeURIComponent("legal-notice")}&locale=${encodeURIComponent(locale)}`,
         );
         const data = await res.json();
-        // Only use CMS content if it exists for the active locale.
         if (data?.content?.content && data?.content?.locale === locale) {
           setCmsDoc(data.content.content as JSONContent);
           setCmsTitle((data.content.title as string | null) ?? null);
-        } else {
-          setCmsDoc(null);
-          setCmsTitle(null);
         }
-      } catch {
-        // ignore; fallback to static content
-        setCmsDoc(null);
-        setCmsTitle(null);
-      }
+      } catch {}
     })();
   }, [locale]);
 
   return (
-    <div className="min-h-screen animated-bg">
+    <div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500">
       <Header />
-      <main className="max-w-4xl mx-auto px-4 pt-32 pb-20">
+      <main className="max-w-7xl mx-auto px-6 pt-40 pb-20">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
-          className="mb-8"
+          className="mb-12"
         >
           <Link
             href={`/${locale}`}
-            className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
+            className="inline-flex items-center gap-2 text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors mb-10 group"
           >
-            <ArrowLeft size={20} />
-            <span>{t("backToHome")}</span>
+            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
+            <span className="font-bold uppercase tracking-widest text-xs">{t("backToHome")}</span>
           </Link>
           
-          <h1 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
-            {cmsTitle || "Impressum"}
+          <h1 className="text-6xl md:text-[8rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
+            Legal<span className="text-liquid-mint">.</span>
           </h1>
         </motion.div>
 
@@ -67,69 +59,34 @@ export default function LegalNotice() {
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.2 }}
-          className="glass-card p-8 rounded-2xl space-y-6"
+          className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
         >
           {cmsDoc ? (
-            <RichTextClient doc={cmsDoc} className="prose prose-invert max-w-none text-gray-300" />
+            <div className="prose prose-stone dark:prose-invert max-w-none text-lg md:text-xl font-light leading-relaxed">
+              <RichTextClient doc={cmsDoc} />
+            </div>
           ) : (
-            <>
-              <div className="text-gray-300 leading-relaxed">
-                <h2 className="text-2xl font-semibold mb-4">Verantwortlicher für die Inhalte dieser Website</h2>
-                <div className="space-y-2 text-gray-300">
-                  <p>
-                    <strong>Name:</strong> Dennis Konkol
-                  </p>
-                  <p>
-                    <strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland
-                  </p>
-                  <p>
-                    <strong>E-Mail:</strong>{" "}
-                    <Link href="mailto:info@dki.one" className="text-blue-400 hover:text-blue-300 transition-colors">
-                      info@dk0.dev
-                    </Link>
-                  </p>
-                  <p>
-                    <strong>Website:</strong>{" "}
-                    <Link href="https://www.dk0.dev" className="text-blue-400 hover:text-blue-300 transition-colors">
-                      dk0.dev
-                    </Link>
-                  </p>
+            <div className="space-y-12">
+              <div className="text-stone-600 dark:text-stone-400 leading-relaxed">
+                <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-6 uppercase tracking-tight">Angaben gemäß § 5 TMG</h2>
+                <div className="space-y-4 text-xl font-light">
+                  <p>Dennis Konkol</p>
+                  <p>Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland</p>
+                  <p>E-Mail: <Link href="mailto:info@dk0.dev" className="text-stone-900 dark:text-stone-100 font-bold border-b-2 border-liquid-mint">info@dk0.dev</Link></p>
                 </div>
               </div>
 
-              <div className="text-gray-300">
-                <h2 className="text-2xl font-semibold mb-4">Haftung für Links</h2>
-                <p className="leading-relaxed">
-                  Meine Website enthält Links auf externe Websites. Ich habe keinen Einfluss auf die Inhalte dieser
-                  Websites und kann daher keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der
-                  Betreiber oder Anbieter der Seiten verantwortlich. Jedoch überprüfe ich die verlinkten Seiten zum
-                  Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße. Bei Bekanntwerden von Rechtsverletzungen werde
-                  ich derartige Links umgehend entfernen.
+              <div className="text-stone-600 dark:text-stone-400">
+                <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-6 uppercase tracking-tight">Haftung für Inhalte</h2>
+                <p className="text-xl font-light leading-relaxed">
+                  Als Diensteanbieter bin ich gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG bin ich als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen.
                 </p>
               </div>
 
-              <div className="text-gray-300">
-                <h2 className="text-2xl font-semibold mb-4">Urheberrecht</h2>
-                <p className="leading-relaxed">
-                  Alle Inhalte dieser Website, einschließlich Texte, Fotos und Designs, stehen unter
-                  Urheberrechtsschutz. Jegliche Nutzung ohne vorherige schriftliche Zustimmung des Urhebers ist
-                  verboten.
-                </p>
+              <div className="pt-8 border-t border-stone-100 dark:border-stone-800">
+                <p className="text-stone-400 text-sm font-mono uppercase tracking-widest">Last updated: 12.02.2025</p>
               </div>
-
-              <div className="text-gray-300">
-                <h2 className="text-2xl font-semibold mb-4">Gewährleistung</h2>
-                <p className="leading-relaxed">
-                  Die Nutzung der Inhalte dieser Website erfolgt auf eigene Gefahr. Als Diensteanbieter kann ich keine
-                  Gewähr übernehmen für Schäden, die entstehen können, durch den Zugriff oder die Nutzung dieser
-                  Website.
-                </p>
-              </div>
-
-              <div className="pt-4 border-t border-gray-700">
-                <p className="text-gray-400 text-sm">Letzte Aktualisierung: 12.02.2025</p>
-              </div>
-            </>
+            </div>
           )}
         </motion.div>
       </main>