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

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>