implementation of the Email add on

Web/app.py

@@ -48,7 +48,7 @@ import Web.modules.log.audit_log as al
 import push_notifications as pn
 import Web.modules.inventarsystem.pdf_export as pdf_export 
 import Web.modules.inventarsystem.excel_export as excel_export
-from Web.modules.emailservice.email import send
+from Web.modules.emailservice.email import send, send_pdf
 import datetime
 from apscheduler.schedulers.background import BackgroundScheduler
 from bson.objectid import ObjectId, InvalidId
@@ -2188,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'))
 
@@ -4276,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
@@ -4285,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()
@@ -4388,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'])
@@ -4884,7 +4892,8 @@ def student_cards_admin():
         edit_mode=edit_mode,
         form_data=form_data,
         available_classes=available_classes, # Enthält nun die lesbaren Klassen
-        config=cfg.get_school_info()
+        config=cfg.get_school_info(),
+        email_service_enabled=cfg.MODULES.is_enabled('mail')
     )
 
 
@@ -5345,7 +5354,7 @@ def student_card_class_barcode_download():
         flash('Fehler beim PDF-Download', 'error')
         return redirect(url_for('student_cards_admin'))
 
-@app.route('/student_card_single_barcode_download/<card_id>', methods=['GET'])
+@app.route('/student_card_single_barcode_download/<card_id>', methods=['GET', 'POST'])
 def student_card_single_barcode_download(card_id):
     """
     Download PDF with single student card barcode.
@@ -5525,11 +5534,34 @@ def student_card_single_barcode_download(card_id):
         c.save()
         pdf_buffer.seek(0)
 
+        pdf_filename = f'ausweis_{card["AusweisId"]}.pdf'
+        if request.method == 'POST':
+            recipient_email = (request.form.get('recipient_email') or '').strip()
+            if not recipient_email:
+                flash('Bitte eine Empfänger-E-Mail-Adresse eingeben oder nur PDF auswählen.', 'error')
+                return redirect(url_for('student_cards_admin'))
+            if not cfg.MODULES.is_enabled('mail'):
+                flash('Das E-Mail-Add-on ist deaktiviert. Der Ausweis kann weiterhin als PDF heruntergeladen werden.', 'warning')
+                return redirect(url_for('student_cards_admin'))
+            sent = send_pdf(
+                recipient_email,
+                f'Bibliotheksausweis {card["AusweisId"]}',
+                f'Anbei erhalten Sie den Bibliotheksausweis für {card.get("SchülerName", "")} als PDF.',
+                'Bibliotheksverwaltung',
+                pdf_buffer.getvalue(),
+                pdf_filename,
+            )
+            flash(
+                'Bibliotheksausweis wurde per E-Mail versendet.' if sent else 'Bibliotheksausweis konnte nicht per E-Mail versendet werden.',
+                'success' if sent else 'error',
+            )
+            return redirect(url_for('student_cards_admin'))
+
         return send_file(
             pdf_buffer,
             mimetype='application/pdf',
             as_attachment=True,
-            download_name=f'ausweis_{card["AusweisId"]}.pdf'
+            download_name=pdf_filename
         )
     except Exception as e:
         app.logger.error(f"Error occurred while generating PDF for card {card['AusweisId']}: {e}")
@@ -5910,6 +5942,11 @@ def get_bookings():
 
         result = []
         for booking in bookings:
+            raw_booking_user = booking.get('User') or ''
+            try:
+                booking_user = decrypt_text(raw_booking_user) if raw_booking_user else ''
+            except Exception:
+                booking_user = str(raw_booking_user)
             start_dt = booking.get('Start')
             if not start_dt:
                 continue
@@ -5952,10 +5989,10 @@ def get_bookings():
                 'end': end_dt.isoformat() if isinstance(end_dt, datetime.datetime) else str(end_dt),
                 'status': status,
                 'itemId': item_id,
-                'userName': str(booking.get('User') or ''),
+                'userName': str(booking_user),
                 'notes': str(booking.get('Notes') or ''),
                 'period': period,
-                'isCurrentUser': str(booking.get('User') or '') == username,
+                'isCurrentUser': str(booking_user) == username,
                 'itemBorrower': item_borrower,
             })
 
@@ -7903,9 +7940,14 @@ def get_planned_bookings(item_id):
         cursor = ausleihungen.find({'Item': item_id, 'Status': 'planned'}).sort('Start', 1)
         bookings = []
         for r in cursor:
+            raw_user = r.get('User') or ''
+            try:
+                booking_user = decrypt_text(raw_user) if raw_user else ''
+            except Exception:
+                booking_user = str(raw_user)
             bookings.append({
                 'id': str(r.get('_id')),
-                'user': r.get('User', ''),
+                'user': booking_user,
                 'period': r.get('Period'),
                 'start': r.get('Start').isoformat() if r.get('Start') else None,
                 'end': r.get('End').isoformat() if r.get('End') else None,
@@ -7932,7 +7974,13 @@ def get_planned_bookings_public(item_id):
         cursor = ausleihungen.find({'Item': item_id, 'Status': 'planned'}).sort('Start', 1)
         bookings = []
         for r in cursor:
+            raw_user = r.get('User') or ''
+            try:
+                booking_user = decrypt_text(raw_user) if raw_user else ''
+            except Exception:
+                booking_user = str(raw_user)
             bookings.append({
+                'user': booking_user,
                 'period': r.get('Period'),
                 'start': r.get('Start').isoformat() if r.get('Start') else None,
                 'end': r.get('End').isoformat() if r.get('End') else None
@@ -7982,8 +8030,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']},
@@ -8001,6 +8053,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')),
@@ -8044,18 +8098,20 @@ def plan_booking():
         # Validate inputs
         if not all([item_id, start_date_str, period_start]):
             return {"success": False, "error": "Missing required fields"}, 400
+        if booking_type not in {'single', 'range'}:
+            return {"success": False, "error": "Invalid booking type"}, 400
         if not end_date_str:
             end_date_str = start_date_str
             
         # Parse dates
         try:
             if start_date_str:
-                start_date = datetime.datetime.fromisoformat(start_date_str)
+                start_date = datetime.datetime.fromisoformat(start_date_str).replace(tzinfo=None)
             else:
                 return {"success": False, "error": "Missing start date"}, 400
             
             if end_date_str:
-                end_date = datetime.datetime.fromisoformat(end_date_str)
+                end_date = datetime.datetime.fromisoformat(end_date_str).replace(tzinfo=None)
             else:
                 return {"success": False, "error": "Missing end date"}, 400
             
@@ -8077,16 +8133,23 @@ def plan_booking():
         
         # Handle period range
         periods = []
-        if period_start:
+        try:
             period_start_num = int(period_start)
-        else:
-            period_start_num = 1  # Default if None
+        except (TypeError, ValueError):
+            return {"success": False, "error": "Invalid start period"}, 400
+        if not 1 <= period_start_num <= 10:
+            return {"success": False, "error": "Invalid start period"}, 400
     
         # If period_end is provided, it's a range of periods
         if period_end:
-            period_end_num = int(period_end)
+            try:
+                period_end_num = int(period_end)
+            except (TypeError, ValueError):
+                return {"success": False, "error": "Invalid end period"}, 400
             
             # Validate period range
+            if not 1 <= period_end_num <= 10:
+                return {"success": False, "error": "Invalid end period"}, 400
             if period_end_num < period_start_num:
                 return {"success": False, "error": "End period cannot be before start period"}, 400
                 
@@ -8096,51 +8159,50 @@ def plan_booking():
             # Single period booking
             periods = [period_start_num]
             
-        # For date range bookings, we'll process each date separately
-        booking_ids = []
-        errors = []
-        
-        # If it's a range of days
-        if booking_type == 'range' and start_date != end_date:
-            current_date = start_date
-            while current_date <= end_date:
-                # For each day in the range
-                day_booking_ids, day_errors = process_day_bookings(
-                    item_id, 
-                    current_date,
-                    periods,
-                    notes
-                )
-                booking_ids.extend(day_booking_ids)
-                errors.extend(day_errors)
-                
-                # Move to next day
-                current_date += datetime.timedelta(days=1)
-        else:
-            # Single day with multiple periods
-            booking_ids, errors = process_day_bookings(
-                item_id,
-                start_date,
-                periods,
-                notes
-            )
-            
-        # Return results
-        if errors:
-            if booking_ids:
-                # Some succeeded, some failed
+        if end_date < start_date:
+            return {"success": False, "error": "End date cannot be before start date"}, 400
+        if booking_type == 'single' and start_date.date() != end_date.date():
+            return {"success": False, "error": "Single bookings must use one date"}, 400
+
+        requested_slots = []
+        current_date = start_date
+        last_date = end_date if booking_type == 'range' else start_date
+        while current_date.date() <= last_date.date():
+            for period in periods:
+                period_times = get_period_times(current_date, period)
+                if not period_times:
+                    return {"success": False, "error": f"Invalid period {period}"}, 400
+                requested_slots.append((current_date.date(), period, period_times))
+            current_date += datetime.timedelta(days=1)
+
+        # Preflight the complete request so conflicts never create partial ranges.
+        for index, (booking_date, period, period_times) in enumerate(requested_slots):
+            if au.check_booking_conflict(item_id, period_times['start'], period_times['end'], period):
                 return {
-                    "success": True, 
-                    "partial": True,
-                    "booking_ids": booking_ids,
-                    "errors": errors
-                }
-            else:
-                # All failed
-                return {"success": False}, 500
-        else:
-            # All succeeded
-            return {"success": True, "booking_ids": booking_ids}
+                    "success": False,
+                    "error": "Booking conflict",
+                    "conflicts": [{"date": booking_date.isoformat(), "period": period}],
+                }, 409
+            for previous_date, previous_period, _ in requested_slots[:index]:
+                if previous_date == booking_date and previous_period == period:
+                    return {"success": False, "error": "Duplicate booking period"}, 400
+
+        booking_ids = []
+        try:
+            for _, period, period_times in requested_slots:
+                booking_id = au.add_planned_booking(
+                    item_id, session['username'], period_times['start'],
+                    period_times['end'], notes, period=period
+                )
+                if not booking_id:
+                    raise RuntimeError(f"Failed to create booking for period {period}")
+                booking_ids.append(str(booking_id))
+        except Exception:
+            for booking_id in booking_ids:
+                au.cancel_ausleihung(booking_id)
+            raise
+
+        return {"success": True, "booking_ids": booking_ids}
             
     except Exception as e:
         import traceback
@@ -8200,7 +8262,7 @@ def add_booking():
     if 'username' not in session:
         return jsonify({'success': False, 'error': 'Not logged in'})
     
-    item_id = html.escape(request.form.get('item_id'))
+    item_id = html.escape((request.form.get('item_id') or '').strip())
     
     # Check if item exists and is reservable
     item = it.get_item(item_id)
@@ -8215,18 +8277,36 @@ 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
+            return jsonify({'success': False, 'error': 'Missing end date'}), 400
+
+        if end_date <= start_date:
+            return jsonify({'success': False, 'error': 'End date must be after start date'}), 400
+
+        period_value = None
+        if period not in (None, ''):
+            try:
+                period_value = int(period)
+            except (TypeError, ValueError):
+                return jsonify({'success': False, 'error': 'Invalid period'}), 400
+            if not 1 <= period_value <= 10:
+                return jsonify({'success': False, 'error': 'Invalid period'}), 400
+
+        if au.check_booking_conflict(item_id, start_date, end_date, period_value):
+            return jsonify({'success': False, 'error': 'Booking conflict'}), 409
         
         # Continue with adding the booking
         booking_id = au.add_planned_booking(
@@ -8235,12 +8315,15 @@ def add_booking():
             start_date=start_date,
             end_date=end_date,
             notes=notes,
-            period=period
+            period=period_value
         )
-        
+
+        if not booking_id:
+            return jsonify({'success': False, 'error': 'Failed to create booking'}), 500
         return jsonify({'success': True, 'booking_id': str(booking_id)})
     except Exception as e:
-        return jsonify({'success': False})
+        app.logger.error(f"Error creating booking: {e}")
+        return jsonify({'success': False, 'error': 'Invalid booking data'}), 400
 
 @app.route('/cancel_booking/<id>', methods=['POST'])
 def cancel_booking(id):
@@ -8259,11 +8342,12 @@ def cancel_booking(id):
     current_permissions = us.get_effective_permissions(session['username'])
     
     # Check if user owns this booking
-    if booking.get('User') != session['username'] and not current_permissions['actions'].get('can_manage_users', False):
+    booking_user = au.dp.decrypt_text(booking.get('User')) if booking.get('User') else ''
+    if booking_user != session['username'] and not current_permissions['actions'].get('can_manage_users', False):
                return {"success": False, "error": "Not authorized to cancel this booking"}, 403
     
     # Cancel the booking
-    result = au.cancel_booking(id)
+    result = au.cancel_ausleihung(id)
     
     if result:
         return {"success": True}
@@ -8899,7 +8983,8 @@ def admin_borrowings():
         entries=entries,
         library_module_enabled=cfg.MODULES.is_enabled('library'),
         student_cards_module_enabled=cfg.MODULES.is_enabled('student_cards'),
-        mail_module_enabled=cfg.MODULES.is_enabled('mail')
+        mail_module_enabled=cfg.MODULES.is_enabled('mail'),
+        email_service_enabled=cfg.MODULES.is_enabled('mail')
     )
 
 """-----------------------------------------------------------Audit Routes-------------------------------------------------------"""
@@ -8991,7 +9076,7 @@ def admin_audit_dashboard():
         if client:
             client.close()
 
-@app.route('/admin/audit/export/pdf/official', methods=['GET'])
+@app.route('/admin/audit/export/pdf/official', methods=['GET', 'POST'])
 def admin_audit_export_pdf_official():
     """Export audit report as professional PDF (Official Report - full DIN 5008 compliant)."""
     if 'username' not in session:
@@ -9058,6 +9143,29 @@ def admin_audit_export_pdf_official():
             export_type='official',
             school_info=school_info
         )
+
+        if request.method == 'POST':
+            recipient_email = (request.form.get('recipient_email') or '').strip()
+            if not recipient_email:
+                flash('Bitte eine Empfänger-E-Mail-Adresse eingeben oder nur PDF auswählen.', 'error')
+                return redirect(url_for('admin_audit_dashboard'))
+            if not cfg.MODULES.is_enabled('mail'):
+                flash('Das E-Mail-Add-on ist deaktiviert. Der Auditbericht kann weiterhin als PDF heruntergeladen werden.', 'warning')
+                return redirect(url_for('admin_audit_dashboard'))
+            filename = f'audit-official-report-{datetime.datetime.now(ZoneInfo("Europe/Berlin")).strftime("%Y%m%d-%H%M%S")}.pdf'
+            sent = send_pdf(
+                recipient_email,
+                'Amtlicher Auditbericht',
+                'Anbei erhalten Sie den aktuellen amtlichen Auditbericht des Inventarsystems als PDF.',
+                'Inventarsystem',
+                pdf_content,
+                filename,
+            )
+            flash(
+                'Auditbericht wurde per E-Mail versendet.' if sent else 'Auditbericht konnte nicht per E-Mail versendet werden.',
+                'success' if sent else 'error',
+            )
+            return redirect(url_for('admin_audit_dashboard'))
     
         response = make_response(pdf_content)
         response.headers['Content-Type'] = 'application/pdf'
@@ -9432,11 +9540,33 @@ def admin_create_invoice(borrow_id):
         )
 
         pdf_buffer = pdf_export._build_invoice_pdf(invoice_data)
+        pdf_filename = f'rechnung_{invoice_number}.pdf'
+        if request.form.get('delivery') == 'email':
+            recipient_email = (request.form.get('recipient_email') or '').strip()
+            if not recipient_email:
+                flash('Bitte eine Empfänger-E-Mail-Adresse eingeben oder nur PDF auswählen.', 'error')
+                return redirect(url_for('admin_borrowings'))
+            if not cfg.MODULES.is_enabled('mail'):
+                flash('Das E-Mail-Add-on ist deaktiviert. Die PDF-Rechnung kann weiterhin heruntergeladen werden.', 'warning')
+                return redirect(url_for('admin_borrowings'))
+            sent = send_pdf(
+                recipient_email,
+                f'Rechnung {invoice_number} - {item_name}',
+                f'Anbei erhalten Sie die Rechnung {invoice_number} zum Element {item_name}.',
+                'Bibliotheksverwaltung',
+                pdf_buffer.getvalue(),
+                pdf_filename,
+            )
+            flash(
+                'PDF-Rechnung wurde per E-Mail versendet.' if sent else 'PDF-Rechnung konnte nicht per E-Mail versendet werden.',
+                'success' if sent else 'error',
+            )
+            return redirect(url_for('admin_borrowings'))
         return send_file(
             pdf_buffer,
             mimetype='application/pdf',
             as_attachment=True,
-            download_name=f'rechnung_{invoice_number}.pdf'
+            download_name=pdf_filename
         )
     except Exception as e:
         app.logger.error(f"Error creating damage invoice for borrow {borrow_id}: {e}")
@@ -11266,12 +11396,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 {
@@ -12265,7 +12397,11 @@ def cancel_ausleihung_route(id):
             
         # Log ausleihung details for debugging
         ausleihung_status = ausleihung.get('Status', 'unknown')
-        ausleihung_user = ausleihung.get('User', 'unknown')
+        raw_ausleihung_user = ausleihung.get('User', '')
+        try:
+            ausleihung_user = decrypt_text(raw_ausleihung_user) if raw_ausleihung_user else ''
+        except Exception:
+            ausleihung_user = str(raw_ausleihung_user or '')
         print(f"Found ausleihung: ID={id}, Status={ausleihung_status}")
 
         current_permissions = us.get_effective_permissions(session['username'])

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:
@@ -353,7 +353,7 @@ def cancel_ausleihung(id):
 
         # Mark the booking as cancelled
         result = ausleihungen.update_one(
-            {'_id': ObjectId(id)},
+            {'_id': ObjectId(id), 'Status': {'$in': ['planned', 'active']}},
             {'$set': {
                 'Status': 'cancelled',
                 'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
@@ -367,6 +367,16 @@ def cancel_ausleihung(id):
         return False
 
 
+def get_booking(id):
+    """Compatibility wrapper for the booking route."""
+    return get_ausleihung(id)
+
+
+def cancel_booking(id):
+    """Compatibility wrapper for the booking route."""
+    return cancel_ausleihung(id)
+
+
 def remove_ausleihung(id):
     """
     Markiert einen Ausleihungsdatensatz als gelöscht (Soft-Delete).

