diff --git a/templates/index.html b/templates/index.html
index 91bc06e..7f0c6f2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -22,6 +22,48 @@
     <link rel="stylesheet" href="/static/style.css">
     <link rel="manifest" href="/static/manifest.json">
     <meta name="theme-color" content="#2563eb">
+    <style>
+    .pwa-banner {
+        display: none;
+        position: fixed;
+        bottom: 0; left: 0; right: 0;
+        background: #2563eb;
+        color: #fff;
+        padding: 1em 1.5em 1.2em 1.5em;
+        box-shadow: 0 -2px 12px #1e293b22;
+        z-index: 1000;
+        font-size: 1.08em;
+        text-align: center;
+        border-radius: 16px 16px 0 0;
+        margin: 0 auto;
+        max-width: 480px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .pwa-banner button {
+        background: #fff;
+        color: #2563eb;
+        border: none;
+        border-radius: 6px;
+        font-weight: 600;
+        padding: 0.5em 1.2em;
+        margin-left: 1em;
+        cursor: pointer;
+    }
+    .pwa-banner .close-btn {
+        background: none;
+        color: #fff;
+        border: none;
+        font-size: 1.3em;
+        position: absolute;
+        right: 1.2em;
+        top: 0.7em;
+        cursor: pointer;
+    }
+    @media (min-width: 600px) {
+        .pwa-banner { max-width: 420px; }
+    }
+    </style>
     <script>
         function setToday(id) {
             const today = new Date().toISOString().split('T')[0];
@@ -38,6 +80,39 @@
         document.addEventListener('DOMContentLoaded', function() {
             openAccordion(parseInt("{{ active_idx|default(0) }}"));
         });
+        let deferredPrompt;
+        function isIos() {
+            return /iphone|ipad|ipod/i.test(navigator.userAgent);
+        }
+        function isInStandaloneMode() {
+            return ('standalone' in window.navigator) && window.navigator.standalone;
+        }
+        window.addEventListener('beforeinstallprompt', (e) => {
+            e.preventDefault();
+            deferredPrompt = e;
+            showPwaBanner('Installiere diese App für ein besseres Erlebnis!');
+            document.getElementById('pwa-install-btn').style.display = '';
+        });
+        function showPwaBanner(text) {
+            const banner = document.getElementById('pwa-banner');
+            document.getElementById('pwa-banner-text').textContent = text;
+            banner.style.display = 'block';
+        }
+        document.getElementById('pwa-install-btn').addEventListener('click', function() {
+            if (deferredPrompt) {
+                deferredPrompt.prompt();
+                deferredPrompt.userChoice.then(() => {
+                    deferredPrompt = null;
+                    document.getElementById('pwa-banner').style.display = 'none';
+                });
+            }
+        });
+        // iOS Fallback
+        window.addEventListener('load', function() {
+            if (isIos() && !isInStandaloneMode()) {
+                showPwaBanner('Tipp: Über das Teilen-Menü → Zum Home-Bildschirm hinzufügen');
+            }
+        });
         if ('serviceWorker' in navigator) {
             window.addEventListener('load', function() {
                 navigator.serviceWorker.register('/static/service-worker.js');
@@ -46,6 +121,11 @@
     </script>
 </head>
 <body>
+    <div id="pwa-banner" class="pwa-banner">
+        <span id="pwa-banner-text"></span>
+        <button id="pwa-install-btn" style="display:none;">Installieren</button>
+        <button class="close-btn" onclick="document.getElementById('pwa-banner').style.display='none'">×</button>
+    </div>
     <div class="container">
         <h1>Elpatrons Datumsrechner</h1>
         <div class="accordion">
