Kleinere Verbesserungen

src/components/LightboxGallery.astro

@@ -40,7 +40,7 @@ const scrollRightId = `${rootId}-scroll-right`;
       <div
         id={stripId}
         data-lb-strip
-        class="no-scrollbar flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory pb-2">
+        class="no-scrollbar flex gap-4 overflow-x-auto overflow-y-hidden scroll-smooth snap-x snap-mandatory pb-2">
         {images.map((img, i) => (
           <Surface
             as="button"
@@ -130,11 +130,14 @@ const scrollRightId = `${rootId}-scroll-right`;
             id={closeId}
             data-lb-close
             type="button"
-            class="inline-flex items-center gap-2 px-3 py-2"
+            class="group inline-flex h-10 w-10 items-center justify-center p-0"
             aria-label="Schließen"
           >
-            <Icon name="x" size={18} class="text-muted" />
-            <span class="hidden sm:inline text-sm text-muted">Schließen</span>
+            <Icon
+              name="x"
+              size={18}
+              class="text-muted transition-colors group-hover:text-accent group-focus-visible:text-accent"
+            />
           </Surface>
         </div>
 
@@ -181,4 +184,4 @@ const scrollRightId = `${rootId}-scroll-right`;
       </Surface>
     </div>
   </div>
-</div>
+</div>

src/components/Surface.astro

@@ -45,7 +45,9 @@ const VARIANTS: Record<Variant, string> = {
   overlayControl: "rounded-[var(--r-card)] border border-border/70 bg-bg/35 backdrop-blur hover:bg-bg/55 transition",
 };
 
-const classes = `${VARIANTS[variant]} ${className}`.trim();
+const isButtonLike = Tag === "button" || rest.role === "button";
+const interactiveClasses = isButtonLike ? "cursor-pointer disabled:cursor-not-allowed" : "";
+const classes = `${VARIANTS[variant]} ${interactiveClasses} ${className}`.trim();
 ---
 
 <Tag class={classes} {...rest}>

src/scripts/minecraftStatus.ts

@@ -26,9 +26,15 @@ function setState(
   const textEl = root.querySelector<HTMLElement>("[data-mc-text]");
   if (!dotEl || !valueEl || !textEl) return;
 
-  dotEl.classList.remove("bg-emerald-500/80", "bg-red-500/80", "bg-border");
-  if (state === "online") dotEl.classList.add("bg-emerald-500/80");
-  else if (state === "offline") dotEl.classList.add("bg-red-500/80");
+  dotEl.classList.remove(
+    "bg-emerald-500/80",
+    "bg-red-500/80",
+    "bg-border",
+    "mc-dot-online",
+  );
+  if (state === "online") {
+    dotEl.classList.add("bg-emerald-500/80", "mc-dot-online");
+  } else if (state === "offline") dotEl.classList.add("bg-red-500/80");
   else dotEl.classList.add("bg-border");
 
   valueEl.textContent = valueText;

src/styles/global.css

@@ -277,6 +277,9 @@ a {
   .blob-float-c {
     animation: blob-float 22s ease-in-out infinite;
   }
+  .mc-dot-online {
+    animation: mc-dot-pulse 2.6s ease-out infinite;
+  }
 }
 @keyframes blob-float {
   0%,
@@ -287,6 +290,17 @@ a {
     transform: translate3d(10px, -14px, 0) scale(1.03);
   }
 }
+@keyframes mc-dot-pulse {
+  0% {
+    box-shadow: 0 0 0 0 hsl(142 70% 45% / 0.42);
+  }
+  78% {
+    box-shadow: 0 0 0 0.46rem hsl(142 70% 45% / 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0.46rem hsl(142 70% 45% / 0);
+  }
+}
 
 /* --- Scroll-Reveal (JS-optimiert, aber ohne JS trotzdem ok) --- */
 html[data-js="true"] .reveal {