Web/modules/emailservice/email.py

@@ -1,5 +1,6 @@
 from email.mime.multipart import MIMEMultipart
 from email.mime.text import MIMEText
+from email.mime.application import MIMEApplication
 import smtplib
 import time
 
@@ -17,18 +18,25 @@ def _build_smtp_client():
         smtp.starttls()
         smtp.ehlo()
     if cfg.EMAIL_USERNAME:
-        smtp.login("no-reply@invario-software.de", "#,EATwIn,68" or "")
+        smtp.login(cfg.EMAIL_USERNAME, cfg.EMAIL_PASSWORD or "")
     return smtp
 
 
-def send(email: list | str, subject: str, note: str, sender: str) -> bool:
-    """Sends the email with the link to the Clients."""
+def _normalize_recipients(email: list | str) -> list[str]:
+    if isinstance(email, str):
+        email = email.replace(';', ',').split(',')
+    return [str(recipient).strip() for recipient in (email or []) if str(recipient).strip()]
+
+
+def _send_message(email: list | str, subject: str, note: str, sender: str, attachment=None) -> bool:
+    """Send a plain/HTML message, optionally with one PDF attachment."""
     if not cfg.MODULES.is_enabled("mail"):
         print("Debug: Module not enabled")
         return False
 
-    if isinstance(email, str):
-        email = [email]
+    recipients = _normalize_recipients(email)
+    if not recipients:
+        return False
 
     body_message = note
 
