diff --git a/app/globals.css b/app/globals.css
index 9e6d7af..6c32368 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,3 +3,25 @@
 @plugin "@tailwindcss/typography";
 
 @import "./styles/theme.css";
+
+/* Debug-mode overlay (alleen actief wanneer body.debug-mode is gezet door dev-only toggle) */
+body.debug-mode [data-debug-id] {
+  outline: 2px dashed var(--info);
+  outline-offset: 1px;
+  position: relative;
+}
+body.debug-mode [data-debug-id]:hover::after {
+  content: attr(data-debug-label);
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: var(--info-container);
+  color: var(--info-container-foreground);
+  font-size: 10px;
+  line-height: 1.2;
+  padding: 2px 4px;
+  white-space: nowrap;
+  border-radius: 2px;
+  z-index: 9999;
+  pointer-events: none;
+}