Fix of some timezone problems

Web/app.py

@@ -17,7 +17,6 @@ Features:
 - Booking and reservation of items
 """
 from random import random
-
 from flask import Flask, render_template, request, redirect, url_for, session, flash, send_from_directory, get_flashed_messages, jsonify, Response, make_response, send_file, abort
 from werkzeug.utils import secure_filename
 from werkzeug.middleware.proxy_fix import ProxyFix
@@ -1381,11 +1380,31 @@ def update_appointment_statuses():
             activation_user = str(appointment.get('User') or '').strip()
             activation_item_name = str(appointment.get('Item') or 'Termin')
 
+            # is_library_item expects an item document, not the stored item id.
+            item_doc_for_status = None
+            item_id_for_status = appointment.get('Item')
+            if item_id_for_status:
+                item_lookup = [{'_id': item_id_for_status}]
+                try:
+                    item_lookup.insert(0, {'_id': ObjectId(str(item_id_for_status))})
+                except (InvalidId, TypeError):
+                    pass
+                try:
+                    item_doc_for_status = items_col.find_one(
+                        {'$or': item_lookup},
+                        {'ItemType': 1, 'is_library': 1}
+                    )
+                except Exception as item_lookup_error:
+                    app.logger.warning(
+                        f"Could not resolve item type for appointment {appointment.get('_id')}: {item_lookup_error}"
+                    )
+            item_is_library = it.is_library_item(item_doc_for_status)
+
             # Aktuellen Status bestimmen
             new_status = au.get_current_status(appointment, log_changes=True, user='scheduler')
 
             # Wenn sich der Status geändert hat, aktualisiere in der Datenbank
-            if new_status != old_status and not it.is_library_item(appointment.get('Item')):
+            if new_status != old_status and not item_is_library:
                 extra_fields = {}
 
                 # --- Conflict resolver: planned → active transition ---
@@ -1483,15 +1502,22 @@ def update_appointment_statuses():
             # -----------------------------------------------------------------
             # Mahnlauf für Bibliotheksartikel (Prüfung auf Überfälligkeit)
             # -----------------------------------------------------------------
-            elif it.is_library_item(appointment.get('Item')):
+            elif item_is_library:
                 appt = appointment # Verwende das aktuelle Dokument aus der Schleife
                 if appt.get('Status') != 'active':
                     continue
 
-                due_date_obj = appt.get('DueDate')
+                due_date_obj = appt.get('DueDate') or appt.get('End')
                 if not due_date_obj:
                     continue
 
+                # Backfill the deadline for loans created before DueDate was stored.
+                if not appt.get('DueDate') and appt.get('End'):
+                    ausleihungen.update_one(
+                        {'_id': appt['_id'], 'DueDate': {'$exists': False}},
+                        {'$set': {'DueDate': due_date_obj}}
+                    )
+
                 due_date_naive = due_date_obj.replace(tzinfo=None) if due_date_obj.tzinfo else due_date_obj
                 days_overdue = (current_time_naive - due_date_naive).days
 
@@ -1566,13 +1592,6 @@ def update_appointment_statuses():
                         except Exception as n_err:
                             app.logger.warning(f"Fehler beim Erstellen der Admin-Notif (Stufe 2): {n_err}")
 
-                    # 2. Web-Push Notification für Admins
-                    if 'create_return_reminders' in globals():
-                        try:
-                            create_return_reminders(title=title, body=body, url=target_url)
-                        except Exception as p_err:
-                            app.logger.error(f"Fehler beim Senden der Admin-Push (Stufe 2): {p_err}")
-
                     app.logger.warning(f"Mahnstufe 2 & Ausweis-Sperre für Schülerausweis '{student_name}' ({target_ausweis_id}) gesetzt.")
 
                 # STUFE 1: >= 14 Tage überfällig -> Stufe 1 setzen & Admins benachrichtigen
@@ -1597,13 +1616,6 @@ def update_appointment_statuses():
                         except Exception as n_err:
                             app.logger.warning(f"Fehler beim Erstellen der Admin-Notif (Stufe 1): {n_err}")
 
-                    # 2. Web-Push Notification für Admins
-                    if 'create_return_reminders' in globals():
-                        try:
-                            create_return_reminders(title=title, body=body, url=target_url)
-                        except Exception as p_err:
-                            app.logger.error(f"Fehler beim Senden der Admin-Push (Stufe 1): {p_err}")
-
                     app.logger.info(f"Mahnstufe 1 für Schülerausweis '{student_name}' ({target_ausweis_id}) gesetzt.")
 
         if updated_count > 0:
@@ -2176,7 +2188,7 @@ def _upload_student_cards_excel():
 
     current_permissions = us.get_effective_permissions(session['username'])
 
-    if not current_permissions['actions'].get('can_manage_user', False):
+    if not current_permissions['actions'].get('can_manage_users', False):
         flash('Ihnen fehlen die nötigen Berechtigungen, um diese Aktion auszuführen.', 'error')
         return redirect(url_for('library_view'))
 
@@ -3660,7 +3672,10 @@ def mahnungen_admin():
 
         overdue_records = list(ausleihungen_col.find({
             'Status': 'active',
-            'DueDate': {'$lt': current_time}
+            '$or': [
+                {'DueDate': {'$lt': current_time}},
+                {'DueDate': {'$exists': False}, 'End': {'$lt': current_time}},
+            ]
         }).sort('DueDate', 1))
 
         overdue_list = []
@@ -3705,7 +3720,7 @@ def mahnungen_admin():
                 student_email = student_card.get('email') or student_card.get('Email', '')
                 is_blocked = student_card.get('is_blocked', False)
 
-                due_date_obj = record.get('DueDate')
+                due_date_obj = record.get('DueDate') or record.get('End')
                 if due_date_obj:
                     due_date_naive = due_date_obj.replace(tzinfo=None) if due_date_obj.tzinfo else due_date_obj
                     days_overdue = (current_time_naive - due_date_naive).days
@@ -4261,6 +4276,7 @@ def api_library_scan_action():
     - scan student card id
     - scan media code (ISBN/Code_4)
     - borrow if available, otherwise return (toggle behavior)
+    - action='borrow' can be used by scan modes that must never return an item
     """
     if 'username' not in session:
         return jsonify({'ok': False, 'message': 'Nicht angemeldet.'}), 401
@@ -4270,6 +4286,7 @@ def api_library_scan_action():
         return jsonify({'ok': False, 'message': 'Schülerausweis-Modul ist deaktiviert.'}), 403
 
     payload = request.get_json(silent=True) or {}
+    requested_action = str(payload.get('action') or 'toggle').strip().lower()
     student_card_id = us.normalize_student_card_id(payload.get('student_card_id') or payload.get('card_id'))
     item_code_raw = str(payload.get('item_code') or payload.get('code') or '').strip()
     duration_raw = str(payload.get('borrow_duration_days') or '').strip()
@@ -4342,7 +4359,13 @@ def api_library_scan_action():
             due_date = now + datetime.timedelta(days=borrow_duration_days)
 
             it.update_item_status(item_id, False, borrower_name)
-            au.add_ausleihung(item_id, borrower_name, now, due_date)
+            au.add_ausleihung(
+                item_id,
+                borrower_name,
+                now,
+                end_date=due_date,
+                due_date=due_date,
+            )
 
             _append_audit_event_standalone(
                 event_type='ausleihung_borrowed',
@@ -4367,6 +4390,12 @@ def api_library_scan_action():
                 'message': f"{item_doc.get('Name', 'Medium')} wurde ausgeliehen."
             }), 200
 
+        if requested_action == 'borrow':
+            return jsonify({
+                'ok': False,
+                'message': f"Medium ist bereits ausgeliehen und wurde nicht verändert.",
+            }), 409
+
         # Toggle back: item is currently borrowed -> return
         current_borrower = str(item_doc.get('User') or '').strip()
         current_permissions = us.get_effective_permissions(session['username'])
@@ -5140,7 +5169,6 @@ def student_card_class_barcode_download():
     """
     Download PDF with student card barcodes filtered by a specific class from dropdown.
     """
-    from flask import request, session, redirect, url_for, send_file, flash
 
     if 'username' not in session:
         return redirect(url_for('login'))
@@ -5334,7 +5362,7 @@ def student_card_single_barcode_download(card_id):
         return redirect(url_for('login'))
     current_permissions = us.get_effective_permissions(session['username'])
 
-    if not current_permissions['actions'].get('can_manage_users', False):
+    if not current_permissions['actions'].get('can_manage_settings', False):
         flash('Ihnen fehlen die nötigen Berechtigungen, um diese Aktion auszuführen.', 'error')
         return redirect(url_for('library_view'))
     if not cfg.MODULES.is_enabled('student_cards'):
@@ -7541,7 +7569,13 @@ def ausleihen(id):
         for unit in selected_units:
             unit_id = str(unit.get('_id'))
             it.update_item_status(unit_id, False, effective_borrower)
