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

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