@@ -63,25 +71,27 @@ def send(email: list | str, subject: str, note: str, sender: str) -> bool:
     try:
         smtp = _build_smtp_client()
 
-        for i, recipient in enumerate(email):
+        for i, recipient in enumerate(recipients):
             start_time = time.time()
 
-            msg = MIMEMultipart("alternative")
+            msg = MIMEMultipart("mixed" if attachment else "alternative")
             msg["Subject"] = str(subject)
-            msg["From"] = f"{sender} <no-reply@invario-software.de>"
+            from_address = cfg.EMAIL_FROM_ADDRESS or cfg.EMAIL_USERNAME or "no-reply@invario-software.de"
+            msg["From"] = f"{sender} <{from_address}>"
             msg["To"] = str(recipient)
 
-            msg.attach(MIMEText(text_content, "plain"))
-            msg.attach(MIMEText(html_content, "html"))
-
-            #smtp.sendmail(
-            #    from_addr=cfg.EMAIL_USERNAME,
-            #    to_addrs=[recipient],
-            #    msg=msg.as_string()
-            #)
+            body = MIMEMultipart("alternative") if attachment else msg
+            body.attach(MIMEText(text_content, "plain"))
+            body.attach(MIMEText(html_content, "html"))
+            if attachment:
+                msg.attach(body)
+                attachment_payload, filename = attachment
+                pdf_part = MIMEApplication(attachment_payload, _subtype="pdf")
+                pdf_part.add_header("Content-Disposition", "attachment", filename=filename)
+                msg.attach(pdf_part)
 
             smtp.sendmail(
-                from_addr="no-reply@invario-software.de",
+                from_addr=from_address,
                 to_addrs=[recipient],
                 msg=msg.as_string()
             )
