From fcf9e61172394ba1fd0a059dd45cf4c052a7e40a Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Fri, 10 Jul 2026 20:52:30 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20Checkbox=20in=20Sichtbare-Bereiche-Modal?=
 =?UTF-8?q?=20jetzt=20zuverl=C3=A4ssig=20sichtbar=20(custom=20statt=20nati?=
 =?UTF-8?q?ve,=20appearance:none=20umgangen)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.jsx | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ea2a117..7fdcdb8 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -2490,18 +2490,27 @@ function UserManagement({ toast }) {
               {Object.entries(grouped).map(([group, tools]) => (
                 <div key={group} style={{marginBottom:14}}>
                   <div style={{...S.head,marginBottom:6}}>{group}</div>
-                  {tools.map(t => (
-                    <label key={t.id} style={{
-                      display:'flex',alignItems:'center',gap:8,padding:'6px 2px',cursor:'pointer',
-                    }}>
-                      <input type="checkbox" checked={visSelection.includes(t.id)}
-                        onChange={()=>toggleVisTool(t.id)}
-                        style={{width:15,height:15,accentColor:'#ff6b9d',flexShrink:0}}/>
-                      <span style={{color:'rgba(255,255,255,0.75)',fontFamily:'monospace',fontSize:12}}>
-                        {t.label}{t.adminOnly ? ' (nur Admin)' : ''}
-                      </span>
-                    </label>
-                  ))}
+                  {tools.map(t => {
+                    const checked = visSelection.includes(t.id);
+                    return (
+                      <label key={t.id} onClick={()=>toggleVisTool(t.id)} style={{
+                        display:'flex',alignItems:'center',gap:8,padding:'6px 2px',cursor:'pointer',
+                      }}>
+                        <span style={{
+                          width:16,height:16,borderRadius:4,flexShrink:0,
+                          display:'flex',alignItems:'center',justifyContent:'center',
+                          border:`1px solid ${checked ? '#ff6b9d' : 'rgba(255,255,255,0.3)'}`,
+                          background: checked ? '#ff6b9d' : 'transparent',
+                          transition:'all 0.1s ease',
+                        }}>
+                          {checked && <span style={{color:'#0d0d0f',fontSize:11,fontWeight:700,lineHeight:1}}>✓</span>}
+                        </span>
+                        <span style={{color:'rgba(255,255,255,0.75)',fontFamily:'monospace',fontSize:12}}>
+                          {t.label}{t.adminOnly ? ' (nur Admin)' : ''}
+                        </span>
+                      </label>
+                    );
+                  })}
                 </div>
               ))}
               <div style={{display:'flex',gap:8,marginTop:8}}>