diff --git a/public/admin/index.html b/public/admin/index.html
index 4486b3a..fe502e8 100644
--- a/public/admin/index.html
+++ b/public/admin/index.html
@@ -99,6 +99,32 @@
 
     <button type="button" id="install-btn" title="Admin als App installieren">⬇️ Installieren</button>
     <script>
+      // WICHTIG gefundener Grund für das wacklige Installations-Icon bisher: Sveltia CMS liest
+      // selbst den "logo"-Eintrag oben in config.yml (der eigentlich nur fürs Branding IN der
+      // CMS-Oberfläche gedacht ist) und fügt daraus automatisch EIGENE <link rel="icon">,
+      // <link rel="apple-touch-icon"> und sogar ein eigenes, live generiertes
+      // <link rel="manifest"> (als blob:-URL) in den <head> ein — NACH unseren eigenen, fest
+      // im HTML stehenden Verknüpfungen. Zwei "rel=manifest"-Links gleichzeitig sind erlaubt,
+      // aber welcher davon beim Installieren gewinnt, ist nicht zuverlässig vorhersagbar —
+      // genau das erklärt, warum es mal geklappt hat und mal nicht. Fix: ein MutationObserver
+      // entfernt Sveltias eigene Icon-/Manifest-Verknüpfungen SOFORT wieder, sobald sie
+      // auftauchen, damit ausschließlich unsere eigenen (mit dem lila "V") übrig bleiben.
+      (function () {
+        var eigeneManifestUrl = location.origin + "/admin/manifest.webmanifest";
+        var beobachter = new MutationObserver(function (mutationen) {
+          mutationen.forEach(function (mutation) {
+            mutation.addedNodes.forEach(function (node) {
+              if (node.nodeName !== "LINK") return;
+              var rel = node.getAttribute("rel");
+              if (rel === "manifest" && node.href !== eigeneManifestUrl) node.remove();
+              if (rel === "icon" && node.href.indexOf("/logo.png") !== -1) node.remove();
+              if (rel === "apple-touch-icon" && node.href.indexOf("data:") === 0) node.remove();
+            });
+          });
+        });
+        beobachter.observe(document.head, { childList: true });
+      })();
+
       // Gleiches Prinzip wie auf der Hauptseite: Button nur zeigen, wenn der Browser die
       // Installation wirklich anbietet, und nicht mehr, sobald bereits als App installiert.
       (function () {
diff --git a/src/styles/global.css b/src/styles/global.css
index 23e4295..c5ee65e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -189,7 +189,10 @@ a.card:hover {
 .product-slot { display: flex; }
 .product-slot > a { flex: 1; }
 
-/* Badges */
+/* Badges — sitzen direkt auf Produktfotos (unterschiedlichste Hintergründe/Farben), deshalb
+   braucht die Pille genug eigene Kraft, um immer lesbar zu bleiben: kräftigerer (weniger
+   transparenter) Hintergrund + eigener Rand in derselben Farbe + dezenter Schlagschatten hinterm
+   Text. Farbton und Grundstil bleiben exakt gleich, nur die Durchsetzungskraft ist höher. */
 .badge {
   display: inline-block;
   font-size: 0.72rem;
@@ -198,11 +201,13 @@ a.card:hover {
   text-transform: uppercase;
   padding: 0.3em 0.75em;
   border-radius: 999px;
-  background: rgba(95, 211, 236, 0.14);
+  background: rgba(95, 211, 236, 0.34);
+  border: 1px solid rgba(95, 211, 236, 0.6);
   color: var(--c-accent);
+  text-shadow: 0 1px 3px rgba(10, 9, 16, 0.65);
 }
-.badge-sale { background: rgba(231, 135, 154, 0.16); color: var(--c-sale); }
-.badge-sold-out { background: rgba(183, 174, 196, 0.16); color: var(--c-text-muted); }
+.badge-sale { background: rgba(231, 135, 154, 0.36); border-color: rgba(231, 135, 154, 0.6); color: var(--c-sale); }
+.badge-sold-out { background: rgba(183, 174, 196, 0.32); border-color: rgba(183, 174, 196, 0.55); color: var(--c-text-muted); }
 
 /* Placeholder art (kein echtes Produktfoto vorhanden) */
 .img-placeholder {
