Füge Installationshinweis für mobile Geräte hinzu

css/style.css

@@ -173,6 +173,58 @@ body::before {
   100% { transform: translate(-50%,-50%) scale(1.08); }
 }
 
+/* ── Install hint banner ── */
+#install-hint {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 12px 9px 16px;
+  background: rgba(129,140,248,0.07);
+  border-top: 1px solid rgba(129,140,248,0.14);
+  z-index: 50;
+  animation: hintSlide 280ms ease;
+}
+
+#install-hint svg {
+  flex-shrink: 0;
+  color: #818cf8;
+  opacity: 0.8;
+}
+
+#install-hint-text {
+  flex: 1;
+  font-size: 12px;
+  color: rgba(255,255,255,0.55);
+  line-height: 1.45;
+}
+
+#install-hint-text strong {
+  color: rgba(255,255,255,0.85);
+  font-weight: 600;
+}
+
+#install-hint-close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: rgba(255,255,255,0.25);
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
+  -webkit-tap-highlight-color: transparent;
+  transition: color 150ms;
+}
+
+#install-hint-close:hover,
+#install-hint-close:active { color: rgba(255,255,255,0.6); }
+
+@keyframes hintSlide {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
 /* ── Responsive ── */
 @media (min-width: 600px) {
   .finger { width: 80px; height: 80px; }

index.html

@@ -60,6 +60,15 @@
     </div>
   </main>
 
+  <div id="install-hint" style="display:none">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <rect x="3" y="3" width="18" height="18" rx="3"/>
+      <path d="M9 3v4M15 3v4M3 9h18M9 17l3-3 3 3M12 14v6"/>
+    </svg>
+    <span id="install-hint-text"></span>
+    <button id="install-hint-close" aria-label="Hinweis schließen">×</button>
+  </div>
+
   <footer id="legal-bar">
     <a href="impressum.html">Impressum</a>
     <span aria-hidden="true">·</span>
@@ -70,12 +79,37 @@
 
   <script>
     (function(){
+      // Device finger limit hint
       var el = document.getElementById('limit-hint');
       if(/iPhone/.test(navigator.userAgent)){
         el.textContent = 'Auf dem iPhone sind max. 5 Finger möglich (Hardware-Limit).';
       } else {
         el.textContent = 'Auf diesem Gerät sind mehrere Finger gleichzeitig möglich.';
       }
+
+      // Install hint — only when not already running as installed app
+      var isStandalone = window.navigator.standalone === true ||
+                         window.matchMedia('(display-mode: standalone)').matches;
+      if (isStandalone) return;
+      if (sessionStorage.getItem('ihd')) return;
+
+      var ua = navigator.userAgent;
+      var hint = document.getElementById('install-hint');
+      var text = document.getElementById('install-hint-text');
+
+      if (/iPhone|iPad|iPod/.test(ua)) {
+        text.innerHTML = 'Tippe auf <strong>Teilen ↑</strong> → <strong>„Zum Home‑Bildschirm"</strong> um die App zu installieren.';
+      } else if (/Android/.test(ua)) {
+        text.innerHTML = 'Tippe auf <strong>⋮</strong> → <strong>„App installieren"</strong> um die App zum Startbildschirm hinzuzufügen.';
+      } else {
+        return;
+      }
+
+      hint.style.display = 'flex';
+      document.getElementById('install-hint-close').addEventListener('click', function(){
+        hint.style.display = 'none';
+        sessionStorage.setItem('ihd', '1');
+      });
     })();
   </script>
   <script src="js/app.js"></script>