Design: Pflicht-Fixes gegen helle Schrift und dunkle Flaechen, Diagrammfarben, Chat-Variablen

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/WorksheetList.jsx

@@ -4,21 +4,22 @@ import { serviceTypeLabel, needsTimeEntry, worksheetTone } from '../lib/ticketFo
 import { statusLabel } from '../lib/ticketStatus'
 import { parseSupporters, supportMinutes, firstName } from '../lib/support'
 
-// Kopffarbe je Zustand (worksheetTone): orange = Git-Zeit fehlt, gruen = Git-Zeit eingetragen
+// Randfarbe je Zustand (worksheetTone): orange = Git-Zeit fehlt, gruen = Git-Zeit eingetragen. Der Kopf ist fuer alle Zustaende
+// grau (Schrift --text auf --bg-subtle); P2 baut die Liste um.
 const TONES = {
-  'git-open': { border: '#f97316', base: 'linear-gradient(135deg, #f97316 0%, #ea580c 100%)', hover: 'linear-gradient(135deg, #ea580c 0%, #c2410c 100%)' },
-  'git-done': { border: '#10b981', base: 'linear-gradient(135deg, #10b981 0%, #059669 100%)', hover: 'linear-gradient(135deg, #059669 0%, #047857 100%)' },
-  comment: { border: '#3b82f6', base: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', hover: 'linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)' },
-  work: { border: '#4a5568', base: 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)', hover: 'linear-gradient(135deg, #2d3748 0%, #1a202c 100%)' },
+  'git-open': { border: 'var(--orange-fg)', base: 'var(--bg-subtle)', hover: 'var(--bg-hover)' },
+  'git-done': { border: 'var(--green-fg)', base: 'var(--bg-subtle)', hover: 'var(--bg-hover)' },
+  comment: { border: 'var(--blue-fg)', base: 'var(--bg-subtle)', hover: 'var(--bg-hover)' },
+  work: { border: 'var(--text-2)', base: 'var(--bg-subtle)', hover: 'var(--bg-hover)' },
 }
 
-// Hinweise im farbigen Kopf: mit der grauen Badge-Schrift waeren sie kaum lesbar
-const headerBadgeStyle = { background: 'rgba(255,255,255,0.3)', color: 'white', marginLeft: '8px' }
+// Hinweise im Kopf: graue Badge-Toene
+const headerBadgeStyle = { background: 'var(--grey-bg)', color: 'var(--grey-fg)', marginLeft: '8px' }
 
 const headerButtonStyle = {
-  background: 'rgba(255,255,255,0.25)',
-  color: 'white',
-  border: '1px solid rgba(255,255,255,0.4)',
+  background: 'var(--bg)',
+  color: 'var(--text)',
+  border: '1px solid var(--line-strong)',
   borderRadius: '6px',
   padding: '2px 10px',
   fontSize: '0.8rem',
@@ -88,10 +89,10 @@ export default function WorksheetList({ worksheets, totalTime, loading, onToggle
                 transition: 'transform 0.2s ease, box-shadow 0.2s ease'
               }} onMouseEnter={(e) => {
                 e.currentTarget.style.transform = 'translateY(-2px)'
-                e.currentTarget.style.boxShadow = '0 8px 16px rgba(0,0,0,0.1)'
+                e.currentTarget.style.boxShadow = 'var(--shadow-btn)'
               }} onMouseLeave={(e) => {
                 e.currentTarget.style.transform = 'translateY(0)'
-                e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'
+                e.currentTarget.style.boxShadow = 'none'
               }}>
                 {/* Header - Immer sichtbar, klickbar */}
                 <div 
@@ -99,7 +100,7 @@ export default function WorksheetList({ worksheets, totalTime, loading, onToggle
                   onClick={() => toggleWorksheet(ws.wsid)}
                   style={{
                     background: colors.base,
-                    color: 'white',
+                    color: 'var(--text)',
                     border: 'none',
                     cursor: 'pointer',
                     userSelect: 'none',
@@ -141,7 +142,7 @@ export default function WorksheetList({ worksheets, totalTime, loading, onToggle
                         </span>
                       )}
                       {ws.countsToPlan && !ws.isComment && (
-                        <span className="badge ms-2" title="Wird vom Stundenguthaben des Wartungs-Abos abgezogen" style={{ ...headerBadgeStyle, background: '#9d3dfe' }}>
+                        <span className="badge ms-2" title="Wird vom Stundenguthaben des Wartungs-Abos abgezogen" style={{ ...headerBadgeStyle, background: 'var(--violet-bg)', color: 'var(--violet-fg)' }}>
                           Abo-Stunden
                         </span>
                       )}
@@ -160,8 +161,8 @@ export default function WorksheetList({ worksheets, totalTime, loading, onToggle
                           </div>
                         )}
                         <span className="badge" style={{
-                          background: 'rgba(255,255,255,0.2)',
-                          color: 'white',
+                          background: 'var(--grey-bg)',
+                          color: 'var(--grey-fg)',
                           fontSize: '0.8rem'
                         }}>{serviceTypeLabel(ws.serviceType)}</span>
                       </div>
@@ -207,9 +208,9 @@ export default function WorksheetList({ worksheets, totalTime, loading, onToggle
                         className="btn btn-sm"
                         title={ws.countsToPlan ? 'Nicht mehr vom Abo-Stundenkonto abziehen' : 'Vom Abo-Stundenkonto des Kunden abziehen'}
                         style={{
-                          background: ws.countsToPlan ? '#9d3dfe' : 'rgba(255,255,255,0.15)',
-                          color: 'white',
-                          border: '1px solid rgba(255,255,255,0.4)',
+                          background: ws.countsToPlan ? 'var(--violet-bg)' : 'var(--bg)',
+                          color: ws.countsToPlan ? 'var(--violet-fg)' : 'var(--text)',
+                          border: '1px solid var(--line-strong)',
                           borderRadius: '6px',
                           padding: '2px 10px',
                           fontSize: '0.8rem',
@@ -241,12 +242,12 @@ export default function WorksheetList({ worksheets, totalTime, loading, onToggle
                     <div className="row mb-3">
                       <div className="col-md-6">
                         <div className="d-flex align-items-center">
-                          <FaUser className="me-2" style={{ color: '#10b981' }} />
+                          <FaUser className="me-2" style={{ color: 'var(--green-fg)' }} />
                           <strong>{ws.employeeName}</strong>
                           {ws.employeeShort && (
                             <span className="badge ms-2" style={{ 
-                              background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
-                              color: 'white'
+                              background: 'var(--green-bg)',
+                              color: 'var(--green-fg)'
                             }}>{ws.employeeShort}</span>
                           )}
                         </div>
@@ -254,8 +255,8 @@ export default function WorksheetList({ worksheets, totalTime, loading, onToggle
                       <div className="col-md-6 text-md-end">
                         {!ws.isComment && (
                           <div className="d-flex align-items-center justify-content-md-end">
-                            <FaClock className="me-2" style={{ color: '#10b981' }} />
-                            <strong className="fs-5" style={{ color: '#10b981' }}>{formatTime(ws.totalTime)}</strong>
+                            <FaClock className="me-2" style={{ color: 'var(--green-fg)' }} />
+                            <strong className="fs-5" style={{ color: 'var(--green-fg)' }}>{formatTime(ws.totalTime)}</strong>
                           </div>
                         )}
                       </div>
@@ -275,8 +276,8 @@ export default function WorksheetList({ worksheets, totalTime, loading, onToggle
                     {/* Service Type */}
                     <div className="mb-3">
                       <span className="badge px-3 py-2" style={{ 
-                        background: 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)',
-                        color: 'white',
+                        background: 'var(--grey-bg)',
+                        color: 'var(--grey-fg)',
                         fontSize: '0.85rem'
                       }}>{serviceTypeLabel(ws.serviceType)}</span>
                     </div>
@@ -284,20 +285,20 @@ export default function WorksheetList({ worksheets, totalTime, loading, onToggle
                     {/* Status-Änderung */}
                     {ws.oldStatus !== ws.newStatus && (
                       <div className="mb-3 p-3 rounded-3" style={{ 
-                        background: 'linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%)'
+                        background: 'var(--bg-subtle)'
                       }}>
-                        <FaExchangeAlt className="me-2" style={{ color: '#10b981' }} />
+                        <FaExchangeAlt className="me-2" style={{ color: 'var(--green-fg)' }} />
                         <span className="text-muted">Status:</span>{' '}
-                        <span className="badge" style={{ background: '#6b7280', color: 'white' }}>{statusLabel(ws.oldStatus)}</span>
-                        <span className="mx-2" style={{ color: '#10b981' }}>→</span>
-                        <span className="badge" style={{ background: '#10b981', color: 'white' }}>{statusLabel(ws.newStatus)}</span>
+                        <span className="badge" style={{ background: 'var(--grey-bg)', color: 'var(--grey-fg)' }}>{statusLabel(ws.oldStatus)}</span>
+                        <span className="mx-2" style={{ color: 'var(--green-fg)' }}>→</span>
+                        <span className="badge" style={{ background: 'var(--green-bg)', color: 'var(--green-fg)' }}>{statusLabel(ws.newStatus)}</span>
                       </div>
                     )}
 
                     {/* Details */}
                     <div className="mt-3 p-3 rounded-3" style={{ 
-                      background: 'rgba(16, 185, 129, 0.05)',
-                      border: '1px solid rgba(16, 185, 129, 0.1)'
+                      background: 'var(--bg-subtle)',
+                      border: '1px solid var(--line)'
                     }}>
                       <small className="text-dark" style={{ whiteSpace: 'pre-wrap', lineHeight: '1.6' }}>
                         {ws.details}