Refactor styles across multiple components to use new color variables

- Updated background and border colors in DashboardWidget, DialogWidget, MessageboxWidget, and TermineWidget to use new CSS variables for consistency.
- Changed button colors in various widgets and dialogs to utilize the new primary color variable.
- Adjusted text colors in VocabCourseView, VocabDictionaryView, and VocabTrainerView to align with the new color scheme.
- Replaced hardcoded colors with CSS variables in multiple components for improved maintainability and theming.

frontend/src/components/TermineWidget.vue

@@ -81,8 +81,8 @@ export default {
 
 <style scoped>
 .termine-widget {
-  background: #f8f9fa;
-  border: 1px solid #dee2e6;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: 8px;
   padding: 20px;
   margin: 20px 0;
@@ -90,7 +90,7 @@ export default {
 
 .termine-widget h2 {
   margin: 0 0 15px 0;
-  color: #333;
+  color: var(--color-text-primary);
   font-size: 1.5em;
 }
 
@@ -99,7 +99,7 @@ export default {
 .no-termine {
   text-align: center;
   padding: 20px;
-  color: #666;
+  color: var(--color-text-secondary);
 }
 
 .error {
@@ -115,8 +115,8 @@ export default {
 .termin-item {
   display: flex;
   gap: 15px;
-  background: white;
-  border-left: 4px solid #007bff;
+  background: var(--color-surface-strong);
+  border-left: 4px solid var(--color-primary);
   padding: 15px;
   border-radius: 4px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -126,7 +126,7 @@ export default {
   flex-shrink: 0;
   text-align: center;
   padding: 10px;
-  background: #007bff;
+  background: var(--color-primary);
   color: white;
   border-radius: 4px;
   min-width: 120px;
@@ -140,13 +140,13 @@ export default {
 
 .termin-details h3 {
   margin: 0 0 8px 0;
-  color: #333;
+  color: var(--color-text-primary);
   font-size: 1.1em;
 }
 
 .termin-details p {
   margin: 0 0 8px 0;
-  color: #666;
+  color: var(--color-text-secondary);
   line-height: 1.5;
 }
 
@@ -157,4 +157,3 @@ export default {
   margin-top: 5px;
 }
 </style>
-