diff --git a/web/src/App.tsx b/web/src/App.tsx
index b0e41a3..cc53611 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -464,8 +464,8 @@ export default function App() {
                             setShowEmojiPicker(v=>!v);
                           }}
                         >Custom Emoji</button>
-                        {showEmojiPicker && (
-                          <div ref={emojiPickerRef as any} className="emoji-picker" style={{ position:'fixed', left: emojiPos.left, top: emojiPos.top, zIndex: 999999 }}>
+                        {showEmojiPicker && typeof document !== 'undefined' && ReactDOM.createPortal(
+                          <div ref={emojiPickerRef as any} className="emoji-picker" style={{ position:'fixed', left: emojiPos.left, top: emojiPos.top, zIndex: 300000 }}>
                             {EMOJIS.map((e, i)=> (
                               <button key={i} onClick={async ()=>{
                                 try{
@@ -478,7 +478,8 @@ export default function App() {
                                 }catch(err:any){ setError(err?.message||'Badge-Update fehlgeschlagen'); setInfo(null); }
                               }}>{e}</button>
                             ))}
-                          </div>
+                          </div>,
+                          document.body
                         )}
                       </div>
 
diff --git a/web/src/styles.css b/web/src/styles.css
index af97ed4..aa147e8 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -452,6 +452,7 @@ header p {
   display: grid; grid-template-columns: repeat(10, 2rem); gap: .25rem; padding: .5rem;
   max-height: 260px; overflow: auto; background: #0f1530; border:1px solid rgba(255,255,255,.28); border-radius: 12px;
   box-shadow: 0 24px 48px rgba(0,0,0,.6);
+  z-index: 300000;
 }
 .emoji-picker button { background: transparent; border: 0; font-size: 1.25rem; cursor: pointer; }
 .emoji-picker button:hover { filter: brightness(1.2); }