From cebad8a7b016ab8e3a6b09e959e5df67ca7b1a52 Mon Sep 17 00:00:00 2001
From: Matthias Puchstein <matthias@puchstein.bayern>
Date: Sat, 12 Jul 2025 13:48:23 +0200
Subject: [PATCH] restructured `DreamArchive` by introducing detailed subroutes
 and dedicated pages (`WorldwideEvents`, `CulturalLandscapes`, etc.), added
 `ScrollToTop` for improved UX, and removed deprecated `Archive` component.

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
---
 src/App.tsx                                   |  89 +--
 src/components/Navbar.tsx                     |   6 +-
 src/components/ScrollToTop.tsx                |  15 +
 src/pages/dreamarchive/CulturalLandscapes.tsx | 306 ++++++++++
 src/pages/dreamarchive/DreamArchiveIndex.tsx  | 145 +++++
 src/pages/dreamarchive/LivingConditions.tsx   | 366 ++++++++++++
 src/pages/dreamarchive/ResearchLive.tsx       | 565 ++++++++++++++++++
 src/pages/dreamarchive/Technology.tsx         | 396 ++++++++++++
 src/pages/dreamarchive/UserDreams.tsx         | 427 +++++++++++++
 src/pages/dreamarchive/WorldwideEvents.tsx    | 242 ++++++++
 10 files changed, 2481 insertions(+), 76 deletions(-)
 create mode 100644 src/components/ScrollToTop.tsx
 create mode 100644 src/pages/dreamarchive/CulturalLandscapes.tsx
 create mode 100644 src/pages/dreamarchive/DreamArchiveIndex.tsx
 create mode 100644 src/pages/dreamarchive/LivingConditions.tsx
 create mode 100644 src/pages/dreamarchive/ResearchLive.tsx
 create mode 100644 src/pages/dreamarchive/Technology.tsx
 create mode 100644 src/pages/dreamarchive/UserDreams.tsx
 create mode 100644 src/pages/dreamarchive/WorldwideEvents.tsx

diff --git a/src/App.tsx b/src/App.tsx
index e1b298e..1dc8a85 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,84 +4,20 @@ import Navbar from './components/Navbar';
 import TopBar from './components/TopBar';
 import SplashScreen from './components/SplashScreen';
 import {BrowserRouter, Route, Routes, useLocation} from 'react-router-dom';
-import {formatDateSimple} from './utils/DateUtils';
 import Feed from "./pages/Feed.tsx";
 import DreamPage from "./pages/DreamPage.tsx";
 import ProfilePage from "./pages/ProfilePage.tsx";
 import Home from "./pages/Home.tsx";
 import Overview from "./pages/Overview.tsx";
 import ChipOverview from "./pages/ChipOverview.tsx";
