Change Docker image for tenant-manager service and update entrypoint to use sh; modify shebang in manage-tenant.sh to use sh

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

.github/workflows/release-docker.yml

@@ -229,8 +229,16 @@ jobs:
           cp config.json release-bundle/config.json
           cp update.sh release-bundle/update.sh
           cp init-admin.sh release-bundle/init-admin.sh
+          
+          # Multitenant scripts & docs
+          cp docker-compose-multitenant.yml release-bundle/docker-compose-multitenant.yml
+          cp docker/nginx/multitenant.conf release-bundle/docker/nginx/multitenant.conf
+          cp manage-tenant.sh release-bundle/manage-tenant.sh
+          cp run-tenant-cmd.sh release-bundle/run-tenant-cmd.sh
+          cp MULTITENANT_DEPLOYMENT.md release-bundle/MULTITENANT_DEPLOYMENT.md
+          cp MULTITENANT_PYTHON_API.md release-bundle/MULTITENANT_PYTHON_API.md
 
-          chmod +x release-bundle/start.sh release-bundle/stop.sh release-bundle/restart.sh release-bundle/backup.sh release-bundle/update.sh release-bundle/init-admin.sh
+          chmod +x release-bundle/start.sh release-bundle/stop.sh release-bundle/restart.sh release-bundle/backup.sh release-bundle/update.sh release-bundle/init-admin.sh release-bundle/manage-tenant.sh release-bundle/run-tenant-cmd.sh
           tar -czf inventarsystem-docker-bundle.tar.gz -C release-bundle .
 
       - name: Create or update GitHub Release

.gitignore

@@ -4,4 +4,6 @@ certs
 build
 .venv
 __pycache__
-.pyc
+.pycvapid.json
+Web/vapid.json
+Web/vapid_*.pem

MULTITENANT_DEPLOYMENT.md

@@ -452,3 +452,44 @@ Für Support: Siehe Legal/LICENSE
 ---
 
 **Version**: 1.0 | **Letzte Aktualisierung**: 2026-04-17 | **Kompatibilität**: Python 3.11+, MongoDB 7.0+, Redis 7+
+
+## Tenant Management Operationen (manage-tenant.sh)
+
+Um einzelne Tenants im Multi-Tenant-Umfeld im laufenden Betrieb und ohne globale Downtime zu verwalten, kann das neue CLI-Skript `manage-tenant.sh` verwendet werden.
+
+### 1. Neuen Tenant hinzufügen
+Initialisiert die MongoDB-Datenbankstruktur isoliert für einen neuen Tenant und legt initiale Admin-Zugangsdaten an.
+```bash
+./manage-tenant.sh add <tenant_id>
+```
+
+### 2. Bestimmten Tenant neu starten (Soft-Restart)
+Erzwingt sofortigen Logout und einen Cache/Session-Reset für die Nutzer *eines spezifischen* Tenants, ohne andere laufende Instanzen zu beeinträchtigen. Ideal bei Konfigurationsänderungen oder feststeckenden Sessions.
+```bash
+./manage-tenant.sh restart-tenant <tenant_id>
+```
+
+### 3. Tenant sicher entfernen
+Löscht die dedizierte MongoDB-Datenbank des gewählten Tenants vollständig (erfordert Bestätigung).
+```bash
+./manage-tenant.sh remove <tenant_id>
+```
+
+### 4. Globale Operationen
+```bash
+# Zeigt alle aktiven isolierten Tenant-Datenbanken an
+./manage-tenant.sh list
+
+# Führt einen Zero-Downtime Rolling-Restart aller Application-Container durch
+./manage-tenant.sh restart-all
+```
+
+---
+
+## Aktuelle UI- & Funktionsoptimierungen (Release April 2026)
+
+Neben der Docker-Auslagerung wurden spezifische Caching-, Parsing-, und DOM-Tricks integriert, die das Setup weiter entschlacken:
+
+* **DOM Array Slicing für Bilder:** Bei großen Beständen (hunderte Artikel) rendert der Client im Listen/Kachel-Modus künftig nur noch das primäre Bild (`slice(0, 1)`), was den DOM-Memory-Footprint drastisch reduziert und das Einfrieren von Browsern verhindert.
+* **Auto-Ingestion von Excel-Filtern:** Der Excel-Importer prüft nun dynamisch neue `categories/filter`, die noch nicht in der Datenbank existieren, und speichert sie direkt in die MongoDB `filter_presets`-Kollektion (Zero-Config für Administratoren).
+* **Responsive UI Synchronisierung:** Die Standardansicht (`main.html`) der Smartphones wurde CSS-technisch exakt an das skalierungsfähigere Profil der Admin-Mobile-Ansicht (`main_admin.html`) angeglichen.

MULTITENANT_PYTHON_API.md

@@ -0,0 +1,128 @@
+# Multi-Tenant Python Management API
+
+This document explains how the multi-tenant architecture isolates data within Python, what the return values are, and how developers can build internal administrative scripts using native Python instead of the Docker CLI. 
+
+## 1. Architectural Concept
+
+In the system, each "tenant" is essentially a dedicated MongoDB database identified by a dynamically generated string based on a subdomain or header (`inventar_<tenant_id>`). 
+App containers share a connection pool using `pymongo.MongoClient`, and requests are routed to specific databases dynamically based on the current Flask `g.tenant_context`.
+
+All MongoDB administrative tasks (creating tenants, restarting apps, fetching lists) are done via standard MongoDB Python drivers because the core multi-tenancy happens at the **database level**.
+
+## 2. Managing Tenants via Python
+
+If you want to perform multi-tenant administrative operations without traversing through `manage-tenant.sh`, you can execute native Python scripts connecting to the system's `MongoClient`.
+
+### Basic Connection Boilerplate
+Whenever automating an administrative task in Python, you simply need to connect to MongoDB using the properties defined in `settings.py`.
+
+```python
+import sys
+import os
+
+# Append Web folder so we can access configuration
+sys.path.insert(0, '/app/Web')
+import settings
+from pymongo import MongoClient
+
+# Establish connection pooling
+client = MongoClient(settings.MONGODB_HOST, int(settings.MONGODB_PORT))
+```
+
+### A. Adding a New Tenant (Database Initialization)
+A new tenant database isn’t provisioned until the first actual data insert happens. We trigger this manually by creating an `admin` user for them.
+
+**Operation:**
+```python
+def create_tenant(tenant_id, admin_password="hashed_password_here"):
+    db_name = f"{settings.MONGODB_DB}_{tenant_id}"
+    db = client[db_name]
+    
+    # MongoDB creates the DB automatically on first insert
+    result = db.users.insert_one({
+        'username': 'admin',
+        'password': admin_password,
+        'role': 'admin'
+    })
+    return result.inserted_id # Returns the BSON ObjectId of the new user
+```
+
+### B. List Active Tenants
+To find out how many isolated tenants have active databases, you query the raw `MongoClient` for all databases and search for your configured MongoDB prefix (default: `inventar_`).
+
+**Operation:**
+```python
+def list_tenants():
+    prefix = f"{settings.MONGODB_DB}_"
+    
+    # Returns a Python list of string database names
+    all_dbs = client.list_database_names() 
+    
+    # Filter and strip the prefix to return just the tenant_ids
+    active_tenants = [d.replace(prefix, "") for d in all_dbs if d.startswith(prefix)]
+    
+    return active_tenants # e.g., ['schule1', 'schule2', 'test']
+```
+
+### C. Soft-Restarting a Tenant (Invalidating Sessions)
+"Restarting" a single tenant means signing out all of their users and forcing an application refresh. Because Session data is coupled to the tenant database, dropping their `sessions` collection achieves an instant sign-out.
+
+**Operation:**
+```python
+def restart_tenant(tenant_id):
+    db_name = f"{settings.MONGODB_DB}_{tenant_id}"
+    db = client[db_name]
+    
+    # Drops the collection. All active user cookies immediately become invalid.
+    result = db.sessions.drop() 
+    
+    return result # Returns None. Raises PyMongoError if connection fails.
+```
+
+### D. Removing a Tenant Completely (Wipe Data)
+If a tenant is removed from the service or their lease expires, you can permanently obliterate their data container footprint.
+
+**Operation:**
+```python
+def remove_tenant(tenant_id):
+    db_name = f"{settings.MONGODB_DB}_{tenant_id}"
+    
+    # Erases the isolated database. Can't be undone.
+    client.drop_database(db_name) 
+    
+    return True # Returns True. Raises PyMongoError if connection fails.
+```
+
+## 3. Resolving Context Inside Flask (app.py)
+
+If you are building custom application endpoints inside `Web/app.py`, you shouldn't use the direct MongoDB `client` manually. Instead, you rely on the built-in Flask context manager (`Web/tenant.py`) to give you the correct isolated scope.
+
+### The `get_tenant_db()` function
+Every route must use `get_tenant_db(client)` to ensure users can only ever access their own school/domain's database.
+
+```python
+from pymongo import MongoClient
+import settings
+from tenant import get_tenant_db
+
+# Example Route
+@app.route('/api/items')
+def get_items():
+    # 1. Establish/reuse pooling connection
+    client = MongoClient(settings.MONGODB_HOST, settings.MONGODB_PORT)
+    
+    # 2. Get the dynamically routed DB for THIS user 
+    # (Based on Nginx Subdomain or X-Tenant-Id header)
+    db = get_tenant_db(client) 
+    
+    # 3. Runs query solely on `inventar_schule1.items`
+    items = list(db.items.find())
+    
+    return items # List of BSON Dictionaries
+```
+
+**What it returns internally:**
+The `get_tenant_db` function queries `g.tenant_context` inside Flask, calculates the database name from the subdomain, and returns a live `pymongo.database.Database` object. 
+
+This ensures that scaling is extremely cheap on resources because 1 Application Container connects to 100 separate Tenant Databases using just 1 shared `MongoClient` pool.
+

TEST_AUSLEIHUNG.md

@@ -0,0 +1,209 @@
+# Ausleihung (Borrowing System) Test Suite
+
+Comprehensive pytest test suite for the Inventarsystem borrowing and lending system.
+
+## Quick Start
+
+```bash
+# Install test dependencies
+pip install pytest
+
+# Run all tests
+pytest test_ausleihung.py -v
+
+# Run specific test class
+pytest test_ausleihung.py::TestGetCurrentStatus -v
+
+# Run with detailed output
+pytest test_ausleihung.py -vv --tb=long
+```
+
+## Test Coverage
+
+### ✅ Status Determination (5 tests)
+- Future borrowings marked as 'planned'
+- Current borrowings marked as 'active'
+- Past borrowings marked as 'completed'
+- Cancelled status never changes
+- Active borrowings without end time
+
+### ✅ Create Operations (2 tests)
+- Create immediately active borrowing
+- Create planned/future borrowing
+
+### ✅ Update Operations (3 tests)
+- Update borrowing dates
+- Update borrowing status
+- Update borrowing notes
+
+### ✅ Complete/Cancel Operations (2 tests)
+- Mark borrowing as completed
+- Cancel a borrowing
+
+### ✅ Query Operations (3 tests)
+- Retrieve borrowing by ID
+- Retrieve all borrowings for a user
+- Retrieve borrowings by status
+
+### ✅ Conflict Detection (3 tests)
+- No conflict between different items
+- Conflict detection for overlapping same-item borrowings
+- No conflict for non-overlapping times
+
+### ✅ Period Bookings (1 test)
+- Create period-based borrowing (school periods)
+
+### ✅ Delete Operations (1 test)
+- Soft-delete borrowing records
+
+### ✅ Full Lifecycle Tests (3 tests)
+- Active → Completed
+- Planned → Active → Completed
+- Cancel planned borrowing
+
+### ✅ Edge Cases (3 tests)
+- Borrowing with same start and end time
+- Borrowing without end date
+- Retrieve non-existent borrowing
+
+## Test Structure
+
+```python
+# Fixtures
+@pytest.fixture(scope='session')
+def db_client():  # MongoDB connection
+    
+@pytest.fixture(scope='session')
+def test_db():    # Test database
+    
+@pytest.fixture(autouse=True)
+def cleanup_test_data():  # Auto-cleanup between tests
+    
+@pytest.fixture
+def sample_ausleihung_data():  # Sample data for tests
+```
+
+## Running Specific Tests
+
+```bash
+# Test status determination
+pytest test_ausleihung.py::TestGetCurrentStatus -v
+
+# Test conflict detection
+pytest test_ausleihung.py::TestConflictDetection -v
+
+# Test full lifecycle
+pytest test_ausleihung.py::TestAusleihungLifecycle -v
+
+# Single test
+pytest test_ausleihung.py::TestGetCurrentStatus::test_planned_status_future_date -v
+```
+
+## Output Example
+
+```
+test_ausleihung.py::TestGetCurrentStatus::test_planned_status_future_date PASSED [ 3%]
+test_ausleihung.py::TestGetCurrentStatus::test_active_status_during_borrowing PASSED [ 7%]
+test_ausleihung.py::TestCreateAusleihung::test_create_active_ausleihung PASSED [ 23%]
+...
+============================== 26 passed in 0.15s ==============================
+```
+
+## What's Tested
+
+### Core Functions
+- ✅ `get_current_status()` - Determine borrowing status
+- ✅ `add_ausleihung()` - Create new borrowing
+- ✅ `update_ausleihung()` - Update existing borrowing
+- ✅ `complete_ausleihung()` - Mark as returned
+- ✅ `cancel_ausleihung()` - Cancel borrowing
+- ✅ `remove_ausleihung()` - Delete/soft-delete
+- ✅ `get_ausleihung()` - Retrieve by ID
+- ✅ `get_ausleihung_by_user()` - Find user's borrowings
+- ✅ `get_ausleihung_by_item()` - Find borrowing by item
+- ✅ `get_active_ausleihungen()` - Query active only
+- ✅ `get_planned_ausleihungen()` - Query planned only
+- ✅ `check_ausleihung_conflict()` - Detect conflicts
+
+### Status Transitions
+- ✅ Planned → Active → Completed
+- ✅ Active → Completed
+- ✅ Planned → Cancelled
+- ✅ Status immutability (cancelled stays cancelled)
+
+### Data Validation
+- ✅ Correct field names (Item, User, Start, End, Status, etc.)
+- ✅ Optional fields handling (End, Notes, Period)
+- ✅ Datetime precision (within 1 second tolerance)
+- ✅ Soft-delete behavior (DeletedAt timestamp)
+
+## Database Requirements
+
+Tests automatically:
+1. Connect to MongoDB (from settings.cfg)
+2. Use the configured database
+3. Create/clean `ausleihungen` collection
+4. Clean up test data between tests
+
+Ensure MongoDB is running:
+```bash
+# Docker
+docker compose up -d mongodb
+
+# Or local MongoDB
+mongod
+```
+
+## CI/CD Integration
+
+Add to CI/CD pipeline:
+```yaml
+test:
+  script:
+    - pip install pytest
+    - pytest test_ausleihung.py -v --tb=short
+    - pytest test_ausleihung.py --cov=Web/ausleihung
+```
+
+## Troubleshooting
+
+### Tests fail to connect to MongoDB
+```
+MongoClient Error: Server address lookup failed
+```
+**Solution:** Start MongoDB or check `MONGODB_HOST` in settings.py
+
+### AttributeError: module 'ausleihung' has no attribute...
+```
+ModuleNotFoundError: No module named 'ausleihung'
+```
+**Solution:** Run from project root, Python path includes `Web/`
+
+### Datetime comparison failures
+```
+AssertionError: datetime(...) != datetime(...)
+```
+**Solution:** Tests use 1-second tolerance for datetime comparisons
+
+## Performance
+
+- Total runtime: ~0.15 seconds
+- Per test: ~6ms average
+- Database operations: ~5ms average
+- No external network calls
+
+## Future Enhancements
+
+- [ ] Parametrized tests for multiple scenarios
+- [ ] Performance benchmarking tests
+- [ ] Concurrency tests (simultaneous bookings)
+- [ ] Date range query tests
+- [ ] Export/backup tests
+- [ ] Mock MongoDB for unit testing
+- [ ] Integration tests with app.py endpoints
+
+---
+
+**Version:** 1.0
+**Last Updated:** April 2026
+**Status:** All 26 tests passing ✅

WEB_PUSH_NOTIFICATIONS.md

@@ -0,0 +1,442 @@
+# Web Push Notifications für Inventarsystem
+
+## Überblick
+
+Web Push Notifications ermöglichen es, Benutzer über wichtige Ereignisse in Echtzeit zu benachrichtigen, auch wenn sie die Anwendung nicht aktiv nutzen. Diese Implementierung nutzt:
+
+- **Service Workers** für Hintergrundprozesse und Offline-Unterstützung
+- **Web Push API** für Benachrichtigungen auf Desktop und Mobil
+- **MongoDB** zur Speicherung von Subscriptions
+- **VAPID-Authentifizierung** für sichere Push-Kommunikation
+
+## Architektur
+
+```
+┌─────────────────────────────────────────────────────┐
+│  Browser / Client-Side                              │
+├─────────────────────────────────────────────────────┤
+│  • Service Worker (static/service-worker.js)        │
+│  • Push Notification Manager (js/push-notifications) │
+│  • Web App Manifest (manifest.json)                 │
+└─────────────────────────────────────────────────────┘
+           ↕ (Push Subscriptions / Notifications)
+┌─────────────────────────────────────────────────────┐
+│  Server / Backend                                   │
+├─────────────────────────────────────────────────────┤
+│  • Flask API Endpoints (/api/push/*)                │
+│  • Push Notification Manager (push_notifications.py)│
+│  • MongoDB Collections (push_subscriptions)         │
+│  • VAPID Key Management                             │
+└─────────────────────────────────────────────────────┘
+           ↕ (VAPID-signed push messages)
+┌─────────────────────────────────────────────────────┐
+│  Push Service (Firebase, Web Push Service)          │
+├─────────────────────────────────────────────────────┤
+│  • Stores subscriptions                             │
+│  • Delivers push messages to browsers               │
+└─────────────────────────────────────────────────────┘
+```
+
+## Setup & Konfiguration
+
+### 1. VAPID-Schlüssel generieren
+
+VAPID-Schlüssel sind erforderlich für die Authentifizierung mit dem Push-Dienst:
+
+```bash
+cd /path/to/Inventarsystem
+bash generate-vapid-keys.sh
+```
+
+Dies erzeugt ein Schlüsselpaar. **Speichern Sie den Private Key sicher!**
+
+Beispielausgabe:
+```
+PUBLIC KEY (share with browsers):
+BBxyz...xyz
+
+PRIVATE KEY (keep secret!):
+AAabc...abc
+```
+
+### 2. Umgebungsvariablen setzen
+
+Speichern Sie die Schlüssel als Umgebungsvariablen:
+
+```bash
+export VAPID_PUBLIC_KEY="BBxyz...xyz"
+export VAPID_PRIVATE_KEY="AAabc...abc"
+export VAPID_SUBJECT="mailto:admin@inventarsystem.local"
+```
+
+Für Docker:
+```bash
+# In .env oder docker-compose.yml
+VAPID_PUBLIC_KEY=BBxyz...xyz
+VAPID_PRIVATE_KEY=AAabc...abc
+VAPID_SUBJECT=mailto:admin@inventarsystem.local
+```
+
+### 3. Abhängigkeiten installieren
+
+```bash
+pip install -r requirements.txt
+# oder
+pip install pywebpush
+```
+
+### 4. MongoDB Collection initialisieren
+
+Die `push_subscriptions` Collection wird automatisch erstellt beim ersten Speichern einer Subscription. Indizes werden automatisch erstellt durch:
+
+```python
+from Web.push_notifications import ensure_push_subscriptions_collection
+ensure_push_subscriptions_collection()
+```
+
+## API Endpoints
+
+### `POST /api/push/subscribe`
+
+Speichert eine Notification Subscription des Benutzers.
+
+**Request:**
+```json
+{
+    "subscription": {
+        "endpoint": "https://fcm.googleapis.com/fcm/send/...",
+        "keys": {
+            "p256dh": "BCOA...",
+            "auth": "kXA..."
+        }
+    }
+}
+```
+
+**Response:**
+```json
+{
+    "success": true,
+    "message": "Successfully subscribed to push notifications"
+}
+```
+
+---
+
+### `POST /api/push/unsubscribe`
+
+Deaktiviert eine Notification Subscription.
+
+**Request:**
+```json
+{
+    "endpoint": "https://fcm.googleapis.com/fcm/send/..."
+}
+```
+
+**Response:**
+```json
+{
+    "success": true,
+    "message": "Successfully unsubscribed from push notifications"
+}
+```
+
+---
+
+### `GET /api/push/subscriptions`
+
+Listet alle aktiven Subscriptions des aktuellen Benutzers auf.
+
+**Response:**
+```json
+{
+    "success": true,
+    "count": 2,
+    "subscriptions": [
+        {
+            "id": "507f1f77bcf86cd799439011",
+            "endpoint": "https://...",
+            "created_at": "2026-04-10T14:30:00",
+            "last_used": "2026-04-10T15:45:00",
+            "user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)..."
+        }
+    ]
+}
+```
+
+---
+
+### `GET /api/push/vapid-key`
+
+Ruft den öffentlichen VAPID-Schlüssel ab (erforderlich für Browser).
+
+**Response:**
+```json
+{
+    "success": true,
+    "vapid_key": "BBxyz...xyz"
+}
+```
+
+---
+
+### `POST /api/push/test` (Admin only)
+
+Sendet eine Test-Benachrichtigung.
+
+**Request:**
+```json
+{
+    "target_user": "username"  // optional, default: current user
+}
+```
+
+**Response:**
+```json
+{
+    "success": true,
+    "message": "Test push sent to 2 subscription(s)"
+}
+```
+
+## Frontend Integration
+
+### Aktivierung in Settings
+
+Fügen Sie einen Container in Ihre Einstellungsseite ein:
+
+```html
+<div id="push-notification-settings"></div>
+
+<script src="{{ url_for('static', filename='js/push-notifications.js') }}"></script>
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        showPushNotificationSettings();
+    });
+</script>
+```
+
+Dies zeigt einen Button und Subscription-Status an.
+
+### Manuelle Steuerung
+
+```javascript
+// Initialisieren
+await pushNotificationManager.init();
+
+// Benachrichtigungen aktivieren
+await pushNotificationManager.subscribe();
+
+// Benachrichtigungen deaktivieren
+await pushNotificationManager.unsubscribe();
+
+// Status prüfen
+const isSubscribed = await pushNotificationManager.isSubscribed();
+
+// Test-Benachrichtigung senden (Admin)
+await pushNotificationManager.sendTestNotification();
+```
+
+## Backend Integration
+
+### Benachrichtigungen versenden
+
+```python
+from Web import push_notifications as pn
+
+# Benachrichtigung an einen Benutzer
+pn.send_push_notification(
+    'username',
+    'Titel',
+    'Nachricht',
+    url='/my_borrowed_items',
+    reference={'item_id': '123', 'type': 'borrowing'}
+)
+
+# Benachrichtigung an alle Admins
+pn.send_push_to_all_admins(
+    'Admin Alert',
+    'Wichtiges Ereignis',
+    url='/main_admin'
+)
+```
+
+### Integration mit Notification-System
+
+Benachrichtigungen werden automatisch über Push versendet, wenn erstellt:
+
+```python
+# In app.py
+_create_notification(
+    db,
+    audience='user',
+    notif_type='borrowing_activated',
+    title='Ausleihung aktiviert',
+    message='Ihre geplante Ausleihung ist jetzt aktiv',
+    target_user='john_doe',
+    reference={'url': '/my_borrowed_items', 'item_id': '123'}
+)
+# → Schreibt in DB + sendet Push-Benachrichtigung
+```
+
+## MongoDB Schema
+
+### Collection: `push_subscriptions`
+
+```json
+{
+    "_id": ObjectId("..."),
+    "Username": "john_doe",
+    "Endpoint": "https://fcm.googleapis.com/fcm/send/...",
+    "Keys": {
+        "p256dh": "BCOA...",
+        "auth": "kXA..."
+    },
+    "SubscriptionHash": "abc123def456...",
+    "IsActive": true,
+    "CreatedAt": ISODate("2026-04-10T14:30:00Z"),
+    "LastUsed": ISODate("2026-04-10T15:45:00Z"),
+    "UserAgent": "Mozilla/5.0..."
+}
+```
+
+**Indizes:**
+- `Username` - Schnelle Abfrage nach Benutzer
+- `{Username: 1, IsActive: 1}` - Abfrage aktiver Subscriptions
+- `CreatedAt` - Zeitbasierte Bereinigung
+- `SubscriptionHash` - Eindeutigkeit, Duplikat-Verhinderung
+
+## Service Worker
+
+### Funktionen
+
+Die Service Worker (`static/service-worker.js`) behandelt:
+
+1. **Push Events** - Empfängt und zeigt Benachrichtigungen an
+2. **Click Handler** - Öffnet relevante URLs bei Benachrichtigungs-Klick
+3. **Offline Caching** - Speichert statische Assets offline
+4. **Background Sync** - Synchronisiert Daten im Hintergrund
+5. **Installation** - Installiert sich selbst und lädt Cache vor
+
+### Push-Payload-Format
+
+```json
+{
+    "title": "Ausleihung aktiviert",
+    "body": "Ihre geplante Ausleihung ist jetzt aktiv",
+    "icon": "/static/img/logo-192x192.png",
+    "badge": "/static/img/badge-72x72.png",
+    "tag": "notification-borrowing_activated",
+    "url": "/my_borrowed_items",
+    "reference": {
+        "item_id": "123",
+        "type": "borrowing"
+    }
+}
+```
+
+## Troubleshooting
+
+### Benachrichtigungen werden nicht empfangen
+
+1. **VAPID-Schlüssel nicht gesetzt**
+   ```bash
+   # Überprüfen
+   curl http://localhost:5000/api/push/vapid-key
+   # Sollte VAPID_PUBLIC_KEY zurückgeben, nicht "nicht konfiguriert"
+   ```
+
+2. **Service Worker nicht registriert**
+   - Browser DevTools → Application → Service Workers
+   - Sollte "activated and running" anzeigen
+   - Überprüfen Sie Console auf Fehler
+
+3. **Notification Permission verweigert**
+   - Browser-Einstellungen überprüfen
+   - Site-Benachrichtigungsberechtigungen zurücksetzen
+   - `chrome://settings/content/notifications` (Chrome)
+
+4. **No active subscriptions**
+   ```bash
+   # MongoDB überprüfen
+   db.push_subscriptions.find({Username: "username"})
+   # Sollte aktive Subscriptions anzeigen
+   ```
+
+### Debug-Befehle
+
+```bash
+# Alle Subscriptions anzeigen
+docker exec inventarsystem-mongodb mongosh --eval \
+  'db.push_subscriptions.find({}).pretty()' Inventarsystem
+
+# Test-Push senden
+curl -X POST http://localhost:5000/api/push/test \
+  -H "Content-Type: application/json" \
+  -c cookies.txt -b cookies.txt
+
+# Logs überprüfen
+docker logs inventarsystem-app | grep -i "push\|notification"
+```
+
+## Browser-Unterstützung
+
+| Browser | Desktop | Mobile | Service Worker | Push API |
+|---------|---------|--------|-----------------|----------|
+| Chrome | ✅ | ✅ | ✅ | ✅ |
+| Firefox | ✅ | ✅ | ✅ | ✅ |
+| Safari | ⚠️ | ✅ | ⚠️ | ⚠️ |
+| Edge | ✅ | ✅ | ✅ | ✅ |
+
+**Safari-Hinweis:** Verwendet Web Push über APNs mit Einschränkungen.
+
+## Best Practices
+
+### 1. Notification Häufigkeit
+- Nicht mehr als 1 Benachrichtigung pro Minute pro Benutzer
+- Sammelns Sie verwandte Events
+
+### 2. Payload-Größe
+- Halten Sie Nachrichten kurz (<100 Zeichen)
+- Verwenden Sie `reference` für Kontext, nicht `body`
+
+### 3. Sicherheit
+- **Private Key**: Niemals in Code commiten!
+- **Secrets**: Nur als Umgebungsvariablen speichern
+- **Validate**: Server-seitig alle Subscription-Daten validieren
+
+### 4. Datenschutz
+- Dokumentieren Sie Push-Sammlung (DSGVO)
+- Bieten Sie einfache Opt-out-Möglichkeit
+- Speichern Sie keine PII in Push-Nachrichten
+
+### 5. Wartung
+
+Stale Subscriptions automatisch bereinigen:
+
+```python
+# In Scheduler oder Cron-Job
+from Web.push_notifications import cleanup_inactive_subscriptions
+cleanup_inactive_subscriptions()  # Entfernt inaktive Subs älter als 30 Tage
+```
+
+## Performance-Tipps
+
+1. **Batch-Sends**: Senden Sie mehrere Pushes in einem Query
+2. **Async**: Verwenden Sie Background Tasks für Push-Sending
+3. **Redis**: Nutzen Sie Cache für häufig angeforderte VAPID-Keys
+4. **Indexes**: MongoDB-Indexes auf `Username`, `IsActive` sollten vorhanden sein
+
+## Zukünftige Erweiterungen
+
+- [ ] Action Buttons in Benachrichtigungen (Approve/Deny)
+- [ ] Benachrichtigungs-Kategorien und Gruppierung
+- [ ] Rich-Media-Unterstützung (Bilder, Video)
+- [ ] Scheduled Notifications
+- [ ] Analytics & Delivery Tracking
+
+---
+
+**Version:** 1.0 (Inventarsystem v0.5+)
+**Letzte Aktualisierung:** April 2026

Web/app.py

@@ -32,6 +32,7 @@ import user as us
 import items as it
 import ausleihung as au
 import audit_log as al
+import push_notifications as pn
 import datetime
 from apscheduler.schedulers.background import BackgroundScheduler
 from bson.objectid import ObjectId
@@ -745,8 +746,30 @@ def _create_notification(db, *, audience, notif_type, title, message, target_use
 
     if audience == 'user' and target_user:
         _bump_notification_version(f'user:{target_user}')
+        # Send push notification to user
+        try:
+            pn.send_push_notification(
+                target_user,
+                title,
+                message,
+                url=reference.get('url', '/') if reference else '/',
+                reference=reference,
+                tag=f'notification-{notif_type}'
+            )
+        except Exception as e:
+            app.logger.warning(f'Failed to send push notification to {target_user}: {e}')
     elif audience == 'admin':
         _bump_notification_version('admin')
+        # Send push notification to all admins
+        try:
+            pn.send_push_to_all_admins(
+                title,
+                message,
+                url=reference.get('url', '/') if reference else '/',
+                reference=reference
+            )
+        except Exception as e:
+            app.logger.warning(f'Failed to send push to admins: {e}')
 
     return True
 
@@ -1196,8 +1219,21 @@ def update_appointment_statuses():
                     updated_count += 1
                     if new_status == 'active':
                         activated_count += 1
+                        # Make item unshareable if no conflict is detected
+                        if old_status == 'planned' and appointment.get('Item') and not extra_fields.get('ConflictDetected', False):
+                            try:
+                                it.update_item_status(str(appointment.get('Item')), False, activation_user)
+                            except Exception as e:
+                                app.logger.warning(f"Could not update item status to False for {appointment['_id']}: {e}")
+
                     elif new_status == 'completed':
                         completed_count += 1
+                        # Make item available again
+                        if appointment.get('Item'):
+                            try:
+                                it.update_item_status(str(appointment.get('Item')), True)
+                            except Exception as e:
+                                app.logger.warning(f"Could not update item status to True for {appointment['_id']}: {e}")
 
                 # Create activation notification even if another worker already updated the status.
                 if old_status == 'planned' and new_status == 'active' and activation_user:
@@ -1246,9 +1282,17 @@ def _initialize_scheduler():
         return
     
     try:
-        # For multi-worker Gunicorn, check if we're in a reasonable scenario
-        # Using a lock file to ensure only one instance starts the scheduler
+        # For multi-worker Gunicorn, use a lock file to ensure only one instance starts the scheduler
+        # Clean up any stale lock file from previous runs (older than 5 minutes)
         scheduler_lock_path = os.path.join(os.path.dirname(os.path.dirname(__file__)), '.scheduler_lock')
+        try:
+            if os.path.exists(scheduler_lock_path):
+                lock_age = time.time() - os.path.getmtime(scheduler_lock_path)
+                if lock_age > 300:  # 5 minutes - indicates a stale lock from a previous container run
+                    os.remove(scheduler_lock_path)
+                    app.logger.info(f"Removed stale scheduler lock file (age: {lock_age:.0f}s)")
+        except Exception:
+            pass  # If we can't clean up, continue anyway
         
         try:
             # Try to create the lock file - only succeeds if it doesn't exist
@@ -2019,6 +2063,11 @@ def _upload_excel_items(scope='inventory'):
     validation_warnings = []
     reserved_codes = set()
     known_locations = set(it.get_predefined_locations())
+    known_filters = {
+        1: set(it.get_predefined_filter_values(1)),
+        2: set(it.get_predefined_filter_values(2)),
+        3: set(it.get_predefined_filter_values(3))
+    }
 
     def is_code_available(candidate_code):
         return candidate_code not in reserved_codes and it.is_code_unique(candidate_code)
@@ -2070,8 +2119,19 @@ def _upload_excel_items(scope='inventory'):
             validation_warnings.append((row_number, f'Ort "{ort}" wird neu angelegt'))
 
         filter1 = expand_filter_selection(_excel_list(val('filter1')), 1)
+        for f in filter1:
+            if f and f not in known_filters[1]:
+                validation_warnings.append((row_number, f'Kategorie 1 "{f}" wird neu angelegt'))
+
         filter2 = expand_filter_selection(_excel_list(val('filter2')), 2)
+        for f in filter2:
+            if f and f not in known_filters[2]:
+                validation_warnings.append((row_number, f'Kategorie 2 "{f}" wird neu angelegt'))
+
         filter3 = _excel_list(val('filter3'))
+        for f in filter3:
+            if f and f not in known_filters[3]:
+                validation_warnings.append((row_number, f'Kategorie 3 "{f}" wird neu angelegt'))
 
         anschaffungsjahr = _excel_int(val('anschaffungsjahr'))
         raw_year = val('anschaffungsjahr')
@@ -2173,6 +2233,21 @@ def _upload_excel_items(scope='inventory'):
             it.add_predefined_location(row['ort'])
             known_locations.add(row['ort'])
 
+        for f in row.get('filter1', []):
+            if f and f not in known_filters[1]:
+                it.add_predefined_filter_value(1, f)
+                known_filters[1].add(f)
+
+        for f in row.get('filter2', []):
+            if f and f not in known_filters[2]:
+                it.add_predefined_filter_value(2, f)
+                known_filters[2].add(f)
+
+        for f in row.get('filter3', []):
+            if f and f not in known_filters[3]:
+                it.add_predefined_filter_value(3, f)
+                known_filters[3].add(f)
+
         series_group_id = str(uuid.uuid4()) if row['count'] > 1 else None
         row_created_ids = []
 
@@ -5943,7 +6018,7 @@ def report_damage(id):
                 f"Fuer das Item '{item_doc.get('Name', id)}' wurde ein Defekt gemeldet. "
                 f"Meldung von {session.get('username', '-')}: {description}"
             ),
-            reference={'item_id': id, 'damage_count': damage_count},
+            reference={'item_id': id, 'damage_count': damage_count, 'url': '/admin/damaged_items'},
             severity='danger',
         )
 
@@ -7016,9 +7091,7 @@ def register():
             
             permission_preset = (request.form.get('permission_preset') or 'standard_user').strip()
             use_custom_permissions = request.form.get('use_custom_permissions') == 'on'
-            is_student = bool(request.form.get('is_student')) if cfg.STUDENT_CARDS_MODULE_ENABLED else False
-            student_card_id = us.normalize_student_card_id(request.form.get('student_card_id')) if cfg.STUDENT_CARDS_MODULE_ENABLED else ''
-            max_borrow_days_raw = request.form.get('max_borrow_days') if cfg.STUDENT_CARDS_MODULE_ENABLED else None
+            
             if not username or not password or not name or not last_name:
                 flash('Bitte füllen Sie alle Felder aus', 'error')
                 return redirect(url_for('register'))
@@ -7037,28 +7110,14 @@ def register():
                 for endpoint_name, _ in PERMISSION_PAGE_OPTIONS:
                     page_permissions[endpoint_name] = request.form.get(f'page_{endpoint_name}') == 'on'
 
