From 668eca6f2b91bf135d37567bd0ac05543dd614e0 Mon Sep 17 00:00:00 2001
From: Marius Rometsch <marius.rometsch@carmasec.com>
Date: Mon, 22 Dec 2025 00:42:24 +0100
Subject: [PATCH] Layout optimierung

---
 präsentation.html | 631 ++++++++++++++++++++++++----------------------
 1 file changed, 324 insertions(+), 307 deletions(-)

diff --git a/präsentation.html b/präsentation.html
index abbd8f0..498035a 100644
--- a/präsentation.html
+++ b/präsentation.html
@@ -8,7 +8,7 @@
     <!-- External Libraries -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Montserrat:wght@400;600;700&display=swap');
@@ -48,9 +48,10 @@
             top: 0;
             left: 0;
             display: none;
-            padding: 25px 50px 80px 50px;
+            padding: clamp(15px, 2vh, 25px) clamp(25px, 3vw, 50px) clamp(60px, 6vh, 80px) clamp(25px, 3vw, 50px);
             background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(26, 31, 58, 0.95) 100%);
-            overflow: hidden;
+            overflow-y: auto;
+            overflow-x: hidden;
         }
         
         .slide.active {
@@ -77,38 +78,38 @@
         
         h1 {
             font-family: 'Roboto Mono', monospace;
-            font-size: 56px;
+            font-size: clamp(32px, 4vw, 56px);
             color: #00FF41;
             text-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
-            margin-bottom: 15px;
+            margin-bottom: clamp(10px, 1.5vh, 15px);
             letter-spacing: -2px;
         }
-        
+
         h2 {
             font-family: 'Roboto Mono', monospace;
-            font-size: 36px;
+            font-size: clamp(24px, 2.5vw, 36px);
             color: #00FF41;
-            margin-bottom: 15px;
+            margin-bottom: clamp(10px, 1.2vh, 15px);
             letter-spacing: -1px;
         }
-        
+
         h3 {
-            font-size: 24px;
+            font-size: clamp(18px, 1.8vw, 24px);
             color: #FFD700;
-            margin-bottom: 10px;
+            margin-bottom: clamp(6px, 0.8vh, 10px);
         }
-        
+
         p {
-            font-size: 18px;
+            font-size: clamp(14px, 1.3vw, 18px);
             line-height: 1.4;
-            margin-bottom: 8px;
+            margin-bottom: clamp(6px, 0.6vh, 8px);
             color: #E0E0E0;
         }
-        
+
         .subtitle {
-            font-size: 26px;
+            font-size: clamp(18px, 2vw, 26px);
             color: #B0B0B0;
-            margin-bottom: 20px;
+            margin-bottom: clamp(15px, 1.5vh, 20px);
             line-height: 1.3;
         }
         
@@ -136,15 +137,15 @@
         
         .stat-number {
             font-family: 'Roboto Mono', monospace;
-            font-size: 40px;
+            font-size: clamp(28px, 3vw, 40px);
             color: #FFD700;
             font-weight: bold;
             display: block;
-            margin-bottom: 8px;
+            margin-bottom: clamp(6px, 0.6vh, 8px);
         }
-        
+
         .stat-label {
-            font-size: 16px;
+            font-size: clamp(12px, 1.2vw, 16px);
             color: #B0B0B0;
         }
         
@@ -224,7 +225,7 @@
         
         .icon-list {
             list-style: none;
-            font-size: 16px;
+            font-size: clamp(13px, 1.2vw, 16px);
             line-height: 1.5;
         }
         
@@ -315,10 +316,10 @@
             background: rgba(30, 30, 30, 0.6);
             border: 2px solid #00FF41;
             border-radius: 10px;
-            padding: 25px;
+            padding: clamp(15px, 2vh, 25px);
             text-align: center;
-            margin: 15px 0;
-            font-size: 26px;
+            margin: clamp(10px, 1.2vh, 15px) 0;
+            font-size: clamp(18px, 2vw, 26px);
             color: #FFD700;
         }
         
@@ -340,31 +341,31 @@
         
         .password-text {
             font-family: 'Courier New', monospace;
-            font-size: 38px;
+            font-size: clamp(28px, 3vw, 38px);
             color: #FF0055;
-            letter-spacing: 5px;
+            letter-spacing: clamp(3px, 0.4vw, 5px);
             text-shadow: 0 0 10px rgba(255, 0, 85, 0.5);
         }
         
         ul.features {
             list-style: none;
-            font-size: 20px;
+            font-size: clamp(15px, 1.5vw, 20px);
             line-height: 1.6;
         }
-        
+
         ul.features li {
-            margin: 10px 0;
-            padding-left: 35px;
+            margin: clamp(8px, 0.8vh, 10px) 0;
+            padding-left: clamp(25px, 2.5vw, 35px);
             position: relative;
         }