-
-function Archive() {
-    return (
-        <div className="p-4">
-            <h1 className="dreamy-text text-3xl md:text-4xl mb-6">Dream Archive</h1>
-
-            <div className="mb-6 flex flex-col sm:flex-row gap-4">
-                <div className="flex-1">
-                    <input 
-                        type="text" 
-                        placeholder="Search dreams..." 
-                        className="w-full p-3 rounded-lg focus:outline-none"
-                        style={{ 
-                            backgroundColor: 'var(--container)', 
-                            color: 'var(--text)',
-                            borderColor: 'var(--accent-soft)',
-                            boxShadow: '0 2px 8px var(--shadow)'
-                        }}
-                    />
-                </div>
-                <div>
-                    <select 
-                        className="w-full p-3 rounded-lg focus:outline-none"
-                        style={{ 
-                            backgroundColor: 'var(--container)', 
-                            color: 'var(--text)',
-                            borderColor: 'var(--accent-soft)',
-                            boxShadow: '0 2px 8px var(--shadow)'
-                        }}
-                    >
-                        <option>All Dreams</option>
-                        <option>Last Week</option>
-                        <option>Last Month</option>
-                        <option>Last Year</option>
-                    </select>
-                </div>
-            </div>
-
-            <div className="space-y-4">
-                {[1, 2, 3].map((item) => (
-                    <div key={item} className="card">
-                        <div className="flex justify-between items-start mb-2">
-                            <h3 className="text-xl font-bold" style={{ color: 'var(--accent)' }}>
-                                Dream #{item}
-                            </h3>
-                            <span style={{ color: 'var(--text-muted)' }}>
-                                {formatDateSimple(new Date())}
-                            </span>
-                        </div>
-                        <p className="mb-4">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-                            Vivamus lacinia, nunc eu tincidunt faucibus...
-                        </p>
-                        <div className="flex justify-end">
-                            <button 
-                                className="px-4 py-2 rounded-lg transition-transform hover:scale-105"
-                                style={{ 
-                                    background: 'var(--accent-gradient)',
-                                    color: 'white'
-                                }}
-                            >
-                                View Details
-                            </button>
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-}
-
+import DreamArchiveIndex from "./pages/dreamarchive/DreamArchiveIndex.tsx";
+import WorldwideEvents from "./pages/dreamarchive/WorldwideEvents.tsx";
+import CulturalLandscapes from "./pages/dreamarchive/CulturalLandscapes.tsx";
+import LivingConditions from "./pages/dreamarchive/LivingConditions.tsx";
+import Technology from "./pages/dreamarchive/Technology.tsx";
+import UserDreams from "./pages/dreamarchive/UserDreams.tsx";
+import ResearchLive from "./pages/dreamarchive/ResearchLive.tsx";
+import ScrollToTop from "./components/ScrollToTop.tsx";
 
 export default function App() {
     const [isLoading, setIsLoading] = useState(true);
@@ -97,6 +33,7 @@ export default function App() {
     return (
         <div className="App">
             <BrowserRouter>
+                <ScrollToTop/>
                 <AppContent/>
             </BrowserRouter>
         </div>
@@ -119,7 +56,13 @@ function AppContent() {
                         <Route path="/home" element={<Home/>}/>
                         <Route path="/feed" element={<Feed/>}/>
                         <Route path="/chip" element={<ChipOverview/>}/>
-                        <Route path="/archive" element={<Archive/>}/>
+                        <Route path="/dreamarchive" element={<DreamArchiveIndex/>}/>
+                        <Route path="/dreamarchive/worldwide-events" element={<WorldwideEvents/>}/>
+                        <Route path="/dreamarchive/cultural-landscapes" element={<CulturalLandscapes/>}/>
+                        <Route path="/dreamarchive/living-conditions" element={<LivingConditions/>}/>
+                        <Route path="/dreamarchive/technology" element={<Technology/>}/>
+                        <Route path="/dreamarchive/user-dreams" element={<UserDreams/>}/>
+                        <Route path="/dreamarchive/research-live" element={<ResearchLive/>}/>
                         <Route path="/profile" element={<ProfilePage/>}/>
                         <Route path="/dream/:id" element={<DreamPage/>}/>
                     </Routes>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index d940c42..f7e2f8b 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -6,7 +6,7 @@ import {getBackgroundStyle} from '../styles/StyleUtils';
 export default function Navbar() {
     return (<>
             <nav
-                className="fixed bottom-0 left-0 right-0 flex justify-around py-4 z-10 backdrop-blur-md"
+                className="fixed bottom-0 left-0 right-0 flex justify-around py-4 z-50 backdrop-blur-md"
                 style={{
                     background: 'var(--accent-gradient)',
                     boxShadow: '0 -2px 10px var(--shadow)'
@@ -18,7 +18,7 @@ export default function Navbar() {
                     <FaMicrochip className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
                 </NavLink>
                 <div className="w-16 md:w-20"></div>
-                <NavLink to="/archive" className="transition-transform hover:scale-110">
+                <NavLink to="/dreamarchive" className="transition-transform hover:scale-110">
                     <FaGlobeEurope className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
                 </NavLink>
                 <NavLink to="/profile" className="transition-transform hover:scale-110">
@@ -28,7 +28,7 @@ export default function Navbar() {
 
             <NavLink
                 to="/feed"
-                className="microphone-button fixed bottom-6 left-1/2 transform -translate-x-1/2 p-4 md:p-5 rounded-full z-20 transition-transform hover:scale-110 floating"
+                className="microphone-button fixed bottom-6 left-1/2 transform -translate-x-1/2 p-4 md:p-5 rounded-full z-60 transition-transform hover:scale-110 floating"
                 style={getBackgroundStyle('cta')}
             >
                 <FaList className="w-8 h-8 md:w-10 md:h-10 text-white"/>
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
new file mode 100644
index 0000000..0243410
--- /dev/null
+++ b/src/components/ScrollToTop.tsx
@@ -0,0 +1,15 @@
+// src/components/ScrollToTop.tsx
+import {useEffect} from 'react';
+import {useLocation} from 'react-router-dom';
+
+const ScrollToTop: React.FC = () => {
+    const {pathname} = useLocation();
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, [pathname]);
+
+    return null;
+};
+
+export default ScrollToTop;
diff --git a/src/pages/dreamarchive/CulturalLandscapes.tsx b/src/pages/dreamarchive/CulturalLandscapes.tsx
new file mode 100644
index 0000000..66c5a0e
--- /dev/null
+++ b/src/pages/dreamarchive/CulturalLandscapes.tsx
@@ -0,0 +1,306 @@
+import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
+import {FaGlobeAfrica, FaGlobeAsia, FaGlobeEurope, FaHandshake} from 'react-icons/fa';
+import {NavLink} from 'react-router-dom';
+
+export default function CulturalLandscapes() {
+    return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
+        {/* Hero Section */}
+        <div className="text-center mb-12 sm:mb-16 relative z-10">
+            <div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
+                <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Kulturelle
+                    Traumlandschaften</h1>
+                <p className="text-lg sm:text-xl dreamy-text">Traumcharakteristika verschiedener Kulturen und
+                    Gesellschaften</p>
+            </div>
+            <div
+                className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
+                style={{animationDelay: '0.2s'}}>
+                <div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
+                    <h2 className="dream-title text-xl sm:text-2xl">Kulturelle Unterschiede im Traumerleben</h2>
+                </div>
+                <p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
+                    Entdecke, wie kulturelle Hintergründe und gesellschaftliche Strukturen die Traumthemen,
+                    -emotionen und -narrative beeinflussen.
+                </p>
+            </div>
+        </div>
+
+        {/* Research Highlight */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Forschung von David Samson (University of
+                Toronto)</h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {/* BaYaka */}
+                <div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('violet')}>
+                    <div className="flex justify-center mb-4">
+                        <div className="p-4 bg-violet-500/20 rounded-full">
+                            <FaGlobeAfrica className="text-violet-600 dark:text-violet-400" size={28}/>
+                        </div>
+                    </div>
+                    <h3 className="text-xl font-bold mb-3 text-center dreamy-text">BaYaka</h3>
+                    <p className="text-sm mb-2 text-center">(Demokratische Republik Kongo)</p>
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <h4 className="font-bold mb-2">Traumstruktur</h4>
+                        <p className="text-sm">Träume beginnen mit Bedrohungen, enden mit Gemeinschaftsrettung</p>
+                    </div>
+                    <p className="text-sm flex-grow" style={getTextStyle('normal')}>
+                        Die BaYaka-Gemeinschaft zeigt ein einzigartiges Muster: Ihre Träume beginnen oft mit
+                        persönlichen Bedrohungen, entwickeln sich aber zu Szenarien, in denen die Gemeinschaft
+                        zusammenkommt, um das Problem zu lösen.
+                    </p>
+                </div>
+
+                {/* Hadza */}
+                <div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('amber')}>
+                    <div className="flex justify-center mb-4">
+                        <div className="p-4 bg-amber-500/20 rounded-full">
+                            <FaHandshake className="text-amber-600 dark:text-amber-400" size={28}/>
+                        </div>
+                    </div>
+                    <h3 className="text-xl font-bold mb-3 text-center dreamy-text">Hadza</h3>
+                    <p className="text-sm mb-2 text-center">(Tansania)</p>
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <h4 className="font-bold mb-2">Traumstruktur</h4>
+                        <p className="text-sm">Starke soziale Bindungen reflektieren sich in kooperativen
+                            Traumlösungen</p>
+                    </div>
+                    <p className="text-sm flex-grow" style={getTextStyle('normal')}>
+                        Die Hadza-Gemeinschaft, bekannt für ihre egalitäre Sozialstruktur, zeigt in ihren Träumen
+                        häufig Szenarien, in denen Probleme durch Zusammenarbeit und gegenseitige Unterstützung
+                        gelöst werden.
+                    </p>
+                </div>
+
+                {/* Western Societies */}
+                <div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('blue')}>
+                    <div className="flex justify-center mb-4">
+                        <div className="p-4 bg-blue-500/20 rounded-full">
+                            <FaGlobeEurope className="text-blue-600 dark:text-blue-400" size={28}/>
+                        </div>
+                    </div>
+                    <h3 className="text-xl font-bold mb-3 text-center dreamy-text">Westliche Gesellschaften</h3>
+                    <p className="text-sm mb-2 text-center">(Europa & Nordamerika)</p>
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <h4 className="font-bold mb-2">Traumstruktur</h4>
+                        <p className="text-sm">Fokus auf individuellen Stress, weniger soziale Unterstützung</p>
+                    </div>
+                    <p className="text-sm flex-grow" style={getTextStyle('normal')}>
+                        Im Gegensatz zu indigenen Gemeinschaften zeigen Träume in westlichen Gesellschaften oft
+                        einen Fokus auf individuelle Probleme und Lösungen, mit weniger Betonung auf
+                        gemeinschaftlicher Unterstützung.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        {/* Regional Dream Characteristics */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Regionale Traumcharakteristika</h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                {/* Northern Europe */}
+                <div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('blue')}>
+                    <div className="flex items-center mb-4">
+                        <div className="p-4 bg-blue-500/20 rounded-full mr-4">
+                            <FaGlobeEurope className="text-blue-600 dark:text-blue-400" size={28}/>
+                        </div>
+                        <h3 className="text-xl font-bold dreamy-text">Nordeuropa</h3>
+                    </div>
+
+                    <div className="mb-4">
+                        <div className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                            <div className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
+                                 style={{width: '67%'}}></div>
+                            <div
+                                className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
+                                67% Träume über Isolation und Dunkelheit
+                            </div>
+                        </div>
+                        <p className="text-xs mt-1 text-right" style={getTextStyle('muted')}>Saisonale Effekte
+                            deutlich erkennbar</p>
+                    </div>
+
+                    <p className="text-sm flex-grow" style={getTextStyle('normal')}>
+                        In nordeuropäischen Ländern zeigt sich ein deutlicher Einfluss der langen, dunklen Winter
+                        auf die Traumthemen. Isolation und Dunkelheit dominieren, besonders während der
+                        Wintermonate.
+                    </p>
+                </div>
+
+                {/* Mediterranean */}
+                <div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('amber')}>
+                    <div className="flex items-center mb-4">
+                        <div className="p-4 bg-amber-500/20 rounded-full mr-4">
+                            <FaGlobeEurope className="text-amber-600 dark:text-amber-400" size={28}/>
+                        </div>
+                        <h3 className="text-xl font-bold dreamy-text">Mittelmeerraum</h3>
+                    </div>
+
+                    <div className="mb-4">
+                        <div className="grid grid-cols-2 gap-2">
+                            <div>
+                                <div
+                                    className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                                    <div
+                                        className="absolute top-0 left-0 h-full bg-amber-500 dark:bg-amber-600 rounded-full"
+                                        style={{width: '58%'}}></div>
+                                    <div
+                                        className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
+                                        58% Soziale Träume
+                                    </div>
+                                </div>
+                            </div>
+                            <div>
+                                <div
+                                    className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                                    <div
+                                        className="absolute top-0 left-0 h-full bg-amber-500 dark:bg-amber-600 rounded-full"
+                                        style={{width: '42%'}}></div>
+                                    <div
+                                        className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
+                                        42% Familienthemen
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="text-sm flex-grow" style={getTextStyle('normal')}>
+                        Im Mittelmeerraum spiegeln Träume die starke soziale und familiäre Orientierung der Kultur
+                        wider. Gemeinschaftliche Aktivitäten und Familientreffen sind häufige Traumthemen.
+                    </p>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* East Asia */}
+                <div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('emerald')}>
+                    <div className="flex items-center mb-4">
+                        <div className="p-4 bg-emerald-500/20 rounded-full mr-4">
+                            <FaGlobeAsia className="text-emerald-600 dark:text-emerald-400" size={28}/>
+                        </div>
+                        <h3 className="text-xl font-bold dreamy-text">Ostasien</h3>
+                    </div>
+
+                    <div className="mb-4">
+                        <div className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                            <div
+                                className="absolute top-0 left-0 h-full bg-emerald-500 dark:bg-emerald-600 rounded-full"
+                                style={{width: '71%'}}></div>
+                            <div
+                                className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
+                                71% Träume über Leistung und gesellschaftliche Erwartungen
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="text-sm flex-grow" style={getTextStyle('normal')}>
+                        In ostasiatischen Kulturen reflektieren Träume häufig den gesellschaftlichen Druck und
+                        Leistungserwartungen. Prüfungssituationen, beruflicher Erfolg und soziale Anerkennung sind
+                        wiederkehrende Themen.
+                    </p>
+                </div>
+
+                {/* Sub-Saharan Africa */}
+                <div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('purple')}>
+                    <div className="flex items-center mb-4">
+                        <div className="p-4 bg-purple-500/20 rounded-full mr-4">
+                            <FaGlobeAfrica className="text-purple-600 dark:text-purple-400" size={28}/>
+                        </div>
+                        <h3 className="text-xl font-bold dreamy-text">Afrika (Subsahara)</h3>
+                    </div>
+
+                    <div className="mb-4">
+                        <div className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                            <div
+                                className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
+                                style={{width: '84%'}}></div>
+                            <div
+                                className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
+                                84% Träume mit Gemeinschaftsunterstützung
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="text-sm flex-grow" style={getTextStyle('normal')}>
+                        In vielen subsaharischen Kulturen zeigen Träume eine starke Betonung von Gemeinschaft und
+                        gegenseitiger Unterstützung. Traumlösungen beinhalten fast immer die Hilfe von
+                        Familienmitgliedern oder der Gemeinschaft.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        {/* Cultural Comparison */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Kultureller Vergleich: Traumthemen</h2>
+
+            <div className="dreamy-card rounded-xl p-6" style={getBackgroundStyle('rose')}>
+                <div className="overflow-x-auto">
+                    <table className="w-full">
+                        <thead>
+                        <tr>
+                            <th className="text-left p-2">Traumthema</th>
+                            <th className="text-center p-2">Westliche Gesellschaften</th>
+                            <th className="text-center p-2">Ostasien</th>
+                            <th className="text-center p-2">Indigene Gemeinschaften</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr className="bg-white/10 dark:bg-black/10">
+                            <td className="p-2 font-bold">Angstträume</td>
+                            <td className="text-center p-2">Persönliches Versagen, Verlust</td>
+                            <td className="text-center p-2">Soziale Ablehnung, Scham</td>
+                            <td className="text-center p-2">Naturgefahren, Ressourcenmangel</td>
+                        </tr>
+                        <tr>
+                            <td className="p-2 font-bold">Soziale Träume</td>
+                            <td className="text-center p-2">Fokus auf enge Freunde, Partner</td>
+                            <td className="text-center p-2">Familiäre Hierarchie, Respekt</td>
+                            <td className="text-center p-2">Gesamte Gemeinschaft, Ahnen</td>
+                        </tr>
+                        <tr className="bg-white/10 dark:bg-black/10">
+                            <td className="p-2 font-bold">Erfolgsträume</td>
+                            <td className="text-center p-2">Individuelle Leistung, Anerkennung</td>
+                            <td className="text-center p-2">Familienstolz, Gruppenleistung</td>
+                            <td className="text-center p-2">Gemeinschaftlicher Erfolg, Teilen</td>
+                        </tr>
+                        <tr>
+                            <td className="p-2 font-bold">Spirituelle Träume</td>
+                            <td className="text-center p-2">Selten, abstrakt</td>
+                            <td className="text-center p-2">Ahnenverehrung, Harmonie</td>
+                            <td className="text-center p-2">Häufig, konkrete Führung</td>
+                        </tr>
+                        <tr className="bg-white/10 dark:bg-black/10">
+                            <td className="p-2 font-bold">Problemlösung</td>
+                            <td className="text-center p-2">Individuell, technologisch</td>
+                            <td className="text-center p-2">Hierarchisch, kollektiv</td>
+                            <td className="text-center p-2">Gemeinschaftlich, naturbezogen</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <p className="text-sm mt-4" style={getTextStyle('normal')}>
+                    Diese Tabelle zeigt die kulturellen Unterschiede in der Ausprägung verschiedener Traumthemen.
+                    Während westliche Gesellschaften einen stärkeren Fokus auf individuelle Aspekte legen, betonen
+                    ostasiatische und indigene Kulturen stärker gemeinschaftliche und kollektive Elemente.
+                </p>
+            </div>
+        </div>
+
+        {/* Navigation Links */}
+        <div className="flex flex-wrap justify-between items-center">
+            <NavLink to="/dreamarchive/worldwide-events"
+                     className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
+                     style={getBackgroundStyle('blue')}>
+                <span className="mr-2">←</span> Zurück zu Weltweiten Ereignissen
+            </NavLink>
+            <NavLink to="/dreamarchive/living-conditions"
+                     className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
+                     style={getBackgroundStyle('emerald')}>
+                Weiter zu Lebensbedingungen & Traumqualität <span className="ml-2">→</span>
+            </NavLink>
+        </div>
+    </div>);
+}
diff --git a/src/pages/dreamarchive/DreamArchiveIndex.tsx b/src/pages/dreamarchive/DreamArchiveIndex.tsx
new file mode 100644
index 0000000..6bf001c
--- /dev/null
+++ b/src/pages/dreamarchive/DreamArchiveIndex.tsx
@@ -0,0 +1,145 @@
+import {NavLink} from 'react-router-dom';
+import {FaFlask, FaGlobeEurope, FaHome, FaMicrochip, FaUser, FaUsers} from 'react-icons/fa';
+import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
+
+export default function DreamArchiveIndex() {
+    return (
+        <div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
+            {/* Hero Section */}
+            <div className="text-center mb-12 sm:mb-16 relative z-10">
+                <div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
+                    <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Dream Archive</h1>
+                    <p className="text-lg sm:text-xl dreamy-text">Globale Traumforschung und Datenvisualisierung</p>
+                </div>
+                <div
+                    className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
+                    style={{animationDelay: '0.2s'}}>
+                    <div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
+                        <h2 className="dream-title text-xl sm:text-2xl">Entdecke die Welt der Träume</h2>
+                    </div>
+                    <p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
+                        Erkunde die Zusammenhänge zwischen weltweiten Ereignissen und Traummustern, kulturelle
+                        Unterschiede und technologische Fortschritte in der Traumforschung.
+                    </p>
+                </div>
+            </div>
+
+            {/* Archive Pages Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+                {/* Worldwide Events */}
+                <NavLink to="/dreamarchive/worldwide-events" className="no-underline h-full">
+                    <div
+                        className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
+                        style={{...getBackgroundStyle('purple'), animationDelay: '0.5s'}}>
+                        <div className="flex justify-center mb-4">
+                            <div className="p-4 bg-purple-500/20 rounded-full">
+                                <FaGlobeEurope className="text-purple-600 dark:text-purple-400" size={28}/>
+                            </div>
+                        </div>
+                        <h3 className="text-xl font-bold mb-3 text-center dreamy-text">
+                            Weltweite Ereignisse
+                        </h3>
+                        <p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
+                            Erforsche die Korrelation zwischen globalen Ereignissen und Traumreaktionen
+                        </p>
+                    </div>
+                </NavLink>
+
+                {/* Cultural Landscapes */}
+                <NavLink to="/dreamarchive/cultural-landscapes" className="no-underline h-full">
+                    <div
+                        className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
+                        style={{...getBackgroundStyle('blue'), animationDelay: '0.6s'}}>
+                        <div className="flex justify-center mb-4">
+                            <div className="p-4 bg-blue-500/20 rounded-full">
+                                <FaUsers className="text-blue-600 dark:text-blue-400" size={28}/>
+                            </div>
+                        </div>
+                        <h3 className="text-xl font-bold mb-3 text-center dreamy-text">
+                            Kulturelle Traumlandschaften
+                        </h3>
+                        <p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
+                            Vergleiche Traumcharakteristika verschiedener Kulturen und Regionen
+                        </p>
+                    </div>
+                </NavLink>
+
+                {/* Living Conditions */}
+                <NavLink to="/dreamarchive/living-conditions" className="no-underline h-full">
+                    <div
+                        className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
+                        style={{...getBackgroundStyle('emerald'), animationDelay: '0.7s'}}>
+                        <div className="flex justify-center mb-4">
+                            <div className="p-4 bg-emerald-500/20 rounded-full">
+                                <FaHome className="text-emerald-600 dark:text-emerald-400" size={28}/>
+                            </div>
+                        </div>
+                        <h3 className="text-xl font-bold mb-3 text-center dreamy-text">
+                            Lebensbedingungen & Traumqualität
+                        </h3>
+                        <p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
+                            Entdecke wie sozioökonomische und Umweltfaktoren Träume beeinflussen
+                        </p>
+                    </div>
+                </NavLink>
+
+                {/* Technology */}
+                <NavLink to="/dreamarchive/technology" className="no-underline h-full">
+                    <div
+                        className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
+                        style={{...getBackgroundStyle('amber'), animationDelay: '0.8s'}}>
+                        <div className="flex justify-center mb-4">
+                            <div className="p-4 bg-amber-500/20 rounded-full">
+                                <FaMicrochip className="text-amber-600 dark:text-amber-400" size={28}/>
+                            </div>
+                        </div>
+                        <h3 className="text-xl font-bold mb-3 text-center dreamy-text">
+                            Technologie & Traumforschung
+                        </h3>
+                        <p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
+                            Erfahre mehr über neueste Entwicklungen in der Traumforschungstechnologie
+                        </p>
+                    </div>
+                </NavLink>
+
+                {/* User Dreams */}
+                <NavLink to="/dreamarchive/user-dreams" className="no-underline h-full">
+                    <div
+                        className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
+                        style={{...getBackgroundStyle('rose'), animationDelay: '0.9s'}}>
+                        <div className="flex justify-center mb-4">
+                            <div className="p-4 bg-rose-500/20 rounded-full">
+                                <FaUser className="text-rose-600 dark:text-rose-400" size={28}/>
+                            </div>
+                        </div>
+                        <h3 className="text-xl font-bold mb-3 text-center dreamy-text">
+                            Deine Träume im Kontext
+                        </h3>
+                        <p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
+                            Sieh wie deine Träume im Vergleich zur globalen Traumdatenbank stehen
+                        </p>
+                    </div>
+                </NavLink>
+
+                {/* Research Live */}
+                <NavLink to="/dreamarchive/research-live" className="no-underline h-full">
+                    <div
+                        className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
+                        style={{...getBackgroundStyle('violet'), animationDelay: '1.0s'}}>
+                        <div className="flex justify-center mb-4">
+                            <div className="p-4 bg-violet-500/20 rounded-full">
+                                <FaFlask className="text-violet-600 dark:text-violet-400" size={28}/>
+                            </div>
+                        </div>
+                        <h3 className="text-xl font-bold mb-3 text-center dreamy-text">
+                            Traumforschung Live
+                        </h3>
+                        <p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
+                            Aktuelle Studien, Citizen Science und Interviews mit Forschern
+                        </p>
+                    </div>
+                </NavLink>
+            </div>
+        </div>
+    );
+}
diff --git a/src/pages/dreamarchive/LivingConditions.tsx b/src/pages/dreamarchive/LivingConditions.tsx
new file mode 100644
index 0000000..7be084f
--- /dev/null
+++ b/src/pages/dreamarchive/LivingConditions.tsx
@@ -0,0 +1,366 @@
+import {getBackgroundStyle} from '../../styles/StyleUtils';
+import {FaCity, FaGraduationCap, FaLightbulb, FaMoneyBillWave, FaSmog, FaVolumeUp} from 'react-icons/fa';
+import {NavLink} from 'react-router-dom';
+
+export default function LivingConditions() {
+    return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
+        {/* Hero Section */}
+        <div className="text-center mb-12 sm:mb-16 relative z-10">
+            <div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
+                <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Lebensbedingungen &
+                    Traumqualität</h1>
+                <p className="text-lg sm:text-xl dreamy-text">Der Einfluss von Umgebung und Lebensumständen auf
+                    unsere Träume</p>
+            </div>
+            <div
+                className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
+                style={{animationDelay: '0.2s'}}>
+                <div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
+                    <h2 className="dream-title text-xl sm:text-2xl">Wie unsere Umgebung unsere Träume formt</h2>
+                </div>
+                <p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
+                    Entdecke, wie sozioökonomische Faktoren und Umweltbedingungen die Qualität, Intensität und
+                    Inhalte unserer Träume beeinflussen.
+                </p>
+            </div>
+        </div>
+
+        {/* Socioeconomic Factors */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Sozioökonomische Faktoren</h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {/* Urban vs Rural */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
+                    <div className="flex justify-center mb-4">
+                        <div className="p-3 bg-blue-500/20 rounded-full">
+                            <FaCity className="text-blue-600 dark:text-blue-400" size={28}/>
+                        </div>
+                    </div>
+                    <h3 className="text-lg font-bold mb-3 text-center dreamy-text">Urbane vs. Rurale Träume</h3>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <div className="flex justify-between items-center mb-2">
+                            <span className="text-sm font-bold">Stadtbewohner:</span>
+                            <span className="text-sm">+43%</span>
+                        </div>
+                        <div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                            <div className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
+                                 style={{width: '43%'}}></div>
+                        </div>
+                        <p className="text-xs mt-2">Träume von Verkehr und Menschenmengen</p>
+                    </div>
+
+                    <p className="text-sm">
+                        Stadtbewohner träumen 43% häufiger von Verkehr, Menschenmengen und urbanen Umgebungen als
+                        Menschen in ländlichen Gebieten. Ihre Träume enthalten auch mehr technologische Elemente und
+                        soziale Interaktionen mit Fremden.
+                    </p>
+                </div>
+
+                {/* Income Level */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
+                    <div className="flex justify-center mb-4">
+                        <div className="p-3 bg-emerald-500/20 rounded-full">
+                            <FaMoneyBillWave className="text-emerald-600 dark:text-emerald-400" size={28}/>
+                        </div>
+                    </div>
+                    <h3 className="text-lg font-bold mb-3 text-center dreamy-text">Einkommensniveau</h3>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <div className="flex justify-between items-center mb-2">
+                            <span className="text-sm font-bold">Höhere Einkommen:</span>
+                            <span className="text-sm">-31%</span>
+                        </div>
+                        <div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                            <div
+                                className="absolute top-0 left-0 h-full bg-emerald-500 dark:bg-emerald-600 rounded-full"
+                                style={{width: '31%'}}></div>
+                        </div>
+                        <p className="text-xs mt-2">Weniger Angstträume</p>
+                    </div>
+
+                    <p className="text-sm">
+                        Menschen mit höherem Einkommen berichten von 31% weniger Angstträumen im Vergleich zu
+                        Personen mit niedrigerem Einkommen. Finanzielle Sicherheit korreliert mit positiveren
+                        Traumthemen und besserer Schlafqualität.
+                    </p>
+                </div>
+
+                {/* Education Level */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
+                    <div className="flex justify-center mb-4">
+                        <div className="p-3 bg-amber-500/20 rounded-full">
+                            <FaGraduationCap className="text-amber-600 dark:text-amber-400" size={28}/>
+                        </div>
+                    </div>
+                    <h3 className="text-lg font-bold mb-3 text-center dreamy-text">Bildungsgrad</h3>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <h4 className="font-bold mb-2 text-center">Komplexität der Traumnarration</h4>
+                        <div className="flex items-center justify-center space-x-2">
+                            <div className="text-center">
+                                <div className="h-16 w-4 bg-gray-200 dark:bg-gray-700 rounded-t-full relative">
+                                    <div
+                                        className="absolute bottom-0 left-0 right-0 bg-amber-500 dark:bg-amber-600 rounded-t-full"
+                                        style={{height: '40%'}}></div>
+                                </div>
+                                <p className="text-xs mt-1">Grundschule</p>
+                            </div>
+                            <div className="text-center">
+                                <div className="h-16 w-4 bg-gray-200 dark:bg-gray-700 rounded-t-full relative">
+                                    <div
+                                        className="absolute bottom-0 left-0 right-0 bg-amber-500 dark:bg-amber-600 rounded-t-full"
+                                        style={{height: '60%'}}></div>
+                                </div>
+                                <p className="text-xs mt-1">Sekundar</p>
+                            </div>
+                            <div className="text-center">
+                                <div className="h-16 w-4 bg-gray-200 dark:bg-gray-700 rounded-t-full relative">
+                                    <div
+                                        className="absolute bottom-0 left-0 right-0 bg-amber-500 dark:bg-amber-600 rounded-t-full"
+                                        style={{height: '85%'}}></div>
+                                </div>
+                                <p className="text-xs mt-1">Universität</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="text-sm">
+                        Universitätsabsolventen zeigen komplexere Traumnarrationen mit mehr Details, Charakteren und
+                        Handlungssträngen. Bildung korreliert mit der Fähigkeit, Träume detaillierter zu erinnern
+                        und zu beschreiben.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        {/* Environmental Factors */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Umweltfaktoren</h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {/* Air Quality */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('rose')}>
+                    <div className="flex justify-center mb-4">
+                        <div className="p-3 bg-rose-500/20 rounded-full">
+                            <FaSmog className="text-rose-600 dark:text-rose-400" size={28}/>
+                        </div>
+                    </div>
+                    <h3 className="text-lg font-bold mb-3 text-center dreamy-text">Luftqualität</h3>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <div className="flex justify-between items-center mb-2">
+                            <span className="text-sm font-bold">Schlechte Luftqualität:</span>
+                            <span className="text-sm">+28%</span>
+                        </div>
+                        <div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                            <div className="absolute top-0 left-0 h-full bg-rose-500 dark:bg-rose-600 rounded-full"
+                                 style={{width: '28%'}}></div>
+                        </div>
+                        <p className="text-xs mt-2">Mehr Albträume</p>
+                    </div>
+
+                    <p className="text-sm">
+                        Schlechte Luftqualität führt zu 28% mehr Albträumen und beeinträchtigt die Schlafqualität.
+                        Studien zeigen, dass Luftverschmutzung die REM-Schlafphasen verkürzt und zu fragmentierteren
+                        Träumen führt.
+                    </p>
+                </div>
+
+                {/* Noise Level */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
+                    <div className="flex justify-center mb-4">
+                        <div className="p-3 bg-purple-500/20 rounded-full">
+                            <FaVolumeUp className="text-purple-600 dark:text-purple-400" size={28}/>
+                        </div>
+                    </div>
+                    <h3 className="text-lg font-bold mb-3 text-center dreamy-text">Lärmpegel</h3>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <h4 className="font-bold mb-2 text-center">REM-Phasen Dauer</h4>
+                        <div className="flex items-center space-x-2">
+                            <div className="text-right w-1/2">
+                                <p className="text-xs mb-1">Ruhige Umgebung</p>
+                                <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded-full relative">
+                                    <div
+                                        className="absolute top-0 right-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
+                                        style={{width: '90%'}}></div>
+                                </div>
+                            </div>
+                            <div className="w-1/2">
+                                <p className="text-xs mb-1">Laute Umgebung</p>
+                                <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded-full relative">
+                                    <div
+                                        className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
+                                        style={{width: '60%'}}></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="text-sm">
+                        Städtische Lärmbelastung fragmentiert Träume durch kürzere REM-Phasen. Selbst wenn der Lärm
+                        nicht zum Aufwachen führt, beeinflusst er die Traumkontinuität und -qualität negativ.
+                    </p>
+                </div>
+
+                {/* Light Pollution */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('violet')}>
+                    <div className="flex justify-center mb-4">
+                        <div className="p-3 bg-violet-500/20 rounded-full">
+                            <FaLightbulb className="text-violet-600 dark:text-violet-400" size={28}/>
+                        </div>
+                    </div>
+                    <h3 className="text-lg font-bold mb-3 text-center dreamy-text">Lichtverschmutzung</h3>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <h4 className="font-bold mb-2 text-center">Melatonin-Produktion</h4>
+                        <div className="relative pt-1">
+                            <div className="flex mb-2 items-center justify-between">
+                                <div>
+                    <span
+                        className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full bg-violet-200 text-violet-800">
+                      Niedrig
+                    </span>
+                                </div>
+                                <div className="text-right">
+                    <span
+                        className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full bg-violet-200 text-violet-800">
+                      Hoch
+                    </span>
+                                </div>
+                            </div>
+                            <div
+                                className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200 dark:bg-gray-700">
+                                <div style={{width: "30%"}}
+                                     className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-violet-500 dark:bg-violet-600">
+                                    <span className="text-[0.5rem] text-white">Hohe Lichtverschmutzung</span>
+                                </div>
+                            </div>
+                            <div
+                                className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200 dark:bg-gray-700">
+                                <div style={{width: "75%"}}
+                                     className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-violet-500 dark:bg-violet-600">
+                                    <span className="text-[0.5rem] text-white">Geringe Lichtverschmutzung</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="text-sm">
+                        Reduzierte Melatonin-Produktion durch Lichtverschmutzung beeinflusst die Traumintensität.
+                        Menschen in Gebieten mit geringer Lichtverschmutzung berichten von lebhafteren und
+                        intensiveren Träumen.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        {/* Combined Impact */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Kombinierte Auswirkungen</h2>
+
+            <div className="dreamy-card p-6" style={getBackgroundStyle('pink-red')}>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <h3 className="text-lg font-bold mb-4 dreamy-text">Optimale vs. Suboptimale Bedingungen</h3>
+
+                        <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                            <h4 className="font-bold mb-2">Optimale Bedingungen</h4>
+                            <ul className="list-disc list-inside text-sm space-y-1">
+                                <li>Ruhige, natürliche Umgebung</li>
+                                <li>Gute Luftqualität</li>
+                                <li>Minimale Lichtverschmutzung</li>
+                                <li>Finanzielle Sicherheit</li>
+                                <li>Ausgewogene Work-Life-Balance</li>
+                            </ul>
+                        </div>
+
+                        <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                            <h4 className="font-bold mb-2">Suboptimale Bedingungen</h4>
+                            <ul className="list-disc list-inside text-sm space-y-1">
+                                <li>Laute, urbane Umgebung</li>
+                                <li>Schlechte Luftqualität</li>
+                                <li>Hohe Lichtverschmutzung</li>
+                                <li>Finanzielle Unsicherheit</li>
+                                <li>Chronischer Stress</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div>
+                        <h3 className="text-lg font-bold mb-4 dreamy-text">Auswirkungen auf Traumqualität</h3>
+
+                        <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                            <h4 className="font-bold mb-2">Optimale Bedingungen führen zu:</h4>
+                            <ul className="list-disc list-inside text-sm space-y-1">
+                                <li>Längeren REM-Phasen</li>
+                                <li>Lebhafteren Träumen</li>
+                                <li>Besserer Traumerinnerung</li>
+                                <li>Positiveren Traumthemen</li>
+                                <li>Höherer Wahrscheinlichkeit für luzide Träume</li>
+                            </ul>
+                        </div>
+
+                        <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                            <h4 className="font-bold mb-2">Suboptimale Bedingungen führen zu:</h4>
+                            <ul className="list-disc list-inside text-sm space-y-1">
+                                <li>Fragmentierten REM-Phasen</li>
+                                <li>Häufigeren Albträumen</li>
+                                <li>Schlechterer Traumerinnerung</li>
+                                <li>Stressbeladenen Traumthemen</li>
+                                <li>Unterbrochenem Schlaf</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <p className="text-sm mt-6">
+                    Die Kombination verschiedener Umwelt- und sozioökonomischer Faktoren hat einen kumulativen
+                    Effekt auf die Traumqualität. Die Verbesserung einzelner Faktoren kann bereits zu einer
+                    signifikanten Verbesserung der Traumqualität führen.
+                </p>
+            </div>
+        </div>
+
+        {/* Practical Tips */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Praktische Tipps für bessere Träume</h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
+                    <h3 className="text-lg font-bold mb-3 dreamy-text">Umweltfaktoren optimieren</h3>
+                    <ul className="list-disc list-inside text-sm space-y-2">
+                        <li>Verwende Verdunkelungsvorhänge, um Lichtverschmutzung zu reduzieren</li>
+                        <li>Nutze Luftreiniger für bessere Luftqualität im Schlafzimmer</li>
+                        <li>Setze Ohrstöpsel oder weißes Rauschen gegen Lärmbelästigung ein</li>
+                        <li>Halte die Schlafzimmertemperatur zwischen 16-18°C</li>
+                        <li>Vermeide blaues Licht von Bildschirmen mindestens eine Stunde vor dem Schlafengehen</li>
+                    </ul>
+                </div>
+
+                <div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
+                    <h3 className="text-lg font-bold mb-3 dreamy-text">Lebensstil-Anpassungen</h3>
+                    <ul className="list-disc list-inside text-sm space-y-2">
+                        <li>Etabliere eine regelmäßige Schlafenszeit und Aufwachzeit</li>
+                        <li>Praktiziere Entspannungstechniken vor dem Schlafengehen</li>
+                        <li>Führe ein Traumtagebuch, um die Traumerinnerung zu verbessern</li>
+                        <li>Reduziere Stress durch regelmäßige Bewegung und Meditation</li>
+                        <li>Vermeide schwere Mahlzeiten, Alkohol und Koffein vor dem Schlafengehen</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        {/* Navigation Links */}
+        <div className="flex flex-wrap justify-between items-center">
+            <NavLink to="/dreamarchive/cultural-landscapes" className="dreamy-card p-3 inline-flex items-center">
+                <span className="mr-2">←</span> Zurück zu Kulturellen Traumlandschaften
+            </NavLink>
+            <NavLink to="/dreamarchive/technology" className="dreamy-card p-3 inline-flex items-center">
+                Weiter zu Technologie & Traumforschung <span className="ml-2">→</span>
+            </NavLink>
+        </div>
+    </div>);
+}
\ No newline at end of file
diff --git a/src/pages/dreamarchive/ResearchLive.tsx b/src/pages/dreamarchive/ResearchLive.tsx
new file mode 100644
index 0000000..ea97c4d
--- /dev/null
+++ b/src/pages/dreamarchive/ResearchLive.tsx
@@ -0,0 +1,565 @@
+import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
+import {
+    FaCalendarAlt,
+    FaClipboardCheck,
+    FaFlask,
+    FaGlobeAmericas,
+    FaUniversity,
+    FaUserMd,
+    FaUsers,
+    FaVideo
+} from 'react-icons/fa';
+import {NavLink} from 'react-router-dom';
+
+export default function ResearchLive() {
+    return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
+        {/* Hero Section */}
+        <div className="text-center mb-12 sm:mb-16 relative z-10">
+            <div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
+                <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Traumforschung Live</h1>
+                <p className="text-lg sm:text-xl dreamy-text">Aktuelle Studien, Citizen Science und
+                    Forscher-Interviews</p>
+            </div>
+            <div
+                className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
+                style={{animationDelay: '0.2s'}}>
+                <div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
+                    <h2 className="dream-title text-xl sm:text-2xl">Sei Teil der Traumforschung</h2>
+                </div>
+                <p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
+                    Entdecke laufende Forschungsprojekte, nimm an Studien teil und lerne von führenden
+                    Traumforschern aus der ganzen Welt.
+                </p>
+            </div>
+        </div>
+
+        {/* Current Studies */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Aktuelle Studien</h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Study 1 */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
+                    <div className="flex items-center mb-4">
+                        <div className="p-3 bg-purple-500/20 rounded-full mr-4">
+                            <FaFlask className="text-purple-600 dark:text-purple-400" size={28}/>
+                        </div>
+                        <div>
+                            <h3 className="text-lg font-bold dreamy-text">Traumkontinuität während der Pandemie</h3>
+                            <p className="text-xs" style={getTextStyle('muted')}>Universität Zürich, Schweiz</p>
+                        </div>
+                    </div>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <div className="flex justify-between mb-2">
+                            <span className="text-sm font-bold">Status:</span>
+                            <span
+                                className="text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full">Aktiv</span>
+                        </div>
+                        <div className="flex justify-between mb-2">
+                            <span className="text-sm font-bold">Teilnehmer:</span>
+                            <span className="text-sm">1,245 / 2,000</span>
+                        </div>
+                        <div className="flex justify-between">
+                            <span className="text-sm font-bold">Enddatum:</span>
+                            <span className="text-sm">31. Dezember 2024</span>
+                        </div>
+                    </div>
+
+                    <p className="text-sm mb-4">
+                        Diese Langzeitstudie untersucht, wie sich Träume während und nach der COVID-19-Pandemie
+                        verändert haben und ob Traumthemen mit realen Ereignissen korrelieren.
+                    </p>
+
+                    <button
+                        className="w-full py-2 px-4 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors">
+                        Teilnehmen
+                    </button>
+                </div>
+
+                {/* Study 2 */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
+                    <div className="flex items-center mb-4">
+                        <div className="p-3 bg-blue-500/20 rounded-full mr-4">
+                            <FaFlask className="text-blue-600 dark:text-blue-400" size={28}/>
+                        </div>
+                        <div>
+                            <h3 className="text-lg font-bold dreamy-text">Luzide Träume und Kreativität</h3>
+                            <p className="text-xs" style={getTextStyle('muted')}>Stanford University, USA</p>
+                        </div>
+                    </div>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <div className="flex justify-between mb-2">
+                            <span className="text-sm font-bold">Status:</span>
+                            <span
+                                className="text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full">Aktiv</span>
+                        </div>
+                        <div className="flex justify-between mb-2">
+                            <span className="text-sm font-bold">Teilnehmer:</span>
+                            <span className="text-sm">876 / 1,000</span>
+                        </div>
+                        <div className="flex justify-between">
+                            <span className="text-sm font-bold">Enddatum:</span>
+                            <span className="text-sm">15. März 2025</span>
+                        </div>
+                    </div>
+
+                    <p className="text-sm mb-4">
+                        Diese Studie untersucht den Zusammenhang zwischen der Fähigkeit, luzide Träume zu erleben,
+                        und kreativen Problemlösungsfähigkeiten im Wachzustand.
+                    </p>
+
+                    <button
+                        className="w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
+                        Teilnehmen
+                    </button>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
+                {/* Study 3 */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
+                    <div className="flex items-center mb-4">
+                        <div className="p-3 bg-emerald-500/20 rounded-full mr-4">
+                            <FaFlask className="text-emerald-600 dark:text-emerald-400" size={28}/>
+                        </div>
+                        <div>
+                            <h3 className="text-lg font-bold dreamy-text">Traumemotionen und mentale Gesundheit</h3>
+                            <p className="text-xs" style={getTextStyle('muted')}>Universität Wien, Österreich</p>
+                        </div>
+                    </div>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <div className="flex justify-between mb-2">
+                            <span className="text-sm font-bold">Status:</span>
+                            <span
+                                className="text-sm bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 px-2 py-0.5 rounded-full">Fast voll</span>
+                        </div>
+                        <div className="flex justify-between mb-2">
+                            <span className="text-sm font-bold">Teilnehmer:</span>
+                            <span className="text-sm">1,890 / 2,000</span>
+                        </div>
+                        <div className="flex justify-between">
+                            <span className="text-sm font-bold">Enddatum:</span>
+                            <span className="text-sm">30. September 2024</span>
+                        </div>
+                    </div>
+
+                    <p className="text-sm mb-4">
+                        Diese Studie erforscht die Beziehung zwischen emotionalen Mustern in Träumen und
+                        verschiedenen Aspekten der psychischen Gesundheit im Wachzustand.
+                    </p>
+
+                    <button
+                        className="w-full py-2 px-4 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg transition-colors">
+                        Teilnehmen
+                    </button>
+                </div>
+
+                {/* Study 4 */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
+                    <div className="flex items-center mb-4">
+                        <div className="p-3 bg-amber-500/20 rounded-full mr-4">
+                            <FaFlask className="text-amber-600 dark:text-amber-400" size={28}/>
+                        </div>
+                        <div>
+                            <h3 className="text-lg font-bold dreamy-text">Kulturübergreifende Traumsymbole</h3>
+                            <p className="text-xs" style={getTextStyle('muted')}>University of Tokyo, Japan</p>
+                        </div>
+                    </div>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <div className="flex justify-between mb-2">
+                            <span className="text-sm font-bold">Status:</span>
+                            <span
+                                className="text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full">Aktiv</span>
+                        </div>
+                        <div className="flex justify-between mb-2">
+                            <span className="text-sm font-bold">Teilnehmer:</span>
+                            <span className="text-sm">3,456 / 10,000</span>
+                        </div>
+                        <div className="flex justify-between">
+                            <span className="text-sm font-bold">Enddatum:</span>
+                            <span className="text-sm">31. Dezember 2025</span>
+                        </div>
+                    </div>
+
+                    <p className="text-sm mb-4">
+                        Diese globale Studie sammelt Traumsymbole aus verschiedenen Kulturen, um universelle und
+                        kulturspezifische Traumelemente zu identifizieren.
+                    </p>
+
+                    <button
+                        className="w-full py-2 px-4 bg-amber-500 hover:bg-amber-600 text-white rounded-lg transition-colors">
+                        Teilnehmen
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        {/* Citizen Science */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Citizen Science: Mitmachen bei der
+                Traumforschung</h2>
+
+            <div className="dreamy-card p-6" style={getBackgroundStyle('violet')}>
+                <div className="flex items-center mb-6">
+                    <div className="p-3 bg-violet-500/20 rounded-full mr-4">
+                        <FaUsers className="text-violet-600 dark:text-violet-400" size={28}/>
+                    </div>
+                    <h3 className="text-xl font-bold dreamy-text">Wie du zur Wissenschaft beitragen kannst</h3>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                    {/* Project 1 */}
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <div className="flex justify-center mb-3">
+                            <div className="p-2 bg-violet-500/20 rounded-full">
+                                <FaClipboardCheck className="text-violet-600 dark:text-violet-400" size={20}/>
+                            </div>
+                        </div>
+                        <h4 className="font-bold mb-2 text-center">Globales Traumtagebuch</h4>
+                        <p className="text-sm">
+                            Teile deine Träume in der weltweit größten Traumdatenbank und hilf Forschern, Muster zu
+                            erkennen.
+                        </p>
+                        <div className="mt-3 text-center">
+                            <button
+                                className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
+                                Beitragen
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Project 2 */}
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <div className="flex justify-center mb-3">
+                            <div className="p-2 bg-violet-500/20 rounded-full">
+                                <FaGlobeAmericas className="text-violet-600 dark:text-violet-400" size={20}/>
+                            </div>
+                        </div>
+                        <h4 className="font-bold mb-2 text-center">Traumkarte</h4>
+                        <p className="text-sm">
+                            Hilf bei der Erstellung einer interaktiven Weltkarte, die zeigt, wie Träume je nach
+                            Region variieren.
+                        </p>
+                        <div className="mt-3 text-center">
+                            <button
+                                className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
+                                Beitragen
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Project 3 */}
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <div className="flex justify-center mb-3">
+                            <div className="p-2 bg-violet-500/20 rounded-full">
+                                <FaCalendarAlt className="text-violet-600 dark:text-violet-400" size={20}/>
+                            </div>
+                        </div>
+                        <h4 className="font-bold mb-2 text-center">30-Tage-Challenge</h4>
+                        <p className="text-sm">
+                            Nimm an der 30-Tage-Traumaufzeichnungs-Challenge teil und erhalte personalisierte
+                            Analysen.
+                        </p>
+                        <div className="mt-3 text-center">
+                            <button
+                                className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
+                                Beitragen
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <p className="text-sm">
+                    Citizen Science-Projekte ermöglichen es jedem, zur Traumforschung beizutragen. Deine Teilnahme
+                    hilft Wissenschaftlern, größere und vielfältigere Datensätze zu sammeln, was zu robusteren
+                    Forschungsergebnissen führt.
+                </p>
+            </div>
+        </div>
+
+        {/* Researcher Interviews */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Forscher-Interviews</h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Interview 1 */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
+                    <div className="flex items-start mb-4">
+                        <div className="p-3 bg-blue-500/20 rounded-full mr-4 mt-1">
+                            <FaUserMd className="text-blue-600 dark:text-blue-400" size={28}/>
+                        </div>
+                        <div>
+                            <h3 className="text-lg font-bold dreamy-text">Dr. Sarah Merton</h3>
+                            <p className="text-xs mb-1" style={getTextStyle('muted')}>Harvard University, USA</p>
+                            <p className="text-sm mb-3">Expertin für Traumkognition und neuronale Korrelate des
+                                Träumens</p>
+
+                            <div className="relative">
+                                <div
+                                    className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+                                    <FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
+                                    <div className="absolute inset-0 flex items-center justify-center">
+                                        <div
+                                            className="w-12 h-12 rounded-full bg-blue-500/80 flex items-center justify-center cursor-pointer">
+                                            <div
+                                                className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
+                            <ul className="list-disc list-inside text-sm space-y-1">
+                                <li>Neueste Erkenntnisse zur Traumkognition</li>
+                                <li>Wie das Gehirn Traumnarrative konstruiert</li>
+                                <li>Die Rolle von REM-Schlaf bei der Gedächtniskonsolidierung</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Interview 2 */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
+                    <div className="flex items-start mb-4">
+                        <div className="p-3 bg-emerald-500/20 rounded-full mr-4 mt-1">
+                            <FaUserMd className="text-emerald-600 dark:text-emerald-400" size={28}/>
+                        </div>
+                        <div>
+                            <h3 className="text-lg font-bold dreamy-text">Prof. Dr. Markus Weber</h3>
+                            <p className="text-xs mb-1" style={getTextStyle('muted')}>Max-Planck-Institut,
+                                Deutschland</p>
+                            <p className="text-sm mb-3">Pionier in der Erforschung luzider Träume und
+                                Traumkontrolle</p>
+
+                            <div className="relative">
+                                <div
+                                    className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+                                    <FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
+                                    <div className="absolute inset-0 flex items-center justify-center">
+                                        <div
+                                            className="w-12 h-12 rounded-full bg-emerald-500/80 flex items-center justify-center cursor-pointer">
+                                            <div
+                                                className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
+                            <ul className="list-disc list-inside text-sm space-y-1">
+                                <li>Techniken zur Induktion luzider Träume</li>
+                                <li>Therapeutische Anwendungen von Traumkontrolle</li>
+                                <li>Ethische Fragen in der Traummanipulation</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
+                {/* Interview 3 */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
+                    <div className="flex items-start mb-4">
+                        <div className="p-3 bg-amber-500/20 rounded-full mr-4 mt-1">
+                            <FaUserMd className="text-amber-600 dark:text-amber-400" size={28}/>
+                        </div>
+                        <div>
+                            <h3 className="text-lg font-bold dreamy-text">Dr. Yuki Tanaka</h3>
+                            <p className="text-xs mb-1" style={getTextStyle('muted')}>Kyoto University, Japan</p>
+                            <p className="text-sm mb-3">Spezialistin für kulturelle Traumforschung und vergleichende
+                                Traumanalyse</p>
+
+                            <div className="relative">
+                                <div
+                                    className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+                                    <FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
+                                    <div className="absolute inset-0 flex items-center justify-center">
+                                        <div
+                                            className="w-12 h-12 rounded-full bg-amber-500/80 flex items-center justify-center cursor-pointer">
+                                            <div
+                                                className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
+                            <ul className="list-disc list-inside text-sm space-y-1">
+                                <li>Kulturelle Unterschiede in Traumsymbolen</li>
+                                <li>Einfluss von Mythen und Folklore auf Träume</li>
+                                <li>Universelle vs. kulturspezifische Traumelemente</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Interview 4 */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('rose')}>
+                    <div className="flex items-start mb-4">
+                        <div className="p-3 bg-rose-500/20 rounded-full mr-4 mt-1">
+                            <FaUserMd className="text-rose-600 dark:text-rose-400" size={28}/>
+                        </div>
+                        <div>
+                            <h3 className="text-lg font-bold dreamy-text">Dr. Elena Rodriguez</h3>
+                            <p className="text-xs mb-1" style={getTextStyle('muted')}>Universidad de Barcelona,
+                                Spanien</p>
+                            <p className="text-sm mb-3">Forscherin im Bereich Traumtherapie und emotionale
+                                Verarbeitung</p>
+
+                            <div className="relative">
+                                <div
+                                    className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+                                    <FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
+                                    <div className="absolute inset-0 flex items-center justify-center">
+                                        <div
+                                            className="w-12 h-12 rounded-full bg-rose-500/80 flex items-center justify-center cursor-pointer">
+                                            <div
+                                                className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
+                            <ul className="list-disc list-inside text-sm space-y-1">
+                                <li>Traumbasierte Therapieansätze</li>
+                                <li>Verarbeitung traumatischer Erlebnisse im Traum</li>
+                                <li>Emotionale Regulation durch gezielte Traumarbeit</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {/* Upcoming Events */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Kommende Veranstaltungen</h2>
+
+            <div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
+                <div className="overflow-x-auto">
+                    <table className="w-full">
+                        <thead>
+                        <tr>
+                            <th className="text-left p-2">Datum</th>
+                            <th className="text-left p-2">Veranstaltung</th>
+                            <th className="text-left p-2">Ort</th>
+                            <th className="text-left p-2">Typ</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr className="bg-white/10 dark:bg-black/10">
+                            <td className="p-2">15. Juli 2024</td>
+                            <td className="p-2">Internationale Konferenz für Traumforschung</td>
+                            <td className="p-2">Berlin, Deutschland</td>
+                            <td className="p-2">
+                    <span
+                        className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs px-2 py-0.5 rounded-full">
+                      Konferenz
+                    </span>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td className="p-2">3. August 2024</td>
+                            <td className="p-2">Workshop: Luzide Träume für Anfänger</td>
+                            <td className="p-2">Online</td>
+                            <td className="p-2">
+                    <span
+                        className="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs px-2 py-0.5 rounded-full">
+                      Workshop
+                    </span>
+                            </td>
+                        </tr>
+                        <tr className="bg-white/10 dark:bg-black/10">
+                            <td className="p-2">22. September 2024</td>
+                            <td className="p-2">Symposium: Träume und psychische Gesundheit</td>
+                            <td className="p-2">Wien, Österreich</td>
+                            <td className="p-2">
+                    <span
+                        className="bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-200 text-xs px-2 py-0.5 rounded-full">
+                      Symposium
+                    </span>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td className="p-2">10. Oktober 2024</td>
+                            <td className="p-2">Webinar: Neueste Technologien in der Traumforschung</td>
+                            <td className="p-2">Online</td>
+                            <td className="p-2">
+                    <span
+                        className="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-xs px-2 py-0.5 rounded-full">
+                      Webinar
+                    </span>
+                            </td>
+                        </tr>
+                        <tr className="bg-white/10 dark:bg-black/10">
+                            <td className="p-2">5. November 2024</td>
+                            <td className="p-2">Traumforschung 2025: Ausblick und Trends</td>
+                            <td className="p-2">Paris, Frankreich</td>
+                            <td className="p-2">
+                    <span
+                        className="bg-rose-100 dark:bg-rose-900 text-rose-800 dark:text-rose-200 text-xs px-2 py-0.5 rounded-full">
+                      Konferenz
+                    </span>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div className="mt-4 text-center">
+                    <button
+                        className="py-2 px-4 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors">
+                        Alle Veranstaltungen anzeigen
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        {/* Newsletter Signup */}
+        <div className="mb-12">
+            <div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
+                <div className="flex flex-col md:flex-row items-center">
+                    <div className="mb-4 md:mb-0 md:mr-6 md:w-2/3">
+                        <h3 className="text-xl font-bold mb-2 dreamy-text">Bleib auf dem Laufenden</h3>
+                        <p className="text-sm mb-4">
+                            Abonniere unseren Newsletter, um über neue Studien, Veranstaltungen und Durchbrüche in
+                            der Traumforschung informiert zu bleiben.
+                        </p>
+                        <div className="flex flex-col sm:flex-row">
+                            <input
+                                type="email"
+                                placeholder="Deine E-Mail-Adresse"
+                                className="flex-1 p-2 rounded-lg mb-2 sm:mb-0 sm:mr-2 focus:outline-none"
+                                style={{backgroundColor: 'var(--container)', color: 'var(--text)'}}
+                            />
+                            <button
+                                className="py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
+                                Abonnieren
+                            </button>
+                        </div>
+                    </div>
+                    <div className="md:w-1/3 flex justify-center">
+                        <div className="p-4 bg-blue-500/20 rounded-full">
+                            <FaUniversity className="text-blue-600 dark:text-blue-400" size={48}/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {/* Navigation Links */}
+        <div className="flex flex-wrap justify-between items-center">
+            <NavLink to="/dreamarchive/user-dreams" className="dreamy-card p-3 inline-flex items-center">
+                <span className="mr-2">←</span> Zurück zu Deinen Träumen im Kontext
+            </NavLink>
+            <NavLink to="/dreamarchive" className="dreamy-card p-3 inline-flex items-center">
+                Zurück zur Übersicht <span className="ml-2">→</span>
+            </NavLink>
+        </div>
+    </div>);
+}
diff --git a/src/pages/dreamarchive/Technology.tsx b/src/pages/dreamarchive/Technology.tsx
new file mode 100644
index 0000000..b9485d6
--- /dev/null
+++ b/src/pages/dreamarchive/Technology.tsx
@@ -0,0 +1,396 @@
+import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
+import {FaBrain, FaChartBar, FaChartPie, FaLaptopCode, FaMicrochip, FaRobot, FaVrCardboard} from 'react-icons/fa';
+import {NavLink} from 'react-router-dom';
+
+export default function Technology() {
+    return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
+        {/* Hero Section */}
+        <div className="text-center mb-12 sm:mb-16 relative z-10">
+            <div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
+                <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Technologie &
+                    Traumforschung</h1>
+                <p className="text-lg sm:text-xl dreamy-text">Neueste Entwicklungen in der
+                    Traumforschungstechnologie</p>
+            </div>
+            <div
+                className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
+                style={{animationDelay: '0.2s'}}>
+                <div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
+                    <h2 className="dream-title text-xl sm:text-2xl">Die Zukunft der Traumforschung</h2>
+                </div>
+                <p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
+                    Entdecke bahnbrechende Technologien, die uns helfen, Träume besser zu verstehen, zu analysieren
+                    und sogar zu steuern.
+                </p>
+            </div>
+        </div>
+
+        {/* Latest Developments */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Neueste Entwicklungen</h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {/* EEG-based Dream Detection */}
+                <div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('blue')}>
+                    <div className="flex justify-center mb-4">
+                        <div className="p-4 bg-blue-500/20 rounded-full">
+                            <FaBrain className="text-blue-600 dark:text-blue-400" size={28}/>
+                        </div>
+                    </div>
+                    <h3 className="text-xl font-bold mb-3 text-center dreamy-text">EEG-basierte Traumdetektion</h3>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <div className="flex justify-between items-center mb-2">
+                            <span className="text-sm font-bold">Genauigkeit:</span>
+                            <span className="text-sm">85%</span>
+                        </div>
+                        <div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                            <div className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
+                                 style={{width: '85%'}}></div>
+                        </div>
+                        <p className="text-xs mt-2 text-center">Automatische Traumerkennung</p>
+                    </div>
+
+                    <p className="text-sm flex-grow" style={getTextStyle('normal')}>
+                        Moderne EEG-Technologie kann mit 85% Genauigkeit erkennen, wann eine Person träumt und in
+                        welcher Traumphase sie sich befindet. Dies ermöglicht gezielte Traumforschung und
+                        -intervention.
+                    </p>
+                </div>
+
+                {/* DreamNet Framework */}
+                <div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('purple')}>
+                    <div className="flex justify-center mb-4">
+                        <div className="p-4 bg-purple-500/20 rounded-full">
+                            <FaLaptopCode className="text-purple-600 dark:text-purple-400" size={28}/>
+                        </div>
+                    </div>
+                    <h3 className="text-xl font-bold mb-3 text-center dreamy-text">DreamNet-Framework</h3>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <div className="flex justify-between items-center mb-2">
+                            <span className="text-sm font-bold">Genauigkeit:</span>
+                            <span className="text-sm">99%</span>
+                        </div>
+                        <div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                            <div
+                                className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
+                                style={{width: '99%'}}></div>
+                        </div>
+                        <p className="text-xs mt-2 text-center">Multimodale Traumanalyse</p>
+                    </div>
+
+                    <p className="text-sm flex-grow" style={getTextStyle('normal')}>
+                        Das DreamNet-Framework kombiniert EEG-Daten, Augenbewegungen, Herzfrequenz und
+                        Körpertemperatur für eine präzise Traumanalyse. KI-Algorithmen interpretieren diese Daten
+                        und erstellen detaillierte Traumprofile.
+                    </p>
+                </div>
+
+                {/* Lucid Dreaming Control */}
+                <div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('emerald')}>
+                    <div className="flex justify-center mb-4">
+                        <div className="p-4 bg-emerald-500/20 rounded-full">
+                            <FaVrCardboard className="text-emerald-600 dark:text-emerald-400" size={28}/>
+                        </div>
+                    </div>
+                    <h3 className="text-xl font-bold mb-3 text-center dreamy-text">Lucid Dreaming Control</h3>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <h4 className="font-bold mb-2 text-center">Virtuelle Autosteuerung</h4>
+                        <p className="text-xs text-center mb-2">durch Traum-Muskelbewegungen</p>
+                        <div className="flex justify-center">
+                            <div
+                                className="relative w-24 h-24 rounded-full bg-emerald-100 dark:bg-emerald-900 flex items-center justify-center">
+                                <div
+                                    className="absolute w-16 h-16 rounded-full bg-emerald-200 dark:bg-emerald-800 flex items-center justify-center">
+                                    <div
+                                        className="absolute w-8 h-8 rounded-full bg-emerald-500 dark:bg-emerald-600 flex items-center justify-center text-white">
+                                        <FaRobot size={16}/>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="text-sm flex-grow" style={getTextStyle('normal')}>
+                        Bahnbrechende Forschung ermöglicht es Personen in luziden Träumen, durch subtile
+                        Augenbewegungen und Muskelsignale mit der Außenwelt zu kommunizieren und sogar virtuelle
+                        Objekte zu steuern.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        {/* Dream Type Classification */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Traumtypen-Klassifikation</h2>
+
+            <div className="dreamy-card rounded-xl p-6" style={getBackgroundStyle('rose')}>
+                <div className="flex items-center justify-center mb-6">
+                    <div className="p-4 bg-rose-500/20 rounded-full mr-3">
+                        <FaChartPie className="text-rose-600 dark:text-rose-400" size={28}/>
+                    </div>
+                    <h3 className="text-xl font-bold dreamy-text">Globale Verteilung der Traumtypen</h3>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                    <div>
+                        {/* Pie Chart Visualization (Mock) */}
+                        <div className="relative w-full aspect-square max-w-xs mx-auto">
+                            <div className="absolute inset-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+
+                            {/* Angstträume: 34% */}
+                            <div className="absolute inset-0 rounded-full bg-red-500 dark:bg-red-600" style={{
+                                clipPath: 'polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 75% 75%)'
+                            }}></div>
+
+                            {/* Soziale Träume: 28% */}
+                            <div className="absolute inset-0 rounded-full bg-blue-500 dark:bg-blue-600" style={{
+                                clipPath: 'polygon(50% 50%, 75% 75%, 50% 100%, 0% 100%, 0% 50%)'
+                            }}></div>
+
+                            {/* Sexuelle Träume: 12% */}
+                            <div className="absolute inset-0 rounded-full bg-pink-500 dark:bg-pink-600" style={{
+                                clipPath: 'polygon(50% 50%, 0% 50%, 0% 0%, 25% 0%)'
+                            }}></div>
+
+                            {/* Flugträume: 18% */}
+                            <div className="absolute inset-0 rounded-full bg-purple-500 dark:bg-purple-600" style={{
+                                clipPath: 'polygon(50% 50%, 25% 0%, 50% 0%)'
+                            }}></div>
+
+                            {/* Verfolgungsträume: 8% */}
+                            <div className="absolute inset-0 rounded-full bg-orange-500 dark:bg-orange-600" style={{
+                                clipPath: 'polygon(50% 50%, 50% 100%, 25% 100%)'
+                            }}></div>
+
+                            <div className="absolute inset-0 flex items-center justify-center">
+                                <div
+                                    className="w-16 h-16 rounded-full bg-white dark:bg-gray-900 flex items-center justify-center text-sm font-bold">
+                                    100%
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div>
+                        <div className="space-y-3">
+                            <div className="flex items-center">
+                                <div className="w-4 h-4 bg-red-500 dark:bg-red-600 mr-2"></div>
+                                <div className="flex-1">
+                                    <div className="flex justify-between">
+                                        <span className="text-sm font-bold">Angstträume</span>
+                                        <span className="text-sm">34%</span>
+                                    </div>
+                                    <div
+                                        className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                                        <div
+                                            className="absolute top-0 left-0 h-full bg-red-500 dark:bg-red-600 rounded-full"
+                                            style={{width: '34%'}}></div>
+                                    </div>
+                                    <p className="text-xs mt-1" style={getTextStyle('muted')}>Global
+                                        durchschnittlich</p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-center">
+                                <div className="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2"></div>
+                                <div className="flex-1">
+                                    <div className="flex justify-between">
+                                        <span className="text-sm font-bold">Soziale Träume</span>
+                                        <span className="text-sm">28%</span>
+                                    </div>
+                                    <div
+                                        className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                                        <div
+                                            className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
+                                            style={{width: '28%'}}></div>
+                                    </div>
+                                    <p className="text-xs mt-1" style={getTextStyle('muted')}>Kulturelle
+                                        Variationen</p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-center">
+                                <div className="w-4 h-4 bg-pink-500 dark:bg-pink-600 mr-2"></div>
+                                <div className="flex-1">
+                                    <div className="flex justify-between">
+                                        <span className="text-sm font-bold">Sexuelle Träume</span>
+                                        <span className="text-sm">12%</span>
+                                    </div>
+                                    <div
+                                        className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                                        <div
+                                            className="absolute top-0 left-0 h-full bg-pink-500 dark:bg-pink-600 rounded-full"
+                                            style={{width: '12%'}}></div>
+                                    </div>
+                                    <p className="text-xs mt-1" style={getTextStyle('muted')}>Altersabhängig</p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-center">
+                                <div className="w-4 h-4 bg-purple-500 dark:bg-purple-600 mr-2"></div>
+                                <div className="flex-1">
+                                    <div className="flex justify-between">
+                                        <span className="text-sm font-bold">Flugträume</span>
+                                        <span className="text-sm">18%</span>
+                                    </div>
+                                    <div
+                                        className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                                        <div
+                                            className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
+                                            style={{width: '18%'}}></div>
+                                    </div>
+                                    <p className="text-xs mt-1"
+                                       style={getTextStyle('muted')}>Persönlichkeitsabhängig</p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-center">
+                                <div className="w-4 h-4 bg-orange-500 dark:bg-orange-600 mr-2"></div>
+                                <div className="flex-1">
+                                    <div className="flex justify-between">
+                                        <span className="text-sm font-bold">Verfolgungsträume</span>
+                                        <span className="text-sm">8%</span>
+                                    </div>
+                                    <div
+                                        className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                                        <div
+                                            className="absolute top-0 left-0 h-full bg-orange-500 dark:bg-orange-600 rounded-full"
+                                            style={{width: '8%'}}></div>
+                                    </div>
+                                    <p className="text-xs mt-1" style={getTextStyle('muted')}>Stresskorreliert</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <p className="text-sm" style={getTextStyle('normal')}>
+                    Moderne KI-Algorithmen können Träume basierend auf ihrem Inhalt, emotionalen Ton und narrativen
+                    Strukturen klassifizieren. Diese Klassifikation hilft Forschern, Muster in großen
+                    Traumdatensätzen zu erkennen und kulturübergreifende Vergleiche anzustellen.
+                </p>
+            </div>
+        </div>
+
+        {/* Future Technologies */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Zukunftstechnologien</h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Dream Recording */}
+                <div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('violet')}>
+                    <div className="flex items-center mb-4">
+                        <div className="p-4 bg-violet-500/20 rounded-full mr-4">
+                            <FaMicrochip className="text-violet-600 dark:text-violet-400" size={28}/>
+                        </div>
+                        <h3 className="text-xl font-bold dreamy-text">Traumaufzeichnung</h3>
+                    </div>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <h4 className="font-bold mb-2">Visuelle Rekonstruktion von Träumen</h4>
+                        <p className="text-sm">
+                            Forscher arbeiten an Technologien, die visuelle Inhalte aus Träumen rekonstruieren
+                            können, indem sie Hirnaktivitätsmuster in visuelle Darstellungen umwandeln.
+                        </p>
+                    </div>
+
+                    <p className="text-sm flex-grow" style={getTextStyle('normal')}>
+                        Die nächste Generation von Traumtechnologie zielt darauf ab, Träume als Video aufzuzeichnen
+                        und abzuspielen. Erste Prototypen können bereits einfache visuelle Elemente aus der
+                        Hirnaktivität während des Träumens rekonstruieren.
+                    </p>
+                </div>
+
+                {/* Dream Sharing */}
+                <div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('amber')}>
+                    <div className="flex items-center mb-4">
+                        <div className="p-4 bg-amber-500/20 rounded-full mr-4">
+                            <FaChartBar className="text-amber-600 dark:text-amber-400" size={28}/>
+                        </div>
+                        <h3 className="text-xl font-bold dreamy-text">Traumaustausch</h3>
+                    </div>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                        <h4 className="font-bold mb-2">Gemeinsame Traumwelten</h4>
+                        <p className="text-sm">
+                            Experimentelle Technologien ermöglichen es zwei oder mehr Personen, ähnliche
+                            Traumszenarien zu erleben und in begrenztem Umfang miteinander zu interagieren.
+                        </p>
+                    </div>
+
+                    <p className="text-sm flex-grow" style={getTextStyle('normal')}>
+                        Forscher entwickeln Methoden, um Träume zwischen Individuen zu teilen oder sogar gemeinsame
+                        Traumwelten zu schaffen. Diese Technologie könnte revolutionäre Anwendungen in Therapie,
+                        Kreativität und zwischenmenschlicher Kommunikation haben.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        {/* Ethical Considerations */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Ethische Überlegungen</h2>
+
+            <div className="dreamy-card rounded-xl p-6" style={getBackgroundStyle('blue')}>
+                <h3 className="text-xl font-bold mb-4 dreamy-text">Wichtige ethische Fragen</h3>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <h4 className="font-bold mb-2">Privatsphäre</h4>
+                        <p className="text-sm">
+                            Wem gehören Traumdaten? Wie können wir sicherstellen, dass die intimsten Gedanken einer
+                            Person geschützt bleiben?
+                        </p>
+                    </div>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <h4 className="font-bold mb-2">Manipulation</h4>
+                        <p className="text-sm">
+                            Könnte Traumtechnologie für Werbung, Propaganda oder andere Formen der Beeinflussung
+                            missbraucht werden?
+                        </p>
+                    </div>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <h4 className="font-bold mb-2">Identität</h4>
+                        <p className="text-sm">
+                            Wie beeinflussen Traummanipulationen unser Selbstverständnis und unsere persönliche
+                            Entwicklung?
+                        </p>
+                    </div>
+
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <h4 className="font-bold mb-2">Zugang</h4>
+                        <p className="text-sm">
+                            Wer hat Zugang zu fortschrittlicher Traumtechnologie? Könnte dies zu neuen sozialen
+                            Ungleichheiten führen?
+                        </p>
+                    </div>
+                </div>
+
+                <p className="text-sm" style={getTextStyle('normal')}>
+                    Mit der rasanten Entwicklung der Traumtechnologie müssen wir auch die ethischen Implikationen
+                    sorgfältig betrachten. Forscher und Ethiker arbeiten gemeinsam an Richtlinien für
+                    verantwortungsvolle Traumforschung und -technologie.
+                </p>
+            </div>
+        </div>
+
+        {/* Navigation Links */}
+        <div className="flex flex-wrap justify-between items-center">
+            <NavLink to="/dreamarchive/living-conditions"
+                     className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
+                     style={getBackgroundStyle('emerald')}>
+                <span className="mr-2">←</span> Zurück zu Lebensbedingungen & Traumqualität
+            </NavLink>
+            <NavLink to="/dreamarchive/user-dreams"
+                     className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
+                     style={getBackgroundStyle('rose')}>
+                Weiter zu Deinen Träumen im Kontext <span className="ml-2">→</span>
+            </NavLink>
+        </div>
+    </div>);
+}
diff --git a/src/pages/dreamarchive/UserDreams.tsx b/src/pages/dreamarchive/UserDreams.tsx
new file mode 100644
index 0000000..230cd4f
--- /dev/null
+++ b/src/pages/dreamarchive/UserDreams.tsx
@@ -0,0 +1,427 @@
+import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
+import {FaChartLine, FaRegCommentDots, FaRegLightbulb, FaUser} from 'react-icons/fa';
+import {NavLink} from 'react-router-dom';
+import {MockUserMap} from '../../data/MockUsers';
+
+export default function UserDreams() {
+    const currentUser = MockUserMap.get(4); // Neo Quantum
+
+    return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
+        {/* Hero Section */}
+        <div className="text-center mb-12 sm:mb-16 relative z-10">
+            <div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
+                <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Deine Träume im
+                    Kontext</h1>
+                <p className="text-lg sm:text-xl dreamy-text">Einordnung deiner Träume in die globale
+                    Traumdatenbank</p>
+            </div>
+            <div
+                className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
+                style={{animationDelay: '0.2s'}}>
+                <div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
+                    <h2 className="dream-title text-xl sm:text-2xl">Hallo, {currentUser?.name || 'Neo'}</h2>
+                </div>
+                <p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
+                    Entdecke, wie sich deine Träume im Vergleich zur globalen Traumdatenbank verhalten und wie sie
+                    sich im Laufe der Zeit verändert haben.
+                </p>
+            </div>
+        </div>
+
+        {/* User Profile Overview */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Dein Traumprofil</h2>
+
+            <div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
+                <div className="flex flex-col md:flex-row items-center mb-6">
+                    <div className="mb-4 md:mb-0 md:mr-6">
+                        {currentUser?.profilePicture ? (<img
+                            src={`/assets/profiles/${currentUser.profilePicture}`}
+                            alt={currentUser.name}
+                            className="w-24 h-24 rounded-full object-cover border-4 border-purple-300 dark:border-purple-700"
+                        />) : (<div
+                            className="w-24 h-24 rounded-full bg-purple-200 dark:bg-purple-800 flex items-center justify-center">
+                            <FaUser className="text-purple-600 dark:text-purple-400" size={32}/>
+                        </div>)}
+                    </div>
+
+                    <div className="text-center md:text-left">
+                        <h3 className="text-xl font-bold mb-2 dreamy-text">{currentUser?.name || 'Neo Quantum'}</h3>
+                        <p className="text-sm mb-1" style={getTextStyle()}>Traumaufzeichnungen: <span
+                            className="font-bold">42</span></p>
+                        <p className="text-sm mb-1" style={getTextStyle()}>Aktive Tage: <span
+                            className="font-bold">{currentUser?.streakDays || 14}</span></p>
+                        <p className="text-sm" style={getTextStyle()}>Mitglied seit: <span
+                            className="font-bold">März 2023</span></p>
+                    </div>
+
+                    <div className="flex-1 mt-4 md:mt-0 md:ml-6">
+                        <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                            <h4 className="font-bold mb-2 text-center">Deine häufigsten Traumthemen</h4>
+                            <div className="space-y-2">
+                                <div>
+                                    <div className="flex justify-between text-xs mb-1">
+                                        <span>Fliegen</span>
+                                        <span>32%</span>
+                                    </div>
+                                    <div
+                                        className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                                        <div
+                                            className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
+                                            style={{width: '32%'}}></div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div className="flex justify-between text-xs mb-1">
+                                        <span>Technologie</span>
+                                        <span>28%</span>
+                                    </div>
+                                    <div
+                                        className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                                        <div
+                                            className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
+                                            style={{width: '28%'}}></div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div className="flex justify-between text-xs mb-1">
+                                        <span>Kreativität</span>
+                                        <span>24%</span>
+                                    </div>
+                                    <div
+                                        className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                                        <div
+                                            className="absolute top-0 left-0 h-full bg-emerald-500 dark:bg-emerald-600 rounded-full"
+                                            style={{width: '24%'}}></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {/* Global Comparison */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Vergleich mit globaler Traumdatenbank</h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Dream Emotions */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
+                    <div className="flex items-center mb-4">
+                        <div className="p-3 bg-blue-500/20 rounded-full mr-4">
+                            <FaRegCommentDots className="text-blue-600 dark:text-blue-400" size={28}/>
+                        </div>
+                        <h3 className="text-lg font-bold dreamy-text">Traumemotionen</h3>
+                    </div>
+
+                    <div className="space-y-4">
+                        <div>
+                            <div className="flex justify-between items-center mb-1">
+                                <span className="text-sm font-bold">Positive Emotionen</span>
+                                <div className="flex items-center">
+                                    <span className="text-xs mr-2">Global: 42%</span>
+                                    <span className="text-xs font-bold">Du: 58%</span>
+                                </div>
+                            </div>
+                            <div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                                <div
+                                    className="absolute top-0 left-0 h-full bg-gray-400 dark:bg-gray-600 rounded-full"
+                                    style={{width: '42%'}}></div>
+                                <div
+                                    className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full border-r-2 border-white dark:border-gray-900"
+                                    style={{width: '58%'}}></div>
+                            </div>
+                        </div>
+
+                        <div>
+                            <div className="flex justify-between items-center mb-1">
+                                <span className="text-sm font-bold">Negative Emotionen</span>
+                                <div className="flex items-center">
+                                    <span className="text-xs mr-2">Global: 38%</span>
+                                    <span className="text-xs font-bold">Du: 22%</span>
+                                </div>
+                            </div>
+                            <div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                                <div
+                                    className="absolute top-0 left-0 h-full bg-gray-400 dark:bg-gray-600 rounded-full"
+                                    style={{width: '38%'}}></div>
+                                <div
+                                    className="absolute top-0 left-0 h-full bg-red-500 dark:bg-red-600 rounded-full border-r-2 border-white dark:border-gray-900"
+                                    style={{width: '22%'}}></div>
+                            </div>
+                        </div>
+
+                        <div>
+                            <div className="flex justify-between items-center mb-1">
+                                <span className="text-sm font-bold">Neutrale Emotionen</span>
+                                <div className="flex items-center">
+                                    <span className="text-xs mr-2">Global: 20%</span>
+                                    <span className="text-xs font-bold">Du: 20%</span>
+                                </div>
+                            </div>
+                            <div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                                <div
+                                    className="absolute top-0 left-0 h-full bg-gray-400 dark:bg-gray-600 rounded-full"
+                                    style={{width: '20%'}}></div>
+                                <div
+                                    className="absolute top-0 left-0 h-full bg-yellow-500 dark:bg-yellow-600 rounded-full border-r-2 border-white dark:border-gray-900"
+                                    style={{width: '20%'}}></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="text-sm mt-4">
+                        Im Vergleich zum globalen Durchschnitt hast du deutlich mehr positive und weniger negative
+                        Emotionen in deinen Träumen. Dies könnte auf ein höheres Wohlbefinden oder eine
+                        optimistischere Grundeinstellung hindeuten.
+                    </p>
+                </div>
+
+                {/* Dream Themes */}
+                <div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
+                    <div className="flex items-center mb-4">
+                        <div className="p-3 bg-emerald-500/20 rounded-full mr-4">
+                            <FaRegLightbulb className="text-emerald-600 dark:text-emerald-400" size={28}/>
+                        </div>
+                        <h3 className="text-lg font-bold dreamy-text">Traumthemen</h3>
+                    </div>
+
+                    <div className="space-y-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="bg-white/20 dark:bg-black/20 p-3 rounded-lg text-center">
+                                <h4 className="font-bold mb-1 text-sm">Deine Top-Themen</h4>
+                                <ol className="text-xs text-left list-decimal list-inside">
+                                    <li>Fliegen (32%)</li>
+                                    <li>Technologie (28%)</li>
+                                    <li>Kreativität (24%)</li>
+                                    <li>Reisen (10%)</li>
+                                    <li>Musik (6%)</li>
+                                </ol>
+                            </div>
+
+                            <div className="bg-white/20 dark:bg-black/20 p-3 rounded-lg text-center">
+                                <h4 className="font-bold mb-1 text-sm">Globale Top-Themen</h4>
+                                <ol className="text-xs text-left list-decimal list-inside">
+                                    <li>Fallen (28%)</li>
+                                    <li>Verfolgung (22%)</li>
+                                    <li>Fliegen (18%)</li>
+                                    <li>Prüfungen (16%)</li>
+                                    <li>Verlust (14%)</li>
+                                </ol>
+                            </div>
+                        </div>
+
+                        <div className="bg-white/20 dark:bg-black/20 p-3 rounded-lg">
+                            <h4 className="font-bold mb-2 text-sm text-center">Einzigartige Aspekte deiner
+                                Träume</h4>
+                            <ul className="text-xs list-disc list-inside space-y-1">
+                                <li>Deine Träume enthalten 55% mehr technologische Elemente als der Durchschnitt
+                                </li>
+                                <li>Du träumst 78% häufiger vom Fliegen als die meisten Menschen</li>
+                                <li>Kreative Problemlösung tritt in deinen Träumen 3x häufiger auf</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <p className="text-sm mt-4">
+                        Deine Traumthemen unterscheiden sich deutlich vom globalen Durchschnitt. Während viele
+                        Menschen von Ängsten und Sorgen träumen, fokussieren sich deine Träume mehr auf positive
+                        Erfahrungen und kreative Exploration.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        {/* Dream Changes Over Time */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Persönliche Traumveränderung über Zeit</h2>
+
+            <div className="dreamy-card p-6" style={getBackgroundStyle('rose')}>
+                <div className="flex items-center mb-6">
+                    <div className="p-3 bg-rose-500/20 rounded-full mr-4">
+                        <FaChartLine className="text-rose-600 dark:text-rose-400" size={28}/>
+                    </div>
+                    <h3 className="text-lg font-bold dreamy-text">Entwicklung deiner Traumthemen</h3>
+                </div>
+
+                {/* Timeline Chart (Mock) */}
+                <div className="mb-6 overflow-x-auto">
+                    <div className="min-w-[600px]">
+                        <div className="relative h-60">
+                            {/* X-Axis (Time) */}
+                            <div
+                                className="absolute bottom-0 left-0 right-0 h-px bg-gray-300 dark:bg-gray-600"></div>
+                            <div className="absolute bottom-0 left-0 right-0 flex justify-between text-xs"
+                                 style={getTextStyle('muted')}>
+                                <div className="text-center">
+                                    <div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
+                                    <div className="mt-2">März 2023</div>
+                                </div>
+                                <div className="text-center">
+                                    <div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
+                                    <div className="mt-2">Juni 2023</div>
+                                </div>
+                                <div className="text-center">
+                                    <div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
+                                    <div className="mt-2">Sept 2023</div>
+                                </div>
+                                <div className="text-center">
+                                    <div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
+                                    <div className="mt-2">Dez 2023</div>
+                                </div>
+                                <div className="text-center">
+                                    <div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
+                                    <div className="mt-2">März 2024</div>
+                                </div>
+                                <div className="text-center">
+                                    <div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
+                                    <div className="mt-2">Heute</div>
+                                </div>
+                            </div>
+
+                            {/* Y-Axis (Percentage) */}
+                            <div className="absolute top-0 bottom-0 left-0 w-px bg-gray-300 dark:bg-gray-600"></div>
+                            <div className="absolute top-0 bottom-0 left-0 flex flex-col justify-between text-xs"
+                                 style={getTextStyle('muted')}>
+                                <div>
+                                    <div
+                                        className="absolute left-0 top-0 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
+                                    <div className="transform -translate-y-1/2 -translate-x-full mr-1">100%</div>
+                                </div>
+                                <div>
+                                    <div
+                                        className="absolute left-0 top-1/4 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
+                                    <div className="transform -translate-y-1/2 -translate-x-full mr-1">75%</div>
+                                </div>
+                                <div>
+                                    <div
+                                        className="absolute left-0 top-2/4 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
+                                    <div className="transform -translate-y-1/2 -translate-x-full mr-1">50%</div>
+                                </div>
+                                <div>
+                                    <div
+                                        className="absolute left-0 top-3/4 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
+                                    <div className="transform -translate-y-1/2 -translate-x-full mr-1">25%</div>
+                                </div>
+                                <div>
+                                    <div
+                                        className="absolute left-0 bottom-0 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
+                                    <div className="transform -translate-y-1/2 -translate-x-full mr-1">0%</div>
+                                </div>
+                            </div>
+
+                            {/* Data Lines */}
+                            {/* Fliegen (purple) */}
+                            <svg className="absolute inset-0" viewBox="0 0 100 100" preserveAspectRatio="none">
+                                <polyline
+                                    points="0,70 20,65 40,50 60,40 80,30 100,20"
+                                    fill="none"
+                                    stroke="#8b5cf6"
+                                    strokeWidth="2"
+                                />
+                            </svg>
+
+                            {/* Technologie (blue) */}
+                            <svg className="absolute inset-0" viewBox="0 0 100 100" preserveAspectRatio="none">
+                                <polyline
+                                    points="0,80 20,75 40,70 60,60 80,50 100,30"
+                                    fill="none"
+                                    stroke="#3b82f6"
+                                    strokeWidth="2"
+                                />
+                            </svg>
+
+                            {/* Kreativität (green) */}
+                            <svg className="absolute inset-0" viewBox="0 0 100 100" preserveAspectRatio="none">
+                                <polyline
+                                    points="0,85 20,80 40,75 60,65 80,55 100,35"
+                                    fill="none"
+                                    stroke="#10b981"
+                                    strokeWidth="2"
+                                />
+                            </svg>
+
+                            {/* Legend */}
+                            <div className="absolute top-0 right-0 bg-white/50 dark:bg-black/50 p-2 rounded-lg">
+                                <div className="flex items-center mb-1">
+                                    <div className="w-3 h-3 bg-purple-500 mr-2"></div>
+                                    <span className="text-xs">Fliegen</span>
+                                </div>
+                                <div className="flex items-center mb-1">
+                                    <div className="w-3 h-3 bg-blue-500 mr-2"></div>
+                                    <span className="text-xs">Technologie</span>
+                                </div>
+                                <div className="flex items-center">
+                                    <div className="w-3 h-3 bg-emerald-500 mr-2"></div>
+                                    <span className="text-xs">Kreativität</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
+                    <h4 className="font-bold mb-2">Schlüsselerkenntnisse</h4>
+                    <ul className="list-disc list-inside text-sm space-y-1">
+                        <li>Deine Träume vom Fliegen haben im letzten Jahr um 60% zugenommen</li>
+                        <li>Technologiebezogene Träume sind seit Dezember 2023 um 40% gestiegen</li>
+                        <li>Kreative Elemente in deinen Träumen haben sich verdoppelt</li>
+                        <li>Angstträume haben um 45% abgenommen</li>
+                    </ul>
+                </div>
+
+                <p className="text-sm">
+                    Die Analyse deiner Traumdaten über Zeit zeigt eine deutliche Entwicklung hin zu positiveren und
+                    kreativeren Traumthemen. Diese Veränderung könnte mit persönlichem Wachstum, veränderten
+                    Lebensumständen oder bewusster Traumarbeit zusammenhängen.
+                </p>
+            </div>
+        </div>
+
+        {/* Personalized Recommendations */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Personalisierte Empfehlungen</h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="dreamy-card p-6" style={getBackgroundStyle('violet')}>
+                    <h3 className="text-lg font-bold mb-3 dreamy-text">Für deine Traumarbeit</h3>
+                    <ul className="list-disc list-inside text-sm space-y-2">
+                        <li>Experimentiere mit luziden Träumen, da deine Flugträume ein guter Ausgangspunkt sind
+                        </li>
+                        <li>Führe ein detaillierteres Traumtagebuch, um Muster in deinen technologiebezogenen
+                            Träumen zu erkennen
+                        </li>
+                        <li>Probiere geführte Meditationen vor dem Schlafengehen, um deine kreativen Träume zu
+                            verstärken
+                        </li>
+                        <li>Teile deine Traumgeschichten in der Community, um neue Perspektiven zu gewinnen</li>
+                    </ul>
+                </div>
+
+                <div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
+                    <h3 className="text-lg font-bold mb-3 dreamy-text">Basierend auf deinem Profil</h3>
+                    <ul className="list-disc list-inside text-sm space-y-2">
+                        <li>Entdecke unsere Sammlung von Flugträumen aus verschiedenen Kulturen</li>
+                        <li>Nimm an unserem Workshop "Kreativität im Traum" teil</li>
+                        <li>Teste unsere neue Funktion zur Traumvisualisierung</li>
+                        <li>Verbinde dich mit anderen Träumern, die ähnliche Interessen an Technologie und
+                            Innovation haben
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        {/* Navigation Links */}
+        <div className="flex flex-wrap justify-between items-center">
+            <NavLink to="/dreamarchive/technology" className="dreamy-card p-3 inline-flex items-center">
+                <span className="mr-2">←</span> Zurück zu Technologie & Traumforschung
+            </NavLink>
+            <NavLink to="/dreamarchive/research-live" className="dreamy-card p-3 inline-flex items-center">
+                Weiter zu Traumforschung Live <span className="ml-2">→</span>
+            </NavLink>
+        </div>
+    </div>);
+}
diff --git a/src/pages/dreamarchive/WorldwideEvents.tsx b/src/pages/dreamarchive/WorldwideEvents.tsx
new file mode 100644
index 0000000..9afa06e
--- /dev/null
+++ b/src/pages/dreamarchive/WorldwideEvents.tsx
@@ -0,0 +1,242 @@
+import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
+import {FaFire, FaFlag, FaVirus} from 'react-icons/fa';
+import {NavLink} from 'react-router-dom';
+
+export default function WorldwideEvents() {
+    return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
+        {/* Hero Section */}
+        <div className="text-center mb-12 sm:mb-16 relative z-10">
+            <div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
+                <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Weltweite Ereignisse &
+                    Traumreaktionen</h1>
+                <p className="text-lg sm:text-xl dreamy-text">Korrelation zwischen globalen Ereignissen und
+                    Traummustern</p>
+            </div>
+            <div
+                className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
+                style={{animationDelay: '0.2s'}}>
+                <div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
+                    <h2 className="dream-title text-xl sm:text-2xl">Signifikante Ereignisse 2020-2025</h2>
+                </div>
+                <p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
+                    Entdecke, wie weltweite Ereignisse wie die COVID-19 Pandemie, Klimawandel-Ereignisse und
+                    geopolitische Spannungen die Traumlandschaft beeinflusst haben.
+                </p>
+            </div>
+        </div>
+
+        {/* Interactive Timeline (Mock) */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Zeitlinie der Ereignisse</h2>
+            <div className="relative">
+                <div
+                    className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-purple-300 dark:bg-purple-700 opacity-50"></div>
+
+                {/* Timeline Items */}
+                <div className="relative z-10">
+                    {/* 2020 */}
+                    <div className="mb-12 flex items-center">
+                        <div className="w-1/2 pr-8 text-right">
+                            <h3 className="text-xl font-bold mb-2 dreamy-text">2020</h3>
+                            <p className="text-sm" style={getTextStyle()}>Beginn der COVID-19 Pandemie</p>
+                        </div>
+                        <div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
+                             style={{background: 'var(--accent-gradient)'}}></div>
+                        <div className="w-1/2 pl-8">
+                            <div className="dreamy-card p-4">
+                                <p className="text-sm mb-2" style={getTextStyle()}>40% Anstieg der Traumhäufigkeit
+                                    während Lockdown</p>
+                                <p className="text-xs" style={getTextStyle('muted')}>Basierend auf 1.622 Teilnehmern
+                                    in Italien</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* 2021 */}
+                    <div className="mb-12 flex items-center">
+                        <div className="w-1/2 pr-8 text-right">
+                            <div className="dreamy-card p-4">
+                                <p className="text-sm mb-2" style={getTextStyle()}>23% mehr Träume über Feuer und
+                                    Flucht</p>
+                                <p className="text-xs" style={getTextStyle('muted')}>Korreliert mit Waldbränden in
+                                    Australien und Kalifornien</p>
+                            </div>
+                        </div>
+                        <div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
+                             style={{background: 'var(--accent-gradient)'}}></div>
+                        <div className="w-1/2 pl-8">
+                            <h3 className="text-xl font-bold mb-2 dreamy-text">2021</h3>
+                            <p className="text-sm" style={getTextStyle()}>Klimawandel-Ereignisse intensivieren
+                                sich</p>
+                        </div>
+                    </div>
+
+                    {/* 2022 */}
+                    <div className="mb-12 flex items-center">
+                        <div className="w-1/2 pr-8 text-right">
+                            <h3 className="text-xl font-bold mb-2 dreamy-text">2022</h3>
+                            <p className="text-sm" style={getTextStyle()}>Beginn des Konflikts in der Ukraine</p>
+                        </div>
+                        <div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
+                             style={{background: 'var(--accent-gradient)'}}></div>
+                        <div className="w-1/2 pl-8">
+                            <div className="dreamy-card p-4">
+                                <p className="text-sm mb-2" style={getTextStyle()}>Erhöhte Angstträume in
+                                    europäischen Nachbarländern</p>
+                                <p className="text-xs" style={getTextStyle('muted')}>Besonders in Polen, Rumänien
+                                    und den baltischen Staaten</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* 2023 */}
+                    <div className="mb-12 flex items-center">
+                        <div className="w-1/2 pr-8 text-right">
+                            <div className="dreamy-card p-4">
+                                <p className="text-sm mb-2" style={getTextStyle()}>Verstärkte Träume über Jobverlust
+                                    und finanzielle Sorgen</p>
+                                <p className="text-xs" style={getTextStyle('muted')}>Korreliert mit globaler
+                                    Wirtschaftskrise</p>
+                            </div>
+                        </div>
+                        <div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
+                             style={{background: 'var(--accent-gradient)'}}></div>
+                        <div className="w-1/2 pl-8">
+                            <h3 className="text-xl font-bold mb-2 dreamy-text">2023</h3>
+                            <p className="text-sm" style={getTextStyle()}>Wirtschaftliche Instabilität</p>
+                        </div>
+                    </div>
+
+                    {/* 2024-2025 */}
+                    <div className="flex items-center">
+                        <div className="w-1/2 pr-8 text-right">
+                            <h3 className="text-xl font-bold mb-2 dreamy-text">2024-2025</h3>
+                            <p className="text-sm" style={getTextStyle()}>Extreme Wetterereignisse nehmen zu</p>
+                        </div>
+                        <div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
+                             style={{background: 'var(--accent-gradient)'}}></div>
+                        <div className="w-1/2 pl-8">
+                            <div className="dreamy-card p-4">
+                                <p className="text-sm mb-2" style={getTextStyle()}>Verstärkte Wasserträume in von
+                                    Überschwemmungen betroffenen Regionen</p>
+                                <p className="text-xs" style={getTextStyle('muted')}>Hitzewellen führten zu
+                                    fragmentierten Träumen durch veränderte Schlafmuster</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {/* Detailed Event Sections */}
+        <div className="mb-12">
+            <h2 className="text-2xl font-bold mb-6 dream-title">Detaillierte Ereignisanalyse</h2>
+
+            {/* COVID-19 Section */}
+            <div className="dreamy-card mb-8 p-6" style={getBackgroundStyle('purple')}>
+                <div className="flex flex-col md:flex-row items-center mb-4">
+                    <div className="p-3 bg-purple-500/20 rounded-full mb-4 md:mb-0 md:mr-4">
+                        <FaVirus className="text-purple-600 dark:text-purple-400" size={32}/>
+                    </div>
+                    <h3 className="text-xl font-bold dreamy-text">COVID-19 Pandemie (2020-2022)</h3>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <h4 className="font-bold mb-2">Traumhäufigkeit</h4>
+                        <p className="text-sm">1.622 Teilnehmer in Italien berichteten einen 40% Anstieg der
+                            Traumhäufigkeit während des Lockdowns</p>
+                    </div>
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <h4 className="font-bold mb-2">Emotionale Auswirkungen</h4>
+                        <p className="text-sm">Negative Traumemotionen korrelierten direkt mit
+                            Schlafqualitätsverschlechterung</p>
+                    </div>
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <h4 className="font-bold mb-2">Häufige Themen</h4>
+                        <p className="text-sm">Isolation, Krankheit, Verlust von Kontrolle</p>
+                    </div>
+                </div>
+
+                <p className="text-sm">
+                    Die COVID-19 Pandemie hatte einen signifikanten Einfluss auf die Traumlandschaft weltweit.
+                    Studien zeigen, dass Menschen während der Lockdown-Phasen häufiger und intensiver träumten,
+                    wobei negative Emotionen und Ängste dominierten.
+                </p>
+            </div>
+
+            {/* Climate Change Section */}
+            <div className="dreamy-card mb-8 p-6" style={getBackgroundStyle('emerald')}>
+                <div className="flex flex-col md:flex-row items-center mb-4">
+                    <div className="p-3 bg-emerald-500/20 rounded-full mb-4 md:mb-0 md:mr-4">
+                        <FaFire className="text-emerald-600 dark:text-emerald-400" size={32}/>
+                    </div>
+                    <h3 className="text-xl font-bold dreamy-text">Klimawandel-Ereignisse (2021-2025)</h3>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <h4 className="font-bold mb-2">Waldbrände</h4>
+                        <p className="text-sm">Waldbrände in Australien/Kalifornien führten zu 23% mehr Träumen über
+                            Feuer und Flucht</p>
+                    </div>
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <h4 className="font-bold mb-2">Überschwemmungen</h4>
+                        <p className="text-sm">Überschwemmungen in Europa führten zu verstärkten Wasserträumen in
+                            betroffenen Regionen</p>
+                    </div>
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <h4 className="font-bold mb-2">Hitzewellen</h4>
+                        <p className="text-sm">Veränderte Schlafmuster durch Hitzewellen führten zu fragmentierten
+                            Träumen</p>
+                    </div>
+                </div>
+
+                <p className="text-sm">
+                    Klimawandel-Ereignisse spiegeln sich deutlich in den Traummustern wider. Besonders bemerkenswert
+                    ist, dass Menschen in direkt betroffenen Regionen häufiger von den spezifischen
+                    Naturkatastrophen träumen, die sie erlebt haben.
+                </p>
+            </div>
+
+            {/* Geopolitical Tensions Section */}
+            <div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
+                <div className="flex flex-col md:flex-row items-center mb-4">
+                    <div className="p-3 bg-blue-500/20 rounded-full mb-4 md:mb-0 md:mr-4">
+                        <FaFlag className="text-blue-600 dark:text-blue-400" size={32}/>
+                    </div>
+                    <h3 className="text-xl font-bold dreamy-text">Geopolitische Spannungen (2022-2025)</h3>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <h4 className="font-bold mb-2">Konflikt in der Ukraine</h4>
+                        <p className="text-sm">Erhöhte Angstträume in europäischen Nachbarländern, besonders in
+                            Polen, Rumänien und den baltischen Staaten</p>
+                    </div>
+                    <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                        <h4 className="font-bold mb-2">Wirtschaftskrise</h4>
+                        <p className="text-sm">Verstärkte Träume über Jobverlust und finanzielle Sorgen,
+                            korrelierend mit globaler wirtschaftlicher Instabilität</p>
+                    </div>
+                </div>
+
+                <p className="text-sm">
+                    Geopolitische Spannungen und Konflikte haben einen messbaren Einfluss auf die Traumlandschaft,
+                    wobei die Nähe zum Konfliktgebiet die Intensität der Traumreaktionen beeinflusst.
+                    Wirtschaftliche Unsicherheit spiegelt sich in Träumen über finanzielle Sorgen wider.
+                </p>
+            </div>
+        </div>
+
+        {/* Navigation Links */}
+        <div className="flex flex-wrap justify-between items-center">
+            <NavLink to="/dreamarchive" className="dreamy-card p-3 inline-flex items-center">
+                <span className="mr-2">←</span> Zurück zur Übersicht
+            </NavLink>
+            <NavLink to="/dreamarchive/cultural-landscapes" className="dreamy-card p-3 inline-flex items-center">
+                Weiter zu Kulturellen Traumlandschaften <span className="ml-2">→</span>
+            </NavLink>
+        </div>
+    </div>);
+}