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

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