-        
+
         ul.features li::before {
             content: '✓';
             position: absolute;
             left: 0;
             color: #00FF41;
             font-weight: bold;
-            font-size: 24px;
+            font-size: clamp(18px, 1.8vw, 24px);
         }
         
         .center-content {
@@ -555,7 +556,7 @@
             </div>
         </div>
 
-        <!-- SLIDE 2: URSPRUNG -->
+        <!-- SLIDE 2: URSPRUNG Teil 1 -->
         <div class="slide" data-slide="2">
             <h2>Von 10m² zum Cyber-König</h2>
             <div class="timeline">
@@ -564,58 +565,66 @@
                 <div class="timeline-item">2003</div>
                 <div class="timeline-item">2005</div>
             </div>
-            <div class="split-content">
-                <div class="content-box">
-                    <h3 style="color: #FF0055;">Der Albtraum beginnt</h3>
-                    <ul class="icon-list">
-                        <li>🏚️ <strong>10m² Zimmer</strong> in Vladivostok – bitter arm</li>
-                        <li>👨‍👩‍👦 Eltern geschieden als er 2 Jahre alt war</li>
-                        <li>🍺 Mutter: Supermarktkassiererin, Alkoholikerin</li>
-                        <li>💀 <strong>Mit 17:</strong> Mutter tot in der Badewanne gefunden</li>
-                        <li>📦 <strong>Am selben Tag:</strong> Onkel raubt ihn aus, wirft ihn raus</li>
-                        <li>🏠 Obdachlos bei Oma</li>
-                        <li>💻 Überlebt mit $5/Tag durch PC-Reparaturen</li>
-                    </ul>
-                </div>
-                <div class="content-box">
-                    <h3 style="color: #00FF41;">Die dunkle Transformation</h3>
-                    <ul class="icon-list">
-                        <li>🧠 Autodidakt: Bringt sich Programmieren bei</li>
-                        <li>👨‍💻 Alias <strong>"nCuX"</strong> = "Psycho" (explosives Temperament)</li>
-                        <li>🌐 2003: Eintritt ins CarderPlanet Forum</li>
-                        <li>💳 2005: Start des Kreditkartenhandels</li>
-                        <li>👨‍👦 Vater: <strong>Valery Seleznev</strong>, Duma-Abgeordneter</li>
-                        <li>🛡️ Genießt FSB-Schutz durch politische Verbindungen</li>
-                    </ul>
-                </div>
+            <div class="content-box" style="margin: 20px auto; max-width: 900px;">
+                <h3 style="color: #FF0055; text-align: center;">Der Albtraum beginnt</h3>
+                <ul class="icon-list" style="font-size: clamp(14px, 1.4vw, 17px); line-height: 1.6;">
+                    <li>🏚️ <strong>10m² Zimmer</strong> in Vladivostok – bitter arm</li>
+                    <li>👨‍👩‍👦 Eltern geschieden als er 2 Jahre alt war</li>
+                    <li>🍺 Mutter: Supermarktkassiererin, Alkoholikerin</li>
+                    <li>💀 <strong>Mit 17:</strong> Mutter tot in der Badewanne gefunden</li>
+                    <li>📦 <strong>Am selben Tag:</strong> Onkel raubt ihn aus, wirft ihn raus</li>
+                    <li>🏠 Obdachlos bei Oma</li>
+                    <li>💻 Überlebt mit $5/Tag durch PC-Reparaturen</li>
+                </ul>
             </div>
-            <div class="quote-box" style="border-color: #FF0055;">
+            <div class="quote-box" style="border-color: #FF0055; margin-top: 20px;">
                 "I was 17, struggle hard, and lose my way into bad world."<br>
                 <span style="color: #B0B0B0;">— Roman Seleznev, handgeschriebener Brief an US-Gericht</span>
             </div>
         </div>
 
-        <!-- SLIDE 3: GESCHÄFTSMODELL -->
+        <!-- SLIDE 3: URSPRUNG Teil 2 -->
         <div class="slide" data-slide="3">
-            <h2>Der "Amazon" der Kreditkarten</h2>
-            <div style="text-align: center; margin: 10px 0;">
-                <div class="image-container">
-                    <img src="" 
-                         alt="Track2.name Screenshot" class="slide-image" id="track2-img" 
-                         style="max-height: 200px; border-color: #FF0055;">
-                    <div class="image-caption">🌐 track2.name - Die automatisierte Carding-Plattform</div>
-                </div>
-            </div>
-            <div class="content-box" style="margin: 10px auto; max-width: 900px;">
-                <h3 style="text-align: center; margin-bottom: 12px;">🌐 track2.name (2009-2012)</h3>
-                <ul class="features" style="font-size: 18px;">
-                    <li>🔍 Suchfunktion nach Bank, Region & Kartentyp</li>
-                    <li>🛒 Shopping-Cart System mit Checkout</li>
-                    <li>⚡ 48-Stunden Umtauschgarantie</li>
-                    <li>💰 Zahlung via Liberty Reserve</li>
-                    <li>📦 Automatisierte Auslieferung</li>
+            <h2>Die dunkle Transformation</h2>
+            <div class="content-box" style="margin: 20px auto; max-width: 900px;">
+                <h3 style="color: #00FF41; text-align: center;">Vom Opfer zum Täter</h3>
+                <ul class="icon-list" style="font-size: clamp(14px, 1.4vw, 17px); line-height: 1.8;">
+                    <li>🧠 Autodidakt: Bringt sich Programmieren bei</li>
+                    <li>👨‍💻 Alias <strong>"nCuX"</strong> = "Psycho" (explosives Temperament)</li>
+                    <li>🌐 2003: Eintritt ins CarderPlanet Forum</li>
+                    <li>💳 2005: Start des Kreditkartenhandels</li>
+                    <li>👨‍👦 Vater: <strong>Valery Seleznev</strong>, Duma-Abgeordneter</li>
+                    <li>🛡️ Genießt FSB-Schutz durch politische Verbindungen</li>
                 </ul>
             </div>
+            <div class="alert-box" style="margin-top: 30px;">
+                💡 Ein tragischer Anfang führt zu einer kriminellen Karriere
+            </div>
+        </div>
+
+        <!-- SLIDE 4: GESCHÄFTSMODELL -->
+        <div class="slide" data-slide="4">
+            <h2>Der "Amazon" der Kreditkarten</h2>
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 15px 0; align-items: start;">
+                <div style="text-align: center;">
+                    <div class="image-container">
+                        <img src="./images/WerbungimCarderforum.png"
+                             alt="Track2.name Screenshot" class="slide-image" id="track2-img"
+                             style="max-height: clamp(200px, 25vh, 280px); border-color: #FF0055;">
+                        <div class="image-caption">🌐 track2.name - Die automatisierte Carding-Plattform</div>
+                    </div>
+                </div>
+                <div class="content-box" style="height: 100%;">
+                    <h3 style="text-align: center; margin-bottom: 12px;">🌐 track2.name (2009-2012)</h3>
+                    <ul class="features" style="font-size: clamp(14px, 1.4vw, 17px);">
+                        <li>🔍 Suchfunktion nach Bank, Region & Kartentyp</li>
+                        <li>🛒 Shopping-Cart System mit Checkout</li>
+                        <li>⚡ 48-Stunden Umtauschgarantie</li>
+                        <li>💰 Zahlung via Liberty Reserve</li>
+                        <li>📦 Automatisierte Auslieferung</li>
+                    </ul>
+                </div>
+            </div>
             <div class="stats">
                 <div class="stat-box">
                     <span class="stat-number">747k</span>
@@ -630,13 +639,13 @@
                     <span class="stat-label">Verkäufe<br>pro Woche</span>
                 </div>
             </div>
-            <div class="alert-box">
+            <div class="alert-box" style="margin-top: 15px;">
                 💬 "Reinvented the market for stolen credit cards" — US Prosecutors
             </div>
         </div>
 
-        <!-- SLIDE 4: OPFER -->
-        <div class="slide" data-slide="4">
+        <!-- SLIDE 5: OPFER -->
+        <div class="slide" data-slide="5">
             <h2>Von Köln nach Dortmund – aus Kreditkarten</h2>
             <div class="map-visual">
                 📍 KÖLN ━━━━━━━━━━━━━━━━━━━━━ DORTMUND 📍<br>
@@ -656,174 +665,187 @@
                     <span class="stat-label">Schaden<br>(nur Seattle)</span>
                 </div>
             </div>
-            <div style="text-align: center; margin: 10px 0;">
-                <div class="image-container">
-                    <img src="" 
-                         alt="Broadway Grill" class="slide-image" id="broadway-img" 
-                         style="max-height: 160px;">
-                    <div class="image-caption">🍕 Broadway Grill, Seattle - Opfer des Hacks</div>
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px; align-items: center;">
+                <div style="text-align: center;">
+                    <div class="image-container">
+                        <img src="./images/BroadwayGrill.png"
+                             alt="Broadway Grill" class="slide-image" id="broadway-img"
+                             style="max-height: clamp(160px, 20vh, 220px);">
+                        <div class="image-caption">🍕 Broadway Grill, Seattle - Opfer des Hacks</div>
+                    </div>
+                </div>
+                <div class="content-box">
+                    <h3>🍕 Case Study: Broadway Grill, Seattle</h3>
+                    <ul class="icon-list" style="font-size: clamp(14px, 1.4vw, 17px);">
+                        <li>22 Jahre erfolgreiches Restaurant</li>
+                        <li>Gehackt von Seleznev</li>
+                        <li>-40% Einnahmen nach Hack</li>
+                        <li>Resultat: <span class="highlight">BANKROTT</span></li>
+                    </ul>
+                    <p style="margin-top: 12px; color: #FF0055; font-size: clamp(13px, 1.3vw, 16px);">
+                        Ziele: Kleine Unternehmen ohne IT-Security Budget (Pizzerien, Bäckereien, Cafés)
+                    </p>
                 </div>
-            </div>
-            <div class="content-box">
-                <h3>🍕 Case Study: Broadway Grill, Seattle</h3>
-                <ul class="icon-list">
-                    <li>22 Jahre erfolgreiches Restaurant</li>
-                    <li>Gehackt von Seleznev</li>
-                    <li>-40% Einnahmen nach Hack</li>
-                    <li>Resultat: <span class="highlight">BANKROTT</span></li>
-                </ul>
-                <p style="margin-top: 12px; color: #FF0055; font-size: 16px;">
-                    Ziele: Kleine Unternehmen ohne IT-Security Budget (Pizzerien, Bäckereien, Cafés)
-                </p>
             </div>
         </div>
 
-        <!-- SLIDE 5: EXPLOSION -->
-        <div class="slide" data-slide="5">
+        <!-- SLIDE 6: EXPLOSION Teil 1 -->
+        <div class="slide" data-slide="6">
             <h2>Plot Twist: Die Explosion</h2>
-            <div style="text-align: center; margin-bottom: 10px;">
-                <div class="image-container">
-                    <img src="" 
-                         alt="Café Argana destroyed" class="slide-image" id="argana-img" 
-                         style="max-height: 150px; border-color: #FF0055;">
-                    <div class="image-caption">💥 Café Argana nach dem Bombenanschlag, 28. April 2011</div>
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px; align-items: start;">
+                <div style="text-align: center;">
+                    <div class="image-container">
+                        <img src="./images/marrakechCafe.png"
+                             alt="Café Argana destroyed" class="slide-image" id="argana-img"
+                             style="max-height: clamp(200px, 28vh, 260px); border-color: #FF0055;">
+                        <div class="image-caption">💥 Café Argana nach dem Bombenanschlag, 28. April 2011</div>
+                    </div>
+                </div>
+                <div class="content-box">
+                    <h3 style="font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 15px;">📅 28. April 2011 - Ein Monat nach Anklage</h3>
+                    <ul class="icon-list" style="font-size: clamp(14px, 1.4vw, 17px); line-height: 1.6;">
+                        <li>📍 Café Argana, Djemaa el-Fna, Marrakesch</li>
+                        <li>🏨 Hotel verweigert Eintritt → gehen ins Café</li>
+                        <li>⏰ Kellner: "Dauert 30 Minuten" / "Bad idea"</li>
+                        <li>💥 Zwei Bomben explodieren (Al-Qaida)</li>
+                        <li>☠️ 17 Tote, 25 Verletzte</li>
+                        <li>🧠 Roman: Großer Teil des Schädels weggerissen</li>
+                        <li>✈️ Evakuierung nach Moskau, 2 Wochen Koma</li>
+                        <li>🦾 Titanplatte ersetzt Schädelteile</li>
+                    </ul>
                 </div>
             </div>
-            <div class="content-box" style="margin-bottom: 10px;">
-                <h3>📅 28. April 2011 - Ein Monat nach Anklage</h3>
-                <ul class="icon-list" style="font-size: 15px; line-height: 1.4;">
-                    <li>📍 Café Argana, Djemaa el-Fna, Marrakesch</li>
-                    <li>🏨 Hotel verweigert Eintritt → gehen ins Café</li>
-                    <li>⏰ Kellner: "Dauert 30 Minuten" / "Bad idea"</li>
-                    <li>💥 Zwei Bomben explodieren (Al-Qaida)</li>
-                    <li>☠️ 17 Tote, 25 Verletzte</li>
-                    <li>🧠 Roman: Großer Teil des Schädels weggerissen</li>
-                    <li>✈️ Evakuierung nach Moskau, 2 Wochen Koma</li>
-                    <li>🦾 Titanplatte ersetzt Schädelteile</li>
-                </ul>
-            </div>
-            
-            <div class="split-content" style="margin-top: 10px;">
-                <div class="content-box" style="border-color: #003B6F;">
-                    <h3 style="color: #003B6F;">🕵️ US Secret Service denkt:</h3>
-                    <p style="font-size: 18px; line-height: 1.5; color: #B0B0B0;">
+        </div>
+
+        <!-- SLIDE 7: EXPLOSION Teil 2 - Die Reaktion -->
+        <div class="slide" data-slide="7">
+            <h2>Der Totgeglaubte kehrt zurück</h2>
+            <div class="split-content" style="gap: 20px; margin-top: 20px;">
+                <div class="content-box" style="border-color: #003B6F; padding: 20px;">
+                    <h3 style="color: #003B6F; font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 15px;">🕵️ US Secret Service denkt:</h3>
+                    <p style="font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; color: #B0B0B0;">
                         ✓ "Er wird sterben"<br>
                         ✓ "Oder ein Gemüse bleiben"<br>
                         ✓ <span style="color: #00FF41;">"Case closed"</span><br><br>
-                        <span style="font-size: 16px; color: #FFD700;">Jan 2012: Shops geschlossen<br>
+                        <span style="font-size: clamp(15px, 1.5vw, 18px); color: #FFD700;">Jan 2012: Shops geschlossen<br>
                         "Ermittlung beendet ✓"</span>
                     </p>
                 </div>
-                <div class="content-box" style="border-color: #FF0055;">
-                    <h3 style="color: #FF0055;">😈 Romans Reaktion 2013:</h3>
-                    <p style="font-size: 20px; margin-top: 8px; line-height: 1.4;">
+                <div class="content-box" style="border-color: #FF0055; padding: 20px;">
+                    <h3 style="color: #FF0055; font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 15px;">😈 Romans Reaktion 2013:</h3>
+                    <p style="font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7;">
                         ✓ Aufgewacht & genesen<br>
                         ✓ Frau verlässt ihn im Koma<br>
                         ✓ Neues Alias: <span class="highlight">"2Pac"</span><br>
                         ✓ Neue Website: <span class="highlight">2pac.cc</span><br>
                         ✓ <span style="color: #FF0055;">WEITERHACKEN</span><br><br>
-                        <span style="font-size: 16px; color: #B0B0B0;">"Wieso hat Gott mich gerettet?"</span>
+                        <span style="font-size: clamp(15px, 1.5vw, 18px); color: #B0B0B0;">"Wieso hat Gott mich gerettet?"</span>
                     </p>
                 </div>
             </div>
-            
-            <div class="alert-box" style="margin-top: 10px; padding: 10px; font-size: 18px;">
+            <div class="alert-box" style="margin-top: 25px; font-size: clamp(16px, 1.7vw, 20px);">
                 🎭 Die Ermittler waren schockiert: Der "tote" Hacker ist zurück
             </div>
         </div>
 
-        <!-- SLIDE 6: DIE JAGD -->
-        <div class="slide" data-slide="6">
+        <!-- SLIDE 8: DIE JAGD -->
+        <div class="slide" data-slide="8">
             <h2>10 Jahre Katz und Maus</h2>
-            <div class="timeline" style="margin-bottom: 15px;">
-                <div class="timeline-item">2005</div>
-                <div class="timeline-item">2009</div>
-                <div class="timeline-item">2011</div>
-                <div class="timeline-item">2014</div>
-            </div>
-            <div style="text-align: center; margin: 10px 0;">
-                <div class="image-container">
-                    <img src="" 
-                         alt="Roman with yellow Dodge" class="slide-image" id="dodge-img" 
-                         style="max-height: 170px;">
-                    <div class="image-caption">🚗 Roman mit seinem gelben Dodge Challenger vor dem Roten Platz</div>
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; align-items: start;">
+                <div style="text-align: center;">
+                    <div class="image-container">
+                        <img src="./images/RomanMitDodgeCharger.jpg"
+                             alt="Roman with yellow Dodge" class="slide-image" id="dodge-img"
+                             style="max-height: clamp(180px, 24vh, 230px);">
+                        <div class="image-caption">🚗 Roman mit seinem gelben Dodge Challenger vor dem Roten Platz</div>
+                    </div>
+                </div>
+                <div class="content-box">
+                    <h3 style="font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 15px;">🕵️ Die Jagd des Secret Service</h3>
+                    <ul class="features" style="font-size: clamp(14px, 1.4vw, 17px); line-height: 1.6;">
+                        <li>🇷🇺 <strong>2009:</strong> FSB verrät ihn → "nCuX" verschwindet → kehrt als "Track2" zurück</li>
+                        <li>🇩🇪 <strong>Deutschland:</strong> Falsche Person festgenommen</li>
+                        <li>🇰🇷 <strong>Südkorea:</strong> Ausweichmanöver mit Direktflügen</li>
+                        <li>🇦🇺 <strong>Australien:</strong> Köder-Operationen scheitern</li>
+                        <li>🇮🇩 <strong>Bali:</strong> Strandhaus (kein Auslieferungsabkommen)</li>
+                        <li>🔍 Er googelte seine eigenen Haftbefehle auf PACER</li>
+                        <li>✈️ Nur Last-Minute-Tickets in Nicht-Auslieferungsländer</li>
+                    </ul>
                 </div>
             </div>
-            <div class="content-box">
-                <h3>🕵️ Die Jagd des Secret Service</h3>
-                <ul class="features" style="font-size: 17px; line-height: 1.5;">
-                    <li>🇷🇺 <strong>2009:</strong> FSB verrät ihn → "nCuX" verschwindet → kehrt als "Track2" zurück</li>
-                    <li>🇩🇪 <strong>Deutschland:</strong> Falsche Person festgenommen</li>
-                    <li>🇰🇷 <strong>Südkorea:</strong> Ausweichmanöver mit Direktflügen</li>
-                    <li>🇦🇺 <strong>Australien:</strong> Köder-Operationen scheitern</li>
-                    <li>🇮🇩 <strong>Bali:</strong> Strandhaus (kein Auslieferungsabkommen)</li>
-                    <li>🔍 Er googelte seine eigenen Haftbefehle auf PACER</li>
-                    <li>✈️ Nur Last-Minute-Tickets in Nicht-Auslieferungsländer</li>
-                </ul>
-            </div>
-            <div class="quote-box" style="margin-top: 15px;">
+            <div class="quote-box" style="margin-top: 20px;">
                 "Ich habe Schutz durch das FSB-Zentrum für Informationssicherheit erhalten"<br>
                 <span style="color: #B0B0B0;">— Roman Seleznev in Chat-Nachrichten an Komplizen (2008)</span>
             </div>
         </div>
 
-        <!-- SLIDE 7: FESTNAHME -->
-        <div class="slide" data-slide="7">
+        <!-- SLIDE 9: FESTNAHME Teil 1 -->
+        <div class="slide" data-slide="9">
             <h2>Luxusurlaub mit Folgen</h2>
-            <div style="text-align: center; margin-bottom: 10px;">
+            <div style="text-align: center; margin-bottom: 20px;">
                 <div class="image-container">
-                    <img src="" 
-                         alt="Roman with family" class="slide-image" id="family-img" 
-                         style="max-height: 160px;">
+                    <img src="./images/RomanmitFamilie.jpg"
+                         alt="Roman with family" class="slide-image" id="family-img"
+                         style="max-height: clamp(150px, 20vh, 200px);">
                     <div class="image-caption">👨‍👩‍👧 Roman mit seiner Frau und Kind - vor der Festnahme</div>
                 </div>
             </div>
-            <div class="content-box" style="padding: 12px;">
+            <div class="content-box" style="padding: 20px; max-width: 800px; margin: 0 auto;">
                 <h3>🏝️ Juli 2014: Malediven</h3>
-                <p style="font-size: 18px; line-height: 1.5;">
+                <p style="font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6;">
                     💰 $1,400/Nacht - Teuerste Villa im Resort<br>
                     💬 "Ich werde meinen eigenen Diener haben"
                 </p>
             </div>
-            <div class="timeline" style="margin: 15px 0;">
-                <div class="timeline-item" style="width: 80px; height: 80px; font-size: 14px;">1. Juli<br>📡</div>
-                <div class="timeline-item" style="width: 80px; height: 80px; font-size: 14px;">5. Juli<br>✈️</div>
-                <div class="timeline-item" style="width: 80px; height: 80px; font-size: 14px;">Guam<br>🇺🇸</div>
+            <div class="timeline" style="margin: 30px 0;">
+                <div class="timeline-item" style="width: 90px; height: 90px; font-size: clamp(13px, 1.3vw, 15px);">1. Juli<br>📡</div>
+                <div class="timeline-item" style="width: 90px; height: 90px; font-size: clamp(13px, 1.3vw, 15px);">5. Juli<br>✈️</div>
+                <div class="timeline-item" style="width: 90px; height: 90px; font-size: clamp(13px, 1.3vw, 15px);">Guam<br>🇺🇸</div>
             </div>
-            <div class="password-reveal" style="padding: 18px;">
-                <h3 style="color: #FF0055; margin-bottom: 12px; font-size: 22px;">🔓 DER LAPTOP-JACKPOT</h3>
-                <p style="font-size: 17px; margin-bottom: 12px;">
+            <div class="alert-box" style="margin-top: 30px; font-size: clamp(16px, 1.7vw, 20px);">
+                ⚠️ Secret Service wartet bereits am Flughafen
+            </div>
+        </div>
+
+        <!-- SLIDE 10: LAPTOP-JACKPOT -->
+        <div class="slide" data-slide="10">
+            <h2>Der Laptop-Jackpot</h2>
+            <div class="password-reveal" style="padding: 25px; max-width: 900px; margin: 30px auto;">
+                <h3 style="color: #FF0055; margin-bottom: 20px; font-size: clamp(20px, 2vw, 26px);">🔓 DER LAPTOP-JACKPOT</h3>
+                <p style="font-size: clamp(16px, 1.6vw, 19px); margin-bottom: 20px; line-height: 1.7;">
                     ✓ Laptop die ganze Zeit EINGESCHALTET<br>
                     ✓ Username überall: "smaus1"<br>
                     ✓ Kino-Website schickte Passwort im Klartext
                 </p>
-                <div style="margin: 15px 0;">
-                    <p style="font-size: 16px; color: #B0B0B0; margin-bottom: 6px;">Passwort:</p>
-                    <div class="password-text glitch" style="font-size: 36px;">Ochko123</div>
-                    <p style="font-size: 14px; color: #FF0055; margin-top: 6px;">(Russisch: "Arschloch123")</p>
+                <div style="margin: 30px 0;">
+                    <p style="font-size: clamp(15px, 1.5vw, 18px); color: #B0B0B0; margin-bottom: 10px;">Passwort:</p>
+                    <div class="password-text glitch">Ochko123</div>
                 </div>
-                <p style="font-size: 20px; color: #FFD700; margin-top: 15px;">
+                <p style="font-size: clamp(18px, 2vw, 24px); color: #FFD700; margin-top: 30px;">
                     💳 1,7 MILLIONEN Kreditkarten gefunden
                 </p>
             </div>
+            <div class="alert-box" style="background: rgba(0, 255, 65, 0.1); border-color: #00FF41; margin-top: 30px;">
+                💡 Ein Passwort für ALLES - vom Email-Account bis zu den Servern
+            </div>
         </div>
 
-        <!-- SLIDE 8: VATER & GEOPOLITIK -->
-        <div class="slide" data-slide="8">
+        <!-- SLIDE 11: VATER & GEOPOLITIK -->
+        <div class="slide" data-slide="11">
             <h2>Diplomatischer Shitstorm</h2>
-            <div style="text-align: center; margin-bottom: 10px;">
+            <div style="text-align: center; margin-bottom: 15px;">
                 <div class="image-container">
-                    <img src="" 
-                         alt="Valery Seleznev" class="slide-image" id="valery-img" 
-                         style="max-height: 150px;">
+                    <img src="./images/VaterVonRoman.jpg.webp"
+                         alt="Valery Seleznev" class="slide-image" id="valery-img"
+                         style="max-height: clamp(160px, 20vh, 200px);">
                     <div class="image-caption">👨‍⚖️ Valery Seleznev - Duma-Abgeordneter und Romans Vater</div>
                 </div>
             </div>
-            <div class="split-content">
-                <div class="content-box">
-                    <h3>👨 Valery Seleznev</h3>
-                    <p style="font-size: 15px; margin-bottom: 10px;">Duma-Abgeordneter (LDPR) | Putin-nah</p>
-                    <ul class="icon-list" style="font-size: 16px; line-height: 1.5;">
+            <div class="split-content" style="margin-top: 20px;">
+                <div class="content-box" style="padding: 20px;">
+                    <h3 style="font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 12px;">👨 Valery Seleznev</h3>
+                    <p style="font-size: clamp(14px, 1.4vw, 17px); margin-bottom: 12px;">Duma-Abgeordneter (LDPR) | Putin-nah</p>
+                    <ul class="icon-list" style="font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6;">
                         <li>"Entführung durch die USA!"</li>
                         <li>"Menschenfresser-Urteil"</li>
                         <li>"Internet-Bin-Laden"</li>
@@ -832,9 +854,9 @@
                         <li>"Hat nichts mit Computern zu tun"</li>
                     </ul>
                 </div>
-                <div class="content-box">
-                    <h3>🇷🇺 Russland reagiert</h3>
-                    <ul class="icon-list" style="font-size: 16px; line-height: 1.5;">
+                <div class="content-box" style="padding: 20px;">
+                    <h3 style="font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 12px;">🇷🇺 Russland reagiert</h3>
+                    <ul class="icon-list" style="font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6;">
                         <li>Formelle Demarche an USA</li>
                         <li>"Flagrante Verletzung"</li>
                         <li>"Feindselige Handlung"</li>
@@ -843,19 +865,14 @@
                     </ul>
                 </div>
             </div>
-            <div class="alert-box" style="margin-top: 15px; font-size: 18px; padding: 12px;">
+            <div class="alert-box" style="margin-top: 25px; font-size: clamp(16px, 1.7vw, 20px); padding: 15px;">
                 ⚠️ KONTEXT: Nur 4 Monate nach der Krim-Annexion<br>
-                US-Russland Beziehungen auf dem Tiefpunkt
-            </div>
-            <div class="timeline" style="margin-top: 15px;">
-                <div class="timeline-item">2014<br>📅</div>
-                <div style="flex: 1; text-align: center; color: #00FF41; font-size: 16px;">━━━ 10 Jahre ━━━</div>
-                <div class="timeline-item">2024<br>🤝</div>
+                US-Russland Beziehungen auf dem Tiefpunkt<br>
             </div>
         </div>
 
-        <!-- SLIDE 9: URTEIL -->
-        <div class="slide" data-slide="9">
+        <!-- SLIDE 12: URTEIL -->
+        <div class="slide" data-slide="12">
             <h2>27 Jahre = Rekord</h2>
             <div class="content-box" style="text-align: center; margin-bottom: 25px; padding: 15px;">
                 <h3 style="font-size: 30px; margin-bottom: 15px;">⚖️ 21. APRIL 2017</h3>
@@ -886,53 +903,58 @@
             </div>
         </div>
 
-        <!-- SLIDE 10: EPILOG -->
-        <div class="slide" data-slide="10">
+        <!-- SLIDE 13: EPILOG Teil 1 - Der Austausch -->
+        <div class="slide" data-slide="13">
             <h2>Der große Austausch 2024</h2>
-            <div class="content-box" style="text-align: center; margin-bottom: 20px; padding: 15px;">
-                <h3 style="font-size: 28px; color: #FFD700;">🤝 1. AUGUST 2024</h3>
-                <p style="font-size: 20px; margin-top: 12px;">
+            <div class="content-box" style="text-align: center; margin-bottom: 20px; padding: 18px;">
+                <h3 style="font-size: clamp(22px, 2.2vw, 28px); color: #FFD700; margin-bottom: 12px;">🤝 1. AUGUST 2024</h3>
+                <p style="font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6;">
                     Größter Gefangenenaustausch seit dem Kalten Krieg<br>
                     <span class="highlight">26 Personen</span> | Putin begrüßt Seleznev persönlich am Flughafen
                 </p>
             </div>
-            <div class="split-content">
-                <div class="content-box" style="border-color: #003B6F;">
-                    <h3 style="color: #003B6F;">🇺🇸 USA ERHÄLT</h3>
-                    <ul class="icon-list">
+            <div class="split-content" style="gap: 20px; margin-top: 20px;">
+                <div class="content-box" style="border-color: #003B6F; padding: 18px;">
+                    <h3 style="color: #003B6F; font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 12px;">🇺🇸 USA ERHÄLT</h3>
+                    <ul class="icon-list" style="font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7;">
                         <li>Evan Gershkovich (WSJ Journalist)</li>
                         <li>Paul Whelan (Ex-Marine)</li>
                         <li>Alsu Kurmasheva (RFE Journalistin)</li>
                         <li>+ weitere Amerikaner</li>
                     </ul>
                 </div>
-                <div class="content-box" style="border-color: #FF0055;">
-                    <h3 style="color: #FF0055;">🇷🇺 RUSSLAND ERHÄLT</h3>
-                    <ul class="icon-list">
+                <div class="content-box" style="border-color: #FF0055; padding: 18px;">
+                    <h3 style="color: #FF0055; font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 12px;">🇷🇺 RUSSLAND ERHÄLT</h3>
+                    <ul class="icon-list" style="font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7;">
                         <li>Roman Seleznev (10 von 27 Jahren)</li>
                         <li>Vadim Krasikov (FSB-Attentäter)</li>
                         <li>+ weitere russische Häftlinge</li>
                     </ul>
                 </div>
             </div>
-            <div class="alert-box" style="background: rgba(0, 255, 65, 0.1); border-color: #00FF41; padding: 15px; font-size: 18px;">
-                <h3 style="color: #FFD700; margin-bottom: 15px; font-size: 22px;">💡 DIE LEKTION</h3>
-                <p style="font-size: 19px; line-height: 1.5;">
+        </div>
+
+        <!-- SLIDE 14: EPILOG Teil 2 - Die Lektion -->
+        <div class="slide" data-slide="14">
+            <h2>Die Lektion</h2>
+            <div class="alert-box" style="background: rgba(0, 255, 65, 0.1); border-color: #00FF41; padding: 25px; margin: 30px auto; max-width: 900px;">
+                <h3 style="color: #FFD700; margin-bottom: 20px; font-size: clamp(20px, 2vw, 26px);">💡 DIE LEKTION</h3>
+                <p style="font-size: clamp(16px, 1.7vw, 20px); line-height: 1.7;">
                     Internationale Cybercrime-Bekämpfung ist <span class="highlight">BRUTAL SCHWER</span>,<br>
                     wenn Täter politisch geschützt sind und zu<br>
                     <span style="color: #FF0055;">diplomatischer Verhandlungsmasse</span> werden.
                 </p>
             </div>
-            
-            <div class="roman-empire-quote">
+
+            <div class="roman-empire-quote" style="margin: 30px auto; max-width: 800px;">
                 "The roman empire has fallen"<br>
-                <span style="font-size: 18px; color: #B0B0B0;">— Irgendein dude auf Youtube</span>
+                <span style="font-size: clamp(15px, 1.5vw, 18px); color: #B0B0B0;">— Irgendein dude auf Youtube</span>
             </div>
-            
-            <div style="text-align: center; margin-top: 20px;">
-                <h3 style="color: #00FF41; margin-bottom: 15px; font-size: 22px;">📱 Mehr erfahren?</h3>
+
+            <div style="text-align: center; margin-top: 40px;">
+                <h3 style="color: #00FF41; margin-bottom: 20px; font-size: clamp(18px, 1.8vw, 22px);">📱 Mehr erfahren?</h3>
                 <div id="qrcode"></div>
-                <p style="font-size: 16px; color: #B0B0B0; margin-top: 12px;">
+                <p style="font-size: clamp(14px, 1.4vw, 16px); color: #B0B0B0; margin-top: 15px;">
                     Scanne den QR-Code für das YouTube-Video
                 </p>
             </div>
@@ -940,7 +962,7 @@
     </div>
 
     <div class="slide-number">
-        <span id="currentSlide">1</span> / 10
+        <span id="currentSlide">1</span> / 14
     </div>
 
     <div class="controls">
@@ -956,74 +978,67 @@
 
     <script>
         let currentSlide = 1;
-        const totalSlides = 10;
+        const totalSlides = 14;
 
-        // Initialize Particles.js
-        particlesJS('particles-js', {
-            particles: {
-                number: { value: 80, density: { enable: true, value_area: 800 } },
-                color: { value: '#00FF41' },
-                shape: { type: 'circle' },
-                opacity: { value: 0.3, random: true },
-                size: { value: 3, random: true },
-                line_linked: {
-                    enable: true,
-                    distance: 150,
-                    color: '#00FF41',
-                    opacity: 0.2,
-                    width: 1
+        // Initialize Particles.js (optional - fails gracefully if library not loaded)
+        if (typeof particlesJS !== 'undefined') {
+            particlesJS('particles-js', {
+                particles: {
+                    number: { value: 80, density: { enable: true, value_area: 800 } },
+                    color: { value: '#00FF41' },
+                    shape: { type: 'circle' },
+                    opacity: { value: 0.3, random: true },
+                    size: { value: 3, random: true },
+                    line_linked: {
+                        enable: true,
+                        distance: 150,
+                        color: '#00FF41',
+                        opacity: 0.2,
+                        width: 1
+                    },
+                    move: {
+                        enable: true,
+                        speed: 2,
+                        direction: 'none',
+                        random: true,
+                        straight: false,
+                        out_mode: 'out',
+                        bounce: false
+                    }
                 },
-                move: {
-                    enable: true,
-                    speed: 2,
-                    direction: 'none',
-                    random: true,
-                    straight: false,
-                    out_mode: 'out',
-                    bounce: false
-                }
-            },
-            interactivity: {
-                detect_on: 'canvas',
-                events: {
-                    onhover: { enable: true, mode: 'repulse' },
-                    resize: true
-                }
-            },
-            retina_detect: true
-        });
-
-        // Generate QR Code (YouTube video)
-        const youtubeUrl = 'https://www.youtube.com/watch?v=6Chp12sEnWk';
-        new QRCode(document.getElementById('qrcode'), {
-            text: youtubeUrl,
-            width: 150,
-            height: 150,
-            colorDark: '#000000',
-            colorLight: '#ffffff'
-        });
-
-        // Load images from ./images/ folder
-        function loadImages() {
-            const imageMap = {
-                'track2-img': 'WerbungimCarderforum.png',
-                'broadway-img': 'BroadwayGrill.png',
-                'argana-img': 'marrakechCafe.png',
-                'family-img': 'RomanmitFamilie.jpg',
-                'valery-img': 'VaterVonRoman.jpg.webp',
-                'dodge-img': 'RomanMitDodgeCharger.jpg'
-            };
-            
-            Object.entries(imageMap).forEach(([id, filename]) => {
-                const img = document.getElementById(id);
-                if (img) {
-                    img.src = `./images/${filename}`;
-                    img.onerror = function() {
-                        console.warn(`Image not found: ./images/${filename}`);
-                        this.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300"%3E%3Crect fill="%231E1E1E" width="400" height="300"/%3E%3Ctext fill="%2300FF41" font-family="monospace" font-size="14" x="50%25" y="50%25" text-anchor="middle"%3EBild nicht gefunden%3C/text%3E%3Ctext fill="%23B0B0B0" font-family="monospace" font-size="12" x="50%25" y="60%25" text-anchor="middle"%3E${filename}%3C/text%3E%3C/svg%3E';
-                    };
-                }
+                interactivity: {
+                    detect_on: 'canvas',
+                    events: {
+                        onhover: { enable: true, mode: 'repulse' },
+                        resize: true
+                    }
+                },
+                retina_detect: true
             });
+        } else {
+            console.warn('particles.js library not loaded - continuing without background animation');
+        }
+
+        // Generate QR Code (YouTube video) - wait for library to load
+        function generateQRCode() {
+            const youtubeUrl = 'https://www.youtube.com/watch?v=6Chp12sEnWk';
+            const qrcodeElement = document.getElementById('qrcode');
+
+            if (typeof QRCode !== 'undefined' && qrcodeElement) {
+                try {
+                    new QRCode(qrcodeElement, {
+                        text: youtubeUrl,
+                        width: 150,
+                        height: 150,
+                        colorDark: '#000000',
+                        colorLight: '#ffffff'
+                    });
+                } catch(e) {
+                    console.warn('QR Code generation failed:', e);
+                }
+            } else {
+                console.warn('QRCode library not loaded or element not found');
+            }
         }
 
         // Image click to lightbox
@@ -1070,24 +1085,26 @@
         }
 
         function animateSlide(slide) {
-            // Animate elements within the slide using anime.js
-            anime({
-                targets: slide.querySelectorAll('.stat-box, .content-box'),
-                translateY: [50, 0],
-                opacity: [0, 1],
-                delay: anime.stagger(100),
-                easing: 'easeOutExpo',
-                duration: 800
-            });
+            // Animate elements within the slide using anime.js (if available)
+            if (typeof anime !== 'undefined') {
+                anime({
+                    targets: slide.querySelectorAll('.stat-box, .content-box'),
+                    translateY: [50, 0],
+                    opacity: [0, 1],
+                    delay: anime.stagger(100),
+                    easing: 'easeOutExpo',
+                    duration: 800
+                });
+
+                anime({
+                    targets: slide.querySelectorAll('h2, h3'),
+                    translateX: [-30, 0],
+                    opacity: [0, 1],
+                    easing: 'easeOutExpo',
+                    duration: 600
+                });
+            }
 
-            anime({
-                targets: slide.querySelectorAll('h2, h3'),
-                translateX: [-30, 0],
-                opacity: [0, 1],
-                easing: 'easeOutExpo',
-                duration: 600
-            });
-            
             // Animate images with fly-in effect
             const images = slide.querySelectorAll('.slide-image');
             images.forEach((img, index) => {
@@ -1137,7 +1154,7 @@
 
         // Initialize
         window.addEventListener('load', () => {
-            loadImages();
+            generateQRCode();
             showSlide(1);
         });
     </script>