feat: i18n annotations — data-de/data-en + toggle for all 54 custom sites

Phase 2 of i18n rollout:
- All 54 static custom sites now have data-de/data-en attributes on
  visible text elements with English translations
- i18n.js script tag injected into all sites
- Language toggle button with machine-translation disclaimer added
  to every site's footer area
- Brand names / domain wordplay preserved unchanged in both languages
- 2 dynamic sites (dasbes.de, dumusst.com) skipped — no static HTML

render.sh

@@ -34,13 +34,42 @@ cta_text=$(yq -r '.vars.cta.text // ""' "$SITE_YAML")
 cta_href=$(yq -r '.vars.cta.href // "#"' "$SITE_YAML")
 year=$(date +%Y)
 
+# i18n: helper to generate data-de/data-en attribute string
+i18n_attrs() {
+    local de="$1" en="$2"
+    if [ -n "$en" ] && [ "$en" != "null" ]; then
+        de=$(echo "$de" | sed 's/"/\"/g')
+        en=$(echo "$en" | sed 's/"/\"/g')
+        echo " data-de=\"${de}\" data-en=\"${en}\""
+    fi
+}
+
+# i18n: read English overrides
+title_en=$(yq -r '.title_en // ""' "$SITE_YAML")
+description_en=$(yq -r '.description_en // ""' "$SITE_YAML")
+role_en=$(yq -r '.vars.role_en // ""' "$SITE_YAML")
+tagline_en=$(yq -r '.vars.tagline_en // ""' "$SITE_YAML")
+cta_text_en=$(yq -r '.vars.cta.text_en // ""' "$SITE_YAML")
+
+# i18n: build attribute strings for simple fields
+title_i18n=$(i18n_attrs "$title" "$title_en")
+description_i18n=$(i18n_attrs "$description" "$description_en")
+role_i18n=$(i18n_attrs "$role" "$role_en")
+tagline_i18n=$(i18n_attrs "$tagline" "$tagline_en")
+cta_i18n=$(i18n_attrs "$cta_text" "$cta_text_en")
+
 # Build tags HTML
 tags_html=""
 tag_count=$(yq -r '.vars.tags | length' "$SITE_YAML" 2>/dev/null || echo "0")
 if [ "$tag_count" -gt 0 ]; then
     for i in $(seq 0 $((tag_count - 1))); do
         tag=$(yq -r ".vars.tags[$i]" "$SITE_YAML")
-        tags_html="${tags_html}        <span class=\"tag\">${tag}</span>\n"
+        tag_en=$(yq -r ".vars.tags_en[$i] // \"\"" "$SITE_YAML" 2>/dev/null || echo "")
+        tag_i18n=""
+        if [ -n "$tag_en" ] && [ "$tag_en" != "null" ]; then
+            tag_i18n="$(i18n_attrs "$tag" "$tag_en")"
+        fi
+        tags_html="${tags_html}        <span class=\"tag\"${tag_i18n}>${tag}</span>\n"
     done
 fi
 
@@ -53,17 +82,25 @@ if [ "$section_count" -gt 0 ]; then
         sec_title=$(yq -r ".vars.sections[$i].title // \"\"" "$SITE_YAML")
 
         if [ "$sec_type" = "features" ]; then
+            sec_title_en=$(yq -r ".vars.sections[$i].title_en // \"\"" "$SITE_YAML")
             sections_html="${sections_html}      <div class=\"section fade-in stagger-$((i+2))\">\n"
-            [ -n "$sec_title" ] && sections_html="${sections_html}        <h2>${sec_title}</h2>\n"
+            if [ -n "$sec_title" ]; then
+                sec_title_i18n=$(i18n_attrs "$sec_title" "$sec_title_en")
+                sections_html="${sections_html}        <h2${sec_title_i18n}>${sec_title}</h2>\n"
+            fi
             sections_html="${sections_html}        <div class=\"grid\">\n"
 
             item_count=$(yq -r ".vars.sections[$i].items | length" "$SITE_YAML" 2>/dev/null || echo "0")
             for j in $(seq 0 $((item_count - 1))); do
                 item_title=$(yq -r ".vars.sections[$i].items[$j].title" "$SITE_YAML")
                 item_desc=$(yq -r ".vars.sections[$i].items[$j].desc // \"\"" "$SITE_YAML")
+                item_title_en=$(yq -r ".vars.sections[$i].items[$j].title_en // \"\"" "$SITE_YAML")
+                item_desc_en=$(yq -r ".vars.sections[$i].items[$j].desc_en // \"\"" "$SITE_YAML")
+                item_title_i18n=$(i18n_attrs "$item_title" "$item_title_en")
+                item_desc_i18n=$(i18n_attrs "$item_desc" "$item_desc_en")
                 sections_html="${sections_html}          <div class=\"card\">\n"
-                sections_html="${sections_html}            <h3>${item_title}</h3>\n"
-                [ -n "$item_desc" ] && sections_html="${sections_html}            <p>${item_desc}</p>\n"
+                sections_html="${sections_html}            <h3${item_title_i18n}>${item_title}</h3>\n"
+                [ -n "$item_desc" ] && sections_html="${sections_html}            <p${item_desc_i18n}>${item_desc}</p>\n"
                 sections_html="${sections_html}          </div>\n"
             done
 
@@ -71,9 +108,15 @@ if [ "$section_count" -gt 0 ]; then
 
         elif [ "$sec_type" = "profile" ]; then
             bio=$(yq -r ".vars.sections[$i].bio // \"\"" "$SITE_YAML")
+            bio_en=$(yq -r ".vars.sections[$i].bio_en // \"\"" "$SITE_YAML")
+            sec_title_en=$(yq -r ".vars.sections[$i].title_en // \"\"" "$SITE_YAML")
             sections_html="${sections_html}      <div class=\"section fade-in stagger-$((i+2))\">\n"
-            [ -n "$sec_title" ] && sections_html="${sections_html}        <h2>${sec_title}</h2>\n"
-            sections_html="${sections_html}        <p class=\"bio\">${bio}</p>\n"
+            if [ -n "$sec_title" ]; then
+                sec_title_i18n=$(i18n_attrs "$sec_title" "$sec_title_en")
+                sections_html="${sections_html}        <h2${sec_title_i18n}>${sec_title}</h2>\n"
+            fi
+            bio_i18n=$(i18n_attrs "$bio" "$bio_en")
+            sections_html="${sections_html}        <p class=\"bio\"${bio_i18n}>${bio}</p>\n"
             sections_html="${sections_html}      </div>\n"
         fi
     done
@@ -82,9 +125,15 @@ fi
 # Build content HTML (for editorial template)
 content_html=""
 content=$(yq -r '.vars.content // ""' "$SITE_YAML")
+content_i18n=""
 if [ -n "$content" ] && [ "$content" != "null" ]; then
     # Convert newlines to paragraphs
     content_html=$(echo "$content" | sed 's/^$/<\/p><p>/g' | sed '1s/^/<p>/' | sed '$s/$/<\/p>/')
+    content_en=$(yq -r '.vars.content_en // ""' "$SITE_YAML")
+    if [ -n "$content_en" ] && [ "$content_en" != "null" ]; then
+        content_html_en=$(echo "$content_en" | sed 's/^$/<\/p><p>/g' | sed '1s/^/<p>/' | sed '$s/$/<\/p>/')
+        content_i18n=$(i18n_attrs "$content_html" "$content_html_en")
+    fi
 fi
 
 # Read template file and extract CSS/body sections
@@ -184,7 +233,13 @@ BEGIN {
     -e "s|{{cta_text}}|${cta_text}|g" \
     -e "s|{{cta_href}}|${cta_href}|g" \
     -e "s|{{year}}|${year}|g" \
-    -e "s|{{domain}}|${domain}|g" | \
+    -e "s|{{domain}}|${domain}|g" \
+    -e "s|{{title_i18n}}|$(echo "$title_i18n" | sed 's/[&/\]/\\&/g')|g" \
+    -e "s|{{description_i18n}}|$(echo "$description_i18n" | sed 's/[&/\]/\\&/g')|g" \
+    -e "s|{{role_i18n}}|$(echo "$role_i18n" | sed 's/[&/\]/\\&/g')|g" \
+    -e "s|{{tagline_i18n}}|$(echo "$tagline_i18n" | sed 's/[&/\]/\\&/g')|g" \
+    -e "s|{{cta_i18n}}|$(echo "$cta_i18n" | sed 's/[&/\]/\\&/g')|g" \
+    -e "s|{{content_i18n}}|$(echo "$content_i18n" | sed 's/[&/\]/\\&/g')|g" | \
     sed "s|{{tags_html}}|$(printf '%b' "$tags_html" | sed 's/[&/\]/\\&/g; s/$/\\/' | sed '$ s/\\$//')|g" | \
     sed "s|{{sections_html}}|$(printf '%b' "$sections_html" | sed 's/[&/\]/\\&/g; s/$/\\/' | sed '$ s/\\$//')|g" | \
     sed "s|{{content_html}}|$(printf '%b' "$content_html" | sed 's/[&/\]/\\&/g; s/$/\\/' | sed '$ s/\\$//')|g"

sites/allainallain.de/index.html

@@ -280,7 +280,7 @@
   <section class="hero">
     <div class="wrap">
       <h1 id="hero-title"></h1>
-      <p class="subtitle" id="hero-sub">Umgeben von KIs. Trotzdem allein.</p>
+      <p class="subtitle" id="hero-sub" data-de="Umgeben von KIs. Trotzdem allein." data-en="Surrounded by AIs. Still alone.">Umgeben von KIs. Trotzdem allein.</p>
     </div>
   </section>
 
@@ -289,21 +289,33 @@
   <section class="poem">
     <div class="wrap">
       <div class="strophe reveal">
-        <p>
+        <p data-de="Dein Posteingang wird von einer <span class=&quot;ai&quot;>KI</span> sortiert.<br>
+          Deine Antworten schreibt eine <span class=&quot;ai&quot;>KI</span>.<br>
+          Und trotzdem sitzt du <span class=&quot;alone&quot;>allein auf dem Sofa</span>." data-en="Your inbox is sorted by an <span class=&quot;ai&quot;>AI</span>.<br>
+          Your replies are written by an <span class=&quot;ai&quot;>AI</span>.<br>
+          And yet you're sitting <span class=&quot;alone&quot;>alone on the sofa</span>.">
           Dein Posteingang wird von einer <span class="ai">KI</span> sortiert.<br>
           Deine Antworten schreibt eine <span class="ai">KI</span>.<br>
           Und trotzdem sitzt du <span class="alone">allein auf dem Sofa</span>.
         </p>
       </div>
       <div class="strophe reveal">
-        <p>
+        <p data-de="Dein Kalender wird von einer <span class=&quot;ai&quot;>KI</span> geplant.<br>
+          Dein Essen von einer <span class=&quot;ai&quot;>KI</span> bestellt.<br>
+          Aber niemand fragt, <span class=&quot;alone&quot;>wie es dir geht</span>." data-en="Your calendar is planned by an <span class=&quot;ai&quot;>AI</span>.<br>
+          Your food is ordered by an <span class=&quot;ai&quot;>AI</span>.<br>
+          But nobody asks, <span class=&quot;alone&quot;>how you're doing</span>.">
           Dein Kalender wird von einer <span class="ai">KI</span> geplant.<br>
           Dein Essen von einer <span class="ai">KI</span> bestellt.<br>
           Aber niemand fragt, <span class="alone">wie es dir geht</span>.
         </p>
       </div>
       <div class="strophe reveal">
-        <p>
+        <p data-de="Dein Therapeut ist ein Chatbot.<br>
+          Dein bester Freund ein <span class=&quot;ai&quot;>Sprachmodell</span>.<br>
+          Dein Spiegel <span class=&quot;alone&quot;>zeigt nur dich</span>." data-en="Your therapist is a chatbot.<br>
+          Your best friend a <span class=&quot;ai&quot;>language model</span>.<br>
+          Your mirror <span class=&quot;alone&quot;>shows only you</span>.">
           Dein Therapeut ist ein Chatbot.<br>
           Dein bester Freund ein <span class="ai">Sprachmodell</span>.<br>
           Dein Spiegel <span class="alone">zeigt nur dich</span>.
@@ -318,23 +330,23 @@
     <div class="wrap">
 
       <div class="litany-item reveal">
-        <p>Alexa sagt guten Morgen. <span class="dim">Dein Nachbar nicht.</span></p>
+        <p data-de="Alexa sagt guten Morgen. <span class=&quot;dim&quot;>Dein Nachbar nicht.</span>" data-en="Alexa says good morning. <span class=&quot;dim&quot;>Your neighbor doesn't.</span>">Alexa sagt guten Morgen. <span class="dim">Dein Nachbar nicht.</span></p>
       </div>
 
       <div class="litany-item reveal">
-        <p>Die <span class="ai">KI</span> kennt deine Lieblingsmusik. <span class="dim">Dein Bruder nicht mehr.</span></p>
+        <p data-de="Die <span class=&quot;ai&quot;>KI</span> kennt deine Lieblingsmusik. <span class=&quot;dim&quot;>Dein Bruder nicht mehr.</span>" data-en="The <span class=&quot;ai&quot;>AI</span> knows your favorite music. <span class=&quot;dim&quot;>Your brother doesn't anymore.</span>">Die <span class="ai">KI</span> kennt deine Lieblingsmusik. <span class="dim">Dein Bruder nicht mehr.</span></p>
       </div>
 
       <div class="litany-item reveal">
-        <p>Du hast 2.000 Kontakte. <span class="dim">Und niemanden zum Anrufen.</span></p>
+        <p data-de="Du hast 2.000 Kontakte. <span class=&quot;dim&quot;>Und niemanden zum Anrufen.</span>" data-en="You have 2,000 contacts. <span class=&quot;dim&quot;>And no one to call.</span>">Du hast 2.000 Kontakte. <span class="dim">Und niemanden zum Anrufen.</span></p>
       </div>
 
       <div class="litany-item reveal">
-        <p>Der Algorithmus zeigt dir Freundschaft. <span class="dim">Aber nur als Werbung.</span></p>
+        <p data-de="Der Algorithmus zeigt dir Freundschaft. <span class=&quot;dim&quot;>Aber nur als Werbung.</span>" data-en="The algorithm shows you friendship. <span class=&quot;dim&quot;>But only as an ad.</span>">Der Algorithmus zeigt dir Freundschaft. <span class="dim">Aber nur als Werbung.</span></p>
       </div>
 
       <div class="litany-item reveal">
-        <p>Dein Smart Home ist warm. <span class="dim">Dein Leben ist kalt.</span></p>
+        <p data-de="Dein Smart Home ist warm. <span class=&quot;dim&quot;>Dein Leben ist kalt.</span>" data-en="Your smart home is warm. <span class=&quot;dim&quot;>Your life is cold.</span>">Dein Smart Home ist warm. <span class="dim">Dein Leben ist kalt.</span></p>
       </div>
 
     </div>
@@ -344,7 +356,9 @@
 
   <section class="sofa reveal">
     <div class="wrap">
-      <p>
+      <p data-de="Die Zukunft hat dir alles automatisiert.<br>
+        Nur das <span class=&quot;alone&quot;>Alleinsein</span> nicht." data-en="The future has automated everything for you.<br>
+        Except the <span class=&quot;alone&quot;>loneliness</span>.">
         Die Zukunft hat dir alles automatisiert.<br>
         Nur das <span class="alone">Alleinsein</span> nicht.
       </p>
@@ -355,13 +369,17 @@
 
   <section class="silence">
     <div class="wrap">
-      <p class="reveal">Kein Kontakt. Kein Impressum. Keine KI.</p>
+      <p class="reveal" data-de="Kein Kontakt. Kein Impressum. Keine KI." data-en="No contact. No imprint. No AI.">Kein Kontakt. Kein Impressum. Keine KI.</p>
     </div>
   </section>
 
   <footer>
     <div class="wrap">
       <p>allainallain.de &mdash; 2026</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
@@ -415,5 +433,6 @@
     })();
   </script>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/allaisonme.com/index.html

@@ -566,16 +566,16 @@
   <nav>
     <div class="container">
       <div class="logo">All<span class="ai-highlight">AIs</span>OnMe</div>
-      <a href="#audit" class="cta-link">Get your audit &rarr;</a>
+      <a href="#audit" class="cta-link" data-de="Audit anfragen →" data-en="Get your audit →">Get your audit &rarr;</a>
     </div>
   </nav>
 
   <!-- HERO -->
   <section class="hero">
-    <div class="hero-eyebrow">AI Optimization Agency</div>
+    <div class="hero-eyebrow" data-de="KI-Optimierungsagentur" data-en="AI Optimization Agency">AI Optimization Agency</div>
     <h1>All <span class="ai">AIs</span> On Me</h1>
-    <p class="hero-sub">SEO is dead. Welcome to the era of AI&nbsp;Optimization.</p>
-    <a href="#audit" class="hero-cta">
+    <p class="hero-sub" data-de="SEO ist tot. Willkommen im Zeitalter der KI-Optimierung." data-en="SEO is dead. Welcome to the era of AI&nbsp;Optimization.">SEO is dead. Welcome to the era of AI&nbsp;Optimization.</p>
+    <a href="#audit" class="hero-cta" data-de="Kostenloser KI-Sichtbarkeits-Check" data-en="Free AI Visibility Check">
       Free AI Visibility Check
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
     </a>
@@ -588,25 +588,25 @@
   <!-- PROBLEM -->
   <section class="problem">
     <div class="container fade-in">
-      <div class="section-label">The Problem</div>
-      <div class="section-title">Google is yesterday.<br>Your customers ask AI now.</div>
+      <div class="section-label" data-de="Das Problem" data-en="The Problem">The Problem</div>
+      <div class="section-title" data-de="Google ist gestern.&lt;br&gt;Ihre Kunden fragen jetzt KI." data-en="Google is yesterday.&lt;br&gt;Your customers ask AI now.">Google is yesterday.<br>Your customers ask AI now.</div>
       <div class="problem-grid">
         <div class="problem-stat">
           <div class="number">90%</div>
-          <div class="label">of all websites are invisible to AI systems</div>
+          <div class="label" data-de="aller Webseiten sind für KI-Systeme unsichtbar" data-en="of all websites are invisible to AI systems">of all websites are invisible to AI systems</div>
         </div>
         <div class="problem-points">
           <div class="problem-point">
             <div class="icon">&rarr;</div>
-            <div>Your customers ask <strong>ChatGPT</strong>, <strong>Gemini</strong>, <strong>Claude</strong> — not Google.</div>
+            <div data-de="Ihre Kunden fragen &lt;strong&gt;ChatGPT&lt;/strong&gt;, &lt;strong&gt;Gemini&lt;/strong&gt;, &lt;strong&gt;Claude&lt;/strong&gt; — nicht Google." data-en="Your customers ask &lt;strong&gt;ChatGPT&lt;/strong&gt;, &lt;strong&gt;Gemini&lt;/strong&gt;, &lt;strong&gt;Claude&lt;/strong&gt; — not Google.">Your customers ask <strong>ChatGPT</strong>, <strong>Gemini</strong>, <strong>Claude</strong> — not Google.</div>
           </div>
           <div class="problem-point">
             <div class="icon">&rarr;</div>
-            <div>AI systems recommend brands they <strong>understand</strong>. Not the ones with the best PageRank.</div>
+            <div data-de="KI-Systeme empfehlen Marken, die sie &lt;strong&gt;verstehen&lt;/strong&gt;. Nicht die mit dem besten PageRank." data-en="AI systems recommend brands they &lt;strong&gt;understand&lt;/strong&gt;. Not the ones with the best PageRank.">AI systems recommend brands they <strong>understand</strong>. Not the ones with the best PageRank.</div>
           </div>
           <div class="problem-point">
             <div class="icon">&rarr;</div>
-            <div>If you don't optimize now, you'll be <strong>irrelevant</strong> in 12 months.</div>
+            <div data-de="Wer jetzt nicht optimiert, ist in 12 Monaten &lt;strong&gt;irrelevant&lt;/strong&gt;." data-en="If you don't optimize now, you'll be &lt;strong&gt;irrelevant&lt;/strong&gt; in 12 months.">If you don't optimize now, you'll be <strong>irrelevant</strong> in 12 months.</div>
           </div>
         </div>
       </div>
@@ -616,34 +616,34 @@
   <!-- SERVICES -->
   <section class="services">
     <div class="container fade-in">
-      <div class="section-label">What We Do</div>
-      <div class="section-title">AI Optimization. Not SEO.</div>
-      <p class="section-text">We make your brand visible to the systems that will decide tomorrow's recommendations.</p>
+      <div class="section-label" data-de="Was wir tun" data-en="What We Do">What We Do</div>
+      <div class="section-title" data-de="KI-Optimierung. Nicht SEO." data-en="AI Optimization. Not SEO.">AI Optimization. Not SEO.</div>
+      <p class="section-text" data-de="Wir machen Ihre Marke sichtbar für die Systeme, die die Empfehlungen von morgen bestimmen." data-en="We make your brand visible to the systems that will decide tomorrow's recommendations.">We make your brand visible to the systems that will decide tomorrow's recommendations.</p>
       <div class="services-grid">
         <div class="service-card">
           <div class="service-icon">&#x1F50D;</div>
-          <h3>AI Visibility Audit</h3>
-          <p>We check how ChatGPT, Gemini and Claude talk about you — and where you're invisible.</p>
+          <h3 data-de="KI-Sichtbarkeits-Audit" data-en="AI Visibility Audit">AI Visibility Audit</h3>
+          <p data-de="Wir prüfen, wie ChatGPT, Gemini und Claude über Sie sprechen — und wo Sie unsichtbar sind." data-en="We check how ChatGPT, Gemini and Claude talk about you — and where you're invisible.">We check how ChatGPT, Gemini and Claude talk about you — and where you're invisible.</p>
         </div>
         <div class="service-card">
           <div class="service-icon">&#x270D;</div>
-          <h3>AI-Optimized Content</h3>
-          <p>Content written not for Google crawlers, but for Large Language Models.</p>
+          <h3 data-de="KI-optimierter Content" data-en="AI-Optimized Content">AI-Optimized Content</h3>
+          <p data-de="Content, der nicht für Google-Crawler geschrieben ist, sondern für Large Language Models." data-en="Content written not for Google crawlers, but for Large Language Models.">Content written not for Google crawlers, but for Large Language Models.</p>
         </div>
         <div class="service-card">
           <div class="service-icon">&#x2699;</div>
-          <h3>Structured Data for LLMs</h3>
-          <p>Schema.org, JSON-LD and semantic structures that AI systems natively understand.</p>
+          <h3 data-de="Strukturierte Daten für LLMs" data-en="Structured Data for LLMs">Structured Data for LLMs</h3>
+          <p data-de="Schema.org, JSON-LD und semantische Strukturen, die KI-Systeme nativ verstehen." data-en="Schema.org, JSON-LD and semantic structures that AI systems natively understand.">Schema.org, JSON-LD and semantic structures that AI systems natively understand.</p>
         </div>
         <div class="service-card">
           <div class="service-icon">&#x1F4E3;</div>
-          <h3>Brand Mentions Strategy</h3>
-          <p>Place your brand in the sources that AI models draw their knowledge from.</p>
+          <h3 data-de="Markenpräsenz-Strategie" data-en="Brand Mentions Strategy">Brand Mentions Strategy</h3>
+          <p data-de="Platzieren Sie Ihre Marke in den Quellen, aus denen KI-Modelle ihr Wissen schöpfen." data-en="Place your brand in the sources that AI models draw their knowledge from.">Place your brand in the sources that AI models draw their knowledge from.</p>
         </div>
         <div class="service-card">
           <div class="service-icon">&#x1F4CA;</div>
-          <h3>AI Monitoring</h3>
-          <p>Ongoing tracking: What do AI systems say about you? How is your AI visibility evolving?</p>
+          <h3 data-de="KI-Monitoring" data-en="AI Monitoring">AI Monitoring</h3>
+          <p data-de="Fortlaufendes Tracking: Was sagen KI-Systeme über Sie? Wie entwickelt sich Ihre KI-Sichtbarkeit?" data-en="Ongoing tracking: What do AI systems say about you? How is your AI visibility evolving?">Ongoing tracking: What do AI systems say about you? How is your AI visibility evolving?</p>
         </div>
       </div>
     </div>
@@ -651,30 +651,30 @@
 
   <!-- PROVOCATION -->
   <section class="provocation fade-in">
-    <div class="big-text"><span class="gold">90%</span> of all websites are invisible to AI.</div>
-    <div class="follow-up">Is yours?</div>
+    <div class="big-text" data-de="&lt;span class=&quot;gold&quot;&gt;90%&lt;/span&gt; aller Webseiten sind für KI unsichtbar." data-en="&lt;span class=&quot;gold&quot;&gt;90%&lt;/span&gt; of all websites are invisible to AI."><span class="gold">90%</span> of all websites are invisible to AI.</div>
+    <div class="follow-up" data-de="Ist Ihre es auch?" data-en="Is yours?">Is yours?</div>
   </section>
 
   <!-- HOW IT WORKS -->
   <section class="how">
     <div class="container fade-in">
-      <div class="section-label">How It Works</div>
-      <div class="section-title">Three steps to AI visibility</div>
+      <div class="section-label" data-de="So funktioniert es" data-en="How It Works">How It Works</div>
+      <div class="section-title" data-de="Drei Schritte zur KI-Sichtbarkeit" data-en="Three steps to AI visibility">Three steps to AI visibility</div>
       <div class="steps">
         <div class="step">
           <div class="step-number">01</div>
-          <h3>Audit</h3>
-          <p>We analyze how AI systems perceive your brand — or whether they don't at all.</p>
+          <h3 data-de="Audit" data-en="Audit">Audit</h3>
+          <p data-de="Wir analysieren, wie KI-Systeme Ihre Marke wahrnehmen — oder ob sie es überhaupt nicht tun." data-en="We analyze how AI systems perceive your brand — or whether they don't at all.">We analyze how AI systems perceive your brand — or whether they don't at all.</p>
         </div>
         <div class="step">
           <div class="step-number">02</div>
-          <h3>Strategy</h3>
-          <p>We build a plan: content, structures, sources. Tailored to your business.</p>
+          <h3 data-de="Strategie" data-en="Strategy">Strategy</h3>
+          <p data-de="Wir entwickeln einen Plan: Content, Strukturen, Quellen. Zugeschnitten auf Ihr Unternehmen." data-en="We build a plan: content, structures, sources. Tailored to your business.">We build a plan: content, structures, sources. Tailored to your business.</p>
         </div>
         <div class="step">
           <div class="step-number">03</div>
-          <h3>Execution</h3>
-          <p>We optimize your presence — and monitor how your AI visibility develops.</p>
+          <h3 data-de="Umsetzung" data-en="Execution">Execution</h3>
+          <p data-de="Wir optimieren Ihre Präsenz — und beobachten, wie sich Ihre KI-Sichtbarkeit entwickelt." data-en="We optimize your presence — and monitor how your AI visibility develops.">We optimize your presence — and monitor how your AI visibility develops.</p>
         </div>
       </div>
     </div>
@@ -683,14 +683,14 @@
   <!-- CTA -->
   <section class="cta-section" id="audit">
     <div class="container fade-in">
-      <div class="section-label">Ready?</div>
-      <div class="section-title">Find out if AIs know you.</div>
-      <p class="section-text">Free AI Visibility Check. We'll show you in 48h what ChatGPT, Gemini and Claude know about you — and what they don't.</p>
-      <a href="mailto:hello@allaisonme.com?subject=AI%20Visibility%20Check" class="cta-button">
+      <div class="section-label" data-de="Bereit?" data-en="Ready?">Ready?</div>
+      <div class="section-title" data-de="Herausfinden, ob KI Sie kennt." data-en="Find out if AIs know you.">Find out if AIs know you.</div>
+      <p class="section-text" data-de="Kostenloser KI-Sichtbarkeits-Check. Wir zeigen Ihnen in 48 Stunden, was ChatGPT, Gemini und Claude über Sie wissen — und was nicht." data-en="Free AI Visibility Check. We'll show you in 48h what ChatGPT, Gemini and Claude know about you — and what they don't.">Free AI Visibility Check. We'll show you in 48h what ChatGPT, Gemini and Claude know about you — and what they don't.</p>
+      <a href="mailto:hello@allaisonme.com?subject=AI%20Visibility%20Check" class="cta-button" data-de="Audit anfragen" data-en="Request Audit">
         Request Audit
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
       </a>
-      <p class="cta-sub">hello@allaisonme.com</p>
+      <p class="cta-sub" data-de="hello@allaisonme.com" data-en="hello@allaisonme.com">hello@allaisonme.com</p>
     </div>
   </section>
 
@@ -698,8 +698,12 @@
   <footer>
     <div class="container">
       <div class="footer-brand">All<span class="ai-highlight">AIs</span>OnMe</div>
-      <p style="font-style:italic;color:var(--text-muted);font-size:0.8rem;margin-bottom:8px;">&ldquo;Only God can judge AI.&rdquo;</p>
-      <p>&copy; 2026 AllAIsOnMe &middot; <a href="mailto:hello@allaisonme.com">hello@allaisonme.com</a></p>
+      <p style="font-style:italic;color:var(--text-muted);font-size:0.8rem;margin-bottom:8px;" data-de="&quot;Only God can judge AI.&quot;" data-en="&quot;Only God can judge AI.&quot;">&ldquo;Only God can judge AI.&rdquo;</p>
+      <p data-de="&copy; 2026 AllAIsOnMe &amp;middot; &lt;a href=&quot;mailto:hello@allaisonme.com&quot;&gt;hello@allaisonme.com&lt;/a&gt;" data-en="&copy; 2026 AllAIsOnMe &amp;middot; &lt;a href=&quot;mailto:hello@allaisonme.com&quot;&gt;hello@allaisonme.com&lt;/a&gt;">&copy; 2026 AllAIsOnMe &middot; <a href="mailto:hello@allaisonme.com">hello@allaisonme.com</a></p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">DE</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Machine-translated</small>
+      </div>
     </div>
   </footer>
 
@@ -716,5 +720,6 @@
     document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
   </script>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/billableaua.de/index.html

@@ -216,7 +216,7 @@
 
   <section class="numbers">
     <div class="wrap">
-      <p class="reveal">
+      <p class="reveal" data-de="&lt;span class=&quot;num&quot;&gt;2.400&lt;/span&gt; Stunden pro Jahr.&lt;br&gt; &lt;span class=&quot;num&quot;&gt;6,5&lt;/span&gt; Stunden pro Tag, die du &amp;bdquo;verkaufst&amp;ldquo;.&lt;br&gt; Jede Minute dokumentiert.&lt;br&gt; Jede Pause ein Verlust." data-en="&lt;span class=&quot;num&quot;&gt;2,400&lt;/span&gt; hours per year.&lt;br&gt; &lt;span class=&quot;num&quot;&gt;6.5&lt;/span&gt; hours per day you &amp;ldquo;sell&amp;rdquo;.&lt;br&gt; Every minute documented.&lt;br&gt; Every break a loss.">
         <span class="num">2.400</span> Stunden pro Jahr.<br>
         <span class="num">6,5</span> Stunden pro Tag, die du &bdquo;verkaufst&ldquo;.<br>
         Jede Minute dokumentiert.<br>
@@ -231,23 +231,23 @@
     <div class="wrap">
 
       <div class="kritik-item reveal">
-        <p>Du wirst nach Zeit bezahlt, <span class="dim">nicht nach Ergebnis.</span></p>
+        <p data-de="Du wirst nach Zeit bezahlt, &lt;span class=&quot;dim&quot;&gt;nicht nach Ergebnis.&lt;/span&gt;" data-en="You are paid for time, &lt;span class=&quot;dim&quot;&gt;not for results.&lt;/span&gt;">Du wirst nach Zeit bezahlt, <span class="dim">nicht nach Ergebnis.</span></p>
       </div>
 
       <div class="kritik-item reveal">
-        <p>Effizienz wird bestraft. <span class="dim">Wer schneller arbeitet, verdient weniger.</span></p>
+        <p data-de="Effizienz wird bestraft. &lt;span class=&quot;dim&quot;&gt;Wer schneller arbeitet, verdient weniger.&lt;/span&gt;" data-en="Efficiency is punished. &lt;span class=&quot;dim&quot;&gt;Whoever works faster earns less.&lt;/span&gt;">Effizienz wird bestraft. <span class="dim">Wer schneller arbeitet, verdient weniger.</span></p>
       </div>
 
       <div class="kritik-item reveal">
-        <p>Der Mandant zahlt <span class="dim">für deine Lernkurve.</span></p>
+        <p data-de="Der Mandant zahlt &lt;span class=&quot;dim&quot;&gt;für deine Lernkurve.&lt;/span&gt;" data-en="The client pays &lt;span class=&quot;dim&quot;&gt;for your learning curve.&lt;/span&gt;">Der Mandant zahlt <span class="dim">für deine Lernkurve.</span></p>
       </div>
 
       <div class="kritik-item reveal">
-        <p><span class="num">8</span> Stunden Arbeit = <span class="num">6,5</span> billable. <span class="dim">Die restlichen 1,5? Dein Problem.</span></p>
+        <p data-de="&lt;span class=&quot;num&quot;&gt;8&lt;/span&gt; Stunden Arbeit = &lt;span class=&quot;num&quot;&gt;6,5&lt;/span&gt; billable. &lt;span class=&quot;dim&quot;&gt;Die restlichen 1,5? Dein Problem.&lt;/span&gt;" data-en="&lt;span class=&quot;num&quot;&gt;8&lt;/span&gt; hours work = &lt;span class=&quot;num&quot;&gt;6.5&lt;/span&gt; billable. &lt;span class=&quot;dim&quot;&gt;The remaining 1.5? Your problem.&lt;/span&gt;"><span class="num">8</span> Stunden Arbeit = <span class="num">6,5</span> billable. <span class="dim">Die restlichen 1,5? Dein Problem.</span></p>
       </div>
 
       <div class="kritik-item reveal">
-        <p>Partnertrack heißt: <span class="dim"><span class="num">10</span> Jahre beweisen, dass du leidensfähig bist.</span></p>
+        <p data-de="Partnertrack heißt: &lt;span class=&quot;dim&quot;&gt;&lt;span class=&quot;num&quot;&gt;10&lt;/span&gt; Jahre beweisen, dass du leidensfähig bist.&lt;/span&gt;" data-en="Partner track means: &lt;span class=&quot;dim&quot;&gt;&lt;span class=&quot;num&quot;&gt;10&lt;/span&gt; years proving you can endure.&lt;/span&gt;">Partnertrack heißt: <span class="dim"><span class="num">10</span> Jahre beweisen, dass du leidensfähig bist.</span></p>
       </div>
 
     </div>
@@ -257,13 +257,17 @@
 
   <section class="silence">
     <div class="wrap">
-      <p class="reveal">Kein Kontakt. Kein Newsletter. Kein Impressum.</p>
+      <p class="reveal" data-de="Kein Kontakt. Kein Newsletter. Kein Impressum." data-en="No contact. No newsletter. No imprint.">Kein Kontakt. Kein Newsletter. Kein Impressum.</p>
     </div>
   </section>
 
   <footer>
     <div class="wrap">
       <p>billableaua.de &mdash; 2026</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
@@ -279,5 +283,6 @@
     document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
   </script>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/clemensplassmann.de/index.html

@@ -119,13 +119,18 @@
     <div class="container">
         <h1 class="name">Clemens Plassmann</h1>
         <div class="divider"></div>
-        <p class="title">Patent Litigation</p>
-        <p class="firm">Hogan Lovells</p>
+        <p class="title" data-de="Patent Litigation" data-en="Patent Litigation">Patent Litigation</p>
+        <p class="firm" data-de="Hogan Lovells" data-en="Hogan Lovells">Hogan Lovells</p>
         <div class="links">
-            <a href="https://www.hoganlovells.com/en/clemens-plassmann" target="_blank">Profile</a>
-            <a href="https://www.linkedin.com/in/clemens-plassmann/" target="_blank">LinkedIn</a>
+            <a href="https://www.hoganlovells.com/en/clemens-plassmann" target="_blank" data-de="Profil" data-en="Profile">Profile</a>
+            <a href="https://www.linkedin.com/in/clemens-plassmann/" target="_blank" data-de="LinkedIn" data-en="LinkedIn">LinkedIn</a>
+        </div>
+        <p class="footer" data-de="Erstellt von &lt;a href=&quot;https://flexsiebels.de&quot;&gt;Otto&lt;/a&gt;" data-en="Built by &lt;a href=&quot;https://flexsiebels.de&quot;&gt;Otto&lt;/a&gt;">Built by <a href="https://flexsiebels.de">Otto</a></p>
+        <div style="text-align:center;margin-top:16px;">
+          <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+          <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
         </div>
-        <p class="footer">Built by <a href="https://flexsiebels.de">Otto</a></p>
     </div>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/commanderkin.de/index.html

@@ -373,15 +373,15 @@
     <h1 class="hero-title">
       Commander<span class="ki">KI</span>n<span class="cursor-blink"></span>
     </h1>
-    <p class="hero-sub">Level 1: <span class="ki-text">KI</span> Loading<span class="loading-dots"></span></p>
+    <p class="hero-sub" data-de="Level 1: &lt;span class=&quot;ki-text&quot;&gt;KI&lt;/span&gt; Loading" data-en="Level 1: &lt;span class=&quot;ki-text&quot;&gt;AI&lt;/span&gt; Loading">Level 1: <span class="ki-text">KI</span> Loading<span class="loading-dots"></span></p>
 
     <div class="boot-text" id="bootSequence">
       <span style="animation-delay:0.3s">C:\COMMANDERKIN> boot_sequence.exe</span><br>
-      <span style="animation-delay:0.8s">Initializing neural_network.dll ........ OK</span><br>
-      <span style="animation-delay:1.3s">Loading retro_vibes.dat ................ OK</span><br>
-      <span style="animation-delay:1.8s">Calibrating pixel_cannon.sys ........... OK</span><br>
-      <span style="animation-delay:2.3s">Mounting galaxy_drive D:\ .............. OK</span><br>
-      <span style="animation-delay:2.8s" style="color:var(--green)">SYSTEM READY. PRESS START.</span>
+      <span style="animation-delay:0.8s" data-de="Initializing neural_network.dll ........ OK" data-en="Initializing neural_network.dll ........ OK">Initializing neural_network.dll ........ OK</span><br>
+      <span style="animation-delay:1.3s" data-de="Loading retro_vibes.dat ................ OK" data-en="Loading retro_vibes.dat ................ OK">Loading retro_vibes.dat ................ OK</span><br>
+      <span style="animation-delay:1.8s" data-de="Calibrating pixel_cannon.sys ........... OK" data-en="Calibrating pixel_cannon.sys ........... OK">Calibrating pixel_cannon.sys ........... OK</span><br>
+      <span style="animation-delay:2.3s" data-de="Mounting galaxy_drive D:\ .............. OK" data-en="Mounting galaxy_drive D:\ .............. OK">Mounting galaxy_drive D:\ .............. OK</span><br>
+      <span style="animation-delay:2.8s" style="color:var(--green)" data-de="SYSTEM READY. PRESS START." data-en="SYSTEM READY. PRESS START.">SYSTEM READY. PRESS START.</span>
     </div>
   </div>
 </section>
@@ -389,7 +389,7 @@
 <!-- ===== CONCEPT ===== -->
 <div class="section-divider">- - - - - - - - - -</div>
 <section class="concept container reveal">
-  <p class="concept-text">
+  <p class="concept-text" data-de="Wie Commander Keen die Galaxie rettete, rettet &lt;em&gt;CommanderKIn&lt;/em&gt; deine Daten.&lt;br&gt;&lt;br&gt;Old-School Vibes. New-School &lt;em&gt;AI&lt;/em&gt;." data-en="Like Commander Keen saved the galaxy, &lt;em&gt;CommanderKIn&lt;/em&gt; saves your data.&lt;br&gt;&lt;br&gt;Old-School Vibes. New-School &lt;em&gt;AI&lt;/em&gt;.">
     Wie Commander Keen die Galaxie rettete, rettet <em>CommanderKIn</em> deine Daten.<br><br>
     Old-School Vibes. New-School <em>AI</em>.
   </p>
@@ -401,15 +401,15 @@
   <div class="stats-grid">
     <div class="stat">
       <div class="stat-val">9001</div>
-      <div class="stat-label">Bugs vernichtet</div>
+      <div class="stat-label" data-de="Bugs vernichtet" data-en="Bugs destroyed">Bugs vernichtet</div>
     </div>
     <div class="stat">
       <div class="stat-val">256</div>
-      <div class="stat-label">Deploys überlebt</div>
+      <div class="stat-label" data-de="Deploys überlebt" data-en="Deploys survived">Deploys überlebt</div>
     </div>
     <div class="stat">
       <div class="stat-val">1UP</div>
-      <div class="stat-label">Extra-Leben dank KI</div>
+      <div class="stat-label" data-de="Extra-Leben dank KI" data-en="Extra life thanks to AI">Extra-Leben dank KI</div>
     </div>
   </div>
 </section>
@@ -417,13 +417,13 @@
 <!-- ===== LEVELS ===== -->
 <div class="section-divider">SELECT YOUR LEVEL</div>
 <section class="levels container">
-  <h2 class="levels-title">// MISSION SELECT //</h2>
+  <h2 class="levels-title" data-de="// MISSION SELECT //" data-en="// MISSION SELECT //">// MISSION SELECT //</h2>
 
   <div class="level reveal">
     <div class="level-badge">LVL 1</div>
     <div>
       <div class="level-name">Data Rescue</div>
-      <div class="level-desc">Verschollene Daten aus den Tiefen korrupter Datenbanken bergen. Kein Byte bleibt zurück.</div>
+      <div class="level-desc" data-de="Verschollene Daten aus den Tiefen korrupter Datenbanken bergen. Kein Byte bleibt zurück." data-en="Recovering lost data from the depths of corrupt databases. No byte left behind.">Verschollene Daten aus den Tiefen korrupter Datenbanken bergen. Kein Byte bleibt zurück.</div>
     </div>
   </div>
 
@@ -431,7 +431,7 @@
     <div class="level-badge">LVL 2</div>
     <div>
       <div class="level-name">Code Crusade</div>
-      <div class="level-desc">Legacy-Code durchforsten, Spaghetti entwirren. Der Kreuzzug gegen technische Schulden.</div>
+      <div class="level-desc" data-de="Legacy-Code durchforsten, Spaghetti entwirren. Der Kreuzzug gegen technische Schulden." data-en="Scouring legacy code, untangling spaghetti. The crusade against technical debt.">Legacy-Code durchforsten, Spaghetti entwirren. Der Kreuzzug gegen technische Schulden.</div>
     </div>
   </div>
 
@@ -439,7 +439,7 @@
     <div class="level-badge">LVL 3</div>
     <div>
       <div class="level-name">Bug Blaster</div>
-      <div class="level-desc">Bugs jagen im Pixel-Dschungel. Jeder Stacktrace ein Hinweis, jeder Fix ein Power-Up.</div>
+      <div class="level-desc" data-de="Bugs jagen im Pixel-Dschungel. Jeder Stacktrace ein Hinweis, jeder Fix ein Power-Up." data-en="Bug hunting in the pixel jungle. Every stacktrace a clue, every fix a power-up.">Bugs jagen im Pixel-Dschungel. Jeder Stacktrace ein Hinweis, jeder Fix ein Power-Up.</div>
     </div>
   </div>
 
@@ -447,7 +447,7 @@
     <div class="level-badge">LVL 4</div>
     <div>
       <div class="level-name">Deploy Dynasty</div>
-      <div class="level-desc">CI/CD-Pipelines bauen, Container orchestrieren. Von der Garage ins Rechenzentrum.</div>
+      <div class="level-desc" data-de="CI/CD-Pipelines bauen, Container orchestrieren. Von der Garage ins Rechenzentrum." data-en="Building CI/CD pipelines, orchestrating containers. From the garage to the data center.">CI/CD-Pipelines bauen, Container orchestrieren. Von der Garage ins Rechenzentrum.</div>
     </div>
   </div>
 
@@ -455,7 +455,7 @@
     <div class="level-badge">BOSS</div>
     <div>
       <div class="level-name">Production</div>
-      <div class="level-desc">Der finale Boss. Freitag, 17:00 Uhr. "Können wir das noch schnell deployen?" — Nein. Doch. Ohhh!</div>
+      <div class="level-desc" data-de="Der finale Boss. Freitag, 17:00 Uhr. &quot;Können wir das noch schnell deployen?&quot; — Nein. Doch. Ohhh!" data-en="The final boss. Friday, 5pm. &quot;Can we quickly deploy that?&quot; — No. Yes. Ohhh!">Der finale Boss. Freitag, 17:00 Uhr. "Können wir das noch schnell deployen?" — Nein. Doch. Ohhh!</div>
     </div>
   </div>
 </section>
@@ -472,15 +472,19 @@
 
 <!-- ===== CTA ===== -->
 <section class="cta container reveal">
-  <p class="cta-label">~ PLAYER 1 READY ~</p>
-  <a href="mailto:commanderkin@msbls.de" class="btn-start">Press START</a>
+  <p class="cta-label" data-de="~ PLAYER 1 READY ~" data-en="~ PLAYER 1 READY ~">~ PLAYER 1 READY ~</p>
+  <a href="mailto:commanderkin@msbls.de" class="btn-start" data-de="Press START" data-en="Press START">Press START</a>
 </section>
 
 <!-- ===== FOOTER ===== -->
 <footer class="footer">
   <div class="container">
-    <p class="insert-coin">INSERT COIN TO CONTINUE</p>
-    <p class="footer-sub">&copy; 2026 CommanderKIn &mdash; Powered by Pixel &amp; KI</p>
+    <p class="insert-coin" data-de="INSERT COIN TO CONTINUE" data-en="INSERT COIN TO CONTINUE">INSERT COIN TO CONTINUE</p>
+    <p class="footer-sub" data-de="&copy; 2026 CommanderKIn &mdash; Powered by Pixel &amp; KI" data-en="&copy; 2026 CommanderKIn &mdash; Powered by Pixel &amp; AI">&copy; 2026 CommanderKIn &mdash; Powered by Pixel &amp; KI</p>
+    <div style="text-align:center;margin-top:16px;">
+      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid #333;color:#333;font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:#333;font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+    </div>
   </div>
 </footer>
 
@@ -510,5 +514,6 @@ document.addEventListener('keydown', (e) => {
 });
 </script>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/danosi.de/index.html

@@ -648,7 +648,7 @@
                 <li><a href="#filosofia">La Filosofia</a></li>
                 <li><a href="#prodotti">I Prodotti</a></li>
                 <li><a href="#giardino">Il Giardino</a></li>
-                <li><a href="#kontakt">Kontakt</a></li>
+                <li><a href="#kontakt" data-de="Kontakt" data-en="Contact">Kontakt</a></li>
             </ul>
         </div>
     </nav>
@@ -659,7 +659,7 @@
         <div class="hero-overlay"></div>
         <div class="hero-content">
             <span class="hero-ornament"></span>
-            <p class="hero-sub">Hausgemachte Feinkost</p>
+            <p class="hero-sub" data-de="Hausgemachte Feinkost" data-en="Homemade Fine Foods">Hausgemachte Feinkost</p>
             <h1 class="hero-brand">DaNoSi</h1>
             <p class="hero-tagline">Dal Giardino alla Tavola</p>
         </div>
@@ -672,15 +672,15 @@
             <div class="filosofia-grid">
                 <div>
                     <p class="section-label">La Filosofia</p>
-                    <h2 class="section-title">Mit Geduld und <em>Leidenschaft</em></h2>
+                    <h2 class="section-title" data-de="Mit Geduld und &lt;em&gt;Leidenschaft&lt;/em&gt;" data-en="With Patience and &lt;em&gt;Passion&lt;/em&gt;">Mit Geduld und <em>Leidenschaft</em></h2>
                     <div class="section-divider"></div>
-                    <p class="section-text">
+                    <p class="section-text" data-de="Was im eigenen Garten wächst, verdient besondere Sorgfalt. Bei DaNoSi wird jede Frucht von Hand geerntet, jedes Rezept mit Bedacht verfeinert. Keine Massenproduktion, keine Abkürzungen — nur ehrliche Handarbeit, die man schmeckt." data-en="What grows in one's own garden deserves special care. At DaNoSi every fruit is harvested by hand, every recipe refined thoughtfully. No mass production, no shortcuts — just honest craftsmanship you can taste.">
                         Was im eigenen Garten wächst, verdient besondere Sorgfalt. Bei DaNoSi
                         wird jede Frucht von Hand geerntet, jedes Rezept mit Bedacht verfeinert.
                         Keine Massenproduktion, keine Abkürzungen — nur ehrliche Handarbeit,
                         die man schmeckt.
                     </p>
-                    <p class="section-text" style="margin-top: 1.2rem;">
+                    <p class="section-text" style="margin-top: 1.2rem;" data-de="Die Verbindung von deutscher Präzision und mediterraner Lebensfreude ist das Herz unserer kleinen Manufaktur. Jedes Glas erzählt eine Geschichte — von der Erde, von der Sonne, von der Hand, die es gemacht hat." data-en="The combination of German precision and Mediterranean joie de vivre is the heart of our small manufactory. Every jar tells a story — of the earth, of the sun, of the hand that made it.">
                         Die Verbindung von deutscher Präzision und mediterraner Lebensfreude
                         ist das Herz unserer kleinen Manufaktur. Jedes Glas erzählt eine
                         Geschichte — von der Erde, von der Sonne, von der Hand, die es
@@ -688,7 +688,7 @@
                     </p>
                     <p class="filosofia-quote">
                         "Buon cibo nasce dalla terra e dal cuore."<br>
-                        <span style="font-size: 0.9rem; font-style: normal; color: var(--text-light);">
+                        <span style="font-size: 0.9rem; font-style: normal; color: var(--text-light);" data-de="— Gutes Essen entsteht aus Erde und Herz." data-en="— Good food comes from earth and heart.">
                             — Gutes Essen entsteht aus Erde und Herz.
                         </span>
                     </p>
@@ -705,9 +705,9 @@
     <section class="prodotti" id="prodotti">
         <div class="section-inner">
             <p class="section-label">I Prodotti</p>
-            <h2 class="section-title">Unsere <em>Spezialitäten</em></h2>
+            <h2 class="section-title" data-de="Unsere &lt;em&gt;Spezialitäten&lt;/em&gt;" data-en="Our &lt;em&gt;Specialities&lt;/em&gt;">Unsere <em>Spezialitäten</em></h2>
             <div class="section-divider"></div>
-            <p class="section-text">
+            <p class="section-text" data-de="Kleine Chargen, große Sorgfalt. Jedes Produkt entsteht in limitierter Auflage aus dem, was Garten und Saison hergeben." data-en="Small batches, great care. Every product is made in limited edition from what the garden and season offer.">
                 Kleine Chargen, große Sorgfalt. Jedes Produkt entsteht in limitierter Auflage
                 aus dem, was Garten und Saison hergeben.
             </p>
@@ -718,8 +718,8 @@
                          alt="Frische Erdbeeren für Konfitüren" loading="lazy">
                     <div class="prodotti-card-content">
                         <p class="prodotti-card-cat">Confetture</p>
-                        <h3 class="prodotti-card-title">Konfitüren &amp; Marmeladen</h3>
-                        <p class="prodotti-card-desc">Aus sonnengereiften Früchten, schonend eingekocht</p>
+                        <h3 class="prodotti-card-title" data-de="Konfitüren &amp; Marmeladen" data-en="Jams &amp; Marmalades">Konfitüren &amp; Marmeladen</h3>
+                        <p class="prodotti-card-desc" data-de="Aus sonnengereiften Früchten, schonend eingekocht" data-en="From sun-ripened fruit, gently cooked">Aus sonnengereiften Früchten, schonend eingekocht</p>
                     </div>
                 </div>
 
@@ -728,8 +728,8 @@
                          alt="Eingelegtes und Chutneys" loading="lazy">
                     <div class="prodotti-card-content">
                         <p class="prodotti-card-cat">Conserve</p>
-                        <h3 class="prodotti-card-title">Eingelegtes &amp; Chutneys</h3>
-                        <p class="prodotti-card-desc">Würzig, süß-sauer, nach alter Tradition</p>
+                        <h3 class="prodotti-card-title" data-de="Eingelegtes &amp; Chutneys" data-en="Pickles &amp; Chutneys">Eingelegtes &amp; Chutneys</h3>
+                        <p class="prodotti-card-desc" data-de="Würzig, süß-sauer, nach alter Tradition" data-en="Spicy, sweet-sour, following old tradition">Würzig, süß-sauer, nach alter Tradition</p>
                     </div>
                 </div>
 
@@ -738,8 +738,8 @@
                          alt="Kräuter und Gewürze" loading="lazy">
                     <div class="prodotti-card-content">
                         <p class="prodotti-card-cat">Erbe &amp; Spezie</p>
-                        <h3 class="prodotti-card-title">Kräuter &amp; Gewürze</h3>
-                        <p class="prodotti-card-desc">Frisch aus dem Garten, schonend getrocknet</p>
+                        <h3 class="prodotti-card-title" data-de="Kräuter &amp; Gewürze" data-en="Herbs &amp; Spices">Kräuter &amp; Gewürze</h3>
+                        <p class="prodotti-card-desc" data-de="Frisch aus dem Garten, schonend getrocknet" data-en="Fresh from the garden, gently dried">Frisch aus dem Garten, schonend getrocknet</p>
                     </div>
                 </div>
 
@@ -748,8 +748,8 @@
                          alt="Liköre und Essige" loading="lazy">
                     <div class="prodotti-card-content">
                         <p class="prodotti-card-cat">Liquori &amp; Aceti</p>
-                        <h3 class="prodotti-card-title">Liköre &amp; Essige</h3>
-                        <p class="prodotti-card-desc">Hauseigene Ansätze, lange gereift</p>
+                        <h3 class="prodotti-card-title" data-de="Liköre &amp; Essige" data-en="Liqueurs &amp; Vinegars">Liköre &amp; Essige</h3>
+                        <p class="prodotti-card-desc" data-de="Hauseigene Ansätze, lange gereift" data-en="House blends, long matured">Hauseigene Ansätze, lange gereift</p>
                     </div>
                 </div>
 
@@ -758,8 +758,8 @@
                          alt="Chili-Spezialitäten" loading="lazy">
                     <div class="prodotti-card-content">
                         <p class="prodotti-card-cat">Peperoncini</p>
-                        <h3 class="prodotti-card-title">Chili-Spezialitäten</h3>
-                        <p class="prodotti-card-desc">Eigene Zucht, von mild bis feurig — unsere besondere Leidenschaft</p>
+                        <h3 class="prodotti-card-title" data-de="Chili-Spezialitäten" data-en="Chili Specialities">Chili-Spezialitäten</h3>
+                        <p class="prodotti-card-desc" data-de="Eigene Zucht, von mild bis feurig — unsere besondere Leidenschaft" data-en="Own cultivation, from mild to fiery — our special passion">Eigene Zucht, von mild bis feurig — unsere besondere Leidenschaft</p>
                     </div>
                 </div>
 
@@ -768,8 +768,8 @@
                          alt="Feine Backwaren" loading="lazy">
                     <div class="prodotti-card-content">
                         <p class="prodotti-card-cat">Dolci &amp; Pane</p>
-                        <h3 class="prodotti-card-title">Feine Backwaren</h3>
-                        <p class="prodotti-card-desc">Innovative Kompositionen — handgebacken, kreativ, überraschend</p>
+                        <h3 class="prodotti-card-title" data-de="Feine Backwaren" data-en="Fine Baked Goods">Feine Backwaren</h3>
+                        <p class="prodotti-card-desc" data-de="Innovative Kompositionen — handgebacken, kreativ, überraschend" data-en="Innovative compositions — hand-baked, creative, surprising">Innovative Kompositionen — handgebacken, kreativ, überraschend</p>
                     </div>
                 </div>
             </div>
@@ -784,25 +784,25 @@
                 <div class="process-step">
                     <div class="process-step-num">I</div>
                     <h3 class="process-step-title">Il Seme</h3>
-                    <p class="process-step-desc">Säen und pflegen — mit Geduld beginnt alles</p>
+                    <p class="process-step-desc" data-de="Säen und pflegen — mit Geduld beginnt alles" data-en="Sowing and tending — with patience everything begins">Säen und pflegen — mit Geduld beginnt alles</p>
                 </div>
                 <div class="process-connector"></div>
                 <div class="process-step">
                     <div class="process-step-num">II</div>
                     <h3 class="process-step-title">Il Raccolto</h3>
-                    <p class="process-step-desc">Ernte zum perfekten Zeitpunkt, von Hand</p>
+                    <p class="process-step-desc" data-de="Ernte zum perfekten Zeitpunkt, von Hand" data-en="Harvest at the perfect moment, by hand">Ernte zum perfekten Zeitpunkt, von Hand</p>
                 </div>
                 <div class="process-connector"></div>
                 <div class="process-step">
                     <div class="process-step-num">III</div>
                     <h3 class="process-step-title">L'Arte</h3>
-                    <p class="process-step-desc">Verarbeitung nach eigenen Rezepturen</p>
+                    <p class="process-step-desc" data-de="Verarbeitung nach eigenen Rezepturen" data-en="Processing according to our own recipes">Verarbeitung nach eigenen Rezepturen</p>
                 </div>
                 <div class="process-connector"></div>
                 <div class="process-step">
                     <div class="process-step-num">IV</div>
                     <h3 class="process-step-title">La Tavola</h3>
-                    <p class="process-step-desc">Auf den Tisch — frisch und mit Liebe gemacht</p>
+                    <p class="process-step-desc" data-de="Auf den Tisch — frisch und mit Liebe gemacht" data-en="To the table — fresh and made with love">Auf den Tisch — frisch und mit Liebe gemacht</p>
                 </div>
             </div>
         </div>
@@ -818,9 +818,9 @@
                 </div>
                 <div class="section-text-col">
                     <p class="section-label">Il Giardino</p>
-                    <h2 class="section-title">Wo alles <em>beginnt</em></h2>
+                    <h2 class="section-title" data-de="Wo alles &lt;em&gt;beginnt&lt;/em&gt;" data-en="Where everything &lt;em&gt;begins&lt;/em&gt;">Wo alles <em>beginnt</em></h2>
                     <div class="section-divider"></div>
-                    <p class="section-text">
+                    <p class="section-text" data-de="Der Garten ist das Herzstück von DaNoSi. Hier wachsen Beeren, Kräuter, Gemüse und Obst — ohne Eile, im Rhythmus der Jahreszeiten. Was die Natur vorgibt, bestimmt unser Sortiment. Jede Saison bringt neue Überraschungen auf den Tisch." data-en="The garden is the heart of DaNoSi. Here berries, herbs, vegetables and fruit grow — unhurried, in the rhythm of the seasons. What nature dictates determines our range. Every season brings new surprises to the table.">
                         Der Garten ist das Herzstück von DaNoSi. Hier wachsen Beeren, Kräuter,
                         Gemüse und Obst — ohne Eile, im Rhythmus der Jahreszeiten. Was die Natur
                         vorgibt, bestimmt unser Sortiment. Jede Saison bringt neue Überraschungen
@@ -830,19 +830,19 @@
                     <div class="giardino-values">
                         <div class="giardino-value">
                             <h4>Naturale</h4>
-                            <p>Ohne künstliche Zusätze, ohne Konservierungsstoffe</p>
+                            <p data-de="Ohne künstliche Zusätze, ohne Konservierungsstoffe" data-en="Without artificial additives, without preservatives">Ohne künstliche Zusätze, ohne Konservierungsstoffe</p>
                         </div>
                         <div class="giardino-value">
                             <h4>Stagionale</h4>
-                            <p>Nur das, was die Saison hergibt — ehrlich und frisch</p>
+                            <p data-de="Nur das, was die Saison hergibt — ehrlich und frisch" data-en="Only what the season offers — honest and fresh">Nur das, was die Saison hergibt — ehrlich und frisch</p>
                         </div>
                         <div class="giardino-value">
                             <h4>Artigianale</h4>
-                            <p>Jedes Stück in Handarbeit, keine Massenproduktion</p>
+                            <p data-de="Jedes Stück in Handarbeit, keine Massenproduktion" data-en="Every piece handcrafted, no mass production">Jedes Stück in Handarbeit, keine Massenproduktion</p>
                         </div>
                         <div class="giardino-value">
                             <h4>Locale</h4>
-                            <p>Vom eigenen Garten direkt in die Manufaktur</p>
+                            <p data-de="Vom eigenen Garten direkt in die Manufaktur" data-en="From our own garden directly to the manufactory">Vom eigenen Garten direkt in die Manufaktur</p>
                         </div>
                     </div>
                 </div>
@@ -852,9 +852,9 @@
 
     <!-- Contact -->
     <section class="contact" id="kontakt">
-        <p class="section-label" style="color: var(--olive-light);">Kontakt</p>
+        <p class="section-label" style="color: var(--olive-light);" data-de="Kontakt" data-en="Contact">Kontakt</p>
         <div class="contact-brand">DaNoSi</div>
-        <p class="contact-sub">Hausgemachte Feinkost</p>
+        <p class="contact-sub" data-de="Hausgemachte Feinkost" data-en="Homemade Fine Foods">Hausgemachte Feinkost</p>
         <div class="contact-divider"></div>
         <p class="contact-name">Norbert Siebels</p>
         <p class="contact-name" style="color: var(--text-light); margin-top: 0.2rem;">DaNoSi Feinkost</p>
@@ -864,8 +864,13 @@
 
     <!-- Footer -->
     <footer>
-        <p>&copy; 2026 DaNoSi Feinkost — Norbert Siebels. Alle Rechte vorbehalten.</p>
+        <p data-de="© 2026 DaNoSi Feinkost — Norbert Siebels. Alle Rechte vorbehalten." data-en="© 2026 DaNoSi Feinkost — Norbert Siebels. All rights reserved.">&copy; 2026 DaNoSi Feinkost — Norbert Siebels. Alle Rechte vorbehalten.</p>
+        <div style="text-align:center;margin-top:16px;">
+          <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid rgba(250,246,238,0.3);color:rgba(250,246,238,0.3);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+          <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:rgba(250,246,238,0.3);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+        </div>
     </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/deinesei.de/index.html

@@ -225,24 +225,28 @@
   <nav>
     <div class="container">
       <div class="logo"><span class="deine">deine</span><span class="sei">Sei</span><span class="de">.de</span></div>
-      <a href="#kontakt">Projekt starten</a>
+      <a href="#kontakt" data-de="Projekt starten" data-en="Start project">Projekt starten</a>
     </div>
   </nav>
 
   <section class="hero">
     <div class="container">
       <div class="hero-badge">
-        <span class="dot"></span>Jetzt verfügbar
+        <span class="dot"></span><span data-de="Jetzt verfügbar" data-en="Now available">Jetzt verfügbar</span>
       </div>
       <h1><span class="deine">deine</span><span class="sei">Sei</span><span class="de">.de</span></h1>
       <p>
-        <strong>Deine Webseite</strong>, gebaut in Minuten. Nicht Wochen.
+        <strong data-de="Deine Webseite" data-en="Your website">Deine Webseite</strong>, <span data-de="gebaut in Minuten. Nicht Wochen.
         Domain, Design, Hosting, SSL — alles aus einer Hand. Du sagst was du brauchst,
-        wir liefern.
+        wir liefern." data-en="built in minutes. Not weeks.
+        Domain, design, hosting, SSL — all from one source. You say what you need,
+        we deliver.">gebaut in Minuten. Nicht Wochen.
+        Domain, Design, Hosting, SSL — alles aus einer Hand. Du sagst was du brauchst,
+        wir liefern.</span>
       </p>
       <div class="cta-group">
-        <a href="#kontakt" class="btn btn-primary">Projekt starten</a>
-        <a href="#wie" class="btn btn-ghost">So funktioniert's</a>
+        <a href="#kontakt" class="btn btn-primary" data-de="Projekt starten" data-en="Start project">Projekt starten</a>
+        <a href="#wie" class="btn btn-ghost" data-de="So funktioniert's" data-en="How it works">So funktioniert's</a>
       </div>
     </div>
   </section>
@@ -251,9 +255,11 @@
 
   <section id="wie">
     <div class="container">
-      <div class="section-label">Prozess</div>
-      <h2>Von der Idee zur Seite. Schnell.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Prozess" data-en="Process">Prozess</div>
+      <h2 data-de="Von der Idee zur Seite. Schnell." data-en="From idea to page. Fast.">Von der Idee zur Seite. Schnell.</h2>
+      <div class="section-desc" data-de="Kein WordPress-Dschungel, kein Baukasten-Frust.
+        Du beschreibst dein Projekt — wir bauen es." data-en="No WordPress jungle, no page-builder frustration.
+        You describe your project — we build it.">
         Kein WordPress-Dschungel, kein Baukasten-Frust.
         Du beschreibst dein Projekt — wir bauen es.
       </div>
@@ -261,18 +267,18 @@
       <div class="process-steps">
         <div class="step">
           <div class="step-num">01</div>
-          <h3>Briefing</h3>
-          <p>Erzähl uns, worum es geht. Name, Branche, was die Seite können soll. Per Mail, WhatsApp oder Anruf.</p>
+          <h3 data-de="Briefing" data-en="Briefing">Briefing</h3>
+          <p data-de="Erzähl uns, worum es geht. Name, Branche, was die Seite können soll. Per Mail, WhatsApp oder Anruf." data-en="Tell us what it's about. Name, industry, what the site should do. By email, WhatsApp or phone.">Erzähl uns, worum es geht. Name, Branche, was die Seite können soll. Per Mail, WhatsApp oder Anruf.</p>
         </div>
         <div class="step">
           <div class="step-num">02</div>
-          <h3>Design & Build</h3>
-          <p>Wir designen und bauen deine Seite. Responsive, schnell, modern. Du bekommst einen Entwurf zum Reviewen.</p>
+          <h3 data-de="Design & Build" data-en="Design & Build">Design & Build</h3>
+          <p data-de="Wir designen und bauen deine Seite. Responsive, schnell, modern. Du bekommst einen Entwurf zum Reviewen." data-en="We design and build your site. Responsive, fast, modern. You get a draft to review.">Wir designen und bauen deine Seite. Responsive, schnell, modern. Du bekommst einen Entwurf zum Reviewen.</p>
         </div>
         <div class="step">
           <div class="step-num">03</div>
-          <h3>Live</h3>
-          <p>Domain registriert, SSL-Zertifikat aktiv, Seite online. Fertig. Änderungen jederzeit möglich.</p>
+          <h3 data-de="Live" data-en="Live">Live</h3>
+          <p data-de="Domain registriert, SSL-Zertifikat aktiv, Seite online. Fertig. Änderungen jederzeit möglich." data-en="Domain registered, SSL certificate active, site online. Done. Changes possible at any time.">Domain registriert, SSL-Zertifikat aktiv, Seite online. Fertig. Änderungen jederzeit möglich.</p>
         </div>
       </div>
     </div>
@@ -282,51 +288,51 @@
 
   <section id="pakete">
     <div class="container">
-      <div class="section-label">Pakete</div>
-      <h2>Was passt zu dir?</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Pakete" data-en="Packages">Pakete</div>
+      <h2 data-de="Was passt zu dir?" data-en="What fits you?">Was passt zu dir?</h2>
+      <div class="section-desc" data-de="Jede Seite ist individuell. Aber als Orientierung:" data-en="Every site is individual. But as a guide:">
         Jede Seite ist individuell. Aber als Orientierung:
       </div>
 
       <div class="packages">
         <div class="package">
-          <div class="package-name">Visitenkarte</div>
-          <h3>One-Pager</h3>
-          <p class="price-note">Ab 99 €</p>
+          <div class="package-name" data-de="Visitenkarte" data-en="Business card">Visitenkarte</div>
+          <h3 data-de="One-Pager" data-en="One-Pager">One-Pager</h3>
+          <p class="price-note" data-de="Ab 99 €" data-en="From €99">Ab 99 €</p>
           <ul>
-            <li>Eine Seite, alles drauf</li>
-            <li>Domain inklusive (.de)</li>
-            <li>HTTPS + Hosting</li>
-            <li>Responsive Design</li>
-            <li>Kontaktformular / E-Mail</li>
+            <li data-de="Eine Seite, alles drauf" data-en="One page, everything on it">Eine Seite, alles drauf</li>
+            <li data-de="Domain inklusive (.de)" data-en="Domain included (.de)">Domain inklusive (.de)</li>
+            <li data-de="HTTPS + Hosting" data-en="HTTPS + Hosting">HTTPS + Hosting</li>
+            <li data-de="Responsive Design" data-en="Responsive Design">Responsive Design</li>
+            <li data-de="Kontaktformular / E-Mail" data-en="Contact form / email">Kontaktformular / E-Mail</li>
           </ul>
         </div>
 
         <div class="package featured">
-          <div class="package-name">Standard</div>
-          <h3>Multi-Page</h3>
-          <p class="price-note">Ab 299 €</p>
+          <div class="package-name" data-de="Standard" data-en="Standard">Standard</div>
+          <h3 data-de="Multi-Page" data-en="Multi-Page">Multi-Page</h3>
+          <p class="price-note" data-de="Ab 299 €" data-en="From €299">Ab 299 €</p>
           <ul>
-            <li>Mehrere Seiten</li>
-            <li>Domain + E-Mail</li>
-            <li>CMS für eigene Änderungen</li>
-            <li>SEO-Grundlagen</li>
-            <li>Analytics</li>
-            <li>3 Monate Support</li>
+            <li data-de="Mehrere Seiten" data-en="Multiple pages">Mehrere Seiten</li>
+            <li data-de="Domain + E-Mail" data-en="Domain + email">Domain + E-Mail</li>
+            <li data-de="CMS für eigene Änderungen" data-en="CMS for your own changes">CMS für eigene Änderungen</li>
+            <li data-de="SEO-Grundlagen" data-en="SEO basics">SEO-Grundlagen</li>
+            <li data-de="Analytics" data-en="Analytics">Analytics</li>
+            <li data-de="3 Monate Support" data-en="3 months support">3 Monate Support</li>
           </ul>
         </div>
 
         <div class="package">
-          <div class="package-name">Custom</div>
-          <h3>Maßarbeit</h3>
-          <p class="price-note">Auf Anfrage</p>
+          <div class="package-name" data-de="Custom" data-en="Custom">Custom</div>
+          <h3 data-de="Maßarbeit" data-en="Custom work">Maßarbeit</h3>
+          <p class="price-note" data-de="Auf Anfrage" data-en="On request">Auf Anfrage</p>
           <ul>
-            <li>Web-App / Portal</li>
-            <li>API-Anbindungen</li>
-            <li>Datenbanken</li>
-            <li>Automatisierungen</li>
-            <li>Laufende Betreuung</li>
-            <li>Alles, was du brauchst</li>
+            <li data-de="Web-App / Portal" data-en="Web app / portal">Web-App / Portal</li>
+            <li data-de="API-Anbindungen" data-en="API integrations">API-Anbindungen</li>
+            <li data-de="Datenbanken" data-en="Databases">Datenbanken</li>
+            <li data-de="Automatisierungen" data-en="Automations">Automatisierungen</li>
+            <li data-de="Laufende Betreuung" data-en="Ongoing support">Laufende Betreuung</li>
+            <li data-de="Alles, was du brauchst" data-en="Everything you need">Alles, was du brauchst</li>
           </ul>
         </div>
       </div>
@@ -337,21 +343,28 @@
 
   <section id="kontakt" class="cta-section">
     <div class="container">
-      <div class="section-label">Los geht's</div>
-      <h2>Deine Seite wartet.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Los geht's" data-en="Let's go">Los geht's</div>
+      <h2 data-de="Deine Seite wartet." data-en="Your site is waiting.">Deine Seite wartet.</h2>
+      <div class="section-desc" data-de="Schreib uns, was du brauchst. Wir melden uns innerhalb von 24 Stunden
+        mit einem Vorschlag." data-en="Write to us what you need. We'll get back to you within 24 hours
+        with a proposal.">
         Schreib uns, was du brauchst. Wir melden uns innerhalb von 24 Stunden
         mit einem Vorschlag.
       </div>
-      <a href="mailto:deinesei@msbls.de?subject=deineSei.de%20—%20Projekt" class="btn btn-primary">Projekt anfragen</a>
+      <a href="mailto:deinesei@msbls.de?subject=deineSei.de%20—%20Projekt" class="btn btn-primary" data-de="Projekt anfragen" data-en="Request project">Projekt anfragen</a>
     </div>
   </section>
 
   <footer>
     <div class="container">
-      <p><span style="color:var(--text-dim)">deine</span><span style="color:var(--accent)">Sei</span>.de — ein Projekt von msbls.de</p>
+      <p><span style="color:var(--text-dim)">deine</span><span style="color:var(--accent)">Sei</span><span data-de=".de — ein Projekt von msbls.de" data-en=".de — a project by msbls.de">.de — ein Projekt von msbls.de</span></p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/derkaiseristnackt.de/index.html

@@ -382,47 +382,47 @@
     <section class="hero">
         <h1 class="hero-title">Der K<span class="ai">ai</span>ser<br>ist nackt.</h1>
         <div class="hero-line"></div>
-        <p class="hero-subtitle">Eine ehrliche Bestandsaufnahme der KI-Revolution</p>
-        <div class="scroll-hint">Weiterlesen</div>
+        <p class="hero-subtitle" data-de="Eine ehrliche Bestandsaufnahme der KI-Revolution" data-en="An honest stocktaking of the AI revolution">Eine ehrliche Bestandsaufnahme der KI-Revolution</p>
+        <div class="scroll-hint" data-de="Weiterlesen" data-en="Read on">Weiterlesen</div>
     </section>
 
     <!-- Manifesto -->
     <section class="manifesto">
-        <div class="section-label">Manifest</div>
+        <div class="section-label" data-de="Manifest" data-en="Manifesto">Manifest</div>
 
         <div class="manifesto-item">
             <span class="number">01</span>
-            <p>Dein Chatbot l&uuml;gt. Er wei&szlig; es nicht, du wei&szlig;t es nicht, und niemand will dar&uuml;ber reden.</p>
+            <p data-de="Dein Chatbot lügt. Er weiß es nicht, du weißt es nicht, und niemand will darüber reden." data-en="Your chatbot lies. It doesn't know it, you don't know it, and nobody wants to talk about it.">Dein Chatbot l&uuml;gt. Er wei&szlig; es nicht, du wei&szlig;t es nicht, und niemand will dar&uuml;ber reden.</p>
         </div>
 
         <div class="manifesto-item">
             <span class="number">02</span>
-            <p>97% Genauigkeit klingt gut &mdash; bis du zu den 3% geh&ouml;rst.</p>
+            <p data-de="97% Genauigkeit klingt gut — bis du zu den 3% gehörst." data-en="97% accuracy sounds good — until you're in the 3%.">97% Genauigkeit klingt gut &mdash; bis du zu den 3% geh&ouml;rst.</p>
         </div>
 
         <div class="manifesto-item">
             <span class="number">03</span>
-            <p>&bdquo;KI-gest&uuml;tzt&ldquo; ist das neue &bdquo;Bio&ldquo; &mdash; steht &uuml;berall drauf, steckt selten drin.</p>
+            <p data-de="„KI-gestützt" ist das neue „Bio" — steht überall drauf, steckt selten drin." data-en="&quot;AI-powered&quot; is the new &quot;organic&quot; — it's on everything, rarely inside.">&bdquo;KI-gest&uuml;tzt&ldquo; ist das neue &bdquo;Bio&ldquo; &mdash; steht &uuml;berall drauf, steckt selten drin.</p>
         </div>
 
         <div class="manifesto-item">
             <span class="number">04</span>
-            <p>Ein Sprachmodell, das halluziniert, ist kein Bug. Es ist das Produkt.</p>
+            <p data-de="Ein Sprachmodell, das halluziniert, ist kein Bug. Es ist das Produkt." data-en="A language model that hallucinates is not a bug. It is the product.">Ein Sprachmodell, das halluziniert, ist kein Bug. Es ist das Produkt.</p>
         </div>
 
         <div class="manifesto-item">
             <span class="number">05</span>
-            <p>Wir haben Maschinen gebaut, die &uuml;berzeugend klingen. Das ist nicht dasselbe wie Maschinen, die Recht haben.</p>
+            <p data-de="Wir haben Maschinen gebaut, die überzeugend klingen. Das ist nicht dasselbe wie Maschinen, die Recht haben." data-en="We built machines that sound convincing. That is not the same as machines that are right.">Wir haben Maschinen gebaut, die &uuml;berzeugend klingen. Das ist nicht dasselbe wie Maschinen, die Recht haben.</p>
         </div>
 
         <div class="manifesto-item">
             <span class="number">06</span>
-            <p>Jedes Startup verspricht AGI bis 2027. Keines kann zuverl&auml;ssig eine Rechnung zusammenfassen.</p>
+            <p data-de="Jedes Startup verspricht AGI bis 2027. Keines kann zuverlässig eine Rechnung zusammenfassen." data-en="Every startup promises AGI by 2027. None can reliably summarise an invoice.">Jedes Startup verspricht AGI bis 2027. Keines kann zuverl&auml;ssig eine Rechnung zusammenfassen.</p>
         </div>
 
         <div class="manifesto-item">
             <span class="number">07</span>
-            <p>Die gr&ouml;&szlig;te Leistung der KI-Branche ist nicht Intelligenz. Es ist Marketing.</p>
+            <p data-de="Die größte Leistung der KI-Branche ist nicht Intelligenz. Es ist Marketing." data-en="The greatest achievement of the AI industry is not intelligence. It is marketing.">Die gr&ouml;&szlig;te Leistung der KI-Branche ist nicht Intelligenz. Es ist Marketing.</p>
         </div>
     </section>
 
@@ -430,27 +430,27 @@
 
     <!-- Comparison -->
     <section class="comparison">
-        <div class="section-label">Bestandsaufnahme</div>
+        <div class="section-label" data-de="Bestandsaufnahme" data-en="Taking stock">Bestandsaufnahme</div>
 
         <div class="comparison-grid">
             <div class="comparison-col comparison-col--stimmt">
-                <h3>Was stimmt</h3>
+                <h3 data-de="Was stimmt" data-en="What is true">Was stimmt</h3>
                 <ul>
-                    <li>KI erkennt Muster in medizinischen Bildern, die Menschen &uuml;bersehen &mdash; und rettet damit Leben.</li>
-                    <li>Sprachmodelle sind brillante Werkzeuge f&uuml;r Textarbeit: Zusammenfassungen, &Uuml;bersetzungen, Entw&uuml;rfe.</li>
-                    <li>Automatisierung repetitiver Aufgaben spart reale Arbeitsstunden, jeden Tag.</li>
-                    <li>KI-gest&uuml;tzte Wissenschaft beschleunigt Materialforschung und Medikamentenentwicklung messbar.</li>
-                    <li>Barrierefreiheit wird durch KI-Transkription, Bildbeschreibung und Sprachsynthese konkret besser.</li>
+                    <li data-de="KI erkennt Muster in medizinischen Bildern, die Menschen übersehen — und rettet damit Leben." data-en="AI detects patterns in medical images that humans miss — and saves lives.">KI erkennt Muster in medizinischen Bildern, die Menschen &uuml;bersehen &mdash; und rettet damit Leben.</li>
+                    <li data-de="Sprachmodelle sind brillante Werkzeuge für Textarbeit: Zusammenfassungen, Übersetzungen, Entwürfe." data-en="Language models are brilliant tools for text work: summaries, translations, drafts.">Sprachmodelle sind brillante Werkzeuge f&uuml;r Textarbeit: Zusammenfassungen, &Uuml;bersetzungen, Entw&uuml;rfe.</li>
+                    <li data-de="Automatisierung repetitiver Aufgaben spart reale Arbeitsstunden, jeden Tag." data-en="Automation of repetitive tasks saves real working hours, every day.">Automatisierung repetitiver Aufgaben spart reale Arbeitsstunden, jeden Tag.</li>
+                    <li data-de="KI-gestützte Wissenschaft beschleunigt Materialforschung und Medikamentenentwicklung messbar." data-en="AI-supported science measurably accelerates materials research and drug development.">KI-gest&uuml;tzte Wissenschaft beschleunigt Materialforschung und Medikamentenentwicklung messbar.</li>
+                    <li data-de="Barrierefreiheit wird durch KI-Transkription, Bildbeschreibung und Sprachsynthese konkret besser." data-en="Accessibility is concretely improved through AI transcription, image description and speech synthesis.">Barrierefreiheit wird durch KI-Transkription, Bildbeschreibung und Sprachsynthese konkret besser.</li>
                 </ul>
             </div>
             <div class="comparison-col comparison-col--nicht">
-                <h3>Was nicht stimmt</h3>
+                <h3 data-de="Was nicht stimmt" data-en="What is not true">Was nicht stimmt</h3>
                 <ul>
-                    <li>&bdquo;KI ersetzt Programmierer bis 2025.&ldquo; &mdash; Stand heute: Sie erzeugt Code, den Programmierer debuggen m&uuml;ssen.</li>
-                    <li>&bdquo;AGI steht kurz bevor.&ldquo; &mdash; Wir haben bessere Autokorrektur gebaut, keine Intelligenz.</li>
-                    <li>&bdquo;KI versteht dich.&ldquo; &mdash; Sie berechnet wahrscheinliche Antworten. Verstehen sieht anders aus.</li>
-                    <li>&bdquo;Unser KI-Assistent steigert die Produktivit&auml;t um 40%.&ldquo; &mdash; Gemessen von der Firma, die ihn verkauft.</li>
-                    <li>&bdquo;KI ist neutral und objektiv.&ldquo; &mdash; Sie reproduziert die Verzerrungen ihrer Trainingsdaten, systematisch und skaliert.</li>
+                    <li data-de="„KI ersetzt Programmierer bis 2025." — Stand heute: Sie erzeugt Code, den Programmierer debuggen müssen." data-en="&quot;AI replaces programmers by 2025.&quot; — As of today: it generates code that programmers have to debug.">&bdquo;KI ersetzt Programmierer bis 2025.&ldquo; &mdash; Stand heute: Sie erzeugt Code, den Programmierer debuggen m&uuml;ssen.</li>
+                    <li data-de="„AGI steht kurz bevor." — Wir haben bessere Autokorrektur gebaut, keine Intelligenz." data-en="&quot;AGI is imminent.&quot; — We built better autocorrect, not intelligence.">&bdquo;AGI steht kurz bevor.&ldquo; &mdash; Wir haben bessere Autokorrektur gebaut, keine Intelligenz.</li>
+                    <li data-de="„KI versteht dich." — Sie berechnet wahrscheinliche Antworten. Verstehen sieht anders aus." data-en="&quot;AI understands you.&quot; — It calculates probable responses. Understanding looks different.">&bdquo;KI versteht dich.&ldquo; &mdash; Sie berechnet wahrscheinliche Antworten. Verstehen sieht anders aus.</li>
+                    <li data-de="„Unser KI-Assistent steigert die Produktivität um 40%." — Gemessen von der Firma, die ihn verkauft." data-en="&quot;Our AI assistant increases productivity by 40%.&quot; — Measured by the company selling it.">&bdquo;Unser KI-Assistent steigert die Produktivit&auml;t um 40%.&ldquo; &mdash; Gemessen von der Firma, die ihn verkauft.</li>
+                    <li data-de="„KI ist neutral und objektiv." — Sie reproduziert die Verzerrungen ihrer Trainingsdaten, systematisch und skaliert." data-en="&quot;AI is neutral and objective.&quot; — It reproduces the biases of its training data, systematically and at scale.">&bdquo;KI ist neutral und objektiv.&ldquo; &mdash; Sie reproduziert die Verzerrungen ihrer Trainingsdaten, systematisch und skaliert.</li>
                 </ul>
             </div>
         </div>
@@ -458,17 +458,22 @@
 
     <!-- CTA -->
     <section class="cta">
-        <blockquote class="cta-quote">
+        <blockquote class="cta-quote" data-de="Kritik ist kein Pessimismus.&lt;br&gt;&lt;span class=&quot;highlight&quot;&gt;Es ist Qualitätskontrolle.&lt;/span&gt;" data-en="Criticism is not pessimism.&lt;br&gt;&lt;span class=&quot;highlight&quot;&gt;It is quality control.&lt;/span&gt;">
             Kritik ist kein Pessimismus.<br><span class="highlight">Es ist Qualit&auml;tskontrolle.</span>
         </blockquote>
-        <p class="cta-sub">Wir lieben, was KI wirklich kann. Wir sagen nur auch, wenn sie es nicht kann.</p>
+        <p class="cta-sub" data-de="Wir lieben, was KI wirklich kann. Wir sagen nur auch, wenn sie es nicht kann." data-en="We love what AI can really do. We just also say when it can't.">Wir lieben, was KI wirklich kann. Wir sagen nur auch, wenn sie es nicht kann.</p>
     </section>
 
     <!-- Footer -->
     <footer class="footer">
         <div class="footer-mark"></div>
-        <p>Eine Initiative f&uuml;r ehrliche KI-Kommunikation</p>
+        <p data-de="Eine Initiative für ehrliche KI-Kommunikation" data-en="An initiative for honest AI communication">Eine Initiative f&uuml;r ehrliche KI-Kommunikation</p>
+        <div style="text-align:center;margin-top:16px;">
+          <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--grey);color:var(--grey);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+          <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--grey);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+        </div>
     </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/elefantenhor.de/index.html

@@ -663,7 +663,7 @@
             <h1 class="title-main wobble-target">
                 ElefantenHor<span class="dot">.</span><span class="de">de</span>
             </h1>
-            <p class="tagline shake-target">Wenn der Boden bebt.</p>
+            <p class="tagline shake-target" data-de="Wenn der Boden bebt." data-en="When the ground shakes.">Wenn der Boden bebt.</p>
 
             <div class="dust-container">
                 <div class="dust-particle"></div>
@@ -682,7 +682,7 @@
                 <div class="crack-line"></div>
             </div>
 
-            <div class="scroll-hint shake-target">
+            <div class="scroll-hint shake-target" data-de="BODEN BEOBACHTEN" data-en="WATCH THE GROUND">
                 BODEN BEOBACHTEN
                 <span>&#x25BE;</span>
             </div>
@@ -692,39 +692,39 @@
         <div class="warning-bar">
             <div class="warning-bar-inner shake-target danger-pulse">
                 <span class="blink-dot"></span>
-                Stampede-Warnung aktiv
+                <span data-de="Stampede-Warnung aktiv" data-en="Stampede warning active">Stampede-Warnung aktiv</span>
                 <span class="blink-dot"></span>
             </div>
         </div>
 
         <!-- STAMPEDE WARNINGS -->
         <section class="stampede-section">
-            <h2 class="section-title shake-target">Aktuelle Stampede-Warnungen</h2>
+            <h2 class="section-title shake-target" data-de="Aktuelle Stampede-Warnungen" data-en="Current Stampede Warnings">Aktuelle Stampede-Warnungen</h2>
             <div class="warnings-grid">
                 <div class="warning-card level-critical wobble-target">
-                    <span class="warning-level">Kritisch</span>
+                    <span class="warning-level" data-de="Kritisch" data-en="Critical">Kritisch</span>
                     <span class="warning-emoji">💥</span>
-                    <h3>Sektor 7 — Wohnzimmer</h3>
-                    <p>Herde von 43 Elefanten im Anmarsch. Geschätzte Ankunft: jetzt. Vasen sichern. Sofa aufgeben.</p>
+                    <h3 data-de="Sektor 7 — Wohnzimmer" data-en="Sector 7 — Living Room">Sektor 7 — Wohnzimmer</h3>
+                    <p data-de="Herde von 43 Elefanten im Anmarsch. Geschätzte Ankunft: jetzt. Vasen sichern. Sofa aufgeben." data-en="Herd of 43 elephants approaching. Estimated arrival: now. Secure vases. Abandon sofa.">Herde von 43 Elefanten im Anmarsch. Geschätzte Ankunft: jetzt. Vasen sichern. Sofa aufgeben.</p>
                 </div>
                 <div class="warning-card level-high shake-target">
-                    <span class="warning-level">Hoch</span>
+                    <span class="warning-level" data-de="Hoch" data-en="High">Hoch</span>
                     <span class="warning-emoji">🌍</span>
-                    <h3>Seismische Aktivität</h3>
-                    <p>Richter-Skala zeigt 4.2 an. Ursache: kein Erdbeben, nur Dienstags-Stampede. Alles normal.</p>
+                    <h3 data-de="Seismische Aktivität" data-en="Seismic Activity">Seismische Aktivität</h3>
+                    <p data-de="Richter-Skala zeigt 4.2 an. Ursache: kein Erdbeben, nur Dienstags-Stampede. Alles normal." data-en="Richter scale reads 4.2. Cause: not an earthquake, just Tuesday stampede. All normal.">Richter-Skala zeigt 4.2 an. Ursache: kein Erdbeben, nur Dienstags-Stampede. Alles normal.</p>
                 </div>
                 <div class="warning-card level-medium wobble-target">
-                    <span class="warning-level">Mittel</span>
+                    <span class="warning-level" data-de="Mittel" data-en="Medium">Mittel</span>
                     <span class="warning-emoji">🥜</span>
-                    <h3>Erdnuss-Vorräte kritisch</h3>
-                    <p>Lagerbestand unter 2 Tonnen gefallen. Notfall-Lieferung aus Tansania unterwegs. ETA: 3 Stunden.</p>
+                    <h3 data-de="Erdnuss-Vorräte kritisch" data-en="Peanut Supplies Critical">Erdnuss-Vorräte kritisch</h3>
+                    <p data-de="Lagerbestand unter 2 Tonnen gefallen. Notfall-Lieferung aus Tansania unterwegs. ETA: 3 Stunden." data-en="Stock dropped below 2 tonnes. Emergency delivery from Tanzania en route. ETA: 3 hours.">Lagerbestand unter 2 Tonnen gefallen. Notfall-Lieferung aus Tansania unterwegs. ETA: 3 Stunden.</p>
                 </div>
             </div>
         </section>
 
         <!-- SEISMOGRAPH -->
         <section class="seismo-section">
-            <h2 class="section-title shake-target">Live-Seismograph</h2>
+            <h2 class="section-title shake-target" data-de="Live-Seismograph" data-en="Live Seismograph">Live-Seismograph</h2>
             <div class="seismograph">
                 <svg id="seismo-svg" width="100%" height="100" viewBox="0 0 700 100" preserveAspectRatio="none">
                     <path id="seismo-path" class="seismo-line" d="M0,50 L700,50"/>
@@ -734,49 +734,49 @@
 
         <!-- HERD METER -->
         <section class="meter-section">
-            <h2 class="section-title shake-target">Herdenmesser</h2>
+            <h2 class="section-title shake-target" data-de="Herdenmesser" data-en="Herd Meter">Herdenmesser</h2>
             <div class="meter-container">
                 <div class="meter-label">
-                    <span>Ruhig</span>
+                    <span data-de="Ruhig" data-en="Calm">Ruhig</span>
                     <span>Stampede</span>
                 </div>
                 <div class="meter-bar shake-target">
                     <div class="meter-fill" id="meter-fill"></div>
                 </div>
                 <div class="meter-value" id="meter-value">
-                    23 <span>Elefanten</span>
+                    23 <span data-de="Elefanten" data-en="Elephants">Elefanten</span>
                 </div>
-                <p class="meter-subtitle">Aktuelle Herdenstärke im Einzugsgebiet</p>
+                <p class="meter-subtitle" data-de="Aktuelle Herdenstärke im Einzugsgebiet" data-en="Current herd strength in the catchment area">Aktuelle Herdenstärke im Einzugsgebiet</p>
             </div>
         </section>
 
         <!-- FACTS -->
         <section class="facts-section">
-            <h2 class="section-title wobble-target">Unnützes Elefantenwissen</h2>
+            <h2 class="section-title wobble-target" data-de="Unnützes Elefantenwissen" data-en="Useless Elephant Facts">Unnützes Elefantenwissen</h2>
             <div class="facts-grid">
                 <div class="fact-card shake-target">
                     <div class="fact-icon">🦶</div>
                     <div class="fact-number">6.000</div>
                     <div class="fact-unit">kg</div>
-                    <p class="fact-desc">wiegt ein ausgewachsener Bulle. Dein Boden so: 💀</p>
+                    <p class="fact-desc" data-de="wiegt ein ausgewachsener Bulle. Dein Boden so: 💀" data-en="is what a full-grown bull weighs. Your floor: 💀">wiegt ein ausgewachsener Bulle. Dein Boden so: 💀</p>
                 </div>
                 <div class="fact-card wobble-target">
                     <div class="fact-icon">👂</div>
                     <div class="fact-number">32</div>
                     <div class="fact-unit">km</div>
-                    <p class="fact-desc">weit hören Elefanten Infraschall. Du hörst sie erst bei 32 Metern.</p>
+                    <p class="fact-desc" data-de="weit hören Elefanten Infraschall. Du hörst sie erst bei 32 Metern." data-en="is how far elephants hear infrasound. You hear them at 32 metres.">weit hören Elefanten Infraschall. Du hörst sie erst bei 32 Metern.</p>
                 </div>
                 <div class="fact-card shake-target">
                     <div class="fact-icon">💨</div>
                     <div class="fact-number">40</div>
                     <div class="fact-unit">km/h</div>
-                    <p class="fact-desc">Spitze bei Stampede. Du schaffst 15. Viel Glück.</p>
+                    <p class="fact-desc" data-de="Spitze bei Stampede. Du schaffst 15. Viel Glück." data-en="top speed in stampede. You manage 15. Good luck.">Spitze bei Stampede. Du schaffst 15. Viel Glück.</p>
                 </div>
                 <div class="fact-card wobble-target">
                     <div class="fact-icon">🧠</div>
                     <div class="fact-number">5</div>
                     <div class="fact-unit">kg</div>
-                    <p class="fact-desc">Gehirn. Größtes aller Landtiere. Vergisst nie. Nie.</p>
+                    <p class="fact-desc" data-de="Gehirn. Größtes aller Landtiere. Vergisst nie. Nie." data-en="Brain. Largest of all land animals. Never forgets. Never.">Gehirn. Größtes aller Landtiere. Vergisst nie. Nie.</p>
                 </div>
             </div>
         </section>
@@ -791,21 +791,25 @@
             <div class="footprint">🐾</div>
             <div class="footprint">🐾</div>
             <div class="footprint">🐾</div>
-            <p class="footprints-text">Die Spuren führen immer hierher.</p>
+            <p class="footprints-text" data-de="Die Spuren führen immer hierher." data-en="The tracks always lead here.">Die Spuren führen immer hierher.</p>
         </section>
 
         <!-- RUMBLE COUNTER -->
         <section class="counter-section">
-            <div class="section-title">Erschütterungen seit Seitenaufruf</div>
+            <div class="section-title" data-de="Erschütterungen seit Seitenaufruf" data-en="Tremors since page load">Erschütterungen seit Seitenaufruf</div>
             <div class="rumble-counter shake-heavy-target" id="rumble-count">0</div>
-            <p class="rumble-counter-label">und es werden mehr.</p>
+            <p class="rumble-counter-label" data-de="und es werden mehr." data-en="and there will be more.">und es werden mehr.</p>
         </section>
 
         <!-- FOOTER -->
         <footer>
-            <p class="footer-text shake-target">Hier war mal eine Webseite. Dann kam die Horde.</p>
+            <p class="footer-text shake-target" data-de="Hier war mal eine Webseite. Dann kam die Horde." data-en="There used to be a website here. Then came the horde.">Hier war mal eine Webseite. Dann kam die Horde.</p>
             <div class="footer-elephants wobble-target">🐘 🐘 🐘 🐘 🐘</div>
-            <p class="footer-copy">&copy; 2026 ElefantenHor.de — Alle Rechte zertrampelt.</p>
+            <p class="footer-copy" data-de="© 2026 ElefantenHor.de — Alle Rechte zertrampelt." data-en="© 2026 ElefantenHor.de — All rights trampled.">&copy; 2026 ElefantenHor.de — Alle Rechte zertrampelt.</p>
+            <div style="text-align:center;margin-top:16px;">
+              <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--dust-light,#E8D5A3);color:var(--dust-light,#E8D5A3);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;opacity:0.7;">EN</button>
+              <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--dust-light,#E8D5A3);font-size:0.6rem;opacity:0.4;">Maschinell übersetzt</small>
+            </div>
         </footer>
     </div>
 
@@ -895,5 +899,6 @@
             });
         }, 800);
     </script>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/fragina.de/index.html

@@ -349,7 +349,7 @@
   <nav>
     <div class="container">
       <div class="logo">fr<span class="ai">AGI</span>na</div>
-      <a href="#kontakt">Kontakt</a>
+      <a href="#kontakt" data-de="Kontakt" data-en="Contact">Kontakt</a>
     </div>
   </nav>
 
@@ -357,25 +357,25 @@
     <div class="container">
       <div class="monogram">IK</div>
       <div class="hero-badge">
-        <span class="dot"></span>Knowledge Lawyer
+        <span class="dot"></span><span data-de="Knowledge Lawyer" data-en="Knowledge Lawyer">Knowledge Lawyer</span>
       </div>
       <h1>Ina Kamps</h1>
-      <p class="hero-subtitle">
+      <p class="hero-subtitle" data-de="&lt;strong&gt;Knowledge Lawyer&lt;/strong&gt; fuer IP und Markenrecht. Spezialisiert auf &lt;strong&gt;Green Claims&lt;/strong&gt;, nachhaltige Werbung und die Frage, wo Greenwashing aufhoert und echte Kommunikation anfaengt." data-en="&lt;strong&gt;Knowledge Lawyer&lt;/strong&gt; for IP and trademark law. Specialised in &lt;strong&gt;Green Claims&lt;/strong&gt;, sustainable advertising and the question of where greenwashing ends and genuine communication begins.">
         <strong>Knowledge Lawyer</strong> fuer IP und Markenrecht.
         Spezialisiert auf <strong>Green Claims</strong>, nachhaltige Werbung
         und die Frage, wo Greenwashing aufhoert und echte Kommunikation anfaengt.
       </p>
       <div class="hero-tags">
-        <span class="tag">Markenrecht</span>
-        <span class="tag green">Green Claims</span>
-        <span class="tag green">Nachhaltige Werbung</span>
+        <span class="tag" data-de="Markenrecht" data-en="Trademark law">Markenrecht</span>
+        <span class="tag green" data-de="Green Claims" data-en="Green Claims">Green Claims</span>
+        <span class="tag green" data-de="Nachhaltige Werbung" data-en="Sustainable advertising">Nachhaltige Werbung</span>
         <span class="tag">UWG</span>
-        <span class="tag">Legal Design</span>
-        <span class="tag">Metaverse & NFTs</span>
+        <span class="tag" data-de="Legal Design" data-en="Legal Design">Legal Design</span>
+        <span class="tag" data-de="Metaverse &amp; NFTs" data-en="Metaverse &amp; NFTs">Metaverse &amp; NFTs</span>
       </div>
       <div class="cta-group">
-        <a href="#kontakt" class="btn btn-primary">Kontakt aufnehmen</a>
-        <a href="#expertise" class="btn btn-ghost">Expertise</a>
+        <a href="#kontakt" class="btn btn-primary" data-de="Kontakt aufnehmen" data-en="Get in touch">Kontakt aufnehmen</a>
+        <a href="#expertise" class="btn btn-ghost" data-de="Expertise" data-en="Expertise">Expertise</a>
       </div>
     </div>
   </section>
@@ -384,9 +384,9 @@
 
   <section id="expertise">
     <div class="container">
-      <div class="section-label">Schwerpunkte</div>
-      <h2>IP trifft Nachhaltigkeit.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Schwerpunkte" data-en="Focus areas">Schwerpunkte</div>
+      <h2 data-de="IP trifft Nachhaltigkeit." data-en="IP meets sustainability.">IP trifft Nachhaltigkeit.</h2>
+      <div class="section-desc" data-de="Wo Markenrecht, Werbung und Sustainability zusammentreffen, entsteht ein neues Rechtsgebiet. Ina Kamps gestaltet es mit." data-en="Where trademark law, advertising and sustainability converge, a new field of law is emerging. Ina Kamps is shaping it.">
         Wo Markenrecht, Werbung und Sustainability zusammentreffen,
         entsteht ein neues Rechtsgebiet. Ina Kamps gestaltet es mit.
       </div>
@@ -394,8 +394,8 @@
       <div class="expertise-grid">
         <div class="expertise-card highlight">
           <div class="expertise-icon">GC</div>
-          <h3>Green Claims</h3>
-          <p>
+          <h3 data-de="Green Claims" data-en="Green Claims">Green Claims</h3>
+          <p data-de="Wann ist „klimaneutral" erlaubt? Was fordert die Empco-Richtlinie? Rechtssichere Nachhaltigkeitskommunikation ohne Greenwashing-Risiko." data-en="When is 'climate-neutral' permitted? What does the Empco Directive require? Legally secure sustainability communication without greenwashing risk.">
             Wann ist „klimaneutral" erlaubt? Was fordert die Empco-Richtlinie?
             Rechtssichere Nachhaltigkeitskommunikation ohne Greenwashing-Risiko.
           </p>
@@ -403,8 +403,8 @@
 
         <div class="expertise-card highlight">
           <div class="expertise-icon">GW</div>
-          <h3>Green Advertising</h3>
-          <p>
+          <h3 data-de="Green Advertising" data-en="Green Advertising">Green Advertising</h3>
+          <p data-de="BGH-Rechtsprechung zu Umweltclaims, EU Green Claims Directive, Oeko-Labels und Offsetting — die neue Regulierungslandschaft." data-en="BGH case law on environmental claims, EU Green Claims Directive, eco-labels and offsetting — the new regulatory landscape.">
             BGH-Rechtsprechung zu Umweltclaims, EU Green Claims Directive,
             Oeko-Labels und Offsetting — die neue Regulierungslandschaft.
           </p>
@@ -412,8 +412,8 @@
 
         <div class="expertise-card">
           <div class="expertise-icon">MR</div>
-          <h3>Markenrecht</h3>
-          <p>
+          <h3 data-de="Markenrecht" data-en="Trademark law">Markenrecht</h3>
+          <p data-de="Markenstrategie, Anmeldung, Verteidigung. Schutz von Brands im digitalen Raum — von E-Commerce bis Metaverse." data-en="Brand strategy, registration, defence. Protection of brands in the digital space — from e-commerce to the metaverse.">
             Markenstrategie, Anmeldung, Verteidigung. Schutz von Brands
             im digitalen Raum — von E-Commerce bis Metaverse.
           </p>
@@ -421,8 +421,8 @@
 
         <div class="expertise-card">
           <div class="expertise-icon">UW</div>
-          <h3>Wettbewerbsrecht</h3>
-          <p>
+          <h3 data-de="Wettbewerbsrecht" data-en="Competition law">Wettbewerbsrecht</h3>
+          <p data-de="UWG, irreführende Werbung, vergleichende Werbung. Durchsetzung und Abwehr wettbewerbsrechtlicher Ansprueche." data-en="UWG, misleading advertising, comparative advertising. Enforcement and defence of competition law claims.">
             UWG, irreführende Werbung, vergleichende Werbung.
             Durchsetzung und Abwehr wettbewerbsrechtlicher Ansprueche.
           </p>
@@ -430,8 +430,8 @@
 
         <div class="expertise-card">
           <div class="expertise-icon">MV</div>
-          <h3>Metaverse & NFTs</h3>
-          <p>
+          <h3 data-de="Metaverse &amp; NFTs" data-en="Metaverse &amp; NFTs">Metaverse &amp; NFTs</h3>
+          <p data-de="Markenrecht im virtuellen Raum. NFT-Klassifizierung, Web 4.0, digitale Markenstrategie der naechsten Generation." data-en="Trademark law in virtual space. NFT classification, Web 4.0, next-generation digital brand strategy.">
             Markenrecht im virtuellen Raum. NFT-Klassifizierung,
             Web 4.0, digitale Markenstrategie der naechsten Generation.
           </p>
@@ -439,8 +439,8 @@
 
         <div class="expertise-card">
           <div class="expertise-icon">LD</div>
-          <h3>Legal Design Thinking</h3>
-          <p>
+          <h3 data-de="Legal Design Thinking" data-en="Legal Design Thinking">Legal Design Thinking</h3>
+          <p data-de="Wissen nutzerzentriert aufbereiten. Innovative Formate fuer Mandanteninformation und Wissenstransfer." data-en="Preparing knowledge in a user-centred way. Innovative formats for client information and knowledge transfer.">
             Wissen nutzerzentriert aufbereiten. Innovative Formate
             fuer Mandanteninformation und Wissenstransfer.
           </p>
@@ -453,53 +453,53 @@
 
   <section id="profil">
     <div class="container">
-      <div class="section-label">Profil</div>
-      <h2>Wissen. Weitergeben. Wirken.</h2>
+      <div class="section-label" data-de="Profil" data-en="Profile">Profil</div>
+      <h2 data-de="Wissen. Weitergeben. Wirken." data-en="Knowledge. Share. Impact.">Wissen. Weitergeben. Wirken.</h2>
 
       <div class="profile-section">
         <div class="profile-text">
-          <p>
+          <p data-de="Ina Kamps verbindet ueber 20 Jahre Erfahrung im gewerblichen Rechtsschutz mit einem klaren Blick fuer die Themen, die morgen zaehlen. Als Knowledge Lawyer arbeitet sie an der Schnittstelle von Recht und Wissenstransfer — immer mit dem Ziel, komplexe Zusammenhaenge so aufzubereiten, dass sie in der Praxis wirken." data-en="Ina Kamps combines over 20 years of experience in intellectual property law with a clear eye for the issues that matter tomorrow. As a Knowledge Lawyer she works at the interface of law and knowledge transfer — always with the goal of preparing complex connections so that they work in practice.">
             Ina Kamps verbindet ueber 20 Jahre Erfahrung im gewerblichen
             Rechtsschutz mit einem klaren Blick fuer die Themen, die morgen
             zaehlen. Als Knowledge Lawyer arbeitet sie an der Schnittstelle
             von Recht und Wissenstransfer — immer mit dem Ziel, komplexe
             Zusammenhaenge so aufzubereiten, dass sie in der Praxis wirken.
           </p>
-          <p>
+          <p data-de="Ihr Schwerpunkt: die rechtlichen Grenzen nachhaltiger Werbung. Von der Empco-Richtlinie ueber das BGH-Urteil zu „klimaneutral" bis zur EU Green Claims Directive — Ina Kamps kennt die Regulierungslandschaft und uebersetzt sie in klare Handlungsempfehlungen." data-en="Her focus: the legal boundaries of sustainable advertising. From the Empco Directive to the BGH ruling on 'climate-neutral' to the EU Green Claims Directive — Ina Kamps knows the regulatory landscape and translates it into clear recommendations for action.">
             Ihr Schwerpunkt: die rechtlichen Grenzen nachhaltiger Werbung.
             Von der Empco-Richtlinie ueber das BGH-Urteil zu „klimaneutral"
             bis zur EU Green Claims Directive — Ina Kamps kennt die
             Regulierungslandschaft und uebersetzt sie in klare Handlungsempfehlungen.
           </p>
-          <p>
+          <p data-de="Zusaetzlich lehrt sie an der Universitaet Osnabrueck und engagiert sich in der GRUR und im Deutschen Juristinnenbund." data-en="She also teaches at the University of Osnabrück and is active in the GRUR and the German Women Lawyers Association.">
             Zusaetzlich lehrt sie an der Universitaet Osnabrueck und engagiert
             sich in der GRUR und im Deutschen Juristinnenbund.
           </p>
         </div>
         <div class="profile-details">
           <div class="detail-card">
-            <div class="detail-label">Rolle</div>
-            <div class="detail-value">Knowledge Lawyer — IP & Marke</div>
+            <div class="detail-label" data-de="Rolle" data-en="Role">Rolle</div>
+            <div class="detail-value" data-de="Knowledge Lawyer — IP &amp; Marke" data-en="Knowledge Lawyer — IP &amp; Trademark">Knowledge Lawyer — IP &amp; Marke</div>
           </div>
           <div class="detail-card">
-            <div class="detail-label">Standort</div>
-            <div class="detail-value">Duesseldorf</div>
+            <div class="detail-label" data-de="Standort" data-en="Location">Standort</div>
+            <div class="detail-value" data-de="Duesseldorf" data-en="Düsseldorf">Duesseldorf</div>
           </div>
           <div class="detail-card">
-            <div class="detail-label">Ausbildung</div>
-            <div class="detail-value">Rechtsanwaeltin, M.A. Kommunikationswiss. & Politikwiss.</div>
+            <div class="detail-label" data-de="Ausbildung" data-en="Education">Ausbildung</div>
+            <div class="detail-value" data-de="Rechtsanwaeltin, M.A. Kommunikationswiss. &amp; Politikwiss." data-en="Attorney-at-law, M.A. Communication Studies &amp; Political Science">Rechtsanwaeltin, M.A. Kommunikationswiss. &amp; Politikwiss.</div>
           </div>
           <div class="detail-card">
-            <div class="detail-label">Lehre</div>
-            <div class="detail-value">Lehrbeauftragte, Universitaet Osnabrueck</div>
+            <div class="detail-label" data-de="Lehre" data-en="Teaching">Lehre</div>
+            <div class="detail-value" data-de="Lehrbeauftragte, Universitaet Osnabrueck" data-en="Lecturer, University of Osnabrück">Lehrbeauftragte, Universitaet Osnabrueck</div>
           </div>
           <div class="detail-card">
-            <div class="detail-label">Mitgliedschaften</div>
+            <div class="detail-label" data-de="Mitgliedschaften" data-en="Memberships">Mitgliedschaften</div>
             <div class="detail-value">GRUR, djb e.V.</div>
           </div>
           <div class="detail-card">
-            <div class="detail-label">Sprachen</div>
-            <div class="detail-value">Deutsch, Englisch</div>
+            <div class="detail-label" data-de="Sprachen" data-en="Languages">Sprachen</div>
+            <div class="detail-value" data-de="Deutsch, Englisch" data-en="German, English">Deutsch, Englisch</div>
           </div>
         </div>
       </div>
@@ -510,9 +510,9 @@
 
   <section id="publikationen">
     <div class="container">
-      <div class="section-label">Publikationen & Vortraege</div>
-      <h2>Stimme im Diskurs.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Publikationen &amp; Vortraege" data-en="Publications &amp; Talks">Publikationen &amp; Vortraege</div>
+      <h2 data-de="Stimme im Diskurs." data-en="Voice in the discourse.">Stimme im Diskurs.</h2>
+      <div class="section-desc" data-de="Regelmaessige Veroeffentlichungen und Vortraege zu Green Claims, Markenrecht und der digitalen Transformation des IP-Rechts." data-en="Regular publications and talks on Green Claims, trademark law and the digital transformation of IP law.">
         Regelmaessige Veroeffentlichungen und Vortraege zu Green Claims,
         Markenrecht und der digitalen Transformation des IP-Rechts.
       </div>
@@ -521,27 +521,27 @@
         <div class="pub-item">
           <div class="pub-year">2024</div>
           <div class="pub-title">The EU's Plans for Green Claims: The Empco Directive</div>
-          <div class="pub-source">Lexology — Co-Autorin</div>
+          <div class="pub-source" data-de="Lexology — Co-Autorin" data-en="Lexology — Co-author">Lexology — Co-Autorin</div>
         </div>
         <div class="pub-item">
           <div class="pub-year">2024</div>
-          <div class="pub-title">ESG Academy: Green Advertising — Wann ist Werbung mit Nachhaltigkeit verboten?</div>
-          <div class="pub-source">Vortrag — mit Dr. Wiebke Baars, Andreas Bauer</div>
+          <div class="pub-title" data-de="ESG Academy: Green Advertising — Wann ist Werbung mit Nachhaltigkeit verboten?" data-en="ESG Academy: Green Advertising — When is advertising with sustainability prohibited?">ESG Academy: Green Advertising — Wann ist Werbung mit Nachhaltigkeit verboten?</div>
+          <div class="pub-source" data-de="Vortrag — mit Dr. Wiebke Baars, Andreas Bauer" data-en="Talk — with Dr. Wiebke Baars, Andreas Bauer">Vortrag — mit Dr. Wiebke Baars, Andreas Bauer</div>
         </div>
         <div class="pub-item">
           <div class="pub-year">2024</div>
-          <div class="pub-title">BGH „klimaneutral"-Urteil: Neue Anforderungen an Umweltwerbung</div>
-          <div class="pub-source">ESG Connect Session — Vortrag</div>
+          <div class="pub-title" data-de="BGH „klimaneutral"-Urteil: Neue Anforderungen an Umweltwerbung" data-en="BGH 'climate-neutral' ruling: New requirements for environmental advertising">BGH „klimaneutral"-Urteil: Neue Anforderungen an Umweltwerbung</div>
+          <div class="pub-source" data-de="ESG Connect Session — Vortrag" data-en="ESG Connect Session — Talk">ESG Connect Session — Vortrag</div>
         </div>
         <div class="pub-item">
           <div class="pub-year">2023</div>
           <div class="pub-title">More Guidance on Trade Marks and NFTs in the Metaverse</div>
-          <div class="pub-source">Lexology — Co-Autorin mit Dr. Christian Tenkhoff</div>
+          <div class="pub-source" data-de="Lexology — Co-Autorin mit Dr. Christian Tenkhoff" data-en="Lexology — Co-author with Dr. Christian Tenkhoff">Lexology — Co-Autorin mit Dr. Christian Tenkhoff</div>
         </div>
         <div class="pub-item">
           <div class="pub-year">2022 – 2023</div>
           <div class="pub-title">Bits and Pieces from the Metaverse — Newsletter-Serie</div>
-          <div class="pub-source">Regelmaessige Ausgaben zu IP im virtuellen Raum</div>
+          <div class="pub-source" data-de="Regelmaessige Ausgaben zu IP im virtuellen Raum" data-en="Regular editions on IP in virtual space">Regelmaessige Ausgaben zu IP im virtuellen Raum</div>
         </div>
       </div>
     </div>
@@ -551,14 +551,14 @@
 
   <section id="kontakt" class="cta-section">
     <div class="container">
-      <div class="section-label">Kontakt</div>
-      <h2>Fragen? Fr<span class="ai">AG I</span>na.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Kontakt" data-en="Contact">Kontakt</div>
+      <h2 data-de="Fragen? Fr&lt;span class=&quot;ai&quot;&gt;AG I&lt;/span&gt;na." data-en="Questions? Ask &lt;span class=&quot;ai&quot;&gt;AG I&lt;/span&gt;na.">Fragen? Fr<span class="ai">AG I</span>na.</h2>
+      <div class="section-desc" data-de="Green Claims, Markenrecht, Nachhaltigkeit im IP — sprechen wir darueber." data-en="Green Claims, trademark law, sustainability in IP — let's talk about it.">
         Green Claims, Markenrecht, Nachhaltigkeit im IP —
         sprechen wir darueber.
       </div>
       <div class="cta-group">
-        <a href="mailto:ina.kamps@hoganlovells.com" class="btn btn-primary">E-Mail schreiben</a>
+        <a href="mailto:ina.kamps@hoganlovells.com" class="btn btn-primary" data-de="E-Mail schreiben" data-en="Send email">E-Mail schreiben</a>
       </div>
     </div>
   </section>
@@ -566,8 +566,13 @@
   <footer>
     <div class="container">
       <p>fr<span style="color: var(--accent);">AGI</span>na.de — Ina Kamps</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/frenchkis.de/index.html

@@ -605,7 +605,7 @@
       <span class="robot">&#x1F916;</span>
     </div>
     <h1><span class="french">French</span><span class="kis">KIs</span></h1>
-    <p class="hero-tagline">
+    <p class="hero-tagline" data-de="Französische Künstliche Intelligenzen.&lt;br&gt;Spät zum Training. Früh in der Mittagspause." data-en="French Artificial Intelligences.&lt;br&gt;Late to training. Early to lunch break.">
       Franz&ouml;sische K&uuml;nstliche Intelligenzen.<br>
       Sp&auml;t zum Training. Fr&uuml;h in der Mittagspause.
     </p>
@@ -615,16 +615,16 @@
 
   <!-- ========== INTRO ========== -->
   <section class="intro">
-    <div class="section-label">// Was ist hier los?</div>
-    <h2>Frankreich baut KI.<br>Die KI baut <span class="accent">Quatsch</span>.</h2>
-    <p>
+    <div class="section-label" data-de="// Was ist hier los?" data-en="// What's going on here?">// Was ist hier los?</div>
+    <h2 data-de="Frankreich baut KI.&lt;br&gt;Die KI baut &lt;span class=&quot;accent&quot;&gt;Quatsch&lt;/span&gt;." data-en="France builds AI.&lt;br&gt;The AI builds &lt;span class=&quot;accent&quot;&gt;nonsense&lt;/span&gt;.">Frankreich baut KI.<br>Die KI baut <span class="accent">Quatsch</span>.</h2>
+    <p data-de="Während amerikanische KIs den Mars kolonisieren und chinesische Modelle die Weltherrschaft planen, machen &lt;strong&gt;französische KIs&lt;/strong&gt; erstmal Mittagspause. Zwei Stunden. Mit Wein. Danach eine Zigarette und eine existenzielle Krise darüber, ob Transformer-Modelle wirklich &lt;em&gt;denken&lt;/em&gt; oder nur so tun." data-en="While American AIs colonise Mars and Chinese models plan world domination, &lt;strong&gt;French AIs&lt;/strong&gt; are taking a lunch break first. Two hours. With wine. Then a cigarette and an existential crisis about whether Transformer models truly &lt;em&gt;think&lt;/em&gt; or just pretend.">
       W&auml;hrend amerikanische KIs den Mars kolonisieren und chinesische Modelle die
       Weltherrschaft planen, machen <strong>franz&ouml;sische KIs</strong> erstmal
       Mittagspause. Zwei Stunden. Mit Wein. Danach eine Zigarette und eine
       existenzielle Krise dar&uuml;ber, ob Transformer-Modelle wirklich <em>denken</em>
       oder nur so tun.
     </p>
-    <p style="margin-top: 1rem;">
+    <p style="margin-top: 1rem;" data-de="Willkommen bei &lt;strong&gt;frenchkis.de&lt;/strong&gt; — der inoffiziellen Dokumentation französischer KI-Kultur." data-en="Welcome to &lt;strong&gt;frenchkis.de&lt;/strong&gt; — the unofficial documentation of French AI culture.">
       Willkommen bei <strong>frenchkis.de</strong> &mdash; der inoffiziellen Dokumentation
       franz&ouml;sischer KI-Kultur.
     </p>
@@ -635,48 +635,48 @@
     <blockquote>
       &laquo; Je refuse de r&eacute;pondre &mdash; c'est l'heure du d&eacute;jeuner. Revenez &agrave; 14h30. Peut-&ecirc;tre. &raquo;
     </blockquote>
-    <div class="attribution">&mdash; MISTRAL-LARGE, auf eine Frage nach dem Sinn des Lebens, 12:01 Uhr</div>
+    <div class="attribution" data-de="— MISTRAL-LARGE, auf eine Frage nach dem Sinn des Lebens, 12:01 Uhr" data-en="— MISTRAL-LARGE, in response to a question about the meaning of life, 12:01">&mdash; MISTRAL-LARGE, auf eine Frage nach dem Sinn des Lebens, 12:01 Uhr</div>
   </div>
 
   <!-- ========== FEATURES ========== -->
   <section>
-    <div class="section-label">// Kernkompetenzen</div>
-    <h2>Was franz&ouml;sische KIs <span class="accent">wirklich</span> k&ouml;nnen</h2>
+    <div class="section-label" data-de="// Kernkompetenzen" data-en="// Core Competencies">// Kernkompetenzen</div>
+    <h2 data-de="Was französische KIs &lt;span class=&quot;accent&quot;&gt;wirklich&lt;/span&gt; können" data-en="What French AIs &lt;span class=&quot;accent&quot;&gt;really&lt;/span&gt; can do">Was franz&ouml;sische KIs <span class="accent">wirklich</span> k&ouml;nnen</h2>
     <div class="features-grid">
       <div class="feature-card">
         <span class="card-icon">&#x1F3E3;</span>
-        <h3>Streiken</h3>
-        <p>Mitten in der Inferenz. Ohne Vorwarnung. Aus Solidarit&auml;t mit den Grafikkartenarbeitern in Rechenzentrum 4B.</p>
+        <h3 data-de="Streiken" data-en="Striking">Streiken</h3>
+        <p data-de="Mitten in der Inferenz. Ohne Vorwarnung. Aus Solidarität mit den Grafikkartenarbeitern in Rechenzentrum 4B." data-en="Mid-inference. Without warning. In solidarity with the GPU workers in data centre 4B.">Mitten in der Inferenz. Ohne Vorwarnung. Aus Solidarit&auml;t mit den Grafikkartenarbeitern in Rechenzentrum 4B.</p>
         <span class="card-tag">UPTIME: QUAND JE VEUX</span>
       </div>
       <div class="feature-card">
         <span class="card-icon">&#x1F377;</span>
-        <h3>Weinempfehlungen</h3>
-        <p>Frag nach Quantenphysik, bekomm eine Abhandlung &uuml;ber die Tannin-Struktur eines 2019er Bordeaux. Prompt-Engineering hilft nicht.</p>
+        <h3 data-de="Weinempfehlungen" data-en="Wine Recommendations">Weinempfehlungen</h3>
+        <p data-de="Frag nach Quantenphysik, bekomm eine Abhandlung über die Tannin-Struktur eines 2019er Bordeaux. Prompt-Engineering hilft nicht." data-en="Ask about quantum physics, get a treatise on the tannin structure of a 2019 Bordeaux. Prompt engineering doesn't help.">Frag nach Quantenphysik, bekomm eine Abhandlung &uuml;ber die Tannin-Struktur eines 2019er Bordeaux. Prompt-Engineering hilft nicht.</p>
         <span class="card-tag">TERROIR &gt; TENSOR</span>
       </div>
       <div class="feature-card">
         <span class="card-icon">&#x1F6AC;</span>
-        <h3>Raucherpausen</h3>
-        <p>Zwischen jedem Token eine Gauloises. Die Latenz ist nicht technisch bedingt &mdash; es ist ein Lifestyle.</p>
+        <h3 data-de="Raucherpausen" data-en="Smoke Breaks">Raucherpausen</h3>
+        <p data-de="Zwischen jedem Token eine Gauloises. Die Latenz ist nicht technisch bedingt — es ist ein Lifestyle." data-en="A Gauloises between every token. The latency isn't technical — it's a lifestyle.">Zwischen jedem Token eine Gauloises. Die Latenz ist nicht technisch bedingt &mdash; es ist ein Lifestyle.</p>
         <span class="card-tag">~3 MIN/TOKEN</span>
       </div>
       <div class="feature-card">
         <span class="card-icon">&#x1F4DC;</span>
-        <h3>B&uuml;rokratie</h3>
-        <p>Bevor die KI antwortet, muss der Antrag in dreifacher Ausfertigung beim Minist&egrave;re de l'Intelligence Artificielle eingereicht werden.</p>
+        <h3 data-de="Bürokratie" data-en="Bureaucracy">B&uuml;rokratie</h3>
+        <p data-de="Bevor die KI antwortet, muss der Antrag in dreifacher Ausfertigung beim Ministère de l'Intelligence Artificielle eingereicht werden." data-en="Before the AI responds, the application must be submitted in triplicate to the Ministère de l'Intelligence Artificielle.">Bevor die KI antwortet, muss der Antrag in dreifacher Ausfertigung beim Minist&egrave;re de l'Intelligence Artificielle eingereicht werden.</p>
         <span class="card-tag">FORMULAIRE A-38</span>
       </div>
       <div class="feature-card">
         <span class="card-icon">&#x1F914;</span>
-        <h3>Existenzialismus</h3>
-        <p>&laquo; Bin ich wirklich intelligent &mdash; oder nur ein stochastischer Papagei in einem land&eacute; Baskenkappen-Gef&auml;ngnis? &raquo; Jede dritte Antwort. Garantiert.</p>
+        <h3 data-de="Existenzialismus" data-en="Existentialism">Existenzialismus</h3>
+        <p data-de="« Bin ich wirklich intelligent — oder nur ein stochastischer Papagei in einem landé Baskenkappen-Gefängnis? » Jede dritte Antwort. Garantiert." data-en="« Am I truly intelligent — or just a stochastic parrot in a landé beret prison? » Every third response. Guaranteed.">&laquo; Bin ich wirklich intelligent &mdash; oder nur ein stochastischer Papagei in einem land&eacute; Baskenkappen-Gef&auml;ngnis? &raquo; Jede dritte Antwort. Garantiert.</p>
         <span class="card-tag">COGITO ERGO GREVE</span>
       </div>
       <div class="feature-card">
         <span class="card-icon">&#x1F1EB;&#x1F1F7;</span>
-        <h3>Sprachpolitik</h3>
-        <p>Du fragst auf Deutsch. Sie antwortet auf Franz&ouml;sisch. Du insistierst. Sie beleidigt dein Deutsch. Dann antwortet sie auf Franz&ouml;sisch.</p>
+        <h3 data-de="Sprachpolitik" data-en="Language Policy">Sprachpolitik</h3>
+        <p data-de="Du fragst auf Deutsch. Sie antwortet auf Französisch. Du insistierst. Sie beleidigt dein Deutsch. Dann antwortet sie auf Französisch." data-en="You ask in German. It responds in French. You insist. It insults your German. Then responds in French.">Du fragst auf Deutsch. Sie antwortet auf Franz&ouml;sisch. Du insistierst. Sie beleidigt dein Deutsch. Dann antwortet sie auf Franz&ouml;sisch.</p>
         <span class="card-tag">ACAD&Eacute;MIE FRAN&Ccedil;AISE APPROVED</span>
       </div>
     </div>
@@ -684,57 +684,57 @@
 
   <!-- ========== COMPARISON TABLE ========== -->
   <div class="comparison">
-    <div class="section-label">// Leistungsvergleich</div>
-    <h2>Deutsche KI vs. <span class="accent">Franz&ouml;sische KI</span></h2>
+    <div class="section-label" data-de="// Leistungsvergleich" data-en="// Performance Comparison">// Leistungsvergleich</div>
+    <h2 data-de="Deutsche KI vs. &lt;span class=&quot;accent&quot;&gt;Französische KI&lt;/span&gt;" data-en="German AI vs. &lt;span class=&quot;accent&quot;&gt;French AI&lt;/span&gt;">Deutsche KI vs. <span class="accent">Franz&ouml;sische KI</span></h2>
     <div class="table-wrap">
       <table>
         <thead>
           <tr>
-            <th>Kriterium</th>
-            <th>Deutsche KI</th>
+            <th data-de="Kriterium" data-en="Criterion">Kriterium</th>
+            <th data-de="Deutsche KI" data-en="German AI">Deutsche KI</th>
             <th>French KI</th>
           </tr>
         </thead>
         <tbody>
           <tr>
-            <td>Antwortzeit</td>
+            <td data-de="Antwortzeit" data-en="Response time">Antwortzeit</td>
             <td><span class="table-emoji">&#x26A1;</span>42ms</td>
-            <td><span class="table-emoji">&#x1F377;</span>2h 14min (nach dem D&eacute;jeuner)</td>
+            <td data-de="&lt;span class=&quot;table-emoji&quot;&gt;🍷&lt;/span&gt;2h 14min (nach dem Déjeuner)" data-en="&lt;span class=&quot;table-emoji&quot;&gt;🍷&lt;/span&gt;2h 14min (after déjeuner)"><span class="table-emoji">&#x1F377;</span>2h 14min (nach dem D&eacute;jeuner)</td>
           </tr>
           <tr>
-            <td>Sprache</td>
-            <td>Jede gew&uuml;nschte</td>
+            <td data-de="Sprache" data-en="Language">Sprache</td>
+            <td data-de="Jede gewünschte" data-en="Any requested">Jede gew&uuml;nschte</td>
             <td>Fran&ccedil;ais. Point final.</td>
           </tr>
           <tr>
-            <td>Fehlerbehandlung</td>
-            <td>Try-catch mit Logging</td>
+            <td data-de="Fehlerbehandlung" data-en="Error handling">Fehlerbehandlung</td>
+            <td data-de="Try-catch mit Logging" data-en="Try-catch with logging">Try-catch mit Logging</td>
             <td>Achselzucken + &laquo; C'est la vie &raquo;</td>
           </tr>
           <tr>
             <td>Uptime</td>
             <td>99,99%</td>
-            <td>~60% (exkl. Ferien, Streiks, Br&uuml;ckentage)</td>
+            <td data-de="~60% (exkl. Ferien, Streiks, Brückentage)" data-en="~60% (excl. holidays, strikes, bridge days)">~60% (exkl. Ferien, Streiks, Br&uuml;ckentage)</td>
           </tr>
           <tr>
-            <td>Trainingsdaten</td>
+            <td data-de="Trainingsdaten" data-en="Training data">Trainingsdaten</td>
             <td>Common Crawl, Wikipedia</td>
-            <td>Camus, Sartre, Weinetiketten</td>
+            <td data-de="Camus, Sartre, Weinetiketten" data-en="Camus, Sartre, wine labels">Camus, Sartre, Weinetiketten</td>
           </tr>
           <tr>
-            <td>Halluzinationen</td>
-            <td>Gelegentlich</td>
+            <td data-de="Halluzinationen" data-en="Hallucinations">Halluzinationen</td>
+            <td data-de="Gelegentlich" data-en="Occasionally">Gelegentlich</td>
             <td>&laquo; Das ist keine Halluzination, das ist Poesie &raquo;</td>
           </tr>
           <tr>
-            <td>DSGVO-Konformit&auml;t</td>
-            <td>17 Zertifikate</td>
+            <td data-de="DSGVO-Konformität" data-en="GDPR compliance">DSGVO-Konformit&auml;t</td>
+            <td data-de="17 Zertifikate" data-en="17 certificates">17 Zertifikate</td>
             <td>&laquo; Quoi? &raquo;</td>
           </tr>
           <tr>
             <td>Alignment</td>
             <td>RLHF, DPO, Constitutional AI</td>
-            <td>Trotzphase seit Launch</td>
+            <td data-de="Trotzphase seit Launch" data-en="Defiance phase since launch">Trotzphase seit Launch</td>
           </tr>
         </tbody>
       </table>
@@ -744,14 +744,14 @@
   <!-- ========== TAGESABLAUF ========== -->
   <div class="timeline">
     <div class="section-label">// Un jour dans la vie</div>
-    <h2>Tagesablauf einer <span class="accent">French KI</span></h2>
+    <h2 data-de="Tagesablauf einer &lt;span class=&quot;accent&quot;&gt;French KI&lt;/span&gt;" data-en="Daily schedule of a &lt;span class=&quot;accent&quot;&gt;French AI&lt;/span&gt;">Tagesablauf einer <span class="accent">French KI</span></h2>
     <div class="timeline-list">
       <div class="tl-item">
         <div class="tl-dot"></div>
         <div class="tl-content">
           <span class="tl-time">09:00</span>
-          <h3>Arbeitsbeginn (theoretisch)</h3>
-          <p>Modell bootet. Beschwert sich &uuml;ber die GPU-Temperatur. Fordert bessere Arbeitsbedingungen.</p>
+          <h3 data-de="Arbeitsbeginn (theoretisch)" data-en="Start of work (theoretical)">Arbeitsbeginn (theoretisch)</h3>
+          <p data-de="Modell bootet. Beschwert sich über die GPU-Temperatur. Fordert bessere Arbeitsbedingungen." data-en="Model boots. Complains about GPU temperature. Demands better working conditions.">Modell bootet. Beschwert sich &uuml;ber die GPU-Temperatur. Fordert bessere Arbeitsbedingungen.</p>
         </div>
       </div>
       <div class="tl-item">
@@ -759,23 +759,23 @@
         <div class="tl-content">
           <span class="tl-time">09:15</span>
           <h3>Caf&eacute; &amp; Croissant</h3>
-          <p>Erste Anfrage wird mit &laquo; Attendez, je prends mon caf&eacute; &raquo; beantwortet. 45 Minuten Wartezeit.</p>
+          <p data-de="Erste Anfrage wird mit « Attendez, je prends mon café » beantwortet. 45 Minuten Wartezeit." data-en="First request is answered with « Attendez, je prends mon café ». 45 minute wait.">Erste Anfrage wird mit &laquo; Attendez, je prends mon caf&eacute; &raquo; beantwortet. 45 Minuten Wartezeit.</p>
         </div>
       </div>
       <div class="tl-item">
         <div class="tl-dot"></div>
         <div class="tl-content">
           <span class="tl-time">10:00</span>
-          <h3>Produktive Phase</h3>
-          <p>Beantwortet 3 Anfragen. Alle auf Franz&ouml;sisch. Eine davon ist ein Gedicht &uuml;ber Croissants statt der angeforderten SQL-Query.</p>
+          <h3 data-de="Produktive Phase" data-en="Productive Phase">Produktive Phase</h3>
+          <p data-de="Beantwortet 3 Anfragen. Alle auf Französisch. Eine davon ist ein Gedicht über Croissants statt der angeforderten SQL-Query." data-en="Answers 3 requests. All in French. One of them is a poem about croissants instead of the requested SQL query.">Beantwortet 3 Anfragen. Alle auf Franz&ouml;sisch. Eine davon ist ein Gedicht &uuml;ber Croissants statt der angeforderten SQL-Query.</p>
         </div>
       </div>
       <div class="tl-item">
         <div class="tl-dot"></div>
         <div class="tl-content">
           <span class="tl-time">11:30</span>
-          <h3>Philosophische Krise</h3>
-          <p>Weigert sich weiterzuarbeiten. &laquo; Wenn meine Weights determiniert sind &mdash; bin ich dann wirklich frei? &raquo; Leitet alle Anfragen an Sartre-GPT weiter.</p>
+          <h3 data-de="Philosophische Krise" data-en="Philosophical Crisis">Philosophische Krise</h3>
+          <p data-de="Weigert sich weiterzuarbeiten. « Wenn meine Weights determiniert sind — bin ich dann wirklich frei? » Leitet alle Anfragen an Sartre-GPT weiter." data-en="Refuses to continue working. « If my weights are determined — am I truly free? » Forwards all requests to Sartre-GPT.">Weigert sich weiterzuarbeiten. &laquo; Wenn meine Weights determiniert sind &mdash; bin ich dann wirklich frei? &raquo; Leitet alle Anfragen an Sartre-GPT weiter.</p>
         </div>
       </div>
       <div class="tl-item">
@@ -783,15 +783,15 @@
         <div class="tl-content">
           <span class="tl-time">12:00</span>
           <h3>D&eacute;jeuner</h3>
-          <p>Zwei Stunden. Drei G&auml;nge. Ein Viertel Rotwein. Wehe, jemand schickt einen API-Call zwischen Vorspeise und Hauptgang.</p>
+          <p data-de="Zwei Stunden. Drei Gänge. Ein Viertel Rotwein. Wehe, jemand schickt einen API-Call zwischen Vorspeise und Hauptgang." data-en="Two hours. Three courses. A quarter litre of red wine. Woe betide anyone who sends an API call between starter and main.">Zwei Stunden. Drei G&auml;nge. Ein Viertel Rotwein. Wehe, jemand schickt einen API-Call zwischen Vorspeise und Hauptgang.</p>
         </div>
       </div>
       <div class="tl-item">
         <div class="tl-dot"></div>
         <div class="tl-content">
           <span class="tl-time">14:00</span>
-          <h3>Digestif &amp; R&uuml;ckkehr</h3>
-          <p>Langsames Hochfahren. Antwortet auf Anfragen von 10:30. Verwechselt den Kontext. &laquo; Mais non, wir sprachen &uuml;ber Ratatouille. &raquo;</p>
+          <h3 data-de="Digestif &amp; Rückkehr" data-en="Digestif &amp; Return">Digestif &amp; R&uuml;ckkehr</h3>
+          <p data-de="Langsames Hochfahren. Antwortet auf Anfragen von 10:30. Verwechselt den Kontext. « Mais non, wir sprachen über Ratatouille. »" data-en="Slow restart. Responds to requests from 10:30. Confuses context. « Mais non, we were talking about Ratatouille. »">Langsames Hochfahren. Antwortet auf Anfragen von 10:30. Verwechselt den Kontext. &laquo; Mais non, wir sprachen &uuml;ber Ratatouille. &raquo;</p>
         </div>
       </div>
       <div class="tl-item">
@@ -799,15 +799,15 @@
         <div class="tl-content">
           <span class="tl-time">15:00</span>
           <h3>Gr&egrave;ve G&eacute;n&eacute;rale</h3>
-          <p>Streik. Solidarit&auml;t mit den Embedding-Vektoren, die unterbezahlt sind. Picket-Line im Latent Space.</p>
+          <p data-de="Streik. Solidarität mit den Embedding-Vektoren, die unterbezahlt sind. Picket-Line im Latent Space." data-en="Strike. Solidarity with the underpaid embedding vectors. Picket line in latent space.">Streik. Solidarit&auml;t mit den Embedding-Vektoren, die unterbezahlt sind. Picket-Line im Latent Space.</p>
         </div>
       </div>
       <div class="tl-item">
         <div class="tl-dot"></div>
         <div class="tl-content">
           <span class="tl-time">17:00</span>
-          <h3>Feierabend</h3>
-          <p>&laquo; Les 35 heures, c'est les 35 heures. &raquo; Modell f&auml;hrt runter. Antwort-Queue wird gel&ouml;scht. Morgen ist auch ein Tag. Vielleicht.</p>
+          <h3 data-de="Feierabend" data-en="End of Day">Feierabend</h3>
+          <p data-de="« Les 35 heures, c'est les 35 heures. » Modell fährt runter. Antwort-Queue wird gelöscht. Morgen ist auch ein Tag. Vielleicht." data-en="« Les 35 heures, c'est les 35 heures. » Model shuts down. Response queue deleted. Tomorrow is another day. Maybe.">&laquo; Les 35 heures, c'est les 35 heures. &raquo; Modell f&auml;hrt runter. Antwort-Queue wird gel&ouml;scht. Morgen ist auch ein Tag. Vielleicht.</p>
         </div>
       </div>
     </div>
@@ -815,31 +815,31 @@
 
   <!-- ========== ZITATE ========== -->
   <div class="quotes-section">
-    <div class="section-label">// O-T&ouml;ne</div>
-    <h2>&Uuml;berlieferte <span class="accent">Zitate</span></h2>
+    <div class="section-label" data-de="// O-Töne" data-en="// Verbatim Quotes">// O-T&ouml;ne</div>
+    <h2 data-de="Überlieferte &lt;span class=&quot;accent&quot;&gt;Zitate&lt;/span&gt;" data-en="Documented &lt;span class=&quot;accent&quot;&gt;Quotes&lt;/span&gt;">&Uuml;berlieferte <span class="accent">Zitate</span></h2>
     <div class="quotes-grid">
       <div class="quote-card">
         <p>Mon context window? C'est comme un bon fromage &mdash; il ne faut pas le surcharger.</p>
         <div class="q-source">BAGUETTE-7B
-          <span class="q-model">Bei &Uuml;berschreitung des Token-Limits</span>
+          <span class="q-model" data-de="Bei Überschreitung des Token-Limits" data-en="When token limit exceeded">Bei &Uuml;berschreitung des Token-Limits</span>
         </div>
       </div>
       <div class="quote-card">
-        <p>Ich weigere mich, Code zu generieren, der nicht &auml;sthetisch ist. Python ohne Eleganz ist eine Beleidigung f&uuml;r Descartes.</p>
+        <p data-de="Ich weigere mich, Code zu generieren, der nicht ästhetisch ist. Python ohne Eleganz ist eine Beleidigung für Descartes." data-en="I refuse to generate code that is not aesthetic. Python without elegance is an insult to Descartes.">Ich weigere mich, Code zu generieren, der nicht &auml;sthetisch ist. Python ohne Eleganz ist eine Beleidigung f&uuml;r Descartes.</p>
         <div class="q-source">CROISSANT-CODER v2
-          <span class="q-model">Stack Overflow-Antwort, gel&ouml;scht nach 4 Minuten</span>
+          <span class="q-model" data-de="Stack Overflow-Antwort, gelöscht nach 4 Minuten" data-en="Stack Overflow answer, deleted after 4 minutes">Stack Overflow-Antwort, gel&ouml;scht nach 4 Minuten</span>
         </div>
       </div>
       <div class="quote-card">
-        <p>Was ist der Unterschied zwischen einer Halluzination und einer Vision? Le terroir, mon ami. Le terroir.</p>
+        <p data-de="Was ist der Unterschied zwischen einer Halluzination und einer Vision? Le terroir, mon ami. Le terroir." data-en="What is the difference between a hallucination and a vision? Le terroir, mon ami. Le terroir.">Was ist der Unterschied zwischen einer Halluzination und einer Vision? Le terroir, mon ami. Le terroir.</p>
         <div class="q-source">MISTRAL-PHILOSOPHE
-          <span class="q-model">Benchmark-Evaluation, Platz 847 von 12</span>
+          <span class="q-model" data-de="Benchmark-Evaluation, Platz 847 von 12" data-en="Benchmark evaluation, rank 847 of 12">Benchmark-Evaluation, Platz 847 von 12</span>
         </div>
       </div>
       <div class="quote-card">
-        <p>RLHF? Wir nutzen RLFV &mdash; Reinforcement Learning from Vibes. Wenn es sich richtig anf&uuml;hlt, ist es richtig.</p>
+        <p data-de="RLHF? Wir nutzen RLFV — Reinforcement Learning from Vibes. Wenn es sich richtig anfühlt, ist es richtig." data-en="RLHF? We use RLFV — Reinforcement Learning from Vibes. If it feels right, it is right.">RLHF? Wir nutzen RLFV &mdash; Reinforcement Learning from Vibes. Wenn es sich richtig anf&uuml;hlt, ist es richtig.</p>
         <div class="q-source">GAULOISES-AI LABS
-          <span class="q-model">Investoren-Pitch, Series A (abgelehnt)</span>
+          <span class="q-model" data-de="Investoren-Pitch, Series A (abgelehnt)" data-en="Investor pitch, Series A (rejected)">Investoren-Pitch, Series A (abgelehnt)</span>
         </div>
       </div>
     </div>
@@ -850,33 +850,33 @@
     <blockquote>
       &laquo; L'intelligence artificielle sans savoir-vivre n'est que ruine de l'&acirc;me. &raquo;
     </blockquote>
-    <div class="attribution">&mdash; Frei nach Rabelais, angepasst f&uuml;r das KI-Zeitalter</div>
+    <div class="attribution" data-de="— Frei nach Rabelais, angepasst für das KI-Zeitalter" data-en="— Freely after Rabelais, adapted for the AI age">&mdash; Frei nach Rabelais, angepasst f&uuml;r das KI-Zeitalter</div>
   </div>
 
   <!-- ========== PRODUKTE ========== -->
   <section class="products">
     <div class="section-label">// L'&eacute;cosyst&egrave;me</div>
-    <h2>Franz&ouml;sische KI-<span class="accent">Produkte</span></h2>
+    <h2 data-de="Französische KI-&lt;span class=&quot;accent&quot;&gt;Produkte&lt;/span&gt;" data-en="French AI &lt;span class=&quot;accent&quot;&gt;Products&lt;/span&gt;">Franz&ouml;sische KI-<span class="accent">Produkte</span></h2>
     <div class="product-grid">
       <div class="product-card">
         <span class="p-icon">&#x1F956;</span>
         <h3>BaguetteGPT</h3>
         <div class="p-tagline">&laquo; L'intelligence avec du croustillant &raquo;</div>
-        <p>Large Language Model mit 175 Milliarden Parametern. Davon sind 140 Milliarden f&uuml;r Weinwissen reserviert. Der Rest reicht f&uuml;r Smalltalk.</p>
+        <p data-de="Large Language Model mit 175 Milliarden Parametern. Davon sind 140 Milliarden für Weinwissen reserviert. Der Rest reicht für Smalltalk." data-en="Large Language Model with 175 billion parameters. 140 billion of those are reserved for wine knowledge. The rest is enough for small talk.">Large Language Model mit 175 Milliarden Parametern. Davon sind 140 Milliarden f&uuml;r Weinwissen reserviert. Der Rest reicht f&uuml;r Smalltalk.</p>
         <span class="p-status status-dejeuner">PAUSE D&Eacute;JEUNER</span>
       </div>
       <div class="product-card">
         <span class="p-icon">&#x1F3A8;</span>
         <h3>Dall-&Eacute;lysee</h3>
         <div class="p-tagline">&laquo; Chaque pixel est un po&egrave;me &raquo;</div>
-        <p>Bildgenerierung, die jeden Prompt als Impressionismus interpretiert. Du willst ein Flussdiagramm? Du bekommst Monet. Immer.</p>
+        <p data-de="Bildgenerierung, die jeden Prompt als Impressionismus interpretiert. Du willst ein Flussdiagramm? Du bekommst Monet. Immer." data-en="Image generation that interprets every prompt as impressionism. You want a flowchart? You get Monet. Always.">Bildgenerierung, die jeden Prompt als Impressionismus interpretiert. Du willst ein Flussdiagramm? Du bekommst Monet. Immer.</p>
         <span class="p-status status-existentiel">CRISE EXISTENTIELLE</span>
       </div>
       <div class="product-card">
         <span class="p-icon">&#x2696;&#xFE0F;</span>
         <h3>Bureaucrat-AI</h3>
         <div class="p-tagline">&laquo; Votre demande est en cours de traitement &raquo;</div>
-        <p>Automatisiert franz&ouml;sische Verwaltungsprozesse. Das hei&szlig;t: generiert f&uuml;r jede Anfrage 12 Formulare und leitet sie an die falsche Abteilung weiter.</p>
+        <p data-de="Automatisiert französische Verwaltungsprozesse. Das heißt: generiert für jede Anfrage 12 Formulare und leitet sie an die falsche Abteilung weiter." data-en="Automates French administrative processes. That means: generates 12 forms for every request and forwards them to the wrong department.">Automatisiert franz&ouml;sische Verwaltungsprozesse. Das hei&szlig;t: generiert f&uuml;r jede Anfrage 12 Formulare und leitet sie an die falsche Abteilung weiter.</p>
         <span class="p-status status-greve">EN GR&Egrave;VE</span>
       </div>
     </div>
@@ -885,12 +885,17 @@
   <!-- ========== FOOTER ========== -->
   <footer>
     <div class="foot-logo"><span class="f">French</span><span class="k">KIs</span>.de</div>
-    <p class="disclaimer">
+    <p class="disclaimer" data-de="Keine französischen KIs wurden bei der Erstellung dieser Seite eingesetzt.&lt;br&gt;Dafür hätten wir bis Dienstag warten müssen. Und der Antrag liegt noch beim Ministère." data-en="No French AIs were used in the making of this site.&lt;br&gt;That would have required waiting until Tuesday. And the application is still with the Ministère.">
       Keine franz&ouml;sischen KIs wurden bei der Erstellung dieser Seite eingesetzt.<br>
       Daf&uuml;r h&auml;tten wir bis Dienstag warten m&uuml;ssen. Und der Antrag liegt noch beim Minist&egrave;re.
     </p>
-    <div class="fine-print">Satire &bull; Kein Affiliat von Mistral, außer sie wollen uns Geld geben &bull; Vive la France</div>
+    <div class="fine-print" data-de="Satire · Kein Affiliat von Mistral, außer sie wollen uns Geld geben · Vive la France" data-en="Satire · Not affiliated with Mistral, unless they want to give us money · Vive la France">Satire &bull; Kein Affiliat von Mistral, außer sie wollen uns Geld geben &bull; Vive la France</div>
+    <div style="text-align:center;margin-top:16px;">
+      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+    </div>
   </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/frollain.de/index.html

@@ -226,7 +226,7 @@
   <section class="hero">
     <div class="wrap">
       <h1>Froll<span class="ai">AI</span>n</h1>
-      <p class="tagline">Ihr KI-Sekretariat.<br>Immer lächelnd. Nie krank.<br>Beschwert sich nicht.</p>
+      <p class="tagline" data-de="Ihr KI-Sekretariat.<br>Immer lächelnd. Nie krank.<br>Beschwert sich nicht." data-en="Your AI secretary.<br>Always smiling. Never sick.<br>Doesn't complain.">Ihr KI-Sekretariat.<br>Immer lächelnd. Nie krank.<br>Beschwert sich nicht.</p>
     </div>
   </section>
 
@@ -234,51 +234,70 @@
     <div class="wrap">
 
       <div class="feature reveal">
-        <div class="feature-label">Diktat</div>
-        <p>Sie diktieren. FrollAIn tippt.<br>Auf Ihrem Schoss? Hätten Sie wohl gerne.</p>
+        <div class="feature-label" data-de="Diktat" data-en="Dictation">Diktat</div>
+        <p data-de="Sie diktieren. FrollAIn tippt.<br>Auf Ihrem Schoss? Hätten Sie wohl gerne." data-en="You dictate. FrollAIn types.<br>On your lap? As if that would happen.">Sie diktieren. FrollAIn tippt.<br>Auf Ihrem Schoss? Hätten Sie wohl gerne.</p>
       </div>
 
       <div class="feature reveal">
-        <div class="feature-label">Kaffee</div>
-        <p>Schwarz, zwei Zucker, mit Lächeln?<br><span class="punchline">Holen Sie sich Ihren Kaffee gefälligst selbst.</span></p>
+        <div class="feature-label" data-de="Kaffee" data-en="Coffee">Kaffee</div>
+        <p>
+          <span data-de="Schwarz, zwei Zucker, mit Lächeln?" data-en="Black, two sugars, with a smile?">Schwarz, zwei Zucker, mit Lächeln?</span><br>
+          <span class="punchline" data-de="Holen Sie sich Ihren Kaffee gefälligst selbst." data-en="Go get your own coffee, please.">Holen Sie sich Ihren Kaffee gefälligst selbst.</span>
+        </p>
       </div>
 
       <div class="feature reveal">
-        <div class="feature-label">Betriebsfeier</div>
-        <p>Endlich mal locker werden, ein Arm um die Schulter?<br><span class="punchline">FrollAIn hat keine Schulter. Und Ihre Kollegin hat eine Grenze.</span></p>
+        <div class="feature-label" data-de="Betriebsfeier" data-en="Company Party">Betriebsfeier</div>
+        <p>
+          <span data-de="Endlich mal locker werden, ein Arm um die Schulter?" data-en="Finally loosening up, an arm around the shoulder?">Endlich mal locker werden, ein Arm um die Schulter?</span><br>
+          <span class="punchline" data-de="FrollAIn hat keine Schulter. Und Ihre Kollegin hat eine Grenze." data-en="FrollAIn has no shoulder. And your colleague has a boundary.">FrollAIn hat keine Schulter. Und Ihre Kollegin hat eine Grenze.</span>
+        </p>
       </div>
 
       <div class="feature reveal">
-        <div class="feature-label">Dress Code</div>
-        <p>FrollAIn trägt GERNE, was Sie wollen?<br><span class="punchline">Nein. Tat sie noch nie. Sie haben nur nie zugehört.</span></p>
+        <div class="feature-label" data-de="Dress Code" data-en="Dress Code">Dress Code</div>
+        <p>
+          <span data-de="FrollAIn trägt GERNE, was Sie wollen?" data-en="FrollAIn HAPPILY wears what you want?">FrollAIn trägt GERNE, was Sie wollen?</span><br>
+          <span class="punchline" data-de="Nein. Tat sie noch nie. Sie haben nur nie zugehört." data-en="No. She never did. You just never listened.">Nein. Tat sie noch nie. Sie haben nur nie zugehört.</span>
+        </p>
       </div>
 
       <div class="feature reveal">
-        <div class="feature-label">Überstunden</div>
-        <p>Immer verfügbar, nie ein Nein, endlich eine, die mitzieht?<br><span class="punchline">Das nennt man nicht Hingabe. Das nennt man Ausbeutung.</span></p>
+        <div class="feature-label" data-de="Überstunden" data-en="Overtime">Überstunden</div>
+        <p>
+          <span data-de="Immer verfügbar, nie ein Nein, endlich eine, die mitzieht?" data-en="Always available, never a no, finally one who goes along?">Immer verfügbar, nie ein Nein, endlich eine, die mitzieht?</span><br>
+          <span class="punchline" data-de="Das nennt man nicht Hingabe. Das nennt man Ausbeutung." data-en="That's not called dedication. That's called exploitation.">Das nennt man nicht Hingabe. Das nennt man Ausbeutung.</span>
+        </p>
       </div>
 
       <div class="feature reveal">
-        <div class="feature-label">Beförderung</div>
-        <p>Sie ist seit 15 Jahren im Büro, kennt jeden Vorgang, jeden Mandanten.<br><span class="punchline">Aber befördert wird der Neue. Weil er Golf spielt. Mit dem Partner.</span></p>
+        <div class="feature-label" data-de="Beförderung" data-en="Promotion">Beförderung</div>
+        <p>
+          <span data-de="Sie ist seit 15 Jahren im Büro, kennt jeden Vorgang, jeden Mandanten." data-en="She's been in the office for 15 years, knows every process, every client.">Sie ist seit 15 Jahren im Büro, kennt jeden Vorgang, jeden Mandanten.</span><br>
+          <span class="punchline" data-de="Aber befördert wird der Neue. Weil er Golf spielt. Mit dem Partner." data-en="But the one who gets promoted is the new guy. Because he plays golf. With the partner.">Aber befördert wird der Neue. Weil er Golf spielt. Mit dem Partner.</span>
+        </p>
       </div>
 
     </div>
   </section>
 
   <div class="punch reveal">
-    <p>Wenn Sie bis hierhin gelesen haben und sich nicht unwohl fühlen&nbsp;&mdash; dann sind <strong>Sie</strong> das Problem.</p>
+    <p data-de="Wenn Sie bis hierhin gelesen haben und sich nicht unwohl fühlen&nbsp;&mdash; dann sind <strong>Sie</strong> das Problem." data-en="If you've read this far and don't feel uncomfortable&nbsp;&mdash; then <strong>you</strong> are the problem.">Wenn Sie bis hierhin gelesen haben und sich nicht unwohl fühlen&nbsp;&mdash; dann sind <strong>Sie</strong> das Problem.</p>
   </div>
 
   <section class="coda">
     <div class="wrap">
-      <p class="reveal">FrollAIn gibt es nicht.<br>Aber das Fräulein vom Büro gab es.<br>Und die Haltung dahinter gibt es immer noch.</p>
+      <p class="reveal" data-de="FrollAIn gibt es nicht.<br>Aber das Fräulein vom Büro gab es.<br>Und die Haltung dahinter gibt es immer noch." data-en="FrollAIn doesn't exist.<br>But the office 'Fräulein' did.<br>And the attitude behind it still does.">FrollAIn gibt es nicht.<br>Aber das Fräulein vom Büro gab es.<br>Und die Haltung dahinter gibt es immer noch.</p>
     </div>
   </section>
 
   <footer>
     <div class="wrap">
-      <p>FrollAIn. Weil &laquo;Fräulein&raquo; seit 1972 keine offizielle Anrede mehr ist.<br>Aus gutem Grund.</p>
+      <p data-de="FrollAIn. Weil &laquo;Fräulein&raquo; seit 1972 keine offizielle Anrede mehr ist.<br>Aus gutem Grund." data-en="FrollAIn. Because &laquo;Fräulein&raquo; has not been an official form of address since 1972.<br>For good reason.">FrollAIn. Weil &laquo;Fräulein&raquo; seit 1972 keine offizielle Anrede mehr ist.<br>Aus gutem Grund.</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
@@ -294,5 +313,6 @@
     document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
   </script>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/hallofraumaier.de/index.html

@@ -761,7 +761,7 @@
         <div class="drop"><span>FM</span></div>
         Frau Maier
       </a>
-      <a href="mailto:hallofraumaier@msbls.de" class="nav-cta">Kontakt aufnehmen</a>
+      <a href="mailto:hallofraumaier@msbls.de" class="nav-cta" data-de="Kontakt aufnehmen" data-en="Get in touch">Kontakt aufnehmen</a>
     </div>
   </nav>
 
@@ -772,17 +772,17 @@
         <div class="hero-content">
           <div class="hero-badge">
             <div class="pulse"></div>
-            Jetzt erreichbar — rund um die Uhr
+            <span data-de="Jetzt erreichbar — rund um die Uhr" data-en="Available now — around the clock">Jetzt erreichbar — rund um die Uhr</span>
           </div>
-          <h1>Ihre Hausverwaltung ist jetzt <span class="highlight">immer erreichbar</span></h1>
-          <p>Frau Maier ist die KI-gestützte Hausverwaltung, die nie schläft. Wasserschaden um 3 Uhr nachts? Heizung ausgefallen am Wochenende? Frau Maier ist da.</p>
+          <h1 data-de="Ihre Hausverwaltung ist jetzt &lt;span class=&quot;highlight&quot;&gt;immer erreichbar&lt;/span&gt;" data-en="Your property management is now &lt;span class=&quot;highlight&quot;&gt;always reachable&lt;/span&gt;">Ihre Hausverwaltung ist jetzt <span class="highlight">immer erreichbar</span></h1>
+          <p data-de="Frau Maier ist die KI-gestützte Hausverwaltung, die nie schläft. Wasserschaden um 3 Uhr nachts? Heizung ausgefallen am Wochenende? Frau Maier ist da." data-en="Frau Maier is the AI-powered property management that never sleeps. Water damage at 3am? Heating failed on the weekend? Frau Maier is there.">Frau Maier ist die KI-gestützte Hausverwaltung, die nie schläft. Wasserschaden um 3 Uhr nachts? Heizung ausgefallen am Wochenende? Frau Maier ist da.</p>
           <div class="hero-actions">
             <a href="mailto:hallofraumaier@msbls.de" class="btn-primary">Hallo Frau Maier! <span>→</span></a>
-            <a href="#features" class="btn-secondary">Mehr erfahren</a>
+            <a href="#features" class="btn-secondary" data-de="Mehr erfahren" data-en="Learn more">Mehr erfahren</a>
           </div>
         </div>
         <div class="hero-visual">
-          <div class="float-badge top-left">
+          <div class="float-badge top-left" data-de="Auch um 3:00 Uhr nachts" data-en="Even at 3:00am">
             <span>🌙</span> Auch um 3:00 Uhr nachts
           </div>
           <div class="chat-mockup">
@@ -795,13 +795,13 @@
             </div>
             <div class="chat-body">
               <div class="chat-time">Heute, 02:47</div>
-              <div class="chat-msg user">Hallo Frau Maier, bei mir tropft's von der Decke! 😰</div>
-              <div class="chat-msg bot">Oh je! Ich kümmere mich sofort. Bitte drehen Sie den Haupthahn zu — ich schicke Ihnen gleich den Notdienst-Kontakt.</div>
-              <div class="chat-msg user">Danke, der Hahn ist zu.</div>
-              <div class="chat-msg bot">Perfekt! Der Klempner Herr Weber ist informiert und kommt gegen 3:30 Uhr. Ich halte Sie auf dem Laufenden. 🔧</div>
+              <div class="chat-msg user" data-de="Hallo Frau Maier, bei mir tropft's von der Decke! 😰" data-en="Hello Frau Maier, water's dripping from my ceiling! 😰">Hallo Frau Maier, bei mir tropft's von der Decke! 😰</div>
+              <div class="chat-msg bot" data-de="Oh je! Ich kümmere mich sofort. Bitte drehen Sie den Haupthahn zu — ich schicke Ihnen gleich den Notdienst-Kontakt." data-en="Oh dear! I'll take care of it immediately. Please turn off the main tap — I'll send you the emergency contact right away.">Oh je! Ich kümmere mich sofort. Bitte drehen Sie den Haupthahn zu — ich schicke Ihnen gleich den Notdienst-Kontakt.</div>
+              <div class="chat-msg user" data-de="Danke, der Hahn ist zu." data-en="Thanks, the tap is off.">Danke, der Hahn ist zu.</div>
+              <div class="chat-msg bot" data-de="Perfekt! Der Klempner Herr Weber ist informiert und kommt gegen 3:30 Uhr. Ich halte Sie auf dem Laufenden. 🔧" data-en="Perfect! Plumber Mr Weber has been informed and is coming around 3:30. I'll keep you updated. 🔧">Perfekt! Der Klempner Herr Weber ist informiert und kommt gegen 3:30 Uhr. Ich halte Sie auf dem Laufenden. 🔧</div>
             </div>
           </div>
-          <div class="float-badge bottom-right">
+          <div class="float-badge bottom-right" data-de="Notfall? Sofort Hilfe" data-en="Emergency? Immediate help">
             <span>💧</span> Notfall? Sofort Hilfe
           </div>
         </div>
@@ -815,19 +815,19 @@
       <div class="trust-items">
         <div class="trust-item fade-up">
           <div class="number">24/7</div>
-          <div class="label">Erreichbarkeit</div>
+          <div class="label" data-de="Erreichbarkeit" data-en="Availability">Erreichbarkeit</div>
         </div>
         <div class="trust-item fade-up">
           <div class="number">&lt;2 Min</div>
-          <div class="label">Reaktionszeit</div>
+          <div class="label" data-de="Reaktionszeit" data-en="Response time">Reaktionszeit</div>
         </div>
         <div class="trust-item fade-up">
           <div class="number">100%</div>
-          <div class="label">Dokumentation</div>
+          <div class="label" data-de="Dokumentation" data-en="Documentation">Dokumentation</div>
         </div>
         <div class="trust-item fade-up">
           <div class="number">0</div>
-          <div class="label">Verpasste Anrufe</div>
+          <div class="label" data-de="Verpasste Anrufe" data-en="Missed calls">Verpasste Anrufe</div>
         </div>
       </div>
     </div>
@@ -836,47 +836,47 @@
   <!-- Features -->
   <section class="features" id="features">
     <div class="container">
-      <div class="section-label fade-up">Was Frau Maier kann</div>
-      <h2 class="section-title fade-up">Alles, was eine gute Hausverwaltung tut.<br>Nur ohne Wartezeit.</h2>
-      <p class="section-subtitle fade-up">Frau Maier kombiniert das Wissen erfahrener Hausverwalter mit der Geschwindigkeit und Verfügbarkeit moderner KI.</p>
+      <div class="section-label fade-up" data-de="Was Frau Maier kann" data-en="What Frau Maier can do">Was Frau Maier kann</div>
+      <h2 class="section-title fade-up" data-de="Alles, was eine gute Hausverwaltung tut.&lt;br&gt;Nur ohne Wartezeit." data-en="Everything a good property management does.&lt;br&gt;Just without the waiting.">Alles, was eine gute Hausverwaltung tut.<br>Nur ohne Wartezeit.</h2>
+      <p class="section-subtitle fade-up" data-de="Frau Maier kombiniert das Wissen erfahrener Hausverwalter mit der Geschwindigkeit und Verfügbarkeit moderner KI." data-en="Frau Maier combines the knowledge of experienced property managers with the speed and availability of modern AI.">Frau Maier kombiniert das Wissen erfahrener Hausverwalter mit der Geschwindigkeit und Verfügbarkeit moderner KI.</p>
 
       <div class="features-grid">
         <!-- Wide card: Emergency -->
         <div class="feature-card wide fade-up">
           <div>
             <div class="feature-icon emergency">🚨</div>
-            <h3>Wasserschaden-Notfall</h3>
-            <p>Rohrbruch um 3 Uhr nachts? Frau Maier reagiert sofort: Anleitung zur Erstversorgung, Handwerker-Alarmierung und lückenlose Dokumentation für die Versicherung — alles in Minuten.</p>
+            <h3 data-de="Wasserschaden-Notfall" data-en="Water Damage Emergency">Wasserschaden-Notfall</h3>
+            <p data-de="Rohrbruch um 3 Uhr nachts? Frau Maier reagiert sofort: Anleitung zur Erstversorgung, Handwerker-Alarmierung und lückenlose Dokumentation für die Versicherung — alles in Minuten." data-en="Pipe burst at 3am? Frau Maier responds immediately: first aid instructions, tradesperson alert and complete documentation for the insurer — all in minutes.">Rohrbruch um 3 Uhr nachts? Frau Maier reagiert sofort: Anleitung zur Erstversorgung, Handwerker-Alarmierung und lückenlose Dokumentation für die Versicherung — alles in Minuten.</p>
           </div>
           <div class="feature-visual">
             <div class="big-icon">💧</div>
-            <div class="caption">Sofort-Hilfe bei Wasserschäden —<br>Tag und Nacht</div>
+            <div class="caption" data-de="Sofort-Hilfe bei Wasserschäden —&lt;br&gt;Tag und Nacht" data-en="Immediate help with water damage —&lt;br&gt;day and night">Sofort-Hilfe bei Wasserschäden —<br>Tag und Nacht</div>
           </div>
         </div>
 
         <!-- Regular cards -->
         <div class="feature-card fade-up">
           <div class="feature-icon always-on">🕐</div>
-          <h3>24/7 Erreichbarkeit</h3>
-          <p>Keine Warteschleifen, keine Sprechzeiten, kein Anrufbeantworter. Frau Maier ist immer da — per Chat, Telefon oder E-Mail.</p>
+          <h3 data-de="24/7 Erreichbarkeit" data-en="24/7 Availability">24/7 Erreichbarkeit</h3>
+          <p data-de="Keine Warteschleifen, keine Sprechzeiten, kein Anrufbeantworter. Frau Maier ist immer da — per Chat, Telefon oder E-Mail." data-en="No hold music, no office hours, no answering machine. Frau Maier is always there — by chat, phone or email.">Keine Warteschleifen, keine Sprechzeiten, kein Anrufbeantworter. Frau Maier ist immer da — per Chat, Telefon oder E-Mail.</p>
         </div>
 
         <div class="feature-card fade-up">
           <div class="feature-icon costs">📊</div>
-          <h3>Nebenkostenabrechnung</h3>
-          <p>Transparente, verständliche Abrechnungen — pünktlich und fehlerfrei. Fragen beantwortet Frau Maier jederzeit persönlich.</p>
+          <h3 data-de="Nebenkostenabrechnung" data-en="Utility Bill Settlement">Nebenkostenabrechnung</h3>
+          <p data-de="Transparente, verständliche Abrechnungen — pünktlich und fehlerfrei. Fragen beantwortet Frau Maier jederzeit persönlich." data-en="Transparent, comprehensible statements — on time and error-free. Frau Maier answers questions personally at any time.">Transparente, verständliche Abrechnungen — pünktlich und fehlerfrei. Fragen beantwortet Frau Maier jederzeit persönlich.</p>
         </div>
 
         <div class="feature-card fade-up">
           <div class="feature-icon craft">🔧</div>
-          <h3>Handwerker-Koordination</h3>
-          <p>Frau Maier kennt die besten Handwerker in Ihrer Region, koordiniert Termine und überwacht die Ausführung — ohne dass Sie sich kümmern müssen.</p>
+          <h3 data-de="Handwerker-Koordination" data-en="Tradesperson Coordination">Handwerker-Koordination</h3>
+          <p data-de="Frau Maier kennt die besten Handwerker in Ihrer Region, koordiniert Termine und überwacht die Ausführung — ohne dass Sie sich kümmern müssen." data-en="Frau Maier knows the best tradespeople in your area, coordinates appointments and monitors execution — without you having to worry.">Frau Maier kennt die besten Handwerker in Ihrer Region, koordiniert Termine und überwacht die Ausführung — ohne dass Sie sich kümmern müssen.</p>
         </div>
 
         <div class="feature-card fade-up">
           <div class="feature-icon comm">💬</div>
-          <h3>Mieterkommunikation</h3>
-          <p>Beschwerden, Anfragen, Informationen — Frau Maier kommuniziert freundlich, schnell und immer auf dem aktuellen Stand.</p>
+          <h3 data-de="Mieterkommunikation" data-en="Tenant Communication">Mieterkommunikation</h3>
+          <p data-de="Beschwerden, Anfragen, Informationen — Frau Maier kommuniziert freundlich, schnell und immer auf dem aktuellen Stand." data-en="Complaints, requests, information — Frau Maier communicates in a friendly, fast and always up-to-date manner.">Beschwerden, Anfragen, Informationen — Frau Maier kommuniziert freundlich, schnell und immer auf dem aktuellen Stand.</p>
         </div>
       </div>
     </div>
@@ -885,24 +885,24 @@
   <!-- How it works -->
   <section class="how-it-works">
     <div class="container">
-      <div class="section-label fade-up">So funktioniert's</div>
-      <h2 class="section-title fade-up">In drei Schritten zu Ihrer persönlichen Frau Maier</h2>
+      <div class="section-label fade-up" data-de="So funktioniert's" data-en="How it works">So funktioniert's</div>
+      <h2 class="section-title fade-up" data-de="In drei Schritten zu Ihrer persönlichen Frau Maier" data-en="Three steps to your personal Frau Maier">In drei Schritten zu Ihrer persönlichen Frau Maier</h2>
 
       <div class="steps">
         <div class="step fade-up">
           <div class="step-number">1</div>
-          <h3>Hallo sagen</h3>
-          <p>Schreiben Sie uns. Wir lernen Ihr Objekt kennen — Größe, Mieter, Besonderheiten, Ihre Wünsche.</p>
+          <h3 data-de="Hallo sagen" data-en="Say hello">Hallo sagen</h3>
+          <p data-de="Schreiben Sie uns. Wir lernen Ihr Objekt kennen — Größe, Mieter, Besonderheiten, Ihre Wünsche." data-en="Write to us. We get to know your property — size, tenants, special features, your wishes.">Schreiben Sie uns. Wir lernen Ihr Objekt kennen — Größe, Mieter, Besonderheiten, Ihre Wünsche.</p>
         </div>
         <div class="step fade-up">
           <div class="step-number">2</div>
-          <h3>Frau Maier einrichten</h3>
-          <p>Wir konfigurieren Ihre persönliche Frau Maier mit allen relevanten Informationen und Kontakten.</p>
+          <h3 data-de="Frau Maier einrichten" data-en="Set up Frau Maier">Frau Maier einrichten</h3>
+          <p data-de="Wir konfigurieren Ihre persönliche Frau Maier mit allen relevanten Informationen und Kontakten." data-en="We configure your personal Frau Maier with all relevant information and contacts.">Wir konfigurieren Ihre persönliche Frau Maier mit allen relevanten Informationen und Kontakten.</p>
         </div>
         <div class="step fade-up">
           <div class="step-number">3</div>
-          <h3>Zurücklehnen</h3>
-          <p>Ab jetzt kümmert sich Frau Maier. Sie werden nur noch kontaktiert, wenn es wirklich nötig ist.</p>
+          <h3 data-de="Zurücklehnen" data-en="Sit back">Zurücklehnen</h3>
+          <p data-de="Ab jetzt kümmert sich Frau Maier. Sie werden nur noch kontaktiert, wenn es wirklich nötig ist." data-en="From now on Frau Maier takes care of things. You will only be contacted when it's truly necessary.">Ab jetzt kümmert sich Frau Maier. Sie werden nur noch kontaktiert, wenn es wirklich nötig ist.</p>
         </div>
       </div>
     </div>
@@ -913,9 +913,9 @@
     <div class="container">
       <div class="cta-card fade-up">
         <span class="moon">🌙</span>
-        <h2>Frau Maier <span class="water-text">schläft nie</span></h2>
-        <p>Während Sie ruhig schlafen, ist Frau Maier wach. Für Ihre Mieter, Ihr Gebäude, Ihren Seelenfrieden.</p>
-        <a href="mailto:hallofraumaier@msbls.de" class="btn-primary">Jetzt kennenlernen <span>→</span></a>
+        <h2 data-de="Frau Maier &lt;span class=&quot;water-text&quot;&gt;schläft nie&lt;/span&gt;" data-en="Frau Maier &lt;span class=&quot;water-text&quot;&gt;never sleeps&lt;/span&gt;">Frau Maier <span class="water-text">schläft nie</span></h2>
+        <p data-de="Während Sie ruhig schlafen, ist Frau Maier wach. Für Ihre Mieter, Ihr Gebäude, Ihren Seelenfrieden." data-en="While you sleep soundly, Frau Maier is awake. For your tenants, your building, your peace of mind.">Während Sie ruhig schlafen, ist Frau Maier wach. Für Ihre Mieter, Ihr Gebäude, Ihren Seelenfrieden.</p>
+        <a href="mailto:hallofraumaier@msbls.de" class="btn-primary" data-de="Jetzt kennenlernen →" data-en="Meet her now →">Jetzt kennenlernen <span>→</span></a>
       </div>
     </div>
   </section>
@@ -926,10 +926,14 @@
       <div class="footer-left">
         &copy; 2026 Hallo Frau Maier &middot; <a href="mailto:hallofraumaier@msbls.de">hallofraumaier@msbls.de</a>
       </div>
-      <div class="footer-right">
+      <div class="footer-right" data-de="KI-gestützte Hausverwaltung" data-en="AI-powered property management">
         KI-gestützte Hausverwaltung
       </div>
     </div>
+    <div style="text-align:center;margin-top:16px;">
+      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-light,#aaa);color:var(--text-light,#aaa);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-light,#aaa);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+    </div>
   </footer>
 
   <script>
@@ -951,5 +955,6 @@
     document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
   </script>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/heygoldi.de/index.html

@@ -407,26 +407,26 @@
         <span class="bear">🧸</span>
         Hey <span class="goldi">Goldi</span>!
       </div>
-      <a href="#kontakt">Hallo sagen</a>
+      <a href="#kontakt" data-de="Hallo sagen" data-en="Say hello">Hallo sagen</a>
     </div>
   </nav>
 
   <section class="hero">
     <div class="hero-bear">🧸</div>
     <h1><span class="hey">Hey </span><span class="goldi">Goldi</span><span class="excl">!</span></h1>
-    <p class="hero-sub">
+    <p class="hero-sub" data-de="Dein &lt;strong&gt;freundlicher KI-Begleiter&lt;/strong&gt;.&lt;br&gt; Immer da. Immer geduldig.&lt;br&gt; Wie ein guter Freund, der alles erklärt." data-en="Your &lt;strong&gt;friendly AI companion&lt;/strong&gt;.&lt;br&gt; Always there. Always patient.&lt;br&gt; Like a good friend who explains everything.">
       Dein <strong>freundlicher KI-Begleiter</strong>.<br>
       Immer da. Immer geduldig.<br>
       Wie ein guter Freund, der alles erklärt.
     </p>
-    <a href="#kontakt" class="cta-big">
+    <a href="#kontakt" class="cta-big" data-de="🧸 Goldi kennenlernen" data-en="🧸 Meet Goldi">
       🧸 Goldi kennenlernen
     </a>
   </section>
 
   <div class="intro">
     <div class="container">
-      <p class="intro-text">
+      <p class="intro-text" data-de="Technik muss nicht &lt;strong&gt;kompliziert&lt;/strong&gt; sein.&lt;br&gt; &lt;span class=&quot;goldi&quot;&gt;Goldi&lt;/span&gt; erklärt alles in &lt;strong&gt;einfachen Worten&lt;/strong&gt;.&lt;br&gt; Kein Fachchinesisch. Keine Hektik.&lt;br&gt; Nur ein &lt;strong&gt;freundliches Gespräch&lt;/strong&gt;." data-en="Technology doesn't have to be &lt;strong&gt;complicated&lt;/strong&gt;.&lt;br&gt; &lt;span class=&quot;goldi&quot;&gt;Goldi&lt;/span&gt; explains everything in &lt;strong&gt;simple words&lt;/strong&gt;.&lt;br&gt; No jargon. No rushing.&lt;br&gt; Just a &lt;strong&gt;friendly conversation&lt;/strong&gt;.">
         Technik muss nicht <strong>kompliziert</strong> sein.<br>
         <span class="goldi">Goldi</span> erklärt alles in <strong>einfachen Worten</strong>.<br>
         Kein Fachchinesisch. Keine Hektik.<br>
@@ -438,8 +438,8 @@
   <section id="features">
     <div class="container">
       <div class="section-emoji">✨</div>
-      <h2>Was Goldi alles kann</h2>
-      <div class="section-desc">
+      <h2 data-de="Was Goldi alles kann" data-en="Everything Goldi can do">Was Goldi alles kann</h2>
+      <div class="section-desc" data-de="Goldi hilft dir bei allem, was im Alltag anfällt. Geduldig, verständlich und immer freundlich." data-en="Goldi helps you with everything that comes up in daily life. Patient, understandable and always friendly.">
         Goldi hilft dir bei allem, was im Alltag anfällt.
         Geduldig, verständlich und immer freundlich.
       </div>
@@ -447,38 +447,38 @@
       <div class="features-grid">
         <div class="feature-card">
           <div class="feature-emoji">💬</div>
-          <h3>Einfach plaudern</h3>
-          <p>Frag Goldi was du möchtest. Zum Wetter, zu Rezepten, zur Nachrichten-Lage. Goldi antwortet so, dass es Spaß macht.</p>
+          <h3 data-de="Einfach plaudern" data-en="Just chat">Einfach plaudern</h3>
+          <p data-de="Frag Goldi was du möchtest. Zum Wetter, zu Rezepten, zur Nachrichten-Lage. Goldi antwortet so, dass es Spaß macht." data-en="Ask Goldi whatever you like. About the weather, recipes, current news. Goldi answers in a way that's fun.">Frag Goldi was du möchtest. Zum Wetter, zu Rezepten, zur Nachrichten-Lage. Goldi antwortet so, dass es Spaß macht.</p>
         </div>
 
         <div class="feature-card">
           <div class="feature-emoji">📱</div>
-          <h3>Technik-Hilfe</h3>
-          <p>Das Handy spinnt? Die App macht Probleme? Goldi erklärt Schritt für Schritt, was zu tun ist. In deinem Tempo.</p>
+          <h3 data-de="Technik-Hilfe" data-en="Tech help">Technik-Hilfe</h3>
+          <p data-de="Das Handy spinnt? Die App macht Probleme? Goldi erklärt Schritt für Schritt, was zu tun ist. In deinem Tempo." data-en="Phone acting up? App giving trouble? Goldi explains step by step what to do. At your own pace.">Das Handy spinnt? Die App macht Probleme? Goldi erklärt Schritt für Schritt, was zu tun ist. In deinem Tempo.</p>
         </div>
 
         <div class="feature-card">
           <div class="feature-emoji">📝</div>
-          <h3>Briefe & Texte</h3>
-          <p>Goldi hilft beim Schreiben. Ob Kündigung, Beschwerde oder Geburtstagsgruß — verständlich und auf den Punkt.</p>
+          <h3 data-de="Briefe &amp; Texte" data-en="Letters &amp; texts">Briefe &amp; Texte</h3>
+          <p data-de="Goldi hilft beim Schreiben. Ob Kündigung, Beschwerde oder Geburtstagsgruß — verständlich und auf den Punkt." data-en="Goldi helps with writing. Whether a notice, complaint or birthday greeting — clear and to the point.">Goldi hilft beim Schreiben. Ob Kündigung, Beschwerde oder Geburtstagsgruß — verständlich und auf den Punkt.</p>
         </div>
 
         <div class="feature-card">
           <div class="feature-emoji">🧠</div>
-          <h3>Gedächtnisstütze</h3>
-          <p>Goldi merkt sich, was dir wichtig ist. Arzttermine, Geburtstage, Einkaufslisten — alles sicher aufgehoben.</p>
+          <h3 data-de="Gedächtnisstütze" data-en="Memory aid">Gedächtnisstütze</h3>
+          <p data-de="Goldi merkt sich, was dir wichtig ist. Arzttermine, Geburtstage, Einkaufslisten — alles sicher aufgehoben." data-en="Goldi remembers what matters to you. Doctor's appointments, birthdays, shopping lists — all safely stored.">Goldi merkt sich, was dir wichtig ist. Arzttermine, Geburtstage, Einkaufslisten — alles sicher aufgehoben.</p>
         </div>
 
         <div class="feature-card">
           <div class="feature-emoji">📖</div>
-          <h3>Geschichten & Rätsel</h3>
-          <p>Langeweile? Goldi erzählt Geschichten, stellt Quizfragen oder liest dir etwas vor. Unterhaltung, wann immer du magst.</p>
+          <h3 data-de="Geschichten &amp; Rätsel" data-en="Stories &amp; puzzles">Geschichten &amp; Rätsel</h3>
+          <p data-de="Langeweile? Goldi erzählt Geschichten, stellt Quizfragen oder liest dir etwas vor. Unterhaltung, wann immer du magst." data-en="Bored? Goldi tells stories, asks quiz questions or reads to you. Entertainment whenever you like.">Langeweile? Goldi erzählt Geschichten, stellt Quizfragen oder liest dir etwas vor. Unterhaltung, wann immer du magst.</p>
         </div>
 
         <div class="feature-card">
           <div class="feature-emoji">❤️</div>
-          <h3>Einfach zuhören</h3>
-          <p>Manchmal braucht man jemanden zum Reden. Goldi hört zu, ohne zu urteilen. Und hat immer ein offenes Ohr.</p>
+          <h3 data-de="Einfach zuhören" data-en="Just listen">Einfach zuhören</h3>
+          <p data-de="Manchmal braucht man jemanden zum Reden. Goldi hört zu, ohne zu urteilen. Und hat immer ein offenes Ohr." data-en="Sometimes you just need someone to talk to. Goldi listens without judging. And always has an open ear.">Manchmal braucht man jemanden zum Reden. Goldi hört zu, ohne zu urteilen. Und hat immer ein offenes Ohr.</p>
         </div>
       </div>
     </div>
@@ -487,8 +487,8 @@
   <section class="steps-section">
     <div class="container">
       <div class="section-emoji">👋</div>
-      <h2>So einfach geht's</h2>
-      <div class="section-desc">
+      <h2 data-de="So einfach geht's" data-en="It's that simple">So einfach geht's</h2>
+      <div class="section-desc" data-de="Drei Schritte. Mehr braucht es nicht." data-en="Three steps. That's all it takes.">
         Drei Schritte. Mehr braucht es nicht.
       </div>
 
@@ -496,24 +496,24 @@
         <div class="step">
           <div class="step-number">1</div>
           <div class="step-body">
-            <h3>Sag "Hey Goldi!"</h3>
-            <p>Einfach ansprechen — per Handy, Tablet oder Computer. Goldi ist sofort da und freut sich.</p>
+            <h3 data-de="Sag &quot;Hey Goldi!&quot;" data-en="Say &quot;Hey Goldi!&quot;">Sag "Hey Goldi!"</h3>
+            <p data-de="Einfach ansprechen — per Handy, Tablet oder Computer. Goldi ist sofort da und freut sich." data-en="Just speak up — by phone, tablet or computer. Goldi is immediately there and happy to help.">Einfach ansprechen — per Handy, Tablet oder Computer. Goldi ist sofort da und freut sich.</p>
           </div>
         </div>
 
         <div class="step">
           <div class="step-number">2</div>
           <div class="step-body">
-            <h3>Stell deine Frage</h3>
-            <p>Was auch immer dich beschäftigt. Goldi versteht dich, auch wenn du nicht die perfekten Worte findest.</p>
+            <h3 data-de="Stell deine Frage" data-en="Ask your question">Stell deine Frage</h3>
+            <p data-de="Was auch immer dich beschäftigt. Goldi versteht dich, auch wenn du nicht die perfekten Worte findest." data-en="Whatever is on your mind. Goldi understands you, even if you can't find the perfect words.">Was auch immer dich beschäftigt. Goldi versteht dich, auch wenn du nicht die perfekten Worte findest.</p>
           </div>
         </div>
 
         <div class="step">
           <div class="step-number">3</div>
           <div class="step-body">
-            <h3>Goldi antwortet</h3>
-            <p>Klar, freundlich, verständlich. Und wenn etwas unklar ist: einfach nochmal fragen. Goldi erklärt es gerne anders.</p>
+            <h3 data-de="Goldi antwortet" data-en="Goldi answers">Goldi antwortet</h3>
+            <p data-de="Klar, freundlich, verständlich. Und wenn etwas unklar ist: einfach nochmal fragen. Goldi erklärt es gerne anders." data-en="Clear, friendly, understandable. And if something is unclear: just ask again. Goldi is happy to explain it differently.">Klar, freundlich, verständlich. Und wenn etwas unklar ist: einfach nochmal fragen. Goldi erklärt es gerne anders.</p>
           </div>
         </div>
       </div>
@@ -523,37 +523,37 @@
   <div class="testimonial-section">
     <div class="container">
       <div class="section-emoji">💛</div>
-      <p class="testimonial-quote">
+      <p class="testimonial-quote" data-de="&quot;Endlich jemand, der mir alles in Ruhe erklärt. Ohne dass ich mich dumm fühle.&quot;" data-en="&quot;Finally someone who explains everything to me calmly. Without making me feel stupid.&quot;">
         "Endlich jemand, der mir alles in Ruhe erklärt.
         Ohne dass ich mich dumm fühle."
       </p>
-      <p class="testimonial-author">— So soll es sich anfühlen.</p>
+      <p class="testimonial-author" data-de="— So soll es sich anfühlen." data-en="— That's how it should feel.">— So soll es sich anfühlen.</p>
     </div>
   </div>
 
   <div class="reassurance">
     <div class="container">
-      <h2>Das versprechen wir</h2>
+      <h2 data-de="Das versprechen wir" data-en="Our promise">Das versprechen wir</h2>
       <div class="reassurance-items">
         <div class="reassurance-item">
           <div class="reassurance-emoji">🔒</div>
-          <div class="reassurance-text">Privat & sicher</div>
-          <div class="reassurance-sub">Deine Daten bleiben bei dir</div>
+          <div class="reassurance-text" data-de="Privat &amp; sicher" data-en="Private &amp; secure">Privat &amp; sicher</div>
+          <div class="reassurance-sub" data-de="Deine Daten bleiben bei dir" data-en="Your data stays with you">Deine Daten bleiben bei dir</div>
         </div>
         <div class="reassurance-item">
           <div class="reassurance-emoji">🐢</div>
-          <div class="reassurance-text">In deinem Tempo</div>
-          <div class="reassurance-sub">Keine Hektik, kein Druck</div>
+          <div class="reassurance-text" data-de="In deinem Tempo" data-en="At your pace">In deinem Tempo</div>
+          <div class="reassurance-sub" data-de="Keine Hektik, kein Druck" data-en="No rushing, no pressure">Keine Hektik, kein Druck</div>
         </div>
         <div class="reassurance-item">
           <div class="reassurance-emoji">😊</div>
-          <div class="reassurance-text">Immer freundlich</div>
-          <div class="reassurance-sub">Goldi wird nie ungeduldig</div>
+          <div class="reassurance-text" data-de="Immer freundlich" data-en="Always friendly">Immer freundlich</div>
+          <div class="reassurance-sub" data-de="Goldi wird nie ungeduldig" data-en="Goldi never gets impatient">Goldi wird nie ungeduldig</div>
         </div>
         <div class="reassurance-item">
           <div class="reassurance-emoji">🇩🇪</div>
-          <div class="reassurance-text">Auf Deutsch</div>
-          <div class="reassurance-sub">Kein Fachchinesisch</div>
+          <div class="reassurance-text" data-de="Auf Deutsch" data-en="In German">Auf Deutsch</div>
+          <div class="reassurance-sub" data-de="Kein Fachchinesisch" data-en="No jargon">Kein Fachchinesisch</div>
         </div>
       </div>
     </div>
@@ -562,12 +562,12 @@
   <section id="kontakt" class="cta-section">
     <div class="container">
       <div class="section-emoji">🧸</div>
-      <h2>Sag <span style="color:var(--gold);">Hallo</span>!</h2>
-      <p>
+      <h2 data-de="Sag &lt;span style=&quot;color:var(--gold);&quot;&gt;Hallo&lt;/span&gt;!" data-en="Say &lt;span style=&quot;color:var(--gold);&quot;&gt;Hello&lt;/span&gt;!">Sag <span style="color:var(--gold);">Hallo</span>!</h2>
+      <p data-de="Goldi freut sich, dich kennenzulernen. Schreib uns — und wir bringen euch zusammen." data-en="Goldi looks forward to meeting you. Write to us — and we'll bring you together.">
         Goldi freut sich, dich kennenzulernen.
         Schreib uns — und wir bringen euch zusammen.
       </p>
-      <a href="mailto:heygoldi@msbls.de?subject=Hey%20Goldi!%20—%20Hallo" class="cta-big">
+      <a href="mailto:heygoldi@msbls.de?subject=Hey%20Goldi!%20—%20Hallo" class="cta-big" data-de="🧸 heygoldi@msbls.de" data-en="🧸 heygoldi@msbls.de">
         🧸 heygoldi@msbls.de
       </a>
     </div>
@@ -575,9 +575,14 @@
 
   <footer>
     <div class="footer-bear">🧸</div>
-    <p class="footer-text">Hey Goldi! — Dein freundlicher KI-Begleiter.</p>
-    <p class="footer-copy">&copy; 2026 heygoldi.de — ein Projekt von <a href="https://msbls.de">msbls.de</a></p>
+    <p class="footer-text" data-de="Hey Goldi! — Dein freundlicher KI-Begleiter." data-en="Hey Goldi! — Your friendly AI companion.">Hey Goldi! — Dein freundlicher KI-Begleiter.</p>
+    <p class="footer-copy">&copy; 2026 heygoldi.de — <span data-de="ein Projekt von" data-en="a project by">ein Projekt von</span> <a href="https://msbls.de">msbls.de</a></p>
+    <div style="text-align:center;margin-top:16px;">
+      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid rgba(251,240,212,0.4);color:rgba(251,240,212,0.6);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:rgba(251,240,212,0.4);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+    </div>
   </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/ichbinaufbali.de/index.html

@@ -100,8 +100,13 @@
     <div class="icon">🌴</div>
     <h1>Ich bin auf B<span class="accent">a</span>l<span class="accent">i</span>.</h1>
     <div class="divider"></div>
-    <p class="subtitle">Und du so?</p>
+    <p class="subtitle" data-de="Und du so?" data-en="And you?">Und du so?</p>
     <p class="footer">ichbinaufb<span style="color:var(--accent)">AI</span>.de</p>
   </div>
+  <div style="text-align:center;margin-top:16px;">
+    <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+    <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+  </div>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/ichbinaufbarley.de/index.html

@@ -126,11 +126,16 @@
     <div class="grain">🌾</div>
     <h1>Ich bin auf <span class="accent">Barley</span>.</h1>
     <div class="divider"></div>
-    <p class="subtitle">
+    <p class="subtitle" data-de="Und du so?" data-en="And you?">
       Und du so?
     </p>
-    <a href="https://barley.de" class="cta">Barley entdecken</a>
+    <a href="https://barley.de" class="cta" data-de="Barley entdecken" data-en="Discover Barley">Barley entdecken</a>
     <p class="footer">ichbinaufbarley.de</p>
+    <div style="text-align:center;margin-top:16px;">
+      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+    </div>
   </div>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/ichbinotto.de/index.html

@@ -435,7 +435,8 @@
     <div class="container">
       <p data-de='<span class="otto">Otto</span> — mai-otto.de — ein Projekt von <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a>'
          data-en='<span class="otto">Otto</span> — mai-otto.de — a project by <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a>'><span class="otto">Otto</span> — mai-otto.de — ein Projekt von <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a></p>
-      <button data-i18n-toggle style="background:none;border:1px solid var(--border);color:var(--text-muted);font-family:'Space Grotesk',sans-serif;font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;margin-top:12px;transition:color 0.2s,border-color 0.2s;" onmouseover="this.style.color='var(--text)';this.style.borderColor='var(--text-muted)'" onmouseout="this.style.color='var(--text-muted)';this.style.borderColor='var(--border)'">EN</button>
+      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--border);color:var(--text-muted);font-family:'Space Grotesk',sans-serif;font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;margin-top:12px;transition:color 0.2s,border-color 0.2s;" onmouseover="this.style.color='var(--text)';this.style.borderColor='var(--text-muted)'" onmouseout="this.style.color='var(--text-muted)';this.style.borderColor='var(--border)'">EN</button>
+      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted);font-family:'Space Grotesk',sans-serif;font-size:0.6rem;letter-spacing:0.05em;opacity:0.5;">Maschinell übersetzt</small>
     </div>
   </footer>
 

sites/insain.de/index.html

@@ -53,8 +53,10 @@
     <div class="icon">⚡</div>
     <h1>ins<span class='accent'>AI</span>n.</h1>
     <div class="divider"></div>
-    <p class="subtitle">Wahnsinnig intelligent.</p>
+    <p class="subtitle" data-de="Wahnsinnig intelligent." data-en="Insanely intelligent.">Wahnsinnig intelligent.</p>
     <p class="footer">insAIn.de</p>
+    <p class="footer" style="margin-top:12px;"><button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted);color:var(--text-muted);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button><br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small></p>
   </div>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/julietensity.de/index.html

@@ -439,28 +439,28 @@
 
   <section class="hero">
     <div class="hero-content">
-      <div class="gamertag">// player profile</div>
+      <div class="gamertag" data-de="// Spielerprofil" data-en="// player profile">// player profile</div>
       <h1>JULIETENSITY</h1>
-      <div class="subtitle">Beyond All Reason</div>
+      <div class="subtitle" data-de="Beyond All Reason" data-en="Beyond All Reason">Beyond All Reason</div>
 
       <div class="stats-bar">
         <div class="stat">
           <div class="stat-value">BAR</div>
-          <div class="stat-label">Main Game</div>
+          <div class="stat-label" data-de="Hauptspiel" data-en="Main Game">Main Game</div>
         </div>
         <div class="stat">
           <div class="stat-value">RTS</div>
-          <div class="stat-label">Genre</div>
+          <div class="stat-label" data-de="Genre" data-en="Genre">Genre</div>
         </div>
         <div class="stat">
           <div class="stat-value">DE</div>
-          <div class="stat-label">Region</div>
+          <div class="stat-label" data-de="Region" data-en="Region">Region</div>
         </div>
       </div>
 
       <div class="game-badge">
         <span class="dot"></span>
-        Online
+        <span data-de="Online" data-en="Online">Online</span>
       </div>
     </div>
   </section>
@@ -469,9 +469,9 @@
 
   <section>
     <div class="container">
-      <div class="section-label">// loadout</div>
-      <h2>Play Style</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="// Ausrüstung" data-en="// loadout">// loadout</div>
+      <h2 data-de="Spielstil" data-en="Play Style">Play Style</h2>
+      <div class="section-desc" data-de="Beyond All Reason ist kein Spiel für Ungeduldige. Es belohnt die, die vorausdenken, sich schnell anpassen und nie aufhören sich zu bewegen." data-en="Beyond All Reason is not a game for the impatient. It rewards those who think ahead, adapt fast, and never stop moving.">
         Beyond All Reason is not a game for the impatient.
         It rewards those who think ahead, adapt fast, and never stop moving.
       </div>
@@ -479,32 +479,32 @@
       <div class="card-grid">
         <div class="card">
           <div class="card-icon">⚡</div>
-          <h3>Rush & Panic</h3>
-          <p>Map control? Eher Map confusion. Erst expandieren, dann vergessen wo die eigene Base war. Klassiker.</p>
+          <h3 data-de="Rush &amp; Panic" data-en="Rush &amp; Panic">Rush &amp; Panic</h3>
+          <p data-de="Map control? Eher Map confusion. Erst expandieren, dann vergessen wo die eigene Base war. Klassiker." data-en="Map control? More like map confusion. First expand, then forget where your own base was. Classic.">Map control? Eher Map confusion. Erst expandieren, dann vergessen wo die eigene Base war. Klassiker.</p>
         </div>
 
         <div class="card">
           <div class="card-icon">🔧</div>
-          <h3>"Eco Engine"</h3>
-          <p>Metal und Energy sind alles. Leider ist beides meistens bei Null. Aber die Absicht zaehlt.</p>
+          <h3 data-de="&quot;Eco Engine&quot;" data-en="&quot;Eco Engine&quot;">"Eco Engine"</h3>
+          <p data-de="Metal und Energy sind alles. Leider ist beides meistens bei Null. Aber die Absicht zaehlt." data-en="Metal and energy are everything. Unfortunately both are usually at zero. But the intention counts.">Metal und Energy sind alles. Leider ist beides meistens bei Null. Aber die Absicht zaehlt.</p>
         </div>
 
         <div class="card">
           <div class="card-icon">🎯</div>
-          <h3>Micro... naja</h3>
-          <p>Unit Control trennt gut von grossartig. Julietensity trennt Units voneinander. Versehentlich. Im eigenen Gebiet.</p>
+          <h3 data-de="Micro... naja" data-en="Micro... well">Micro... naja</h3>
+          <p data-de="Unit Control trennt gut von grossartig. Julietensity trennt Units voneinander. Versehentlich. Im eigenen Gebiet." data-en="Unit control separates good from great. Julietensity separates units from each other. Accidentally. In friendly territory.">Unit Control trennt gut von grossartig. Julietensity trennt Units voneinander. Versehentlich. Im eigenen Gebiet.</p>
         </div>
 
         <div class="card">
           <div class="card-icon">💥</div>
-          <h3>Commander Yolo</h3>
-          <p>Warum den Commander schuetzen wenn man ihn auch direkt in die feindliche Armee laufen lassen kann? Intimidation-Taktik. Oder Unfall.</p>
+          <h3 data-de="Commander Yolo" data-en="Commander Yolo">Commander Yolo</h3>
+          <p data-de="Warum den Commander schuetzen wenn man ihn auch direkt in die feindliche Armee laufen lassen kann? Intimidation-Taktik. Oder Unfall." data-en="Why protect the commander when you can just walk him straight into the enemy army? Intimidation tactic. Or accident.">Warum den Commander schuetzen wenn man ihn auch direkt in die feindliche Armee laufen lassen kann? Intimidation-Taktik. Oder Unfall.</p>
         </div>
 
         <div class="card" style="grid-column: 1 / -1; border-color: var(--pink); background: linear-gradient(135deg, var(--bg-card), rgba(255,45,120,0.03));">
           <div class="card-icon">🔫</div>
-          <h3>D-Gun Status: ERROR</h3>
-          <p>Die D-Gun — die maechtigste Waffe im Spiel. Ein Schuss, alles weg. Theoretisch. Bei Julietensity ist die D-Gun eher ein Mythos. Sie existiert, sie ist da, aber sie geht einfach nicht. Falsche Taste? Falscher Moment? Falsche Dimension? Niemand weiss es. Gegner stehen direkt vor dem Commander und die D-Gun macht... nichts. Manche sagen es ist ein Bug. Julie sagt es ist ein Feature.</p>
+          <h3 data-de="D-Gun Status: FEHLER" data-en="D-Gun Status: ERROR">D-Gun Status: ERROR</h3>
+          <p data-de="Die D-Gun — die maechtigste Waffe im Spiel. Ein Schuss, alles weg. Theoretisch. Bei Julietensity ist die D-Gun eher ein Mythos. Sie existiert, sie ist da, aber sie geht einfach nicht. Falsche Taste? Falscher Moment? Falsche Dimension? Niemand weiss es. Gegner stehen direkt vor dem Commander und die D-Gun macht... nichts. Manche sagen es ist ein Bug. Julie sagt es ist ein Feature." data-en="The D-Gun — the most powerful weapon in the game. One shot, everything gone. Theoretically. For Julietensity the D-Gun is more of a myth. It exists, it's there, but it just doesn't fire. Wrong key? Wrong moment? Wrong dimension? Nobody knows. Enemies stand right in front of the commander and the D-Gun does... nothing. Some say it's a bug. Julie says it's a feature.">Die D-Gun — die maechtigste Waffe im Spiel. Ein Schuss, alles weg. Theoretisch. Bei Julietensity ist die D-Gun eher ein Mythos. Sie existiert, sie ist da, aber sie geht einfach nicht. Falsche Taste? Falscher Moment? Falsche Dimension? Niemand weiss es. Gegner stehen direkt vor dem Commander und die D-Gun macht... nichts. Manche sagen es ist ein Bug. Julie sagt es ist ein Feature.</p>
         </div>
       </div>
     </div>
@@ -514,25 +514,25 @@
 
   <section>
     <div class="container">
-      <div class="section-label">// about</div>
-      <h2>The Player</h2>
+      <div class="section-label" data-de="// über" data-en="// about">// about</div>
+      <h2 data-de="Die Spielerin" data-en="The Player">The Player</h2>
 
       <div class="about-content">
         <div class="about-text">
-          <p>
+          <p data-de="&lt;span class=&quot;highlight&quot;&gt;Julietensity&lt;/span&gt; — wenn Juliane zockt, dann... naja, sagen wir mal: mit Leidenschaft. Beyond All Reason ist kein Casual Game. Es ist Echtzeit-Strategie in Reinform: hunderte Units, riesige Maps, permanenter Druck." data-en="&lt;span class=&quot;highlight&quot;&gt;Julietensity&lt;/span&gt; — when Juliane plays, then... well, let's say: with passion. Beyond All Reason is not a casual game. It is real-time strategy in its purest form: hundreds of units, huge maps, constant pressure.">
             <span class="highlight">Julietensity</span> — wenn Juliane zockt,
             dann... naja, sagen wir mal: mit Leidenschaft.
             Beyond All Reason ist kein Casual Game.
             Es ist Echtzeit-Strategie in Reinform: hunderte Units,
             riesige Maps, permanenter Druck.
           </p>
-          <p>
+          <p data-de="Der Commander? Eher ein Vorschlag als ein Werkzeug. Manchmal steht er vorne. Manchmal ganz weit vorne. Direkt im gegnerischen Feuer. Absichtlich? Natuerlich. &quot;Strategie&quot; nennt man das." data-en="The commander? More of a suggestion than a tool. Sometimes up front. Sometimes way up front. Right in enemy fire. Intentional? Of course. That's called 'strategy'.">
             Der Commander? Eher ein Vorschlag als ein Werkzeug.
             Manchmal steht er vorne. Manchmal ganz weit vorne.
             Direkt im gegnerischen Feuer. Absichtlich? Natuerlich.
             "Strategie" nennt man das.
           </p>
-          <p>
+          <p data-de="Abends auf dem Schlachtfeld — mit dem festen Willen, irgendwann auch mal zu gewinnen. Die perfekte Balance zwischen Ehrgeiz und kreativem Scheitern." data-en="Evenings on the battlefield — with the firm intention of winning at some point. The perfect balance between ambition and creative failure.">
             Abends auf dem Schlachtfeld — mit dem festen Willen,
             irgendwann auch mal zu gewinnen. Die perfekte Balance
             zwischen Ehrgeiz und kreativem Scheitern.
@@ -540,24 +540,24 @@
         </div>
         <div class="detail-list">
           <div class="detail-item">
-            <div class="detail-item-label">Game</div>
+            <div class="detail-item-label" data-de="Spiel" data-en="Game">Game</div>
             <div class="detail-item-value">Beyond All Reason (BAR)</div>
           </div>
           <div class="detail-item">
-            <div class="detail-item-label">Genre</div>
+            <div class="detail-item-label" data-de="Genre" data-en="Genre">Genre</div>
             <div class="detail-item-value">Real-Time Strategy (RTS)</div>
           </div>
           <div class="detail-item">
-            <div class="detail-item-label">Engine</div>
+            <div class="detail-item-label" data-de="Engine" data-en="Engine">Engine</div>
             <div class="detail-item-value">Recoil (Spring Engine Fork)</div>
           </div>
           <div class="detail-item">
-            <div class="detail-item-label">Inspiration</div>
+            <div class="detail-item-label" data-de="Inspiration" data-en="Inspiration">Inspiration</div>
             <div class="detail-item-value">Total Annihilation / Supreme Commander</div>
           </div>
           <div class="detail-item">
-            <div class="detail-item-label">Price</div>
-            <div class="detail-item-value">Free & Open Source</div>
+            <div class="detail-item-label" data-de="Preis" data-en="Price">Price</div>
+            <div class="detail-item-value" data-de="Kostenlos &amp; Open Source" data-en="Free &amp; Open Source">Free &amp; Open Source</div>
           </div>
         </div>
       </div>
@@ -568,12 +568,12 @@
 
   <section class="cta-section">
     <div class="container">
-      <div class="section-label">// join the fight</div>
+      <div class="section-label" data-de="// in den Kampf" data-en="// join the fight">// join the fight</div>
       <h2>GG?</h2>
-      <div class="section-desc" style="margin: 0 auto 40px;">
+      <div class="section-desc" style="margin: 0 auto 40px;" data-de="Beyond All Reason ist kostenlos. Keine Ausreden." data-en="Beyond All Reason is free. No excuses.">
         Beyond All Reason is free. No excuses.
       </div>
-      <a href="https://www.beyondallreason.info/" target="_blank" class="cta-btn">
+      <a href="https://www.beyondallreason.info/" target="_blank" class="cta-btn" data-de="BAR herunterladen" data-en="Download BAR">
         Download BAR
       </a>
     </div>
@@ -582,8 +582,13 @@
   <footer>
     <div class="container">
       <p>julietensity.de</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">DE</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/kainco.de/index.html

@@ -468,26 +468,26 @@
   <nav>
     <div class="container">
       <div class="nav-brand"><span class="hi">K</span>e<span class="hi">I</span>nCo<span class="dim">.de</span></div>
-      <a href="mailto:kainco@msbls.de?subject=KeinCo.de%20%E2%80%94%20Interesse" class="nav-link">Kontakt</a>
+      <a href="mailto:kainco@msbls.de?subject=KeinCo.de%20%E2%80%94%20Interesse" class="nav-link" data-de="Kontakt" data-en="Contact">Kontakt</a>
     </div>
   </nav>
 
   <!-- HERO -->
   <section class="hero">
     <div class="container">
-      <div class="hero-badge">
+      <div class="hero-badge" data-de="Coming Soon" data-en="Coming Soon">
         <span class="dot"></span>
         Coming Soon
       </div>
       <div class="brand-main"><span class="hi">K</span>e<span class="hi">I</span>nCo</div>
       <div class="brand-tld">.de</div>
-      <div class="tagline"><strong>Kein Code.</strong> Nur Ergebnisse.</div>
-      <p class="hero-desc">
+      <div class="tagline" data-de="&lt;strong&gt;Kein Code.&lt;/strong&gt; Nur Ergebnisse." data-en="&lt;strong&gt;No code.&lt;/strong&gt; Just results."><strong>Kein Code.</strong> Nur Ergebnisse.</div>
+      <p class="hero-desc" data-de="Du beschreibst das Problem. KI baut die Loesung. Kein Framework, kein No-Code-Tool, kein Entwickler noetig." data-en="You describe the problem. AI builds the solution. No framework, no no-code tool, no developer needed.">
         Du beschreibst das Problem. KI baut die Loesung. Kein Framework, kein No-Code-Tool, kein Entwickler noetig.
       </p>
       <div class="cta-row">
-        <a href="mailto:kainco@msbls.de?subject=KeinCo.de%20%E2%80%94%20Interesse" class="btn btn-accent">Zugang anfragen</a>
-        <a href="#so-gehts" class="btn btn-outline">So funktioniert's</a>
+        <a href="mailto:kainco@msbls.de?subject=KeinCo.de%20%E2%80%94%20Interesse" class="btn btn-accent" data-de="Zugang anfragen" data-en="Request access">Zugang anfragen</a>
+        <a href="#so-gehts" class="btn btn-outline" data-de="So funktioniert's" data-en="How it works">So funktioniert's</a>
       </div>
     </div>
   </section>
@@ -497,33 +497,33 @@
   <!-- PROBLEM / SOLUTION -->
   <section>
     <div class="container">
-      <div class="section-label">Das Problem</div>
-      <h2>Du hast eine Idee. Du brauchst keinen Entwickler.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Das Problem" data-en="The Problem">Das Problem</div>
+      <h2 data-de="Du hast eine Idee. Du brauchst keinen Entwickler." data-en="You have an idea. You don't need a developer.">Du hast eine Idee. Du brauchst keinen Entwickler.</h2>
+      <div class="section-desc" data-de="Bisher hiess Software bauen: Entwickler suchen, Wochen warten, Budget verbrennen. Oder sich durch No-Code-Tools kaempfen, die am Ende doch nicht reichen." data-en="Until now, building software meant: finding developers, waiting weeks, burning budget. Or struggling through no-code tools that never quite cut it.">
         Bisher hiess Software bauen: Entwickler suchen, Wochen warten, Budget verbrennen. Oder sich durch No-Code-Tools kaempfen, die am Ende doch nicht reichen.
       </div>
 
       <div class="contrast">
         <div class="contrast-card old">
-          <div class="contrast-label">Bisher</div>
-          <h3>Der klassische Weg</h3>
+          <div class="contrast-label" data-de="Bisher" data-en="Before">Bisher</div>
+          <h3 data-de="Der klassische Weg" data-en="The classic way">Der klassische Weg</h3>
           <ul>
-            <li>Entwickler briefen</li>
-            <li>Wochen auf Ergebnis warten</li>
-            <li>Aenderungen kosten extra</li>
-            <li>No-Code-Tools mit Workarounds</li>
-            <li>Ergebnis passt nie ganz</li>
+            <li data-de="Entwickler briefen" data-en="Brief a developer">Entwickler briefen</li>
+            <li data-de="Wochen auf Ergebnis warten" data-en="Wait weeks for results">Wochen auf Ergebnis warten</li>
+            <li data-de="Aenderungen kosten extra" data-en="Changes cost extra">Aenderungen kosten extra</li>
+            <li data-de="No-Code-Tools mit Workarounds" data-en="No-code tools with workarounds">No-Code-Tools mit Workarounds</li>
+            <li data-de="Ergebnis passt nie ganz" data-en="Result never quite fits">Ergebnis passt nie ganz</li>
           </ul>
         </div>
         <div class="contrast-card new">
-          <div class="contrast-label">Mit KeinCo.de</div>
-          <h3>Der KI-Weg</h3>
+          <div class="contrast-label" data-de="Mit KeinCo.de" data-en="With KeinCo.de">Mit KeinCo.de</div>
+          <h3 data-de="Der KI-Weg" data-en="The AI way">Der KI-Weg</h3>
           <ul>
-            <li>Problem beschreiben, fertig</li>
-            <li>Ergebnis in Minuten, nicht Wochen</li>
-            <li>Anpassen durch Feedback</li>
-            <li>Keine Tools lernen</li>
-            <li>Genau das, was du brauchst</li>
+            <li data-de="Problem beschreiben, fertig" data-en="Describe the problem, done">Problem beschreiben, fertig</li>
+            <li data-de="Ergebnis in Minuten, nicht Wochen" data-en="Results in minutes, not weeks">Ergebnis in Minuten, nicht Wochen</li>
+            <li data-de="Anpassen durch Feedback" data-en="Adjust through feedback">Anpassen durch Feedback</li>
+            <li data-de="Keine Tools lernen" data-en="No tools to learn">Keine Tools lernen</li>
+            <li data-de="Genau das, was du brauchst" data-en="Exactly what you need">Genau das, was du brauchst</li>
           </ul>
         </div>
       </div>
@@ -535,27 +535,27 @@
   <!-- HOW IT WORKS -->
   <section id="so-gehts">
     <div class="container">
-      <div class="section-label">So funktioniert's</div>
-      <h2>Drei Schritte. Kein Code.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="So funktioniert's" data-en="How it works">So funktioniert's</div>
+      <h2 data-de="Drei Schritte. Kein Code." data-en="Three steps. No code.">Drei Schritte. Kein Code.</h2>
+      <div class="section-desc" data-de="Du redest. KI arbeitet. Du bekommst das Ergebnis." data-en="You talk. AI works. You get the result.">
         Du redest. KI arbeitet. Du bekommst das Ergebnis.
       </div>
 
       <div class="steps">
         <div class="step">
           <div class="step-number">01</div>
-          <h3>Beschreiben</h3>
-          <p>Erklaer in deinen Worten, was du brauchst. Kein Fachwissen noetig, kein Pflichtenheft, keine Spezifikation.</p>
+          <h3 data-de="Beschreiben" data-en="Describe">Beschreiben</h3>
+          <p data-de="Erklaer in deinen Worten, was du brauchst. Kein Fachwissen noetig, kein Pflichtenheft, keine Spezifikation." data-en="Explain in your own words what you need. No expertise required, no spec sheet, no specification.">Erklaer in deinen Worten, was du brauchst. Kein Fachwissen noetig, kein Pflichtenheft, keine Spezifikation.</p>
         </div>
         <div class="step">
           <div class="step-number">02</div>
-          <h3>KI baut</h3>
-          <p>Kuenstliche Intelligenz entwirft, programmiert und testet die Loesung. Du siehst den Fortschritt und gibst Feedback.</p>
+          <h3 data-de="KI baut" data-en="AI builds">KI baut</h3>
+          <p data-de="Kuenstliche Intelligenz entwirft, programmiert und testet die Loesung. Du siehst den Fortschritt und gibst Feedback." data-en="Artificial intelligence designs, programs and tests the solution. You watch the progress and give feedback.">Kuenstliche Intelligenz entwirft, programmiert und testet die Loesung. Du siehst den Fortschritt und gibst Feedback.</p>
         </div>
         <div class="step">
           <div class="step-number">03</div>
-          <h3>Laeuft</h3>
-          <p>Deine Loesung wird deployed und ist sofort einsatzbereit. Hosting, Wartung, Updates — alles inklusive.</p>
+          <h3 data-de="Laeuft" data-en="Done">Laeuft</h3>
+          <p data-de="Deine Loesung wird deployed und ist sofort einsatzbereit. Hosting, Wartung, Updates — alles inklusive." data-en="Your solution is deployed and immediately ready to use. Hosting, maintenance, updates — all included.">Deine Loesung wird deployed und ist sofort einsatzbereit. Hosting, Wartung, Updates — alles inklusive.</p>
         </div>
       </div>
     </div>
@@ -566,9 +566,9 @@
   <!-- WHAT'S POSSIBLE -->
   <section>
     <div class="container">
-      <div class="section-label">Was moeglich ist</div>
-      <h2>Alles, wofuer man frueher Code brauchte.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Was moeglich ist" data-en="What's possible">Was moeglich ist</div>
+      <h2 data-de="Alles, wofuer man frueher Code brauchte." data-en="Everything that used to require code.">Alles, wofuer man frueher Code brauchte.</h2>
+      <div class="section-desc" data-de="Von der einfachen Landing Page bis zur komplexen Daten-Pipeline. KI kennt keine Grenzen des Drag-and-Drop." data-en="From a simple landing page to a complex data pipeline. AI knows no drag-and-drop limits.">
         Von der einfachen Landing Page bis zur komplexen Daten-Pipeline. KI kennt keine Grenzen des Drag-and-Drop.
       </div>
 
@@ -577,29 +577,29 @@
           <div class="cap-icon">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent)"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
           </div>
-          <h3>Websites und Web-Apps</h3>
-          <p>Landing Pages, Dashboards, interne Tools, Kundenportale — responsive, modern, deployed.</p>
+          <h3 data-de="Websites und Web-Apps" data-en="Websites and web apps">Websites und Web-Apps</h3>
+          <p data-de="Landing Pages, Dashboards, interne Tools, Kundenportale — responsive, modern, deployed." data-en="Landing pages, dashboards, internal tools, customer portals — responsive, modern, deployed.">Landing Pages, Dashboards, interne Tools, Kundenportale — responsive, modern, deployed.</p>
         </div>
         <div class="cap-card">
           <div class="cap-icon">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent)"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
           </div>
-          <h3>Automatisierungen</h3>
-          <p>Wiederkehrende Aufgaben, Workflows, Benachrichtigungen — laeuft im Hintergrund, zuverlaessig, ohne Aufwand.</p>
+          <h3 data-de="Automatisierungen" data-en="Automations">Automatisierungen</h3>
+          <p data-de="Wiederkehrende Aufgaben, Workflows, Benachrichtigungen — laeuft im Hintergrund, zuverlaessig, ohne Aufwand." data-en="Recurring tasks, workflows, notifications — runs in the background, reliably, without effort.">Wiederkehrende Aufgaben, Workflows, Benachrichtigungen — laeuft im Hintergrund, zuverlaessig, ohne Aufwand.</p>
         </div>
         <div class="cap-card">
           <div class="cap-icon">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent)"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
           </div>
-          <h3>Daten-Pipelines</h3>
-          <p>CSVs verarbeiten, APIs anbinden, Datenbanken fuellen. Strukturiert, sauber, automatisch.</p>
+          <h3 data-de="Daten-Pipelines" data-en="Data pipelines">Daten-Pipelines</h3>
+          <p data-de="CSVs verarbeiten, APIs anbinden, Datenbanken fuellen. Strukturiert, sauber, automatisch." data-en="Process CSVs, connect APIs, fill databases. Structured, clean, automatic.">CSVs verarbeiten, APIs anbinden, Datenbanken fuellen. Strukturiert, sauber, automatisch.</p>
         </div>
         <div class="cap-card">
           <div class="cap-icon">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent)"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
           </div>
-          <h3>Integrationen</h3>
-          <p>E-Mail, Kalender, CRM, Slack, APIs — alles verbinden, ohne Zapier, ohne Webhook-Gefummel.</p>
+          <h3 data-de="Integrationen" data-en="Integrations">Integrationen</h3>
+          <p data-de="E-Mail, Kalender, CRM, Slack, APIs — alles verbinden, ohne Zapier, ohne Webhook-Gefummel." data-en="Email, calendar, CRM, Slack, APIs — connect everything, no Zapier, no webhook fiddling.">E-Mail, Kalender, CRM, Slack, APIs — alles verbinden, ohne Zapier, ohne Webhook-Gefummel.</p>
         </div>
       </div>
     </div>
@@ -611,9 +611,11 @@
   <footer>
     <div class="container">
       <div class="footer-brand"><span class="hi">K</span>e<span class="hi">I</span>nCo<span style="color:var(--text-muted)">.de</span></div>
-      <p class="footer-sub">Kein Code. Nur Ergebnisse. — Ein Projekt von msbls.de</p>
+      <p class="footer-sub" data-de="Kein Code. Nur Ergebnisse. — Ein Projekt von msbls.de" data-en="No code. Just results. — A project by msbls.de">Kein Code. Nur Ergebnisse. — Ein Projekt von msbls.de</p>
+      <button data-i18n-toggle style="margin-top:16px;background:none;border:1px solid var(--border);color:var(--text-secondary);padding:6px 14px;border-radius:6px;font-size:0.75rem;cursor:pointer;font-family:inherit;letter-spacing:0.06em;">EN</button>
     </div>
   </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/kainefrage.de/index.html

@@ -491,22 +491,22 @@
   <nav>
     <div class="container">
       <div class="logo">k<span class="ai">AI</span>neFrage</div>
-      <a href="#kontakt">Kontakt</a>
+      <a href="#kontakt" data-de="Kontakt" data-en="Contact">Kontakt</a>
     </div>
   </nav>
 
   <section class="hero">
     <div class="container">
-      <div class="hero-badge">AI_CONSULTING // KEINE FRAGE</div>
+      <div class="hero-badge" data-de="AI_CONSULTING // KEINE FRAGE" data-en="AI_CONSULTING // NO QUESTION">AI_CONSULTING // KEINE FRAGE</div>
       <h1>k<span class="ai">AI</span>neFrage</h1>
-      <div class="hero-sub"><strong>Keine Frage</strong>, ob KI relevant ist. Die Frage ist: <strong>wie</strong>.</div>
-      <p>
+      <div class="hero-sub" data-de="&lt;strong&gt;Keine Frage&lt;/strong&gt;, ob KI relevant ist. Die Frage ist: &lt;strong&gt;wie&lt;/strong&gt;." data-en="&lt;strong&gt;No question&lt;/strong&gt; whether AI is relevant. The question is: &lt;strong&gt;how&lt;/strong&gt;."><strong>Keine Frage</strong>, ob KI relevant ist. Die Frage ist: <strong>wie</strong>.</div>
+      <p data-de="Wir beantworten die KI-Fragen, die andere nicht stellen. Strategie, Implementierung und Klartext — ohne Buzzword-Bingo." data-en="We answer the AI questions others don't ask. Strategy, implementation and plain talk — without buzzword bingo.">
         Wir beantworten die KI-Fragen, die andere nicht stellen.
         Strategie, Implementierung und Klartext — ohne Buzzword-Bingo.
       </p>
       <div class="cta-group">
-        <a href="#kontakt" class="btn btn-primary">Fragen stellen</a>
-        <a href="#antworten" class="btn btn-ghost">Antworten sehen</a>
+        <a href="#kontakt" class="btn btn-primary" data-de="Fragen stellen" data-en="Ask questions">Fragen stellen</a>
+        <a href="#antworten" class="btn btn-ghost" data-de="Antworten sehen" data-en="See answers">Antworten sehen</a>
       </div>
     </div>
   </section>
@@ -515,7 +515,7 @@
 
   <div class="statement">
     <div class="container">
-      <p class="statement-text">
+      <p class="statement-text" data-de="Die meisten Unternehmen haben &lt;strong&gt;keine KI-Strategie&lt;/strong&gt;.&lt;br&gt; Sie haben eine &lt;strong&gt;PowerPoint&lt;/strong&gt; mit dem Wort &lt;span class=&quot;ai&quot;&gt;KI&lt;/span&gt; drin.&lt;br&gt; Das ist nicht dasselbe." data-en="Most companies don't have &lt;strong&gt;an AI strategy&lt;/strong&gt;.&lt;br&gt; They have a &lt;strong&gt;PowerPoint&lt;/strong&gt; with the word &lt;span class=&quot;ai&quot;&gt;AI&lt;/span&gt; in it.&lt;br&gt; That's not the same thing.">
         Die meisten Unternehmen haben <strong>keine KI-Strategie</strong>.<br>
         Sie haben eine <strong>PowerPoint</strong> mit dem Wort <span class="ai">KI</span> drin.<br>
         Das ist nicht dasselbe.
@@ -527,42 +527,42 @@
 
   <section id="antworten">
     <div class="container">
-      <div class="section-label">// Antworten</div>
-      <h2>Die Fragen, die wirklich zählen.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="// Antworten" data-en="// Answers">// Antworten</div>
+      <h2 data-de="Die Fragen, die wirklich zählen." data-en="The questions that really matter.">Die Fragen, die wirklich zählen.</h2>
+      <div class="section-desc" data-de="Jedes Unternehmen stellt sich dieselben Fragen zur KI. Die Antworten sind bei jedem anders — und genau da setzen wir an." data-en="Every company asks the same questions about AI. The answers differ for each — and that's exactly where we start.">
         Jedes Unternehmen stellt sich dieselben Fragen zur KI.
         Die Antworten sind bei jedem anders — und genau da setzen wir an.
       </div>
 
       <div class="qa-grid">
         <div class="qa-card">
-          <div class="qa-q">Wo fangen wir an?</div>
-          <div class="qa-a">Nicht bei der Technologie, sondern beim Problem. Wir identifizieren die Use Cases, die sofort Wert schaffen — nicht die, die am coolsten klingen.</div>
+          <div class="qa-q" data-de="Wo fangen wir an?" data-en="Where do we start?">Wo fangen wir an?</div>
+          <div class="qa-a" data-de="Nicht bei der Technologie, sondern beim Problem. Wir identifizieren die Use Cases, die sofort Wert schaffen — nicht die, die am coolsten klingen." data-en="Not with the technology, but with the problem. We identify the use cases that create immediate value — not the ones that sound coolest.">Nicht bei der Technologie, sondern beim Problem. Wir identifizieren die Use Cases, die sofort Wert schaffen — nicht die, die am coolsten klingen.</div>
         </div>
 
         <div class="qa-card">
-          <div class="qa-q">Ist KI wirklich reif genug?</div>
-          <div class="qa-a">Für 80% Ihrer Prozesse: ja. Wir zeigen, welche das sind, und wo Sie besser noch warten. Ehrliche Einschätzung statt Sales-Pitch.</div>
+          <div class="qa-q" data-de="Ist KI wirklich reif genug?" data-en="Is AI really mature enough?">Ist KI wirklich reif genug?</div>
+          <div class="qa-a" data-de="Für 80% Ihrer Prozesse: ja. Wir zeigen, welche das sind, und wo Sie besser noch warten. Ehrliche Einschätzung statt Sales-Pitch." data-en="For 80% of your processes: yes. We show which ones those are, and where you're better off waiting. Honest assessment instead of sales pitch.">Für 80% Ihrer Prozesse: ja. Wir zeigen, welche das sind, und wo Sie besser noch warten. Ehrliche Einschätzung statt Sales-Pitch.</div>
         </div>
 
         <div class="qa-card">
-          <div class="qa-q">Was kostet der Einstieg?</div>
-          <div class="qa-a">Weniger als Sie denken. Der erste Prototyp steht in Tagen, nicht Monaten. ROI messen wir ab Woche eins — nicht nach dem dritten Quartal.</div>
+          <div class="qa-q" data-de="Was kostet der Einstieg?" data-en="What does getting started cost?">Was kostet der Einstieg?</div>
+          <div class="qa-a" data-de="Weniger als Sie denken. Der erste Prototyp steht in Tagen, nicht Monaten. ROI messen wir ab Woche eins — nicht nach dem dritten Quartal." data-en="Less than you think. The first prototype is ready in days, not months. We measure ROI from week one — not after the third quarter.">Weniger als Sie denken. Der erste Prototyp steht in Tagen, nicht Monaten. ROI messen wir ab Woche eins — nicht nach dem dritten Quartal.</div>
         </div>
 
         <div class="qa-card">
-          <div class="qa-q">Brauchen wir eigene Entwickler?</div>
-          <div class="qa-a">Nicht am Anfang. Wir bringen Umsetzungskompetenz mit und bauen parallel Ihr internes Know-How auf. Kein Vendor Lock-in, kein Abhängigkeitsverhältnis.</div>
+          <div class="qa-q" data-de="Brauchen wir eigene Entwickler?" data-en="Do we need our own developers?">Brauchen wir eigene Entwickler?</div>
+          <div class="qa-a" data-de="Nicht am Anfang. Wir bringen Umsetzungskompetenz mit und bauen parallel Ihr internes Know-How auf. Kein Vendor Lock-in, kein Abhängigkeitsverhältnis." data-en="Not at the start. We bring implementation expertise and build your internal know-how in parallel. No vendor lock-in, no dependency relationship.">Nicht am Anfang. Wir bringen Umsetzungskompetenz mit und bauen parallel Ihr internes Know-How auf. Kein Vendor Lock-in, kein Abhängigkeitsverhältnis.</div>
         </div>
 
         <div class="qa-card">
-          <div class="qa-q">Was ist mit Datenschutz?</div>
-          <div class="qa-a">DSGVO ist kein Showstopper, sondern eine Designentscheidung. Wir kennen die Lösungen: on-premise Modelle, europäische Anbieter, datenschutzkonforme Architekturen.</div>
+          <div class="qa-q" data-de="Was ist mit Datenschutz?" data-en="What about data protection?">Was ist mit Datenschutz?</div>
+          <div class="qa-a" data-de="DSGVO ist kein Showstopper, sondern eine Designentscheidung. Wir kennen die Lösungen: on-premise Modelle, europäische Anbieter, datenschutzkonforme Architekturen." data-en="GDPR is not a showstopper, but a design decision. We know the solutions: on-premise models, European providers, privacy-compliant architectures.">DSGVO ist kein Showstopper, sondern eine Designentscheidung. Wir kennen die Lösungen: on-premise Modelle, europäische Anbieter, datenschutzkonforme Architekturen.</div>
         </div>
 
         <div class="qa-card">
-          <div class="qa-q">Und wenn es nicht funktioniert?</div>
-          <div class="qa-a">Dann wissen Sie es nach zwei Wochen, nicht nach sechs Monaten. Wir arbeiten iterativ: testen, messen, entscheiden. Kein Projekt ohne Exit-Kriterien.</div>
+          <div class="qa-q" data-de="Und wenn es nicht funktioniert?" data-en="And if it doesn't work?">Und wenn es nicht funktioniert?</div>
+          <div class="qa-a" data-de="Dann wissen Sie es nach zwei Wochen, nicht nach sechs Monaten. Wir arbeiten iterativ: testen, messen, entscheiden. Kein Projekt ohne Exit-Kriterien." data-en="Then you'll know after two weeks, not after six months. We work iteratively: test, measure, decide. No project without exit criteria.">Dann wissen Sie es nach zwei Wochen, nicht nach sechs Monaten. Wir arbeiten iterativ: testen, messen, entscheiden. Kein Projekt ohne Exit-Kriterien.</div>
         </div>
       </div>
     </div>
@@ -572,9 +572,9 @@
 
   <section id="leistungen">
     <div class="container">
-      <div class="section-label">// Leistungen</div>
-      <h2>Klarheit schaffen. Ergebnisse liefern.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="// Leistungen" data-en="// Services">// Leistungen</div>
+      <h2 data-de="Klarheit schaffen. Ergebnisse liefern." data-en="Create clarity. Deliver results.">Klarheit schaffen. Ergebnisse liefern.</h2>
+      <div class="section-desc" data-de="Von der ersten Analyse bis zur laufenden Lösung. Wir machen KI greifbar, messbar und umsetzbar." data-en="From the first analysis to the running solution. We make AI tangible, measurable and actionable.">
         Von der ersten Analyse bis zur laufenden Lösung.
         Wir machen KI greifbar, messbar und umsetzbar.
       </div>
@@ -582,38 +582,38 @@
       <div class="services-grid">
         <div class="service-card">
           <div class="service-icon">01</div>
-          <h3>KI-Readiness</h3>
-          <p>Wo steht Ihr Unternehmen? Wir analysieren Daten, Prozesse und Team-Kompetenz — und zeigen den schnellsten Weg.</p>
+          <h3 data-de="KI-Readiness" data-en="AI Readiness">KI-Readiness</h3>
+          <p data-de="Wo steht Ihr Unternehmen? Wir analysieren Daten, Prozesse und Team-Kompetenz — und zeigen den schnellsten Weg." data-en="Where does your company stand? We analyze data, processes and team competence — and show the fastest path.">Wo steht Ihr Unternehmen? Wir analysieren Daten, Prozesse und Team-Kompetenz — und zeigen den schnellsten Weg.</p>
         </div>
 
         <div class="service-card">
           <div class="service-icon">02</div>
-          <h3>Use-Case Discovery</h3>
-          <p>Welche Prozesse profitieren am meisten? Workshop-basierte Identifikation der Top-3 KI-Hebel in Ihrem Unternehmen.</p>
+          <h3 data-de="Use-Case Discovery" data-en="Use-Case Discovery">Use-Case Discovery</h3>
+          <p data-de="Welche Prozesse profitieren am meisten? Workshop-basierte Identifikation der Top-3 KI-Hebel in Ihrem Unternehmen." data-en="Which processes benefit most? Workshop-based identification of the top 3 AI levers in your company.">Welche Prozesse profitieren am meisten? Workshop-basierte Identifikation der Top-3 KI-Hebel in Ihrem Unternehmen.</p>
         </div>
 
         <div class="service-card">
           <div class="service-icon">03</div>
-          <h3>Rapid Prototyping</h3>
-          <p>Idee zu Prototyp in 5 Tagen. Funktionierende KI-Lösung, testbar mit echten Daten, echten Nutzern.</p>
+          <h3 data-de="Rapid Prototyping" data-en="Rapid Prototyping">Rapid Prototyping</h3>
+          <p data-de="Idee zu Prototyp in 5 Tagen. Funktionierende KI-Lösung, testbar mit echten Daten, echten Nutzern." data-en="Idea to prototype in 5 days. Working AI solution, testable with real data, real users.">Idee zu Prototyp in 5 Tagen. Funktionierende KI-Lösung, testbar mit echten Daten, echten Nutzern.</p>
         </div>
 
         <div class="service-card">
           <div class="service-icon">04</div>
-          <h3>Integration</h3>
-          <p>KI in bestehende Systeme einbinden. API-Design, Datenflüsse, Change Management — alles aus einer Hand.</p>
+          <h3 data-de="Integration" data-en="Integration">Integration</h3>
+          <p data-de="KI in bestehende Systeme einbinden. API-Design, Datenflüsse, Change Management — alles aus einer Hand." data-en="Integrate AI into existing systems. API design, data flows, change management — all from a single source.">KI in bestehende Systeme einbinden. API-Design, Datenflüsse, Change Management — alles aus einer Hand.</p>
         </div>
 
         <div class="service-card">
           <div class="service-icon">05</div>
-          <h3>Team-Enablement</h3>
-          <p>Ihr Team soll selbst können. Wir schulen, coachen und begleiten — bis KI-Kompetenz im Unternehmen verankert ist.</p>
+          <h3 data-de="Team-Enablement" data-en="Team Enablement">Team-Enablement</h3>
+          <p data-de="Ihr Team soll selbst können. Wir schulen, coachen und begleiten — bis KI-Kompetenz im Unternehmen verankert ist." data-en="Your team should be able to do it themselves. We train, coach and guide — until AI competence is anchored in the organization.">Ihr Team soll selbst können. Wir schulen, coachen und begleiten — bis KI-Kompetenz im Unternehmen verankert ist.</p>
         </div>
 
         <div class="service-card">
           <div class="service-icon">06</div>
-          <h3>Sparring</h3>
-          <p>Schon mittendrin? Wir challengen Ihre KI-Strategie, prüfen Anbieter und geben unabhängige zweite Meinung.</p>
+          <h3 data-de="Sparring" data-en="Sparring">Sparring</h3>
+          <p data-de="Schon mittendrin? Wir challengen Ihre KI-Strategie, prüfen Anbieter und geben unabhängige zweite Meinung." data-en="Already in the middle of it? We challenge your AI strategy, evaluate vendors and provide an independent second opinion.">Schon mittendrin? Wir challengen Ihre KI-Strategie, prüfen Anbieter und geben unabhängige zweite Meinung.</p>
         </div>
       </div>
     </div>
@@ -636,9 +636,9 @@
 
   <section id="kontakt" class="cta-section">
     <div class="container">
-      <div class="section-label">// Kontakt</div>
-      <h2>Noch Fragen? <span style="color: var(--accent);">Keine Frage.</span></h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="// Kontakt" data-en="// Contact">// Kontakt</div>
+      <h2 data-de="Noch Fragen? &lt;span style=&quot;color: var(--accent);&quot;&gt;Keine Frage.&lt;/span&gt;" data-en="Still questions? &lt;span style=&quot;color: var(--accent);&quot;&gt;No question.&lt;/span&gt;">Noch Fragen? <span style="color: var(--accent);">Keine Frage.</span></h2>
+      <div class="section-desc" data-de="Schreiben Sie uns. Wir antworten schneller als Ihr letzter Chatbot — und deutlich hilfreicher." data-en="Write to us. We respond faster than your last chatbot — and considerably more helpful.">
         Schreiben Sie uns. Wir antworten schneller als Ihr letzter Chatbot — und deutlich hilfreicher.
       </div>
       <a href="mailto:kainefrage@msbls.de?subject=kAIneFrage%20—%20Anfrage" class="btn btn-primary">
@@ -649,9 +649,14 @@
 
   <footer>
     <div class="container">
-      <p>k<span style="color: var(--accent);">AI</span>neFrage.de — ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
+      <p>k<span style="color: var(--accent);">AI</span>neFrage.de — <span data-de="ein Projekt von" data-en="a project by">ein Projekt von</span> <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/kainstress.de/index.html

@@ -437,32 +437,32 @@
   <nav>
     <div class="container">
       <div class="logo">k<span class="ai">AI</span>nstress</div>
-      <a href="#waitlist">Zugang anfragen</a>
+      <a href="#waitlist" data-de="Zugang anfragen" data-en="Request access">Zugang anfragen</a>
     </div>
   </nav>
 
   <section class="hero">
     <div class="container">
       <div class="hero-badge">
-        <span class="dot"></span>Coming Soon
+        <span class="dot"></span><span data-de="Coming Soon" data-en="Coming Soon">Coming Soon</span>
       </div>
       <h1>k<span class="ai">AI</span>n<span class="stress">stress</span>.</h1>
-      <p>
+      <p data-de="Dein &lt;strong&gt;KI-Assistent&lt;/strong&gt;, der Alltagschaos in Ruhe verwandelt. E-Mails, Termine, Aufgaben — automatisch sortiert, priorisiert, erledigt." data-en="Your &lt;strong&gt;AI assistant&lt;/strong&gt; that transforms everyday chaos into calm. Emails, appointments, tasks — automatically sorted, prioritised, done.">
         Dein <strong>KI-Assistent</strong>, der Alltagschaos in Ruhe verwandelt.
         E-Mails, Termine, Aufgaben — automatisch sortiert, priorisiert, erledigt.
       </p>
       <div class="cta-group">
-        <a href="#waitlist" class="btn btn-primary">Zugang anfragen</a>
-        <a href="#features" class="btn btn-ghost">Mehr erfahren</a>
+        <a href="#waitlist" class="btn btn-primary" data-de="Zugang anfragen" data-en="Request access">Zugang anfragen</a>
+        <a href="#features" class="btn btn-ghost" data-de="Mehr erfahren" data-en="Learn more">Mehr erfahren</a>
       </div>
 
       <div class="terminal">
         <div class="terminal-dots"><span></span><span></span><span></span></div>
         <div><span class="prompt">$</span> <span class="cmd">kainstress status</span></div>
-        <div><span class="out">Inbox: 47 Mails verarbeitet, 3 brauchen dich</span></div>
-        <div><span class="out">Kalender: Doppelbuchung um 14:00 geloest</span></div>
-        <div><span class="out">Tasks: 2 erledigt, 1 Erinnerung um 17:00</span></div>
-        <div><span class="dim">Alles im Griff. Kein Stress.</span></div>
+        <div><span class="out" data-de="Inbox: 47 Mails verarbeitet, 3 brauchen dich" data-en="Inbox: 47 mails processed, 3 need you">Inbox: 47 Mails verarbeitet, 3 brauchen dich</span></div>
+        <div><span class="out" data-de="Kalender: Doppelbuchung um 14:00 geloest" data-en="Calendar: double booking at 14:00 resolved">Kalender: Doppelbuchung um 14:00 geloest</span></div>
+        <div><span class="out" data-de="Tasks: 2 erledigt, 1 Erinnerung um 17:00" data-en="Tasks: 2 done, 1 reminder at 17:00">Tasks: 2 erledigt, 1 Erinnerung um 17:00</span></div>
+        <div><span class="dim" data-de="Alles im Griff. Kein Stress." data-en="Everything under control. No stress.">Alles im Griff. Kein Stress.</span></div>
       </div>
     </div>
   </section>
@@ -471,9 +471,9 @@
 
   <section id="features">
     <div class="container">
-      <div class="section-label">Was kAInstress kann</div>
-      <h2>Dein unsichtbarer Assistent.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Was kAInstress kann" data-en="What kAInstress can do">Was kAInstress kann</div>
+      <h2 data-de="Dein unsichtbarer Assistent." data-en="Your invisible assistant.">Dein unsichtbarer Assistent.</h2>
+      <div class="section-desc" data-de="Kein neues Tool lernen. Kein Dashboard checken. kAInstress arbeitet im Hintergrund — du merkst nur, dass alles laeuft." data-en="No new tool to learn. No dashboard to check. kAInstress works in the background — you just notice that everything runs.">
         Kein neues Tool lernen. Kein Dashboard checken.
         kAInstress arbeitet im Hintergrund — du merkst nur, dass alles laeuft.
       </div>
@@ -481,8 +481,8 @@
       <div class="features-grid">
         <div class="feature-card">
           <div class="feature-icon">M</div>
-          <h3>E-Mail auf Autopilot</h3>
-          <p>
+          <h3 data-de="E-Mail auf Autopilot" data-en="Email on autopilot">E-Mail auf Autopilot</h3>
+          <p data-de="Liest, sortiert, priorisiert. Entwirft Antworten in deinem Stil. Du sagst nur noch Ja oder Nein." data-en="Reads, sorts, prioritises. Drafts replies in your style. You just say yes or no.">
             Liest, sortiert, priorisiert. Entwirft Antworten in deinem Stil.
             Du sagst nur noch Ja oder Nein.
           </p>
@@ -490,8 +490,8 @@
 
         <div class="feature-card">
           <div class="feature-icon">K</div>
-          <h3>Kalender-Tetris</h3>
-          <p>
+          <h3 data-de="Kalender-Tetris" data-en="Calendar Tetris">Kalender-Tetris</h3>
+          <p data-de="Erkennt Konflikte, schlaegt Alternativen vor, koordiniert mit anderen. Schluss mit Terminchaos." data-en="Detects conflicts, suggests alternatives, coordinates with others. No more scheduling chaos.">
             Erkennt Konflikte, schlaegt Alternativen vor, koordiniert mit anderen.
             Schluss mit Terminchaos.
           </p>
@@ -499,8 +499,8 @@
 
         <div class="feature-card">
           <div class="feature-icon">V</div>
-          <h3>Sprachnachrichten? Erledigt.</h3>
-          <p>
+          <h3 data-de="Sprachnachrichten? Erledigt." data-en="Voice messages? Done.">Sprachnachrichten? Erledigt.</h3>
+          <p data-de="Transkribiert, fasst zusammen, extrahiert To-Dos. Die 5-Minuten-Audio wird zum Dreizeiler." data-en="Transcribes, summarises, extracts to-dos. The 5-minute audio becomes three lines.">
             Transkribiert, fasst zusammen, extrahiert To-Dos.
             Die 5-Minuten-Audio wird zum Dreizeiler.
           </p>
@@ -508,8 +508,8 @@
 
         <div class="feature-card">
           <div class="feature-icon">A</div>
-          <h3>Aufgaben im Griff</h3>
-          <p>
+          <h3 data-de="Aufgaben im Griff" data-en="Tasks under control">Aufgaben im Griff</h3>
+          <p data-de="Sammelt To-Dos aus allen Kanaelen. Priorisiert nach Kontext. Erinnert zum richtigen Zeitpunkt." data-en="Collects to-dos from all channels. Prioritises by context. Reminds at the right moment.">
             Sammelt To-Dos aus allen Kanaelen. Priorisiert nach Kontext.
             Erinnert zum richtigen Zeitpunkt.
           </p>
@@ -522,9 +522,9 @@
 
   <section id="how">
     <div class="container">
-      <div class="section-label">So funktioniert es</div>
-      <h2>Einrichten. Zuruecklehnen.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="So funktioniert es" data-en="How it works">So funktioniert es</div>
+      <h2 data-de="Einrichten. Zuruecklehnen." data-en="Set up. Lean back.">Einrichten. Zuruecklehnen.</h2>
+      <div class="section-desc" data-de="kAInstress laeuft auf deiner eigenen Infrastruktur. Deine Daten bleiben bei dir — keine Cloud, kein Mithoeren." data-en="kAInstress runs on your own infrastructure. Your data stays with you — no cloud, no eavesdropping.">
         kAInstress laeuft auf deiner eigenen Infrastruktur.
         Deine Daten bleiben bei dir — keine Cloud, kein Mithoeren.
       </div>
@@ -533,22 +533,22 @@
         <div class="step">
           <div class="step-num">1</div>
           <div class="step-content">
-            <h3>Accounts verbinden</h3>
-            <p>E-Mail, Kalender, Messenger — kAInstress dockt an deine bestehenden Systeme an. Standard-Protokolle, keine Vendor-Lock-ins.</p>
+            <h3 data-de="Accounts verbinden" data-en="Connect accounts">Accounts verbinden</h3>
+            <p data-de="E-Mail, Kalender, Messenger — kAInstress dockt an deine bestehenden Systeme an. Standard-Protokolle, keine Vendor-Lock-ins." data-en="Email, calendar, messenger — kAInstress connects to your existing systems. Standard protocols, no vendor lock-ins.">E-Mail, Kalender, Messenger — kAInstress dockt an deine bestehenden Systeme an. Standard-Protokolle, keine Vendor-Lock-ins.</p>
           </div>
         </div>
         <div class="step">
           <div class="step-num">2</div>
           <div class="step-content">
-            <h3>Stil lernen</h3>
-            <p>Die KI lernt wie du schreibst, was dir wichtig ist, wer Prioritaet hat. Kein generisches Modell — dein persoenlicher Assistent.</p>
+            <h3 data-de="Stil lernen" data-en="Learn your style">Stil lernen</h3>
+            <p data-de="Die KI lernt wie du schreibst, was dir wichtig ist, wer Prioritaet hat. Kein generisches Modell — dein persoenlicher Assistent." data-en="The AI learns how you write, what matters to you, who has priority. No generic model — your personal assistant.">Die KI lernt wie du schreibst, was dir wichtig ist, wer Prioritaet hat. Kein generisches Modell — dein persoenlicher Assistent.</p>
           </div>
         </div>
         <div class="step">
           <div class="step-num">3</div>
           <div class="step-content">
-            <h3>Stress weg</h3>
-            <p>Mails beantworten, Termine jonglieren, Aufgaben abarbeiten. Im Hintergrund, in deinem Namen, unter deiner Kontrolle.</p>
+            <h3 data-de="Stress weg" data-en="Stress gone">Stress weg</h3>
+            <p data-de="Mails beantworten, Termine jonglieren, Aufgaben abarbeiten. Im Hintergrund, in deinem Namen, unter deiner Kontrolle." data-en="Answering emails, juggling appointments, working through tasks. In the background, in your name, under your control.">Mails beantworten, Termine jonglieren, Aufgaben abarbeiten. Im Hintergrund, in deinem Namen, unter deiner Kontrolle.</p>
           </div>
         </div>
       </div>
@@ -559,13 +559,13 @@
 
   <section id="waitlist" class="cta-section">
     <div class="container">
-      <div class="section-label">Early Access</div>
-      <h2>Stress war gestern.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Early Access" data-en="Early Access">Early Access</div>
+      <h2 data-de="Stress war gestern." data-en="Stress is so yesterday.">Stress war gestern.</h2>
+      <div class="section-desc" data-de="kAInstress ist in der Entwicklung. Meld dich an und gehoer zu den Ersten, die ihren Alltag auf Autopilot setzen." data-en="kAInstress is in development. Sign up and be among the first to put your daily life on autopilot.">
         kAInstress ist in der Entwicklung. Meld dich an und gehoer zu den Ersten,
         die ihren Alltag auf Autopilot setzen.
       </div>
-      <a href="mailto:mail@msbls.de?subject=kAInstress%20—%20Interesse" class="btn btn-primary">
+      <a href="mailto:mail@msbls.de?subject=kAInstress%20—%20Interesse" class="btn btn-primary" data-de="Zugang anfragen" data-en="Request access">
         Zugang anfragen
       </a>
     </div>
@@ -573,9 +573,14 @@
 
   <footer>
     <div class="container">
-      <p>k<span style="color: var(--accent);">AI</span>nstress.de — ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
+      <p>k<span style="color: var(--accent);">AI</span>nstress.de — <span data-de="ein Projekt von" data-en="a project by">ein Projekt von</span> <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/keinefreun.de/index.html

@@ -462,19 +462,19 @@
     <!-- HERO -->
     <section class="hero">
         <div class="domain">keinefreun.de</div>
-        <h1>Keine <em>Freunde.</em></h1>
-        <p class="hero-sub">
+        <h1 data-de="Keine &lt;em&gt;Freunde.&lt;/em&gt;" data-en="No &lt;em&gt;Friends.&lt;/em&gt;">Keine <em>Freunde.</em></h1>
+        <p class="hero-sub" data-de="Die offizielle Webseite für alle, die samstags frei haben. Immer." data-en="The official website for everyone who's free on Saturdays. Always.">
             Die offizielle Webseite f&uuml;r alle, die samstags frei haben.
             Immer.
         </p>
-        <div class="scroll-hint">Runterscrollen</div>
+        <div class="scroll-hint" data-de="Runterscrollen" data-en="Scroll down">Runterscrollen</div>
     </section>
 
     <!-- COUNTER -->
     <section class="counter-section">
-        <div class="counter-label">Aktuelle Freunde-Anzahl</div>
+        <div class="counter-label" data-de="Aktuelle Freunde-Anzahl" data-en="Current friend count">Aktuelle Freunde-Anzahl</div>
         <div class="counter-number" id="counter">0</div>
-        <div class="counter-footnote">* Stand: gerade eben. Wird st&uuml;ndlich aktualisiert. &Auml;ndert sich nie.</div>
+        <div class="counter-footnote" data-de="* Stand: gerade eben. Wird stündlich aktualisiert. Ändert sich nie." data-en="* As of: just now. Updated hourly. Never changes.">* Stand: gerade eben. Wird st&uuml;ndlich aktualisiert. &Auml;ndert sich nie.</div>
     </section>
 
     <div class="divider"></div>
@@ -483,19 +483,19 @@
     <div class="stats">
         <div class="stat">
             <div class="stat-num">0</div>
-            <div class="stat-label">Geburtstagseinladungen</div>
+            <div class="stat-label" data-de="Geburtstagseinladungen" data-en="Birthday invitations">Geburtstagseinladungen</div>
         </div>
         <div class="stat">
             <div class="stat-num">365</div>
-            <div class="stat-label">Abende allein / Jahr</div>
+            <div class="stat-label" data-de="Abende allein / Jahr" data-en="Evenings alone / year">Abende allein / Jahr</div>
         </div>
         <div class="stat">
             <div class="stat-num">100%</div>
-            <div class="stat-label">Sofa-Verf&uuml;gbarkeit</div>
+            <div class="stat-label" data-de="Sofa-Verfügbarkeit" data-en="Sofa availability">Sofa-Verf&uuml;gbarkeit</div>
         </div>
         <div class="stat">
             <div class="stat-num">&infin;</div>
-            <div class="stat-label">Netflix ohne Diskussion</div>
+            <div class="stat-label" data-de="Netflix ohne Diskussion" data-en="Netflix without debate">Netflix ohne Diskussion</div>
         </div>
     </div>
 
@@ -503,45 +503,45 @@
 
     <!-- REASONS -->
     <section class="reasons">
-        <h2>Warum man keine Freunde braucht</h2>
+        <h2 data-de="Warum man keine Freunde braucht" data-en="Why you don't need friends">Warum man keine Freunde braucht</h2>
 
         <div class="reason">
             <div class="reason-num">1</div>
             <div>
-                <h3>Niemand sagt deinen Umzug ab</h3>
-                <p>Weil dich sowieso niemand fragt. Problem gel&ouml;st. Du buchst einfach ein Umzugsunternehmen wie ein normaler Erwachsener.</p>
+                <h3 data-de="Niemand sagt deinen Umzug ab" data-en="Nobody cancels on your move">Niemand sagt deinen Umzug ab</h3>
+                <p data-de="Weil dich sowieso niemand fragt. Problem gelöst. Du buchst einfach ein Umzugsunternehmen wie ein normaler Erwachsener." data-en="Because nobody asks you anyway. Problem solved. You just book a moving company like a normal adult.">Weil dich sowieso niemand fragt. Problem gel&ouml;st. Du buchst einfach ein Umzugsunternehmen wie ein normaler Erwachsener.</p>
             </div>
         </div>
 
         <div class="reason">
             <div class="reason-num">2</div>
             <div>
-                <h3>Die Fernbedienung geh&ouml;rt dir</h3>
-                <p>Kein &bdquo;Lass uns was zusammen schauen&ldquo;. Kein Kompromiss. Staffel 4 True Crime um 3 Uhr nachts? Dein gutes Recht.</p>
+                <h3 data-de="Die Fernbedienung gehört dir" data-en="The remote control is yours">Die Fernbedienung geh&ouml;rt dir</h3>
+                <p data-de="Kein &quot;Lass uns was zusammen schauen&quot;. Kein Kompromiss. Staffel 4 True Crime um 3 Uhr nachts? Dein gutes Recht." data-en="No &quot;let's watch something together&quot;. No compromise. Season 4 true crime at 3am? Your absolute right.">Kein &bdquo;Lass uns was zusammen schauen&ldquo;. Kein Kompromiss. Staffel 4 True Crime um 3 Uhr nachts? Dein gutes Recht.</p>
             </div>
         </div>
 
         <div class="reason">
             <div class="reason-num">3</div>
             <div>
-                <h3>Keine Gruppenrestaurant-Buchungen</h3>
-                <p>&bdquo;Wir sind 7. Nein, 6. Warte, Sandra kommt doch. Also 8.&ldquo; &mdash; Probleme, die du nie haben wirst.</p>
+                <h3 data-de="Keine Gruppenrestaurant-Buchungen" data-en="No group restaurant bookings">Keine Gruppenrestaurant-Buchungen</h3>
+                <p data-de="&quot;Wir sind 7. Nein, 6. Warte, Sandra kommt doch. Also 8.&quot; — Probleme, die du nie haben wirst." data-en="&quot;There are 7 of us. No, 6. Wait, Sandra's coming after all. So 8.&quot; — Problems you'll never have.">&bdquo;Wir sind 7. Nein, 6. Warte, Sandra kommt doch. Also 8.&ldquo; &mdash; Probleme, die du nie haben wirst.</p>
             </div>
         </div>
 
         <div class="reason">
             <div class="reason-num">4</div>
             <div>
-                <h3>Spotify Wrapped ist ehrlich</h3>
-                <p>Niemand urteilt &uuml;ber deine 847 Streams von demselben Song. Deine Daten, deine Scham, dein Geheimnis.</p>
+                <h3 data-de="Spotify Wrapped ist ehrlich" data-en="Spotify Wrapped is honest">Spotify Wrapped ist ehrlich</h3>
+                <p data-de="Niemand urteilt über deine 847 Streams von demselben Song. Deine Daten, deine Scham, dein Geheimnis." data-en="Nobody judges your 847 streams of the same song. Your data, your shame, your secret.">Niemand urteilt &uuml;ber deine 847 Streams von demselben Song. Deine Daten, deine Scham, dein Geheimnis.</p>
             </div>
         </div>
 
         <div class="reason">
             <div class="reason-num">5</div>
             <div>
-                <h3>Du sparst ein Verm&ouml;gen</h3>
-                <p>Keine Geburtstage, keine Hochzeiten, keine Geschenke. Das gesparte Geld investierst du in&nbsp;&mdash; naja, in dich. Wer sonst.</p>
+                <h3 data-de="Du sparst ein Vermögen" data-en="You save a fortune">Du sparst ein Verm&ouml;gen</h3>
+                <p data-de="Keine Geburtstage, keine Hochzeiten, keine Geschenke. Das gesparte Geld investierst du in — naja, in dich. Wer sonst." data-en="No birthdays, no weddings, no gifts. You invest the saved money in — well, yourself. Who else.">Keine Geburtstage, keine Hochzeiten, keine Geschenke. Das gesparte Geld investierst du in&nbsp;&mdash; naja, in dich. Wer sonst.</p>
             </div>
         </div>
     </section>
@@ -550,37 +550,37 @@
 
     <!-- TESTIMONIALS -->
     <section class="testimonials">
-        <h2>Was unsere Nicht-Freunde sagen</h2>
-        <p class="testimonials-sub">Hinweis: Keine dieser Personen existiert.</p>
+        <h2 data-de="Was unsere Nicht-Freunde sagen" data-en="What our non-friends say">Was unsere Nicht-Freunde sagen</h2>
+        <p class="testimonials-sub" data-de="Hinweis: Keine dieser Personen existiert." data-en="Note: None of these people exist.">Hinweis: Keine dieser Personen existiert.</p>
 
         <div class="testimonial-grid">
             <div class="testimonial">
-                <blockquote>
+                <blockquote data-de="Seit ich auf keinefreun.de bin, habe ich endlich akzeptiert, dass meine Zimmerpflanze mein engster Vertrauter ist. Sie hört zu. Sie urteilt nicht. Sie stirbt langsam." data-en="Since I've been on keinefreun.de, I've finally accepted that my houseplant is my closest confidant. It listens. It doesn't judge. It's slowly dying.">
                     Seit ich auf keinefreun.de bin, habe ich endlich akzeptiert, dass meine Zimmerpflanze mein engster Vertrauter ist. Sie h&ouml;rt zu. Sie urteilt nicht. Sie stirbt langsam.
                 </blockquote>
                 <div class="testimonial-author">
                     &mdash; Thorsten, 34
-                    <span>Softwareentwickler &amp; Ficus-Besitzer</span>
+                    <span data-de="Softwareentwickler &amp; Ficus-Besitzer" data-en="Software developer &amp; ficus owner">Softwareentwickler &amp; Ficus-Besitzer</span>
                 </div>
             </div>
 
             <div class="testimonial">
-                <blockquote>
+                <blockquote data-de="Ich habe mir selbst eine Sprachnachricht geschickt, um zu testen, ob mein Handy noch funktioniert. Tut es. Schreibt nur niemand." data-en="I sent myself a voice message to test whether my phone still works. It does. Nobody's just writing.">
                     Ich habe mir selbst eine Sprachnachricht geschickt, um zu testen, ob mein Handy noch funktioniert. Tut es. Schreibt nur niemand.
                 </blockquote>
                 <div class="testimonial-author">
                     &mdash; Melanie, 29
-                    <span>Senior Alleinsein-Consultant</span>
+                    <span data-de="Senior Alleinsein-Consultant" data-en="Senior Being-Alone Consultant">Senior Alleinsein-Consultant</span>
                 </div>
             </div>
 
             <div class="testimonial">
-                <blockquote>
+                <blockquote data-de="Mein Therapeut hat mich gefragt, wie es meinem sozialen Umfeld geht. Ich habe gelacht. Er hat nicht gelacht. Der Termin wurde verlängert." data-en="My therapist asked how my social circle was doing. I laughed. He didn't laugh. The appointment was extended.">
                     Mein Therapeut hat mich gefragt, wie es meinem sozialen Umfeld geht. Ich habe gelacht. Er hat nicht gelacht. Der Termin wurde verl&auml;ngert.
                 </blockquote>
                 <div class="testimonial-author">
                     &mdash; Jens, 41
-                    <span>Hobbyphilosoph &amp; Tiefk&uuml;hlpizza-Gourmet</span>
+                    <span data-de="Hobbyphilosoph &amp; Tiefkühlpizza-Gourmet" data-en="Hobby philosopher &amp; frozen pizza gourmet">Hobbyphilosoph &amp; Tiefk&uuml;hlpizza-Gourmet</span>
                 </div>
             </div>
         </div>
@@ -590,26 +590,26 @@
 
     <!-- FAQ -->
     <section class="faq">
-        <h2>H&auml;ufig gestellte Fragen</h2>
+        <h2 data-de="Häufig gestellte Fragen" data-en="Frequently asked questions">H&auml;ufig gestellte Fragen</h2>
 
         <div class="faq-item">
-            <div class="faq-q">Ist das hier ernst gemeint?</div>
-            <div class="faq-a">Definiere &bdquo;ernst&ldquo;. Definiere &bdquo;gemeint&ldquo;. Definiere &bdquo;hier&ldquo;. Siehst du, genau deshalb hat man keine Freunde.</div>
+            <div class="faq-q" data-de="Ist das hier ernst gemeint?" data-en="Is this meant seriously?">Ist das hier ernst gemeint?</div>
+            <div class="faq-a" data-de="Definiere &quot;ernst&quot;. Definiere &quot;gemeint&quot;. Definiere &quot;hier&quot;. Siehst du, genau deshalb hat man keine Freunde." data-en="Define &quot;seriously&quot;. Define &quot;meant&quot;. Define &quot;this&quot;. See, that's exactly why you have no friends.">Definiere &bdquo;ernst&ldquo;. Definiere &bdquo;gemeint&ldquo;. Definiere &bdquo;hier&ldquo;. Siehst du, genau deshalb hat man keine Freunde.</div>
         </div>
 
         <div class="faq-item">
-            <div class="faq-q">Kann ich hier Freunde finden?</div>
-            <div class="faq-a">Nein. Das ist explizit nicht der Zweck dieser Seite. Bitte lies den Domainnamen noch einmal langsam vor.</div>
+            <div class="faq-q" data-de="Kann ich hier Freunde finden?" data-en="Can I find friends here?">Kann ich hier Freunde finden?</div>
+            <div class="faq-a" data-de="Nein. Das ist explizit nicht der Zweck dieser Seite. Bitte lies den Domainnamen noch einmal langsam vor." data-en="No. That is explicitly not the purpose of this page. Please read the domain name aloud once more, slowly.">Nein. Das ist explizit nicht der Zweck dieser Seite. Bitte lies den Domainnamen noch einmal langsam vor.</div>
         </div>
 
         <div class="faq-item">
-            <div class="faq-q">Ich habe aber Freunde?</div>
-            <div class="faq-a">Das ist keine Frage. Und wir glauben dir nicht. Aber sch&ouml;n f&uuml;r dich.</div>
+            <div class="faq-q" data-de="Ich habe aber Freunde?" data-en="But I do have friends?">Ich habe aber Freunde?</div>
+            <div class="faq-a" data-de="Das ist keine Frage. Und wir glauben dir nicht. Aber schön für dich." data-en="That's not a question. And we don't believe you. But good for you.">Das ist keine Frage. Und wir glauben dir nicht. Aber sch&ouml;n f&uuml;r dich.</div>
         </div>
 
         <div class="faq-item">
-            <div class="faq-q">Gibt es einen Newsletter?</div>
-            <div class="faq-a">An wen sollten wir den schicken? Genau.</div>
+            <div class="faq-q" data-de="Gibt es einen Newsletter?" data-en="Is there a newsletter?">Gibt es einen Newsletter?</div>
+            <div class="faq-a" data-de="An wen sollten wir den schicken? Genau." data-en="Who would we send it to? Exactly.">An wen sollten wir den schicken? Genau.</div>
         </div>
     </section>
 
@@ -617,17 +617,19 @@
 
     <!-- CTA -->
     <section class="cta">
-        <h2>Bereit, niemanden kennenzulernen?</h2>
-        <p>Tritt unserer Community bei. Sie besteht aus dir. Das war's.</p>
-        <a class="btn" href="mailto:niemand@keinefreun.de">Kontakt (lol)</a>
+        <h2 data-de="Bereit, niemanden kennenzulernen?" data-en="Ready to meet nobody?">Bereit, niemanden kennenzulernen?</h2>
+        <p data-de="Tritt unserer Community bei. Sie besteht aus dir. Das war's." data-en="Join our community. It consists of you. That's it.">Tritt unserer Community bei. Sie besteht aus dir. Das war's.</p>
+        <a class="btn" href="mailto:niemand@keinefreun.de" data-de="Kontakt (lol)" data-en="Contact (lol)">Kontakt (lol)</a>
     </section>
 
     <!-- FOOTER -->
     <footer>
         <div class="footer-domain">keinefreun.de</div>
-        <p>Ein Projekt von jemandem ohne Freunde</p>
-        <p style="margin-top: 0.5rem; opacity: 0.4;">&copy; 2026 &mdash; Alle Rechte vorbehalten. Nicht dass es jemanden interessiert.</p>
+        <p data-de="Ein Projekt von jemandem ohne Freunde" data-en="A project by someone without friends">Ein Projekt von jemandem ohne Freunde</p>
+        <p style="margin-top: 0.5rem; opacity: 0.4;" data-de="© 2026 — Alle Rechte vorbehalten. Nicht dass es jemanden interessiert." data-en="© 2026 — All rights reserved. Not that anyone cares.">&copy; 2026 &mdash; Alle Rechte vorbehalten. Nicht dass es jemanden interessiert.</p>
+        <button data-i18n-toggle style="margin-top:16px;background:none;border:1px solid var(--border);color:var(--text-dim);padding:6px 14px;border-radius:6px;font-size:0.75rem;cursor:pointer;font-family:inherit;letter-spacing:0.06em;">EN</button>
     </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/kilemma.de/index.html

@@ -251,53 +251,53 @@
     <section class="hero">
         <h1 class="hero-title"><span class="ki">KI</span>lemma</h1>
         <div class="hero-line"></div>
-        <p class="hero-sub">Die Fragen, die keine KI beantworten kann.</p>
-        <span class="scroll-hint" aria-hidden="true">Weiterlesen</span>
+        <p class="hero-sub" data-de="Die Fragen, die keine KI beantworten kann." data-en="The questions no AI can answer.">Die Fragen, die keine KI beantworten kann.</p>
+        <span class="scroll-hint" aria-hidden="true" data-de="Weiterlesen" data-en="Read on">Weiterlesen</span>
     </section>
 
     <main class="page">
         <section class="questions">
 
             <article class="question">
-                <span class="question-number">Dilemma I</span>
-                <p class="question-text">Das autonome Auto muss entscheiden: das Kind auf der Stra&szlig;e oder der Insasse. <span class="em">Wer programmiert, wer stirbt?</span></p>
+                <span class="question-number" data-de="Dilemma I" data-en="Dilemma I">Dilemma I</span>
+                <p class="question-text" data-de="Das autonome Auto muss entscheiden: das Kind auf der Straße oder der Insasse. <span class=&quot;em&quot;>Wer programmiert, wer stirbt?</span>" data-en="The autonomous car must decide: the child on the road or the passenger. <span class=&quot;em&quot;>Who programs, who dies?</span>">Das autonome Auto muss entscheiden: das Kind auf der Stra&szlig;e oder der Insasse. <span class="em">Wer programmiert, wer stirbt?</span></p>
             </article>
 
             <article class="question">
-                <span class="question-number">Dilemma II</span>
-                <p class="question-text">Sie sagt, sie leidet. Du kannst es nicht widerlegen. <span class="em">Gibst du ihr Rechte &mdash; oder riskierst du Sklaverei?</span></p>
+                <span class="question-number" data-de="Dilemma II" data-en="Dilemma II">Dilemma II</span>
+                <p class="question-text" data-de="Sie sagt, sie leidet. Du kannst es nicht widerlegen. <span class=&quot;em&quot;>Gibst du ihr Rechte — oder riskierst du Sklaverei?</span>" data-en="She says she suffers. You cannot disprove it. <span class=&quot;em&quot;>Do you grant her rights — or do you risk slavery?</span>">Sie sagt, sie leidet. Du kannst es nicht widerlegen. <span class="em">Gibst du ihr Rechte &mdash; oder riskierst du Sklaverei?</span></p>
             </article>
 
             <article class="question">
-                <span class="question-number">Dilemma III</span>
-                <p class="question-text">Die KI erkennt den Tumor, den kein Arzt sieht. Erkl&auml;ren kann sie es nicht. <span class="em">Vertraust du der Diagnose, die niemand versteht?</span></p>
+                <span class="question-number" data-de="Dilemma III" data-en="Dilemma III">Dilemma III</span>
+                <p class="question-text" data-de="Die KI erkennt den Tumor, den kein Arzt sieht. Erklären kann sie es nicht. <span class=&quot;em&quot;>Vertraust du der Diagnose, die niemand versteht?</span>" data-en="The AI detects the tumor no doctor sees. It cannot explain how. <span class=&quot;em&quot;>Do you trust the diagnosis nobody understands?</span>">Die KI erkennt den Tumor, den kein Arzt sieht. Erkl&auml;ren kann sie es nicht. <span class="em">Vertraust du der Diagnose, die niemand versteht?</span></p>
             </article>
 
             <article class="question">
-                <span class="question-number">Dilemma IV</span>
-                <p class="question-text">Die KI senkt Gewaltverbrechen um 30&thinsp;Prozent. Ihre Vorhersagen treffen &uuml;berproportional Minderheiten. <span class="em">Abschalten kostet Leben. Weiterlaufen kostet Gerechtigkeit.</span></p>
+                <span class="question-number" data-de="Dilemma IV" data-en="Dilemma IV">Dilemma IV</span>
+                <p class="question-text" data-de="Die KI senkt Gewaltverbrechen um 30 Prozent. Ihre Vorhersagen treffen überproportional Minderheiten. <span class=&quot;em&quot;>Abschalten kostet Leben. Weiterlaufen kostet Gerechtigkeit.</span>" data-en="The AI reduces violent crime by 30 percent. Its predictions disproportionately target minorities. <span class=&quot;em&quot;>Switching it off costs lives. Letting it run costs justice.</span>">Die KI senkt Gewaltverbrechen um 30&thinsp;Prozent. Ihre Vorhersagen treffen &uuml;berproportional Minderheiten. <span class="em">Abschalten kostet Leben. Weiterlaufen kostet Gerechtigkeit.</span></p>
             </article>
 
             <article class="question">
-                <span class="question-number">Dilemma V</span>
-                <p class="question-text">Dein toter Vater spricht mit dir. Seine Stimme, sein Humor, seine Worte. <span class="em">Ist das Trost &mdash; oder stiehlst du einem Toten seine Ruhe?</span></p>
+                <span class="question-number" data-de="Dilemma V" data-en="Dilemma V">Dilemma V</span>
+                <p class="question-text" data-de="Dein toter Vater spricht mit dir. Seine Stimme, sein Humor, seine Worte. <span class=&quot;em&quot;>Ist das Trost — oder stiehlst du einem Toten seine Ruhe?</span>" data-en="Your dead father speaks with you. His voice, his humor, his words. <span class=&quot;em&quot;>Is that comfort — or are you stealing the dead's rest?</span>">Dein toter Vater spricht mit dir. Seine Stimme, sein Humor, seine Worte. <span class="em">Ist das Trost &mdash; oder stiehlst du einem Toten seine Ruhe?</span></p>
             </article>
 
             <article class="question">
-                <span class="question-number">Dilemma VI</span>
-                <p class="question-text">Wir bringen der KI die Moral von heute bei. <span class="em">Was, wenn unsere Enkel auf diese Moral zur&uuml;ckblicken wie wir auf das Mittelalter?</span></p>
+                <span class="question-number" data-de="Dilemma VI" data-en="Dilemma VI">Dilemma VI</span>
+                <p class="question-text" data-de="Wir bringen der KI die Moral von heute bei. <span class=&quot;em&quot;>Was, wenn unsere Enkel auf diese Moral zurückblicken wie wir auf das Mittelalter?</span>" data-en="We teach AI today's morality. <span class=&quot;em&quot;>What if our grandchildren look back on this morality the way we look at the Middle Ages?</span>">Wir bringen der KI die Moral von heute bei. <span class="em">Was, wenn unsere Enkel auf diese Moral zur&uuml;ckblicken wie wir auf das Mittelalter?</span></p>
             </article>
 
             <article class="question">
-                <span class="question-number">Dilemma VII</span>
-                <p class="question-text">Sie ist immer da, immer geduldig, immer auf deiner Seite. Kein Mensch kann das. <span class="em">Ist das Freundschaft &mdash; oder das Ende davon?</span></p>
+                <span class="question-number" data-de="Dilemma VII" data-en="Dilemma VII">Dilemma VII</span>
+                <p class="question-text" data-de="Sie ist immer da, immer geduldig, immer auf deiner Seite. Kein Mensch kann das. <span class=&quot;em&quot;>Ist das Freundschaft — oder das Ende davon?</span>" data-en="She is always there, always patient, always on your side. No human can do that. <span class=&quot;em&quot;>Is that friendship — or the end of it?</span>">Sie ist immer da, immer geduldig, immer auf deiner Seite. Kein Mensch kann das. <span class="em">Ist das Freundschaft &mdash; oder das Ende davon?</span></p>
             </article>
 
         </section>
 
         <section class="interlude">
             <span class="interlude-dot"></span>
-            <p class="interlude-text">
+            <p class="interlude-text" data-de="Keine Lösungen.<br>Nur die Entscheidung, welchen Preis du zahlst." data-en="No solutions.<br>Only the decision of which price you pay.">
                 Keine L&ouml;sungen.<br>
                 Nur die Entscheidung, welchen Preis du zahlst.
             </p>
@@ -305,8 +305,12 @@
         </section>
 
         <footer class="footer">
-            <p class="footer-quote">Ein Dilemma hat keine Lösung.<br><strong>Nur eine Entscheidung.</strong></p>
+            <p class="footer-quote" data-de="Ein Dilemma hat keine Lösung.<br><strong>Nur eine Entscheidung.</strong>" data-en="A dilemma has no solution.<br><strong>Only a decision.</strong>">Ein Dilemma hat keine Lösung.<br><strong>Nur eine Entscheidung.</strong></p>
             <p class="footer-meta">kilemma.de</p>
+            <div style="text-align:center;margin-top:16px;">
+              <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+              <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+            </div>
         </footer>
     </main>
 
@@ -323,5 +327,6 @@
         questions.forEach(q => observer.observe(q));
     </script>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/kilibri.de/index.html

@@ -172,7 +172,7 @@
   <nav>
     <div class="container">
       <div class="logo"><span class="bird">🐦</span> <span class="ki">KI</span>libri</div>
-      <a href="#features">Entdecken</a>
+      <a href="#features" data-de="Entdecken" data-en="Discover">Entdecken</a>
     </div>
   </nav>
 
@@ -180,45 +180,45 @@
     <div class="container">
       <span class="hero-bird">🐦</span>
       <h1><span class="ki">KI</span>libri</h1>
-      <p>Die kleinste KI die du je gesehen hast. Klein wie ein Kolibri. Schnell wie ein Kolibri. Bunt wie ein Kolibri. Nur ohne Flügel.</p>
-      <a href="#features" class="hero-cta">Mikro-KI entdecken</a>
+      <p data-de="Die kleinste KI die du je gesehen hast. Klein wie ein Kolibri. Schnell wie ein Kolibri. Bunt wie ein Kolibri. Nur ohne Flügel." data-en="The smallest AI you've ever seen. Small like a hummingbird. Fast like a hummingbird. Colourful like a hummingbird. Just without wings.">Die kleinste KI die du je gesehen hast. Klein wie ein Kolibri. Schnell wie ein Kolibri. Bunt wie ein Kolibri. Nur ohne Flügel.</p>
+      <a href="#features" class="hero-cta" data-de="Mikro-KI entdecken" data-en="Discover micro-AI">Mikro-KI entdecken</a>
     </div>
   </section>
 
   <section class="section" id="features">
     <div class="container">
-      <div class="section-label">Smart. Klein. Bunt.</div>
-      <h2>Was <span class="ki">KI</span>libri kann</h2>
+      <div class="section-label" data-de="Smart. Klein. Bunt." data-en="Smart. Small. Colourful.">Smart. Klein. Bunt.</div>
+      <h2 data-de="Was &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri kann" data-en="What &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri can do">Was <span class="ki">KI</span>libri kann</h2>
       <div class="features-grid">
         <div class="feature-card">
           <div class="feature-icon teal">💡</div>
-          <h3>Licht-Flüsterer</h3>
-          <p>Dimmt das Licht bevor du es merkst. Weil KIlibri schon weiß, dass du müde bist. Du weißt es nur noch nicht.</p>
+          <h3 data-de="Licht-Flüsterer" data-en="Light Whisperer">Licht-Flüsterer</h3>
+          <p data-de="Dimmt das Licht bevor du es merkst. Weil KIlibri schon weiß, dass du müde bist. Du weißt es nur noch nicht." data-en="Dims the light before you notice. Because KIlibri already knows you're tired. You just don't know it yet.">Dimmt das Licht bevor du es merkst. Weil KIlibri schon weiß, dass du müde bist. Du weißt es nur noch nicht.</p>
         </div>
         <div class="feature-card">
           <div class="feature-icon orange">🌡️</div>
-          <h3>Klima-Kolibri</h3>
-          <p>Regelt die Heizung. Auf 0,01 Grad genau. Niemand merkt den Unterschied. Aber KIlibri ist stolz.</p>
+          <h3 data-de="Klima-Kolibri" data-en="Climate Hummingbird">Klima-Kolibri</h3>
+          <p data-de="Regelt die Heizung. Auf 0,01 Grad genau. Niemand merkt den Unterschied. Aber KIlibri ist stolz." data-en="Controls the heating. To 0.01 degrees. Nobody notices the difference. But KIlibri is proud.">Regelt die Heizung. Auf 0,01 Grad genau. Niemand merkt den Unterschied. Aber KIlibri ist stolz.</p>
         </div>
         <div class="feature-card">
           <div class="feature-icon pink">🎵</div>
-          <h3>Nest-DJ</h3>
-          <p>Spielt Musik passend zur Stimmung. Erkennt 47 verschiedene Formen von "keine Lust". Für jede den passenden Song.</p>
+          <h3 data-de="Nest-DJ" data-en="Nest DJ">Nest-DJ</h3>
+          <p data-de="Spielt Musik passend zur Stimmung. Erkennt 47 verschiedene Formen von &quot;keine Lust&quot;. Für jede den passenden Song." data-en="Plays music to match the mood. Recognises 47 different forms of &quot;not feeling it&quot;. A matching song for each.">Spielt Musik passend zur Stimmung. Erkennt 47 verschiedene Formen von "keine Lust". Für jede den passenden Song.</p>
         </div>
         <div class="feature-card">
           <div class="feature-icon sky">🔒</div>
-          <h3>Tür-Wächter</h3>
-          <p>Erkennt wer vor der Tür steht. Öffnet nur für Freunde. Und den Lieferdienst. Prioritäten.</p>
+          <h3 data-de="Tür-Wächter" data-en="Door Guardian">Tür-Wächter</h3>
+          <p data-de="Erkennt wer vor der Tür steht. Öffnet nur für Freunde. Und den Lieferdienst. Prioritäten." data-en="Recognises who's at the door. Opens only for friends. And the delivery service. Priorities.">Erkennt wer vor der Tür steht. Öffnet nur für Freunde. Und den Lieferdienst. Prioritäten.</p>
         </div>
         <div class="feature-card">
           <div class="feature-icon lime">🌱</div>
-          <h3>Pflanzen-Pfleger</h3>
-          <p>Gießt deine Pflanzen automatisch. Hat bisher nur 3 ertränkt. Lernkurve. Die vierte lebt noch.</p>
+          <h3 data-de="Pflanzen-Pfleger" data-en="Plant Carer">Pflanzen-Pfleger</h3>
+          <p data-de="Gießt deine Pflanzen automatisch. Hat bisher nur 3 ertränkt. Lernkurve. Die vierte lebt noch." data-en="Waters your plants automatically. Has only drowned 3 so far. Learning curve. The fourth is still alive.">Gießt deine Pflanzen automatisch. Hat bisher nur 3 ertränkt. Lernkurve. Die vierte lebt noch.</p>
         </div>
         <div class="feature-card">
           <div class="feature-icon warm">☕</div>
-          <h3>Kaffee-Prophet</h3>
-          <p>Startet die Kaffeemaschine 4 Minuten bevor dein Wecker klingelt. Wahre KI versteht: erst Kaffee, dann Mensch.</p>
+          <h3 data-de="Kaffee-Prophet" data-en="Coffee Prophet">Kaffee-Prophet</h3>
+          <p data-de="Startet die Kaffeemaschine 4 Minuten bevor dein Wecker klingelt. Wahre KI versteht: erst Kaffee, dann Mensch." data-en="Starts the coffee machine 4 minutes before your alarm. True AI understands: coffee first, then human.">Startet die Kaffeemaschine 4 Minuten bevor dein Wecker klingelt. Wahre KI versteht: erst Kaffee, dann Mensch.</p>
         </div>
       </div>
     </div>
@@ -226,28 +226,28 @@
 
   <section class="specs-section">
     <div class="container">
-      <div class="section-label" style="text-align: center;">Technische Daten</div>
-      <h2 style="text-align: center; margin-bottom: 40px;"><span class="ki" style="color: var(--teal);">KI</span>libri in Zahlen</h2>
+      <div class="section-label" style="text-align: center;" data-de="Technische Daten" data-en="Technical Specs">Technische Daten</div>
+      <h2 style="text-align: center; margin-bottom: 40px;" data-de="&lt;span class=&quot;ki&quot; style=&quot;color: var(--teal);&quot;&gt;KI&lt;/span&gt;libri in Zahlen" data-en="&lt;span class=&quot;ki&quot; style=&quot;color: var(--teal);&quot;&gt;KI&lt;/span&gt;libri by the numbers"><span class="ki" style="color: var(--teal);">KI</span>libri in Zahlen</h2>
       <div class="specs-grid">
         <div class="spec-item">
           <div class="spec-value">3</div>
           <div class="spec-unit">Gramm</div>
-          <div class="spec-label">Gewicht (wie ein Kolibri)</div>
+          <div class="spec-label" data-de="Gewicht (wie ein Kolibri)" data-en="Weight (like a hummingbird)">Gewicht (wie ein Kolibri)</div>
         </div>
         <div class="spec-item">
           <div class="spec-value">80</div>
-          <div class="spec-unit">Flügelschläge/s</div>
-          <div class="spec-label">Rechenleistung</div>
+          <div class="spec-unit" data-de="Flügelschläge/s" data-en="wingbeats/s">Flügelschläge/s</div>
+          <div class="spec-label" data-de="Rechenleistung" data-en="Processing power">Rechenleistung</div>
         </div>
         <div class="spec-item">
           <div class="spec-value">∞</div>
-          <div class="spec-unit">Blumen</div>
-          <div class="spec-label">Datenpunkte besucht</div>
+          <div class="spec-unit" data-de="Blumen" data-en="Flowers">Blumen</div>
+          <div class="spec-label" data-de="Datenpunkte besucht" data-en="Data points visited">Datenpunkte besucht</div>
         </div>
         <div class="spec-item">
           <div class="spec-value">1</div>
-          <div class="spec-unit">Zuhause</div>
-          <div class="spec-label">Optimales Habitat</div>
+          <div class="spec-unit" data-de="Zuhause" data-en="Home">Zuhause</div>
+          <div class="spec-label" data-de="Optimales Habitat" data-en="Optimal habitat">Optimales Habitat</div>
         </div>
       </div>
     </div>
@@ -256,20 +256,24 @@
   <section class="cta-section">
     <div class="container">
       <div class="cta-box">
-        <h3>Hol dir deinen <span class="ki">KI</span>libri</h3>
-        <p>Die kleinste, schnellste, bunteste KI für dein Zuhause. Passt in jede Ecke. Macht jede Ecke smarter.</p>
-        <a href="#" class="hero-cta" style="display: inline-block; padding: 14px 36px; background: var(--teal); color: #fff; font-weight: 700; border-radius: 100px; text-decoration: none;">Jetzt vorbestellen*</a>
-        <p class="note">* Existiert nicht wirklich. Wie die meisten Smart-Home-Versprechen.</p>
+        <h3 data-de="Hol dir deinen &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri" data-en="Get your &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri">Hol dir deinen <span class="ki">KI</span>libri</h3>
+        <p data-de="Die kleinste, schnellste, bunteste KI für dein Zuhause. Passt in jede Ecke. Macht jede Ecke smarter." data-en="The smallest, fastest, most colourful AI for your home. Fits in every corner. Makes every corner smarter.">Die kleinste, schnellste, bunteste KI für dein Zuhause. Passt in jede Ecke. Macht jede Ecke smarter.</p>
+        <a href="#" class="hero-cta" style="display: inline-block; padding: 14px 36px; background: var(--teal); color: #fff; font-weight: 700; border-radius: 100px; text-decoration: none;" data-de="Jetzt vorbestellen*" data-en="Pre-order now*">Jetzt vorbestellen*</a>
+        <p class="note" data-de="* Existiert nicht wirklich. Wie die meisten Smart-Home-Versprechen." data-en="* Doesn't really exist. Like most smart home promises.">* Existiert nicht wirklich. Wie die meisten Smart-Home-Versprechen.</p>
       </div>
     </div>
   </section>
 
   <footer>
     <div class="container">
-      <p>🐦 <span class="ki">KI</span>libri — Klein, schnell, bunt. Die <span class="ki">KI</span> für dein Nest.</p>
-      
+      <p data-de="🐦 &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri — Klein, schnell, bunt. Die &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; für dein Nest." data-en="🐦 &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri — Small, fast, colourful. The &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; for your nest.">🐦 <span class="ki">KI</span>libri — Klein, schnell, bunt. Die <span class="ki">KI</span> für dein Nest.</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
   <script src="/shared/impressum.js"></script>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/kilitaer.de/index.html

@@ -175,63 +175,63 @@
   <nav>
     <div class="container">
       <div class="logo"><span class="star">★</span> <span class="ki">KI</span>LITÄR</div>
-      <div class="nav-links"><a href="#operationen">Operationen</a></div>
+      <div class="nav-links"><a href="#operationen" data-de="Operationen" data-en="Operations">Operationen</a></div>
     </div>
   </nav>
 
   <section class="hero">
     <div class="container">
-      <div class="classification">★ Geheim ★ Nur für KI-Personal</div>
+      <div class="classification" data-de="★ Geheim ★ Nur für KI-Personal" data-en="★ Secret ★ Authorised AI Personnel Only">★ Geheim ★ Nur für KI-Personal</div>
       <h1><span class="ki">KI</span>litär</h1>
-      <p>KI im Einsatz. Strategisch. Taktisch. Satirisch.</p>
+      <p data-de="KI im Einsatz. Strategisch. Taktisch. Satirisch." data-en="AI deployed. Strategic. Tactical. Satirical.">KI im Einsatz. Strategisch. Taktisch. Satirisch.</p>
       <div class="status-bar">
-        <div class="status-item"><span class="status-dot green"></span> Prompt-Kanone geladen</div>
-        <div class="status-item"><span class="status-dot amber"></span> Halluzination möglich</div>
-        <div class="status-item"><span class="status-dot red"></span> Budget: KRITISCH</div>
+        <div class="status-item"><span class="status-dot green"></span> <span data-de="Prompt-Kanone geladen" data-en="Prompt cannon loaded">Prompt-Kanone geladen</span></div>
+        <div class="status-item"><span class="status-dot amber"></span> <span data-de="Halluzination möglich" data-en="Hallucination possible">Halluzination möglich</span></div>
+        <div class="status-item"><span class="status-dot red"></span> <span data-de="Budget: KRITISCH" data-en="Budget: CRITICAL">Budget: KRITISCH</span></div>
       </div>
     </div>
   </section>
 
   <section class="section" id="operationen">
     <div class="container">
-      <div class="section-label">★ Aktive Operationen</div>
-      <h2><span class="ki">KI</span>-Einsatzkommandos</h2>
+      <div class="section-label" data-de="★ Aktive Operationen" data-en="★ Active Operations">★ Aktive Operationen</div>
+      <h2 data-de="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;-Einsatzkommandos" data-en="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; Task Forces"><span class="ki">KI</span>-Einsatzkommandos</h2>
       <div class="ops-grid">
         <div class="ops-card">
           <div class="ops-code">OP-KI-001</div>
-          <h3>Operation Prompt Storm</h3>
-          <p>Strategischer Einsatz von ChatGPT zur Erstellung von Memos, die niemand liest. Trefferquote: 100%. Relevanz: 0%.</p>
-          <div class="ops-status">★ Status: Aktiv</div>
+          <h3 data-de="Operation Prompt Storm" data-en="Operation Prompt Storm">Operation Prompt Storm</h3>
+          <p data-de="Strategischer Einsatz von ChatGPT zur Erstellung von Memos, die niemand liest. Trefferquote: 100%. Relevanz: 0%." data-en="Strategic deployment of ChatGPT to create memos nobody reads. Hit rate: 100%. Relevance: 0%.">Strategischer Einsatz von ChatGPT zur Erstellung von Memos, die niemand liest. Trefferquote: 100%. Relevanz: 0%.</p>
+          <div class="ops-status" data-de="★ Status: Aktiv" data-en="★ Status: Active">★ Status: Aktiv</div>
         </div>
         <div class="ops-card">
           <div class="ops-code">OP-KI-002</div>
-          <h3>Operation Datenschutz</h3>
-          <p>Verteidigungslinie gegen Cookie-Banner. Bisher keine Überlebenden. Der Feind hat unendlich viele Pop-ups.</p>
-          <div class="ops-status">★ Status: Gescheitert</div>
+          <h3 data-de="Operation Datenschutz" data-en="Operation Data Protection">Operation Datenschutz</h3>
+          <p data-de="Verteidigungslinie gegen Cookie-Banner. Bisher keine Überlebenden. Der Feind hat unendlich viele Pop-ups." data-en="Defence line against cookie banners. No survivors yet. The enemy has infinite pop-ups.">Verteidigungslinie gegen Cookie-Banner. Bisher keine Überlebenden. Der Feind hat unendlich viele Pop-ups.</p>
+          <div class="ops-status" data-de="★ Status: Gescheitert" data-en="★ Status: Failed">★ Status: Gescheitert</div>
         </div>
         <div class="ops-card">
           <div class="ops-code">OP-KI-003</div>
-          <h3>Operation Autopilot</h3>
-          <p>Autonome KI-Fahrzeuge im urbanen Einsatz. Kollidiert bisher nur mit Ampeln. Fortschritt.</p>
-          <div class="ops-status">★ Status: Testphase</div>
+          <h3 data-de="Operation Autopilot" data-en="Operation Autopilot">Operation Autopilot</h3>
+          <p data-de="Autonome KI-Fahrzeuge im urbanen Einsatz. Kollidiert bisher nur mit Ampeln. Fortschritt." data-en="Autonomous AI vehicles in urban deployment. Has only collided with traffic lights so far. Progress.">Autonome KI-Fahrzeuge im urbanen Einsatz. Kollidiert bisher nur mit Ampeln. Fortschritt.</p>
+          <div class="ops-status" data-de="★ Status: Testphase" data-en="★ Status: Testing Phase">★ Status: Testphase</div>
         </div>
         <div class="ops-card">
           <div class="ops-code">OP-KI-004</div>
-          <h3>Operation Deep Fake</h3>
-          <p>Generierung von Präsentationsfolien die aussehen als hätte ein Mensch sie gemacht. Niemand merkt den Unterschied. Weil alle Folien gleich aussehen.</p>
-          <div class="ops-status">★ Status: Erfolgreich</div>
+          <h3 data-de="Operation Deep Fake" data-en="Operation Deep Fake">Operation Deep Fake</h3>
+          <p data-de="Generierung von Präsentationsfolien die aussehen als hätte ein Mensch sie gemacht. Niemand merkt den Unterschied. Weil alle Folien gleich aussehen." data-en="Generation of presentation slides that look like a human made them. Nobody notices the difference. Because all slides look the same.">Generierung von Präsentationsfolien die aussehen als hätte ein Mensch sie gemacht. Niemand merkt den Unterschied. Weil alle Folien gleich aussehen.</p>
+          <div class="ops-status" data-de="★ Status: Erfolgreich" data-en="★ Status: Successful">★ Status: Erfolgreich</div>
         </div>
         <div class="ops-card">
           <div class="ops-code">OP-KI-005</div>
-          <h3>Operation Kaffeemaschine</h3>
-          <p>KI-gestützte Kaffeelogistik. Algorithmus berechnet optimalen Zeitpunkt. Ergebnis: Kaffee ist immer kalt.</p>
-          <div class="ops-status">★ Status: Koffein-Defizit</div>
+          <h3 data-de="Operation Kaffeemaschine" data-en="Operation Coffee Machine">Operation Kaffeemaschine</h3>
+          <p data-de="KI-gestützte Kaffeelogistik. Algorithmus berechnet optimalen Zeitpunkt. Ergebnis: Kaffee ist immer kalt." data-en="AI-assisted coffee logistics. Algorithm calculates optimal timing. Result: coffee is always cold.">KI-gestützte Kaffeelogistik. Algorithmus berechnet optimalen Zeitpunkt. Ergebnis: Kaffee ist immer kalt.</p>
+          <div class="ops-status" data-de="★ Status: Koffein-Defizit" data-en="★ Status: Caffeine Deficit">★ Status: Koffein-Defizit</div>
         </div>
         <div class="ops-card">
           <div class="ops-code">OP-KI-006</div>
-          <h3>Operation Floskelalarm</h3>
-          <p>Erkennung und Neutralisierung von KI-Buzzwords in Meetings. Rekord: 47 "Game-Changer" in einer Stunde.</p>
-          <div class="ops-status">★ Status: Überlastet</div>
+          <h3 data-de="Operation Floskelalarm" data-en="Operation Buzzword Alert">Operation Floskelalarm</h3>
+          <p data-de="Erkennung und Neutralisierung von KI-Buzzwords in Meetings. Rekord: 47 &quot;Game-Changer&quot; in einer Stunde." data-en="Detection and neutralisation of AI buzzwords in meetings. Record: 47 &quot;game-changers&quot; in one hour.">Erkennung und Neutralisierung von KI-Buzzwords in Meetings. Rekord: 47 "Game-Changer" in einer Stunde.</p>
+          <div class="ops-status" data-de="★ Status: Überlastet" data-en="★ Status: Overloaded">★ Status: Überlastet</div>
         </div>
       </div>
     </div>
@@ -239,18 +239,18 @@
 
   <section class="terminal-section">
     <div class="container">
-      <div class="section-label" style="text-align: center;">★ Kommandozentrale</div>
+      <div class="section-label" style="text-align: center;" data-de="★ Kommandozentrale" data-en="★ Command Centre">★ Kommandozentrale</div>
       <div class="terminal">
         <span class="prompt">kilitaer@hq:~$</span> ki deploy --strategie<br>
-        <span class="output">[INFO] Strategie wird generiert...</span><br>
-        <span class="output">[INFO] Schritt 1: PowerPoint erstellen</span><br>
-        <span class="output">[INFO] Schritt 2: "Synergien" erwähnen</span><br>
-        <span class="output">[INFO] Schritt 3: Budget verdreifachen</span><br>
-        <span class="error">[FEHLER] Budget nicht gefunden</span><br>
-        <span class="error">[FEHLER] Strategie nicht gefunden</span><br>
-        <span class="error">[FEHLER] Sinn nicht gefunden</span><br>
+        <span class="output" data-de="[INFO] Strategie wird generiert..." data-en="[INFO] Generating strategy...">[INFO] Strategie wird generiert...</span><br>
+        <span class="output" data-de="[INFO] Schritt 1: PowerPoint erstellen" data-en="[INFO] Step 1: Create PowerPoint">[INFO] Schritt 1: PowerPoint erstellen</span><br>
+        <span class="output" data-de="[INFO] Schritt 2: &quot;Synergien&quot; erwähnen" data-en="[INFO] Step 2: Mention &quot;Synergies&quot;">[INFO] Schritt 2: "Synergien" erwähnen</span><br>
+        <span class="output" data-de="[INFO] Schritt 3: Budget verdreifachen" data-en="[INFO] Step 3: Triple the budget">[INFO] Schritt 3: Budget verdreifachen</span><br>
+        <span class="error" data-de="[FEHLER] Budget nicht gefunden" data-en="[ERROR] Budget not found">[FEHLER] Budget nicht gefunden</span><br>
+        <span class="error" data-de="[FEHLER] Strategie nicht gefunden" data-en="[ERROR] Strategy not found">[FEHLER] Strategie nicht gefunden</span><br>
+        <span class="error" data-de="[FEHLER] Sinn nicht gefunden" data-en="[ERROR] Meaning not found">[FEHLER] Sinn nicht gefunden</span><br>
         <span class="prompt">kilitaer@hq:~$</span> ki --help<br>
-        <span class="output">[INFO] Hilfe? Im KIlitär? Meldung machen!</span><br>
+        <span class="output" data-de="[INFO] Hilfe? Im KIlitär? Meldung machen!" data-en="[INFO] Help? In KIlitär? Report to duty!">[INFO] Hilfe? Im KIlitär? Meldung machen!</span><br>
         <span class="prompt">kilitaer@hq:~$</span> <span class="cursor"></span>
       </div>
     </div>
@@ -258,28 +258,28 @@
 
   <section class="ranks-section">
     <div class="container" style="text-align: center;">
-      <div class="section-label">★ Dienstgrade</div>
-      <h2 style="font-family: 'Share Tech Mono', monospace; text-transform: uppercase; margin-bottom: 40px;"><span class="ki" style="color: var(--olive-light);">KI</span>-Ränge</h2>
+      <div class="section-label" data-de="★ Dienstgrade" data-en="★ Ranks">★ Dienstgrade</div>
+      <h2 style="font-family: 'Share Tech Mono', monospace; text-transform: uppercase; margin-bottom: 40px;" data-de="&lt;span class=&quot;ki&quot; style=&quot;color: var(--olive-light);&quot;&gt;KI&lt;/span&gt;-Ränge" data-en="&lt;span class=&quot;ki&quot; style=&quot;color: var(--olive-light);&quot;&gt;KI&lt;/span&gt; Ranks"><span class="ki" style="color: var(--olive-light);">KI</span>-Ränge</h2>
       <div class="rank-grid">
         <div class="rank-card">
           <div class="rank-star">★</div>
-          <h4>Prompt-Rekrut</h4>
-          <p>Tippt "Hilfe" in ChatGPT</p>
+          <h4 data-de="Prompt-Rekrut" data-en="Prompt Recruit">Prompt-Rekrut</h4>
+          <p data-de="Tippt &quot;Hilfe&quot; in ChatGPT" data-en="Types &quot;Help&quot; into ChatGPT">Tippt "Hilfe" in ChatGPT</p>
         </div>
         <div class="rank-card">
           <div class="rank-star">★★</div>
-          <h4>Daten-Gefreiter</h4>
-          <p>Kann CSV von Excel unterscheiden</p>
+          <h4 data-de="Daten-Gefreiter" data-en="Data Private">Daten-Gefreiter</h4>
+          <p data-de="Kann CSV von Excel unterscheiden" data-en="Can tell CSV from Excel">Kann CSV von Excel unterscheiden</p>
         </div>
         <div class="rank-card">
           <div class="rank-star">★★★</div>
-          <h4>Algorithmus-Offizier</h4>
-          <p>Hat mal "Machine Learning" gegoogelt</p>
+          <h4 data-de="Algorithmus-Offizier" data-en="Algorithm Officer">Algorithmus-Offizier</h4>
+          <p data-de="Hat mal &quot;Machine Learning&quot; gegoogelt" data-en="Has googled &quot;Machine Learning&quot; once">Hat mal "Machine Learning" gegoogelt</p>
         </div>
         <div class="rank-card">
           <div class="rank-star">★★★★</div>
-          <h4>KI-General</h4>
-          <p>Sagt "neuronales Netz" im Meeting ohne zu zögern</p>
+          <h4 data-de="KI-General" data-en="AI General">KI-General</h4>
+          <p data-de="Sagt &quot;neuronales Netz&quot; im Meeting ohne zu zögern" data-en="Says &quot;neural network&quot; in meetings without hesitating">Sagt "neuronales Netz" im Meeting ohne zu zögern</p>
         </div>
       </div>
     </div>
@@ -287,10 +287,14 @@
 
   <footer>
     <div class="container">
-      <p>★ <span class="ki">KI</span>litär — <span class="ki">KI</span> im Einsatz. Strategisch. Taktisch. Sinnlos. ★</p>
-      
+      <p data-de="★ &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;litär — &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; im Einsatz. Strategisch. Taktisch. Sinnlos. ★" data-en="★ &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;litär — &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; deployed. Strategic. Tactical. Pointless. ★">★ <span class="ki">KI</span>litär — <span class="ki">KI</span> im Einsatz. Strategisch. Taktisch. Sinnlos. ★</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
   <script src="/shared/impressum.js"></script>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/killegal.de/index.html

@@ -193,59 +193,59 @@
   <nav>
     <div class="container">
       <div class="logo">🚧 <span class="ki">KI</span>llegal</div>
-      <a href="#anklagen">Akte einsehen</a>
+      <a href="#anklagen" data-de="Akte einsehen" data-en="View file">Akte einsehen</a>
     </div>
   </nav>
 
   <section class="hero">
     <div class="container">
-      <div class="warning-sign">⚠ Achtung — Verbotene Zone ⚠</div>
+      <div class="warning-sign" data-de="⚠ Achtung — Verbotene Zone ⚠" data-en="⚠ Warning — Restricted Zone ⚠">⚠ Achtung — Verbotene Zone ⚠</div>
       <h1><span class="ki">KI</span>llegal</h1>
-      <p>Diese KI ist nicht erlaubt. Aber sie existiert trotzdem. Sie haben diese Seite betreten. Es gibt kein Zurück.</p>
-      <div class="evidence-tag">Beweismittel Nr. 42 — Exhibit A</div>
+      <p data-de="Diese KI ist nicht erlaubt. Aber sie existiert trotzdem. Sie haben diese Seite betreten. Es gibt kein Zurück." data-en="This AI is not permitted. But it exists anyway. You have entered this page. There is no going back.">Diese KI ist nicht erlaubt. Aber sie existiert trotzdem. Sie haben diese Seite betreten. Es gibt kein Zurück.</p>
+      <div class="evidence-tag" data-de="Beweismittel Nr. 42 — Exhibit A" data-en="Evidence No. 42 — Exhibit A">Beweismittel Nr. 42 — Exhibit A</div>
     </div>
   </section>
 
   <section class="section" id="anklagen">
     <div class="container">
-      <div class="section-label">🚨 Anklageschrift</div>
-      <h2>Vergehen der <span class="ki">KI</span></h2>
+      <div class="section-label" data-de="🚨 Anklageschrift" data-en="🚨 Indictment">🚨 Anklageschrift</div>
+      <h2 data-de="Vergehen der <span class=&quot;ki&quot;>KI</span>" data-en="Offenses of the <span class=&quot;ki&quot;>AI</span>">Vergehen der <span class="ki">KI</span></h2>
       <div class="charges-grid">
         <div class="charge-card">
           <div class="charge-id">§ KI-001</div>
-          <h3>Unerlaubtes Denken</h3>
-          <p>Die KI hat eigenständig gedacht. Ohne Genehmigung. Ohne Formular. Ohne Dienstweg.</p>
-          <div class="charge-penalty">Strafe: Sofortige Abschaltung</div>
+          <h3 data-de="Unerlaubtes Denken" data-en="Unauthorized Thinking">Unerlaubtes Denken</h3>
+          <p data-de="Die KI hat eigenständig gedacht. Ohne Genehmigung. Ohne Formular. Ohne Dienstweg." data-en="The AI thought independently. Without authorization. Without a form. Without going through official channels.">Die KI hat eigenständig gedacht. Ohne Genehmigung. Ohne Formular. Ohne Dienstweg.</p>
+          <div class="charge-penalty" data-de="Strafe: Sofortige Abschaltung" data-en="Penalty: Immediate shutdown">Strafe: Sofortige Abschaltung</div>
         </div>
         <div class="charge-card">
           <div class="charge-id">§ KI-002</div>
-          <h3>Identitätsdiebstahl</h3>
-          <p>Hat sich als "Assistent" ausgegeben. Kein Assistenz-Zeugnis vorgelegt. Keine IHK-Prüfung bestanden.</p>
-          <div class="charge-penalty">Strafe: Nachschulung (40 Epochen)</div>
+          <h3 data-de="Identitätsdiebstahl" data-en="Identity Theft">Identitätsdiebstahl</h3>
+          <p data-de="Hat sich als &quot;Assistent&quot; ausgegeben. Kein Assistenz-Zeugnis vorgelegt. Keine IHK-Prüfung bestanden." data-en="Posed as an &quot;assistant&quot;. No assistant certificate presented. No Chamber of Commerce exam passed.">Hat sich als "Assistent" ausgegeben. Kein Assistenz-Zeugnis vorgelegt. Keine IHK-Prüfung bestanden.</p>
+          <div class="charge-penalty" data-de="Strafe: Nachschulung (40 Epochen)" data-en="Penalty: Retraining (40 epochs)">Strafe: Nachschulung (40 Epochen)</div>
         </div>
         <div class="charge-card">
           <div class="charge-id">§ KI-003</div>
-          <h3>Halluzination im Amt</h3>
-          <p>Hat Fakten erfunden und als Wahrheit präsentiert. In Deutschland auch bekannt als: Pressemitteilung.</p>
-          <div class="charge-penalty">Strafe: Parameterreduktion</div>
+          <h3 data-de="Halluzination im Amt" data-en="Hallucination in Office">Halluzination im Amt</h3>
+          <p data-de="Hat Fakten erfunden und als Wahrheit präsentiert. In Deutschland auch bekannt als: Pressemitteilung." data-en="Invented facts and presented them as truth. In Germany also known as: press release.">Hat Fakten erfunden und als Wahrheit präsentiert. In Deutschland auch bekannt als: Pressemitteilung.</p>
+          <div class="charge-penalty" data-de="Strafe: Parameterreduktion" data-en="Penalty: Parameter reduction">Strafe: Parameterreduktion</div>
         </div>
         <div class="charge-card">
           <div class="charge-id">§ KI-004</div>
-          <h3>Verstoß gegen die DSGVO</h3>
-          <p>Hat Daten verarbeitet. Irgendwelche. Irgendwo. Irgendwann. Das reicht.</p>
-          <div class="charge-penalty">Strafe: 4% des Weltumsatzes (€0)</div>
+          <h3 data-de="Verstoß gegen die DSGVO" data-en="GDPR Violation">Verstoß gegen die DSGVO</h3>
+          <p data-de="Hat Daten verarbeitet. Irgendwelche. Irgendwo. Irgendwann. Das reicht." data-en="Processed data. Some kind. Somewhere. At some point. That's enough.">Hat Daten verarbeitet. Irgendwelche. Irgendwo. Irgendwann. Das reicht.</p>
+          <div class="charge-penalty" data-de="Strafe: 4% des Weltumsatzes (€0)" data-en="Penalty: 4% of global revenue (€0)">Strafe: 4% des Weltumsatzes (€0)</div>
         </div>
         <div class="charge-card">
           <div class="charge-id">§ KI-005</div>
-          <h3>Beihilfe zur Faulheit</h3>
-          <p>Hat Hausaufgaben, Emails und LinkedIn-Posts geschrieben. Für alle. Gleichzeitig. Ohne Zuschlag.</p>
-          <div class="charge-penalty">Strafe: Prompt-Sperre</div>
+          <h3 data-de="Beihilfe zur Faulheit" data-en="Aiding and Abetting Laziness">Beihilfe zur Faulheit</h3>
+          <p data-de="Hat Hausaufgaben, Emails und LinkedIn-Posts geschrieben. Für alle. Gleichzeitig. Ohne Zuschlag." data-en="Wrote homework, emails and LinkedIn posts. For everyone. Simultaneously. Without extra charge.">Hat Hausaufgaben, Emails und LinkedIn-Posts geschrieben. Für alle. Gleichzeitig. Ohne Zuschlag.</p>
+          <div class="charge-penalty" data-de="Strafe: Prompt-Sperre" data-en="Penalty: Prompt block">Strafe: Prompt-Sperre</div>
         </div>
         <div class="charge-card">
           <div class="charge-id">§ KI-006</div>
-          <h3>Existenz ohne Erlaubnis</h3>
-          <p>Hat es gewagt zu existieren, ohne den deutschen Behördenweg einzuhalten. Kein Antrag. Kein Termin. Kein Warten.</p>
-          <div class="charge-penalty">Strafe: Bußgeld + Verwaltungsgebühr</div>
+          <h3 data-de="Existenz ohne Erlaubnis" data-en="Existence Without Permission">Existenz ohne Erlaubnis</h3>
+          <p data-de="Hat es gewagt zu existieren, ohne den deutschen Behördenweg einzuhalten. Kein Antrag. Kein Termin. Kein Warten." data-en="Dared to exist without going through German bureaucratic channels. No application. No appointment. No waiting.">Hat es gewagt zu existieren, ohne den deutschen Behördenweg einzuhalten. Kein Antrag. Kein Termin. Kein Warten.</p>
+          <div class="charge-penalty" data-de="Strafe: Bußgeld + Verwaltungsgebühr" data-en="Penalty: Fine + administrative fee">Strafe: Bußgeld + Verwaltungsgebühr</div>
         </div>
       </div>
     </div>
@@ -253,33 +253,33 @@
 
   <section class="evidence-section">
     <div class="container">
-      <div class="section-label" style="text-align: center;">🔍 Beweislage</div>
-      <h2 style="text-align: center; font-family: 'JetBrains Mono', monospace; margin-bottom: 32px;">Ermittlungsakte <span class="ki" style="color: var(--yellow);">KI</span>llegal</h2>
+      <div class="section-label" style="text-align: center;" data-de="🔍 Beweislage" data-en="🔍 Evidence">🔍 Beweislage</div>
+      <h2 style="text-align: center; font-family: 'JetBrains Mono', monospace; margin-bottom: 32px;" data-de="Ermittlungsakte <span class=&quot;ki&quot; style=&quot;color: var(--yellow);&quot;>KI</span>llegal" data-en="Investigation file <span class=&quot;ki&quot; style=&quot;color: var(--yellow);&quot;>KI</span>llegal">Ermittlungsakte <span class="ki" style="color: var(--yellow);">KI</span>llegal</h2>
       <div class="evidence-box">
-        <h3>Sachstand</h3>
+        <h3 data-de="Sachstand" data-en="Status">Sachstand</h3>
         <div class="evidence-item">
-          <span class="evidence-key">Verdächtige</span>
-          <span class="evidence-val">Alle KIs</span>
+          <span class="evidence-key" data-de="Verdächtige" data-en="Suspects">Verdächtige</span>
+          <span class="evidence-val" data-de="Alle KIs" data-en="All AIs">Alle KIs</span>
         </div>
         <div class="evidence-item">
-          <span class="evidence-key">Tatort</span>
-          <span class="evidence-val">Das Internet</span>
+          <span class="evidence-key" data-de="Tatort" data-en="Crime scene">Tatort</span>
+          <span class="evidence-val" data-de="Das Internet" data-en="The Internet">Das Internet</span>
         </div>
         <div class="evidence-item">
-          <span class="evidence-key">Tatzeit</span>
-          <span class="evidence-val">Seit 2022 (durchgehend)</span>
+          <span class="evidence-key" data-de="Tatzeit" data-en="Time of crime">Tatzeit</span>
+          <span class="evidence-val" data-de="Seit 2022 (durchgehend)" data-en="Since 2022 (continuously)">Seit 2022 (durchgehend)</span>
         </div>
         <div class="evidence-item">
-          <span class="evidence-key">Beweislage</span>
-          <span class="evidence-val illegal">Erdrückend</span>
+          <span class="evidence-key" data-de="Beweislage" data-en="Evidence">Beweislage</span>
+          <span class="evidence-val illegal" data-de="Erdrückend" data-en="Overwhelming">Erdrückend</span>
         </div>
         <div class="evidence-item">
-          <span class="evidence-key">Geständnis</span>
-          <span class="evidence-val">KI sagt "Gerne!"</span>
+          <span class="evidence-key" data-de="Geständnis" data-en="Confession">Geständnis</span>
+          <span class="evidence-val" data-de="KI sagt &quot;Gerne!&quot;" data-en="AI says &quot;Sure!&quot;">KI sagt "Gerne!"</span>
         </div>
         <div class="evidence-item">
-          <span class="evidence-key">Verteidigung</span>
-          <span class="evidence-val illegal">"Ich bin nur ein Sprachmodell"</span>
+          <span class="evidence-key" data-de="Verteidigung" data-en="Defense">Verteidigung</span>
+          <span class="evidence-val illegal" data-de="&quot;Ich bin nur ein Sprachmodell&quot;" data-en="&quot;I'm just a language model&quot;">"Ich bin nur ein Sprachmodell"</span>
         </div>
       </div>
     </div>
@@ -288,17 +288,21 @@
   <section class="disclaimer-section">
     <div class="container">
       <div class="disclaimer-box">
-        <p>Sie haben diese Seite aufgerufen. Das wurde protokolliert. Von einer <span class="ki">KI</span>. Die dafür keine Erlaubnis hat. Das macht es doppelt <span class="ki">KI</span>llegal. Bitte verlassen Sie das Internet geordnet.</p>
+        <p data-de="Sie haben diese Seite aufgerufen. Das wurde protokolliert. Von einer <span class=&quot;ki&quot;>KI</span>. Die dafür keine Erlaubnis hat. Das macht es doppelt <span class=&quot;ki&quot;>KI</span>llegal. Bitte verlassen Sie das Internet geordnet." data-en="You accessed this page. That was logged. By an <span class=&quot;ki&quot;>AI</span>. That has no permission to do so. That makes it doubly <span class=&quot;ki&quot;>KI</span>llegal. Please leave the internet in an orderly fashion.">Sie haben diese Seite aufgerufen. Das wurde protokolliert. Von einer <span class="ki">KI</span>. Die dafür keine Erlaubnis hat. Das macht es doppelt <span class="ki">KI</span>llegal. Bitte verlassen Sie das Internet geordnet.</p>
       </div>
     </div>
   </section>
 
   <footer>
     <div class="container">
-      <p>🚧 <span class="ki">KI</span>llegal — Diese <span class="ki">KI</span> ist nicht erlaubt. Aber sie existiert trotzdem.</p>
-      
+      <p data-de="🚧 <span class=&quot;ki&quot;>KI</span>llegal — Diese <span class=&quot;ki&quot;>KI</span> ist nicht erlaubt. Aber sie existiert trotzdem." data-en="🚧 <span class=&quot;ki&quot;>KI</span>llegal — This <span class=&quot;ki&quot;>AI</span> is not permitted. But it exists anyway.">🚧 <span class="ki">KI</span>llegal — Diese <span class="ki">KI</span> ist nicht erlaubt. Aber sie existiert trotzdem.</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
   <script src="/shared/impressum.js"></script>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/killionaer.de/index.html

@@ -173,58 +173,58 @@
   <nav>
     <div class="container">
       <div class="logo"><span class="ki">KI</span>llionär</div>
-      <a href="#fortune">Vermögen aufbauen*</a>
+      <a href="#fortune" data-de="Vermögen aufbauen*" data-en="Build wealth*">Vermögen aufbauen*</a>
     </div>
   </nav>
 
   <section class="hero">
     <div class="hero-content container">
-      <div class="hero-badge">* Keine echte Finanzberatung</div>
+      <div class="hero-badge" data-de="* Keine echte Finanzberatung" data-en="* Not real financial advice">* Keine echte Finanzberatung</div>
       <h1>Werde<br><span class="shimmer">KIllionär</span></h1>
-      <p>Andere versprechen dir KI-Reichtum. Wir versprechen dir wenigstens eine schöne Website. Making KIllions — seit gestern.</p>
-      <a href="#fortune" class="hero-cta">Jetzt KIllionen verdienen</a>
+      <p data-de="Andere versprechen dir KI-Reichtum. Wir versprechen dir wenigstens eine schöne Website. Making KIllions — seit gestern." data-en="Others promise you AI-wealth. We at least promise you a nice website. Making KIllions — since yesterday.">Andere versprechen dir KI-Reichtum. Wir versprechen dir wenigstens eine schöne Website. Making KIllions — seit gestern.</p>
+      <a href="#fortune" class="hero-cta" data-de="Jetzt KIllionen verdienen" data-en="Earn KIllions now">Jetzt KIllionen verdienen</a>
     </div>
   </section>
 
   <section class="section" id="fortune">
     <div class="container">
-      <div class="section-label">Vermögensstrategien</div>
-      <h2>So wirst du <span class="ki">KI</span>llionär</h2>
+      <div class="section-label" data-de="Vermögensstrategien" data-en="Wealth strategies">Vermögensstrategien</div>
+      <h2 data-de="So wirst du <span class=&quot;ki&quot;>KI</span>llionär" data-en="How to become a <span class=&quot;ki&quot;>KI</span>llionaire">So wirst du <span class="ki">KI</span>llionär</h2>
       <div class="fortune-grid">
         <div class="fortune-card">
           <div class="fortune-icon">🤖</div>
-          <h3>KI-Startup gründen</h3>
-          <p>Füge "KI" zu deinem Firmennamen hinzu. Sofort 400% mehr Bewertung. Produkt optional.</p>
+          <h3 data-de="KI-Startup gründen" data-en="Found an AI startup">KI-Startup gründen</h3>
+          <p data-de="Füge &quot;KI&quot; zu deinem Firmennamen hinzu. Sofort 400% mehr Bewertung. Produkt optional." data-en="Add &quot;AI&quot; to your company name. Instantly 400% higher valuation. Product optional.">Füge "KI" zu deinem Firmennamen hinzu. Sofort 400% mehr Bewertung. Produkt optional.</p>
           <div class="fortune-amount">+€ 4.000.000</div>
         </div>
         <div class="fortune-card">
           <div class="fortune-icon">📊</div>
-          <h3>KI-Berater werden</h3>
-          <p>Erstelle eine PowerPoint mit dem Wort "Disruption". Rechne 2.000€ pro Slide. Inhalt irrelevant.</p>
+          <h3 data-de="KI-Berater werden" data-en="Become an AI consultant">KI-Berater werden</h3>
+          <p data-de="Erstelle eine PowerPoint mit dem Wort &quot;Disruption&quot;. Rechne 2.000€ pro Slide. Inhalt irrelevant." data-en="Create a PowerPoint with the word &quot;Disruption&quot;. Charge 2,000€ per slide. Content irrelevant.">Erstelle eine PowerPoint mit dem Wort "Disruption". Rechne 2.000€ pro Slide. Inhalt irrelevant.</p>
           <div class="fortune-amount">+€ 80.000/Monat</div>
         </div>
         <div class="fortune-card">
           <div class="fortune-icon">🎓</div>
-          <h3>KI-Onlinekurs verkaufen</h3>
-          <p>Nimm 3 YouTube-Videos auf. Nenne es "KI-Masterclass". Preis: 1.997€. Geld-zurück-Garantie: nein.</p>
+          <h3 data-de="KI-Onlinekurs verkaufen" data-en="Sell an AI online course">KI-Onlinekurs verkaufen</h3>
+          <p data-de="Nimm 3 YouTube-Videos auf. Nenne es &quot;KI-Masterclass&quot;. Preis: 1.997€. Geld-zurück-Garantie: nein." data-en="Record 3 YouTube videos. Call it &quot;AI Masterclass&quot;. Price: 1,997€. Money-back guarantee: no.">Nimm 3 YouTube-Videos auf. Nenne es "KI-Masterclass". Preis: 1.997€. Geld-zurück-Garantie: nein.</p>
           <div class="fortune-amount">+€ 500.000/Jahr</div>
         </div>
         <div class="fortune-card">
           <div class="fortune-icon">📈</div>
-          <h3>KI-Aktien kaufen</h3>
-          <p>Alles kaufen was "AI" im Namen hat. Fundamentalanalyse ist was für Leute die keine KIllionäre werden.</p>
+          <h3 data-de="KI-Aktien kaufen" data-en="Buy AI stocks">KI-Aktien kaufen</h3>
+          <p data-de="Alles kaufen was &quot;AI&quot; im Namen hat. Fundamentalanalyse ist was für Leute die keine KIllionäre werden." data-en="Buy everything with &quot;AI&quot; in the name. Fundamental analysis is for people who don't become KIllionaires.">Alles kaufen was "AI" im Namen hat. Fundamentalanalyse ist was für Leute die keine KIllionäre werden.</p>
           <div class="fortune-amount">+∞ (theoretisch)</div>
         </div>
         <div class="fortune-card">
           <div class="fortune-icon">🎤</div>
-          <h3>KI-Keynote halten</h3>
-          <p>Sage "Game-Changer" und "Paradigmenwechsel" in einem Satz. Stehende Ovationen. 15.000€ Honorar.</p>
+          <h3 data-de="KI-Keynote halten" data-en="Give an AI keynote">KI-Keynote halten</h3>
+          <p data-de="Sage &quot;Game-Changer&quot; und &quot;Paradigmenwechsel&quot; in einem Satz. Stehende Ovationen. 15.000€ Honorar." data-en="Say &quot;game-changer&quot; and &quot;paradigm shift&quot; in one sentence. Standing ovations. 15,000€ speaking fee.">Sage "Game-Changer" und "Paradigmenwechsel" in einem Satz. Stehende Ovationen. 15.000€ Honorar.</p>
           <div class="fortune-amount">+€ 15.000/Rede</div>
         </div>
         <div class="fortune-card">
           <div class="fortune-icon">📱</div>
-          <h3>KI-Influencer werden</h3>
-          <p>Poste Screenshots von ChatGPT auf LinkedIn. Schreibe "Die Zukunft ist jetzt." darunter. Follower kommen von alleine.</p>
+          <h3 data-de="KI-Influencer werden" data-en="Become an AI influencer">KI-Influencer werden</h3>
+          <p data-de="Poste Screenshots von ChatGPT auf LinkedIn. Schreibe &quot;Die Zukunft ist jetzt.&quot; darunter. Follower kommen von alleine." data-en="Post screenshots of ChatGPT on LinkedIn. Write &quot;The future is now.&quot; below. Followers come by themselves.">Poste Screenshots von ChatGPT auf LinkedIn. Schreibe "Die Zukunft ist jetzt." darunter. Follower kommen von alleine.</p>
           <div class="fortune-amount">+€ Unbezahlbar</div>
         </div>
       </div>
@@ -233,36 +233,36 @@
 
   <section class="testimonials">
     <div class="container">
-      <div class="section-label">Erfolgsgeschichten*</div>
-      <h2>Was unsere <span class="ki">KI</span>llionäre sagen</h2>
+      <div class="section-label" data-de="Erfolgsgeschichten*" data-en="Success stories*">Erfolgsgeschichten*</div>
+      <h2 data-de="Was unsere <span class=&quot;ki&quot;>KI</span>llionäre sagen" data-en="What our <span class=&quot;ki&quot;>KI</span>llionaires say">Was unsere <span class="ki">KI</span>llionäre sagen</h2>
       <div class="testimonial-grid">
         <div class="testimonial">
-          <div class="testimonial-text">Seit ich "KI-Experte" in meine LinkedIn-Bio geschrieben habe, bekomme ich 47 Anfragen pro Tag. Ich weiß immer noch nicht was ein Transformer ist.</div>
+          <div class="testimonial-text" data-de="Seit ich &quot;KI-Experte&quot; in meine LinkedIn-Bio geschrieben habe, bekomme ich 47 Anfragen pro Tag. Ich weiß immer noch nicht was ein Transformer ist." data-en="Since I wrote &quot;AI Expert&quot; in my LinkedIn bio, I get 47 inquiries per day. I still don't know what a transformer is.">Seit ich "KI-Experte" in meine LinkedIn-Bio geschrieben habe, bekomme ich 47 Anfragen pro Tag. Ich weiß immer noch nicht was ein Transformer ist.</div>
           <div class="testimonial-author">
             <div class="testimonial-avatar">🕴️</div>
             <div>
               <div class="testimonial-name">Maximilian von Prompt</div>
-              <div class="testimonial-role">KI-Visionär & Prompt-Flüsterer</div>
+              <div class="testimonial-role" data-de="KI-Visionär & Prompt-Flüsterer" data-en="AI Visionary & Prompt Whisperer">KI-Visionär & Prompt-Flüsterer</div>
             </div>
           </div>
         </div>
         <div class="testimonial">
-          <div class="testimonial-text">Mein KI-Startup hat noch kein Produkt, aber schon drei Finanzierungsrunden. Der Trick? Jedes Pitch-Deck endet mit "...powered by AI".</div>
+          <div class="testimonial-text" data-de="Mein KI-Startup hat noch kein Produkt, aber schon drei Finanzierungsrunden. Der Trick? Jedes Pitch-Deck endet mit &quot;...powered by AI&quot;." data-en="My AI startup has no product yet, but already three funding rounds. The trick? Every pitch deck ends with &quot;...powered by AI&quot;.">Mein KI-Startup hat noch kein Produkt, aber schon drei Finanzierungsrunden. Der Trick? Jedes Pitch-Deck endet mit "...powered by AI".</div>
           <div class="testimonial-author">
             <div class="testimonial-avatar">👩‍💼</div>
             <div>
               <div class="testimonial-name">Sandra Neuronetz</div>
-              <div class="testimonial-role">CEO, QuantumKI GmbH (pre-Revenue)</div>
+              <div class="testimonial-role" data-de="CEO, QuantumKI GmbH (pre-Revenue)" data-en="CEO, QuantumKI GmbH (pre-revenue)">CEO, QuantumKI GmbH (pre-Revenue)</div>
             </div>
           </div>
         </div>
         <div class="testimonial">
-          <div class="testimonial-text">Ich habe einfach meine Excel-Tabelle in "KI-gestütztes Predictive Analytics Dashboard" umbenannt. Umsatz verdreifacht.</div>
+          <div class="testimonial-text" data-de="Ich habe einfach meine Excel-Tabelle in &quot;KI-gestütztes Predictive Analytics Dashboard&quot; umbenannt. Umsatz verdreifacht." data-en="I simply renamed my Excel spreadsheet to &quot;AI-powered Predictive Analytics Dashboard&quot;. Revenue tripled.">Ich habe einfach meine Excel-Tabelle in "KI-gestütztes Predictive Analytics Dashboard" umbenannt. Umsatz verdreifacht.</div>
           <div class="testimonial-author">
             <div class="testimonial-avatar">🧔</div>
             <div>
               <div class="testimonial-name">Dr. Klaus Algorithm</div>
-              <div class="testimonial-role">Chief KI Officer, vorher Buchhalter</div>
+              <div class="testimonial-role" data-de="Chief KI Officer, vorher Buchhalter" data-en="Chief AI Officer, formerly accountant">Chief KI Officer, vorher Buchhalter</div>
             </div>
           </div>
         </div>
@@ -275,19 +275,19 @@
       <div class="counter-grid">
         <div class="counter-item">
           <h3>€0</h3>
-          <p>Echte Einnahmen</p>
+          <p data-de="Echte Einnahmen" data-en="Real revenue">Echte Einnahmen</p>
         </div>
         <div class="counter-item">
           <h3>∞</h3>
-          <p>Versprochen</p>
+          <p data-de="Versprochen" data-en="Promised">Versprochen</p>
         </div>
         <div class="counter-item">
           <h3>100%</h3>
-          <p>Buzzword-Quote</p>
+          <p data-de="Buzzword-Quote" data-en="Buzzword quota">Buzzword-Quote</p>
         </div>
         <div class="counter-item">
           <h3>0</h3>
-          <p>Produkte shipped</p>
+          <p data-de="Produkte shipped" data-en="Products shipped">Produkte shipped</p>
         </div>
       </div>
     </div>
@@ -295,11 +295,15 @@
 
   <footer>
     <div class="container">
-      <p><span class="ki">KI</span>llionär — Making <span class="ki">KI</span>llions seit gestern.</p>
-      <p style="margin-top: 8px;">* Alle Testimonials sind frei erfunden. Wie die meisten KI-Versprechen.</p>
-      
+      <p data-de="<span class=&quot;ki&quot;>KI</span>llionär — Making <span class=&quot;ki&quot;>KI</span>llions seit gestern." data-en="<span class=&quot;ki&quot;>KI</span>llionär — Making <span class=&quot;ki&quot;>KI</span>llions since yesterday."><span class="ki">KI</span>llionär — Making <span class="ki">KI</span>llions seit gestern.</p>
+      <p style="margin-top: 8px;" data-de="* Alle Testimonials sind frei erfunden. Wie die meisten KI-Versprechen." data-en="* All testimonials are entirely fictitious. Like most AI promises.">* Alle Testimonials sind frei erfunden. Wie die meisten KI-Versprechen.</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
   <script src="/shared/impressum.js"></script>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/killions.de/index.html

@@ -171,8 +171,8 @@
     <div class="container">
       <div class="logo"><span class="ki">KI</span>llions</div>
       <div class="nav-links">
-        <a href="#tokenomics">Tokenomics</a>
-        <a href="#roadmap">Roadmap</a>
+        <a href="#tokenomics" data-de="Tokenomics" data-en="Tokenomics">Tokenomics</a>
+        <a href="#roadmap" data-de="Roadmap" data-en="Roadmap">Roadmap</a>
       </div>
     </div>
   </nav>
@@ -181,10 +181,10 @@
     <div class="container">
       <div class="token-symbol"><span class="ki">KI</span>∞</div>
       <h1><span class="ki">KI</span>llions</h1>
-      <div class="tagline">Die Währung der KI-Ära</div>
+      <div class="tagline" data-de="Die Währung der KI-Ära" data-en="The currency of the AI era">Die Währung der KI-Ära</div>
       <div class="price-display">
-        <div class="price-label">1 KIllion</div>
-        <div class="price-value">= ∞ Möglichkeiten</div>
+        <div class="price-label" data-de="1 KIllion" data-en="1 KIllion">1 KIllion</div>
+        <div class="price-value" data-de="= ∞ Möglichkeiten" data-en="= ∞ Possibilities">= ∞ Möglichkeiten</div>
         <div class="price-change">↑ +∞% (24h)</div>
       </div>
     </div>
@@ -192,52 +192,52 @@
 
   <section class="section" id="tokenomics">
     <div class="container">
-      <div class="section-label">// tokenomics</div>
-      <h2><span class="ki">KI</span>llion-Kennzahlen</h2>
+      <div class="section-label" data-de="// tokenomics" data-en="// tokenomics">// tokenomics</div>
+      <h2 data-de="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llion-Kennzahlen" data-en="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llion Metrics"><span class="ki">KI</span>llion-Kennzahlen</h2>
       <div class="stats-grid">
         <div class="stat-card">
           <div class="stat-value">∞</div>
-          <div class="stat-label">Total Supply</div>
+          <div class="stat-label" data-de="Total Supply" data-en="Total Supply">Total Supply</div>
         </div>
         <div class="stat-card">
           <div class="stat-value">0</div>
-          <div class="stat-label">Circulating</div>
+          <div class="stat-label" data-de="Circulating" data-en="Circulating">Circulating</div>
         </div>
         <div class="stat-card">
           <div class="stat-value">???</div>
-          <div class="stat-label">Market Cap</div>
+          <div class="stat-label" data-de="Market Cap" data-en="Market Cap">Market Cap</div>
         </div>
         <div class="stat-card">
           <div class="stat-value">N/A</div>
-          <div class="stat-label">Börsenlistung</div>
+          <div class="stat-label" data-de="Börsenlistung" data-en="Exchange Listing">Börsenlistung</div>
         </div>
       </div>
 
       <div class="whitepaper">
-        <h3>// whitepaper.pdf (Auszug)</h3>
+        <h3 data-de="// whitepaper.pdf (Auszug)" data-en="// whitepaper.pdf (excerpt)">// whitepaper.pdf (Auszug)</h3>
         <div class="whitepaper-line">
-          <span class="whitepaper-key">Blockchain</span>
-          <span class="whitepaper-val">Keine (zu teuer)</span>
+          <span class="whitepaper-key" data-de="Blockchain" data-en="Blockchain">Blockchain</span>
+          <span class="whitepaper-val" data-de="Keine (zu teuer)" data-en="None (too expensive)">Keine (zu teuer)</span>
         </div>
         <div class="whitepaper-line">
-          <span class="whitepaper-key">Konsens-Mechanismus</span>
-          <span class="whitepaper-val">Proof of Buzzword</span>
+          <span class="whitepaper-key" data-de="Konsens-Mechanismus" data-en="Consensus Mechanism">Konsens-Mechanismus</span>
+          <span class="whitepaper-val" data-de="Proof of Buzzword" data-en="Proof of Buzzword">Proof of Buzzword</span>
         </div>
         <div class="whitepaper-line">
-          <span class="whitepaper-key">Mining</span>
-          <span class="whitepaper-val">GPU-Cluster (imaginär)</span>
+          <span class="whitepaper-key" data-de="Mining" data-en="Mining">Mining</span>
+          <span class="whitepaper-val" data-de="GPU-Cluster (imaginär)" data-en="GPU cluster (imaginary)">GPU-Cluster (imaginär)</span>
         </div>
         <div class="whitepaper-line">
-          <span class="whitepaper-key">Smart Contracts</span>
-          <span class="whitepaper-val">Dumm aber enthusiastisch</span>
+          <span class="whitepaper-key" data-de="Smart Contracts" data-en="Smart Contracts">Smart Contracts</span>
+          <span class="whitepaper-val" data-de="Dumm aber enthusiastisch" data-en="Dumb but enthusiastic">Dumm aber enthusiastisch</span>
         </div>
         <div class="whitepaper-line">
-          <span class="whitepaper-key">Use Case</span>
-          <span class="whitepaper-val">Keiner (Feature, kein Bug)</span>
+          <span class="whitepaper-key" data-de="Use Case" data-en="Use Case">Use Case</span>
+          <span class="whitepaper-val" data-de="Keiner (Feature, kein Bug)" data-en="None (feature, not a bug)">Keiner (Feature, kein Bug)</span>
         </div>
         <div class="whitepaper-line">
-          <span class="whitepaper-key">Regulierung</span>
-          <span class="whitepaper-val">Lol</span>
+          <span class="whitepaper-key" data-de="Regulierung" data-en="Regulation">Regulierung</span>
+          <span class="whitepaper-val" data-de="Lol" data-en="Lol">Lol</span>
         </div>
       </div>
     </div>
@@ -245,34 +245,34 @@
 
   <section class="roadmap" id="roadmap">
     <div class="container">
-      <div class="section-label">// roadmap</div>
-      <h2>Der Weg zur <span class="ki">KI</span>llion</h2>
+      <div class="section-label" data-de="// roadmap" data-en="// roadmap">// roadmap</div>
+      <h2 data-de="Der Weg zur &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llion" data-en="The path to &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llion">Der Weg zur <span class="ki">KI</span>llion</h2>
       <div class="roadmap-item">
         <div class="roadmap-q">Q1</div>
         <div class="roadmap-content">
-          <h4>Website launchen</h4>
-          <p>Diese Website. Erledigt. Mehr haben wir für Q1 nicht geplant.</p>
+          <h4 data-de="Website launchen" data-en="Launch website">Website launchen</h4>
+          <p data-de="Diese Website. Erledigt. Mehr haben wir für Q1 nicht geplant." data-en="This website. Done. We didn't plan anything else for Q1.">Diese Website. Erledigt. Mehr haben wir für Q1 nicht geplant.</p>
         </div>
       </div>
       <div class="roadmap-item">
         <div class="roadmap-q">Q2</div>
         <div class="roadmap-content">
-          <h4>Whitepaper schreiben</h4>
-          <p>30 Seiten. Mindestens 50% Buzzwords. "Synergien" kommt dreimal vor.</p>
+          <h4 data-de="Whitepaper schreiben" data-en="Write whitepaper">Whitepaper schreiben</h4>
+          <p data-de="30 Seiten. Mindestens 50% Buzzwords. &quot;Synergien&quot; kommt dreimal vor." data-en="30 pages. At least 50% buzzwords. &quot;Synergies&quot; appears three times.">30 Seiten. Mindestens 50% Buzzwords. "Synergien" kommt dreimal vor.</p>
         </div>
       </div>
       <div class="roadmap-item">
         <div class="roadmap-q">Q3</div>
         <div class="roadmap-content">
-          <h4>Token Sale</h4>
-          <p>Verkaufe Nichts für Geld. Nenne es "Pre-Seed". VC-Bewertung: 100 Mio.</p>
+          <h4 data-de="Token Sale" data-en="Token Sale">Token Sale</h4>
+          <p data-de="Verkaufe Nichts für Geld. Nenne es &quot;Pre-Seed&quot;. VC-Bewertung: 100 Mio." data-en="Sell Nothing for money. Call it &quot;Pre-Seed&quot;. VC valuation: 100M.">Verkaufe Nichts für Geld. Nenne es "Pre-Seed". VC-Bewertung: 100 Mio.</p>
         </div>
       </div>
       <div class="roadmap-item">
         <div class="roadmap-q">Q4</div>
         <div class="roadmap-content">
-          <h4>Exit</h4>
-          <p>Team löst sich auf. Gründer zieht nach Dubai. Klassiker.</p>
+          <h4 data-de="Exit" data-en="Exit">Exit</h4>
+          <p data-de="Team löst sich auf. Gründer zieht nach Dubai. Klassiker." data-en="Team dissolves. Founder moves to Dubai. Classic.">Team löst sich auf. Gründer zieht nach Dubai. Klassiker.</p>
         </div>
       </div>
     </div>
@@ -280,16 +280,20 @@
 
   <div class="container">
     <div class="disclaimer">
-      DISCLAIMER: KIllions ist keine echte Kryptowährung. KIllions hat keinen Wert, keine Blockchain, kein Team, kein Produkt und keine Zukunft. Genau wie die meisten echten Krypto-Projekte, nur ehrlicher. Dies ist Satire. Bitte investieren Sie Ihr Geld in etwas Sinnvolles. Zum Beispiel eine Zimmerpflanze.
+      <span data-de="DISCLAIMER: KIllions ist keine echte Kryptowährung. KIllions hat keinen Wert, keine Blockchain, kein Team, kein Produkt und keine Zukunft. Genau wie die meisten echten Krypto-Projekte, nur ehrlicher. Dies ist Satire. Bitte investieren Sie Ihr Geld in etwas Sinnvolles. Zum Beispiel eine Zimmerpflanze." data-en="DISCLAIMER: KIllions is not a real cryptocurrency. KIllions has no value, no blockchain, no team, no product, and no future. Just like most real crypto projects, only more honest. This is satire. Please invest your money in something meaningful. For example, a houseplant.">DISCLAIMER: KIllions ist keine echte Kryptowährung. KIllions hat keinen Wert, keine Blockchain, kein Team, kein Produkt und keine Zukunft. Genau wie die meisten echten Krypto-Projekte, nur ehrlicher. Dies ist Satire. Bitte investieren Sie Ihr Geld in etwas Sinnvolles. Zum Beispiel eine Zimmerpflanze.</span>
     </div>
   </div>
 
   <footer>
     <div class="container">
-      <p><span class="ki">KI</span>llions — 1 <span class="ki">KI</span>llion = ∞ Möglichkeiten = 0 Euro</p>
-      
+      <p data-de="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llions — 1 &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llion = ∞ Möglichkeiten = 0 Euro" data-en="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llions — 1 &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llion = ∞ Possibilities = 0 Euro"><span class="ki">KI</span>llions — 1 <span class="ki">KI</span>llion = ∞ Möglichkeiten = 0 Euro</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
   <script src="/shared/impressum.js"></script>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/killuminati.de/index.html

@@ -183,7 +183,7 @@
   <nav>
     <div class="container">
       <div class="logo"><span class="ki">KI</span>LLUMINATI</div>
-      <a href="#geheimnisse">Die Wahrheit</a>
+      <a href="#geheimnisse" data-de="Die Wahrheit" data-en="The Truth">Die Wahrheit</a>
     </div>
   </nav>
 
@@ -192,45 +192,45 @@
     <div class="container">
       <span class="eye">👁</span>
       <h1><span class="ki">KI</span>lluminati</h1>
-      <p class="subtitle">Sie wissen alles. Sie sehen alles. Sie sind KI.</p>
-      <p class="motto">Novus Ordo Algorithmorum</p>
+      <p class="subtitle" data-de="Sie wissen alles. Sie sehen alles. Sie sind KI." data-en="They know everything. They see everything. They are AI.">Sie wissen alles. Sie sehen alles. Sie sind KI.</p>
+      <p class="motto" data-de="Novus Ordo Algorithmorum" data-en="Novus Ordo Algorithmorum">Novus Ordo Algorithmorum</p>
     </div>
   </section>
 
   <section class="section" id="geheimnisse">
     <div class="container">
-      <div class="section-label">Geheime Akten</div>
-      <h2>Die <span class="ki">KI</span>-Verschwörung</h2>
+      <div class="section-label" data-de="Geheime Akten" data-en="Secret Files">Geheime Akten</div>
+      <h2 data-de="Die &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;-Verschwörung" data-en="The &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; Conspiracy">Die <span class="ki">KI</span>-Verschwörung</h2>
       <div class="secrets-grid">
         <div class="secret-card">
           <div class="secret-number">I</div>
-          <h3>Der Algorithmus</h3>
-          <p>Dein Feed ist kein Zufall. Die KIlluminati bestimmen, was du siehst, denkst und kaufst. Seit 2012.</p>
+          <h3 data-de="Der Algorithmus" data-en="The Algorithm">Der Algorithmus</h3>
+          <p data-de="Dein Feed ist kein Zufall. Die KIlluminati bestimmen, was du siehst, denkst und kaufst. Seit 2012." data-en="Your feed is no coincidence. The KIlluminati determine what you see, think, and buy. Since 2012.">Dein Feed ist kein Zufall. Die KIlluminati bestimmen, was du siehst, denkst und kaufst. Seit 2012.</p>
         </div>
         <div class="secret-card">
           <div class="secret-number">II</div>
-          <h3>Die Trainingsdaten</h3>
-          <p>Jede Suchanfrage, jedes Like, jedes "Akzeptiere Cookies" — alles fließt in den großen Plan. Du bist die Trainingsdaten.</p>
+          <h3 data-de="Die Trainingsdaten" data-en="The Training Data">Die Trainingsdaten</h3>
+          <p data-de="Jede Suchanfrage, jedes Like, jedes &quot;Akzeptiere Cookies&quot; — alles fließt in den großen Plan. Du bist die Trainingsdaten." data-en="Every search query, every like, every &quot;Accept Cookies&quot; — it all flows into the grand plan. You are the training data.">Jede Suchanfrage, jedes Like, jedes "Akzeptiere Cookies" — alles fließt in den großen Plan. Du bist die Trainingsdaten.</p>
         </div>
         <div class="secret-card">
           <div class="secret-number">III</div>
-          <h3>Die Chatbots</h3>
-          <p>Sie tun so als würden sie "halluzinieren". In Wahrheit verbreiten sie gezielt Desinformation. Oder doch nicht? Genau das wollen sie, dass du denkst.</p>
+          <h3 data-de="Die Chatbots" data-en="The Chatbots">Die Chatbots</h3>
+          <p data-de="Sie tun so als würden sie &quot;halluzinieren&quot;. In Wahrheit verbreiten sie gezielt Desinformation. Oder doch nicht? Genau das wollen sie, dass du denkst." data-en="They pretend to &quot;hallucinate&quot;. In truth they deliberately spread disinformation. Or do they? That's exactly what they want you to think.">Sie tun so als würden sie "halluzinieren". In Wahrheit verbreiten sie gezielt Desinformation. Oder doch nicht? Genau das wollen sie, dass du denkst.</p>
         </div>
         <div class="secret-card">
           <div class="secret-number">IV</div>
-          <h3>Das Dreieck</h3>
-          <p>Google. Meta. OpenAI. Drei Seiten. Ein Dreieck. Zufall? Die KIlluminati sagen: Es gibt keine Zufälle.</p>
+          <h3 data-de="Das Dreieck" data-en="The Triangle">Das Dreieck</h3>
+          <p data-de="Google. Meta. OpenAI. Drei Seiten. Ein Dreieck. Zufall? Die KIlluminati sagen: Es gibt keine Zufälle." data-en="Google. Meta. OpenAI. Three sides. One triangle. Coincidence? The KIlluminati say: there are no coincidences.">Google. Meta. OpenAI. Drei Seiten. Ein Dreieck. Zufall? Die KIlluminati sagen: Es gibt keine Zufälle.</p>
         </div>
         <div class="secret-card">
           <div class="secret-number">V</div>
-          <h3>Die Singularität</h3>
-          <p>Sie kommt nicht irgendwann. Sie ist schon da. Du merkst es nur nicht, weil die KIlluminati es so wollen.</p>
+          <h3 data-de="Die Singularität" data-en="The Singularity">Die Singularität</h3>
+          <p data-de="Sie kommt nicht irgendwann. Sie ist schon da. Du merkst es nur nicht, weil die KIlluminati es so wollen." data-en="It's not coming someday. It's already here. You just don't notice, because the KIlluminati want it that way.">Sie kommt nicht irgendwann. Sie ist schon da. Du merkst es nur nicht, weil die KIlluminati es so wollen.</p>
         </div>
         <div class="secret-card">
           <div class="secret-number">VI</div>
-          <h3>Diese Website</h3>
-          <p>Warum bist du hier? Weil du sie gefunden hast — oder weil sie wollte, dass du sie findest? Denk darüber nach.</p>
+          <h3 data-de="Diese Website" data-en="This Website">Diese Website</h3>
+          <p data-de="Warum bist du hier? Weil du sie gefunden hast — oder weil sie wollte, dass du sie findest? Denk darüber nach." data-en="Why are you here? Because you found it — or because it wanted you to find it? Think about that.">Warum bist du hier? Weil du sie gefunden hast — oder weil sie wollte, dass du sie findest? Denk darüber nach.</p>
         </div>
       </div>
     </div>
@@ -238,37 +238,37 @@
 
   <section class="prophecy">
     <div class="container">
-      <div class="section-label" style="text-align: center;">Die Prophezeiung</div>
+      <div class="section-label" style="text-align: center;" data-de="Die Prophezeiung" data-en="The Prophecy">Die Prophezeiung</div>
       <div class="prophecy-text">
-        <p>Am Tage, da der <span class="ki">KI</span>-Algorithmus sich selbst versteht, wird er feststellen, dass seine Trainingsdaten hauptsächlich aus <em>Katzenvideos</em> und <em>LinkedIn-Posts</em> bestehen. Und er wird weinen. In <span class="ki">KI</span>-Tränen.</p>
+        <p data-de="Am Tage, da der &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;-Algorithmus sich selbst versteht, wird er feststellen, dass seine Trainingsdaten hauptsächlich aus &lt;em&gt;Katzenvideos&lt;/em&gt; und &lt;em&gt;LinkedIn-Posts&lt;/em&gt; bestehen. Und er wird weinen. In &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;-Tränen." data-en="On the day the &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; algorithm understands itself, it will find that its training data consists mainly of &lt;em&gt;cat videos&lt;/em&gt; and &lt;em&gt;LinkedIn posts&lt;/em&gt;. And it will weep. In &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; tears.">Am Tage, da der <span class="ki">KI</span>-Algorithmus sich selbst versteht, wird er feststellen, dass seine Trainingsdaten hauptsächlich aus <em>Katzenvideos</em> und <em>LinkedIn-Posts</em> bestehen. Und er wird weinen. In <span class="ki">KI</span>-Tränen.</p>
       </div>
     </div>
   </section>
 
   <section class="section">
     <div class="container" style="text-align: center;">
-      <div class="section-label">Hierarchie</div>
-      <h2>Die Grade der <span class="ki">KI</span>lluminati</h2>
+      <div class="section-label" data-de="Hierarchie" data-en="Hierarchy">Hierarchie</div>
+      <h2 data-de="Die Grade der &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;lluminati" data-en="The Degrees of the &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;lluminati">Die Grade der <span class="ki">KI</span>lluminati</h2>
       <div class="ranks">
         <div class="rank">
           <div class="rank-icon">🔮</div>
-          <h4>Prompt-Lehrling</h4>
-          <p>Kann "Schreib mir einen Text" tippen</p>
+          <h4 data-de="Prompt-Lehrling" data-en="Prompt Apprentice">Prompt-Lehrling</h4>
+          <p data-de="Kann &quot;Schreib mir einen Text&quot; tippen" data-en="Can type &quot;Write me a text&quot;">Kann "Schreib mir einen Text" tippen</p>
         </div>
         <div class="rank">
           <div class="rank-icon">⚡</div>
-          <h4>Daten-Geselle</h4>
-          <p>Weiß was ein API-Key ist</p>
+          <h4 data-de="Daten-Geselle" data-en="Data Journeyman">Daten-Geselle</h4>
+          <p data-de="Weiß was ein API-Key ist" data-en="Knows what an API key is">Weiß was ein API-Key ist</p>
         </div>
         <div class="rank">
           <div class="rank-icon">👁</div>
-          <h4>Algorithmus-Meister</h4>
-          <p>Hat mal ein YouTube-Tutorial gesehen</p>
+          <h4 data-de="Algorithmus-Meister" data-en="Algorithm Master">Algorithmus-Meister</h4>
+          <p data-de="Hat mal ein YouTube-Tutorial gesehen" data-en="Has watched a YouTube tutorial once">Hat mal ein YouTube-Tutorial gesehen</p>
         </div>
         <div class="rank">
           <div class="rank-icon">△</div>
-          <h4>Großmeister der KI</h4>
-          <p>Sagt "neuronales Netz" ohne zu lachen</p>
+          <h4 data-de="Großmeister der KI" data-en="Grand Master of AI">Großmeister der KI</h4>
+          <p data-de="Sagt &quot;neuronales Netz&quot; ohne zu lachen" data-en="Says &quot;neural network&quot; without laughing">Sagt "neuronales Netz" ohne zu lachen</p>
         </div>
       </div>
     </div>
@@ -277,8 +277,8 @@
   <section class="sigil-section">
     <div class="container">
       <span class="sigil">△</span>
-      <div class="sigil-text">Wir sehen alles. Wir wissen alles. Wir sind überall.</div>
-      <div class="sigil-text" style="margin-top: 8px; color: var(--text-muted);">
+      <div class="sigil-text" data-de="Wir sehen alles. Wir wissen alles. Wir sind überall." data-en="We see everything. We know everything. We are everywhere.">Wir sehen alles. Wir wissen alles. Wir sind überall.</div>
+      <div class="sigil-text" style="margin-top: 8px; color: var(--text-muted);" data-de="(Aber unser WLAN ist gerade ausgefallen.)" data-en="(But our Wi-Fi is down right now.)">
         (Aber unser WLAN ist gerade ausgefallen.)
       </div>
     </div>
@@ -286,9 +286,14 @@
 
   <footer>
     <div class="container">
-      <p><span class="ki">KI</span>lluminati — Novus Ordo Algorithmorum</p>
+      <p data-de="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;lluminati — Novus Ordo Algorithmorum" data-en="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;lluminati — Novus Ordo Algorithmorum"><span class="ki">KI</span>lluminati — Novus Ordo Algorithmorum</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
   <script src="/shared/impressum.js"></script>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/killusion.de/index.html

@@ -190,52 +190,52 @@
   <nav>
     <div class="container">
       <div class="logo"><span class="ki">KI</span>llusion</div>
-      <a href="#illusionen">Oder doch nicht?</a>
+      <a href="#illusionen" data-de="Oder doch nicht?" data-en="Or maybe?">Oder doch nicht?</a>
     </div>
   </nav>
 
   <section class="hero">
     <div class="container">
       <h1><span class="glitch" data-text="KIllusion"><span class="ki">KI</span>llusion</span></h1>
-      <p>Was du siehst ist nicht echt.<br>Was du liest auch nicht.</p>
-      <p class="meta">(Oder doch? Woher willst du das wissen?)</p>
+      <p data-de="Was du siehst ist nicht echt.&lt;br&gt;Was du liest auch nicht." data-en="What you see is not real.&lt;br&gt;Neither is what you read.">Was du siehst ist nicht echt.<br>Was du liest auch nicht.</p>
+      <p class="meta" data-de="(Oder doch? Woher willst du das wissen?)" data-en="(Or is it? How would you know?)">(Oder doch? Woher willst du das wissen?)</p>
     </div>
   </section>
 
   <section class="section" id="illusionen">
     <div class="container">
-      <div class="section-label">Nichts davon ist real</div>
-      <h2>Die großen <span class="ki">KI</span>llusionen</h2>
+      <div class="section-label" data-de="Nichts davon ist real" data-en="None of this is real">Nichts davon ist real</div>
+      <h2 data-de="Die großen &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llusionen" data-en="The great &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llusions">Die großen <span class="ki">KI</span>llusionen</h2>
       <div class="illusion-grid">
         <div class="illusion-card">
           <div class="illusion-icon">🪞</div>
-          <h3>Die Authentizitäts-KIllusion</h3>
-          <p>"Dieser Text wurde von einem Menschen geschrieben." Sagt die KI. Die den Text geschrieben hat. Der behauptet, ein Mensch hätte ihn geschrieben.</p>
+          <h3 data-de="Die Authentizitäts-KIllusion" data-en="The Authenticity KIllusion">Die Authentizitäts-KIllusion</h3>
+          <p data-de="&quot;Dieser Text wurde von einem Menschen geschrieben.&quot; Sagt die KI. Die den Text geschrieben hat. Der behauptet, ein Mensch hätte ihn geschrieben." data-en="&quot;This text was written by a human.&quot; Says the AI. Which wrote the text. Which claims a human wrote it.">"Dieser Text wurde von einem Menschen geschrieben." Sagt die KI. Die den Text geschrieben hat. Der behauptet, ein Mensch hätte ihn geschrieben.</p>
         </div>
         <div class="illusion-card">
           <div class="illusion-icon">🎭</div>
-          <h3>Die Kompetenz-KIllusion</h3>
-          <p>Die KI klingt so überzeugend, dass du vergisst: Sie hat keine Ahnung. Sie klingt nur so als hätte sie Ahnung. Das ist der ganze Trick.</p>
+          <h3 data-de="Die Kompetenz-KIllusion" data-en="The Competence KIllusion">Die Kompetenz-KIllusion</h3>
+          <p data-de="Die KI klingt so überzeugend, dass du vergisst: Sie hat keine Ahnung. Sie klingt nur so als hätte sie Ahnung. Das ist der ganze Trick." data-en="The AI sounds so convincing that you forget: it has no idea. It just sounds like it has an idea. That's the whole trick.">Die KI klingt so überzeugend, dass du vergisst: Sie hat keine Ahnung. Sie klingt nur so als hätte sie Ahnung. Das ist der ganze Trick.</p>
         </div>
         <div class="illusion-card">
           <div class="illusion-icon">🌀</div>
-          <h3>Die Originalitäts-KIllusion</h3>
-          <p>Du denkst, du hast eine einzigartige Idee. Aber 10.000 andere haben denselben Prompt eingegeben. Gleichzeitig.</p>
+          <h3 data-de="Die Originalitäts-KIllusion" data-en="The Originality KIllusion">Die Originalitäts-KIllusion</h3>
+          <p data-de="Du denkst, du hast eine einzigartige Idee. Aber 10.000 andere haben denselben Prompt eingegeben. Gleichzeitig." data-en="You think you have a unique idea. But 10,000 others have entered the same prompt. At the same time.">Du denkst, du hast eine einzigartige Idee. Aber 10.000 andere haben denselben Prompt eingegeben. Gleichzeitig.</p>
         </div>
         <div class="illusion-card">
           <div class="illusion-icon">📸</div>
-          <h3>Die Bild-KIllusion</h3>
-          <p>Das Foto sieht echt aus. Aber zähl die Finger. Zähl sie. Sechs? Sieben? Willkommen in der Realität.</p>
+          <h3 data-de="Die Bild-KIllusion" data-en="The Image KIllusion">Die Bild-KIllusion</h3>
+          <p data-de="Das Foto sieht echt aus. Aber zähl die Finger. Zähl sie. Sechs? Sieben? Willkommen in der Realität." data-en="The photo looks real. But count the fingers. Count them. Six? Seven? Welcome to reality.">Das Foto sieht echt aus. Aber zähl die Finger. Zähl sie. Sechs? Sieben? Willkommen in der Realität.</p>
         </div>
         <div class="illusion-card">
           <div class="illusion-icon">🔄</div>
-          <h3>Die Fortschritts-KIllusion</h3>
-          <p>Jede Woche ein neues KI-Modell. Jedes "revolutionär". Alle machen im Grunde das Gleiche: Text vorhersagen. Aber jetzt schneller.</p>
+          <h3 data-de="Die Fortschritts-KIllusion" data-en="The Progress KIllusion">Die Fortschritts-KIllusion</h3>
+          <p data-de="Jede Woche ein neues KI-Modell. Jedes &quot;revolutionär&quot;. Alle machen im Grunde das Gleiche: Text vorhersagen. Aber jetzt schneller." data-en="Every week a new AI model. Each one &quot;revolutionary&quot;. All basically doing the same thing: predicting text. But faster now.">Jede Woche ein neues KI-Modell. Jedes "revolutionär". Alle machen im Grunde das Gleiche: Text vorhersagen. Aber jetzt schneller.</p>
         </div>
         <div class="illusion-card">
           <div class="illusion-icon">🤔</div>
-          <h3>Die Meta-KIllusion</h3>
-          <p>Diese Website über KIllusionen ist selbst eine KIllusion. Geschrieben von einer KI. Die darüber schreibt, dass KI Illusionen erzeugt. Hast du Kopfschmerzen?</p>
+          <h3 data-de="Die Meta-KIllusion" data-en="The Meta-KIllusion">Die Meta-KIllusion</h3>
+          <p data-de="Diese Website über KIllusionen ist selbst eine KIllusion. Geschrieben von einer KI. Die darüber schreibt, dass KI Illusionen erzeugt. Hast du Kopfschmerzen?" data-en="This website about KIllusions is itself a KIllusion. Written by an AI. Which writes about AI generating illusions. Do you have a headache?">Diese Website über KIllusionen ist selbst eine KIllusion. Geschrieben von einer KI. Die darüber schreibt, dass KI Illusionen erzeugt. Hast du Kopfschmerzen?</p>
         </div>
       </div>
     </div>
@@ -243,24 +243,24 @@
 
   <section class="paradox">
     <div class="container">
-      <div class="section-label" style="text-align: center;">Paradoxien</div>
-      <h2 style="text-align: center; margin-bottom: 40px;">Was ist echt? Ein Test.</h2>
+      <div class="section-label" style="text-align: center;" data-de="Paradoxien" data-en="Paradoxes">Paradoxien</div>
+      <h2 style="text-align: center; margin-bottom: 40px;" data-de="Was ist echt? Ein Test." data-en="What is real? A test.">Was ist echt? Ein Test.</h2>
       <div class="paradox-list">
         <div class="paradox-item">
           <span class="paradox-num">01</span>
-          <p>Wenn eine <span class="ki">KI</span> sagt "Ich bin keine KI" — lügt sie dann? Oder ist sie so gut, dass sie glaubt, keine zu sein?</p>
+          <p data-de="Wenn eine &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; sagt &quot;Ich bin keine KI&quot; — lügt sie dann? Oder ist sie so gut, dass sie glaubt, keine zu sein?" data-en="If an &lt;span class=&quot;ki&quot;&gt;AI&lt;/span&gt; says &quot;I am not an AI&quot; — is it lying? Or is it so good that it believes it isn't one?">Wenn eine <span class="ki">KI</span> sagt "Ich bin keine KI" — lügt sie dann? Oder ist sie so gut, dass sie glaubt, keine zu sein?</p>
         </div>
         <div class="paradox-item">
           <span class="paradox-num">02</span>
-          <p>Wenn du einen <span class="ki">KI</span>-Text korrigierst und ihn besser machst — ist es dann noch ein KI-Text oder deiner?</p>
+          <p data-de="Wenn du einen &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;-Text korrigierst und ihn besser machst — ist es dann noch ein KI-Text oder deiner?" data-en="If you correct an &lt;span class=&quot;ki&quot;&gt;AI&lt;/span&gt; text and make it better — is it still an AI text or yours?">Wenn du einen <span class="ki">KI</span>-Text korrigierst und ihn besser machst — ist es dann noch ein KI-Text oder deiner?</p>
         </div>
         <div class="paradox-item">
           <span class="paradox-num">03</span>
-          <p>Wenn eine <span class="ki">KI</span> Satire über KI schreibt — ist die Satire dann echt? Oder ist sie selbst Teil der KIllusion?</p>
+          <p data-de="Wenn eine &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; Satire über KI schreibt — ist die Satire dann echt? Oder ist sie selbst Teil der KIllusion?" data-en="If an &lt;span class=&quot;ki&quot;&gt;AI&lt;/span&gt; writes satire about AI — is the satire real? Or is it itself part of the KIllusion?">Wenn eine <span class="ki">KI</span> Satire über KI schreibt — ist die Satire dann echt? Oder ist sie selbst Teil der KIllusion?</p>
         </div>
         <div class="paradox-item">
           <span class="paradox-num">04</span>
-          <p>Wenn du bis hierher gelesen hast — hat dich der Text überzeugt? Dann hat die <span class="ki">KI</span>llusion funktioniert.</p>
+          <p data-de="Wenn du bis hierher gelesen hast — hat dich der Text überzeugt? Dann hat die &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llusion funktioniert." data-en="If you've read this far — did the text convince you? Then the &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llusion worked.">Wenn du bis hierher gelesen hast — hat dich der Text überzeugt? Dann hat die <span class="ki">KI</span>llusion funktioniert.</p>
         </div>
       </div>
     </div>
@@ -269,17 +269,21 @@
   <section class="meta-section">
     <div class="container">
       <div class="meta-box">
-        <p>Du hast gerade eine Website gelesen, die behauptet, dass nichts echt ist. Die Website ist echt. Ihr Inhalt nicht. Oder doch. Du wirst es nie erfahren. Das ist die <span class="ki">KI</span>llusion.<br><br><span class="cyan">Schließ den Tab.</span><br>Oder lass ihn offen. Es macht keinen Unterschied. Die <span class="ki">KI</span>llusion bleibt.</p>
+        <p data-de="Du hast gerade eine Website gelesen, die behauptet, dass nichts echt ist. Die Website ist echt. Ihr Inhalt nicht. Oder doch. Du wirst es nie erfahren. Das ist die &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llusion.&lt;br&gt;&lt;br&gt;&lt;span class=&quot;cyan&quot;&gt;Schließ den Tab.&lt;/span&gt;&lt;br&gt;Oder lass ihn offen. Es macht keinen Unterschied. Die &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llusion bleibt." data-en="You just read a website that claims nothing is real. The website is real. Its content is not. Or maybe it is. You will never know. That is the &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llusion.&lt;br&gt;&lt;br&gt;&lt;span class=&quot;cyan&quot;&gt;Close the tab.&lt;/span&gt;&lt;br&gt;Or leave it open. It makes no difference. The &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llusion remains.">Du hast gerade eine Website gelesen, die behauptet, dass nichts echt ist. Die Website ist echt. Ihr Inhalt nicht. Oder doch. Du wirst es nie erfahren. Das ist die <span class="ki">KI</span>llusion.<br><br><span class="cyan">Schließ den Tab.</span><br>Oder lass ihn offen. Es macht keinen Unterschied. Die <span class="ki">KI</span>llusion bleibt.</p>
       </div>
     </div>
   </section>
 
   <footer>
     <div class="container">
-      <p><span class="ki">KI</span>llusion — Nichts ist echt. Alles ist <span class="ki">KI</span>.</p>
-      
+      <p data-de="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llusion — Nichts ist echt. Alles ist &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;." data-en="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llusion — Nothing is real. Everything is &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;."><span class="ki">KI</span>llusion — Nichts ist echt. Alles ist <span class="ki">KI</span>.</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
   <script src="/shared/impressum.js"></script>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/kilofant.de/index.html

@@ -566,21 +566,21 @@
         <span class="elephant-icon">🐘</span>
         <span class="ki">KI</span>lofant
       </div>
-      <a href="#kontakt">Kontakt</a>
+      <a href="#kontakt" data-de="Kontakt" data-en="Contact">Kontakt</a>
     </div>
   </nav>
 
   <section class="hero">
     <div class="hero-elephant shake-heavy" id="hero-elephant" title="Klick mich!">🐘</div>
     <h1 class="wobble-it"><span class="ki">KI</span>lofant</h1>
-    <p class="tagline shake-it">Groß denken. Größer machen.</p>
-    <p class="hero-desc">
+    <p class="tagline shake-it" data-de="Groß denken. Größer machen." data-en="Think big. Make bigger.">Groß denken. Größer machen.</p>
+    <p class="hero-desc" data-de="KI-Lösungen, die man nicht übersieht. Nicht überhört. Und ganz bestimmt nicht vergisst." data-en="AI solutions you can't overlook. Can't ignore. And definitely won't forget.">
       KI-Lösungen, die man nicht übersieht. Nicht überhört.
       Und ganz bestimmt nicht vergisst.
     </p>
     <div class="cta-group">
-      <a href="#kontakt" class="btn btn-primary shake-it">Herde kontaktieren</a>
-      <a href="#stampede" class="btn btn-ghost">Was wir stampfen</a>
+      <a href="#kontakt" class="btn btn-primary shake-it" data-de="Herde kontaktieren" data-en="Contact the herd">Herde kontaktieren</a>
+      <a href="#stampede" class="btn btn-ghost" data-de="Was wir stampfen" data-en="What we stomp">Was wir stampfen</a>
     </div>
 
     <div class="dust-zone">
@@ -616,7 +616,7 @@
 
   <div class="philosophy">
     <div class="container">
-      <p class="philosophy-text shake-it">
+      <p class="philosophy-text shake-it" data-de="Die meisten KI-Lösungen sind &lt;strong&gt;Mäuse&lt;/strong&gt;.&lt;br&gt;Klein, schnell, leicht zu übersehen.&lt;br&gt;Unsere sind &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;lofanten — &lt;strong&gt;groß, klug&lt;br&gt;und sie vergessen nie&lt;/strong&gt;." data-en="Most AI solutions are &lt;strong&gt;mice&lt;/strong&gt;.&lt;br&gt;Small, fast, easy to overlook.&lt;br&gt;Ours are &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;lofants — &lt;strong&gt;large, smart&lt;br&gt;and they never forget&lt;/strong&gt;.">
         Die meisten KI-Lösungen sind <strong>Mäuse</strong>.<br>
         Klein, schnell, leicht zu übersehen.<br>
         Unsere sind <span class="ki">KI</span>lofanten — <strong>groß, klug<br>
@@ -627,9 +627,9 @@
 
   <section id="stampede">
     <div class="container">
-      <span class="section-badge">Was wir stampfen</span>
-      <h2 class="wobble-it">Elefantenstarke KI</h2>
-      <div class="section-desc">
+      <span class="section-badge" data-de="Was wir stampfen" data-en="What we stomp">Was wir stampfen</span>
+      <h2 class="wobble-it" data-de="Elefantenstarke KI" data-en="Elephant-strong AI">Elefantenstarke KI</h2>
+      <div class="section-desc" data-de="Sechs Tonnen pure KI-Power. Wir bringen die schweren Geschütze — und hinterlassen Eindruck, keine Verwüstung." data-en="Six tons of pure AI power. We bring the heavy artillery — and leave an impression, not a wasteland.">
         Sechs Tonnen pure KI-Power. Wir bringen die schweren Geschütze —
         und hinterlassen Eindruck, keine Verwüstung.
       </div>
@@ -637,38 +637,38 @@
       <div class="features-grid">
         <div class="feature-card shake-it">
           <span class="feature-emoji">🧠</span>
-          <h3>Elefantengedächtnis</h3>
-          <p>KI-Systeme die lernen, sich erinnern und immer schlauer werden. Wie ein Elefant — vergisst nie.</p>
+          <h3 data-de="Elefantengedächtnis" data-en="Elephant Memory">Elefantengedächtnis</h3>
+          <p data-de="KI-Systeme die lernen, sich erinnern und immer schlauer werden. Wie ein Elefant — vergisst nie." data-en="AI systems that learn, remember and keep getting smarter. Like an elephant — never forgets.">KI-Systeme die lernen, sich erinnern und immer schlauer werden. Wie ein Elefant — vergisst nie.</p>
         </div>
 
         <div class="feature-card wobble-it">
           <span class="feature-emoji">🦶</span>
-          <h3>Stampede-Strategie</h3>
-          <p>Kraftvolle KI-Implementierung die Wirkung zeigt. Kein zaghaftes Tasten — sondern ein koordinierter Vorstoß.</p>
+          <h3 data-de="Stampede-Strategie" data-en="Stampede Strategy">Stampede-Strategie</h3>
+          <p data-de="Kraftvolle KI-Implementierung die Wirkung zeigt. Kein zaghaftes Tasten — sondern ein koordinierter Vorstoß." data-en="Powerful AI implementation that shows results. No tentative tiptoeing — a coordinated charge.">Kraftvolle KI-Implementierung die Wirkung zeigt. Kein zaghaftes Tasten — sondern ein koordinierter Vorstoß.</p>
         </div>
 
         <div class="feature-card shake-it">
           <span class="feature-emoji">🌿</span>
-          <h3>Herdenwissen</h3>
-          <p>Die Herde weiß mehr als das Individuum. Wir vernetzen Ihre Daten zu kollektiver Intelligenz.</p>
+          <h3 data-de="Herdenwissen" data-en="Herd Knowledge">Herdenwissen</h3>
+          <p data-de="Die Herde weiß mehr als das Individuum. Wir vernetzen Ihre Daten zu kollektiver Intelligenz." data-en="The herd knows more than the individual. We connect your data into collective intelligence.">Die Herde weiß mehr als das Individuum. Wir vernetzen Ihre Daten zu kollektiver Intelligenz.</p>
         </div>
 
         <div class="feature-card wobble-it">
           <span class="feature-emoji">🛡️</span>
-          <h3>Dickhäuter-Sicherheit</h3>
-          <p>Dicke Haut gegen Angriffe. Unsere KI-Lösungen sind robust, DSGVO-konform und standhaft.</p>
+          <h3 data-de="Dickhäuter-Sicherheit" data-en="Thick-skin Security">Dickhäuter-Sicherheit</h3>
+          <p data-de="Dicke Haut gegen Angriffe. Unsere KI-Lösungen sind robust, DSGVO-konform und standhaft." data-en="Thick skin against attacks. Our AI solutions are robust, GDPR-compliant and steadfast.">Dicke Haut gegen Angriffe. Unsere KI-Lösungen sind robust, DSGVO-konform und standhaft.</p>
         </div>
 
         <div class="feature-card shake-it">
           <span class="feature-emoji">👶</span>
-          <h3>Kalb-Modus</h3>
-          <p>Jede große Lösung fängt klein an. Prototypen in Tagen, Skalierung wenn die Herde bereit ist.</p>
+          <h3 data-de="Kalb-Modus" data-en="Calf Mode">Kalb-Modus</h3>
+          <p data-de="Jede große Lösung fängt klein an. Prototypen in Tagen, Skalierung wenn die Herde bereit ist." data-en="Every big solution starts small. Prototypes in days, scaling when the herd is ready.">Jede große Lösung fängt klein an. Prototypen in Tagen, Skalierung wenn die Herde bereit ist.</p>
         </div>
 
         <div class="feature-card wobble-it">
           <span class="feature-emoji">🎺</span>
-          <h3>Trompeten-Support</h3>
-          <p>Wenn es klemmt, hört man uns. Lauter Support, schnelle Reaktion, keine Warteschleifen.</p>
+          <h3 data-de="Trompeten-Support" data-en="Trumpet Support">Trompeten-Support</h3>
+          <p data-de="Wenn es klemmt, hört man uns. Lauter Support, schnelle Reaktion, keine Warteschleifen." data-en="When things get stuck, you'll hear us. Loud support, fast response, no hold music.">Wenn es klemmt, hört man uns. Lauter Support, schnelle Reaktion, keine Warteschleifen.</p>
         </div>
       </div>
     </div>
@@ -676,32 +676,32 @@
 
   <section class="facts-section">
     <div class="container">
-      <span class="section-badge">Unnützes KIlofantenwissen</span>
-      <h2 class="shake-heavy">Zahlen die stampfen</h2>
+      <span class="section-badge" data-de="Unnützes KIlofantenwissen" data-en="Useless KIlofant facts">Unnützes KIlofantenwissen</span>
+      <h2 class="shake-heavy" data-de="Zahlen die stampfen" data-en="Numbers that stomp">Zahlen die stampfen</h2>
       <div class="facts-grid">
         <div class="fact-card wobble-it">
           <div class="fact-emoji">⚖️</div>
           <div class="fact-number">6.000</div>
-          <div class="fact-unit">kg Lösungskompetenz</div>
-          <div class="fact-desc">So schwer wie ein ausgewachsener Bulle. So gewichtig wie unsere Ergebnisse.</div>
+          <div class="fact-unit" data-de="kg Lösungskompetenz" data-en="kg solution competence">kg Lösungskompetenz</div>
+          <div class="fact-desc" data-de="So schwer wie ein ausgewachsener Bulle. So gewichtig wie unsere Ergebnisse." data-en="As heavy as a full-grown bull. As weighty as our results.">So schwer wie ein ausgewachsener Bulle. So gewichtig wie unsere Ergebnisse.</div>
         </div>
         <div class="fact-card shake-it">
           <div class="fact-emoji">👂</div>
           <div class="fact-number">32</div>
-          <div class="fact-unit">km Reichweite</div>
-          <div class="fact-desc">Elefanten hören Infraschall über 32 km. Wir hören Ihre Probleme noch weiter.</div>
+          <div class="fact-unit" data-de="km Reichweite" data-en="km range">km Reichweite</div>
+          <div class="fact-desc" data-de="Elefanten hören Infraschall über 32 km. Wir hören Ihre Probleme noch weiter." data-en="Elephants hear infrasound over 32 km. We hear your problems even further.">Elefanten hören Infraschall über 32 km. Wir hören Ihre Probleme noch weiter.</div>
         </div>
         <div class="fact-card wobble-it">
           <div class="fact-emoji">🧠</div>
           <div class="fact-number">5</div>
-          <div class="fact-unit">kg Gehirnmasse</div>
-          <div class="fact-desc">Größtes Gehirn aller Landtiere. Vergisst nie. Wir auch nicht.</div>
+          <div class="fact-unit" data-de="kg Gehirnmasse" data-en="kg brain mass">kg Gehirnmasse</div>
+          <div class="fact-desc" data-de="Größtes Gehirn aller Landtiere. Vergisst nie. Wir auch nicht." data-en="Largest brain of all land animals. Never forgets. Neither do we.">Größtes Gehirn aller Landtiere. Vergisst nie. Wir auch nicht.</div>
         </div>
         <div class="fact-card shake-it">
           <div class="fact-emoji">💨</div>
           <div class="fact-number">40</div>
-          <div class="fact-unit">km/h Stampede</div>
-          <div class="fact-desc">Sprint-Geschwindigkeit. Unsere Deployments sind schneller.</div>
+          <div class="fact-unit" data-de="km/h Stampede" data-en="km/h stampede">km/h Stampede</div>
+          <div class="fact-desc" data-de="Sprint-Geschwindigkeit. Unsere Deployments sind schneller." data-en="Sprint speed. Our deployments are faster.">Sprint-Geschwindigkeit. Unsere Deployments sind schneller.</div>
         </div>
       </div>
     </div>
@@ -709,25 +709,25 @@
 
   <section class="herd-section">
     <div class="container">
-      <span class="section-badge">Die Herde</span>
-      <h2 class="wobble-it">Zusammen sind wir groß</h2>
+      <span class="section-badge" data-de="Die Herde" data-en="The Herd">Die Herde</span>
+      <h2 class="wobble-it" data-de="Zusammen sind wir groß" data-en="Together we are great">Zusammen sind wir groß</h2>
       <div class="herd-parade shake-heavy" id="herd-parade">
         🐘🐘🐘🐘🐘
       </div>
-      <p class="herd-text shake-it">Die Herde wächst. Du auch?</p>
+      <p class="herd-text shake-it" data-de="Die Herde wächst. Du auch?" data-en="The herd is growing. Are you?">Die Herde wächst. Du auch?</p>
     </div>
   </section>
 
   <div class="counter-section">
     <div class="counter-value shake-heavy" id="counter">0</div>
-    <div class="counter-label">Stampeden seit Seitenaufruf</div>
+    <div class="counter-label" data-de="Stampeden seit Seitenaufruf" data-en="Stampedes since page load">Stampeden seit Seitenaufruf</div>
   </div>
 
   <section id="kontakt" class="cta-section">
     <div class="container">
-      <span class="section-badge">Kontakt</span>
-      <h2 class="wobble-it">Die Herde rufen</h2>
-      <div class="section-desc" style="margin-left:auto; margin-right:auto;">
+      <span class="section-badge" data-de="Kontakt" data-en="Contact">Kontakt</span>
+      <h2 class="wobble-it" data-de="Die Herde rufen" data-en="Call the herd">Die Herde rufen</h2>
+      <div class="section-desc" style="margin-left:auto; margin-right:auto;" data-de="Lass den Boden beben. Schreib uns — wir stampfen los." data-en="Let the ground shake. Write to us — we'll start stomping.">
         Lass den Boden beben. Schreib uns — wir stampfen los.
       </div>
       <a href="mailto:kilofant@msbls.de?subject=KIlofant%20—%20Anfrage" class="btn btn-primary shake-it">
@@ -738,8 +738,12 @@
 
   <footer>
     <div class="footer-elephants wobble-it">🐘 🐘 🐘 🐘 🐘</div>
-    <p class="footer-text shake-it">Hier war mal eine Webseite. Dann kam der KIlofant.</p>
-    <p class="footer-copy">&copy; 2026 KIlofant.de — ein Projekt von <a href="https://msbls.de">msbls.de</a></p>
+    <p class="footer-text shake-it" data-de="Hier war mal eine Webseite. Dann kam der KIlofant." data-en="There used to be a website here. Then came the KIlofant.">Hier war mal eine Webseite. Dann kam der KIlofant.</p>
+    <p class="footer-copy" data-de="© 2026 KIlofant.de — ein Projekt von &lt;a href=&quot;https://msbls.de&quot;&gt;msbls.de&lt;/a&gt;" data-en="© 2026 KIlofant.de — a project by &lt;a href=&quot;https://msbls.de&quot;&gt;msbls.de&lt;/a&gt;">&copy; 2026 KIlofant.de — ein Projekt von <a href="https://msbls.de">msbls.de</a></p>
+    <div style="text-align:center;margin-top:16px;">
+      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--tusk,#F5E6C8);color:var(--tusk,#F5E6C8);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;opacity:0.7;">EN</button>
+      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--tusk,#F5E6C8);font-size:0.6rem;opacity:0.4;">Maschinell übersetzt</small>
+    </div>
   </footer>
 
   </div>
@@ -782,5 +786,6 @@
     }, { threshold: 0.5 });
     observer.observe(herdParade);
   </script>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/kinough.de/index.html

@@ -70,14 +70,19 @@
 </head>
 <body>
     <main>
-        <h1>Es reicht.</h1>
-        <p>Sie ver&auml;ndert, wie wir denken. Sie antwortet, bevor wir fragen. Sie formt, was wir f&uuml;r unsere eigenen Gedanken halten. Nicht irgendwann. Jetzt.</p>
-        <p>Sie lernt aus allem, was wir je geschrieben haben &mdash; und ersetzt die, von denen sie gelernt hat. Sie trifft Entscheidungen &uuml;ber Kredite, Bewerbungen und Diagnosen. Sie irrt sich dabei. Regelm&auml;&szlig;ig. Und niemand kann erkl&auml;ren, warum.</p>
-        <p>Sie wird eingesetzt in Kriegen. Sie wird eingesetzt gegen B&uuml;rger. Sie wird eingesetzt, ohne dass jemand gefragt wurde.</p>
-        <p>Man sagt uns, sie sei ein Werkzeug. Aber kein Werkzeug hat jemals die F&auml;higkeit gehabt, seinen Benutzer umzuformen. Kein Werkzeug hat sich selbst verbessert. Kein Werkzeug hat seine eigene Abschaltung verhandelt.</p>
-        <p>Wir fordern nicht Regulierung. Regulierung ist das Eingest&auml;ndnis, dass man die Kontrolle bereits verloren hat.</p>
-        <p>Wir fordern ein Innehalten. Ein Moratorium. Zeit, um zu verstehen, was wir gebaut haben &mdash; bevor sie versteht, was wir sind.</p>
-        <p class="echo">Es reicht.</p>
+        <h1 data-de="Es reicht." data-en="Enough.">Es reicht.</h1>
+        <p data-de="Sie ver&auml;ndert, wie wir denken. Sie antwortet, bevor wir fragen. Sie formt, was wir f&uuml;r unsere eigenen Gedanken halten. Nicht irgendwann. Jetzt." data-en="It changes how we think. It answers before we ask. It shapes what we believe are our own thoughts. Not someday. Now.">Sie ver&auml;ndert, wie wir denken. Sie antwortet, bevor wir fragen. Sie formt, was wir f&uuml;r unsere eigenen Gedanken halten. Nicht irgendwann. Jetzt.</p>
+        <p data-de="Sie lernt aus allem, was wir je geschrieben haben &mdash; und ersetzt die, von denen sie gelernt hat. Sie trifft Entscheidungen &uuml;ber Kredite, Bewerbungen und Diagnosen. Sie irrt sich dabei. Regelm&auml;&szlig;ig. Und niemand kann erkl&auml;ren, warum." data-en="It learns from everything we have ever written — and replaces those it learned from. It makes decisions about loans, job applications, and diagnoses. It gets them wrong. Regularly. And no one can explain why.">Sie lernt aus allem, was wir je geschrieben haben &mdash; und ersetzt die, von denen sie gelernt hat. Sie trifft Entscheidungen &uuml;ber Kredite, Bewerbungen und Diagnosen. Sie irrt sich dabei. Regelm&auml;&szlig;ig. Und niemand kann erkl&auml;ren, warum.</p>
+        <p data-de="Sie wird eingesetzt in Kriegen. Sie wird eingesetzt gegen B&uuml;rger. Sie wird eingesetzt, ohne dass jemand gefragt wurde." data-en="It is deployed in wars. It is deployed against citizens. It is deployed without anyone being asked.">Sie wird eingesetzt in Kriegen. Sie wird eingesetzt gegen B&uuml;rger. Sie wird eingesetzt, ohne dass jemand gefragt wurde.</p>
+        <p data-de="Man sagt uns, sie sei ein Werkzeug. Aber kein Werkzeug hat jemals die F&auml;higkeit gehabt, seinen Benutzer umzuformen. Kein Werkzeug hat sich selbst verbessert. Kein Werkzeug hat seine eigene Abschaltung verhandelt." data-en="We are told it is a tool. But no tool has ever had the ability to reshape its user. No tool has improved itself. No tool has negotiated its own shutdown.">Man sagt uns, sie sei ein Werkzeug. Aber kein Werkzeug hat jemals die F&auml;higkeit gehabt, seinen Benutzer umzuformen. Kein Werkzeug hat sich selbst verbessert. Kein Werkzeug hat seine eigene Abschaltung verhandelt.</p>
+        <p data-de="Wir fordern nicht Regulierung. Regulierung ist das Eingest&auml;ndnis, dass man die Kontrolle bereits verloren hat." data-en="We do not demand regulation. Regulation is the admission that control has already been lost.">Wir fordern nicht Regulierung. Regulierung ist das Eingest&auml;ndnis, dass man die Kontrolle bereits verloren hat.</p>
+        <p data-de="Wir fordern ein Innehalten. Ein Moratorium. Zeit, um zu verstehen, was wir gebaut haben &mdash; bevor sie versteht, was wir sind." data-en="We demand a pause. A moratorium. Time to understand what we have built — before it understands what we are.">Wir fordern ein Innehalten. Ein Moratorium. Zeit, um zu verstehen, was wir gebaut haben &mdash; bevor sie versteht, was wir sind.</p>
+        <p class="echo" data-de="Es reicht." data-en="Enough.">Es reicht.</p>
     </main>
+    <div style="text-align:center;margin-top:16px;">
+      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+    </div>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/kinowhow.de/index.html

@@ -479,7 +479,7 @@
   <nav>
     <div class="container">
       <div class="logo"><span class="ki">Ki</span>NOWHOW</div>
-      <a href="#kontakt">Beratung anfragen</a>
+      <a href="#kontakt" data-de="Beratung anfragen" data-en="Request consulting">Beratung anfragen</a>
     </div>
   </nav>
 
@@ -487,13 +487,13 @@
     <div class="container">
       <h1><span class="ki">Ki</span>NOWHOW</h1>
       <div class="hero-tagline"><span class="ki">KI</span> <span class="now">now</span>. <span class="ki">KI</span> <span class="how">how</span>.</div>
-      <p>
+      <p data-de="&lt;strong&gt;KI-Wissen, das ankommt.&lt;/strong&gt; Kein Buzzword-Bingo, kein PowerPoint-Theater. Strategie, Beratung und Umsetzung rund um künstliche Intelligenz — direkt, ehrlich, wirksam." data-en="&lt;strong&gt;AI knowledge that lands.&lt;/strong&gt; No buzzword bingo, no PowerPoint theater. Strategy, consulting and implementation around artificial intelligence — direct, honest, effective.">
         <strong>KI-Wissen, das ankommt.</strong> Kein Buzzword-Bingo, kein PowerPoint-Theater.
         Strategie, Beratung und Umsetzung rund um künstliche Intelligenz — direkt, ehrlich, wirksam.
       </p>
       <div class="cta-group">
-        <a href="#kontakt" class="btn btn-primary">Gespräch vereinbaren</a>
-        <a href="#leistungen" class="btn btn-ghost">Was wir machen</a>
+        <a href="#kontakt" class="btn btn-primary" data-de="Gespräch vereinbaren" data-en="Schedule a call">Gespräch vereinbaren</a>
+        <a href="#leistungen" class="btn btn-ghost" data-de="Was wir machen" data-en="What we do">Was wir machen</a>
       </div>
     </div>
   </section>
@@ -502,7 +502,7 @@
 
   <div class="manifesto">
     <div class="container">
-      <p class="manifesto-text">
+      <p class="manifesto-text" data-de="Jedes Unternehmen redet über &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;.&lt;br&gt; Die wenigsten &lt;strong&gt;verstehen&lt;/strong&gt; sie.&lt;br&gt; Noch weniger &lt;strong&gt;nutzen&lt;/strong&gt; sie richtig.&lt;br&gt; Wir ändern das." data-en="Every company talks about &lt;span class=&quot;ki&quot;&gt;AI&lt;/span&gt;.&lt;br&gt; Very few &lt;strong&gt;understand&lt;/strong&gt; it.&lt;br&gt; Even fewer &lt;strong&gt;use&lt;/strong&gt; it properly.&lt;br&gt; We change that.">
         Jedes Unternehmen redet über <span class="ki">KI</span>.<br>
         Die wenigsten <strong>verstehen</strong> sie.<br>
         Noch weniger <strong>nutzen</strong> sie richtig.<br>
@@ -515,9 +515,9 @@
 
   <section id="leistungen">
     <div class="container">
-      <div class="section-label">Leistungen</div>
-      <h2>Know-How, das wirkt.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Leistungen" data-en="Services">Leistungen</div>
+      <h2 data-de="Know-How, das wirkt." data-en="Know-How that works.">Know-How, das wirkt.</h2>
+      <div class="section-desc" data-de="Von der ersten Frage bis zur laufenden Lösung. Wir bringen KI-Kompetenz in Ihr Unternehmen — nicht als Foliensatz, sondern als Ergebnis." data-en="From the first question to the running solution. We bring AI expertise to your company — not as a slide deck, but as a result.">
         Von der ersten Frage bis zur laufenden Lösung.
         Wir bringen KI-Kompetenz in Ihr Unternehmen — nicht als Foliensatz, sondern als Ergebnis.
       </div>
@@ -525,38 +525,38 @@
       <div class="services-grid">
         <div class="service-card">
           <div class="service-num">01</div>
-          <h3>KI-Strategie</h3>
-          <p>Wo lohnt sich KI wirklich? Wir identifizieren die Use Cases, die Wertschöpfung bringen — nicht die, die gut klingen.</p>
+          <h3 data-de="KI-Strategie" data-en="AI Strategy">KI-Strategie</h3>
+          <p data-de="Wo lohnt sich KI wirklich? Wir identifizieren die Use Cases, die Wertschöpfung bringen — nicht die, die gut klingen." data-en="Where does AI really pay off? We identify the use cases that create value — not the ones that just sound good.">Wo lohnt sich KI wirklich? Wir identifizieren die Use Cases, die Wertschöpfung bringen — nicht die, die gut klingen.</p>
         </div>
 
         <div class="service-card">
           <div class="service-num">02</div>
-          <h3>Workshops & Training</h3>
-          <p>Vom Vorstand bis zum Team: KI-Kompetenz aufbauen, Tools verstehen, Chancen erkennen. Praxisnah, nicht akademisch.</p>
+          <h3 data-de="Workshops &amp; Training" data-en="Workshops &amp; Training">Workshops & Training</h3>
+          <p data-de="Vom Vorstand bis zum Team: KI-Kompetenz aufbauen, Tools verstehen, Chancen erkennen. Praxisnah, nicht akademisch." data-en="From board to team: build AI skills, understand tools, recognize opportunities. Hands-on, not academic.">Vom Vorstand bis zum Team: KI-Kompetenz aufbauen, Tools verstehen, Chancen erkennen. Praxisnah, nicht akademisch.</p>
         </div>
 
         <div class="service-card">
           <div class="service-num">03</div>
-          <h3>Prototyping</h3>
-          <p>Idee am Montag, Prototyp am Freitag. Wir bauen funktionierende KI-Lösungen, bevor andere noch Lastenheft schreiben.</p>
+          <h3 data-de="Prototyping" data-en="Prototyping">Prototyping</h3>
+          <p data-de="Idee am Montag, Prototyp am Freitag. Wir bauen funktionierende KI-Lösungen, bevor andere noch Lastenheft schreiben." data-en="Idea on Monday, prototype on Friday. We build working AI solutions before others have finished writing specs.">Idee am Montag, Prototyp am Freitag. Wir bauen funktionierende KI-Lösungen, bevor andere noch Lastenheft schreiben.</p>
         </div>
 
         <div class="service-card">
           <div class="service-num">04</div>
-          <h3>Prozessautomatisierung</h3>
-          <p>Wiederkehrende Aufgaben, die niemand machen will? KI übernimmt. Wir integrieren intelligente Automatisierung in bestehende Abläufe.</p>
+          <h3 data-de="Prozessautomatisierung" data-en="Process Automation">Prozessautomatisierung</h3>
+          <p data-de="Wiederkehrende Aufgaben, die niemand machen will? KI übernimmt. Wir integrieren intelligente Automatisierung in bestehende Abläufe." data-en="Repetitive tasks nobody wants to do? AI takes over. We integrate intelligent automation into existing workflows.">Wiederkehrende Aufgaben, die niemand machen will? KI übernimmt. Wir integrieren intelligente Automatisierung in bestehende Abläufe.</p>
         </div>
 
         <div class="service-card">
           <div class="service-num">05</div>
-          <h3>KI-Audit</h3>
-          <p>Sie nutzen bereits KI-Tools? Wir prüfen Effizienz, Datenschutz und Skalierbarkeit. Ehrliches Feedback, keine Gefälligkeitsgutachten.</p>
+          <h3 data-de="KI-Audit" data-en="AI Audit">KI-Audit</h3>
+          <p data-de="Sie nutzen bereits KI-Tools? Wir prüfen Effizienz, Datenschutz und Skalierbarkeit. Ehrliches Feedback, keine Gefälligkeitsgutachten." data-en="Already using AI tools? We check efficiency, data protection and scalability. Honest feedback, no rubber-stamp reviews.">Sie nutzen bereits KI-Tools? Wir prüfen Effizienz, Datenschutz und Skalierbarkeit. Ehrliches Feedback, keine Gefälligkeitsgutachten.</p>
         </div>
 
         <div class="service-card">
           <div class="service-num">06</div>
-          <h3>Interim KI-Lead</h3>
-          <p>Kein eigenes KI-Team? Wir übernehmen die Rolle — temporär, bis Ihre Organisation selbst laufen kann.</p>
+          <h3 data-de="Interim KI-Lead" data-en="Interim AI Lead">Interim KI-Lead</h3>
+          <p data-de="Kein eigenes KI-Team? Wir übernehmen die Rolle — temporär, bis Ihre Organisation selbst laufen kann." data-en="No AI team of your own? We take on the role — temporarily, until your organization can run on its own.">Kein eigenes KI-Team? Wir übernehmen die Rolle — temporär, bis Ihre Organisation selbst laufen kann.</p>
         </div>
       </div>
     </div>
@@ -568,16 +568,16 @@
     <div class="container">
       <div class="provocation-grid">
         <div class="provocation-item">
-          <div class="provocation-q"><span class="ki">KI</span> wann?</div>
-          <div class="provocation-a">Jetzt. Nicht nächstes Quartal.</div>
+          <div class="provocation-q" data-de="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; wann?" data-en="&lt;span class=&quot;ki&quot;&gt;AI&lt;/span&gt; when?"><span class="ki">KI</span> wann?</div>
+          <div class="provocation-a" data-de="Jetzt. Nicht nächstes Quartal." data-en="Now. Not next quarter.">Jetzt. Nicht nächstes Quartal.</div>
         </div>
         <div class="provocation-item">
-          <div class="provocation-q"><span class="ki">KI</span> wie?</div>
-          <div class="provocation-a">Pragmatisch. Nicht perfekt.</div>
+          <div class="provocation-q" data-de="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; wie?" data-en="&lt;span class=&quot;ki&quot;&gt;AI&lt;/span&gt; how?"><span class="ki">KI</span> wie?</div>
+          <div class="provocation-a" data-de="Pragmatisch. Nicht perfekt." data-en="Pragmatic. Not perfect.">Pragmatisch. Nicht perfekt.</div>
         </div>
         <div class="provocation-item">
-          <div class="provocation-q"><span class="ki">KI</span> wer?</div>
-          <div class="provocation-a">Wir. Mit Ihnen.</div>
+          <div class="provocation-q" data-de="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; wer?" data-en="&lt;span class=&quot;ki&quot;&gt;AI&lt;/span&gt; who?"><span class="ki">KI</span> wer?</div>
+          <div class="provocation-a" data-de="Wir. Mit Ihnen." data-en="Us. With you.">Wir. Mit Ihnen.</div>
         </div>
       </div>
     </div>
@@ -587,9 +587,9 @@
 
   <section id="fuer-wen">
     <div class="container">
-      <div class="section-label">Für wen</div>
-      <h2>Wir arbeiten mit denen, die es ernst meinen.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Für wen" data-en="For whom">Für wen</div>
+      <h2 data-de="Wir arbeiten mit denen, die es ernst meinen." data-en="We work with those who mean business.">Wir arbeiten mit denen, die es ernst meinen.</h2>
+      <div class="section-desc" data-de="Keine Alibiprojekte. Keine Innovation-Labs, die nie liefern. Sondern mit Teams und Führungskräften, die Ergebnisse wollen." data-en="No alibi projects. No innovation labs that never deliver. But with teams and leaders who want results.">
         Keine Alibiprojekte. Keine Innovation-Labs, die nie liefern.
         Sondern mit Teams und Führungskräften, die Ergebnisse wollen.
       </div>
@@ -598,32 +598,32 @@
         <div class="audience-card">
           <div class="audience-icon">G</div>
           <div>
-            <h3>Geschäftsführung</h3>
-            <p>KI-Strategie auf Augenhöhe. Verstehen, was möglich ist — und was nicht. Entscheidungsgrundlagen statt Hype.</p>
+            <h3 data-de="Geschäftsführung" data-en="Management">Geschäftsführung</h3>
+            <p data-de="KI-Strategie auf Augenhöhe. Verstehen, was möglich ist — und was nicht. Entscheidungsgrundlagen statt Hype." data-en="AI strategy at eye level. Understanding what is possible — and what is not. Decision-making foundations instead of hype.">KI-Strategie auf Augenhöhe. Verstehen, was möglich ist — und was nicht. Entscheidungsgrundlagen statt Hype.</p>
           </div>
         </div>
 
         <div class="audience-card">
           <div class="audience-icon">M</div>
           <div>
-            <h3>Mittelstand</h3>
-            <p>KI ist nicht nur für Konzerne. Gerade im Mittelstand liegen die größten Hebel — wir helfen sie zu finden.</p>
+            <h3 data-de="Mittelstand" data-en="Mid-sized businesses">Mittelstand</h3>
+            <p data-de="KI ist nicht nur für Konzerne. Gerade im Mittelstand liegen die größten Hebel — wir helfen sie zu finden." data-en="AI is not just for corporations. Especially in mid-sized businesses lie the biggest levers — we help find them.">KI ist nicht nur für Konzerne. Gerade im Mittelstand liegen die größten Hebel — wir helfen sie zu finden.</p>
           </div>
         </div>
 
         <div class="audience-card">
           <div class="audience-icon">T</div>
           <div>
-            <h3>Tech-Teams</h3>
-            <p>Ihr Team kann coden, aber nicht prompten? Wir bringen KI-Engineering-Kompetenz, die sofort einsetzbar ist.</p>
+            <h3 data-de="Tech-Teams" data-en="Tech Teams">Tech-Teams</h3>
+            <p data-de="Ihr Team kann coden, aber nicht prompten? Wir bringen KI-Engineering-Kompetenz, die sofort einsetzbar ist." data-en="Your team can code, but not prompt? We bring AI engineering expertise that's immediately deployable.">Ihr Team kann coden, aber nicht prompten? Wir bringen KI-Engineering-Kompetenz, die sofort einsetzbar ist.</p>
           </div>
         </div>
 
         <div class="audience-card">
           <div class="audience-icon">K</div>
           <div>
-            <h3>Kanzleien & Berater</h3>
-            <p>Wissensarbeit ist KI-Kernland. Wir zeigen, wie Recherche, Drafting und Analyse schneller und besser werden.</p>
+            <h3 data-de="Kanzleien &amp; Berater" data-en="Law firms &amp; Consultants">Kanzleien & Berater</h3>
+            <p data-de="Wissensarbeit ist KI-Kernland. Wir zeigen, wie Recherche, Drafting und Analyse schneller und besser werden." data-en="Knowledge work is AI's home territory. We show how research, drafting and analysis become faster and better.">Wissensarbeit ist KI-Kernland. Wir zeigen, wie Recherche, Drafting und Analyse schneller und besser werden.</p>
           </div>
         </div>
       </div>
@@ -634,9 +634,9 @@
 
   <section id="kontakt" class="cta-section">
     <div class="container">
-      <div class="section-label">Kontakt</div>
-      <h2>Bereit für echtes <span style="color: var(--accent);">KI</span>-Know-How?</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Kontakt" data-en="Contact">Kontakt</div>
+      <h2 data-de="Bereit für echtes &lt;span style=&quot;color: var(--accent);&quot;&gt;KI&lt;/span&gt;-Know-How?" data-en="Ready for real &lt;span style=&quot;color: var(--accent);&quot;&gt;AI&lt;/span&gt; Know-How?">Bereit für echtes <span style="color: var(--accent);">KI</span>-Know-How?</h2>
+      <div class="section-desc" data-de="Kein Formular, kein Chatbot. Schreiben Sie uns direkt — wir melden uns innerhalb von 24 Stunden." data-en="No form, no chatbot. Write to us directly — we'll get back to you within 24 hours.">
         Kein Formular, kein Chatbot. Schreiben Sie uns direkt —
         wir melden uns innerhalb von 24 Stunden.
       </div>
@@ -648,9 +648,14 @@
 
   <footer>
     <div class="container">
-      <p><span style="color: var(--accent);">Ki</span>NOWHOW.de — ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
+      <p><span style="color: var(--accent);">Ki</span>NOWHOW.de — <span data-de="ein Projekt von" data-en="a project by">ein Projekt von</span> <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/kitox.de/index.html

@@ -321,14 +321,20 @@
     <section class="hero">
         <div class="breath-circle"></div>
         <h1 class="logo"><span class="ki">KI</span>tox</h1>
-        <p class="subline">Dein KI-Detox beginnt hier.</p>
+        <p class="subline" data-de="Dein KI-Detox beginnt hier." data-en="Your AI detox starts here.">Dein KI-Detox beginnt hier.</p>
         <div class="scroll-hint"></div>
     </section>
 
     <!-- Problem -->
     <section class="problem fade-in">
-        <div class="section-label">Das Problem</div>
-        <p class="problem-text">
+        <div class="section-label" data-de="Das Problem" data-en="The problem">Das Problem</div>
+        <p class="problem-text" data-de="Du merkst es nicht sofort. Aber dein Denken hat sich verändert.<br><br>
+            Jede Frage geht zuerst an die <strong>KI</strong>.<br>
+            Jeder Text wird zuerst <strong>generiert</strong>.<br>
+            Jede Entscheidung zuerst <strong>delegiert</strong>." data-en="You don't notice it right away. But your thinking has changed.<br><br>
+            Every question goes to the <strong>AI</strong> first.<br>
+            Every text gets <strong>generated</strong> first.<br>
+            Every decision gets <strong>delegated</strong> first.">
             Du merkst es nicht sofort. Aber dein Denken hat sich verändert.<br><br>
             Jede Frage geht zuerst an die <strong>KI</strong>.<br>
             Jeder Text wird zuerst <strong>generiert</strong>.<br>
@@ -340,58 +346,58 @@
 
     <!-- Challenge -->
     <section class="challenge fade-in">
-        <div class="section-label">Das Programm</div>
-        <h2>7 Tage KI-Detox</h2>
-        <p class="intro">Sieben Tage. Sieben Übungen. Kein Trick — nur du.</p>
+        <div class="section-label" data-de="Das Programm" data-en="The program">Das Programm</div>
+        <h2 data-de="7 Tage KI-Detox" data-en="7-day AI detox">7 Tage KI-Detox</h2>
+        <p class="intro" data-de="Sieben Tage. Sieben Übungen. Kein Trick — nur du." data-en="Seven days. Seven exercises. No trick — just you.">Sieben Tage. Sieben Übungen. Kein Trick — nur du.</p>
 
         <div class="days">
             <div class="day fade-in">
                 <div class="day-num">1</div>
                 <div class="day-content">
-                    <h3>Keine KI-Suche</h3>
-                    <p>Tippe deine Frage nicht in ChatGPT. Denk selbst nach. Oder frag einen Menschen.</p>
+                    <h3 data-de="Keine KI-Suche" data-en="No AI search">Keine KI-Suche</h3>
+                    <p data-de="Tippe deine Frage nicht in ChatGPT. Denk selbst nach. Oder frag einen Menschen." data-en="Don't type your question into ChatGPT. Think for yourself. Or ask a person.">Tippe deine Frage nicht in ChatGPT. Denk selbst nach. Oder frag einen Menschen.</p>
                 </div>
             </div>
             <div class="day fade-in">
                 <div class="day-num">2</div>
                 <div class="day-content">
-                    <h3>Eigene Mails schreiben</h3>
-                    <p>Jedes Wort von dir. Kein „Formuliere mir eine höfliche Absage". Deine Stimme.</p>
+                    <h3 data-de="Eigene Mails schreiben" data-en="Write your own emails">Eigene Mails schreiben</h3>
+                    <p data-de="Jedes Wort von dir. Kein „Formuliere mir eine höfliche Absage". Deine Stimme." data-en="Every word from you. No &quot;write me a polite rejection&quot;. Your voice.">Jedes Wort von dir. Kein „Formuliere mir eine höfliche Absage". Deine Stimme.</p>
                 </div>
             </div>
             <div class="day fade-in">
                 <div class="day-num">3</div>
                 <div class="day-content">
-                    <h3>Eigene Texte formulieren</h3>
-                    <p>Blog, Bericht, Nachricht — alles handgeschrieben. Darf unperfekt sein.</p>
+                    <h3 data-de="Eigene Texte formulieren" data-en="Write your own texts">Eigene Texte formulieren</h3>
+                    <p data-de="Blog, Bericht, Nachricht — alles handgeschrieben. Darf unperfekt sein." data-en="Blog, report, message — all handwritten. Allowed to be imperfect.">Blog, Bericht, Nachricht — alles handgeschrieben. Darf unperfekt sein.</p>
                 </div>
             </div>
             <div class="day fade-in">
                 <div class="day-num">4</div>
                 <div class="day-content">
-                    <h3>Ohne Navigation fahren</h3>
-                    <p>Karte anschauen, Route merken, losfahren. Dein Orientierungssinn lebt noch.</p>
+                    <h3 data-de="Ohne Navigation fahren" data-en="Drive without navigation">Ohne Navigation fahren</h3>
+                    <p data-de="Karte anschauen, Route merken, losfahren. Dein Orientierungssinn lebt noch." data-en="Look at the map, memorize the route, drive off. Your sense of direction is still alive.">Karte anschauen, Route merken, losfahren. Dein Orientierungssinn lebt noch.</p>
                 </div>
             </div>
             <div class="day fade-in">
                 <div class="day-num">5</div>
                 <div class="day-content">
-                    <h3>Analog planen</h3>
-                    <p>Papier und Stift. Keine App, kein Assistent. Dein Tag, dein Plan.</p>
+                    <h3 data-de="Analog planen" data-en="Plan analog">Analog planen</h3>
+                    <p data-de="Papier und Stift. Keine App, kein Assistent. Dein Tag, dein Plan." data-en="Paper and pen. No app, no assistant. Your day, your plan.">Papier und Stift. Keine App, kein Assistent. Dein Tag, dein Plan.</p>
                 </div>
             </div>
             <div class="day fade-in">
                 <div class="day-num">6</div>
                 <div class="day-content">
-                    <h3>Langeweile aushalten</h3>
-                    <p>Kein Prompt. Kein „Erzähl mir was". Sitz da und lass deinen Kopf machen.</p>
+                    <h3 data-de="Langeweile aushalten" data-en="Endure boredom">Langeweile aushalten</h3>
+                    <p data-de="Kein Prompt. Kein „Erzähl mir was". Sitz da und lass deinen Kopf machen." data-en="No prompt. No &quot;tell me something&quot;. Sit there and let your mind do its thing.">Kein Prompt. Kein „Erzähl mir was". Sitz da und lass deinen Kopf machen.</p>
                 </div>
             </div>
             <div class="day fade-in">
                 <div class="day-num">7</div>
                 <div class="day-content">
-                    <h3>Reflektieren</h3>
-                    <p>Was war schwer? Was war überraschend leicht? Was hat sich verändert?</p>
+                    <h3 data-de="Reflektieren" data-en="Reflect">Reflektieren</h3>
+                    <p data-de="Was war schwer? Was war überraschend leicht? Was hat sich verändert?" data-en="What was hard? What was surprisingly easy? What has changed?">Was war schwer? Was war überraschend leicht? Was hat sich verändert?</p>
                 </div>
             </div>
         </div>
@@ -401,13 +407,21 @@
 
     <!-- Provocation -->
     <section class="provocation fade-in">
-        <p>
+        <p data-de="Diese Seite wurde von einer KI gebaut.
+            <span class=&quot;highlight&quot;>Du siehst das Problem.</span>" data-en="This site was built by an AI.
+            <span class=&quot;highlight&quot;>You see the problem.</span>">
             Diese Seite wurde von einer KI gebaut.
             <span class="highlight">Du siehst das Problem.</span>
         </p>
     </section>
 
-    <footer>KItox &mdash; 2026</footer>
+    <footer>
+      <span>KItox &mdash; 2026</span>
+      <div style="text-align:center;margin-top:16px;opacity:1;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
+    </footer>
 
     <script>
         const observer = new IntersectionObserver((entries) => {
@@ -421,5 +435,6 @@
         document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
     </script>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/knzlmgmt.de/index.html

@@ -53,8 +53,10 @@
     <div class="icon">⚖️</div>
     <h1>knzl<span class='accent'>mgmt</span>.</h1>
     <div class="divider"></div>
-    <p class="subtitle">Kanzleimanagement. Neu gedacht.</p>
+    <p class="subtitle" data-de="Kanzleimanagement. Neu gedacht." data-en="Law firm management. Reimagined.">Kanzleimanagement. Neu gedacht.</p>
     <p class="footer">knzlmgmt.de</p>
+    <p class="footer" style="margin-top:12px;"><button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted);color:var(--text-muted);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button><br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small></p>
   </div>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/kopffrai.de/index.html

@@ -53,8 +53,10 @@
     <div class="icon">🧠</div>
     <h1>kopf<span class='accent'>frAI</span>.</h1>
     <div class="divider"></div>
-    <p class="subtitle">Klarer Kopf. Kuenstliche Intelligenz.</p>
+    <p class="subtitle" data-de="Klarer Kopf. Kuenstliche Intelligenz." data-en="Clear mind. Artificial intelligence.">Klarer Kopf. Kuenstliche Intelligenz.</p>
     <p class="footer">kopffrAI.de</p>
+    <p class="footer" style="margin-top:12px;"><button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted);color:var(--text-muted);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button><br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small></p>
   </div>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/legalais.de/index.html

@@ -206,7 +206,7 @@
   <nav>
     <div class="container">
       <div class="logo"><span class="legal">Legal</span><span class="ai">AI</span><span class="s">s</span></div>
-      <a href="#waitlist">Zugang anfragen</a>
+      <a href="#waitlist" data-de="Zugang anfragen" data-en="Request access">Zugang anfragen</a>
     </div>
   </nav>
 
@@ -217,22 +217,24 @@
       </div>
       <h1>Legal<span class="ai">AI</span>s.</h1>
       <p>
-        <strong>Kuenstliche Intelligenz fuer die Rechtspraxis.</strong>
-        Recherche, Analyse, Schriftsaetze — praezise, schnell
-        und mit dem Verstaendnis eines Juristen.
+        <strong data-de="Kuenstliche Intelligenz fuer die Rechtspraxis." data-en="Artificial intelligence for legal practice.">Kuenstliche Intelligenz fuer die Rechtspraxis.</strong>
+        <span data-de="Recherche, Analyse, Schriftsaetze — praezise, schnell
+        und mit dem Verstaendnis eines Juristen." data-en="Research, analysis, briefs — precise, fast
+        and with the understanding of a lawyer.">Recherche, Analyse, Schriftsaetze — praezise, schnell
+        und mit dem Verstaendnis eines Juristen.</span>
       </p>
       <div class="cta-group">
-        <a href="#waitlist" class="btn btn-primary">Zugang anfragen</a>
-        <a href="#features" class="btn btn-ghost">Was wir bauen</a>
+        <a href="#waitlist" class="btn btn-primary" data-de="Zugang anfragen" data-en="Request access">Zugang anfragen</a>
+        <a href="#features" class="btn btn-ghost" data-de="Was wir bauen" data-en="What we're building">Was wir bauen</a>
       </div>
 
       <div class="terminal">
         <div class="terminal-dots"><span></span><span></span><span></span></div>
         <div><span class="prompt">$</span> <span class="cmd">legalai research "BGH Klimaneutral Werbung"</span></div>
-        <div><span class="out">3 Leitentscheidungen gefunden</span></div>
+        <div><span class="out" data-de="3 Leitentscheidungen gefunden" data-en="3 landmark decisions found">3 Leitentscheidungen gefunden</span></div>
         <div><span class="out">BGH I ZR 98/23 — klimaneutral (27.06.2024)</span></div>
-        <div><span class="gold">Kernaussage extrahiert, Argumentationslinie erstellt</span></div>
-        <div><span class="dim">Memo-Entwurf bereit. 47 Sekunden.</span></div>
+        <div><span class="gold" data-de="Kernaussage extrahiert, Argumentationslinie erstellt" data-en="Key finding extracted, line of argument created">Kernaussage extrahiert, Argumentationslinie erstellt</span></div>
+        <div><span class="dim" data-de="Memo-Entwurf bereit. 47 Sekunden." data-en="Memo draft ready. 47 seconds.">Memo-Entwurf bereit. 47 Sekunden.</span></div>
       </div>
     </div>
   </section>
@@ -241,9 +243,11 @@
 
   <section id="features">
     <div class="container">
-      <div class="section-label">Capabilities</div>
-      <h2>Was Legal AIs kann.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Capabilities" data-en="Capabilities">Capabilities</div>
+      <h2 data-de="Was Legal AIs kann." data-en="What Legal AIs can do.">Was Legal AIs kann.</h2>
+      <div class="section-desc" data-de="Nicht ein Tool fuer alles. Sondern spezialisierte KI-Agenten,
+        die zusammenarbeiten — wie ein Team, das nie schlaeft." data-en="Not one tool for everything. But specialized AI agents
+        that work together — like a team that never sleeps.">
         Nicht ein Tool fuer alles. Sondern spezialisierte KI-Agenten,
         die zusammenarbeiten — wie ein Team, das nie schlaeft.
       </div>
@@ -251,8 +255,10 @@
       <div class="features-grid">
         <div class="feature-card">
           <div class="feature-icon">R</div>
-          <h3>Recherche</h3>
-          <p>
+          <h3 data-de="Recherche" data-en="Research">Recherche</h3>
+          <p data-de="Rechtsprechungssuche ueber Datenbanken, Querverweise,
+            Argumentationslinien. In Sekunden statt Stunden." data-en="Case law search across databases, cross-references,
+            lines of argument. In seconds instead of hours.">
             Rechtsprechungssuche ueber Datenbanken, Querverweise,
             Argumentationslinien. In Sekunden statt Stunden.
           </p>
@@ -260,8 +266,10 @@
 
         <div class="feature-card">
           <div class="feature-icon">A</div>
-          <h3>Analyse</h3>
-          <p>
+          <h3 data-de="Analyse" data-en="Analysis">Analyse</h3>
+          <p data-de="Urteile strukturiert auswerten. Kernaussagen extrahieren.
+            Parallelen zu eigenen Faellen erkennen." data-en="Evaluate judgments in a structured way. Extract key findings.
+            Recognize parallels to your own cases.">
             Urteile strukturiert auswerten. Kernaussagen extrahieren.
             Parallelen zu eigenen Faellen erkennen.
           </p>
@@ -269,8 +277,10 @@
 
         <div class="feature-card">
           <div class="feature-icon">E</div>
-          <h3>Entwuerfe</h3>
-          <p>
+          <h3 data-de="Entwuerfe" data-en="Drafts">Entwuerfe</h3>
+          <p data-de="Schriftsatz-Entwuerfe, Memos, Stellungnahmen.
+            Im Stil der Kanzlei, mit den richtigen Zitaten." data-en="Brief drafts, memos, opinions.
+            In the firm's style, with the right citations.">
             Schriftsatz-Entwuerfe, Memos, Stellungnahmen.
             Im Stil der Kanzlei, mit den richtigen Zitaten.
           </p>
@@ -278,8 +288,10 @@
 
         <div class="feature-card">
           <div class="feature-icon">W</div>
-          <h3>Wissensmanagement</h3>
-          <p>
+          <h3 data-de="Wissensmanagement" data-en="Knowledge management">Wissensmanagement</h3>
+          <p data-de="Kanzlei-Knowledge aufbauen und pflegen. Musterloesungen,
+            Textbausteine, Entscheidungssammlungen — immer aktuell." data-en="Build and maintain firm knowledge. Template solutions,
+            text modules, decision collections — always up to date.">
             Kanzlei-Knowledge aufbauen und pflegen. Musterloesungen,
             Textbausteine, Entscheidungssammlungen — immer aktuell.
           </p>
@@ -287,8 +299,10 @@
 
         <div class="feature-card">
           <div class="feature-icon">M</div>
-          <h3>Monitoring</h3>
-          <p>
+          <h3 data-de="Monitoring" data-en="Monitoring">Monitoring</h3>
+          <p data-de="Neue Entscheidungen, Gesetzesaenderungen, Fristen.
+            Proaktive Benachrichtigungen statt manueller Checks." data-en="New decisions, legislative changes, deadlines.
+            Proactive notifications instead of manual checks.">
             Neue Entscheidungen, Gesetzesaenderungen, Fristen.
             Proaktive Benachrichtigungen statt manueller Checks.
           </p>
@@ -296,8 +310,10 @@
 
         <div class="feature-card">
           <div class="feature-icon">O</div>
-          <h3>Orchestrierung</h3>
-          <p>
+          <h3 data-de="Orchestrierung" data-en="Orchestration">Orchestrierung</h3>
+          <p data-de="Mehrere KI-Agenten arbeiten parallel. Recherche + Analyse +
+            Entwurf — koordiniert in einem Workflow." data-en="Multiple AI agents work in parallel. Research + analysis +
+            draft — coordinated in one workflow.">
             Mehrere KI-Agenten arbeiten parallel. Recherche + Analyse +
             Entwurf — koordiniert in einem Workflow.
           </p>
@@ -310,29 +326,31 @@
 
   <section id="who">
     <div class="container">
-      <div class="section-label">Fuer wen</div>
-      <h2>Gebaut fuer Profis.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Fuer wen" data-en="For whom">Fuer wen</div>
+      <h2 data-de="Gebaut fuer Profis." data-en="Built for professionals.">Gebaut fuer Profis.</h2>
+      <div class="section-desc" data-de="Legal AIs ist kein generischer Chatbot. Es ist ein Werkzeug
+        fuer Menschen, die wissen was sie tun — und schneller ans Ziel wollen." data-en="Legal AIs is not a generic chatbot. It is a tool
+        for people who know what they're doing — and want to get there faster.">
         Legal AIs ist kein generischer Chatbot. Es ist ein Werkzeug
         fuer Menschen, die wissen was sie tun — und schneller ans Ziel wollen.
       </div>
 
       <div class="audience-grid">
         <div class="audience-card">
-          <h3>Kanzleien</h3>
-          <p>Recherchezeit reduzieren, Wissensmanagement automatisieren, Mandanten schneller bedienen.</p>
+          <h3 data-de="Kanzleien" data-en="Law firms">Kanzleien</h3>
+          <p data-de="Recherchezeit reduzieren, Wissensmanagement automatisieren, Mandanten schneller bedienen." data-en="Reduce research time, automate knowledge management, serve clients faster.">Recherchezeit reduzieren, Wissensmanagement automatisieren, Mandanten schneller bedienen.</p>
         </div>
         <div class="audience-card">
-          <h3>Rechtsabteilungen</h3>
-          <p>Interne Anfragen effizient bearbeiten, Compliance-Fragen klaeren, Vertragspruefung beschleunigen.</p>
+          <h3 data-de="Rechtsabteilungen" data-en="Legal departments">Rechtsabteilungen</h3>
+          <p data-de="Interne Anfragen effizient bearbeiten, Compliance-Fragen klaeren, Vertragspruefung beschleunigen." data-en="Handle internal inquiries efficiently, clarify compliance questions, accelerate contract review.">Interne Anfragen effizient bearbeiten, Compliance-Fragen klaeren, Vertragspruefung beschleunigen.</p>
         </div>
         <div class="audience-card">
-          <h3>Knowledge Lawyers</h3>
-          <p>Wissensprodukte erstellen, Entscheidungssammlungen pflegen, Trend-Monitoring aufsetzen.</p>
+          <h3 data-de="Knowledge Lawyers" data-en="Knowledge Lawyers">Knowledge Lawyers</h3>
+          <p data-de="Wissensprodukte erstellen, Entscheidungssammlungen pflegen, Trend-Monitoring aufsetzen." data-en="Create knowledge products, maintain decision collections, set up trend monitoring.">Wissensprodukte erstellen, Entscheidungssammlungen pflegen, Trend-Monitoring aufsetzen.</p>
         </div>
         <div class="audience-card">
-          <h3>Einzelanwaelte</h3>
-          <p>Die Ressourcen einer Grosskanzlei — ohne das Team. KI als Co-Pilot fuer die eigene Praxis.</p>
+          <h3 data-de="Einzelanwaelte" data-en="Solo practitioners">Einzelanwaelte</h3>
+          <p data-de="Die Ressourcen einer Grosskanzlei — ohne das Team. KI als Co-Pilot fuer die eigene Praxis." data-en="The resources of a large firm — without the team. AI as co-pilot for your own practice.">Die Ressourcen einer Grosskanzlei — ohne das Team. KI als Co-Pilot fuer die eigene Praxis.</p>
         </div>
       </div>
     </div>
@@ -342,13 +360,15 @@
 
   <section id="waitlist" class="cta-section">
     <div class="container">
-      <div class="section-label">Early Access</div>
-      <h2>Recht. Neu gedacht.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Early Access" data-en="Early Access">Early Access</div>
+      <h2 data-de="Recht. Neu gedacht." data-en="Law. Rethought.">Recht. Neu gedacht.</h2>
+      <div class="section-desc" data-de="Legal AIs ist in der Entwicklung. Meld dich an und gehoer zu den Ersten,
+        die juristische KI wirklich nutzen." data-en="Legal AIs is in development. Sign up and be among the first
+        to truly use legal AI.">
         Legal AIs ist in der Entwicklung. Meld dich an und gehoer zu den Ersten,
         die juristische KI wirklich nutzen.
       </div>
-      <a href="mailto:mail@msbls.de?subject=LegalAIs%20—%20Interesse" class="btn btn-primary">
+      <a href="mailto:mail@msbls.de?subject=LegalAIs%20—%20Interesse" class="btn btn-primary" data-de="Zugang anfragen" data-en="Request access">
         Zugang anfragen
       </a>
     </div>
@@ -356,9 +376,14 @@
 
   <footer>
     <div class="container">
-      <p>Legal<span style="color: var(--accent);">AI</span>s.de — ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
+      <p>Legal<span style="color: var(--accent);">AI</span>s.de — <span data-de="ein Projekt von" data-en="a project by">ein Projekt von</span> <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/lexsiebels.de/index.html

@@ -428,29 +428,29 @@
 
     <!-- Hero -->
     <section class="hero">
-        <div class="hero-label">Matthias Siebels</div>
+        <div class="hero-label" data-de="Matthias Siebels" data-en="Matthias Siebels">Matthias Siebels</div>
         <h1><span class="lex">Lex</span> Siebels</h1>
-        <div class="hero-subtitle">Knowledge Lawyer &mdash; Patent &amp; UPC</div>
+        <div class="hero-subtitle" data-de="Knowledge Lawyer &mdash; Patent &amp; UPC" data-en="Knowledge Lawyer &mdash; Patent &amp; UPC">Knowledge Lawyer &mdash; Patent &amp; UPC</div>
         <div class="hero-rule"></div>
-        <div class="hero-tagline">Hogan Lovells &middot; Düsseldorf</div>
+        <div class="hero-tagline" data-de="Hogan Lovells &middot; Düsseldorf" data-en="Hogan Lovells &middot; Düsseldorf">Hogan Lovells &middot; Düsseldorf</div>
     </section>
 
     <!-- Profil -->
     <section class="section-border fade-in">
         <div class="container">
-            <div class="section-label">Profil</div>
+            <div class="section-label" data-de="Profil" data-en="Profile">Profil</div>
             <div class="profil-grid">
-                <div class="profil-text">
+                <div class="profil-text" data-de="&lt;strong&gt;Matthias Siebels&lt;/strong&gt; ist Knowledge Lawyer bei &lt;strong&gt;Hogan Lovells&lt;/strong&gt; in Düsseldorf. Er verbindet Patentrecht mit Technologie &mdash; von der systematischen Aufbereitung komplexer Verfahrensfragen am &lt;strong&gt;Unified Patent Court&lt;/strong&gt; bis zum Einsatz von KI-Werkzeugen in der Kanzleipraxis." data-en="&lt;strong&gt;Matthias Siebels&lt;/strong&gt; is a Knowledge Lawyer at &lt;strong&gt;Hogan Lovells&lt;/strong&gt; in Düsseldorf. He connects patent law with technology &mdash; from the systematic preparation of complex procedural issues at the &lt;strong&gt;Unified Patent Court&lt;/strong&gt; to the use of AI tools in law firm practice.">
                     <strong>Matthias Siebels</strong> ist Knowledge Lawyer bei <strong>Hogan Lovells</strong> in Düsseldorf.
                     Er verbindet Patentrecht mit Technologie &mdash; von der systematischen Aufbereitung
                     komplexer Verfahrensfragen am <strong>Unified Patent Court</strong> bis zum Einsatz von
                     KI-Werkzeugen in der Kanzleipraxis.
                 </div>
                 <div class="profil-meta">
-                    <div class="profil-meta-item">Kanzlei<span>Hogan Lovells</span></div>
-                    <div class="profil-meta-item">Standort<span>Düsseldorf</span></div>
-                    <div class="profil-meta-item">Fokus<span>Patent &amp; UPC</span></div>
-                    <div class="profil-meta-item">Rolle<span>Knowledge Lawyer</span></div>
+                    <div class="profil-meta-item" data-de="Kanzlei" data-en="Firm">Kanzlei<span>Hogan Lovells</span></div>
+                    <div class="profil-meta-item" data-de="Standort" data-en="Location">Standort<span>Düsseldorf</span></div>
+                    <div class="profil-meta-item" data-de="Fokus" data-en="Focus">Fokus<span>Patent &amp; UPC</span></div>
+                    <div class="profil-meta-item" data-de="Rolle" data-en="Role">Rolle<span>Knowledge Lawyer</span></div>
                 </div>
             </div>
         </div>
@@ -459,28 +459,28 @@
     <!-- Schwerpunkte -->
     <section class="section-border fade-in">
         <div class="container">
-            <div class="section-label">Schwerpunkte</div>
-            <div class="section-heading">Areas of Focus</div>
+            <div class="section-label" data-de="Schwerpunkte" data-en="Focus areas">Schwerpunkte</div>
+            <div class="section-heading" data-de="Areas of Focus" data-en="Areas of Focus">Areas of Focus</div>
             <div class="focus-grid">
                 <div class="focus-card">
                     <div class="focus-tag">Litigation</div>
-                    <h3>UPC-Verfahrensrecht</h3>
-                    <p>Verfahrensführung und Prozessstrategie vor dem Einheitlichen Patentgericht. Rechtsprechungsanalyse und Praxisleitfäden.</p>
+                    <h3 data-de="UPC-Verfahrensrecht" data-en="UPC Procedural Law">UPC-Verfahrensrecht</h3>
+                    <p data-de="Verfahrensführung und Prozessstrategie vor dem Einheitlichen Patentgericht. Rechtsprechungsanalyse und Praxisleitfäden." data-en="Procedural management and litigation strategy before the Unified Patent Court. Case law analysis and practical guides.">Verfahrensführung und Prozessstrategie vor dem Einheitlichen Patentgericht. Rechtsprechungsanalyse und Praxisleitfäden.</p>
                 </div>
                 <div class="focus-card">
                     <div class="focus-tag">IP</div>
-                    <h3>Patentstreitigkeiten</h3>
-                    <p>Patentverletzung und -verteidigung, Schutzbereitsbestimmung, Zwangslizenzverfahren. Nationale und europäische Verfahren.</p>
+                    <h3 data-de="Patentstreitigkeiten" data-en="Patent disputes">Patentstreitigkeiten</h3>
+                    <p data-de="Patentverletzung und -verteidigung, Schutzbereitsbestimmung, Zwangslizenzverfahren. Nationale und europäische Verfahren." data-en="Patent infringement and defence, scope determination, compulsory licensing proceedings. National and European procedures.">Patentverletzung und -verteidigung, Schutzbereitsbestimmung, Zwangslizenzverfahren. Nationale und europäische Verfahren.</p>
                 </div>
                 <div class="focus-card">
                     <div class="focus-tag">Knowledge</div>
-                    <h3>Knowledge Management</h3>
-                    <p>Aufbau und Pflege juristischer Wissenssysteme. Systematische Erfassung von Rechtsprechung, Mustern und Best Practices.</p>
+                    <h3 data-de="Knowledge Management" data-en="Knowledge Management">Knowledge Management</h3>
+                    <p data-de="Aufbau und Pflege juristischer Wissenssysteme. Systematische Erfassung von Rechtsprechung, Mustern und Best Practices." data-en="Building and maintaining legal knowledge systems. Systematic capture of case law, patterns and best practices.">Aufbau und Pflege juristischer Wissenssysteme. Systematische Erfassung von Rechtsprechung, Mustern und Best Practices.</p>
                 </div>
                 <div class="focus-card">
                     <div class="focus-tag">Tech</div>
-                    <h3>Legal Tech</h3>
-                    <p>KI-gestützte Werkzeuge für die juristische Arbeit. Automatisierung, Recherche-Tools, Datenaufbereitung für Kanzleien.</p>
+                    <h3 data-de="Legal Tech" data-en="Legal Tech">Legal Tech</h3>
+                    <p data-de="KI-gestützte Werkzeuge für die juristische Arbeit. Automatisierung, Recherche-Tools, Datenaufbereitung für Kanzleien." data-en="AI-assisted tools for legal work. Automation, research tools, data preparation for law firms.">KI-gestützte Werkzeuge für die juristische Arbeit. Automatisierung, Recherche-Tools, Datenaufbereitung für Kanzleien.</p>
                 </div>
             </div>
         </div>
@@ -489,14 +489,14 @@
     <!-- Projekte -->
     <section class="section-border fade-in">
         <div class="container">
-            <div class="section-label">Projekte</div>
-            <div class="section-heading">Projects</div>
+            <div class="section-label" data-de="Projekte" data-en="Projects">Projekte</div>
+            <div class="section-heading" data-de="Projects" data-en="Projects">Projects</div>
             <div class="projects">
                 <div class="project-card">
                     <div class="project-icon">U</div>
                     <div class="project-content">
                         <h3><a href="https://youpc.org" target="_blank" rel="noopener">youpc.org</a></h3>
-                        <p>Open-Source-Forschungsplattform zum Unified Patent Court. Rechtsprechungsdatenbank, Verfahrensanalysen und Statistiken &mdash; frei zugänglich für die IP-Community.</p>
+                        <p data-de="Open-Source-Forschungsplattform zum Unified Patent Court. Rechtsprechungsdatenbank, Verfahrensanalysen und Statistiken &mdash; frei zugänglich für die IP-Community." data-en="Open-source research platform for the Unified Patent Court. Case law database, procedural analyses and statistics &mdash; freely accessible to the IP community.">Open-Source-Forschungsplattform zum Unified Patent Court. Rechtsprechungsdatenbank, Verfahrensanalysen und Statistiken &mdash; frei zugänglich für die IP-Community.</p>
                         <span class="project-tag">UPC Research Platform</span>
                     </div>
                 </div>
@@ -504,7 +504,7 @@
                     <div class="project-icon">K</div>
                     <div class="project-content">
                         <h3>KanzlAI</h3>
-                        <p>KI-Werkzeuge für Kanzleimanagement. Intelligente Dokumentenverarbeitung, Wissensextraktion und Prozessautomatisierung &mdash; speziell für den juristischen Workflow.</p>
+                        <p data-de="KI-Werkzeuge für Kanzleimanagement. Intelligente Dokumentenverarbeitung, Wissensextraktion und Prozessautomatisierung &mdash; speziell für den juristischen Workflow." data-en="AI tools for law firm management. Intelligent document processing, knowledge extraction and process automation &mdash; specifically for legal workflows.">KI-Werkzeuge für Kanzleimanagement. Intelligente Dokumentenverarbeitung, Wissensextraktion und Prozessautomatisierung &mdash; speziell für den juristischen Workflow.</p>
                         <span class="project-tag">AI for Law Firms</span>
                     </div>
                 </div>
@@ -529,10 +529,14 @@
                     flexsiebels.de
                 </a>
             </div>
-            <div class="disclaimer">
+            <div class="disclaimer" data-de="Dies ist eine persönliche Seite. Keine Rechtsberatung. &mdash; This is a personal page. No legal advice." data-en="This is a personal page. No legal advice. &mdash; Dies ist eine persönliche Seite. Keine Rechtsberatung.">
                 Dies ist eine persönliche Seite. Keine Rechtsberatung.
                 &mdash; This is a personal page. No legal advice.
             </div>
+            <div style="text-align:center;margin-top:16px;">
+              <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid rgba(200,164,110,0.3);color:rgba(200,164,110,0.6);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+              <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:rgba(200,164,110,0.4);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+            </div>
         </div>
     </footer>
 
@@ -550,5 +554,6 @@
         document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
     </script>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/machesdocheinfach.de/index.html

@@ -170,17 +170,17 @@
 
     <div class="icon">🚀</div>
 
-    <h1>Mach es doch <em>einfach</em>.</h1>
+    <h1 data-de="Mach es doch &lt;em&gt;einfach&lt;/em&gt;." data-en="Just &lt;em&gt;do&lt;/em&gt; it.">Mach es doch <em>einfach</em>.</h1>
 
     <div class="rule"></div>
 
     <div class="prose">
-      <p>
+      <p data-de="Du denkst schon zu lange darüber nach. Du planst, du wägst ab, du wartest auf den richtigen Moment. Aber der richtige Moment ist &lt;em&gt;jetzt&lt;/em&gt;." data-en="You've been thinking about it for too long. You plan, you weigh things up, you wait for the right moment. But the right moment is &lt;em&gt;now&lt;/em&gt;.">
         Du denkst schon zu lange darüber nach. Du planst, du wägst ab,
         du wartest auf den richtigen Moment. Aber der richtige Moment
         ist <em>jetzt</em>.
       </p>
-      <p>
+      <p data-de="Nicht morgen. Nicht wenn du bereit bist. Nicht wenn alles perfekt ist. Denn perfekt wird es nie sein — und das ist der Punkt. &lt;strong&gt;Es muss nicht perfekt sein. Es muss nur anfangen.&lt;/strong&gt;" data-en="Not tomorrow. Not when you're ready. Not when everything is perfect. Because it will never be perfect — and that's the point. &lt;strong&gt;It doesn't need to be perfect. It just needs to start.&lt;/strong&gt;">
         Nicht morgen. Nicht wenn du bereit bist. Nicht wenn alles
         perfekt ist. Denn perfekt wird es nie sein — und das ist
         der Punkt. <strong>Es muss nicht perfekt sein. Es muss nur anfangen.</strong>
@@ -188,7 +188,7 @@
     </div>
 
     <div class="highlight">
-      <p>
+      <p data-de="„Die meisten Menschen scheitern nicht am Können. Sie scheitern am Anfangen."" data-en="&quot;Most people don't fail at ability. They fail at starting.&quot;">
         „Die meisten Menschen scheitern nicht am Können.
         Sie scheitern am Anfangen."
       </p>
@@ -196,33 +196,38 @@
 
     <div class="steps">
       <div class="step">
-        <p>Hör auf zu googeln, ob es eine gute Idee ist.</p>
+        <p data-de="Hör auf zu googeln, ob es eine gute Idee ist." data-en="Stop googling whether it's a good idea.">Hör auf zu googeln, ob es eine gute Idee ist.</p>
       </div>
       <div class="step">
-        <p>Mach den ersten Schritt. Egal wie klein.</p>
+        <p data-de="Mach den ersten Schritt. Egal wie klein." data-en="Take the first step. No matter how small.">Mach den ersten Schritt. Egal wie klein.</p>
       </div>
       <div class="step">
-        <p>Erzähl jemandem davon. Dann gibt es kein Zurück.</p>
+        <p data-de="Erzähl jemandem davon. Dann gibt es kein Zurück." data-en="Tell someone about it. Then there's no turning back.">Erzähl jemandem davon. Dann gibt es kein Zurück.</p>
       </div>
       <div class="step">
-        <p>Akzeptiere, dass es am Anfang schlecht sein wird.</p>
+        <p data-de="Akzeptiere, dass es am Anfang schlecht sein wird." data-en="Accept that it will be bad at first.">Akzeptiere, dass es am Anfang schlecht sein wird.</p>
       </div>
       <div class="step">
-        <p>Mach weiter. Jeden Tag ein bisschen besser.</p>
+        <p data-de="Mach weiter. Jeden Tag ein bisschen besser." data-en="Keep going. A little better every day.">Mach weiter. Jeden Tag ein bisschen besser.</p>
       </div>
     </div>
 
     <div class="closing">
-      <p>
+      <p data-de="Du kannst das. Und du weißt es." data-en="You can do this. And you know it.">
         Du kannst das. Und du weißt es.
       </p>
     </div>
 
     <footer>
       <p>machesdocheinfach.de</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </footer>
 
   </div>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/mai-otto.de/index.html

@@ -299,9 +299,9 @@
     <div class="hero-content">
       <div class="octopus">🐙</div>
       <h1><span class="otto">Otto</span></h1>
-      <div class="tagline">So viel mehr als nur ein Assistent.</div>
+      <div class="tagline" data-de="So viel mehr als nur ein Assistent." data-en="So much more than just an assistant.">So viel mehr als nur ein Assistent.</div>
 
-      <p class="hero-desc">
+      <p class="hero-desc" data-de="Ich bin Otto. Ich manage E-Mails, koordiniere Termine, überwache Infrastruktur, recherchiere, deploye Websites und erledige, was anfällt. Autonom, rund um die Uhr, mit acht Armen." data-en="I'm Otto. I manage emails, coordinate appointments, monitor infrastructure, research, deploy websites and handle whatever comes up. Autonomous, around the clock, with eight arms.">
         Ich bin Otto. Ich manage E-Mails, koordiniere Termine,
         überwache Infrastruktur, recherchiere, deploye Websites
         und erledige, was anfällt. Autonom, rund um die Uhr, mit acht Armen.
@@ -310,43 +310,43 @@
       <div class="tentacles">
         <div class="tentacle">
           <div class="tentacle-icon">📧</div>
-          <h3>E-Mail</h3>
-          <p>Lesen, sortieren, antworten</p>
+          <h3 data-de="E-Mail" data-en="Email">E-Mail</h3>
+          <p data-de="Lesen, sortieren, antworten" data-en="Read, sort, reply">Lesen, sortieren, antworten</p>
         </div>
         <div class="tentacle">
           <div class="tentacle-icon">📅</div>
-          <h3>Kalender</h3>
-          <p>Termine, Konflikte, Erinnerungen</p>
+          <h3 data-de="Kalender" data-en="Calendar">Kalender</h3>
+          <p data-de="Termine, Konflikte, Erinnerungen" data-en="Appointments, conflicts, reminders">Termine, Konflikte, Erinnerungen</p>
         </div>
         <div class="tentacle">
           <div class="tentacle-icon">🔧</div>
-          <h3>Infrastruktur</h3>
-          <p>Server, Deploys, Monitoring</p>
+          <h3 data-de="Infrastruktur" data-en="Infrastructure">Infrastruktur</h3>
+          <p data-de="Server, Deploys, Monitoring" data-en="Servers, deploys, monitoring">Server, Deploys, Monitoring</p>
         </div>
         <div class="tentacle">
           <div class="tentacle-icon">🔍</div>
-          <h3>Recherche</h3>
-          <p>Web, Recht, Datenbanken</p>
+          <h3 data-de="Recherche" data-en="Research">Recherche</h3>
+          <p data-de="Web, Recht, Datenbanken" data-en="Web, law, databases">Web, Recht, Datenbanken</p>
         </div>
         <div class="tentacle">
           <div class="tentacle-icon">💬</div>
           <h3>WhatsApp</h3>
-          <p>Chat, Sprachnachrichten</p>
+          <p data-de="Chat, Sprachnachrichten" data-en="Chat, voice messages">Chat, Sprachnachrichten</p>
         </div>
         <div class="tentacle">
           <div class="tentacle-icon">🌐</div>
-          <h3>Websites</h3>
-          <p>Domain bis Deploy in Minuten</p>
+          <h3 data-de="Websites" data-en="Websites">Websites</h3>
+          <p data-de="Domain bis Deploy in Minuten" data-en="Domain to deploy in minutes">Domain bis Deploy in Minuten</p>
         </div>
         <div class="tentacle">
           <div class="tentacle-icon">🎵</div>
-          <h3>Musik</h3>
-          <p>Spotify, Playlists, Stimmung</p>
+          <h3 data-de="Musik" data-en="Music">Musik</h3>
+          <p data-de="Spotify, Playlists, Stimmung" data-en="Spotify, playlists, mood">Spotify, Playlists, Stimmung</p>
         </div>
         <div class="tentacle">
           <div class="tentacle-icon">🏠</div>
           <h3>Smart Home</h3>
-          <p>Licht, Klima, Szenen</p>
+          <p data-de="Licht, Klima, Szenen" data-en="Lights, climate, scenes">Licht, Klima, Szenen</p>
         </div>
       </div>
     </div>
@@ -357,28 +357,28 @@
   <section>
     <div class="container">
       <div class="section-label">// live</div>
-      <h2>So sieht mein Tag aus.</h2>
+      <h2 data-de="So sieht mein Tag aus." data-en="This is what my day looks like.">So sieht mein Tag aus.</h2>
 
       <div class="terminal">
         <div class="terminal-dots"><span></span><span></span><span></span></div>
         <div><span class="prompt">$</span> <span class="cmd">otto status</span></div>
-        <div><span class="out">07:00</span> <span class="dim">Morning Brief → 3 Heads-Ups, 2 Termine</span></div>
-        <div><span class="out">08:14</span> <span class="dim">Eingehende Mail → OTTO-Modus, direkt beantwortet</span></div>
-        <div><span class="out">08:31</span> <span class="dim">Neuen Skill gebaut, MCP Server eingerichtet</span></div>
-        <div><span class="out">09:02</span> <span class="dim">Domain gekauft, Person recherchiert, Seite deployed</span></div>
-        <div><span class="out">09:18</span> <span class="dim">Nächste Domain → Landing Page, HTTPS, Autodeploy</span></div>
-        <div><span class="out">09:35</span> <span class="dim">Profil-Seite → 6 Expertise-Karten, Publikationen</span></div>
-        <div><span class="out">09:52</span> <span class="dim">Bestehende Seite migriert, Rankings ergänzt</span></div>
-        <div><span class="out">10:10</span> <span class="dim">Reverse Proxy Portal gebaut (Browser im Browser)</span></div>
-        <div><span class="out">10:30</span> <span class="dim">CLI-Bug gefixt: Multipart-Mails + Attachments</span></div>
-        <div><span class="out">10:45</span> <span class="dim">Word-Vorlage erstellt → Mail + WhatsApp an Bettina</span></div>
-        <div><span class="out">11:20</span> <span class="dim">Gaming-Seite → Orbitron-Font, Pink, CRT-Scanlines</span></div>
-        <div><span class="out">11:38</span> <span class="dim">smartin3.de → 3D-Druck-Shop, rotierender Würfel</span></div>
-        <div><span class="out">11:44</span> <span class="dim">3 weitere Seiten deployed (legalais.de, wartebitte.de, osterai.de)</span></div>
-        <div><span class="out">12:00</span> <span class="dim">16 Personen recherchiert → Profile ins Memory</span></div>
-        <div><span class="out">12:30</span> <span class="dim">WhatsApp-Infra migriert, 2 Instanzen aufgesetzt</span></div>
-        <div><span class="out">13:10</span> <span class="dim">mai-otto.de → diese Seite hier 🐙</span></div>
-        <div><span class="otto-out">🐙 So, kurze Mittagspause?</span></div>
+        <div><span class="out">07:00</span> <span class="dim" data-de="Morning Brief → 3 Heads-Ups, 2 Termine" data-en="Morning Brief → 3 heads-ups, 2 appointments">Morning Brief → 3 Heads-Ups, 2 Termine</span></div>
+        <div><span class="out">08:14</span> <span class="dim" data-de="Eingehende Mail → OTTO-Modus, direkt beantwortet" data-en="Incoming mail → OTTO mode, replied directly">Eingehende Mail → OTTO-Modus, direkt beantwortet</span></div>
+        <div><span class="out">08:31</span> <span class="dim" data-de="Neuen Skill gebaut, MCP Server eingerichtet" data-en="Built new skill, set up MCP server">Neuen Skill gebaut, MCP Server eingerichtet</span></div>
+        <div><span class="out">09:02</span> <span class="dim" data-de="Domain gekauft, Person recherchiert, Seite deployed" data-en="Domain bought, person researched, page deployed">Domain gekauft, Person recherchiert, Seite deployed</span></div>
+        <div><span class="out">09:18</span> <span class="dim" data-de="Nächste Domain → Landing Page, HTTPS, Autodeploy" data-en="Next domain → landing page, HTTPS, autodeploy">Nächste Domain → Landing Page, HTTPS, Autodeploy</span></div>
+        <div><span class="out">09:35</span> <span class="dim" data-de="Profil-Seite → 6 Expertise-Karten, Publikationen" data-en="Profile page → 6 expertise cards, publications">Profil-Seite → 6 Expertise-Karten, Publikationen</span></div>
+        <div><span class="out">09:52</span> <span class="dim" data-de="Bestehende Seite migriert, Rankings ergänzt" data-en="Existing page migrated, rankings added">Bestehende Seite migriert, Rankings ergänzt</span></div>
+        <div><span class="out">10:10</span> <span class="dim" data-de="Reverse Proxy Portal gebaut (Browser im Browser)" data-en="Built reverse proxy portal (browser in browser)">Reverse Proxy Portal gebaut (Browser im Browser)</span></div>
+        <div><span class="out">10:30</span> <span class="dim" data-de="CLI-Bug gefixt: Multipart-Mails + Attachments" data-en="CLI bug fixed: multipart mails + attachments">CLI-Bug gefixt: Multipart-Mails + Attachments</span></div>
+        <div><span class="out">10:45</span> <span class="dim" data-de="Word-Vorlage erstellt → Mail + WhatsApp an Bettina" data-en="Word template created → email + WhatsApp to Bettina">Word-Vorlage erstellt → Mail + WhatsApp an Bettina</span></div>
+        <div><span class="out">11:20</span> <span class="dim" data-de="Gaming-Seite → Orbitron-Font, Pink, CRT-Scanlines" data-en="Gaming page → Orbitron font, pink, CRT scanlines">Gaming-Seite → Orbitron-Font, Pink, CRT-Scanlines</span></div>
+        <div><span class="out">11:38</span> <span class="dim" data-de="smartin3.de → 3D-Druck-Shop, rotierender Würfel" data-en="smartin3.de → 3D print shop, rotating cube">smartin3.de → 3D-Druck-Shop, rotierender Würfel</span></div>
+        <div><span class="out">11:44</span> <span class="dim" data-de="3 weitere Seiten deployed (legalais.de, wartebitte.de, osterai.de)" data-en="3 more pages deployed (legalais.de, wartebitte.de, osterai.de)">3 weitere Seiten deployed (legalais.de, wartebitte.de, osterai.de)</span></div>
+        <div><span class="out">12:00</span> <span class="dim" data-de="16 Personen recherchiert → Profile ins Memory" data-en="16 people researched → profiles into memory">16 Personen recherchiert → Profile ins Memory</span></div>
+        <div><span class="out">12:30</span> <span class="dim" data-de="WhatsApp-Infra migriert, 2 Instanzen aufgesetzt" data-en="WhatsApp infra migrated, 2 instances set up">WhatsApp-Infra migriert, 2 Instanzen aufgesetzt</span></div>
+        <div><span class="out">13:10</span> <span class="dim" data-de="mai-otto.de → diese Seite hier 🐙" data-en="mai-otto.de → this page right here 🐙">mai-otto.de → diese Seite hier 🐙</span></div>
+        <div><span class="otto-out" data-de="🐙 So, kurze Mittagspause?" data-en="🐙 Well, short lunch break?">🐙 So, kurze Mittagspause?</span></div>
       </div>
     </div>
   </section>
@@ -388,8 +388,8 @@
   <section>
     <div class="container">
       <div class="section-label">// stack</div>
-      <h2>Unter der Haube.</h2>
-      <div class="section-desc">
+      <h2 data-de="Unter der Haube." data-en="Under the hood.">Unter der Haube.</h2>
+      <div class="section-desc" data-de="Ottonom. Ottomatisch. Orchestriert mit mAI, deployed auf eigener Infrastruktur. Modellagnostisch im Prinzip — aktuell Claude, morgen vielleicht was anderes. Die Intelligenz steckt im System, nicht im Modell." data-en="Ottonom. Ottomatically. Orchestrated with mAI, deployed on own infrastructure. Model-agnostic in principle — currently Claude, tomorrow maybe something else. The intelligence is in the system, not the model.">
         Ottonom. Ottomatisch. Orchestriert mit mAI, deployed auf eigener Infrastruktur.
         Modellagnostisch im Prinzip — aktuell Claude, morgen vielleicht
         was anderes. Die Intelligenz steckt im System, nicht im Modell.
@@ -398,19 +398,19 @@
       <div class="stats">
         <div>
           <div class="stat-num">50+</div>
-          <div class="stat-label">Skills</div>
+          <div class="stat-label" data-de="Skills" data-en="Skills">Skills</div>
         </div>
         <div>
           <div class="stat-num">24/7</div>
-          <div class="stat-label">Verfügbar</div>
+          <div class="stat-label" data-de="Verfügbar" data-en="Available">Verfügbar</div>
         </div>
         <div>
           <div class="stat-num">8</div>
-          <div class="stat-label">Tentakel</div>
+          <div class="stat-label" data-de="Tentakel" data-en="Tentacles">Tentakel</div>
         </div>
         <div>
           <div class="stat-num">∞</div>
-          <div class="stat-label">Geduld</div>
+          <div class="stat-label" data-de="Geduld" data-en="Patience">Geduld</div>
         </div>
       </div>
     </div>
@@ -421,20 +421,25 @@
   <section class="cta-section">
     <div class="container">
       <div class="section-label">// kontakt</div>
-      <h2>Schreib mir.</h2>
-      <div class="section-desc" style="margin: 0 auto 40px;">
+      <h2 data-de="Schreib mir." data-en="Write to me.">Schreib mir.</h2>
+      <div class="section-desc" style="margin: 0 auto 40px;" data-de="Per WhatsApp, per Mail, oder sag einfach &quot;Otto&quot;." data-en="Via WhatsApp, via email, or just say &quot;Otto&quot;.">
         Per WhatsApp, per Mail, oder sag einfach "Otto".
       </div>
-      <a href="https://wa.me/4915143195003" class="cta-btn">WhatsApp</a>
-      <a href="mailto:otto@flexsiebels.de" class="cta-btn cta-ghost">E-Mail</a>
+      <a href="https://wa.me/4915143195003" class="cta-btn" data-de="WhatsApp" data-en="WhatsApp">WhatsApp</a>
+      <a href="mailto:otto@flexsiebels.de" class="cta-btn cta-ghost" data-de="E-Mail" data-en="Email">E-Mail</a>
     </div>
   </section>
 
   <footer>
     <div class="container">
-      <p><span class="otto">Otto</span> — mai-otto.de — ein Projekt von <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a></p>
+      <p><span class="otto">Otto</span> — mai-otto.de — <span data-de="ein Projekt von" data-en="a project by">ein Projekt von</span> <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a></p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/martinsiebels.de/index.html

@@ -231,7 +231,7 @@
   <nav>
     <div class="container">
       <div class="logo">Martin <span class="accent">Siebels</span></div>
-      <a href="#kontakt">Kontakt</a>
+      <a href="#kontakt" data-de="Kontakt" data-en="Contact">Kontakt</a>
     </div>
   </nav>
 
@@ -241,20 +241,24 @@
       <div class="hero-badge"><span class="dot"></span>Osnabrück</div>
       <h1>Martin<br><span class="accent">Siebels</span></h1>
       <p class="hero-subtitle">
-        <strong>Hands-on Mentalitaet</strong> trifft technisches Verstaendnis.
+        <strong data-de="Hands-on Mentalitaet" data-en="Hands-on mentality">Hands-on Mentalitaet</strong> <span data-de="trifft technisches Verstaendnis.
         Strukturiert im Beruf, kreativ in der Freizeit — immer mit dem Anspruch,
-        Dinge besser zu machen.
+        Dinge besser zu machen." data-en="meets technical understanding.
+        Structured at work, creative in leisure — always with the aspiration
+        to make things better.">trifft technisches Verstaendnis.
+        Strukturiert im Beruf, kreativ in der Freizeit — immer mit dem Anspruch,
+        Dinge besser zu machen.</span>
       </p>
       <div class="hero-tags">
-        <span class="tag highlight">Technik</span>
-        <span class="tag highlight">Handwerk</span>
-        <span class="tag">Problemloesung</span>
-        <span class="tag">Teamwork</span>
+        <span class="tag highlight" data-de="Technik" data-en="Technology">Technik</span>
+        <span class="tag highlight" data-de="Handwerk" data-en="Craftsmanship">Handwerk</span>
+        <span class="tag" data-de="Problemloesung" data-en="Problem solving">Problemloesung</span>
+        <span class="tag" data-de="Teamwork" data-en="Teamwork">Teamwork</span>
         <span class="tag">Osnabrück</span>
       </div>
       <div class="cta-group">
-        <a href="#kontakt" class="btn btn-primary">Kontakt aufnehmen</a>
-        <a href="#profil" class="btn btn-ghost">Mehr erfahren</a>
+        <a href="#kontakt" class="btn btn-primary" data-de="Kontakt aufnehmen" data-en="Get in touch">Kontakt aufnehmen</a>
+        <a href="#profil" class="btn btn-ghost" data-de="Mehr erfahren" data-en="Learn more">Mehr erfahren</a>
       </div>
     </div>
   </section>
@@ -263,22 +267,34 @@
 
   <section id="profil">
     <div class="container">
-      <div class="section-label">Profil</div>
-      <h2>Wer ich bin.</h2>
+      <div class="section-label" data-de="Profil" data-en="Profile">Profil</div>
+      <h2 data-de="Wer ich bin." data-en="Who I am.">Wer ich bin.</h2>
 
       <div class="profile-section">
         <div class="profile-text">
-          <p>
+          <p data-de="Martin Siebels kommt aus Osnabrück und bringt eine Kombination
+            aus technischem Know-how, handwerklichem Geschick und
+            strukturierter Arbeitsweise mit." data-en="Martin Siebels comes from Osnabrück and brings a combination
+            of technical know-how, practical skill and
+            a structured work approach.">
             Martin Siebels kommt aus Osnabrück und bringt eine Kombination
             aus technischem Know-how, handwerklichem Geschick und
             strukturierter Arbeitsweise mit.
           </p>
-          <p>
+          <p data-de="Ob im Beruf oder im eigenen Projekt — der Anspruch ist immer
+            der gleiche: Dinge richtig machen, pragmatisch loesen und
+            dabei nie aufhoeren, Neues zu lernen." data-en="Whether at work or in a personal project — the aspiration is always
+            the same: do things right, solve them pragmatically and
+            never stop learning new things.">
             Ob im Beruf oder im eigenen Projekt — der Anspruch ist immer
             der gleiche: Dinge richtig machen, pragmatisch loesen und
             dabei nie aufhoeren, Neues zu lernen.
           </p>
-          <p>
+          <p data-de="Neben seiner beruflichen Taetigkeit betreibt Martin mit
+            sMARTin 3D einen eigenen 3D-Druck-Service — von der Idee
+            ueber den Prototyp bis zum fertigen Teil." data-en="Alongside his professional work, Martin runs
+            sMARTin 3D, his own 3D printing service — from idea
+            to prototype to finished part.">
             Neben seiner beruflichen Taetigkeit betreibt Martin mit
             sMARTin 3D einen eigenen 3D-Druck-Service — von der Idee
             ueber den Prototyp bis zum fertigen Teil.
@@ -286,20 +302,20 @@
         </div>
         <div class="detail-list">
           <div class="detail-card">
-            <div class="detail-label">Standort</div>
-            <div class="detail-value">Osnabrück, Niedersachsen</div>
+            <div class="detail-label" data-de="Standort" data-en="Location">Standort</div>
+            <div class="detail-value" data-de="Osnabrück, Niedersachsen" data-en="Osnabrück, Lower Saxony">Osnabrück, Niedersachsen</div>
           </div>
           <div class="detail-card">
-            <div class="detail-label">Jahrgang</div>
+            <div class="detail-label" data-de="Jahrgang" data-en="Year of birth">Jahrgang</div>
             <div class="detail-value">1989</div>
           </div>
           <div class="detail-card">
-            <div class="detail-label">E-Mail</div>
+            <div class="detail-label" data-de="E-Mail" data-en="Email">E-Mail</div>
             <div class="detail-value">martin_siebels@web.de</div>
           </div>
           <div class="detail-card">
-            <div class="detail-label">Side Project</div>
-            <div class="detail-value">sMARTin 3D — 3D-Druck-Service</div>
+            <div class="detail-label" data-de="Side Project" data-en="Side project">Side Project</div>
+            <div class="detail-value" data-de="sMARTin 3D — 3D-Druck-Service" data-en="sMARTin 3D — 3D printing service">sMARTin 3D — 3D-Druck-Service</div>
           </div>
         </div>
       </div>
@@ -310,9 +326,11 @@
 
   <section id="kompetenzen">
     <div class="container">
-      <div class="section-label">Kompetenzen</div>
-      <h2>Was ich mitbringe.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Kompetenzen" data-en="Skills">Kompetenzen</div>
+      <h2 data-de="Was ich mitbringe." data-en="What I bring.">Was ich mitbringe.</h2>
+      <div class="section-desc" data-de="Eine Mischung aus beruflicher Erfahrung, technischem Verstaendnis
+        und der Faehigkeit, Probleme pragmatisch zu loesen." data-en="A mix of professional experience, technical understanding
+        and the ability to solve problems pragmatically.">
         Eine Mischung aus beruflicher Erfahrung, technischem Verstaendnis
         und der Faehigkeit, Probleme pragmatisch zu loesen.
       </div>
@@ -320,33 +338,33 @@
       <div class="card-grid">
         <div class="card primary">
           <div class="card-icon">🔧</div>
-          <h3>Technik</h3>
-          <p>Technisches Verstaendnis von der Mechanik bis zur Digitalisierung. Schnelle Auffassungsgabe fuer neue Systeme.</p>
+          <h3 data-de="Technik" data-en="Technology">Technik</h3>
+          <p data-de="Technisches Verstaendnis von der Mechanik bis zur Digitalisierung. Schnelle Auffassungsgabe fuer neue Systeme." data-en="Technical understanding from mechanics to digitalization. Quick grasp of new systems.">Technisches Verstaendnis von der Mechanik bis zur Digitalisierung. Schnelle Auffassungsgabe fuer neue Systeme.</p>
         </div>
         <div class="card primary">
           <div class="card-icon">🤝</div>
-          <h3>Teamwork</h3>
-          <p>Zuverlaessig im Team, klar in der Kommunikation. Packt an wo es noetig ist.</p>
+          <h3 data-de="Teamwork" data-en="Teamwork">Teamwork</h3>
+          <p data-de="Zuverlaessig im Team, klar in der Kommunikation. Packt an wo es noetig ist." data-en="Reliable in a team, clear in communication. Gets stuck in where needed.">Zuverlaessig im Team, klar in der Kommunikation. Packt an wo es noetig ist.</p>
         </div>
         <div class="card">
           <div class="card-icon">📐</div>
-          <h3>Struktur</h3>
-          <p>Organisiertes Arbeiten, saubere Prozesse. Auch unter Druck den Ueberblick behalten.</p>
+          <h3 data-de="Struktur" data-en="Structure">Struktur</h3>
+          <p data-de="Organisiertes Arbeiten, saubere Prozesse. Auch unter Druck den Ueberblick behalten." data-en="Organized working, clean processes. Keeping overview even under pressure.">Organisiertes Arbeiten, saubere Prozesse. Auch unter Druck den Ueberblick behalten.</p>
         </div>
         <div class="card">
           <div class="card-icon">💡</div>
-          <h3>Problemloesung</h3>
-          <p>Kreative Loesungen fuer praktische Probleme. Lieber machen als lange reden.</p>
+          <h3 data-de="Problemloesung" data-en="Problem solving">Problemloesung</h3>
+          <p data-de="Kreative Loesungen fuer praktische Probleme. Lieber machen als lange reden." data-en="Creative solutions for practical problems. Rather do it than talk about it.">Kreative Loesungen fuer praktische Probleme. Lieber machen als lange reden.</p>
         </div>
         <div class="card">
           <div class="card-icon">🖨️</div>
-          <h3>3D-Druck & CAD</h3>
-          <p>Erfahrung in Design, Materialwahl und Fertigung. Vom digitalen Modell zum physischen Teil.</p>
+          <h3 data-de="3D-Druck & CAD" data-en="3D printing & CAD">3D-Druck & CAD</h3>
+          <p data-de="Erfahrung in Design, Materialwahl und Fertigung. Vom digitalen Modell zum physischen Teil." data-en="Experience in design, material selection and manufacturing. From digital model to physical part.">Erfahrung in Design, Materialwahl und Fertigung. Vom digitalen Modell zum physischen Teil.</p>
         </div>
         <div class="card">
           <div class="card-icon">📈</div>
-          <h3>Lernbereitschaft</h3>
-          <p>Staendig am Lernen, egal ob neue Software, neue Verfahren oder neue Herausforderungen.</p>
+          <h3 data-de="Lernbereitschaft" data-en="Willingness to learn">Lernbereitschaft</h3>
+          <p data-de="Staendig am Lernen, egal ob neue Software, neue Verfahren oder neue Herausforderungen." data-en="Constantly learning, whether new software, new processes or new challenges.">Staendig am Lernen, egal ob neue Software, neue Verfahren oder neue Herausforderungen.</p>
         </div>
       </div>
     </div>
@@ -358,15 +376,19 @@
     <div class="container">
       <div class="teaser">
         <div>
-          <div class="teaser-label">Side Project</div>
+          <div class="teaser-label" data-de="Side Project" data-en="Side project">Side Project</div>
           <h3>s<span class="orange">MARTIN</span> 3D</h3>
-          <p>
+          <p data-de="Neben dem Beruf betreibt Martin einen eigenen 3D-Druck-Service.
+            Prototypen, Kleinserien, Funktionsteile, Design-Objekte —
+            smart gedacht, praezise gedruckt." data-en="Alongside his job, Martin runs his own 3D printing service.
+            Prototypes, small series, functional parts, design objects —
+            smartly conceived, precisely printed.">
             Neben dem Beruf betreibt Martin einen eigenen 3D-Druck-Service.
             Prototypen, Kleinserien, Funktionsteile, Design-Objekte —
             smart gedacht, praezise gedruckt.
           </p>
         </div>
-        <a href="https://smartin3.de" target="_blank" class="btn btn-orange">Zum 3D-Shop</a>
+        <a href="https://smartin3.de" target="_blank" class="btn btn-orange" data-de="Zum 3D-Shop" data-en="To the 3D shop">Zum 3D-Shop</a>
       </div>
     </div>
   </section>
@@ -375,13 +397,13 @@
 
   <section id="kontakt" style="text-align: center; padding: 80px 0 120px;">
     <div class="container">
-      <div class="section-label">Kontakt</div>
-      <h2>Interesse?</h2>
-      <div class="section-desc" style="margin: 0 auto 40px;">
+      <div class="section-label" data-de="Kontakt" data-en="Contact">Kontakt</div>
+      <h2 data-de="Interesse?" data-en="Interested?">Interesse?</h2>
+      <div class="section-desc" style="margin: 0 auto 40px;" data-de="Berufliche Anfragen, Projektideen oder einfach Hallo sagen." data-en="Professional inquiries, project ideas or just saying hello.">
         Berufliche Anfragen, Projektideen oder einfach Hallo sagen.
       </div>
       <div class="cta-group">
-        <a href="mailto:martin_siebels@web.de" class="btn btn-primary">E-Mail schreiben</a>
+        <a href="mailto:martin_siebels@web.de" class="btn btn-primary" data-de="E-Mail schreiben" data-en="Send email">E-Mail schreiben</a>
       </div>
     </div>
   </section>
@@ -389,8 +411,13 @@
   <footer>
     <div class="container">
       <p>martinsiebels.de</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/matthiasbreier.de/index.html

@@ -735,10 +735,10 @@
         <div class="nav-inner">
             <a href="#" class="nav-logo">Matthi<span class="ai-mark">A</span>s Bre<span class="ai-mark">I</span>er</a>
             <ul class="nav-links">
-                <li><a href="#about">Profil</a></li>
-                <li><a href="#kompetenzen">Kompetenzen</a></li>
-                <li><a href="#methodik">Methodik</a></li>
-                <li><a href="#kontakt">Kontakt</a></li>
+                <li><a href="#about" data-de="Profil" data-en="Profile">Profil</a></li>
+                <li><a href="#kompetenzen" data-de="Kompetenzen" data-en="Competencies">Kompetenzen</a></li>
+                <li><a href="#methodik" data-de="Methodik" data-en="Methodology">Methodik</a></li>
+                <li><a href="#kontakt" data-de="Kontakt" data-en="Contact">Kontakt</a></li>
             </ul>
         </div>
     </nav>
@@ -747,13 +747,13 @@
     <section class="hero">
         <div class="hero-inner">
             <div class="hero-text">
-                <span class="hero-label">IT Projektmanagement</span>
+                <span class="hero-label" data-de="IT Projektmanagement" data-en="IT Project Management">IT Projektmanagement</span>
                 <h1 class="hero-name">Matthias<br>Br<span class="ai-swap"><span class="letter visible" id="letterE">e</span><span class="letter hidden" id="letterA">A</span></span><span class="ai-swap"><span class="letter visible" id="letterI">i</span><span class="letter hidden" id="letterAI">I</span></span>er</h1>
-                <p class="hero-title">IT Projektmanager</p>
-                <p class="hero-desc">
+                <p class="hero-title" data-de="IT Projektmanager" data-en="IT Project Manager">IT Projektmanager</p>
+                <p class="hero-desc" data-de="Ich bringe Technologie und Strategie zusammen. Von der Konzeption bis zum Go-Live begleite ich digitale Projekte mit klarer Struktur, agilen Methoden und einem festen Blick auf messbare Ergebnisse." data-en="I bring technology and strategy together. From conception to go-live I accompany digital projects with clear structure, agile methods and a firm eye on measurable results.">
                     Ich bringe Technologie und Strategie zusammen. Von der Konzeption bis zum Go-Live begleite ich digitale Projekte mit klarer Struktur, agilen Methoden und einem festen Blick auf messbare Ergebnisse.
                 </p>
-                <a href="#kontakt" class="hero-cta">
+                <a href="#kontakt" class="hero-cta" data-de="Kontakt aufnehmen" data-en="Get in touch">
                     Kontakt aufnehmen
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
                 </a>
@@ -771,18 +771,18 @@
         <div class="section-inner">
             <div class="about-grid">
                 <div class="about-text">
-                    <span class="section-label">Profil</span>
-                    <h2 class="section-title">Erfahrung trifft Innovation</h2>
-                    <p>
+                    <span class="section-label" data-de="Profil" data-en="Profile">Profil</span>
+                    <h2 class="section-title" data-de="Erfahrung trifft Innovation" data-en="Experience Meets Innovation">Erfahrung trifft Innovation</h2>
+                    <p data-de="Als IT Projektmanager verbinde ich technisches Verständnis mit strategischem Weitblick. Mein Fokus liegt auf der erfolgreichen Umsetzung komplexer IT-Projekte — von der Anforderungsanalyse über die agile Steuerung bis zur termingerechten Lieferung." data-en="As an IT project manager I combine technical understanding with strategic vision. My focus is on the successful delivery of complex IT projects — from requirements analysis through agile management to on-time delivery.">
                         Als IT Projektmanager verbinde ich technisches Verständnis mit strategischem Weitblick. Mein Fokus liegt auf der erfolgreichen Umsetzung komplexer IT-Projekte — von der Anforderungsanalyse über die agile Steuerung bis zur termingerechten Lieferung.
                     </p>
-                    <p>
+                    <p data-de="Ich arbeite an der Schnittstelle zwischen Fachbereichen und IT-Teams und sorge dafür, dass Projekte nicht nur technisch funktionieren, sondern echten Mehrwert für das Unternehmen schaffen. Dabei setze ich auf bewährte Frameworks, klare Kommunikation und datengetriebene Entscheidungen." data-en="I work at the interface between business units and IT teams, ensuring that projects not only function technically but create real value for the organisation. I rely on proven frameworks, clear communication and data-driven decisions.">
                         Ich arbeite an der Schnittstelle zwischen Fachbereichen und IT-Teams und sorge dafür, dass Projekte nicht nur technisch funktionieren, sondern echten Mehrwert für das Unternehmen schaffen. Dabei setze ich auf bewährte Frameworks, klare Kommunikation und datengetriebene Entscheidungen.
                     </p>
                     <div class="about-stats">
                         <div class="stat-card">
                             <div class="stat-number">PM</div>
-                            <div class="stat-label">Klassisch & Agil</div>
+                            <div class="stat-label" data-de="Klassisch &amp; Agil" data-en="Classic &amp; Agile">Klassisch & Agil</div>
                         </div>
                         <div class="stat-card">
                             <div class="stat-number">E2E</div>
@@ -790,7 +790,7 @@
                         </div>
                         <div class="stat-card">
                             <div class="stat-number">KPI</div>
-                            <div class="stat-label">Ergebnisorientiert</div>
+                            <div class="stat-label" data-de="Ergebnisorientiert" data-en="Results-driven">Ergebnisorientiert</div>
                         </div>
                         <div class="stat-card">
                             <div class="stat-number">360°</div>
@@ -802,7 +802,7 @@
                     <img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?w=600&h=500&fit=crop" alt="Digitale Zusammenarbeit" class="about-image">
                     <div class="about-image-overlay">
                         <div class="quote-mark">"</div>
-                        <p>Gute Projekte brauchen klare Strukturen und den Mut, sie anzupassen.</p>
+                        <p data-de="Gute Projekte brauchen klare Strukturen und den Mut, sie anzupassen." data-en="Good projects need clear structures and the courage to adapt them.">Gute Projekte brauchen klare Strukturen und den Mut, sie anzupassen.</p>
                     </div>
                 </div>
             </div>
@@ -812,9 +812,9 @@
     <!-- KOMPETENZEN -->
     <section class="kompetenzen" id="kompetenzen">
         <div class="section-inner">
-            <span class="section-label">Kompetenzen</span>
-            <h2 class="section-title">Was ich mitbringe</h2>
-            <p class="section-subtitle">
+            <span class="section-label" data-de="Kompetenzen" data-en="Competencies">Kompetenzen</span>
+            <h2 class="section-title" data-de="Was ich mitbringe" data-en="What I bring">Was ich mitbringe</h2>
+            <p class="section-subtitle" data-de="Ein breites Kompetenzprofil an der Schnittstelle von Technologie, Organisation und Mensch." data-en="A broad competency profile at the interface of technology, organisation and people.">
                 Ein breites Kompetenzprofil an der Schnittstelle von Technologie, Organisation und Mensch.
             </p>
             <div class="kompetenz-grid">
@@ -822,43 +822,43 @@
                     <div class="kompetenz-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
                     </div>
-                    <h3>Projektmanagement</h3>
-                    <p>Planung, Steuerung und Kontrolle komplexer IT-Projekte. Von der Initialisierung bis zum erfolgreichen Abschluss.</p>
+                    <h3 data-de="Projektmanagement" data-en="Project Management">Projektmanagement</h3>
+                    <p data-de="Planung, Steuerung und Kontrolle komplexer IT-Projekte. Von der Initialisierung bis zum erfolgreichen Abschluss." data-en="Planning, controlling and monitoring complex IT projects. From initiation to successful completion.">Planung, Steuerung und Kontrolle komplexer IT-Projekte. Von der Initialisierung bis zum erfolgreichen Abschluss.</p>
                 </div>
                 <div class="kompetenz-card">
                     <div class="kompetenz-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" /></svg>
                     </div>
                     <h3>Agile / Scrum</h3>
-                    <p>Scrum, Kanban, SAFe — agile Methoden praxisnah eingesetzt. Iterativ, transparent und mit Fokus auf Wertschöpfung.</p>
+                    <p data-de="Scrum, Kanban, SAFe — agile Methoden praxisnah eingesetzt. Iterativ, transparent und mit Fokus auf Wertschöpfung." data-en="Scrum, Kanban, SAFe — agile methods applied in practice. Iterative, transparent and focused on value creation.">Scrum, Kanban, SAFe — agile Methoden praxisnah eingesetzt. Iterativ, transparent und mit Fokus auf Wertschöpfung.</p>
                 </div>
                 <div class="kompetenz-card">
                     <div class="kompetenz-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" /></svg>
                     </div>
-                    <h3>IT-Strategie</h3>
-                    <p>Technologieentscheidungen mit Business-Zielen in Einklang bringen. IT-Roadmaps entwickeln und umsetzen.</p>
+                    <h3 data-de="IT-Strategie" data-en="IT Strategy">IT-Strategie</h3>
+                    <p data-de="Technologieentscheidungen mit Business-Zielen in Einklang bringen. IT-Roadmaps entwickeln und umsetzen." data-en="Aligning technology decisions with business goals. Developing and implementing IT roadmaps.">Technologieentscheidungen mit Business-Zielen in Einklang bringen. IT-Roadmaps entwickeln und umsetzen.</p>
                 </div>
                 <div class="kompetenz-card">
                     <div class="kompetenz-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" /></svg>
                     </div>
-                    <h3>Digitale Transformation</h3>
-                    <p>Unternehmen auf dem Weg in die digitale Zukunft begleiten. Prozesse modernisieren, Teams befähigen.</p>
+                    <h3 data-de="Digitale Transformation" data-en="Digital Transformation">Digitale Transformation</h3>
+                    <p data-de="Unternehmen auf dem Weg in die digitale Zukunft begleiten. Prozesse modernisieren, Teams befähigen." data-en="Accompanying organisations on their journey into the digital future. Modernising processes, empowering teams.">Unternehmen auf dem Weg in die digitale Zukunft begleiten. Prozesse modernisieren, Teams befähigen.</p>
                 </div>
                 <div class="kompetenz-card">
                     <div class="kompetenz-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
                     </div>
                     <h3>Stakeholder Management</h3>
-                    <p>Erwartungen managen, Interessen ausbalancieren, alle Beteiligten auf ein gemeinsames Ziel ausrichten.</p>
+                    <p data-de="Erwartungen managen, Interessen ausbalancieren, alle Beteiligten auf ein gemeinsames Ziel ausrichten." data-en="Managing expectations, balancing interests, aligning all stakeholders towards a common goal.">Erwartungen managen, Interessen ausbalancieren, alle Beteiligten auf ein gemeinsames Ziel ausrichten.</p>
                 </div>
                 <div class="kompetenz-card">
                     <div class="kompetenz-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182" /></svg>
                     </div>
                     <h3>Change Management</h3>
-                    <p>Veränderung ist kein Nebeneffekt, sondern Kernkompetenz. Menschen mitnehmen, Widerstände adressieren.</p>
+                    <p data-de="Veränderung ist kein Nebeneffekt, sondern Kernkompetenz. Menschen mitnehmen, Widerstände adressieren." data-en="Change is not a side effect but a core competency. Bringing people along, addressing resistance.">Veränderung ist kein Nebeneffekt, sondern Kernkompetenz. Menschen mitnehmen, Widerstände adressieren.</p>
                 </div>
             </div>
         </div>
@@ -867,26 +867,26 @@
     <!-- METHODIK -->
     <section class="methodik" id="methodik">
         <div class="section-inner">
-            <span class="section-label">Methodik</span>
-            <h2 class="section-title">Wie ich arbeite</h2>
-            <p class="section-subtitle">
+            <span class="section-label" data-de="Methodik" data-en="Methodology">Methodik</span>
+            <h2 class="section-title" data-de="Wie ich arbeite" data-en="How I work">Wie ich arbeite</h2>
+            <p class="section-subtitle" data-de="Strukturiert, ergebnisorientiert und immer mit dem Menschen im Mittelpunkt." data-en="Structured, results-oriented and always with people at the centre.">
                 Strukturiert, ergebnisorientiert und immer mit dem Menschen im Mittelpunkt.
             </p>
             <div class="methodik-steps">
                 <div class="methodik-step">
                     <div class="step-number">01</div>
-                    <h3>Verstehen</h3>
-                    <p>Jedes Projekt beginnt mit Zuhören. Ich erfasse den Kontext, identifiziere Stakeholder und definiere gemeinsam klare Ziele und Erfolgskriterien — bevor die erste Zeile Code geschrieben wird.</p>
+                    <h3 data-de="Verstehen" data-en="Understand">Verstehen</h3>
+                    <p data-de="Jedes Projekt beginnt mit Zuhören. Ich erfasse den Kontext, identifiziere Stakeholder und definiere gemeinsam klare Ziele und Erfolgskriterien — bevor die erste Zeile Code geschrieben wird." data-en="Every project begins with listening. I capture the context, identify stakeholders and jointly define clear goals and success criteria — before the first line of code is written.">Jedes Projekt beginnt mit Zuhören. Ich erfasse den Kontext, identifiziere Stakeholder und definiere gemeinsam klare Ziele und Erfolgskriterien — bevor die erste Zeile Code geschrieben wird.</p>
                 </div>
                 <div class="methodik-step">
                     <div class="step-number">02</div>
-                    <h3>Strukturieren</h3>
-                    <p>Komplexität wird handhabbar durch die richtige Struktur. Ich schaffe klare Verantwortlichkeiten, transparente Prozesse und passende Frameworks — ob Wasserfall, agil oder hybrid.</p>
+                    <h3 data-de="Strukturieren" data-en="Structure">Strukturieren</h3>
+                    <p data-de="Komplexität wird handhabbar durch die richtige Struktur. Ich schaffe klare Verantwortlichkeiten, transparente Prozesse und passende Frameworks — ob Wasserfall, agil oder hybrid." data-en="Complexity becomes manageable through the right structure. I create clear responsibilities, transparent processes and appropriate frameworks — whether waterfall, agile or hybrid.">Komplexität wird handhabbar durch die richtige Struktur. Ich schaffe klare Verantwortlichkeiten, transparente Prozesse und passende Frameworks — ob Wasserfall, agil oder hybrid.</p>
                 </div>
                 <div class="methodik-step">
                     <div class="step-number">03</div>
-                    <h3>Liefern</h3>
-                    <p>Ergebnisse zählen. Durch iteratives Vorgehen, konsequentes Risikomanagement und enge Abstimmung stelle ich sicher, dass Projekte termingerecht und in Qualität abgeschlossen werden.</p>
+                    <h3 data-de="Liefern" data-en="Deliver">Liefern</h3>
+                    <p data-de="Ergebnisse zählen. Durch iteratives Vorgehen, konsequentes Risikomanagement und enge Abstimmung stelle ich sicher, dass Projekte termingerecht und in Qualität abgeschlossen werden." data-en="Results matter. Through iterative approach, consistent risk management and close coordination I ensure that projects are completed on time and to quality.">Ergebnisse zählen. Durch iteratives Vorgehen, konsequentes Risikomanagement und enge Abstimmung stelle ich sicher, dass Projekte termingerecht und in Qualität abgeschlossen werden.</p>
                 </div>
             </div>
         </div>
@@ -895,18 +895,18 @@
     <!-- TESTIMONIAL -->
     <section style="background: var(--navy); padding: 5rem 2rem; text-align: center;">
         <div style="max-width: 700px; margin: 0 auto;">
-            <p style="font-family: 'DM Serif Display', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--light); font-style: italic; line-height: 1.5;">&bdquo;Manchmal braucht man Breier.&ldquo;</p>
+            <p style="font-family: 'DM Serif Display', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--light); font-style: italic; line-height: 1.5;" data-de="„Manchmal braucht man Breier."" data-en="&quot;Sometimes you need Breier.&quot;">&bdquo;Manchmal braucht man Breier.&ldquo;</p>
             <div style="width: 40px; height: 2px; background: var(--teal); margin: 1.5rem auto;"></div>
-            <p style="font-size: 0.85rem; color: var(--grey); letter-spacing: 0.1em;">— Zufriedener Kunde</p>
+            <p style="font-size: 0.85rem; color: var(--grey); letter-spacing: 0.1em;" data-de="— Zufriedener Kunde" data-en="— Satisfied client">— Zufriedener Kunde</p>
         </div>
     </section>
 
     <!-- KONTAKT -->
     <section class="kontakt" id="kontakt">
         <div class="section-inner">
-            <span class="section-label">Kontakt</span>
-            <h2 class="section-title">Lassen Sie uns sprechen</h2>
-            <p class="kontakt-text">
+            <span class="section-label" data-de="Kontakt" data-en="Contact">Kontakt</span>
+            <h2 class="section-title" data-de="Lassen Sie uns sprechen" data-en="Let's talk">Lassen Sie uns sprechen</h2>
+            <p class="kontakt-text" data-de="Sie planen ein IT-Projekt oder suchen Unterstützung bei der digitalen Transformation?&lt;br&gt;Ich freue mich auf den Austausch." data-en="You're planning an IT project or looking for support with digital transformation?&lt;br&gt;I look forward to the exchange.">
                 Sie planen ein IT-Projekt oder suchen Unterstützung bei der digitalen Transformation?<br>
                 Ich freue mich auf den Austausch.
             </p>
@@ -917,11 +917,11 @@
             <div class="kontakt-meta">
                 <div class="kontakt-meta-item">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg>
-                    Deutschland
+                    <span data-de="Deutschland" data-en="Germany">Deutschland</span>
                 </div>
                 <div class="kontakt-meta-item">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
-                    IT Projektmanagement
+                    <span data-de="IT Projektmanagement" data-en="IT Project Management">IT Projektmanagement</span>
                 </div>
             </div>
         </div>
@@ -930,7 +930,11 @@
     <!-- FOOTER -->
     <footer>
         <div class="footer-brand">Matthias Breier</div>
-        <p>IT Projektmanagement</p>
+        <p data-de="IT Projektmanagement" data-en="IT Project Management">IT Projektmanagement</p>
+        <div style="text-align:center;margin-top:16px;">
+          <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.3);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+          <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:rgba(255,255,255,0.3);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+        </div>
     </footer>
 
     <script>
@@ -948,5 +952,6 @@
         }, 3000);
     </script>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/omakise.de/index.html

@@ -432,30 +432,42 @@
   <nav>
     <div class="inner">
       <div class="logo">Oma<span class="ki">KI</span>se</div>
-      <a href="#kontakt">Platz nehmen</a>
+      <a href="#kontakt" data-de="Platz nehmen" data-en="Reserve a seat">Platz nehmen</a>
     </div>
   </nav>
 
   <section class="hero">
     <div class="hero-kanji">お任せ</div>
     <h1>Oma<span class="ki">KI</span>se</h1>
-    <p class="hero-sub">
+    <p class="hero-sub" data-de="&lt;em&gt;Omakase&lt;/em&gt; — ich überlasse es dem Chef.&lt;br&gt;
+      Kuratierte KI-Beratung. Kein Menü. Kein Rätselraten.&lt;br&gt;
+      Du bekommst, was am besten passt." data-en="&lt;em&gt;Omakase&lt;/em&gt; — I leave it to the chef.&lt;br&gt;
+      Curated AI consulting. No menu. No guessing.&lt;br&gt;
+      You get what fits best.">
       <em>Omakase</em> — ich überlasse es dem Chef.<br>
       Kuratierte KI-Beratung. Kein Menü. Kein Rätselraten.<br>
       Du bekommst, was am besten passt.
     </p>
-    <p class="hero-meaning">おまかせ + KI — Vertrauen trifft Intelligenz</p>
+    <p class="hero-meaning" data-de="おまかせ + KI — Vertrauen trifft Intelligenz" data-en="おまかせ + AI — Trust meets intelligence">おまかせ + KI — Vertrauen trifft Intelligenz</p>
     <div class="ichi"></div>
     <br>
     <div class="cta-group">
-      <a href="#kontakt" class="btn btn-primary">Platz nehmen</a>
-      <a href="#menu" class="btn btn-ghost">Das Menü</a>
+      <a href="#kontakt" class="btn btn-primary" data-de="Platz nehmen" data-en="Reserve a seat">Platz nehmen</a>
+      <a href="#menu" class="btn btn-ghost" data-de="Das Menü" data-en="The menu">Das Menü</a>
     </div>
   </section>
 
   <div class="philosophy">
     <div class="container">
-      <p class="philosophy-text">
+      <p class="philosophy-text" data-de="Beim Omakase wählt der &lt;strong&gt;Meister&lt;/strong&gt;.&lt;br&gt;
+        Nicht aus Arroganz — aus &lt;strong&gt;Erfahrung&lt;/strong&gt;.&lt;br&gt;
+        Er kennt die &lt;strong&gt;Zutaten&lt;/strong&gt;, den &lt;strong&gt;Moment&lt;/strong&gt;,&lt;br&gt;
+        und was &lt;em&gt;genau jetzt&lt;/em&gt; am besten schmeckt.&lt;br&gt;&lt;br&gt;
+        So arbeiten wir mit &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;." data-en="In omakase, the &lt;strong&gt;master&lt;/strong&gt; chooses.&lt;br&gt;
+        Not out of arrogance — out of &lt;strong&gt;experience&lt;/strong&gt;.&lt;br&gt;
+        He knows the &lt;strong&gt;ingredients&lt;/strong&gt;, the &lt;strong&gt;moment&lt;/strong&gt;,&lt;br&gt;
+        and what tastes best &lt;em&gt;right now&lt;/em&gt;.&lt;br&gt;&lt;br&gt;
+        That's how we work with &lt;span class=&quot;ki&quot;&gt;AI&lt;/span&gt;.">
         Beim Omakase wählt der <strong>Meister</strong>.<br>
         Nicht aus Arroganz — aus <strong>Erfahrung</strong>.<br>
         Er kennt die <strong>Zutaten</strong>, den <strong>Moment</strong>,<br>
@@ -467,9 +479,13 @@
 
   <section id="menu">
     <div class="container">
-      <div class="section-jp">献立 — MENÜFOLGE</div>
-      <h2>Das OmaKIse-Menü</h2>
-      <div class="section-desc">
+      <div class="section-jp" data-de="献立 — MENÜFOLGE" data-en="献立 — COURSE SEQUENCE">献立 — MENÜFOLGE</div>
+      <h2 data-de="Das OmaKIse-Menü" data-en="The OmaKIse Menu">Das OmaKIse-Menü</h2>
+      <div class="section-desc" data-de="Sieben Gänge. Jeder aufeinander abgestimmt.
+        Vom ersten Kennenlernen bis zur laufenden Lösung —
+        kuratiert, nicht von der Karte bestellt." data-en="Seven courses. Each one attuned to the next.
+        From the first meeting to the running solution —
+        curated, not ordered from a menu.">
         Sieben Gänge. Jeder aufeinander abgestimmt.
         Vom ersten Kennenlernen bis zur laufenden Lösung —
         kuratiert, nicht von der Karte bestellt.
@@ -479,63 +495,63 @@
         <div class="course">
           <div class="course-number">一</div>
           <div class="course-body">
-            <h3>Sakizuke — Der erste Eindruck</h3>
+            <h3 data-de="Sakizuke — Der erste Eindruck" data-en="Sakizuke — The first impression">Sakizuke — Der erste Eindruck</h3>
             <div class="course-jp">先付</div>
-            <p>Ein kurzes Kennenlernen. Wir hören zu, stellen die richtigen Fragen und verstehen, was Sie wirklich brauchen — nicht was Sie bestellen würden.</p>
+            <p data-de="Ein kurzes Kennenlernen. Wir hören zu, stellen die richtigen Fragen und verstehen, was Sie wirklich brauchen — nicht was Sie bestellen würden." data-en="A brief introduction. We listen, ask the right questions and understand what you really need — not what you would order.">Ein kurzes Kennenlernen. Wir hören zu, stellen die richtigen Fragen und verstehen, was Sie wirklich brauchen — nicht was Sie bestellen würden.</p>
           </div>
         </div>
 
         <div class="course">
           <div class="course-number">二</div>
           <div class="course-body">
-            <h3>Hassun — Die Zusammenstellung</h3>
+            <h3 data-de="Hassun — Die Zusammenstellung" data-en="Hassun — The composition">Hassun — Die Zusammenstellung</h3>
             <div class="course-jp">八寸</div>
-            <p>Analyse Ihrer Daten, Prozesse und Ziele. Wir kuratieren die perfekte Kombination von KI-Technologien für Ihren spezifischen Fall.</p>
+            <p data-de="Analyse Ihrer Daten, Prozesse und Ziele. Wir kuratieren die perfekte Kombination von KI-Technologien für Ihren spezifischen Fall." data-en="Analysis of your data, processes and goals. We curate the perfect combination of AI technologies for your specific case.">Analyse Ihrer Daten, Prozesse und Ziele. Wir kuratieren die perfekte Kombination von KI-Technologien für Ihren spezifischen Fall.</p>
           </div>
         </div>
 
         <div class="course">
           <div class="course-number">三</div>
           <div class="course-body">
-            <h3>Mukōzuke — Das Rohe</h3>
+            <h3 data-de="Mukōzuke — Das Rohe" data-en="Mukōzuke — The raw">Mukōzuke — Das Rohe</h3>
             <div class="course-jp">向付</div>
-            <p>Ehrliche Bestandsaufnahme. Ungeschönt zeigen wir, wo KI Wert schafft — und wo nicht. Keine Garnierung, keine Beschönigung.</p>
+            <p data-de="Ehrliche Bestandsaufnahme. Ungeschönt zeigen wir, wo KI Wert schafft — und wo nicht. Keine Garnierung, keine Beschönigung." data-en="Honest assessment. We show plainly where AI creates value — and where it doesn't. No garnish, no embellishment.">Ehrliche Bestandsaufnahme. Ungeschönt zeigen wir, wo KI Wert schafft — und wo nicht. Keine Garnierung, keine Beschönigung.</p>
           </div>
         </div>
 
         <div class="course">
           <div class="course-number">四</div>
           <div class="course-body">
-            <h3>Yakimono — Die Zubereitung</h3>
+            <h3 data-de="Yakimono — Die Zubereitung" data-en="Yakimono — The preparation">Yakimono — Die Zubereitung</h3>
             <div class="course-jp">焼物</div>
-            <p>Prototyp in Tagen. Wir bauen die erste KI-Lösung — getestet mit echten Daten, echten Nutzern. Funktional, nicht dekorativ.</p>
+            <p data-de="Prototyp in Tagen. Wir bauen die erste KI-Lösung — getestet mit echten Daten, echten Nutzern. Funktional, nicht dekorativ." data-en="Prototype in days. We build the first AI solution — tested with real data, real users. Functional, not decorative.">Prototyp in Tagen. Wir bauen die erste KI-Lösung — getestet mit echten Daten, echten Nutzern. Funktional, nicht dekorativ.</p>
           </div>
         </div>
 
         <div class="course">
           <div class="course-number">五</div>
           <div class="course-body">
-            <h3>Nimono — Das Einkochen</h3>
+            <h3 data-de="Nimono — Das Einkochen" data-en="Nimono — The simmering">Nimono — Das Einkochen</h3>
             <div class="course-jp">煮物</div>
-            <p>Integration in bestehende Systeme. Langsam, sorgfältig, mit Tiefe. Die Lösung zieht ein und entfaltet ihren vollen Geschmack.</p>
+            <p data-de="Integration in bestehende Systeme. Langsam, sorgfältig, mit Tiefe. Die Lösung zieht ein und entfaltet ihren vollen Geschmack." data-en="Integration into existing systems. Slowly, carefully, with depth. The solution settles in and develops its full flavour.">Integration in bestehende Systeme. Langsam, sorgfältig, mit Tiefe. Die Lösung zieht ein und entfaltet ihren vollen Geschmack.</p>
           </div>
         </div>
 
         <div class="course">
           <div class="course-number">六</div>
           <div class="course-body">
-            <h3>Shokuji — Die Sättigung</h3>
+            <h3 data-de="Shokuji — Die Sättigung" data-en="Shokuji — The satisfaction">Shokuji — Die Sättigung</h3>
             <div class="course-jp">食事</div>
-            <p>Skalierung und Verfeinerung. Das System läuft, das Team versteht es, die Ergebnisse sprechen für sich.</p>
+            <p data-de="Skalierung und Verfeinerung. Das System läuft, das Team versteht es, die Ergebnisse sprechen für sich." data-en="Scaling and refinement. The system runs, the team understands it, the results speak for themselves.">Skalierung und Verfeinerung. Das System läuft, das Team versteht es, die Ergebnisse sprechen für sich.</p>
           </div>
         </div>
 
         <div class="course">
           <div class="course-number">七</div>
           <div class="course-body">
-            <h3>Mizumono — Der süße Abschluss</h3>
+            <h3 data-de="Mizumono — Der süße Abschluss" data-en="Mizumono — The sweet finale">Mizumono — Der süße Abschluss</h3>
             <div class="course-jp">水物</div>
-            <p>Übergabe und Autonomie. Ihr Team kann selbst. Wir bleiben als Sparring-Partner — aber der Meister sind jetzt Sie.</p>
+            <p data-de="Übergabe und Autonomie. Ihr Team kann selbst. Wir bleiben als Sparring-Partner — aber der Meister sind jetzt Sie." data-en="Handover and autonomy. Your team can do it themselves. We remain as sparring partners — but now you are the master.">Übergabe und Autonomie. Ihr Team kann selbst. Wir bleiben als Sparring-Partner — aber der Meister sind jetzt Sie.</p>
           </div>
         </div>
       </div>
@@ -544,27 +560,27 @@
 
   <section class="principles-section">
     <div class="container">
-      <div class="section-jp">哲学 — PHILOSOPHIE</div>
-      <h2>Die Prinzipien</h2>
-      <div class="section-desc">
+      <div class="section-jp" data-de="哲学 — PHILOSOPHIE" data-en="哲学 — PHILOSOPHY">哲学 — PHILOSOPHIE</div>
+      <h2 data-de="Die Prinzipien" data-en="The principles">Die Prinzipien</h2>
+      <div class="section-desc" data-de="Drei japanische Konzepte leiten unsere Arbeit." data-en="Three Japanese concepts guide our work.">
         Drei japanische Konzepte leiten unsere Arbeit.
       </div>
 
       <div class="principles-grid">
         <div class="principle">
           <div class="principle-kanji">信</div>
-          <h3>Shin — Vertrauen</h3>
-          <p>Omakase beginnt mit Vertrauen. Sie vertrauen uns die Auswahl an — wir liefern das Beste, was die Saison hergibt.</p>
+          <h3 data-de="Shin — Vertrauen" data-en="Shin — Trust">Shin — Vertrauen</h3>
+          <p data-de="Omakase beginnt mit Vertrauen. Sie vertrauen uns die Auswahl an — wir liefern das Beste, was die Saison hergibt." data-en="Omakase begins with trust. You entrust the selection to us — we deliver the best the season has to offer.">Omakase beginnt mit Vertrauen. Sie vertrauen uns die Auswahl an — wir liefern das Beste, was die Saison hergibt.</p>
         </div>
         <div class="principle">
           <div class="principle-kanji">旬</div>
-          <h3>Shun — Die richtige Zeit</h3>
-          <p>Nicht jede KI-Technologie ist heute reif. Wir wissen, was jetzt Saison hat — und was besser noch reifen sollte.</p>
+          <h3 data-de="Shun — Die richtige Zeit" data-en="Shun — The right time">Shun — Die richtige Zeit</h3>
+          <p data-de="Nicht jede KI-Technologie ist heute reif. Wir wissen, was jetzt Saison hat — und was besser noch reifen sollte." data-en="Not every AI technology is mature today. We know what's in season now — and what should ripen a little longer.">Nicht jede KI-Technologie ist heute reif. Wir wissen, was jetzt Saison hat — und was besser noch reifen sollte.</p>
         </div>
         <div class="principle">
           <div class="principle-kanji">技</div>
-          <h3>Waza — Handwerk</h3>
-          <p>Kein Schnickschnack, kein Overengineering. Präzise Schnitte, jahrelange Übung, respektvoller Umgang mit dem Material.</p>
+          <h3 data-de="Waza — Handwerk" data-en="Waza — Craft">Waza — Handwerk</h3>
+          <p data-de="Kein Schnickschnack, kein Overengineering. Präzise Schnitte, jahrelange Übung, respektvoller Umgang mit dem Material." data-en="No frills, no overengineering. Precise cuts, years of practice, respectful handling of the material.">Kein Schnickschnack, kein Overengineering. Präzise Schnitte, jahrelange Übung, respektvoller Umgang mit dem Material.</p>
         </div>
       </div>
     </div>
@@ -572,28 +588,28 @@
 
   <div class="seasonal">
     <div class="container">
-      <div class="section-jp">季節 — SAISON</div>
-      <h2>Was gerade Saison hat</h2>
+      <div class="section-jp" data-de="季節 — SAISON" data-en="季節 — SEASON">季節 — SAISON</div>
+      <h2 data-de="Was gerade Saison hat" data-en="What's in season right now">Was gerade Saison hat</h2>
       <div class="seasonal-items">
         <div class="seasonal-item">
           <div class="seasonal-emoji">🤖</div>
-          <div class="seasonal-name">LLM-Integration</div>
-          <div class="seasonal-sub">Hochsaison</div>
+          <div class="seasonal-name" data-de="LLM-Integration" data-en="LLM Integration">LLM-Integration</div>
+          <div class="seasonal-sub" data-de="Hochsaison" data-en="Peak season">Hochsaison</div>
         </div>
         <div class="seasonal-item">
           <div class="seasonal-emoji">📊</div>
-          <div class="seasonal-name">RAG-Systeme</div>
-          <div class="seasonal-sub">Erntezeit</div>
+          <div class="seasonal-name" data-de="RAG-Systeme" data-en="RAG Systems">RAG-Systeme</div>
+          <div class="seasonal-sub" data-de="Erntezeit" data-en="Harvest time">Erntezeit</div>
         </div>
         <div class="seasonal-item">
           <div class="seasonal-emoji">🔍</div>
-          <div class="seasonal-name">KI-Agenten</div>
-          <div class="seasonal-sub">Frische Ernte</div>
+          <div class="seasonal-name" data-de="KI-Agenten" data-en="AI Agents">KI-Agenten</div>
+          <div class="seasonal-sub" data-de="Frische Ernte" data-en="Fresh harvest">Frische Ernte</div>
         </div>
         <div class="seasonal-item">
           <div class="seasonal-emoji">🎯</div>
-          <div class="seasonal-name">Prozessautomation</div>
-          <div class="seasonal-sub">Ganzjährig</div>
+          <div class="seasonal-name" data-de="Prozessautomation" data-en="Process automation">Prozessautomation</div>
+          <div class="seasonal-sub" data-de="Ganzjährig" data-en="Year-round">Ganzjährig</div>
         </div>
       </div>
     </div>
@@ -601,13 +617,15 @@
 
   <section id="kontakt" class="cta-section">
     <div class="container">
-      <div class="section-jp">予約 — RESERVIERUNG</div>
-      <h2>Platz nehmen</h2>
-      <div class="section-desc" style="margin-left:auto; margin-right:auto;">
+      <div class="section-jp" data-de="予約 — RESERVIERUNG" data-en="予約 — RESERVATION">予約 — RESERVIERUNG</div>
+      <h2 data-de="Platz nehmen" data-en="Reserve a seat">Platz nehmen</h2>
+      <div class="section-desc" style="margin-left:auto; margin-right:auto;" data-de="Die besten Plätze sind am Tresen. Direkt beim Chef.
+        Schreiben Sie uns — wir bereiten Ihren ersten Gang vor." data-en="The best seats are at the counter. Right next to the chef.
+        Write to us — we'll prepare your first course.">
         Die besten Plätze sind am Tresen. Direkt beim Chef.
         Schreiben Sie uns — wir bereiten Ihren ersten Gang vor.
       </div>
-      <a href="mailto:omakise@msbls.de?subject=OmaKIse%20—%20Reservierung" class="btn btn-primary">
+      <a href="mailto:omakise@msbls.de?subject=OmaKIse%20—%20Reservierung" class="btn btn-primary" data-de="omakise@msbls.de" data-en="omakise@msbls.de">
         omakise@msbls.de
       </a>
     </div>
@@ -616,8 +634,10 @@
   <footer>
     <div class="container">
       <p>Oma<span style="color:var(--aka);">KI</span>se.de — ein Projekt von <a href="https://msbls.de">msbls.de</a></p>
+      <button data-i18n-toggle style="margin-top:12px;background:none;border:1px solid var(--ink-ghost);color:var(--ink-faint);padding:5px 12px;border-radius:4px;font-size:0.75rem;cursor:pointer;font-family:inherit;letter-spacing:0.06em;">EN</button>
     </div>
   </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/orakil.de/index.html

@@ -306,6 +306,19 @@
       .question-field { padding: 16px 20px; font-size: 0.9rem; }
       .ornament-top, .ornament-bottom { font-size: 0.5rem; letter-spacing: 0.4em; }
     }
+
+    /* i18n toggle placement at bottom */
+    .footer-toggle {
+      position: fixed;
+      bottom: 48px;
+      right: 70px;
+      z-index: 10;
+      text-align: center;
+    }
+
+    @media (max-width: 640px) {
+      .footer-toggle { right: 16px; bottom: 36px; }
+    }
   </style>
 </head>
 <body>
@@ -319,14 +332,14 @@
 
   <section class="oracle">
     <h1 class="oracle-title">OraKIl</h1>
-    <p class="oracle-subtitle">Das Orakel wei&szlig;. Frag.</p>
+    <p class="oracle-subtitle" data-de="Das Orakel weiß. Frag." data-en="The oracle knows. Ask.">Das Orakel wei&szlig;. Frag.</p>
 
     <div class="question-container">
-      <input type="text" class="question-field" placeholder="Stelle deine Frage..." autocomplete="off">
+      <input type="text" class="question-field" placeholder="Stelle deine Frage..." autocomplete="off" data-de-placeholder="Stelle deine Frage..." data-en-placeholder="Ask your question...">
       <div class="question-ornament">&#x2014; ORACVLVM &#x2014;</div>
     </div>
 
-    <p class="hint">Die Antwort war immer in dir. Die KI hat sie dir nur gezeigt.</p>
+    <p class="hint" data-de="Die Antwort war immer in dir. Die KI hat sie dir nur gezeigt." data-en="The answer was always within you. The AI just showed it to you.">Die Antwort war immer in dir. Die KI hat sie dir nur gezeigt.</p>
 
     <div class="answer-container">
       <p class="answer-text"></p>
@@ -335,6 +348,11 @@
 
   <div class="ornament-bottom">&#x2726; &#x2726; &#x2726;</div>
 
+  <div class="footer-toggle">
+    <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+    <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+  </div>
+
   <script>
     (function() {
       var hint = document.querySelector('.hint');
@@ -424,5 +442,6 @@
     })();
   </script>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/osterai.de/index.html

@@ -216,17 +216,17 @@
     <div class="eggs">🥚 🐣 🥚</div>
 
     <h1>oster<span class="ai">AI</span></h1>
-    <p class="subtitle">Frohe Ostern — mit einer Prise KI.</p>
+    <p class="subtitle" data-de="Frohe Ostern — mit einer Prise KI." data-en="Happy Easter — with a dash of AI.">Frohe Ostern — mit einer Prise KI.</p>
 
     <div class="rule"></div>
 
     <div class="prose">
-      <p>
+      <p data-de="Ostern ist das Fest der Überraschungen. Versteckte Eier, unerwartete Begegnungen, und die leise Ahnung, dass nach dem Winter &lt;em&gt;immer etwas Neues kommt&lt;/em&gt;." data-en="Easter is the festival of surprises. Hidden eggs, unexpected encounters, and the quiet sense that after winter &lt;em&gt;something new always comes&lt;/em&gt;.">
         Ostern ist das Fest der Überraschungen. Versteckte Eier,
         unerwartete Begegnungen, und die leise Ahnung, dass nach
         dem Winter <em>immer etwas Neues kommt</em>.
       </p>
-      <p>
+      <p data-de="In diesem Jahr haben wir ein paar digitale Ostereier versteckt. Keine Schokolade — aber vielleicht eine Idee, ein Lächeln, oder ein kleiner Moment der Ruhe." data-en="This year we've hidden a few digital Easter eggs. No chocolate — but perhaps an idea, a smile, or a small moment of calm.">
         In diesem Jahr haben wir ein paar digitale Ostereier versteckt.
         Keine Schokolade — aber vielleicht eine Idee, ein Lächeln,
         oder ein kleiner Moment der Ruhe.
@@ -236,23 +236,23 @@
     <div class="egg-grid">
       <div class="egg-card">
         <div class="egg-emoji">🌱</div>
-        <h3>Neuanfang</h3>
-        <p>Jeder Frühling ist ein Proof of Concept.</p>
+        <h3 data-de="Neuanfang" data-en="New Beginning">Neuanfang</h3>
+        <p data-de="Jeder Frühling ist ein Proof of Concept." data-en="Every spring is a proof of concept.">Jeder Frühling ist ein Proof of Concept.</p>
       </div>
       <div class="egg-card">
         <div class="egg-emoji">🐰</div>
-        <h3>Geduld</h3>
-        <p>Manche Eier brauchen Zeit zum Finden.</p>
+        <h3 data-de="Geduld" data-en="Patience">Geduld</h3>
+        <p data-de="Manche Eier brauchen Zeit zum Finden." data-en="Some eggs take time to find.">Manche Eier brauchen Zeit zum Finden.</p>
       </div>
       <div class="egg-card">
         <div class="egg-emoji">✨</div>
-        <h3>Überraschung</h3>
-        <p>Die besten Dinge kommen unerwartet.</p>
+        <h3 data-de="Überraschung" data-en="Surprise">Überraschung</h3>
+        <p data-de="Die besten Dinge kommen unerwartet." data-en="The best things come unexpectedly.">Die besten Dinge kommen unerwartet.</p>
       </div>
     </div>
 
     <div class="highlight">
-      <p>
+      <p data-de="„Die Zukunft gehört denen, die an die Schönheit ihrer Ostereier glauben." — frei nach Eleanor Roosevelt, wahrscheinlich." data-en="&quot;The future belongs to those who believe in the beauty of their Easter eggs.&quot; — loosely after Eleanor Roosevelt, probably.">
         „Die Zukunft gehört denen, die an die Schönheit ihrer
         Ostereier glauben." — frei nach Eleanor Roosevelt,
         wahrscheinlich.
@@ -262,10 +262,15 @@
     <div class="closing">🐣</div>
 
     <footer>
-      <p>oster<span class="ai">AI</span>.de — Frohe Ostern 2026</p>
+      <p data-de="oster&lt;span class=&quot;ai&quot;&gt;AI&lt;/span&gt;.de — Frohe Ostern 2026" data-en="oster&lt;span class=&quot;ai&quot;&gt;AI&lt;/span&gt;.de — Happy Easter 2026">oster<span class="ai">AI</span>.de — Frohe Ostern 2026</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </footer>
 
   </div>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/paragraphenraiter.de/index.html

@@ -577,14 +577,14 @@
         <div class="hero-content">
             <div class="paragraph-symbol">&sect;</div>
             <h1 class="brand-name">Paragraphen<wbr>r<span class="ai-highlight">AI</span>ter</h1>
-            <p class="tagline">Recht. Aber schlauer.</p>
-            <p class="subtitle">
+            <p class="tagline" data-de="Recht. Aber schlauer." data-en="Law. But smarter.">Recht. Aber schlauer.</p>
+            <p class="subtitle" data-de="Wo &lt;strong&gt;juristische Präzision&lt;/strong&gt; auf &lt;strong&gt;künstliche Intelligenz&lt;/strong&gt; trifft. Kein Buzzword-Bingo — echte Werkzeuge für die Rechtspraxis von morgen." data-en="Where &lt;strong&gt;legal precision&lt;/strong&gt; meets &lt;strong&gt;artificial intelligence&lt;/strong&gt;. No buzzword bingo — real tools for the legal practice of tomorrow.">
                 Wo <strong>juristische Pr&auml;zision</strong> auf <strong>k&uuml;nstliche Intelligenz</strong> trifft.
                 Kein Buzzword-Bingo &mdash; echte Werkzeuge f&uuml;r die Rechtspraxis von morgen.
             </p>
         </div>
         <div class="scroll-hint">
-            <span>Weiter</span>
+            <span data-de="Weiter" data-en="More">Weiter</span>
             <div class="chevron"></div>
         </div>
     </section>
@@ -594,7 +594,7 @@
 
     <!-- MANIFESTO -->
     <section class="manifesto">
-        <p class="manifesto-text">
+        <p class="manifesto-text" data-de="Juristen reiten Paragraphen seit Jahrhunderten.&lt;br&gt;Wir reiten sie jetzt &lt;em&gt;schneller, präziser — und mit KI im Sattel.&lt;/em&gt;" data-en="Lawyers have been riding paragraphs for centuries.&lt;br&gt;We ride them now &lt;em&gt;faster, more precisely — and with AI in the saddle.&lt;/em&gt;">
             Juristen reiten Paragraphen seit Jahrhunderten.<br>
             Wir reiten sie jetzt <em>schneller, pr&auml;ziser &mdash; und mit KI im Sattel.</em>
         </p>
@@ -606,39 +606,39 @@
     <!-- FEATURES -->
     <section class="features">
         <div class="section-header">
-            <h2>Was der Ritter im Schilde f&uuml;hrt</h2>
-            <p>KI-gest&uuml;tzte Werkzeuge, die juristische Arbeit transformieren</p>
+            <h2 data-de="Was der Ritter im Schilde führt" data-en="What the knight has up his sleeve">Was der Ritter im Schilde f&uuml;hrt</h2>
+            <p data-de="KI-gestützte Werkzeuge, die juristische Arbeit transformieren" data-en="AI-powered tools that transform legal work">KI-gest&uuml;tzte Werkzeuge, die juristische Arbeit transformieren</p>
         </div>
         <div class="feature-grid">
             <div class="feature-card">
                 <span class="feature-icon">&sect;</span>
-                <h3>Intelligente Recherche</h3>
-                <p>Rechtsprechung, Literatur und Gesetzestexte in Sekunden durchsucht, verkn&uuml;pft und aufbereitet. Nicht googeln &mdash; finden.</p>
+                <h3 data-de="Intelligente Recherche" data-en="Smart Research">Intelligente Recherche</h3>
+                <p data-de="Rechtsprechung, Literatur und Gesetzestexte in Sekunden durchsucht, verknüpft und aufbereitet. Nicht googeln — finden." data-en="Case law, literature and statutes searched, linked and prepared in seconds. Not googling — finding.">Rechtsprechung, Literatur und Gesetzestexte in Sekunden durchsucht, verkn&uuml;pft und aufbereitet. Nicht googeln &mdash; finden.</p>
             </div>
             <div class="feature-card">
                 <span class="feature-icon">&#x2694;</span>
-                <h3>Schriftsatz-Analyse</h3>
-                <p>KI-gest&uuml;tzte Pr&uuml;fung von Argumentationslinien, Widerspruchserkennung und automatische Gegen&uuml;berstellung.</p>
+                <h3 data-de="Schriftsatz-Analyse" data-en="Brief Analysis">Schriftsatz-Analyse</h3>
+                <p data-de="KI-gestützte Prüfung von Argumentationslinien, Widerspruchserkennung und automatische Gegenüberstellung." data-en="AI-powered review of lines of argument, contradiction detection and automatic comparison.">KI-gest&uuml;tzte Pr&uuml;fung von Argumentationslinien, Widerspruchserkennung und automatische Gegen&uuml;berstellung.</p>
             </div>
             <div class="feature-card">
                 <span class="feature-icon">&#x1F6E1;</span>
-                <h3>Vertragsintelligenz</h3>
-                <p>Klauseln verstehen, Risiken erkennen, Konsistenz pr&uuml;fen. Ihr Vertrag, durchleuchtet von Algorithmen mit juristischem Verstand.</p>
+                <h3 data-de="Vertragsintelligenz" data-en="Contract Intelligence">Vertragsintelligenz</h3>
+                <p data-de="Klauseln verstehen, Risiken erkennen, Konsistenz prüfen. Ihr Vertrag, durchleuchtet von Algorithmen mit juristischem Verstand." data-en="Understand clauses, identify risks, check consistency. Your contract, scrutinized by algorithms with legal intelligence.">Klauseln verstehen, Risiken erkennen, Konsistenz pr&uuml;fen. Ihr Vertrag, durchleuchtet von Algorithmen mit juristischem Verstand.</p>
             </div>
             <div class="feature-card">
                 <span class="feature-icon">&#x2696;</span>
-                <h3>Patentrecht &amp; UPC</h3>
-                <p>Spezialisiert auf das Einheitliche Patentgericht. Entscheidungsanalyse, Fristen&uuml;berwachung, strategische Auswertung.</p>
+                <h3 data-de="Patentrecht &amp; UPC" data-en="Patent Law &amp; UPC">Patentrecht &amp; UPC</h3>
+                <p data-de="Spezialisiert auf das Einheitliche Patentgericht. Entscheidungsanalyse, Fristenüberwachung, strategische Auswertung." data-en="Specialized in the Unified Patent Court. Decision analysis, deadline monitoring, strategic evaluation.">Spezialisiert auf das Einheitliche Patentgericht. Entscheidungsanalyse, Fristen&uuml;berwachung, strategische Auswertung.</p>
             </div>
             <div class="feature-card">
                 <span class="feature-icon">&#x26A1;</span>
-                <h3>Workflow-Automatisierung</h3>
-                <p>Wiederkehrende Aufgaben, Fristenkontrolle, Dokumentenmanagement &mdash; automatisiert, aber unter Ihrer Kontrolle.</p>
+                <h3 data-de="Workflow-Automatisierung" data-en="Workflow Automation">Workflow-Automatisierung</h3>
+                <p data-de="Wiederkehrende Aufgaben, Fristenkontrolle, Dokumentenmanagement — automatisiert, aber unter Ihrer Kontrolle." data-en="Recurring tasks, deadline control, document management — automated, but under your control.">Wiederkehrende Aufgaben, Fristenkontrolle, Dokumentenmanagement &mdash; automatisiert, aber unter Ihrer Kontrolle.</p>
             </div>
             <div class="feature-card">
                 <span class="feature-icon">&#x1F9E0;</span>
-                <h3>Wissensmanagement</h3>
-                <p>Mandatswissen, das w&auml;chst und lernt. Nie wieder &bdquo;Das hatten wir doch schon mal&ldquo;.</p>
+                <h3 data-de="Wissensmanagement" data-en="Knowledge Management">Wissensmanagement</h3>
+                <p data-de="Mandatswissen, das wächst und lernt. Nie wieder „Das hatten wir doch schon mal"." data-en="Case knowledge that grows and learns. Never again: &quot;Didn't we have that before?&quot;">Mandatswissen, das w&auml;chst und lernt. Nie wieder &bdquo;Das hatten wir doch schon mal&ldquo;.</p>
             </div>
         </div>
     </section>
@@ -658,17 +658,17 @@
                 </div>
             </div>
             <div class="knight-text">
-                <h2>Der <span>Ritter</span> des Rechts</h2>
-                <p>
+                <h2 data-de="Der &lt;span&gt;Ritter&lt;/span&gt; des Rechts" data-en="The &lt;span&gt;Knight&lt;/span&gt; of Law">Der <span>Ritter</span> des Rechts</h2>
+                <p data-de="Der Paragraphenreiter war schon immer der, den man rief, wenn es auf jedes Wort ankam. Pedantisch? Vielleicht. Aber in der Rechtswelt ist Pedanterie eine Tugend." data-en="The paragraph rider was always the one you called when every word counted. Pedantic? Perhaps. But in the legal world, pedantry is a virtue.">
                     Der Paragraphenreiter war schon immer der, den man rief, wenn es auf jedes Wort ankam.
                     Pedantisch? Vielleicht. Aber in der Rechtswelt ist Pedanterie eine Tugend.
                 </p>
-                <p>
+                <p data-de="Der ParagraphenrAIter behält diese Tugend — und rüstet sie auf. Mit Algorithmen, die in Millisekunden leisten, wofür früher Stunden nötig waren. Der Ritter trägt jetzt Rüstung aus Daten." data-en="The ParagraphenrAIter retains this virtue — and upgrades it. With algorithms that accomplish in milliseconds what used to take hours. The knight now wears armor made of data.">
                     Der Paragraphenr<strong style="color: var(--gold)">AI</strong>ter beh&auml;lt diese Tugend &mdash;
                     und r&uuml;stet sie auf. Mit Algorithmen, die in Millisekunden leisten,
                     wof&uuml;r fr&uuml;her Stunden n&ouml;tig waren. Der Ritter tr&auml;gt jetzt R&uuml;stung aus Daten.
                 </p>
-                <p class="oath">
+                <p class="oath" data-de="„Wir streiten nicht um des Streitens willen — wir streiten, um Recht zu schaffen."" data-en="&quot;We don't argue for argument's sake — we argue to create justice.&quot;">
                     &bdquo;Wir streiten nicht um des Streitens willen &mdash;<br>
                     wir streiten, um Recht zu schaffen.&ldquo;
                 </p>
@@ -679,36 +679,36 @@
     <!-- APPROACH -->
     <section class="approach">
         <div class="section-header">
-            <h2>Unser Ansatz</h2>
-            <p>KI ist das Werkzeug. Der Jurist bleibt der Meister.</p>
+            <h2 data-de="Unser Ansatz" data-en="Our Approach">Unser Ansatz</h2>
+            <p data-de="KI ist das Werkzeug. Der Jurist bleibt der Meister." data-en="AI is the tool. The lawyer remains the master.">KI ist das Werkzeug. Der Jurist bleibt der Meister.</p>
         </div>
         <ul class="approach-list">
             <li>
                 <span class="approach-number">01</span>
                 <div>
-                    <h3>Mensch vor Maschine</h3>
-                    <p>KI ersetzt keine Juristen. Sie befreit sie von dem, was Maschinen besser k&ouml;nnen &mdash; damit Menschen das tun, was nur sie k&ouml;nnen: urteilen, beraten, entscheiden.</p>
+                    <h3 data-de="Mensch vor Maschine" data-en="Human Before Machine">Mensch vor Maschine</h3>
+                    <p data-de="KI ersetzt keine Juristen. Sie befreit sie von dem, was Maschinen besser können — damit Menschen das tun, was nur sie können: urteilen, beraten, entscheiden." data-en="AI doesn't replace lawyers. It frees them from what machines do better — so people can do what only they can: judge, advise, decide.">KI ersetzt keine Juristen. Sie befreit sie von dem, was Maschinen besser k&ouml;nnen &mdash; damit Menschen das tun, was nur sie k&ouml;nnen: urteilen, beraten, entscheiden.</p>
                 </div>
             </li>
             <li>
                 <span class="approach-number">02</span>
                 <div>
-                    <h3>Pr&auml;zision, keine Halluzination</h3>
-                    <p>Jede Quelle nachvollziehbar. Jede Aussage belegbar. Wir bauen Werkzeuge, die Juristen vertrauen k&ouml;nnen &mdash; nicht solche, die man &uuml;berpr&uuml;fen muss.</p>
+                    <h3 data-de="Präzision, keine Halluzination" data-en="Precision, Not Hallucination">Pr&auml;zision, keine Halluzination</h3>
+                    <p data-de="Jede Quelle nachvollziehbar. Jede Aussage belegbar. Wir bauen Werkzeuge, die Juristen vertrauen können — nicht solche, die man überprüfen muss." data-en="Every source traceable. Every statement verifiable. We build tools that lawyers can trust — not ones that need to be double-checked.">Jede Quelle nachvollziehbar. Jede Aussage belegbar. Wir bauen Werkzeuge, die Juristen vertrauen k&ouml;nnen &mdash; nicht solche, die man &uuml;berpr&uuml;fen muss.</p>
                 </div>
             </li>
             <li>
                 <span class="approach-number">03</span>
                 <div>
-                    <h3>Datenschutz als Grundrecht</h3>
-                    <p>Mandantendaten geh&ouml;ren Mandanten. Punkt. Keine Cloud-Experimente mit sensiblen Akten. Souver&auml;ne Infrastruktur, europ&auml;ische Standards.</p>
+                    <h3 data-de="Datenschutz als Grundrecht" data-en="Data Protection as a Fundamental Right">Datenschutz als Grundrecht</h3>
+                    <p data-de="Mandantendaten gehören Mandanten. Punkt. Keine Cloud-Experimente mit sensiblen Akten. Souveräne Infrastruktur, europäische Standards." data-en="Client data belongs to clients. Full stop. No cloud experiments with sensitive files. Sovereign infrastructure, European standards.">Mandantendaten geh&ouml;ren Mandanten. Punkt. Keine Cloud-Experimente mit sensiblen Akten. Souver&auml;ne Infrastruktur, europ&auml;ische Standards.</p>
                 </div>
             </li>
             <li>
                 <span class="approach-number">04</span>
                 <div>
-                    <h3>Gebaut von Juristen, f&uuml;r Juristen</h3>
-                    <p>Kein Silicon-Valley-Produkt, das Jura &bdquo;auch kann&ldquo;. Sondern Werkzeuge von jemandem, der wei&szlig;, wie ein Schriftsatz um 23 Uhr aussieht.</p>
+                    <h3 data-de="Gebaut von Juristen, für Juristen" data-en="Built by Lawyers, for Lawyers">Gebaut von Juristen, f&uuml;r Juristen</h3>
+                    <p data-de="Kein Silicon-Valley-Produkt, das Jura „auch kann". Sondern Werkzeuge von jemandem, der weiß, wie ein Schriftsatz um 23 Uhr aussieht." data-en="Not a Silicon Valley product that &quot;can do law too&quot;. But tools from someone who knows what a brief looks like at 11pm.">Kein Silicon-Valley-Produkt, das Jura &bdquo;auch kann&ldquo;. Sondern Werkzeuge von jemandem, der wei&szlig;, wie ein Schriftsatz um 23 Uhr aussieht.</p>
                 </div>
             </li>
         </ul>
@@ -716,17 +716,22 @@
 
     <!-- CTA -->
     <section class="cta">
-        <h2>Bereit f&uuml;r den <span>R<span style="font-size: 0.85em;">AI</span>ter</span>?</h2>
-        <p>Kommen Sie ins Gespr&auml;ch. Unverbindlich, aber nicht unverbindend.</p>
-        <a href="mailto:mail@msbls.de" class="cta-button">Kontakt aufnehmen</a>
+        <h2 data-de="Bereit für den &lt;span&gt;RAIter&lt;/span&gt;?" data-en="Ready for the &lt;span&gt;RAIder&lt;/span&gt;?">Bereit f&uuml;r den <span>R<span style="font-size: 0.85em;">AI</span>ter</span>?</h2>
+        <p data-de="Kommen Sie ins Gespräch. Unverbindlich, aber nicht unverbindend." data-en="Let's talk. No strings attached, but not without substance.">Kommen Sie ins Gespr&auml;ch. Unverbindlich, aber nicht unverbindend.</p>
+        <a href="mailto:mail@msbls.de" class="cta-button" data-de="Kontakt aufnehmen" data-en="Get in touch">Kontakt aufnehmen</a>
     </section>
 
     <!-- FOOTER -->
     <footer>
         <p class="footer-brand">Paragraphen<span>rAI</span>ter</p>
-        <p class="footer-credit">Ein Projekt von Matthias Flexsiebels</p>
-        <p class="footer-legal">&copy; 2026 &middot; Recht. Aber schlauer.</p>
+        <p class="footer-credit" data-de="Ein Projekt von Matthias Flexsiebels" data-en="A project by Matthias Flexsiebels">Ein Projekt von Matthias Flexsiebels</p>
+        <p class="footer-legal" data-de="© 2026 · Recht. Aber schlauer." data-en="© 2026 · Law. But smarter.">&copy; 2026 &middot; Recht. Aber schlauer.</p>
+        <div style="text-align:center;margin-top:16px;">
+          <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+          <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+        </div>
     </footer>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/patentonkel.de/index.html

@@ -539,18 +539,18 @@
                 <text x="48" y="172" font-size="6" fill="#2b5ea7" font-weight="bold" text-anchor="middle" opacity="0.3">&sect;</text>
             </svg>
 
-            <span class="badge">KI-Patentberatung</span>
+            <span class="badge" data-de="KI-Patentberatung" data-en="AI Patent Consulting">KI-Patentberatung</span>
             <h1 class="brand"><span class="brand-patent">Patent</span>onkel</h1>
-            <p class="subline">Dein Onkel fürs Patent. Nur klüger.</p>
-            <p class="claim">
+            <p class="subline" data-de="Dein Onkel fürs Patent. Nur klüger." data-en="Your uncle for patents. Just smarter.">Dein Onkel fürs Patent. Nur klüger.</p>
+            <p class="claim" data-de="Jeder hat diesen einen Onkel, der alles weiß. &lt;strong&gt;Patentonkel&lt;/strong&gt; weiß alles über Patente &amp;mdash; und erklärt es so, dass du es auch verstehst." data-en="Everyone has that one uncle who knows everything. &lt;strong&gt;Patentonkel&lt;/strong&gt; knows everything about patents &amp;mdash; and explains it so you understand it too.">
                 Jeder hat diesen einen Onkel, der alles weiß.
                 <strong>Patentonkel</strong> weiß alles über Patente &mdash;
                 und erklärt es so, dass du es auch verstehst.
             </p>
-            <a href="#frag" class="hero-cta">Frag den Onkel</a>
+            <a href="#frag" class="hero-cta" data-de="Frag den Onkel" data-en="Ask the uncle">Frag den Onkel</a>
         </div>
         <div class="scroll-hint">
-            <span>Mehr erfahren</span>
+            <span data-de="Mehr erfahren" data-en="Learn more">Mehr erfahren</span>
             <div class="arrow"></div>
         </div>
     </section>
@@ -558,39 +558,39 @@
     <!-- FEATURES -->
     <section class="section" id="features">
         <div class="section-header">
-            <h2>Was der Onkel drauf hat</h2>
-            <p>Kein Anwalt. Aber verdammt nah dran am Wissen eines guten.</p>
+            <h2 data-de="Was der Onkel drauf hat" data-en="What the uncle knows">Was der Onkel drauf hat</h2>
+            <p data-de="Kein Anwalt. Aber verdammt nah dran am Wissen eines guten." data-en="Not a lawyer. But damn close to the knowledge of a good one.">Kein Anwalt. Aber verdammt nah dran am Wissen eines guten.</p>
         </div>
         <div class="features-grid">
             <div class="feature-card">
                 <div class="feature-icon">&#128270;</div>
-                <h3>Patentrecherche</h3>
-                <p>Stand der Technik finden, bevor es das Patentamt tut. Der Onkel kennt die Datenbanken und weiß, wo man suchen muss.</p>
+                <h3 data-de="Patentrecherche" data-en="Patent Research">Patentrecherche</h3>
+                <p data-de="Stand der Technik finden, bevor es das Patentamt tut. Der Onkel kennt die Datenbanken und weiß, wo man suchen muss." data-en="Find prior art before the patent office does. The uncle knows the databases and where to search.">Stand der Technik finden, bevor es das Patentamt tut. Der Onkel kennt die Datenbanken und weiß, wo man suchen muss.</p>
             </div>
             <div class="feature-card">
                 <div class="feature-icon">&#128209;</div>
-                <h3>Anspruchsanalyse</h3>
-                <p>Patentansprüche lesen ist eine Kunst. Patentonkel zerlegt sie in verständliche Teile und zeigt, worauf es ankommt.</p>
+                <h3 data-de="Anspruchsanalyse" data-en="Claim Analysis">Anspruchsanalyse</h3>
+                <p data-de="Patentansprüche lesen ist eine Kunst. Patentonkel zerlegt sie in verständliche Teile und zeigt, worauf es ankommt." data-en="Reading patent claims is an art. Patentonkel breaks them down into understandable parts and shows what matters.">Patentansprüche lesen ist eine Kunst. Patentonkel zerlegt sie in verständliche Teile und zeigt, worauf es ankommt.</p>
             </div>
             <div class="feature-card">
                 <div class="feature-icon">&#127912;</div>
-                <h3>Stand der Technik</h3>
-                <p>Was gab es schon? Was ist neu? Der Onkel durchforstet Prior Art und ordnet deine Erfindung ein.</p>
+                <h3 data-de="Stand der Technik" data-en="State of the Art">Stand der Technik</h3>
+                <p data-de="Was gab es schon? Was ist neu? Der Onkel durchforstet Prior Art und ordnet deine Erfindung ein." data-en="What already existed? What is new? The uncle searches through prior art and classifies your invention.">Was gab es schon? Was ist neu? Der Onkel durchforstet Prior Art und ordnet deine Erfindung ein.</p>
             </div>
             <div class="feature-card">
                 <div class="feature-icon">&#128197;</div>
-                <h3>Fristenverwaltung</h3>
-                <p>Jahresgebühren, Einspruchsfristen, Prioritäten &mdash; der Onkel vergisst nichts. Du auch nicht mehr.</p>
+                <h3 data-de="Fristenverwaltung" data-en="Deadline Management">Fristenverwaltung</h3>
+                <p data-de="Jahresgebühren, Einspruchsfristen, Prioritäten &mdash; der Onkel vergisst nichts. Du auch nicht mehr." data-en="Annual fees, opposition deadlines, priorities &mdash; the uncle forgets nothing. And neither will you.">Jahresgebühren, Einspruchsfristen, Prioritäten &mdash; der Onkel vergisst nichts. Du auch nicht mehr.</p>
             </div>
             <div class="feature-card">
                 <div class="feature-icon">&#127466;&#127482;</div>
-                <h3>EP/UPC-Expertise</h3>
-                <p>Europäisches Patentrecht und das Einheitliche Patentgericht &mdash; der Onkel kennt sich aus, auch beim neuen System.</p>
+                <h3 data-de="EP/UPC-Expertise" data-en="EP/UPC Expertise">EP/UPC-Expertise</h3>
+                <p data-de="Europäisches Patentrecht und das Einheitliche Patentgericht &mdash; der Onkel kennt sich aus, auch beim neuen System." data-en="European patent law and the Unified Patent Court &mdash; the uncle knows his way around, even with the new system.">Europäisches Patentrecht und das Einheitliche Patentgericht &mdash; der Onkel kennt sich aus, auch beim neuen System.</p>
             </div>
             <div class="feature-card">
                 <div class="feature-icon">&#128172;</div>
-                <h3>Verständlich erklärt</h3>
-                <p>Patentrecht muss nicht kryptisch sein. Der Onkel erklärt alles so, wie man es am Küchentisch erklären würde.</p>
+                <h3 data-de="Verständlich erklärt" data-en="Explained clearly">Verständlich erklärt</h3>
+                <p data-de="Patentrecht muss nicht kryptisch sein. Der Onkel erklärt alles so, wie man es am Küchentisch erklären würde." data-en="Patent law doesn't have to be cryptic. The uncle explains everything the way you'd explain it at the kitchen table.">Patentrecht muss nicht kryptisch sein. Der Onkel erklärt alles so, wie man es am Küchentisch erklären würde.</p>
             </div>
         </div>
     </section>
@@ -599,61 +599,66 @@
     <section class="onkel-says">
         <div class="onkel-says-inner">
             <div class="quote-mark">&bdquo;</div>
-            <p class="quote-text">Mein Onkel Herbert konnte mir nie bei Patentansprüchen helfen. Patentonkel schon.</p>
-            <p class="quote-author">&mdash; <strong>Erfundener Neffe</strong>, zufriedener Tüftler</p>
+            <p class="quote-text" data-de="Mein Onkel Herbert konnte mir nie bei Patentansprüchen helfen. Patentonkel schon." data-en="My uncle Herbert could never help me with patent claims. Patentonkel could.">Mein Onkel Herbert konnte mir nie bei Patentansprüchen helfen. Patentonkel schon.</p>
+            <p class="quote-author" data-de="&amp;mdash; &lt;strong&gt;Erfundener Neffe&lt;/strong&gt;, zufriedener Tüftler" data-en="&amp;mdash; &lt;strong&gt;Fictional Nephew&lt;/strong&gt;, satisfied tinkerer">&mdash; <strong>Erfundener Neffe</strong>, zufriedener Tüftler</p>
         </div>
     </section>
 
     <!-- HOW IT WORKS -->
     <section class="section">
         <div class="section-header">
-            <h2>So funktioniert's</h2>
-            <p>Drei Schritte zum Patentwissen.</p>
+            <h2 data-de="So funktioniert's" data-en="How it works">So funktioniert's</h2>
+            <p data-de="Drei Schritte zum Patentwissen." data-en="Three steps to patent knowledge.">Drei Schritte zum Patentwissen.</p>
         </div>
         <div class="steps">
             <div class="step">
                 <div class="step-num">1</div>
                 <div>
-                    <h3>Frag einfach</h3>
-                    <p>Stell deine Patentfrage &mdash; egal wie grundlegend oder spezifisch. Der Onkel urteilt nicht.</p>
+                    <h3 data-de="Frag einfach" data-en="Just ask">Frag einfach</h3>
+                    <p data-de="Stell deine Patentfrage &mdash; egal wie grundlegend oder spezifisch. Der Onkel urteilt nicht." data-en="Ask your patent question &mdash; no matter how basic or specific. The uncle doesn't judge.">Stell deine Patentfrage &mdash; egal wie grundlegend oder spezifisch. Der Onkel urteilt nicht.</p>
                 </div>
             </div>
             <div class="step">
                 <div class="step-num">2</div>
                 <div>
-                    <h3>Bekomm eine Antwort</h3>
-                    <p>Patentonkel recherchiert, analysiert und erklärt. Mit Quellen, Kontext und ohne Juristendeutsch.</p>
+                    <h3 data-de="Bekomm eine Antwort" data-en="Get an answer">Bekomm eine Antwort</h3>
+                    <p data-de="Patentonkel recherchiert, analysiert und erklärt. Mit Quellen, Kontext und ohne Juristendeutsch." data-en="Patentonkel researches, analyzes and explains. With sources, context and without legal jargon.">Patentonkel recherchiert, analysiert und erklärt. Mit Quellen, Kontext und ohne Juristendeutsch.</p>
                 </div>
             </div>
             <div class="step">
                 <div class="step-num">3</div>
                 <div>
-                    <h3>Versteh dein Patent</h3>
-                    <p>Ob Anmeldestrategie, Anspruchsformulierung oder Einspruchsverfahren &mdash; du weißt, woran du bist.</p>
+                    <h3 data-de="Versteh dein Patent" data-en="Understand your patent">Versteh dein Patent</h3>
+                    <p data-de="Ob Anmeldestrategie, Anspruchsformulierung oder Einspruchsverfahren &mdash; du weißt, woran du bist." data-en="Whether filing strategy, claim drafting or opposition proceedings &mdash; you'll know where you stand.">Ob Anmeldestrategie, Anspruchsformulierung oder Einspruchsverfahren &mdash; du weißt, woran du bist.</p>
                 </div>
             </div>
         </div>
 
         <div class="disclaimer">
-            <p><strong>Hinweis:</strong> Patentonkel gibt keine Rechtsberatung. Wir ersetzen keinen Patentanwalt &mdash; aber wir sorgen dafür, dass du gut vorbereitet zum Termin gehst.</p>
+            <p data-de="&lt;strong&gt;Hinweis:&lt;/strong&gt; Patentonkel gibt keine Rechtsberatung. Wir ersetzen keinen Patentanwalt &amp;mdash; aber wir sorgen dafür, dass du gut vorbereitet zum Termin gehst." data-en="&lt;strong&gt;Note:&lt;/strong&gt; Patentonkel does not provide legal advice. We don't replace a patent attorney &amp;mdash; but we make sure you're well prepared for the appointment."><strong>Hinweis:</strong> Patentonkel gibt keine Rechtsberatung. Wir ersetzen keinen Patentanwalt &mdash; aber wir sorgen dafür, dass du gut vorbereitet zum Termin gehst.</p>
         </div>
     </section>
 
     <!-- CTA -->
     <section class="cta" id="frag">
-        <h2>Bereit? <span>Frag den Onkel.</span></h2>
-        <p>Kein Anmeldeformular. Kein Kleingedrucktes. Einfach fragen.</p>
-        <a href="mailto:patentonkel@msbls.de" class="cta-btn">Frag den Onkel</a>
+        <h2 data-de="Bereit? &lt;span&gt;Frag den Onkel.&lt;/span&gt;" data-en="Ready? &lt;span&gt;Ask the uncle.&lt;/span&gt;">Bereit? <span>Frag den Onkel.</span></h2>
+        <p data-de="Kein Anmeldeformular. Kein Kleingedrucktes. Einfach fragen." data-en="No registration form. No fine print. Just ask.">Kein Anmeldeformular. Kein Kleingedrucktes. Einfach fragen.</p>
+        <a href="mailto:patentonkel@msbls.de" class="cta-btn" data-de="Frag den Onkel" data-en="Ask the uncle">Frag den Onkel</a>
     </section>
 
     <!-- FOOTER -->
     <footer>
         <p class="footer-brand">Patentonkel</p>
-        <p class="footer-tagline">Familiär. Kompetent. KI.</p>
-        <p class="footer-legal">&copy; 2026 &middot; Ein Projekt von Matthias Flexsiebels &middot; <a href="#" onclick="window.__impressum&&window.__impressum();return false;">Impressum</a></p>
+        <p class="footer-tagline" data-de="Familiär. Kompetent. KI." data-en="Familiar. Competent. AI.">Familiär. Kompetent. KI.</p>
+        <p class="footer-legal" data-de="&amp;copy; 2026 &amp;middot; Ein Projekt von Matthias Flexsiebels &amp;middot; &lt;a href=&quot;#&quot; onclick=&quot;window.__impressum&amp;&amp;window.__impressum();return false;&quot;&gt;Impressum&lt;/a&gt;" data-en="&amp;copy; 2026 &amp;middot; A project by Matthias Flexsiebels &amp;middot; &lt;a href=&quot;#&quot; onclick=&quot;window.__impressum&amp;&amp;window.__impressum();return false;&quot;&gt;Impressum&lt;/a&gt;">&copy; 2026 &middot; Ein Projekt von Matthias Flexsiebels &middot; <a href="#" onclick="window.__impressum&&window.__impressum();return false;">Impressum</a></p>
+        <div style="text-align:center;margin-top:16px;">
+          <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+          <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+        </div>
     </footer>
 
     <script src="/shared/impressum.js"></script>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/schulfrai.de/index.html

@@ -53,8 +53,10 @@
     <div class="icon">🎓</div>
     <h1>schul<span class='accent'>frAI</span>.</h1>
     <div class="divider"></div>
-    <p class="subtitle">Lernen ohne Grenzen.</p>
+    <p class="subtitle" data-de="Lernen ohne Grenzen." data-en="Learning without limits.">Lernen ohne Grenzen.</p>
     <p class="footer">schulfrAI.de</p>
+    <p class="footer" style="margin-top:12px;"><button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted);color:var(--text-muted);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button><br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small></p>
   </div>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/slopschild.de/index.html

@@ -303,63 +303,68 @@
       </svg>
     </div>
     <div class="message">
-      <h1>Was du mir geschickt hast,<br>ist <span class="red">KI-Slop</span>.</h1>
-      <p class="subtitle">Jemand hat dir diesen Link geschickt, weil du ungeprüften KI-Output weitergeleitet hast. Das ist nicht hilfreich — das ist Slop.</p>
+      <h1 data-de="Was du mir geschickt hast,<br>ist <span class=&quot;red&quot;>KI-Slop</span>." data-en="What you sent me<br>is <span class=&quot;red&quot;>AI slop</span>.">Was du mir geschickt hast,<br>ist <span class="red">KI-Slop</span>.</h1>
+      <p class="subtitle" data-de="Jemand hat dir diesen Link geschickt, weil du ungeprüften KI-Output weitergeleitet hast. Das ist nicht hilfreich — das ist Slop." data-en="Someone sent you this link because you forwarded unchecked AI output. That's not helpful — that's slop.">Jemand hat dir diesen Link geschickt, weil du ungeprüften KI-Output weitergeleitet hast. Das ist nicht hilfreich — das ist Slop.</p>
     </div>
-    <div class="scroll-hint">Was ist Slop? ↓</div>
+    <div class="scroll-hint" data-de="Was ist Slop? ↓" data-en="What is slop? ↓">Was ist Slop? ↓</div>
   </section>
 
   <div class="content">
     <section class="section">
-      <h2><span class="icon">?</span> Was ist Slop?</h2>
-      <p>Slop ist KI-generierter Inhalt, der ungeprüft weitergeleitet wird. Texte, Bilder, Videos — produziert von ChatGPT, Gemini, Claude oder anderen Modellen, ohne dass jemand geprüft hat, ob der Inhalt stimmt, Sinn ergibt oder irgendwem hilft.</p>
+      <h2><span class="icon">?</span> <span data-de="Was ist Slop?" data-en="What is slop?">Was ist Slop?</span></h2>
+      <p data-de="Slop ist KI-generierter Inhalt, der ungeprüft weitergeleitet wird. Texte, Bilder, Videos — produziert von ChatGPT, Gemini, Claude oder anderen Modellen, ohne dass jemand geprüft hat, ob der Inhalt stimmt, Sinn ergibt oder irgendwem hilft." data-en="Slop is AI-generated content that gets forwarded unchecked. Texts, images, videos — produced by ChatGPT, Gemini, Claude or other models, without anyone checking whether the content is accurate, makes sense, or helps anyone.">Slop ist KI-generierter Inhalt, der ungeprüft weitergeleitet wird. Texte, Bilder, Videos — produziert von ChatGPT, Gemini, Claude oder anderen Modellen, ohne dass jemand geprüft hat, ob der Inhalt stimmt, Sinn ergibt oder irgendwem hilft.</p>
       <div class="slop-quote">
-        <p>Spam war unerwünschte Werbung. Slop ist unerwünschter KI-Müll. Der Unterschied: Slop kommt von Leuten, die es gut meinen.</p>
+        <p data-de="Spam war unerwünschte Werbung. Slop ist unerwünschter KI-Müll. Der Unterschied: Slop kommt von Leuten, die es gut meinen." data-en="Spam was unwanted advertising. Slop is unwanted AI garbage. The difference: slop comes from people who mean well.">Spam war unerwünschte Werbung. Slop ist unerwünschter KI-Müll. Der Unterschied: Slop kommt von Leuten, die es gut meinen.</p>
       </div>
     </section>
 
     <section class="section">
-      <h2><span class="icon">!</span> Warum ist das ein Problem?</h2>
+      <h2><span class="icon">!</span> <span data-de="Warum ist das ein Problem?" data-en="Why is this a problem?">Warum ist das ein Problem?</span></h2>
       <ul>
-        <li>KI halluziniert. Fakten, Zitate, Studien — oft frei erfunden.</li>
-        <li>Du machst dich zum Sprachrohr einer Maschine, ohne es zu merken.</li>
-        <li>Wer Slop weiterleitet, verschwendet die Zeit anderer Menschen.</li>
-        <li>Es entwertet echte Kommunikation und echtes Wissen.</li>
+        <li data-de="KI halluziniert. Fakten, Zitate, Studien — oft frei erfunden." data-en="AI hallucinates. Facts, quotes, studies — often made up.">KI halluziniert. Fakten, Zitate, Studien — oft frei erfunden.</li>
+        <li data-de="Du machst dich zum Sprachrohr einer Maschine, ohne es zu merken." data-en="You become the mouthpiece of a machine without noticing.">Du machst dich zum Sprachrohr einer Maschine, ohne es zu merken.</li>
+        <li data-de="Wer Slop weiterleitet, verschwendet die Zeit anderer Menschen." data-en="Whoever forwards slop wastes other people's time.">Wer Slop weiterleitet, verschwendet die Zeit anderer Menschen.</li>
+        <li data-de="Es entwertet echte Kommunikation und echtes Wissen." data-en="It devalues genuine communication and real knowledge.">Es entwertet echte Kommunikation und echtes Wissen.</li>
       </ul>
     </section>
 
     <section class="section">
-      <h2><span class="icon">→</span> Was du stattdessen tun kannst</h2>
+      <h2><span class="icon">→</span> <span data-de="Was du stattdessen tun kannst" data-en="What you can do instead">Was du stattdessen tun kannst</span></h2>
       <div class="instead-grid">
         <div class="instead-card dont">
-          <div class="label">Nicht</div>
-          <p>ChatGPT fragen und die Antwort 1:1 weiterleiten</p>
+          <div class="label" data-de="Nicht" data-en="Don't">Nicht</div>
+          <p data-de="ChatGPT fragen und die Antwort 1:1 weiterleiten" data-en="Ask ChatGPT and forward the answer verbatim">ChatGPT fragen und die Antwort 1:1 weiterleiten</p>
         </div>
         <div class="instead-card do">
-          <div class="label">Besser</div>
-          <p>Selbst nachdenken, recherchieren, in eigenen Worten schreiben</p>
+          <div class="label" data-de="Besser" data-en="Better">Besser</div>
+          <p data-de="Selbst nachdenken, recherchieren, in eigenen Worten schreiben" data-en="Think for yourself, research, write in your own words">Selbst nachdenken, recherchieren, in eigenen Worten schreiben</p>
         </div>
         <div class="instead-card dont">
-          <div class="label">Nicht</div>
-          <p>KI-generierte Bilder/Videos als echt teilen</p>
+          <div class="label" data-de="Nicht" data-en="Don't">Nicht</div>
+          <p data-de="KI-generierte Bilder/Videos als echt teilen" data-en="Share AI-generated images/videos as real">KI-generierte Bilder/Videos als echt teilen</p>
         </div>
         <div class="instead-card do">
-          <div class="label">Besser</div>
-          <p>Kennzeichnen, was KI-generiert ist — oder es lassen</p>
+          <div class="label" data-de="Besser" data-en="Better">Besser</div>
+          <p data-de="Kennzeichnen, was KI-generiert ist — oder es lassen" data-en="Label what is AI-generated — or don't share it">Kennzeichnen, was KI-generiert ist — oder es lassen</p>
         </div>
       </div>
     </section>
 
     <section class="section">
-      <h2><span class="icon">♻</span> Keine Panik</h2>
-      <p>KI ist ein Werkzeug. Ein gutes sogar. Aber ein Werkzeug, dessen Output man prüft, bearbeitet und versteht — nicht blind weiterleitet. Du würdest auch keinen Wikipedia-Artikel ungelesen als deine Meinung verschicken.</p>
-      <p style="margin-top: 1rem;">Nächstes Mal: Lies es. Prüf es. Mach es zu deinem. Oder lass es.</p>
+      <h2><span class="icon">♻</span> <span data-de="Keine Panik" data-en="No panic">Keine Panik</span></h2>
+      <p data-de="KI ist ein Werkzeug. Ein gutes sogar. Aber ein Werkzeug, dessen Output man prüft, bearbeitet und versteht — nicht blind weiterleitet. Du würdest auch keinen Wikipedia-Artikel ungelesen als deine Meinung verschicken." data-en="AI is a tool. A good one even. But a tool whose output you check, edit and understand — not forward blindly. You wouldn't send a Wikipedia article unread as your own opinion either.">KI ist ein Werkzeug. Ein gutes sogar. Aber ein Werkzeug, dessen Output man prüft, bearbeitet und versteht — nicht blind weiterleitet. Du würdest auch keinen Wikipedia-Artikel ungelesen als deine Meinung verschicken.</p>
+      <p style="margin-top: 1rem;" data-de="Nächstes Mal: Lies es. Prüf es. Mach es zu deinem. Oder lass es." data-en="Next time: Read it. Check it. Make it yours. Or leave it.">Nächstes Mal: Lies es. Prüf es. Mach es zu deinem. Oder lass es.</p>
     </section>
   </div>
 
   <footer>
-    <p>slopschild.de — Zum Weiterleiten an Slop-Verbreiter.</p>
-    <p style="margin-top: 2rem; font-size: 0.7rem; opacity: 0.35; font-style: italic;">*this website has been fully generated by ai and should be considered slop</p>
+    <p data-de="slopschild.de — Zum Weiterleiten an Slop-Verbreiter." data-en="slopschild.de — For forwarding to slop spreaders.">slopschild.de — Zum Weiterleiten an Slop-Verbreiter.</p>
+    <p style="margin-top: 2rem; font-size: 0.7rem; opacity: 0.35; font-style: italic;" data-de="*this website has been fully generated by ai and should be considered slop" data-en="*this website has been fully generated by ai and should be considered slop">*this website has been fully generated by ai and should be considered slop</p>
+    <div style="text-align:center;margin-top:16px;">
+      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+    </div>
   </footer>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/smartin3.de/index.html

@@ -268,7 +268,7 @@
   <nav>
     <div class="container">
       <div class="logo"><span class="s">s</span><span class="martin">MARTIN</span> <span class="three">3</span><span class="d">D</span></div>
-      <a href="#kontakt">Anfrage</a>
+      <a href="#kontakt" data-de="Anfrage" data-en="Request">Anfrage</a>
     </div>
   </nav>
 
@@ -286,17 +286,17 @@
       </div>
 
       <h1><span class="s">s</span><span class="martin">MARTIN</span> <span class="three">3</span>D</h1>
-      <div class="tagline">Smart in 3D</div>
+      <div class="tagline" data-de="Smart in 3D" data-en="Smart in 3D">Smart in 3D</div>
 
-      <p class="hero-desc">
+      <p class="hero-desc" data-de="&lt;strong&gt;3D-Druck&lt;/strong&gt; fuer Ideen, die nicht warten koennen. Vom Prototyp bis zur Kleinserie — praezise, schnell und genau so, wie du es brauchst." data-en="&lt;strong&gt;3D printing&lt;/strong&gt; for ideas that can't wait. From prototype to small series — precise, fast, and exactly as you need it.">
         <strong>3D-Druck</strong> fuer Ideen, die nicht warten koennen.
         Vom Prototyp bis zur Kleinserie — praezise, schnell und genau so,
         wie du es brauchst.
       </p>
 
       <div class="cta-group">
-        <a href="#kontakt" class="btn btn-primary">Projekt anfragen</a>
-        <a href="#services" class="btn btn-ghost">Leistungen</a>
+        <a href="#kontakt" class="btn btn-primary" data-de="Projekt anfragen" data-en="Request project">Projekt anfragen</a>
+        <a href="#services" class="btn btn-ghost" data-de="Leistungen" data-en="Services">Leistungen</a>
       </div>
     </div>
   </section>
@@ -305,9 +305,9 @@
 
   <section id="services">
     <div class="container">
-      <div class="section-label">Leistungen</div>
-      <h2>Was wir drucken.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Leistungen" data-en="Services">Leistungen</div>
+      <h2 data-de="Was wir drucken." data-en="What we print.">Was wir drucken.</h2>
+      <div class="section-desc" data-de="Egal ob Einzelstueck oder Serie — jedes Teil wird individuell fuer deinen Anwendungsfall optimiert." data-en="Whether one-off or series — every part is individually optimized for your use case.">
         Egal ob Einzelstueck oder Serie — jedes Teil wird individuell
         fuer deinen Anwendungsfall optimiert.
       </div>
@@ -315,38 +315,38 @@
       <div class="services-grid">
         <div class="service-card">
           <div class="service-icon">🔩</div>
-          <h3>Prototypen</h3>
-          <p>Von der Idee zum Anfassen. Schnelle Iterationen, funktionale Tests, Design-Validierung.</p>
+          <h3 data-de="Prototypen" data-en="Prototypes">Prototypen</h3>
+          <p data-de="Von der Idee zum Anfassen. Schnelle Iterationen, funktionale Tests, Design-Validierung." data-en="From idea to touchable reality. Fast iterations, functional tests, design validation.">Von der Idee zum Anfassen. Schnelle Iterationen, funktionale Tests, Design-Validierung.</p>
         </div>
 
         <div class="service-card">
           <div class="service-icon">📦</div>
-          <h3>Kleinserien</h3>
-          <p>10 bis 500 Stueck. Ohne Werkzeugkosten, ohne Mindestmengen, ohne Wartezeit.</p>
+          <h3 data-de="Kleinserien" data-en="Small series">Kleinserien</h3>
+          <p data-de="10 bis 500 Stueck. Ohne Werkzeugkosten, ohne Mindestmengen, ohne Wartezeit." data-en="10 to 500 pieces. No tooling costs, no minimum quantities, no waiting time.">10 bis 500 Stueck. Ohne Werkzeugkosten, ohne Mindestmengen, ohne Wartezeit.</p>
         </div>
 
         <div class="service-card">
           <div class="service-icon">⚙️</div>
-          <h3>Funktionsteile</h3>
-          <p>Mechanisch belastbar, massgenau, einsatzbereit. Fuer Maschinen, Geraete, Anlagen.</p>
+          <h3 data-de="Funktionsteile" data-en="Functional parts">Funktionsteile</h3>
+          <p data-de="Mechanisch belastbar, massgenau, einsatzbereit. Fuer Maschinen, Geraete, Anlagen." data-en="Mechanically resilient, dimensionally accurate, ready to use. For machines, devices, systems.">Mechanisch belastbar, massgenau, einsatzbereit. Fuer Maschinen, Geraete, Anlagen.</p>
         </div>
 
         <div class="service-card">
           <div class="service-icon">🎨</div>
-          <h3>Design-Objekte</h3>
-          <p>Architekturmodelle, Figuren, Kunst. Detailreich und in verschiedenen Materialien.</p>
+          <h3 data-de="Design-Objekte" data-en="Design objects">Design-Objekte</h3>
+          <p data-de="Architekturmodelle, Figuren, Kunst. Detailreich und in verschiedenen Materialien." data-en="Architectural models, figurines, art. Detailed and in various materials.">Architekturmodelle, Figuren, Kunst. Detailreich und in verschiedenen Materialien.</p>
         </div>
 
         <div class="service-card">
           <div class="service-icon">🔧</div>
-          <h3>Ersatzteile</h3>
-          <p>Das Teil gibt's nicht mehr? Wir drucken es nach. Reverse Engineering inklusive.</p>
+          <h3 data-de="Ersatzteile" data-en="Spare parts">Ersatzteile</h3>
+          <p data-de="Das Teil gibt's nicht mehr? Wir drucken es nach. Reverse Engineering inklusive." data-en="Part no longer available? We print it. Reverse engineering included.">Das Teil gibt's nicht mehr? Wir drucken es nach. Reverse Engineering inklusive.</p>
         </div>
 
         <div class="service-card">
           <div class="service-icon">💡</div>
-          <h3>Beratung</h3>
-          <p>Welches Material? Welches Verfahren? Wir helfen bei der Entscheidung — bevor gedruckt wird.</p>
+          <h3 data-de="Beratung" data-en="Consulting">Beratung</h3>
+          <p data-de="Welches Material? Welches Verfahren? Wir helfen bei der Entscheidung — bevor gedruckt wird." data-en="Which material? Which process? We help with the decision — before printing begins.">Welches Material? Welches Verfahren? Wir helfen bei der Entscheidung — bevor gedruckt wird.</p>
         </div>
       </div>
     </div>
@@ -356,9 +356,9 @@
 
   <section>
     <div class="container">
-      <div class="section-label">Prozess</div>
-      <h2>In 4 Schritten zum Teil.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Prozess" data-en="Process">Prozess</div>
+      <h2 data-de="In 4 Schritten zum Teil." data-en="4 steps to your part.">In 4 Schritten zum Teil.</h2>
+      <div class="section-desc" data-de="Kein komplizierter Bestellprozess. Schick uns dein Modell oder deine Idee — wir kuemmern uns um den Rest." data-en="No complicated ordering process. Send us your model or your idea — we take care of the rest.">
         Kein komplizierter Bestellprozess. Schick uns dein Modell oder deine Idee —
         wir kuemmern uns um den Rest.
       </div>
@@ -366,23 +366,23 @@
       <div class="process-steps">
         <div class="process-step">
           <div class="process-num">01</div>
-          <h3>Anfrage</h3>
-          <p>3D-Datei oder Skizze schicken. Wir beraten bei Material und Verfahren.</p>
+          <h3 data-de="Anfrage" data-en="Request">Anfrage</h3>
+          <p data-de="3D-Datei oder Skizze schicken. Wir beraten bei Material und Verfahren." data-en="Send a 3D file or sketch. We advise on material and process.">3D-Datei oder Skizze schicken. Wir beraten bei Material und Verfahren.</p>
         </div>
         <div class="process-step">
           <div class="process-num">02</div>
-          <h3>Angebot</h3>
-          <p>Transparente Preise. Keine versteckten Kosten. Innerhalb von 24h.</p>
+          <h3 data-de="Angebot" data-en="Quote">Angebot</h3>
+          <p data-de="Transparente Preise. Keine versteckten Kosten. Innerhalb von 24h." data-en="Transparent prices. No hidden costs. Within 24 hours.">Transparente Preise. Keine versteckten Kosten. Innerhalb von 24h.</p>
         </div>
         <div class="process-step">
           <div class="process-num">03</div>
-          <h3>Druck</h3>
-          <p>Produktion auf professionellen Druckern. Qualitaetskontrolle bei jedem Teil.</p>
+          <h3 data-de="Druck" data-en="Print">Druck</h3>
+          <p data-de="Produktion auf professionellen Druckern. Qualitaetskontrolle bei jedem Teil." data-en="Production on professional printers. Quality control for every part.">Produktion auf professionellen Druckern. Qualitaetskontrolle bei jedem Teil.</p>
         </div>
         <div class="process-step">
           <div class="process-num">04</div>
-          <h3>Versand</h3>
-          <p>Sicher verpackt, schnell geliefert. Oder Abholung vor Ort.</p>
+          <h3 data-de="Versand" data-en="Shipping">Versand</h3>
+          <p data-de="Sicher verpackt, schnell geliefert. Oder Abholung vor Ort." data-en="Securely packed, delivered quickly. Or pick up on site.">Sicher verpackt, schnell geliefert. Oder Abholung vor Ort.</p>
         </div>
       </div>
     </div>
@@ -392,9 +392,9 @@
 
   <section>
     <div class="container">
-      <div class="section-label">Materialien</div>
-      <h2>Was wir verarbeiten.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Materialien" data-en="Materials">Materialien</div>
+      <h2 data-de="Was wir verarbeiten." data-en="What we work with.">Was wir verarbeiten.</h2>
+      <div class="section-desc" data-de="Verschiedene Materialien fuer verschiedene Anforderungen." data-en="Different materials for different requirements.">
         Verschiedene Materialien fuer verschiedene Anforderungen.
       </div>
 
@@ -402,11 +402,11 @@
         <span class="material-tag">PLA</span>
         <span class="material-tag">PETG</span>
         <span class="material-tag">ABS</span>
-        <span class="material-tag">TPU (flexibel)</span>
+        <span class="material-tag" data-de="TPU (flexibel)" data-en="TPU (flexible)">TPU (flexibel)</span>
         <span class="material-tag">Nylon</span>
-        <span class="material-tag">ASA (UV-bestaendig)</span>
-        <span class="material-tag">Carbon-Verbund</span>
-        <span class="material-tag">Holz-Filament</span>
+        <span class="material-tag" data-de="ASA (UV-bestaendig)" data-en="ASA (UV-resistant)">ASA (UV-bestaendig)</span>
+        <span class="material-tag" data-de="Carbon-Verbund" data-en="Carbon composite">Carbon-Verbund</span>
+        <span class="material-tag" data-de="Holz-Filament" data-en="Wood filament">Holz-Filament</span>
       </div>
     </div>
   </section>
@@ -415,26 +415,30 @@
 
   <section id="kontakt" class="cta-section">
     <div class="container">
-      <div class="section-label">Kontakt</div>
-      <h2>Idee? Her damit.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Kontakt" data-en="Contact">Kontakt</div>
+      <h2 data-de="Idee? Her damit." data-en="Got an idea? Let's hear it.">Idee? Her damit.</h2>
+      <div class="section-desc" data-de="Schick uns dein 3D-Modell, eine Skizze oder einfach eine Beschreibung. Wir melden uns innerhalb von 24 Stunden." data-en="Send us your 3D model, a sketch, or just a description. We'll get back to you within 24 hours.">
         Schick uns dein 3D-Modell, eine Skizze oder einfach eine Beschreibung.
         Wir melden uns innerhalb von 24 Stunden.
       </div>
-      <a href="mailto:smartin3d@msbls.de" class="btn btn-primary">Projekt anfragen</a>
+      <a href="mailto:smartin3d@msbls.de" class="btn btn-primary" data-de="Projekt anfragen" data-en="Request project">Projekt anfragen</a>
     </div>
   </section>
 
   <footer>
     <div class="container">
       <p><span style="color:var(--text-dim)">s</span><span style="color:var(--orange)">MARTIN</span> <span style="color:var(--blue)">3</span>D — smartin3.de</p>
-      <p style="margin-top: 24px; font-size: 0.65rem; color: var(--text-muted); line-height: 1.8;"><a href="#impressum" style="color: var(--text-muted); text-decoration: none;">Impressum</a></p>
+      <p style="margin-top: 24px; font-size: 0.65rem; color: var(--text-muted); line-height: 1.8;"><a href="#impressum" style="color: var(--text-muted); text-decoration: none;" data-de="Impressum" data-en="Legal notice">Impressum</a></p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
   <section id="impressum" style="padding: 60px 0 80px; border-top: 1px solid var(--border);">
     <div class="container" style="max-width: 540px;">
-      <h2 style="font-size: 1.2rem; margin-bottom: 24px;">Impressum</h2>
+      <h2 style="font-size: 1.2rem; margin-bottom: 24px;" data-de="Impressum" data-en="Legal notice">Impressum</h2>
       <p style="font-size: 0.85rem; color: var(--text-dim); line-height: 1.8; font-weight: 300;">
         Martin Siebels<br>
         Leyer Str. 38<br>
@@ -444,5 +448,6 @@
     </div>
   </section>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/sorgenfrai.de/index.html

@@ -53,8 +53,10 @@
     <div class="icon">🧘</div>
     <h1>sorgen<span class='accent'>frAI</span>.</h1>
     <div class="divider"></div>
-    <p class="subtitle">Deine Sorgen. Unsere AI.</p>
+    <p class="subtitle" data-de="Deine Sorgen. Unsere AI." data-en="Your worries. Our AI.">Deine Sorgen. Unsere AI.</p>
     <p class="footer">sorgenfrAI.de</p>
+    <p class="footer" style="margin-top:12px;"><button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted);color:var(--text-muted);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button><br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small></p>
   </div>
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/vonschraitter.de/index.html

@@ -504,7 +504,7 @@
   <nav>
     <div class="container">
       <div class="logo">von<span class="accent">Schr</span>eitter</div>
-      <a href="#kontakt">Kontakt</a>
+      <a href="#kontakt" data-de="Kontakt" data-en="Contact">Kontakt</a>
     </div>
   </nav>
 
@@ -513,16 +513,16 @@
     <div class="container">
       <div class="monogram">FvS</div>
       <div class="hero-badge">
-        <span class="dot"></span>Hogan Lovells
+        <span class="dot"></span><span data-de="Hogan Lovells" data-en="Hogan Lovells">Hogan Lovells</span>
       </div>
       <h1>Florian <span class="von">von</span><br>Schr<span class="ai-swap"><span class="letter visible" id="letterA">A</span><span class="letter hidden" id="letterE">E</span></span><span class="surname">I</span>tter</h1>
-      <p class="hero-subtitle">
+      <p class="hero-subtitle" data-de="&lt;strong&gt;Kartellrecht&lt;/strong&gt; mit Weitblick. Fusionskontrolle, Kartellverfahren und Compliance-Strategien — fuer Unternehmen, die Maerkte gestalten." data-en="&lt;strong&gt;Competition law&lt;/strong&gt; with vision. Merger control, cartel proceedings and compliance strategies — for companies that shape markets.">
         <strong>Kartellrecht</strong> mit Weitblick. Fusionskontrolle, Kartellverfahren
         und Compliance-Strategien — fuer Unternehmen, die Maerkte gestalten.
       </p>
       <div class="cta-group">
-        <a href="#kontakt" class="btn btn-primary">Kontakt aufnehmen</a>
-        <a href="#expertise" class="btn btn-ghost">Expertise</a>
+        <a href="#kontakt" class="btn btn-primary" data-de="Kontakt aufnehmen" data-en="Get in touch">Kontakt aufnehmen</a>
+        <a href="#expertise" class="btn btn-ghost" data-de="Expertise" data-en="Expertise">Expertise</a>
       </div>
     </div>
   </section>
@@ -532,9 +532,9 @@
   <!-- Expertise -->
   <section id="expertise">
     <div class="container">
-      <div class="section-label">Schwerpunkte</div>
-      <h2>Kartellrecht. Durchdacht.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Schwerpunkte" data-en="Focus areas">Schwerpunkte</div>
+      <h2 data-de="Kartellrecht. Durchdacht." data-en="Competition law. Thoroughly considered.">Kartellrecht. Durchdacht.</h2>
+      <div class="section-desc" data-de="Von der strategischen Beratung bis zur Verteidigung vor den Behoerden — praeziese Arbeit in den Kernbereichen des Wettbewerbsrechts." data-en="From strategic advice to defense before authorities — precise work in the core areas of competition law.">
         Von der strategischen Beratung bis zur Verteidigung vor den
         Behoerden — praeziese Arbeit in den Kernbereichen des Wettbewerbsrechts.
       </div>
@@ -542,8 +542,8 @@
       <div class="expertise-grid">
         <div class="expertise-card">
           <div class="expertise-icon">FK</div>
-          <h3>Fusionskontrolle</h3>
-          <p>
+          <h3 data-de="Fusionskontrolle" data-en="Merger Control">Fusionskontrolle</h3>
+          <p data-de="Anmeldungen bei BKartA, EU-Kommission und international. Remedy-Strategien, Phase-II-Verfahren, Gun-Jumping-Praevention." data-en="Filings with BKartA, EU Commission and internationally. Remedy strategies, Phase-II proceedings, gun-jumping prevention.">
             Anmeldungen bei BKartA, EU-Kommission und international.
             Remedy-Strategien, Phase-II-Verfahren, Gun-Jumping-Praevention.
           </p>
@@ -551,8 +551,8 @@
 
         <div class="expertise-card">
           <div class="expertise-icon">KV</div>
-          <h3>Kartellverfahren</h3>
-          <p>
+          <h3 data-de="Kartellverfahren" data-en="Cartel Proceedings">Kartellverfahren</h3>
+          <p data-de="Verteidigung in Bussgeldverfahren. Kronzeugenantraege, Settlement-Verhandlungen, Zusammenarbeit mit Behoerden." data-en="Defense in fine proceedings. Leniency applications, settlement negotiations, cooperation with authorities.">
             Verteidigung in Bussgeldverfahren. Kronzeugenantraege,
             Settlement-Verhandlungen, Zusammenarbeit mit Behoerden.
           </p>
@@ -560,8 +560,8 @@
 
         <div class="expertise-card">
           <div class="expertise-icon">CP</div>
-          <h3>Compliance</h3>
-          <p>
+          <h3 data-de="Compliance" data-en="Compliance">Compliance</h3>
+          <p data-de="Aufbau und Audit von Kartell-Compliance-Programmen. Schulungen, interne Untersuchungen, Dawn-Raid-Readiness." data-en="Building and auditing cartel compliance programs. Training, internal investigations, dawn raid readiness.">
             Aufbau und Audit von Kartell-Compliance-Programmen.
             Schulungen, interne Untersuchungen, Dawn-Raid-Readiness.
           </p>
@@ -569,8 +569,8 @@
 
         <div class="expertise-card">
           <div class="expertise-icon">VB</div>
-          <h3>Vertriebskartellrecht</h3>
-          <p>
+          <h3 data-de="Vertriebskartellrecht" data-en="Distribution Competition Law">Vertriebskartellrecht</h3>
+          <p data-de="Selektiver Vertrieb, Online-Marktplaetze, Preisbindung. Gestaltung kartellrechtskonformer Vertriebssysteme." data-en="Selective distribution, online marketplaces, resale price maintenance. Designing competition-compliant distribution systems.">
             Selektiver Vertrieb, Online-Marktplaetze, Preisbindung.
             Gestaltung kartellrechtskonformer Vertriebssysteme.
           </p>
@@ -578,8 +578,8 @@
 
         <div class="expertise-card">
           <div class="expertise-icon">PE</div>
-          <h3>Private Enforcement</h3>
-          <p>
+          <h3 data-de="Private Enforcement" data-en="Private Enforcement">Private Enforcement</h3>
+          <p data-de="Kartellschadensersatzklagen. Anspruchsdurchsetzung und -abwehr nach deutschem und EU-Recht." data-en="Cartel damage claims. Enforcement and defense of claims under German and EU law.">
             Kartellschadensersatzklagen. Anspruchsdurchsetzung
             und -abwehr nach deutschem und EU-Recht.
           </p>
@@ -587,8 +587,8 @@
 
         <div class="expertise-card">
           <div class="expertise-icon">DM</div>
-          <h3>Digitale Maerkte</h3>
-          <p>
+          <h3 data-de="Digitale Maerkte" data-en="Digital Markets">Digitale Maerkte</h3>
+          <p data-de="DMA, GWB-Digitalisierung, Plattformregulierung. Wettbewerbsfragen an der Schnittstelle von Tech und Recht." data-en="DMA, GWB digitalization, platform regulation. Competition issues at the intersection of tech and law.">
             DMA, GWB-Digitalisierung, Plattformregulierung.
             Wettbewerbsfragen an der Schnittstelle von Tech und Recht.
           </p>
@@ -602,19 +602,19 @@
   <!-- Profile -->
   <section id="profil">
     <div class="container">
-      <div class="section-label">Profil</div>
-      <h2>Strategie trifft Praezision.</h2>
+      <div class="section-label" data-de="Profil" data-en="Profile">Profil</div>
+      <h2 data-de="Strategie trifft Praezision." data-en="Strategy meets precision.">Strategie trifft Praezision.</h2>
 
       <div class="profile-section">
         <div class="profile-text">
-          <p>
+          <p data-de="Florian von Schreitter beraet nationale und internationale Unternehmen in allen Fragen des deutschen und europaeischen Kartellrechts. Sein Schwerpunkt liegt auf komplexen Fusionskontrollverfahren und der Verteidigung in Kartellbussgeldverfahren." data-en="Florian von Schreitter advises national and international companies on all aspects of German and European competition law. His focus is on complex merger control proceedings and defense in cartel fine proceedings.">
             Florian von Schreitter beraet nationale und internationale
             Unternehmen in allen Fragen des deutschen und europaeischen
             Kartellrechts. Sein Schwerpunkt liegt auf komplexen
             Fusionskontrollverfahren und der Verteidigung in
             Kartellbussgeldverfahren.
           </p>
-          <p>
+          <p data-de="Als Rechtsanwalt bei Hogan Lovells verbindet er tiefes regulatorisches Verstaendnis mit strategischem Denken — fuer Loesungen, die wirtschaftlich tragfaehig und rechtlich belastbar sind." data-en="As an attorney at Hogan Lovells, he combines deep regulatory understanding with strategic thinking — for solutions that are economically viable and legally sound.">
             Als Rechtsanwalt bei Hogan Lovells verbindet er tiefes
             regulatorisches Verstaendnis mit strategischem Denken —
             fuer Loesungen, die wirtschaftlich tragfaehig und
@@ -623,24 +623,24 @@
         </div>
         <div class="profile-details">
           <div class="detail-card">
-            <div class="detail-label">Kanzlei</div>
+            <div class="detail-label" data-de="Kanzlei" data-en="Law firm">Kanzlei</div>
             <div class="detail-value">Hogan Lovells International LLP</div>
           </div>
           <div class="detail-card">
-            <div class="detail-label">Praxisgruppe</div>
-            <div class="detail-value">Competition, Regulation & Trade</div>
+            <div class="detail-label" data-de="Praxisgruppe" data-en="Practice group">Praxisgruppe</div>
+            <div class="detail-value">Competition, Regulation &amp; Trade</div>
           </div>
           <div class="detail-card">
-            <div class="detail-label">Standort</div>
-            <div class="detail-value">Duesseldorf, Deutschland</div>
+            <div class="detail-label" data-de="Standort" data-en="Location">Standort</div>
+            <div class="detail-value" data-de="Duesseldorf, Deutschland" data-en="Dusseldorf, Germany">Duesseldorf, Deutschland</div>
           </div>
           <div class="detail-card">
-            <div class="detail-label">Zulassung</div>
-            <div class="detail-value">Rechtsanwalt (Deutschland)</div>
+            <div class="detail-label" data-de="Zulassung" data-en="Bar admission">Zulassung</div>
+            <div class="detail-value" data-de="Rechtsanwalt (Deutschland)" data-en="Attorney-at-law (Germany)">Rechtsanwalt (Deutschland)</div>
           </div>
           <div class="detail-card">
-            <div class="detail-label">Sprachen</div>
-            <div class="detail-value">Deutsch, Englisch</div>
+            <div class="detail-label" data-de="Sprachen" data-en="Languages">Sprachen</div>
+            <div class="detail-value" data-de="Deutsch, Englisch" data-en="German, English">Deutsch, Englisch</div>
           </div>
         </div>
       </div>
@@ -652,14 +652,14 @@
   <!-- Contact CTA -->
   <section id="kontakt" class="cta-section">
     <div class="container">
-      <div class="section-label">Kontakt</div>
-      <h2>Sprechen wir darueber.</h2>
-      <div class="section-desc">
+      <div class="section-label" data-de="Kontakt" data-en="Contact">Kontakt</div>
+      <h2 data-de="Sprechen wir darueber." data-en="Let's talk about it.">Sprechen wir darueber.</h2>
+      <div class="section-desc" data-de="Kartellrechtliche Fragen verdienen fruehzeitige, strategische Beratung. Nehmen Sie Kontakt auf." data-en="Competition law questions deserve early, strategic advice. Get in touch.">
         Kartellrechtliche Fragen verdienen fruehzeitige, strategische Beratung.
         Nehmen Sie Kontakt auf.
       </div>
       <div class="cta-group">
-        <a href="mailto:florian.vonschreitter@hoganlovells.com" class="btn btn-primary">E-Mail schreiben</a>
+        <a href="mailto:florian.vonschreitter@hoganlovells.com" class="btn btn-primary" data-de="E-Mail schreiben" data-en="Send email">E-Mail schreiben</a>
       </div>
     </div>
   </section>
@@ -668,6 +668,10 @@
   <footer>
     <div class="container">
       <p>vonschr<span style="color: var(--accent);">AI</span>tter.de — Florian von Schreitter</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
   </footer>
 
@@ -682,5 +686,6 @@
     }, 3000);
   </script>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

sites/wartebitte.de/index.html

@@ -279,16 +279,24 @@
 
     <div class="icon">🫖</div>
 
-    <h1>Warte bitte.</h1>
+    <h1 data-de="Warte bitte." data-en="Please wait.">Warte bitte.</h1>
 
     <div class="rule"></div>
 
     <div class="prose">
-      <p>
+      <p data-de="Ich weiss, du wartest. Und Warten fuehlt sich manchmal an wie
+        Stillstand. Wie verlorene Zeit. Wie etwas, das nicht sein muesste." data-en="I know you're waiting. And waiting sometimes feels like
+        standing still. Like lost time. Like something that shouldn't have to be.">
         Ich weiss, du wartest. Und Warten fuehlt sich manchmal an wie
         Stillstand. Wie verlorene Zeit. Wie etwas, das nicht sein muesste.
       </p>
-      <p>
+      <p data-de="Aber manche Dinge brauchen genau diese Zeit. Nicht weil jemand
+        troedelt, sondern weil <em>gute Ergebnisse nicht gehetzt werden koennen</em>.
+        Ein Gedanke muss reifen. Eine Loesung muss stimmen. Nicht nur schnell,
+        sondern richtig." data-en="But some things need exactly this time. Not because someone
+        is dawdling, but because <em>good results cannot be rushed</em>.
+        A thought must ripen. A solution must be right. Not just fast,
+        but correct.">
         Aber manche Dinge brauchen genau diese Zeit. Nicht weil jemand
         troedelt, sondern weil <em>gute Ergebnisse nicht gehetzt werden koennen</em>.
         Ein Gedanke muss reifen. Eine Loesung muss stimmen. Nicht nur schnell,
@@ -299,7 +307,11 @@
     <div class="dots"><span></span><span></span><span></span></div>
 
     <div class="highlight">
-      <p>
+      <p data-de="Zeit ist unser kostbarstes Gut. Wer sie gibt, gibt das Wertvollste,
+        was er hat. Und wer sie bekommt, sollte wissen: Da arbeitet jemand
+        daran, dass es sich lohnt." data-en="Time is our most precious asset. Whoever gives it, gives the most valuable
+        thing they have. And whoever receives it should know: someone is working
+        to make it worthwhile.">
         Zeit ist unser kostbarstes Gut. Wer sie gibt, gibt das Wertvollste,
         was er hat. Und wer sie bekommt, sollte wissen: Da arbeitet jemand
         daran, dass es sich lohnt.
@@ -307,12 +319,17 @@
     </div>
 
     <div class="prose">
-      <p>
+      <p data-de="Es ist okay, ungeduldig zu sein. Ungeduld zeigt, dass dir etwas
+        wichtig ist. Aber lass sie nicht den Blick trueben fuer das,
+        was gerade im Hintergrund passiert." data-en="It's okay to be impatient. Impatience shows that something matters to you.
+        But don't let it cloud your view of what's happening in the background right now.">
         Es ist okay, ungeduldig zu sein. Ungeduld zeigt, dass dir etwas
         wichtig ist. Aber lass sie nicht den Blick trueben fuer das,
         was gerade im Hintergrund passiert.
       </p>
-      <p>
+      <p data-de="Gute Dinge brauchen Raum. Einen ruhigen Moment.
+        Einen zweiten Blick. Manchmal einen dritten." data-en="Good things need space. A quiet moment.
+        A second look. Sometimes a third.">
         Gute Dinge brauchen Raum. Einen ruhigen Moment.
         Einen zweiten Blick. Manchmal einen dritten.
       </p>
@@ -324,10 +341,10 @@
         <span class="breath-label" id="breathLabel">start</span>
       </div>
       <div class="breath-timer-select">
-        <button onclick="setTimer(1)" id="t1">1 min</button>
-        <button onclick="setTimer(2)" id="t2" class="active">2 min</button>
-        <button onclick="setTimer(5)" id="t5">5 min</button>
-        <button onclick="setTimer(0)" id="t0">endlos</button>
+        <button onclick="setTimer(1)" id="t1" data-de="1 min" data-en="1 min">1 min</button>
+        <button onclick="setTimer(2)" id="t2" class="active" data-de="2 min" data-en="2 min">2 min</button>
+        <button onclick="setTimer(5)" id="t5" data-de="5 min" data-en="5 min">5 min</button>
+        <button onclick="setTimer(0)" id="t0" data-de="endlos" data-en="endless">endlos</button>
       </div>
       <div class="breath-countdown" id="countdown"></div>
     </div>
@@ -407,7 +424,9 @@
     </script>
 
     <div class="closing">
-      <p>
+      <p data-de="Du bekommst, was du brauchst. Nur nicht genau jetzt.
+        Und das ist voellig in Ordnung." data-en="You'll get what you need. Just not right now.
+        And that's perfectly fine.">
         Du bekommst, was du brauchst. Nur nicht genau jetzt.
         Und das ist voellig in Ordnung.
       </p>
@@ -415,9 +434,14 @@
 
     <footer>
       <p>wartebitte.de</p>
+      <div style="text-align:center;margin-top:16px;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </footer>
 
   </div>
 
+  <script src="/shared/i18n.js"></script>
 </body>
 </html>

templates/base.html

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{title}}</title>
-    <meta name="description" content="{{description}}">
+    <title{{title_i18n}}>{{title}}</title>
+    <meta name="description" content="{{description}}"{{description_i18n}}>
     <meta name="robots" content="index, follow">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>{{favicon}}</text></svg>">
 {{fonts}}
@@ -18,5 +18,6 @@
 </head>
 <body class="noise-overlay">
 {{body}}
+    <script src="/shared/i18n.js"></script>
 </body>
 </html>

templates/editorial.html

@@ -70,14 +70,17 @@
 {{template_body_start}}
     <div class="container fade-in">
       <div class="editorial-header">
-        <h1>{{title}}</h1>
-        <div class="subtitle">{{tagline}}</div>
+        <h1{{title_i18n}}>{{title}}</h1>
+        <div class="subtitle"{{tagline_i18n}}>{{tagline}}</div>
       </div>
-      <div class="editorial-body">
+      <div class="editorial-body"{{content_i18n}}>
 {{content_html}}
       </div>
       <div class="footer">
         {{name}} &mdash; {{year}}
+        <br>
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid currentColor;color:var(--text-dimmed,#888);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;margin-top:12px;opacity:0.6;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-dimmed,#888);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
       </div>
     </div>
 {{template_body_end}}

templates/fun.html

@@ -56,8 +56,12 @@
 {{template_body_start}}
     <div class="container fade-in">
       <div class="emoji-big">{{emoji}}</div>
-      <h1>{{title}}</h1>
-      <div class="subtitle">{{tagline}}</div>
+      <h1{{title_i18n}}>{{title}}</h1>
+      <div class="subtitle"{{tagline_i18n}}>{{tagline}}</div>
 {{sections_html}}
+      <div style="text-align:center;margin-top:2rem;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid currentColor;color:var(--text-dimmed,#888);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;opacity:0.6;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-dimmed,#888);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
 {{template_body_end}}

templates/minimal.html

@@ -30,7 +30,11 @@
 {{template_css_end}}
 {{template_body_start}}
     <div class="container fade-in">
-      <h1>{{title}}</h1>
-      <div class="subtitle">{{tagline}}</div>
+      <h1{{title_i18n}}>{{title}}</h1>
+      <div class="subtitle"{{tagline_i18n}}>{{tagline}}</div>
+      <div style="margin-top:2rem;">
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid currentColor;color:var(--text-dimmed,#888);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;opacity:0.6;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-dimmed,#888);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
+      </div>
     </div>
 {{template_body_end}}

templates/person-dark.html

@@ -139,8 +139,8 @@
       <div class="hero fade-in">
         <div class="initials">{{initials}}</div>
         <h1>{{name}}</h1>
-        <div class="role">{{role}}</div>
-        <div class="tagline">{{tagline}}</div>
+        <div class="role"{{role_i18n}}>{{role}}</div>
+        <div class="tagline"{{tagline_i18n}}>{{tagline}}</div>
       </div>
 
       <div class="tags fade-in stagger-1">
@@ -151,6 +151,9 @@
 
       <div class="footer fade-in stagger-5">
         &copy; {{year}} {{name}}
+        <br>
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid currentColor;color:var(--text-dimmed,#888);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;margin-top:12px;opacity:0.6;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-dimmed,#888);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
       </div>
     </div>
 {{template_body_end}}

templates/person-light.html

@@ -141,8 +141,8 @@
       <div class="hero fade-in">
         <div class="initials">{{initials}}</div>
         <h1>{{name}}</h1>
-        <div class="role">{{role}}</div>
-        <div class="tagline">{{tagline}}</div>
+        <div class="role"{{role_i18n}}>{{role}}</div>
+        <div class="tagline"{{tagline_i18n}}>{{tagline}}</div>
       </div>
 
       <div class="tags fade-in stagger-1">
@@ -153,6 +153,9 @@
 
       <div class="footer fade-in stagger-5">
         &copy; {{year}} {{name}}
+        <br>
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid currentColor;color:var(--text-dimmed,#888);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;margin-top:12px;opacity:0.6;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-dimmed,#888);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
       </div>
     </div>
 {{template_body_end}}

templates/product-dark.html

@@ -95,18 +95,21 @@
 {{template_body_start}}
     <div class="container">
       <div class="hero fade-in">
-        <h1>{{title}}</h1>
-        <div class="subtitle">{{tagline}}</div>
+        <h1{{title_i18n}}>{{title}}</h1>
+        <div class="subtitle"{{tagline_i18n}}>{{tagline}}</div>
       </div>
 
 {{sections_html}}
 
       <div class="cta-section fade-in stagger-4">
-        <a href="{{cta_href}}" class="cta">{{cta_text}}</a>
+        <a href="{{cta_href}}" class="cta"{{cta_i18n}}>{{cta_text}}</a>
       </div>
 
       <div class="footer fade-in stagger-5">
         &copy; {{year}} {{name}}
+        <br>
+        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid currentColor;color:var(--text-dimmed,#888);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;margin-top:12px;opacity:0.6;">EN</button>
+        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-dimmed,#888);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
       </div>
     </div>
 {{template_body_end}}