Refactor UI styles to use CSS variables for consistent theming

- Updated background colors across various templates to use CSS variables for better theming support.
- Replaced hardcoded colors with variables like `var(--ui-surface)` and `var(--ui-surface-soft)` for backgrounds.
- Adjusted text colors to use `var(--ui-text)` for improved readability and consistency.
- Enhanced the theme toggle functionality in the base template to dynamically change theme colors based on user preference.
- Ensured that all relevant templates reflect the new theming approach for a cohesive user experience.

Web/templates/tutorial.html

@@ -72,7 +72,7 @@
 
   .tutorial-side {
     grid-column: span 12;
-    background: #ffffff;
+    background: var(--ui-surface);
     border: 1px solid #cfdbe8;
     border-radius: 16px;
     padding: 16px;
@@ -102,7 +102,7 @@
 
   .workflow-nav button {
     border: 1px solid #dbe3ee;
-    background: #f8fafc;
+    background: var(--ui-surface-soft);
     color: #0f172a;
     border-radius: 12px;
     padding: 11px 12px;
@@ -133,7 +133,7 @@
 
   .workflow-step {
     grid-column: span 12;
-    background: #ffffff;
+    background: var(--ui-surface);
     border: 1px solid #cfdbe8;
     border-radius: 16px;
     padding: 18px;
@@ -331,17 +331,17 @@
         <h3>Tägliche Aufgaben</h3>
         <p>Das ist der gewöhnliche Arbeitsablauf während eines Schultages.</p>
         
-        <div style="background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 12px; padding: 14px; margin: 14px 0;">
+        <div style="background: var(--ui-surface-soft); border: 1px solid #dbe3ee; border-radius: 12px; padding: 14px; margin: 14px 0;">
           <p style="margin-bottom: 10px; font-weight: 700; color: #0f172a;">Morgens:</p>
           <p style="margin: 0; color: #334155;">Öffnen Sie die Startseite und prüfen Sie offene Reservierungen oder Rückgabefristen.</p>
         </div>
 
-        <div style="background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 12px; padding: 14px; margin: 14px 0;">
+        <div style="background: var(--ui-surface-soft); border: 1px solid #dbe3ee; border-radius: 12px; padding: 14px; margin: 14px 0;">
           <p style="margin-bottom: 10px; font-weight: 700; color: #0f172a;">Mittags:</p>
           <p style="margin: 0; color: #334155;">Neue Artikel oder Bücher hinzufügen oder Ausleihungen begründen.</p>
         </div>
 
-        <div style="background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 12px; padding: 14px; margin: 14px 0;">
+        <div style="background: var(--ui-surface-soft); border: 1px solid #dbe3ee; border-radius: 12px; padding: 14px; margin: 14px 0;">
           <p style="margin-bottom: 10px; font-weight: 700; color: #0f172a;">Nachmittags:</p>
           <p style="margin: 0; color: #334155;">Rückgaben buchen und kurz prüfen, ob alles in Ordnung ist.</p>
         </div>