u

src/routes/artikel/kategorien.jsx

@@ -498,7 +498,10 @@ class ArtikelKategorienPage extends PureComponent {
                       }}
                       variant="standard"
                       size="small"
-                      slotProps={{ inputLabel: { shrink: true }, input: { spellCheck: false } }}
+                      slotProps={{
+                        inputLabel: { shrink: true },
+                        htmlInput: { spellCheck: false },
+                      }}
                       sx={{
                         width: '100%',
                         '& .MuiInput-underline:before, & .MuiInput-underline:after': {

src/routes/artikel/lager.jsx

@@ -21,6 +21,9 @@ import { backendErrorFrom } from '../../utils/backendError';
 import { notifyError } from '../../utils/notify';
 import { setLastArticleSku } from '../../automats';
 import warehouseAutomat from '../../automats/warehouseAutomat';
+import {
+  GREEN_PANEL,
+} from '../../colors';
 
 function draftsFrom(warehouses) {
   return Object.fromEntries(warehouses.map((row) => [row.id, row.name]));
@@ -285,15 +288,9 @@ class ArtikelLagerPage extends PureComponent {
     return (
       <>
         {/* SortableJS ghost / chosen styling */}
-        <style>{`
-          .sortable-ghost { opacity: 0.35 !important; }
-          .sortable-chosen { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
-          .drag-handle { cursor: grab; touch-action: none; }
-          .drag-handle:active { cursor: grabbing; }
-        `}</style>
 
         <PanelTileGrid>
-          <PanelTile wide={2} minHeight={280} color="#bbf7d0">
+          <PanelTile wide={2} minHeight={280} color={GREEN_PANEL}>
             <Stack spacing={2}>
               {returnTo ? (
                 <Alert

src/routes/artikel/marken.jsx

@@ -19,6 +19,9 @@ import { setLastArticleSku } from '../../automats';
 import brandAutomat from '../../automats/brandAutomat';
 import { enqueueSnackbar } from 'notistack';
 import { BrandThumb, BrandImageSearchDialog } from '../../components/brand';
+import {
+  PURPLE_PANEL,
+} from '../../colors';
 
 function draftsFrom(brands) {
   return Object.fromEntries(brands.map((b) => [b.id, b.name]));
@@ -180,7 +183,7 @@ class ArtikelMarkenPage extends PureComponent {
 
     return (
       <PanelTileGrid>
-        <PanelTile wide={2} minHeight={280} color="#ddd6fe">
+        <PanelTile wide={2} minHeight={280} color={PURPLE_PANEL}>
           <List dense disablePadding>
             {brands.length === 0 ? (
               <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>

src/routes/artikel/merkmale.jsx

@@ -24,6 +24,15 @@ import { notifyError } from '../../utils/notify';
 import { setLastArticleSku } from '../../automats';
 import attributeAutomat, { selectAttributes } from '../../automats/attributeAutomat';
 import propertyAutomat, { selectProperties } from '../../automats/propertyAutomat';
+import {
+  BLUE_PANEL,
+  ORANGE_PANEL,
+  PURPLE_PANEL,
+  SELECT_BG,
+  SELECT_BG_HOVER,
+  SELECT_BORDER,
+  TINT_SUBTLE,
+} from '../../colors';
 
 function draftsFrom(items, key = 'name') {
   return Object.fromEntries((items || []).map((row) => [row.id, row[key]]));
@@ -609,16 +618,10 @@ class ArtikelMerkmalePage extends PureComponent {
     return (
       <>
         {/* SortableJS ghost / chosen styling from /artikel/lager */}
-        <style>{`
-          .sortable-ghost { opacity: 0.35 !important; }
-          .sortable-chosen { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
-          .drag-handle { cursor: grab; touch-action: none; }
-          .drag-handle:active { cursor: grabbing; }
-        `}</style>
 
         <PanelTileGrid>
           {/* Tile 1: Attribute (Auswahllisten) */}
-          <PanelTile wide={2} minHeight={280} color="#bfdbfe">
+          <PanelTile wide={2} minHeight={280} color={BLUE_PANEL}>
             <Stack spacing={2}>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <StyleIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
@@ -642,11 +645,11 @@ class ArtikelMerkmalePage extends PureComponent {
                         borderRadius: 1.5,
                         alignItems: 'center',
                         cursor: 'pointer',
-                        bgcolor: isSelected ? 'rgba(59, 130, 246, 0.12)' : 'transparent',
-                        border: isSelected ? '1px solid rgba(59, 130, 246, 0.3)' : '1px solid transparent',
+                        bgcolor: isSelected ? SELECT_BG : 'transparent',
+                        border: isSelected ? `1px solid ${SELECT_BORDER}` : '1px solid transparent',
                         transition: 'all 0.15s ease',
                         '&:hover': {
-                          bgcolor: isSelected ? 'rgba(59, 130, 246, 0.16)' : 'rgba(0, 0, 0, 0.04)',
+                          bgcolor: isSelected ? SELECT_BG_HOVER : TINT_SUBTLE,
                         },
                       }}
                       data-id={a.id}
@@ -764,7 +767,7 @@ class ArtikelMerkmalePage extends PureComponent {
           </PanelTile>
 
           {/* Tile 2: Werte für das gewählte Attribut */}
-          <PanelTile wide={2} minHeight={280} color="#ddd6fe">
+          <PanelTile wide={2} minHeight={280} color={PURPLE_PANEL}>
             <Stack spacing={2}>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <LabelImportantIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
@@ -867,7 +870,7 @@ class ArtikelMerkmalePage extends PureComponent {
           </PanelTile>
 
           {/* Tile 3: Merkmale (Freitext) */}
-          <PanelTile wide={2} minHeight={280} color="#fed7aa">
+          <PanelTile wide={2} minHeight={280} color={ORANGE_PANEL}>
             <Stack spacing={2}>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <TuneIcon sx={{ color: 'text.secondary', fontSize: 20 }} />

src/routes/artikel/vorlagen.jsx

@@ -25,6 +25,10 @@ import { notifyError } from '../../utils/notify';
 import { setLastArticleSku } from '../../automats';
 import { labeltemplate } from '../../api';
 import { enqueueSnackbar } from 'notistack';
+import {
+  BLUE_BG,
+  SURFACE_BASE,
+} from '../../colors';
 
 const CanvasEditor = lazy(async () => {
   await import('react-canvas-label-editor/style.css');
@@ -465,7 +469,7 @@ class ArtikelVorlagenPage extends PureComponent {
     return (
       <>
         <PanelTileGrid>
-          <PanelTile wide={3} color="#dbeafe">
+          <PanelTile wide={3} color={BLUE_BG}>
             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', mb: 2 }}>
               <Button
                 variant="contained"
@@ -517,7 +521,7 @@ class ArtikelVorlagenPage extends PureComponent {
                       onClick={() => this.handleOpenEdit(tmpl)}
                       sx={{
                         height: 100,
-                        bgcolor: '#f8f8f8',
+                        bgcolor: SURFACE_BASE,
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',