u

src/colors.js

@@ -332,6 +332,22 @@ export const SHADOW_TAB = `drop-shadow(0px 2px 4px ${shade(0.2)}) drop-shadow(0p
 export const SHADOW_BUBBLE_USER = `0 2px 8px ${BLUE_SHADOW}`;
 export const SHADOW_BUBBLE_ASSISTANT = `0 1px 4px ${TINT_ROW_HOVER}`;
 
+/* ────────────────────────────────────────────────────────────────────────────
+ * 10b. DIALOG FOG
+ *     Shared backdrop for every dialog (`src/components/AppDialog.jsx`).
+ *     Darker and more bluish than `MAIN_BACKGROUND`: deep-navy solid base
+ *     plus a translucent variant for the MUI backdrop layer. The solid
+ *     variant is also published as `--df-dialog-fog` so the
+ *     scrollbar-gutter placeholder can switch to the fog color while a
+ *     dialog is open (`html.df-dialog-open` in `src/index.css`).
+ * -------------------------------------------------------------------------*/
+
+/** Opaque fog base — deep navy with a blue push. */
+export const DIALOG_FOG_SOLID = mix(DARK_6, CHROMA.BLUE.dark, 0.42);
+
+/** Translucent backdrop wash painted over the page. */
+export const DIALOG_FOG = alpha(DIALOG_FOG_SOLID, 0.72);
+
 /* ────────────────────────────────────────────────────────────────────────────
  * 11. CSS VARIABLE BRIDGE
  *     `src/index.css` cannot import this module, so these few tokens are
@@ -340,6 +356,7 @@ export const SHADOW_BUBBLE_ASSISTANT = `0 1px 4px ${TINT_ROW_HOVER}`;
 
 export const CSS_VARS = {
   '--df-main-background': MAIN_BACKGROUND,
+  '--df-dialog-fog': DIALOG_FOG_SOLID,
   '--df-sort-ghost': SORT_GHOST,
   '--df-sort-ghost-tint': SORT_GHOST_BG,
   '--df-shadow-sortable': SHADOW_SORTABLE,

src/components/AppDialog.jsx

@@ -0,0 +1,107 @@
+import { Component } from 'react';
+import Dialog from '@mui/material/Dialog';
+import { DIALOG_FOG } from '../colors';
+
+/**
+ * Shared dialog shell — drop-in replacement for MUI `Dialog`.
+ *
+ * Guarantees across the whole app:
+ * - instant open/close (no Fade/scale animation): `transitionDuration={0}`
+ * - darker, bluish fog: backdrop `backgroundColor` = `DIALOG_FOG`
+ * - scrollbar-gutter matches the fog: toggles `df-dialog-open` on
+ *   `<html>` while any `AppDialog` is open (see `src/index.css`).
+ *
+ * Class component on purpose (PureComponent-free: open state is driven
+ * by props, state lives in the wrapped content).
+ *
+ * Usage:
+ *   import AppDialog from '../AppDialog';
+ *   <AppDialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
+ */
+class AppDialog extends Component {
+  static openCount = 0;
+
+  static updateFogClass() {
+    if (typeof document === 'undefined') return;
+    const html = document.documentElement;
+    if (!html) return;
+    if (AppDialog.openCount > 0) {
+      html.classList.add('df-dialog-open');
+    } else {
+      html.classList.remove('df-dialog-open');
+    }
+  }
+
+  static enter() {
+    AppDialog.openCount += 1;
+    AppDialog.updateFogClass();
+  }
+
+  static exit() {
+    AppDialog.openCount = Math.max(0, AppDialog.openCount - 1);
+    AppDialog.updateFogClass();
+  }
+
+  componentDidMount() {
+    if (this.props.open) AppDialog.enter();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.open && !prevProps.open) AppDialog.enter();
+    else if (!this.props.open && prevProps.open) AppDialog.exit();
+  }
+
+  componentWillUnmount() {
+    if (this.props.open) AppDialog.exit();
+  }
+
+  render() {
+    const {
+      transitionDuration: _transitionDuration,
+      TransitionProps: _transitionProps,
+      TransitionComponent: _transitionComponent,
+      slotProps: userSlotProps,
+      slots: userSlots,
+      ...rest
+    } = this.props;
+    void _transitionDuration;
+    void _transitionProps;
+    void _transitionComponent;
+
+    const userBackdrop = userSlotProps?.backdrop ?? {};
+    const { sx: userBackdropSx, ...restBackdrop } = userBackdrop;
+    const userTransition = userSlotProps?.transition ?? {};
+    const { transition: _userTransitionSlot, ...restSlots } = userSlots ?? {};
+    void _userTransitionSlot;
+
+    const slotProps = {
+      ...userSlotProps,
+      backdrop: {
+        ...restBackdrop,
+        sx: [
+          { backgroundColor: DIALOG_FOG },
+          ...(Array.isArray(userBackdropSx)
+            ? userBackdropSx
+            : userBackdropSx
+              ? [userBackdropSx]
+              : []),
+        ],
+      },
+      transition: {
+        ...userTransition,
+        timeout: 0,
+      },
+    };
+
+    return (
+      <Dialog
+        {...rest}
+        slots={restSlots}
+        slotProps={slotProps}
+        transitionDuration={0}
+      />
+    );
+  }
+}
+
+export default AppDialog;

src/components/CompanySettingsDialog.jsx

@@ -2,7 +2,7 @@ import { Component } from 'react';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from './AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -180,7 +180,7 @@ export default class CompanySettingsDialog extends Component {
       parsedReducedtaxrate != null;
 
     return (
-      <Dialog open={open} onClose={busy ? undefined : onClose} maxWidth="sm" fullWidth>
+      <AppDialog open={open} onClose={busy ? undefined : onClose} maxWidth="sm" fullWidth>
         <DialogTitle>Unternehmen bearbeiten</DialogTitle>
         <Box component="form" onSubmit={this.handleSubmit} noValidate>
           <DialogContent>
@@ -334,7 +334,7 @@ export default class CompanySettingsDialog extends Component {
             </Button>
           </DialogActions>
         </Box>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/CompanySetupDialog.jsx

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from './AppDialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Divider from '@mui/material/Divider';
@@ -268,7 +268,7 @@ class CompanySetupDialog extends Component {
       parsedReducedtaxrate != null;
 
     return (
-      <Dialog
+      <AppDialog
         open
         onClose={this.handleClose}
         maxWidth={hasCompanies ? 'sm' : 'md'}
@@ -551,7 +551,7 @@ class CompanySetupDialog extends Component {
             </Stack>
           )}
         </DialogContent>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/NameDialog.jsx

@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from './AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -65,7 +65,7 @@ class NameDialog extends Component {
     const canSave = name.trim() !== '';
 
     return (
-      <Dialog open={open} onClose={this.handleClose} maxWidth="xs" fullWidth>
+      <AppDialog open={open} onClose={this.handleClose} maxWidth="xs" fullWidth>
         <DialogTitle>{title}</DialogTitle>
         <Box component="form" onSubmit={this.handleSubmit} noValidate>
           <DialogContent>
@@ -97,7 +97,7 @@ class NameDialog extends Component {
             </Button>
           </DialogActions>
         </Box>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/article/ArticleImageSearchDialog.jsx

@@ -3,7 +3,7 @@ import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -317,7 +317,7 @@ export default class ArticleImageSearchDialog extends PureComponent {
     const isSerperKeyError = error && error.toLowerCase().includes('keys.serper');
 
     return (
-      <Dialog
+      <AppDialog
         open={open}
         onClose={processingId ? undefined : onClose}
         maxWidth="md"
@@ -719,7 +719,7 @@ export default class ArticleImageSearchDialog extends PureComponent {
             Schließen
           </Button>
         </DialogActions>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/article/ArticleNameDialog.jsx

@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -107,7 +107,7 @@ class ArticleNameDialog extends Component {
     const canSubmitBulk = bulkNames.length > 0;
 
     return (
-      <Dialog open={open} onClose={this.handleClose} maxWidth="xs" fullWidth>
+      <AppDialog open={open} onClose={this.handleClose} maxWidth="xs" fullWidth>
         <DialogTitle>Neuer Artikel</DialogTitle>
 
         {!isBulk && (
@@ -202,7 +202,7 @@ class ArticleNameDialog extends Component {
             </DialogActions>
           </Box>
         )}
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/article/ArticlePhotosDialog.jsx

@@ -2,7 +2,7 @@ import { Component, createRef } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -271,7 +271,7 @@ class ArticlePhotosDialog extends Component {
 
     return (
       <>
-        <Dialog open={open} onClose={this.handleClose} maxWidth="md" fullWidth>
+        <AppDialog open={open} onClose={this.handleClose} maxWidth="md" fullWidth>
           <DialogTitle>Bilder</DialogTitle>
           <DialogContent dividers>
             {photos.length === 0 ? (
@@ -324,7 +324,7 @@ class ArticlePhotosDialog extends Component {
               Schließen
             </Button>
           </DialogActions>
-        </Dialog>
+        </AppDialog>
         <input
           ref={this.fileInputRef}
           type="file"

src/components/article/ArticlePriceTiersDialog.jsx

@@ -3,7 +3,7 @@ import AddIcon from '@mui/icons-material/Add';
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -90,7 +90,7 @@ class ArticlePriceTiersDialog extends Component {
     const canApply = tiersValid(tiers);
 
     return (
-      <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <AppDialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
         <DialogTitle>Staffelpreise</DialogTitle>
         <DialogContent dividers>
           {tiers.length === 0 ? (
@@ -174,7 +174,7 @@ class ArticlePriceTiersDialog extends Component {
             Übernehmen
           </Button>
         </DialogActions>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/article/ArticleSearch.jsx

@@ -2,7 +2,7 @@ import { PureComponent, createRef } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -597,7 +597,7 @@ export default class ArticleSearch extends PureComponent {
     const isDialogOpen = isControlled ? Boolean(controlledOpen) : internalOpen;
 
     return (
-      <Dialog
+      <AppDialog
         open={isDialogOpen}
         onClose={this.handleCloseDialog}
         maxWidth="md"
@@ -660,7 +660,7 @@ export default class ArticleSearch extends PureComponent {
             Schließen
           </Button>
         </DialogActions>
-      </Dialog>
+      </AppDialog>
     );
   }
 

src/components/article/ArticleStockAdjustDialog.jsx

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -307,7 +307,7 @@ export default class ArticleStockAdjustDialog extends PureComponent {
       '';
 
     return (
-      <Dialog
+      <AppDialog
         open={Boolean(open)}
         onClose={submitting ? undefined : onClose}
         maxWidth="sm"
@@ -624,7 +624,7 @@ export default class ArticleStockAdjustDialog extends PureComponent {
                 : 'Speichern'}
           </Button>
         </DialogActions>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/article/ArticleSupplierDialog.jsx

@@ -2,7 +2,7 @@ import { PureComponent } from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -111,7 +111,7 @@ export default class ArticleSupplierDialog extends PureComponent {
     const puValid = parsedPu != null && parsedPu > 0;
 
     return (
-      <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <AppDialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
         <form onSubmit={this.handleSubmit}>
           <DialogTitle sx={{ fontWeight: 600 }}>
             {isEdit ? 'Lieferant bearbeiten' : 'Lieferant zuweisen'}
@@ -226,7 +226,7 @@ export default class ArticleSupplierDialog extends PureComponent {
             </Button>
           </DialogActions>
         </form>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/article/ArticleUnitEditorDialog.jsx

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -165,7 +165,7 @@ export default class ArticleUnitEditorDialog extends Component {
     const loading = unitsLoading && units.length === 0;
 
     return (
-      <Dialog open={open} onClose={busy ? undefined : onClose} maxWidth="md" fullWidth>
+      <AppDialog open={open} onClose={busy ? undefined : onClose} maxWidth="md" fullWidth>
         <DialogTitle>Einheiten</DialogTitle>
         <DialogContent dividers>
           <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
@@ -299,7 +299,7 @@ export default class ArticleUnitEditorDialog extends Component {
             Schließen
           </Button>
         </DialogActions>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/article/CategoryPickerDialog.jsx

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
@@ -145,7 +145,7 @@ export default class CategoryPickerDialog extends PureComponent {
         : EMPTY_ARRAY;
 
     return (
-      <Dialog
+      <AppDialog
         open={open}
         onClose={onClose}
         maxWidth="sm"
@@ -273,7 +273,7 @@ export default class CategoryPickerDialog extends PureComponent {
             </Button>
           </Box>
         </DialogActions>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/article/boxes/ArticleViewLists.jsx

@@ -6,7 +6,7 @@ import Button from '@mui/material/Button';
 import Checkbox from '@mui/material/Checkbox';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
@@ -1753,7 +1753,7 @@ export default class ArticleViewLists extends PureComponent {
         </Box>
 
         {/* Remove Child Confirmation Dialog */}
-        <Dialog
+        <AppDialog
           open={Boolean(removeTargetChild)}
           onClose={this.handleCloseRemoveDialog}
           maxWidth="xs"
@@ -1793,10 +1793,10 @@ export default class ArticleViewLists extends PureComponent {
               Vollständig löschen
             </Button>
           </DialogActions>
-        </Dialog>
+        </AppDialog>
 
         {/* Clear Stückliste / Optionen Confirmation Dialog */}
-        <Dialog
+        <AppDialog
           open={Boolean(confirmClearType)}
           onClose={() => this.setState({ confirmClearType: null })}
           maxWidth="xs"
@@ -1835,7 +1835,7 @@ export default class ArticleViewLists extends PureComponent {
               Auflösen
             </Button>
           </DialogActions>
-        </Dialog>
+        </AppDialog>
       </PanelTile>
     );
   }

src/components/brand/BrandImageSearchDialog.jsx

@@ -3,7 +3,7 @@ import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -238,7 +238,7 @@ export default class BrandImageSearchDialog extends PureComponent {
       error && error.toLowerCase().includes('keys.serper');
 
     return (
-      <Dialog
+      <AppDialog
         open={open}
         onClose={processingId ? undefined : onClose}
         maxWidth="md"
@@ -624,7 +624,7 @@ export default class BrandImageSearchDialog extends PureComponent {
             Schließen
           </Button>
         </DialogActions>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/category/CategoryNameDialog.jsx

@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -119,7 +119,7 @@ class CategoryNameDialog extends Component {
     const canSubmitBulk = bulkNames.length > 0;
 
     return (
-      <Dialog open={open} onClose={this.handleClose} maxWidth="xs" fullWidth>
+      <AppDialog open={open} onClose={this.handleClose} maxWidth="xs" fullWidth>
         <DialogTitle>{TITLES[mode]}</DialogTitle>
 
         {!isBulk && (
@@ -216,7 +216,7 @@ class CategoryNameDialog extends Component {
             </DialogActions>
           </Box>
         )}
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/category/CategoryTree.jsx

@@ -10,7 +10,7 @@ import InputAdornment from '@mui/material/InputAdornment';
 import Typography from '@mui/material/Typography';
 import Chip from '@mui/material/Chip';
 import Tooltip from '@mui/material/Tooltip';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
@@ -663,7 +663,7 @@ export default class CategoryTree extends PureComponent {
         </Box>
 
         {/* Add Dialog */}
-        <Dialog
+        <AppDialog
           open={addDialogOpen}
           onClose={() => !isSubmitting && this.setState({ addDialogOpen: false })}
           maxWidth="xs"
@@ -710,10 +710,10 @@ export default class CategoryTree extends PureComponent {
               Anlegen
             </Button>
           </DialogActions>
-        </Dialog>
+        </AppDialog>
 
         {/* Rename Dialog */}
-        <Dialog
+        <AppDialog
           open={renameDialogOpen}
           onClose={() => !isSubmitting && this.setState({ renameDialogOpen: false })}
           maxWidth="xs"
@@ -753,10 +753,10 @@ export default class CategoryTree extends PureComponent {
               Speichern
             </Button>
           </DialogActions>
-        </Dialog>
+        </AppDialog>
 
         {/* Delete Confirmation Dialog */}
-        <Dialog
+        <AppDialog
           open={deleteDialogOpen}
           onClose={() => !isSubmitting && this.setState({ deleteDialogOpen: false })}
           maxWidth="xs"
@@ -788,7 +788,7 @@ export default class CategoryTree extends PureComponent {
               Löschen
             </Button>
           </DialogActions>
-        </Dialog>
+        </AppDialog>
       </Box>
     );
   }

src/components/chat/NewConversationDialog.jsx

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
@@ -67,7 +67,7 @@ export default class NewConversationDialog extends PureComponent {
     const { provider, model, customModel, isCustom, loading, error } = this.state;
 
     return (
-      <Dialog
+      <AppDialog
         open={open}
         onClose={loading ? undefined : onClose}
         maxWidth="xs"
@@ -165,7 +165,7 @@ export default class NewConversationDialog extends PureComponent {
             </Button>
           </DialogActions>
         </form>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/manifest/ArticleSearchDialog.jsx

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -52,7 +52,7 @@ export default class ArticleSearchDialog extends PureComponent {
     const rawSku = line?.sku != null ? String(line.sku).trim() : '';
 
     return (
-      <Dialog
+      <AppDialog
         open={Boolean(open)}
         onClose={assigningSku ? undefined : onClose}
         maxWidth="md"
@@ -146,7 +146,7 @@ export default class ArticleSearchDialog extends PureComponent {
             Abbrechen
           </Button>
         </DialogActions>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/manifest/BookDeliveryDialog.jsx

@@ -2,7 +2,7 @@ import { PureComponent } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -507,7 +507,7 @@ export default class BookDeliveryDialog extends PureComponent {
     const isWarehouseMissing = !selectedWarehouseId;
 
     return (
-      <Dialog
+      <AppDialog
         open={Boolean(open)}
         onClose={isBooking ? undefined : onClose}
         maxWidth="md"
@@ -692,7 +692,7 @@ export default class BookDeliveryDialog extends PureComponent {
             </Button>
           )}
         </DialogActions>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/manifest/ManifestPdfDialog.jsx

@@ -4,7 +4,7 @@ import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
 import Collapse from '@mui/material/Collapse';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -113,7 +113,7 @@ export default function ManifestPdfDialog({
   const handleAbortOrClose = streaming ? (onAbort || onClose) : onClose;
 
   return (
-    <Dialog
+    <AppDialog
       open={open}
       onClose={handleAbortOrClose}
       maxWidth="sm"
@@ -244,6 +244,6 @@ export default function ManifestPdfDialog({
         )}
       </DialogActions>
 
-    </Dialog>
+    </AppDialog>
   );
 }

src/components/settings/PrinterSettingsPanel.jsx

@@ -3,7 +3,7 @@ import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -110,7 +110,7 @@ class PrinterFormDialog extends Component {
     const { open, onClose, title } = this.props;
     const { form, busy, error } = this.state;
     return (
-      <Dialog open={open} onClose={busy ? undefined : onClose} maxWidth="sm" fullWidth>
+      <AppDialog open={open} onClose={busy ? undefined : onClose} maxWidth="sm" fullWidth>
         <DialogTitle>{title}</DialogTitle>
         <DialogContent>
           <Stack spacing={2} sx={{ mt: 1 }}>
@@ -180,7 +180,7 @@ class PrinterFormDialog extends Component {
             {busy ? <CircularProgress size={18} /> : 'Speichern'}
           </Button>
         </DialogActions>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/components/settings/SettingsDialog.jsx

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import Box from '@mui/material/Box';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Tab from '@mui/material/Tab';
@@ -47,7 +47,7 @@ export default class SettingsDialog extends Component {
     const { tab } = this.state;
 
     return (
-      <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+      <AppDialog open={open} onClose={onClose} maxWidth="md" fullWidth>
         <DialogTitle>Einstellungen</DialogTitle>
         <Tabs
           value={tab}
@@ -74,7 +74,7 @@ export default class SettingsDialog extends Component {
             ))}
           </Box>
         </DialogContent>
-      </Dialog>
+      </AppDialog>
     );
   }
 }

src/index.css

@@ -43,6 +43,16 @@ html {
   scrollbar-gutter: stable;
 }
 
+/* While any AppDialog is open, the reserved scrollbar-gutter strip must read
+   as fog, not app background. AppDialog toggles `df-dialog-open` on <html>
+   (ref-counted for stacked dialogs). The solid fog token is published by
+   src/colors.js (installCssVars) with a hard-coded fallback. */
+html.df-dialog-open,
+html.df-dialog-open body,
+html.df-dialog-open #root {
+  background-color: var(--df-dialog-fog, #152e73);
+}
+
 /* SortableJS: Kategorie-Reorder im Edit-Modus.
    Colors come from CSS custom properties injected by src/colors.js
    (installCssVars), so this file stays in sync with the JS token module.

src/routes/artikel/vorlagen.jsx

@@ -2,7 +2,7 @@ import { PureComponent, lazy, Suspense } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../../components/AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -326,7 +326,7 @@ class ArtikelVorlagenPage extends PureComponent {
     const minHeightPx = getMinHeightPx(editorDpi);
 
     return (
-      <Dialog
+      <AppDialog
         open={editorOpen}
         onClose={this.handleEditorClose}
         maxWidth={false}
@@ -447,7 +447,7 @@ class ArtikelVorlagenPage extends PureComponent {
             {saving ? 'Speichert…' : 'Speichern'}
           </Button>
         </DialogActions>
-      </Dialog>
+      </AppDialog>
     );
   }