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

@@ -735,10 +735,10 @@
<div class="nav-inner">
<a href="#" class="nav-logo">Matthi<span class="ai-mark">A</span>s Bre<span class="ai-mark">I</span>er</a>
<ul class="nav-links">
<li><a href="#about">Profil</a></li>
<li><a href="#kompetenzen">Kompetenzen</a></li>
<li><a href="#methodik">Methodik</a></li>
<li><a href="#kontakt">Kontakt</a></li>
<li><a href="#about" data-de="Profil" data-en="Profile">Profil</a></li>
<li><a href="#kompetenzen" data-de="Kompetenzen" data-en="Competencies">Kompetenzen</a></li>
<li><a href="#methodik" data-de="Methodik" data-en="Methodology">Methodik</a></li>
<li><a href="#kontakt" data-de="Kontakt" data-en="Contact">Kontakt</a></li>
</ul>
</div>
</nav>
@@ -747,13 +747,13 @@
<section class="hero">
<div class="hero-inner">
<div class="hero-text">
<span class="hero-label">IT Projektmanagement</span>
<span class="hero-label" data-de="IT Projektmanagement" data-en="IT Project Management">IT Projektmanagement</span>
<h1 class="hero-name">Matthias<br>Br<span class="ai-swap"><span class="letter visible" id="letterE">e</span><span class="letter hidden" id="letterA">A</span></span><span class="ai-swap"><span class="letter visible" id="letterI">i</span><span class="letter hidden" id="letterAI">I</span></span>er</h1>
<p class="hero-title">IT Projektmanager</p>
<p class="hero-desc">
<p class="hero-title" data-de="IT Projektmanager" data-en="IT Project Manager">IT Projektmanager</p>
<p class="hero-desc" data-de="Ich bringe Technologie und Strategie zusammen. Von der Konzeption bis zum Go-Live begleite ich digitale Projekte mit klarer Struktur, agilen Methoden und einem festen Blick auf messbare Ergebnisse." data-en="I bring technology and strategy together. From conception to go-live I accompany digital projects with clear structure, agile methods and a firm eye on measurable results.">
Ich bringe Technologie und Strategie zusammen. Von der Konzeption bis zum Go-Live begleite ich digitale Projekte mit klarer Struktur, agilen Methoden und einem festen Blick auf messbare Ergebnisse.
</p>
<a href="#kontakt" class="hero-cta">
<a href="#kontakt" class="hero-cta" data-de="Kontakt aufnehmen" data-en="Get in touch">
Kontakt aufnehmen
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
</a>
@@ -771,18 +771,18 @@
<div class="section-inner">
<div class="about-grid">
<div class="about-text">
<span class="section-label">Profil</span>
<h2 class="section-title">Erfahrung trifft Innovation</h2>
<p>
<span class="section-label" data-de="Profil" data-en="Profile">Profil</span>
<h2 class="section-title" data-de="Erfahrung trifft Innovation" data-en="Experience Meets Innovation">Erfahrung trifft Innovation</h2>
<p data-de="Als IT Projektmanager verbinde ich technisches Verständnis mit strategischem Weitblick. Mein Fokus liegt auf der erfolgreichen Umsetzung komplexer IT-Projekte — von der Anforderungsanalyse über die agile Steuerung bis zur termingerechten Lieferung." data-en="As an IT project manager I combine technical understanding with strategic vision. My focus is on the successful delivery of complex IT projects — from requirements analysis through agile management to on-time delivery.">
Als IT Projektmanager verbinde ich technisches Verständnis mit strategischem Weitblick. Mein Fokus liegt auf der erfolgreichen Umsetzung komplexer IT-Projekte — von der Anforderungsanalyse über die agile Steuerung bis zur termingerechten Lieferung.
</p>
<p>
<p data-de="Ich arbeite an der Schnittstelle zwischen Fachbereichen und IT-Teams und sorge dafür, dass Projekte nicht nur technisch funktionieren, sondern echten Mehrwert für das Unternehmen schaffen. Dabei setze ich auf bewährte Frameworks, klare Kommunikation und datengetriebene Entscheidungen." data-en="I work at the interface between business units and IT teams, ensuring that projects not only function technically but create real value for the organisation. I rely on proven frameworks, clear communication and data-driven decisions.">
Ich arbeite an der Schnittstelle zwischen Fachbereichen und IT-Teams und sorge dafür, dass Projekte nicht nur technisch funktionieren, sondern echten Mehrwert für das Unternehmen schaffen. Dabei setze ich auf bewährte Frameworks, klare Kommunikation und datengetriebene Entscheidungen.
</p>
<div class="about-stats">
<div class="stat-card">
<div class="stat-number">PM</div>
<div class="stat-label">Klassisch & Agil</div>
<div class="stat-label" data-de="Klassisch &amp; Agil" data-en="Classic &amp; Agile">Klassisch & Agil</div>
</div>
<div class="stat-card">
<div class="stat-number">E2E</div>
@@ -790,7 +790,7 @@
</div>
<div class="stat-card">
<div class="stat-number">KPI</div>
<div class="stat-label">Ergebnisorientiert</div>
<div class="stat-label" data-de="Ergebnisorientiert" data-en="Results-driven">Ergebnisorientiert</div>
</div>
<div class="stat-card">
<div class="stat-number">360°</div>
@@ -802,7 +802,7 @@
<img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?w=600&h=500&fit=crop" alt="Digitale Zusammenarbeit" class="about-image">
<div class="about-image-overlay">
<div class="quote-mark">"</div>
<p>Gute Projekte brauchen klare Strukturen und den Mut, sie anzupassen.</p>
<p data-de="Gute Projekte brauchen klare Strukturen und den Mut, sie anzupassen." data-en="Good projects need clear structures and the courage to adapt them.">Gute Projekte brauchen klare Strukturen und den Mut, sie anzupassen.</p>
</div>
</div>
</div>
@@ -812,9 +812,9 @@
<!-- KOMPETENZEN -->
<section class="kompetenzen" id="kompetenzen">
<div class="section-inner">
<span class="section-label">Kompetenzen</span>
<h2 class="section-title">Was ich mitbringe</h2>
<p class="section-subtitle">
<span class="section-label" data-de="Kompetenzen" data-en="Competencies">Kompetenzen</span>
<h2 class="section-title" data-de="Was ich mitbringe" data-en="What I bring">Was ich mitbringe</h2>
<p class="section-subtitle" data-de="Ein breites Kompetenzprofil an der Schnittstelle von Technologie, Organisation und Mensch." data-en="A broad competency profile at the interface of technology, organisation and people.">
Ein breites Kompetenzprofil an der Schnittstelle von Technologie, Organisation und Mensch.
</p>
<div class="kompetenz-grid">
@@ -822,43 +822,43 @@
<div class="kompetenz-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
</div>
<h3>Projektmanagement</h3>
<p>Planung, Steuerung und Kontrolle komplexer IT-Projekte. Von der Initialisierung bis zum erfolgreichen Abschluss.</p>
<h3 data-de="Projektmanagement" data-en="Project Management">Projektmanagement</h3>
<p data-de="Planung, Steuerung und Kontrolle komplexer IT-Projekte. Von der Initialisierung bis zum erfolgreichen Abschluss." data-en="Planning, controlling and monitoring complex IT projects. From initiation to successful completion.">Planung, Steuerung und Kontrolle komplexer IT-Projekte. Von der Initialisierung bis zum erfolgreichen Abschluss.</p>
</div>
<div class="kompetenz-card">
<div class="kompetenz-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" /></svg>
</div>
<h3>Agile / Scrum</h3>
<p>Scrum, Kanban, SAFe — agile Methoden praxisnah eingesetzt. Iterativ, transparent und mit Fokus auf Wertschöpfung.</p>
<p data-de="Scrum, Kanban, SAFe — agile Methoden praxisnah eingesetzt. Iterativ, transparent und mit Fokus auf Wertschöpfung." data-en="Scrum, Kanban, SAFe — agile methods applied in practice. Iterative, transparent and focused on value creation.">Scrum, Kanban, SAFe — agile Methoden praxisnah eingesetzt. Iterativ, transparent und mit Fokus auf Wertschöpfung.</p>
</div>
<div class="kompetenz-card">
<div class="kompetenz-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" /></svg>
</div>
<h3>IT-Strategie</h3>
<p>Technologieentscheidungen mit Business-Zielen in Einklang bringen. IT-Roadmaps entwickeln und umsetzen.</p>
<h3 data-de="IT-Strategie" data-en="IT Strategy">IT-Strategie</h3>
<p data-de="Technologieentscheidungen mit Business-Zielen in Einklang bringen. IT-Roadmaps entwickeln und umsetzen." data-en="Aligning technology decisions with business goals. Developing and implementing IT roadmaps.">Technologieentscheidungen mit Business-Zielen in Einklang bringen. IT-Roadmaps entwickeln und umsetzen.</p>
</div>
<div class="kompetenz-card">
<div class="kompetenz-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" /></svg>
</div>
<h3>Digitale Transformation</h3>
<p>Unternehmen auf dem Weg in die digitale Zukunft begleiten. Prozesse modernisieren, Teams befähigen.</p>
<h3 data-de="Digitale Transformation" data-en="Digital Transformation">Digitale Transformation</h3>
<p data-de="Unternehmen auf dem Weg in die digitale Zukunft begleiten. Prozesse modernisieren, Teams befähigen." data-en="Accompanying organisations on their journey into the digital future. Modernising processes, empowering teams.">Unternehmen auf dem Weg in die digitale Zukunft begleiten. Prozesse modernisieren, Teams befähigen.</p>
</div>
<div class="kompetenz-card">
<div class="kompetenz-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
</div>
<h3>Stakeholder Management</h3>
<p>Erwartungen managen, Interessen ausbalancieren, alle Beteiligten auf ein gemeinsames Ziel ausrichten.</p>
<p data-de="Erwartungen managen, Interessen ausbalancieren, alle Beteiligten auf ein gemeinsames Ziel ausrichten." data-en="Managing expectations, balancing interests, aligning all stakeholders towards a common goal.">Erwartungen managen, Interessen ausbalancieren, alle Beteiligten auf ein gemeinsames Ziel ausrichten.</p>
</div>
<div class="kompetenz-card">
<div class="kompetenz-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182" /></svg>
</div>
<h3>Change Management</h3>
<p>Veränderung ist kein Nebeneffekt, sondern Kernkompetenz. Menschen mitnehmen, Widerstände adressieren.</p>
<p data-de="Veränderung ist kein Nebeneffekt, sondern Kernkompetenz. Menschen mitnehmen, Widerstände adressieren." data-en="Change is not a side effect but a core competency. Bringing people along, addressing resistance.">Veränderung ist kein Nebeneffekt, sondern Kernkompetenz. Menschen mitnehmen, Widerstände adressieren.</p>
</div>
</div>
</div>
@@ -867,26 +867,26 @@
<!-- METHODIK -->
<section class="methodik" id="methodik">
<div class="section-inner">
<span class="section-label">Methodik</span>
<h2 class="section-title">Wie ich arbeite</h2>
<p class="section-subtitle">
<span class="section-label" data-de="Methodik" data-en="Methodology">Methodik</span>
<h2 class="section-title" data-de="Wie ich arbeite" data-en="How I work">Wie ich arbeite</h2>
<p class="section-subtitle" data-de="Strukturiert, ergebnisorientiert und immer mit dem Menschen im Mittelpunkt." data-en="Structured, results-oriented and always with people at the centre.">
Strukturiert, ergebnisorientiert und immer mit dem Menschen im Mittelpunkt.
</p>
<div class="methodik-steps">
<div class="methodik-step">
<div class="step-number">01</div>
<h3>Verstehen</h3>
<p>Jedes Projekt beginnt mit Zuhören. Ich erfasse den Kontext, identifiziere Stakeholder und definiere gemeinsam klare Ziele und Erfolgskriterien — bevor die erste Zeile Code geschrieben wird.</p>
<h3 data-de="Verstehen" data-en="Understand">Verstehen</h3>
<p data-de="Jedes Projekt beginnt mit Zuhören. Ich erfasse den Kontext, identifiziere Stakeholder und definiere gemeinsam klare Ziele und Erfolgskriterien — bevor die erste Zeile Code geschrieben wird." data-en="Every project begins with listening. I capture the context, identify stakeholders and jointly define clear goals and success criteria — before the first line of code is written.">Jedes Projekt beginnt mit Zuhören. Ich erfasse den Kontext, identifiziere Stakeholder und definiere gemeinsam klare Ziele und Erfolgskriterien — bevor die erste Zeile Code geschrieben wird.</p>
</div>
<div class="methodik-step">
<div class="step-number">02</div>
<h3>Strukturieren</h3>
<p>Komplexität wird handhabbar durch die richtige Struktur. Ich schaffe klare Verantwortlichkeiten, transparente Prozesse und passende Frameworks — ob Wasserfall, agil oder hybrid.</p>
<h3 data-de="Strukturieren" data-en="Structure">Strukturieren</h3>
<p data-de="Komplexität wird handhabbar durch die richtige Struktur. Ich schaffe klare Verantwortlichkeiten, transparente Prozesse und passende Frameworks — ob Wasserfall, agil oder hybrid." data-en="Complexity becomes manageable through the right structure. I create clear responsibilities, transparent processes and appropriate frameworks — whether waterfall, agile or hybrid.">Komplexität wird handhabbar durch die richtige Struktur. Ich schaffe klare Verantwortlichkeiten, transparente Prozesse und passende Frameworks — ob Wasserfall, agil oder hybrid.</p>
</div>
<div class="methodik-step">
<div class="step-number">03</div>
<h3>Liefern</h3>
<p>Ergebnisse zählen. Durch iteratives Vorgehen, konsequentes Risikomanagement und enge Abstimmung stelle ich sicher, dass Projekte termingerecht und in Qualität abgeschlossen werden.</p>
<h3 data-de="Liefern" data-en="Deliver">Liefern</h3>
<p data-de="Ergebnisse zählen. Durch iteratives Vorgehen, konsequentes Risikomanagement und enge Abstimmung stelle ich sicher, dass Projekte termingerecht und in Qualität abgeschlossen werden." data-en="Results matter. Through iterative approach, consistent risk management and close coordination I ensure that projects are completed on time and to quality.">Ergebnisse zählen. Durch iteratives Vorgehen, konsequentes Risikomanagement und enge Abstimmung stelle ich sicher, dass Projekte termingerecht und in Qualität abgeschlossen werden.</p>
</div>
</div>
</div>
@@ -895,18 +895,18 @@
<!-- TESTIMONIAL -->
<section style="background: var(--navy); padding: 5rem 2rem; text-align: center;">
<div style="max-width: 700px; margin: 0 auto;">
<p style="font-family: 'DM Serif Display', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--light); font-style: italic; line-height: 1.5;">&bdquo;Manchmal braucht man Breier.&ldquo;</p>
<p style="font-family: 'DM Serif Display', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--light); font-style: italic; line-height: 1.5;" data-de="„Manchmal braucht man Breier."" data-en="&quot;Sometimes you need Breier.&quot;">&bdquo;Manchmal braucht man Breier.&ldquo;</p>
<div style="width: 40px; height: 2px; background: var(--teal); margin: 1.5rem auto;"></div>
<p style="font-size: 0.85rem; color: var(--grey); letter-spacing: 0.1em;">— Zufriedener Kunde</p>
<p style="font-size: 0.85rem; color: var(--grey); letter-spacing: 0.1em;" data-de="— Zufriedener Kunde" data-en="— Satisfied client">— Zufriedener Kunde</p>
</div>
</section>
<!-- KONTAKT -->
<section class="kontakt" id="kontakt">
<div class="section-inner">
<span class="section-label">Kontakt</span>
<h2 class="section-title">Lassen Sie uns sprechen</h2>
<p class="kontakt-text">
<span class="section-label" data-de="Kontakt" data-en="Contact">Kontakt</span>
<h2 class="section-title" data-de="Lassen Sie uns sprechen" data-en="Let's talk">Lassen Sie uns sprechen</h2>
<p class="kontakt-text" data-de="Sie planen ein IT-Projekt oder suchen Unterstützung bei der digitalen Transformation?&lt;br&gt;Ich freue mich auf den Austausch." data-en="You're planning an IT project or looking for support with digital transformation?&lt;br&gt;I look forward to the exchange.">
Sie planen ein IT-Projekt oder suchen Unterstützung bei der digitalen Transformation?<br>
Ich freue mich auf den Austausch.
</p>
@@ -917,11 +917,11 @@
<div class="kontakt-meta">
<div class="kontakt-meta-item">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg>
Deutschland
<span data-de="Deutschland" data-en="Germany">Deutschland</span>
</div>
<div class="kontakt-meta-item">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
IT Projektmanagement
<span data-de="IT Projektmanagement" data-en="IT Project Management">IT Projektmanagement</span>
</div>
</div>
</div>
@@ -930,7 +930,11 @@
<!-- FOOTER -->
<footer>
<div class="footer-brand">Matthias Breier</div>
<p>IT Projektmanagement</p>
<p data-de="IT Projektmanagement" data-en="IT Project Management">IT Projektmanagement</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 rgba(255,255,255,0.3);color:rgba(255,255,255,0.3);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:rgba(255,255,255,0.3);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
</div>
</footer>
<script>
@@ -948,5 +952,6 @@
}, 3000);
</script>
<script src="/shared/i18n.js"></script>
</body>
</html>