u

src/components/article/ArticleSearch.jsx

@@ -228,7 +228,9 @@ class SearchResultRow extends PureComponent {
                   {' · '}
                 </>
               )}
-              {article.sku}
+              <Box component="span" sx={{ fontFamily: 'monospace' }}>
+                {article.sku}
+              </Box>
               {article.stock != null && (
                 <>
                   {' · '}
@@ -781,16 +783,17 @@ export default class ArticleSearch extends PureComponent {
 
               <Box sx={{ flex: 1, minWidth: 0 }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
-                  <Chip
+                    <Chip
-                    size="small"
+                      size="small"
-                    label={article.sku}
+                      label={article.sku}
-                    sx={{
+                      sx={{
-                      height: 18,
+                        height: 18,
-                      fontSize: '0.68rem',
+                        fontSize: '0.68rem',
-                      fontWeight: 600,
+                        fontWeight: 600,
-                      bgcolor: 'action.hover',
+                        fontFamily: 'monospace',
-                    }}
+                        bgcolor: 'action.hover',
-                  />
+                      }}
+                    />
                   <Typography variant="body2" fontWeight={600} noWrap sx={{ flex: 1 }}>
                     {article.name || '–'}
                   </Typography>

src/components/article/ArticleStockAdjustDialog.jsx

@@ -358,7 +358,7 @@ export default class ArticleStockAdjustDialog extends PureComponent {
               }}
             >
               <Typography variant="caption" color="text.secondary" display="block">
-                Artikel ({article?.sku})
+                Artikel (<Box component="span" sx={{ fontFamily: 'monospace' }}>{article?.sku}</Box>)
               </Typography>
               <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                 {article?.name || '–'}

src/components/article/boxes/ArticleViewEANs.jsx

@@ -152,7 +152,7 @@ export default class ArticleViewEANs extends PureComponent {
 
     return (
       <EditablePanelTile
-        title={articleData.sku}
+        title={<Box component="span" sx={{ fontFamily: 'monospace' }}>{articleData.sku}</Box>}
         wide={1}
         minHeight={SECOND_ROW_MIN_HEIGHT}
         color={BORDER}

src/components/article/boxes/ArticleViewLists.jsx

@@ -875,6 +875,7 @@ export default class ArticleViewLists extends PureComponent {
                       to={artikelDetailPath(item.sku)}
                       sx={{
                         fontSize: '0.72rem',
+                        fontFamily: 'monospace',
                         color: 'text.secondary',
                         textDecoration: 'none',
                         '&:hover': { textDecoration: 'underline' },
@@ -1085,6 +1086,7 @@ export default class ArticleViewLists extends PureComponent {
                         to={artikelDetailPath(opt.sku)}
                         sx={{
                           fontSize: '0.72rem',
+                          fontFamily: 'monospace',
                           color: 'text.secondary',
                           textDecoration: 'none',
                           '&:hover': { textDecoration: 'underline' },

src/components/kunde/Kunde.jsx

@@ -165,6 +165,7 @@ class Kunde extends PureComponent {
               height: 24,
               fontSize: '0.75rem',
               fontWeight: 600,
+              fontFamily: 'monospace',
               fontVariantNumeric: 'tabular-nums',
               bgcolor: 'action.hover',
               color: 'text.primary',

src/components/manifest/ArticleSearchDialog.jsx

@@ -130,7 +130,7 @@ export default class ArticleSearchDialog extends PureComponent {
             <Typography variant="caption" color="text.secondary">
               {line ? (
                 <>
-                  {isDelivery ? 'Lieferanten-ArtNr' : 'ArtNr'}: <strong>{rawSku || '–'}</strong>
+                  {isDelivery ? 'Lieferanten-ArtNr' : 'ArtNr'}: <strong style={{ fontFamily: 'monospace' }}>{rawSku || '–'}</strong>
                   {line?.name ? ` · ${line.name}` : ''}
                 </>
               ) : isDelivery ? (

src/components/manifest/BookDeliveryDialog.jsx

@@ -780,7 +780,16 @@ export default class BookDeliveryDialog extends PureComponent {
               {prefillLine && (
                 <Alert severity="info" sx={{ mb: 2 }}>
                   Vorausgewählt zum Verbuchen: Position{' '}
-                  <strong>{prefillLine.sku ? `ArtNr ${prefillLine.sku}` : prefillLine.name}</strong> ({amountsToBook[prefillLine.id] || 0} Stk.). Andere Positionen stehen auf 0.
+                  {prefillLine.sku ? (
+                    <>
+                      {'ArtNr '}
+                      <Box component="span" sx={{ fontFamily: 'monospace', fontWeight: 700 }}>
+                        {prefillLine.sku}
+                      </Box>
+                    </>
+                  ) : (
+                    <strong>{prefillLine.name}</strong>
+                  )} ({amountsToBook[prefillLine.id] || 0} Stk.). Andere Positionen stehen auf 0.
                 </Alert>
               )}
               {this.renderLinesTable()}

src/components/manifest/DeliveryList.jsx

@@ -122,8 +122,8 @@ function renderInvisibleDummyRow(dummy) {
   return (
     <>
       <Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
-        <Typography variant="body1" sx={{ fontWeight: 600 }}>{d.number}</Typography>
+        <Typography variant="body1" sx={{ fontWeight: 600, fontFamily: 'monospace' }}>{d.number}</Typography>
-        <Typography variant="body2">{d.externalNumber || 'Nr. / Ref.'}</Typography>
+        <Typography variant="body2" sx={{ fontFamily: 'monospace' }}>{d.externalNumber || 'Nr. / Ref.'}</Typography>
       </Box>
       <Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
         <Typography variant="body2">{d.date ? formatDate(d.date) : '–'}</Typography>
@@ -241,10 +241,10 @@ class DeliveryRow extends Component {
         {renderInvisibleDummyRow(dummy)}
 
         <Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          <Typography variant="body1" sx={{ fontWeight: 600, ...ellipsisSx }}>
+          <Typography variant="body1" sx={{ fontWeight: 600, fontFamily: 'monospace', ...ellipsisSx }}>
             {delivery.number}
           </Typography>
-          <Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
+          <Typography variant="body2" color="text.secondary" sx={{ fontFamily: 'monospace', ...ellipsisSx }}>
             {numberDisplay(delivery.externalNumber)}
           </Typography>
         </Box>

src/components/manifest/ManifestFormLine.jsx

@@ -392,7 +392,7 @@ class ManifestFormLine extends PureComponent {
           slotProps={{
             htmlInput: {
               inputMode: type === 'number' ? 'decimal' : 'text',
-              style: { textAlign: align },
+              style: { textAlign: align, ...(id === 'sku' ? { fontFamily: 'monospace' } : {}) },
               autoComplete: 'off',
               step: type === 'number' ? 'any' : undefined,
             },
@@ -544,6 +544,7 @@ class ManifestFormLine extends PureComponent {
             fontSize: '0.875rem',
             lineHeight: '20px',
             fontWeight: id === 'sku' ? 600 : 400,
+            fontFamily: id === 'sku' ? 'monospace' : 'inherit',
             color: isError
               ? 'error.main'
               : hasValue
@@ -751,6 +752,7 @@ class ManifestFormLine extends PureComponent {
                 height: 20,
                 fontSize: '0.7rem',
                 fontWeight: 600,
+                fontFamily: 'monospace',
                 bgcolor: 'primary.50',
                 color: 'primary.dark',
                 border: '1px solid',
@@ -1108,6 +1110,7 @@ class ManifestFormLine extends PureComponent {
                 height: 20,
                 fontSize: '0.7rem',
                 fontWeight: 600,
+                fontFamily: 'monospace',
                 bgcolor: 'primary.50',
                 color: 'primary.dark',
                 border: '1px solid',
@@ -1150,7 +1153,7 @@ class ManifestFormLine extends PureComponent {
           {/* Supplier SKU if distinct */}
           {supplierArticle.sku && supplierArticle.sku !== rawSku && supplierArticle.sku !== article.sku && (
             <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
-              (Lief.-ArtNr: <strong>{supplierArticle.sku}</strong>)
+              (Lief.-ArtNr: <strong style={{ fontFamily: 'monospace' }}>{supplierArticle.sku}</strong>)
             </Typography>
           )}
 

src/components/manifest/ManifestHeader.jsx

@@ -479,9 +479,13 @@ class ManifestHeader extends PureComponent {
               sx={{
                 flex: { xs: '1 1 100%', sm: '1 1 120px' },
                 minWidth: { sm: 100 },
+                '& .MuiInputBase-input': {
+                  fontFamily: 'monospace',
+                },
                 ...(!number && previewNumber && {
                   '& .MuiInputBase-input.Mui-disabled': {
                     fontStyle: 'italic',
+                    fontFamily: 'monospace',
                   },
                 }),
               }}
@@ -496,6 +500,9 @@ class ManifestHeader extends PureComponent {
                 sx={{
                   flex: { xs: '1 1 100%', sm: '1 1 120px' },
                   minWidth: { sm: 100 },
+                  '& .MuiInputBase-input': {
+                    fontFamily: 'monospace',
+                  },
                   ...(dirtyFields?.externalNumber && {
                     '& .MuiOutlinedInput-notchedOutline': {
                       borderColor: 'warning.main',

src/components/manifest/ManifestList.jsx

@@ -131,11 +131,12 @@ class ManifestList extends PureComponent {
     const cfg = this.cfg;
     const partyField = cfg.partyField;
 
-    const columns = [{ key: 'number', label: 'Nummer' }];
+    const columns = [{ key: 'number', label: 'Nummer', mono: true }];
     if (cfg.externalNumber) {
       columns.push({
         key: 'externalNumber',
         label: 'Referenz',
+        mono: true,
         render: (row) => numberDisplay(row.externalNumber),
       });
     }

src/components/manifest/OrderDocumentsTiles.jsx

@@ -109,7 +109,7 @@ export class OrderDocumentsTiles extends PureComponent {
                   }}
                 >
                   <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 0.25 }}>
-                    <Typography variant="subtitle2" sx={{ fontWeight: 700, fontSize: '0.85rem' }}>
+                    <Typography variant="subtitle2" sx={{ fontWeight: 700, fontSize: '0.85rem', fontFamily: 'monospace' }}>
                       {sh.number}
                     </Typography>
                     <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
@@ -134,7 +134,7 @@ export class OrderDocumentsTiles extends PureComponent {
 
                   {sh.externalNumber ? (
                     <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.25 }}>
-                      Ref: {sh.externalNumber}
+                      Ref: <Box component="span" sx={{ fontFamily: 'monospace' }}>{sh.externalNumber}</Box>
                     </Typography>
                   ) : null}
 

src/components/manifest/OrderList.jsx

@@ -103,8 +103,8 @@ function renderInvisibleDummyRow(dummy) {
   return (
     <>
       <Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
-        <Typography variant="body1" sx={{ fontWeight: 600 }}>{d.number}</Typography>
+        <Typography variant="body1" sx={{ fontWeight: 600, fontFamily: 'monospace' }}>{d.number}</Typography>
-        <Typography variant="body2">{d.externalNumber || 'Nr. / Ref.'}</Typography>
+        <Typography variant="body2" sx={{ fontFamily: 'monospace' }}>{d.externalNumber || 'Nr. / Ref.'}</Typography>
       </Box>
       <Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
         <Typography variant="body2">{d.date ? formatDate(d.date) : '–'}</Typography>
@@ -200,10 +200,10 @@ class OrderRow extends PureComponent {
         {renderInvisibleDummyRow(dummy)}
 
         <Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          <Typography variant="body1" sx={{ fontWeight: 600, ...ellipsisSx }}>
+          <Typography variant="body1" sx={{ fontWeight: 600, fontFamily: 'monospace', ...ellipsisSx }}>
             {order.number}
           </Typography>
-          <Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
+          <Typography variant="body2" color="text.secondary" sx={{ fontFamily: 'monospace', ...ellipsisSx }}>
             {numberDisplay(order.externalNumber)}
           </Typography>
         </Box>

src/components/manifest/OrderPaymentList.jsx

@@ -99,7 +99,7 @@ class PaymentTableRow extends PureComponent {
       <ListItemButton divider sx={rowSx} onClick={() => onNavigateOrder?.(payment.orderId)}>
         {/* Payment ID from payment table */}
         <Box sx={{ width: 80, flexShrink: 0 }}>
-          <Chip size="small" label={`#${payment.id}`} sx={{ fontWeight: 700, fontVariantNumeric: 'tabular-nums' }} />
+          <Chip size="small" label={`#${payment.id}`} sx={{ fontWeight: 700, fontVariantNumeric: 'tabular-nums', fontFamily: 'monospace' }} />
         </Box>
 
         {/* Amount */}
@@ -126,7 +126,7 @@ class PaymentTableRow extends PureComponent {
 
         {/* Linked Manifest (Auftrag) */}
         <Box sx={{ width: 120, flexShrink: 0 }}>
-          <Typography variant="body2" sx={{ fontWeight: 600, color: 'primary.main', ...ellipsisSx }}>
+          <Typography variant="body2" sx={{ fontWeight: 600, color: 'primary.main', fontFamily: 'monospace', ...ellipsisSx }}>
             {payment.orderNumber}
           </Typography>
         </Box>

src/components/manifest/OrderShipmentDialog.jsx

@@ -435,7 +435,7 @@ export default class OrderShipmentDialog extends PureComponent {
               </Typography>
               {orderNumber ? (
                 <Typography variant="caption" color="text.secondary">
-                  Zu: <strong>{orderNumber}</strong>
+                  Zu: <strong style={{ fontFamily: 'monospace' }}>{orderNumber}</strong>
                 </Typography>
               ) : null}
             </Box>
@@ -486,7 +486,7 @@ export default class OrderShipmentDialog extends PureComponent {
                   readOnly: true,
                 },
               }}
-              sx={{ minWidth: 190 }}
+              sx={{ minWidth: 190, '& .MuiInputBase-input': { fontFamily: 'monospace' } }}
             />
             <TextField
               size="small"
@@ -495,6 +495,7 @@ export default class OrderShipmentDialog extends PureComponent {
               disabled={saving}
               onChange={(e) => this.setState({ externalNumber: e.target.value })}
               fullWidth
+              slotProps={{ input: { sx: { fontFamily: 'monospace' } } }}
             />
           </Stack>
 
@@ -549,7 +550,7 @@ export default class OrderShipmentDialog extends PureComponent {
                             onChange={() => this.handleToggleItem(item.itemKey, item.remaining)}
                           />
                         </TableCell>
-                        <TableCell sx={{ fontWeight: 600 }}>{item.sku || '–'}</TableCell>
+                        <TableCell sx={{ fontWeight: 600, fontFamily: 'monospace' }}>{item.sku || '–'}</TableCell>
                         <TableCell>
                           <Typography variant="body2" sx={{ fontWeight: 500 }}>
                             {item.name || '–'}

src/components/manifest/PartyFilterPanel.jsx

@@ -279,6 +279,7 @@ export default class PartyFilterPanel extends PureComponent {
                           sx: {
                             color: isSelected ? 'inherit' : 'text.secondary',
                             opacity: isSelected ? 0.8 : 1,
+                            fontFamily: 'monospace',
                           },
                         },
                       }}

src/components/manifest/QuoteList.jsx

@@ -117,7 +117,7 @@ function renderInvisibleDummyRow(dummy) {
   return (
     <>
       <Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
-        <Typography variant="body1" sx={{ fontWeight: 600 }}>{d.number}</Typography>
+        <Typography variant="body1" sx={{ fontWeight: 600, fontFamily: 'monospace' }}>{d.number}</Typography>
       </Box>
       <Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
         <Typography variant="body2">{d.date ? formatDate(d.date) : '–'}</Typography>
@@ -209,7 +209,7 @@ class QuoteRow extends PureComponent {
         {renderInvisibleDummyRow(dummy)}
 
         <Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          <Typography variant="body1" sx={{ fontWeight: 600, ...ellipsisSx }}>
+          <Typography variant="body1" sx={{ fontWeight: 600, fontFamily: 'monospace', ...ellipsisSx }}>
             {quote.number}
           </Typography>
         </Box>

src/components/manifest/ShipmentDetailDialog.jsx

@@ -429,12 +429,19 @@ export default class ShipmentDetailDialog extends PureComponent {
           <Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}>
             <LocalShippingIcon color="primary" sx={{ fontSize: 28 }} />
             <Box>
-              <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.2 }}>
+              <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.2, fontFamily: 'monospace' }}>
                 {shipment.number || 'Lieferschein'}
               </Typography>
               <Typography variant="caption" color="text.secondary">
                 {shipment.date ? `Datum: ${formatDate(shipment.date)}` : ''}
-                {shipment.externalNumber ? ` • Ref: ${shipment.externalNumber}` : ''}
+                {shipment.externalNumber ? (
+                  <>
+                    {' • Ref: '}
+                    <Box component="span" sx={{ fontFamily: 'monospace' }}>
+                      {shipment.externalNumber}
+                    </Box>
+                  </>
+                ) : ''}
               </Typography>
             </Box>
           </Stack>
@@ -476,7 +483,7 @@ export default class ShipmentDetailDialog extends PureComponent {
                   ) : (
                     shLines.map((line, idx) => (
                       <TableRow key={line.id || idx}>
-                        <TableCell sx={{ py: 0.75, fontWeight: 500 }}>{line.sku}</TableCell>
+                        <TableCell sx={{ py: 0.75, fontWeight: 500, fontFamily: 'monospace' }}>{line.sku}</TableCell>
                         <TableCell sx={{ py: 0.75 }}>{line.name || '–'}</TableCell>
                         <TableCell align="right" sx={{ py: 0.75, fontWeight: 700 }}>
                           {line.amount}

src/components/manifest/ShipmentList.jsx

@@ -247,7 +247,7 @@ class NewShipmentModal extends PureComponent {
                   size="small"
                   value={getNextShipmentNumber(currentOrder.number, currentOrder.shipments)}
                   disabled
-                  slotProps={{ input: { readOnly: true } }}
+                  slotProps={{ input: { readOnly: true, sx: { fontFamily: 'monospace' } } }}
                   sx={{ width: 190 }}
                 />
               ) : null}
@@ -256,6 +256,7 @@ class NewShipmentModal extends PureComponent {
                 size="small"
                 value={externalNumber}
                 onChange={(e) => this.setState({ externalNumber: e.target.value })}
+                slotProps={{ input: { sx: { fontFamily: 'monospace' } } }}
                 sx={{ flex: 1 }}
               />
             </Box>
@@ -264,7 +265,7 @@ class NewShipmentModal extends PureComponent {
           {currentOrder && (
             <Box sx={{ mb: 2.5 }}>
               <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
-                Lieferbare Positionen für Auftrag {currentOrder.number}:
+                Lieferbare Positionen für Auftrag <Box component="span" sx={{ fontFamily: 'monospace' }}>{currentOrder.number}</Box>:
               </Typography>
               <Stack spacing={1}>
                 {lines.map((line, idx) => {
@@ -488,14 +489,14 @@ function renderInvisibleDummyRow(dummy) {
   return (
     <>
       <Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
-        <Typography variant="body1" sx={{ fontWeight: 600 }}>{d.number}</Typography>
+        <Typography variant="body1" sx={{ fontWeight: 600, fontFamily: 'monospace' }}>{d.number}</Typography>
-        <Typography variant="body2">{d.externalNumber || 'Nr. / Ref.'}</Typography>
+        <Typography variant="body2" sx={{ fontFamily: 'monospace' }}>{d.externalNumber || 'Nr. / Ref.'}</Typography>
       </Box>
       <Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
         <Typography variant="body2">{d.date ? formatDate(d.date) : '–'}</Typography>
       </Box>
       <Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
-        <Typography variant="body2" sx={{ fontWeight: 600 }}>{d.orderNumber}</Typography>
+        <Typography variant="body2" sx={{ fontWeight: 600, fontFamily: 'monospace' }}>{d.orderNumber}</Typography>
       </Box>
       <Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
         <Typography variant="body1">{d.customerName}</Typography>
@@ -594,10 +595,10 @@ class ShipmentRow extends PureComponent {
 
         {/* 1. Lieferschein-Nr & Ref */}
         <Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          <Typography variant="body1" sx={{ fontWeight: 600, ...ellipsisSx }}>
+          <Typography variant="body1" sx={{ fontWeight: 600, fontFamily: 'monospace', ...ellipsisSx }}>
             {shipment.number}
           </Typography>
-          <Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
+          <Typography variant="body2" color="text.secondary" sx={{ fontFamily: 'monospace', ...ellipsisSx }}>
             {numberDisplay(shipment.externalNumber)}
           </Typography>
         </Box>
@@ -612,7 +613,7 @@ class ShipmentRow extends PureComponent {
         {/* 3. Bezugsauftrag */}
         <Box sx={{ gridColumn: 3, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
           {shipment.orderNumber ? (
-            <Typography variant="body2" sx={{ fontWeight: 600, color: 'primary.main', ...ellipsisSx }}>
+            <Typography variant="body2" sx={{ fontWeight: 600, color: 'primary.main', fontFamily: 'monospace', ...ellipsisSx }}>
               {shipment.orderNumber}
             </Typography>
           ) : (

src/components/settings/NumberSettingsPanel.jsx

@@ -217,6 +217,7 @@ export default class NumberSettingsPanel extends Component {
                       value={draft.prefix}
                       disabled={draft.busy}
                       onChange={(e) => this.handleChange(row.id, 'prefix', e.target.value)}
+                      sx={{ input: { fontFamily: 'monospace' } }}
                     />
                   </TableCell>
                   <TableCell>
@@ -227,6 +228,7 @@ export default class NumberSettingsPanel extends Component {
                       disabled={draft.busy}
                       slotProps={{ htmlInput: { min: 1, step: 1 } }}
                       onChange={(e) => this.handleChange(row.id, 'padding', e.target.value)}
+                      sx={{ input: { fontFamily: 'monospace' } }}
                     />
                   </TableCell>
                   <TableCell>
@@ -237,6 +239,7 @@ export default class NumberSettingsPanel extends Component {
                       disabled={draft.busy}
                       slotProps={{ htmlInput: { min: 0, step: 1 } }}
                       onChange={(e) => this.handleChange(row.id, 'next', e.target.value)}
+                      sx={{ input: { fontFamily: 'monospace' } }}
                     />
                   </TableCell>
                   <TableCell align="right">

src/components/tiles/ArticleTile.jsx

@@ -309,7 +309,12 @@ export class ArticleTile extends Tile {
           />
         ) : null}
         {sku ? (
-          <Typography variant="caption" color="text.secondary" noWrap sx={{ maxWidth: '100%' }}>
+          <Typography
+            variant="caption"
+            color="text.secondary"
+            noWrap
+            sx={{ maxWidth: '100%', fontFamily: 'monospace' }}
+          >
             {sku}
           </Typography>
         ) : null}
@@ -497,6 +502,7 @@ export class ArticleTile extends Tile {
               height: '1.2em',
               overflow: 'hidden',
               textOverflow: 'ellipsis',
+              fontFamily: 'monospace',
             }}
           >
             {sku || '\u00A0'}

src/index.css

@@ -102,4 +102,16 @@ html.df-dialog-open #root {
   box-shadow: var(--df-shadow-drag, 0 8px 20px rgba(15, 23, 42, 0.28));
   cursor: grabbing !important;
   user-select: none !important;
+}
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * NUMBER SCHEME MONOSPACE FONT
+ *
+ * All numbers originating from a number scheme (SKUs, customer numbers,
+ * delivery/quote/order/shipment document numbers) must be monospaced with tabular numbers.
+ * ──────────────────────────────────────────────────────────────────────────── */
+.df-mono,
+.df-number-scheme {
+  font-family: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
+  font-variant-numeric: tabular-nums;
 }

src/routes/artikel.jsx

@@ -156,7 +156,7 @@ class ResultRow extends Component {
         <Typography
           variant="body2"
           color="text.secondary"
-          sx={{ ...resultCellSx, minWidth: 84 }}
+          sx={{ ...resultCellSx, minWidth: 84, fontFamily: 'monospace' }}
         >
           {row.sku}
         </Typography>

src/routes/kunde/_entityId.jsx

@@ -2,6 +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 Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
@@ -559,11 +560,25 @@ class KundeEditPage extends PureComponent {
       <PanelTileGrid>
         <PanelTile wide={2} minHeight={200} color={BLUE_PANEL} title="Stammdaten">
           <Stack spacing={2}>
-            {groupName != null ? (
+            <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap">
-              <Typography variant="body2" color="text.secondary">
+              {entity?.number ? (
-                Gruppe: {groupName}
+                <Chip
-              </Typography>
+                  size="small"
-            ) : null}
+                  label={`Kundennummer: ${entity.number}`}
+                  sx={{
+                    fontFamily: 'monospace',
+                    fontWeight: 600,
+                    fontSize: '0.75rem',
+                    bgcolor: 'action.hover',
+                  }}
+                />
+              ) : null}
+              {groupName != null ? (
+                <Typography variant="body2" color="text.secondary">
+                  Gruppe: {groupName}
+                </Typography>
+              ) : null}
+            </Stack>
             <SingleLineTextEdit
               size="small"
               label="Name"

src/routes/kunde/neu.jsx

@@ -141,6 +141,7 @@ class KundeNeuPage extends PureComponent {
               disabled
               slotProps={{
                 htmlInput: { autoComplete: 'off' },
+                input: { sx: { fontFamily: 'monospace' } },
               }}
             />
             <Select

src/theme/themes/default.js

@@ -45,6 +45,9 @@ export function createDefaultTheme() {
         paper: WHITE,
       },
     },
+    typography: {
+      fontFamilyMono: 'ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    },
     nav,
     components: {
       MuiModal: {

src/utils/documentNumber.js

@@ -4,6 +4,16 @@ import orderAutomat from '../automats/orderAutomat';
 import deliveryAutomat from '../automats/deliveryAutomat';
 import { order as orderApi, quote as quoteApi, delivery as deliveryApi } from '../api';
 
+/** Standard cross-platform monospace font stack for numbers from a number scheme. */
+export const MONO_FONT_FAMILY =
+  'ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+
+/** Common sx mixin for monospace numberscheme display. */
+export const monoFontSx = {
+  fontFamily: MONO_FONT_FAMILY,
+  fontVariantNumeric: 'tabular-nums',
+};
+
 /** Highest integer counter found per document kind. */
 const maxKnownNumberByKind = new Map();