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

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