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
This commit is contained in:
m
2026-04-01 13:19:40 +02:00
parent 846fc04444
commit 5c92a7b021
53 changed files with 1850 additions and 1475 deletions

View File

@@ -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>