style(website): optimize SEO, UX, accessibility, and navigation icons

eslint.config.mjs

@@ -20,6 +20,7 @@ export default [
         fetch: "readonly",
         CustomEvent: "readonly",
         MutationObserver: "readonly",
+        IntersectionObserver: "readonly",
         Uint32Array: "readonly",
         Set: "readonly",
         Map: "readonly",

website/app.js

@@ -297,6 +297,18 @@ document.addEventListener('DOMContentLoaded', () => {
             if (badgeDe) {
                 badgeDe.textContent = `v${version} JETZT VERFÜGBAR • ${relativeTimeDe}`;
             }
+
+            // Update Schema.org structured data dynamically
+            const schemaScript = document.getElementById('schema-software');
+            if (schemaScript) {
+                try {
+                    const schema = JSON.parse(schemaScript.textContent);
+                    schema.softwareVersion = version;
+                    schemaScript.textContent = JSON.stringify(schema, null, 2);
+                } catch (err) {
+                    console.warn('Failed to dynamically update schema version:', err);
+                }
+            }
         } catch (e) {
             console.warn('Failed to fetch dynamic version info:', e);
         }
@@ -370,8 +382,12 @@ document.addEventListener('DOMContentLoaded', () => {
     const hamburger = document.querySelector('.hamburger');
     const navLinks = document.querySelector('.nav-links');
     if (hamburger && navLinks) {
+        // Initialize accessibility attribute
+        hamburger.setAttribute('aria-expanded', 'false');
+        
         hamburger.addEventListener('click', () => {
-            navLinks.classList.toggle('open');
+            const isOpen = navLinks.classList.toggle('open');
+            hamburger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
         });
     }
 

website/datenschutz.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Datenschutz / Privacy Policy | KoalaSync</title>
+    <link rel="preload" href="style.css" as="style">
     <link rel="stylesheet" href="style.css">
     <link rel="icon" type="image/png" href="assets/logo.png">
     <meta name="robots" content="noindex">
@@ -19,14 +20,23 @@
     <nav>
         <div class="container nav-content">
             <a href="index.html" class="logo-area" style="text-decoration: none;">
-                <img src="assets/logo.png" alt="KoalaSync Logo">
+                <img src="assets/logo.png" alt="KoalaSync Logo" width="40" height="40">
                 <span>KoalaSync</span>
             </a>
-            <button class="hamburger" aria-label="Menu">☰</button>
+            <button class="hamburger" aria-label="Menu" aria-expanded="false">☰</button>
             <div class="nav-links">
-                <a href="index.html"><span lang="de">Startseite</span><span lang="en">Home</span></a>
+                <a href="index.html" style="display: inline-flex; align-items: center; gap: 6px;">
-                <a href="https://github.com/Shik3i/KoalaSync" target="_blank">GitHub</a>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width: 16px; height: 16px; display: block;"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                <a class="lang-toggle" style="cursor: pointer;">🌐 EN/DE</a>
+                    <span lang="de">Startseite</span><span lang="en">Home</span>
+                </a>
+                <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="display: inline-flex; align-items: center; gap: 6px;">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+                    GitHub
+                </a>
+                <a class="lang-toggle" style="display: inline-flex; align-items: center; gap: 6px; cursor: pointer;">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width: 16px; height: 16px; display: block;"><path d="m5 8 6 6"></path><path d="m4 14 6-6 2-3"></path><path d="M2 5h12"></path><path d="M7 2h1"></path><path d="m22 22-5-10-5 10"></path><path d="M14 18h6"></path></svg>
+                    EN/DE
+                </a>
             </div>
         </div>
     </nav>
@@ -102,8 +112,39 @@
 
             <section>
                 <h2>
-                    <span lang="de">5. Brute-Force Schutz</span>
+                    <span lang="de">5. Berechtigungen der Erweiterung</span>
-                    <span lang="en">5. Brute-Force Protection</span>
+                    <span lang="en">5. Extension Permissions</span>
+                </h2>
+                <p lang="de">
+                    Um ihren technischen Zweck zu erfüllen, benötigt die Browser-Erweiterung bestimmte Berechtigungen. Jede Berechtigung wird ausschließlich für die Kernfunktionalität genutzt:
+                </p>
+                <ul lang="de" style="margin-left: 1.5rem; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.9rem; list-style-type: disc; display: flex; flex-direction: column; gap: 0.35rem;">
+                    <li><strong>storage</strong>: Erlaubt das lokale Speichern von Benutzernamen, Server-URLs und Raum-Zugangsdaten im Browser, damit Sie sich nicht jedes Mal neu anmelden müssen.</li>
+                    <li><strong>tabs</strong>: Wird benötigt, um geöffnete Tabs im Dropdown der Erweiterung aufzulisten und deren Titel auszulesen, damit Sie bequem den richtigen Video-Tab auswählen können.</li>
+                    <li><strong>scripting</strong>: Erforderlich, um das Synchronisationsskript (content.js) sicher in den von Ihnen ausgewählten Videotab zu injizieren.</li>
+                    <li><strong>alarms</strong>: Verhindert, dass der Hintergrunddienst der Erweiterung (Service Worker) während einer aktiven Synchronisationssitzung vom Browser in den Ruhezustand versetzt wird.</li>
+                    <li><strong>activeTab</strong>: Ermöglicht eine sichere, temporäre Interaktion mit dem momentan aktiven Tab für direkte Steuerungsbefehle.</li>
+                    <li><strong>notifications</strong>: Ermöglicht optionale Desktop-Benachrichtigungen, wenn beispielsweise ein neuer Freund dem Raum beitritt.</li>
+                    <li><strong>&lt;all_urls&gt; (Host-Berechtigung)</strong>: Ermöglicht der Erweiterung, auf beliebigen Webseiten nach HTML5-Videoelementen zu suchen, damit die Synchronisation plattformübergreifend (z. B. auf YouTube, Netflix, Jellyfin etc.) funktioniert.</li>
+                </ul>
+                <p lang="en" style="margin-top: 1.5rem;">
+                    To fulfill its technical purpose, the browser extension requires certain permissions. Each permission is used exclusively for core functionality:
+                </p>
+                <ul lang="en" style="margin-left: 1.5rem; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.9rem; list-style-type: disc; display: flex; flex-direction: column; gap: 0.35rem;">
+                    <li><strong>storage</strong>: Allows local storage of your username, server URL, and room credentials in your browser so you don't have to log in every time.</li>
+                    <li><strong>tabs</strong>: Required to list open tabs in the extension's dropdown and read their titles, making it easy for you to select the correct video tab.</li>
+                    <li><strong>scripting</strong>: Required to securely inject the synchronization script (content.js) into your selected video tab.</li>
+                    <li><strong>alarms</strong>: Prevents the extension's background service worker from being suspended by the browser during an active synchronization session.</li>
+                    <li><strong>activeTab</strong>: Enables secure, temporary interaction with the currently active tab for direct playback commands.</li>
+                    <li><strong>notifications</strong>: Enables optional desktop notifications, such as when a new friend joins the room.</li>
+                    <li><strong>&lt;all_urls&gt; (Host permission)</strong>: Allows the extension to scan for HTML5 video elements on any website, enabling cross-platform synchronization (e.g., on YouTube, Netflix, Jellyfin etc.).</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>
+                    <span lang="de">6. Brute-Force Schutz</span>
+                    <span lang="en">6. Brute-Force Protection</span>
                 </h2>
                 <p lang="de">
                     Zur Sicherheit unserer Nutzer speichern wir fehlgeschlagene Login-Versuche (IP-Adresse und Raum-ID) für maximal 15 Minuten im RAM, um automatisierte Angriffe zu verhindern. Diese Daten werden danach rückstandslos gelöscht.
@@ -115,8 +156,8 @@
 
             <section>
                 <h2>
-                    <span lang="de">6. Ihre Rechte</span>
+                    <span lang="de">7. Ihre Rechte</span>
-                    <span lang="en">6. Your Rights</span>
+                    <span lang="en">7. Your Rights</span>
                 </h2>
                 <p lang="de">
                     Sie haben das Recht auf Auskunft, Berichtigung oder Löschung Ihrer Daten. Da wir jedoch keine personenbezogenen Daten dauerhaft speichern, ist eine Zuordnung zu Ihrer Person in der Regel technisch nicht möglich.

website/impressum.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Impressum / Legal Notice | KoalaSync</title>
+    <link rel="preload" href="style.css" as="style">
     <link rel="stylesheet" href="style.css">
     <link rel="icon" type="image/png" href="assets/logo.png">
     <meta name="robots" content="noindex">
@@ -19,14 +20,23 @@
     <nav>
         <div class="container nav-content">
             <a href="index.html" class="logo-area" style="text-decoration: none;">
-                <img src="assets/logo.png" alt="KoalaSync Logo">
+                <img src="assets/logo.png" alt="KoalaSync Logo" width="40" height="40">
                 <span>KoalaSync</span>
             </a>
-            <button class="hamburger" aria-label="Menu">☰</button>
+            <button class="hamburger" aria-label="Menu" aria-expanded="false">☰</button>
             <div class="nav-links">
-                <a href="index.html"><span lang="de">Startseite</span><span lang="en">Home</span></a>
+                <a href="index.html" style="display: inline-flex; align-items: center; gap: 6px;">
-                <a href="https://github.com/Shik3i/KoalaSync" target="_blank">GitHub</a>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width: 16px; height: 16px; display: block;"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                <a class="lang-toggle" style="cursor: pointer;">🌐 EN/DE</a>
+                    <span lang="de">Startseite</span><span lang="en">Home</span>
+                </a>
+                <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="display: inline-flex; align-items: center; gap: 6px;">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+                    GitHub
+                </a>
+                <a class="lang-toggle" style="display: inline-flex; align-items: center; gap: 6px; cursor: pointer;">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width: 16px; height: 16px; display: block;"><path d="m5 8 6 6"></path><path d="m4 14 6-6 2-3"></path><path d="M2 5h12"></path><path d="M7 2h1"></path><path d="m22 22-5-10-5 10"></path><path d="M14 18h6"></path></svg>
+                    EN/DE
+                </a>
             </div>
         </div>
     </nav>

website/index.html

@@ -6,6 +6,7 @@
     <title>KoalaSync | Sync Netflix, Emby, Jellyfin & Any Video with Friends – Browser Extension</title>
     <meta name="description" content="Watch Netflix, Emby, Jellyfin, YouTube, Twitch and any HTML5 video in perfect sync with friends. KoalaSync is a privacy-first, open-source browser extension for Chrome and Firefox. Works on almost any site with a video element.">
     
+    <link rel="preload" href="style.css" as="style">
     <link rel="stylesheet" href="style.css">
     <link rel="icon" type="image/png" href="assets/logo.png">
     <link rel="canonical" href="https://sync.koalastuff.net/">
@@ -17,6 +18,26 @@
     <meta property="og:url" content="https://sync.koalastuff.net/">
 
     <script src="lang-init.js"></script>
+    
+    <!-- Structured Data (Schema.org) for Rich Snippets -->
+    <script type="application/ld+json" id="schema-software">
+    {
+      "@context": "https://schema.org",
+      "@type": "SoftwareApplication",
+      "name": "KoalaSync",
+      "operatingSystem": "Windows, macOS, Linux, ChromeOS",
+      "applicationCategory": "BrowserApplication",
+      "browserRequirements": "Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Brave",
+      "offers": {
+        "@type": "Offer",
+        "price": "0",
+        "priceCurrency": "EUR"
+      },
+      "description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and any HTML5 video in perfect sync with friends. Open source, privacy-first, free.",
+      "softwareVersion": "1.9.3",
+      "license": "https://opensource.org/licenses/MIT"
+    }
+    </script>
 </head>
 <body>
 
@@ -29,10 +50,10 @@
     <nav>
         <div class="container nav-content">
             <div class="logo-area">
-                <img src="assets/logo.png" alt="KoalaSync Logo">
+                <img src="assets/logo.png" alt="KoalaSync Logo" width="40" height="40">
                 <span>KoalaSync</span>
             </div>
-            <button class="hamburger" aria-label="Menu">☰</button>
+            <button class="hamburger" aria-label="Menu" aria-expanded="false">☰</button>
             <div class="nav-links">
                 <a href="#features"><span lang="en">Features</span><span lang="de">Funktionen</span></a>
                 <a href="#how-it-works"><span lang="en">How it works</span><span lang="de">So funktioniert's</span></a>
@@ -41,7 +62,7 @@
                     GitHub
                 </a>
                 <a class="lang-toggle" style="display: inline-flex; align-items: center; gap: 6px; cursor: pointer;">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width: 16px; height: 16px; display: block;"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width: 16px; height: 16px; display: block;"><path d="m5 8 6 6"></path><path d="m4 14 6-6 2-3"></path><path d="M2 5h12"></path><path d="M7 2h1"></path><path d="m22 22-5-10-5 10"></path><path d="M14 18h6"></path></svg>
                     EN/DE
                 </a>
             </div>
@@ -62,11 +83,11 @@
                 </h2>
                 <div class="cta-group" data-reveal>
                     <a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
-                        <img src="assets/chrome.svg" alt="Chrome" width="20">
+                        <img src="assets/chrome.svg" alt="Chrome" width="20" height="20">
                         <span lang="en">Add to Chrome</span><span lang="de">Zu Chrome hinzufügen</span>
                     </a>
                     <a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox">
-                        <img src="assets/firefox.svg" alt="Firefox" width="20">
+                        <img src="assets/firefox.svg" alt="Firefox" width="20" height="20">
                         <span lang="en">Add to Firefox</span><span lang="de">Zu Firefox hinzufügen</span>
                     </a>
                     <a href="https://github.com/Shik3i/KoalaSync/releases" target="_blank" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 8px;">
@@ -80,7 +101,7 @@
             <div class="hero-mockup-wrapper" data-reveal>
                 <div class="extension-mockup">
                     <div class="mock-header">
-                        <img src="assets/logo.png" alt="KoalaSync">
+                        <img src="assets/logo.png" alt="KoalaSync" width="20" height="20">
                         <span>KOALASYNC</span>
                     </div>
                     <div class="mock-tabs">
@@ -524,7 +545,7 @@
                                     <span class="illus-dot"></span>
                                 </div>
                                 <div class="illus-address-bar"></div>
-                                <div class="illus-extension-icon"><img src="assets/logo.png" alt="KoalaSync" style="width: 12px; height: 12px; display: block; object-fit: contain;"></div>
+                                <div class="illus-extension-icon"><img src="assets/logo.png" alt="KoalaSync" width="12" height="12" style="width: 12px; height: 12px; display: block; object-fit: contain;"></div>
                             </div>
                             <div class="illus-browser-body">
                                 <div class="illus-line-placeholder" style="width: 80%;"></div>
@@ -678,11 +699,11 @@
             </p>
             <div class="cta-group" data-reveal style="justify-content: center; gap: 1rem;">
                 <a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
-                    <img src="assets/chrome.svg" alt="Chrome" width="20">
+                    <img src="assets/chrome.svg" alt="Chrome" width="20" height="20">
                     <span lang="en">Add to Chrome</span><span lang="de">Zu Chrome hinzufügen</span>
                 </a>
                 <a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox">
-                    <img src="assets/firefox.svg" alt="Firefox" width="20">
+                    <img src="assets/firefox.svg" alt="Firefox" width="20" height="20">
                     <span lang="en">Add to Firefox</span><span lang="de">Zu Firefox hinzufügen</span>
                 </a>
                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 8px;">

website/join.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Join Room | KoalaSync</title>
+    <link rel="preload" href="style.css" as="style">
     <link rel="stylesheet" href="style.css">
     <link rel="icon" type="image/png" href="assets/logo.png">
     <meta name="robots" content="noindex">
@@ -19,18 +20,21 @@
     <nav>
         <div class="container nav-content">
             <a href="index.html" class="logo-area" style="text-decoration: none;">
-                <img src="assets/logo.png" alt="KoalaSync Logo">
+                <img src="assets/logo.png" alt="KoalaSync Logo" width="40" height="40">
                 <span>KoalaSync</span>
             </a>
-            <button class="hamburger" aria-label="Menu">☰</button>
+            <button class="hamburger" aria-label="Menu" aria-expanded="false">☰</button>
             <div class="nav-links">
-                <a href="index.html"><span lang="de">Startseite</span><span lang="en">Home</span></a>
+                <a href="index.html" style="display: inline-flex; align-items: center; gap: 6px;">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width: 16px; height: 16px; display: block;"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    <span lang="de">Startseite</span><span lang="en">Home</span>
+                </a>
                 <a href="https://github.com/shik3i/KoalaSync" target="_blank" style="display: inline-flex; align-items: center; gap: 6px;">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                     GitHub
                 </a>
                 <a class="lang-toggle" style="display: inline-flex; align-items: center; gap: 6px; cursor: pointer;">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width: 16px; height: 16px; display: block;"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width: 16px; height: 16px; display: block;"><path d="m5 8 6 6"></path><path d="m4 14 6-6 2-3"></path><path d="M2 5h12"></path><path d="M7 2h1"></path><path d="m22 22-5-10-5 10"></path><path d="M14 18h6"></path></svg>
                     EN/DE
                 </a>
             </div>