@@ -89,7 +99,7 @@ def send(email: list | str, subject: str, note: str, sender: str) -> bool:
             elapsed_time = time.time() - start_time
             sleep_time = interval - elapsed_time
 
-            if sleep_time > 0 and i < len(email) - 1:
+            if sleep_time > 0 and i < len(recipients) - 1:
                 time.sleep(sleep_time)
 
         return True
@@ -101,4 +111,14 @@ def send(email: list | str, subject: str, note: str, sender: str) -> bool:
             try:
                 smtp.quit()
             except Exception:
-                pass
+                pass
+
+
+def send(email: list | str, subject: str, note: str, sender: str) -> bool:
+    """Send an HTML/plain email without an attachment."""
+    return _send_message(email, subject, note, sender)
+
+
+def send_pdf(email: list | str, subject: str, note: str, sender: str, pdf_bytes: bytes, filename: str) -> bool:
+    """Send an email with a PDF attachment."""
+    return _send_message(email, subject, note, sender, attachment=(pdf_bytes, filename))

Web/modules/terminplaner/blueprint.py

@@ -3,6 +3,7 @@ import Web.modules.terminplaner.backend_server as appointment_service
 import Web.modules.database.settings as cfg
 import Web.modules.database.termine as termin
 import Web.modules.database.user as us
