From c5ea006f8d3bf8dcae3fa0c59bb940cc48b44887 Mon Sep 17 00:00:00 2001
From: Maaxxs <61059039+MaaxxsDev@users.noreply.github.com>
Date: Mon, 6 Jul 2026 18:12:57 +0200
Subject: [PATCH] Replace dot grid with a subtle paper-grain texture, calm down
 the white

Swaps the dot grid for a fine SVG noise grain (evokes lightly crumpled
paper rather than a geometric grid), and darkens the base background
color in both themes so it's not a stark, glaring white/black anymore.

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

diff --git a/hifi-src/src/components/PublicLayout.jsx b/hifi-src/src/components/PublicLayout.jsx
index 7d1f8e6..ac7b878 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="page-texture 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 text-neutral-900 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 665b5c7..f4801a6 100644
--- a/hifi-src/src/index.css
+++ b/hifi-src/src/index.css
@@ -11,13 +11,16 @@ html {
   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. */
+/* Feines Papierkorn als Hintergrundstruktur statt einer reinen Flaeche - erinnert an
+   leicht zerknittertes Papier. Sehr kontrastarm, damit es nie mit Text/Bildern konkurriert.
+   Das Weiss ist bewusst etwas gedaempft (statt reinem #fff), das blendet weniger. */
 .page-texture {
-  background-image: radial-gradient(rgba(107, 166, 38, 0.16) 1px, transparent 1px);
-  background-size: 24px 24px;
+  background-color: #f2f1ec;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: 180px 180px;
 }
 
 .dark .page-texture {
-  background-image: radial-gradient(rgba(146, 212, 68, 0.12) 1px, transparent 1px);
+  background-color: #17160f;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }