From 0a1b7315f6e84588c73da342851ff0c21889b491 Mon Sep 17 00:00:00 2001
From: Maaxxs <61059039+MaaxxsDev@users.noreply.github.com>
Date: Mon, 6 Jul 2026 18:08:05 +0200
Subject: [PATCH] Add a subtle dot-grid texture to page backgrounds

Plain white/black backgrounds now have a faint brand-green dot grid
(24px spacing, very low opacity) instead of a flat fill, in both light
and dark mode. Applied site-wide via the public layout wrapper.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 hifi-src/src/components/PublicLayout.jsx |  2 +-
 hifi-src/src/index.css                   | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/hifi-src/src/components/PublicLayout.jsx b/hifi-src/src/components/PublicLayout.jsx
index 71fb9ec..7d1f8e6 100644
--- a/hifi-src/src/components/PublicLayout.jsx
+++ b/hifi-src/src/components/PublicLayout.jsx
@@ -55,7 +55,7 @@ export default function PublicLayout() {
   return (
     <MaintenanceProvider value={{ ...status, bypass }}>
       <SiteSettingsProvider value={siteSettings}>
-        <div className="flex min-h-screen flex-col bg-white text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100">
+        <div className="page-texture flex min-h-screen flex-col bg-white text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100">
           {bypass && status.global.enabled && <MaintenanceBypassBanner />}
           <ScrollProgress />
           <Navbar />
diff --git a/hifi-src/src/index.css b/hifi-src/src/index.css
index 4c2a901..665b5c7 100644
--- a/hifi-src/src/index.css
+++ b/hifi-src/src/index.css
@@ -10,3 +10,14 @@ html {
   -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
   mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
 }
+
+/* Dezentes Punktraster als Hintergrundstruktur, statt einer reinen Flaeche.
+   Sehr kontrastarm gehalten, damit es nie mit Text oder Bildern konkurriert. */
+.page-texture {
+  background-image: radial-gradient(rgba(107, 166, 38, 0.16) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+.dark .page-texture {
+  background-image: radial-gradient(rgba(146, 212, 68, 0.12) 1px, transparent 1px);
+}