+from Web.modules.emailservice.email import send_pdf
 from Web.modules.terminplaner.backend_server import _resolve_public_base_url
 import csv
 import io
@@ -409,7 +410,7 @@ def client_slot_calendar_export(appointment_id):
     return response
 
 
-@appoint_bp.route('/export_pdf_brief/<plan_id>', methods=['GET'])
+@appoint_bp.route('/export_pdf_brief/<plan_id>', methods=['GET', 'POST'])
 def export_pdf_brief(plan_id):
     # 1. Daten holen (Hier als Beispiel, passe dies auf deine Datenbank an)
     # terminplan = Terminplan.query.get(plan_id)
@@ -532,12 +533,35 @@ def export_pdf_brief(plan_id):
     # Buffer auf Anfang zurücksetzen
     pdf_buffer.seek(0)
     
+    pdf_filename = f"Einladung_{plan_daten['titel'].replace(' ', '_')}.pdf"
+    if request.method == 'POST':
+        recipient_email = (request.form.get('recipient_email') or '').strip()
+        if not recipient_email:
+            flash('Bitte eine Empfänger-E-Mail-Adresse eingeben oder nur PDF auswählen.', 'error')
+            return redirect(url_for('terminplaner.main', tenant=tenant_id or None))
+        if not cfg.MODULES.is_enabled('mail'):
+            flash('Das E-Mail-Add-on ist deaktiviert. Der Einladungsbrief kann weiterhin als PDF heruntergeladen werden.', 'warning')
+            return redirect(url_for('terminplaner.main', tenant=tenant_id or None))
+        sent = send_pdf(
+            recipient_email,
+            f'Einladung zur Terminbuchung: {plan_daten["titel"]}',
+            f'Anbei erhalten Sie den Einladungsbrief für {plan_daten["titel"]} als PDF.',
+            'Terminplanungssystem',
+            pdf_buffer.getvalue(),
+            pdf_filename,
+        )
+        flash(
+            'Einladungsbrief wurde per E-Mail versendet.' if sent else 'Einladungsbrief konnte nicht per E-Mail versendet werden.',
+            'success' if sent else 'error',
+        )
+        return redirect(url_for('terminplaner.main', tenant=tenant_id or None))
+
     # An Nutzer ausliefern
     return send_file(
         pdf_buffer,
         mimetype='application/pdf',
         as_attachment=True,
-        download_name=f"Einladung_{plan_daten['titel'].replace(' ', '_')}.pdf"
+        download_name=pdf_filename
     )
 
 @appoint_bp.route('/')
@@ -557,5 +581,6 @@ def main():
         current_user=current_user,
         upcoming_events=upcoming_events,
         tenant_id=tenant_id,
-        appointment_module_enabled=cfg.MODULES.is_enabled('terminplan')
+        appointment_module_enabled=cfg.MODULES.is_enabled('terminplan'),
+        mail_service_enabled=cfg.MODULES.is_enabled('mail')
     )

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,20 +107,26 @@
 
   <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;">
+      <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:end;">
         <a class="btn btn-primary" href="{{ url_for('admin_audit_export_pdf_official') }}" style="flex:1; text-align:center;">
           📋 Amtlicher Bericht (DIN 5008)
         </a>
+        {% if mail_module_enabled %}
+        <form method="post" action="{{ url_for('admin_audit_export_pdf_official') }}" style="display:flex; gap:8px; flex:2; flex-wrap:wrap;">
+          <input type="email" name="recipient_email" required placeholder="Empfänger-E-Mail" aria-label="Empfänger-E-Mail für den Auditbericht" style="flex:1; min-width:220px; padding:8px; border:1px solid #cbd5e1; border-radius:6px;">
+          <button class="btn btn-outline-primary" type="submit">PDF per E-Mail senden</button>
+        </form>
+        {% endif %}
       </div>
     </div>
 
   </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 +134,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 +149,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 +176,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/admin_borrowings.html

@@ -195,6 +195,13 @@
         <textarea id="damage-reason" name="damage_reason" rows="5" required style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; resize:vertical;" placeholder="Beschreiben Sie kurz den Schaden oder die Zerstörung."></textarea>
       </div>
 
+      {% if email_service_enabled %}
+      <div style="margin-bottom:16px;">
+        <label for="invoice-recipient-email" style="display:block; font-weight:700; margin-bottom:6px;">Empfänger-E-Mail für den PDF-Versand</label>
+        <input id="invoice-recipient-email" name="recipient_email" type="email" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px;" placeholder="name@beispiel.de">
+      </div>
+      {% endif %}
+
       <div style="display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-bottom:18px;">
         <label style="display:flex; align-items:center; gap:8px;">
           <input type="checkbox" name="mark_destroyed" checked>
@@ -208,7 +215,10 @@
 
       <div style="display:flex; justify-content:flex-end; gap:10px;">
         <button type="button" class="btn btn-secondary" onclick="closeInvoiceModal()">Abbrechen</button>
-        <button type="submit" class="btn btn-danger">PDF-Rechnung erstellen</button>
+        <button type="submit" class="btn btn-outline-danger" name="delivery" value="pdf">Nur PDF herunterladen</button>
+        {% if email_service_enabled %}
+        <button type="submit" class="btn btn-danger" name="delivery" value="email">PDF per E-Mail senden</button>
+        {% endif %}
       </div>
     </form>
   </div>

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
        ========================================= */
@@ -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';
@@ -1414,7 +1444,8 @@
                 },
                 body: JSON.stringify({
                     student_card_id: activeStudentCardId,
-                    item_code: scannedCode
+                    item_code: scannedCode,
+                    action: 'borrow'
                 })
             });
 

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/main_admin.html

@@ -4063,21 +4063,29 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 const badgeText = entry.type === 'repair' ? 'Repariert' : 'Schaden';
                 const metaLine = entry.meta ? `<div style="font-size:0.84rem;color:#4b5563;">${escapeHtml(entry.meta)}</div>` : '';
                 return `
-                    <div style="border:1px solid var(--ui-border);border-radius:8px;padding:10px;background:var(--ui-surface);display:grid;gap:6px;">
-                        <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;">
-                            <span style="display:inline-block;padding:2px 8px;border-radius:999px;font-size:0.75rem;font-weight:700;${badgeStyle}">${badgeText}</span>
-                            <span style="font-size:0.84rem;color:#475569;">${entry.dateLabel}</span>
+                    <div class="damage-history-entry ${entry.type === 'repair' ? 'is-repair' : 'is-report'}">
+                        <div class="damage-history-entry-head">
+                            <span class="damage-history-badge" style="${badgeStyle}">${badgeText}</span>
+                            <time>${entry.dateLabel}</time>
                         </div>
-                        <div style="font-size:0.9rem;color:#0f172a;"><strong>Von:</strong> ${entry.actor}</div>
-                        <div style="font-size:0.92rem;color:#1f2937;">${entry.description}</div>
-                        ${metaLine}
+                        <div class="damage-history-actor"><strong>Von</strong>${entry.actor}</div>
+                        <div class="damage-history-description">${entry.description}</div>
+                        ${entry.meta ? `<div class="damage-history-meta">${escapeHtml(entry.meta)}</div>` : ''}
                     </div>
                 `;
             }).join('')
             : '<div style="font-size:0.92rem;color:#64748b;">Keine Beschädigungs-Historie vorhanden.</div>';
         
         modalContent.innerHTML = `
-            <h2>${escapeHtml(item.Name || '')}</h2>
+            <div class="item-modal-heading">
+                <div>
+                    <span class="item-modal-eyebrow">Objektdetails</span>
+                    <h2>${escapeHtml(item.Name || '')}</h2>
+                </div>
+                <span class="item-modal-status ${isBorrowed ? 'is-borrowed' : 'is-available'}">
+                    <span class="item-modal-status-dot"></span>${isBorrowed ? 'Ausgeliehen' : 'Verfügbar'}
+                </span>
+            </div>
             ${borrowerInfoHtml}
             ${appointmentInfoHtml}
                 
@@ -4090,7 +4098,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 ` : ''}
             </div>
 
-            <div class="modal-details">
+            <div class="modal-details item-modal-details">
                 <div class="detail-group">
                     <div class="detail-label">Ort:</div>
                     <div class="detail-value">${escapeHtml(item.Ort || '-')}</div>
@@ -4145,22 +4153,22 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 </div>
             
                 {% if current_permissions.actions.get('can_view_logs', False) %}
-                <div class="detail-group full-width" style="margin-top:12px;">
+                <div class="detail-group full-width item-modal-history" style="margin-top:12px;">
                     <div class="detail-label" style="font-weight:600; color:#374151;">Beschädigungs-Historie</div>
                     <div class="detail-value">
-                        <button id="toggle-damage-history" class="calendar-toggle-btn" style="margin-bottom:12px; padding:10px 16px; border-radius:6px; background:#f3f4f6; border:1px solid #d1d5db; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all 0.2s ease;">
+                        <button id="toggle-damage-history" class="calendar-toggle-btn modal-section-toggle" style="margin-bottom:12px;">
                             <span>🛠️</span>
                             <span id="toggle-damage-history-text">Historie anzeigen</span>
                         </button>
-                        <div id="damage-history-panel" style="display:none; margin-top:8px; border:1px solid #e7edf5; border-radius:10px; padding:12px; background: var(--ui-surface-soft);">
-                            <div style="display:grid; gap:10px;">${damageHistoryHtml}</div>
+                        <div id="damage-history-panel" class="modal-history-panel" style="display:none;">
+                            <div class="damage-history-list">${damageHistoryHtml}</div>
                         </div>
                     </div>
                 </div>
                 {% endif %}
             
                 <div class="detail-group full-width" style="margin-top:12px; padding:10px; border:1px solid #e3e3e3; border-radius:8px;">
-                    <div class="detail-label">Verfügbarkeit prüfen:</div>
+                    <div class="detail-label">Verfügbarkeit prüfen</div>
                     <div class="detail-value">
                         <div style="display:flex; flex-wrap:wrap; gap:8px; align-items:center;">
                             <input type="date" id="avail-date" style="padding:6px;">
@@ -4180,10 +4188,10 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 </div>
             </div>
         
-            <div class="detail-group full-width" style="margin-top:15px;">
+            <div class="detail-group full-width item-modal-bookings" style="margin-top:15px;">
                 <div class="detail-label">Geplante Ausleihen:</div>
                 <div class="detail-value">
-                    <button id="toggle-bookings" class="calendar-toggle-btn" style="margin-bottom:12px; padding:10px 16px; border-radius:6px; background:#f3f4f6; border:1px solid #d1d5db; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all 0.2s ease;">
+                    <button id="toggle-bookings" class="calendar-toggle-btn modal-section-toggle" style="margin-bottom:12px;">
                         <span>📅</span>
                         <span id="toggle-bookings-text">Kalender anzeigen</span>
                     </button>
@@ -5381,5 +5389,308 @@ document.addEventListener('DOMContentLoaded', ()=>{
         border-radius: 10px !important;
     }
 }
