diff --git a/demos/anwalt.html b/demos/anwalt.html
index c249fbc..8a54873 100644
--- a/demos/anwalt.html
+++ b/demos/anwalt.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Rechtsanwaltskanzlei | Ihre rechtliche Beratung</title>
+    <title data-de="Rechtsanwaltskanzlei | Ihre rechtliche Beratung" data-en="Law Firm | Your Legal Advice">Rechtsanwaltskanzlei | Ihre rechtliche Beratung</title>
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Libre+Baskerville:wght@400;700&display=swap" rel="stylesheet">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -36,6 +36,15 @@
         </section>
         <div class="cta"><h3>Erstberatung</h3><p style="margin: 1rem 0;">Kostenloses Erstgespräch – 30 Minuten</p><a href="tel:0123456789">📞 Termin vereinbaren</a></div>
     </main>
-    <footer><p>© 2026 Rechtsanwaltskanzlei Dr. Schmidt | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p></footer>
+    <footer><p>© 2026 Rechtsanwaltskanzlei Dr. Schmidt | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p><div style="margin-top: 1rem;"><button class="lang-btn active" data-lang="de" style="background: var(--primary); color: white; border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer; margin-right: 0.5rem;">DE</button><button class="lang-btn" data-lang="en" style="background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer;">EN</button></div></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/demos/anwalt.html.bak b/demos/anwalt.html.bak
new file mode 100644
index 0000000..431265b
--- /dev/null
+++ b/demos/anwalt.html.bak
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title data-de="Rechtsanwaltskanzlei | Ihre rechtliche Beratung" data-en="Law Firm | Your Legal Advice">Rechtsanwaltskanzlei | Ihre rechtliche Beratung</title>
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Libre+Baskerville:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        :root { --primary: #1A1A2E; --secondary: #C9A962; --bg: #FFFFFF; --text: #333; }
+        body { font-family: 'Libre Baskerville', serif; background: var(--bg); color: var(--text); }
+        header { background: var(--primary); color: white; padding: 3rem 2rem; text-align: center; }
+        h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; }
+        .tagline { color: var(--secondary); }
+        main { max-width: 1000px; margin: 0 auto; padding: 3rem 2rem; }
+        .areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 2rem 0; }
+        @media (max-width: 768px) { .areas { grid-template-columns: 1fr; } }
+        .area { border-left: 3px solid var(--secondary); padding-left: 1.5rem; }
+        .area h3 { font-family: 'Playfair Display', serif; color: var(--primary); }
+        .about { background: #f8f8f8; padding: 2rem; border-radius: 8px; margin: 2rem 0; }
+        .cta { text-align: center; margin: 2rem 0; }
+        .cta a { background: var(--primary); color: white; padding: 1rem 2rem; text-decoration: none; border-radius: 4px; }
+        footer { text-align: center; padding: 2rem; background: var(--primary); color: var(--secondary); }
+    </style>
+</head>
+<body>
+    <header><h1>⚖️ Rechtsanwaltskanzlei Dr. Schmidt</h1><p class="tagline">Rechtliche Beratung auf höchstem Niveau</p></header>
+    <main>
+        <div class="about"><h2>Über uns</h2><p>Seit über 25 Jahren stehen wir unseren Mandanten mit Rat und Tat zur Seite. Unser erfahrenes Team aus Rechtsanwälten berät Sie kompetent und verlässlich.</p></div>
+        <h3 style="margin-bottom: 1rem;">Rechtsgebiete</h3>
+        <section class="areas">
+            <div class="area"><h3>🏛️ Arbeitsrecht</h3><p>Kündigungsschutz, Arbeitsverträge, Betriebsratsberatung</p></div>
+            <div class="area"><h3>🏠 Mietrecht</h3><p>Mietverträge, Mieterhöhung, Kündigung, Hausverbot</p></div>
+            <div class="area"><h3>👨‍👩‍👧 Familienrecht</h3><p>Scheidung, Sorgerecht, Unterhalt, Eheverträge</p></div>
+            <div class="area"><h3>🚗 Verkehrsrecht</h3><p>Unfallregulierung, Bußgeldsachen, Führerschein</p></div>
+        </section>
+        <div class="cta"><h3>Erstberatung</h3><p style="margin: 1rem 0;">Kostenloses Erstgespräch – 30 Minuten</p><a href="tel:0123456789">📞 Termin vereinbaren</a></div>
+    </main>
+    <footer><p>© 2026 Rechtsanwaltskanzlei Dr. Schmidt | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/autohaus.html b/demos/autohaus.html
index 9c28f6c..e087232 100644
--- a/demos/autohaus.html
+++ b/demos/autohaus.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Autohaus Schnell | Ihr Partner für Neu- & Gebrauchtwagen</title>
+    <title data-de="Autohaus Schnell | Ihr Partner für Neu- & Gebrauchtwagen" data-en="Car Dealership Schnell | Your Partner for New & Used Cars">Autohaus Schnell | Ihr Partner für Neu- & Gebrauchtwagen</title>
     <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -60,6 +60,15 @@
         </section>
         <div class="cta"><a href="tel:0123456789">📅 Probefahrt vereinbaren</a></div>
     </main>
-    <footer><p>© 2026 Autohaus Schnell | <a href="/" style="color: var(--primary);">← Zurück zur Übersicht</a></p></footer>
+    <footer><p>© 2026 Autohaus Schnell | <a href="/" style="color: var(--primary);">← Zurück zur Übersicht</a></p><div style="margin-top: 1rem;"><button class="lang-btn active" data-lang="de" style="background: var(--primary); color: white; border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer; margin-right: 0.5rem;">DE</button><button class="lang-btn" data-lang="en" style="background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer;">EN</button></div></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/demos/autohaus.html.bak b/demos/autohaus.html.bak
new file mode 100644
index 0000000..403800e
--- /dev/null
+++ b/demos/autohaus.html.bak
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title data-de="Autohaus Schnell | Ihr Partner für Neu- & Gebrauchtwagen" data-en="Car Dealership Schnell | Your Partner for New & Used Cars">Autohaus Schnell | Ihr Partner für Neu- & Gebrauchtwagen</title>
+    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        :root {
+            --primary: #C41E3A;
+            --secondary: #1A1A2E;
+            --bg: #FFFFFF;
+            --text: #333;
+            --accent: #F5F5F5;
+        }
+        body { font-family: 'Open Sans', sans-serif; background: var(--bg); color: var(--text); }
+        header { background: var(--secondary); padding: 2rem; text-align: center; }
+        h1 { font-family: 'Oswald', sans-serif; font-size: 2.5rem; color: white; }
+        .tagline { color: var(--primary); font-weight: 600; }
+        main { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; }
+        .hero { background: linear-gradient(135deg, var(--secondary), #2D2D44); color: white; padding: 3rem; border-radius: 12px; margin-bottom: 2rem; text-align: center; }
+        .hero h2 { font-family: 'Oswald', sans-serif; font-size: 2rem; margin-bottom: 1rem; }
+        .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0; }
+        @media (max-width: 768px) { .stats { grid-template-columns: repeat(2, 1fr); } }
+        .stat { text-align: center; padding: 1.5rem; background: var(--accent); border-radius: 8px; }
+        .stat-number { font-size: 2.5rem; font-weight: 700; color: var(--primary); }
+        .vehicles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 2rem 0; }
+        @media (max-width: 768px) { .vehicles { grid-template-columns: 1fr; } }
+        .vehicle { background: var(--accent); padding: 1.5rem; border-radius: 12px; text-align: center; }
+        .vehicle-icon { font-size: 4rem; margin-bottom: 1rem; }
+        .vehicle h3 { margin-bottom: 0.5rem; }
+        .vehicle-price { color: var(--primary); font-weight: 700; font-size: 1.3rem; }
+        .cta { text-align: center; margin: 2rem 0; }
+        .cta a { background: var(--primary); color: white; padding: 1rem 2rem; border-radius: 30px; text-decoration: none; font-weight: 600; display: inline-block; }
+        footer { text-align: center; padding: 2rem; background: var(--secondary); color: white; }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>🚗 Autohaus Schnell</h1>
+        <p class="tagline">Ihr Partner für Neu- & Gebrauchtwagen</p>
+    </header>
+    <main>
+        <section class="hero">
+            <h2>Qualität, der Sie vertrauen können</h2>
+            <p>Seit 1985 Ihr zuverlässiger Partner für Automobile. Wir bieten erstklassigen Service, faire Preise und eine große Auswahl an Fahrzeugen.</p>
+        </section>
+        <section class="stats">
+            <div class="stat"><div class="stat-number">150+</div><p>Fahrzeuge vor Ort</p></div>
+            <div class="stat"><div class="stat-number">38</div><p>Jahre Erfahrung</p></div>
+            <div class="stat"><div class="stat-number">12.000+</div><p>Zufriedene Kunden</p></div>
+            <div class="stat"><div class="stat-number">5★</div><p>Bewertung</p></div>
+        </section>
+        <h3 style="margin-bottom: 1rem;">Unsere Fahrzeuge</h3>
+        <section class="vehicles">
+            <div class="vehicle"><div class="vehicle-icon">🚗</div><h3>Kleinwagen</h3><p>Perfekt für die Stadt</p><div class="vehicle-price">ab 8.990 €</div></div>
+            <div class="vehicle"><div class="vehicle-icon">🚙</div><h3>SUV & Crossover</h3><p>Familie & Freizeit</p><div class="vehicle-price">ab 19.990 €</div></div>
+            <div class="vehicle"><div class="vehicle-icon">⚡</div><h3>Elektrofahrzeuge</h3><p>Die Zukunft fahren</p><div class="vehicle-price">ab 29.990 €</div></div>
+        </section>
+        <div class="cta"><a href="tel:0123456789">📅 Probefahrt vereinbaren</a></div>
+    </main>
+    <footer><p>© 2026 Autohaus Schnell | <a href="/" style="color: var(--primary);">← Zurück zur Übersicht</a></p></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/baeckerei.html b/demos/baeckerei.html
index 06e88cb..6ecac89 100644
--- a/demos/baeckerei.html
+++ b/demos/baeckerei.html
@@ -3,123 +3,46 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bäckerei Müller | Frisches aus dem Ofen</title>
+    <title data-de="Bäckerei Müller | Frisches aus dem Ofen" data-en="Bakery Müller | Fresh from the oven">Bäckerei Müller | Frisches aus dem Ofen</title>
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        :root {
-            --primary: #8B4513;
-            --secondary: #D2691E;
-            --bg: #FFF8F0;
-            --text: #2C1810;
-            --accent: #F4A460;
-        }
-        body {
-            font-family: 'Source Sans Pro', sans-serif;
-            background: var(--bg);
-            color: var(--text);
-        }
-        header {
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            padding: 2rem;
-            text-align: center;
-        }
-        h1 {
-            font-family: 'Playfair Display', serif;
-            font-size: 3rem;
-            color: white;
-            margin-bottom: 0.5rem;
-        }
+        :root { --primary: #8B4513; --secondary: #D2691E; --bg: #FFF8F0; --text: #2C1810; --accent: #F4A460; }
+        body { font-family: 'Source Sans Pro', sans-serif; background: var(--bg); color: var(--text); }
+        header { background: linear-gradient(135deg, var(--primary), var(--secondary)); padding: 2rem; text-align: center; }
+        h1 { font-family: 'Playfair Display', serif; font-size: 3rem; color: white; margin-bottom: 0.5rem; }
         .tagline { color: var(--accent); font-size: 1.2rem; }
-        main {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 3rem 2rem;
-        }
-        .hero {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 3rem;
-            align-items: center;
-            margin-bottom: 4rem;
-        }
-        @media (max-width: 768px) {
-            .hero { grid-template-columns: 1fr; }
-        }
-        .hero-text h2 {
-            font-family: 'Playfair Display', serif;
-            font-size: 2.5rem;
-            margin-bottom: 1rem;
-            color: var(--primary);
-        }
-        .hero-image {
-            background: var(--accent);
-            height: 300px;
-            border-radius: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 5rem;
-        }
-        .products {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 2rem;
-            margin: 3rem 0;
-        }
-        @media (max-width: 768px) {
-            .products { grid-template-columns: 1fr; }
-        }
-        .product {
-            background: white;
-            padding: 2rem;
-            border-radius: 12px;
-            text-align: center;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-        }
+        main { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; }
+        .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem; }
+        @media (max-width: 768px) { .hero { grid-template-columns: 1fr; } }
+        .hero-text h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 1rem; color: var(--primary); }
+        .hero-image { background: var(--accent); height: 300px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 5rem; }
+        .products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 3rem 0; }
+        @media (max-width: 768px) { .products { grid-template-columns: 1fr; } }
+        .product { background: white; padding: 2rem; border-radius: 12px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
         .product-icon { font-size: 3rem; margin-bottom: 1rem; }
         .product h3 { color: var(--primary); margin-bottom: 0.5rem; }
-        .hours {
-            background: var(--primary);
-            color: white;
-            padding: 2rem;
-            border-radius: 12px;
-            margin: 2rem 0;
-        }
+        .hours { background: var(--primary); color: white; padding: 2rem; border-radius: 12px; margin: 2rem 0; }
         .hours h3 { margin-bottom: 1rem; }
-        .contact {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 2rem;
-        }
-        @media (max-width: 768px) {
-            .contact { grid-template-columns: 1fr; }
-        }
-        .contact-box {
-            background: white;
-            padding: 2rem;
-            border-radius: 12px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-        }
-        footer {
-            text-align: center;
-            padding: 2rem;
-            background: var(--text);
-            color: var(--accent);
-        }
+        .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
+        @media (max-width: 768px) { .contact { grid-template-columns: 1fr; } }
+        .contact-box { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
+        footer { text-align: center; padding: 2rem; background: var(--text); color: var(--accent); }
+        .lang-btn { background: var(--primary); color: white; border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer; margin-right: 0.5rem; }
+        .lang-btn.active { background: var(--primary); color: white; }
     </style>
 </head>
 <body>
     <header>
-        <h1>🍞 Bäckerei Müller</h1>
-        <p class="tagline">Frisches aus dem Ofen – seit 1952</p>
+        <h1 data-de="🍞 Bäckerei Müller" data-en="🍞 Bakery Müller">🍞 Bäckerei Müller</h1>
+        <p class="tagline" data-de="Frisches aus dem Ofen – seit 1952" data-en="Fresh from the oven – since 1952">Frisches aus dem Ofen – seit 1952</p>
     </header>
     
     <main>
         <section class="hero">
             <div class="hero-text">
-                <h2>Handwerkskunst aus Tradition</h2>
-                <p>Schon seit drei Generationen backen wir mit Leidenschaft. Unsere Brötchen werden jeden Morgen frisch gebacken, unser Brot nach alter Familienrezeptur. Kommen Sie vorbei und überzeugen Sie sich selbst vom Duft frischen Brots.</p>
+                <h2 data-de="Handwerkskunst aus Tradition" data-en="Craftsmanship from tradition">Handwerkskunst aus Tradition</h2>
+                <p data-de="Schon seit drei Generationen backen wir mit Leidenschaft. Unsere Brötchen werden jeden Morgen frisch gebacken, unser Brot nach alter Familienrezeptur. Kommen Sie vorbei und überzeugen Sie sich selbst vom Duft frischen Brots." data-en="For three generations, we have been baking with passion. Our rolls are freshly baked every morning, our bread according to old family recipes. Come by and experience the scent of fresh bread yourself.">Schon seit drei Generationen backen wir mit Leidenschaft. Unsere Brötchen werden jeden Morgen frisch gebacken, unser Brot nach alter Familienrezeptur. Kommen Sie vorbei und überzeugen Sie sich selbst vom Duft frischen Brots.</p>
             </div>
             <div class="hero-image">🥖</div>
         </section>
@@ -127,40 +50,80 @@
         <section class="products">
             <div class="product">
                 <div class="product-icon">🥖</div>
-                <h3>Handwerksbrot</h3>
-                <p>Traditionell gebacken, mit Sauerteig aus eigenem Ansatz</p>
+                <h3 data-de="Handwerksbrot" data-en="Artisan Bread">Handwerksbrot</h3>
+                <p data-de="Traditionell gebacken, mit Sauerteig aus eigenem Ansatz" data-en="Traditionally baked, with sourdough from our own starter">Traditionell gebacken, mit Sauerteig aus eigenem Ansatz</p>
             </div>
             <div class="product">
                 <div class="product-icon">🥐</div>
-                <h3>Croissants</h3>
-                <p>Butterzart und blättrig, jeden Morgen frisch</p>
+                <h3 data-de="Croissants" data-en="Croissants">Croissants</h3>
+                <p data-de="Butterzart und blättrig, jeden Morgen frisch" data-en="Buttery and flaky, fresh every morning">Butterzart und blättrig, jeden Morgen frisch</p>
             </div>
             <div class="product">
                 <div class="product-icon">🎂</div>
-                <h3>Torten & Kuchen</h3>
-                <p>Für Geburtstage, Hochzeiten und besondere Anlässe</p>
+                <h3 data-de="Torten & Kuchen" data-en="Cakes & Pastries">Torten & Kuchen</h3>
+                <p data-de="Für Geburtstage, Hochzeiten und besondere Anlässe" data-en="For birthdays, weddings and special occasions">Für Geburtstage, Hochzeiten und besondere Anlässe</p>
             </div>
         </section>
         
         <div class="hours">
-            <h3>📅 Öffnungszeiten</h3>
-            <p>Mo–Fr: 6:00–18:00 Uhr | Sa: 6:00–13:00 Uhr | So: 7:00–11:00 Uhr</p>
+            <h3 data-de="📅 Öffnungszeiten" data-en="📅 Opening Hours">📅 Öffnungszeiten</h3>
+            <p data-de="Mo–Fr: 6:00–18:00 Uhr | Sa: 6:00–13:00 Uhr | So: 7:00–11:00 Uhr" data-en="Mon–Fri: 6:00 AM–6:00 PM | Sat: 6:00 AM–1:00 PM | Sun: 7:00–11:00 AM">Mo–Fr: 6:00–18:00 Uhr | Sa: 6:00–13:00 Uhr | So: 7:00–11:00 Uhr</p>
         </div>
         
         <section class="contact">
             <div class="contact-box">
-                <h3>📍 Finden Sie uns</h3>
+                <h3 data-de="📍 Finden Sie uns" data-en="📍 Find us">📍 Finden Sie uns</h3>
                 <p>Hauptstraße 42<br>12345 Musterstadt</p>
             </div>
             <div class="contact-box">
-                <h3>📞 Kontakt</h3>
-                <p>Telefon: (01234) 56789<br>E-Mail: info@baeckerei-mueller.de</p>
+                <h3 data-de="📞 Kontakt" data-en="📞 Contact">📞 Kontakt</h3>
+                <p data-de="Telefon: (01234) 56789" data-en="Phone: (01234) 56789">Telefon: (01234) 56789<br>E-Mail: info@baeckerei-mueller.de</p>
             </div>
         </section>
     </main>
     
     <footer>
-        <p>© 2026 Bäckerei Müller | <a href="/" style="color: var(--accent);">← Zurück zur Übersicht</a></p>
+        <p>© 2026 Bäckerei Müller | <a href="../index.html" style="color: var(--accent);"><span data-de="← Zurück zur Übersicht" data-en="← Back to overview">← Zurück zur Übersicht</span></a></p>
+        <div style="margin-top: 1rem;">
+            <button class="lang-btn active" data-lang="de">DE</button>
+            <button class="lang-btn" data-lang="en">EN</button>
+        </div>
     </footer>
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        applyLanguage(savedLang);
+        updateLangButtons(savedLang);
+        
+        document.querySelectorAll('.lang-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const lang = btn.dataset.lang;
+                localStorage.setItem('lang', lang);
+                applyLanguage(lang);
+                updateLangButtons(lang);
+            });
+        });
+        
+        function applyLanguage(lang) {
+            document.querySelectorAll('[data-' + lang + ']').forEach(el => {
+                if (el.tagName === 'TITLE') {
+                    document.title = el.dataset[lang];
+                } else {
+                    el.textContent = el.dataset[lang];
+                }
+            });
+        }
+        
+        function updateLangButtons(activeLang) {
+            document.querySelectorAll('.lang-btn').forEach(btn => {
+                if (btn.dataset.lang === activeLang) {
+                    btn.style.background = 'var(--primary)';
+                    btn.style.color = 'white';
+                } else {
+                    btn.style.background = 'transparent';
+                    btn.style.color = 'var(--accent)';
+                }
+            });
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/demos/blumenladen.html b/demos/blumenladen.html
index 659c260..a772bd0 100644
--- a/demos/blumenladen.html
+++ b/demos/blumenladen.html
@@ -39,6 +39,15 @@
         <div class="services"><h3>Unsere Leistungen</h3><ul><li>✓ Schnittblumen & Pflanzen</li><li>✓ Gebinde & Sträuße</li><li>✓ Raumgestaltung</li><li>✓ Trauerfloristik</li><li>✓ Hochzeitsfloristik</li><li>✓ Lieferservice</li></ul></div>
         <div class="cta"><h3>Wir beraten Sie gerne!</h3><p style="margin: 1rem 0;">Besuchen Sie uns in unserer Filiale</p><a href="tel:0123456789">📞 (01234) 56789</a></div>
     </main>
-    <footer><p>© 2026 Blumenhaus Rose | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p></footer>
+    <footer><p>© 2026 Blumenhaus Rose | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p><div style="margin-top: 1rem;"><button class="lang-btn active" data-lang="de" style="background: var(--primary); color: white; border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer; margin-right: 0.5rem;">DE</button><button class="lang-btn" data-lang="en" style="background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer;">EN</button></div></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/demos/blumenladen.html.bak b/demos/blumenladen.html.bak
new file mode 100644
index 0000000..a1a84f5
--- /dev/null
+++ b/demos/blumenladen.html.bak
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Blumenhaus Rose | Ihr Florist für jeden Anlass</title>
+    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        :root { --primary: #E91E63; --secondary: #F8BBD0; --bg: #FCE4EC; --text: #333; }
+        body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); }
+        header { background: linear-gradient(135deg, var(--primary), #C2185B); color: white; padding: 3rem 2rem; text-align: center; }
+        h1 { font-family: 'Dancing Script', cursive; font-size: 3.5rem; }
+        main { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; }
+        .occasions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
+        @media (max-width: 768px) { .occasions { grid-template-columns: repeat(2, 1fr); } }
+        .occasion { background: white; padding: 1.5rem; border-radius: 12px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
+        .occasion-icon { font-size: 3rem; margin-bottom: 0.5rem; }
+        .occasion h3 { color: var(--primary); }
+        .services { background: white; padding: 2rem; border-radius: 12px; margin: 2rem 0; }
+        .services h3 { color: var(--primary); margin-bottom: 1rem; }
+        .services ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
+        @media (max-width: 768px) { .services ul { grid-template-columns: 1fr; } }
+        .cta { text-align: center; margin: 2rem 0; }
+        .cta a { background: var(--primary); color: white; padding: 1rem 2rem; border-radius: 30px; text-decoration: none; }
+        footer { text-align: center; padding: 2rem; background: var(--primary); color: white; }
+    </style>
+</head>
+<body>
+    <header><h1>🌷 Blumenhaus Rose</h1><p>Ihr Florist für jeden Anlass</p></header>
+    <main>
+        <h3 style="text-align: center; margin-bottom: 1.5rem;">Für jeden Anlass</h3>
+        <section class="occasions">
+            <div class="occasion"><div class="occasion-icon">💐</div><h3>Hochzeit</h3><p>Brautstrauß & Deko</p></div>
+            <div class="occasion"><div class="occasion-icon">🎂</div><h3>Geburtstag</h3><p>Bunt & fröhlich</p></div>
+            <div class="occasion"><div class="occasion-icon">🙏</div><h3>Trauer</h3><p>Würdevoll & still</p></div>
+            <div class="occasion"><div class="occasion-icon">❤️</div><h3>Liebe</h3><p>Rote Rosen & mehr</p></div>
+        </section>
+        <div class="services"><h3>Unsere Leistungen</h3><ul><li>✓ Schnittblumen & Pflanzen</li><li>✓ Gebinde & Sträuße</li><li>✓ Raumgestaltung</li><li>✓ Trauerfloristik</li><li>✓ Hochzeitsfloristik</li><li>✓ Lieferservice</li></ul></div>
+        <div class="cta"><h3>Wir beraten Sie gerne!</h3><p style="margin: 1rem 0;">Besuchen Sie uns in unserer Filiale</p><a href="tel:0123456789">📞 (01234) 56789</a></div>
+    </main>
+    <footer><p>© 2026 Blumenhaus Rose | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/fitness.html b/demos/fitness.html
index fa6eaf5..2b51333 100644
--- a/demos/fitness.html
+++ b/demos/fitness.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Fitnessstudio PowerFit | Dein Weg zur Bestform</title>
+    <title data-de="Fitnessstudio PowerFit | Dein Weg zur Bestform" data-en="Gym PowerFit | Your Way to Peak Form">Fitnessstudio PowerFit | Dein Weg zur Bestform</title>
     <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -54,6 +54,15 @@
         </section>
         <div class="cta"><p>Probetraining kostenlos!</p><a href="tel:0123456789">📞 (01234) 56789</a></div>
     </main>
-    <footer><p>© 2026 Fitnessstudio PowerFit | <a href="/" style="color: white;">← Zurück zur Übersicht</a></p></footer>
+    <footer><p>© 2026 Fitnessstudio PowerFit | <a href="/" style="color: white;">← Zurück zur Übersicht</a></p><div style="margin-top: 1rem;"><button class="lang-btn active" data-lang="de" style="background: var(--primary); color: white; border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer; margin-right: 0.5rem;">DE</button><button class="lang-btn" data-lang="en" style="background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer;">EN</button></div></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/demos/fitness.html.bak b/demos/fitness.html.bak
new file mode 100644
index 0000000..b0f779d
--- /dev/null
+++ b/demos/fitness.html.bak
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title data-de="Fitnessstudio PowerFit | Dein Weg zur Bestform" data-en="Gym PowerFit | Your Way to Peak Form">Fitnessstudio PowerFit | Dein Weg zur Bestform</title>
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        :root { --primary: #FF5722; --secondary: #FF9800; --bg: #212121; --text: #FFFFFF; }
+        body { font-family: 'Roboto', sans-serif; background: var(--bg); color: var(--text); }
+        header { background: linear-gradient(135deg, var(--primary), var(--secondary)); padding: 3rem 2rem; text-align: center; }
+        h1 { font-family: 'Bebas Neue', sans-serif; font-size: 4rem; letter-spacing: 2px; }
+        main { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; }
+        .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0; }
+        @media (max-width: 768px) { .stats { grid-template-columns: repeat(2, 1fr); } }
+        .stat { text-align: center; padding: 1.5rem; border: 2px solid var(--primary); border-radius: 8px; }
+        .stat-number { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: var(--primary); }
+        .classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
+        @media (max-width: 768px) { .classes { grid-template-columns: 1fr; } }
+        .class { background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 8px; }
+        .class h3 { color: var(--primary); }
+        .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
+        @media (max-width: 768px) { .pricing { grid-template-columns: 1fr; } }
+        .plan { background: rgba(255,255,255,0.08); padding: 2rem; border-radius: 12px; text-align: center; }
+        .plan.featured { border: 2px solid var(--primary); transform: scale(1.05); }
+        .plan h3 { color: var(--primary); font-size: 1.5rem; }
+        .plan .price { font-size: 2.5rem; font-weight: 700; margin: 1rem 0; }
+        .cta { text-align: center; margin: 2rem 0; }
+        .cta a { background: var(--primary); color: white; padding: 1rem 2rem; border-radius: 30px; text-decoration: none; font-weight: 700; }
+        footer { text-align: center; padding: 2rem; background: var(--primary); color: white; }
+    </style>
+</head>
+<body>
+    <header><h1>💪 FITNESSSTUDIO POWERFIT</h1><p>Dein Weg zur Bestform</p></header>
+    <main>
+        <section class="stats">
+            <div class="stat"><div class="stat-number">500+</div><p>qm Trainingsfläche</p></div>
+            <div class="stat"><div class="stat-number">30+</div><p>Geräte</p></div>
+            <div class="stat"><div class="stat-number">15</div><p>Kurse pro Woche</p></div>
+            <div class="stat"><div class="stat-number">24/7</div><p>Geöffnet</p></div>
+        </section>
+        <h3 style="margin-bottom: 1rem;">Unsere Kurse</h3>
+        <section class="classes">
+            <div class="class"><h3>🏋️ Krafttraining</h3><p>Guided workouts, Personal Training</p></div>
+            <div class="class"><h3>🧘 Yoga & Pilates</h3><p>Entspannung, Dehnung, Balance</p></div>
+            <div class="class"><h3>🚴 Spinning</h3><p>Ausdauer, Fettverbrennung, Motivation</p></div>
+        </section>
+        <h3 style="margin-bottom: 1rem;">Mitgliedschaften</h3>
+        <section class="pricing">
+            <div class="plan"><h3>Basic</h3><div class="price">19 €</div><p>pro Monat</p><p style="opacity: 0.7;">Training, Duschen</p></div>
+            <div class="plan featured"><h3>Premium</h3><div class="price">39 €</div><p>pro Monat</p><p style="opacity: 0.7;">Training + Kurse + Sauna</p></div>
+            <div class="plan"><h3>Personal</h3><div class="price">79 €</div><p>pro Monat</p><p style="opacity: 0.7;">Alles + 4x PT pro Monat</p></div>
+        </section>
+        <div class="cta"><p>Probetraining kostenlos!</p><a href="tel:0123456789">📞 (01234) 56789</a></div>
+    </main>
+    <footer><p>© 2026 Fitnessstudio PowerFit | <a href="/" style="color: white;">← Zurück zur Übersicht</a></p></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/friseur.html b/demos/friseur.html
index aa2da88..89ce048 100644
--- a/demos/friseur.html
+++ b/demos/friseur.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Friseursalon Elegance | Stil & Pflege</title>
+    <title data-de="Friseursalon Elegance | Stil & Pflege" data-en="Hair Salon Elegance | Style & Care">Friseursalon Elegance | Stil & Pflege</title>
     <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -177,6 +177,15 @@
     
     <footer>
         <p>© 2026 Friseursalon Elegance | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p>
-    </footer>
+    <div style="margin-top: 1rem;"><button class="lang-btn active" data-lang="de" style="background: var(--primary); color: white; border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer; margin-right: 0.5rem;">DE</button><button class="lang-btn" data-lang="en" style="background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer;">EN</button></div></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/demos/friseur.html.bak b/demos/friseur.html.bak
new file mode 100644
index 0000000..153ac73
--- /dev/null
+++ b/demos/friseur.html.bak
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title data-de="Friseursalon Elegance | Stil & Pflege" data-en="Hair Salon Elegance | Style & Care">Friseursalon Elegance | Stil & Pflege</title>
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        :root {
+            --primary: #2C2C2C;
+            --secondary: #C9A962;
+            --bg: #FAFAFA;
+            --text: #1A1A1A;
+            --accent: #E8D5B7;
+        }
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background: var(--bg);
+            color: var(--text);
+        }
+        header {
+            background: var(--primary);
+            padding: 3rem 2rem;
+            text-align: center;
+        }
+        h1 {
+            font-family: 'Cormorant Garamond', serif;
+            font-size: 3rem;
+            color: var(--secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+        }
+        .tagline { color: white; font-size: 0.9rem; letter-spacing: 2px; margin-top: 0.5rem; }
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 3rem 2rem;
+        }
+        .hero {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 3rem;
+            align-items: center;
+            margin-bottom: 4rem;
+        }
+        @media (max-width: 768px) { .hero { grid-template-columns: 1fr; } }
+        .hero-text h2 {
+            font-family: 'Cormorant Garamond', serif;
+            font-size: 2.5rem;
+            color: var(--primary);
+            margin-bottom: 1rem;
+        }
+        .hero-image {
+            background: linear-gradient(135deg, var(--secondary), var(--accent));
+            height: 300px;
+            border-radius: 200px 200px 0 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 5rem;
+        }
+        .services {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 1.5rem;
+            margin: 3rem 0;
+        }
+        @media (max-width: 768px) { .services { grid-template-columns: 1fr; } }
+        .service {
+            background: white;
+            padding: 2rem;
+            border-radius: 8px;
+            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .service h3 { font-size: 1.1rem; }
+        .service span { color: var(--secondary); font-weight: 600; }
+        .team {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 2rem;
+            margin: 3rem 0;
+            text-align: center;
+        }
+        @media (max-width: 768px) { .team { grid-template-columns: 1fr; } }
+        .team-member {
+            background: white;
+            padding: 2rem;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        }
+        .team-member img {
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            background: var(--accent);
+            margin-bottom: 1rem;
+        }
+        .cta {
+            background: var(--primary);
+            color: white;
+            text-align: center;
+            padding: 3rem;
+            border-radius: 12px;
+        }
+        .cta a {
+            display: inline-block;
+            background: var(--secondary);
+            color: white;
+            padding: 1rem 2rem;
+            border-radius: 30px;
+            text-decoration: none;
+            margin-top: 1rem;
+            font-weight: 600;
+        }
+        footer {
+            text-align: center;
+            padding: 2rem;
+            background: var(--primary);
+            color: var(--accent);
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Friseursalon Elegance</h1>
+        <p class="tagline">Stil · Pflege · Persönlichkeit</p>
+    </header>
+    
+    <main>
+        <section class="hero">
+            <div class="hero-text">
+                <h2>Ihr Look, unsere Leidenschaft</h2>
+                <p>Bei uns sind Sie nicht nur Kunde, sondern Gast. Unsere erfahrenen Stylistinnen und Stylisten nehmen sich Zeit für eine persönliche Beratung. Vom klassischen Schnitt bis zur trendigen Farbgebung – wir verwirklichen Ihren Traumlook.</p>
+            </div>
+            <div class="hero-image">💇‍♀️</div>
+        </section>
+        
+        <h3 style="margin-bottom: 1.5rem;">Unsere Leistungen</h3>
+        <section class="services">
+            <div class="service"><h3>Herrenschnitt</h3><span>18 €</span></div>
+            <div class="service"><h3>Damenschnitt</h3><span>35 €</span></div>
+            <div class="service"><h3>Haarfärben</h3><span>ab 45 €</span></div>
+            <div class="service"><h3>Strähnchen / Balayage</h3><span>ab 65 €</span></div>
+            <div class="service"><h3>Hochsteckfrisur</h3><span>55 €</span></div>
+            <div class="service"><h3>Bartpflege</h3><span>12 €</span></div>
+        </section>
+        
+        <h3 style="margin-bottom: 1.5rem;">Unser Team</h3>
+        <section class="team">
+            <div class="team-member">
+                <div style="font-size: 3rem;">👩‍🦰</div>
+                <h4>Sarah</h4>
+                <p>Senior Stylistin<br>20 Jahre Erfahrung</p>
+            </div>
+            <div class="team-member">
+                <div style="font-size: 3rem;">👨‍🦱</div>
+                <h4>Michael</h4>
+                <p>Farbspezialist<br>Balayage-Experte</p>
+            </div>
+            <div class="team-member">
+                <div style="font-size: 3rem;">👩</div>
+                <h4>Lisa</h4>
+                <p>Barthistin<br>Hochsteck-Spezialistin</p>
+            </div>
+        </section>
+        
+        <div class="cta">
+            <h3>Termin vereinbaren?</h3>
+            <p>Rufen Sie uns an oder kommen Sie spontan vorbei!</p>
+            <a href="tel:0123456789">📞 (01234) 56789</a>
+        </div>
+    </main>
+    
+    <footer>
+        <p>© 2026 Friseursalon Elegance | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p>
+    </footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/handwerk.html b/demos/handwerk.html
index 38c8201..20cc2e0 100644
--- a/demos/handwerk.html
+++ b/demos/handwerk.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Handwerk Schreiner | Maßarbeit aus Holz</title>
+    <title data-de="Handwerk Schreiner | Maßarbeit aus Holz" data-en="Carpenter Workshop | Custom Woodwork">Handwerk Schreiner | Maßarbeit aus Holz</title>
     <link href="https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -43,6 +43,15 @@
         <div class="quote"><p>"Gutes Handwerk braucht Zeit. Aber es hält ein Leben lang."</p></div>
         <p style="text-align: center;"><strong>Kostenlose Beratung:</strong> (01234) 56789</p>
     </main>
-    <footer><p>© 2026 Tischlermeister Braun | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p></footer>
+    <footer><p>© 2026 Tischlermeister Braun | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p><div style="margin-top: 1rem;"><button class="lang-btn active" data-lang="de" style="background: var(--primary); color: white; border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer; margin-right: 0.5rem;">DE</button><button class="lang-btn" data-lang="en" style="background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer;">EN</button></div></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/demos/handwerk.html.bak b/demos/handwerk.html.bak
new file mode 100644
index 0000000..87dea48
--- /dev/null
+++ b/demos/handwerk.html.bak
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title data-de="Handwerk Schreiner | Maßarbeit aus Holz" data-en="Carpenter Workshop | Custom Woodwork">Handwerk Schreiner | Maßarbeit aus Holz</title>
+    <link href="https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        :root { --primary: #5D4037; --secondary: #8D6E63; --bg: #EFEBE9; --text: #3E2723; }
+        body { font-family: 'Source Sans Pro', sans-serif; background: var(--bg); color: var(--text); }
+        header { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 3rem 2rem; text-align: center; }
+        h1 { font-family: 'Arvo', serif; font-size: 2.5rem; }
+        main { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; }
+        .about { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 3rem; }
+        @media (max-width: 768px) { .about { grid-template-columns: 1fr; } }
+        .about h2 { font-family: 'Arvo', serif; color: var(--primary); margin-bottom: 1rem; }
+        .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
+        @media (max-width: 768px) { .services { grid-template-columns: 1fr; } }
+        .service { background: white; padding: 2rem; border-radius: 8px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
+        .service-icon { font-size: 3rem; margin-bottom: 1rem; }
+        .service h3 { color: var(--primary); }
+        .quote { background: white; padding: 2rem; border-left: 4px solid var(--primary); margin: 2rem 0; font-style: italic; }
+        footer { text-align: center; padding: 2rem; background: var(--primary); color: white; }
+    </style>
+</head>
+<body>
+    <header><h1>🪚 Tischlermeister Braun</h1><p>Maßarbeit aus Holz – seit 1982</p></header>
+    <main>
+        <section class="about">
+            <div>
+                <h2>Handwerkskunst mit Herz</h2>
+                <p>Wir fertigen Ihre Möbel nach Maß. Vom Einbauschrank über die Traumküche bis zum individuellen Schreibtisch – alles aus einer Hand, alles nach Ihren Wünschen.</p>
+            </div>
+            <div style="text-align: center; font-size: 8rem;">🪵</div>
+        </section>
+        <h3 style="margin-bottom: 1rem;">Unsere Leistungen</h3>
+        <section class="services">
+            <div class="service"><div class="service-icon">🛋️</div><h3>Einbaumöbel</h3><p>Schränke, Regale, Sideboards – perfekt für Ihren Raum</p></div>
+            <div class="service"><div class="service-icon">🍳</div><h3>Küchen</h3><p>Individuelle Traumküchen nach Ihren Wünschen</p></div>
+            <div class="service"><div class="service-icon">🪑</div><h3>Möbelrestaurierung</h3><p>Alte Schätze neu zum Leben erwecken</p></div>
+        </section>
+        <div class="quote"><p>"Gutes Handwerk braucht Zeit. Aber es hält ein Leben lang."</p></div>
+        <p style="text-align: center;"><strong>Kostenlose Beratung:</strong> (01234) 56789</p>
+    </main>
+    <footer><p>© 2026 Tischlermeister Braun | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/it-dienstleistung.html b/demos/it-dienstleistung.html
index 1672abb..3844df1 100644
--- a/demos/it-dienstleistung.html
+++ b/demos/it-dienstleistung.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>IT-Dienstleistungen Weber | Ihr IT-Partner</title>
+    <title data-de="IT-Dienstleistungen Weber | Ihr IT-Partner" data-en="IT Services Weber | Your IT Partner">IT-Dienstleistungen Weber | Ihr IT-Partner</title>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -42,6 +42,15 @@
         </div>
         <div class="cta"><h3>Kostenlose Erstberatung</h3><p style="margin: 1rem 0;">Wir analysieren Ihre IT-Infrastruktur</p><a href="tel:0123456789">📞 (01234) 56789</a></div>
     </main>
-    <footer><p>© 2026 IT-Dienstleistungen Weber | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p></footer>
+    <footer><p>© 2026 IT-Dienstleistungen Weber | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p><div style="margin-top: 1rem;"><button class="lang-btn active" data-lang="de" style="background: var(--primary); color: white; border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer; margin-right: 0.5rem;">DE</button><button class="lang-btn" data-lang="en" style="background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer;">EN</button></div></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/demos/it-dienstleistung.html.bak b/demos/it-dienstleistung.html.bak
new file mode 100644
index 0000000..33c9874
--- /dev/null
+++ b/demos/it-dienstleistung.html.bak
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title data-de="IT-Dienstleistungen Weber | Ihr IT-Partner" data-en="IT Services Weber | Your IT Partner">IT-Dienstleistungen Weber | Ihr IT-Partner</title>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        :root { --primary: #0D47A1; --secondary: #2196F3; --bg: #0A1929; --text: #E3F2FD; }
+        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); }
+        header { background: linear-gradient(135deg, var(--primary), #1565C0); padding: 3rem 2rem; text-align: center; }
+        h1 { font-family: 'JetBrains Mono', monospace; font-size: 2.5rem; }
+        .code { font-family: 'JetBrains Mono', monospace; background: rgba(0,0,0,0.3); padding: 0.2rem 0.5rem; border-radius: 4px; }
+        main { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; }
+        .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
+        @media (max-width: 768px) { .services { grid-template-columns: 1fr; } }
+        .service { background: rgba(255,255,255,0.05); padding: 2rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
+        .service h3 { color: var(--secondary); margin-bottom: 0.5rem; }
+        .tech { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0; }
+        .tech span { background: var(--secondary); color: var(--bg); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; }
+        .cta { text-align: center; background: var(--primary); padding: 2rem; border-radius: 12px; margin: 2rem 0; }
+        .cta a { background: var(--secondary); color: white; padding: 1rem 2rem; border-radius: 30px; text-decoration: none; }
+        footer { text-align: center; padding: 2rem; background: var(--primary); color: var(--text); }
+    </style>
+</head>
+<body>
+    <header><h1>💻 IT-Dienstleistungen Weber</h1><p><span class="code">Ihr IT-Partner</span> · <span class="code">24/7 Support</span></p></header>
+    <main>
+        <h3 style="margin-bottom: 1rem;">Unsere Leistungen</h3>
+        <section class="services">
+            <div class="service"><h3>🖥️ IT-Support</h3><p>Erste Hilfe bei IT-Problemen, Fernwartung, Vor-Ort-Service</p></div>
+            <div class="service"><h3>🔒 IT-Sicherheit</h3><p>Firewalls, Antivirus, Datensicherung, Sicherheits-Audits</p></div>
+            <div class="service"><h3>🌐 Webentwicklung</h3><p>Webseiten, Webshops, SEO, Hosting</p></div>
+            <div class="service"><h3>☁️ Cloud-Lösungen</h3><p>Cloud-Migration, Office 365, E-Mail-Hosting</p></div>
+            <div class="service"><h3>📱 Mobile Geräte</h3><p>Smartphone-Management, MDM, App-Beratung</p></div>
+            <div class="service"><h3>🔧 Hardware</h3><p>PC-Zusammenbau, Server-Setup, Netzwerk-Infrastruktur</p></div>
+        </section>
+        <h3 style="margin-bottom: 1rem;">Technologien</h3>
+        <div class="tech">
+            <span>Windows</span><span>Linux</span><span>macOS</span><span>Cloud</span><span>Microsoft 365</span><span>WordPress</span><span>Docker</span><span>Backup</span>
+        </div>
+        <div class="cta"><h3>Kostenlose Erstberatung</h3><p style="margin: 1rem 0;">Wir analysieren Ihre IT-Infrastruktur</p><a href="tel:0123456789">📞 (01234) 56789</a></div>
+    </main>
+    <footer><p>© 2026 IT-Dienstleistungen Weber | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/physiotherapie.html b/demos/physiotherapie.html
index d286bc2..50b2f4a 100644
--- a/demos/physiotherapie.html
+++ b/demos/physiotherapie.html
@@ -40,6 +40,15 @@
         </div>
         <div class="cta"><h3>Termin vereinbaren?</h3><p>Wir freuen uns auf Sie!</p><a href="tel:0123456789">📞 (01234) 56789</a></div>
     </main>
-    <footer><p>© 2026 Physiotherapie Gesundheit+ | <a href="/" style="color: var(--bg);">← Zurück zur Übersicht</a></p></footer>
+    <footer><p>© 2026 Physiotherapie Gesundheit+ | <a href="/" style="color: var(--bg);">← Zurück zur Übersicht</a></p><div style="margin-top: 1rem;"><button class="lang-btn active" data-lang="de" style="background: var(--primary); color: white; border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer; margin-right: 0.5rem;">DE</button><button class="lang-btn" data-lang="en" style="background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer;">EN</button></div></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/demos/physiotherapie.html.bak b/demos/physiotherapie.html.bak
new file mode 100644
index 0000000..addf3e0
--- /dev/null
+++ b/demos/physiotherapie.html.bak
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Physiotherapie Praxis | Ihre Gesundheit in guten Händen</title>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&family=Quicksand:wght@400;600&display=swap" rel="stylesheet">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        :root { --primary: #0077B6; --secondary: #00B4D8; --bg: #CAF0F8; --text: #03045E; }
+        body { font-family: 'Nunito Sans', sans-serif; background: var(--bg); color: var(--text); }
+        header { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 3rem 2rem; text-align: center; }
+        h1 { font-family: 'Quicksand', sans-serif; font-size: 2.5rem; }
+        main { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; }
+        .services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
+        @media (max-width: 768px) { .services { grid-template-columns: 1fr; } }
+        .service { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
+        .service h3 { color: var(--primary); margin-bottom: 0.5rem; }
+        .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
+        @media (max-width: 768px) { .team { grid-template-columns: 1fr; } }
+        .team-member { text-align: center; background: white; padding: 1.5rem; border-radius: 12px; }
+        .cta { background: var(--primary); color: white; padding: 2rem; border-radius: 12px; text-align: center; margin: 2rem 0; }
+        .cta a { background: white; color: var(--primary); padding: 1rem 2rem; border-radius: 30px; text-decoration: none; font-weight: 700; }
+        footer { text-align: center; padding: 2rem; background: var(--primary); color: white; }
+    </style>
+</head>
+<body>
+    <header><h1>🏥 Physiotherapie Gesundheit+</h1><p>Ihre Gesundheit in guten Händen</p></header>
+    <main>
+        <section class="services">
+            <div class="service"><h3>🏃 Physiotherapie</h3><p>Individuelle Behandlung bei Rücken-, Gelenk- und Muskelschmerzen</p></div>
+            <div class="service"><h3>💆 Massage</h3><p>Klassische Massagen, Sportmassagen, Lymphdrainage</p></div>
+            <div class="service"><h3>🧘 Prävention</h3><p>Rückenschule, Ernährungsberatung, Entspannungskurse</p></div>
+            <div class="service"><h3>🏠 Hausbesuche</h3><p>Wir kommen auch zu Ihnen nach Hause</p></div>
+        </section>
+        <div class="team">
+            <div class="team-member"><div style="font-size: 3rem;">👩‍⚕️</div><h4>Dr. Sarah Müller</h4><p>Physiotherapeutin</p></div>
+            <div class="team-member"><div style="font-size: 3rem;">👨‍⚕️</div><h4>Thomas Weber</h4><p>Massage-Therapeut</p></div>
+            <div class="team-member"><div style="font-size: 3rem;">👩‍⚕️</div><h4>Julia Klein</h4><p>Praxis-Management</p></div>
+        </div>
+        <div class="cta"><h3>Termin vereinbaren?</h3><p>Wir freuen uns auf Sie!</p><a href="tel:0123456789">📞 (01234) 56789</a></div>
+    </main>
+    <footer><p>© 2026 Physiotherapie Gesundheit+ | <a href="/" style="color: var(--bg);">← Zurück zur Übersicht</a></p></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demos/restaurant.html b/demos/restaurant.html
index 5444e48..5c477c2 100644
--- a/demos/restaurant.html
+++ b/demos/restaurant.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Restaurant Zur Linde | Regionale Küche</title>
+    <title data-de="Restaurant Zur Linde | Regionale Küche" data-en="Restaurant Zur Linde | Regional Cuisine">Restaurant Zur Linde | Regionale Küche</title>
     <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -59,6 +59,15 @@
             <a href="tel:0123456789">📞 Tisch reservieren: (01234) 56789</a>
         </div>
     </main>
-    <footer><p>© 2026 Restaurant Zur Linde | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p></footer>
+    <footer><p>© 2026 Restaurant Zur Linde | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p><div style="margin-top: 1rem;"><button class="lang-btn active" data-lang="de" style="background: var(--primary); color: white; border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer; margin-right: 0.5rem;">DE</button><button class="lang-btn" data-lang="en" style="background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer;">EN</button></div></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/demos/restaurant.html.bak b/demos/restaurant.html.bak
new file mode 100644
index 0000000..5279999
--- /dev/null
+++ b/demos/restaurant.html.bak
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title data-de="Restaurant Zur Linde | Regionale Küche" data-en="Restaurant Zur Linde | Regional Cuisine">Restaurant Zur Linde | Regionale Küche</title>
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        :root { --primary: #2E4A3E; --secondary: #D4A373; --bg: #FFFEF7; --text: #2C2C2C; }
+        body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); }
+        header { background: var(--primary); color: white; padding: 3rem 2rem; text-align: center; }
+        h1 { font-family: 'Cormorant Garamond', serif; font-size: 3rem; color: var(--secondary); }
+        .tagline { color: rgba(255,255,255,0.8); }
+        main { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; }
+        .intro { text-align: center; margin-bottom: 3rem; }
+        .intro h2 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--primary); margin-bottom: 1rem; }
+        .menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
+        @media (max-width: 768px) { .menu { grid-template-columns: 1fr; } }
+        .menu-category { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
+        .menu-category h3 { color: var(--primary); font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; margin-bottom: 1rem; border-bottom: 2px solid var(--secondary); padding-bottom: 0.5rem; }
+        .dish { margin: 1rem 0; display: flex; justify-content: space-between; }
+        .dish-price { color: var(--secondary); font-weight: 700; }
+        .hours { background: var(--primary); color: white; padding: 2rem; border-radius: 12px; text-align: center; margin: 2rem 0; }
+        .reservation { text-align: center; margin: 2rem 0; }
+        .reservation a { background: var(--secondary); color: white; padding: 1rem 2rem; border-radius: 30px; text-decoration: none; font-weight: 700; }
+        footer { text-align: center; padding: 2rem; background: var(--primary); color: var(--secondary); }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>🍽️ Restaurant Zur Linde</h1>
+        <p class="tagline">Regionale Küche · Saisonal · Ehrlich</p>
+    </header>
+    <main>
+        <div class="intro">
+            <h2>Willkommen bei uns</h2>
+            <p>Seit 1978 verwöhnen wir unsere Gäste mit regionaler Küche aus frischen Zutaten. Unser Küchenchef kocht das, was die Saison bietet.</p>
+        </div>
+        <div class="menu">
+            <div class="menu-category">
+                <h3>Vorspeisen</h3>
+                <div class="dish"><span>Bauernsalat mit Ziegenkäse</span><span class="dish-price">9,50 €</span></div>
+                <div class="dish"><span>Kürbis-Cremesuppe</span><span class="dish-price">7,50 €</span></div>
+                <div class="dish"><span>Bruschetta mit Tomaten</span><span class="dish-price">6,50 €</span></div>
+            </div>
+            <div class="menu-category">
+                <h3>Hauptgerichte</h3>
+                <div class="dish"><span>Schweinebraten mit Knödel</span><span class="dish-price">18,90 €</span></div>
+                <div class="dish"><span>Forelle Müllerin</span><span class="dish-price">22,50 €</span></div>
+                <div class="dish"><span>Gemüse-Lasagne (vegan)</span><span class="dish-price">15,90 €</span></div>
+            </div>
+        </div>
+        <div class="hours">
+            <h3>📅 Öffnungszeiten</h3>
+            <p>Di–Sa: 17:00–22:00 Uhr | So: 11:00–14:00 Uhr | Mo: Ruhetag</p>
+        </div>
+        <div class="reservation">
+            <a href="tel:0123456789">📞 Tisch reservieren: (01234) 56789</a>
+        </div>
+    </main>
+    <footer><p>© 2026 Restaurant Zur Linde | <a href="/" style="color: var(--secondary);">← Zurück zur Übersicht</a></p></footer>
+
+    <script>
+        const savedLang = localStorage.getItem('lang') || 'de';
+        if (savedLang === 'en') {
+            document.querySelectorAll('[data-en]').forEach(el => {
+                el.textContent = el.dataset.en;
+            });
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
