fix port

static/css/style.css

@@ -222,18 +222,23 @@ section a:hover {
     min-width: 80px;
     overflow: hidden;
     border-radius: 8px;
-    background-color: #f0f0f0;
+    /* Use white background so transparent PNGs render consistently */
+    background-color: #ffffff;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 1;
     cursor: pointer;
 }
 
 .course-image img {
+    display: block;
+    /* avoid inline gaps */
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     transition: transform 0.3s ease;
+    background-color: #ffffff;
+    /* ensure transparent PNGs look the same as JPGs */
 }
 
 .course-card:hover .course-image {
@@ -375,6 +380,8 @@ section a:hover {
     border-radius: 8px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
     animation: zoomIn 0.3s ease;
+    background-color: #ffffff;
+    /* ensure modal shows PNGs on white */
 }
 
 @keyframes zoomIn {

templates/landing.html

@@ -111,6 +111,14 @@
             </div>
         </a>
 
+        <a class="link-card" href="http://voicepi.local:1024" target="_blank">
+            <i class="fas fa-microchip card-icon"></i>
+            <div class="card-content">
+                <div class="title">Calliope Flasher on VoicePi</div>
+                <div class="tagline">Flash Calliope / micro:bit-compatible devices connected to VoicePi.</div>
+            </div>
+        </a>
+
         <a class="link-card" href="mailto:einszwovier@gvb-gymnasium.de" target="_blank">
             <i class="fas fa-envelope card-icon"></i>
             <div class="card-content">