-            au.add_ausleihung(unit_id, effective_borrower, start_date, end_date=end_date)
+            au.add_ausleihung(
+                unit_id,
+                effective_borrower,
+                start_date,
+                end_date=end_date,
+                due_date=end_date if is_library_item else None,
+            )
 
         _append_audit_event_standalone(
             event_type='ausleihung_returned',
@@ -7632,7 +7666,13 @@ def ausleihen(id):
     if total_exemplare <= 1:
         it.update_item_status(id, False, effective_borrower)
         start_date = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
-        au.add_ausleihung(id, effective_borrower, start_date, end_date=end_date)
+        au.add_ausleihung(
+            id,
+            effective_borrower,
+            start_date,
+            end_date=end_date,
+            due_date=end_date if is_library_item else None,
+        )
         _append_audit_event_standalone(
             event_type='ausleihung_returned',
             payload={
@@ -7677,10 +7717,17 @@ def ausleihen(id):
         start_date = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         for exemplar in new_borrowed_exemplars:
             exemplar_id = f"{id}_{exemplar['number']}"
-            au.add_ausleihung(exemplar_id, effective_borrower, start_date, end_date=end_date, exemplar_data={
+            au.add_ausleihung(
+                exemplar_id,
+                effective_borrower,
+                start_date,
+                end_date=end_date,
+                due_date=end_date if is_library_item else None,
+                exemplar_data={
                 'parent_id': id,
                 'exemplar_number': exemplar['number']
-            })
+                }
+            )
 
         _append_audit_event_standalone(
             event_type='ausleihung_returned',
@@ -7943,8 +7990,12 @@ def check_availability():
         items_col = db['items']
 
         # Collect potential conflicts (planned and active) for this day
-        same_day_start = datetime.datetime.combine(booking_date.date(), datetime.time.min)
-        same_day_end = datetime.datetime.combine(booking_date.date(), datetime.time.max)
+        same_day_start = datetime.datetime.combine(
+            booking_date.date(), datetime.time.min, tzinfo=ZoneInfo("Europe/Berlin")
+        )
+        same_day_end = datetime.datetime.combine(
+            booking_date.date(), datetime.time.max, tzinfo=ZoneInfo("Europe/Berlin")
+        )
         candidates = list(ausleihungen.find({
             'Item': item_id,
             'Status': {'$in': ['planned', 'active']},
@@ -7962,6 +8013,8 @@ def check_availability():
             if r_start is None:
                 r_start = same_day_start
             # Overlap check: req_start < r_end and req_end > r_start
+            r_start = au.ensure_timezone_aware(r_start)
+            r_end = au.ensure_timezone_aware(r_end)
             if req_start < r_end and req_end > r_start:
                 conflicts.append({
                     'id': str(r.get('_id')),
@@ -8176,16 +8229,19 @@ def add_booking():
     period = request.form.get('period')
     notes = request.form.get('notes', '')
     
-    # Parse dates as naive datetime objects
+    # Form timestamps represent local school time.
     try:
-        # Simple datetime parsing without timezone
         if start_date_str:
-            start_date = datetime.datetime.strptime(start_date_str, '%Y-%m-%d %H:%M:%S')
+            start_date = datetime.datetime.strptime(
+                start_date_str, '%Y-%m-%d %H:%M:%S'
+            ).replace(tzinfo=ZoneInfo("Europe/Berlin"))
         else:
             return jsonify({'success': False, 'error': 'Missing start date'})
         
         if end_date_str:
-            end_date = datetime.datetime.strptime(end_date_str, '%Y-%m-%d %H:%M:%S')
+            end_date = datetime.datetime.strptime(
+                end_date_str, '%Y-%m-%d %H:%M:%S'
+            ).replace(tzinfo=ZoneInfo("Europe/Berlin"))
         else:
             end_date = None
         
@@ -11227,12 +11283,14 @@ def get_period_times(booking_date, period_num):
         # Create datetime objects for start and end times
         start_datetime = datetime.datetime.combine(
             booking_date.date(),
-            datetime.time(start_hour, start_min)
+            datetime.time(start_hour, start_min),
+            tzinfo=ZoneInfo("Europe/Berlin")
         )
         
         end_datetime = datetime.datetime.combine(
             booking_date.date(),
-            datetime.time(end_hour, end_min)
+            datetime.time(end_hour, end_min),
+            tzinfo=ZoneInfo("Europe/Berlin")
         )
         
         return {

Web/modules/database/ausleihung.py

@@ -42,12 +42,12 @@ def _get_client():
     return MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
 # Add this helper function after imports
 def ensure_timezone_aware(dt):
-    """Ensures a datetime is timezone-aware, using UTC if naive"""
+    """Return a timezone-aware datetime, treating naive DB values as UTC."""
     if dt is None:
         return None
     if dt.tzinfo is None:
-        # Treat naive datetimes as UTC
-        return dt.replace(tzinfo=None)
+        # PyMongo returns BSON datetimes as naive UTC unless tz_aware is enabled.
+        return dt.replace(tzinfo=datetime.timezone.utc)
     return dt
 
 def get_current_status(ausleihung, log_changes=False, user=None):
@@ -82,8 +82,8 @@ def get_current_status(ausleihung, log_changes=False, user=None):
         return 'completed'
     
     current_time = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
-    start_time = ausleihung.get('Start')
-    end_time = ausleihung.get('End')
+    start_time = ensure_timezone_aware(ausleihung.get('Start'))
+    end_time = ensure_timezone_aware(ausleihung.get('End'))
     
     # Wenn kein Startdatum vorhanden ist, Status auf 'planned' setzen
     if not start_time:

Web/modules/database/user.py

@@ -685,7 +685,7 @@ def student_card_exists(student_card_id):
     client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
     db = _get_tenant_db(client)
     users = db['student_cards']
-    exists = users.find_one({'SchülerName': normalized}) is not None
+    exists = users.find_one({'AusweisId': normalized}) is not None
     client.close()
     return exists
 

Web/static/css/styles.css

@@ -31,6 +31,9 @@
     --ui-text: #f8fafc;
     --ui-text-muted: #94a3b8;
     --ui-title: #ffffff;
+    --ui-overlay: #020617;
+    --ui-overlay-surface: #1e293b;
+    --ui-overlay-border: #64748b;
     --ui-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
     --ui-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
     
@@ -39,6 +42,10 @@
     --ui-btn-radius: 99px; /* Pillenform für Buttons */
 }
 
+:root[data-theme="dark"] {
+    color-scheme: dark;
+}
+
 /* Safe Area Support for iPad notches, Dynamic Island, and rounded corners */
 html {
     /* Ensure viewport-fit is respected */
@@ -1002,3 +1009,104 @@ html, body {
 :root[data-theme="dark"] .favorite-item {
     outline: 2px solid #f59e0b !important;
 }
+
+/* Keep overlays and dialogs sufficiently opaque for readable content. */
+:root[data-theme="dark"] .modal,
+:root[data-theme="dark"] .modal-backdrop,
+:root[data-theme="dark"] .ui-modal-overlay,
+:root[data-theme="dark"] .item-modal,
+:root[data-theme="dark"] .reset-modal-overlay,
+:root[data-theme="dark"] #onboarding-overlay,
+:root[data-theme="dark"] [id$="-modal"][style*="inset"],
+:root[data-theme="dark"] [id$="Modal"][style*="inset"] {
+    background-color: var(--ui-overlay) !important;
+}
+
+:root[data-theme="dark"] .modal-content,
+:root[data-theme="dark"] .ui-modal-surface,
+:root[data-theme="dark"] .reset-modal-container,
+:root[data-theme="dark"] #onboarding-modal,
+:root[data-theme="dark"] [id$="-modal"] > div,
+:root[data-theme="dark"] [id$="Modal"] > div {
+    background-color: var(--ui-overlay-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-overlay-border) !important;
+}
+
+/* Inline light surfaces must not become translucent or low-contrast in dark mode. */
+:root[data-theme="dark"] [style*="background: white"],
+:root[data-theme="dark"] [style*="background:#fff"],
+:root[data-theme="dark"] [style*="background: #fff"],
+:root[data-theme="dark"] [style*="background-color: white"],
+:root[data-theme="dark"] [style*="background-color:#fff"],
+:root[data-theme="dark"] [style*="background-color: #fff"] {
+    background-color: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+}
+
+/* Shared dark-mode surfaces for every template that extends base.html. */
+:root[data-theme="dark"] .container,
+:root[data-theme="dark"] .card,
+:root[data-theme="dark"] .card-body,
+:root[data-theme="dark"] .card-header,
+:root[data-theme="dark"] .card-footer,
+:root[data-theme="dark"] .content,
+:root[data-theme="dark"] .form-card,
+:root[data-theme="dark"] .form-container,
+:root[data-theme="dark"] .upload-container,
+:root[data-theme="dark"] .edit-container,
+:root[data-theme="dark"] .admin-content-container,
+:root[data-theme="dark"] .calendar-container,
+:root[data-theme="dark"] .table-container,
+:root[data-theme="dark"] .notice-card,
+:root[data-theme="dark"] .settings-card,
+:root[data-theme="dark"] .summary-card,
+:root[data-theme="dark"] .invoice-card,
+:root[data-theme="dark"] .student-card-form,
+:root[data-theme="dark"] .user-management-container,
+:root[data-theme="dark"] .error-container,
+:root[data-theme="dark"] .library-filter-panel,
+:root[data-theme="dark"] .library-items-table,
+:root[data-theme="dark"] .info-box {
+    background-color: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+}
+
+:root[data-theme="dark"] .table,
+:root[data-theme="dark"] .table-responsive,
+:root[data-theme="dark"] .table > :not(caption) > *,
+:root[data-theme="dark"] .table > :not(caption) > * > *,
+:root[data-theme="dark"] .library-items-table td,
+:root[data-theme="dark"] .library-items-table th {
+    background-color: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+}
+
+:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
+:root[data-theme="dark"] .table-light,
+:root[data-theme="dark"] .table-light > *,
+:root[data-theme="dark"] .bg-white,
+:root[data-theme="dark"] .bg-light,
+:root[data-theme="dark"] .bg-body,
+:root[data-theme="dark"] .bg-body-secondary {
+    background-color: var(--ui-surface-soft) !important;
+    color: var(--ui-text) !important;
+}
+
+:root[data-theme="dark"] .form-text,
+:root[data-theme="dark"] .text-muted,
+:root[data-theme="dark"] small,
+:root[data-theme="dark"] .library-load-hint {
+    color: var(--ui-text-muted) !important;
+}
+
+/* White translucent template decorations become stable, readable surfaces. */
+:root[data-theme="dark"] [style*="background: rgba(255,255,255"],
+:root[data-theme="dark"] [style*="background: rgba(255, 255, 255"],
+:root[data-theme="dark"] [style*="background-color: rgba(255,255,255"],
+:root[data-theme="dark"] [style*="background-color: rgba(255, 255, 255"] {
+    background-color: var(--ui-surface-soft) !important;
+    color: var(--ui-text) !important;
+}

Web/templates/admin_audit.html

@@ -1,12 +1,103 @@
 {% extends 'base.html' %}
 {% block title %}Audit Dashboard - {{ APP_VERSION }}{% endblock %}
 {% block content %}
+<style>
+  .audit-panel,
+  .audit-stat-card,
+  .audit-table-panel {
+    border: 1px solid var(--ui-border);
+    border-radius: 10px;
+    background: var(--ui-surface);
+    color: var(--ui-text);
+  }
+
+  .audit-panel p,
+  .audit-stat-label,
+  .audit-table-panel th {
+    color: var(--ui-text-muted);
+  }
+
+  .audit-table-panel {
+    padding: 12px;
+  }
+
+  .audit-table-scroll {
+    max-height: 560px;
+    overflow: auto;
+  }
+
+  .audit-table-panel table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .audit-table-panel th,
+  .audit-table-panel td {
+    border-bottom: 1px solid var(--ui-border) !important;
+  }
+
+  .audit-table-panel tbody tr:hover td {
+    background: var(--ui-bg-accent) !important;
+  }
+
+  .audit-mismatch-panel {
+    border-color: #f87171;
+    background: #fff7f7;
+  }
+
+  :root[data-theme="dark"] .audit-info-panel {
+    background: #082f49 !important;
+    border-left-color: #38bdf8 !important;
+  }
+
+  :root[data-theme="dark"] .audit-info-panel p {
+    color: #bae6fd !important;
+  }
+
+  :root[data-theme="dark"] .audit-panel,
+  :root[data-theme="dark"] .audit-stat-card,
+  :root[data-theme="dark"] .audit-table-panel {
+    background: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] .audit-mismatch-panel {
+    background: #451a1a !important;
+    border-color: #f87171 !important;
+  }
+
+  :root[data-theme="dark"] .audit-mismatch-panel h3 {
+    color: #fecaca !important;
+  }
+
+  :root[data-theme="dark"] .audit-table-panel th,
+  :root[data-theme="dark"] .audit-table-panel td,
+  :root[data-theme="dark"] .audit-table-panel pre {
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  @media (max-width: 700px) {
+    .audit-table-panel {
+      padding: 8px;
+    }
+
+    .audit-table-scroll {
+      overflow-x: auto;
+    }
+
+    .audit-table-panel table {
+      min-width: 720px;
+    }
+  }
+</style>
 <div class="container" style="max-width:1400px; margin:0 auto; padding:18px;">
   <h1>Audit Dashboard</h1>
   <p>Integritätsstatus der Audit-Chain und letzte Audit-Ereignisse (max. 200 Einträge).</p>
 
   <!-- Information Box for DIN 5008 Compliance -->
-  <div style="background:#e8f4f8; border-left:4px solid #0284c7; padding:12px; margin:0 0 16px 0; border-radius:4px;">
+  <div class="audit-panel audit-info-panel" style="background:#e8f4f8; border-left:4px solid #0284c7; padding:12px; margin:0 0 16px 0; border-radius:4px;">
     <p style="margin:0; font-size:0.95rem; color:#1e40af;">
       <strong>✓ Professionelle PDF-Exporte:</strong> Die neuen DIN 5008 konformen Berichte sind speziell für Schulträger, 
       Rechnungsprüfungsämter und Behörden optimiert. Sie enthalten Revisionssicherheit, Barrierefreiheit (BFSG) und 
@@ -16,7 +107,7 @@
 
   <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0 18px;">
     <!-- PDF Export Section -->
-    <div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
+    <div class="audit-panel" style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
       <h4 style="margin:0 0 10px 0; color:#1a1a1a;">📄 PDF-Export (DIN 5008 konform)</h4>
       <p style="margin:0 0 10px 0; font-size:0.9rem; color:#666;">Professionelle Berichte für Schulträger und Behörden</p>
       <div style="display:flex; gap:8px; flex-wrap:wrap;">
@@ -29,7 +120,7 @@
   </div>
 
   <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:16px 0 20px;">
-    <div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
+    <div class="audit-stat-card" style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
       <div style="font-size:0.85rem; color:#64748b;">Chain Status</div>
       {% if verify_result.ok %}
       <div style="font-size:1.35rem; font-weight:700; color:#166534;">OK</div>
@@ -37,11 +128,11 @@
       <div style="font-size:1.35rem; font-weight:700; color:#991b1b;">FEHLER</div>
       {% endif %}
     </div>
-    <div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
+    <div class="audit-stat-card" style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
       <div style="font-size:0.85rem; color:#64748b;">Einträge</div>
       <div style="font-size:1.35rem; font-weight:700;">{{ verify_result.count }}</div>
     </div>
-    <div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
+    <div class="audit-stat-card" style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
       <div style="font-size:0.85rem; color:#64748b;">Letzter Index</div>
       <div style="font-size:1.35rem; font-weight:700;">{{ verify_result.last_chain_index }}</div>
     </div>
@@ -52,7 +143,7 @@
   </div>
 
   {% if verify_result.mismatches %}
-  <div style="margin-bottom:20px; border:1px solid #fecaca; background:#fff7f7; border-radius:10px; padding:12px;">
+  <div class="audit-table-panel audit-mismatch-panel" style="margin-bottom:20px; border:1px solid #fecaca; background:#fff7f7; border-radius:10px; padding:12px;">
     <h3 style="margin-top:0; color:#991b1b;">Integritätsabweichungen</h3>
     <div style="max-height:280px; overflow:auto;">
       <table class="table" style="width:100%; border-collapse:collapse;">
@@ -79,9 +170,9 @@
   </div>
   {% endif %}
 
-  <div style="border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface); padding:12px;">
+  <div class="audit-table-panel" style="border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface); padding:12px;">
     <h3 style="margin-top:0;">Letzte Audit-Ereignisse</h3>
-    <div style="max-height:560px; overflow:auto;">
+    <div class="audit-table-scroll" style="max-height:560px; overflow:auto;">
       <table class="table" style="width:100%; border-collapse:collapse;">
         <thead>
           <tr>

Web/templates/base.html

@@ -1136,7 +1136,7 @@
                         </li>
                         {% endif %}
                         <li class="nav-item" data-nav-fixed="true">
-                            <button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
+                            <button type="button" class="btn btn-link nav-link px-3" data-theme-toggle aria-label="Dark Mode umschalten" aria-pressed="false" title="Theme umschalten">
                                 <span class="theme-icon-light" style="display: none;">☀️</span>
                                 <span class="theme-icon-dark" style="display: none;">🌙</span>
                             </button>
@@ -1229,7 +1229,7 @@
                         {% endif %}
                         {% endif %}
                         <li class="nav-item" data-nav-fixed="true">
-                            <button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
+                            <button type="button" class="btn btn-link nav-link px-3" data-theme-toggle aria-label="Dark Mode umschalten" aria-pressed="false" title="Theme umschalten">
                                 <span class="theme-icon-light" style="display: none;">☀️</span>
                                 <span class="theme-icon-dark" style="display: none;">🌙</span>
                             </button>
@@ -1358,7 +1358,7 @@
                         </li>
                         {% endif %}
                         <li class="nav-item" data-nav-fixed="true">
-                            <button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
+                            <button type="button" class="btn btn-link nav-link px-3" data-theme-toggle aria-label="Dark Mode umschalten" aria-pressed="false" title="Theme umschalten">
                                 <span class="theme-icon-light" style="display: none;">☀️</span>
                                 <span class="theme-icon-dark" style="display: none;">🌙</span>
                             </button>
@@ -1376,7 +1376,7 @@
                                 <li><a class="dropdown-item" href="{{ url_for('mahnungen_admin') }}">Mahnungen</a></li>
                                 {% endif %}
                                 {% if student_cards_module_enabled %}
-                                {% if current_permissions.actions.get('can_manage_users', False) %}
+                                {% if current_permissions.actions.get('can_manage_settings', False) %}
                                 <li><a class="dropdown-item" href="{{ url_for('student_cards_admin') }}">Bibliotheksausweis</a></li>
                                 {% endif %}
                                 {% endif %}
@@ -2345,33 +2345,56 @@
 
     <!-- Theme Toggle Script -->
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const toggleBtns = document.querySelectorAll('#themeToggleBtn');
-            if (toggleBtns.length === 0) return;
-            
-            function updateIcons(theme) {
-                const isDark = theme === 'dark';
-                document.querySelectorAll('.theme-icon-light').forEach(icon => icon.style.display = isDark ? 'inline' : 'none');
-                document.querySelectorAll('.theme-icon-dark').forEach(icon => icon.style.display = isDark ? 'none' : 'inline');
+        (function () {
+            const root = document.documentElement;
+            const metaThemeColor = document.getElementById('meta-theme-color');
+            const themeToggleSelector = '[data-theme-toggle]';
+
+            function getTheme() {
+                return root.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
             }
 
-            // Get current setup from initial script in head
-            let currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
-            updateIcons(currentTheme);
+            function updateThemeUi(theme) {
+                const isDark = theme === 'dark';
+                document.querySelectorAll('.theme-icon-light').forEach(icon => {
+                    icon.style.display = isDark ? 'inline' : 'none';
+                });
+                document.querySelectorAll('.theme-icon-dark').forEach(icon => {
+                    icon.style.display = isDark ? 'none' : 'inline';
+                });
+                document.querySelectorAll(themeToggleSelector).forEach(button => {
+                    button.setAttribute('aria-pressed', String(isDark));
+                    button.setAttribute('aria-label', isDark ? 'Light Mode einschalten' : 'Dark Mode einschalten');
+                    button.setAttribute('title', isDark ? 'Light Mode einschalten' : 'Dark Mode einschalten');
+                });
+                if (metaThemeColor) {
+                    metaThemeColor.setAttribute('content', isDark ? '#1a252f' : '#2c3e50');
+                }
+            }
 
-            toggleBtns.forEach(btn => {
-                btn.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    currentTheme = currentTheme === 'light' ? 'dark' : 'light';
-                    
-                    document.documentElement.setAttribute('data-theme', currentTheme);
-                    localStorage.setItem('inventarsystem-theme', currentTheme);
-                    document.getElementById('meta-theme-color').setAttribute('content', currentTheme === 'dark' ? '#1a252f' : '#2c3e50');
-                    
-                    updateIcons(currentTheme);
+            function applyTheme(theme, persist) {
+                const normalizedTheme = theme === 'dark' ? 'dark' : 'light';
+                root.setAttribute('data-theme', normalizedTheme);
+                if (persist) {
+                    try {
+                        localStorage.setItem('inventarsystem-theme', normalizedTheme);
+                    } catch (error) {
+                        console.warn('Theme konnte nicht gespeichert werden:', error);
+                    }
+                }
+                updateThemeUi(normalizedTheme);
+            }
+
+            document.addEventListener('DOMContentLoaded', function () {
+                updateThemeUi(getTheme());
+                document.addEventListener('click', function (event) {
+                    const button = event.target.closest(themeToggleSelector);
+                    if (!button) return;
+                    event.preventDefault();
+                    applyTheme(getTheme() === 'dark' ? 'light' : 'dark', true);
                 });
             });
-        });
+        })();
     </script>
     <script>
         (function () {
@@ -2396,5 +2419,151 @@
         })();
     </script>
 
+    <style id="dark-mode-component-overrides">
+        :root[data-theme="dark"] .mahnungen-head,
+        :root[data-theme="dark"] .mahnungen-card,
+        :root[data-theme="dark"] .tutorial-side,
+        :root[data-theme="dark"] .workflow-step,
+        :root[data-theme="dark"] .tutorial-note,
+        :root[data-theme="dark"] .tutorial-tooltip-toggle,
+        :root[data-theme="dark"] .bulk-delete-drawer,
+        :root[data-theme="dark"] .filter-group,
+        :root[data-theme="dark"] .filter-dropdown,
+        :root[data-theme="dark"] .calendar-wrapper,
+        :root[data-theme="dark"] .calendar-day-details,
+        :root[data-theme="dark"] .cal-booking-item,
+        :root[data-theme="dark"] .edit-form,
+        :root[data-theme="dark"] .password-change-form,
+        :root[data-theme="dark"] .upload-form,
+        :root[data-theme="dark"] .book-info-container,
+        :root[data-theme="dark"] .student-card-form,
+        :root[data-theme="dark"] .user-management-container {
+            background: var(--ui-surface) !important;
+            background-color: var(--ui-surface) !important;
+            color: var(--ui-text) !important;
+            border-color: var(--ui-border) !important;
+        }
+
+        :root[data-theme="dark"] .mahnungen-table th,
+        :root[data-theme="dark"] .calendar-header,
+        :root[data-theme="dark"] .filter-inputs,
+        :root[data-theme="dark"] .items-loading-indicator,
+        :root[data-theme="dark"] .detail-group.full-width .detail-value,
+        :root[data-theme="dark"] .library-filter-panel,
+        :root[data-theme="dark"] .card-header,
+        :root[data-theme="dark"] .modal-header,
+        :root[data-theme="dark"] .modal-footer {
+            background: var(--ui-surface-soft) !important;
+            background-color: var(--ui-surface-soft) !important;
+            color: var(--ui-text) !important;
+            border-color: var(--ui-border) !important;
+        }
+
+        :root[data-theme="dark"] .mahnungen-table tr:hover td,
+        :root[data-theme="dark"] .filter-option:hover,
+        :root[data-theme="dark"] .calendar-header button:hover,
+        :root[data-theme="dark"] .workflow-nav button:hover {
+            background: var(--ui-bg-accent) !important;
+            background-color: var(--ui-bg-accent) !important;
+        }
+
+        :root[data-theme="dark"] .mahnungen-head h1,
+        :root[data-theme="dark"] .tutorial-side h2,
+        :root[data-theme="dark"] .workflow-step h3,
+        :root[data-theme="dark"] .calendar-header span,
+        :root[data-theme="dark"] .calendar-day-details h5,
+        :root[data-theme="dark"] .detail-value,
+        :root[data-theme="dark"] .cal-booking-time,
+        :root[data-theme="dark"] .cal-booking-user,
+        :root[data-theme="dark"] .cal-booking-note,
+        :root[data-theme="dark"] .form-group label,
+        :root[data-theme="dark"] .page-header h1,
+        :root[data-theme="dark"] .card-header h2 {
+            color: var(--ui-title) !important;
+        }
+
+        :root[data-theme="dark"] .mahnungen-head p,
+        :root[data-theme="dark"] .tutorial-side p,
+        :root[data-theme="dark"] .workflow-step p,
+        :root[data-theme="dark"] .workflow-step li,
+        :root[data-theme="dark"] .tutorial-tooltip-toggle label,
+        :root[data-theme="dark"] .tooltip-description,
+        :root[data-theme="dark"] .page-header p,
+        :root[data-theme="dark"] .form-group small,
+        :root[data-theme="dark"] .cal-booking-label,
+        :root[data-theme="dark"] .cal-empty-state {
+            color: var(--ui-text-muted) !important;
+        }
+
+        :root[data-theme="dark"] .workflow-nav button,
+        :root[data-theme="dark"] .bulk-delete-actions button,
+        :root[data-theme="dark"] .filter-toggle,
+        :root[data-theme="dark"] .clear-filter {
+            background: var(--ui-surface-soft) !important;
+            background-color: var(--ui-surface-soft) !important;
+            color: var(--ui-text) !important;
+            border-color: var(--ui-border) !important;
+        }
+
+        :root[data-theme="dark"] .workflow-nav button.active,
+        :root[data-theme="dark"] .filter-toggle.is-open {
+            background: #1d4ed8 !important;
+            color: #ffffff !important;
+            border-color: #60a5fa !important;
+        }
+
+        :root[data-theme="dark"] .badge-light,
+        :root[data-theme="dark"] .badge.bg-light,
+        :root[data-theme="dark"] .badge.bg-secondary,
+        :root[data-theme="dark"] .filter-tag,
+        :root[data-theme="dark"] .tutorial-pill {
+            background: var(--ui-surface-soft) !important;
+            color: var(--ui-text) !important;
+            border-color: var(--ui-border) !important;
+        }
+
+        :root[data-theme="dark"] .form-control,
+        :root[data-theme="dark"] .form-select,
+        :root[data-theme="dark"] input,
+        :root[data-theme="dark"] select,
+        :root[data-theme="dark"] textarea {
+            background-color: var(--ui-bg) !important;
+            color: var(--ui-text) !important;
+            border-color: var(--ui-border) !important;
+        }
+
+        :root[data-theme="dark"] ::placeholder {
+            color: #b7c4d6 !important;
+            opacity: 1 !important;
+        }
+
+        :root[data-theme="dark"] .modal-content,
+        :root[data-theme="dark"] .modal-dialog-white,
+        :root[data-theme="dark"] .modal-body,
+        :root[data-theme="dark"] .modal-content-margin {
+            background: var(--ui-overlay-surface) !important;
+            background-color: var(--ui-overlay-surface) !important;
+            color: var(--ui-text) !important;
+            border-color: var(--ui-overlay-border) !important;
+        }
+
+        :root[data-theme="dark"] .modal-content h1,
+        :root[data-theme="dark"] .modal-content h2,
+        :root[data-theme="dark"] .modal-content h3,
+        :root[data-theme="dark"] .modal-content h4,
+        :root[data-theme="dark"] .modal-content h5,
+        :root[data-theme="dark"] .modal-content h6,
+        :root[data-theme="dark"] .modal-content label,
+        :root[data-theme="dark"] .modal-content p,
+        :root[data-theme="dark"] .modal-content span {
+            color: var(--ui-text) !important;
+        }
+
+        :root[data-theme="dark"] .guest-impressum-footer a {
+            color: #dbeafe !important;
+            border-bottom-color: #93c5fd !important;
+        }
+    </style>
+
 </body>
 </html>

Web/templates/library_borrowings_admin.html

@@ -205,6 +205,122 @@
     color: #6b7280;
   }
 
+  :root[data-theme="dark"] .library-admin-hero {
+    background: linear-gradient(135deg, #172554 0%, #1e293b 100%);
+    border-color: var(--ui-border);
+    box-shadow: var(--ui-shadow-md);
+  }
+
+  :root[data-theme="dark"] .library-admin-hero p,
+  :root[data-theme="dark"] .summary-card .label,
+  :root[data-theme="dark"] .muted,
+  :root[data-theme="dark"] .empty-state {
+    color: var(--ui-text-muted) !important;
+  }
+
+  :root[data-theme="dark"] .summary-card,
+  :root[data-theme="dark"] .panel {
+    background: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+    box-shadow: var(--ui-shadow-sm);
+  }
+
+  :root[data-theme="dark"] .summary-card .value,
+  :root[data-theme="dark"] .panel h2 {
+    color: var(--ui-title) !important;
+  }
+
+  :root[data-theme="dark"] .filter-bar input,
+  :root[data-theme="dark"] .filter-bar select {
+    background: var(--ui-bg) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] .filter-bar input:focus,
+  :root[data-theme="dark"] .filter-bar select:focus {
+    outline: none;
+    border-color: #60a5fa !important;
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
+  }
+
+  :root[data-theme="dark"] .library-table,
+  :root[data-theme="dark"] .library-table td {
+    background: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] .library-table th {
+    background: var(--ui-surface-soft) !important;
+    color: var(--ui-text-muted) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] .library-table tr:hover td {
+    background: var(--ui-bg-accent) !important;
+  }
+
+  :root[data-theme="dark"] .badge-active {
+    background: #172554;
+    color: #bfdbfe;
+  }
+
+  :root[data-theme="dark"] .badge-planned {
+    background: #422006;
+    color: #fde68a;
+  }
+
+  :root[data-theme="dark"] .badge-completed,
+  :root[data-theme="dark"] .badge-paid {
+    background: #123524;
+    color: #b7f7ce;
+  }
+
+  :root[data-theme="dark"] .badge-open,
+  :root[data-theme="dark"] .badge-damaged {
+    background: #451a1a;
+    color: #fecaca;
+  }
+
+  :root[data-theme="dark"] .badge-class {
+    background: var(--ui-surface-soft);
+    color: var(--ui-text);
+    border-color: var(--ui-border);
+  }
+
+  :root[data-theme="dark"] .row-actions .btn-outline-danger {
+    background: #451a1a;
+    color: #fca5a5;
+    border-color: #f87171;
+  }
+
+  :root[data-theme="dark"] .row-actions .btn-outline-danger:hover {
+    background: #dc2626;
+    color: #ffffff;
+  }
+
+  :root[data-theme="dark"] #damage-invoice-modal > div,
+  :root[data-theme="dark"] #repair-action-modal > div {
+    background: var(--ui-overlay-surface) !important;
+    color: var(--ui-text) !important;
+    border: 1px solid var(--ui-overlay-border);
+  }
+
+  :root[data-theme="dark"] #damage-invoice-modal input,
+  :root[data-theme="dark"] #damage-invoice-modal textarea,
+  :root[data-theme="dark"] #repair-action-modal input {
+    background: var(--ui-bg) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] #damage-invoice-modal p,
+  :root[data-theme="dark"] #repair-action-modal p {
+    color: var(--ui-text-muted) !important;
+  }
+
   @media (max-width: 900px) {
     .library-admin-hero {
       flex-direction: column;
@@ -219,6 +335,11 @@
       overflow-x: auto;
       white-space: nowrap;
     }
+
+    .library-admin-shell {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
   }
 </style>
 

Web/templates/library_item_invoices.html

@@ -112,7 +112,73 @@
     padding: 36px 20px;
   }
 
+  :root[data-theme="dark"] .invoice-history-head {
+    background: linear-gradient(135deg, #172554 0%, #1e293b 100%);
+    border-color: var(--ui-border);
+    box-shadow: var(--ui-shadow-md);
+  }
+
+  :root[data-theme="dark"] .head-meta,
+  :root[data-theme="dark"] .muted,
+  :root[data-theme="dark"] .empty-state {
+    color: var(--ui-text-muted) !important;
+  }
+
+  :root[data-theme="dark"] .section-header {
+    color: var(--ui-title) !important;
+  }
+
+  :root[data-theme="dark"] .invoice-card {
+    background: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+    box-shadow: var(--ui-shadow-sm);
+  }
+
+  :root[data-theme="dark"] .invoice-table,
+  :root[data-theme="dark"] .invoice-table td {
+    background: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] .invoice-table th {
+    background: var(--ui-surface-soft) !important;
+    color: var(--ui-text-muted) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] .invoice-table tr:hover td {
+    background: var(--ui-bg-accent) !important;
+  }
+
+  :root[data-theme="dark"] .badge-open {
+    background: #451a1a;
+    color: #fecaca;
+  }
+
+  :root[data-theme="dark"] .badge-paid,
+  :root[data-theme="dark"] .badge-completed {
+    background: #123524;
+    color: #b7f7ce;
+  }
+
+  :root[data-theme="dark"] .badge-active {
+    background: #172554;
+    color: #bfdbfe;
+  }
+
+  :root[data-theme="dark"] .badge-planned {
+    background: #422006;
+    color: #fde68a;
+  }
+
   @media (max-width: 900px) {
+    .invoice-history-shell {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+
     .invoice-table {
       display: block;
       overflow-x: auto;

Web/templates/library_table.html

@@ -95,10 +95,18 @@
         flex: 1;
         min-width: 250px;
         padding: 12px 16px;
-        border: 1px solid #ddd;
-        border-radius: 6px;
+        border: 1px solid var(--ui-border);
+        border-radius: 10px;
         font-size: 16px;
-        background: #fff;
+        background: var(--ui-surface);
+        color: var(--ui-text);
+        transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .library-search-input:focus {
+        outline: none;
+        border-color: #60a5fa;
+        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
     }
 
     .library-scan-panel {
@@ -138,34 +146,35 @@
     /* Filters */
     .library-filter-toggle-btn {
         padding: 10px 16px;
-        background: #f0f2f5;
-        border: 1px solid #ddd;
-        border-radius: 6px;
-        font-weight: 500;
+        background: var(--ui-surface-soft);
+        border: 1px solid var(--ui-border);
+        border-radius: 10px;
+        font-weight: 700;
         color: var(--ui-text);
         cursor: pointer;
-        transition: all 0.2s ease;
+        transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
     }
 
     .library-filter-toggle-btn:hover {
-        background: #e4e6eb;
-        border-color: #999;
+        background: var(--ui-bg-accent);
+        border-color: #60a5fa;
     }
 
     .library-filter-toggle-btn.active {
-        background: #e0e7ff;
-        border-color: #4f46e5;
-        color: #4f46e5;
+        background: var(--module-primary-color);
+        border-color: var(--module-primary-color);
+        color: #ffffff;
+        box-shadow: 0 0 0 3px var(--module-accent-light);
     }
 
     .library-filter-panel {
         display: none;
-        background: #fff;
-        border: 1px solid #ddd;
-        border-radius: 8px;
-        padding: 20px;
+        background: var(--ui-surface);
+        border: 1px solid var(--ui-border);
+        border-radius: 12px;
+        padding: 18px;
         margin-bottom: 20px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+        box-shadow: var(--ui-shadow-sm);
     }
 
     .library-filter-panel.open {
@@ -198,34 +207,53 @@
     .filter-item input,
     .filter-item select {
         padding: 8px 12px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
+        border: 1px solid var(--ui-border);
+        border-radius: 8px;
         font-size: 14px;
-        background: #fff;
+        background: var(--ui-bg);
+        color: var(--ui-text);
         transition: border-color 0.2s ease, box-shadow 0.2s ease;
     }
 
     .filter-item input:focus,
     .filter-item select:focus {
         outline: none;
-        border-color: #4f46e5;
-        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
+        border-color: #60a5fa;
+        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
     }
 
     .filter-buttons {
         display: flex;
+        flex-wrap: wrap;
         gap: 10px;
         margin-top: 15px;
         padding-top: 15px;
-        border-top: 1px solid #eee;
+        border-top: 1px solid var(--ui-border);
     }
 
     .filter-buttons .button {
-        flex: 1;
+        flex: 0 1 auto;
         padding: 8px 16px;
         font-size: 14px;
     }
 
+    #clearFilterBtn {
+        background: var(--ui-surface-soft) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+    }
+
+    .filter-buttons > div[style*="flex-grow"] {
+        flex: 1 1 100%;
+        min-width: 12px;
+    }
+
+    @media (min-width: 900px) {
+        .filter-buttons > div[style*="flex-grow"] {
+            flex: 1 1 auto;
+        }
+    }
+
     /* =========================================
        4. Tables & Data Display
        ========================================= */
@@ -637,7 +665,7 @@
         <span class="close" id="closePhysicalScannerBtn" role="button" tabindex="0" aria-label="Physischen Scanner schließen">&times;</span>
         <h2 id="physicalScannerTitle">Physischer Scanner</h2>
         <p id="physicalScannerInstruction">Scanner ist bereit. Bitte den angezeigten Code scannen.</p>
-        <div id="physicalScannerCode" class="physical-scanner-code" aria-live="polite"></div>
+        <div id="physicalScannerCode" class="physical-scanner-code" tabindex="0" aria-label="Eingehender Scan" aria-live="polite"></div>
         <p id="physicalScannerStatus" class="library-scan-status" aria-live="polite">Warte auf Scan...</p>
         <button id="stopPhysicalScannerBtn" class="button" type="button">Scanner schließen</button>
     </div>
@@ -650,6 +678,7 @@
     // =========================================================================
     function createModalOverlay() {
         const overlay = document.createElement('div');
+        overlay.className = 'ui-modal-overlay';
         overlay.style.position = 'fixed';
         overlay.style.top = '0';
         overlay.style.left = '0';
@@ -665,6 +694,7 @@
 
     function createModalBox() {
         const box = document.createElement('div');
+        box.className = 'ui-modal-surface';
         box.style.backgroundColor = '#fff';
         box.style.padding = '24px';
         box.style.borderRadius = '8px';
@@ -873,7 +903,7 @@
     let keyboardScanBuffer = '';
     let keyboardLastKeyAt = 0;
     let physicalScannerModalOpen = false;
-    const KEYBOARD_SCAN_INTERCHAR_MS = 100; // max time between keystrokes to consider them one scan
+    const KEYBOARD_SCAN_INTERCHAR_MS = 500; // max time between slower scanner keystrokes
     const physicalScanQueue = [];
     let keyboardScanProcessing = false;
     let editLibraryState = {
@@ -1219,12 +1249,16 @@
     // =========================================================================
     function getPhysicalScannerInstruction() {
         const mode = document.getElementById('scanModeSelect')?.value || 'card_only';
-        if (mode === 'return_only') return 'Bitte den Mediencode scannen.';
-        if (mode === 'card_only') return 'Bitte den Bibliotheksausweis scannen.';
-        if (mode === 'quick_toggle' && !activeStudentCardId) return 'Bitte zuerst den Bibliotheksausweis scannen.';
-        if (mode === 'quick_toggle') return 'Bitte den Mediencode scannen.';
-        if (mode === 'continuous' && !activeStudentCardId) return 'Bitte zuerst den Bibliotheksausweis scannen.';
-        return 'Bitte den nächsten Mediencode scannen.';
+        if (mode === 'return_only') return 'Hinweis: Benötigt wird ein Mediencode zur Rückgabe.';
+        if (mode === 'card_only') return 'Hinweis: Benötigt wird ein Bibliotheksausweis.';
+        if (mode === 'quick_toggle' && !activeStudentCardId) {
+            return 'Hinweis: Zuerst wird ein Bibliotheksausweis benötigt.';
+        }
+        if (mode === 'quick_toggle') return 'Hinweis: Jetzt wird ein Mediencode benötigt.';
+        if (mode === 'continuous' && !activeStudentCardId) {
+            return 'Hinweis: Zuerst wird ein Bibliotheksausweis benötigt.';
+        }
+        return 'Hinweis: Jetzt wird der nächste Mediencode benötigt.';
     }
 
     function updatePhysicalScannerModal(message, kind = '') {
@@ -1249,7 +1283,7 @@
         modal.style.display = 'flex';
         updatePhysicalScannerModal('Warte auf Scan...', 'warn');
         document.addEventListener('keydown', keyboardScanKeydownHandler);
-        document.getElementById('closePhysicalScannerBtn')?.focus();
+        document.getElementById('physicalScannerCode')?.focus();
     }
 
     function closePhysicalScannerModal() {
@@ -1287,13 +1321,13 @@
             // Scanner keystrokes must not be submitted into the focused form field.
             const displayCode = document.getElementById('physicalScannerCode');
             if (displayCode) displayCode.textContent = code;
-            updatePhysicalScannerModal('Code empfangen. Verarbeitung läuft...', 'warn');
+            updatePhysicalScannerModal('Enter erkannt. Code wird verarbeitet...', 'warn');
             processPhysicalScan(code);
             return;
         }
 
-        // Physical scanners in this workflow emit numeric codes only.
-        if (e.key.length === 1 && /\d/.test(e.key)) {
+        // Accept all printable scanner characters, including letters and punctuation.
+        if (e.key.length === 1) {
             // If time gap too big, start new buffer
             if (keyboardLastKeyAt && (now - keyboardLastKeyAt) > KEYBOARD_SCAN_INTERCHAR_MS) {
                 keyboardScanBuffer = '';
@@ -1316,7 +1350,8 @@
             while (physicalScanQueue.length > 0) {
                 await handleScanSuccess(physicalScanQueue.shift());
                 if (physicalScannerModalOpen) {
-                    updatePhysicalScannerModal('Aktion abgeschlossen. Bereit für den nächsten Scan.', 'ok');
+                    const displayCode = document.getElementById('physicalScannerCode');
+                    if (displayCode) displayCode.textContent = '';
                 }
             }
         } finally {
@@ -1349,6 +1384,7 @@
             setActiveStudentCard(scannedCode);
             setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}. Bitte den nächsten Ausweis scannen.`, 'ok');
             showSmallConfirm(`Ausweis erkannt: ${activeStudentCardId}. Sie können den nächsten scannen.`, 'ok');
+            updatePhysicalScannerModal(`Ausweis erkannt. Bereit für den nächsten Scan.`, 'ok');
             return;
         }
 
@@ -1374,9 +1410,10 @@
             setActiveStudentCard(scannedCode);
             setScanStatus(`Neuer Ausweis gesetzt: ${activeStudentCardId}. Bitte Medien scannen.`, 'ok');
             showSmallConfirm(`Benutzer gewechselt zu: ${activeStudentCardId}`, 'ok');
+            updatePhysicalScannerModal('Ausweis erkannt. Jetzt Mediencodes scannen.', 'ok');
 
             setTimeout(() => {
-                if (document.getElementById('scanModeSelect').value === 'continuous') {
+                if (!physicalScannerModalOpen && document.getElementById('scanModeSelect').value === 'continuous') {
                     startScanner();
                 }
             }, 1000);
@@ -1386,15 +1423,84 @@
         if (!activeStudentCardId) {
             setScanStatus('Kein Ausweis aktiv! Bitte zuerst einen Schülerausweis scannen.', 'error');
             showSmallConfirm('Bitte zuerst Ausweis scannen', 'error');
+            updatePhysicalScannerModal('Kein Ausweis aktiv. Bitte zuerst den Ausweis scannen.', 'error');
 
             setTimeout(() => {
-                if (document.getElementById('scanModeSelect').value === 'continuous') {
+                if (!physicalScannerModalOpen && document.getElementById('scanModeSelect').value === 'continuous') {
                     startScanner();
                 }
             }, 2000);
             return;
         }
 
+        try {
+            setScanStatus('Verarbeite Mediencode...', 'warn');
+            const response = await fetch('/api/library_scan_action', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': '{{ csrf_token }}',
+                    'X-CSRF-Token': '{{ csrf_token }}'
+                },
+                body: JSON.stringify({
+                    student_card_id: activeStudentCardId,
+                    item_code: scannedCode,
+                    action: 'borrow'
+                })
+            });
+
+            const result = await response.json();
+            if (!response.ok || !result.ok) {
+                setScanStatus(result.message || 'Scan-Aktion fehlgeschlagen.', 'error');
+                showSmallConfirm(result.message || 'Aktion fehlgeschlagen.', 'error');
+                updatePhysicalScannerModal(result.message || 'Scan-Aktion fehlgeschlagen.', 'error');
+            } else if (result.action === 'borrowed') {
+                setScanStatus(`Ausgeliehen: ${result.item_name}`, 'ok');
+                showSmallConfirm(`Ausgeliehen: ${result.item_name}`, 'ok', {
+                    actionLabel: 'Mit nächstem Ausweis starten',
+                    onAction: startNextStudentCardScan
+                });
+                updatePhysicalScannerModal('Ausleihe erfolgreich. Bereit für den nächsten Mediencode.', 'ok');
+            } else if (result.action === 'returned') {
+                setScanStatus(`Zurückgegeben: ${result.item_name}`, 'ok');
+                showSmallConfirm(`Zurückgegeben: ${result.item_name}`, 'ok');
+                updatePhysicalScannerModal('Rückgabe erfolgreich. Bereit für den nächsten Mediencode.', 'ok');
+            } else {
+                setScanStatus(result.message || 'Aktion durchgeführt.', 'ok');
+                showSmallConfirm(result.message || 'Erfolgreich', 'ok');
+                updatePhysicalScannerModal('Aktion erfolgreich. Bereit für den nächsten Mediencode.', 'ok');
+            }
+
+            // Tabellen-Ansicht aktualisieren
+            if (typeof loadLibraryItems === "function") {
+                await loadLibraryItems();
+            }
+        } catch (err) {
+            console.error('Continuous scan action failed:', err);
+            setScanStatus('Fehler beim Verarbeiten des Scans.', 'error');
+            showSmallConfirm('Fehler im Netzwerk/System', 'error');
+            updatePhysicalScannerModal('Fehler beim Verarbeiten. Bitte erneut scannen.', 'error');
+        }
+
+        setTimeout(() => {
+            if (!physicalScannerModalOpen && document.getElementById('scanModeSelect').value === 'continuous') {
+                startScanner();
+            }
+        }, 1500);
+    }
+
+    async function processQuickToggleScan(scannedCode) {
+
+        // 2. Wenn kein Ausweis gesetzt ist, wird der Code als Ausweis interpretiert
+        if (!activeStudentCardId) {
+            setActiveStudentCard(scannedCode);
+            setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}. Bitte den nächsten Mediencode scannen.`, 'ok');
+            showSmallConfirm(`Ausweis erkannt: ${activeStudentCardId}. Bitte jetzt den nächsten Mediencode scannen.`, 'ok');
+            updatePhysicalScannerModal('Ausweis erkannt. Jetzt den Mediencode scannen.', 'ok');
+            return;
+        }
+
+        // 3. Ausleihe/Rückgabe verarbeiten (wenn Ausweis vorhanden)
         try {
             setScanStatus('Verarbeite Mediencode...', 'warn');
             const response = await fetch('/api/library_scan_action', {
@@ -1413,78 +1519,32 @@
             const result = await response.json();
             if (!response.ok || !result.ok) {
                 setScanStatus(result.message || 'Scan-Aktion fehlgeschlagen.', 'error');
-                showSmallConfirm(result.message || 'Aktion fehlgeschlagen.', 'error');
-            } else if (result.action === 'borrowed') {
-                setScanStatus(`Ausgeliehen: ${result.item_name}`, 'ok');
-                showSmallConfirm(`Ausgeliehen: ${result.item_name}`, 'ok');
-            } else if (result.action === 'returned') {
-                setScanStatus(`Zurückgegeben: ${result.item_name}`, 'ok');
-                showSmallConfirm(`Zurückgegeben: ${result.item_name}`, 'ok');
-            } else {
-                setScanStatus(result.message || 'Aktion durchgeführt.', 'ok');
-                showSmallConfirm(result.message || 'Erfolgreich', 'ok');
-            }
-
-            // Tabellen-Ansicht aktualisieren
-            if (typeof loadLibraryItems === "function") {
-                await loadLibraryItems();
-            }
-        } catch (err) {
-            console.error('Continuous scan action failed:', err);
-            setScanStatus('Fehler beim Verarbeiten des Scans.', 'error');
-            showSmallConfirm('Fehler im Netzwerk/System', 'error');
-        }
-
-        setTimeout(() => {
-            if (document.getElementById('scanModeSelect').value === 'continuous') {
-                startScanner();
-            }
-        }, 1500);
-    }
-
-    async function processQuickToggleScan(scannedCode) {
-
-        // 2. Wenn kein Ausweis gesetzt ist, wird der Code als Ausweis interpretiert
-        if (!activeStudentCardId) {
-            setActiveStudentCard(scannedCode);
-            setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}. Bitte den nächsten Mediencode scannen.`, 'ok');
-            showSmallConfirm(`Ausweis erkannt: ${activeStudentCardId}. Bitte jetzt den nächsten Mediencode scannen.`, 'ok');
-            return;
-        }
-
-        // 3. Ausleihe/Rückgabe verarbeiten (wenn Ausweis vorhanden)
-        try {
-            setScanStatus('Verarbeite Mediencode...', 'warn');
-            const response = await fetch('/api/library_scan_action', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({
-                    student_card_id: activeStudentCardId,
-                    item_code: scannedCode
-                })
-            });
-
-            const result = await response.json();
-            if (!response.ok || !result.ok) {
-                setScanStatus(result.message || 'Scan-Aktion fehlgeschlagen.', 'error');
+                updatePhysicalScannerModal(result.message || 'Scan-Aktion fehlgeschlagen.', 'error');
                 return;
             }
 
             if (result.action === 'borrowed') {
                 setScanStatus(`Ausgeliehen: ${result.item_name}`, 'ok');
-                showSmallConfirm(`Ausgeliehen: ${result.item_name}`, 'ok');
+                showSmallConfirm(`Ausgeliehen: ${result.item_name}`, 'ok', {
+                    actionLabel: 'Mit nächstem Ausweis starten',
+                    onAction: startNextStudentCardScan
+                });
+                updatePhysicalScannerModal('Ausleihe erfolgreich. Bereit für den nächsten Mediencode.', 'ok');
             } else if (result.action === 'returned') {
                 setScanStatus(`Zurückgegeben: ${result.item_name}`, 'ok');
                 showSmallConfirm(`Zurückgegeben: ${result.item_name}`, 'ok');
+                updatePhysicalScannerModal('Rückgabe erfolgreich. Bereit für den nächsten Mediencode.', 'ok');
             } else {
                 setScanStatus(result.message || 'Aktion durchgeführt.', 'ok');
                 showSmallConfirm(result.message || 'Aktion durchgeführt.', 'ok');
+                updatePhysicalScannerModal('Aktion erfolgreich. Bereit für den nächsten Mediencode.', 'ok');
             }
 
             await loadLibraryItems();
         } catch (err) {
             console.error('Quick scan action failed:', err);
             setScanStatus('Fehler beim Verarbeiten des Scans.', 'error');
+            updatePhysicalScannerModal('Fehler beim Verarbeiten. Bitte erneut scannen.', 'error');
         }
     }
 
@@ -1494,23 +1554,30 @@
         try {
             const resp = await fetch('/api/library_return_by_code', {
                 method: 'POST',
-                headers: {'Content-Type': 'application/json'},
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': '{{ csrf_token }}',
+                    'X-CSRF-Token': '{{ csrf_token }}'
+                },
                 body: JSON.stringify({ item_code: code })
             });
             const result = await resp.json();
             if (!resp.ok || !result.ok) {
                 setScanStatus(result.message || 'Rückgabe fehlgeschlagen.', 'error');
                 showSmallConfirm(result.message || 'Rückgabe fehlgeschlagen.', 'error');
+                updatePhysicalScannerModal(result.message || 'Rückgabe fehlgeschlagen.', 'error');
                 return false;
             }
             setScanStatus(result.message || `Zurückgegeben: ${result.item_name || ''}`, 'ok');
             showSmallConfirm(result.message || `Zurückgegeben: ${result.item_name || ''}`, 'ok');
+            updatePhysicalScannerModal('Rückgabe erfolgreich. Bereit für den nächsten Mediencode.', 'ok');
             await loadLibraryItems();
             return true;
         } catch (err) {
             console.error('Return by code failed:', err);
             setScanStatus('Fehler bei Rückgabe.', 'error');
             showSmallConfirm('Fehler bei Rückgabe.', 'error');
+            updatePhysicalScannerModal('Fehler bei Rückgabe. Bitte erneut scannen.', 'error');
             return false;
         }
     }
@@ -1627,21 +1694,51 @@
         if (kind) el.classList.add(kind);
     }
 
-    function showSmallConfirm(message, kind='ok') {
+    function showSmallConfirm(message, kind='ok', action = null) {
         // Append the small helper text in German
         const helper = 'Sie können fortfahren. Dies ist nur eine kleine Benachrichtigung.';
         const el = document.createElement('div');
         el.className = `small-popup ${kind === 'error' ? 'error' : 'ok'}`;
-        el.innerHTML = `<div>${escapeHtml(String(message || ''))}</div><div style="opacity:0.9; margin-left:8px; font-size:0.85em;">${helper}</div><div class="close-x">&times;</div>`;
+        el.innerHTML = `<div>${escapeHtml(String(message || ''))}</div><div style="opacity:0.9; margin-left:8px; font-size:0.85em;">${helper}</div>`;
+
+        if (action && typeof action.onAction === 'function') {
+            const actionButton = document.createElement('button');
+            actionButton.type = 'button';
+            actionButton.textContent = action.actionLabel || 'Weiter';
+            actionButton.style.marginLeft = '8px';
+            actionButton.style.padding = '6px 10px';
+            actionButton.style.cursor = 'pointer';
+            actionButton.addEventListener('click', () => {
+                if (el.parentNode) el.parentNode.removeChild(el);
+                action.onAction();
+            });
+            el.appendChild(actionButton);
+        }
+
+        const closeButton = document.createElement('div');
+        closeButton.className = 'close-x';
+        closeButton.innerHTML = '&times;';
+        el.appendChild(closeButton);
         document.body.appendChild(el);
         // close handler
-        el.querySelector('.close-x').addEventListener('click', () => {
+        closeButton.addEventListener('click', () => {
             if (el && el.parentNode) el.parentNode.removeChild(el);
         });
         // auto remove after 3 seconds
         setTimeout(() => { try { if (el && el.parentNode) el.parentNode.removeChild(el); } catch(e){} }, 3000);
     }
 
+    async function startNextStudentCardScan() {
+        setActiveStudentCard('');
+        setScanStatus('Bereit für den nächsten Ausweis.', 'warn');
+        updatePhysicalScannerModal('Bereit für den nächsten Ausweis.', 'warn');
+
+        const mode = document.getElementById('scanModeSelect')?.value;
+        if (!physicalScannerModalOpen && (mode === 'quick_toggle' || mode === 'continuous') && !scannerRunning) {
+            await startScanner();
+        }
+    }
+
     function setActiveStudentCard(cardId) {
         activeStudentCardId = (cardId || '').trim().toUpperCase();
         const input = document.getElementById('activeStudentCard');

Web/templates/license.html

@@ -174,29 +174,33 @@
 
 <style>
     #legalTabs .nav-link {
-        color: #495057;
+        color: var(--ui-text-muted);
+        border-color: transparent;
     }
     #legalTabs .nav-link.active {
         font-weight: 600;
-        color: #0d6efd;
+        color: #60a5fa;
+        background: var(--ui-surface-soft);
+        border-color: var(--ui-border) var(--ui-border) var(--ui-surface-soft);
     }
     .license-content {
         background-color: var(--ui-surface-soft);
         padding: 20px 30px;
         border-radius: 0 0 5px 5px;
-        border: 1px solid #dee2e6;
+        border: 1px solid var(--ui-border);
         border-top: none;
+        color: var(--ui-text);
     }
     .license-content h2 {
         margin-top: 10px;
     }
     .license-content h3 {
         margin-top: 1.4em;
-        color: #343a40;
+        color: var(--ui-title);
     }
     .license-content h4 {
         margin-top: 1.1em;
-        color: #495057;
+        color: var(--ui-text);
     }
     .license-content ol,
     .license-content ul {
@@ -208,7 +212,7 @@
     }
     .license-content hr {
         margin: 25px 0;
-        border-color: #dee2e6;
+        border-color: var(--ui-border);
     }
     .license-exception-notice {
         margin: 20px 0;
@@ -229,5 +233,61 @@
         font-weight: bold;
         color: #0d6efd;
     }
+
+    :root[data-theme="dark"] #legalTabs {
+        border-bottom-color: var(--ui-border);
+    }
+
+    :root[data-theme="dark"] #legalTabs .nav-link:hover {
+        color: #bfdbfe;
+        background: var(--ui-bg-accent);
+        border-color: var(--ui-border);
+    }
+
+    :root[data-theme="dark"] #legalTabs .nav-link.active {
+        color: #bfdbfe;
+        background: var(--ui-surface-soft);
+        border-color: var(--ui-border) var(--ui-border) var(--ui-surface-soft);
+    }
+
+    :root[data-theme="dark"] .license-content {
+        background: var(--ui-surface) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+    }
+
+    :root[data-theme="dark"] .license-content p,
+    :root[data-theme="dark"] .license-content li {
+        color: var(--ui-text-muted);
+    }
+
+    :root[data-theme="dark"] .license-content strong,
+    :root[data-theme="dark"] .license-content h2,
+    :root[data-theme="dark"] .license-content h3,
+    :root[data-theme="dark"] .license-content h4 {
+        color: var(--ui-title) !important;
+    }
+
+    :root[data-theme="dark"] .license-content hr {
+        border-color: var(--ui-border);
+    }
+
+    :root[data-theme="dark"] .license-exception-notice {
+        background: #422006 !important;
+        border-color: #f59e0b !important;
+        border-left-color: #fb923c !important;
+        color: #fde68a !important;
+    }
+
+    :root[data-theme="dark"] .license-exception-notice h3,
+    :root[data-theme="dark"] .license-exception-notice p,
+    :root[data-theme="dark"] .license-exception-notice a {
+        color: #fde68a !important;
+    }
+
+    :root[data-theme="dark"] .license-content code {
+        background: #082f49;
+        color: #bae6fd;
+    }
 </style>
 {% endblock %}

Web/templates/logs.html

@@ -229,9 +229,11 @@
     
     #searchInput {
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
         width: 200px;
+        background: var(--ui-bg);
+        color: var(--ui-text);
     }
     
     .date-range {
@@ -242,8 +244,17 @@
     
     .date-range input {
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
+        background: var(--ui-bg);
+        color: var(--ui-text);
+    }
+
+    #searchInput:focus,
+    .date-range input:focus {
+        outline: none;
+        border-color: #60a5fa;
+        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
     }
     .status-badge {
         display: inline-block;
@@ -308,13 +319,15 @@
     table {
         width: 100%;
         border-collapse: collapse;
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+        background: var(--ui-surface);
+        color: var(--ui-text);
+        box-shadow: var(--ui-shadow-sm);
     }
     
     th, td {
         padding: 12px 15px;
         text-align: left;
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid var(--ui-border);
     }
     
     th {
@@ -328,7 +341,7 @@
     }
     
     tbody tr:hover {
-        background-color: #f5f5f5;
+        background-color: var(--ui-bg-accent);
     }
     
     .navigation-buttons {
@@ -358,6 +371,52 @@
     .export-button:hover {
         background-color: #218838;
     }
+
+    :root[data-theme="dark"] .conflict-summary-banner {
+        background: #422006 !important;
+        border-color: #f59e0b !important;
+        border-left-color: #fb923c !important;
+        color: #fde68a !important;
+    }
+
+    :root[data-theme="dark"] .banner-close {
+        color: #fde68a;
+    }
+
+    :root[data-theme="dark"] .banner-close:hover {
+        color: #fff7ed;
+    }
+
+    :root[data-theme="dark"] .conflict-badge {
+        background: #422006 !important;
+        border-color: #f59e0b !important;
+        color: #fde68a !important;
+    }
+
+    :root[data-theme="dark"] #logsTable {
+        background: var(--ui-surface) !important;
+        color: var(--ui-text) !important;
+    }
+
+    :root[data-theme="dark"] #logsTable th {
+        background: #1d4ed8 !important;
+        color: #ffffff !important;
+        border-color: #60a5fa !important;
+    }
+
+    :root[data-theme="dark"] #logsTable th:hover {
+        background: #2563eb !important;
+    }
+
+    :root[data-theme="dark"] #logsTable td {
+        background: var(--ui-surface) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+    }
+
+    :root[data-theme="dark"] #logsTable tbody tr:hover td {
+        background: var(--ui-bg-accent) !important;
+    }
     
     @media (max-width: 768px) {
         .filter-controls {
@@ -373,6 +432,17 @@
             width: 100%;
             justify-content: space-between;
         }
+
+        .navigation-buttons {
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        .navigation-buttons .button,
+        .navigation-buttons .export-button {
+            flex: 1 1 180px;
+            text-align: center;
+        }
     }
 </style>
 {% endblock %}

Web/templates/mahnungen_admin.html

@@ -256,6 +256,7 @@ function submitEmailMahnung() {
     const loanId = document.getElementById('modalLoanId').value;
     const email = document.getElementById('modalEmail').value;
     const message = document.getElementById('modalMessage').value;
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
 
     if (!email) {
         alert('Bitte geben Sie eine gültige E-Mail-Adresse ein.');
@@ -264,7 +265,7 @@ function submitEmailMahnung() {
 
     fetch('/mahnungen_send_email', {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
         body: JSON.stringify({ loan_id: loanId, email: email, message: message })
     })
     .then(response => response.json())
@@ -289,9 +290,11 @@ function resetMahnung(loanId, studentName) {
         return;
     }
 
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
+
     fetch('/mahnungen_reset', {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
         body: JSON.stringify({ loan_id: loanId })
     })
     .then(response => response.json())

Web/templates/manage_locations.html

@@ -71,27 +71,27 @@
     h1 {
         text-align: center;
         margin-bottom: 30px;
-        color: #343a40;
+        color: var(--ui-title);
     }
     
     .card {
         border-radius: 5px;
-        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        box-shadow: var(--ui-shadow-sm);
         margin-bottom: 20px;
         background-color: var(--ui-surface);
-        border: 1px solid #e9ecef;
+        border: 1px solid var(--ui-border);
     }
     
     .card-header {
         background-color: var(--ui-surface-soft);
         padding: 15px 20px;
-        border-bottom: 1px solid #e9ecef;
+        border-bottom: 1px solid var(--ui-border);
     }
     
     .card-header h2 {
         margin: 0;
         font-size: 1.25rem;
-        color: #495057;
+        color: var(--ui-title);
     }
     
     .card-body {
@@ -111,8 +111,16 @@
     .form-group input {
         width: 100%;
         padding: 8px 12px;
-        border: 1px solid #ced4da;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
+        background: var(--ui-bg);
+        color: var(--ui-text);
+    }
+
+    .form-group input:focus {
+        outline: none;
+        border-color: #60a5fa;
+        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
     }
     
     .btn {
@@ -171,17 +179,25 @@
         align-items: center;
         padding: 10px;
         background-color: var(--ui-surface-soft);
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
         border-left: 3px solid #6c757d;
+        transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+    }
+
+    .location-value-item:hover {
+        background-color: var(--ui-bg-accent);
+        border-color: #60a5fa;
+        transform: translateY(-1px);
     }
     
     .location-value {
         font-weight: 500;
-        color: #495057;
+        color: var(--ui-text);
     }
     
     .no-values-message {
-        color: #6c757d;
+        color: var(--ui-text-muted);
         font-style: italic;
         text-align: center;
         padding: 20px;
@@ -196,5 +212,23 @@
         display: flex;
         justify-content: flex-end;
     }
+
+    @media (max-width: 576px) {
+        .location-values-list {
+            grid-template-columns: 1fr;
+        }
+
+        .location-value-item {
+            gap: 10px;
+        }
+
+        .actions-container {
+            justify-content: stretch;
+        }
+
+        .actions-container .btn {
+            width: 100%;
+        }
+    }
 </style>
 {% endblock %}

Web/templates/register.html

@@ -334,7 +334,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: var(--light-bg);
+    background-color: var(--ui-bg);
     margin: 0;
     padding: 0;
     color: var(--text-color);
@@ -719,5 +719,108 @@ code {
         font-size: 1.8rem;
     }
 }
+
+/* Registration-specific dark mode styling. */
+:root[data-theme="dark"] {
+    --light-bg: var(--ui-bg);
+    --text-color: var(--ui-text);
+    --shadow: var(--ui-shadow-md);
+}
+
+:root[data-theme="dark"] .header-section {
+    border-bottom-color: var(--ui-border);
+}
+
+:root[data-theme="dark"] .subtitle,
+:root[data-theme="dark"] .anonymize-hint,
+:root[data-theme="dark"] .form-group label,
+:root[data-theme="dark"] .permission-check,
+:root[data-theme="dark"] .input-icon {
+    color: var(--ui-text-muted) !important;
+}
+
+:root[data-theme="dark"] .content,
+:root[data-theme="dark"] .form-card,
+:root[data-theme="dark"] .permission-panel,
+:root[data-theme="dark"] .password-rules {
+    background: var(--ui-surface) !important;
+    background-color: var(--ui-surface) !important;
+    border-color: var(--ui-border) !important;
+    color: var(--ui-text) !important;
+    box-shadow: var(--ui-shadow-sm);
+}
+
+:root[data-theme="dark"] .form-card h2,
+:root[data-theme="dark"] .permission-panel h4,
+:root[data-theme="dark"] .password-rules-title {
+    color: var(--ui-title) !important;
+}
+
+:root[data-theme="dark"] input[type="text"],
+:root[data-theme="dark"] input[type="password"],
+:root[data-theme="dark"] input[type="file"],
+:root[data-theme="dark"] .form-select {
+    background: var(--ui-bg) !important;
+    background-color: var(--ui-bg) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+}
+
+:root[data-theme="dark"] input[type="text"]:focus,
+:root[data-theme="dark"] input[type="password"]:focus,
+:root[data-theme="dark"] input[type="file"]:focus,
+:root[data-theme="dark"] .form-select:focus {
+    border-color: #60a5fa !important;
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
+}
+
+:root[data-theme="dark"] input[type="file"]::file-selector-button {
+    background: var(--ui-surface-soft);
+    color: var(--ui-text);
+    border-color: var(--ui-border);
+}
+
+:root[data-theme="dark"] input[type="file"]::file-selector-button:hover,
+:root[data-theme="dark"] .btn-secondary:hover {
+    background: var(--ui-bg-accent);
+}
+
+:root[data-theme="dark"] .password-rules {
+    background: var(--ui-surface-soft) !important;
+}
+
+:root[data-theme="dark"] .pw-rule {
+    color: #fca5a5;
+}
+
+:root[data-theme="dark"] .pw-rule.ok {
+    color: #86efac;
+}
+
+:root[data-theme="dark"] .anonymize-hint {
+    background: #082f49 !important;
+    border-color: #38bdf8 !important;
+    color: #bae6fd !important;
+}
+
+:root[data-theme="dark"] .permission-panel {
+    background: var(--ui-surface-soft) !important;
+}
+
+:root[data-theme="dark"] .btn-secondary {
+    background: var(--ui-surface-soft);
+    color: var(--ui-text);
+    border-color: var(--ui-border);
+}
+
+:root[data-theme="dark"] .flash.success {
+    background: #123524;
+    color: #b7f7ce;
+}
+
+:root[data-theme="dark"] .flash.error {
+    background: #451a1a;
+    color: #fecaca;
+}
 </style>
 {% endblock %}

Web/templates/student_cards_admin.html

@@ -254,6 +254,88 @@
         margin: 10px 0;
     }
 
+    :root[data-theme="dark"] .student-card-form,
+    :root[data-theme="dark"] .import-card {
+        background: var(--ui-surface) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+        box-shadow: var(--ui-shadow-sm);
+    }
+
+    :root[data-theme="dark"] .import-card {
+        background: var(--ui-surface-soft) !important;
+    }
+
+    :root[data-theme="dark"] .import-card p,
+    :root[data-theme="dark"] .rollover-hint,
+    :root[data-theme="dark"] .empty-state,
+    :root[data-theme="dark"] .empty-state p {
+        color: var(--ui-text-muted) !important;
+    }
+
+    :root[data-theme="dark"] .rollover-box {
+        background: #422006 !important;
+        border-color: #f59e0b !important;
+    }
+
+    :root[data-theme="dark"] .rollover-label,
+    :root[data-theme="dark"] .rollover-hint {
+        color: #fde68a !important;
+    }
+
+    :root[data-theme="dark"] .form-group input,
+    :root[data-theme="dark"] .form-group select,
+    :root[data-theme="dark"] .form-group textarea,
+    :root[data-theme="dark"] .export-buttons form,
+    :root[data-theme="dark"] .export-buttons select {
+        background: var(--ui-bg) !important;
+        background-color: var(--ui-bg) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+    }
+
+    :root[data-theme="dark"] .form-group input:focus,
+    :root[data-theme="dark"] .form-group select:focus,
+    :root[data-theme="dark"] .form-group textarea:focus,
+    :root[data-theme="dark"] .export-buttons select:focus {
+        border-color: #60a5fa !important;
+        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22) !important;
+    }
+
+    :root[data-theme="dark"] .cards-table {
+        background: var(--ui-surface) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+        box-shadow: var(--ui-shadow-sm);
+    }
+
+    :root[data-theme="dark"] .cards-table thead {
+        background: #1d4ed8 !important;
+        color: #ffffff !important;
+    }
+
+    :root[data-theme="dark"] .cards-table th,
+    :root[data-theme="dark"] .cards-table td {
+        background: var(--ui-surface) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+    }
+
+    :root[data-theme="dark"] .cards-table tbody tr:hover td {
+        background: var(--ui-bg-accent) !important;
+    }
+
+    @media (max-width: 768px) {
+        .export-buttons {
+            width: 100%;
+        }
+
+        .export-buttons form,
+        .export-buttons > a {
+            flex: 1 1 100%;
+        }
+    }
+
     @media (max-width: 992px) {
         .dashboard-grid {
             grid-template-columns: 1fr;

Web/templates/termin_configure.html

@@ -6,7 +6,7 @@
 <div class="container py-4">
     <div class="row justify-content-center">
         <div class="col-12 col-lg-10 col-xl-8">
-            <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
+            <div class="card termin-configure-card border-0 shadow-lg rounded-4 overflow-hidden">
                 <div class="card-header text-white" style="background: linear-gradient(135deg, #0f4c5c, #16697a);">
                     <h1 class="h3 mb-1 fw-bold">Terminplan konfigurieren</h1>
                     <p class="mb-0 opacity-75">Erstellen Sie einen neuen Plan und verschicken Sie anschließend den Buchungslink.</p>
@@ -139,6 +139,79 @@
         </div>
     </div>
 </div>
+<style>
+    .termin-configure-card .card-body {
+        color: var(--ui-text);
+    }
+
+    .termin-configure-card .form-text {
+        color: var(--ui-text-muted) !important;
+    }
+
+    .termin-configure-card .form-control,
+    .termin-configure-card .form-select {
+        color: var(--ui-text);
+        background-color: var(--ui-surface);
+        border-color: var(--ui-border);
+    }
+
+    .termin-configure-card .form-control:focus,
+    .termin-configure-card .form-select:focus {
+        border-color: #60a5fa;
+        box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
+    }
+
+    .termin-configure-card #slots_amounts_display {
+        background-color: #dbeafe !important;
+        color: #1d4ed8 !important;
+        border-color: #93c5fd !important;
+    }
+
+    :root[data-theme="dark"] .termin-configure-card .card-header {
+        background: linear-gradient(135deg, #0b3440, #155e75) !important;
+    }
+
+    :root[data-theme="dark"] .termin-configure-card .card-body {
+        background: var(--ui-surface) !important;
+        color: var(--ui-text) !important;
+    }
+
+    :root[data-theme="dark"] .termin-configure-card .bg-light-subtle,
+    :root[data-theme="dark"] .termin-configure-card .bg-white,
+    :root[data-theme="dark"] .termin-configure-card [data-day-row] {
+        background: var(--ui-surface-soft) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+    }
+
+    :root[data-theme="dark"] .termin-configure-card #slots_amounts_display {
+        background: #172554 !important;
+        color: #bfdbfe !important;
+        border-color: #3b82f6 !important;
+    }
+
+    :root[data-theme="dark"] .termin-configure-card .text-primary {
+        color: #93c5fd !important;
+    }
+
+    :root[data-theme="dark"] .termin-configure-card .text-danger {
+        color: #fca5a5 !important;
+    }
+
+    :root[data-theme="dark"] .termin-configure-card .border-danger-subtle {
+        border-color: #f87171 !important;
+    }
+
+    :root[data-theme="dark"] .termin-configure-card .alert-success {
+        background: #123524 !important;
+        border-color: #2f9e62 !important;
+        color: #b7f7ce !important;
+    }
+
+    :root[data-theme="dark"] .termin-configure-card .alert-success a {
+        color: #bfdbfe !important;
+    }
+</style>
 <script>
 (function () {
     const startDateInput = document.getElementById('start_date');

Web/templates/upload_admin.html

@@ -647,12 +647,96 @@
         cursor: pointer;
         margin-left: 10px;
     }
+
+    /* Upload-specific dark mode surfaces and readable helper text. */
+    :root[data-theme="dark"] .upload-container {
+        background: var(--ui-surface) !important;
+        border: 1px solid var(--ui-border);
+        box-shadow: var(--ui-shadow-md);
+    }
+
+    :root[data-theme="dark"] .upload-import-panel,
+    :root[data-theme="dark"] #range_generator_group,
+    :root[data-theme="dark"] .filter-inputs,
+    :root[data-theme="dark"] .book-info-container,
+    :root[data-theme="dark"] .book-cover-preview,
+    :root[data-theme="dark"] .video-preview {
+        background: var(--ui-surface-soft) !important;
+        background-color: var(--ui-surface-soft) !important;
+        border-color: var(--ui-border) !important;
+        color: var(--ui-text) !important;
+    }
+
+    :root[data-theme="dark"] .upload-import-panel p,
+    :root[data-theme="dark"] .upload-import-panel small,
+    :root[data-theme="dark"] #isbn-scan-status,
+    :root[data-theme="dark"] #code4-scan-status,
+    :root[data-theme="dark"] .image-loading,
+    :root[data-theme="dark"] .book-info p,
+    :root[data-theme="dark"] .book-cover-caption {
+        color: var(--ui-text-muted) !important;
+    }
+
+    :root[data-theme="dark"] .upload-import-panel h3,
+    :root[data-theme="dark"] .book-info h4,
+    :root[data-theme="dark"] .book-description h5,
+    :root[data-theme="dark"] #range_generator_group label {
+        color: var(--ui-title) !important;
+    }
+
+    :root[data-theme="dark"] .upload-form input,
+    :root[data-theme="dark"] .upload-form select,
+    :root[data-theme="dark"] .upload-form textarea,
+    :root[data-theme="dark"] .filter-dropdown-select,
+    :root[data-theme="dark"] .upload-import-panel input[type="file"] {
+        background: var(--ui-bg) !important;
+        background-color: var(--ui-bg) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+    }
+
+    :root[data-theme="dark"] .upload-form input:focus,
+    :root[data-theme="dark"] .upload-form select:focus,
+    :root[data-theme="dark"] .upload-form textarea:focus,
+    :root[data-theme="dark"] .filter-dropdown-select:focus {
+        border-color: #60a5fa !important;
+        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
+    }
+
+    :root[data-theme="dark"] .book-info,
+    :root[data-theme="dark"] .book-description p,
+    :root[data-theme="dark"] .video-placeholder {
+        background: var(--ui-bg) !important;
+        background-color: var(--ui-bg) !important;
+        border-color: var(--ui-border) !important;
+    }
+
+    :root[data-theme="dark"] .success-message {
+        background: #123524 !important;
+        border-color: #2f9e62 !important;
+        color: #b7f7ce !important;
+    }
+
+    :root[data-theme="dark"] .error-message,
+    :root[data-theme="dark"] .error,
+    :root[data-theme="dark"] .error-message-container {
+        background: #451a1a !important;
+        border-color: #f87171 !important;
+        color: #fecaca !important;
+    }
+
+    :root[data-theme="dark"] .warning-message,
+    :root[data-theme="dark"] .warning {
+        background: #422006 !important;
+        border-color: #f59e0b !important;
+        color: #fde68a !important;
+    }
 </style>
 
 <div class="upload-container">
 
     {% if show_library_features %}
-    <div style="border:1px solid #dbe4ee; border-radius:8px; padding:14px; margin-bottom:16px; background:#f8fbff;">
+    <div class="upload-import-panel" style="border:1px solid #dbe4ee; border-radius:8px; padding:14px; margin-bottom:16px; background:#f8fbff;">
         <h3 style="margin:0 0 8px 0;">Excel-Import Bibliothek (Mehrere Bücher)</h3>
         <p style="margin:0 0 10px 0; color:#555;">Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch. Spalten werden automatisch erkannt (z.B. Name, Ort, Beschreibung, ISBN, Code, Anzahl). Für den Bibliotheksimport ist eine gültige ISBN je Zeile erforderlich.</p>
         <form method="POST" action="{{ url_for('upload_library_excel') }}" enctype="multipart/form-data" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
@@ -664,7 +748,7 @@
         </form>
     </div>
     {% else %}
-    <div style="border:1px solid #dbe4ee; border-radius:8px; padding:14px; margin-bottom:16px; background:#f8fbff;">
+    <div class="upload-import-panel" style="border:1px solid #dbe4ee; border-radius:8px; padding:14px; margin-bottom:16px; background:#f8fbff;">
         <h3 style="margin:0 0 8px 0;">Excel-Import Inventar (Mehrere Artikel)</h3>
         <p style="margin:0 0 10px 0; color:#555;">Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch. Spalten werden automatisch erkannt (z.B. Name, Ort, Beschreibung, Filter1/2/3, Kosten, Jahr, Code, Anzahl).</p>
         <form method="POST" action="{{ url_for('upload_inventory_excel') }}" enctype="multipart/form-data" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">