Improve mobile UI responsiveness, touch tap-to-translate, and PWA icon

index.html

@@ -2,12 +2,17 @@
 <html lang="de">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <meta name="theme-color" content="#18181b" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <title>WortKraft — Beyond Duolingo German A2/B1</title>
+  <link rel="icon" type="image/svg+xml" href="icon.svg" />
+  <link rel="apple-touch-icon" href="icon.svg" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="styles.css?v=5" />
+  <link rel="stylesheet" href="styles.css?v=6" />
 </head>
 <body>
 
@@ -54,11 +59,11 @@
       </nav>
 
       <div class="header-actions">
-        <button id="hover-translate-toggle" class="hover-toggle-btn active" onclick="app.toggleHoverTranslate()" title="Wörter beim Drüberfahren (Hover) automatisch ins Englische übersetzen">
-          🔍 Hover-Übersetzer: <span id="hover-translate-status">AN</span>
+        <button id="hover-translate-toggle" class="hover-toggle-btn active" onclick="app.toggleHoverTranslate()" title="Wörter beim Drüberfahren (Hover) oder Antippen automatisch ins Englische übersetzen">
+          🔍 <span class="hover-label-text">Hover-Übersetzer: </span><span id="hover-translate-status">AN</span>
         </button>
         <div class="streak-chip" title="1400+ Days Foundation + Active Recall Streak">
-          🔥 <span id="streak-count">1401</span> Tage
+          🔥 <span id="streak-count">1401</span> <span class="streak-days-word">Tage</span>
         </div>
         <button class="icon-btn" onclick="app.openModal('add-word-modal')" title="Neues Wort hinzufügen (+)">➕</button>
         <button class="icon-btn" onclick="app.openModal('settings-modal')" title="KI & Einstellungen">⚙️</button>
@@ -491,11 +496,11 @@
   <div id="toast" class="toast-notification"></div>
 
   <!-- SCRIPTS -->
-  <script src="data/vocabulary.js?v=5"></script>
-  <script src="data/stories.js?v=5"></script>
-  <script src="data/scenarios.js?v=5"></script>
-  <script src="data/hover_dict.js?v=5"></script>
-  <script src="data/labs.js?v=5"></script>
-  <script src="app.js?v=5"></script>
+  <script src="data/vocabulary.js?v=6"></script>
+  <script src="data/stories.js?v=6"></script>
+  <script src="data/scenarios.js?v=6"></script>
+  <script src="data/hover_dict.js?v=6"></script>
+  <script src="data/labs.js?v=6"></script>
+  <script src="app.js?v=6"></script>
 </body>
 </html>