+
+/* Detailed item modal: compact hierarchy and calm information density. */
+#item-modal .modal-content {
+    width: min(94vw, 880px);
+    max-width: 880px;
+    margin: 4vh auto;
+    padding: 0;
+    overflow: hidden;
+    border: 1px solid #d8e1eb;
+    border-radius: 16px;
+    background: var(--ui-surface);
+    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
+}
+
+#item-modal .modal-content > *:not(.item-modal-heading):not(.modal-image-container):not(.modal-details):not(.modal-actions) {
+    margin-left: 28px;
+    margin-right: 28px;
+}
+
+#item-modal .item-modal-heading {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 18px;
+    padding: 26px 30px 22px;
+    border-bottom: 1px solid #e6edf4;
+    background: linear-gradient(180deg, #f8fbfe 0%, var(--ui-surface) 100%);
+}
+
+#item-modal .item-modal-eyebrow {
+    display: block;
+    margin-bottom: 5px;
+    color: #708197;
+    font-size: 0.72rem;
+    font-weight: 800;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+}
+
+#item-modal .item-modal-heading h2 {
+    margin: 0;
+    color: #172536;
+    font-size: clamp(1.25rem, 2.5vw, 1.7rem);
+    line-height: 1.2;
+    text-align: left;
+    overflow-wrap: anywhere;
+}
+
+#item-modal .item-modal-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    flex: 0 0 auto;
+    margin-top: 5px;
+    padding: 6px 10px;
+    border: 1px solid;
+    border-radius: 999px;
+    font-size: 0.78rem;
+    font-weight: 800;
+    white-space: nowrap;
+}
+
+#item-modal .item-modal-status.is-available {
+    color: #17633b;
+    border-color: #b9e2ca;
+    background: #effaf3;
+}
+
+#item-modal .item-modal-status.is-borrowed {
+    color: #9b3d32;
+    border-color: #f2c5bf;
+    background: #fff4f2;
+}
+
+#item-modal .item-modal-status-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: currentColor;
+}
+
+#item-modal .modal-image-container {
+    min-height: 180px;
+    margin: 0;
+    padding: 22px 28px;
+    border-radius: 0;
+    background: #f4f7fa;
+}
+
+#item-modal .modal-image {
+    max-height: 320px;
+    border-radius: 10px;
+    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+}
+
+#item-modal .item-modal-details {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0 22px;
+    margin: 0;
+    padding: 24px 28px 4px;
+}
+
+#item-modal .item-modal-details .detail-group {
+    display: block;
+    min-width: 0;
+    margin: 0;
+    padding: 12px 0;
+    border-bottom: 1px solid #edf1f5;
+}
+
+#item-modal .item-modal-details .detail-label {
+    min-width: 0;
+    margin: 0 0 4px;
+    color: #718096;
+    font-size: 0.72rem;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+#item-modal .item-modal-details .detail-value {
+    min-width: 0;
+    color: #243447;
+    font-size: 0.95rem;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+}
+
+#item-modal .item-modal-details .detail-group.full-width,
+#item-modal .item-modal-details .item-modal-history,
+#item-modal .item-modal-details .item-modal-bookings {
+    grid-column: 1 / -1;
+}
+
+#item-modal .item-modal-details .detail-group.full-width .detail-value {
+    padding: 12px 14px;
+    border: 1px solid #e1e8ef;
+    border-radius: 9px;
+    background: #f8fafc;
+}
+
+#item-modal .item-modal-details .item-modal-history,
+#item-modal .item-modal-details .item-modal-bookings {
+    margin-top: 12px !important;
+    padding: 16px;
+    border: 1px solid #dfe7ef;
+    border-radius: 12px;
+    background: #fbfcfd;
+}
+
+#item-modal .modal-section-toggle {
+    min-height: 38px;
+    margin: 0 0 12px !important;
+    padding: 8px 12px;
+    border: 1px solid #cdd8e3;
+    border-radius: 8px;
+    background: var(--ui-surface);
+    color: #36516c;
+    font-size: 0.86rem;
+    font-weight: 750;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+#item-modal .modal-section-toggle:hover {
+    border-color: #9db6cc;
+    background: #f1f6fa;
+}
+
+#item-modal .modal-history-panel {
+    margin-top: 4px;
+    padding: 12px;
+    border: 1px solid #e2e9f0;
+    border-radius: 10px;
+    background: #f5f8fb;
+}
+
+#item-modal .damage-history-list {
+    display: grid;
+    gap: 9px;
+}
+
+#item-modal .damage-history-entry {
+    position: relative;
+    display: grid;
+    gap: 7px;
+    padding: 12px 14px 12px 17px;
+    border: 1px solid #dce5ed;
+    border-radius: 9px;
+    background: var(--ui-surface);
+}
+
+#item-modal .damage-history-entry::before {
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 3px;
+    content: '';
+    border-radius: 9px 0 0 9px;
+    background: #e35d54;
+}
+
+#item-modal .damage-history-entry.is-repair::before {
+    background: #3aa76d;
+}
+
+#item-modal .damage-history-entry-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+#item-modal .damage-history-badge {
+    padding: 3px 8px;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 800;
+}
+
+#item-modal .damage-history-entry time,
+#item-modal .damage-history-meta {
+    color: #738196;
+    font-size: 0.78rem;
+}
+
+#item-modal .damage-history-actor {
+    display: flex;
+    gap: 5px;
+    color: #425466;
+    font-size: 0.84rem;
+}
+
+#item-modal .damage-history-actor strong {
+    color: #718096;
+    font-weight: 700;
+}
+
+#item-modal .damage-history-description {
+    color: #243447;
+    font-size: 0.91rem;
+    line-height: 1.4;
+}
+
+#item-modal .modal-actions {
+    justify-content: flex-end;
+    gap: 9px;
+    margin: 0;
+    padding: 18px 28px 24px;
+    border-top: 1px solid #e6edf4;
+    background: #fbfcfd;
+}
+
+@media (max-width: 640px) {
+    #item-modal .modal-content {
+        width: calc(100vw - 18px);
+        margin: 9px auto;
+        border-radius: 13px;
+    }
+
+    #item-modal .item-modal-heading {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 10px;
+        padding: 21px 20px 17px;
+    }
+
+    #item-modal .item-modal-status {
+        margin-top: 0;
+    }
+
+    #item-modal .modal-image-container {
+        padding: 16px 18px;
+    }
+
+    #item-modal .item-modal-details {
+        grid-template-columns: 1fr;
+        gap: 0;
+        padding: 16px 18px 0;
+    }
+
+    #item-modal .item-modal-details .detail-group.full-width,
+    #item-modal .item-modal-details .item-modal-history,
+    #item-modal .item-modal-details .item-modal-bookings {
+        grid-column: auto;
+    }
+
+    #item-modal .item-modal-details .item-modal-history,
+    #item-modal .item-modal-details .item-modal-bookings {
+        padding: 13px;
+    }
+
+    #item-modal .modal-actions {
+        justify-content: stretch;
+        padding: 15px 18px 19px;
+    }
+
+    #item-modal .modal-actions > *,
+    #item-modal .modal-actions form,
+    #item-modal .modal-actions button {
+        flex: 1 1 100%;
+        width: 100%;
+    }
+}
 </style>
 {% endblock %}

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;
@@ -447,6 +529,12 @@
                                         <button type="submit" class="btn-edit">Bearbeiten</button>
                                     </form>
                                     <a href="{{ url_for('student_card_single_barcode_download', card_id=card._id) }}" class="btn-export">📥 PDF</a>
+                                    {% if email_service_enabled %}
+                                    <form method="POST" action="{{ url_for('student_card_single_barcode_download', card_id=card._id) }}" style="display:flex; gap:4px; align-items:center;">
+                                        <input type="email" name="recipient_email" required placeholder="E-Mail" aria-label="E-Mail für {{ card.SchülerName }}" style="width:150px; padding:5px;">
+                                        <button type="submit" class="btn-export">PDF senden</button>
+                                    </form>
+                                    {% endif %}
                                     <form method="POST" style="display: inline;" onsubmit="return confirm('Wirklich löschen?');">
                                         <input type="hidden" name="action" value="delete">
                                         <input type="hidden" name="card_id" value="{{ card._id }}">

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/terminplaner.html

@@ -42,6 +42,12 @@
                     <a href="{{ url_for('terminplaner.export_pdf_brief', plan_id=plan_id) }}" class="btn btn-outline-success btn-sm">
                         📄 Brief als PDF herunterladen
                     </a>
+                    {% if mail_service_enabled %}
+                    <form method="post" action="{{ url_for('terminplaner.export_pdf_brief', plan_id=plan_id) }}" class="d-flex flex-wrap gap-2 mt-2">
+                        <input type="email" name="recipient_email" required placeholder="Empfänger-E-Mail" aria-label="Empfänger-E-Mail für den Einladungsbrief" class="form-control" style="max-width:280px;">
+                        <button type="submit" class="btn btn-outline-primary btn-sm">PDF per E-Mail senden</button>
+                    </form>
+                    {% endif %}
                 </div>
 
                 {% if calendar_link %}

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;">