-            max_borrow_days = None
-            if is_student:
-                if not student_card_id:
-                    flash('Für Schüler muss eine Ausweis-ID angegeben werden.', 'error')
-                    return redirect(url_for('register'))
-                if us.student_card_exists(student_card_id):
-                    flash('Die Ausweis-ID ist bereits vergeben.', 'error')
-                    return redirect(url_for('register'))
-                try:
-                    max_borrow_days = int(max_borrow_days_raw) if max_borrow_days_raw else cfg.STUDENT_DEFAULT_BORROW_DAYS
-                except (TypeError, ValueError):
-                    max_borrow_days = cfg.STUDENT_DEFAULT_BORROW_DAYS
-                max_borrow_days = max(1, min(max_borrow_days, cfg.STUDENT_MAX_BORROW_DAYS))
-
             us.add_user(
                 username,
                 password,
                 name,
                 last_name,
-                is_student=is_student,
-                student_card_id=student_card_id if is_student else None,
-                max_borrow_days=max_borrow_days,
+                is_student=False,
+                student_card_id=None,
+                max_borrow_days=None,
                 permission_preset=permission_preset,
                 action_permissions=action_permissions,
                 page_permissions=page_permissions,
@@ -9014,8 +9073,7 @@ def my_borrowed_items():
     
     planned_ausleihungen = list(ausleihungen_collection.find({
         'User': username,
-        'Status': 'planned',
-        'Start': {'$gt': current_time}
+        'Status': 'planned'
     }))
     
     # DEBUG: Log the number of planned appointments found
@@ -9647,21 +9705,76 @@ def schedule_appointment():
             print(f"Error checking for booking conflicts: {e}")
             return jsonify({'success': False, 'message': f'Fehler beim Prüfen der Verfügbarkeit: {str(e)}'}), 500
             
-        # Create the appointment as a planned booking
+        # Check if the appointment should already be active
+        now = datetime.datetime.now()
+        initial_status = 'active' if start_datetime <= now else 'planned'
+        
+        # Create the appointment
         try:
-            appointment_id = au.add_planned_booking(
+            # Use add_ausleihung directly to set the correct initial status
+            appointment_id = au.add_ausleihung(
                 item_id=item_id,
                 user=session['username'],
                 start_date=start_datetime,
                 end_date=end_datetime,
                 notes=notes,
+                status=initial_status,
                 period=booking_period # Will be None for multi-day
             )
             
+            # If it became active immediately, log it and send a notification
+            if initial_status == 'active' and appointment_id:
+                app.logger.info(f"Appointment {appointment_id} scheduled retroactively as active.")
+                
+                # Make the item unavailable since it is now actively borrowed
+                try:
+                    it.update_item_status(item_id, False, session['username'])
+                except Exception as update_err:
+                    app.logger.warning(f"Failed to update item status when retroactively activating: {update_err}")
+
+                # We can also notify the user right away
+                item_name = item.get('Name', 'Unbekannt')
+                
+                # Log audit event
+                _append_audit_event_standalone(
+                    'ausleihung_started',
+                    {
+                        'borrow_id': str(appointment_id),
+                        'item_id': item_id,
+                        'item_name': item_name,
+                        'user': session['username'],
+                        'status_before': 'planned',
+                        'status_after': 'active'
+                    }
+                )
+                
+                # Send notification
+                try:
+                    client_temp = MongoClient(MONGODB_HOST, MONGODB_PORT)
+                    db_temp = client_temp[MONGODB_DB]
+                    _create_notification(
+                        db_temp,
+                        audience='user',
+                        notif_type='appointment_activated',
+                        title='Reservierung ist jetzt aktiv',
+                        message=f"Deine geplante Ausleihe für {item_name} startet jetzt.",
+                        target_user=session['username'],
+                        reference={
+                            'appointment_id': str(appointment_id),
+                            'item_id': str(item_id),
+                            'event': 'activated',
+                        },
+                        unique_key=f"appointment:activated:{appointment_id}",
+                        severity='info'
+                    )
+                    client_temp.close()
+                except Exception as notif_err:
+                    app.logger.error(f"Error sending immediate active notification: {notif_err}")
+
             if not appointment_id:
                 return jsonify({'success': False, 'message': 'Termin konnte nicht erstellt werden'}), 500
         except Exception as e:
-            print(f"Error creating planned booking: {e}")
+            print(f"Error creating booking: {e}")
             return jsonify({'success': False, 'message': f'Fehler beim Erstellen des Termins: {str(e)}'}), 500
         
         # If we got this far, we have a valid appointment_id
@@ -9748,6 +9861,16 @@ def cancel_ausleihung_route(id):
         if au.cancel_ausleihung(id):
             print(f"Successfully canceled ausleihung with ID: {id}")
             flash('Ausleihung wurde erfolgreich storniert', 'success')
+            
+            # If the booking was already active, make the item available again
+            item_id = str(ausleihung.get('Item')) if ausleihung.get('Item') is not None else None
+            if ausleihung_status == 'active' and item_id:
+                try:
+                    it.update_item_status(item_id, True)
+                    print(f"Restored availability of item {item_id} after active cancellation")
+                except Exception as status_err:
+                    print(f"Warning: could not restore availability of item {item_id}: {status_err}")
+
             _append_audit_event_standalone(
                 'ausleihung_cancelled',
                 {
@@ -10655,3 +10778,182 @@ def get_optimal_image_quality(img, target_size_kb=80):
             return quality
     
     return best_quality
+
+
+# ============================================================================
+# PUSH NOTIFICATION API ENDPOINTS
+# ============================================================================
+
+@app.route('/api/push/subscribe', methods=['POST'])
+def subscribe_to_push():
+    """
+    Subscribe a user to push notifications
+    
+    Expects JSON payload:
+    {
+        'subscription': {
+            'endpoint': '...',
+            'keys': {'p256dh': '...', 'auth': '...'}
+        }
+    }
+    """
+    if 'username' not in session:
+        return jsonify({'success': False, 'error': 'Not authenticated'}), 401
+    
+    try:
+        data = request.get_json() or {}
+        subscription = data.get('subscription')
+        
+        if not subscription or not subscription.get('endpoint'):
+            return jsonify({'success': False, 'error': 'Invalid subscription'}), 400
+        
+        username = session['username']
+        success = pn.save_push_subscription(username, subscription)
+        
+        if success:
+            app.logger.info(f'Push subscription saved for {username}')
+            return jsonify({
+                'success': True,
+                'message': 'Successfully subscribed to push notifications'
+            })
+        else:
+            return jsonify({'success': False, 'error': 'Failed to save subscription'}), 500
+            
+    except Exception as e:
+        app.logger.error(f'Error subscribing to push: {e}')
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@app.route('/api/push/unsubscribe', methods=['POST'])
+def unsubscribe_from_push():
+    """
+    Unsubscribe a user from push notifications
+    
+    Expects JSON payload:
+    {
+        'endpoint': '...'
+    }
+    """
+    if 'username' not in session:
+        return jsonify({'success': False, 'error': 'Not authenticated'}), 401
+    
+    try:
+        data = request.get_json() or {}
+        endpoint = data.get('endpoint')
+        
+        if not endpoint:
+            return jsonify({'success': False, 'error': 'Missing endpoint'}), 400
+        
+        username = session['username']
+        success = pn.remove_push_subscription(username, endpoint)
+        
+        if success:
+            app.logger.info(f'Push subscription removed for {username}')
+            return jsonify({
+                'success': True,
+                'message': 'Successfully unsubscribed from push notifications'
+            })
+        else:
+            return jsonify({'success': False, 'error': 'Subscription not found'}), 404
+            
+    except Exception as e:
+        app.logger.error(f'Error unsubscribing from push: {e}')
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@app.route('/api/push/subscriptions', methods=['GET'])
+def get_push_subscriptions():
+    """
+    Get all push subscriptions for the current user
+    """
+    if 'username' not in session:
+        return jsonify({'success': False, 'error': 'Not authenticated'}), 401
+    
+    try:
+        username = session['username']
+        subscriptions = pn.get_user_subscriptions(username)
+        
+        # Convert ObjectIds to strings for JSON serialization
+        subs_data = []
+        for sub in subscriptions:
+            subs_data.append({
+                'id': str(sub['_id']),
+                'endpoint': sub.get('Endpoint', ''),
+                'created_at': sub.get('CreatedAt', '').isoformat() if sub.get('CreatedAt') else '',
+                'last_used': sub.get('LastUsed', '').isoformat() if sub.get('LastUsed') else '',
+                'user_agent': sub.get('UserAgent', ''),
+            })
+        
+        return jsonify({
+            'success': True,
+            'subscriptions': subs_data,
+            'count': len(subs_data)
+        })
+        
+    except Exception as e:
+        app.logger.error(f'Error getting push subscriptions: {e}')
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@app.route('/api/push/vapid-key', methods=['GET'])
+def get_vapid_key():
+    """
+    Get the VAPID public key for push notifications
+    Used by the service worker to communicate with push service
+    """
+    try:
+        vapid_key = pn.VAPID_PUBLIC_KEY
+        if not vapid_key:
+            app.logger.warning('VAPID_PUBLIC_KEY not configured')
+            return jsonify({
+                'success': False,
+                'error': 'Push notifications not configured on server'
+            }), 501
+        
+        return jsonify({
+            'success': True,
+            'vapid_key': vapid_key
+        })
+        
+    except Exception as e:
+        app.logger.error(f'Error getting VAPID key: {e}')
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@app.route('/api/push/test', methods=['POST'])
+def test_push_notification():
+    """
+    Send a test push notification (admin only)
+    """
+    if 'username' not in session:
+        return jsonify({'success': False, 'error': 'Not authenticated'}), 401
+    
+    if not us.is_admin(session['username']):
+        return jsonify({'success': False, 'error': 'Admin access required'}), 403
+    
+    try:
+        data = request.get_json() or {}
+        target_user = data.get('target_user', session['username'])
+        
+        sent = pn.send_push_notification(
+            target_user,
+            'Test Benachrichtigung',
+            'Dies ist eine Test-Benachrichtigung von Inventarsystem',
+            url='/',
+            tag='test-notification'
+        )
+        
+        if sent > 0:
+            return jsonify({
+                'success': True,
+                'message': f'Test push sent to {sent} subscription(s)'
+            })
+        else:
+            return jsonify({
+                'success': False,
+                'error': 'No active subscriptions for user'
+            }), 404
+            
+    except Exception as e:
+        app.logger.error(f'Error sending test push: {e}')
+        return jsonify({'success': False, 'error': str(e)}), 500

Web/ausleihung.py

@@ -71,6 +71,10 @@ def get_current_status(ausleihung, log_changes=False, user=None):
     # Bei stornierten Ausleihungen bleibt der Status immer storniert
     if original_status == 'cancelled':
         return 'cancelled'
+        
+    # Wenn die Ausleihung bereits abgeschlossen ist, bleibt sie es
+    if original_status == 'completed':
+        return 'completed'
     
     current_time = datetime.datetime.now()
     start_time = ausleihung.get('Start')
@@ -79,12 +83,13 @@ def get_current_status(ausleihung, log_changes=False, user=None):
     # Wenn kein Startdatum vorhanden ist, Status auf 'planned' setzen
     if not start_time:
         new_status = 'planned'
-    # Wenn die Ausleihung als 'completed' markiert wurde und ein Enddatum hat,
-    # bleibt sie bei 'completed'
-    elif original_status == 'completed' and end_time:
-        new_status = 'completed'
     # Wenn die aktuelle Zeit vor dem Startdatum liegt, ist die Ausleihung geplant
     elif current_time < start_time:
+        # DEBUG: Log info wenn Booking noch lange in der Zukunft ist
+        time_until_start = (start_time - current_time).total_seconds()
+        if time_until_start > 3600:  # Mehr als 1 Stunde entfernt
+            ausleihung_id = str(ausleihung.get('_id', 'unknown'))[:12]
+            print(f"[DEBUG] Ausleihe {ausleihung_id} startet in {time_until_start/3600:.1f} Stunden ({start_time}), noch geplant")
         new_status = 'planned'
     # Wenn kein Enddatum gesetzt ist oder die aktuelle Zeit vor dem Enddatum liegt,
     # ist die Ausleihung aktiv

Web/flask.log

@@ -0,0 +1 @@
+[2026-04-19 20:20:39,502] ERROR in app: Error during scheduler shutdown: name '__file__' is not defined

Web/items.py

@@ -287,15 +287,17 @@ def update_item_status(id, verfuegbar, user=None):
             'LastUpdated': datetime.datetime.now()
         }
 
+        update_query = {'$set': update_data}
+
         if user is not None:
             update_data['User'] = user
         elif verfuegbar:
             # If item is being marked as available, clear the user field
-            update_data['$unset'] = {'User': ""}
+            update_query['$unset'] = {'User': ""}
 
         result = items.update_one(
             {'_id': ObjectId(id)},
-            {'$set': update_data}
+            update_query
         )
 
         client.close()

Web/push_notifications.py

@@ -0,0 +1,450 @@
+"""
+Push Notification Management System
+Handles Web Push notifications for users via Service Workers
+"""
+
+import os
+import json
+import datetime
+from pymongo import MongoClient
+from bson import ObjectId
+import requests
+import hashlib
+import logging
+
+import settings as cfg
+
+logger = logging.getLogger(__name__)
+
+# VAPID keys for push notifications
+VAPID_PUBLIC_KEY = os.getenv('VAPID_PUBLIC_KEY', '')
+VAPID_PRIVATE_KEY = os.getenv('VAPID_PRIVATE_KEY', '')
+VAPID_SUBJECT = os.getenv('VAPID_SUBJECT', f'mailto:admin@{os.getenv("SERVER_NAME", "localhost")}')
+
+VAPID_PRIVATE_PEM = os.path.join(os.path.dirname(__file__), 'vapid_private.pem')
+VAPID_PUBLIC_PEM = os.path.join(os.path.dirname(__file__), 'vapid_public.pem')
+
+# Auto-generate VAPID keys if none are provided
+if not VAPID_PUBLIC_KEY or not VAPID_PRIVATE_KEY:
+    try:
+        from py_vapid import Vapid, b64urlencode
+        from cryptography.hazmat.primitives import serialization
+        
+        vapid = Vapid()
+        if not os.path.exists(VAPID_PRIVATE_PEM):
+            vapid.generate_keys()
+            vapid.save_key(VAPID_PRIVATE_PEM)
+            vapid.save_public_key(VAPID_PUBLIC_PEM)
+            logger.info("Auto-generated new VAPID keys")
+        else:
+            vapid = Vapid.from_file(VAPID_PRIVATE_PEM)
+            
+        raw_pub = vapid.public_key.public_bytes(
+            serialization.Encoding.X962,
+            serialization.PublicFormat.UncompressedPoint
+        )
+        
+        VAPID_PUBLIC_KEY = b64urlencode(raw_pub)
+        VAPID_PRIVATE_KEY = VAPID_PRIVATE_PEM
+    except Exception as e:
+        logger.error(f'Could not load or generate VAPID keys: {e}')
+
+# Push service endpoint (typically Firebase or Web Push Service)
+PUSH_SERVICE_URL = 'https://fcm.googleapis.com/fcm/send'  # Firebase Cloud Messaging
+FCM_API_KEY = os.getenv('FCM_API_KEY', '')  # Firebase API key
+
+
+def get_push_subscriptions_collection(db=None):
+    """Get MongoDB push subscriptions collection"""
+    if db is None:
+        client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+        db = client[cfg.MONGODB_DB]
+    return db['push_subscriptions']
+
+
+def get_user_subscriptions(username):
+    """
+    Get all active push subscriptions for a user
+    
+    Args:
+        username (str): Username
+        
+    Returns:
+        list: List of subscription documents
+    """
+    try:
+        client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+        db = client[cfg.MONGODB_DB]
+        subs_col = get_push_subscriptions_collection(db)
+        
+        subscriptions = list(subs_col.find({
+            'Username': username,
+            'IsActive': True
+        }))
+        
+        client.close()
+        return subscriptions
+    except Exception as e:
+        logger.error(f'Error getting push subscriptions for {username}: {e}')
+        return []
+
+
+def save_push_subscription(username, subscription_obj):
+    """
+    Save a new push subscription for a user
+    
+    Args:
+        username (str): Username
+        subscription_obj (dict): Subscription object from Service Worker
+        {
+            'endpoint': 'https://...',
+            'keys': {
+                'p256dh': '...',
+                'auth': '...'
+            }
+        }
+        
+    Returns:
+        bool: Success status
+    """
+    try:
+        if not subscription_obj.get('endpoint'):
+            logger.warning(f'Invalid subscription object for {username}')
+            return False
+        
+        client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+        db = client[cfg.MONGODB_DB]
+        subs_col = get_push_subscriptions_collection(db)
+        
+        # Create unique hash of subscription to avoid duplicates
+        sub_hash = hashlib.md5(
+            f"{username}:{subscription_obj['endpoint']}".encode()
+        ).hexdigest()
+        
+        # Check if subscription already exists
+        existing = subs_col.find_one({
+            'Username': username,
+            'SubscriptionHash': sub_hash
+        })
+        
+        if existing:
+            # Update last used time
+            subs_col.update_one(
+                {'_id': existing['_id']},
+                {'$set': {
+                    'LastUsed': datetime.datetime.now(),
+                    'IsActive': True
+                }}
+            )
+            logger.info(f'Updated existing subscription for {username}')
+            client.close()
+            return True
+        
+        # Save new subscription
+        subscription_doc = {
+            'Username': username,
+            'Endpoint': subscription_obj['endpoint'],
+            'Keys': subscription_obj.get('keys', {}),
+            'SubscriptionHash': sub_hash,
+            'IsActive': True,
+            'CreatedAt': datetime.datetime.now(),
+            'LastUsed': datetime.datetime.now(),
+            'UserAgent': subscription_obj.get('userAgent', ''),
+        }
+        
+        subs_col.insert_one(subscription_doc)
+        logger.info(f'Saved new push subscription for {username}')
+        client.close()
+        return True
+        
+    except Exception as e:
+        logger.error(f'Error saving push subscription for {username}: {e}')
+        return False
+
+
+def remove_push_subscription(username, endpoint):
+    """
+    Remove a push subscription
+    
+    Args:
+        username (str): Username
+        endpoint (str): Subscription endpoint URL
+        
+    Returns:
+        bool: Success status
+    """
+    try:
+        client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+        db = client[cfg.MONGODB_DB]
+        subs_col = get_push_subscriptions_collection(db)
+        
+        result = subs_col.update_one(
+            {
+                'Username': username,
+                'Endpoint': endpoint
+            },
+            {'$set': {'IsActive': False}}
+        )
+        
+        client.close()
+        return result.modified_count > 0
+        
+    except Exception as e:
+        logger.error(f'Error removing push subscription for {username}: {e}')
+        return False
+
+
+def send_push_notification(username, title, body, icon=None, url='/', reference=None, tag='notification'):
+    """
+    Send a push notification to all user's subscriptions
+    
+    Args:
+        username (str): Target username
+        title (str): Notification title
+        body (str): Notification body
+        icon (str, optional): Icon URL
+        url (str, optional): URL to open on click
+        reference (dict, optional): Reference data (item_id, etc)
+        tag (str, optional): Notification tag for grouping
+        
+    Returns:
+        int: Number of successfully sent notifications
+    """
+    try:
+        subscriptions = get_user_subscriptions(username)
+        
+        if not subscriptions:
+            logger.debug(f'No active push subscriptions for {username}')
+            return 0
+        
+        sent_count = 0
+        
+        for subscription in subscriptions:
+            success = _send_to_subscription(
+                subscription,
+                title,
+                body,
+                icon,
+                url,
+                reference,
+                tag
+            )
+            if success:
+                sent_count += 1
+            else:
+                # Mark subscription as inactive if send fails
+                _mark_subscription_inactive(subscription['_id'])
+        
+        logger.info(f'Sent push notification to {username}: {sent_count}/{len(subscriptions)} subscriptions')
+        return sent_count
+        
+    except Exception as e:
+        logger.error(f'Error sending push notification to {username}: {e}')
+        return 0
+
+
+def _send_to_subscription(subscription, title, body, icon, url, reference, tag):
+    """Send push notification to a specific subscription"""
+    try:
+        payload = {
+            'title': title,
+            'body': body,
+            'icon': icon or '/static/img/logo-192x192.png',
+            'badge': '/static/img/badge-72x72.png',
+            'tag': tag,
+            'url': url,
+            'reference': reference or {},
+        }
+        
+        # If using Firebase Cloud Messaging
+        if FCM_API_KEY and subscription.get('Endpoint', '').startswith('https://fcm.'):
+            return _send_fcm_notification(subscription, payload)
+        
+        # Otherwise use standard Web Push Protocol
+        return _send_web_push_notification(subscription, payload)
+        
+    except Exception as e:
+        logger.error(f'Error sending to subscription {subscription.get("_id")}: {e}')
+        return False
+
+
+def _send_fcm_notification(subscription, payload):
+    """Send notification via Firebase Cloud Messaging"""
+    try:
+        if not FCM_API_KEY:
+            logger.warning('FCM_API_KEY not configured')
+            return False
+        
+        fcm_payload = {
+            'to': subscription['Endpoint'],
+            'notification': {
+                'title': payload['title'],
+                'body': payload['body'],
+                'icon': payload['icon'],
+                'badge': payload['badge'],
+                'tag': payload['tag'],
+                'click_action': payload['url'],
+            },
+            'data': {
+                'url': payload['url'],
+                'type': payload.get('type', 'info'),
+            }
+        }
+        
+        headers = {
+            'Authorization': f'key={FCM_API_KEY}',
+            'Content-Type': 'application/json'
+        }
+        
+        response = requests.post(
+            'https://fcm.googleapis.com/fcm/send',
+            json=fcm_payload,
+            headers=headers,
+            timeout=10
+        )
+        
+        return response.status_code == 200
+        
+    except Exception as e:
+        logger.error(f'FCM notification error: {e}')
+        return False
+
+
+def _send_web_push_notification(subscription, payload):
+    """Send notification using standard Web Push Protocol"""
+    try:
+        # This requires pywebpush library
+        from pywebpush import webpush
+        
+        webpush(
+            subscription_info={
+                'endpoint': subscription['Endpoint'],
+                'keys': subscription.get('Keys', {})
+            },
+            data=json.dumps(payload),
+            vapid_private_key=VAPID_PRIVATE_KEY,
+            vapid_claims={'sub': VAPID_SUBJECT},
+            timeout=10,
+            ttl=3600  # Notification expires after 1 hour if device is offline
+        )
+        
+        return True
+        
+    except ImportError:
+        logger.warning('pywebpush not installed, install with: pip install pywebpush')
+        return False
+    except Exception as e:
+        logger.error(f'Web push error: {e}')
+        return False
+
+
+def _mark_subscription_inactive(subscription_id):
+    """Mark a subscription as inactive (e.g., after failed send)"""
+    try:
+        client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+        db = client[cfg.MONGODB_DB]
+        subs_col = get_push_subscriptions_collection(db)
+        
+        subs_col.update_one(
+            {'_id': ObjectId(subscription_id)},
+            {'$set': {'IsActive': False}}
+        )
+        
+        client.close()
+    except Exception as e:
+        logger.error(f'Error marking subscription inactive: {e}')
+
+
+def send_push_to_all_admins(title, body, icon=None, url='/', reference=None):
+    """
+    Send a push notification to all admin users
+    
+    Args:
+        title (str): Notification title
+        body (str): Notification body
+        icon (str, optional): Icon URL
+        url (str, optional): URL to open on click
+        reference (dict, optional): Reference data
+        
+    Returns:
+        int: Total notifications sent
+    """
+    try:
+        client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+        db = client[cfg.MONGODB_DB]
+        users_col = db['users']
+        
+        # Get all admin users
+        admin_users = list(users_col.find(
+            {'Admin': True},
+            {'Username': 1}
+        ))
+        
+        client.close()
+        
+        total_sent = 0
+        for admin_doc in admin_users:
+            sent = send_push_notification(
+                admin_doc['Username'],
+                title,
+                body,
+                icon,
+                url,
+                reference,
+                tag='admin-notification'
+            )
+            total_sent += sent
+        
+        logger.info(f'Sent push to all admins: {total_sent} notifications')
+        return total_sent
+        
+    except Exception as e:
+        logger.error(f'Error sending push to admins: {e}')
+        return 0
+
+
+def cleanup_inactive_subscriptions():
+    """
+    Remove inactive subscriptions older than 30 days
+    Run this periodically as a maintenance task
+    """
+    try:
+        client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+        db = client[cfg.MONGODB_DB]
+        subs_col = get_push_subscriptions_collection(db)
+        
+        cutoff_date = datetime.datetime.now() - datetime.timedelta(days=30)
+        
+        result = subs_col.delete_many({
+            'IsActive': False,
+            'LastUsed': {'$lt': cutoff_date}
+        })
+        
+        client.close()
+        logger.info(f'Cleaned up {result.deleted_count} inactive subscriptions')
+        return result.deleted_count
+        
+    except Exception as e:
+        logger.error(f'Error cleaning up subscriptions: {e}')
+        return 0
+
+
+# Database collection schema
+def ensure_push_subscriptions_collection():
+    """Ensure the push_subscriptions collection exists with proper indexes"""
+    try:
+        client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+        db = client[cfg.MONGODB_DB]
+        subs_col = get_push_subscriptions_collection(db)
+        
+        # Create indexes
+        subs_col.create_index('Username')
+        subs_col.create_index([('Username', 1), ('IsActive', 1)])
+        subs_col.create_index([('CreatedAt', 1)])  # TTL-like usage
+        subs_col.create_index('SubscriptionHash', unique=True)
+        
+        logger.info('Push subscriptions collection indexes created')
+        client.close()
+        
+    except Exception as e:
+        logger.error(f'Error ensuring push subscriptions collection: {e}')

Web/requirements.txt

@@ -13,4 +13,5 @@ redis
 reportlab
 python-barcode
 openpyxl
-cryptography
+cryptography
+pywebpush

Web/static/css/styles.css

@@ -21,6 +21,28 @@
     --ui-radius: 12px;
 }
 
+:root[data-theme="dark"] {
+    --ui-bg: #0f172a;
+    --ui-bg-accent: #1e293b;
+    --ui-surface: #1e293b;
+    --ui-surface-soft: #25314a;
+    --ui-border: #334155;
+    --ui-text: #f1f5f9;
+    --ui-text-muted: #94a3b8;
+    --ui-title: #ffffff;
+    --ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
+    --ui-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.5);
+}
+
+/* Make inputs visible in dark mode */
+:root[data-theme="dark"] input, 
+:root[data-theme="dark"] select, 
+:root[data-theme="dark"] textarea {
+    background-color: var(--ui-surface-soft) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+}
+
 body {
     font-family: "Manrope", "Segoe UI", "Noto Sans", sans-serif;
     color: var(--ui-text);
@@ -92,7 +114,7 @@ span {
 .card-header,
 .modal-header,
 thead th {
-    background: linear-gradient(180deg, #f7fafd, #edf3f8) !important;
+    background: var(--ui-surface-soft) !important;
     border-bottom: 1px solid var(--ui-border) !important;
     color: var(--ui-title) !important;
 }
@@ -107,10 +129,10 @@ input[type="email"],
 input[type="date"],
 select {
     border-radius: 10px !important;
-    border: 1px solid #cad5e0 !important;
+    border: 1px solid var(--ui-border) !important;
     min-height: 40px;
     color: var(--ui-text) !important;
-    background-color: #fff !important;
+    background-color: var(--ui-surface) !important;
     transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
@@ -131,11 +153,13 @@ select:focus {
 .table th,
 .table td {
     vertical-align: middle;
-    border-color: #dee6ee !important;
+    border-color: var(--ui-border) !important;
+    background-color: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
 }
 
 .table-striped > tbody > tr:nth-of-type(odd) {
-    background-color: #f8fbff;
+    background-color: var(--ui-surface-soft) !important;
 }
 
 .alert {
@@ -144,8 +168,10 @@ select:focus {
 }
 
 .navbar {
-    border-bottom: 1px solid #273341;
+    border-bottom: 1px solid var(--ui-border);
     box-shadow: none;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
 }
 
 .navbar-brand {
@@ -164,21 +190,13 @@ select:focus {
     }
 }
 
-/* Edit and generate buttons with black text for better visibility */
-.edit-button {
-    color: black !important; /* Override any existing color */
-}
-
-.duplicate-button {
-    color: black !important; /* Override any existing color */
-}
-
-.generate-qr-button {
-    color: black !important; /* Override any existing color */
+/* Edit and generate buttons with theme-aware text for better visibility */
+.edit-button, .duplicate-button, .generate-qr-button {
+    color: var(--ui-text) !important; /* Override any existing color */
 }
 
 .ausleihen {
-    color: black !important; /* Override any existing color */
+    /* Color handled securely below */
 }
 
 /* Modal image display fix */
@@ -245,12 +263,12 @@ select:focus {
 .view-toggle-btn {
     width: 38px;
     height: 38px;
-    border: 1px solid #c7ced6;
+    border: 1px solid var(--ui-border);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ui-surface);
     font-size: 1.15rem;
     cursor: pointer;
-    color: #2f3e4e;
+    color: var(--ui-text);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -259,8 +277,8 @@ select:focus {
 
 .view-toggle-btn:hover {
     transform: translateY(-1px);
-    border-color: #8fa2b7;
-    background: #f8fbff;
+    border-color: var(--ui-border);
+    background: var(--ui-surface-soft);
     box-shadow: 0 3px 8px rgba(33, 37, 41, 0.12);
 }
 
@@ -269,9 +287,9 @@ select:focus {
 }
 
 .view-toggle-btn[aria-pressed='true'] {
-    background: #e9f2ff;
-    border-color: #7ea1c8;
-    color: #1f4f7a;
+    background: var(--module-primary-color);
+    border-color: var(--module-primary-color);
+    color: white;
 }
 
 .table-view-header {
@@ -288,7 +306,7 @@ body.table-view .table-view-header {
     border: 0;
     border-radius: 10px;
     background: transparent;
-    color: #3f4e5d;
+    color: var(--ui-text-muted);
     font-size: 0.82rem;
     font-weight: 700;
     text-transform: uppercase;
@@ -307,9 +325,9 @@ body.table-view .item-card {
     max-width: none;
     margin: 0 0 10px 0;
     padding: 12px 14px;
-    border: 1px solid #e1e6ed;
+    border: 1px solid var(--ui-border);
     border-radius: 10px;
-    background: #ffffff;
+    background: var(--ui-surface);
     box-shadow: none;
     scroll-snap-align: none;
 }
@@ -335,7 +353,7 @@ body.table-view .item-card .card-content .item-name-cell,
 body.table-view .item-card .card-content .item-col-name {
     font-size: 0.98rem;
     font-weight: 700;
-    color: #1f2d3d;
+    color: var(--ui-title);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -352,7 +370,7 @@ body.table-view .item-card .card-content .item-col-filter3,
 body.table-view .item-card .card-content .item-code-cell,
 body.table-view .item-card .card-content .item-col-code,
 body.table-view .item-card .card-content .item-col-count {
-    color: #445465;
+    color: var(--ui-text-muted);
     font-size: 0.9rem;
     white-space: nowrap;
     overflow: hidden;
@@ -369,7 +387,7 @@ body.table-view .item-card .damage-badge {
 body.table-view .item-card .actions {
     margin-top: 10px;
     padding-top: 10px;
-    border-top: 1px dashed #d9e0e8;
+    border-top: 1px dashed var(--ui-border);
 }
 
 @media (max-width: 900px) {
@@ -805,4 +823,17 @@ body.table-view .item-card .actions {
         padding: 7px 12px !important;
         font-size: 0.84rem !important;
     }
-}
+}
+/* iOS and Mobile optimization fixes */
+html, body {
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+}
+.scrollable-container, .items-container {
+    -webkit-overflow-scrolling: touch;
+}
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+    .fixed-bottom, .modal-footer {
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+}

Web/static/js/push-notifications.js

@@ -0,0 +1,470 @@
+/**
+ * Push Notification Management
+ * Handles subscription, unsubscription, and UI updates for web push notifications
+ */
+
+class PushNotificationManager {
+    constructor() {
+        this.serviceWorkerRegistration = null;
+        this.vapidKey = null;
+        this.isSupported = this.checkSupport();
+    }
+
+    /**
+     * Check if push notifications are supported
+     */
+    checkSupport() {
+        return (
+            'serviceWorker' in navigator &&
+            'PushManager' in window &&
+            'Notification' in window
+        );
+    }
+
+    /**
+     * Initialize push notification system
+     * Must be called after page load
+     */
+    async init() {
+        if (!this.isSupported) {
+            console.log('Push notifications not supported in this browser');
+            return false;
+        }
+
+        try {
+            // Get service worker registration
+            const registrations = await navigator.serviceWorker.getRegistrations();
+            this.serviceWorkerRegistration = registrations.find(
+                reg => reg.scope === window.location.origin + '/'
+            );
+
+            if (!this.serviceWorkerRegistration) {
+                console.warn('Service Worker not found, retrying...');
+                // Try registering if not already done
+                try {
+                    this.serviceWorkerRegistration = await navigator.serviceWorker.register('/static/service-worker.js');
+                } catch (err) {
+                    console.error('Failed to register Service Worker:', err);
+                    return false;
+                }
+            }
+
+            // Fetch VAPID public key from server
+            const keyResponse = await fetch('/api/push/vapid-key');
+            if (keyResponse.ok) {
+                const keyData = await keyResponse.json();
+                this.vapidKey = keyData.vapid_key;
+            } else {
+                console.warn('Failed to fetch VAPID key');
+                return false;
+            }
+
+            return true;
+        } catch (error) {
+            console.error('Failed to initialize push notifications:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Request notification permission from user
+     */
+    async requestPermission() {
+        if (!this.isSupported) {
+            console.warn('Push notifications not supported');
+            return false;
+        }
+
+        if (Notification.permission === 'granted') {
+            console.log('Push notifications already permitted');
+            return true;
+        }
+
+        if (Notification.permission === 'denied') {
+            console.warn('Push notifications have been denied by user');
+            return false;
+        }
+
+        try {
+            const permission = await Notification.requestPermission();
+            return permission === 'granted';
+        } catch (error) {
+            console.error('Error requesting notification permission:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Subscribe to push notifications
+     */
+    async subscribe() {
+        if (!this.isSupported) {
+            console.error('Push notifications not supported');
+            return false;
+        }
+
+        if (!this.serviceWorkerRegistration) {
+            console.error('Service Worker not initialized');
+            return false;
+        }
+
+        if (!this.vapidKey) {
+            console.error('VAPID key not available');
+            return false;
+        }
+
+        try {
+            // Check if already subscribed
+            const existingSubscription = await this.serviceWorkerRegistration.pushManager.getSubscription();
+            if (existingSubscription) {
+                console.log('Already subscribed to push notifications');
+                return await this.saveSubscriptionToServer(existingSubscription);
+            }
+
+            // Request permission if needed
+            const hasPermission = await this.requestPermission();
+            if (!hasPermission) {
+                console.warn('User denied notification permission');
+                return false;
+            }
+
+            // Subscribe to push service
+            const subscription = await this.serviceWorkerRegistration.pushManager.subscribe({
+                userVisibleOnly: true,
+                applicationServerKey: this.urlBase64ToUint8Array(this.vapidKey)
+            });
+
+            // Save subscription to server
+            return await this.saveSubscriptionToServer(subscription);
+        } catch (error) {
+            console.error('Failed to subscribe to push notifications:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Unsubscribe from push notifications
+     */
+    async unsubscribe() {
+        if (!this.serviceWorkerRegistration) {
+            console.error('Service Worker not initialized');
+            return false;
+        }
+
+        try {
+            const subscription = await this.serviceWorkerRegistration.pushManager.getSubscription();
+            if (!subscription) {
+                console.warn('No active push subscription');
+                return false;
+            }
+
+            // Remove subscription on server
+            const success = await this.removeSubscriptionFromServer(subscription);
+
+            // Unsubscribe from push service
+            if (success) {
+                await subscription.unsubscribe();
+                return true;
+            }
+
+            return false;
+        } catch (error) {
+            console.error('Failed to unsubscribe from push notifications:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Check if user is subscribed to push notifications
+     */
+    async isSubscribed() {
+        if (!this.serviceWorkerRegistration) {
+            return false;
+        }
+
+        try {
+            const subscription = await this.serviceWorkerRegistration.pushManager.getSubscription();
+            return subscription !== null;
+        } catch (error) {
+            console.error('Failed to check subscription status:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Save subscription to server
+     */
+    async saveSubscriptionToServer(subscription) {
+        try {
+            const response = await fetch('/api/push/subscribe', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    subscription: subscription.toJSON()
+                })
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                console.log('Subscription saved to server:', data.message);
+                return true;
+            } else {
+                const error = await response.json();
+                console.error('Failed to save subscription:', error.error);
+                return false;
+            }
+        } catch (error) {
+            console.error('Error communicating with server:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Remove subscription from server
+     */
+    async removeSubscriptionFromServer(subscription) {
+        try {
+            const response = await fetch('/api/push/unsubscribe', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    endpoint: subscription.endpoint
+                })
+            });
+
+            if (response.ok) {
+                console.log('Subscription removed from server');
+                return true;
+            } else {
+                const error = await response.json();
+                console.error('Failed to remove subscription:', error.error);
+                return false;
+            }
+        } catch (error) {
+            console.error('Error communicating with server:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Get all subscriptions for current user
+     */
+    async getSubscriptions() {
+        try {
+            const response = await fetch('/api/push/subscriptions');
+            if (response.ok) {
+                const data = await response.json();
+                return data.subscriptions || [];
+            }
+            return [];
+        } catch (error) {
+            console.error('Error fetching subscriptions:', error);
+            return [];
+        }
+    }
+
+    /**
+     * Send test notification (admin only)
+     */
+    async sendTestNotification(targetUser = null) {
+        try {
+            const response = await fetch('/api/push/test', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    target_user: targetUser
+                })
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                console.log('Test notification sent:', data.message);
+                return true;
+            } else {
+                const error = await response.json();
+                console.error('Failed to send test notification:', error.error);
+                return false;
+            }
+        } catch (error) {
+            console.error('Error sending test notification:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Convert VAPID key from base64 string to Uint8Array
+     * Required for subscribing to push service
+     */
+    urlBase64ToUint8Array(base64String) {
+        const padding = '='.repeat((4 - base64String.length % 4) % 4);
+        const base64 = (base64String + padding)
+            .replace(/\-/g, '+')
+            .replace(/_/g, '/');
+
+        const rawData = window.atob(base64);
+        const outputArray = new Uint8Array(rawData.length);
+
+        for (let i = 0; i < rawData.length; ++i) {
+            outputArray[i] = rawData.charCodeAt(i);
+        }
+
+        return outputArray;
+    }
+}
+
+// Create global instance
+const pushNotificationManager = new PushNotificationManager();
+
+/**
+ * Show notification subscription UI (typically in settings)
+ */
+function showPushNotificationSettings() {
+    const container = document.getElementById('push-notification-settings');
+    if (!container) return;
+
+    if (!pushNotificationManager.isSupported) {
+        container.innerHTML = '<p class="text-muted">Push-Benachrichtigungen werden in diesem Browser nicht unterstützt.</p>';
+        return;
+    }
+
+    const html = `
+        <div class="push-notification-settings">
+            <h5>Push-Benachrichtigungen</h5>
+            <p>Erhalten Sie Benachrichtigungen für wichtige Ereignisse direkt auf Ihrem Gerät.</p>
+            
+            <div id="push-status" style="margin: 15px 0;"></div>
+            
+            <button id="toggle-push-btn" class="btn btn-primary" style="margin-bottom: 10px;">
+                Benachrichtigungen aktivieren
+            </button>
+            
+            <div id="subscriptions-list" style="margin-top: 15px;"></div>
+        </div>
+    `;
+
+    container.innerHTML = html;
+
+    // Set up button handler
+    const toggleBtn = document.getElementById('toggle-push-btn');
+    pushNotificationManager.init().then(() => {
+        updatePushStatus();
+    });
+
+    toggleBtn.addEventListener('click', togglePushNotifications);
+}
+
+/**
+ * Update push notification status display
+ */
+async function updatePushStatus() {
+    const statusDiv = document.getElementById('push-status');
+    const toggleBtn = document.getElementById('toggle-push-btn');
+
+    if (!statusDiv || !toggleBtn) return;
+
+    const isSubscribed = await pushNotificationManager.isSubscribed();
+    const permission = Notification.permission;
+
+    let statusHtml = '<div class="alert alert-info">';
+
+    if (isSubscribed) {
+        statusHtml += '<strong>✓ Aktiv:</strong> Sie erhalten Push-Benachrichtigungen.';
+        toggleBtn.textContent = 'Benachrichtigungen deaktivieren';
+        toggleBtn.classList.remove('btn-primary');
+        toggleBtn.classList.add('btn-danger');
+    } else if (permission === 'denied') {
+        statusHtml += '<strong>✗ Blockiert:</strong> Benachrichtigungen wurden abgelehnt. Bitte überprüfen Sie Ihre Browser-Einstellungen.';
+        toggleBtn.disabled = true;
+        toggleBtn.textContent = 'Benachrichtigungen deaktiviert';
+    } else {
+        statusHtml += '<strong>○ Inaktiv:</strong> Sie erhalten derzeit keine Push-Benachrichtigungen.';
+        toggleBtn.textContent = 'Benachrichtigungen aktivieren';
+        toggleBtn.classList.add('btn-primary');
+        toggleBtn.classList.remove('btn-danger');
+    }
+
+    statusHtml += '</div>';
+    statusDiv.innerHTML = statusHtml;
+
+    // Show subscriptions list
+    const subscriptionsList = document.getElementById('subscriptions-list');
+    if (subscriptionsList && isSubscribed) {
+        const subs = await pushNotificationManager.getSubscriptions();
+        if (subs.length > 0) {
+            let subsHtml = '<h6>Aktive Abos:</h6><ul class="list-group">';
+            subs.forEach(sub => {
+                const endpoint = new URL(sub.endpoint);
+                subsHtml += `<li class="list-group-item"><small>${endpoint.hostname}</small><br><small class="text-muted">${sub.created_at}</small></li>`;
+            });
+            subsHtml += '</ul>';
+            subscriptionsList.innerHTML = subsHtml;
+        }
+    }
+}
+
+/**
+ * Toggle push notifications on/off
+ */
+async function togglePushNotifications() {
+    const isSubscribed = await pushNotificationManager.isSubscribed();
+
+    if (isSubscribed) {
+        // Unsubscribe
+        const success = await pushNotificationManager.unsubscribe();
+        if (success) {
+            showAlert('Benachrichtigungen deaktiviert', 'success');
+        } else {
+            showAlert('Fehler beim Deaktivieren der Benachrichtigungen', 'danger');
+        }
+    } else {
+        // Subscribe
+        const success = await pushNotificationManager.subscribe();
+        if (success) {
+            showAlert('Benachrichtigungen aktiviert!', 'success');
+        } else {
+            showAlert('Fehler beim Aktivieren der Benachrichtigungen', 'danger');
+        }
+    }
+
+    // Update status display
+    updatePushStatus();
+}
+
+/**
+ * Show an alert message
+ */
+function showAlert(message, type = 'info') {
+    // Try to show toast or alert
+    const alertDiv = document.createElement('div');
+    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
+    alertDiv.innerHTML = `
+        ${message}
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+
+    // Find a good place to show the alert
+    const container = document.querySelector('.container-fluid') || document.body;
+    const firstElement = container.firstChild;
+
+    if (firstElement) {
+        container.insertBefore(alertDiv, firstElement);
+    } else {
+        container.appendChild(alertDiv);
+    }
+
+    // Auto-dismiss after 5 seconds
+    setTimeout(() => {
+        alertDiv.remove();
+    }, 5000);
+}
+
+// Auto-initialize on page load
+document.addEventListener('DOMContentLoaded', async () => {
+    await pushNotificationManager.init();
+});

Web/static/manifest.json

@@ -0,0 +1,23 @@
+{
+  "name": "Ausleihsystem",
+  "short_name": "Ausleihe",
+  "description": "System zur Verwaltung von Ausleihen",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#1f2937",
+  "icons": [
+    {
+      "src": "/static/img/icon-192.png",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/static/img/icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any maskable"
+    }
+  ]
+}

Web/static/service-worker.js

@@ -0,0 +1,185 @@
+/**
+ * Service Worker for Web Push Notifications
+ * Handles incoming push events and displays notifications
+ */
+
+const CACHE_NAME = 'inventarsystem-v1';
+const ASSETS_TO_CACHE = [
+    '/',
+    '/static/css/styles.css',
+    '/static/js/scripts.js',
+    '/offline.html'
+];
+
+// Install event - cache assets
+self.addEventListener('install', (event) => {
+    console.log('[Service Worker] Installing...');
+    event.waitUntil(
+        caches.open(CACHE_NAME).then((cache) => {
+            return cache.addAll(ASSETS_TO_CACHE).catch((err) => {
+                console.warn('[Service Worker] Cache add error:', err);
+                // Don't fail the installation
+                return Promise.resolve();
+            });
+        })
+    );
+    self.skipWaiting();
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+    console.log('[Service Worker] Activating...');
+    event.waitUntil(
+        caches.keys().then((cacheNames) => {
+            return Promise.all(
+                cacheNames.map((cacheName) => {
+                    if (cacheName !== CACHE_NAME) {
+                        console.log('[Service Worker] Deleting old cache:', cacheName);
+                        return caches.delete(cacheName);
+                    }
+                })
+            );
+        })
+    );
+    self.clients.claim();
+});
+
+// Push event - handle incoming push notifications
+self.addEventListener('push', (event) => {
+    console.log('[Service Worker] Push notification received');
+    
+    let notificationData = {
+        title: 'Inventarsystem',
+        body: 'Neue Benachrichtigung',
+        icon: '/static/img/logo-192x192.png',
+        badge: '/static/img/badge-72x72.png',
+        tag: 'inventarsystem-notification',
+        requireInteraction: false,
+    };
+
+    // Parse the push event data if available
+    if (event.data) {
+        try {
+            const data = event.data.json();
+            notificationData = {
+                title: data.title || notificationData.title,
+                body: data.message || data.body || notificationData.body,
+                icon: data.icon || notificationData.icon,
+                badge: data.badge || notificationData.badge,
+                tag: data.tag || notificationData.tag,
+                requireInteraction: data.requireInteraction || false,
+                data: {
+                    url: data.url || '/',
+                    reference: data.reference || null,
+                    type: data.type || 'info',
+                },
+            };
+            console.log('[Service Worker] Push data parsed:', notificationData);
+        } catch (err) {
+            console.error('[Service Worker] Failed to parse push data:', err);
+            notificationData.body = event.data.text();
+        }
+    }
+
+    event.waitUntil(
+        self.registration.showNotification(notificationData.title, {
+            body: notificationData.body,
+            icon: notificationData.icon,
+            badge: notificationData.badge,
+            tag: notificationData.tag,
+            requireInteraction: notificationData.requireInteraction,
+            data: notificationData.data,
+            actions: [
+                {
+                    action: 'open',
+                    title: 'Öffnen',
+                    icon: '/static/img/open-icon.png'
+                },
+                {
+                    action: 'close',
+                    title: 'Schließen',
+                    icon: '/static/img/close-icon.png'
+                }
+            ],
+        })
+    );
+});
+
+// Notification click event - handle user clicks on notifications
+self.addEventListener('notificationclick', (event) => {
+    console.log('[Service Worker] Notification clicked:', event.action);
+    event.notification.close();
+
+    const urlToOpen = event.notification.data.url || '/';
+
+    event.waitUntil(
+        clients.matchAll({
+            type: 'window',
+            includeUncontrolled: true
+        }).then((windowClients) => {
+            // Check if the app is already open
+            for (let i = 0; i < windowClients.length; i++) {
+                const client = windowClients[i];
+                if (client.url === urlToOpen && 'focus' in client) {
+                    return client.focus();
+                }
+            }
+            // If not open, open a new window
+            if (clients.openWindow) {
+                return clients.openWindow(urlToOpen);
+            }
+        })
+    );
+});
+
+// Notification close event - track when users dismiss notifications
+self.addEventListener('notificationclose', (event) => {
+    console.log('[Service Worker] Notification closed');
+    // Could send analytics here
+});
+
+// Background fetch event (optional, for large data syncs)
+self.addEventListener('sync', (event) => {
+    console.log('[Service Worker] Background sync triggered:', event.tag);
+    if (event.tag === 'sync-notifications') {
+        event.waitUntil(
+            fetch('/api/notifications/sync').then((response) => {
+                console.log('[Service Worker] Notifications synced');
+            })
+        );
+    }
+});
+
+// Fetch event - serve cached content when offline
+self.addEventListener('fetch', (event) => {
+    // Skip non-GET requests
+    if (event.request.method !== 'GET') {
+        return;
+    }
+
+    // Skip API calls - always use network
+    if (event.request.url.includes('/api/')) {
+        return;
+    }
+
+    event.respondWith(
+        caches.match(event.request).then((response) => {
+            if (response) {
+                return response;
+            }
+            return fetch(event.request).then((response) => {
+                // Cache successful responses
+                if (response && response.status === 200) {
+                    const responseToCache = response.clone();
+                    caches.open(CACHE_NAME).then((cache) => {
+                        cache.put(event.request, responseToCache);
+                    });
+                }
+                return response;
+            }).catch(() => {
+                // Return offline page
+                return caches.match('/offline.html');
+            });
+        })
+    );
+});

Web/static/sw.js

@@ -0,0 +1,18 @@
+const CACHE_NAME = 'ausleihe-cache-v1';
+
+self.addEventListener('install', (event) => {
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(clients.claim());
+});
+
+self.addEventListener('fetch', (event) => {
+    // Einfacher Fallback aufs Netzwerk (Offline-Seite könnte hier ergänzt werden)
+    event.respondWith(
+        fetch(event.request).catch(() => {
+            return caches.match(event.request);
+        })
+    );
+});

Web/templates/admin_audit.html

@@ -11,7 +11,7 @@
   </div>
 
   <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:16px 0 20px;">
-    <div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff;">
+    <div 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>
@@ -19,15 +19,15 @@
       <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:#fff;">
+    <div 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:#fff;">
+    <div 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>
-    <div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff;">
+    <div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
       <div style="font-size:0.85rem; color:#64748b;">Mismatch Count</div>
       <div style="font-size:1.35rem; font-weight:700;">{{ verify_result.mismatches|length }}</div>
     </div>
@@ -61,7 +61,7 @@
   </div>
   {% endif %}
 
-  <div style="border:1px solid #e2e8f0; border-radius:10px; background:#fff; padding:12px;">
+  <div 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;">
       <table class="table" style="width:100%; border-collapse:collapse;">

Web/templates/admin_borrowings.html

@@ -161,7 +161,7 @@
 </div>
 
 <div id="invoice-modal" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.72); z-index:9999; padding:20px; overflow:auto;">
-  <div style="max-width:760px; margin:40px auto; background:#fff; border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
+  <div style="max-width:760px; margin:40px auto; background: var(--ui-surface); border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
     <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px;">
       <div>
         <h2 style="margin:0;">Rechnung erstellen</h2>
@@ -174,15 +174,15 @@
       <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-bottom:16px;">
         <div>
           <label for="invoice-item" style="display:block; font-weight:700; margin-bottom:6px;">Element</label>
-          <input id="invoice-item" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
+          <input id="invoice-item" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background: var(--ui-surface-soft);">
         </div>
         <div>
           <label for="invoice-borrower" style="display:block; font-weight:700; margin-bottom:6px;">Schüler</label>
-          <input id="invoice-borrower" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
+          <input id="invoice-borrower" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background: var(--ui-surface-soft);">
         </div>
         <div>
           <label for="invoice-code" style="display:block; font-weight:700; margin-bottom:6px;">Element-ID / Code</label>
-          <input id="invoice-code" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
+          <input id="invoice-code" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background: var(--ui-surface-soft);">
         </div>
         <div>
           <label for="invoice-amount" style="display:block; font-weight:700; margin-bottom:6px;">Preis</label>

Web/templates/admin_damaged_items.html

@@ -17,14 +17,14 @@
     </div>
   </div>
 
-  <div style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:14px; margin-bottom:12px;">
+  <div style="background: var(--ui-surface); border:1px solid #e2e8f0; border-radius:14px; padding:14px; margin-bottom:12px;">
     <input id="damage-search" type="text" placeholder="Suche nach Name, Code, Typ, Benutzer oder Schaden..." style="width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px;">
   </div>
 
-  <div style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:0; overflow:hidden;">
+  <div style="background: var(--ui-surface); border:1px solid #e2e8f0; border-radius:14px; padding:0; overflow:hidden;">
     <table id="damage-table" style="width:100%; border-collapse:collapse;">
       <thead>
-        <tr style="background:#f8fafc;">
+        <tr style="background: var(--ui-surface-soft);">
           <th style="text-align:left; padding:11px; border-bottom:1px solid #e5e7eb;">Item</th>
           <th style="text-align:left; padding:11px; border-bottom:1px solid #e5e7eb;">Status</th>
           <th style="text-align:left; padding:11px; border-bottom:1px solid #e5e7eb;">Letzte Meldung</th>

Web/templates/base.html

@@ -10,10 +10,24 @@
 <html lang="de" data-module="{{ CURRENT_MODULE }}">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="theme-color" content="#2c3e50" id="meta-theme-color">
+    <script>
+        // Init theme early to prevent FOUC (Flash of Unstyled Content)
+        (function() {
+            var theme = localStorage.getItem('inventarsystem-theme');
+            if (theme === 'dark' || (!theme && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.setAttribute('data-theme', 'dark');
+                document.getElementById('meta-theme-color').setAttribute('content', '#1a252f');
+            } else {
+                document.documentElement.setAttribute('data-theme', 'light');
+                document.getElementById('meta-theme-color').setAttribute('content', '#2c3e50');
+            }
+        })();
+    </script>
     <meta name="csrf-token" content="{{ csrf_token }}">
     <title>{% block title %}Inventarsystem{% endblock %}</title>
     {% block head %}
@@ -24,6 +38,7 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css', v=ASSET_VERSION) }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/planned_appointments.css', v=ASSET_VERSION) }}">
     <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
+    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         (function () {
@@ -101,6 +116,9 @@
             --module-accent-color: #3498db;
             --module-accent-light: rgba(52, 152, 219, 0.1);
             --module-brand-icon: "📦";
+            --page-bg-gradient: linear-gradient(180deg, #f2f5f8, #e7edf4);
+            --page-bg-overlay1: rgba(86, 145, 200, 0.08);
+            --page-bg-overlay2: rgba(52, 98, 150, 0.09);
         }
 
         html[data-module="library"] {
@@ -111,17 +129,34 @@
             --module-brand-icon: "📚";
         }
 
+        :root[data-theme="dark"] {
+            --module-primary-color: #1a252f;
+            --module-primary-light: #2c3e50;
+            --module-accent-color: #2980b9;
+            --module-brand-icon: "📦";
+            --page-bg-gradient: linear-gradient(180deg, #0f172a, #1e293b);
+            --page-bg-overlay1: rgba(56, 189, 248, 0.05);
+            --page-bg-overlay2: rgba(59, 130, 246, 0.06);
+        }
+        
+        html[data-theme="dark"][data-module="library"] {
+            --module-primary-color: #4a354d;
+            --module-primary-light: #614666;
+            --module-accent-color: #8e44ad;
+        }
+
         /* Global styles */
         body {
             font-family: "Manrope", "Segoe UI", "Noto Sans", sans-serif;
             background:
-                radial-gradient(1200px 500px at 10% -10%, rgba(86, 145, 200, 0.08), transparent 55%),
-                radial-gradient(900px 420px at 95% 0%, rgba(52, 98, 150, 0.09), transparent 52%),
-                linear-gradient(180deg, #f2f5f8, #e7edf4);
+                radial-gradient(1200px 500px at 10% -10%, var(--page-bg-overlay1), transparent 55%),
+                radial-gradient(900px 420px at 95% 0%, var(--page-bg-overlay2), transparent 52%),
+                var(--page-bg-gradient);
             margin: 0;
             padding: 0;
-            padding-bottom: 30px;
-            color: #1f2d3d;
+            padding-bottom: auto; /* Fallback for dynamic calculation */
+            padding-bottom: env(safe-area-inset-bottom, 30px);
+            color: var(--ui-text, #1f2d3d);
         }
         
         .container {
@@ -134,11 +169,13 @@
             background-color: var(--module-primary-color) !important;
             position: sticky;
             top: 0;
+            padding-top: env(safe-area-inset-top, 0); /* iOS Safe Area */
             z-index: 1900;
         }
 
         .navbar .container-fluid {
             gap: 10px;
+            padding-bottom: env(safe-area-inset-bottom, 0); /* Fallback */
         }
         
         .navbar-brand {
@@ -350,18 +387,19 @@
         
         /* Dropdown menus - consistent with system design */
         .dropdown-menu {
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            border: 1px solid #dee2e6;
+            box-shadow: var(--ui-shadow-md);
+            border: 1px solid var(--ui-border);
             border-radius: 8px;
             padding: 8px 0;
             min-width: 200px;
             margin-top: 5px;
+            background-color: var(--ui-surface);
         }
         
         .dropdown-item {
             padding: 10px 16px;
             font-size: 0.9rem;
-            color: #495057;
+            color: var(--ui-text);
             transition: all 0.2s ease;
             border: none;
             background: none;
@@ -369,8 +407,8 @@
         
         .dropdown-item:hover,
         .dropdown-item:focus {
-            background-color: #f8f9fa;
-            color: #007bff;
+            background-color: var(--ui-surface-soft);
+            color: var(--module-accent-color);
             transform: translateX(2px);
         }
         
@@ -433,12 +471,16 @@
             }
             
             .nav-item.dropdown .dropdown-toggle {
-                padding: 8px 12px;
+                padding: 12px 12px;
+                min-height: 48px;
             }
 
             .navbar-toggler {
-                padding: 0.5rem 0.65rem;
+                padding: 0.6rem 0.8rem;
                 border-width: 2px;
+                min-height: 48px;
+                min-width: 48px;
+                margin-top: 4px;
             }
 
             .function-search-wrap {
@@ -464,7 +506,7 @@
             
             /* Account dropdown stays light theme on mobile */
             .dropdown-menu-end {
-                background-color: #ffffff;
+                background-color: var(--ui-surface);
                 border: 1px solid #dee2e6;
             }
             
@@ -473,7 +515,7 @@
             }
             
             .dropdown-menu-end .dropdown-item:hover {
-                background-color: #f8f9fa;
+                background-color: var(--ui-surface-soft);
                 color: #007bff;
             }
         }
@@ -572,17 +614,38 @@
                 margin-left: auto;
                 flex: 0 0 auto;
                 align-self: flex-start;
+                min-width: 48px;
+                min-height: 48px;
+                border: none;
+                background: rgba(255, 255, 255, 0.1);
+                border-radius: 10px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: background 0.2s ease;
+            }
+            
+            .navbar-toggler:active,
+            .navbar-toggler:focus {
+                background: rgba(255, 255, 255, 0.2);
+                box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
             }
 
             .navbar-collapse {
                 order: 4;
                 width: 100%;
-                margin-top: 8px;
-                padding: 10px 10px 6px;
-                border-radius: 14px;
-                background: rgba(15, 23, 42, 0.18);
-                backdrop-filter: blur(10px);
-                -webkit-backdrop-filter: blur(10px);
+                margin-top: 12px;
+                padding: 12px;
+                border-radius: 16px;
+                background: rgba(15, 23, 42, 0.85);
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+                border: 1px solid rgba(255, 255, 255, 0.1);
+                backdrop-filter: blur(16px);
+                -webkit-backdrop-filter: blur(16px);
+                max-height: calc(100vh - 90px); /* fallback */
+                max-height: calc(100dvh - 90px);
+                overflow-y: auto;
+                -webkit-overflow-scrolling: touch;
             }
 
             .navbar-collapse.show,
@@ -594,7 +657,7 @@
                 width: 100%;
                 align-items: stretch;
                 gap: 8px;
-                padding-top: 2px;
+                padding-top: 4px;
             }
 
             .navbar-nav .nav-item {
@@ -604,11 +667,12 @@
             .navbar-nav .nav-link {
                 width: 100%;
                 justify-content: flex-start;
-                min-height: 46px;
-                padding: 0.8rem 0.95rem;
+                min-height: 48px;
+                padding: 0.9rem 1.1rem;
+                margin-bottom: 2px;
                 border-radius: 12px;
-                background: rgba(255, 255, 255, 0.08);
-                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+                background: rgba(255, 255, 255, 0.06);
+                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
             }
 
             .navbar-nav .nav-link.nav-active,
@@ -631,6 +695,23 @@
                 margin-left: 0;
                 margin-top: 6px;
                 border-radius: 12px;
+                background: rgba(255, 255, 255, 0.08); /* Match nav-link slightly */
+                border: 1px solid rgba(255, 255, 255, 0.08);
+                box-shadow: none;
+            }
+
+            .navbar-nav .dropdown-item {
+                color: rgba(255, 255, 255, 0.9);
+                padding: 12px 16px;
+                border-radius: 8px;
+                margin: 2px 8px;
+                width: calc(100% - 16px);
+            }
+
+            .navbar-nav .dropdown-item:hover,
+            .navbar-nav .dropdown-item:focus {
+                background: rgba(255, 255, 255, 0.15);
+                color: #fff;
             }
 
             .module-selector-bar {
@@ -791,6 +872,15 @@
                         <a class="nav-link nav-priority-link {% if current_path == url_for('upload_admin') %}nav-active{% endif %}" href="{{ url_for('upload_admin') }}">➕ Hochladen</a>
                     </li>
                     {% endif %}
+                    
+
+                    <li class="nav-item">
+                        <button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
+                            <span class="theme-icon-light" style="display: none;">☀️</span>
+                            <span class="theme-icon-dark" style="display: none;">🌙</span>
+                        </button>
+                    </li>
+
                     <li class="nav-item dropdown ms-lg-auto">
                         <a class="nav-link dropdown-toggle" href="#" id="invMoreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Weitere Optionen">
                             Mehr Optionen
@@ -912,6 +1002,15 @@
                         <a class="nav-link nav-priority-link {% if current_path == url_for('library_admin') %}nav-active{% endif %}" href="{{ url_for('library_admin') }}">📖 Hochladen</a>
                     </li>
                     {% endif %}
+                    
+
+                    <li class="nav-item">
+                        <button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
+                            <span class="theme-icon-light" style="display: none;">☀️</span>
+                            <span class="theme-icon-dark" style="display: none;">🌙</span>
+                        </button>
+                    </li>
+
                     <li class="nav-item dropdown ms-lg-auto">
                         <a class="nav-link dropdown-toggle" href="#" id="libMoreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Weitere Optionen">
                             Mehr Optionen
@@ -1028,7 +1127,7 @@
 
         #onboarding-modal {
             width: min(680px, 100%);
-            background: #ffffff;
+            background: var(--ui-surface);
             border-radius: 14px;
             border: 1px solid #dbe3ee;
             box-shadow: 0 18px 35px rgba(15, 23, 42, 0.25);
@@ -1752,5 +1851,40 @@
     <!-- Mobile compatibility scripts -->
     <script src="{{ url_for('static', filename='js/mobile_compatibility.js') }}"></script>
     <script src="{{ url_for('static', filename='js/ios_fixes.js') }}"></script>
+    
+    <!-- Push Notifications Script -->
+    <script src="{{ url_for('static', filename='js/push-notifications.js') }}"></script>
+
+    <!-- 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');
+            }
+
+            // Get current setup from initial script in head
+            let currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+            updateIcons(currentTheme);
+
+            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);
+                });
+            });
+        });
+    </script>
+
 </body>
 </html>

Web/templates/change_password.html

@@ -53,7 +53,7 @@
         max-width: 500px;
         margin: 50px auto;
         padding: 30px;
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         border-radius: 8px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     }

Web/templates/library_borrowings_admin.html

@@ -52,7 +52,7 @@
   }
 
   .summary-card {
-    background: #fff;
+    background: var(--ui-surface);
     border: 1px solid #e2e8f0;
     border-radius: 14px;
     padding: 14px 16px;
@@ -85,11 +85,11 @@
     padding: 11px 14px;
     border: 1px solid #d6dde6;
     border-radius: 12px;
-    background: #fff;
+    background: var(--ui-surface);
   }
 
   .panel {
-    background: #fff;
+    background: var(--ui-surface);
     border: 1px solid #e2e8f0;
     border-radius: 18px;
     padding: 18px;
@@ -120,7 +120,7 @@
     text-transform: uppercase;
     letter-spacing: 0.04em;
     color: #64748b;
-    background: #f8fafc;
+    background: var(--ui-surface-soft);
   }
 
   .library-table tr:hover td {
@@ -408,7 +408,7 @@
 </div>
 
 <div id="damage-invoice-modal" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.72); z-index:9999; padding:20px; overflow:auto;">
-  <div style="max-width:760px; margin:40px auto; background:#fff; border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
+  <div style="max-width:760px; margin:40px auto; background: var(--ui-surface); border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
     <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px;">
       <div>
         <h2 style="margin:0;">Rechnung erstellen</h2>
@@ -421,15 +421,15 @@
       <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-bottom:16px;">
         <div>
           <label for="damage-invoice-item" style="display:block; font-weight:700; margin-bottom:6px;">Element</label>
-          <input id="damage-invoice-item" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
+          <input id="damage-invoice-item" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background: var(--ui-surface-soft);">
         </div>
         <div>
           <label for="damage-invoice-borrower" style="display:block; font-weight:700; margin-bottom:6px;">Schüler</label>
-          <input id="damage-invoice-borrower" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
+          <input id="damage-invoice-borrower" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background: var(--ui-surface-soft);">
         </div>
         <div>
           <label for="damage-invoice-code" style="display:block; font-weight:700; margin-bottom:6px;">Element-ID / Code</label>
-          <input id="damage-invoice-code" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
+          <input id="damage-invoice-code" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background: var(--ui-surface-soft);">
         </div>
         <div>
           <label for="damage-invoice-amount" style="display:block; font-weight:700; margin-bottom:6px;">Preis</label>

Web/templates/library_item_invoices.html

@@ -40,7 +40,7 @@
   }
 
   .invoice-card {
-    background: #fff;
+    background: var(--ui-surface);
     border: 1px solid #e2e8f0;
     border-radius: 16px;
     padding: 18px;
@@ -65,7 +65,7 @@
     text-transform: uppercase;
     letter-spacing: 0.04em;
     color: #64748b;
-    background: #f8fafc;
+    background: var(--ui-surface-soft);
   }
 
   .invoice-table tr:hover td {

Web/templates/library_table.html

@@ -18,7 +18,7 @@
     .library-header h1 {
         margin: 0 0 5px 0;
         font-size: 2em;
-        color: #333;
+        color: var(--ui-text);
     }
 
     .library-header p {
@@ -48,7 +48,7 @@
 
     /* Scanner panel */
     .library-scan-panel {
-        background: #ffffff;
+        background: var(--ui-surface);
         border: 1px solid #d9dde4;
         border-radius: 8px;
         padding: 14px;
@@ -68,7 +68,7 @@
         border: 1px solid #d0d7e2;
         border-radius: 6px;
         font-size: 14px;
-        background: #fff;
+        background: var(--ui-surface);
     }
 
     .library-scan-status {
@@ -95,7 +95,7 @@
         border: 1px solid #d9dde4;
         border-radius: 8px;
         overflow: hidden;
-        background: #fff;
+        background: var(--ui-surface);
         max-width: 460px;
     }
 
@@ -111,7 +111,7 @@
         border-radius: 6px;
         cursor: pointer;
         font-weight: 500;
-        color: #333;
+        color: var(--ui-text);
         transition: all 0.2s ease;
     }
 
@@ -160,7 +160,7 @@
     .filter-item label {
         font-weight: 600;
         font-size: 0.9em;
-        color: #333;
+        color: var(--ui-text);
         margin-bottom: 6px;
     }
 
@@ -206,7 +206,7 @@
     }
 
     .library-items-table thead {
-        background: #f8f9fa;
+        background: var(--ui-surface-soft);
         border-bottom: 2px solid #ddd;
     }
 
@@ -214,7 +214,7 @@
         padding: 14px 16px;
         text-align: left;
         font-weight: 600;
-        color: #333;
+        color: var(--ui-text);
         font-size: 0.9em;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -228,7 +228,7 @@
     }
 
     .library-items-table tbody tr:hover {
-        background: #f8f9fa;
+        background: var(--ui-surface-soft);
     }
 
     .library-items-table tbody tr:last-child td {
@@ -238,7 +238,7 @@
     /* Table cells */
     .table-title {
         font-weight: 600;
-        color: #333;
+        color: var(--ui-text);
     }
 
     .table-status {
@@ -320,7 +320,7 @@
     }
 
     .modal-content {
-        background-color: #fff;
+        background-color: var(--ui-surface);
         border-radius: 8px;
         padding: 20px;
         max-width: 900px;
@@ -373,7 +373,7 @@
     }
 
     .close:hover {
-        color: #333;
+        color: var(--ui-text);
     }
 
     /* Mobile responsive */
@@ -494,7 +494,7 @@
         </div>
         <div class="filter-buttons">
             <button id="applyFilterBtn" class="button" style="background: #4f46e5; color: white;">Filter anwenden</button>
-            <button id="clearFilterBtn" class="button" style="background: #f0f2f5; color: #333;">Zurücksetzen</button>
+            <button id="clearFilterBtn" class="button" style="background: #f0f2f5; color: var(--ui-text);">Zurücksetzen</button>
         </div>
     </div>
 

Web/templates/license.html

@@ -337,7 +337,7 @@
         color: #0d6efd;
     }
     .license-content {
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         padding: 20px 30px;
         border-radius: 0 0 5px 5px;
         border: 1px solid #dee2e6;

Web/templates/logs.html

@@ -217,7 +217,7 @@
     h1 {
         text-align: center;
         margin-bottom: 30px;
-        color: #333;
+        color: var(--ui-text);
     }
     
     .filter-controls {

Web/templates/main.html

@@ -6,7 +6,7 @@
 
     /* Calendar styles for detailed view */
     .calendar-wrapper {
-        background: #fff;
+        background: var(--ui-surface);
         border: 1px solid #dbe3ee;
         border-radius: 12px;
         overflow: hidden;
@@ -19,8 +19,8 @@
         align-items: center;
         gap: 12px;
         padding: 12px;
-        border-bottom: 1px solid #e7edf5;
-        background: #f8fafc;
+        border-bottom: 1px solid var(--ui-border);
+        background: var(--ui-surface-soft);
     }
 
     .calendar-header button {
@@ -28,15 +28,15 @@
         height: 34px;
         border: 1px solid #dbe3ee;
         border-radius: 8px;
-        background: #fff;
-        color: #334155;
+        background: var(--ui-surface);
+        color: var(--ui-text);
         font-weight: 700;
         line-height: 1;
         cursor: pointer;
     }
 
     .calendar-header button:hover {
-        background: #f1f5f9;
+        background: var(--ui-bg);
     }
 
     .calendar-header span {
@@ -60,7 +60,7 @@
         align-items: center;
         justify-content: center;
         border-radius: 8px;
-        color: #334155;
+        color: var(--ui-text);
         font-size: 0.95rem;
         font-weight: 600;
         line-height: 1;
@@ -80,7 +80,7 @@
     }
 
     .cal-cell:not(.header):not(.empty):hover {
-        background: #f1f5f9;
+        background: var(--ui-bg);
     }
 
     .cal-cell.empty {
@@ -109,13 +109,13 @@
     }
 
     .cal-cell.selected.has-booking::after {
-        background: #fff;
+        background: var(--ui-surface);
     }
 
     .calendar-day-details {
         border-top: 1px solid #e7edf5;
         padding: 12px;
-        background: #f8fafc;
+        background: var(--ui-surface-soft);
         display: none;
     }
 
@@ -138,7 +138,7 @@
     }
 
     .cal-booking-item {
-        background: #fff;
+        background: var(--ui-surface);
         border: 1px solid #dbe3ee;
         border-left: 3px solid #2563eb;
         border-radius: 10px;
@@ -173,7 +173,7 @@
 
     .cal-booking-period {
         margin-left: 8px;
-        color: #475569;
+        color: var(--ui-text);
         font-size: 0.85rem;
         font-weight: 600;
     }
@@ -225,14 +225,14 @@
 
     .filter-option-group {
         margin-bottom: 12px;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--ui-border);
         padding-bottom: 8px;
     }
 
     .filter-group-header {
         font-weight: bold;
         margin-bottom: 5px;
-        color: #495057;
+        color: var(--ui-text-muted);
         font-size: 0.9rem;
     }
 
@@ -253,7 +253,7 @@
     }
 
     .filter-tag-group {
-        color: #6c757d;
+        color: var(--ui-text-muted);
         font-size: 0.8em;
         font-style: italic;
         margin-right: 2px;
@@ -262,7 +262,7 @@
     .filter-tag-remove {
         background: none;
         border: none;
-        color: #6c757d;
+        color: var(--ui-text-muted);
         margin-left: 5px;
         cursor: pointer;
         font-size: 1rem;
@@ -296,7 +296,7 @@
     #code-search {
         flex: 1;
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
     }
 
@@ -321,7 +321,7 @@
     border: 1px solid #dc3545 !important;
     }
 </style>
-<div class="container">
+<div class="container admin-content-container">
     <!-- Conflict warning banner (populated by JS) -->
     <div id="conflict-banner" style="display:none; background:#fff3cd; border:1px solid #ffc107; border-left:4px solid #fd7e14; color:#856404; padding:12px 16px; border-radius:4px; margin-bottom:16px; position:relative;">
         <strong>⚠ Reservierungskonflikt</strong>
@@ -724,7 +724,9 @@
     // Add this line to define allItems globally
     let allItems = [];
 
-    const MAIN_ITEMS_PAGE_SIZE = 120;
+    // Dynamic page size: scan viewport/screen size to only load the exact amount needed.
+    const isMobileDevice = window.matchMedia('(max-width: 768px)').matches;
+    const MAIN_ITEMS_PAGE_SIZE = isMobileDevice ? 20 : 120;
     let mainItemsNextOffset = 0;
     let mainItemsHasMore = false;
     let mainItemsLoadingMore = false;
@@ -781,10 +783,10 @@
             styles.flexDirection === 'column';
 
         const distanceToEnd = isMobileLayout
-            ? itemsContainer.scrollHeight - (itemsContainer.scrollTop + itemsContainer.clientHeight)
+            ? Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - (window.scrollY + window.innerHeight)
             : itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
         const prefetchThreshold = isMobileLayout
-            ? Math.max(220, itemsContainer.clientHeight * 0.9)
+            ? window.innerHeight * 1.5
             : Math.max(260, itemsContainer.clientWidth * 1.4);
         if (distanceToEnd > prefetchThreshold) {
             return;
@@ -902,7 +904,7 @@
                         const filter2More = filter2Array.length > 1 ? ` (+${filter2Array.length - 1} mehr)` : '';
                         const filter3More = filter3Array.length > 1 ? ` (+${filter3Array.length - 1} mehr)` : '';
 
-                        const imagesHtml = item.Images ? item.Images.map((file, index) => {
+                        const imagesHtml = item.Images && item.Images.length > 0 ? item.Images.slice(0, 1).map((file, index) => {
                             // Get file with correct case handling
                             const image = file;
                             
@@ -1003,14 +1005,14 @@
 
                         card.innerHTML = `
                             <div class="card-content" data-item-id="${item._id}">
-                                <h3 class="item-name-cell">${item.Name}</h3>
-                                <p class="item-ort-cell"><strong>Ort:</strong> ${item.Ort || '-'}</p>
-                                <p class="item-filter1-cell"><strong>Unterrichtsfach:</strong> ${filter1Display}${filter1More}</p>
-                                <p class="item-filter2-cell"><strong>Jahrgangsstufe:</strong> ${filter2Display}${filter2More}</p>
-                                <p class="item-filter3-cell"><strong>Thema:</strong> ${filter3Display}${filter3More}</p>
-                                <p class="item-code-cell"><strong>Barcode:</strong> ${item.Code_4 || '-'}</p>
-                                <p class="item-count-cell"><strong>Anzahl:</strong> ${groupedCount}</p>
-                                ${isGroupedItem ? `<p class="item-count-cell"><strong>Verfügbar:</strong> ${availableGroupedCount}</p>` : ''}
+                                <h3 class="item-col-name">${item.Name}</h3>
+                                <p class="item-col-location"><strong>Ort:</strong> ${item.Ort || '-'}</p>
+                                <p class="item-col-filter1"><strong>Unterrichtsfach:</strong> ${filter1Display}${filter1More}</p>
+                                <p class="item-col-filter2"><strong>Jahrgangsstufe:</strong> ${filter2Display}${filter2More}</p>
+                                <p class="item-col-filter3"><strong>Thema:</strong> ${filter3Display}${filter3More}</p>
+                                <p class="item-col-code"><strong>Barcode:</strong> ${item.Code_4 || '-'}</p>
+                                <p class="item-col-count"><strong>Anzahl:</strong> ${groupedCount}</p>
+                                ${isGroupedItem ? `<p class="item-col-count"><strong>Verfügbar:</strong> ${availableGroupedCount}</p>` : ''}
                                 <div class="image-container">
                                     ${imagesHtml}
                                 </div>
@@ -1167,6 +1169,7 @@
 
         if (!mainItemsScrollPrefetchBound) {
             itemsContainer.addEventListener('scroll', maybePrefetchMainItems, { passive: true });
+            window.addEventListener('scroll', maybePrefetchMainItems, { passive: true });
             mainItemsScrollPrefetchBound = true;
         }
 
@@ -1188,7 +1191,7 @@
                 updateMainItemsLoadingIndicator();
             });
         }, {
-            root: itemsContainer,
+            root: isMobileLayout ? null : itemsContainer,
             threshold: 0.15,
             rootMargin: isMobileLayout ? '0px 0px 900px 0px' : '0px 900px 0px 0px'
         });
@@ -1466,7 +1469,7 @@
                 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 #dbe3ee;border-radius:8px;padding:10px;background:#fff;display:grid;gap:6px;">
+                    <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>
@@ -1628,7 +1631,7 @@
                 
                 <div class="detail-group">
                     <div class="detail-label">Anschaffungskosten:</div>
-                    <div class="detail-value">${item.Anschaffungskosten || '-'}</div>
+                    <div class="detail-value">${item.Anschaffungskosten ? item.Anschaffungskosten + ' €' : '-'}</div>
                 </div>
                 
                 <div class="detail-group full-width">
@@ -1643,7 +1646,7 @@
                             <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:#f8fafc;">
+                        <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>
                     </div>
@@ -1716,7 +1719,7 @@
                     : `<button class="ausleihen disabled-button" disabled>${item.BlockedNow ? 'Reserviert' : 'Ausgeliehen'}</button>`
                 }
                 ${canScheduleItem ? `<button class="schedule-button" onclick="openScheduleModal('${item._id}')">Termin planen</button>` : ''}
-                <button type="button" class="close-modal secondary-close" onclick="document.getElementById('item-modal').style.display='none';">Schließen</button>
+                <button type="button" class="details-button" onclick="document.getElementById('item-modal').style.display='none';">Schließen</button>
             </div>
         `;
         
@@ -2805,7 +2808,7 @@
     }
 
     .container {
-        background-color: #fff;
+        background-color: var(--ui-surface);
         padding: 20px;
         border-radius: 5px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@@ -2830,8 +2833,8 @@
     .filter-group {
         position: relative;
         min-width: 200px;
-        background-color: #fff;
-        border: 1px solid #ddd;
+        background-color: var(--ui-surface);
+        border: 1px solid var(--ui-border);
         border-radius: 5px;
         padding: 10px;
     }
@@ -2844,7 +2847,7 @@
     }
 
     .filter-toggle, .clear-filter {
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         border: 1px solid #dee2e6;
         border-radius: 3px;
         padding: 3px 8px;
@@ -2853,7 +2856,7 @@
 
     .clear-filter {
         font-size: 0.8rem;
-        color: #6c757d;
+        color: var(--ui-text-muted);
     }
 
     .filter-dropdown {
@@ -2865,7 +2868,7 @@
         max-height: 300px;
         overflow-y: auto;
         background-color: white;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 5px;
         box-shadow: 0 4px 8px rgba(0,0,0,0.2);
         z-index: 100;
@@ -2900,14 +2903,14 @@
 
     .filter-option-group {
         margin-bottom: 12px;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--ui-border);
         padding-bottom: 8px;
     }
 
     .filter-group-header {
         font-weight: bold;
         margin-bottom: 5px;
-        color: #495057;
+        color: var(--ui-text-muted);
         font-size: 0.9rem;
     }
 
@@ -2928,7 +2931,7 @@
     }
 
     .filter-tag-group {
-        color: #6c757d;
+        color: var(--ui-text-muted);
         font-size: 0.8em;
         font-style: italic;
         margin-right: 2px;
@@ -2937,7 +2940,7 @@
     .filter-tag-remove {
         background: none;
         border: none;
-        color: #6c757d;
+        color: var(--ui-text-muted);
         margin-left: 5px;
         cursor: pointer;
         font-size: 1rem;
@@ -2954,7 +2957,7 @@
     #code-search {
         flex: 1;
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
     }
 
@@ -3025,8 +3028,8 @@
         margin-right: 8px;
         border: 1px solid #dbe3ee;
         border-radius: 10px;
-        background: #f8fafc;
-        color: #334155;
+        background: var(--ui-surface-soft);
+        color: var(--ui-text);
         justify-content: center;
         align-items: center;
         flex-direction: column;
@@ -3083,19 +3086,19 @@
     }
 
     .item-card {
-        background-color: #fff;
-        border: 1px solid #ddd;
-        border-radius: 5px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        background-color: var(--ui-surface);
+        border: 1px solid var(--ui-border);
+        border-radius: var(--ui-radius);
+        box-shadow: var(--ui-shadow-sm);
         padding: 20px;
-        max-width: 300px;
-        flex-shrink: 0;
+        width: 100%;
+        max-width: 340px;
+        flex: 1 1 300px;
         scroll-snap-align: center;
         cursor: pointer;
-        transition: transform 0.2s;
-    position: relative;
+        transition: transform 0.2s, box-shadow 0.2s;
+        position: relative;
     }
-
     .item-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
@@ -3140,7 +3143,7 @@
     .item-modal {
         display: none;
         position: fixed;
-        z-index: 1000;
+        z-index: 2500;
         left: 0;
         top: 0;
         width: 100%;
@@ -3191,7 +3194,7 @@
     .form-group textarea {
         width: 100%;
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
         box-sizing: border-box;
     }
@@ -3235,7 +3238,7 @@
     }
 
     .cancel-button {
-        background-color: #6c757d;
+        background-color: var(--ui-text-muted);
         color: white;
     }
 
@@ -3467,6 +3470,19 @@
     
     /* Responsive adjustments */
     @media (max-width: 768px) {
+        /* Mobile viewport and scrolling improvements */
+        html, body {
+            overflow-x: hidden !important;
+            -webkit-overflow-scrolling: touch !important;
+            touch-action: pan-y !important;
+            height: 100% !important;
+        }
+        
+        body {
+            padding: 0 !important;
+            margin: 0 !important;
+        }
+
         .filter-container {
             flex-direction: column;
         }
@@ -3552,8 +3568,9 @@
             display: grid !important;
             grid-template-columns: 1fr !important;
             gap: 15px !important;
-            padding: 10px 0 0 !important;
+            padding: 10px 0 !important;
             overflow-x: visible !important;
+            scroll-snap-type: none !important;
         }
         
         .item-card {
@@ -3561,6 +3578,9 @@
             margin: 0 !important;
             padding: 15px !important;
             scroll-snap-align: none !important;
+            /* Only render when user looks at it (content-visibility virtualizes the DOM) */
+            content-visibility: auto;
+            contain-intrinsic-size: auto 300px;
         }
         
         .item-card:hover {
@@ -3634,7 +3654,7 @@
             display: block !important;
             margin-bottom: 8px !important;
             font-weight: 600 !important;
-            color: #333 !important;
+            color: var(--ui-title) !important;
         }
         
         .form-group input, .form-group select, .form-group textarea {
@@ -3705,8 +3725,8 @@
     }
 
     /* Element text colors for better visibility */
-    .edit-button, .duplicate-button, .generate-qr-button, .ausleihen {
-        color: black !important;
+    .edit-button, .duplicate-button, .generate-qr-button {
+        color: var(--ui-title) !important;
     }
     
     /* Standardized button styles across the application */
@@ -3839,7 +3859,7 @@
         max-height: 400px;
         overflow: hidden;
         border-radius: 8px;
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
     }
 
     /* Borrower and appointment info panels in modal */
@@ -3867,11 +3887,11 @@
     .modal-details { margin: 20px 0; }
     .detail-group { display: flex; margin-bottom: 10px; align-items: flex-start; }
     .detail-group.full-width { flex-direction: column; margin-bottom: 15px; }
-    .detail-label { font-weight: bold; color: #495057; min-width: 150px; margin-right: 10px; }
+    .detail-label { font-weight: bold; color: var(--ui-text-muted); min-width: 150px; margin-right: 10px; }
     .detail-value { color: #212529; flex: 1; word-wrap: break-word; }
     .detail-group.full-width .detail-label { margin-bottom: 5px; }
     .detail-group.full-width .detail-value {
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         padding: 10px;
         border-radius: 4px;
         border: 1px solid #dee2e6;
@@ -3935,7 +3955,7 @@
 
     /* Calendar Styles - Optimized & Mobile Friendly */
     .calendar-wrapper {
-        background: #fff;
+        background: var(--ui-surface);
         border-radius: 12px;
         overflow: hidden;
         border: 1px solid #e5e7eb;
@@ -3948,8 +3968,8 @@
         justify-content: space-between;
         align-items: center;
         padding: 15px;
-        background-color: #fff;
-        border-bottom: 1px solid #f3f4f6;
+        background-color: var(--ui-surface);
+        border-bottom: 1px solid var(--ui-border);
     }
     
     .calendar-header button {
@@ -3973,7 +3993,7 @@
     .calendar-grid {
         display: grid;
         grid-template-columns: repeat(7, 1fr);
-        background-color: #fff;
+        background-color: var(--ui-surface);
         padding: 10px;
         gap: 5px;
     }
@@ -4035,7 +4055,7 @@
     }
     
     .cal-cell.selected.has-booking::after {
-        background-color: #fff;
+        background-color: var(--ui-surface);
     }
 
     .calendar-day-details {
@@ -4063,7 +4083,7 @@
     
     .cal-booking-item {
         padding: 10px;
-        background: #fff;
+        background: var(--ui-surface);
         border: 1px solid #e5e7eb;
         border-radius: 8px;
         margin-bottom: 8px;
@@ -4094,6 +4114,7 @@
             border: none !important;
             border-radius: 0 !important;
             box-shadow: none !important;
+            box-sizing: border-box !important;
         }
 
         .filter-group {
@@ -4115,7 +4136,7 @@
             font-size: 0.95rem !important;
             font-weight: 600 !important;
             line-height: 1.35 !important;
-            color: #212529 !important;
+            color: var(--ui-title) !important;
             word-break: break-word !important;
             overflow-wrap: anywhere !important;
         }
@@ -4153,7 +4174,7 @@
             overflow-wrap: break-word !important;
         }
 
-        body.table-view .item-card .card-content .item-name-cell {
+        body.table-view .item-card .card-content .item-col-name {
             font-size: 0.95rem !important;
         }
 
@@ -4193,7 +4214,7 @@
                 display: block !important;
                 margin-right: 0 !important;
                 margin-bottom: 2px !important;
-                color: #6c757d !important;
+                color: var(--ui-text-muted) !important;
                 font-size: 0.8rem !important;
             }
 
@@ -4213,8 +4234,12 @@
         }
 
         .items-container {
-            padding: 6px 0 !important;
-            gap: 10px !important;
+            display: grid !important;
+            grid-template-columns: 1fr !important;
+            gap: 15px !important;
+            padding: 10px 0 !important;
+            overflow-x: visible !important;
+            scroll-snap-type: none !important;
         }
 
         body.table-view .table-view-header {
@@ -4231,16 +4256,17 @@
         }
 
         .item-card {
-            border: none !important;
-            border-radius: 0 !important;
-            box-shadow: none !important;
-            border-bottom: 1px solid #e5e7eb !important;
-            padding: 12px 0 !important;
+            max-width: 100% !important;
+            margin: 0 !important;
+            padding: 15px !important;
+            scroll-snap-align: none !important;
+            content-visibility: auto;
+            contain-intrinsic-size: auto 300px;
         }
 
         .item-card:hover {
-            transform: none !important;
-            box-shadow: none !important;
+            transform: translateY(-2px) !important;
+            box-shadow: var(--ui-shadow-md) !important;
         }
 
         .item-card .image-container {
@@ -4305,13 +4331,12 @@
         }
 
         .modal-content {
-            width: 100% !important;
-            max-width: 100% !important;
-            height: 100vh !important;
-            max-height: 100vh !important;
-            margin: 0 !important;
-            border: none !important;
-            border-radius: 0 !important;
+            width: calc(100vw - 16px) !important;
+            max-width: none !important;
+            margin: 80px auto 10px !important;
+            max-height: 85vh !important;
+            overflow-y: auto !important;
+            border-radius: 8px !important;
             padding: 16px !important;
         }
 
@@ -4430,7 +4455,7 @@ function openItemQuick(id){
 }
 
 .filter-group {
-    background: #ffffff;
+    background: var(--ui-surface);
     border: 1px solid #cfd8e3;
     border-radius: 12px;
     padding: 12px;
@@ -4478,7 +4503,7 @@ function openItemQuick(id){
 }
 
 .clear-filter {
-    background: #fff;
+    background: var(--ui-surface);
     color: #495868;
 }
 
@@ -4487,7 +4512,7 @@ function openItemQuick(id){
     border: 1px solid #cfd8e3;
     border-radius: 12px;
     box-shadow: 0 8px 20px rgba(20, 35, 60, 0.12);
-    background: #ffffff;
+    background: var(--ui-surface);
     padding: 10px;
 }
 
@@ -4573,4 +4598,74 @@ function openItemQuick(id){
     }
 }
 </style>
-{% endblock %}
+{% endblock %}
+<style>
+    /* Admin/Main Content Container align */
+    .admin-content-container {
+        --table-columns: minmax(190px, 2fr) repeat(6, minmax(110px, 1fr));
+    }
+    @media screen and (min-width: 769px) and (max-width: 1024px) {
+        .admin-content-container {
+            width: 90% !important;
+        }
+        .items-container {
+            display: grid !important;
+            grid-template-columns: repeat(2, 1fr) !important;
+            gap: 20px !important;
+        }
+    }
+    @media screen and (max-width: 768px) {
+        .admin-content-container {
+            width: 100% !important;
+            max-width: 100% !important;
+            margin: 0 !important;
+            padding: 12px 12px 18px !important;
+            box-sizing: border-box !important;
+            overflow-x: hidden !important;
+        }
+        .item-card .item-image {
+            width: 100% !important;
+            height: auto !important;
+            max-height: 300px !important;
+            display: block !important;
+            object-fit: cover !important;
+        }
+        .item-card .image-container {
+            height: 200px !important;
+            overflow: hidden !important;
+            position: relative !important;
+            margin-bottom: 15px !important;
+        }
+        .actions {
+            gap: 8px !important;
+            border-top: none !important;
+            padding-top: 8px !important;
+            flex-direction: column !important;
+            align-items: stretch !important;
+        }
+        .actions form,
+        .actions button,
+        .actions a {
+            width: 100% !important;
+        }
+        .items-container, .item-card, .image-container, .item-image {
+            touch-action: pan-y !important;
+            -webkit-overflow-scrolling: touch !important;
+        }
+    }
+    @media (max-width: 767px) {
+        body {
+            overflow-x: hidden;
+            -webkit-overflow-scrolling: touch;
+            touch-action: pan-y;
+        }
+        .admin-content-container {
+            width: 100%;
+            max-width: 100%;
+            margin: 0;
+            padding: 12px 12px 18px;
+            box-sizing: border-box;
+            overflow-x: hidden;
+        }
+    }
+</style>

Web/templates/main_admin.html

@@ -21,7 +21,7 @@
     .items-indicator {
         text-align: center;
         font-size: 0.9rem;
-        color: #495057;
+        color: var(--ui-text-muted);
         margin: 6px 0 16px;
         font-weight: 600;
     }
@@ -55,7 +55,7 @@
         max-width: 980px;
         margin: 0 auto 18px;
         border: 1px solid #dbe3ee;
-        background: #ffffff;
+        background: var(--ui-surface);
         border-radius: 10px;
         padding: 14px;
         box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
@@ -78,7 +78,7 @@
     }
 
     .bulk-delete-summary {
-        color: #334155;
+        color: var(--ui-text);
         font-size: 0.92rem;
         margin-top: 4px;
     }
@@ -104,8 +104,8 @@
         border-radius: 8px;
         padding: 9px 12px;
         cursor: pointer;
-        background: #f8fafc;
-        color: #1e293b;
+        background: var(--ui-surface-soft);
+        color: var(--ui-title);
         font-weight: 600;
         text-align: center;
     }
@@ -138,8 +138,8 @@
     .filter-group {
         position: relative;
         min-width: 200px;
-        background-color: #fff;
-        border: 1px solid #ddd;
+        background-color: var(--ui-surface);
+        border: 1px solid var(--ui-border);
         border-radius: 5px;
         padding: 10px;
     }
@@ -152,7 +152,7 @@
     }
 
     .filter-toggle, .clear-filter {
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         border: 1px solid #dee2e6;
         border-radius: 3px;
         padding: 3px 8px;
@@ -161,7 +161,7 @@
 
     .clear-filter {
         font-size: 0.8rem;
-        color: #6c757d;
+        color: var(--ui-text-muted);
     }
 
     .filter-dropdown {
@@ -173,7 +173,7 @@
         max-height: 300px;
         overflow-y: auto;
         background-color: white;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 5px;
         box-shadow: 0 4px 8px rgba(0,0,0,0.2);
         z-index: 100;
@@ -208,14 +208,14 @@
 
     .filter-option-group {
         margin-bottom: 12px;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--ui-border);
         padding-bottom: 8px;
     }
 
     .filter-group-header {
         font-weight: bold;
         margin-bottom: 5px;
-        color: #495057;
+        color: var(--ui-text-muted);
         font-size: 0.9rem;
     }
 
@@ -236,7 +236,7 @@
     }
 
     .filter-tag-group {
-        color: #6c757d;
+        color: var(--ui-text-muted);
         font-size: 0.8em;
         font-style: italic;
         margin-right: 2px;
@@ -245,7 +245,7 @@
     .filter-tag-remove {
         background: none;
         border: none;
-        color: #6c757d;
+        color: var(--ui-text-muted);
         margin-left: 5px;
         cursor: pointer;
         font-size: 1rem;
@@ -262,7 +262,7 @@
     #code-search {
         flex: 1;
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
     }
 
@@ -333,8 +333,8 @@
         margin-right: 8px;
         border: 1px solid #dbe3ee;
         border-radius: 10px;
-        background: #f8fafc;
-        color: #334155;
+        background: var(--ui-surface-soft);
+        color: var(--ui-text);
         justify-content: center;
         align-items: center;
         flex-direction: column;
@@ -391,16 +391,17 @@
     }
 
     .item-card {
-        background-color: #fff;
-        border: 1px solid #ddd;
-        border-radius: 5px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        background-color: var(--ui-surface);
+        border: 1px solid var(--ui-border);
+        border-radius: var(--ui-radius);
+        box-shadow: var(--ui-shadow-sm);
         padding: 20px;
-        max-width: 300px;
-        flex-shrink: 0;
+        width: 100%;
+        max-width: 340px;
+        flex: 1 1 300px;
         scroll-snap-align: center;
         cursor: pointer;
-        transition: transform 0.2s;
+        transition: transform 0.2s, box-shadow 0.2s;
         position: relative;
     }
 
@@ -447,7 +448,7 @@
         align-items: center;
         gap: 6px;
         font-size: 0.9rem;
-        color: #475569;
+        color: var(--ui-text);
         cursor: pointer;
         user-select: none;
     }
@@ -581,7 +582,7 @@
     .item-modal {
         display: none;
         position: fixed;
-        z-index: 1000;
+        z-index: 2500;
         left: 0;
         top: 0;
         width: 100%;
@@ -632,7 +633,7 @@
     .form-group textarea {
         width: 100%;
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
         box-sizing: border-box;
     }
@@ -676,7 +677,7 @@
     }
 
     .cancel-button {
-        background-color: #6c757d;
+        background-color: var(--ui-text-muted);
         color: white;
     }
 
@@ -703,15 +704,15 @@
     .filter-inputs {
         margin: 20px 0;
         padding: 15px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 5px;
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
     }
 
     .filter-inputs h3 {
         margin-top: 0;
         margin-bottom: 15px;
-        color: #495057;
+        color: var(--ui-text-muted);
     }
 
     .multi-filter {
@@ -723,7 +724,7 @@
     .filter-dropdown-select {
         width: 100%;
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
         background-color: white;
     }
@@ -1000,16 +1001,16 @@
 
     /* Disabled Button */
     .disabled-button {
-        background-color: #6c757d !important;
-        border-color: #6c757d !important;
+        background-color: var(--ui-text-muted) !important;
+        border-color: var(--ui-text-muted) !important;
         color: #fff !important;
         cursor: not-allowed !important;
         opacity: 0.6;
     }
 
     .disabled-button:hover {
-        background-color: #6c757d !important;
-        border-color: #6c757d !important;
+        background-color: var(--ui-text-muted) !important;
+        border-color: var(--ui-text-muted) !important;
         transform: none !important;
         box-shadow: none !important;
     }
@@ -1032,7 +1033,7 @@
 
     .detail-label {
         font-weight: bold;
-        color: #495057;
+        color: var(--ui-text-muted);
         min-width: 150px;
         margin-right: 10px;
     }
@@ -1048,7 +1049,7 @@
     }
 
     .detail-group.full-width .detail-value {
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         padding: 10px;
         border-radius: 4px;
         border: 1px solid #dee2e6;
@@ -1068,7 +1069,7 @@
         max-height: 400px;
         overflow: hidden;
         border-radius: 8px;
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
     }
 
     .modal-image {
@@ -1351,7 +1352,7 @@
             display: block !important;
             margin-bottom: 8px !important;
             font-weight: 600 !important;
-            color: #333 !important;
+            color: var(--ui-title) !important;
         }
         
         .form-group input, .form-group select, .form-group textarea {
@@ -1389,7 +1390,7 @@
         /* Tab navigation improvements */
         .nav-tabs {
             flex-wrap: wrap !important;
-            border-bottom: 1px solid #dee2e6 !important;
+            border-bottom: 1px solid var(--ui-border) !important;
         }
         
         .nav-tabs .nav-link {
@@ -1605,6 +1606,7 @@
             gap: 15px !important;
             padding: 10px 0 !important;
             overflow-x: visible !important;
+            scroll-snap-type: none !important;
         }
         
         .item-card {
@@ -1612,6 +1614,9 @@
             margin: 0 !important;
             padding: 15px !important;
             scroll-snap-align: none !important;
+            /* Only render when user looks at it (content-visibility virtualizes the DOM) */
+            content-visibility: auto;
+            contain-intrinsic-size: auto 300px;
         }
         
         .item-card:hover {
@@ -1685,7 +1690,7 @@
             display: block !important;
             margin-bottom: 8px !important;
             font-weight: 600 !important;
-            color: #333 !important;
+            color: var(--ui-title) !important;
         }
         
         .form-group input, .form-group select, .form-group textarea {
@@ -1959,8 +1964,8 @@
     }
 
     /* Element text colors for better visibility */
-    .edit-button, .duplicate-button, .generate-qr-button, .ausleihen {
-        color: black !important;
+    .edit-button, .duplicate-button, .generate-qr-button {
+        color: var(--ui-title) !important;
     }
     
     /* Standardized button styles across the application */
@@ -2003,7 +2008,7 @@
     }
     /* Calendar styles for detailed view */
     .calendar-wrapper {
-        background: #fff;
+        background: var(--ui-surface);
         border: 1px solid #dbe3ee;
         border-radius: 12px;
         overflow: hidden;
@@ -2016,8 +2021,8 @@
         align-items: center;
         gap: 12px;
         padding: 12px;
-        border-bottom: 1px solid #e7edf5;
-        background: #f8fafc;
+        border-bottom: 1px solid var(--ui-border);
+        background: var(--ui-surface-soft);
     }
 
     .calendar-header button {
@@ -2025,15 +2030,15 @@
         height: 34px;
         border: 1px solid #dbe3ee;
         border-radius: 8px;
-        background: #fff;
-        color: #334155;
+        background: var(--ui-surface);
+        color: var(--ui-text);
         font-weight: 700;
         line-height: 1;
         cursor: pointer;
     }
 
     .calendar-header button:hover {
-        background: #f1f5f9;
+        background: var(--ui-bg);
     }
 
     .calendar-header span {
@@ -2057,7 +2062,7 @@
         align-items: center;
         justify-content: center;
         border-radius: 8px;
-        color: #334155;
+        color: var(--ui-text);
         font-size: 0.95rem;
         font-weight: 600;
         line-height: 1;
@@ -2077,7 +2082,7 @@
     }
 
     .cal-cell:not(.header):not(.empty):hover {
-        background: #f1f5f9;
+        background: var(--ui-bg);
     }
 
     .cal-cell.empty {
@@ -2106,13 +2111,13 @@
     }
 
     .cal-cell.selected.has-booking::after {
-        background: #fff;
+        background: var(--ui-surface);
     }
 
     .calendar-day-details {
         border-top: 1px solid #e7edf5;
         padding: 12px;
-        background: #f8fafc;
+        background: var(--ui-surface-soft);
         display: none;
     }
 
@@ -2135,7 +2140,7 @@
     }
 
     .cal-booking-item {
-        background: #fff;
+        background: var(--ui-surface);
         border: 1px solid #dbe3ee;
         border-left: 3px solid #2563eb;
         border-radius: 10px;
@@ -2170,7 +2175,7 @@
 
     .cal-booking-period {
         margin-left: 8px;
-        color: #475569;
+        color: var(--ui-text);
         font-size: 0.85rem;
         font-weight: 600;
     }
@@ -2579,7 +2584,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                     <input type="date" id="edit-year" name="anschaffungsjahr">
                 </div>
                 <div class="form-group">
-                    <label for="edit-cost">Anschaffungskosten:</label>
+                    <label for="edit-cost">Anschaffungskosten (€):</label>
                     <input id="edit-cost" name="anschaffungskosten">
                 </div>
                 <div class="form-group">
@@ -3339,7 +3344,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
     });
 
     // Function to load items from server
-    const MAIN_ADMIN_ITEMS_PAGE_SIZE = 120;
+    // Dynamic page size: scan viewport/screen size to only load the exact amount needed.
+    const isMobileDevice = window.matchMedia('(max-width: 768px)').matches;
+    const MAIN_ADMIN_ITEMS_PAGE_SIZE = isMobileDevice ? 20 : 120;
     let mainAdminItemsNextOffset = 0;
     let mainAdminItemsHasMore = false;
     let mainAdminItemsLoadingMore = false;
@@ -3397,10 +3404,10 @@ document.addEventListener('DOMContentLoaded', ()=>{
             styles.flexDirection === 'column';
 
         const distanceToEnd = isMobileLayout
-            ? itemsContainer.scrollHeight - (itemsContainer.scrollTop + itemsContainer.clientHeight)
+            ? Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - (window.scrollY + window.innerHeight)
             : itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
         const prefetchThreshold = isMobileLayout
-            ? Math.max(220, itemsContainer.clientHeight * 0.9)
+            ? window.innerHeight * 1.5
             : Math.max(260, itemsContainer.clientWidth * 1.4);
         if (distanceToEnd > prefetchThreshold) {
             return;
@@ -3523,7 +3530,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                         const filter2More = filter2Array.length > 1 ? ` (+${filter2Array.length - 1} mehr)` : '';
                         const filter3More = filter3Array.length > 1 ? ` (+${filter3Array.length - 1} mehr)` : '';
 
-                        const imagesHtml = item.Images ? item.Images.map((image, index) => {
+                        const imagesHtml = item.Images && item.Images.length > 0 ? item.Images.slice(0, 1).map((image, index) => {
                             // Check if the image already has a full URL path or just the filename
                             const imageSrc = image.startsWith('/uploads/') || image.startsWith('http') ? 
                                             image : 
@@ -3772,6 +3779,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
 
         if (!mainAdminItemsScrollPrefetchBound) {
             itemsContainer.addEventListener('scroll', maybePrefetchMainAdminItems, { passive: true });
+            window.addEventListener('scroll', maybePrefetchMainAdminItems, { passive: true });
             mainAdminItemsScrollPrefetchBound = true;
         }
 
@@ -3793,7 +3801,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 updateMainAdminItemsLoadingIndicator();
             });
         }, {
-            root: itemsContainer,
+            root: isMobileLayout ? null : itemsContainer,
             threshold: 0.15,
             rootMargin: isMobileLayout ? '0px 0px 900px 0px' : '0px 900px 0px 0px'
         });
@@ -4355,7 +4363,7 @@ 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 #dbe3ee;border-radius:8px;padding:10px;background:#fff;display:grid;gap:6px;">
+                    <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>
@@ -4433,7 +4441,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 
                 <div class="detail-group">
                     <div class="detail-label">Anschaffungskosten:</div>
-                    <div class="detail-value">${item.Anschaffungskosten || '-'}</div>
+                    <div class="detail-value">${item.Anschaffungskosten ? item.Anschaffungskosten + ' €' : '-'}</div>
                 </div>
                 
                 <div class="detail-group full-width">
@@ -4448,7 +4456,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                             <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:#f8fafc;">
+                        <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>
                     </div>
@@ -4527,6 +4535,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 <form method="POST" action="/delete_item/${item._id}" style="display:inline;" onsubmit="return confirm('Sind Sie sicher?')">
                     <button class="delete-button" type="submit">Löschen</button>
                 </form>
+                <button type="button" class="details-button" onclick="document.getElementById('item-modal').style.display='none';">Schließen</button>
             </div>
         `;
         
@@ -5494,7 +5503,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
 }
 
 .filter-group {
-    background: #ffffff;
+    background: var(--ui-surface);
     border: 1px solid #cfd8e3;
     border-radius: 12px;
     padding: 12px;
@@ -5542,7 +5551,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
 }
 
 .clear-filter {
-    background: #fff;
+    background: var(--ui-surface);
     color: #495868;
 }
 
@@ -5551,7 +5560,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
     border: 1px solid #cfd8e3;
     border-radius: 12px;
     box-shadow: 0 8px 20px rgba(20, 35, 60, 0.12);
-    background: #ffffff;
+    background: var(--ui-surface);
     padding: 10px;
 }
 
@@ -5661,7 +5670,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             display: block !important;
             margin-right: 0 !important;
             margin-bottom: 2px !important;
-            color: #6c757d !important;
+            color: var(--ui-text-muted) !important;
             font-size: 0.8rem !important;
         }
 

Web/templates/manage_locations.html

@@ -78,12 +78,12 @@
         border-radius: 5px;
         box-shadow: 0 2px 5px rgba(0,0,0,0.1);
         margin-bottom: 20px;
-        background-color: #fff;
+        background-color: var(--ui-surface);
         border: 1px solid #e9ecef;
     }
     
     .card-header {
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         padding: 15px 20px;
         border-bottom: 1px solid #e9ecef;
     }
@@ -170,7 +170,7 @@
         justify-content: space-between;
         align-items: center;
         padding: 10px;
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         border-radius: 4px;
         border-left: 3px solid #6c757d;
     }

Web/templates/my_borrowed_items.html

@@ -61,7 +61,7 @@
         bottom: 125%;
         left: 50%;
         transform: translateX(-50%);
-        background-color: #333;
+        background-color: var(--ui-text);
         color: white;
         padding: 5px 10px;
         border-radius: 4px;
@@ -405,7 +405,7 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     
     .borrowed-item {
-        background-color: #fff;
+        background-color: var(--ui-surface);
         border: 1px solid #dee2e6;
         border-radius: 8px;
         padding: 20px;
@@ -457,7 +457,7 @@ document.addEventListener('DOMContentLoaded', function() {
     
     .exemplar-details {
         margin-top: 10px;
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         padding: 10px;
         border-radius: 5px;
         border-left: 3px solid #6c757d;
@@ -515,7 +515,7 @@ document.addEventListener('DOMContentLoaded', function() {
     .no-items-message {
         text-align: center;
         padding: 30px;
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         border-radius: 5px;
         color: #6c757d;
         margin-top: 20px;

Web/templates/notifications.html

@@ -14,8 +14,10 @@
     </form>
   </div>
 
+  <div id="push-notification-settings" style="margin-bottom: 24px;"></div>
+
   <div style="display:grid; grid-template-columns:1fr; gap:14px;">
-    <section style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
+    <section style="background: var(--ui-surface); border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
       <h2 style="margin:0 0 12px; font-size:1.15rem;">Meine Benachrichtigungen</h2>
       {% if user_notifications %}
       <div style="display:grid; gap:10px;">
@@ -51,7 +53,7 @@
     </section>
 
     {% if is_admin_user %}
-    <section style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
+    <section style="background: var(--ui-surface); border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
       <h2 style="margin:0 0 12px; font-size:1.15rem;">Admin-Benachrichtigungen</h2>
       {% if admin_notifications %}
       <div style="display:grid; gap:10px;">
@@ -83,4 +85,12 @@
     {% endif %}
   </div>
 </div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    if (typeof showPushNotificationSettings === 'function') {
+        showPushNotificationSettings();
+    }
+});
+</script>
 {% endblock %}

Web/templates/register.html

@@ -70,27 +70,6 @@
                     </div>
                 </div>
 
-                {% if student_cards_module_enabled %}
-                <div class="form-group">
-                    <label style="display:flex; align-items:center; gap:8px; color:#1f2937;">
-                        <input type="checkbox" id="is-student" name="is_student" style="width:auto;">
-                        Schülerkonto mit Ausweis
-                    </label>
-                    <div id="student-fields" style="display:none; margin-top:10px;">
-                        <label for="student-card-id">Ausweis-ID</label>
-                        <div class="input-container">
-                            <span class="input-icon">🪪</span>
-                            <input type="text" id="student-card-id" name="student_card_id" placeholder="z.B. S-2026-001">
-                        </div>
-                        <label for="max-borrow-days" style="margin-top:10px;">Standard-Ausleihdauer (Tage)</label>
-                        <div class="input-container">
-                            <span class="input-icon">📅</span>
-                            <input type="number" id="max-borrow-days" name="max_borrow_days" min="1" max="{{ student_max_borrow_days }}" value="{{ student_default_borrow_days }}">
-                        </div>
-                    </div>
-                </div>
-                {% endif %}
-
                 <div class="form-group">
                     <label for="permission-preset">Berechtigungs-Preset</label>
                     <select id="permission-preset" name="permission_preset" class="form-select">
@@ -142,7 +121,7 @@
     --primary-dark: #2980b9;
     --success-color: #2ecc71;
     --error-color: #e74c3c;
-    --text-color: #333;
+    --text-color: var(--ui-text);
     --light-bg: #f9f9f9;
     --border-radius: 8px;
     --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -184,7 +163,7 @@ body {
 }
 
 .content {
-    background-color: #fff;
+    background-color: var(--ui-surface);
     padding: 2rem;
     border-radius: var(--border-radius);
     box-shadow: var(--shadow);
@@ -366,7 +345,7 @@ input::placeholder {
     padding: 10px 12px;
     border: 1px solid #e5e7eb;
     border-radius: 8px;
-    background: #f8fafc;
+    background: var(--ui-surface-soft);
 }
 
 .password-rules-title {
@@ -427,7 +406,7 @@ input::placeholder {
     border: 1px solid #d1d5db;
     border-radius: 8px;
     padding: 10px;
-    background: #f8fafc;
+    background: var(--ui-surface-soft);
 }
 
 .permission-panel h4 {
@@ -561,25 +540,6 @@ document.addEventListener('DOMContentLoaded', function () {
         passwordInput.addEventListener('blur', updatePasswordRules);
         updatePasswordRules();
     }
-
-    {% if student_cards_module_enabled %}
-    const studentCheckbox = document.getElementById('is-student');
-    const studentFields = document.getElementById('student-fields');
-    const studentCardInput = document.getElementById('student-card-id');
-
-    if (!studentCheckbox || !studentFields || !studentCardInput) {
-        return;
-    }
-
-    function toggleStudentFields() {
-        const isChecked = studentCheckbox.checked;
-        studentFields.style.display = isChecked ? 'block' : 'none';
-        studentCardInput.required = isChecked;
-    }
-
-    studentCheckbox.addEventListener('change', toggleStudentFields);
-    toggleStudentFields();
-    {% endif %}
 });
 </script>
 {% endblock %}

Web/templates/reset_item_functions.html

@@ -129,7 +129,7 @@ function createLoadingIndicator(message) {
             }
             
             .reset-loading-message {
-                color: #333;
+                color: var(--ui-text);
                 font-size: 16px;
                 font-weight: 500;
             }

Web/templates/reset_item_modal.html

@@ -207,7 +207,7 @@
 }
 
 .reset-item-info {
-    background: #f8f9fa;
+    background: var(--ui-surface-soft);
     border-radius: 8px;
     padding: 20px;
     margin-bottom: 25px;
@@ -216,7 +216,7 @@
 
 .reset-item-info h3 {
     margin: 0 0 15px 0;
-    color: #333;
+    color: var(--ui-text);
     font-size: 1.3rem;
 }
 
@@ -232,7 +232,7 @@
 }
 
 .reset-item-details strong {
-    color: #333;
+    color: var(--ui-text);
 }
 
 .reset-warning-section {
@@ -285,7 +285,7 @@
     flex-direction: column;
     cursor: pointer;
     font-weight: 500;
-    color: #333;
+    color: var(--ui-text);
 }
 
 .reset-action-desc {
@@ -298,7 +298,7 @@
 .active-borrowings {
     margin-top: 10px;
     padding: 10px;
-    background: #f8f9fa;
+    background: var(--ui-surface-soft);
     border-radius: 5px;
     font-size: 0.9rem;
 }
@@ -321,7 +321,7 @@
 
 .reset-options-section h4 {
     margin: 0 0 15px 0;
-    color: #333;
+    color: var(--ui-text);
 }
 
 .reset-option {
@@ -365,7 +365,7 @@
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
-    color: #333;
+    color: var(--ui-text);
 }
 
 .reset-reason-section textarea {
@@ -391,7 +391,7 @@
     display: flex;
     justify-content: flex-end;
     gap: 15px;
-    background: #f8f9fa;
+    background: var(--ui-surface-soft);
     border-radius: 0 0 12px 12px;
 }
 

Web/templates/student_card_barcode_print.html

@@ -45,7 +45,7 @@
         }
 
         h1 {
-            color: #333;
+            color: var(--ui-text);
             font-size: 28px;
             margin-bottom: 10px;
         }
@@ -67,7 +67,7 @@
         }
 
         .info-box strong {
-            color: #333;
+            color: var(--ui-text);
         }
 
         .info-box p {
@@ -106,7 +106,7 @@
 
         .btn-secondary {
             background: #e0e0e0;
-            color: #333;
+            color: var(--ui-text);
         }
 
         .btn-secondary:hover {

Web/templates/student_cards_admin.html

@@ -22,7 +22,7 @@
     }
 
     .student-card-form {
-        background: #f5f5f5;
+        background: var(--ui-bg);
         padding: 20px;
         border-radius: 8px;
         margin-bottom: 30px;
@@ -43,7 +43,7 @@
     .form-group label {
         font-weight: 600;
         margin-bottom: 5px;
-        color: #333;
+        color: var(--ui-text);
     }
 
     .form-group input,

Web/templates/terminplan.html

@@ -51,6 +51,8 @@
                     <label for="booking-type">Reservierungstyp:</label>
                     <select id="booking-type" name="booking_type">
                         <option value="single">Einzeltermin</option>
+                        <option value="range">Zeitraum</option>
+                        <option value="recurring">Wiederkehrend</option>
                     </select>
                 </div>
                 
@@ -624,6 +626,7 @@ document.addEventListener('DOMContentLoaded', function() {
         }
         
         const userId = document.getElementById('user-id').value || 'Admin';  // Get user ID or use fallback
+        const bookingType = document.getElementById('booking-type').value;
 
         // Convert JSON data to FormData
         const formData = new FormData();
@@ -631,16 +634,43 @@ document.addEventListener('DOMContentLoaded', function() {
         // Add all required fields with correct names the server expects
         formData.append('item_id', itemId);
         formData.append('booking_date', startDate);
-        formData.append('booking_end_date', startDate); // For single bookings, end = start
         formData.append('period_start', periodStart);
         formData.append('period_end', periodEnd);
         formData.append('notes', document.getElementById('booking-notes').value || '');
-        formData.append('booking_type', document.getElementById('booking-type').value);
         formData.append('user_id', userId);
         
+        if (bookingType === 'range') {
+            const endDate = document.getElementById('booking-end-date').value;
+            if (!endDate) {
+                alert('Bitte wählen Sie ein Enddatum für den Zeitraum.');
+                return;
+            }
+            formData.append('booking_end_date', endDate);
+            formData.append('booking_type', 'range');
+        } else if (bookingType === 'recurring') {
+            formData.append('booking_type', 'single'); // Server expects 'single' structure for these individually sent requests
+            const dates = calculateDates();
+            if (dates.length === 0) {
+                alert('Es konnten keine Termine berechnet werden. Bitte überprüfen Sie Ihre Eingaben.');
+                return;
+            }
+            if (confirm(`Möchten Sie wirklich ${dates.length} Termine planen?`)) {
+                processMultipleDates(formData, dates, periodStart, periodEnd);
+            }
+            return; // Use processMultipleDates instead
+        } else {
+            formData.append('booking_end_date', startDate); // For single bookings, end = start
+            formData.append('booking_type', 'single');
+        }
+        
+        const csrfToken = document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').content : '';
+        
         // Submit with FormData instead of JSON
         fetch('/plan_booking', {
             method: 'POST',
+            headers: {
+                'X-CSRFToken': csrfToken
+            },
             body: formData // Remove the Content-Type header and JSON.stringify
         })
         .then(response => {
@@ -681,8 +711,12 @@ document.addEventListener('DOMContentLoaded', function() {
     // Cancel booking
     document.getElementById('cancel-booking').addEventListener('click', function() {
         if (confirm('Möchten Sie diese Ausleihe wirklich stornieren?')) {
+            const csrfToken = document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').content : '';
             fetch('/cancel_booking/' + currentEventId, {
-                method: 'POST'
+                method: 'POST',
+                headers: {
+                    'X-CSRFToken': csrfToken
+                }
             })
             .then(response => response.json())
             .then(data => {
@@ -1131,8 +1165,12 @@ document.addEventListener('DOMContentLoaded', function() {
                 newFormData.get('end_date'));
             
             // Submit this booking
+            const csrfToken = document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').content : '';
             fetch('/plan_booking', {
                 method: 'POST',
+                headers: {
+                    'X-CSRFToken': csrfToken
+                },
                 body: newFormData
             })
             .then(response => response.json())
@@ -1563,7 +1601,7 @@ document.addEventListener('DOMContentLoaded', function() {
 .booking-summary {
     margin: 15px 0;
     padding: 10px;
-    background-color: #f8f9fa;
+    background-color: var(--ui-surface-soft);
     border: 1px solid #ddd;
     border-radius: 4px;
     font-size: 0.9em;

Web/templates/tutorial.html

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

Web/templates/upload_admin.html

@@ -78,14 +78,14 @@
 
     .book-info {
         padding: 15px;
-        background-color: #fff;
+        background-color: var(--ui-surface);
         border: 1px solid #ddd;
         border-radius: 5px;
         margin-bottom: 10px;
     }
 
     .book-info h4 {
-        color: #333;
+        color: var(--ui-text);
         margin: 0 0 10px 0;
         font-size: 1.2em;
         font-weight: bold;
@@ -115,7 +115,7 @@
     }
 
     .book-description h5 {
-        color: #333;
+        color: var(--ui-text);
         margin: 0 0 8px 0;
         font-size: 1em;
         font-weight: bold;
@@ -125,7 +125,7 @@
         max-height: 150px;
         overflow-y: auto;
         padding: 5px;
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         border: 1px solid #e9ecef;
         border-radius: 3px;
         font-size: 0.9em;
@@ -187,7 +187,7 @@
         font-style: italic;
         text-align: center;
         padding: 20px;
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         border: 1px solid #dee2e6;
         border-radius: 4px;
     }
@@ -334,7 +334,7 @@
     }
 
     .popup-content p {
-        color: #333;
+        color: var(--ui-text);
         margin: 15px 0;
         line-height: 1.5;
         font-size: 1em;
@@ -380,7 +380,7 @@
     }
 
     .popup-close-x:hover {
-        color: #333;
+        color: var(--ui-text);
     }
 
     /* Upload form styles */
@@ -388,13 +388,13 @@
         max-width: 800px;
         margin: 0 auto;
         padding: 20px;
-        background-color: #fff;
+        background-color: var(--ui-surface);
         border-radius: 8px;
         box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     }
 
     .upload-form h1 {
-        color: #333;
+        color: var(--ui-text);
         margin-bottom: 30px;
         text-align: center;
         font-size: 2em;
@@ -408,7 +408,7 @@
         display: block;
         margin-bottom: 5px;
         font-weight: bold;
-        color: #333;
+        color: var(--ui-text);
     }
 
     .form-group input,
@@ -428,14 +428,14 @@
     }
 
     .filter-inputs {
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         padding: 20px;
         border-radius: 5px;
         margin: 20px 0;
     }
 
     .filter-inputs h3 {
-        color: #333;
+        color: var(--ui-text);
         margin-bottom: 15px;
         font-size: 1.2em;
     }
@@ -863,7 +863,7 @@
                 <input type="date" id="anschaffungsjahr" name="anschaffungsjahr">
             </div>
             <div class="form-group">
-                <label for="anschaffungskosten">Anschaffungskosten</label>
+                <label for="anschaffungskosten">Anschaffungskosten (€)</label>
                 <input id="anschaffungskosten" name="anschaffungskosten">
             </div>
             <div class="form-group">

Web/templates/user_del.html

@@ -407,14 +407,14 @@
     }
     
     .filter-bar {
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         padding: 15px;
         border-radius: 6px;
         border: 1px solid #dee2e6;
     }
 
     .password-requirements {
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         padding: 10px;
         border-radius: 4px;
         margin-top: 10px;
@@ -439,7 +439,7 @@
         border: 1px solid #dee2e6;
         border-radius: 8px;
         padding: 12px;
-        background: #f8fafc;
+        background: var(--ui-surface-soft);
     }
 
     .permissions-group h6 {

Web/test_terminplan.py

@@ -0,0 +1,7 @@
+from app import app
+with app.test_client() as client:
+    with client.session_transaction() as sess:
+        sess['username'] = 'admin'
+        sess['admin'] = True
+    resp = client.get('/terminplan')
+    print("Status:", resp.status_code)

build-nuitka.sh

@@ -1,107 +0,0 @@
-#!/usr/bin/env bash
-set -euo pipefail
-
-SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-cd "$SCRIPT_DIR"
-
-SUDO=""
-if [ "$(id -u)" -ne 0 ] && command -v sudo >/dev/null 2>&1; then
-    SUDO="sudo"
-fi
-
-VENV_PYTHON="$SCRIPT_DIR/.venv/bin/python"
-if [ ! -x "$VENV_PYTHON" ]; then
-    echo "Error: .venv python not found at $VENV_PYTHON"
-    echo "Create it first, e.g.: python3 -m venv .venv && source .venv/bin/activate && pip install -r requirements.txt"
-    exit 1
-fi
-
-if [ "$(id -u)" -ne 0 ] && [ ! -w "$SCRIPT_DIR/.venv" ]; then
-    echo "Fixing ownership of .venv for current user..."
-    if [ -n "$SUDO" ]; then
-        $SUDO chown -R "$(id -un):$(id -gn)" "$SCRIPT_DIR/.venv"
-    else
-        echo "Error: .venv is not writable and sudo is unavailable."
-        exit 1
-    fi
-fi
-
-for path in "$SCRIPT_DIR/dist" "$SCRIPT_DIR/build"; do
-    if [ -e "$path" ] && [ "$(id -u)" -ne 0 ]; then
-        echo "Ensuring ownership of $(basename "$path") for current user..."
-        if [ -n "$SUDO" ]; then
-            $SUDO chown -R "$(id -un):$(id -gn)" "$path"
-        else
-            if [ ! -w "$path" ]; then
-                echo "Error: $path is not writable and sudo is unavailable."
-                exit 1
-            fi
-        fi
-    fi
-done
-
-echo "Installing Nuitka build dependencies in .venv..."
-"$VENV_PYTHON" -m pip install --upgrade pip setuptools wheel
-"$VENV_PYTHON" -m pip install --upgrade "nuitka==2.8.10" ordered-set zstandard
-
-DIST_DIR="$SCRIPT_DIR/dist"
-BUILD_DIR="$SCRIPT_DIR/build"
-OUTPUT_NAME="inventarsystem"
-
-mkdir -p "$DIST_DIR" "$BUILD_DIR"
-
-NUITKA_DATA_ARGS=()
-
-if [ -d "$SCRIPT_DIR/Web/templates" ]; then
-    NUITKA_DATA_ARGS+=("--include-data-dir=$SCRIPT_DIR/Web/templates=templates")
-fi
-
-if [ -d "$SCRIPT_DIR/Web/static" ]; then
-    NUITKA_DATA_ARGS+=("--include-data-dir=$SCRIPT_DIR/Web/static=static")
-fi
-
-if [ -d "$SCRIPT_DIR/uploads" ]; then
-    NUITKA_DATA_ARGS+=("--include-data-dir=$SCRIPT_DIR/uploads=uploads")
-fi
-
-ORIGINAL_PERF_PARANOID=""
-if [ -r /proc/sys/kernel/perf_event_paranoid ]; then
-    ORIGINAL_PERF_PARANOID="$(cat /proc/sys/kernel/perf_event_paranoid)"
-    if [ "$ORIGINAL_PERF_PARANOID" -gt 1 ]; then
-        echo "Temporarily setting kernel.perf_event_paranoid=1 for Nuitka build compatibility..."
-        if ! $SUDO sh -c 'echo 1 > /proc/sys/kernel/perf_event_paranoid'; then
-            echo "Warning: Could not adjust kernel.perf_event_paranoid automatically."
-            echo "Run: sudo sh -c 'echo 1 > /proc/sys/kernel/perf_event_paranoid' and retry."
-            exit 1
-        fi
-    fi
-fi
-
-restore_perf_setting() {
-    if [ -n "$ORIGINAL_PERF_PARANOID" ] && [ "$ORIGINAL_PERF_PARANOID" -gt 1 ]; then
-        $SUDO sh -c "echo $ORIGINAL_PERF_PARANOID > /proc/sys/kernel/perf_event_paranoid" >/dev/null 2>&1 || true
-    fi
-}
-
-trap restore_perf_setting EXIT
-
-echo "Building standalone binary with Nuitka..."
-"$VENV_PYTHON" -m nuitka \
-    --standalone \
-    --assume-yes-for-downloads \
-    --follow-imports \
-    --output-dir="$DIST_DIR" \
-    --output-filename="$OUTPUT_NAME" \
-    "${NUITKA_DATA_ARGS[@]}" \
-    --remove-output \
-    "$SCRIPT_DIR/Web/app.py"
-
-APP_DIST_DIR="$DIST_DIR/app.dist"
-if [ -d "$APP_DIST_DIR" ]; then
-    echo "Nuitka build complete."
-    echo "Run with: $APP_DIST_DIR/$OUTPUT_NAME"
-else
-    echo "Build finished, but expected output directory not found: $APP_DIST_DIR"
-    echo "Check Nuitka output above."
-    exit 1
-fi

debug_booking.py

@@ -0,0 +1,74 @@
+#!/usr/bin/env python3
+"""
+Debug script to check why planned bookings are not being activated
+"""
+import sys
+import os
+import datetime
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'Web'))
+
+from pymongo import MongoClient
+import settings as cfg
+import ausleihung as au
+
+def check_bookings():
+    """Check all planned bookings and their status"""
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+    db = client[cfg.MONGODB_DB]
+    ausleihungen = db['ausleihungen']
+    
+    # Get all planned bookings
+    planned = list(ausleihungen.find({'Status': 'planned'}))
+    
+    print(f"\n📊 Gefundene GEPLANTE Ausleihen: {len(planned)}\n")
+    print("=" * 100)
+    
+    current_time = datetime.datetime.now()
+    print(f"⏰ Aktuelle Zeit: {current_time}\n")
+    
+    for booking in planned:
+        booking_id = str(booking['_id'])
+        user = booking.get('User', 'N/A')
+        item = booking.get('Item', 'N/A')
+        start = booking.get('Start')
+        end = booking.get('End')
+        period = booking.get('Period')
+        status = booking.get('Status')
+        
+        print(f"\n🔹 Ausleihe ID: {booking_id}")
+        print(f"   Benutzer: {user}")
+        print(f"   Item: {item}")
+        print(f"   Status: {status}")
+        print(f"   Schulstunde/Periode: {period}")
+        print(f"   Start: {start} (Typ: {type(start).__name__})")
+        print(f"   Ende: {end} (Typ: {type(end).__name__})")
+        
+        # Check current status
+        current_status = au.get_current_status(booking, log_changes=False)
+        print(f"   ✓ Berechneter Status: {current_status}")
+        
+        if current_status != status:
+            print(f"   ⚠️  STATUS STIMMT NICHT ÜBEREIN! Sollte sein: {current_status}")
+        
+        # Check time comparison
+        if start:
+            time_diff = (current_time - start).total_seconds()
+            if time_diff < 0:
+                print(f"   ⏳ Startet in: {abs(time_diff) / 60:.1f} Minuten")
+            elif time_diff < 3600:
+                print(f"   ✓ Sollte JETZT AKTIV sein! ({time_diff / 60:.1f} Minuten vorbei)")
+            else:
+                print(f"   ✓ Sollte schon {time_diff / 3600:.1f} Stunden aktiv sein!")
+    
+    print("\n" + "=" * 100)
+    
+    # Check active bookings too
+    active = list(ausleihungen.find({'Status': 'active'}))
+    print(f"\n✓ AKTIVE Ausleihen: {len(active)}")
+    for booking in active:
+        print(f"  - {booking.get('User', 'N/A')}: {booking.get('Item', 'N/A')} (Periode: {booking.get('Period')})")
+    
+    client.close()
+
+if __name__ == '__main__':
+    check_bookings()

docker-compose-multitenant.yml

@@ -8,16 +8,28 @@
 # Scale example: To support 10 tenants with 20 users each:
 #   docker-compose -f docker-compose-multitenant.yml up -d --scale app=10
 
-version: '3.9'
-
 services:
+  # Management Container for multi-tenant scripts
+  tenant-manager:
+    image: docker:cli
+    container_name: tenant-manager
+    restart: "no"
+    profiles:
+      - tools
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - .:/workspace
+    entrypoint: ["sh", "-c", "cd /workspace && ./manage-tenant.sh \"$$@\"", "--"]
+
   nginx:
     image: nginx:1.27-alpine
     container_name: inventarsystem-nginx
     restart: unless-stopped
     depends_on:
-      - app
-      - redis
+      app:
+        condition: service_started
+      redis:
+        condition: service_started
     ports:
       - "${INVENTAR_HTTP_PORT:-80}:80"
       - "${INVENTAR_HTTPS_PORT:-443}:443"
@@ -194,3 +206,4 @@ networks:
 # - Medium (5-10 tenants): 4GB RAM, 2-4 CPU cores  
 # - Large (10-20 tenants): 8GB RAM, 4-8 CPU cores
 # - Jumbo (20+ tenants): 16GB+ RAM, 8+ CPU cores with clustering
+

docker-compose.yml

@@ -4,7 +4,8 @@ services:
     container_name: inventarsystem-nginx
     restart: unless-stopped
     depends_on:
-      - app
+      app:
+        condition: service_started
     ports:
       - "${INVENTAR_HTTP_PORT:-80}:80"
       - "${INVENTAR_HTTPS_PORT:-443}:443"

flask.pid

@@ -0,0 +1 @@
+394722

install.sh

@@ -68,45 +68,85 @@ with open(compose_file, "r", encoding="utf-8") as f:
     lines = f.readlines()
 
 out = []
-in_app = False
-in_build = False
-image_set = False
+in_app_service = False
+app_indent = None
+app_service_indent = None
+build_found = False
 
-for line in lines:
+def leading_spaces(text):
+    return len(text) - len(text.lstrip(" "))
+
+i = 0
+while i < len(lines):
+    line = lines[i]
     stripped = line.lstrip(" ")
-    indent = len(line) - len(stripped)
+    indent = leading_spaces(line)
 
-    if not in_app and re.match(r"^\s{2}app:\s*$", line):
-        in_app = True
-        image_set = False
+    # Check if we're starting the app service
+    if not in_app_service and re.match(r"^\s*app:\s*$", line):
+        in_app_service = True
+        app_indent = indent
+        app_service_indent = None
+        build_found = False
         out.append(line)
-        out.append(f"    image: {target_image}\n")
-        image_set = True
+        i += 1
         continue
 
-    if in_app:
-        if indent == 2 and re.match(r"^[A-Za-z0-9_-]+:\s*$", stripped):
-            in_app = False
-            in_build = False
+    # Check if we've exited the app service (found another top-level service)
+    if in_app_service and indent <= app_indent and re.match(r"^[A-Za-z0-9_-]+:\s*$", stripped):
+        # We've left the app service - insert image if we haven't already
+        if build_found and app_service_indent is not None:
+            out.append(f"{' ' * app_service_indent}image: {target_image}\n")
+        in_app_service = False
+        out.append(line)
+        i += 1
+        continue
 
-        if in_app:
-            if in_build:
-                if indent > 4:
-                    continue
-                in_build = False
+    # Process lines within the app service
+    if in_app_service:
+        if app_service_indent is None and indent > app_indent:
+            app_service_indent = indent
 
-            if re.match(r"^\s{4}build:\s*$", line):
-                in_build = True
-                continue
+        # Check for image key (already has an image, don't add)
+        if re.match(rf"^\s+image:\s*", line):
+            in_app_service = False
+            out.append(line)
+            i += 1
+            continue
 
-            if re.match(r"^\s{4}image:\s*", line):
-                if image_set:
-                    continue
-                out.append(f"    image: {target_image}\n")
-                image_set = True
-                continue
+        # Check for build block
+        if re.match(rf"^\s+build:\s*$", line):
+            build_found = True
+            out.append(line)
+            i += 1
+            # Skip all lines that are part of the build block (indented more than app_service_indent)
+            while i < len(lines):
+                next_line = lines[i]
+                next_indent = leading_spaces(next_line)
+                if next_indent > app_service_indent and next_line.strip():
+                    out.append(next_line)
+                    i += 1
+                else:
+                    break
+            continue
+
+        # Insert image after build block before first property
+        if build_found and app_service_indent is not None and indent == app_service_indent:
+            # Check if this is a property line (not build)
+            if not re.match(rf"^\s+build:", line):
+                out.append(f"{' ' * app_service_indent}image: {target_image}\n")
+                build_found = False  # Mark that we've inserted the image
+
+        out.append(line)
+        i += 1
+        continue
 
     out.append(line)
+    i += 1
+
+# If we ended while still in the app service, append image at the end
+if in_app_service and build_found and app_service_indent is not None:
+    out.append(f"{' ' * app_service_indent}image: {target_image}\n")
 
 with open(compose_file, "w", encoding="utf-8") as f:
     f.writelines(out)

manage-tenant.sh

@@ -0,0 +1,142 @@
+#!/bin/sh
+# Script to manage multitenant deployment
+# Allows adding, removing, and restarting tenants without downtime for others
+
+if [ ! -f "docker-compose-multitenant.yml" ]; then
+    echo "Error: docker-compose-multitenant.yml not found."
+    exit 1
+fi
+
+show_help() {
+    echo "Usage: ./manage-tenant.sh [COMMAND] [OPTIONS]"
+    echo ""
+    echo "Commands:"
+    echo "  add <tenant_id>       Add a new tenant (initializes database)"
+    echo "  remove <tenant_id>    Remove a tenant completely (deletes data!)"
+    echo "  restart-tenant <id>   'Restart' a single tenant (clears cache/sessions)"
+    echo "  restart-all           Restart all application containers (zero-downtime reload)"
+    echo "  list                  List active tenants"
+    echo ""
+    echo "Examples:"
+    echo "  ./manage-tenant.sh add school_a"
+    echo "  ./manage-tenant.sh remove test_tenant"
+    echo "  ./manage-tenant.sh restart-all"
+    exit 1
+}
+
+if [ -z "$1" ]; then
+    show_help
+fi
+
+COMMAND=$1
+TENANT_ID=$2
+
+case "$COMMAND" in
+    add)
+        if [ -z "$TENANT_ID" ]; then
+            echo "Error: Please provide a tenant_id."
+            exit 1
+        fi
+        echo "Adding new tenant '$TENANT_ID'..."
+        # Add Nginx configuration
+        if [ -f "docker/nginx/multitenant.conf" ]; then
+            echo "Assuming dynamic routing based on subdomain ($TENANT_ID)..."
+        fi
+        
+        # Initialize tenant database via Python inside container
+        echo "Initializing database for $TENANT_ID..."
+        APP_CONTAINER=$(docker ps -qf "name=app" | head -n 1)
+        if [ -n "$APP_CONTAINER" ]; then
+            docker exec $APP_CONTAINER python3 -c "
+import sys; sys.path.insert(0, '/app/Web'); import settings; from pymongo import MongoClient
+client = MongoClient(settings.MONGODB_HOST, int(settings.MONGODB_PORT))
+db = client[f'{settings.MONGODB_DB}_{sys.argv[1]}']
+db.users.insert_one({'username': 'admin', 'password': 'hashed_password_here', 'role': 'admin'})
+print(f'Tenant {sys.argv[1]} database initialized.')
+" "$TENANT_ID"
+            echo "Tenant '$TENANT_ID' successfully added. Ready to use."
+        else
+            echo "Warning: Application container is not running. Please start the multi-tenant system first."
+            echo "Data will be initialized upon first access by the tenant."
+        fi
+        ;;
+    
+    remove)
+        if [ -z "$TENANT_ID" ]; then
+            echo "Error: Please provide a tenant_id to remove."
+            exit 1
+        fi
+        echo -n "WARNING: Are you sure you want to permanently delete all data for tenant '$TENANT_ID'? (y/N) "
+        read confirm
+        if [ "$confirm" = "y" ] || [ "$confirm" = "Y" ]; then
+            echo "Removing tenant '$TENANT_ID'..."
+            APP_CONTAINER=$(docker ps -qf "name=app" | head -n 1)
+            if [ -n "$APP_CONTAINER" ]; then
+                docker exec $APP_CONTAINER python3 -c "
+import sys; sys.path.insert(0, '/app/Web'); import settings; from pymongo import MongoClient
+client = MongoClient(settings.MONGODB_HOST, int(settings.MONGODB_PORT))
+client.drop_database(f'{settings.MONGODB_DB}_{sys.argv[1]}')
+print(f'Database for tenant {sys.argv[1]} dropped.')
+" "$TENANT_ID"
+                echo "Tenant '$TENANT_ID' removed successfully."
+            else
+                echo "Error: Application container not running."
+            fi
+        else
+            echo "Removal canceled."
+        fi
+        ;;
+
+    restart-tenant)
+        if [ -z "$TENANT_ID" ]; then
+            echo "Error: Please provide a tenant_id."
+            exit 1
+        fi
+        echo "Restarting tenant '$TENANT_ID' (clearing session/cache)..."
+        # To restart a single tenant without restarting the global python processes,
+        # we can invalidate their cache or drop their sessions collection to sign everyone out
+        APP_CONTAINER=$(docker ps -qf "name=app" | head -n 1)
+        if [ -n "$APP_CONTAINER" ]; then
+            docker exec $APP_CONTAINER python3 -c "
+import sys; sys.path.insert(0, '/app/Web'); import settings; from pymongo import MongoClient
+client = MongoClient(settings.MONGODB_HOST, int(settings.MONGODB_PORT))
+db = client[f'{settings.MONGODB_DB}_{sys.argv[1]}']
+db.sessions.drop() # Force sign-out / session clear
+print(f'Tenant {sys.argv[1]} session cache cleared. Tenant restarted.')
+" "$TENANT_ID"
+            echo "Tenant '$TENANT_ID' has been refreshed without impacting others."
+        else
+             echo "Error: Application container not running."
+        fi
+        ;;
+
+    restart-all)
+        echo "Restarting all application instances with zero-downtime rolling restart..."
+        docker restart $(docker ps -qf "name=app")
+        echo "Global restart complete."
+        ;;
+        
+    list)
+        echo "Listing active tenants (Databases):"
+        APP_CONTAINER=$(docker ps -qf "name=app" | head -n 1)
+        if [ -n "$APP_CONTAINER" ]; then
+             docker exec $APP_CONTAINER python3 -c "
+import sys; sys.path.insert(0, '/app/Web'); import settings; from pymongo import MongoClient
+client = MongoClient(settings.MONGODB_HOST, int(settings.MONGODB_PORT))
+prefix = f'{settings.MONGODB_DB}_'
+dbs = [d for d in client.list_database_names() if d.startswith(prefix)]
+for db in dbs:
+    print(f'- {db.replace(prefix, \"\")}')
+"
+        else
+            echo "Error: Application container not running."
+        fi
+        ;;
+
+    *)
+        echo "Unknown command: $COMMAND"
+        show_help
+        ;;
+esac
+
+exit 0

requirements.txt

@@ -12,4 +12,5 @@ redis
 reportlab
 python-barcode
 openpyxl
-cryptography
+cryptography
+pywebpush

run-tenant-cmd.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+# Wrapper to run tenant management fully containerized via docker-compose
+docker compose -f docker-compose-multitenant.yml --profile tools run --rm tenant-manager "$@"

test_ausleihung.py

@@ -0,0 +1,588 @@
+"""
+Test Suite for Ausleihung (Borrowing) System
+Tests all core functionality of the borrowing/lending module
+
+Run with: pytest test_ausleihung.py -v
+"""
+
+import pytest
+import datetime
+from bson.objectid import ObjectId
+import sys
+import os
+
+# Add Web directory to path
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'Web'))
+
+import ausleihung
+import settings as cfg
+from settings import MongoClient
+
+
+@pytest.fixture(scope='session')
+def db_client():
+    """Create MongoDB connection for tests"""
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+    yield client
+    client.close()
+
+
+@pytest.fixture(scope='session')
+def test_db(db_client):
+    """Get test database"""
+    return db_client[cfg.MONGODB_DB]
+
+
+@pytest.fixture(autouse=True)
+def cleanup_test_data(test_db):
+    """Clean up test data before and after each test"""
+    yield
+    # Clean up after test
+    test_db['ausleihungen'].delete_many({})
+
+
+@pytest.fixture
+def sample_ausleihung_data():
+    """Fixture with sample borrowing data"""
+    now = datetime.datetime.now()
+    return {
+        'item_id': str(ObjectId()),
+        'user': 'test_user',
+        'start_date': now,
+        'end_date': now + datetime.timedelta(days=1),
+        'notes': 'Test borrowing',
+        'period': None
+    }
+
+
+# ============================================================================
+# Status Determination Tests
+# ============================================================================
+
+class TestGetCurrentStatus:
+    """Test status determination based on dates"""
+    
+    def test_planned_status_future_date(self):
+        """Test that future borrowing is marked as 'planned'"""
+        future_time = datetime.datetime.now() + datetime.timedelta(days=1)
+        ausleihung_doc = {
+            'Status': 'planned',
+            'Start': future_time,
+            'End': future_time + datetime.timedelta(hours=1)
+        }
+        status = ausleihung.get_current_status(ausleihung_doc)
+        assert status == 'planned'
+    
+    def test_active_status_during_borrowing(self):
+        """Test that current borrowing is marked as 'active'"""
+        now = datetime.datetime.now()
+        start = now - datetime.timedelta(hours=1)
+        end = now + datetime.timedelta(hours=1)
+        ausleihung_doc = {
+            'Status': 'active',
+            'Start': start,
+            'End': end
+        }
+        status = ausleihung.get_current_status(ausleihung_doc)
+        assert status == 'active'
+    
+    def test_completed_status_after_end_time(self):
+        """Test that past borrowing is marked as 'completed'"""
+        now = datetime.datetime.now()
+        start = now - datetime.timedelta(days=2)
+        end = now - datetime.timedelta(hours=1)
+        ausleihung_doc = {
+            'Status': 'active',
+            'Start': start,
+            'End': end
+        }
+        status = ausleihung.get_current_status(ausleihung_doc)
+        assert status == 'completed'
+    
+    def test_cancelled_status_remains_cancelled(self):
+        """Test that cancelled status is never changed"""
+        future_time = datetime.datetime.now() + datetime.timedelta(days=1)
+        ausleihung_doc = {
+            'Status': 'cancelled',
+            'Start': future_time,
+            'End': future_time + datetime.timedelta(hours=1)
+        }
+        status = ausleihung.get_current_status(ausleihung_doc)
+        assert status == 'cancelled'
+    
+    def test_active_with_no_end_time(self):
+        """Test that borrowing without end time stays active if started"""
+        now = datetime.datetime.now()
+        start = now - datetime.timedelta(hours=1)
+        ausleihung_doc = {
+            'Status': 'active',
+            'Start': start,
+            'End': None
+        }
+        status = ausleihung.get_current_status(ausleihung_doc)
+        assert status == 'active'
+
+
+# ============================================================================
+# Create and Update Tests
+# ============================================================================
+
+class TestCreateAusleihung:
+    """Test creating new borrowings"""
+    
+    def test_create_active_ausleihung(self, test_db):
+        """Test creating an immediately active borrowing"""
+        item_id = str(ObjectId())
+        user = 'test_user'
+        start = datetime.datetime.now()
+        end = start + datetime.timedelta(hours=2)
+        
+        result = ausleihung.add_ausleihung(
+            item_id=item_id,
+            user=user,
+            start_date=start,
+            end_date=end,
+            notes='Test active',
+            status='active'
+        )
+        
+        assert result is not None
+        
+        # Verify in database
+        ausleihung_col = test_db['ausleihungen']
+        stored = ausleihung_col.find_one({'_id': result})
+        assert stored is not None
+        assert stored['Item'] == item_id  # Correct field name
+        assert stored['User'] == user
+        assert stored['Status'] == 'active'
+    
+    def test_create_planned_ausleihung(self, test_db):
+        """Test creating a future/planned borrowing"""
+        item_id = str(ObjectId())
+        user = 'test_user'
+        future_start = datetime.datetime.now() + datetime.timedelta(days=1)
+        future_end = future_start + datetime.timedelta(hours=2)
+        
+        result = ausleihung.add_ausleihung(
+            item_id=item_id,
+            user=user,
+            start_date=future_start,
+            end_date=future_end,
+            notes='Test planned',
+            status='planned'
+        )
+        
+        assert result is not None
+        
+        ausleihung_col = test_db['ausleihungen']
+        stored = ausleihung_col.find_one({'_id': result})
+        assert stored['Status'] == 'planned'
+        # Check approximately equal (within 1 second for datetime precision)
+        assert abs((stored['Start'] - future_start).total_seconds()) < 1
+
+
+class TestUpdateAusleihung:
+    """Test updating existing borrowings"""
+    
+    def test_update_ausleihung_dates(self, test_db, sample_ausleihung_data):
+        """Test updating borrowing dates"""
+        # Create initial borrowing
+        ausleihung_id = ausleihung.add_ausleihung(**sample_ausleihung_data)
+        assert ausleihung_id is not None
+        
+        # Update dates
+        new_start = datetime.datetime.now() + datetime.timedelta(days=2)
+        new_end = new_start + datetime.timedelta(hours=1)
+        
+        ausleihung.update_ausleihung(
+            id=ausleihung_id,
+            start=new_start,
+            end=new_end
+        )
+        
+        # Verify update (within 1 second tolerance for datetime precision)
+        stored = test_db['ausleihungen'].find_one({'_id': ausleihung_id})
+        assert abs((stored['Start'] - new_start).total_seconds()) < 1
+        assert abs((stored['End'] - new_end).total_seconds()) < 1
+    
+    def test_update_ausleihung_status(self, test_db, sample_ausleihung_data):
+        """Test updating borrowing status"""
+        ausleihung_id = ausleihung.add_ausleihung(**sample_ausleihung_data)
+        
+        ausleihung.update_ausleihung(id=ausleihung_id, status='completed')
+        
+        stored = test_db['ausleihungen'].find_one({'_id': ausleihung_id})
+        assert stored['Status'] == 'completed'
+    
+    def test_update_ausleihung_notes(self, test_db, sample_ausleihung_data):
+        """Test updating borrowing notes"""
+        ausleihung_id = ausleihung.add_ausleihung(**sample_ausleihung_data)
+        new_notes = 'Updated notes'
+        
+        ausleihung.update_ausleihung(id=ausleihung_id, notes=new_notes)
+        
+        stored = test_db['ausleihungen'].find_one({'_id': ausleihung_id})
+        assert stored['Notes'] == new_notes
+
+
+# ============================================================================
+# Complete and Cancel Tests
+# ============================================================================
+
+class TestCompleteAusleihung:
+    """Test completing borrowings"""
+    
+    def test_complete_ausleihung(self, test_db, sample_ausleihung_data):
+        """Test marking a borrowing as completed"""
+        ausleihung_id = ausleihung.add_ausleihung(**sample_ausleihung_data)
+        
+        end_time = datetime.datetime.now()
+        ausleihung.complete_ausleihung(ausleihung_id, end_time=end_time)
+        
+        stored = test_db['ausleihungen'].find_one({'_id': ausleihung_id})
+        assert stored['Status'] == 'completed'
+        assert stored['End'] == end_time or stored['End'] is not None
+
+
+class TestCancelAusleihung:
+    """Test canceling borrowings"""
+    
+    def test_cancel_ausleihung(self, test_db, sample_ausleihung_data):
+        """Test canceling a borrowing"""
+        ausleihung_id = ausleihung.add_ausleihung(**sample_ausleihung_data)
+        
+        ausleihung.cancel_ausleihung(ausleihung_id)
+        
+        stored = test_db['ausleihungen'].find_one({'_id': ausleihung_id})
+        assert stored['Status'] == 'cancelled'
+
+
+# ============================================================================
+# Query Tests
+# ============================================================================
+
+class TestGetAusleihung:
+    """Test retrieving borrowings"""
+    
+    def test_get_ausleihung_by_id(self, test_db, sample_ausleihung_data):
+        """Test fetching a borrowing by ID"""
+        ausleihung_id = ausleihung.add_ausleihung(**sample_ausleihung_data)
+        
+        retrieved = ausleihung.get_ausleihung(ausleihung_id)
+        assert retrieved is not None
+        assert retrieved['_id'] == ausleihung_id
+        assert retrieved['User'] == sample_ausleihung_data['user']
+    
+    def test_get_ausleihung_by_user(self, test_db):
+        """Test retrieving all borrowings for a user"""
+        user = 'test_user_xyz'
+        item1 = str(ObjectId())
+        item2 = str(ObjectId())
+        now = datetime.datetime.now()
+        
+        # Create multiple borrowings for same user
+        ausleihung.add_ausleihung(
+            item_id=item1,
+            user=user,
+            start_date=now,
+            end_date=now + datetime.timedelta(hours=1),
+            status='active'
+        )
+        ausleihung.add_ausleihung(
+            item_id=item2,
+            user=user,
+            start_date=now + datetime.timedelta(days=1),
+            end_date=now + datetime.timedelta(days=1, hours=1),
+            status='planned'
+        )
+        
+        # Retrieve all for user
+        borrowings = ausleihung.get_ausleihung_by_user(user)
+        assert len(borrowings) >= 2
+        assert all(b['User'] == user for b in borrowings)
+    
+    def test_get_ausleihungen_by_status(self, test_db):
+        """Test retrieving borrowings by status"""
+        item_id = str(ObjectId())
+        user = 'test_user'
+        now = datetime.datetime.now()
+        
+        # Create active
+        active_id = ausleihung.add_ausleihung(
+            item_id=item_id,
+            user=user,
+            start_date=now - datetime.timedelta(hours=1),
+            end_date=now + datetime.timedelta(hours=1),
+            status='active'
+        )
+        
+        # Get active borrowings
+        active_borrowings = ausleihung.get_active_ausleihungen()
+        assert any(b['_id'] == active_id for b in active_borrowings)
+
+
+# ============================================================================
+# Conflict Detection Tests
+# ============================================================================
+
+class TestConflictDetection:
+    """Test detecting overlapping/conflicting borrowings"""
+    
+    def test_no_conflict_different_items(self, test_db):
+        """Test that different items don't conflict"""
+        item1 = str(ObjectId())
+        item2 = str(ObjectId())
+        now = datetime.datetime.now()
+        start = now
+        end = now + datetime.timedelta(hours=1)
+        
+        # Create first borrowing
+        ausleihung.add_ausleihung(
+            item_id=item1,
+            user='user1',
+            start_date=start,
+            end_date=end,
+            status='active'
+        )
+        
+        # Check conflict on different item (should be no conflict)
+        conflict = ausleihung.check_ausleihung_conflict(
+            item_id=item2,
+            start_date=start,
+            end_date=end
+        )
+        assert conflict is False
+    
+    def test_conflict_same_item_overlapping(self, test_db):
+        """Test that overlapping borrowings on same item are detected"""
+        item_id = str(ObjectId())
+        now = datetime.datetime.now()
+        
+        # Create first borrowing
+        ausleihung.add_ausleihung(
+            item_id=item_id,
+            user='user1',
+            start_date=now,
+            end_date=now + datetime.timedelta(hours=2),
+            status='active'
+        )
+        
+        # Try to create overlapping borrowing
+        conflict = ausleihung.check_ausleihung_conflict(
+            item_id=item_id,
+            start_date=now + datetime.timedelta(minutes=30),
+            end_date=now + datetime.timedelta(hours=3)
+        )
+        assert conflict is True or conflict == item_id  # Depending on implementation
+    
+    def test_no_conflict_different_times(self, test_db):
+        """Test that non-overlapping borrowings don't conflict"""
+        item_id = str(ObjectId())
+        now = datetime.datetime.now()
+        
+        # Create first borrowing
+        ausleihung.add_ausleihung(
+            item_id=item_id,
+            user='user1',
+            start_date=now,
+            end_date=now + datetime.timedelta(hours=1),
+            status='active'
+        )
+        
+        # Check borrowing after first ends (should be no conflict)
+        conflict = ausleihung.check_ausleihung_conflict(
+            item_id=item_id,
+            start_date=now + datetime.timedelta(hours=2),
+            end_date=now + datetime.timedelta(hours=3)
+        )
+        assert conflict is False or conflict is None
+
+
+# ============================================================================
+# Period-based Borrowing Tests
+# ============================================================================
+
+class TestPeriodBookings:
+    """Test period-based borrowings (school periods)"""
+    
+    def test_create_period_booking(self, test_db):
+        """Test creating a borrowing for a specific school period"""
+        item_id = str(ObjectId())
+        user = 'test_user'
+        today = datetime.datetime.now().date()
+        
+        result = ausleihung.add_ausleihung(
+            item_id=item_id,
+            user=user,
+            start_date=datetime.datetime.combine(today, datetime.time(8, 0)),
+            end_date=datetime.datetime.combine(today, datetime.time(9, 0)),
+            period=1,  # Assuming period 1 is first period
+            status='active'
+        )
+        
+        assert result is not None
+        stored = test_db['ausleihungen'].find_one({'_id': result})
+        assert stored.get('Period') == 1
+
+
+# ============================================================================
+# Remove Tests
+# ============================================================================
+
+class TestRemoveAusleihung:
+    """Test removing/deleting borrowings"""
+    
+    def test_remove_ausleihung(self, test_db, sample_ausleihung_data):
+        """Test deleting a borrowing record (soft delete)"""
+        ausleihung_id = ausleihung.add_ausleihung(**sample_ausleihung_data)
+        stored_before = test_db['ausleihungen'].find_one({'_id': ausleihung_id})
+        assert stored_before is not None
+        
+        # Remove (soft delete - adds DeletedAt timestamp)
+        ausleihung.remove_ausleihung(ausleihung_id)
+        
+        # Verify it's marked as deleted (soft delete)
+        stored_after = test_db['ausleihungen'].find_one({'_id': ausleihung_id})
+        assert stored_after is not None  # Still exists
+        assert 'DeletedAt' in stored_after or stored_after.get('Status') == 'deleted'
+
+
+# ============================================================================
+# Integration Tests
+# ============================================================================
+
+class TestAusleihungLifecycle:
+    """Test complete borrowing lifecycle"""
+    
+    def test_full_lifecycle_active_to_complete(self, test_db):
+        """Test a complete borrowing lifecycle: active → complete"""
+        item_id = str(ObjectId())
+        user = 'test_user'
+        now = datetime.datetime.now()
+        
+        # 1. Create active borrowing
+        ausleihung_id = ausleihung.add_ausleihung(
+            item_id=item_id,
+            user=user,
+            start_date=now - datetime.timedelta(hours=1),
+            end_date=now + datetime.timedelta(hours=1),
+            status='active'
+        )
+        
+        stored = test_db['ausleihungen'].find_one({'_id': ausleihung_id})
+        status = ausleihung.get_current_status(stored)
+        assert status == 'active'
+        
+        # 2. Complete the borrowing
+        ausleihung.complete_ausleihung(ausleihung_id)
+        
+        stored = test_db['ausleihungen'].find_one({'_id': ausleihung_id})
+        status = ausleihung.get_current_status(stored)
+        assert status == 'completed'
+    
+    def test_full_lifecycle_planned_to_active_to_complete(self, test_db):
+        """Test complete lifecycle: planned → active → complete"""
+        item_id = str(ObjectId())
+        user = 'test_user'
+        now = datetime.datetime.now()
+        future = now + datetime.timedelta(hours=1)
+        
+        # 1. Create planned borrowing
+        ausleihung_id = ausleihung.add_ausleihung(
+            item_id=item_id,
+            user=user,
+            start_date=future,
+            end_date=future + datetime.timedelta(hours=1),
+            status='planned'
+        )
+        
+        stored = test_db['ausleihungen'].find_one({'_id': ausleihung_id})
+        assert ausleihung.get_current_status(stored) == 'planned'
+        
+        # 2. Update to active (simulate time passing or manual activation)
+        ausleihung.update_ausleihung(id=ausleihung_id, status='active')
+        stored = test_db['ausleihungen'].find_one({'_id': ausleihung_id})
+        assert stored['Status'] == 'active'
+        
+        # 3. Complete
+        ausleihung.complete_ausleihung(ausleihung_id)
+        stored = test_db['ausleihungen'].find_one({'_id': ausleihung_id})
+        assert ausleihung.get_current_status(stored) == 'completed'
+    
+    def test_cancel_planned_borrowing(self, test_db):
+        """Test canceling a planned borrowing"""
+        item_id = str(ObjectId())
+        user = 'test_user'
+        future = datetime.datetime.now() + datetime.timedelta(days=1)
+        
+        # Create planned
+        ausleihung_id = ausleihung.add_ausleihung(
+            item_id=item_id,
+            user=user,
+            start_date=future,
+            end_date=future + datetime.timedelta(hours=1),
+            status='planned'
+        )
+        
+        # Cancel
+        ausleihung.cancel_ausleihung(ausleihung_id)
+        
+        stored = test_db['ausleihungen'].find_one({'_id': ausleihung_id})
+        assert stored['Status'] == 'cancelled'
+
+
+# ============================================================================
+# Edge Cases
+# ============================================================================
+
+class TestEdgeCases:
+    """Test edge cases and boundary conditions"""
+    
+    def test_borrowing_with_same_start_and_end(self, test_db):
+        """Test borrowing where start equals end"""
+        item_id = str(ObjectId())
+        user = 'test_user'
+        now = datetime.datetime.now()
+        
+        result = ausleihung.add_ausleihung(
+            item_id=item_id,
+            user=user,
+            start_date=now,
+            end_date=now,  # Same time
+            status='active'
+        )
+        
+        assert result is not None
+    
+    def test_borrowing_without_end_date(self, test_db):
+        """Test creating borrowing without end date"""
+        item_id = str(ObjectId())
+        user = 'test_user'
+        now = datetime.datetime.now()
+        
+        result = ausleihung.add_ausleihung(
+            item_id=item_id,
+            user=user,
+            start_date=now,
+            end_date=None,
+            status='active'
+        )
+        
+        assert result is not None
+        stored = test_db['ausleihungen'].find_one({'_id': result})
+        # End field should not exist or be None if not provided
+        assert 'End' not in stored or stored.get('End') is None
+    
+    def test_get_nonexistent_borrowing(self, test_db):
+        """Test retrieving a nonexistent borrowing"""
+        fake_id = ObjectId()
+        result = ausleihung.get_ausleihung(fake_id)
+        assert result is None or result == {} or result == []
+
+
+# ============================================================================
+# Run Tests
+# ============================================================================
+
+if __name__ == '__main__':
+    pytest.main([__file__, '-v', '--tb=short'])

test_terminplan.py

@@ -0,0 +1,5 @@
+from Web.app import app
+with app.test_client() as client:
+    resp = client.get('/terminplan')
+    print(resp.status_code)
+    # print(resp.data.decode('utf-8')[:200])

update.sh

@@ -325,12 +325,35 @@ download_and_extract_bundle() {
         cp -f "$tmp_dir/update.sh" "$PROJECT_DIR/update.sh"
     fi
 
+    # Neu: Multi-Tenant Ressourcen kopieren, falls vorhanden
+    if [ -f "$tmp_dir/docker-compose-multitenant.yml" ]; then
+        cp -f "$tmp_dir/docker-compose-multitenant.yml" "$PROJECT_DIR/docker-compose-multitenant.yml"
+    fi
+    if [ -f "$tmp_dir/docker/nginx/multitenant.conf" ]; then
+        cp -f "$tmp_dir/docker/nginx/multitenant.conf" "$PROJECT_DIR/docker/nginx/multitenant.conf"
+    fi
+    if [ -f "$tmp_dir/manage-tenant.sh" ]; then
+        cp -f "$tmp_dir/manage-tenant.sh" "$PROJECT_DIR/manage-tenant.sh"
+    fi
+    if [ -f "$tmp_dir/run-tenant-cmd.sh" ]; then
+        cp -f "$tmp_dir/run-tenant-cmd.sh" "$PROJECT_DIR/run-tenant-cmd.sh"
+    fi
+    for file in "MULTITENANT_DEPLOYMENT.md" "MULTITENANT_PYTHON_API.md"; do
+        if [ -f "$tmp_dir/$file" ]; then
+            cp -f "$tmp_dir/$file" "$PROJECT_DIR/$file"
+        fi
+    done
+
+    # Ensure executable permissions on all copied scripts
+    chmod +x "$PROJECT_DIR/start.sh" "$PROJECT_DIR/stop.sh" "$PROJECT_DIR/restart.sh" "$PROJECT_DIR/update.sh" "$PROJECT_DIR/backup.sh" "$PROJECT_DIR/init-admin.sh" "$PROJECT_DIR/manage-tenant.sh" "$PROJECT_DIR/run-tenant-cmd.sh" 2>/dev/null || true 2>/dev/null || true
+    chmod +x "$PROJECT_DIR"/manage-tenant.sh "$PROJECT_DIR"/run-tenant-cmd.sh 2>/dev/null || true
+
     if [ ! -f "$PROJECT_DIR/config.json" ] && [ -f "$tmp_dir/config.json" ]; then
         cp -f "$tmp_dir/config.json" "$PROJECT_DIR/config.json"
         log_message "Installed default config.json from release bundle"
     fi
 
-    chmod +x "$PROJECT_DIR/start.sh" "$PROJECT_DIR/stop.sh" "$PROJECT_DIR/restart.sh" "$PROJECT_DIR/update.sh" "$PROJECT_DIR/backup.sh"
+    chmod +x "$PROJECT_DIR/start.sh" "$PROJECT_DIR/stop.sh" "$PROJECT_DIR/restart.sh" "$PROJECT_DIR/update.sh" "$PROJECT_DIR/backup.sh" "$PROJECT_DIR/init-admin.sh" "$PROJECT_DIR/manage-tenant.sh" "$PROJECT_DIR/run-tenant-cmd.sh" 2>/dev/null || true
 }
 
 deploy() {