Fix of some timezone problems

- Add class filter dropdown and class column to borrowings table
- Implement interactive client-side column sorting for tables
- Update backend route to resolve and map user class information

.github/workflows/release-docker.yml

@@ -4,17 +4,20 @@ on:
   push:
     tags:
       - "v*"
+    branches:
+      - main
   workflow_dispatch:
     inputs:
-      bump:
-        description: "Version bump type (major stays fixed from latest release)"
+      release_type:
+        description: "Release type"
         required: false
         default: "patch"
         type: choice
         options:
-          - patch
-          - minor
           - major
+          - minor
+          - patch
+          - dev
 
 permissions:
   contents: write
@@ -38,12 +41,70 @@ jobs:
           REPO: ${{ gitea.repository }}
           EVENT_NAME: ${{ gitea.event_name }}
           REF_NAME: ${{ gitea.ref_name }}
-          BUMP_TYPE: ${{ gitea.event.inputs.bump || 'patch' }}
+          RELEASE_TYPE: ${{ gitea.event.inputs.release_type || 'patch' }}
           DOCKER_API_VERSION: '1.44'
         run: |
-          if [ "$EVENT_NAME" = "push" ] && [ -n "$REF_NAME" ]; then
+          latest_stable_tag() {
+            local releases_file="$1"
+            python3 -c "import json, sys; releases = json.load(open(sys.argv[1], encoding='utf-8')); print(next((release.get('tag_name', '').strip() for release in releases if not release.get('prerelease') and not release.get('draft')), ''))" "$releases_file"
+          }
+
+          next_dev_suffix() {
+            local releases_file="$1"
+            local base_tag="$2"
+            python3 -c "import json, re, sys; releases_path, base_tag = sys.argv[1], sys.argv[2].strip(); pattern = re.compile(r'^' + re.escape(base_tag) + r'-dev\\.(\\d+)$'); releases = json.load(open(releases_path, encoding='utf-8')); highest = max([int(match.group(1)) for release in releases for match in [pattern.match(release.get('tag_name', '').strip())] if match], default=0); print(highest + 1)" "$releases_file" "$base_tag"
+          }
+
+          make_dev_tag() {
+            local releases_file="$1"
+            local stable_tag="$2"
+            local major minor patch next_suffix
+
+            if [[ "$stable_tag" =~ ^v([0-9]+)\.([0-9]+)\.([0-9]+)$ ]]; then
+              major=${BASH_REMATCH[1]}
+              minor=${BASH_REMATCH[2]}
+              patch=${BASH_REMATCH[3]}
+            else
+              major=0
+              minor=8
+              patch=31
+            fi
+
+            patch=$((patch + 1))
+            next_suffix="$(next_dev_suffix "$releases_file" "v${major}.${minor}.${patch}")"
+            printf 'v%s.%s.%s-dev.%s' "$major" "$minor" "$patch" "$next_suffix"
+          }
+
+          releases_file="$(mktemp)"
+          trap 'rm -f "${releases_file:-}"' EXIT
+
+          if [ "$EVENT_NAME" = "push" ] && [ "$REF_NAME" = "main" ]; then
+            prerelease=true
+            if ! curl -fsSL -H "Authorization: Bearer $GH_TOKEN" -H "Accept: application/json" "https://git.invario-software.eu/api/v1/repos/$REPO/releases" -o "$releases_file"; then
+              echo "Error: could not fetch release list"
+              exit 1
+            fi
+            latest_tag="$(latest_stable_tag "$releases_file")"
+            if [ -z "$latest_tag" ]; then
+              latest_tag="v0.8.31"
+            fi
+            TAG="$(make_dev_tag "$releases_file" "$latest_tag")"
+          elif [ "$EVENT_NAME" = "workflow_dispatch" ] && [ "$RELEASE_TYPE" = "dev" ]; then
+            prerelease=true
+            if ! curl -fsSL -H "Authorization: Bearer $GH_TOKEN" -H "Accept: application/json" "https://git.invario-software.eu/api/v1/repos/$REPO/releases" -o "$releases_file"; then
+              echo "Error: could not fetch release list"
+              exit 1
+            fi
+            latest_tag="$(latest_stable_tag "$releases_file")"
+            if [ -z "$latest_tag" ]; then
+              latest_tag="v0.8.31"
+            fi
+            TAG="$(make_dev_tag "$releases_file" "$latest_tag")"
+          elif [ "$EVENT_NAME" = "push" ] && [ -n "$REF_NAME" ]; then
+            prerelease=false
             TAG="$REF_NAME"
           else
+            prerelease=false
             latest_tag="v0.8.31"
             if meta_json=$(curl -fsSL -H "Authorization: Bearer $GH_TOKEN" -H "Accept: application/json" "https://git.invario-software.eu/api/v1/repos/$REPO/releases/latest" 2>/dev/null); then
               tag_name=$(printf "%s" "$meta_json" | sed -n 's/.*"tag_name"[[:space:]]*:[[:space:]]*"\([^"]*\)".*/\1/p' | head -n1)
@@ -60,14 +121,14 @@ jobs:
               major=0; minor=8; patch=31
             fi
 
-            if [ "${BUMP_TYPE:-}" = "major" ]; then
+            if [ "${RELEASE_TYPE:-}" = "major" ]; then
               major=$((major + 1)); minor=0; patch=0
-            elif [ "${BUMP_TYPE:-}" = "minor" ]; then
+            elif [ "${RELEASE_TYPE:-}" = "minor" ]; then
               minor=$((minor + 1)); patch=0
             else
               patch=$((patch + 1))
             fi
-            
+
             TAG="v${major}.${minor}.${patch}"
           fi
 
@@ -109,6 +170,7 @@ jobs:
           echo "tag=$TAG" >> "$GITHUB_OUTPUT"
           echo "image=$IMAGE" >> "$GITHUB_OUTPUT"
           echo "lower_repo=$LOWER_REPO" >> "$GITHUB_OUTPUT"
+          echo "prerelease=$prerelease" >> "$GITHUB_OUTPUT"
 
       - name: Ensure Docker CLI is available and up to date
         run: |
@@ -148,6 +210,7 @@ jobs:
           password: ${{ secrets.REGISTRY_TOKEN }}
 
       - name: Build and push release image
+        if: steps.meta.outputs.prerelease != 'true'
         uses: docker/build-push-action@v6
         with:
           context: .
@@ -157,6 +220,16 @@ jobs:
             ${{ steps.meta.outputs.image }}
             git.invario-software.eu/${{ steps.meta.outputs.lower_repo }}:latest
 
+      - name: Build and push prerelease image
+        if: steps.meta.outputs.prerelease == 'true'
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./Dockerfile
+          push: true
+          tags: |
+            ${{ steps.meta.outputs.image }}
+
       - name: Create release-only docker bundle
         run: |
             mkdir -p release-bundle
@@ -253,5 +326,6 @@ jobs:
         uses: https://gitea.com/actions/gitea-release-action@v1
         with:
           tag_name: ${{ steps.meta.outputs.tag }}
+          prerelease: ${{ steps.meta.outputs.prerelease }}
           files: |
             inventarsystem-docker-bundle.tar.gz

README.md

@@ -1,6 +1,6 @@
 # Inventarsystem
 
-[![https://github.com/AIIrondev/legendary-octo-garbanzo](https://github.com/AIIrondev/legendary-octo-garbanzo/actions/workflows/release-docker.yml/badge.svg)](https://github.com/AIIrondev/legendary-octo-garbanzo/actions/workflows/release-docker.yml)
+[![https://git.invario-software.eu/Invario/Inventarsystem](https://git.invario-software.eu/Invario/Inventarsystem/actions/workflows/release-docker.yml/badge.svg)](https://git.invario-software.eu/Invario/Inventarsystem/actions/workflows/release-docker.yml)
 
 [![wakatime](https://wakatime.com/badge/user/30b8509f-5e17-4d16-b6b8-3ca0f3f936d3/project/8a380b7f-389f-4a7e-8877-0fe9e1a4c243.svg)](https://wakatime.com/badge/user/30b8509f-5e17-4d16-b6b8-3ca0f3f936d3/project/8a380b7f-389f-4a7e-8877-0fe9e1a4c243)
 

Web/modules/database/ausleihung.py

@@ -33,6 +33,8 @@ import json
 import Web.modules.database.settings as cfg
 from Web.modules.database.settings import MongoClient
 import Web.modules.inventarsystem.data_protection as dp
+import Web.modules.database.user as us
+from zoneinfo import ZoneInfo
 
 
 def _get_client():
@@ -40,12 +42,12 @@ def _get_client():
     return MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
 # Add this helper function after imports
 def ensure_timezone_aware(dt):
-    """Ensures a datetime is timezone-aware, using UTC if naive"""
+    """Return a timezone-aware datetime, treating naive DB values as UTC."""
     if dt is None:
         return None
     if dt.tzinfo is None:
-        # Treat naive datetimes as UTC
-        return dt.replace(tzinfo=None)
+        # PyMongo returns BSON datetimes as naive UTC unless tz_aware is enabled.
+        return dt.replace(tzinfo=datetime.timezone.utc)
     return dt
 
 def get_current_status(ausleihung, log_changes=False, user=None):
@@ -79,9 +81,9 @@ def get_current_status(ausleihung, log_changes=False, user=None):
     if original_status == 'completed':
         return 'completed'
     
-    current_time = datetime.datetime.now()
-    start_time = ausleihung.get('Start')
-    end_time = ausleihung.get('End')
+    current_time = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
+    start_time = ensure_timezone_aware(ausleihung.get('Start'))
+    end_time = ensure_timezone_aware(ausleihung.get('End'))
     
     # Wenn kein Startdatum vorhanden ist, Status auf 'planned' setzen
     if not start_time:
@@ -137,7 +139,7 @@ def create_backup_database():
             os.makedirs(backup_dir)
         
         # Aktuelles Datum für den Dateinamen
-        current_date = datetime.datetime.now().strftime('%Y-%m-%d_%H-%M-%S')
+        current_date = datetime.datetime.now(ZoneInfo("Europe/Berlin")).strftime('%Y-%m-%d_%H-%M-%S')
         backup_file = os.path.join(backup_dir, f'ausleihungen_backup_{current_date}.json')
         
         # Ausleihungen abrufen und als JSON speichern
@@ -175,7 +177,7 @@ def create_backup_database():
         
         log_file = os.path.join(log_dir, 'ausleihungen_error.log')
         with open(log_file, 'a', encoding='utf-8') as f:
-            f.write(f"{datetime.datetime.now().strftime('%Y-%m-%d_%H-%M-%S')}: Backup-Fehler: {str(e)}\n")
+            f.write(f"{datetime.datetime.now(ZoneInfo("Europe/Berlin")).strftime('%Y-%m-%d_%H-%M-%S')}: Backup-Fehler: {str(e)}\n")
         
         print(f"Fehler beim Erstellen des Backups: {e}")
         return False
@@ -183,7 +185,7 @@ def create_backup_database():
 
 # === AUSLEIHUNG MANAGEMENT ===
 
-def add_ausleihung(item_id, user, start_date, end_date=None, notes="", status="active", period=None, exemplar_data=None):
+def add_ausleihung(item_id, user, start_date, end_date=None, notes="", status="active", period=None, exemplar_data=None, due_date=None):
     """
     Add a new borrowing record for an item.
     
@@ -204,7 +206,7 @@ def add_ausleihung(item_id, user, start_date, end_date=None, notes="", status="a
         client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
         db = client[cfg.MONGODB_DB]
         ausleihungen = db['ausleihungen']
-        
+
         ausleihung = {
             'Item': item_id,
             'User': dp.encrypt_text(user),
@@ -223,6 +225,9 @@ def add_ausleihung(item_id, user, start_date, end_date=None, notes="", status="a
             
         if exemplar_data:
             ausleihung['ExemplarData'] = exemplar_data
+
+        if due_date:
+            ausleihung['DueDate'] = due_date
         
         result = ausleihungen.insert_one(ausleihung)
         ausleihung_id = result.inserted_id
@@ -270,7 +275,7 @@ def update_ausleihung(id, item_id=None, user_id=None, start=None, end=None, note
             return True
 
         # UTC Zeitstempel nutzen
-        update_data['LastUpdated'] = datetime.datetime.now(datetime.timezone.utc)
+        update_data['LastUpdated'] = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
 
         result = ausleihungen.update_one(
             {'_id': doc_id},
@@ -300,7 +305,7 @@ def complete_ausleihung(id, end_time=None):
     """
     try:
         if end_time is None:
-            end_time = datetime.datetime.now()
+            end_time = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         
         client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
         db = client[cfg.MONGODB_DB]
@@ -312,7 +317,7 @@ def complete_ausleihung(id, end_time=None):
             {'$set': {
                 'End': end_time,
                 'Status': 'completed',
-                'LastUpdated': datetime.datetime.now()
+                'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
             }}
         )
         
@@ -320,7 +325,7 @@ def complete_ausleihung(id, end_time=None):
             {'_id': ObjectId(id)},
             {'$set': {
                 'Verfuegbar': True,
-                'LastUpdated': datetime.datetime.now()
+                'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
             }}
         )
 
@@ -351,7 +356,7 @@ def cancel_ausleihung(id):
             {'_id': ObjectId(id)},
             {'$set': {
                 'Status': 'cancelled',
-                'LastUpdated': datetime.datetime.now()
+                'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
             }}
         )
 
@@ -376,7 +381,7 @@ def remove_ausleihung(id):
         client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
         db = client[cfg.MONGODB_DB]
         ausleihungen = db['ausleihungen']
-        now = datetime.datetime.now()
+        now = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         result = ausleihungen.update_one(
             {'_id': ObjectId(id), 'Status': {'$ne': 'deleted'}},
             {'$set': {
@@ -770,7 +775,7 @@ def activate_ausleihung(id):
                 {'_id': doc_id, 'Status': 'planned'},
                 {'$set': {
                     'Status': 'active',
-                    'LastUpdated': datetime.datetime.now(datetime.timezone.utc)
+                    'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
                 }}
             )
             return result.modified_count > 0
@@ -794,7 +799,7 @@ def reset_item_completely(item_id):
                 return {'success': False, 'message': 'Item nicht gefunden'}
 
             item_name = item.get('Name', 'Unbekannt')
-            now_utc = datetime.datetime.now(datetime.timezone.utc)
+            now_utc = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
 
             # 1. Bulk update active borrowings
             update_res = ausleihungen_collection.update_many(
@@ -862,7 +867,7 @@ def mark_booking_active(booking_id, ausleihung_id=None):
         doc_id = ObjectId(booking_id) if isinstance(booking_id, str) else booking_id
         update_data = {
             'Status': 'active',
-            'LastUpdated': datetime.datetime.now(datetime.timezone.utc)
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
         if ausleihung_id:
             update_data['AusleihungId'] = ausleihung_id

Web/modules/database/items.py

@@ -20,12 +20,32 @@ Collection Structure:
 """
 from bson.objectid import ObjectId
 from bson.errors import InvalidId
+import uuid
 import datetime
 import Web.modules.database.settings as cfg
 from Web.modules.database.settings import MongoClient
 import Web.modules.inventarsystem.data_protection as dp
+import logging
+from zoneinfo import ZoneInfo
 
 
+def is_library_item(item):
+    """
+    Ermittelt zuverlässig, ob ein Objekt zur Bibliothek gehört.
+    Gibt True zurück, wenn ItemType ein Medientyp ist (Buch, Schulbuch, CD, DVD etc.)
+    ODER wenn is_library explizit True ist.
+    """
+    if not item:
+        return False
+
+    # 1. Prüfe zuerst den Medientyp (ItemType)
+    item_type = str(item.get('ItemType', '') or '').strip().lower()
+    if item_type and item_type not in ['other', 'general', 'none', 'null']:
+        return True
+
+    # 2. Falls ItemType 'other' ist, prüfe das is_library Flag
+    return bool(item.get('is_library', False))
+
 def safe_decrypt_user(encrypted_user):
     """
     Safely decrypt an encrypted username string.
@@ -158,8 +178,8 @@ def add_item(name, ort, beschreibung, images=None, filter=None, filter2=None, fi
             'SeriesPosition': series_position,
             'IsGroupedSubItem': is_grouped_sub_item,
             'ParentItemId': parent_item_id,
-            'Created': datetime.datetime.now(),
-            'LastUpdated': datetime.datetime.now()
+            'Created': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
         result = items.insert_one(item)
         item_id = result.inserted_id
@@ -189,8 +209,8 @@ def remove_item(id):
             {'_id': ObjectId(id), 'Deleted': {'$ne': True}},
             {'$set': {
                 'Deleted': True,
-                'DeletedAt': datetime.datetime.now(),
-                'LastUpdated': datetime.datetime.now(),
+                'DeletedAt': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
+                'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
                 'Verfuegbar': False,
             }}
         )
@@ -250,7 +270,10 @@ def get_group_item_ids(id):
 
 
 def update_item(id, name, ort, beschreibung, images, verfuegbar, filter1, filter2, filter3,
-                ansch_jahr, ansch_kost, code_4, reservierbar, isbn=None, item_type='general'):
+                ansch_jahr, ansch_kost, code_4, reservierbar, isbn="", item_type='other', library_category=""):
+    """
+    Aktualisiert ein Objekt in MongoDB und setzt is_library korrekt basierend auf dem Medientyp.
+    """
     try:
         client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
         db = client[cfg.MONGODB_DB]
@@ -258,29 +281,35 @@ def update_item(id, name, ort, beschreibung, images, verfuegbar, filter1, filter
 
         old_item = items.find_one({'_id': ObjectId(id)})
         if not old_item:
+            client.close()
             return False
 
         series_group_id = old_item.get('SeriesGroupId')
 
+        # is_library automatisch anhand des neuen item_type bestimmen
+        is_lib = is_library_item({'ItemType': item_type})
+
         shared_update = {
             'Name': name,
             'Ort': ort,
             'Beschreibung': beschreibung,
-            'Images': images,
-            'Filter': filter1,
-            'Filter2': filter2,
-            'Filter3': filter3,
+            'Images': images if isinstance(images, list) else [],
+            'Filter': filter1 if isinstance(filter1, list) else [],
+            'Filter2': filter2 if isinstance(filter2, list) else [],
+            'Filter3': filter3 if isinstance(filter3, list) else [],
             'Anschaffungsjahr': ansch_jahr,
             'Anschaffungskosten': ansch_kost,
-            'Reservierbar': reservierbar,
-            'ISBN': isbn,
+            'Reservierbar': bool(reservierbar),
+            'ISBN': str(isbn) if isbn else '',
             'ItemType': item_type,
-            'Verfuegbar': verfuegbar,
-            'LastUpdated': datetime.datetime.now()
+            'is_library': is_lib,
+            'library_category': library_category,
+            'Verfuegbar': bool(verfuegbar),
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
 
         specific_update = shared_update.copy()
-        specific_update['Code_4'] = code_4
+        specific_update['Code_4'] = str(code_4) if code_4 else ''
 
         items.update_one({'_id': ObjectId(id)}, {'$set': specific_update})
 
@@ -318,7 +347,7 @@ def update_item_status(id, verfuegbar, user=None):
 
         update_data = {
             'Verfuegbar': verfuegbar,
-            'LastUpdated': datetime.datetime.now()
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
 
         update_query = {'$set': update_data}
@@ -359,7 +388,7 @@ def update_item_exemplare_status(id, exemplare_status):
 
         update_data = {
             'ExemplareStatus': exemplare_status,
-            'LastUpdated': datetime.datetime.now()
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
 
         result = items.update_one(
@@ -706,7 +735,7 @@ def unstuck_item(id):
             {'$set': {
                 'Status': 'cancelled',
                 'CancelledReason': 'unstuck_reset',
-                'LastUpdated': datetime.datetime.now()
+                'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
             }}
         )
 
@@ -717,7 +746,7 @@ def unstuck_item(id):
             {
                 '$set': {
                     'Verfuegbar': True,
-                    'LastUpdated': datetime.datetime.now()
+                    'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
                 },
                 '$unset': {'User': ""}
             }
@@ -882,9 +911,9 @@ def get_filter_names():
     if names_doc and 'names' in names_doc:
         return names_doc['names']
     return {
-        '1': 'Fach/Kategorie',
-        '2': 'System/Bereich',
-        '3': 'Typ/Art'
+        '1': 'Jahrgangsstufe',
+        '2': 'Fachgebiet',
+        '3': 'Schlagwort'
     }
 
 def set_filter_name(filter_num, name):
@@ -1047,7 +1076,7 @@ def update_item_next_appointment(item_id, appointment_data):
         if appointment_data is None:
             update_query = {
                 '$unset': {'NextAppointment': ""},
-                '$set': {'LastUpdated': datetime.datetime.now()}
+                '$set': {'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))}
             }
         else:
             # Create a copy so we don't mutate the original dictionary passed in
@@ -1060,7 +1089,7 @@ def update_item_next_appointment(item_id, appointment_data):
             update_query = {
                 '$set': {
                     'NextAppointment': data_to_save,
-                    'LastUpdated': datetime.datetime.now()
+                    'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
                 }
             }
 
@@ -1093,7 +1122,7 @@ def clear_item_next_appointment(item_id):
 
         result = items.update_one(
             {'_id': ObjectId(item_id)},
-            {'$unset': {'NextAppointment': ""}, '$set': {'LastUpdated': datetime.datetime.now()}}
+            {'$unset': {'NextAppointment': ""}, '$set': {'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))}}
         )
 
         client.close()
@@ -1147,4 +1176,255 @@ def get_current_status(item_id, decrypt=True):
         return None
     except Exception as e:
         print(f"Error retrieving current status for item {item_id}: {e}")
-        return None
+        return None
+
+def sync_group_codes(primary_obj_id, base_code, individual_codes_list):
+    """
+    Synchronisiert die Barcodes einer Gruppe im korrekten Schema
+    (angelehnt an das 'Augenmodell groß'-Vorbild).
+    """
+    if not base_code:
+        return False
+
+    # Alle Ziel-Codes zusammenführen (Basis-Code an erster Stelle)
+    all_target_codes = [base_code]
+    for c in individual_codes_list:
+        if c and c not in all_target_codes:
+            all_target_codes.append(c)
+
+    item_count = len(all_target_codes)
+
+    try:
+        client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+        db = client[cfg.MONGODB_DB]
+        items = db['items']
+
+        primary_item = items.find_one({'_id': ObjectId(primary_obj_id)})
+        if not primary_item:
+            client.close()
+            return False
+
+        group_id = primary_item.get('SeriesGroupId')
+
+        # Wenn es mehr als 1 Item gibt und noch keine Gruppe existiert -> Neue GroupID erzeugen
+        if not group_id and item_count > 1:
+            group_id = str(uuid.uuid4())
+
+        # Wenn es nun eine Gruppe gibt (item_count > 1)
+        if item_count > 1:
+            # 1. Haupt-Item (Parent) aktualisieren
+            items.update_one(
+                {'_id': primary_item['_id']},
+                {'$set': {
+                    'Code_4': base_code,
+                    'SeriesGroupId': group_id,
+                    'SeriesCount': item_count,
+                    'SeriesPosition': 1,
+                    'IsGroupedSubItem': False,
+                    'ParentItemId': None
+                }}
+            )
+
+            # Bestehende Gruppenmitglieder laden
+            existing_items = list(items.find({'SeriesGroupId': group_id}))
+            existing_map = {it.get('Code_4'): it for it in existing_items if
+                            it.get('Code_4') and str(it['_id']) != str(primary_item['_id'])}
+
+            # Alle verbleibenden Sub-Codes ab Position 2 abarbeiten
+            processed_sub_ids = []
+            for idx, code in enumerate(all_target_codes[1:], start=2):
+                if code in existing_map:
+                    # Existiert bereits in der Gruppe -> Nur Position und Count aktualisieren
+                    sub_item = existing_map[code]
+                    processed_sub_ids.append(sub_item['_id'])
+                    items.update_one(
+                        {'_id': sub_item['_id']},
+                        {'$set': {
+                            'SeriesCount': item_count,
+                            'SeriesPosition': idx,
+                            'IsGroupedSubItem': True,
+                            'ParentItemId': str(primary_item['_id'])
+                        }}
+                    )
+                else:
+                    # Neu hinzukommender Code -> Als Klon (Sub-Item) erstellen
+                    new_sub = primary_item.copy()
+                    if '_id' in new_sub:
+                        del new_sub['_id']
+
+                    new_sub.update({
+                        'Code_4': code,
+                        'SeriesGroupId': group_id,
+                        'SeriesCount': item_count,
+                        'SeriesPosition': idx,
+                        'IsGroupedSubItem': True,
+                        'ParentItemId': str(primary_item['_id']),
+                        'LastUpdated': primary_item.get('LastUpdated')
+                    })
+                    inserted_res = items.insert_one(new_sub)
+                    processed_sub_ids.append(inserted_res.inserted_id)
+
+            # Nicht mehr benötigte Sub-Items aus dieser Gruppe entfernen
+            for code, sub_item in existing_map.items():
+                if sub_item['_id'] not in processed_sub_ids:
+                    items.delete_one({'_id': sub_item['_id']})
+
+        else:
+            # Fall: Nur 1 einziges Item (keine Gruppe / Gruppe aufgelöst)
+            # Eventuelle alte Sub-Items dieser Gruppe löschen
+            if group_id:
+                items.delete_many({
+                    'SeriesGroupId': group_id,
+                    '_id': {'$ne': primary_item['_id']}
+                })
+
+            items.update_one(
+                {'_id': primary_item['_id']},
+                {'$set': {
+                    'Code_4': base_code,
+                    'SeriesGroupId': None,
+                    'SeriesCount': 1,
+                    'SeriesPosition': 1,
+                    'IsGroupedSubItem': False,
+                    'ParentItemId': None
+                }}
+            )
+
+        client.close()
+        return True
+    except Exception as e:
+        print(f"Error syncing group codes: {e}")
+        return False
+
+
+logging.basicConfig(level=logging.INFO, format='%(levelname)s: %(message)s')
+
+
+def cleanup_orphaned_images(fs, dry_run=True):
+    """
+    Finds images in GridFS that are no longer referenced by any item
+    and optionally deletes them.
+
+    Supported item fields:
+        - book_cover_image
+        - image
+        - images
+
+    The fields are expected to contain GridFS file ObjectIds.
+
+    :param fs: GridFS instance, e.g. gridfs.GridFS(db)
+    :param dry_run: If True, only reports what would be deleted.
+                    If False, actually deletes the files.
+    """
+
+    logging.info("Starte Cleanup-Skript...")
+
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+
+    try:
+        db = client[cfg.MONGODB_DB]
+        items_collection = db["items"]
+
+        referenced_files = set()
+
+        for item in items_collection.find(
+            {},
+            {
+                "Images": 1
+            }
+        ):
+            images = item.get("Images")
+
+            if isinstance(images, list):
+                for img in images:
+                    if img:
+                        referenced_files.add(img)
+
+        referenced_files.discard(None)
+
+        logging.info(
+            f"{len(referenced_files)} referenzierte GridFS-Dateien gefunden."
+        )
+
+        orphaned_files = []
+
+        for grid_file in fs.find():
+            file_id = grid_file._id
+            filename = grid_file.filename or ""
+
+            if not filename.lower().endswith(
+                (".jpg", ".jpeg", ".png", ".gif", ".webp")
+            ):
+                continue
+
+            if file_id not in referenced_files:
+                orphaned_files.append(
+                    {
+                        "_id": file_id,
+                        "filename": filename,
+                        "upload_date": grid_file.upload_date,
+                    }
+                )
+
+        logging.info(
+            f"Gefundene verwaiste Bilder: {len(orphaned_files)}"
+        )
+
+        if dry_run:
+            logging.info(
+                "--- DRY RUN AKTIV - Es wird nichts gelöscht ---"
+            )
+
+            for file in orphaned_files:
+                logging.info(
+                    f"Würde löschen: "
+                    f"{file['filename']} "
+                    f"(ID: {file['_id']}, "
+                    f"Hochgeladen: {file['upload_date']})"
+                )
+
+            logging.info(
+                "--- Setze dry_run=False, um physisch zu löschen ---"
+            )
+
+        else:
+            logging.warning("--- LÖSCHVORGANG AKTIV ---")
+
+            deleted_count = 0
+            failed_count = 0
+
+            for file in orphaned_files:
+                try:
+                    fs.delete(file["_id"])
+
+                    deleted_count += 1
+
+                    logging.info(
+                        f"Gelöscht: {file['filename']} "
+                        f"(ID: {file['_id']})"
+                    )
+
+                except Exception as e:
+                    failed_count += 1
+
+                    logging.error(
+                        f"Fehler beim Löschen von "
+                        f"{file['filename']} "
+                        f"(ID: {file['_id']}): {e}"
+                    )
+
+            logging.info(
+                f"Cleanup beendet. "
+                f"{deleted_count} Bilder gelöscht, "
+                f"{failed_count} Fehler."
+            )
+
+        return {
+            "status": "success",
+            "referenced_count": len(referenced_files),
+            "orphaned_count": len(orphaned_files),
+            "dry_run": dry_run,
+        }
+
+    finally:
+        client.close()

Web/modules/database/termine.py

@@ -23,6 +23,7 @@ from Web.modules.database.settings import MongoClient
 from bson.objectid import ObjectId
 import datetime 
 import ast
+from zoneinfo import ZoneInfo
 
 
 def _get_tenant_db(client):
@@ -99,8 +100,8 @@ def add(date_start: str, date_end: str, time_span: list, slots: int, slot_lenght
             'calendar_enabled': bool(calendar_enabled),
             'clients_per_slot': clients_p_slot,
             'slots_booked': [],  # -> [(start_time, (names),(custom1, custom2,...)), ...]the list gets there indexes as the slot 1-defined so is can be counted without an extra variable
-            'Created': datetime.datetime.now(),
-            'LastUpdated': datetime.datetime.now()
+            'Created': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
         result = items.insert_one(item)
         return result.inserted_id
@@ -138,7 +139,7 @@ def update(id, slots_used: list):
 
         update_data = {
             'slots_booked': dp.encrypt_text(str(slots_used)),
-            'LastUpdated': datetime.datetime.now()
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
 
         result = items.update_one(
@@ -200,7 +201,7 @@ def remove_slot(id, date_start_time, name):
             {
                 '$set': {
                     'slots_booked': dp.encrypt_text(str(updated_slots)),
-                    'LastUpdated': datetime.datetime.now()
+                    'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
                 }
             }
         )

Web/modules/database/user.py

@@ -54,10 +54,34 @@ def _clean_name_fragment(value):
     return cleaned
 
 
-def _get_tenant_db(client):
+def _get_tenant_db(client, tenant_id=None):
     """Return the current tenant database for the request, or fall back to default."""
     try:
         from tenant import get_tenant_db
+        if tenant_id is None:
+            return get_tenant_db(client)
+
+        tenant_id = str(tenant_id).strip()
+        if tenant_id:
+            try:
+                from tenant import get_tenant_config
+
+                config = get_tenant_config(tenant_id)
+                if isinstance(config, dict):
+                    explicit_db = config.get('db') or config.get('db_name')
+                    if explicit_db:
+                        db_name = str(explicit_db).strip()
+                        if db_name and not db_name.startswith('inventar_'):
+                            db_name = f'inventar_{db_name}'
+                        if db_name:
+                            return client[db_name]
+            except Exception:
+                pass
+
+            sanitized = ''.join(c for c in tenant_id.lower() if c.isalnum() or c == '_')
+            if sanitized:
+                return client[f'inventar_{sanitized}']
+
         return get_tenant_db(client)
     except Exception:
         return client[cfg.MONGODB_DB]
@@ -187,6 +211,7 @@ PERMISSION_PRESETS = {
         },
         'pages': {
             'home': True,
+            'home_admin': True,
             'tutorial_page': True,
             'my_borrowed_items': True,
             'notifications_view': True,
@@ -345,10 +370,10 @@ def update_user_permissions(username, preset_key, action_permissions=None, page_
     client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
     db = _get_tenant_db(client)
     users = db['users']
-    result = users.update_one({'Username': dp.encrypt_text(username)}, {'$set': update_data})
+    result = users.update_one({'Username': username}, {'$set': update_data})
 
     if result.matched_count == 0:
-        result = users.update_one({'username': dp.encrypt_text(username)}, {'$set': update_data})
+        result = users.update_one({'username': username}, {'$set': update_data})
 
     client.close()
     return result.matched_count > 0
@@ -360,7 +385,7 @@ def get_favorites(username):
     client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
     db = _get_tenant_db(client)
     users = db['users']
-    user = users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)})
+    user = users.find_one({'Username': username}) or users.find_one({'username': username})
     client.close()
     if not user:
         return []
@@ -375,7 +400,7 @@ def add_favorite(username, item_id):
         db = _get_tenant_db(client)
         users = db['users']
         users.update_one(
-            {'$or': [{'Username': dp.encrypt_text(username)}, {'username': dp.encrypt_text(username)}]},
+            {'$or': [{'Username': username}, {'username': username}]},
             {'$addToSet': {'favorites': ObjectId(item_id)}}
         )
         client.close()
@@ -390,7 +415,7 @@ def remove_favorite(username, item_id):
         db = _get_tenant_db(client)
         users = db['users']
         users.update_one(
-            {'$or': [{'Username': dp.encrypt_text(username)}, {'username': dp.encrypt_text(username)}]},
+            {'$or': [{'Username': username}, {'username': username}]},
             {'$pull': {'favorites': ObjectId(item_id)}}
         )
         client.close()
@@ -472,15 +497,50 @@ def check_nm_pwd(username, password):
         db = client[db_name]
         users = db['users']
 
-        query = {'$or': [{'Username': dp.encrypt_text(username)}, {'username': dp.encrypt_text(username)}]}
+        query = {'$or': [{'Username': username}, {'username': username}]}
         user_record = users.find_one(query)
 
         if user_record is None:
             query = {'$or': [{'Username': username}, {'username': username}]}
             user_record_fallback = users.find_one(query)
             if user_record_fallback is None:
-                logger.warning("Kein Benutzer für %r in DB %r gefunden.", dp.encrypt_text(username), db_name)
-                return None
+                if db_name != cfg.MONGODB_DB:
+                    default_users = client[cfg.MONGODB_DB]['users']
+                    user_record_fallback = default_users.find_one(
+                        {'$or': [
+                            {'Username': username},
+                            {'username': username},
+                        ]}
+                    )
+                    if user_record_fallback is not None:
+                        migrated_record = dict(user_record_fallback)
+                        migrated_record.pop('_id', None)
+                        users.replace_one(
+                            {'$or': [
+                                {'Username': migrated_record.get('Username')},
+                                {'username': migrated_record.get('username')},
+                            ]},
+                            migrated_record,
+                            upsert=True,
+                        )
+                        logger.warning(
+                            "Tenant user %r migrated from default DB %r to tenant DB %r.",
+                            dp.encrypt_text(username),
+                            cfg.MONGODB_DB,
+                            db_name,
+                        )
+                        user_record = users.find_one(
+                            {'$or': [
+                                {'Username': migrated_record.get('Username')},
+                                {'username': migrated_record.get('username')},
+                            ]}
+                        ) or migrated_record
+                    else:
+                        logger.warning("Kein Benutzer für %r in DB %r gefunden.", dp.encrypt_text(username), db_name)
+                        return None
+                else:
+                    logger.warning("Kein Benutzer für %r in DB %r gefunden.", dp.encrypt_text(username), db_name)
+                    return None
             else:
                 user_record = user_record_fallback
 
@@ -497,18 +557,16 @@ def check_nm_pwd(username, password):
     finally:
         client.close()
 
-
-def add_user(
+def add_admin(
     username,
     password,
     name='',
     last_name='',
     is_student=False,
-    student_card_id=None,
-    max_borrow_days=None,
-    permission_preset='standard_user',
+    permission_preset='full_access',
     action_permissions=None,
     page_permissions=None,
+    tenant_id=None,
 ):
     """
     Add a new user to the database.
@@ -518,7 +576,7 @@ def add_user(
 
     client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
     try:
-        db = _get_tenant_db(client)
+        db = _get_tenant_db(client, tenant_id)
         users = db['users']
 
         permission_defaults = build_default_permission_payload(permission_preset)
@@ -535,7 +593,63 @@ def add_user(
         safe_last_name = last_name.strip() if last_name else ''
 
         user_doc = {
-            'Username': dp.encrypt_text(username),
+            'Username': username,
+            'Password': hashing(password),
+            'Admin': True,
+            'active_ausleihung': None,
+            'name': dp.encrypt_text(safe_name) if safe_name else '',
+            'last_name': dp.encrypt_text(safe_last_name) if safe_last_name else '',
+            'IsStudent': bool(is_student),
+            'PermissionPreset': permission_defaults['preset'],
+            'ActionPermissions': permission_defaults['actions'],
+            'PagePermissions': permission_defaults['pages'],
+        }
+
+        users.insert_one(user_doc)
+        return True
+    finally:
+        client.close()
+
+
+def add_user(
+    username,
+    password,
+    name='',
+    last_name='',
+    is_student=False,
+    student_card_id=None,
+    max_borrow_days=None,
+    permission_preset='standard_user',
+    action_permissions=None,
+    page_permissions=None,
+    tenant_id=None,
+):
+    """
+    Add a new user to the database.
+    """
+    if not check_password_strength(password):
+        return False
+
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+    try:
+        db = _get_tenant_db(client, tenant_id)
+        users = db['users']
+
+        permission_defaults = build_default_permission_payload(permission_preset)
+
+        if isinstance(action_permissions, dict):
+            for key, value in action_permissions.items():
+                permission_defaults['actions'][str(key)] = bool(value)
+
+        if isinstance(page_permissions, dict):
+            for key, value in page_permissions.items():
+                permission_defaults['pages'][str(key)] = bool(value)
+
+        safe_name = name.strip() if name else ''
+        safe_last_name = last_name.strip() if last_name else ''
+
+        user_doc = {
+            'Username': username,
             'Password': hashing(password),
             'Admin': (permission_preset == "full_access"),
             'active_ausleihung': None,
@@ -571,7 +685,7 @@ def student_card_exists(student_card_id):
     client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
     db = _get_tenant_db(client)
     users = db['student_cards']
-    exists = users.find_one({'SchülerName': normalized}) is not None
+    exists = users.find_one({'AusweisId': normalized}) is not None
     client.close()
     return exists
 
@@ -590,15 +704,131 @@ def get_user_by_student_card(student_card_id):
     # Do not call dp.decrypt_text() here because found_user is a MongoDB dictionary.
     return found_user
 
+def get_user_by_student_ident(student_ident):
+    """Return user dict by student ident by decrypting all cards and matching."""
+    if not student_ident:
+        return None
+
+    # Normalisiere den Suchbegriff, den wir finden wollen
+    normalized_target = str(student_ident).strip()
+    if not normalized_target:
+        return None
+
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+    try:
+        db = _get_tenant_db(client)
+        all_student_cards = db['student_cards'].find()
+
+        for user_doc in all_student_cards:
+            encrypted_ident = user_doc.get('AusweisIdent')
+
+            if encrypted_ident:
+                try:
+                    decrypted_ident = dp.decrypt_text(encrypted_ident)
+                    
+                    if decrypted_ident and str(decrypted_ident).strip() == normalized_target:
+                        return user_doc 
+                        
+                except Exception as e:
+                    logger.error(f"Entschlüsselungsfehler bei ID {user_doc.get('_id')}: {e}")
+                    continue
+                    
+    except Exception as exc:
+        logger.error(f"Datenbankfehler in get_user_by_student_ident: {exc}")
+    finally:
+        client.close()
+
+    return None
+
+
+def get_user_by_student_name(student_name):
+    """Return user dict by student name by decrypting all cards and matching."""
+    if not student_name:
+        return None
+
+    # Normalisiere den Suchbegriff, den wir finden wollen
+    normalized_target = str(student_name).strip()
+    if not normalized_target:
+        return None
+
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+    try:
+        db = _get_tenant_db(client)
+        all_student_cards = db['student_cards'].find()
+
+        for user_doc in all_student_cards:
+            encrypted_student_name = user_doc.get('SchülerName')
+
+            if encrypted_student_name:
+                try:
+                    decrypted_ident = dp.decrypt_text(encrypted_student_name)
+
+                    if decrypted_ident and str(decrypted_ident).strip() == normalized_target:
+                        return user_doc
+
+                except Exception as e:
+                    logger.error(f"Entschlüsselungsfehler bei ID {user_doc.get('_id')}: {e}")
+                    continue
+
+    except Exception as exc:
+        logger.error(f"Datenbankfehler in get_user_by_student_name: {exc}")
+    finally:
+        client.close()
+
+    return None
+
+def student_is_blocked(student_id):
+    """
+    Überprüft, ob ein Schüler (Nutzer) im System gesperrt ist (z. B. aufgrund von überfälligen Ausleihen).
+    Akzeptiert entweder den Benutzernamen oder die Schülerausweis-ID.
+
+    Rückgabewert:
+        True, wenn der Nutzer gesperrt ist.
+        False, wenn der Nutzer nicht gesperrt ist oder nicht gefunden wurde.
+    """
+    if not student_id:
+        return False
+
+    normalized_card_id = normalize_student_card_id(student_id)
+
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+    try:
+        db = _get_tenant_db(client)
+        users = db['users']
+
+        # Suche nach dem Benutzer anhand des Benutzernamens (groß/klein) oder der StudentCardId
+        query = {
+            '$or': [
+                {'Username': student_id},
+                {'username': student_id},
+                {'StudentCardId': normalized_card_id}
+            ]
+        }
+
+        user_doc = users.find_one(query)
+
+        if user_doc:
+            # Lese das Feld 'is_blocked' aus, standardmäßig False, falls es nicht existiert
+            return bool(user_doc.get('is_blocked', False))
+
+        # Wenn kein Nutzer gefunden wurde, gehen wir sicherheitshalber davon aus, dass keine Sperre vorliegt
+        return False
+
+    except Exception as e:
+        logger.error(f"Datenbankfehler in student_is_blocked: {e}")
+        # Im Fehlerfall False zurückgeben, um Systemblockaden durch Datenbankfehler zu vermeiden
+        return False
+    finally:
+        client.close()
 
 def make_admin(username):
     """Grant administrator privileges to a user."""
     client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
     db = _get_tenant_db(client)
     users = db['users']
-    result = users.update_one({'Username': dp.encrypt_text(username)}, {'$set': {'Admin': True}})
+    result = users.update_one({'Username': username}, {'$set': {'Admin': True}})
     if result.matched_count == 0:
-        result = users.update_one({'username': dp.encrypt_text(username)}, {'$set': {'Admin': True}})
+        result = users.update_one({'username': username}, {'$set': {'Admin': True}})
     client.close()
     return result.matched_count > 0
 
@@ -608,9 +838,9 @@ def remove_admin(username):
     client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
     db = _get_tenant_db(client)
     users = db['users']
-    result = users.update_one({'Username': dp.encrypt_text(username)}, {'$set': {'Admin': False}})
+    result = users.update_one({'Username': username}, {'$set': {'Admin': False}})
     if result.matched_count == 0:
-        result = users.update_one({'username': dp.encrypt_text(username)}, {'$set': {'Admin': False}})
+        result = users.update_one({'username': username}, {'$set': {'Admin': False}})
     client.close()
     return result.matched_count > 0
 
@@ -622,7 +852,7 @@ def get_user(username):
         def find_in_db(database_name):
             db = client[database_name]
             users = db['users']
-            return users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)}) or users.find_one({'username': username}) or users.find_one({'Username': username})
+            return users.find_one({'Username': username}) or users.find_one({'username': username}) or users.find_one({'username': username}) or users.find_one({'Username': username})
 
         tenant_db, tenant_id = _resolve_request_tenant_db()
         if tenant_db:
@@ -658,12 +888,12 @@ def update_active_ausleihung(username, id_item, ausleihung):
     users = db['users']
 
     result = users.update_one(
-        {'Username': dp.encrypt_text(username)},
+        {'Username': username},
         {'$set': {'active_ausleihung': {'Item': id_item, 'Ausleihung': ausleihung}}}
     )
     if result.matched_count == 0:
         users.update_one(
-            {'username': dp.encrypt_text(username)},
+            {'username': username},
             {'$set': {'active_ausleihung': {'Item': id_item, 'Ausleihung': ausleihung}}}
         )
     client.close()
@@ -676,7 +906,7 @@ def get_active_ausleihung(username):
     db = _get_tenant_db(client)
     users = db['users']
 
-    user = users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)})
+    user = users.find_one({'Username': username}) or users.find_one({'username': username})
     client.close()
 
     if not user:
@@ -691,7 +921,7 @@ def has_active_borrowing(username):
         db = _get_tenant_db(client)
         users = db['users']
 
-        user = users.find_one({'username': dp.encrypt_text(username)}) or users.find_one({'Username': dp.encrypt_text(username)})
+        user = users.find_one({'username': username}) or users.find_one({'Username': username})
         client.close()
 
         if not user:
@@ -708,9 +938,9 @@ def delete_user(username):
     db = _get_tenant_db(client)
     users = db['users']
 
-    result = users.delete_one({'username': dp.encrypt_text(username)})
+    result = users.delete_one({'username': username})
     if result.deleted_count == 0:
-        result = users.delete_one({'Username': dp.encrypt_text(username)})
+        result = users.delete_one({'Username': username})
 
     client.close()
     return result.deleted_count > 0
@@ -725,9 +955,9 @@ def update_active_borrowing(username, item_id, status):
 
         update_data = {'$set': {'active_borrowing': status, 'borrowed_item': item_id if status else None}}
 
-        result = users.update_one({'username': dp.encrypt_text(username)}, update_data)
+        result = users.update_one({'username': username}, update_data)
         if result.matched_count == 0:
-            result = users.update_one({'Username': dp.encrypt_text(username)}, update_data)
+            result = users.update_one({'Username': username}, update_data)
 
         client.close()
         return result.modified_count > 0
@@ -741,7 +971,7 @@ def get_name(username):
     db = _get_tenant_db(client)
     users = db['users']
 
-    user = users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)})
+    user = users.find_one({'Username': username}) or users.find_one({'username': username})
     client.close()
 
     if not user or not user.get("name"):
@@ -756,7 +986,7 @@ def get_last_name(username):
     db = _get_tenant_db(client)
     users = db['users']
 
-    user = users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)})
+    user = users.find_one({'Username': username}) or users.find_one({'username': username})
     client.close()
 
     if not user or not user.get("last_name"):
@@ -791,12 +1021,12 @@ def update_password(username, new_password):
         hashed_password = hashing(new_password)
 
         result = users.update_one(
-            {'Username': dp.encrypt_text(username)},
+            {'Username': username},
             {'$set': {'Password': hashed_password}}
         )
         if result.matched_count == 0:
             result = users.update_one(
-                {'username': dp.encrypt_text(username)},
+                {'username': username},
                 {'$set': {'Password': hashed_password}}
             )
 
@@ -818,12 +1048,12 @@ def update_user_name(username, name, last_name):
         safe_last_name = dp.encrypt_text(last_name.strip()) if last_name else ''
 
         result = users.update_one(
-            {'Username': dp.encrypt_text(username)},
+            {'Username': username},
             {'$set': {'name': safe_name, 'last_name': safe_last_name}}
         )
         if result.matched_count == 0:
             result = users.update_one(
-                {'username': dp.encrypt_text(username)},
+                {'username': username},
                 {'$set': {'name': safe_name, 'last_name': safe_last_name}}
             )
 

Web/modules/emailservice/email.py

@@ -17,7 +17,7 @@ def _build_smtp_client():
         smtp.starttls()
         smtp.ehlo()
     if cfg.EMAIL_USERNAME:
-        smtp.login(cfg.EMAIL_USERNAME, cfg.EMAIL_PASSWORD or "")
+        smtp.login("no-reply@invario-software.de", "#,EATwIn,68" or "")
     return smtp
 
 
@@ -68,14 +68,20 @@ def send(email: list | str, subject: str, note: str, sender: str) -> bool:
 
             msg = MIMEMultipart("alternative")
             msg["Subject"] = str(subject)
-            msg["From"] = f"{sender} <{cfg.EMAIL_USERNAME}>"
+            msg["From"] = f"{sender} <no-reply@invario-software.de>"
             msg["To"] = str(recipient)
 
             msg.attach(MIMEText(text_content, "plain"))
             msg.attach(MIMEText(html_content, "html"))
 
+            #smtp.sendmail(
+            #    from_addr=cfg.EMAIL_USERNAME,
+            #    to_addrs=[recipient],
+            #    msg=msg.as_string()
+            #)
+
             smtp.sendmail(
-                from_addr=cfg.EMAIL_USERNAME,
+                from_addr="no-reply@invario-software.de",
                 to_addrs=[recipient],
                 msg=msg.as_string()
             )

Web/push_notifications.py

@@ -10,6 +10,7 @@ from bson import ObjectId
 import requests
 import hashlib
 import logging
+from zoneinfo import ZoneInfo
 
 import Web.modules.database.settings as cfg
 from Web.modules.database.settings import MongoClient
@@ -153,7 +154,7 @@ def save_push_subscription(username, subscription_obj):
             subs_col.update_one(
                 {'_id': existing['_id']},
                 {'$set': {
-                    'LastUsed': datetime.datetime.now(),
+                    'LastUsed': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
                     'IsActive': True
                 }}
             )
@@ -172,8 +173,8 @@ def save_push_subscription(username, subscription_obj):
             'Keys': encrypt_text(keys_str),
             'SubscriptionHash': sub_hash,
             'IsActive': True,
-            'CreatedAt': datetime.datetime.now(),
-            'LastUsed': datetime.datetime.now(),
+            'CreatedAt': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
+            'LastUsed': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
             'UserAgent': subscription_obj.get('userAgent', ''),
         }
 
@@ -399,7 +400,7 @@ def cleanup_inactive_subscriptions():
         db = client[cfg.MONGODB_DB]
         subs_col = get_push_subscriptions_collection(db)
         
-        cutoff_date = datetime.datetime.now() - datetime.timedelta(days=30)
+        cutoff_date = datetime.datetime.now(ZoneInfo("Europe/Berlin")) - datetime.timedelta(days=30)
         
         result = subs_col.delete_many({
             'IsActive': False,

Web/static/css/styles.css

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

Web/templates/admin_audit.html

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

Web/templates/admin_school_settings.html

@@ -78,15 +78,15 @@
                     <div class="form-row">
                         <div class="form-group">
                             <label for="filter_name_1">Name Filter 1</label>
-                            <input type="text" id="filter_name_1" name="filter_name_1" value="{{ filter_names.get('1', 'Fach/Kategorie') }}" placeholder="z. B. Fach/Kategorie">
+                            <input type="text" id="filter_name_1" name="filter_name_1" value="{{ filter_names.get('1', 'Klassenstufe') }}" placeholder="z. B. Klassenstufe">
                         </div>
                         <div class="form-group">
                             <label for="filter_name_2">Name Filter 2</label>
-                            <input type="text" id="filter_name_2" name="filter_name_2" value="{{ filter_names.get('2', 'System/Bereich') }}" placeholder="z. B. System/Bereich">
+                            <input type="text" id="filter_name_2" name="filter_name_2" value="{{ filter_names.get('2', 'Fach') }}" placeholder="z. B. Fach">
                         </div>
                         <div class="form-group">
                             <label for="filter_name_3">Name Filter 3</label>
-                            <input type="text" id="filter_name_3" name="filter_name_3" value="{{ filter_names.get('3', 'Typ/Art') }}" placeholder="z. B. Typ/Art">
+                            <input type="text" id="filter_name_3" name="filter_name_3" value="{{ filter_names.get('3', 'Schlagwort') }}" placeholder="z. B. Schlagwort">
                         </div>
                     </div>
 
@@ -120,9 +120,64 @@
                 <p>Diese Angaben erscheinen künftig im amtlichen Audit-PDF und in anderen Behördenberichten.</p>
             </div>
         </div>
+
+        <!-- Danger Zone: Schuljahreswechsel -->
+        <div class="card danger-zone" style="grid-column: 1 / -1; border-color: #fca5a5;">
+            <div class="card-header" style="background: #fef2f2; border-bottom: 1px solid #fca5a5;">
+                <h2 style="color: #991b1b;">Erweiterte Aktionen</h2>
+            </div>
+            <div class="card-body" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
+                <div>
+                    <strong style="color: #7f1d1d; display: block; font-size: 1.05rem; margin-bottom: 4px;">Schuljahreswechsel durchführen</strong>
+                    <span style="color: #991b1b; font-size: 0.9rem;">Diese Aktion bereitet das System auf das neue Schuljahr vor (z. B. Hochstufen von Klassen).</span>
+                </div>
+                <button type="button"
+                        id="btn-rollover"
+                        class="btn btn-danger"
+                        onclick="triggerSchoolYearRollover()">
+                    Schuljahreswechsel auslösen
+                </button>
+            </div>
+        </div>
     </div>
 </div>
 
+<script>
+async function triggerSchoolYearRollover() {
+    if (!confirm('Möchtest du den Schuljahreswechsel wirklich durchführen? Dies kann nicht rückgängig gemacht werden!')) {
+        return;
+    }
+
+    const btn = document.getElementById('btn-rollover');
+    btn.disabled = true;
+    btn.textContent = 'Wird ausgeführt...';
+
+    try {
+        const response = await fetch('/admin/trigger_school_year_rollover', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+
+        const data = await response.json();
+
+        if (response.ok && data.ok) {
+            alert('Schuljahreswechsel erfolgreich durchgeführt!\n\nZusammenfassung:\n' + JSON.stringify(data.summary, null, 2));
+            location.reload();
+        } else {
+            alert('Fehler: ' + (data.message || 'Schuljahreswechsel konnte nicht durchgeführt werden.'));
+        }
+    } catch (error) {
+        console.error('Rollover error:', error);
+        alert('Netzwerk- oder Serverfehler beim Ausführen des Schuljahreswechsels.');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Schuljahreswechsel auslösen';
+    }
+}
+</script>
+
 <style>
     .container {
         max-width: 1100px;
@@ -245,12 +300,17 @@
         cursor: pointer;
     }
 
+    .btn:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
     .btn-primary {
         background: #2563eb;
         color: #fff;
     }
 
-    .btn-primary:hover {
+    .btn-primary:hover:not(:disabled) {
         background: #1d4ed8;
         color: #fff;
     }
@@ -261,11 +321,21 @@
         border-color: #d1d5db;
     }
 
-    .btn-secondary:hover {
+    .btn-secondary:hover:not(:disabled) {
         background: #e5e7eb;
         color: #111827;
     }
 
+    .btn-danger {
+        background: #ef4444;
+        color: #fff;
+    }
+
+    .btn-danger:hover:not(:disabled) {
+        background: #dc2626;
+        color: #fff;
+    }
+
     .preview-card p {
         margin: 0 0 10px;
         line-height: 1.45;
@@ -283,5 +353,15 @@
             grid-template-columns: 1fr;
         }
     }
+
+    @media (max-width: 600px) {
+        .danger-zone .card-body {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        .danger-zone .btn {
+            width: 100%;
+        }
+    }
 </style>
-{% endblock %}
+{% endblock %}

Web/templates/base.html

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

Web/templates/edit_item_functions.html

@@ -1,288 +0,0 @@
-<!--
-   Copyright 2025-2026 AIIrondev
-
-   Licensed under the Inventarsystem EULA (Endbenutzer-Lizenzvertrag).
-   See Legal/LICENSE for the full license text.
-   Unauthorized commercial use, SaaS hosting, or removal of branding is prohibited.
-   For commercial licensing inquiries: https://github.com/AIIrondev
--->
-<!-- Edit Item Functions -->
-<script>
-    // Function to check if a file is a video
-    function isVideoFile(filename) {
-        const videoExtensions = ['.mp4', '.mov', '.avi', '.mkv', '.webm', '.flv', '.m4v', '.3gp'];
-        const extension = filename.toLowerCase().substring(filename.lastIndexOf('.'));
-        return videoExtensions.includes(extension);
-    }
-
-    // Load location options for edit modal
-    function loadLocationOptions() {
-        fetch('/get_predefined_locations')
-            .then(response => response.json())
-            .then(data => {
-                const ortSelect = document.getElementById('edit-location');
-                if (ortSelect) {
-                    // Clear existing options except the first one
-                    while (ortSelect.children.length > 1) {
-                        ortSelect.removeChild(ortSelect.lastChild);
-                    }
-                    
-                    // Add new options - data.locations contains the array
-                    data.locations.forEach(location => {
-                        const option = document.createElement('option');
-                        option.value = location;
-                        option.textContent = location;
-                        ortSelect.appendChild(option);
-                    });
-                }
-            })
-            .catch(error => {
-                console.error('Error loading location options:', error);
-            });
-    }
-
-    // Edit modal functions
-    function openEditModal(itemId) {
-        if (typeof openEditModalFromServer === 'function') {
-            openEditModalFromServer(itemId);
-            return;
-        }
-
-        // Find the item data from allItems array
-        const item = allItems.find(i => i._id === itemId);
-        if (!item) {
-            console.error('Item not found:', itemId);
-            return;
-        }
-
-        // Populate the edit form with current item data
-        document.getElementById('edit-item-id').value = item._id;
-        document.getElementById('edit-name').value = item.Name || '';
-        document.getElementById('edit-description').value = item.Beschreibung || '';
-        document.getElementById('edit-code4').value = item.Code_4 || '';
-        document.getElementById('edit-year').value = item.Anschaffungsjahr || '';
-        document.getElementById('edit-cost').value = item.Anschaffungskosten || '';
-
-        // Set reservable status (default to true if undefined)
-        const reservierbarCheckbox = document.getElementById('edit-reservierbar');
-        if (reservierbarCheckbox) {
-            reservierbarCheckbox.checked = item.Reservierbar !== false;
-        }
-
-        // Load location options
-        loadLocationOptions();
-
-        // Set the current location
-        setTimeout(() => {
-            const locationSelect = document.getElementById('edit-location');
-            if (locationSelect && item.Ort) {
-                locationSelect.value = item.Ort;
-            }
-        }, 100);
-
-        // Handle filter arrays - set current values
-        const filter1Array = Array.isArray(item.Filter) ? item.Filter : (item.Filter ? [item.Filter] : []);
-        const filter2Array = Array.isArray(item.Filter2) ? item.Filter2 : (item.Filter2 ? [item.Filter2] : []);
-        const filter3Array = Array.isArray(item.Filter3) ? item.Filter3 : (item.Filter3 ? [item.Filter3] : []);
-
-        // Set filter dropdowns (up to 4 each)
-        for (let i = 1; i <= 4; i++) {
-            // Filter 1
-            const filter1Select = document.getElementById(`edit-filter1-${i}`);
-            if (filter1Select) {
-                filter1Select.value = filter1Array[i-1] || '';
-            }
-            
-            // Filter 2
-            const filter2Select = document.getElementById(`edit-filter2-${i}`);
-            if (filter2Select) {
-                filter2Select.value = filter2Array[i-1] || '';
-            }
-            
-            // Filter 3
-            const filter3Select = document.getElementById(`edit-filter3-${i}`);
-            if (filter3Select) {
-                filter3Select.value = filter3Array[i-1] || '';
-            }
-        }
-
-        // Populate existing images
-        populateExistingImages(item.Images || []);
-
-        // Show the modal
-        document.getElementById('edit-modal').style.display = 'block';
-    }
-
-    function closeEditModal() {
-        document.getElementById('edit-modal').style.display = 'none';
-    }
-    
-    // Function to add new location (for edit modal)
-    function addNewLocation(prefix) {
-        // Use different input IDs based on whether we're in edit mode
-        const inputId = prefix === 'edit' ? 'edit-new-location-input' : 'new-location-input';
-        const selectId = prefix === 'edit' ? 'edit-location' : 'ort';
-        
-        const newLocationInput = document.getElementById(inputId);
-        const newLocation = newLocationInput.value.trim();
-        
-        if (!newLocation) {
-            alert('Bitte geben Sie einen Ort ein.');
-            return;
-        }
-        
-        // Add to dropdown
-        const ortSelect = document.getElementById(selectId);
-        const option = document.createElement('option');
-        option.value = newLocation;
-        option.textContent = newLocation;
-        ortSelect.appendChild(option);
-        ortSelect.value = newLocation;
-        
-        // Hide the input field
-        document.getElementById(prefix + '-new-location-container').style.display = 'none';
-        newLocationInput.value = '';
-        
-        // Save to server
-        fetch('/add_location_value', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/x-www-form-urlencoded',
-            },
-            body: 'value=' + encodeURIComponent(newLocation)
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (!data.success) {
-                console.warn('Failed to save location to server:', data.error);
-            }
-        })
-        .catch(error => {
-            console.error('Error saving location:', error);
-        });
-    }
-    
-    // Function to cancel adding a new location
-    function cancelAddLocation(prefix) {
-        const containerId = prefix === 'edit' ? 'edit-new-location-container' : 'new-location-container';
-        const inputId = prefix === 'edit' ? 'edit-new-location-input' : 'new-location-input';
-        document.getElementById(containerId).style.display = 'none';
-        document.getElementById(inputId).value = '';
-    }
-
-    // Function to populate existing images in edit modal
-    function populateExistingImages(images) {
-        const previewContainer = document.getElementById('edit-image-preview-container');
-        if (!previewContainer) return;
-        
-        previewContainer.innerHTML = '';
-        
-        if (!images || images.length === 0) {
-            previewContainer.innerHTML = '<p>Keine Bilder vorhanden</p>';
-            return;
-        }
-        
-        images.forEach((imageName, index) => {
-            const preview = document.createElement('div');
-            preview.className = 'image-preview-item';
-            
-            const isVideo = isVideoFile(imageName);
-            const mediaHtml = isVideo 
-                ? `<video src="/uploads/${imageName}" style="max-width: 150px; max-height: 150px; object-fit: cover;" controls preload="metadata"></video>`
-                : `<img src="/uploads/${imageName}" alt="Image ${index + 1}" style="max-width: 150px; max-height: 150px; object-fit: cover;">`;
-            
-            preview.innerHTML = `
-                ${mediaHtml}
-                <div class="image-controls">
-                    <button type="button" onclick="removeExistingImage('${imageName}', this)" style="background: #dc3545; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; margin-left: 10px;">Entfernen</button>
-                </div>
-            `;
-            previewContainer.appendChild(preview);
-            
-            // Add hidden input for the image
-            const hiddenInput = document.createElement('input');
-            hiddenInput.type = 'hidden';
-            hiddenInput.name = 'existing_images';
-            hiddenInput.value = imageName;
-            previewContainer.appendChild(hiddenInput);
-        });
-    }
-    
-    // Function to remove an existing image
-    function removeExistingImage(imageName, button) {
-        try {
-            // First, determine context - are we in edit mode or main view?
-            const inEditMode = !!document.getElementById('edit-item-form');
-            
-            // Always remove the preview element (works in both contexts)
-            const previewItem = button.closest('.image-preview-item');
-            if (previewItem) {
-                previewItem.remove();
-            }
-            
-            // If we're in edit mode, handle form inputs
-            if (inEditMode) {
-                // Find and remove the corresponding hidden input in the edit form
-                const editForm = document.getElementById('edit-item-form');
-                
-                if (editForm) {
-                    // Remove from existing images
-                    const existingInputs = editForm.querySelectorAll('input[name="existing_images"]');
-                    existingInputs.forEach(input => {
-                        if (input.value === imageName) {
-                            input.remove();
-                        }
-                    });
-                    
-                    // Add to removed images
-                    const removedInput = document.createElement('input');
-                    removedInput.type = 'hidden';
-                    removedInput.name = 'removed_images';
-                    removedInput.value = imageName;
-                    editForm.appendChild(removedInput);
-                }
-            } else {
-                // In main view, we may need different logic
-                console.log(`Image ${imageName} removed from display in main view`);
-                // Add any main view specific handling here
-            }
-        } catch (error) {
-            console.error(`Error in removeExistingImage: ${error.message}`);
-        }
-    }
-    
-    // Validate file types for image uploads
-    document.addEventListener('DOMContentLoaded', function() {
-        // Check if we're in the edit item context
-        if (!document.getElementById('edit-item-form')) {
-            console.log('Edit item form not found, skipping edit item functions initialization');
-            return; // Exit early if we're not in the edit item context
-        }
-        
-        const imageInput = document.getElementById('edit-new-images');
-        const previewContainer = document.getElementById('edit-image-preview-container');
-        
-        if (imageInput) {
-            imageInput.addEventListener('change', function(e) {
-                // Validate file types before preview
-                const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif',
-                                    'video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/x-matroska',
-                                    'video/webm', 'video/x-flv', 'video/mp4', 'video/3gpp'];
-                const files = this.files;
-                let hasInvalidFile = false;
-                
-                for (let i = 0; i < files.length; i++) {
-                    if (!allowedTypes.includes(files[i].type)) {
-                        hasInvalidFile = true;
-                        // Clear the file input to prevent submission
-                        this.value = '';
-                        alert('Fehler: Datei "' + files[i].name + '" hat ein nicht unterstütztes Format. Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP');
-                        return; // Stop processing
-                    }
-                }
-                
-                // Continue with regular preview handling...
-            });
-        }
-    });
-</script>

Web/templates/edit_library.html

@@ -0,0 +1,509 @@
+<!--
+   Copyright 2025-2026 AIIrondev
+   Licensed under the Inventarsystem EULA.
+-->
+{% extends "base.html" %}
+
+{% block title %}{{ page_title|default('Artikel bearbeiten') }} - Inventarsystem{% endblock %}
+
+{% block content %}
+<style>
+    .edit-container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+        background-color: var(--ui-surface);
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    }
+
+    .edit-form h1 {
+        color: var(--ui-text);
+        margin-bottom: 30px;
+        text-align: center;
+        font-size: 2em;
+    }
+
+    .form-group {
+        margin-bottom: 20px;
+    }
+
+    .form-group label {
+        display: block;
+        margin-bottom: 5px;
+        font-weight: bold;
+        color: var(--ui-text);
+    }
+
+    .form-group input,
+    .form-group select,
+    .form-group textarea {
+        width: 100%;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 16px;
+        box-sizing: border-box;
+    }
+
+    .form-group textarea {
+        height: 100px;
+        resize: vertical;
+    }
+
+    .filter-inputs {
+        background-color: var(--ui-surface-soft);
+        padding: 20px;
+        border-radius: 5px;
+        margin: 20px 0;
+    }
+
+    .filter-inputs h3 {
+        color: var(--ui-text);
+        margin-bottom: 15px;
+        font-size: 1.2em;
+    }
+
+    .multi-filter {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 15px;
+    }
+
+    .filter-dropdown-select {
+        width: 100%;
+        padding: 8px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        background-color: white;
+    }
+
+    .isbn-input-group {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+    }
+
+    .isbn-input-group input {
+        flex: 1;
+    }
+
+    .fetch-isbn-button {
+        background-color: #007bff;
+        color: white;
+        border: none;
+        padding: 8px 12px;
+        border-radius: 4px;
+        cursor: pointer;
+        white-space: nowrap;
+        transition: background-color 0.2s ease;
+    }
+
+    .fetch-isbn-button:hover {
+        background-color: #0056b3;
+    }
+
+    /* Scanner Elements */
+    #code4-scanner video, #code4-scanner canvas,
+    #isbn-scanner video, #isbn-scanner canvas {
+        width: 100%;
+        max-width: 640px;
+        height: auto;
+        border-radius: 5px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+
+    #code4-scanner canvas, #isbn-scanner canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    #code4-scanner, #isbn-scanner {
+        position: relative;
+        overflow: hidden;
+    }
+
+    /* Image Management */
+    .existing-images-grid {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+        margin-top: 10px;
+    }
+
+    .existing-image-card {
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        padding: 8px;
+        text-align: center;
+        background: #fff;
+        width: 120px;
+    }
+
+    .existing-image-card img {
+        width: 100%;
+        height: 100px;
+        object-fit: cover;
+        border-radius: 4px;
+    }
+
+    .existing-image-card label {
+        font-size: 0.8em;
+        margin-top: 5px;
+        cursor: pointer;
+        font-weight: normal;
+    }
+
+    .add-new-btn {
+        background-color: #007bff;
+        color: white;
+        border: none;
+        padding: 5px 10px;
+        border-radius: 3px;
+        cursor: pointer;
+        margin-top: 5px;
+        font-size: 12px;
+    }
+
+    .submit-button {
+        background-color: #28a745;
+        color: white;
+        border: none;
+        padding: 15px 30px;
+        border-radius: 5px;
+        font-size: 18px;
+        font-weight: bold;
+        cursor: pointer;
+        width: 100%;
+        margin-top: 20px;
+        transition: background-color 0.2s ease;
+    }
+
+    .submit-button:hover {
+        background-color: #218838;
+    }
+
+    .edit-new-location-container {
+        display: none;
+        margin-top: 10px;
+    }
+</style>
+
+<div class="edit-container">
+    <div class="edit-form">
+        <h1>{{ page_title|default('Artikel bearbeiten') }}</h1>
+        <form method="POST" action="{{ url_for('item_edit', id=item._id) }}" enctype="multipart/form-data">
+            <input type="hidden" name="item_id" value="{{ item._id }}">
+
+            {% if show_library_features %}
+            <!-- ================= LIBRARY SPECIFIC FIELDS ================= -->
+            <div class="form-group">
+                <label for="isbn">ISBN / Barcode:</label>
+                <div class="isbn-input-group">
+                    <input type="text" id="isbn" name="isbn" value="{{ item.ISBN|default('') }}" placeholder="ISBN oder Barcode eingeben...">
+                    <button type="button" id="scan-isbn-btn" class="fetch-isbn-button">Barcode scannen</button>
+                    <button type="button" class="fetch-isbn-button" onclick="fetchBookInfo('edit')">Informationen abrufen</button>
+                </div>
+                <div id="isbn-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;"></div>
+                <small id="isbn-scan-status" style="display:block; color:#666; margin-top:6px;"></small>
+                <div id="book-info-container"></div>
+            </div>
+
+            <div class="filter-inputs" style="margin-bottom: 20px;">
+                <h3>Medientyp</h3>
+                <div class="form-group">
+                    <select name="item_type_input" id="item_type_input">
+                        <option value="Buch" {% if item.ItemType == 'Buch' %}selected{% endif %}>Buch</option>
+                        <option value="Schulbuch" {% if item.ItemType == 'Schulbuch' %}selected{% endif %}>Schulbuch</option>
+                        <option value="CD" {% if item.ItemType == 'CD' %}selected{% endif %}>CD</option>
+                        <option value="DVD" {% if item.ItemType == 'DVD' %}selected{% endif %}>DVD</option>
+                        <option value="Sonstiges" {% if item.ItemType == 'Sonstiges' %}selected{% endif %}>Sonstiges</option>
+                    </select>
+                </div>
+                <h3>Bibliotheks-Kategorie:</h3>
+                <div class="form-group">
+                    <input type="text" name="library_category" id="library_category" value="{{ item.library_category|default('') }}" placeholder="z.B. Belletristik, Sachbücher, etc.">
+                </div>
+            </div>
+            {% endif %}
+
+            <!-- ================= COMMON CORE FIELDS ================= -->
+            <div class="form-group">
+                <label for="name">Name / Titel:</label>
+                <input type="text" id="name" name="name" value="{{ item.Name|default('') }}" required>
+            </div>
+
+            <div class="form-group">
+                <label for="ort">Ort / Standort:</label>
+                <select id="ort" name="ort" data-selected="{{ item.Ort|default('') }}" required>
+                    <option value="">-- Bitte Ort auswählen --</option>
+                    {% if item.Ort %}
+                    <option value="{{ item.Ort }}" selected>{{ item.Ort }}</option>
+                    {% endif %}
+                </select>
+                <button type="button" class="add-new-btn" id="add-new-location-btn">Neuen Ort hinzufügen</button>
+                <div id="new-location-container" class="edit-new-location-container">
+                    <input type="text" id="new-location-input" placeholder="Neuen Ort eingeben">
+                    <button type="button" onclick="addNewLocation()">Hinzufügen</button>
+                    <button type="button" onclick="cancelAddLocation()">Abbrechen</button>
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label for="beschreibung">Beschreibung:</label>
+                <textarea id="beschreibung" name="beschreibung" required>{{ item.Beschreibung|default('') }}</textarea>
+            </div>
+
+            <div class="form-group" id="primary_code_group">
+                <label for="code_4">Basis-Code (Haupt-Barcode)</label>
+                <div style="display: flex; gap: 10px;">
+                    <input type="text" id="code_4" name="code_4" class="form-control" value="{{ item.Code_4|default('') }}" required>
+                    <button type="button" id="scan-code4-btn" class="fetch-isbn-button">Barcode scannen</button>
+                </div>
+                <div id="code4-scanner" style="display:none; margin-top: 10px;"></div>
+                <small id="code4-scan-status" class="form-text text-muted"></small>
+            </div>
+
+            <div class="form-group" id="individual_codes_group">
+                <label for="individual_codes">Weitere Einzelcodes der Gruppe (je Zeile ein Code)</label>
+                <textarea id="individual_codes" name="individual_codes" rows="4" class="form-control" placeholder="z.B.&#10;ABC-001&#10;ABC-002">{{ item.IndividualCodes|default('') }}</textarea>
+                <small style="display:block; color:#666; margin-top: 5px;">Der Basis-Code steht oben. Alle weiteren Gruppenmitglieder werden hier untereinander aufgeführt.</small>
+            </div>
+
+            {% if not show_library_features %}
+            <!-- ================= SYSTEM FILTERS 1-3 (INVENTORY / OTHER ITEMS ONLY) ================= -->
+            <div class="filter-inputs">
+                <h3>{{ filter_names.get('1', 'Jahrgangsstufe') }}</h3>
+                <div class="multi-filter">
+                    {% for idx in range(4) %}
+                    <div class="form-group">
+                        <label for="filter1-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
+                        <select id="filter1-{{ idx + 1 }}" name="filter" class="filter-dropdown-select" data-selected="{{ item.Filter[idx] if item.Filter and item.Filter|length > idx else '' }}">
+                            <option value="">-- Optional --</option>
+                        </select>
+                    </div>
+                    {% endfor %}
+                </div>
+
+                <h3>{{ filter_names.get('2', 'Fachgebiet') }}</h3>
+                <div class="multi-filter">
+                    {% for idx in range(4) %}
+                    <div class="form-group">
+                        <label for="filter2-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
+                        <select id="filter2-{{ idx + 1 }}" name="filter2" class="filter-dropdown-select" data-selected="{{ item.Filter2[idx] if item.Filter2 and item.Filter2|length > idx else '' }}">
+                            <option value="">-- Optional --</option>
+                        </select>
+                    </div>
+                    {% endfor %}
+                </div>
+
+                <h3>{{ filter_names.get('3', 'Schlagwort') }}</h3>
+                <div class="multi-filter">
+                    {% for idx in range(4) %}
+                    <div class="form-group">
+                        <label for="filter3-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
+                        <input type="text" id="filter3-{{ idx + 1 }}" name="filter3" value="{{ item.Filter3[idx] if item.Filter3 and item.Filter3|length > idx else '' }}">
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+            {% endif %}
+
+            <!-- ================= DATES & FINANCIALS ================= -->
+            <div class="form-group">
+                <label for="anschaffungsjahr">Anschaffungsjahr:</label>
+                <input type="date" id="anschaffungsjahr" name="anschaffungsjahr" value="{{ item.Anschaffungsjahr|default('') }}">
+            </div>
+            <div class="form-group">
+                <label for="anschaffungskosten">Anschaffungskosten (€):</label>
+                <input type="text" id="anschaffungskosten" name="anschaffungskosten" value="{{ item.Anschaffungskosten|default('') }}">
+            </div>
+
+            {% if not show_library_features %}
+            <!-- ================= INVENTORY IMAGE MANAGEMENT ================= -->
+            <div class="form-group">
+                <label>Bestehende Bilder behalten:</label>
+                {% if item.Images and item.Images|length > 0 %}
+                <div class="existing-images-grid">
+                    {% for img in item.Images %}
+                    <div class="existing-image-card">
+                        <img src="{{ url_for('uploaded_file', filename=img) }}" alt="Bild">
+                        <label>
+                            <input type="checkbox" name="existing_images" value="{{ img }}" checked>
+                            Behalten
+                        </label>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% else %}
+                <p style="color:#777; font-size:0.9em;">Keine Bilder vorhanden.</p>
+                {% endif %}
+
+                <label for="images" style="margin-top:15px;">Neue Bilder/Videos hinzufügen:</label>
+                <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif, .mp4, .mov, .avi, .mkv, .webm" multiple>
+            </div>
+            {% endif %}
+
+            <div class="form-group">
+                <label for="reservierbar" style="display:inline-block; width:auto; margin-right:10px;">Reservierbar:</label>
+                <input type="checkbox" id="reservierbar" name="reservierbar" style="width:auto;" {% if item.Reservierbar %}checked{% endif %}>
+            </div>
+
+            <button type="submit" class="submit-button">Änderungen speichern</button>
+        </form>
+    </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
+<script>
+    let scannerRunning = false;
+    let activeScannerCallback = null;
+    let code4LastScanned = '';
+    let code4LastScannedAt = 0;
+
+    function loadAndSelectFilterValues(filterNumber) {
+        fetch(`/get_predefined_filter_values/${filterNumber}`)
+            .then(res => res.json())
+            .then(data => {
+                for (let i = 1; i <= 4; i++) {
+                    const select = document.getElementById(`filter${filterNumber}-${i}`);
+                    if (!select) continue;
+
+                    const selectedValue = select.getAttribute('data-selected') || '';
+
+                    data.values.forEach(val => {
+                        if (!val || String(val).trim() === '') return;
+                        const opt = document.createElement('option');
+                        opt.value = val;
+                        opt.textContent = val;
+                        select.appendChild(opt);
+                    });
+
+                    if (selectedValue && !Array.from(select.options).some(o => o.value === selectedValue)) {
+                        const customOpt = document.createElement('option');
+                        customOpt.value = selectedValue;
+                        customOpt.textContent = selectedValue;
+                        select.appendChild(customOpt);
+                    }
+
+                    select.value = selectedValue;
+                }
+            })
+            .catch(err => console.error(`Error loading Filter ${filterNumber}:`, err));
+    }
+
+    function loadLocationOptions() {
+        fetch('/get_predefined_locations')
+            .then(res => res.json())
+            .then(data => {
+                const select = document.getElementById('ort');
+                if (!select) return;
+                const currentVal = select.getAttribute('data-selected') || select.value;
+
+                data.locations.forEach(loc => {
+                    if (!Array.from(select.options).some(o => o.value === loc)) {
+                        const opt = document.createElement('option');
+                        opt.value = loc;
+                        opt.textContent = loc;
+                        select.appendChild(opt);
+                    }
+                });
+
+                select.value = currentVal;
+            })
+            .catch(err => console.error('Error loading locations:', err));
+    }
+
+    function addNewLocation() {
+        const input = document.getElementById('new-location-input');
+        const val = input.value.trim();
+        if (!val) return;
+        const select = document.getElementById('ort');
+        const opt = document.createElement('option');
+        opt.value = val;
+        opt.textContent = val;
+        opt.selected = true;
+        select.appendChild(opt);
+        document.getElementById('new-location-container').style.display = 'none';
+        input.value = '';
+    }
+
+    function cancelAddLocation() {
+        document.getElementById('new-location-container').style.display = 'none';
+        document.getElementById('new-location-input').value = '';
+    }
+
+    function runEngineInitialization(targetSelector, activeCallback, completionMsg, errorStatusSetter) {
+        if (scannerRunning) { Quagga.stop(); scannerRunning = false; }
+        activeScannerCallback = activeCallback;
+
+        Quagga.init({
+            inputStream: { name: "Live", type: "LiveStream", target: document.querySelector(targetSelector), constraints: { width: 640, height: 480, facingMode: "environment" } },
+            decoder: { readers: ["code_128_reader", "ean_reader", "code_39_reader", "upc_reader"] }
+        }, function(err) {
+            if (err) { errorStatusSetter("Kamera-Fehler.", true); return; }
+            Quagga.start(); scannerRunning = true; errorStatusSetter(completionMsg, false);
+        });
+    }
+
+    function killScannerHardware() {
+        if (!scannerRunning) return;
+        Quagga.stop(); scannerRunning = false; activeScannerCallback = null;
+    }
+
+    Quagga.onDetected(function(data) {
+        if (!data || !data.codeResult || !data.codeResult.code) return;
+        if (typeof activeScannerCallback === "function") activeScannerCallback(String(data.codeResult.code).trim());
+    });
+
+    function startCode4Scanner() {
+        const scannerBox = document.getElementById('code4-scanner');
+        const scanBtn = document.getElementById('scan-code4-btn');
+        const baseField = document.getElementById('code_4');
+        const indArea = document.getElementById('individual_codes');
+
+        if (scannerBox.style.display !== 'none') {
+            killScannerHardware(); scannerBox.style.display = 'none'; scanBtn.textContent = 'Barcode scannen'; return;
+        }
+
+        scannerBox.style.display = 'block'; scanBtn.textContent = 'Scanner stoppen';
+        runEngineInitialization('#code4-scanner', function(decodedText) {
+            const now = Date.now();
+            if (decodedText === code4LastScanned && (now - code4LastScannedAt) < 1500) return;
+            code4LastScanned = decodedText; code4LastScannedAt = now;
+
+            killScannerHardware(); scannerBox.style.display = 'none'; scanBtn.textContent = 'Barcode scannen';
+
+            if (!baseField.value.trim()) {
+                baseField.value = decodedText;
+            } else {
+                let codes = indArea.value.split('\n').map(c => c.trim()).filter(c => c);
+                if (!codes.includes(decodedText) && baseField.value.trim() !== decodedText) {
+                    codes.push(decodedText);
+                    indArea.value = codes.join('\n');
+                }
+            }
+        }, 'Scanner läuft...', msg => { document.getElementById('code4-scan-status').textContent = msg; });
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        loadLocationOptions();
+
+        // Load Filter options if elements exist on page
+        if (document.getElementById('filter1-1')) {
+            loadAndSelectFilterValues(1);
+            loadAndSelectFilterValues(2);
+        }
+
+        const scanCodeBtn = document.getElementById('scan-code4-btn');
+        if (scanCodeBtn) scanCodeBtn.addEventListener('click', startCode4Scanner);
+
+        const addLocBtn = document.getElementById('add-new-location-btn');
+        if (addLocBtn) addLocBtn.addEventListener('click', () => {
+            const c = document.getElementById('new-location-container');
+            c.style.display = c.style.display === 'none' ? 'block' : 'none';
+        });
+    });
+</script>
+{% endblock %}

Web/templates/library.html

@@ -1,752 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Bibliothek - {{ APP_VERSION }}{% endblock %}
-
-{% block content %}
-<div class="content-container">
-    <!-- Header Section -->
-    <div class="header-section">
-        <div class="header-title-group">
-            <h1>📚 Bibliothek</h1>
-            <p class="subtitle">Bücher, CDs und weitere Medien</p>
-        </div>
-    </div>
-
-    <!-- Search & Filter Section -->
-    <div class="search-filter-section">
-        <input type="text" id="searchInput" placeholder="Nach Titel, Autor, ISBN suchen..." class="search-input">
-        
-        <div class="filter-group" id="filterGroup">
-            <button class="filter-btn" id="filterBtn" aria-expanded="false" aria-label="Filter öffnen">
-                🔍 Filter <span class="filter-arrow">▼</span>
-            </button>
-            <div class="filter-dropdown" id="filterDropdown" style="display: none;">
-                <div class="filter-section">
-                    <h4>Medientyp</h4>
-                    <div class="filter-options">
-                        <label><input type="checkbox" class="filter-checkbox" data-filter="type" value="book"> Buch</label>
-                        <label><input type="checkbox" class="filter-checkbox" data-filter="type" value="cd"> CD/DVD</label>
-                        <label><input type="checkbox" class="filter-checkbox" data-filter="type" value="other"> Sonstige</label>
-                    </div>
-                </div>
-                <div class="filter-section">
-                    <h4>Status</h4>
-                    <div class="filter-options">
-                        <label><input type="checkbox" class="filter-checkbox" data-filter="status" value="available"> Verfügbar</label>
-                        <label><input type="checkbox" class="filter-checkbox" data-filter="status" value="borrowed"> Ausgeliehen</label>
-                        <label><input type="checkbox" class="filter-checkbox" data-filter="status" value="reserved"> Reserviert</label>
-                    </div>
-                </div>
-                <button id="clearFiltersBtn" class="button">Filter zurücksetzen</button>
-            </div>
-        </div>
-
-        <!-- Barcode Scanner -->
-        <button id="scannerBtn" class="scan-button" aria-expanded="false" aria-label="Scanner öffnen">
-            📱 Scanner <span class="scanner-arrow">▼</span>
-        </button>
-    </div>
-
-    <!-- Scanner Panel -->
-    <div id="qrContainer" class="qr-container" style="display: none;">
-        <div id="qr-reader" style="width: auto; height: 300px;"></div>
-        <span id="qr-result" style="display: none;"></span>
-    </div>
-
-    <!-- Table Header (only in table mode) -->
-    <div class="library-table-wrapper">
-    <div class="table-header" id="tableHeader" style="display: none;">
-        <div class="table-row">
-            <div class="table-cell title-cell">Titel</div>
-            <div class="table-cell author-cell">Autor/Künstler</div>
-            <div class="table-cell isbn-cell">ISBN/Code</div>
-            <div class="table-cell type-cell">Typ</div>
-            <div class="table-cell status-cell">Status</div>
-            <div class="table-cell actions-cell">Aktionen</div>
-        </div>
-    </div>
-
-    <!-- Items Container -->
-    <div id="itemsContainer" class="items-container">
-        {% if library_items %}
-            {% for item in library_items %}
-                <div class="item-card library-item" data-item-id="{{ item._id }}" data-type="{{ item.get('ItemType', 'book') }}" data-status="{{ 'borrowed' if item.get('Verfuegbar') == False else 'available' }}">
-                    <!-- Card Mode View -->
-                    <div class="item-content card-mode">
-                        <div class="item-image-wrapper">
-                            {% if item.get('Image') %}
-                                <img src="/uploads/{{ item.Image }}" alt="{{ item.Name }}" class="item-image">
-                            {% else %}
-                                <div class="placeholder-image">📚</div>
-                            {% endif %}
-                        </div>
-                        
-                        <div class="item-details">
-                            <h3 class="item-name">{{ item.Name }}</h3>
-                            
-                            {% if item.get('Author') %}
-                                <p class="item-author">Von: {{ item.Author }}</p>
-                            {% endif %}
-                            
-                            {% if item.get('ISBN') %}
-                                <p class="item-isbn">ISBN: {{ item.ISBN }}</p>
-                            {% endif %}
-                            
-                            <div class="item-meta">
-                                <span class="item-type">{{ item.get('ItemType', 'Medium') }}</span>
-                                <span class="item-status {% if item.get('Verfuegbar') == False %}borrowed{% else %}available{% endif %}">
-                                    {% if item.get('Verfuegbar') == False %}Ausgeliehen{% else %}Verfügbar{% endif %}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Table Mode View -->
-                    <div class="item-content table-mode" style="display: none;">
-                        <div class="table-row">
-                            <div class="table-cell title-cell">
-                                <span class="descriptor">Titel:</span>
-                                <span class="value">{{ item.Name }}</span>
-                            </div>
-                            <div class="table-cell author-cell">
-                                <span class="descriptor">Autor:</span>
-                                <span class="value">{{ item.get('Author', '—') }}</span>
-                            </div>
-                            <div class="table-cell isbn-cell">
-                                <span class="descriptor">ISBN:</span>
-                                <span class="value">{{ item.get('ISBN', '—') }}</span>
-                            </div>
-                            <div class="table-cell type-cell">
-                                <span class="descriptor">Typ:</span>
-                                <span class="value">{{ item.get('ItemType', 'Medium') }}</span>
-                            </div>
-                            <div class="table-cell status-cell">
-                                <span class="descriptor">Status:</span>
-                                <span class="value {% if item.get('Verfuegbar') == False %}borrowed{% else %}available{% endif %}">
-                                    {% if item.get('Verfuegbar') == False %}Ausgeliehen{% else %}Verfügbar{% endif %}
-                                </span>
-                            </div>
-                            <div class="table-cell actions-cell">
-                                <button class="action-button details-btn" data-item-id="{{ item._id }}">Details</button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Action Buttons (Card Mode) -->
-                    <div class="item-actions card-mode" style="display: flex;">
-                        <button class="action-button details-btn" data-item-id="{{ item._id }}">Details</button>
-                        {% if item.get('Verfuegbar') == True %}
-                            <button class="action-button borrow-btn" data-item-id="{{ item._id }}">Ausleihen</button>
-                        {% else %}
-                            <button class="action-button return-btn" data-item-id="{{ item._id }}" disabled>Ausgeliehen</button>
-                        {% endif %}
-                    </div>
-                </div>
-            {% endfor %}
-        {% else %}
-            <div class="empty-state">
-                <p>Keine Bibliotheks-Medien gefunden</p>
-            </div>
-        {% endif %}
-    </div>
-    </div>
-</div>
-
-<!-- Detail Modal -->
-<div id="detailModal" class="modal" style="display: none;">
-    <div class="modal-content">
-        <button class="modal-close" aria-label="Schließen">✕</button>
-        
-        <div class="modal-body" id="modalBody">
-            <!-- Filled by JavaScript -->
-        </div>
-    </div>
-</div>
-
-<!-- Borrow Modal -->
-<div id="borrowModal" class="modal" style="display: none;">
-    <div class="modal-content">
-        <h2>Ausleihen</h2>
-        <form id="borrowForm">
-            <input type="hidden" id="borrowItemId" name="item_id">
-            
-            <div class="form-group">
-                <label for="studentIdInput">Schülerausweis-ID (optional):</label>
-                <input type="text" id="studentIdInput" name="student_id" placeholder="Ausweis scannen oder eingeben" class="form-input">
-            </div>
-            
-            <div class="form-group">
-                <label for="borrowDaysInput">Ausleih-Dauer (Tage):</label>
-                <input type="number" id="borrowDaysInput" name="borrow_days" min="1" max="365" class="form-input" value="14">
-            </div>
-            
-            <div class="form-actions">
-                <button type="submit" class="button primary-button">Ausleihen</button>
-                <button type="button" class="button cancel-button" onclick="document.getElementById('borrowModal').style.display='none'">Abbrechen</button>
-            </div>
-        </form>
-    </div>
-</div>
-<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
-<script>
-// View mode persistence
-const LIBRARY_VIEW_MODE_KEY = 'inventarLibraryViewMode';
-const MOBILE_LIBRARY_MAX_WIDTH = 900;
-const MOBILE_LIBRARY_MIN_ITEMS = 24;
-
-function isMobileViewport() {
-    return window.matchMedia(`(max-width: ${MOBILE_LIBRARY_MAX_WIDTH}px)`).matches;
-}
-
-function setViewMode(mode) {
-    localStorage.setItem(LIBRARY_VIEW_MODE_KEY, mode);
-    const container = document.getElementById('itemsContainer');
-    const tableHeader = document.getElementById('tableHeader');
-    const renderedItems = Array.from(container.querySelectorAll('.item-card'));
-    const virtualizationState = window.mobileLibraryVirtualizationState || null;
-    const detachedItems = virtualizationState && virtualizationState.active && Array.isArray(virtualizationState.items)
-        ? virtualizationState.items.filter(item => !container.contains(item))
-        : [];
-    const items = [...renderedItems, ...detachedItems.filter(item => !container.contains(item))];
-    
-    items.forEach(item => {
-        const cardContent = item.querySelector('.item-content.card-mode');
-        const cardActions = item.querySelector('.item-actions.card-mode');
-        const tableContent = item.querySelector('.item-content.table-mode');
-        
-        if (mode === 'table') {
-            if (cardContent) cardContent.style.display = 'none';
-            if (cardActions) cardActions.style.display = 'none';
-            if (tableContent) tableContent.style.display = 'block';
-        } else {
-            if (cardContent) cardContent.style.display = 'flex';
-            if (cardActions) cardActions.style.display = 'flex';
-            if (tableContent) tableContent.style.display = 'none';
-        }
-    });
-    
-    tableHeader.style.display = mode === 'table' ? 'block' : 'none';
-    
-    document.getElementById('viewModeToggle').classList.toggle('open', mode === 'table');
-}
-
-function initMobileWindowedLibraryLoading() {
-    const container = document.getElementById('itemsContainer');
-    if (!container) {
-        return;
-    }
-
-    if (!window.mobileLibraryVirtualizationState) {
-        window.mobileLibraryVirtualizationState = {
-            active: false,
-            items: [],
-            topSpacer: null,
-            bottomSpacer: null,
-            averageItemHeight: Math.max(Math.round(window.innerHeight * 0.35), 230),
-            lastStart: -1,
-            lastEnd: -1,
-            framePending: false,
-            scrollListener: null,
-            resizeListener: null,
-            initialized: false
-        };
-    }
-    const state = window.mobileLibraryVirtualizationState;
-
-    function restoreAllImages() {
-        state.items.forEach(item => {
-            const image = item.querySelector('img.item-image');
-            if (!image) {
-                return;
-            }
-
-            const originalSrc = image.dataset.mobileSrc || '';
-            if (!image.getAttribute('src') && originalSrc) {
-                image.setAttribute('src', originalSrc);
-            }
-        });
-    }
-
-    function updateImageMemory(startIndex, endIndex) {
-        const imageBuffer = 4;
-        state.items.forEach((item, index) => {
-            const image = item.querySelector('img.item-image');
-            if (!image) {
-                return;
-            }
-
-            if (!image.dataset.mobileSrc) {
-                image.dataset.mobileSrc = image.getAttribute('src') || '';
-            }
-            image.loading = 'lazy';
-            image.decoding = 'async';
-
-            const shouldKeepLoaded = index >= startIndex - imageBuffer && index < endIndex + imageBuffer;
-            if (shouldKeepLoaded) {
-                if (!image.getAttribute('src') && image.dataset.mobileSrc) {
-                    image.setAttribute('src', image.dataset.mobileSrc);
-                }
-                return;
-            }
-
-            if (image.getAttribute('src')) {
-                image.removeAttribute('src');
-            }
-        });
-    }
-
-    function renderVisibleWindow() {
-        if (!state.active || !state.topSpacer || !state.bottomSpacer) {
-            return;
-        }
-
-        const viewportHeight = window.innerHeight || 800;
-        const scrollTop = window.scrollY || window.pageYOffset || 0;
-        const renderBuffer = viewportHeight * 1.5;
-
-        let startIndex = Math.max(0, Math.floor((scrollTop - renderBuffer) / state.averageItemHeight));
-        let endIndex = Math.min(state.items.length, Math.ceil((scrollTop + viewportHeight + renderBuffer) / state.averageItemHeight));
-
-        if (endIndex - startIndex < 14) {
-            endIndex = Math.min(state.items.length, startIndex + 14);
-        }
-
-        if (startIndex === state.lastStart && endIndex === state.lastEnd) {
-            return;
-        }
-
-        state.lastStart = startIndex;
-        state.lastEnd = endIndex;
-
-        while (state.topSpacer.nextSibling && state.topSpacer.nextSibling !== state.bottomSpacer) {
-            state.topSpacer.nextSibling.remove();
-        }
-
-        const fragment = document.createDocumentFragment();
-        for (let index = startIndex; index < endIndex; index += 1) {
-            fragment.appendChild(state.items[index]);
-        }
-        container.insertBefore(fragment, state.bottomSpacer);
-
-        let measuredHeightSum = 0;
-        let measuredCount = 0;
-        for (let index = startIndex; index < endIndex; index += 1) {
-            const height = state.items[index].getBoundingClientRect().height;
-            if (height > 0) {
-                measuredHeightSum += height;
-                measuredCount += 1;
-            }
-        }
-
-        if (measuredCount > 0) {
-            const measuredAverage = measuredHeightSum / measuredCount;
-            state.averageItemHeight = Math.round((state.averageItemHeight * 3 + measuredAverage) / 4);
-        }
-
-        state.topSpacer.style.height = `${Math.max(0, startIndex * state.averageItemHeight)}px`;
-        state.bottomSpacer.style.height = `${Math.max(0, (state.items.length - endIndex) * state.averageItemHeight)}px`;
-        updateImageMemory(startIndex, endIndex);
-    }
-
-    function scheduleWindowRender() {
-        if (!state.active || state.framePending) {
-            return;
-        }
-        state.framePending = true;
-        requestAnimationFrame(() => {
-            state.framePending = false;
-            renderVisibleWindow();
-        });
-    }
-
-    function activateVirtualization() {
-        if (state.active) {
-            return;
-        }
-
-        if (!Array.isArray(state.items) || state.items.length === 0) {
-            state.items = Array.from(container.querySelectorAll('.library-item'));
-        }
-        if (state.items.length <= MOBILE_LIBRARY_MIN_ITEMS) {
-            return;
-        }
-
-        state.topSpacer = document.createElement('div');
-        state.topSpacer.className = 'mobile-window-spacer top';
-        state.bottomSpacer = document.createElement('div');
-        state.bottomSpacer.className = 'mobile-window-spacer bottom';
-
-        state.items.forEach(item => item.remove());
-        container.appendChild(state.topSpacer);
-        container.appendChild(state.bottomSpacer);
-
-        state.lastStart = -1;
-        state.lastEnd = -1;
-        state.framePending = false;
-        state.active = true;
-
-        if (!state.scrollListener) {
-            state.scrollListener = () => scheduleWindowRender();
-            window.addEventListener('scroll', state.scrollListener, { passive: true });
-        }
-
-        scheduleWindowRender();
-    }
-
-    function deactivateVirtualization() {
-        if (!state.active) {
-            if (!Array.isArray(state.items) || state.items.length === 0) {
-                state.items = Array.from(container.querySelectorAll('.library-item'));
-            }
-            return;
-        }
-
-        if (state.scrollListener) {
-            window.removeEventListener('scroll', state.scrollListener);
-            state.scrollListener = null;
-        }
-
-        if (state.topSpacer && state.topSpacer.parentNode === container) {
-            state.topSpacer.remove();
-        }
-        if (state.bottomSpacer && state.bottomSpacer.parentNode === container) {
-            state.bottomSpacer.remove();
-        }
-
-        const fragment = document.createDocumentFragment();
-        state.items.forEach(item => fragment.appendChild(item));
-        container.appendChild(fragment);
-
-        restoreAllImages();
-
-        state.topSpacer = null;
-        state.bottomSpacer = null;
-        state.lastStart = -1;
-        state.lastEnd = -1;
-        state.framePending = false;
-        state.active = false;
-
-        const currentMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
-        setViewMode(currentMode);
-    }
-
-    function syncVirtualizationWithViewport() {
-        if (!Array.isArray(state.items) || state.items.length === 0) {
-            state.items = Array.from(container.querySelectorAll('.library-item'));
-        }
-
-        const shouldVirtualize = isMobileViewport() && state.items.length > MOBILE_LIBRARY_MIN_ITEMS;
-        if (shouldVirtualize) {
-            activateVirtualization();
-            scheduleWindowRender();
-        } else {
-            deactivateVirtualization();
-        }
-    }
-
-    if (!state.initialized) {
-        state.resizeListener = () => syncVirtualizationWithViewport();
-        window.addEventListener('resize', state.resizeListener, { passive: true });
-        state.initialized = true;
-    }
-
-    syncVirtualizationWithViewport();
-}
-
-// Initialize view mode
-document.addEventListener('DOMContentLoaded', function() {
-    const savedMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
-    setViewMode(savedMode);
-    
-    document.getElementById('viewModeToggle').addEventListener('click', function() {
-        const currentMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
-        const newMode = currentMode === 'card' ? 'table' : 'card';
-        setViewMode(newMode);
-    });
-    
-    // Details button handlers
-    document.querySelectorAll('.details-btn').forEach(btn => {
-        btn.addEventListener('click', function(e) {
-            e.preventDefault();
-            const itemId = this.dataset.itemId;
-            fetch(`/get_item_details/${itemId}`)
-                .then(r => r.json())
-                .then(data => {
-                    if (data.success) {
-                        displayLibraryItemDetail(data.item);
-                        document.getElementById('detailModal').style.display = 'flex';
-                    }
-                });
-        });
-    });
-    
-    // Borrow button handlers
-    document.querySelectorAll('.borrow-btn').forEach(btn => {
-        btn.addEventListener('click', function() {
-            document.getElementById('borrowItemId').value = this.dataset.itemId;
-            document.getElementById('borrowModal').style.display = 'flex';
-        });
-    });
-    
-    // Borrow form submit
-    document.getElementById('borrowForm').addEventListener('submit', function(e) {
-        e.preventDefault();
-        const itemId = document.getElementById('borrowItemId').value;
-        const studentId = document.getElementById('studentIdInput').value || null;
-        const borrowDays = document.getElementById('borrowDaysInput').value || 14;
-        
-        fetch('/borrow_item', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-                item_id: itemId,
-                student_id: studentId,
-                borrow_days: borrowDays
-            })
-        })
-        .then(r => r.json())
-        .then(data => {
-            if (data.success) {
-                alert('Erfolgreich ausgeliehen!');
-                location.reload();
-            } else {
-                alert('Fehler: ' + data.message);
-            }
-        });
-    });
-    
-    // Modal close handlers
-    document.querySelectorAll('.modal-close').forEach(btn => {
-        btn.addEventListener('click', function() {
-            this.closest('.modal').style.display = 'none';
-        });
-    });
-    
-    // Close modals on outside click
-    document.querySelectorAll('.modal').forEach(modal => {
-        modal.addEventListener('click', function(e) {
-            if (e.target === this) this.style.display = 'none';
-        });
-    });
-
-    initMobileWindowedLibraryLoading();
-});
-
-function displayLibraryItemDetail(item) {
-    const modalBody = document.getElementById('modalBody');
-    const returnBtn = item.Verfuegbar === false ? `<button class="action-button return-btn" onclick="returnItem('${item._id}')">Zurückgeben</button>` : '';
-    const borrowBtn = item.Verfuegbar === true ? `<button class="action-button borrow-btn" onclick="openBorrowModal('${item._id}')">Ausleihen</button>` : '';
-    
-    modalBody.innerHTML = `
-        <h2>${item.Name}</h2>
-        <div class="detail-content">
-            ${item.Image ? `<img src="/uploads/${item.Image}" alt="${item.Name}" style="max-width: 200px; margin-bottom: 20px;">` : ''}
-            <p><strong>Autor:</strong> ${item.Author || '—'}</p>
-            <p><strong>ISBN:</strong> ${item.ISBN || '—'}</p>
-            <p><strong>Typ:</strong> ${item.ItemType || 'Medium'}</p>
-            <p><strong>Status:</strong> ${item.Verfuegbar === false ? 'Ausgeliehen' : 'Verfügbar'}</p>
-            ${item.User ? `<p><strong>Ausgeliehen von:</strong> ${item.User}</p>` : ''}
-            ${item.Beschreibung ? `<p><strong>Beschreibung:</strong> ${item.Beschreibung}</p>` : ''}
-            <div class="modal-actions">
-                ${borrowBtn}
-                ${returnBtn}
-            </div>
-        </div>
-    `;
-}
-
-function openBorrowModal(itemId) {
-    document.getElementById('borrowItemId').value = itemId;
-    document.getElementById('borrowModal').style.display = 'flex';
-    document.getElementById('detailModal').style.display = 'none';
-}
-
-function returnItem(itemId) {
-    if (confirm('Wirklich zurückgeben?')) {
-        fetch('/return_item', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({item_id: itemId})
-        })
-        .then(r => r.json())
-        .then(data => {
-            if (data.success) {
-                alert('Erfolgreich zurückgegeben!');
-                location.reload();
-            }
-        });
-    }
-}
-
-// Filter dropdown toggle with auto-close
-function closeAllFilters() {
-    document.querySelectorAll('.filter-dropdown').forEach(d => d.style.display = 'none');
-    document.getElementById('filterBtn').setAttribute('aria-expanded', 'false');
-    document.getElementById('filterBtn').classList.remove('open');
-}
-
-document.getElementById('filterBtn').addEventListener('click', function(e) {
-    e.stopPropagation();
-    const dropdown = document.getElementById('filterDropdown');
-    const isOpen = dropdown.style.display !== 'none';
-    closeAllFilters();
-    if (!isOpen) {
-        dropdown.style.display = 'block';
-        this.setAttribute('aria-expanded', 'true');
-        this.classList.add('open');
-    }
-});
-
-document.addEventListener('click', closeAllFilters);
-document.getElementById('filterDropdown').addEventListener('click', e => e.stopPropagation());
-
-// Clear filters
-document.getElementById('clearFiltersBtn').addEventListener('click', function() {
-    document.querySelectorAll('.filter-checkbox').forEach(c => c.checked = false);
-    closeAllFilters();
-});
-
-// Scanner toggle
-// Scanner state tracking
-let isScanning = false; 
-
-document.getElementById('scannerBtn').addEventListener('click', function(e) {
-    e.stopPropagation();
-    const container = document.getElementById('qrContainer');
-    const isOpen = container.style.display !== 'none';
-    const btn = this;
-    
-    if (isOpen) {
-        // Close the scanner
-        container.style.display = 'none';
-        Quagga.stop();
-        isScanning = false;
-        
-        btn.classList.remove('open');
-        btn.setAttribute('aria-expanded', 'false');
-    } else {
-        // Open the scanner
-        container.style.display = 'block';
-        btn.classList.add('open');
-        btn.setAttribute('aria-expanded', 'true');
-        
-        Quagga.init({
-            inputStream: {
-                name: "Live",
-                type: "LiveStream",
-                // Targets the element where the video stream will inject
-                target: document.querySelector('#qr-reader'), 
-                constraints: {
-                    width: 640,
-                    height: 480,
-                    facingMode: "environment" // Forces back camera
-                },
-            },
-            decoder: {
-                // Optimized for 1D barcodes (e.g., student IDs, member cards)
-                readers: ["code_128_reader", "ean_reader", "code_39_reader", "upc_reader"]
-            } 
-        }, function(err) {
-            if (err) {
-                console.error("Initialization error:", err);
-                alert("Kamera konnte nicht gestartet werden.");
-                return;
-            }
-            Quagga.start();
-            isScanning = true;
-        });
-    }
-});
-
-// Single Quagga event listener for successful scans
-Quagga.onDetected(function(data) {
-    const decodedText = data.codeResult.code;
-    const studentId = String(decodedText || '').trim();
-    
-    // Stop scanning immediately to prevent multiple triggers
-    Quagga.stop();
-    isScanning = false;
-    
-    // Reset UI states to closed
-    const container = document.getElementById('qrContainer');
-    const btn = document.getElementById('scannerBtn');
-    if (container) container.style.display = 'none';
-    if (btn) {
-        btn.classList.remove('open');
-        btn.setAttribute('aria-expanded', 'false');
-    }
-    
-    // Route the scanned data to your input
-    document.getElementById('studentIdInput').value = studentId;
-    alert('Ausweis gescannt: ' + studentId);
-});
-</script>
-
-<style>
-.library-item .item-image-wrapper {
-    width: 120px;
-    height: 160px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 8px;
-    overflow: hidden;
-    flex-shrink: 0;
-}
-
-.library-item .placeholder-image {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 48px;
-    color: white;
-}
-
-.library-item .item-author {
-    font-size: 0.9rem;
-    color: #666;
-    margin: 4px 0;
-}
-
-.library-item .item-isbn {
-    font-size: 0.85rem;
-    color: #999;
-    font-family: monospace;
-    margin: 4px 0;
-}
-
-.library-item .item-type {
-    display: inline-block;
-    background: #e8f0fe;
-    color: #1967d2;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 0.8rem;
-}
-
-.library-item .item-status.available {
-    background: #e6f4ea;
-    color: #137333;
-}
-
-.library-item .item-status.borrowed {
-    background: #fce8e6;
-    color: #b3261e;
-}
-
-/* Mobile: allow horizontal scrolling for table-mode views */
-@media (max-width: 900px) {
-    .library-table-wrapper {
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-        width: 100%;
-    }
-    .library-table-wrapper .table-row {
-        min-width: 720px; /* allow table to have intrinsic width and be scrolled */
-    }
-    .table-header, .item-content.table-mode {
-        display: block; /* keep rows stacked but allow horizontal scroll */
-    }
-}
-</style>
-{% endblock %}

Web/templates/library_borrowings_admin.html

@@ -72,9 +72,10 @@
     color: #1f2937;
   }
 
+  /* Angepasst für 4 Filter-Felder statt 3 */
   .filter-bar {
     display: grid;
-    grid-template-columns: 1fr 220px 220px;
+    grid-template-columns: 1fr 140px 180px 180px;
     gap: 10px;
     margin-bottom: 16px;
   }
@@ -121,6 +122,7 @@
     letter-spacing: 0.04em;
     color: #64748b;
     background: var(--ui-surface-soft);
+    user-select: none;
   }
 
   .library-table tr:hover td {
@@ -149,11 +151,13 @@
   .badge-open { background: #fee2e2; color: #991b1b; }
   .badge-paid { background: #dcfce7; color: #166534; }
   .badge-damaged { background: #fee2e2; color: #991b1b; }
+  .badge-class { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
 
   .row-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
+    align-items: center;
   }
 
   .row-actions form {
@@ -164,6 +168,32 @@
     white-space: nowrap;
   }
 
+  .row-actions .btn-outline-danger {
+    color: #dc2626;
+    background-color: #fef2f2; /* Light red tint so it doesn't blend into the white table */
+    border: 2px solid #dc2626; /* Thicker, clear border */
+    padding: 6px 14px;
+    border-radius: 6px;
+    font-weight: bold;
+    font-size: 0.85rem;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.1); /* Subtle shadow for depth */
+    transition: all 0.2s ease;
+  }
+
+  .row-actions .btn-outline-danger:hover {
+    background-color: #dc2626;
+    color: #ffffff;
+    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.25);
+    transform: translateY(-1px); /* Slight lift effect on hover */
+  }
+
+  .row-actions .btn-outline-danger:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.15); /* Pressed state */
+  }
+  /* ------------------------------------------------------ */
+
   .muted {
     color: #6b7280;
     font-size: 0.92rem;
@@ -175,6 +205,122 @@
     color: #6b7280;
   }
 
+  :root[data-theme="dark"] .library-admin-hero {
+    background: linear-gradient(135deg, #172554 0%, #1e293b 100%);
+    border-color: var(--ui-border);
+    box-shadow: var(--ui-shadow-md);
+  }
+
+  :root[data-theme="dark"] .library-admin-hero p,
+  :root[data-theme="dark"] .summary-card .label,
+  :root[data-theme="dark"] .muted,
+  :root[data-theme="dark"] .empty-state {
+    color: var(--ui-text-muted) !important;
+  }
+
+  :root[data-theme="dark"] .summary-card,
+  :root[data-theme="dark"] .panel {
+    background: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+    box-shadow: var(--ui-shadow-sm);
+  }
+
+  :root[data-theme="dark"] .summary-card .value,
+  :root[data-theme="dark"] .panel h2 {
+    color: var(--ui-title) !important;
+  }
+
+  :root[data-theme="dark"] .filter-bar input,
+  :root[data-theme="dark"] .filter-bar select {
+    background: var(--ui-bg) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] .filter-bar input:focus,
+  :root[data-theme="dark"] .filter-bar select:focus {
+    outline: none;
+    border-color: #60a5fa !important;
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
+  }
+
+  :root[data-theme="dark"] .library-table,
+  :root[data-theme="dark"] .library-table td {
+    background: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] .library-table th {
+    background: var(--ui-surface-soft) !important;
+    color: var(--ui-text-muted) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] .library-table tr:hover td {
+    background: var(--ui-bg-accent) !important;
+  }
+
+  :root[data-theme="dark"] .badge-active {
+    background: #172554;
+    color: #bfdbfe;
+  }
+
+  :root[data-theme="dark"] .badge-planned {
+    background: #422006;
+    color: #fde68a;
+  }
+
+  :root[data-theme="dark"] .badge-completed,
+  :root[data-theme="dark"] .badge-paid {
+    background: #123524;
+    color: #b7f7ce;
+  }
+
+  :root[data-theme="dark"] .badge-open,
+  :root[data-theme="dark"] .badge-damaged {
+    background: #451a1a;
+    color: #fecaca;
+  }
+
+  :root[data-theme="dark"] .badge-class {
+    background: var(--ui-surface-soft);
+    color: var(--ui-text);
+    border-color: var(--ui-border);
+  }
+
+  :root[data-theme="dark"] .row-actions .btn-outline-danger {
+    background: #451a1a;
+    color: #fca5a5;
+    border-color: #f87171;
+  }
+
+  :root[data-theme="dark"] .row-actions .btn-outline-danger:hover {
+    background: #dc2626;
+    color: #ffffff;
+  }
+
+  :root[data-theme="dark"] #damage-invoice-modal > div,
+  :root[data-theme="dark"] #repair-action-modal > div {
+    background: var(--ui-overlay-surface) !important;
+    color: var(--ui-text) !important;
+    border: 1px solid var(--ui-overlay-border);
+  }
+
+  :root[data-theme="dark"] #damage-invoice-modal input,
+  :root[data-theme="dark"] #damage-invoice-modal textarea,
+  :root[data-theme="dark"] #repair-action-modal input {
+    background: var(--ui-bg) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] #damage-invoice-modal p,
+  :root[data-theme="dark"] #repair-action-modal p {
+    color: var(--ui-text-muted) !important;
+  }
+
   @media (max-width: 900px) {
     .library-admin-hero {
       flex-direction: column;
@@ -189,6 +335,11 @@
       overflow-x: auto;
       white-space: nowrap;
     }
+
+    .library-admin-shell {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
   }
 </style>
 
@@ -196,7 +347,7 @@
   <div class="library-admin-hero">
     <div>
       <h1>Bibliotheks-Ausleihen</h1>
-      <p>Nur Bibliotheksmedien. Hier kannst du offene Ausleihen abschließen, Rechnungen bezahlen und defekte Medien direkt zurücksetzen.</p>
+      <p>Nur Bibliotheksmedien. Hier kannst du offene Ausleihen abschließen, Rechnungen bezahlen und defekte Medien verwalten.</p>
     </div>
     <div class="hero-actions">
       <a class="btn btn-secondary" href="{{ url_for('library_view') }}">Bibliothek öffnen</a>
@@ -215,21 +366,36 @@
       <div class="value">{{ damaged_items|length }}</div>
     </div>
     <div class="summary-card">
-      <span class="label">Direkt reparierbar</span>
+      <span class="label">Direkt bearbeitbar</span>
       <div class="value">{{ damaged_items|length }}</div>
     </div>
   </div>
 
   <div class="filter-bar">
-    <input id="library-search" type="text" placeholder="Nach Element, Benutzer, Ausweis oder Rechnung suchen...">
+    <input id="library-search" type="text" placeholder="Nach Element, Benutzer, Klasse, Ausweis oder Rechnung suchen...">
+
+    <!-- NEU: Klassen-Filter -->
+    <select id="class-filter">
+      <option value="all">Alle Klassen</option>
+      {% set classes = [] %}
+      {% for e in loan_entries %}
+        {% if e.klasse and e.klasse not in classes %}
+          {% set _ = classes.append(e.klasse) %}
+        {% endif %}
+      {% endfor %}
+      {% for c in classes|sort %}
+        <option value="{{ c|lower }}">{{ c }}</option>
+      {% endfor %}
+    </select>
+
     <select id="loan-status-filter">
-      <option value="">Alle Ausleihen</option>
+      <option value="">Alle Status</option>
       <option value="active">Aktiv</option>
       <option value="planned">Geplant</option>
       <option value="completed">Abgeschlossen</option>
     </select>
     <select id="damage-filter">
-      <option value="all">Alle Einträge</option>
+      <option value="all">Alle Zustände</option>
       <option value="damage">Nur defekt</option>
       <option value="clean">Nur ohne Schaden</option>
     </select>
@@ -241,18 +407,31 @@
     <table class="library-table" id="loans-table">
       <thead>
         <tr>
-          <th>Status</th>
-          <th>Element</th>
-          <th>Benutzer</th>
-          <th>Zeit</th>
-          <th>Rechnung</th>
-          <th>Schaden</th>
+          <!-- NEU: onClick Handler zum Sortieren hinzugefügt -->
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 0)">Status ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 1)">Element ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 2)">Benutzer ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 3)">Klasse ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 4)">Zeit ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 5)">Rechnung ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 6)">Schaden ↕</th>
           <th>Aktionen</th>
         </tr>
       </thead>
       <tbody>
+        <!-- NEU: data-klasse hinzugefügt -->
         {% for e in loan_entries %}
-        <tr class="loan-row" data-borrow-id="{{ e.id }}" data-item-id="{{ e.item_id }}" data-item-name="{{ e.item_name }}" data-item-code="{{ e.item_code }}" data-item-cost="{{ e.item_cost_raw }}" data-user-name="{{ e.user }}" data-search="{{ (e.item_name ~ ' ' ~ e.item_code ~ ' ' ~ e.user ~ ' ' ~ e.invoice_number ~ ' ' ~ e.item_author ~ ' ' ~ e.item_isbn)|lower }}" data-status="{{ e.status }}" data-has-damage="{{ '1' if e.has_damage else '0' }}">
+        <tr class="loan-row"
+            data-borrow-id="{{ e.id }}"
+            data-item-id="{{ e.item_id }}"
+            data-item-name="{{ e.item_name }}"
+            data-item-code="{{ e.item_code }}"
+            data-item-cost="{{ e.item_cost_raw }}"
+            data-user-name="{{ e.user }}"
+            data-klasse="{{ (e.klasse|default(''))|lower }}"
+            data-search="{{ (e.item_name ~ ' ' ~ e.item_code ~ ' ' ~ e.user ~ ' ' ~ (e.klasse|default('')) ~ ' ' ~ e.invoice_number ~ ' ' ~ e.item_author ~ ' ' ~ e.item_isbn)|lower }}"
+            data-status="{{ e.status }}"
+            data-has-damage="{{ '1' if e.has_damage else '0' }}">
           <td>
             {% if e.status == 'active' %}
               <span class="badge-pill badge-active">Aktiv</span>
@@ -267,24 +446,32 @@
             <div class="muted">{{ e.item_author or '—' }}</div>
             <div class="mono">{{ e.item_code or '—' }}</div>
             <div style="margin-top:6px;">
-              <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('library_item_invoices', item_id=e.item_id) }}">Rechnungen</a>
+              <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('library_item_invoices', item_id=e.item_id) }}">Rechnungen / Historie</a>
             </div>
           </td>
           <td>
-            <div>{{ e.user }}</div>
-            <div class="muted">{{ e.start }}{% if e.end %} bis {{ e.end }}{% endif %}</div>
+            <div><strong>{{ e.user }}</strong></div>
+          </td>
+          <!-- NEU: Klasse Spalte -->
+          <td>
+            {% if e.klasse %}
+              <span class="badge-pill badge-class">{{ e.klasse }}</span>
+            {% else %}
+              <span class="muted">—</span>
+            {% endif %}
           </td>
           <td>
             <div>{{ e.period or '—' }}</div>
+            <div class="muted">{{ e.start }}{% if e.end %} bis {{ e.end }}{% endif %}</div>
             {% if e.notes %}<div class="muted">{{ e.notes }}</div>{% endif %}
           </td>
           <td>
             {% if e.invoice_number %}
               <div class="mono">{{ e.invoice_number }}</div>
               <div class="muted">{{ e.invoice_amount }}</div>
-              {% if e.invoice_corrections_count %}
+              <!--{% if e.invoice_corrections_count %}
                 <div class="muted" style="color:#7c2d12;">{{ e.invoice_corrections_count }} Korrektur(en)</div>
-              {% endif %}
+              {% endif %} -->
               <div style="margin-top:6px;">
                 <a class="btn btn-outline-primary btn-sm" href="{{ url_for('admin_view_invoice_pdf', borrow_id=e.id) }}" target="_blank" rel="noopener">PDF öffnen</a>
               </div>
@@ -311,35 +498,29 @@
               {% if e.status == 'active' %}
               <button type="button" class="btn btn-outline-danger btn-sm" onclick="openDamageReportPrompt(this)">Schaden melden</button>
               {% endif %}
-              {% if e.invoice_number and ((not e.invoice_paid) or e.has_damage) %}
-              <form method="post" action="{{ url_for('admin_finalize_invoice_and_repair', borrow_id=e.id) }}" onsubmit="return confirm('Rechnung als bezahlt und Element als repariert markieren?');">
-                <button type="submit" class="btn btn-success btn-sm">
-                  {% if not e.invoice_paid and e.has_damage %}
-                    Bezahlt + repariert
-                  {% elif not e.invoice_paid %}
-                    Als bezahlt markieren
-                  {% else %}
-                    Als repariert markieren
-                  {% endif %}
-                </button>
-              </form>
-              {% elif e.has_damage %}
-              <form method="post" action="{{ url_for('mark_damage_repaired', id=e.item_id) }}" onsubmit="return confirm('Medium als repariert markieren?');">
-                <button type="submit" class="btn btn-success btn-sm">Als repariert markieren</button>
+
+              {% if e.invoice_number and not e.invoice_paid %}
+              <form method="post" action="{{ url_for('admin_mark_invoice_paid', borrow_id=e.id) }}" onsubmit="return confirm('Rechnung als bezahlt markieren?');">
+                <button type="submit" class="btn btn-success btn-sm">Als bezahlt markieren</button>
               </form>
               {% endif %}
 
-              {% if e.invoice_number %}
-              <form method="post" action="{{ url_for('admin_add_invoice_correction', borrow_id=e.id) }}" onsubmit="return confirm('Korrekturbuchung hinzufügen?');">
-                <input type="text" name="correction_reason" placeholder="Korrekturgrund" required style="padding:6px; border:1px solid #ddd; border-radius:6px; min-width:140px;">
-                <input type="text" name="amount_delta" placeholder="Delta optional" style="padding:6px; border:1px solid #ddd; border-radius:6px; width:120px;">
+              {% if e.has_damage %}
+              <!-- Aufruf des Reparatur-Auswahl-Modals -->
+              <button type="button" class="btn btn-warning btn-sm" onclick="openRepairModal('{{ e.item_id }}', '{{ e.item_code }}')">Reparieren / Ersetzen</button>
+              {% endif %}
+
+              <!--{% if e.invoice_number %}
+              <form method="post" action="{{ url_for('admin_add_invoice_correction', borrow_id=e.id) }}" onsubmit="return confirm('Korrekturbuchung hinzufügen?');" style="display: flex; gap: 6px; align-items: center; flex-wrap: wrap;">
+                <input type="text" name="correction_reason" value="Korrektur zu {{ e.invoice_number }}" placeholder="Korrekturgrund" required style="padding:6px; border:1px solid #ddd; border-radius:6px; min-width:160px; max-width:180px;">
+                <input type="text" name="amount_delta" placeholder="z.B. -{{ e.invoice_amount }}" style="padding:6px; border:1px solid #ddd; border-radius:6px; width:120px;">
                 <button type="submit" class="btn btn-outline-danger btn-sm">Korrektur</button>
               </form>
-              {% endif %}
+              {% endif %}-->
 
               {% if e.status in ['active', 'planned'] %}
               <form method="post" action="{{ url_for('admin_reset_borrowing', borrow_id=e.id) }}" onsubmit="return confirm('Ausleihe zurücksetzen?');">
-                <button type="submit" class="btn btn-warning btn-sm">Zurücksetzen</button>
+                <button type="submit" class="btn btn-secondary btn-sm">Zurücksetzen</button>
               </form>
               {% endif %}
             </div>
@@ -360,10 +541,11 @@
     <table class="library-table" id="damaged-table">
       <thead>
         <tr>
-          <th>Element</th>
-          <th>Code</th>
-          <th>Schaden</th>
-          <th>Status</th>
+          <!-- NEU: onClick Handler zum Sortieren hinzugefügt -->
+          <th style="cursor: pointer;" onclick="sortTable('damaged-table', 0)">Element ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('damaged-table', 1)">Code ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('damaged-table', 2)">Schaden ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('damaged-table', 3)">Status ↕</th>
           <th>Aktion</th>
         </tr>
       </thead>
@@ -392,9 +574,8 @@
             <div class="row-actions" style="margin-bottom:8px;">
               <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('library_item_invoices', item_id=item.id) }}">Rechnungen</a>
             </div>
-            <form method="post" action="{{ url_for('mark_damage_repaired', id=item.id) }}" onsubmit="return confirm('Dieses Medium als repariert und wieder verfügbar markieren?');">
-              <button type="submit" class="btn btn-success btn-sm">Als repariert markieren</button>
-            </form>
+            <!-- Aufruf des Reparatur-Auswahl-Modals -->
+            <button type="button" class="btn btn-warning btn-sm" onclick="openRepairModal('{{ item.id }}', '{{ item.code }}')">Reparieren / Ersetzen</button>
           </td>
         </tr>
         {% endfor %}
@@ -407,14 +588,15 @@
   </div>
 </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;">
+<!-- Modal: Rechnung für Schaden erstellen -->
+<div id="damage-invoice-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" 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: 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>
+        <h2 id="modal-title" style="margin:0;">Rechnung erstellen</h2>
         <p style="margin:6px 0 0; color:#666;">Die Rechnung nutzt das bestehende Rechnungssystem und kann direkt nach der Schadensmeldung erstellt werden.</p>
       </div>
-      <button type="button" class="btn btn-secondary" onclick="closeDamageInvoiceModal()">Schließen</button>
+      <button type="button" class="btn btn-secondary" onclick="closeDamageInvoiceModal()" aria-label="Modal schließen">Schließen</button>
     </div>
 
     <form id="damage-invoice-form" method="post" action="">
@@ -432,7 +614,10 @@
           <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>
+          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
+            <label for="damage-invoice-amount" style="font-weight:700; margin:0;">Preis</label>
+            <button type="button" id="damage-invoice-replace-btn" class="btn btn-outline-secondary btn-sm" style="padding: 2px 8px; font-size: 0.75rem;">Komplett ersetzen</button>
+          </div>
           <input id="damage-invoice-amount" name="invoice_amount" type="text" required style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px;" placeholder="z.B. 12,50">
         </div>
       </div>
@@ -461,15 +646,44 @@
   </div>
 </div>
 
+<!-- Neues Modal: Reparatur-Optionen (Reparieren, Ersetzen mit neuem Code_4, Löschen) -->
+<div id="repair-action-modal" role="dialog" aria-modal="true" aria-labelledby="repair-modal-title" 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:540px; margin:60px 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:16px;">
+      <h2 id="repair-modal-title" style="margin:0; font-size: 1.3rem;">Medium-Bearbeitung nach Reparatur</h2>
+      <button type="button" class="btn btn-secondary btn-sm" onclick="closeRepairModal()">Schließen</button>
+    </div>
+    <p style="color: #666; margin-bottom: 18px; font-size: 0.95rem;">Wähle aus, wie mit diesem beschädigten Medium weiter verfahren werden soll:</p>
+
+    <form id="repair-action-form" method="post" action="">
+      <input type="hidden" name="action" id="repair-action-input" value="repair">
+
+      <div style="margin-bottom: 16px; display: none;" id="new-code-container">
+        <label for="modal-new-code-4" style="display:block; font-weight:700; margin-bottom:6px;">Neuer Code 4 (Inventarnummer / Barcode)</label>
+        <input type="text" id="modal-new-code-4" name="new_code_4" placeholder="Neuen Code 4 eingeben..." style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px;">
+      </div>
+
+      <div style="display: flex; flex-direction: column; gap: 10px;">
+        <button type="button" class="btn btn-success" onclick="submitRepairAction('repair')">Nur Reparieren (Wieder verfügbar machen)</button>
+        <button type="button" class="btn btn-primary" onclick="toggleReplaceMode()">Ersetzen (Neuen Code 4 zuweisen)</button>
+        <button type="submit" id="submit-replace-btn" class="btn btn-primary" style="display:none;" onclick="document.getElementById('repair-action-input').value='replace'; return confirm('Medium wirklich mit neuem Code aktualisieren?');">Änderung speichern</button>
+        <button type="submit" class="btn btn-danger" onclick="document.getElementById('repair-action-input').value='delete'; return confirm('Achtung: Soll dieses Medium wirklich gelöscht und der Bestand aktualisiert werden?');">Löschen & Bestand anpassen</button>
+      </div>
+    </form>
+  </div>
+</div>
+
 <script>
 (function() {
   const searchInput = document.getElementById('library-search');
+  const classFilter = document.getElementById('class-filter'); // NEU: Klassenfilter hinzugefügt
   const statusFilter = document.getElementById('loan-status-filter');
   const damageFilter = document.getElementById('damage-filter');
   const loanRows = Array.from(document.querySelectorAll('.loan-row'));
   const damagedRows = Array.from(document.querySelectorAll('.damaged-row'));
   const loansEmpty = document.getElementById('loans-empty');
   const damagedEmpty = document.getElementById('damaged-empty');
+
   const damageInvoiceModal = document.getElementById('damage-invoice-modal');
   const damageInvoiceForm = document.getElementById('damage-invoice-form');
   const damageInvoiceItem = document.getElementById('damage-invoice-item');
@@ -477,61 +691,138 @@
   const damageInvoiceCode = document.getElementById('damage-invoice-code');
   const damageInvoiceAmount = document.getElementById('damage-invoice-amount');
   const damageInvoiceReason = document.getElementById('damage-invoice-reason');
+  const damageInvoiceReplaceBtn = document.getElementById('damage-invoice-replace-btn');
+
+  // NEU: Globale Sortier-Richtungsobjekte
+  let sortDirections = {};
+
+  // NEU: Sortier-Funktion
+  window.sortTable = function(tableId, columnIndex) {
+    const table = document.getElementById(tableId);
+    const tbody = table.tBodies[0];
+    const rows = Array.from(tbody.querySelectorAll("tr"));
+
+    if (rows.length === 0) return;
+
+    const sortKey = tableId + "-" + columnIndex;
+    if (!(sortKey in sortDirections)) {
+      sortDirections[sortKey] = true;
+    } else {
+      sortDirections[sortKey] = !sortDirections[sortKey];
+    }
+
+    const isAscending = sortDirections[sortKey];
+    const multiplier = isAscending ? 1 : -1;
+
+    // Pfeil im Header aktualisieren
+    const headers = table.querySelectorAll("th");
+    headers.forEach(th => {
+      if(th.innerHTML.includes('↕') || th.innerHTML.includes('▲') || th.innerHTML.includes('▼')) {
+        th.innerHTML = th.innerHTML.replace(/[↕▲▼]/g, '↕');
+      }
+    });
+    const currentTh = headers[columnIndex];
+    if (currentTh) {
+      currentTh.innerHTML = currentTh.innerHTML.replace('↕', isAscending ? '▲' : '▼');
+    }
+
+    // Zeilen sortieren
+    rows.sort((a, b) => {
+      const cellA = a.cells[columnIndex].textContent.trim();
+      const cellB = b.cells[columnIndex].textContent.trim();
+      return cellA.localeCompare(cellB, 'de', { numeric: true, sensitivity: 'base' }) * multiplier;
+    });
+
+    // Neu einfügen
+    rows.forEach(row => tbody.appendChild(row));
+  };
+
+
+  // Funktionen für das Reparatur-Modal
+  window.openRepairModal = function(itemId, currentCode) {
+    const modal = document.getElementById('repair-action-modal');
+    const form = document.getElementById('repair-action-form');
+    const codeContainer = document.getElementById('new-code-container');
+    const replaceBtn = document.getElementById('submit-replace-btn');
+
+    form.action = `/admin/items/${itemId}/resolve_repair`;
+
+    document.getElementById('repair-action-input').value = 'repair';
+    document.getElementById('modal-new-code-4').value = currentCode || '';
+    codeContainer.style.display = 'none';
+    replaceBtn.style.display = 'none';
+
+    modal.style.display = 'block';
+  };
+
+  window.closeRepairModal = function() {
+    document.getElementById('repair-action-modal').style.display = 'none';
+  };
+
+  window.toggleReplaceMode = function() {
+    const codeContainer = document.getElementById('new-code-container');
+    const replaceBtn = document.getElementById('submit-replace-btn');
+    document.getElementById('repair-action-input').value = 'replace';
+
+    codeContainer.style.display = 'block';
+    replaceBtn.style.display = 'block';
+    document.getElementById('modal-new-code-4').focus();
+  };
+
+  window.submitRepairAction = function(actionType) {
+    const form = document.getElementById('repair-action-form');
+    document.getElementById('repair-action-input').value = actionType;
+    if (confirm('Medium als regulär repariert markieren?')) {
+      form.submit();
+    }
+  };
 
   function openDamageReportPrompt(button) {
     const row = button.closest('.loan-row');
-    if (!row) {
-      return;
-    }
+    if (!row) return;
 
     const itemId = row.dataset.itemId || '';
-    const itemName = row.dataset.itemName || 'Bibliotheksmedium';
     const noteInput = prompt('Schadensmeldung für dieses Bibliotheksmedium:\nNotiz zum Schaden (optional):', '');
 
-    if (noteInput === null) {
-      return;
-    }
+    if (noteInput === null) return;
 
     const description = noteInput.trim() || 'Schaden erneut gemeldet';
+    const originalText = button.textContent;
+    button.disabled = true;
+    button.textContent = 'Speichere...';
 
     fetch(`/report_damage/${itemId}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ description })
     })
-      .then(response => response.json().then(data => ({ ok: response.ok, data })))
-      .then(({ ok, data }) => {
-        if (!ok || !data.success) {
+      .then(async response => {
+        const data = await response.json().catch(() => ({}));
+        if (!response.ok || !data.success) {
           throw new Error(data.message || 'Fehler beim Speichern der Schadensmeldung.');
         }
-
+        return data;
+      })
+      .then(data => {
         if (confirm('Schaden gespeichert. Soll direkt eine Rechnung erstellt werden?')) {
           openDamageInvoiceModal(row, description);
+          button.disabled = false;
+          button.textContent = originalText;
           return;
         }
-
         window.location.reload();
       })
       .catch(error => {
-        alert(error.message || 'Fehler beim Speichern der Schadensmeldung.');
+        alert(error.message || 'Ein unbekannter Fehler ist aufgetreten.');
+        button.disabled = false;
+        button.textContent = originalText;
       });
   }
 
   window.openDamageReportPrompt = openDamageReportPrompt;
 
   function openDamageInvoiceModal(row, description) {
-    const modal = document.getElementById('damage-invoice-modal');
-    const form = document.getElementById('damage-invoice-form');
-    const inputItem = document.getElementById('damage-invoice-item');
-    const inputBorrower = document.getElementById('damage-invoice-borrower');
-    const inputCode = document.getElementById('damage-invoice-code');
-    const inputAmount = document.getElementById('damage-invoice-amount');
-    const inputReason = document.getElementById('damage-invoice-reason');
-
-    if (!modal || !form) {
-      console.error("Modal oder Formular nicht gefunden.");
-      return;
-    }
+    if (!damageInvoiceModal || !damageInvoiceForm) return;
 
     const borrowId = row.dataset.borrowId || '';
     const itemName = row.dataset.itemName || '';
@@ -539,27 +830,36 @@
     const itemCode = row.dataset.itemCode || '';
     const itemCost = row.dataset.itemCost || '';
 
-    form.action = "{{ url_for('admin_create_invoice', borrow_id='__BORROW_ID__') }}".replace('__BORROW_ID__', borrowId);
+    damageInvoiceForm.action = "{{ url_for('admin_create_invoice', borrow_id='__BORROW_ID__') }}".replace('__BORROW_ID__', borrowId);
 
-    inputItem.value = itemName;
-    inputBorrower.value = borrower;
-    inputCode.value = itemCode;
+    damageInvoiceItem.value = itemName;
+    damageInvoiceBorrower.value = borrower;
+    damageInvoiceCode.value = itemCode;
+    damageInvoiceAmount.value = '';
 
-    inputAmount.value = String(itemCost).replace(' EUR', '').trim();
+    if (damageInvoiceReplaceBtn) {
+      damageInvoiceReplaceBtn.dataset.acquisition_costs = String(itemCost).replace(' EUR', '').trim();
+    }
 
-    inputReason.value = description || `Schaden gemeldet für ${itemName}`;
-
-    modal.style.display = 'block';
-    inputAmount.focus();
+    damageInvoiceReason.value = description || `Schaden gemeldet für ${itemName}`;
+    damageInvoiceModal.style.display = 'block';
+    damageInvoiceAmount.focus();
   }
 
   function closeDamageInvoiceModal() {
-    const modal = document.getElementById('damage-invoice-modal');
-    if (modal) {
-      modal.style.display = 'none';
+    if (damageInvoiceModal) {
+      damageInvoiceModal.style.display = 'none';
     }
   }
 
+  if (damageInvoiceReplaceBtn) {
+    damageInvoiceReplaceBtn.addEventListener('click', function() {
+      if (this.dataset.acquisition_costs) {
+        damageInvoiceAmount.value = this.dataset.acquisition_costs;
+      }
+    });
+  }
+
   window.openDamageInvoiceModal = openDamageInvoiceModal;
   window.closeDamageInvoiceModal = closeDamageInvoiceModal;
 
@@ -571,22 +871,26 @@
     });
   }
 
-  window.closeDamageInvoiceModal = closeDamageInvoiceModal;
-
+  // NEU: Kombinierte Filter-Funktion (Suche + Status + Schaden + Klasse)
   function applyFilters() {
     const search = (searchInput.value || '').trim().toLowerCase();
     const status = statusFilter.value;
     const damage = damageFilter.value;
+    const klasse = classFilter.value; // NEU
 
     let visibleLoans = 0;
     loanRows.forEach(row => {
       const haystack = row.dataset.search || '';
       const rowStatus = row.dataset.status || '';
+      const rowKlasse = row.dataset.klasse || ''; // NEU
       const hasDamage = row.dataset.hasDamage === '1';
+
       const searchMatch = !search || haystack.includes(search);
       const statusMatch = !status || rowStatus === status;
+      const classMatch = klasse === 'all' || rowKlasse === klasse; // NEU
       const damageMatch = damage === 'all' || (damage === 'damage' && hasDamage) || (damage === 'clean' && !hasDamage);
-      const show = searchMatch && statusMatch && damageMatch;
+
+      const show = searchMatch && statusMatch && classMatch && damageMatch; // NEU
       row.style.display = show ? '' : 'none';
       if (show) visibleLoans++;
     });
@@ -597,10 +901,17 @@
       const haystack = row.dataset.search || '';
       const rowStatus = row.dataset.status || '';
       const hasDamage = row.dataset.hasDamage === '1';
+
       const searchMatch = !search || haystack.includes(search);
       const statusMatch = !status || rowStatus === status || status === '';
       const damageMatch = damage === 'all' || (damage === 'damage' && hasDamage) || (damage === 'clean' && !hasDamage);
-      const show = searchMatch && statusMatch && damageMatch;
+
+      // Defekte-Medien-Tabelle hat keine verknüpfte "Klasse", deshalb blenden wir sie nur bei Klassen-Filter "all" ein,
+      // oder wenn gar nicht nach Klasse gefiltert wird, damit sie nicht verschwindet.
+      // Falls sie bei aktiver Klassensuche komplett verschwinden soll, passe die Bedingung an:
+      const classMatch = klasse === 'all';
+
+      const show = searchMatch && statusMatch && damageMatch && classMatch;
       row.style.display = show ? '' : 'none';
       if (show) visibleDamaged++;
     });
@@ -608,9 +919,10 @@
   }
 
   searchInput.addEventListener('input', applyFilters);
+  classFilter.addEventListener('change', applyFilters); // NEU
   statusFilter.addEventListener('change', applyFilters);
   damageFilter.addEventListener('change', applyFilters);
   applyFilters();
 })();
 </script>
-{% endblock %}
+{% endblock %}

Web/templates/library_item_invoices.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}Rechnungen Element - {{ APP_VERSION }}{% endblock %}
+{% block title %}Rechnungs- & Schadenshistorie - {{ APP_VERSION }}{% endblock %}
 
 {% block content %}
 <style>
@@ -39,6 +39,14 @@
     flex-wrap: wrap;
   }
 
+  .section-header {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #1e293b;
+    margin: 36px 0 16px 0;
+    padding-left: 4px;
+  }
+
   .invoice-card {
     background: var(--ui-surface);
     border: 1px solid #e2e8f0;
@@ -104,7 +112,73 @@
     padding: 36px 20px;
   }
 
+  :root[data-theme="dark"] .invoice-history-head {
+    background: linear-gradient(135deg, #172554 0%, #1e293b 100%);
+    border-color: var(--ui-border);
+    box-shadow: var(--ui-shadow-md);
+  }
+
+  :root[data-theme="dark"] .head-meta,
+  :root[data-theme="dark"] .muted,
+  :root[data-theme="dark"] .empty-state {
+    color: var(--ui-text-muted) !important;
+  }
+
+  :root[data-theme="dark"] .section-header {
+    color: var(--ui-title) !important;
+  }
+
+  :root[data-theme="dark"] .invoice-card {
+    background: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+    box-shadow: var(--ui-shadow-sm);
+  }
+
+  :root[data-theme="dark"] .invoice-table,
+  :root[data-theme="dark"] .invoice-table td {
+    background: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] .invoice-table th {
+    background: var(--ui-surface-soft) !important;
+    color: var(--ui-text-muted) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] .invoice-table tr:hover td {
+    background: var(--ui-bg-accent) !important;
+  }
+
+  :root[data-theme="dark"] .badge-open {
+    background: #451a1a;
+    color: #fecaca;
+  }
+
+  :root[data-theme="dark"] .badge-paid,
+  :root[data-theme="dark"] .badge-completed {
+    background: #123524;
+    color: #b7f7ce;
+  }
+
+  :root[data-theme="dark"] .badge-active {
+    background: #172554;
+    color: #bfdbfe;
+  }
+
+  :root[data-theme="dark"] .badge-planned {
+    background: #422006;
+    color: #fde68a;
+  }
+
   @media (max-width: 900px) {
+    .invoice-history-shell {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+
     .invoice-table {
       display: block;
       overflow-x: auto;
@@ -115,7 +189,7 @@
 
 <div class="invoice-history-shell">
   <div class="invoice-history-head">
-    <h1>Rechnungshistorie pro Element</h1>
+    <h1>Rechnungs- & Schadenshistorie pro Element</h1>
     <div class="head-meta">
       <span><strong>Element:</strong> {{ item.name or '—' }}</span>
       <span><strong>Code:</strong> {{ item.code or '—' }}</span>
@@ -124,10 +198,12 @@
     </div>
     <div class="head-actions">
       <a class="btn btn-outline-secondary" href="{{ url_for('library_loans_admin') }}">Zur Bibliotheks-Ausleihenverwaltung</a>
-      <a class="btn btn-secondary" href="{{ url_for('library_admin') }}">Bibliothek öffnen</a>
+      <a class="btn btn-secondary" href="{{ url_for('library_view') }}">Bibliothek öffnen</a>
     </div>
   </div>
 
+  <!-- BEREICH: RECHNUNGEN -->
+  <h2 class="section-header">Ausgestellte Rechnungen</h2>
   <div class="invoice-card">
     {% if invoices %}
     <table class="invoice-table">
@@ -137,7 +213,7 @@
           <th>Betrag</th>
           <th>Ausleihe</th>
           <th>Status</th>
-          <th>Schaden</th>
+          <th>Schaden / Grund</th>
           <th>Aktion</th>
         </tr>
       </thead>
@@ -184,5 +260,50 @@
       <div class="empty-state">Für dieses Element wurden noch keine Rechnungen gespeichert.</div>
     {% endif %}
   </div>
+
+  <!-- BEREICH: SCHÄDEN -->
+  <h2 class="section-header">Gemeldete Schäden</h2>
+  <div class="invoice-card">
+    {% if damages %}
+    <table class="invoice-table">
+      <thead>
+        <tr>
+          <th>Datum</th>
+          <th>Quelle</th>
+          <th>Nutzer / Verursacher</th>
+          <th>Beschreibung</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in damages %}
+        <tr>
+          <td>
+            <div class="muted">{{ row.date }}</div>
+          </td>
+          <td>
+            <div class="mono">{{ row.source }}</div>
+            {% if row.borrow_id %}
+              <div class="muted" style="font-size: 0.8rem;">ID: <span title="{{ row.borrow_id }}">{{ row.borrow_id[:6] }}...</span></div>
+            {% endif %}
+          </td>
+          <td>{{ row.user }}</td>
+          <td>{{ row.description }}</td>
+          <td>
+            <!-- Einfache Logik, um bei reparierten Objekten einen grünen Badge zu zeigen -->
+            {% if row.status|lower in ['repariert', 'erledigt', 'geschlossen', 'bezahlt'] %}
+              <span class="badge-pill badge-completed">{{ row.status }}</span>
+            {% else %}
+              <span class="badge-pill badge-open">{{ row.status }}</span>
+            {% endif %}
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    {% else %}
+      <div class="empty-state">Für dieses Element wurden bislang keine Schäden erfasst.</div>
+    {% endif %}
+  </div>
 </div>
-{% endblock %}
+{% endblock %}

Web/templates/license.html

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

Web/templates/logs.html

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

Web/templates/mahnungen_admin.html

@@ -0,0 +1,315 @@
+{% extends "base.html" %}
+
+{% block title %}Mahnungsübersicht{% endblock %}
+
+{% block content %}
+<style>
+  .mahnungen-shell {
+    max-width: 1180px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .mahnungen-head {
+    background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
+    border: 1px solid #dbe4ee;
+    border-radius: 16px;
+    padding: 18px 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+
+  .mahnungen-head h1 {
+    margin: 0;
+    font-size: 1.55rem;
+    color: #1e293b;
+  }
+
+  .head-actions {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .search-box-wrapper {
+    margin-bottom: 16px;
+  }
+
+  .search-box {
+    width: 100%;
+    max-width: 360px;
+    padding: 10px 14px;
+    border: 1px solid #cbd5e1;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+
+  .search-box:focus {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  }
+
+  .mahnungen-card {
+    background: var(--ui-surface, #ffffff);
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    padding: 18px;
+    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
+  }
+
+  .mahnungen-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .mahnungen-table th,
+  .mahnungen-table td {
+    padding: 12px 10px;
+    border-bottom: 1px solid #edf2f7;
+    vertical-align: middle;
+    text-align: left;
+  }
+
+  .mahnungen-table th {
+    font-size: 0.83rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #64748b;
+    background: var(--ui-surface-soft, #f8fafc);
+  }
+
+  .mahnungen-table tr:hover td {
+    background: #fbfdff;
+  }
+
+  .badge-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 0.78rem;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  .badge-open { background: #fee2e2; color: #991b1b; }
+  .badge-warning { background: #fef3c7; color: #b45309; }
+  .badge-info { background: #e0f2fe; color: #0369a1; }
+  .badge-paid { background: #dcfce7; color: #166534; }
+
+  .mono {
+    font-family: monospace;
+    font-size: 0.92rem;
+  }
+
+  .text-danger {
+    color: #dc2626;
+    font-weight: 700;
+  }
+
+  .empty-state {
+    text-align: center;
+    color: #6b7280;
+    padding: 36px 20px;
+  }
+
+  @media (max-width: 900px) {
+    .mahnungen-table {
+      display: block;
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+  }
+</style>
+
+<div class="container-fluid py-4">
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card shadow-sm">
+                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0"><i class="bi bi-exclamation-triangle-fill me-2"></i>Mahnungs- und Ausleihverwaltung</h5>
+                    <span class="badge bg-light text-dark">Übersicht überfälliger Medien</span>
+                </div>
+                <div class="card-body">
+                    {% if overdue_items and overdue_items|length > 0 %}
+                    <div class="table-responsive">
+                        <table class="table table-hover align-middle">
+                            <thead class="table-light">
+                                <tr>
+                                    <th>Schüler / Ausweis</th>
+                                    <th>Klasse</th>
+                                    <th>Medium</th>
+                                    <th>Fälligkeitsdatum</th>
+                                    <th>Überfällig seit</th>
+                                    <th>Mahnstufe</th>
+                                    <th class="text-end">Aktionen</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for item in overdue_items %}
+                                <tr>
+                                    <td>
+                                        <strong>{{ item.schueler_name }}</strong><br>
+                                        <small class="text-muted">{{ item.ausweis_id }}</small>
+                                    </td>
+                                    <td>{{ item.klasse }}</td>
+                                    <td>
+                                        {{ item.item_name }}<br>
+                                        <small class="text-muted">Code: {{ item.item_code or '—' }}</small>
+                                    </td>
+                                    <td>{{ item.due_date }}</td>
+                                    <td>
+                                        <span class="badge bg-danger">{{ item.days_overdue }} Tage</span>
+                                    </td>
+                                    <td>
+                                        {% if item.mahnstufe == 2 %}
+                                            <span class="badge bg-dark text-danger">Stufe 2 (Gesperrt)</span>
+                                        {% elif item.mahnstufe == 1 %}
+                                            <span class="badge bg-warning text-dark">Stufe 1</span>
+                                        {% else %}
+                                            <span class="badge bg-secondary">Stufe 0</span>
+                                        {% endif %}
+                                    </td>
+                                    <td class="text-end">
+                                        <div class="btn-group" role="group">
+                                            {% if mail_service_enabled %}
+                                            <button type="button" class="btn btn-sm btn-outline-primary"
+                                                    onclick="openEmailModal('{{ item.id }}', '{{ item.schueler_name }}', '{{ item.email }}')">
+                                                <i class="bi bi-envelope"></i> E-Mail
+                                            </button>
+                                            {% endif %}
+                                            <button type="button" class="btn btn-sm btn-outline-warning text-dark"
+                                                    onclick="resetMahnung('{{ item.id }}', '{{ item.schueler_name }}')">
+                                                <i class="bi bi-arrow-counterclockwise"></i> Zurücksetzen
+                                            </button>
+                                        </div>
+                                    </td>
+                                </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                    {% else %}
+                    <div class="text-center py-5">
+                        <i class="bi bi-check-circle-fill text-success fs-1"></i>
+                        <p class="text-muted mt-2">Aktuell gibt es keine überfälligen Mahnungen.</p>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- E-Mail Modal -->
+<div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="emailModalLabel">Mahnungs-E-Mail senden</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
+            </div>
+            <div class="modal-body">
+                <form id="emailForm">
+                    <input type="hidden" id="modalLoanId">
+                    <div class="mb-3">
+                        <label for="modalStudentName" class="form-label">Empfänger</label>
+                        <input type="text" class="form-control" id="modalStudentName" readonly>
+                    </div>
+                    <div class="mb-3">
+                        <label for="modalEmail" class="form-label">E-Mail-Adresse</label>
+                        <input type="email" class="form-control" id="modalEmail" placeholder="E-Mail-Adresse eingeben...">
+                    </div>
+                    <div class="mb-3">
+                        <label for="modalMessage" class="form-label">Nachricht</label>
+                        <textarea class="form-control" id="modalMessage" rows="4" placeholder="Optionaler Text..."></textarea>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+                <button type="button" class="btn btn-primary" onclick="submitEmailMahnung()">E-Mail senden</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function openEmailModal(loanId, studentName, studentEmail) {
+    document.getElementById('modalLoanId').value = loanId;
+    document.getElementById('modalStudentName').value = studentName;
+    document.getElementById('modalEmail').value = studentEmail || '';
+    document.getElementById('modalMessage').value = '';
+
+    var myModal = new bootstrap.Modal(document.getElementById('emailModal'));
+    myModal.show();
+}
+
+function submitEmailMahnung() {
+    const loanId = document.getElementById('modalLoanId').value;
+    const email = document.getElementById('modalEmail').value;
+    const message = document.getElementById('modalMessage').value;
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
+
+    if (!email) {
+        alert('Bitte geben Sie eine gültige E-Mail-Adresse ein.');
+        return;
+    }
+
+    fetch('/mahnungen_send_email', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
+        body: JSON.stringify({ loan_id: loanId, email: email, message: message })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            alert('E-Mail erfolgreich gesendet!');
+            var modalEl = document.getElementById('emailModal');
+            var modal = bootstrap.Modal.getInstance(modalEl);
+            modal.hide();
+        } else {
+            alert('Fehler: ' + data.message);
+        }
+    })
+    .catch(error => {
+        alert('Fehler beim Senden der Anfrage.');
+        console.error(error);
+    });
+}
+
+function resetMahnung(loanId, studentName) {
+    if (!confirm('Möchten Sie die Mahnung für "' + studentName + '" wirklich zurücksetzen?\n\nDadurch wird die Mahnstufe auf 0 gesetzt, die Frist um 14 Tage verlängert und der Schülerausweis entsperrt.')) {
+        return;
+    }
+
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
+
+    fetch('/mahnungen_reset', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
+        body: JSON.stringify({ loan_id: loanId })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            alert(data.message);
+            location.reload(); // Seite neu laden, um die aktualisierte Ansicht zu sehen
+        } else {
+            alert('Fehler: ' + data.message);
+        }
+    })
+    .catch(error => {
+        alert('Fehler beim Senden der Anfrage.');
+        console.error(error);
+    });
+}
+</script>
+{% endblock %}

Web/templates/main_admin.html

@@ -819,7 +819,7 @@
         flex: 0 0 auto;
     }
 
-    .ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button, .damage-button {
+    .ausleihen, .edit-button, .delete-button, .details-button,  .schedule-button, .damage-button {
         padding: 10px 18px;
         border: none;
         border-radius: 5px;
@@ -942,27 +942,6 @@
         box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
     }
 
-    /* Duplicate Button */
-    .duplicate-button {
-        background-color: #6f42c1;
-        color: white;
-        border: 2px solid #6f42c1;
-    }
-
-    .duplicate-button:hover {
-        background-color: #5a32a3;
-        border-color: #4e2a8e;
-        transform: translateY(-1px);
-        box-shadow: 0 4px 8px rgba(111, 66, 193, 0.3);
-        color: white;
-        text-decoration: none;
-    }
-
-    .duplicate-button:active {
-        transform: translateY(0);
-        box-shadow: 0 2px 4px rgba(111, 66, 193, 0.3);
-    }
-
     .damage-button {
         background-color: #fd7e14;
         color: white;
@@ -1645,7 +1624,7 @@
             gap: 10px !important;
         }
         
-        .ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
+        .ausleihen, .edit-button, .delete-button, .details-button, .schedule-button {
             width: 100% !important;
             min-height: 44px !important;
             padding: 12px 20px !important;
@@ -1777,7 +1756,7 @@
             justify-content: flex-start;
         }
         
-        .ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
+        .ausleihen, .edit-button, .delete-button, .details-button, .schedule-button {
             padding: 10px 20px;
             font-size: 0.9rem;
             min-width: 110px;
@@ -1790,7 +1769,7 @@
                 gap: 8px;
             }
             
-            .ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
+            .ausleihen, .edit-button, .delete-button, .details-button, .schedule-button {
                 padding: 8px 16px;
                 font-size: 0.85rem;
                 min-width: 95px;
@@ -1808,7 +1787,7 @@
             gap: 15px;
         }
         
-        .ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
+        .ausleihen, .edit-button, .delete-button, .details-button, .schedule-button {
             padding: 12px 24px;
             font-size: 1rem;
             min-width: 120px;
@@ -1951,11 +1930,6 @@
         display: none;
     }
 
-    /* Edit new location container */
-    .edit-new-location-container {
-        display: none;
-        margin-top: 10px;
-    }
 
     /* Modal dialog styling */
     .modal-dialog-white {
@@ -1969,11 +1943,6 @@
         margin-top: 10px;
     }
 
-    /* Element text colors for better visibility */
-    .edit-button, .duplicate-button, .generate-qr-button {
-        color: var(--ui-title) !important;
-    }
-    
     /* Standardized button styles across the application */
     .search-button, .scan-button, .filter-toggle, .clear-filter, 
     .add-new-btn, .popup-close-button, .prev-image-button, .next-image-button,
@@ -1990,7 +1959,7 @@
     }
     
     /* Standardize form and document buttons */
-    .save-button, .cancel-button, .remove-book-cover-button, .remove-duplicate-image-button,
+    .save-button, .cancel-button, .remove-book-cover-button,
     .import-book-button, .fetch-isbn-button, .nav-back-button {
         display: inline-flex;
         align-items: center;
@@ -2374,7 +2343,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
         <div class="filter-container">
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>Unterrichtsfach:</label>
+                    <label>{{ filter_names.get('2', 'Fach') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter1-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(1)">Clear</button>
                 </div>
@@ -2388,7 +2357,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>Jahrgangsstufe:</label>
+                    <label>{{ filter_names.get('1', 'Klassenstufe') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter2-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(2)">Clear</button>
                 </div>
@@ -2402,7 +2371,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>Schlagwort:</label>
+                    <label>{{ filter_names.get('3', 'Schlagwort') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter3-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(3)">Clear</button>
                 </div>
@@ -2451,9 +2420,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
         <div id="table-view-header" class="table-view-header" aria-hidden="true">
             <span>Name</span>
             <span>Ort</span>
-            <span>Unterrichtsfach</span>
-            <span>Jahrgangsstufe</span>
-            <span>Schlagwort</span>
+            <span>{{ filter_names.get('2', 'Fach') }}</span>
+            <span>{{ filter_names.get('1', 'Jahrgangsstufe') }}</span>
+            <span>{{ filter_names.get('3', 'Schlagwort') }}</span>
             <span>Barcode</span>
             <span>Anzahl</span>
         </div>
@@ -2474,187 +2443,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
             </div>
         </div>
     </div>
-
-    <!-- Add the edit modal form -->
-    {% if current_permissions.actions.get('can_edit', False) %}
-    <div id="edit-modal" class="item-modal">
-        <div class="modal-content">
-            <span class="close-modal" onclick="closeEditModal()">&times;</span>
-            <h2>Objekt bearbeiten</h2>
-            <form id="edit-item-form" method="POST" enctype="multipart/form-data">
-                <input type="hidden" id="edit-item-id" name="id">
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="edit-name">Name:</label>
-                        <input type="text" id="edit-name" name="name" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="edit-location">Ort:</label>
-                        <select id="edit-location" name="ort" required>
-                            <option value="">-- Bitte Ort auswählen --</option>
-                            <!-- Options will be loaded by JavaScript -->
-                        </select>
-                        <button type="button" class="add-new-btn" id="edit-add-new-location-btn">
-                            Neuen Ort hinzufügen
-                        </button>
-                        <div id="edit-new-location-container" class="edit-new-location-container">
-                            <input type="text" id="edit-new-location-input" placeholder="Neuen Ort eingeben">
-                            <button type="button" onclick="addNewLocation('edit')">Hinzufügen</button>
-                            <button type="button" onclick="cancelAddLocation('edit')">Abbrechen</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="edit-description">Beschreibung:</label>
-                    <textarea id="edit-description" name="beschreibung" required></textarea>
-                </div>
-                
-                <!-- Updated filter inputs for edit form with dropdowns -->
-                <div class="filter-inputs">
-                    <h3>Unterrichtsfach:</h3>
-                    <div class="multi-filter">
-                        <div class="form-group">
-                            <label for="edit-filter1-1">Wert 1:</label>
-                            <select id="edit-filter1-1" name="filter" class="filter-dropdown-select">
-                                <option value="">-- Bitte auswählen --</option>
-                                <!-- Options will be loaded by JavaScript -->
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label for="edit-filter1-2">Wert 2:</label>
-                            <select id="edit-filter1-2" name="filter" class="filter-dropdown-select">
-                                <option value="">-- Optional --</option>
-                                <!-- Options will be loaded by JavaScript -->
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label for="edit-filter1-3">Wert 3:</label>
-                            <select id="edit-filter1-3" name="filter" class="filter-dropdown-select">
-                                <option value="">-- Optional --</option>
-                                <!-- Options will be loaded by JavaScript -->
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label for="edit-filter1-4">Wert 4:</label>
-                            <select id="edit-filter1-4" name="filter" class="filter-dropdown-select">
-                                <option value="">-- Optional --</option>
-                                <!-- Options will be loaded by JavaScript -->
-                            </select>
-                        </div>
-                    </div>
-                    
-                    <h3>Jahrgangsstufe:</h3>
-                    <div class="multi-filter">
-                        <div class="form-group">
-                            <label for="edit-filter2-1">Wert 1:</label>
-                            <select id="edit-filter2-1" name="filter2" class="filter-dropdown-select">
-                                <option value="">-- Bitte auswählen --</option>
-                                <!-- Options will be loaded by JavaScript -->
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label for="edit-filter2-2">Wert 2:</label>
-                            <select id="edit-filter2-2" name="filter2" class="filter-dropdown-select">
-                                <option value="">-- Optional --</option>
-                                <!-- Options will be loaded by JavaScript -->
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label for="edit-filter2-3">Wert 3:</label>
-                            <select id="edit-filter2-3" name="filter2" class="filter-dropdown-select">
-                                <option value="">-- Optional --</option>
-                                <!-- Options will be loaded by JavaScript -->
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label for="edit-filter2-4">Wert 4:</label>
-                            <select id="edit-filter2-4" name="filter2" class="filter-dropdown-select">
-                                <option value="">-- Optional --</option>
-                                <!-- Options will be loaded by JavaScript -->
-                            </select>
-                        </div>
-                    </div>
-                    
-                    <h3>Schlagwort:</h3>
-                    <div class="multi-filter">
-                        <div class="form-group">
-                            <label for="edit-filter3-1">Wert 1:</label>
-                            <input type="text" id="edit-filter3-1" name="filter3">
-                        </div>
-                        <div class="form-group">
-                            <label for="edit-filter3-2">Wert 2:</label>
-                            <input type="text" id="edit-filter3-2" name="filter3">
-                        </div>
-                        <div class="form-group">
-                            <label for="edit-filter3-3">Wert 3:</label>
-                            <input type="text" id="edit-filter3-3" name="filter3">
-                        </div>
-                        <div class="form-group">
-                            <label for="edit-filter3-4">Wert 4:</label>
-                            <input type="text" id="edit-filter3-4" name="filter3">
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="form-group">
-                    <label for="edit-year">Anschaffungsjahr:</label>
-                    <input type="date" id="edit-year" name="anschaffungsjahr">
-                </div>
-                <div class="form-group">
-                    <label for="edit-cost">Anschaffungskosten (€):</label>
-                    <input id="edit-cost" name="anschaffungskosten">
-                </div>
-                <div class="form-group">
-                    <label for="edit-code4">Code:</label>
-                    <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
-                        <input id="edit-code4" name="code_4">
-                        <button type="button" class="fetch-isbn-button" id="scan-edit-code-btn">Barcode scannen</button>
-                    </div>
-                </div>
-                
-                <div class="form-group">
-                    <label for="edit-reservierbar" style="display:inline-block; width:auto; margin-right:10px;">Reservierbar:</label>
-                    <input type="checkbox" id="edit-reservierbar" name="reservierbar" style="width:auto;">
-                    <small style="display:block; color:#666;">Wenn deaktiviert, kann der Artikel nicht im Voraus reserviert werden.</small>
-                </div>
-
-                <!-- New section for managing images -->
-                <div class="form-group">
-                    <label>Vorhandene Bilder:</label>
-                    <div id="edit-existing-images" class="existing-images-container">
-                        <!-- Existing images will be added here dynamically -->
-                    </div>
-                </div>
-                
-                <div class="form-group">
-                    <label for="edit-new-images">
-                        <span>Neue Bilder/Videos hinzufügen:</span>
-                        <span>(Bilder/Videos werden vom Original übernommen)</span>
-                    </label>
-                    <input type="file" id="edit-new-images" name="new_images" accept=".jpg, .jpeg, .png, .gif, .mp4, .mov, .avi, .mkv, .webm, .flv, .m4v, .3gp" multiple>
-                    <div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>
-                    <!-- Add image preview container -->
-                    <div class="image-preview-container" id="edit-image-preview-container"></div>
-                </div>
-                
-                <div class="form-group">
-                    <label for="edit-isbn">ISBN:</label>
-                    <div class="isbn-input-group">
-                        <input type="text" id="edit-isbn" name="isbn" placeholder="ISBN eingeben...">
-                        <button type="button" class="fetch-isbn-button" id="scan-edit-isbn-btn">ISBN scannen</button>
-                        <button type="button" class="fetch-isbn-button" onclick="fetchBookInfo('edit')">Buchinformationen abrufen</button>
-                    </div>
-                    <div id="edit-book-info-container" class="book-info-container"></div>
-                </div>
-                
-                <div class="form-actions">
-                    <button type="submit" class="save-button">Speichern</button>
-                    <button type="button" class="cancel-button" onclick="closeEditModal()">Abbrechen</button>
-                </div>
-            </form>
-        </div>
-    </div>
-    {% endif %}
 </div>
 
 <!-- Schedule Appointment Modal -->
@@ -2889,58 +2677,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
         }
     });
 
-    function scanIntoEditCode() {
-        const qrReader = document.getElementById('qr-reader');
-        const editCodeInput = document.getElementById('edit-code4');
-        const scanEditBtn = document.getElementById('scan-edit-code-btn');
-        if (!qrReader || !editCodeInput || !scanEditBtn) {
-            return;
-        }
-
-        // Toggle close if it's already running
-        if (isScanning && qrReader.style.display !== 'none') {
-            stopScanner();
-            scanEditBtn.textContent = 'Barcode scannen';
-            return;
-        }
-
-        scanEditBtn.textContent = 'Scanner schließen';
-
-        // Start scanner with custom logic mapping to the Code input field
-        startScanner(function(decodedText) {
-            editCodeInput.value = decodedText;
-            validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
-            scanEditBtn.textContent = 'Barcode scannen';
-        });
-    }
-
-    function scanIntoEditIsbn() {
-        const qrReader = document.getElementById('qr-reader');
-        const editIsbnInput = document.getElementById('edit-isbn');
-        const scanIsbnBtn = document.getElementById('scan-edit-isbn-btn');
-        if (!qrReader || !editIsbnInput || !scanIsbnBtn) {
-            return;
-        }
-
-        // Toggle close if it's already running
-        if (isScanning && qrReader.style.display !== 'none') {
-            stopScanner();
-            scanIsbnBtn.textContent = 'ISBN scannen';
-            return;
-        }
-
-        scanIsbnBtn.textContent = 'Scanner schließen';
-
-        // Start scanner with custom logic mapping to the ISBN input field
-        startScanner(function(decodedText) {
-            editIsbnInput.value = decodedText;
-            scanIsbnBtn.textContent = 'ISBN scannen';
-            if (typeof fetchBookInfo === 'function') {
-                fetchBookInfo('edit');
-            }
-        });
-    }
-
     function rebuildFilter3Options() {
         if (!allItems) return;
         
@@ -3324,21 +3060,11 @@ document.addEventListener('DOMContentLoaded', ()=>{
         loadPredefinedFilterValues(1);
         loadPredefinedFilterValues(2);
         loadPredefinedFilterValues(3);
-        
-        // Set up edit form submission
-        setupEditFormSubmission();
+
         
         // Set up schedule form submission
         setupScheduleFormSubmission();
-        
-        // Set up add new location buttons
-        const editAddLocationBtn = document.getElementById('edit-add-new-location-btn');
-        if (editAddLocationBtn) {
-            editAddLocationBtn.addEventListener('click', function() {
-                const container = document.getElementById('edit-new-location-container');
-                container.style.display = container.style.display === 'none' ? 'block' : 'none';
-            });
-        }
+
         
         // Find and attach event listener to all logout links
         const logoutLinks = document.querySelectorAll('a[href*="logout"]');
@@ -3391,35 +3117,11 @@ document.addEventListener('DOMContentLoaded', ()=>{
         // Close modals when clicking outside
         window.onclick = function(event) {
             const itemModal = document.getElementById('item-modal');
-            const editModal = document.getElementById('edit-modal');
             
             if (event.target === itemModal) {
                 itemModal.style.display = 'none';
             }
-            if (event.target === editModal) {
-                editModal.style.display = 'none';
-            }
         };
-
-        // Set up code validation for edit form
-        const editCodeField = document.getElementById('edit-code4');
-        if (editCodeField) {
-            editCodeField.addEventListener('blur', function() {
-                const itemIdField = document.getElementById('edit-item-id');
-                const excludeId = itemIdField ? itemIdField.value : null;
-                validateCodeField(this, excludeId);
-            });
-        }
-
-        const scanEditCodeBtn = document.getElementById('scan-edit-code-btn');
-        if (scanEditCodeBtn) {
-            scanEditCodeBtn.addEventListener('click', scanIntoEditCode);
-        }
-
-        const scanEditIsbnBtn = document.getElementById('scan-edit-isbn-btn');
-        if (scanEditIsbnBtn) {
-            scanEditIsbnBtn.addEventListener('click', scanIntoEditIsbn);
-        }
     });
 
     // Function to load items from server
@@ -3716,14 +3418,24 @@ document.addEventListener('DOMContentLoaded', ()=>{
                                     `<form method="POST" action="{{ url_for('ausleihen', id='') }}${item._id}">
                                         ${isGroupedItem ? `
                                         <div class="grouped-borrow-controls" style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; align-items:center;">
-                                            <label style="font-size:0.85rem; margin:0;">Anzahl:</label>
-                                            <input type="number" name="exemplare_count" min="1" max="${availableGroupedCount}" value="1" style="width:74px; padding:4px;">
-                                            <label style="font-size:0.85rem; margin:0;">oder Code:</label>
-                                            <select id="specific-item-card-${item._id}" name="specific_item_id" style="max-width:190px; padding:4px;">
-                                                <option value="">Automatisch wählen</option>
-                                                ${groupedAvailableUnits.map(unit => `<option value="${unit.id}">${unit.code}</option>`).join('')}
-                                            </select>
-                                        </div>` : ''}
+    <label style="font-size:0.85rem; margin:0;">Anzahl:</label>
+    <input type="number"
+           name="exemplare_count"
+           min="1"
+           max="${availableGroupedCount}"
+           value="1"
+           style="width:74px; padding:4px;"
+           oninput="if(this.value){ this.form.querySelector('[name=specific_item_id]').value = ''; }">
+
+    <label style="font-size:0.85rem; margin:0;">oder Code:</label>
+    <select id="specific-item-card-${item._id}"
+            name="specific_item_id"
+            style="max-width:190px; padding:4px;"
+            onchange="if(this.value !== ''){ this.form.querySelector('[name=exemplare_count]').value = '1'; }">
+        <option value="">Automatisch wählen</option>
+        ${groupedAvailableUnits.map(unit => `<option value="${unit.id}">${unit.code}</option>`).join('')}
+    </select>
+</div>` : ''}
                                         <button class="ausleihen" type="submit">Ausleihen</button>
                                     </form>` 
                                 : isBorrowedByMe ?
@@ -3742,9 +3454,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
                                 {% if current_permissions.actions.get('can_edit', False) %}
                                 <button class="edit-button" onclick="openEditModalForSelectedUnit('${item._id}', 'specific-item-card-${item._id}')">Bearbeiten</button>
                                 {% endif %}
-                                {% if current_permissions.actions.get('can_insert', False) %}
-                                <button class="duplicate-button" onclick="duplicateItem('${item._id}')">Duplizieren</button>
-                                {% endif %}
                                 {% if current_permissions.pages.get('admin_school_settings', False) %}
                                 ${canScheduleItem ? `<button class="schedule-button" onclick="openScheduleModal('${item._id}')">Reservieren</button>` : ''}
                                 {% endif %}
@@ -4171,162 +3880,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
             });
     }
 
-    function openEditModalForSelectedUnit(defaultItemId, selectId) {
-        let targetItemId = defaultItemId;
-
-        try {
-            const selectedUnit = selectId ? document.getElementById(selectId) : null;
-            if (selectedUnit && selectedUnit.value) {
-                targetItemId = selectedUnit.value;
-            }
-        } catch (e) {
-            // Keep default item id as fallback.
-        }
-
-        openEditModalFromServer(targetItemId);
-    }
-
-    function closeEditModal() {
-        const editModal = document.getElementById('edit-modal');
-        if (editModal) {
-            editModal.style.display = 'none';
-        }
-    }
-
-    function openEditModalFromServer(itemId) {
-        const editModal = document.getElementById('edit-modal');
-        if (!editModal) {
-            console.error('Edit modal nicht gefunden');
-            return;
-        }
-
-        console.log('DEBUG: openEditModal called with itemId:', itemId);
-
-        // Fetch the item data from the backend
-        fetch(`/get_item/${itemId}`)
-            .then(response => {
-                console.log('DEBUG: Response status:', response.status);
-                if (!response.ok) throw new Error(`HTTP ${response.status}`);
-                return response.json();
-            })
-            .then(data => {
-                console.log('DEBUG: Fetched data:', data);
-                // Backend returns the item directly or wrapped in error/success
-                const item = data.error ? null : (data.item || data);
-                
-                console.log('DEBUG: Parsed item:', item);
-                
-                if (!item || !item._id) {
-                    console.error('DEBUG: Item not found or invalid');
-                    alert('Item nicht gefunden');
-                    return;
-                }
-
-                // Fill in the form fields with the item data
-                document.getElementById('edit-item-id').value = item._id || '';
-                document.getElementById('edit-name').value = item.Name || '';
-                document.getElementById('edit-location').value = item.Ort || '';
-                document.getElementById('edit-description').value = item.Beschreibung || '';
-                document.getElementById('edit-year').value = item.Anschaffungsjahr || '';
-                document.getElementById('edit-cost').value = item.Anschaffungskosten || '';
-                document.getElementById('edit-code4').value = item.Code_4 || '';
-                document.getElementById('edit-isbn').value = item.ISBN || '';
-                document.getElementById('edit-reservierbar').checked = item.Reservierbar !== false;
-
-                // Fill in filter 1 (Unterrichtsfach)
-                const filter1Array = Array.isArray(item.Filter) ? item.Filter : (item.Filter ? [item.Filter] : []);
-                document.getElementById('edit-filter1-1').value = filter1Array[0] || '';
-                document.getElementById('edit-filter1-2').value = filter1Array[1] || '';
-                document.getElementById('edit-filter1-3').value = filter1Array[2] || '';
-                document.getElementById('edit-filter1-4').value = filter1Array[3] || '';
-
-                // Fill in filter 2 (Jahrgangsstufe)
-                const filter2Array = Array.isArray(item.Filter2) ? item.Filter2 : (item.Filter2 ? [item.Filter2] : []);
-                document.getElementById('edit-filter2-1').value = filter2Array[0] || '';
-                document.getElementById('edit-filter2-2').value = filter2Array[1] || '';
-                document.getElementById('edit-filter2-3').value = filter2Array[2] || '';
-                document.getElementById('edit-filter2-4').value = filter2Array[3] || '';
-
-                // Fill in filter 3 (Schlagwort)
-                const filter3Array = Array.isArray(item.Filter3) ? item.Filter3 : (item.Filter3 ? [item.Filter3] : []);
-                document.getElementById('edit-filter3-1').value = filter3Array[0] || '';
-                document.getElementById('edit-filter3-2').value = filter3Array[1] || '';
-                document.getElementById('edit-filter3-3').value = filter3Array[2] || '';
-                document.getElementById('edit-filter3-4').value = filter3Array[3] || '';
-
-                // Display existing images
-                const existingImagesContainer = document.getElementById('edit-existing-images');
-                const editForm = document.getElementById('edit-item-form');
-                existingImagesContainer.innerHTML = '';
-                if (editForm) {
-                    editForm.querySelectorAll('input[name="existing_images"], input[name="removed_images"]').forEach(input => input.remove());
-                }
-                if (item.Images && Array.isArray(item.Images)) {
-                    item.Images.forEach((image, index) => {
-                        const isVideo = isVideoFile(image);
-                        const imageDiv = document.createElement('div');
-                        imageDiv.className = 'existing-image-item';
-                        imageDiv.style.marginBottom = '10px';
-
-                        const thumbnailInfo = item.ThumbnailInfo && item.ThumbnailInfo[index];
-                        const imageSrc = thumbnailInfo && thumbnailInfo.has_preview ? 
-                            thumbnailInfo.preview_url : 
-                            (image.startsWith('/uploads/') || image.startsWith('http') ? 
-                                image : 
-                                `{{ url_for('uploaded_file', filename='') }}${image}`);
-
-                        const row = document.createElement('div');
-                        row.style.display = 'flex';
-                        row.style.gap = '8px';
-                        row.style.alignItems = 'center';
-
-                        if (isVideo) {
-                            const video = document.createElement('video');
-                            video.src = imageSrc;
-                            video.style.maxWidth = '100px';
-                            video.style.maxHeight = '100px';
-                            video.style.objectFit = 'contain';
-                            video.controls = true;
-                            row.appendChild(video);
-                        } else {
-                            const img = document.createElement('img');
-                            img.src = imageSrc;
-                            img.style.maxWidth = '100px';
-                            img.style.maxHeight = '100px';
-                            img.style.objectFit = 'contain';
-                            img.alt = `Existierendes Bild ${index + 1}`;
-                            row.appendChild(img);
-                        }
-
-                        const deleteButton = document.createElement('button');
-                        deleteButton.type = 'button';
-                        deleteButton.className = 'delete-image-button';
-                        deleteButton.textContent = 'Löschen';
-                        deleteButton.addEventListener('click', () => removeExistingImage(image, deleteButton));
-                        row.appendChild(deleteButton);
-
-                        imageDiv.appendChild(row);
-                        existingImagesContainer.appendChild(imageDiv);
-
-                        if (editForm) {
-                            const hiddenInput = document.createElement('input');
-                            hiddenInput.type = 'hidden';
-                            hiddenInput.name = 'existing_images';
-                            hiddenInput.value = image;
-                            editForm.appendChild(hiddenInput);
-                        }
-                    });
-                }
-
-                // Display the modal
-                editModal.style.display = 'block';
-            })
-            .catch(error => {
-                console.error('Fehler beim Laden des Items:', error);
-                alert('Fehler beim Laden des Items');
-            });
-    }
-
     function escapeHtml(value) {
         return String(value ?? '').replace(/[&<>'"]/g, (char) => {
             const map = {
@@ -4677,7 +4230,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
                     : `<button class="ausleihen disabled-button" disabled>Ausgeliehen</button>`
                 }
                 <button class="edit-button" onclick="openEditModalForSelectedUnit('${item._id}', 'specific-item-modal-${item._id}')">Bearbeiten</button>
-                <button class="duplicate-button" onclick="duplicateItem('${item._id}')">Duplizieren</button>
                 ${damageReports && damageReports.length > 0 ? `<button class="damage-button" onclick="markDamageAsRepaired('${item._id}')">Repariert</button>` : `<button class="damage-button" onclick="registerDamage('${item._id}')">Schaden melden</button>`}
                 ${canScheduleItem ? `<button class="schedule-button" onclick="openScheduleModal('${item._id}')">Reservieren</button>` : ''}
                 <form method="POST" action="/delete_item/${item._id}" style="display:inline;" onsubmit="return confirm('Sind Sie sicher?')">
@@ -4686,7 +4238,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 <button type="button" class="details-button" onclick="document.getElementById('item-modal').style.display='none';">Schließen</button>
             </div>
         `;
-        
+
+
+
         modal.style.display = 'block';
         
         const closeButton = modal.querySelector('.close-modal');
@@ -4923,6 +4477,13 @@ document.addEventListener('DOMContentLoaded', ()=>{
         });
     }
 
+    function openEditModalForSelectedUnit(itemId, selectId) {
+    const select = document.getElementById(selectId);
+    const targetId = (select && select.value) ? select.value : itemId;
+    // Leitet auf die Bearbeiten-Seite weiter und übergibt die aktuelle URL für den Redirect nach dem Speichern
+    window.location.href = `/item_edit/${targetId}`;
+    }
+
     function changeModalImage(direction) {
         const currentIndex = window.currentModalImageIndex;
         const total = window.totalModalImages;
@@ -5349,8 +4910,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
         });
     }
 
-    // Load location options for edit modal
-    // Edit-related functions moved to edit_item_functions.html
 
     // Schedule modal functions
     function openScheduleModal(itemId) {
@@ -5470,99 +5029,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
         }
     }
 
-    // Setup edit form submission
-    function setupEditFormSubmission() {
-        const editForm = document.getElementById('edit-item-form');
-        if (editForm) {
-            editForm.addEventListener('submit', function(e) {
-                e.preventDefault();
-                
-                const itemId = document.getElementById('edit-item-id').value;
-                const formData = new FormData(this);
-                
-                fetch(`/edit_item/${itemId}`, {
-                    method: 'POST',
-                    body: formData
-                })
-                .then(response => {
-                    if (response.ok) {
-                        closeEditModal();
-                        // Reload items to show updated information
-                        loadItems();
-                        // Show success message
-                        const successMsg = document.createElement('div');
-                        successMsg.className = 'alert alert-success';
-                        successMsg.textContent = 'Item wurde erfolgreich aktualisiert!';
-                        successMsg.style.position = 'fixed';
-                        successMsg.style.top = '20px';
-                        successMsg.style.right = '20px';
-                        successMsg.style.zIndex = '9999';
-                        document.body.appendChild(successMsg);
-                        setTimeout(() => {
-                            if (successMsg.parentNode) {
-                                successMsg.parentNode.removeChild(successMsg);
-                            }
-                        }, 3000);
-                    } else {
-                        alert('Fehler beim Aktualisieren des Items');
-                    }
-                })
-                .catch(error => {
-                    console.error('Error updating item:', error);
-                    alert('Fehler beim Aktualisieren des Items');
-                });
-            });
-        }
-    }
-
-    // Duplication function
-    function duplicateItem(itemId) {
-        // Show loading indicator
-        const loadingDiv = document.createElement('div');
-        loadingDiv.innerHTML = `
-            <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
-                        background: rgba(0,0,0,0.5); z-index: 10000; display: flex; 
-                        align-items: center; justify-content: center;">
-                <div class="modal-dialog-white">
-                    <div>Element wird dupliziert...</div>
-                    <div class="modal-content-margin">
-                        <div class="spinner"></div>
-                    </div>
-                </div>
-            </div>
-        `;
-        document.body.appendChild(loadingDiv);
-
-        // Create form data for the duplicate_item request
-        const formData = new FormData();
-        formData.append('original_item_id', itemId);
-
-        // Send duplication request to get item data
-        fetch('/duplicate_item', {
-            method: 'POST',
-            body: formData
-        })
-        .then(response => response.json())
-        .then(data => {
-            document.body.removeChild(loadingDiv);
-            
-            if (data.success) {
-                // Store duplication data in sessionStorage for the upload page
-                sessionStorage.setItem('duplicateItemData', JSON.stringify(data.item_data));
-                
-                // Redirect to upload admin page
-                window.location.href = '/upload_admin?duplicate=true';
-            } else {
-                alert('Fehler beim Duplizieren: ' + (data.message || 'Unbekannter Fehler'));
-            }
-        })
-        .catch(error => {
-            document.body.removeChild(loadingDiv);
-            console.error('Error duplicating item:', error);
-            alert('Fehler beim Duplizieren des Elements. Bitte versuchen Sie es erneut.');
-        });
-    }
-
     // Helper functions for appointment display
     function formatAppointmentDate(dateString) {
         if (!dateString) return '';
@@ -5632,10 +5098,62 @@ document.addEventListener('DOMContentLoaded', ()=>{
         futureAppointments.sort((a, b) => new Date(a.date) - new Date(b.date));
         return futureAppointments[0];
     }
-</script>
 
-<!-- Include edit item functions -->
-{% include "edit_item_functions.html" %}
+    // Load location options
+    function loadLocationOptions() {
+        fetch('/get_predefined_locations')
+            .then(response => response.json())
+            .then(data => {
+                const ortSelect = document.getElementById('ort');
+                if (ortSelect) {
+                    // Clear existing options except the first one
+                    while (ortSelect.children.length > 1) {
+                        ortSelect.removeChild(ortSelect.lastChild);
+                    }
+
+                    // Add new options - data.locations contains the array
+                    data.locations.forEach(location => {
+                        const option = document.createElement('option');
+                        option.value = location;
+                        option.textContent = location;
+                        ortSelect.appendChild(option);
+                    });
+                }
+            })
+            .catch(error => {
+                console.error('Error loading location options:', error);
+            });
+    }
+
+    // Function to add new location
+    function addNewLocation() {
+        const newLocationInput = document.getElementById('new-location-input');
+        const newLocation = newLocationInput.value.trim();
+
+        if (!newLocation) {
+            alert('Bitte geben Sie einen Ort ein.');
+            return;
+        }
+
+        // Add to dropdown
+        const ortSelect = document.getElementById('ort');
+        const option = document.createElement('option');
+        option.value = newLocation;
+        option.textContent = newLocation;
+        option.selected = true;
+        ortSelect.appendChild(option);
+
+        // Hide the input container
+        document.getElementById('new-location-container').style.display = 'none';
+        newLocationInput.value = '';
+    }
+
+    // Function to cancel adding new location
+    function cancelAddLocation() {
+        document.getElementById('new-location-container').style.display = 'none';
+        document.getElementById('new-location-input').value = '';
+    }
+</script>
 
 <!-- Include reset item functions -->
 {% include "reset_item_functions.html" %}
@@ -5864,16 +5382,4 @@ document.addEventListener('DOMContentLoaded', ()=>{
     }
 }
 </style>
-
-{% if open_item %}
-<script>
-    document.addEventListener("DOMContentLoaded", function() {
-        if (typeof openEditModalFromServer === 'function') {
-            setTimeout(function() {
-                openEditModalFromServer('{{ open_item }}');
-            }, 500);
-        }
-    });
-</script>
-{% endif %}
 {% endblock %}

Web/templates/manage_filters.html

@@ -1,183 +1,173 @@
-<!--
-   Copyright 2025-2026 AIIrondev
-
-   Licensed under the Inventarsystem EULA (Endbenutzer-Lizenzvertrag).
-   See Legal/LICENSE for the full license text.
-   Unauthorized commercial use, SaaS hosting, or removal of branding is prohibited.
-   For commercial licensing inquiries: https://github.com/AIIrondev
--->
 {% extends "base.html" %}
 
 {% block title %}Filter verwalten{% endblock %}
 
 {% block content %}
-<div class="container">
-    <h1 class="mb-4">Filterwerte verwalten</h1>
-    
-    <div class="row">
-        <!-- Filter 1 -->
-        <div class="col-md-4">
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h2 class="card-title h5 mb-0">{{ filter_names.get('1', 'Fach/Kategorie') }} (Filter 1)</h2>
-                </div>
-                <div class="card-body">
-                    <form method="POST" action="{{ url_for('add_filter_value', filter_num=1) }}" class="mb-4">
-                        <div class="input-group">
-                            <input type="text" name="value" class="form-control" placeholder="Neuer Wert..." required>
-                            <button type="submit" class="btn btn-primary">Hinzufügen</button>
-                        </div>
-                    </form>
-                    
-                    <h5 class="mb-3">Vorhandene Werte</h5>
-                    {% if filter1_values %}
-                    <div class="list-group">
-                        {% for value in filter1_values %}
-                        <div class="list-group-item">
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>{{ value }}</span>
-                                <div>
-                                    <button type="button" class="btn btn-sm btn-secondary me-1" onclick="toggleEdit('edit-1-{{ loop.index }}')">Bearbeiten</button>
-                                    <form method="POST" action="{{ url_for('remove_filter_value', filter_num=1, value=value) }}" class="d-inline">
-                                        <button type="submit" class="btn btn-sm btn-danger" 
-                                                onclick="return confirm('Sind Sie sicher, dass Sie den Wert \"' + '{{ value }}'.replace(/'/g, '\\\'') + '\" löschen möchten?');">
-                                            Entfernen
-                                        </button>
-                                    </form>
-                                </div>
-                            </div>
-                            <form id="edit-1-{{ loop.index }}" method="POST" action="{{ url_for('edit_filter_value', filter_num=1, old_value=value) }}" style="display: none;" class="mt-2">
-                                <div class="input-group input-group-sm">
-                                    <input type="text" name="new_value" class="form-control" value="{{ value }}" required>
-                                    <button type="submit" class="btn btn-primary" onclick="return confirm('Tipp: Das Ändern des Namens aktualisiert auch alle Einträge in der Datenbank, die diesen Filter verwenden. Fortfahren?');">Speichern</button>
-                                    <button type="button" class="btn btn-secondary" onclick="toggleEdit('edit-1-{{ loop.index }}')">Abbrechen</button>
-                                </div>
-                            </form>
-                        </div>
-                        {% endfor %}
-                    </div>
-                    {% else %}
-                    <div class="alert alert-info">Keine Werte definiert.</div>
-                    {% endif %}
-                </div>
-            </div>
+<div class="container py-4">
+    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center pb-3 mb-4 border-bottom gap-3">
+        <div>
+            <h1 class="h2 fw-bold mb-1">Filterwerte verwalten</h1>
+            <p class="text-muted mb-0">Verwalten und Bearbeiten Sie die Zuordnungswerte für das Inventar.</p>
         </div>
-        
-        <!-- Filter 2 -->
-        <div class="col-md-4">
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h2 class="card-title h5 mb-0">{{ filter_names.get('2', 'System/Bereich') }} (Filter 2)</h2>
+        <div>
+            <a href="{{ url_for('home_admin') }}" class="btn btn-outline-secondary d-inline-flex align-items-center">
+                <i class="bi bi-arrow-left me-2"></i> Zurück zur Admin-Übersicht
+            </a>
+        </div>
+    </div>
+
+    <div class="row g-4">
+        <div class="col-lg-6">
+            <div class="card shadow-sm border-0 h-100 rounded-3">
+                <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
+                    <h2 class="card-title h5 mb-0 fw-semibold text-primary">
+                        <i class="bi bi-funnel me-2"></i>{{ filter_names.get('1', 'Jahrgangsstufe') }}
+                    </h2>
+                    <span class="badge bg-primary-subtle text-primary rounded-pill">Filter 1</span>
                 </div>
-                <div class="card-body">
-                    <form method="POST" action="{{ url_for('add_filter_value', filter_num=2) }}" class="mb-4">
+                <div class="card-body p-4">
+                    <form method="POST" action="{{ url_for('add_filter_value', filter_num=1) }}" class="mb-4">
+                        <label class="form-label fw-medium text-secondary">Neuen Wert hinzufügen</label>
                         <div class="input-group">
-                            <input type="text" name="value" class="form-control" placeholder="Neuer Wert..." required>
-                            <button type="submit" class="btn btn-primary">Hinzufügen</button>
+                            <input type="text" name="value" class="form-control" placeholder="Wert eingeben..." required>
+                            <button type="submit" class="btn btn-primary d-inline-flex align-items-center">
+                                <i class="bi bi-plus-lg me-1"></i> Hinzufügen
+                            </button>
                         </div>
                     </form>
-                    
-                    <h5 class="mb-3">Vorhandene Werte</h5>
-                    {% if filter2_values %}
-                    <div class="list-group">
-                        {% for value in filter2_values %}
-                        <div class="list-group-item">
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>{{ value }}</span>
-                                <div>
-                                    <button type="button" class="btn btn-sm btn-secondary me-1" onclick="toggleEdit('edit-2-{{ loop.index }}')">Bearbeiten</button>
-                                    <form method="POST" action="{{ url_for('remove_filter_value', filter_num=2, value=value) }}" class="d-inline">
-                                        <button type="submit" class="btn btn-sm btn-danger"
+
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <h3 class="h6 text-uppercase text-muted fw-bold mb-0">Vorhandene Werte</h3>
+                        <span class="badge bg-secondary rounded-pill">{{ filter1_values|length if filter1_values else 0 }}</span>
+                    </div>
+
+                    {% if filter1_values %}
+                    <div class="list-group list-group-flush border rounded-3 overflow-hidden">
+                        {% for value in filter1_values %}
+                        <div class="list-group-item p-3">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <span class="fw-medium">{{ value }}</span>
+                                <div class="btn-group btn-group-sm">
+                                    <button type="button" class="btn btn-outline-secondary" onclick="toggleEdit('edit-1-{{ loop.index }}')">
+                                        <i class="bi bi-pencil me-1"></i> Bearbeiten
+                                    </button>
+                                    <form method="POST" action="{{ url_for('remove_filter_value', filter_num=1, value=value) }}" class="d-inline">
+                                        <button type="submit" class="btn btn-outline-danger" 
                                                 onclick="return confirm('Sind Sie sicher, dass Sie den Wert \"' + '{{ value }}'.replace(/'/g, '\\\'') + '\" löschen möchten?');">
-                                            Entfernen
+                                            <i class="bi bi-trash me-1"></i> Entfernen
                                         </button>
                                     </form>
                                 </div>
                             </div>
-                            <form id="edit-2-{{ loop.index }}" method="POST" action="{{ url_for('edit_filter_value', filter_num=2, old_value=value) }}" style="display: none;" class="mt-2">
+                            
+                            <form id="edit-1-{{ loop.index }}" method="POST" action="{{ url_for('edit_filter_value', filter_num=1, old_value=value) }}" style="display: none;" class="mt-3 pt-3 border-top">
                                 <div class="input-group input-group-sm">
                                     <input type="text" name="new_value" class="form-control" value="{{ value }}" required>
-                                    <button type="submit" class="btn btn-primary" onclick="return confirm('Tipp: Das Ändern des Namens aktualisiert auch alle Einträge in der Datenbank, die diesen Filter verwenden. Fortfahren?');">Speichern</button>
-                                    <button type="button" class="btn btn-secondary" onclick="toggleEdit('edit-2-{{ loop.index }}')">Abbrechen</button>
+                                    <button type="submit" class="btn btn-success" onclick="return confirm('Tipp: Das Ändern des Namens aktualisiert auch alle Einträge in der Datenbank, die diesen Filter verwenden. Fortfahren?');">
+                                        <i class="bi bi-check-lg me-1"></i> Speichern
+                                    </button>
+                                    <button type="button" class="btn btn-outline-secondary" onclick="toggleEdit('edit-1-{{ loop.index }}')">
+                                        Abbrechen
+                                    </button>
                                 </div>
                             </form>
                         </div>
                         {% endfor %}
                     </div>
                     {% else %}
-                    <div class="alert alert-info">Keine Werte definiert.</div>
+                    <div class="alert alert-light border text-center text-muted mb-0">
+                        <i class="bi bi-info-circle me-1"></i> Keine Werte definiert.
+                    </div>
                     {% endif %}
                 </div>
             </div>
         </div>
 
-        <!-- Filter 3 -->
-        <div class="col-md-4">
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h2 class="card-title h5 mb-0">{{ filter_names.get('3', 'Typ/Art') }} (Filter 3)</h2>
+        <div class="col-lg-6">
+            <div class="card shadow-sm border-0 h-100 rounded-3">
+                <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
+                    <h2 class="card-title h5 mb-0 fw-semibold text-primary">
+                        <i class="bi bi-funnel me-2"></i>{{ filter_names.get('2', 'Fachgebiet') }}
+                    </h2>
+                    <span class="badge bg-primary-subtle text-primary rounded-pill">Filter 2</span>
                 </div>
-                <div class="card-body">
-                    <form method="POST" action="{{ url_for('add_filter_value', filter_num=3) }}" class="mb-4">
+                <div class="card-body p-4">
+                    <form method="POST" action="{{ url_for('add_filter_value', filter_num=2) }}" class="mb-4">
+                        <label class="form-label fw-medium text-secondary">Neuen Wert hinzufügen</label>
                         <div class="input-group">
-                            <input type="text" name="value" class="form-control" placeholder="Neuer Wert..." required>
-                            <button type="submit" class="btn btn-primary">Hinzufügen</button>
+                            <input type="text" name="value" class="form-control" placeholder="Wert eingeben..." required>
+                            <button type="submit" class="btn btn-primary d-inline-flex align-items-center">
+                                <i class="bi bi-plus-lg me-1"></i> Hinzufügen
+                            </button>
                         </div>
                     </form>
-                    
-                    <h5 class="mb-3">Vorhandene Werte</h5>
-                    {% if filter3_values %}
-                    <div class="list-group">
-                        {% for value in filter3_values %}
-                        <div class="list-group-item">
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>{{ value }}</span>
-                                <div>
-                                    <button type="button" class="btn btn-sm btn-secondary me-1" onclick="toggleEdit('edit-3-{{ loop.index }}')">Bearbeiten</button>
-                                    <form method="POST" action="{{ url_for('remove_filter_value', filter_num=3, value=value) }}" class="d-inline">
-                                        <button type="submit" class="btn btn-sm btn-danger"
+
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <h3 class="h6 text-uppercase text-muted fw-bold mb-0">Vorhandene Werte</h3>
+                        <span class="badge bg-secondary rounded-pill">{{ filter2_values|length if filter2_values else 0 }}</span>
+                    </div>
+
+                    {% if filter2_values %}
+                    <div class="list-group list-group-flush border rounded-3 overflow-hidden">
+                        {% for value in filter2_values %}
+                        <div class="list-group-item p-3">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <span class="fw-medium">{{ value }}</span>
+                                <div class="btn-group btn-group-sm">
+                                    <button type="button" class="btn btn-outline-secondary" onclick="toggleEdit('edit-2-{{ loop.index }}')">
+                                        <i class="bi bi-pencil me-1"></i> Bearbeiten
+                                    </button>
+                                    <form method="POST" action="{{ url_for('remove_filter_value', filter_num=2, value=value) }}" class="d-inline">
+                                        <button type="submit" class="btn btn-outline-danger"
                                                 onclick="return confirm('Sind Sie sicher, dass Sie den Wert \"' + '{{ value }}'.replace(/'/g, '\\\'') + '\" löschen möchten?');">
-                                            Entfernen
+                                            <i class="bi bi-trash me-1"></i> Entfernen
                                         </button>
                                     </form>
                                 </div>
                             </div>
-                            <form id="edit-3-{{ loop.index }}" method="POST" action="{{ url_for('edit_filter_value', filter_num=3, old_value=value) }}" style="display: none;" class="mt-2">
+
+                            <form id="edit-2-{{ loop.index }}" method="POST" action="{{ url_for('edit_filter_value', filter_num=2, old_value=value) }}" style="display: none;" class="mt-3 pt-3 border-top">
                                 <div class="input-group input-group-sm">
                                     <input type="text" name="new_value" class="form-control" value="{{ value }}" required>
-                                    <button type="submit" class="btn btn-primary" onclick="return confirm('Tipp: Das Ändern des Namens aktualisiert auch alle Einträge in der Datenbank, die diesen Filter verwenden. Fortfahren?');">Speichern</button>
-                                    <button type="button" class="btn btn-secondary" onclick="toggleEdit('edit-3-{{ loop.index }}')">Abbrechen</button>
+                                    <button type="submit" class="btn btn-success" onclick="return confirm('Tipp: Das Ändern des Namens aktualisiert auch alle Einträge in der Datenbank, die diesen Filter verwenden. Fortfahren?');">
+                                        <i class="bi bi-check-lg me-1"></i> Speichern
+                                    </button>
+                                    <button type="button" class="btn btn-outline-secondary" onclick="toggleEdit('edit-2-{{ loop.index }}')">
+                                        Abbrechen
+                                    </button>
                                 </div>
                             </form>
                         </div>
                         {% endfor %}
                     </div>
                     {% else %}
-                    <div class="alert alert-info">Keine Werte definiert.</div>
+                    <div class="alert alert-light border text-center text-muted mb-0">
+                        <i class="bi bi-info-circle me-1"></i> Keine Werte definiert.
+                    </div>
                     {% endif %}
                 </div>
             </div>
         </div>
     </div>
-    
-    <div class="alert alert-warning">
-        <strong>Hinweis:</strong> Beim Entfernen eines Filterwertes wird dieser nicht aus bestehenden Objekten entfernt.
-        Bereits verwendete Werte bleiben in den Objekten erhalten.
-    </div>
-    
-    <div class="mt-4">
-        <a href="{{ url_for('home_admin') }}" class="btn btn-secondary">Zurück zur Admin-Übersicht</a>
+
+    <div class="alert alert-warning border-0 shadow-sm d-flex align-items-center mt-4 rounded-3" role="alert">
+        <i class="bi bi-exclamation-triangle-fill fs-4 me-3 text-warning"></i>
+        <div>
+            <strong>Hinweis:</strong> Beim Entfernen eines Filterwertes wird dieser nicht automatisch aus bestehenden Objekten gelöscht. Bereits zugewiesene Werte bleiben in bestehenden Datensätzen erhalten.
+        </div>
     </div>
 </div>
 
 <script>
 function toggleEdit(id) {
     const el = document.getElementById(id);
-    if (el.style.display === 'none') {
+    if (el.style.display === 'none' || el.style.display === '') {
         el.style.display = 'block';
+        const input = el.querySelector('input[type="text"]');
+        if (input) input.focus();
     } else {
         el.style.display = 'none';
     }
 }
 </script>
-{% endblock %}
+{% endblock %}

Web/templates/manage_locations.html

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

Web/templates/register.html

@@ -6,7 +6,7 @@
 <div class="container">
     <div class="header-section">
         <h1>Neuen Benutzer registrieren</h1>
-        <p class="subtitle">Erstellen Sie ein neues Benutzerkonto und legen Sie Zugriffsrechte fest</p>
+        <p class="subtitle">Erstellen Sie ein neues Benutzerkonto oder importieren Sie mehrere Benutzer per CSV</p>
     </div>
 
     <div class="flash-container">
@@ -23,7 +23,43 @@
     </div>
 
     <div class="content">
+        <!-- 1. CSV BULK IMPORT CARD -->
+        <div class="form-card" style="margin-bottom: 2rem; border-top: 4px solid #059669;">
+            <div class="card-header" style="margin-bottom: 1rem;">
+                <h2>Massenregistrierung via CSV</h2>
+                <p class="subtitle" style="color: #4b5563;">
+                    Laden Sie eine CSV-Datei hoch (Format: <code>Vorname, Nachname</code>).
+                    Benutzernamen und sichere Passwörter werden serverseitig generiert. Nach dem Upload erhalten Sie direkt ein PDF mit Zugangsdaten (2 pro Seite zum Ausschneiden).
+                </p>
+            </div>
+
+            <form method="POST" action="{{ url_for('register_csv') }}" enctype="multipart/form-data">
+                <div class="form-group">
+                    <label for="permission-preset-csv">Berechtigungs-Preset für alle CSV-Benutzer</label>
+                    <select id="permission-preset-csv" name="permission_preset" class="form-select" style="margin-bottom: 1rem;">
+                        {% for preset_key, preset in permission_presets.items() %}
+                        <option value="{{ preset_key }}">{{ preset.label }}</option>
+                        {% endfor %}
+                    </select>
+
+                    <label for="csv_file">CSV-Datei auswählen</label>
+                    <div class="input-container">
+                        <span class="input-icon">📄</span>
+                        <input type="file" id="csv_file" name="csv_file" accept=".csv" required style="padding: 10px;">
+                    </div>
+                </div>
+
+                <div class="form-group form-actions" style="margin-top: 1.5rem;">
+                    <button type="submit" class="action-button" style="background-color: #059669; color: white;">
+                        📥 CSV Importieren & Zugangsdaten-PDF Herunterladen
+                    </button>
+                </div>
+            </form>
+        </div>
+
+        <!-- 2. SINGLE USER REGISTRATION CARD -->
         <div class="form-card">
+            <h2>Einzelnen Benutzer registrieren</h2>
             <form method="POST" action="{{ url_for('register') }}">
 
                 <div class="form-group">
@@ -32,11 +68,13 @@
                         <span class="input-icon">👤</span>
                         <input type="text" id="name" name="name" placeholder="Geben Sie den Vornamen ein" required onchange="generateUsername()" oninput="generateUsername()">
                     </div>
+
                     <label for="last-name">Nachname</label>
                     <div class="input-container">
                         <span class="input-icon">👤</span>
                         <input type="text" id="last-name" name="last-name" placeholder="Geben Sie den Nachnamen ein" required onchange="generateUsername()" oninput="generateUsername()">
                     </div>
+
                     <label for="username">Benutzername <span style="color: #9ca3af;">(Vorschau - wird serverseitig finalisiert)</span></label>
                     <div class="input-container">
                         <span class="input-icon">👤</span>
@@ -44,7 +82,7 @@
                     </div>
                     <p class="anonymize-hint">Klarnamen werden nur zur Erzeugung des Benutzernamens als Kürzel (z.B. SimFri) verwendet; bei Kollision wird automatisch ein Buchstabe mehr genommen.</p>
                 </div>
-                
+
                 <div class="form-group">
                     <label for="password">Passwort</label>
                     <div class="password-rules" id="password-rules" aria-live="polite">
@@ -57,20 +95,21 @@
                             <li id="pw-rule-symbol" class="pw-rule">Mindestens ein Sonderzeichen</li>
                         </ul>
                     </div>
-                    
+
                     <div class="input-wrapper">
                         <div class="input-container">
                             <span class="input-icon">🔒</span>
-                            <!-- HTML5 Pattern blockiert unsichere Passwörter vor dem Absenden -->
-                            <input 
-                                   id="password" 
-                                   name="password" 
-                                   placeholder="Geben Sie ein sicheres Passwort ein" 
+                            <input
+                                   type="password"
+                                   id="password"
+                                   name="password"
+                                   placeholder="Geben Sie ein sicheres Passwort ein"
                                    required
                                    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{12,}">
+                            <button type="button" id="toggle-pw-btn" class="toggle-pw-btn" onclick="togglePasswordVisibility()" style="background:none; border:none; cursor:pointer; padding-right:10px;">👁️</button>
                         </div>
                     </div>
-                    <div class="pw-actions">
+                    <div class="pw-actions" style="margin-top: 8px;">
                         <button type="button" class="btn-secondary" onclick="generateSecurePassword()">Passwort generieren</button>
                     </div>
                 </div>
@@ -120,323 +159,6 @@
     </div>
 </div>
 
-<style>
-:root {
-    --primary-color: #3498db;
-    --primary-dark: #2980b9;
-    --success-color: #2ecc71;
-    --error-color: #e74c3c;
-    --text-color: var(--ui-text);
-    --light-bg: #f9f9f9;
-    --border-radius: 8px;
-    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    --transition: all 0.3s ease;
-}
-
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: var(--light-bg);
-    margin: 0;
-    padding: 0;
-    color: var(--text-color);
-    line-height: 1.6;
-}
-
-.container {
-    max-width: 800px;
-    margin: 2rem auto;
-    padding: 0 1.5rem;
-}
-
-.header-section {
-    text-align: center;
-    margin-bottom: 2rem;
-    padding-bottom: 1.5rem;
-    border-bottom: 1px solid #eee;
-}
-
-.header-section h1 {
-    font-size: 2.5rem;
-    margin-bottom: 0.5rem;
-    color: var(--primary-color);
-}
-
-.subtitle {
-    font-size: 1.1rem;
-    color: #777;
-    margin-top: 0;
-}
-
-.content {
-    background-color: var(--ui-surface);
-    padding: 2rem;
-    border-radius: var(--border-radius);
-    box-shadow: var(--shadow);
-    margin-bottom: 2rem;
-}
-
-.form-card {
-    max-width: 500px;
-    margin: 0 auto;
-}
-
-.form-group {
-    margin-bottom: 1.5rem;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-    color: var(--primary-dark);
-}
-
-.input-container {
-    position: relative;
-}
-
-.input-icon {
-    position: absolute;
-    left: 1rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #aaa;
-    font-size: 1.2rem;
-}
-
-input[type="text"],
-input[type="password"],
-.form-select {
-    width: 100%;
-    padding: 0.8rem 1rem 0.8rem 3rem;
-    border: 1px solid #ddd;
-    border-radius: var(--border-radius);
-    font-size: 1rem;
-    transition: var(--transition);
-    box-sizing: border-box;
-}
-
-input[type="text"]:focus,
-input[type="password"]:focus,
-.form-select:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
-    outline: none;
-}
-
-.form-select {
-    padding-left: 1rem;
-}
-
-input::placeholder {
-    color: #aaa;
-}
-
-.form-actions {
-    margin-top: 2rem;
-}
-
-.action-button {
-    background-color: var(--primary-color);
-    color: white;
-    border: none;
-    padding: 0.8rem 1.5rem;
-    border-radius: 30px;
-    cursor: pointer;
-    font-weight: 600;
-    transition: var(--transition);
-    width: 100%;
-    font-size: 1rem;
-}
-
-.action-button:hover {
-    background-color: var(--primary-dark);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.register-button {
-    background-color: var(--success-color);
-}
-
-.register-button:hover {
-    background-color: #27ae60;
-}
-
-.flash-container {
-    margin-bottom: 1.5rem;
-}
-
-.flash {
-    display: flex;
-    align-items: center;
-    padding: 1rem;
-    margin-bottom: 1rem;
-    border-radius: var(--border-radius);
-    animation: fadeIn 0.3s ease-in-out;
-}
-
-.flash-icon {
-    margin-right: 0.8rem;
-    font-size: 1.2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.3);
-}
-
-.flash.success {
-    background-color: #d4edda;
-    color: #155724;
-    border-left: 4px solid var(--success-color);
-}
-
-.flash.error {
-    background-color: #f8d7da;
-    color: #721c24;
-    border-left: 4px solid var(--error-color);
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(-10px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-@media (max-width: 768px) {
-    .container {
-        padding: 0 1rem;
-        margin: 1rem auto;
-    }
-    
-    .content {
-        padding: 1.5rem;
-    }
-    
-    .header-section h1 {
-        font-size: 2rem;
-    }
-}
-
-.password-rules {
-    margin-bottom: 10px;
-    padding: 10px 12px;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    background: var(--ui-surface-soft);
-}
-
-.password-rules-title {
-    margin: 0 0 8px;
-    font-weight: 700;
-    color: #1f2937;
-    font-size: 0.92rem;
-}
-
-.password-rules ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.pw-rule {
-    position: relative;
-    padding-left: 22px;
-    margin: 5px 0;
-    color: #b91c1c;
-    font-size: 0.9rem;
-}
-
-.pw-rule::before {
-    content: '✗';
-    position: absolute;
-    left: 0;
-    top: 0;
-    font-weight: 700;
-}
-
-.pw-rule.ok {
-    color: #166534;
-}
-
-.pw-rule.ok::before {
-    content: '✓';
-}
-
-.anonymize-hint {
-    margin-top: 10px;
-    margin-bottom: 0;
-    background: #f0f9ff;
-    border: 1px solid #bae6fd;
-    border-radius: 8px;
-    padding: 10px 12px;
-    color: #0c4a6e;
-    font-size: 0.92rem;
-}
-
-.permission-panels {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 12px;
-}
-
-.permission-panel {
-    border: 1px solid #d1d5db;
-    border-radius: 8px;
-    padding: 10px;
-    background: var(--ui-surface-soft);
-}
-
-.permission-panel h4 {
-    margin: 0 0 8px;
-    font-size: 1rem;
-    color: #1f2937;
-}
-
-.permission-check {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin: 4px 0;
-    color: #1f2937;
-}
-
-/* Neue Styles für die Passwort-Erweiterungen */
-.pw-actions {
-    display: flex;
-    gap: 8px;
-    margin-top: 8px;
-}
-
-.btn-secondary {
-    padding: 8px 12px;
-    border: 1px solid #d1d5db;
-    background-color: #f3f4f6;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.9em;
-    transition: background-color 0.2s;
-}
-
-.btn-secondary:hover {
-    background-color: #e5e7eb;
-}
-
-.input-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-}
-
-.input-wrapper .input-container {
-    flex-grow: 1;
-    margin: 0;
-}
-</style>
-
 <script>
 // Hilfsfunktion: Umlaute auflösen und Sonderzeichen entfernen
 function cleanNameForUsername(text) {
@@ -462,7 +184,7 @@ function generateUsername() {
     const firstName = cleanNameForUsername(document.getElementById('name').value);
     const lastName = cleanNameForUsername(document.getElementById('last-name').value);
     let username = '';
-    
+
     if (firstName && lastName) {
         username = formatPart(firstName, 3) + formatPart(lastName, 3);
     } else if (firstName) {
@@ -470,7 +192,7 @@ function generateUsername() {
     } else if (lastName) {
         username = formatPart(lastName, 6);
     }
-    
+
     const usernameField = document.getElementById('username');
     if (usernameField) {
         usernameField.value = username || '';
@@ -503,11 +225,12 @@ function generateSecurePassword() {
 
     const pwField = document.getElementById('password');
     pwField.value = password;
-    
-    // Automatisch sichtbar machen, damit der User es kopieren kann
+
+    // Automatisch sichtbar machen
     pwField.type = 'text';
-    document.getElementById('toggle-pw-btn').textContent = '🙈';
-    
+    const toggleBtn = document.getElementById('toggle-pw-btn');
+    if (toggleBtn) toggleBtn.textContent = '🙈';
+
     updatePasswordRules();
 }
 
@@ -517,10 +240,10 @@ function togglePasswordVisibility() {
     const toggleBtn = document.getElementById('toggle-pw-btn');
     if (pwField.type === "password") {
         pwField.type = "text";
-        toggleBtn.textContent = '🙈';
+        if (toggleBtn) toggleBtn.textContent = '🙈';
     } else {
         pwField.type = "password";
-        toggleBtn.textContent = '👁️';
+        if (toggleBtn) toggleBtn.textContent = '👁️';
     }
 }
 
@@ -530,7 +253,7 @@ function updatePasswordRules() {
     if (!passwordInput) return;
 
     const value = String(passwordInput.value || '');
-    
+
     const setRuleState = (id, ok) => {
         const node = document.getElementById(id);
         if (node) node.classList.toggle('ok', !!ok);
@@ -592,4 +315,512 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 });
 </script>
+
+<style>
+:root {
+    --primary-color: #3498db;
+    --primary-dark: #2980b9;
+    --success-color: #2ecc71;
+    --success-dark: #27ae60;
+    --csv-color: #059669;
+    --csv-dark: #047857;
+    --error-color: #e74c3c;
+    --text-color: var(--ui-text, #1f2937);
+    --light-bg: #f9f9f9;
+    --border-radius: 8px;
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    --transition: all 0.3s ease;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: var(--ui-bg);
+    margin: 0;
+    padding: 0;
+    color: var(--text-color);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 800px;
+    margin: 2rem auto;
+    padding: 0 1.5rem;
+}
+
+.header-section {
+    text-align: center;
+    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid #eee;
+}
+
+.header-section h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+    color: var(--primary-color);
+}
+
+.subtitle {
+    font-size: 1.05rem;
+    color: #6b7280;
+    margin-top: 0;
+}
+
+.content {
+    background-color: var(--ui-surface, #ffffff);
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    margin-bottom: 2rem;
+}
+
+/* Karten-Layout für Einzel- & Massenregistrierung */
+.form-card {
+    max-width: 620px;
+    margin: 0 auto 2.5rem auto;
+    padding: 1.5rem;
+    background: var(--ui-surface-soft, #f9fafb);
+    border: 1px solid #e5e7eb;
+    border-radius: var(--border-radius);
+}
+
+.form-card:last-child {
+    margin-bottom: 0;
+}
+
+.form-card h2 {
+    font-size: 1.4rem;
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    color: #111827;
+}
+
+.form-group {
+    margin-bottom: 1.25rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.4rem;
+    font-weight: 600;
+    font-size: 0.95rem;
+    color: #374151;
+}
+
+.input-container {
+    position: relative;
+    width: 100%;
+}
+
+.input-icon {
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    font-size: 1.1rem;
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* Eingabefelder & Selects */
+input[type="text"],
+input[type="password"],
+input[type="file"],
+.form-select {
+    width: 100%;
+    padding: 0.75rem 1rem 0.75rem 2.8rem;
+    border: 1px solid #d1d5db;
+    border-radius: var(--border-radius);
+    font-size: 0.95rem;
+    background-color: #ffffff;
+    transition: var(--transition);
+    box-sizing: border-box;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="file"]:focus,
+.form-select:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+    outline: none;
+}
+
+.form-select {
+    padding-left: 1rem;
+    cursor: pointer;
+}
+
+/* Stylings für den CSV-Datei-Upload */
+input[type="file"] {
+    padding-left: 2.8rem;
+    cursor: pointer;
+}
+
+input[type="file"]::file-selector-button {
+    padding: 0.35rem 0.75rem;
+    border-radius: 4px;
+    border: 1px solid #d1d5db;
+    background: #f3f4f6;
+    color: #374151;
+    cursor: pointer;
+    margin-right: 12px;
+    font-weight: 500;
+    transition: var(--transition);
+}
+
+input[type="file"]::file-selector-button:hover {
+    background: #e5e7eb;
+}
+
+input::placeholder {
+    color: #9ca3af;
+}
+
+code {
+    background: #e0f2fe;
+    color: #0369a1;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: monospace;
+    font-size: 0.9em;
+}
+
+/* Buttons */
+.form-actions {
+    margin-top: 1.5rem;
+}
+
+.action-button {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    padding: 0.8rem 1.5rem;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    font-weight: 600;
+    transition: var(--transition);
+    width: 100%;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+.action-button:hover {
+    background-color: var(--primary-dark);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.register-button {
+    background-color: var(--success-color);
+}
+
+.register-button:hover {
+    background-color: var(--success-dark);
+}
+
+/* Toggle-Button für Passwort-Auge */
+.input-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.toggle-pw-btn {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.1rem;
+    padding: 4px;
+    z-index: 2;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+
+.toggle-pw-btn:hover {
+    opacity: 1;
+}
+
+/* Passwort-Regeln Box */
+.password-rules {
+    margin-bottom: 10px;
+    padding: 10px 12px;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    background: #ffffff;
+}
+
+.password-rules-title {
+    margin: 0 0 6px;
+    font-weight: 700;
+    color: #1f2937;
+    font-size: 0.88rem;
+}
+
+.password-rules ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.pw-rule {
+    position: relative;
+    padding-left: 20px;
+    margin: 4px 0;
+    color: #dc2626;
+    font-size: 0.85rem;
+}
+
+.pw-rule::before {
+    content: '✗';
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-weight: 700;
+}
+
+.pw-rule.ok {
+    color: #166534;
+}
+
+.pw-rule.ok::before {
+    content: '✓';
+}
+
+.pw-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.btn-secondary {
+    padding: 6px 12px;
+    border: 1px solid #d1d5db;
+    background-color: #ffffff;
+    color: #374151;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.88rem;
+    font-weight: 500;
+    transition: var(--transition);
+}
+
+.btn-secondary:hover {
+    background-color: #f3f4f6;
+    border-color: #9ca3af;
+}
+
+/* Hinweise & Rechte-Panels */
+.anonymize-hint {
+    margin-top: 8px;
+    margin-bottom: 0;
+    background: #f0f9ff;
+    border: 1px solid #bae6fd;
+    border-radius: 6px;
+    padding: 8px 12px;
+    color: #0369a1;
+    font-size: 0.88rem;
+}
+
+.permission-panels {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 12px;
+}
+
+.permission-panel {
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    padding: 12px;
+    background: #ffffff;
+}
+
+.permission-panel h4 {
+    margin: 0 0 8px;
+    font-size: 0.95rem;
+    color: #1f2937;
+}
+
+.permission-check {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 6px 0;
+    color: #374151;
+    font-size: 0.9rem;
+    cursor: pointer;
+}
+
+/* Flash Nachrichten */
+.flash-container {
+    margin-bottom: 1.5rem;
+}
+
+.flash {
+    display: flex;
+    align-items: center;
+    padding: 0.9rem 1rem;
+    margin-bottom: 1rem;
+    border-radius: var(--border-radius);
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+.flash-icon {
+    margin-right: 0.8rem;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.4);
+}
+
+.flash.success {
+    background-color: #d1fae5;
+    color: #065f46;
+    border-left: 4px solid var(--csv-color);
+}
+
+.flash.error {
+    background-color: #fee2e2;
+    color: #991b1b;
+    border-left: 4px solid var(--error-color);
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 0 0.75rem;
+        margin: 1rem auto;
+    }
+
+    .content {
+        padding: 1rem;
+    }
+
+    .form-card {
+        padding: 1rem;
+    }
+
+    .header-section h1 {
+        font-size: 1.8rem;
+    }
+}
+
+/* Registration-specific dark mode styling. */
+:root[data-theme="dark"] {
+    --light-bg: var(--ui-bg);
+    --text-color: var(--ui-text);
+    --shadow: var(--ui-shadow-md);
+}
+
+:root[data-theme="dark"] .header-section {
+    border-bottom-color: var(--ui-border);
+}
+
+:root[data-theme="dark"] .subtitle,
+:root[data-theme="dark"] .anonymize-hint,
+:root[data-theme="dark"] .form-group label,
+:root[data-theme="dark"] .permission-check,
+:root[data-theme="dark"] .input-icon {
+    color: var(--ui-text-muted) !important;
+}
+
+:root[data-theme="dark"] .content,
+:root[data-theme="dark"] .form-card,
+:root[data-theme="dark"] .permission-panel,
+:root[data-theme="dark"] .password-rules {
+    background: var(--ui-surface) !important;
+    background-color: var(--ui-surface) !important;
+    border-color: var(--ui-border) !important;
+    color: var(--ui-text) !important;
+    box-shadow: var(--ui-shadow-sm);
+}
+
+:root[data-theme="dark"] .form-card h2,
+:root[data-theme="dark"] .permission-panel h4,
+:root[data-theme="dark"] .password-rules-title {
+    color: var(--ui-title) !important;
+}
+
+:root[data-theme="dark"] input[type="text"],
+:root[data-theme="dark"] input[type="password"],
+:root[data-theme="dark"] input[type="file"],
+:root[data-theme="dark"] .form-select {
+    background: var(--ui-bg) !important;
+    background-color: var(--ui-bg) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+}
+
+:root[data-theme="dark"] input[type="text"]:focus,
+:root[data-theme="dark"] input[type="password"]:focus,
+:root[data-theme="dark"] input[type="file"]:focus,
+:root[data-theme="dark"] .form-select:focus {
+    border-color: #60a5fa !important;
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
+}
+
+:root[data-theme="dark"] input[type="file"]::file-selector-button {
+    background: var(--ui-surface-soft);
+    color: var(--ui-text);
+    border-color: var(--ui-border);
+}
+
+:root[data-theme="dark"] input[type="file"]::file-selector-button:hover,
+:root[data-theme="dark"] .btn-secondary:hover {
+    background: var(--ui-bg-accent);
+}
+
+:root[data-theme="dark"] .password-rules {
+    background: var(--ui-surface-soft) !important;
+}
+
+:root[data-theme="dark"] .pw-rule {
+    color: #fca5a5;
+}
+
+:root[data-theme="dark"] .pw-rule.ok {
+    color: #86efac;
+}
+
+:root[data-theme="dark"] .anonymize-hint {
+    background: #082f49 !important;
+    border-color: #38bdf8 !important;
+    color: #bae6fd !important;
+}
+
+:root[data-theme="dark"] .permission-panel {
+    background: var(--ui-surface-soft) !important;
+}
+
+:root[data-theme="dark"] .btn-secondary {
+    background: var(--ui-surface-soft);
+    color: var(--ui-text);
+    border-color: var(--ui-border);
+}
+
+:root[data-theme="dark"] .flash.success {
+    background: #123524;
+    color: #b7f7ce;
+}
+
+:root[data-theme="dark"] .flash.error {
+    background: #451a1a;
+    color: #fecaca;
+}
+</style>
 {% endblock %}

Web/templates/student_card_barcode_print.html

@@ -11,7 +11,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Schülerausweis - Barcode PDF Download</title>
+    <title>Bibliotheksausweis - Barcode PDF Download</title>
     <style>
         * {
             margin: 0;
@@ -123,7 +123,7 @@
 <body>
     <div class="container">
         <div class="icon">📇</div>
-        <h1>Schülerausweis-Download</h1>
+        <h1>Bibliotheksausweis-Download</h1>
         <p>Generieren Sie eine PDF mit Barcodes aller Bibliotheksausweise zum direkten Drucken</p>
 
         <div class="info-box">

Web/templates/student_cards_admin.html

@@ -18,14 +18,58 @@
         align-items: center;
         margin-bottom: 20px;
         flex-wrap: wrap;
-        gap: 10px;
+        gap: 15px;
+    }
+
+    /* Neu strukturiertes Layout für Formular & Import */
+    .dashboard-grid {
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        gap: 20px;
+        margin-bottom: 30px;
     }
 
     .student-card-form {
         background: var(--ui-bg);
         padding: 20px;
         border-radius: 8px;
-        margin-bottom: 30px;
+    }
+
+    .import-card {
+        border: 1px solid #dbe4ee;
+        border-radius: 8px;
+        padding: 20px;
+        background: #f8fbff;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .rollover-box {
+        background: #fff3cd;
+        border: 1px solid #ffeeba;
+        border-radius: 6px;
+        padding: 10px 12px;
+        margin-top: 4px;
+    }
+
+    .rollover-label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        font-size: 13px;
+        color: #856404;
+        font-weight: 700;
+        margin: 0;
+    }
+
+    .rollover-hint {
+        display: block;
+        margin-top: 4px;
+        font-size: 11px;
+        color: #856404;
+        line-height: 1.3;
     }
 
     .form-row {
@@ -35,6 +79,10 @@
         margin-bottom: 15px;
     }
 
+    .form-row.full-width {
+        grid-template-columns: 1fr;
+    }
+
     .form-group {
         display: flex;
         flex-direction: column;
@@ -47,7 +95,8 @@
     }
 
     .form-group input,
-    .form-group select {
+    .form-group select,
+    .form-group textarea {
         padding: 10px;
         border: 1px solid #ddd;
         border-radius: 4px;
@@ -55,7 +104,8 @@
     }
 
     .form-group input:focus,
-    .form-group select:focus {
+    .form-group select:focus,
+    .form-group textarea:focus {
         outline: none;
         border-color: #007bff;
         box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
@@ -65,14 +115,16 @@
         display: flex;
         gap: 10px;
         justify-content: flex-end;
+        margin-top: 10px;
     }
 
-    .form-actions button {
+    .form-actions button, .form-actions a {
         padding: 10px 20px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         font-weight: 600;
+        text-decoration: none;
     }
 
     .btn-save {
@@ -126,15 +178,18 @@
     .card-actions {
         display: flex;
         gap: 8px;
+        align-items: center;
     }
 
-    .btn-edit, .btn-delete {
+    .btn-edit, .btn-delete, .btn-export {
         padding: 6px 12px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         font-size: 13px;
         font-weight: 600;
+        text-decoration: none;
+        display: inline-block;
     }
 
     .btn-edit {
@@ -164,9 +219,6 @@
         font-weight: 600;
         text-decoration: none;
         display: inline-block;
-    }
-
-    .btn-print {
         background: #17a2b8;
         color: white;
     }
@@ -188,6 +240,7 @@
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
+        align-items: center;
     }
 
     .empty-state {
@@ -201,6 +254,94 @@
         margin: 10px 0;
     }
 
+    :root[data-theme="dark"] .student-card-form,
+    :root[data-theme="dark"] .import-card {
+        background: var(--ui-surface) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+        box-shadow: var(--ui-shadow-sm);
+    }
+
+    :root[data-theme="dark"] .import-card {
+        background: var(--ui-surface-soft) !important;
+    }
+
+    :root[data-theme="dark"] .import-card p,
+    :root[data-theme="dark"] .rollover-hint,
+    :root[data-theme="dark"] .empty-state,
+    :root[data-theme="dark"] .empty-state p {
+        color: var(--ui-text-muted) !important;
+    }
+
+    :root[data-theme="dark"] .rollover-box {
+        background: #422006 !important;
+        border-color: #f59e0b !important;
+    }
+
+    :root[data-theme="dark"] .rollover-label,
+    :root[data-theme="dark"] .rollover-hint {
+        color: #fde68a !important;
+    }
+
+    :root[data-theme="dark"] .form-group input,
+    :root[data-theme="dark"] .form-group select,
+    :root[data-theme="dark"] .form-group textarea,
+    :root[data-theme="dark"] .export-buttons form,
+    :root[data-theme="dark"] .export-buttons select {
+        background: var(--ui-bg) !important;
+        background-color: var(--ui-bg) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+    }
+
+    :root[data-theme="dark"] .form-group input:focus,
+    :root[data-theme="dark"] .form-group select:focus,
+    :root[data-theme="dark"] .form-group textarea:focus,
+    :root[data-theme="dark"] .export-buttons select:focus {
+        border-color: #60a5fa !important;
+        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22) !important;
+    }
+
+    :root[data-theme="dark"] .cards-table {
+        background: var(--ui-surface) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+        box-shadow: var(--ui-shadow-sm);
+    }
+
+    :root[data-theme="dark"] .cards-table thead {
+        background: #1d4ed8 !important;
+        color: #ffffff !important;
+    }
+
+    :root[data-theme="dark"] .cards-table th,
+    :root[data-theme="dark"] .cards-table td {
+        background: var(--ui-surface) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+    }
+
+    :root[data-theme="dark"] .cards-table tbody tr:hover td {
+        background: var(--ui-bg-accent) !important;
+    }
+
+    @media (max-width: 768px) {
+        .export-buttons {
+            width: 100%;
+        }
+
+        .export-buttons form,
+        .export-buttons > a {
+            flex: 1 1 100%;
+        }
+    }
+
+    @media (max-width: 992px) {
+        .dashboard-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+
     @media (max-width: 768px) {
         .form-row {
             grid-template-columns: 1fr;
@@ -222,96 +363,145 @@
 
         .card-actions {
             flex-direction: column;
+            align-items: stretch;
         }
     }
 </style>
 
 <div class="container">
+    <!-- Header mit Aktionen -->
     <div class="student-card-header">
         <div>
-            <h1>📚 Bibliotheksausweise (Bibliotek)</h1>
+            <h1 style="margin: 0;">📚 Bibliotheksausweise</h1>
         </div>
         <div class="export-buttons">
+            <form method="GET" action="{{ url_for('student_card_class_barcode_download') }}" style="display: inline-flex; gap: 5px; align-items: center; background: white; padding: 2px; border-radius: 4px; border: 1px solid #ddd;">
+                <select name="class_name" required style="border: none; padding: 8px; outline: none; font-size: 14px; background: transparent; cursor: pointer;">
+                    <option value="" disabled selected>-- Klasse wählen --</option>
+                    {% for cls in available_classes %}
+                        <option value="{{ cls }}">{{ cls }}</option>
+                    {% endfor %}
+                </select>
+                <button type="submit" class="btn-print" style="padding: 8px 12px; margin: 0;">📤 PDF</button>
+            </form>
+
             <a href="{{ url_for('student_card_barcode_download') }}" class="btn-print" style="background: #28a745;">📥 Alle Ausweise (PDF)</a>
             <a href="{{ url_for('library_admin') }}" class="btn btn-primary">← Zur Bibliotheks-Upload</a>
         </div>
     </div>
 
-    <div style="border:1px solid #dbe4ee; border-radius:8px; padding:14px; margin-bottom:16px; background:#f8fbff;">
-        <h3 style="margin:0 0 8px 0;">Excel-Import Bibliotheksausweise</h3>
-        <p style="margin:0 0 10px 0; color:#555;">Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch, zum Beispiel aus <strong>ASV (Amtliche Schuldaten)</strong>. Erkannt werden automatisch Spalten wie <strong>Name</strong>, <strong>Klasse</strong>, <strong>Ausweis-ID</strong>, <strong>Notizen</strong> und <strong>Standard-Ausleihdauer</strong>. Fehlt die Ausweis-ID, wird sie automatisch aus Name und Klasse erzeugt.</p>
-        <form method="POST" action="{{ url_for('upload_student_cards_excel') }}" enctype="multipart/form-data" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
-            <input type="file" name="student_cards_excel" accept=".xlsx,.csv" required>
-            <button type="submit" class="btn btn-secondary" name="excel_action" value="validate">Nur validieren</button>
-            <button type="submit" class="btn btn-primary" name="excel_action" value="import">Ausweise importieren</button>
-        </form>
-    </div>
+    <!-- Hauptbereich Grid: Formular + Import -->
+    <div class="dashboard-grid">
+        <!-- Add/Edit Form -->
+        <div class="student-card-form">
+            <h2 style="margin-top:0;">{% if edit_mode %}Ausweis bearbeiten{% else %}Neuer Bibliotheksausweis{% endif %}</h2>
 
-    <!-- Add/Edit Form -->
-    <div class="student-card-form">
-        <h2>{% if edit_mode %}Ausweis bearbeiten{% else %}Neuer Schülerausweis{% endif %}</h2>
-        
-        <form method="POST" action="{{ url_for('student_cards_admin') }}">
-            {% if edit_mode %}
-                <input type="hidden" name="action" value="edit">
-                <input type="hidden" name="card_id" value="{{ form_data.get('card_id', '') }}">
-            {% else %}
-                <input type="hidden" name="action" value="add">
-            {% endif %}
-
-            <div class="form-row">
-                <div class="form-group">
-                    <label for="ausweis_id">Ausweis-ID *</label>
-                    <input type="text" id="ausweis_id" name="ausweis_id" required 
-                           value="{{ form_data.get('ausweis_id', '') }}"
-                           placeholder="z.B. SIS2024001">
-                </div>
-                <div class="form-group">
-                    <label for="student_name">Schüler Name *</label>
-                    <input type="text" id="student_name" name="student_name" required
-                           value="{{ form_data.get('student_name', '') }}"
-                           placeholder="z.B. Max Mustermann">
-                </div>
-            </div>
-
-            <div class="form-row">
-                <div class="form-group">
-                    <label for="default_borrow_days">Standard Ausleihdauer (Tage) *</label>
-                    <input type="number" id="default_borrow_days" name="default_borrow_days" 
-                           min="1" max="365" required
-                           value="{{ form_data.get('default_borrow_days', config.get('default', 14)) }}">
-                </div>
-                <div class="form-group">
-                    <label for="class_name">Klasse</label>
-                    <input type="text" id="class_name" name="class_name"
-                           value="{{ form_data.get('class_name', '') }}"
-                           placeholder="z.B. 10A">
-                </div>
-            </div>
-
-            <div class="form-row">
-                <div class="form-group">
-                    <label for="notes">Notizen</label>
-                    <textarea id="notes" name="notes" rows="3" 
-                              placeholder="Optionale Notizen..."
-                              style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">{{ form_data.get('notes', '') }}</textarea>
-                </div>
-            </div>
-
-            <div class="form-actions">
+            <form method="POST" action="{{ url_for('student_cards_admin') }}">
                 {% if edit_mode %}
-                    <a href="{{ url_for('student_cards_admin') }}" class="btn-cancel">Abbrechen</a>
+                    <input type="hidden" name="action" value="edit">
+                    <input type="hidden" name="card_id" value="{{ form_data.get('card_id', '') }}">
+                {% else %}
+                    <input type="hidden" name="action" value="add">
                 {% endif %}
-                <button type="submit" class="btn-save">
-                    {% if edit_mode %}Speichern{% else %}Hinzufügen{% endif %}
-                </button>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="student_name">Schüler Name *</label>
+                        <input type="text" id="student_name" name="student_name" required
+                               value="{{ form_data.get('student_name', '') }}"
+                               placeholder="z.B. Max Mustermann">
+                    </div>
+                    <div class="form-group">
+                        <label for="class_name">Klasse</label>
+                        <input type="text" id="class_name" name="class_name" list="class_list"
+                               value="{{ form_data.get('class_name', '') }}"
+                               placeholder="z.B. 10A (Tippen oder Auswählen)">
+
+                        <datalist id="class_list">
+                            {% for cls in available_classes %}
+                                <option value="{{ cls }}">
+                            {% endfor %}
+                        </datalist>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="ausweis_id">Ausweis-ID</label>
+                        <input type="text" id="ausweis_id" name="ausweis_id"
+                               value="{{ form_data.get('ausweis_id', '') }}"
+                               placeholder="z.B. SIS2024001">
+                    </div>
+                    <div class="form-group">
+                        <label for="ausweis_ident">Lokales Differenzierungsmerkmal</label>
+                        <input type="text" id="ausweis_ident" name="ausweis_ident"
+                               value="{{ form_data.get('ausweis_ident', '') }}"
+                               placeholder="z.B. xw5oo123bbe">
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="default_borrow_days">Standard Ausleihdauer (Tage) *</label>
+                        <input type="number" id="default_borrow_days" name="default_borrow_days"
+                               min="1" max="365" required
+                               value="{{ form_data.get('default_borrow_days', config.get('default', 14)) }}">
+                    </div>
+                </div>
+
+                <div class="form-row full-width">
+                    <div class="form-group">
+                        <label for="notes">Notizen</label>
+                        <textarea id="notes" name="notes" rows="2"
+                                  placeholder="Optionale Notizen...">{{ form_data.get('notes', '') }}</textarea>
+                    </div>
+                </div>
+
+                <div class="form-actions">
+                    {% if edit_mode %}
+                        <a href="{{ url_for('student_cards_admin') }}" class="btn-cancel">Abbrechen</a>
+                    {% endif %}
+                    <button type="submit" class="btn-save">
+                        {% if edit_mode %}Speichern{% else %}Hinzufügen{% endif %}
+                    </button>
+                </div>
+            </form>
+        </div>
+
+        <!-- Excel-Import mit Abgleich (Rollover-Modus) -->
+        <div class="import-card">
+            <div>
+                <h3 style="margin:0 0 8px 0;">Excel-Import</h3>
+                <p style="margin:0 0 12px 0; color:#555; font-size:13px; line-height:1.4;">
+                    Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch (z. B. aus <strong>ASV</strong>). Erkannt werden Name, Nachname, Klasse, Ausweis-ID, lokales Differenzierungsmerkmal, Notizen & Ausleihdauer.
+                </p>
             </div>
-        </form>
+
+            <form method="POST" action="{{ url_for('upload_student_cards_excel') }}" enctype="multipart/form-data" style="display:flex; flex-direction:column; gap:12px;">
+                <input type="file" name="student_cards_excel" accept=".xlsx,.csv" required style="font-size:13px;">
+
+                <!-- Rollover / Abgleich Option -->
+                <div class="rollover-box">
+                    <label class="rollover-label">
+                        <input type="checkbox" name="rollover_mode" value="true">
+                        <span>Rollover-Modus (Abgleich / Destruktiv)</span>
+                    </label>
+                    <span class="rollover-hint">
+                        ⚠️ <strong>Warnung:</strong> Nicht mehr vorhandene Ausweise/Schüler werden beim Import entfernt bzw. abgeglichen.
+                    </span>
+                </div>
+
+                <div style="display:flex; gap:8px;">
+                    <button type="submit" class="btn btn-secondary" name="excel_action" value="validate" style="flex:1;">Validieren</button>
+                    <button type="submit" class="btn btn-primary" name="excel_action" value="import" style="flex:1;">Importieren</button>
+                </div>
+            </form>
+        </div>
     </div>
 
     <!-- Cards List -->
     <div>
-        <h2>Registrierte Ausweise</h2>
+        <h2 style="margin-bottom: 15px;">Registrierte Ausweise</h2>
         {% if student_cards %}
             <table class="cards-table">
                 <thead>
@@ -338,7 +528,7 @@
                                         <input type="hidden" name="edit" value="{{ card._id }}">
                                         <button type="submit" class="btn-edit">Bearbeiten</button>
                                     </form>
-                                    <a href="{{ url_for('student_card_single_barcode_download', card_id=card._id) }}" class="btn-export" style="text-decoration: none; display: inline-block;">📥 PDF</a>
+                                    <a href="{{ url_for('student_card_single_barcode_download', card_id=card._id) }}" class="btn-export">📥 PDF</a>
                                     <form method="POST" style="display: inline;" onsubmit="return confirm('Wirklich löschen?');">
                                         <input type="hidden" name="action" value="delete">
                                         <input type="hidden" name="card_id" value="{{ card._id }}">
@@ -364,5 +554,4 @@
     // All PDF exports now go through backend routes
 </script>
 
-{% endblock %}
-
+{% endblock %}

Web/templates/termin_configure.html

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

Web/templates/tutorial.html

@@ -280,7 +280,7 @@
         <button type="button" data-target-step="0">1. Startseite</button>
         <button type="button" data-target-step="1">2. {{ 'Artikel erfassen' if is_admin else 'Artikel finden' }}</button>
         {% if library_module_enabled %}
-        <button type="button" data-target-step="2">3. Bibliotek</button>
+        <button type="button" data-target-step="2">3. Bibliothek</button>
         {% endif %}
         <button type="button" data-target-step="{{ '3' if library_module_enabled else '2' }}">4. Alltag</button>
       </div>
@@ -341,7 +341,7 @@
 
       {% if library_module_enabled %}
       <article class="workflow-step" data-step-index="2" data-step-key="library">
-        <h3>Bibliotek-Bereich</h3>
+        <h3>Bibliothek-Bereich</h3>
         <p>Dieser Bereich ist speziell für Bücher und Medienausleihe.</p>
         <ul>
           {% if is_admin %}
@@ -358,7 +358,7 @@
         </ul>
 
         <div class="tutorial-actions">
-          <a class="btn btn-outline-primary btn-sm" href="{{ url_for('library_view') }}">Zur Bibliotek</a>
+          <a class="btn btn-outline-primary btn-sm" href="{{ url_for('library_view') }}">Zur Bibliothek</a>
           {% if is_admin %}
           <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('library_loans_admin') }}">Ausleihen ansehen</a>
           {% endif %}

Web/templates/upload_admin.html

@@ -11,59 +11,6 @@
 {% block title %}{{ page_title|default('Artikel hochladen') }} - Inventarsystem{% endblock %}
 
 {% block content %}
-{% if duplicate_data and duplicate_data.images %}
-<!-- Hidden server-side values for duplication, will be processed by JavaScript -->
-<div id="server-duplicate-data" 
-     data-name="{{ duplicate_data.name|default('') }}"
-     data-description="{{ duplicate_data.description|default('') }}"
-     data-location="{{ duplicate_data.location|default('') }}"
-     data-room="{{ duplicate_data.room|default('') }}"
-     data-year="{{ duplicate_data.year|default('') }}"
-     data-cost="{{ duplicate_data.cost|default('') }}"
-     data-images="{{ duplicate_data.images|tojson|safe }}"
-     data-filter1="{{ duplicate_data.filter1|tojson|safe if duplicate_data.filter1 else '[]' }}"
-     data-filter2="{{ duplicate_data.filter2|tojson|safe if duplicate_data.filter2 else '[]' }}"
-     data-filter3="{{ duplicate_data.filter3|tojson|safe if duplicate_data.filter3 else '[]' }}"
-     data-original-id="{{ duplicate_data.original_id|default('') }}"
-     style="display:none;">
-</div>
-<script>
-    // Pre-initialize duplicate data from server
-    var serverDuplicateData = null;
-    const dataElement = document.getElementById('server-duplicate-data');
-    if (dataElement) {
-        // Safely parse JSON arrays with error handling
-        function safeJsonParse(jsonStr, defaultValue = []) {
-            try {
-                if (!jsonStr) return defaultValue;
-                return JSON.parse(jsonStr);
-            } catch (e) {
-                console.error("Error parsing JSON:", e, "Value was:", jsonStr);
-                return defaultValue;
-            }
-        }
-        
-        // Get images data and log it for debugging
-        const imagesData = dataElement.getAttribute('data-images') || "[]";
-        console.log("Raw images data attribute:", imagesData);
-        
-        serverDuplicateData = {
-            name: dataElement.getAttribute('data-name') || "",
-            description: dataElement.getAttribute('data-description') || "",
-            location: dataElement.getAttribute('data-location') || "",
-            room: dataElement.getAttribute('data-room') || "",
-            year: dataElement.getAttribute('data-year') || "",
-            cost: dataElement.getAttribute('data-cost') || "",
-            images: safeJsonParse(imagesData),
-            filter1: safeJsonParse(dataElement.getAttribute('data-filter1')),
-            filter2: safeJsonParse(dataElement.getAttribute('data-filter2')),
-            filter3: safeJsonParse(dataElement.getAttribute('data-filter3')),
-            original_id: dataElement.getAttribute('data-original-id') || ""
-        };
-        console.log("Server-provided duplicate data:", serverDuplicateData);
-    }
-</script>
-{% endif %}
 
 <style>
     /* Book information display styles */
@@ -296,38 +243,11 @@
         color: #721c24 !important;
     }
 
-    /* Duplicate code popup styling */
-    .popup-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.6);
-        z-index: 10000;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        animation: overlayFadeIn 0.3s ease;
-    }
-
     @keyframes overlayFadeIn {
         from { opacity: 0; }
         to { opacity: 1; }
     }
 
-    .duplicate-code-popup {
-        background-color: white;
-        padding: 30px;
-        border-radius: 8px;
-        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-        max-width: 500px;
-        width: 90%;
-        text-align: center;
-        position: relative;
-        animation: popupSlideIn 0.3s ease;
-    }
-
     @keyframes popupSlideIn {
         from { 
             opacity: 0; 
@@ -727,12 +647,96 @@
         cursor: pointer;
         margin-left: 10px;
     }
+
+    /* Upload-specific dark mode surfaces and readable helper text. */
+    :root[data-theme="dark"] .upload-container {
+        background: var(--ui-surface) !important;
+        border: 1px solid var(--ui-border);
+        box-shadow: var(--ui-shadow-md);
+    }
+
+    :root[data-theme="dark"] .upload-import-panel,
+    :root[data-theme="dark"] #range_generator_group,
+    :root[data-theme="dark"] .filter-inputs,
+    :root[data-theme="dark"] .book-info-container,
+    :root[data-theme="dark"] .book-cover-preview,
+    :root[data-theme="dark"] .video-preview {
+        background: var(--ui-surface-soft) !important;
+        background-color: var(--ui-surface-soft) !important;
+        border-color: var(--ui-border) !important;
+        color: var(--ui-text) !important;
+    }
+
+    :root[data-theme="dark"] .upload-import-panel p,
+    :root[data-theme="dark"] .upload-import-panel small,
+    :root[data-theme="dark"] #isbn-scan-status,
+    :root[data-theme="dark"] #code4-scan-status,
+    :root[data-theme="dark"] .image-loading,
+    :root[data-theme="dark"] .book-info p,
+    :root[data-theme="dark"] .book-cover-caption {
+        color: var(--ui-text-muted) !important;
+    }
+
+    :root[data-theme="dark"] .upload-import-panel h3,
+    :root[data-theme="dark"] .book-info h4,
+    :root[data-theme="dark"] .book-description h5,
+    :root[data-theme="dark"] #range_generator_group label {
+        color: var(--ui-title) !important;
+    }
+
+    :root[data-theme="dark"] .upload-form input,
+    :root[data-theme="dark"] .upload-form select,
+    :root[data-theme="dark"] .upload-form textarea,
+    :root[data-theme="dark"] .filter-dropdown-select,
+    :root[data-theme="dark"] .upload-import-panel input[type="file"] {
+        background: var(--ui-bg) !important;
+        background-color: var(--ui-bg) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+    }
+
+    :root[data-theme="dark"] .upload-form input:focus,
+    :root[data-theme="dark"] .upload-form select:focus,
+    :root[data-theme="dark"] .upload-form textarea:focus,
+    :root[data-theme="dark"] .filter-dropdown-select:focus {
+        border-color: #60a5fa !important;
+        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
+    }
+
+    :root[data-theme="dark"] .book-info,
+    :root[data-theme="dark"] .book-description p,
+    :root[data-theme="dark"] .video-placeholder {
+        background: var(--ui-bg) !important;
+        background-color: var(--ui-bg) !important;
+        border-color: var(--ui-border) !important;
+    }
+
+    :root[data-theme="dark"] .success-message {
+        background: #123524 !important;
+        border-color: #2f9e62 !important;
+        color: #b7f7ce !important;
+    }
+
+    :root[data-theme="dark"] .error-message,
+    :root[data-theme="dark"] .error,
+    :root[data-theme="dark"] .error-message-container {
+        background: #451a1a !important;
+        border-color: #f87171 !important;
+        color: #fecaca !important;
+    }
+
+    :root[data-theme="dark"] .warning-message,
+    :root[data-theme="dark"] .warning {
+        background: #422006 !important;
+        border-color: #f59e0b !important;
+        color: #fde68a !important;
+    }
 </style>
 
 <div class="upload-container">
 
     {% if show_library_features %}
-    <div style="border:1px solid #dbe4ee; border-radius:8px; padding:14px; margin-bottom:16px; background:#f8fbff;">
+    <div class="upload-import-panel" style="border:1px solid #dbe4ee; border-radius:8px; padding:14px; margin-bottom:16px; background:#f8fbff;">
         <h3 style="margin:0 0 8px 0;">Excel-Import Bibliothek (Mehrere Bücher)</h3>
         <p style="margin:0 0 10px 0; color:#555;">Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch. Spalten werden automatisch erkannt (z.B. Name, Ort, Beschreibung, ISBN, Code, Anzahl). Für den Bibliotheksimport ist eine gültige ISBN je Zeile erforderlich.</p>
         <form method="POST" action="{{ url_for('upload_library_excel') }}" enctype="multipart/form-data" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
@@ -744,13 +748,12 @@
         </form>
     </div>
     {% else %}
-    <div style="border:1px solid #dbe4ee; border-radius:8px; padding:14px; margin-bottom:16px; background:#f8fbff;">
+    <div class="upload-import-panel" style="border:1px solid #dbe4ee; border-radius:8px; padding:14px; margin-bottom:16px; background:#f8fbff;">
         <h3 style="margin:0 0 8px 0;">Excel-Import Inventar (Mehrere Artikel)</h3>
         <p style="margin:0 0 10px 0; color:#555;">Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch. Spalten werden automatisch erkannt (z.B. Name, Ort, Beschreibung, Filter1/2/3, Kosten, Jahr, Code, Anzahl).</p>
         <form method="POST" action="{{ url_for('upload_inventory_excel') }}" enctype="multipart/form-data" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
             <input type="file" name="inventory_excel" accept=".xlsx,.csv" required>
             <button type="button" class="btn btn-link" onclick="downloadSampleCsv('inventory')">Beispiel-CSV herunterladen</button>
-            <button type="button" class="btn btn-outline-secondary" title="Format-Hilfe" onclick="showCsvHelp('inventory')">?</button>
             <button type="submit" class="btn btn-secondary" name="excel_action" value="validate">Nur validieren</button>
             <button type="submit" class="btn btn-primary" name="excel_action" value="import">Inventar importieren</button>
         </form>
@@ -761,6 +764,21 @@
         <h1>{{ page_title|default('Artikel hochladen') }}</h1>
         <form method="POST" action="{{ url_for('upload_item') }}" enctype="multipart/form-data">
             <input type="hidden" name="upload_mode" value="{{ upload_mode|default('item') }}">
+
+            {% if show_library_features %}
+            <div class="form-group">
+                <label for="isbn">ISBN/Barcode (für Bild-Suche):</label>
+                <div class="isbn-input-group">
+                    <input type="text" id="isbn" name="isbn" placeholder="ISBN oder Barcode eingeben..." required>
+                    <button type="button" id="scan-isbn-btn" class="fetch-isbn-button">Barcode scannen</button>
+                    <button type="button" class="fetch-isbn-button" onclick="fetchBookInfo('upload')">Informationen abrufen</button>
+                </div>
+                <div id="isbn-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;"></div>
+                <small id="isbn-scan-status" style="display:block; color:#666; margin-top:6px;">Scannen oder manuell eingeben. Gültige ISBNs helfen beim Abruf von Buchdaten, andere Codes werden trotzdem akzeptiert.</small>
+                <div id="book-info-container" class="book-info-container"></div>
+            </div>
+            {% endif %}
+
             <div class="form-group">
                 <label for="name">Name:</label>
                 <input type="text" id="name" name="name" required>
@@ -784,7 +802,44 @@
                 <label for="beschreibung">Beschreibung:</label>
                 <textarea id="beschreibung" name="beschreibung" required></textarea>
             </div>
-            
+
+            <div class="form-group">
+                <label for="scan_mode">Erfassungs-Modus:</label>
+                <select id="scan_mode" name="scan_mode" class="form-control" onchange="toggleScanMode()">
+                    <option value="single">Einzel-Code (Scanner stoppt nach 1 Scan) ↓ </option>
+                    <option value="continuous">Fortlaufend scannen (Mehrere Codes nacheinander)</option>
+                    <option value="range">Code-Bereich generieren (z.B. ABC-001 bis ABC-010)</option>
+                </select>
+            </div>
+
+            <div id="range_generator_group" class="form-group" style="display:none; background: #f9f9f9; padding: 15px; border-radius: 5px; border: 1px solid #ddd; margin-bottom: 15px;">
+                <label style="font-weight: bold;">Code-Bereich automatisch generieren:</label>
+                <div style="display: flex; gap: 10px; margin-bottom: 10px; align-items: center;">
+                    <input type="text" id="range_prefix" placeholder="Präfix optional (z.B. IT-)" class="form-control" style="flex: 2;">
+                    <input type="number" id="range_start" placeholder="Start (z.B. 1)" class="form-control" style="flex: 1;">
+                    <span style="font-weight: bold;">bis</span>
+                    <input type="text" id="range_end" placeholder="Ende (z.B. 020)" class="form-control" style="flex: 1;">
+                </div>
+                <small style="display:block; color:#666; margin-bottom: 10px;">Tipp: Der Präfix ist optional. Die Anzahl der Ziffern im "Ende"-Feld bestimmt die führenden Nullen (z.B. Ende "050" macht aus Start "1" einen "001").</small>
+                <button type="button" class="btn btn-secondary" onclick="generateCodeRange()">Bereich generieren & einfügen</button>
+            </div>
+
+            <div class="form-group" id="primary_code_group">
+                <label for="code_4">Basis-Code</label>
+                <div style="display: flex; gap: 10px;">
+                    <input type="text" id="code_4" name="code_4" class="form-control" placeholder="Haupt-Barcode" required>
+                    <button type="button" id="scan-code4-btn" class="btn btn-primary">Barcode scannen</button>
+                </div>
+                <div id="code4-scanner" style="display:none; margin-top: 10px;"></div>
+                <small id="code4-scan-status" class="form-text text-muted"></small>
+            </div>
+
+            <div class="form-group" id="individual_codes_group">
+                <label for="individual_codes">Weitere Einzelcodes (je Zeile ein Code)</label>
+                <textarea id="individual_codes" name="individual_codes" rows="6" placeholder="z.B.&#10;ABC-001&#10;ABC-002" class="form-control"></textarea>
+                <small style="display:block; color:#666; margin-top: 5px;">Bei Anzahl > 1 können hier individuelle Codes pro Item gesetzt werden. Der Scanner setzt immer zuerst den Basis-Code im Feld oben; weitere Einzelcodes werden hier angehängt.</small>
+            </div>
+
             {% if show_library_features %}
             <!-- Library Mode: Single Customizable Filter -->
             <div class="filter-inputs">
@@ -800,16 +855,16 @@
                     </select>
                     <small style="display:block; color:#666;">Wählen Sie einen Medientyp aus zur Klassifizierung.</small>
                 </div>
-                <h3>Kategorie/Typ:</h3>
+                <h3>Kategorie/Typ/Fach:</h3>
                 <div class="form-group">
-                    <input type="text" name="library_category" id="library_category" placeholder="z.B. Belletristik, Sachbücher, Nachschlagewerke, etc.">
+                    <input type="text" name="library_category" id="library_category" placeholder="z.B. Belletristik, Sachbücher, Nachschlagewerke, etc. (optional)">
                     <small style="display:block; color:#666;">Geben Sie hier eine beliebige Kategorie ein zur freien Klassifizierung.</small>
                 </div>
             </div>
             {% else %}
             <!-- Normal Item Mode: Standard Filters -->
             <div class="filter-inputs">
-                <h3>Unterrichtsfach:</h3>
+                <h3>{{ filter_names.get('1', 'Jahrgangsstufe') }}</h3>
                 <div class="multi-filter">
                     <div class="form-group">
                         <label for="filter1-1">Wert 1:</label>
@@ -841,7 +896,7 @@
                     </div>
                 </div>
                 
-                <h3>Jahrgangsstufe:</h3>
+                <h3>{{ filter_names.get('2', 'Fachgebiet') }}</h3>
                 <div class="multi-filter">
                     <div class="form-group">
                         <label for="filter2-1">Wert 1:</label>
@@ -864,7 +919,7 @@
                             <!-- Options will be loaded by JavaScript -->
                         </select>
                     </div>
-                    <div class="formupload_admin-group">
+                    <div class="form-group">
                         <label for="filter2-4">Wert 4:</label>
                         <select id="filter2-4" name="filter2" class="filter-dropdown-select">
                             <option value="">-- Optional --</option>
@@ -873,7 +928,7 @@
                     </div>
                 </div>
                 
-                <h3>Schlagwort:</h3>
+                <h3>{{ filter_names.get('3', 'Schlagwort') }}</h3>
                 <div class="multi-filter">
                     <div class="form-group">
                         <label for="filter3-1">Wert 1:</label>
@@ -902,71 +957,24 @@
                 <label for="anschaffungskosten">Anschaffungskosten (€)</label>
                 <input id="anschaffungskosten" name="anschaffungskosten">
             </div>
-           <div class="form-group">
-                <label for="scan_mode">Erfassungs-Modus:</label>
-                <select id="scan_mode" name="scan_mode" class="form-control" onchange="toggleScanMode()">
-                    <option value="single">Einzel-Code (Scanner stoppt nach 1 Scan)</option>
-                    <option value="continuous">Fortlaufend scannen (Mehrere Codes nacheinander)</option>
-                    <option value="range">Code-Bereich generieren (z.B. ABC-001 bis ABC-010)</option>
-                </select>
-            </div>
 
-            <div id="range_generator_group" class="form-group" style="display:none; background: #f9f9f9; padding: 15px; border-radius: 5px; border: 1px solid #ddd; margin-bottom: 15px;">
-                <label style="font-weight: bold;">Code-Bereich automatisch generieren:</label>
-                <div style="display: flex; gap: 10px; margin-bottom: 10px; align-items: center;">
-                    <input type="text" id="range_prefix" placeholder="Präfix (z.B. IT-)" class="form-control" style="flex: 2;">
-                    <input type="number" id="range_start" placeholder="Start (z.B. 1)" class="form-control" style="flex: 1;">
-                    <span style="font-weight: bold;">bis</span>
-                    <input type="text" id="range_end" placeholder="Ende (z.B. 020)" class="form-control" style="flex: 1;">
-                </div>
-                <small style="display:block; color:#666; margin-bottom: 10px;">Tipp: Die Anzahl der Ziffern im "Ende"-Feld bestimmt die führenden Nullen (z.B. Ende "050" macht aus Start "1" einen "001").</small>
-                <button type="button" class="btn btn-secondary" onclick="generateCodeRange()">Bereich generieren & einfügen</button>
-            </div>
 
-            <div class="form-group" id="primary_code_group">
-                <label for="code_4">Basis-Code</label>
-                <div style="display: flex; gap: 10px;">
-                    <input type="text" id="code_4" name="code_4" class="form-control" placeholder="Haupt-Barcode" required>
-                    <button type="button" id="scan-code4-btn" class="btn btn-primary">Barcode scannen</button>
-                </div>
-                <div id="code4-scanner" style="display:none; margin-top: 10px;"></div>
-                <small id="code4-scan-status" class="form-text text-muted"></small>
+            <div class="form-group">
+                <label>Buchcover (automatisch):</label>
+                <div id="book-cover-preview-container"></div>
             </div>
-
-            <div class="form-group" id="individual_codes_group">
-                <label for="individual_codes">Weitere Einzelcodes (je Zeile ein Code)</label>
-                <textarea id="individual_codes" name="individual_codes" rows="6" placeholder="z.B.&#10;ABC-001&#10;ABC-002" class="form-control"></textarea>
-                <small style="display:block; color:#666; margin-top: 5px;">Bei Anzahl > 1 können hier individuelle Codes pro Item gesetzt werden. Der Scanner setzt immer zuerst den Basis-Code im Feld oben; weitere Einzelcodes werden hier angehängt.</small>
-            </div>
-            <!-- Image upload (hidden for library mode) -->
-            <div class="form-group" {% if show_library_features %}style="display:none;"{% endif %}>
-                <label for="images">Bilder/Videos:</label>
-                <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif, .mp4, .mov, .avi, .mkv, .webm, .flv, .m4v, .3gp" multiple>
-                <div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>
-                <!-- Add image preview area -->
+            <div class="form-group">
+                <label for="images"> Bilder hinzufügen:</label>
+                <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif" multiple>
+                <div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF</div>
                 <div class="image-preview-container" id="image-preview-container"></div>
             </div>
-            
-            <!-- ISBN fields (library page only) -->
-            {% if show_library_features %}
-            <div class="form-group">
-                <label for="isbn">ISBN/Barcode (für Bild-Suche):</label>
-                <div class="isbn-input-group">
-                    <input type="text" id="isbn" name="isbn" placeholder="ISBN oder Barcode eingeben..." required>
-                    <button type="button" id="scan-isbn-btn" class="fetch-isbn-button">Barcode scannen</button>
-                    <button type="button" class="fetch-isbn-button" onclick="fetchBookInfo('upload')">Informationen abrufen</button>
-                </div>
-                <div id="isbn-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;"></div>
-                <small id="isbn-scan-status" style="display:block; color:#666; margin-top:6px;">Scannen oder manuell eingeben. Gültige ISBNs helfen beim Abruf von Buchdaten, andere Codes werden trotzdem akzeptiert.</small>
-                <div id="book-info-container" class="book-info-container"></div>
-            </div>
-            
+
             <div class="form-group">
                 <label for="reservierbar" style="display:inline-block; width:auto; margin-right:10px;">Reservierbar:</label>
                 <input type="checkbox" id="reservierbar" name="reservierbar" style="width:auto;">
                 <small style="display:block; color:#666;">Wenn deaktiviert, kann der Artikel nicht im Voraus reserviert werden (Sofort-Ausleihe bleibt möglich).</small>
             </div>
-            {% endif %}
 
             <button type="submit" class="submit-button">{{ 'Bücher hochladen' if show_library_features else 'Artikel hochladen' }}</button>
         </form>
@@ -1023,6 +1031,90 @@
 <script>
     const libraryModuleEnabled = {{ 'true' if library_module_enabled else 'false' }};
 
+    function getFocusableFormFields(form) {
+        if (!form) return [];
+        return Array.from(form.querySelectorAll('input, select, textarea, button'))
+            .filter((element) => {
+                if (element.disabled || element.getAttribute('aria-hidden') === 'true') return false;
+                const style = window.getComputedStyle(element);
+                if (style.display === 'none' || style.visibility === 'hidden') return false;
+                const tagName = element.tagName.toLowerCase();
+                const type = (element.type || '').toLowerCase();
+                return tagName !== 'button' || type !== 'button';
+            });
+    }
+
+    function focusNextFormField(currentField) {
+        const form = currentField && currentField.form ? currentField.form : null;
+        const fields = getFocusableFormFields(form || document);
+        const currentIndex = fields.indexOf(currentField);
+
+        if (currentIndex >= 0) {
+            for (let i = currentIndex + 1; i < fields.length; i++) {
+                const nextField = fields[i];
+                const nextStyle = window.getComputedStyle(nextField);
+                if (nextStyle.display !== 'none' && nextStyle.visibility !== 'hidden') {
+                    nextField.focus();
+                    if (nextField.tagName.toLowerCase() === 'select') {
+                        nextField.click();
+                    }
+                    return true;
+                }
+            }
+        }
+
+        if (form) {
+            const submitButton = form.querySelector('button[type="submit"]');
+            if (submitButton) {
+                submitButton.focus();
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    function handleIsbnLookupFromScanner() {
+        const isbnField = document.getElementById('isbn');
+        if (!isbnField) return false;
+
+        const normalizedIsbn = typeof normalizeIsbnClient === 'function' ? normalizeIsbnClient(isbnField.value) : isbnField.value.trim();
+        if (!normalizedIsbn) return false;
+
+        if (typeof updateIsbnLiveValidation === 'function') {
+            updateIsbnLiveValidation();
+        }
+
+        if (typeof fetchBookInfo === 'function') {
+            fetchBookInfo('upload');
+        }
+
+        return true;
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        document.querySelectorAll('form').forEach(function (form) {
+            form.addEventListener('keydown', function (event) {
+                const target = event.target;
+                if (event.key !== 'Enter') return;
+                if (!target || target.tagName === 'TEXTAREA' && !event.shiftKey) return;
+                const tagName = target.tagName.toLowerCase();
+                const type = (target.type || '').toLowerCase();
+                if (!['input', 'select', 'textarea'].includes(tagName)) return;
+                if (['button', 'submit', 'reset', 'file', 'checkbox', 'radio', 'hidden'].includes(type)) return;
+
+                event.preventDefault();
+
+                if (target.id === 'isbn' || target.name === 'isbn') {
+                    handleIsbnLookupFromScanner();
+                    return;
+                }
+
+                focusNextFormField(target);
+            });
+        });
+    });
+
     // Function to check if a file is a video
     function isVideoFile(filename) {
         const videoExtensions = ['.mp4', '.mov', '.avi', '.mkv', '.webm', '.flv', '.m4v', '.3gp'];
@@ -1194,7 +1286,7 @@
         let generatedCodes = [];
         for (let i = start; i <= end; i++) {
             let numStr = i.toString().padStart(paddingLength, '0');
-            generatedCodes.push(`${prefix}${numStr}`);
+            generatedCodes.push(prefix ? `${prefix}${numStr}` : numStr);
         }
 
         const codeField = document.getElementById('code_4');
@@ -1384,10 +1476,32 @@
             scanModeSelect.addEventListener('change', toggleScanMode);
         }
 
-        // 4. ISBN Live-Validierung
+        // 4. ISBN Live-Validierung und automatische Abfrage nach Scan/Enter
         const isbnInput = document.getElementById('isbn');
-        if (isbnInput && typeof updateIsbnLiveValidation === 'function') {
-            isbnInput.addEventListener('input', updateIsbnLiveValidation);
+        if (isbnInput) {
+            if (typeof updateIsbnLiveValidation === 'function') {
+                isbnInput.addEventListener('input', updateIsbnLiveValidation);
+            }
+
+            let isbnLookupTimer = null;
+            isbnInput.addEventListener('input', function () {
+                clearTimeout(isbnLookupTimer);
+                const normalizedIsbn = typeof normalizeIsbnClient === 'function' ? normalizeIsbnClient(isbnInput.value) : isbnInput.value.trim();
+                if (normalizedIsbn) {
+                    isbnLookupTimer = setTimeout(function () {
+                        handleIsbnLookupFromScanner();
+                    }, 250);
+                }
+            });
+
+            isbnInput.addEventListener('change', function () {
+                if (typeof normalizeIsbnClient === 'function') {
+                    const normalizedIsbn = normalizeIsbnClient(isbnInput.value);
+                    if (normalizedIsbn) {
+                        handleIsbnLookupFromScanner();
+                    }
+                }
+            });
         }
     });
     // Load predefined filter values for dropdowns
@@ -1500,22 +1614,22 @@
         }
         const isbnField = document.getElementById('isbn');
         const infoContainer = document.getElementById('book-info-container');
-        
+
         if (!isbnField || !infoContainer) {
             alert('Fehler: Erforderliche Formularelemente nicht gefunden.');
             return;
         }
-        
+
         const isbn = normalizeIsbnClient(isbnField.value);
-        
+
         if (!isbn) {
             infoContainer.innerHTML = '<div class="error-message">Bitte geben Sie eine ISBN oder einen Barcode ein.</div>';
             return;
         }
-        
+
         // Show loading indicator
         infoContainer.innerHTML = '<div class="loading-spinner">Informationen werden abgerufen...</div>';
-        
+
         // Make API request to fetch book data
         fetch(`/fetch_book_info/${isbn}`)
             .then(response => {
@@ -1533,10 +1647,10 @@
                     infoContainer.innerHTML = `<div class="error-message">${data.error}</div>`;
                     return;
                 }
-                
+
                 // Store book data globally for import functionality
                 currentBookData = data;
-                
+
                 // Display book information with import button
                 infoContainer.innerHTML = `
                     <div class="book-info">
@@ -1571,23 +1685,23 @@
             alert('Keine Buchdaten verfügbar zum Import.');
             return;
         }
-        
+
         // Get form fields
         const nameField = document.getElementById('name');
         const descriptionField = document.getElementById('beschreibung');
         const priceField = document.getElementById('anschaffungskosten'); // <-- NEU
-        
+
         if (!nameField || !descriptionField) {
             alert('Fehler: Formularfelder nicht gefunden.');
             return;
         }
-        
+
         // Generate book title
         let bookTitle = currentBookData.title || '';
         if (currentBookData.authors && currentBookData.authors !== 'Unknown Author') {
             bookTitle += ` - ${currentBookData.authors}`;
         }
-        
+
         // Generate description
         let description = '';
         if (currentBookData.description && currentBookData.description !== 'No description available') {
@@ -1608,11 +1722,11 @@
                 description += `\nSeiten: ${currentBookData.pageCount}`;
             }
         }
-        
+
         // Import the data into form fields
         nameField.value = bookTitle;
         descriptionField.value = description;
-        
+
         // Preis in das Formularfeld eintragen
         if (priceField && currentBookData.price !== null && currentBookData.price !== undefined) {
             // Wandelt den Float (z.B. 12.25) in einen String mit Komma (12,25) um
@@ -1624,14 +1738,14 @@
         if (currentBookData.thumbnail) {
             downloadBookCover(currentBookData.thumbnail);
         }
-        
+
         // Show success message
         const infoContainer = document.getElementById('book-info-container');
         const successMessage = document.createElement('div');
         successMessage.className = 'import-success-message';
         successMessage.textContent = 'Buchdaten erfolgreich in das Formular übernommen!';
         infoContainer.appendChild(successMessage);
-        
+
         // Remove success message after 3 seconds
         setTimeout(() => {
             if (successMessage.parentNode) {
@@ -1640,23 +1754,24 @@
         }, 3000);
     }
 
-    // Function to download book cover image
     function downloadBookCover(imageUrl) {
         if (!imageUrl) {
             console.log('No image URL provided');
             return;
         }
-        
-        // Show loading indicator for image download
-        const imagePreviewContainer = document.getElementById('image-preview-container');
-        if (imagePreviewContainer) {
-            const loadingDiv = document.createElement('div');
-            loadingDiv.className = 'image-loading';
-            loadingDiv.innerHTML = '<div class="loading-spinner">Buchcover wird heruntergeladen...</div>';
-            imagePreviewContainer.appendChild(loadingDiv);
+
+        const coverPreviewContainer = document.getElementById('book-cover-preview-container');
+
+        if (!coverPreviewContainer) {
+            console.error('Error: "book-cover-preview-container" not found in the DOM.');
+            return;
         }
-        
-        // Download the image via backend
+
+        const loadingDiv = document.createElement('div');
+        loadingDiv.className = 'image-loading';
+        loadingDiv.innerHTML = '<div class="loading-spinner">Buchcover wird heruntergeladen...</div>';
+        coverPreviewContainer.appendChild(loadingDiv);
+
         fetch('/download_book_cover', {
             method: 'POST',
             headers: {
@@ -1664,78 +1779,63 @@
             },
             body: JSON.stringify({ url: imageUrl })
         })
-        .then(response => response.json())
-        .then(data => {
-            // Remove loading indicator
-            const loadingDiv = imagePreviewContainer?.querySelector('.image-loading');
-            if (loadingDiv) {
-                loadingDiv.remove();
-            }
-            
-            if (data.success) {
-                // Create a preview of the downloaded image
-                const imagePreview = document.createElement('div');
-                imagePreview.className = 'book-cover-preview';
-                imagePreview.innerHTML = `
-                    <div class="preview-item">
-                        <img src="{{ url_for('uploaded_file', filename='') }}${data.filename}" 
-                             alt="Buchcover" class="book-cover-thumbnail">
-                        <p class="book-cover-caption">Buchcover automatisch heruntergeladen</p>
-                        <input type="hidden" name="book_cover_image" value="${data.filename}">
-                        <button type="button" onclick="removeBookCover(this)" 
-                                class="remove-book-cover-button">
-                            Entfernen
-                        </button>
-                    </div>
-                `;
-                
-                if (imagePreviewContainer) {
-                    imagePreviewContainer.appendChild(imagePreview);
+            .then(response => response.json())
+            .then(data => {
+                const currentLoadingDiv = coverPreviewContainer.querySelector('.image-loading');
+                if (currentLoadingDiv) {
+                    currentLoadingDiv.remove();
                 }
-                
-                console.log('Book cover downloaded successfully:', data.filename);
-            } else {
-                console.error('Failed to download book cover:', data.error);
-                // Show error message to user
-                if (imagePreviewContainer) {
-                    const errorDiv = document.createElement('div');
-                    errorDiv.className = 'error-message';
-                    errorDiv.textContent = 'Fehler beim Herunterladen des Buchcovers: ' + data.error;
-                    errorDiv.style.fontSize = '0.8em';
-                    errorDiv.style.padding = '5px';
-                    errorDiv.style.marginTop = '5px';
-                    imagePreviewContainer.appendChild(errorDiv);
-                    
-                    // Remove error message after 5 seconds
-                    setTimeout(() => errorDiv.remove(), 5000);
+
+                if (data.success) {
+                    coverPreviewContainer.innerHTML = '';
+
+                    const imagePreview = document.createElement('div');
+                    imagePreview.className = 'book-cover-preview';
+                    imagePreview.innerHTML = `
+                <div class="preview-item">
+                    <img src="/uploads/${data.filename}"
+                         alt="Buchcover" class="book-cover-thumbnail" style="max-width: 150px; border-radius: 4px;">
+                    <p class="book-cover-caption" style="font-size: 0.9em; color: #555;">Buchcover automatisch heruntergeladen</p>
+                    <input type="hidden" name="book_cover_image" value="${data.filename}">
+                    <button type="button" onclick="removeBookCover(this)"
+                            class="remove-book-cover-button btn btn-sm btn-danger">
+                        Entfernen
+                    </button>
+                </div>
+            `;
+
+                    coverPreviewContainer.appendChild(imagePreview);
+                    console.log('Book cover downloaded successfully:', data.filename);
+                } else {
+                    console.error('Failed to download book cover:', data.error);
+                    showCoverError(coverPreviewContainer, 'Fehler beim Herunterladen des Buchcovers: ' + data.error);
                 }
-            }
-        })
-        .catch(error => {
-            console.error('Error downloading book cover:', error);
-            // Remove loading indicator
-            const loadingDiv = imagePreviewContainer?.querySelector('.image-loading');
-            if (loadingDiv) {
-                loadingDiv.remove();
-            }
-            
-            // Show error message
-            if (imagePreviewContainer) {
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'error-message';
-                errorDiv.textContent = 'Netzwerkfehler beim Herunterladen des Buchcovers';
-                errorDiv.style.fontSize = '0.8em';
-                errorDiv.style.padding = '5px';
-                errorDiv.style.marginTop = '5px';
-                imagePreviewContainer.appendChild(errorDiv);
-                
-                // Remove error message after 5 seconds
-                setTimeout(() => errorDiv.remove(), 5000);
-            }
-        });
+            })
+            .catch(error => {
+                console.error('Error downloading book cover:', error);
+
+                const currentLoadingDiv = coverPreviewContainer.querySelector('.image-loading');
+                if (currentLoadingDiv) {
+                    currentLoadingDiv.remove();
+                }
+
+                showCoverError(coverPreviewContainer, 'Netzwerkfehler beim Herunterladen des Buchcovers');
+            });
     }
-    
-    // Function to remove downloaded book cover
+
+    function showCoverError(container, message) {
+        const errorDiv = document.createElement('div');
+        errorDiv.className = 'error-message';
+        errorDiv.textContent = message;
+        errorDiv.style.fontSize = '0.8em';
+        errorDiv.style.color = 'red';
+        errorDiv.style.padding = '5px';
+        errorDiv.style.marginTop = '5px';
+        container.appendChild(errorDiv);
+
+        setTimeout(() => errorDiv.remove(), 5000);
+    }
+
     function removeBookCover(button) {
         const previewItem = button.closest('.preview-item');
         if (previewItem) {
@@ -1743,7 +1843,6 @@
         }
     }
 
-    // Code validation functions
     function checkCodeUnique(code, excludeId, callback) {
         if (!code || code.trim() === '') {
             callback(true);
@@ -1769,11 +1868,11 @@
         if (existingPopup) {
             existingPopup.remove();
         }
-        
+
         // Create popup overlay
         const overlay = document.createElement('div');
         overlay.className = 'popup-overlay';
-        
+
         // Create popup content
         overlay.innerHTML = `
             <div class="duplicate-code-popup">
@@ -1786,9 +1885,9 @@
                 <button class="popup-close-button" onclick="this.closest('.popup-overlay').remove()">Verstanden</button>
             </div>
         `;
-        
+
         document.body.appendChild(overlay);
-        
+
         // Auto-remove after 10 seconds
         setTimeout(() => {
             if (overlay.parentNode) {
@@ -1828,28 +1927,25 @@
     function setupImagePreview() {
         const imageInput = document.getElementById('images');
         const previewContainer = document.getElementById('image-preview-container');
-        
+
         if (imageInput && previewContainer) {
             imageInput.addEventListener('change', function(e) {
                 previewContainer.innerHTML = '';
-                
+
                 const files = e.target.files;
-                
-                // Validate file types before preview
-                const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 
-                                    'video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/x-matroska', 
-                                    'video/webm', 'video/x-flv', 'video/mp4', 'video/3gpp'];
-                let hasInvalidFile = false;
-                
+
+                // Validate file types before preview (Strictly Images)
+                const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+
                 for (let i = 0; i < files.length; i++) {
                     if (!allowedTypes.includes(files[i].type)) {
-                        hasInvalidFile = true;
                         // Clear the file input to prevent submission
                         imageInput.value = '';
-                        previewContainer.innerHTML = '<div class="error-message">Fehler: Datei "' + files[i].name + '" hat ein nicht unterstütztes Format. Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>';
+                        previewContainer.innerHTML = '<div class="error-message">Fehler: Datei "' + files[i].name + '" hat ein nicht unterstütztes Format. Erlaubte Formate: JPG, JPEG, PNG, GIF</div>';
                         return; // Stop processing
                     }
                 }
+
                 for (let i = 0; i < files.length; i++) {
                     const file = files[i];
                     if (file.type.startsWith('image/')) {
@@ -1864,17 +1960,6 @@
                             previewContainer.appendChild(preview);
                         };
                         reader.readAsDataURL(file);
-                    } else if (file.type.startsWith('video/')) {
-                        const preview = document.createElement('div');
-                        preview.className = 'image-preview video-preview';
-                        preview.innerHTML = `
-                            <div class="video-placeholder">
-                                <div class="video-icon">🎥</div>
-                                <div class="video-name">${file.name}</div>
-                            </div>
-                            <button type="button" class="remove-image" onclick="removeImagePreview(this, ${i})">×</button>
-                        `;
-                        previewContainer.appendChild(preview);
                     }
                 }
             });
@@ -1940,34 +2025,6 @@
                 }
             });
         }
-        
-        // Handle duplication data if available (from sessionStorage or server)
-        if (typeof prefillFormWithDuplicateData === 'function') {
-            setTimeout(() => {
-                prefillFormWithDuplicateData();
-            }, 500); // Wait for all dropdowns to load
-        }
     });
-
-    // Initialize duplication data - handle both server-side and sessionStorage data
-    let duplicateData = null;
-    
-    // First check if serverDuplicateData is defined by the script above
-    if (typeof serverDuplicateData !== 'undefined' && serverDuplicateData) {
-        console.log("Using server-provided duplicateData:", serverDuplicateData);
-        duplicateData = serverDuplicateData;
-        
-        // Ensure images is properly handled as an array
-        if (duplicateData.images) {
-            if (typeof duplicateData.images === 'string') {
-                try {
-                    duplicateData.images = JSON.parse(duplicateData.images);
-                } catch (e) {
-                    console.error("Error parsing duplicate images array:", e);
-                }
-            }
-            console.log("Parsed duplicate images successfully.");
-        }
-    }
 </script>
 {% endblock %}

Web/templates/upload_batch.html

@@ -3,163 +3,119 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Batch Upload - CSV & Bilder</title>
+    <title>Batch Upload</title>
+
+    <!-- CSRF-Token für JavaScript bereitstellen -->
+    <meta name="csrf-token" content="{{ session.get('_csrf_token', '') }}">
+
     <style>
-        :root {
-            --primary-color: #4a90e2;
-            --background-color: #f4f7f6;
-            --text-color: #333;
-            --border-radius: 8px;
-        }
-
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: var(--background-color);
-            color: var(--text-color);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            margin: 0;
-            padding: 20px;
-            box-sizing: border-box;
-        }
-
-        .upload-container {
-            background: white;
-            padding: 2rem;
-            border-radius: var(--border-radius);
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            width: 100%;
-            max-width: 500px;
-        }
-
-        h2 {
-            margin-top: 0;
-            color: var(--primary-color);
-            text-align: center;
-        }
-
-        .form-group {
-            margin-bottom: 1.5rem;
-        }
-
-        label {
-            display: block;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-        }
-
-        input[type="file"] {
-            display: block;
-            width: 100%;
-            padding: 0.5rem;
-            border: 1px dashed #ccc;
-            border-radius: var(--border-radius);
-            background: #fafafa;
-            cursor: pointer;
-            box-sizing: border-box;
-        }
-
-        .btn-submit {
-            width: 100%;
-            padding: 0.75rem;
-            background-color: var(--primary-color);
-            color: white;
-            border: none;
-            border-radius: var(--border-radius);
-            font-size: 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        .btn-submit:hover {
-            background-color: #357abd;
-        }
-
-        .btn-submit:disabled {
-            background-color: #a0c4e8;
-            cursor: not-allowed;
-        }
-
-        /* Fortschritts- und Log-Bereich */
-        #uploadProgress {
-            margin-top: 2rem;
-            display: none;
-        }
-
-        #progressText {
-            font-size: 1rem;
-            margin-bottom: 0.5rem;
-            color: var(--primary-color);
-            text-align: center;
-        }
-
-        progress {
-            width: 100%;
-            height: 20px;
-            border-radius: var(--border-radius);
-        }
-
-        #logList {
-            margin-top: 1rem;
-            padding: 10px;
-            font-size: 0.85rem;
-            color: #555;
-            max-height: 150px;
-            overflow-y: auto;
-            background: #fafafa;
-            border: 1px solid #ddd;
-            border-radius: var(--border-radius);
-            list-style-type: none;
-        }
-
-        #logList li {
-            margin-bottom: 5px;
-            padding-bottom: 5px;
-            border-bottom: 1px solid #eee;
-        }
-
-        #logList li:last-child {
-            border-bottom: none;
-            margin-bottom: 0;
-            padding-bottom: 0;
-        }
+        body { font-family: sans-serif; padding: 20px; background: #f4f7f6; }
+        .upload-container { background: white; padding: 20px; border-radius: 8px; max-width: 500px; margin: 0 auto; }
+        .form-group { margin-bottom: 15px; }
+        label { display: block; font-weight: bold; margin-bottom: 5px; }
+        input[type="file"] { width: 100%; padding: 8px; box-sizing: border-box; }
+        .btn-submit { width: 100%; padding: 10px; background: #4a90e2; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; }
+        .btn-submit:disabled { background: #ccc; }
+        #uploadProgress { margin-top: 20px; display: none; }
+        progress { width: 100%; height: 20px; }
+        #logList { background: #fafafa; border: 1px solid #eee; padding: 10px; max-height: 150px; overflow-y: auto; font-size: 0.85em; list-style: none; }
     </style>
-    <meta name="csrf-token" content="{{ csrf_token() }}">
 </head>
 <body>
 
-    <div class="upload-container">
-        <h2>Inventar Batch Upload</h2>
+<div class="upload-container">
+    <h2>Inventar Batch Upload</h2>
 
-        <!-- ID auf "batchUploadForm" geändert, damit das JS es findet -->
-        <form id="batchUploadForm">
-            <div class="form-group">
-                <label for="csv_file">1. items.csv Datei auswählen</label>
-                <input type="file" id="csv_file" name="csv_file" accept=".csv" required>
-            </div>
-
-            <div class="form-group">
-                <label for="images">2. Bilder auswählen</label>
-                <input type="file" id="images" name="images" accept="image/*" multiple required>
-                <small style="color: #666; display: block; margin-top: 5px;">Du kannst mehrere Bilder markieren (Strg/Cmd gedrückt halten).</small>
-            </div>
-
-            <!-- ID auf "uploadBtn" geändert -->
-            <button type="submit" id="uploadBtn" class="btn-submit">Daten hochladen</button>
-        </form>
-
-        <!-- Fehlender Container für den Fortschrittsbalken und Logs hinzugefügt -->
-        <div id="uploadProgress">
-            <div id="progressText">Starte Upload...</div>
-            <progress id="progressBar" value="0" max="100"></progress>
-            <ul id="logList"></ul>
+    <form id="batchUploadForm">
+        <div class="form-group">
+            <label for="csv_file">1. items.csv auswählen</label>
+            <input type="file" id="csv_file" name="csv_file" accept=".csv" required>
         </div>
+
+        <div class="form-group">
+            <label for="images">2. Bilder auswählen</label>
+            <input type="file" id="images" name="images" accept="image/*" multiple required>
+        </div>
+
+        <button type="submit" id="uploadBtn" class="btn-submit">Daten hochladen</button>
+    </form>
+
+    <div id="uploadProgress">
+        <div id="progressText">Bereite Upload vor...</div>
+        <progress id="progressBar" value="0" max="100"></progress>
+        <ul id="logList"></ul>
     </div>
+</div>
 
 <script>
+// 1. Robuster CSV-Parser, der Zeilenumbrüche und Kommas in Texten korrekt ignoriert
+function parseCSV(csvString) {
+    const rows = [];
+    let currentRow = [];
+    let currentCell = '';
+    let insideQuotes = false;
+
+    for (let i = 0; i < csvString.length; i++) {
+        const char = csvString[i];
+        const nextChar = csvString[i + 1];
+
+        if (char === '"' && insideQuotes && nextChar === '"') {
+            currentCell += '"';
+            i++; // Escaped Quotes ("") überspringen
+        } else if (char === '"') {
+            insideQuotes = !insideQuotes;
+        } else if (char === ',' && !insideQuotes) {
+            currentRow.push(currentCell);
+            currentCell = '';
+        } else if ((char === '\n' || char === '\r') && !insideQuotes) {
+            if (char === '\r' && nextChar === '\n') i++; // Windows Umbrüche überspringen
+            currentRow.push(currentCell);
+            if (currentRow.length > 1 || currentRow[0] !== '') {
+                rows.push(currentRow);
+            }
+            currentRow = [];
+            currentCell = '';
+        } else {
+            currentCell += char;
+        }
+    }
+    if (currentCell !== '' || currentRow.length > 0) {
+        currentRow.push(currentCell);
+        if (currentRow.length > 1 || currentRow[0] !== '') {
+            rows.push(currentRow);
+        }
+    }
+    return rows;
+}
+
+// 2. Baut das Array wieder sicher zu einer sauberen CSV-Zeile für das Backend zusammen
+function rowToCSV(rowArray) {
+    return rowArray.map(cell => {
+        if (cell === null || cell === undefined) return '';
+        let cellStr = String(cell);
+        if (cellStr.includes(',') || cellStr.includes('"') || cellStr.includes('\n') || cellStr.includes('\r')) {
+            return '"' + cellStr.replace(/"/g, '""') + '"';
+        }
+        return cellStr;
+    }).join(',');
+}
+
+// 3. Bildnamen extrahieren
+function extractImageNames(cellValue) {
+    if (!cellValue) return [];
+    let raw = String(cellValue).replace(/^["']|["']$/g, '').trim();
+    if (raw.startsWith('[') && raw.endsWith(']')) {
+        try {
+            const jsonValid = raw.replace(/'/g, '"');
+            return JSON.parse(jsonValid);
+        } catch (e) {
+            const matches = raw.match(/['"]([^'"]+)['"]/g);
+            if (matches) return matches.map(m => m.replace(/['"]/g, ''));
+        }
+    }
+    return raw ? [raw] : [];
+}
+
 document.getElementById('batchUploadForm').addEventListener('submit', async function(e) {
     e.preventDefault();
 
@@ -171,6 +127,8 @@ document.getElementById('batchUploadForm').addEventListener('submit', async func
     const progressText = document.getElementById('progressText');
     const logList = document.getElementById('logList');
 
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+
     if (!csvInput.files.length) {
         alert("Bitte wähle eine CSV-Datei aus.");
         return;
@@ -184,128 +142,118 @@ document.getElementById('batchUploadForm').addEventListener('submit', async func
         const li = document.createElement('li');
         li.textContent = msg;
         logList.appendChild(li);
-        logList.scrollTop = logList.scrollHeight; // Auto-scroll
+        logList.scrollTop = logList.scrollHeight;
     };
 
     const csvFile = csvInput.files[0];
     const allImages = Array.from(imageInput.files);
-    const BATCH_SIZE = 50;
+
+    const imageMap = new Map();
+    allImages.forEach(file => {
+        imageMap.set(file.name.toLowerCase(), file);
+    });
+
+    const BATCH_SIZE = 20;
 
     try {
-        // 1. CSV-Datei lesen
         const csvText = await csvFile.text();
+        const allRows = parseCSV(csvText);
 
-        // 2. CSV in Zeilen aufteilen
-        let rows = csvText.split(/\r?\n/).filter(row => row.trim().length > 0);
-
-        if (rows.length <= 1) {
+        if (allRows.length <= 1) {
             throw new Error("CSV-Datei ist leer oder enthält nur Kopfzeilen.");
         }
 
-        const header = rows[0];
-        let dataRows = rows.slice(1);
+        const headerRow = allRows[0];
+        const dataRows = allRows.slice(1);
 
-        // 3. Client-seitige Deduplizierung (Entfernt exakte Duplikat-Zeilen)
-        const uniqueRowsSet = new Set();
-        const uniqueDataRows = [];
-        let duplicateCount = 0;
+        log(`${dataRows.length} Einträge gefunden. Bereite Batches vor...`);
 
-        for (const row of dataRows) {
-            if (uniqueRowsSet.has(row)) {
-                duplicateCount++;
-            } else {
-                uniqueRowsSet.add(row);
-                uniqueDataRows.push(row);
-            }
-        }
+        const imagesColIndex = headerRow.findIndex(h => h.toLowerCase().trim() === 'images');
 
-        log(`${uniqueDataRows.length} einzigartige Einträge gefunden. ${duplicateCount} Duplikate entfernt.`);
-
-        // Den Index der "Images" Spalte finden
-        const headers = header.split(';');
-        const imagesColIndex = headers.findIndex(h => h.trim().replace(/['"]/g, '') === 'Images');
-
-        // 4. In Batches (Häppchen) aufteilen
         const batches = [];
-        for (let i = 0; i < uniqueDataRows.length; i += BATCH_SIZE) {
-            batches.push(uniqueDataRows.slice(i, i + BATCH_SIZE));
+        for (let i = 0; i < dataRows.length; i += BATCH_SIZE) {
+            batches.push(dataRows.slice(i, i + BATCH_SIZE));
         }
 
         progressBar.max = batches.length;
         progressBar.value = 0;
 
-        // 5. Batches nacheinander hochladen
+        // Sequenzieller Upload mit Fehlertoleranz pro Batch
         for (let b = 0; b < batches.length; b++) {
             const batchRows = batches[b];
             progressText.textContent = `Lade Batch ${b + 1} von ${batches.length} hoch...`;
-            log(`Bereite Batch ${b + 1} vor (${batchRows.length} Artikel)...`);
-
-            // CSV für diesen Batch neu zusammensetzen
-            const batchCsvText = [header, ...batchRows].join('\n');
-            const batchCsvBlob = new Blob([batchCsvText], { type: 'text/csv' });
-
-            // Benötigte Bilder für diesen Batch extrahieren
-            const requiredImageNames = new Set();
-            if (imagesColIndex !== -1) {
-                batchRows.forEach(row => {
-                    const cols = row.split(',');
-                    if (cols[imagesColIndex]) {
-                        try {
-                            let imgStr = cols[imagesColIndex].trim().replace(/^"|"$/g, '').replace(/'/g, '"');
-                            if (imgStr.startsWith('[') && imgStr.endsWith(']')) {
-                                const parsedImages = JSON.parse(imgStr);
-                                parsedImages.forEach(img => requiredImageNames.add(img));
-                            }
-                        } catch (err) {
-                            console.warn("Konnte Bild-Array nicht parsen in Zeile:", row);
-                        }
-                    }
-                });
-            }
-
-            // Bilder auf die für diesen Batch benötigten filtern
-            const batchImages = allImages.filter(img => requiredImageNames.has(img.name));
-
-            // FormData zusammenbauen
-            const formData = new FormData();
-            formData.append('csv_file', batchCsvBlob, `batch_${b+1}.csv`);
-            batchImages.forEach(img => {
-                formData.append('images', img);
-            });
 
             try {
-                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+                const requiredImagesForBatch = new Set();
+
+                if (imagesColIndex !== -1) {
+                    batchRows.forEach(rowCols => {
+                        if (rowCols[imagesColIndex]) {
+                            const imgNames = extractImageNames(rowCols[imagesColIndex]);
+                            imgNames.forEach(name => {
+                                const fileMatch = imageMap.get(name.toLowerCase());
+                                if (fileMatch) {
+                                    requiredImagesForBatch.add(fileMatch);
+                                }
+                            });
+                        }
+                    });
+                }
+
+                const batchCsvArray = [headerRow, ...batchRows];
+                const batchCsvText = batchCsvArray.map(rowToCSV).join('\n');
+                const batchCsvBlob = new Blob([batchCsvText], { type: 'text/csv' });
+
+                const formData = new FormData();
+                formData.append('csv_file', batchCsvBlob, `batch_${b + 1}.csv`);
+
+                if (csrfToken) {
+                    formData.append('csrf_token', csrfToken);
+                }
+
+                requiredImagesForBatch.forEach(imgFile => {
+                    formData.append('images', imgFile);
+                });
+
+                log(`Batch ${b + 1}: ${batchRows.length} Items & ${requiredImagesForBatch.size} zugehörige Bilder.`);
 
                 const response = await fetch('/upload_csv_batch', {
                     method: 'POST',
                     body: formData,
                     headers: {
-                        'X-CSRFToken': csrfToken
+                        'X-CSRFToken': csrfToken || ''
                     }
                 });
 
-                const result = await response.json();
+                const responseText = await response.text();
+                let result;
 
-                if (!response.ok || !result.success) {
-                    throw new Error(result.message || `Server antwortete mit Status ${response.status}`);
+                try {
+                    result = JSON.parse(responseText);
+                } catch (parseErr) {
+                    throw new Error(`Server-Fehler (Status ${response.status}). HTML statt JSON erhalten.`);
                 }
 
-                log(`Batch ${b + 1} erfolgreich: ${result.message}`);
+                if (!response.ok || !result.success) {
+                    throw new Error(result.message || `Server-Fehler ${response.status}`);
+                }
+
+                log(`Batch ${b + 1} erfolgreich abgeschlossen.`);
+
             } catch (batchErr) {
-                log(`Fehler in Batch ${b + 1}: ${batchErr.message}`);
-                alert(`Upload wurde bei Batch ${b + 1} aufgrund eines Fehlers abgebrochen. Prüfe die Logs.`);
-                break; // Stoppt weitere Uploads, wenn einer fehlschlägt
+                log(`⚠️ FEHLER in Batch ${b + 1}: ${batchErr.message}. Überspringe und fahre fort...`);
+                console.error(`Batch ${b + 1} fehlgeschlagen:`, batchErr);
             }
 
             progressBar.value = b + 1;
         }
 
-        progressText.textContent = "Upload-Vorgang abgeschlossen!";
+        progressText.textContent = "Upload-Prozess beendet!";
         uploadBtn.disabled = false;
 
-    } catch (error) {
-        alert("Fehler bei der Verarbeitung des Uploads: " + error.message);
-        log("Fehler: " + error.message);
+    } catch (err) {
+        alert("Upload abgebrochen: " + err.message);
+        log("Fehler: " + err.message);
         uploadBtn.disabled = false;
     }
 });

Web/templates/user_del.html

@@ -17,15 +17,11 @@
     <div class="user-management-container">
         <h2>Benutzer</h2>
 
-        <form method="POST" action="{{ url_for('admin_anonymize_names') }}" class="mb-3">
-            <button
-                type="submit"
-                class="btn btn-outline-danger"
-                onclick="return confirm('Sollen alle gespeicherten Klarnamen dauerhaft in Synonym-Kuerzel umgewandelt werden?')"
-            >
-                Gespeicherte Namen anonymisieren
-            </button>
-        </form>
+        <div class="mb-3">
+            <a href="{{ url_for('register') }}" class="btn btn-success">
+                Neuen Benutzer registrieren
+            </a>
+        </div>
 
         <div class="filter-bar mb-3">
             <div class="row g-2 align-items-end">
@@ -57,8 +53,11 @@
                         <option value="desc">Absteigend</option>
                     </select>
                 </div>
-                <div class="col-md-2">
-                    <button class="btn btn-secondary w-100" onclick="resetFilters()">Filter zurücksetzen</button>
+                <div class="col-md-3">
+                    <div class="d-flex gap-2">
+                        <button class="btn btn-secondary flex-grow-1" onclick="resetFilters()">Zurücksetzen</button>
+                        <button class="btn btn-success flex-grow-1" onclick="exportFilteredUsers()">Exportieren</button>
+                    </div>
                 </div>
             </div>
             <div class="mt-2 text-muted small" id="filter-count"></div>
@@ -86,19 +85,20 @@
                         <td>{{ permission_presets.get(user.permission_preset, {}).get('label', user.permission_preset) }}</td>
                         <td class="actions">
                             <form method="POST" action="{{ url_for('delete_user') }}" class="d-inline">
+                                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                 <input type="hidden" name="username" value="{{ user.username }}">
                                 <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Sind Sie sicher, dass Sie den Benutzer {{ user.username }} löschen möchten?')">
                                     Löschen
                                 </button>
                             </form>
-                            <button type="button" class="btn btn-primary btn-sm" 
+                            <button type="button" class="btn btn-primary btn-sm"
                                     data-username="{{ user.username }}"
                                     data-firstname="{{ user.name if user.name else '' }}"
                                     data-lastname="{{ user.last_name if user.last_name else '' }}"
                                     onclick="openEditUserModal(this)">
                                 Bearbeiten
                             </button>
-                            <button type="button" class="btn btn-warning btn-sm" 
+                            <button type="button" class="btn btn-warning btn-sm"
                                     onclick="openResetPasswordModal('{{ user.username }}')">
                                 Passwort zurücksetzen
                             </button>
@@ -128,6 +128,7 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <form method="POST" action="{{ url_for('admin_update_user_permissions') }}">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                 <div class="modal-body permissions-modal-body">
                     <input type="hidden" id="perm-username" name="username">
                     <div class="mb-3">
@@ -184,6 +185,7 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <form method="POST" action="{{ url_for('admin_update_user_name') }}">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                 <div class="modal-body">
                     <input type="hidden" id="edit-username" name="username">
                     <div class="mb-3">
@@ -217,6 +219,7 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <form method="POST" action="{{ url_for('admin_reset_user_password') }}">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                 <div class="modal-body">
                     <input type="hidden" id="reset-username" name="username">
                     <div class="mb-3">
@@ -317,6 +320,54 @@
         applyFilters();
     }
 
+    function exportFilteredUsers() {
+        var table = document.getElementById('user-table');
+        var tbody = table.querySelector('tbody');
+        var rows = Array.from(tbody.querySelectorAll('tr'));
+
+        var visibleUsernames = [];
+
+        // Sammle alle Benutzernamen, die durch den Filter aktuell NICHT versteckt sind
+        rows.forEach(function(row) {
+            if (row.style.display !== 'none') {
+                var cells = row.querySelectorAll('td');
+                if (cells.length > 0) {
+                    visibleUsernames.push(cells[0].textContent.trim());
+                }
+            }
+        });
+
+        if (visibleUsernames.length === 0) {
+            alert('Keine Benutzer zum Exportieren vorhanden.');
+            return;
+        }
+
+        // Dynamisches Formular erstellen
+        var form = document.createElement('form');
+        form.method = 'POST';
+        form.action = "{{ url_for('export_users_csv') }}";
+
+        // 1. CSRF-Token als Wert (ohne Klammern) übergeben
+        var csrfInput = document.createElement('input');
+        csrfInput.type = 'hidden';
+        csrfInput.name = 'csrf_token';
+        csrfInput.value = "{{ csrf_token }}";
+        form.appendChild(csrfInput);
+
+        // 2. Gefilterte Benutzernamen hinzufügen
+        var input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'usernames';
+        input.value = JSON.stringify(visibleUsernames);
+        form.appendChild(input);
+
+        document.body.appendChild(form);
+        form.submit();
+
+        // Aufräumen
+        document.body.removeChild(form);
+    }
+
     document.addEventListener('DOMContentLoaded', function() {
         applyFilters();
         document.getElementById('filter-search').addEventListener('input', applyFilters);
@@ -336,12 +387,12 @@
         var username = button.getAttribute('data-username');
         var name = button.getAttribute('data-firstname');
         var lastName = button.getAttribute('data-lastname');
-        
+
         document.getElementById('edit-username').value = username;
         document.getElementById('edit-username-display').value = username;
         document.getElementById('edit-name').value = name;
         document.getElementById('edit-last-name').value = lastName;
-        
+
         var modal = new bootstrap.Modal(document.getElementById('editUserModal'));
         modal.show();
     }
@@ -349,8 +400,7 @@
     function openResetPasswordModal(username) {
         document.getElementById('reset-username').value = username;
         document.getElementById('username-display').value = username;
-        
-        // Open modal using Bootstrap
+
         var modal = new bootstrap.Modal(document.getElementById('resetPasswordModal'));
         modal.show();
     }

Web/tenant.py

@@ -17,6 +17,7 @@ import re
 import ipaddress
 import Web.modules.database.settings as cfg
 from Web.modules.database.settings import MongoClient
+from zoneinfo import ZoneInfo
 
 logger = logging.getLogger(__name__)
 
@@ -166,6 +167,11 @@ def _find_registered_tenant_id(candidate):
     return None
 
 
+def _resolve_registered_tenant_id(candidate):
+    """Return the canonical registered tenant id for a candidate, or None."""
+    return _find_registered_tenant_id(candidate)
+
+
 def _is_ip_host(hostname):
     hostname = str(hostname or '').strip()
     if not hostname:
@@ -185,6 +191,8 @@ def get_tenant_config(tenant_id=None):
         ctx = get_tenant_context()
         tenant_id = ctx.tenant_id if ctx and ctx.tenant_id else 'default'
 
+    tenant_id = _resolve_registered_tenant_id(tenant_id) or tenant_id
+
     if tenant_id in TENANT_REGISTRY:
         return TENANT_REGISTRY[tenant_id] or {}
         
@@ -318,7 +326,7 @@ def get_tenant_trial_status(tenant_id=None, now=None):
     "expires_after_days", "ttl_days", or "days".
     """
     trial_config = get_tenant_trial_config(tenant_id)
-    now = now or datetime.datetime.now()
+    now = now or datetime.datetime.now(ZoneInfo("Europe/Berlin"))
 
     enabled = bool(trial_config.get('enabled') or trial_config.get('active'))
     if not enabled:
@@ -440,7 +448,7 @@ def delete_tenant(tenant_id, *, drop_database=True, remove_from_config=True):
 
 def purge_expired_trial_tenants(now=None):
     """Delete expired trial tenants that opted into auto-delete."""
-    now = now or datetime.datetime.now()
+    now = now or datetime.datetime.now(ZoneInfo("Europe/Berlin"))
     purged_tenants = []
 
     for tenant_id in list(TENANT_REGISTRY.keys()):
@@ -481,20 +489,22 @@ class TenantContext:
             or request.args.get('tenantId', '').strip()
         )
         if tenant_from_query:
-            matched_tenant = _find_registered_tenant_id(tenant_from_query) or tenant_from_query
-            self.tenant_id = matched_tenant
-            self.config = get_tenant_config(matched_tenant)
-            session['tenant_id'] = matched_tenant
-            return self._get_db_name(matched_tenant)
+            matched_tenant = _resolve_registered_tenant_id(tenant_from_query)
+            if matched_tenant:
+                self.tenant_id = matched_tenant
+                self.config = get_tenant_config(matched_tenant)
+                session['tenant_id'] = matched_tenant
+                return self._get_db_name(matched_tenant)
 
         # Priority 1: X-Tenant-ID header (for testing/internal APIs)
         tenant_from_header = request.headers.get('X-Tenant-ID', '').strip()
         if tenant_from_header:
-            matched_tenant = _find_registered_tenant_id(tenant_from_header) or tenant_from_header
-            self.tenant_id = matched_tenant
-            self.config = get_tenant_config(matched_tenant)
-            session['tenant_id'] = matched_tenant
-            return self._get_db_name(matched_tenant)
+            matched_tenant = _resolve_registered_tenant_id(tenant_from_header)
+            if matched_tenant:
+                self.tenant_id = matched_tenant
+                self.config = get_tenant_config(matched_tenant)
+                session['tenant_id'] = matched_tenant
+                return self._get_db_name(matched_tenant)
 
         # Priority 2: Port/host based tenant mapping
         host_candidates = _request_host_candidates()
@@ -544,11 +554,11 @@ class TenantContext:
                 if len(parts) >= 2:
                     potential_subdomain = parts[0]
                     if potential_subdomain not in ('www', 'api', 'admin', 'app', 'mail'):
-                        matched_tenant = _find_registered_tenant_id(potential_subdomain)
+                        matched_tenant = _resolve_registered_tenant_id(potential_subdomain)
                         if not matched_tenant and potential_subdomain.startswith('school'):
-                            matched_tenant = _find_registered_tenant_id('schule' + potential_subdomain[len('school'):])
+                            matched_tenant = _resolve_registered_tenant_id('schule' + potential_subdomain[len('school'):])
                         elif not matched_tenant and potential_subdomain.startswith('schule'):
-                            matched_tenant = _find_registered_tenant_id('school' + potential_subdomain[len('schule'):])
+                            matched_tenant = _resolve_registered_tenant_id('school' + potential_subdomain[len('schule'):])
                         if matched_tenant:
                             self.subdomain = potential_subdomain
                             self.tenant_id = matched_tenant
@@ -565,12 +575,21 @@ class TenantContext:
         # Priority 4: sticky tenant from the authenticated session
         session_tenant = session.get('tenant_id', '').strip() if session.get('tenant_id') else ''
         if session_tenant:
-            self.tenant_id = session_tenant
-            self.config = get_tenant_config(session_tenant)
+            matched_tenant = _resolve_registered_tenant_id(session_tenant)
+            if matched_tenant:
+                self.tenant_id = matched_tenant
+                self.config = get_tenant_config(matched_tenant)
+                session['tenant_id'] = matched_tenant
+                logger.info(
+                    f"Tenant resolution by session: host={primary_host} tenant={matched_tenant} config={self.config}"
+                )
+                return self._get_db_name(matched_tenant)
+            session.pop('tenant_id', None)
             logger.info(
-                f"Tenant resolution by session: host={primary_host} tenant={session_tenant} config={self.config}"
+                "Discarded stale tenant session reference: host=%s tenant=%s",
+                primary_host,
+                session_tenant,
             )
-            return self._get_db_name(session_tenant)
 
         # Fallback to default tenant if no tenant identifier found.
         # If no explicit 'default' tenant config exists, use configured MongoDB DB.

manage-tenant.sh

@@ -12,6 +12,250 @@ fi
 # Resolve script directory so config paths are deterministic even when called via sudo
 SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 CONFIG_FILE="$SCRIPT_DIR/config.json"
+NGINX_DOMAIN_BASE="${INVENTAR_TENANT_DOMAIN_BASE:-invario-software.de}"
+NGINX_PROXY_HOST="${INVENTAR_NGINX_PROXY_HOST:-172.17.0.1}"
+NGINX_SITES_AVAILABLE="${INVENTAR_NGINX_SITES_AVAILABLE:-/etc/nginx/sites-available}"
+NGINX_SITES_ENABLED="${INVENTAR_NGINX_SITES_ENABLED:-/etc/nginx/sites-enabled}"
+NGINX_SITE_PREFIX="${INVENTAR_NGINX_SITE_PREFIX:-inventarsystem}"
+CERTBOT_EMAIL="${INVENTAR_CERTBOT_EMAIL:-}"
+
+tenant_domain() {
+    printf '%s.%s' "$1" "$NGINX_DOMAIN_BASE"
+}
+
+tenant_nginx_site_path() {
+    printf '%s/%s-%s.conf' "$NGINX_SITES_AVAILABLE" "$NGINX_SITE_PREFIX" "$1"
+}
+
+tenant_nginx_enabled_path() {
+    printf '%s/%s-%s.conf' "$NGINX_SITES_ENABLED" "$NGINX_SITE_PREFIX" "$1"
+}
+
+run_host_command() {
+    if [ "$(id -u)" -eq 0 ]; then
+        "$@"
+    elif command -v sudo >/dev/null 2>&1; then
+        sudo "$@"
+    else
+        return 127
+    fi
+}
+
+reload_host_nginx() {
+    if command -v nginx >/dev/null 2>&1 || command -v sudo >/dev/null 2>&1; then
+        if ! run_host_command nginx -t; then
+            echo "Warning: nginx configuration test failed; skipping reload."
+            return 1
+        fi
+
+        if command -v systemctl >/dev/null 2>&1; then
+            if ! run_host_command systemctl reload nginx; then
+                echo "Warning: systemctl reload nginx failed."
+                return 1
+            fi
+        else
+            if ! run_host_command nginx -s reload; then
+                echo "Warning: nginx reload failed."
+                return 1
+            fi
+        fi
+    fi
+}
+
+write_tenant_nginx_config() {
+    local tenant_id="$1"
+    local port="$2"
+    local domain site_path enabled_path
+
+    domain="$(tenant_domain "$tenant_id")"
+    site_path="$(tenant_nginx_site_path "$tenant_id")"
+    enabled_path="$(tenant_nginx_enabled_path "$tenant_id")"
+
+    if [ -z "$port" ]; then
+        echo "Warning: No port configured for tenant '$tenant_id'; skipping nginx vhost creation."
+        return 0
+    fi
+
+    if ! run_host_command mkdir -p "$NGINX_SITES_AVAILABLE" "$NGINX_SITES_ENABLED"; then
+        echo "Warning: Unable to prepare nginx site directories; skipping reverse-proxy setup."
+        return 0
+    fi
+
+    local have_cert=false
+
+    if [ -f "/etc/letsencrypt/live/$domain/fullchain.pem" ] && [ -f "/etc/letsencrypt/live/$domain/privkey.pem" ]; then
+        have_cert=true
+    else
+        if [ "$(id -u)" -eq 0 ]; then
+            cat > "$site_path" <<EOF
+# ==========================================
+#  INVENTARSYSTEM ($tenant_id)
+# ==========================================
+server {
+    listen 80;
+    listen [::]:80;
+    server_name $domain;
+    client_max_body_size 100M;
+
+    location / {
+        proxy_pass http://$NGINX_PROXY_HOST:$port;
+        proxy_set_header Host \$host;
+        proxy_set_header X-Real-IP \$remote_addr;
+        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto \$scheme;
+    }
+}
+EOF
+        else
+            sudo tee "$site_path" >/dev/null <<EOF
+# ==========================================
+#  INVENTARSYSTEM ($tenant_id)
+# ==========================================
+server {
+    listen 80;
+    listen [::]:80;
+    server_name $domain;
+    client_max_body_size 100M;
+
+    location / {
+        proxy_pass http://$NGINX_PROXY_HOST:$port;
+        proxy_set_header Host \$host;
+        proxy_set_header X-Real-IP \$remote_addr;
+        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto \$scheme;
+    }
+}
+EOF
+        fi
+
+        if ! run_host_command ln -sfn "$site_path" "$enabled_path"; then
+            echo "Warning: Could not enable nginx site for tenant '$tenant_id'."
+            return 1
+        fi
+
+        if ! reload_host_nginx; then
+            echo "Warning: Initial nginx reload failed for tenant '$tenant_id'."
+        fi
+
+        if command -v certbot >/dev/null 2>&1 || command -v sudo >/dev/null 2>&1; then
+            local certbot_args=(certbot --nginx --non-interactive --agree-tos -d "$domain")
+            if [ -n "$CERTBOT_EMAIL" ]; then
+                certbot_args+=(--email "$CERTBOT_EMAIL")
+            else
+                certbot_args+=(--register-unsafely-without-email)
+            fi
+
+            if ! run_host_command "${certbot_args[@]}"; then
+                echo "Warning: certbot failed for tenant '$tenant_id'; keeping HTTP-only vhost for now."
+                return 1
+            fi
+
+            have_cert=true
+        fi
+    fi
+
+    if [ "$have_cert" != true ]; then
+        echo "Warning: No TLS certificate available for tenant '$tenant_id'; leaving HTTP-only nginx config in place."
+        return 1
+    fi
+
+    if [ "$(id -u)" -eq 0 ]; then
+        cat > "$site_path" <<EOF
+# ==========================================
+#  INVENTARSYSTEM ($tenant_id)
+# ==========================================
+server {
+    listen 443 ssl;
+    listen [::]:443 ssl;
+    server_name $domain;
+    client_max_body_size 100M;
+
+    ssl_certificate /etc/letsencrypt/live/$domain/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/$domain/privkey.pem;
+
+    location / {
+        proxy_pass http://$NGINX_PROXY_HOST:$port;
+        proxy_set_header Host \$host;
+        proxy_set_header X-Real-IP \$remote_addr;
+        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto \$scheme;
+    }
+}
+
+# Gezielte HTTP zu HTTPS Weiterleitung für $tenant_id
+server {
+    listen 80;
+    listen [::]:80;
+    server_name $domain;
+    return 301 https://$domain\$request_uri;
+}
+EOF
+    else
+        sudo tee "$site_path" >/dev/null <<EOF
+# ==========================================
+#  INVENTARSYSTEM ($tenant_id)
+# ==========================================
+server {
+    listen 443 ssl;
+    listen [::]:443 ssl;
+    server_name $domain;
+    client_max_body_size 100M;
+
+    ssl_certificate /etc/letsencrypt/live/$domain/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/$domain/privkey.pem;
+
+    location / {
+        proxy_pass http://$NGINX_PROXY_HOST:$port;
+        proxy_set_header Host \$host;
+        proxy_set_header X-Real-IP \$remote_addr;
+        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto \$scheme;
+    }
+}
+
+# Gezielte HTTP zu HTTPS Weiterleitung für $tenant_id
+server {
+    listen 80;
+    listen [::]:80;
+    server_name $domain;
+    return 301 https://$domain\$request_uri;
+}
+EOF
+    fi
+
+    if ! run_host_command ln -sfn "$site_path" "$enabled_path"; then
+        echo "Warning: Could not enable nginx site for tenant '$tenant_id'."
+        return 1
+    fi
+
+    if ! reload_host_nginx; then
+        echo "Warning: nginx reload after tenant '$tenant_id' configuration update failed."
+        return 1
+    fi
+}
+
+remove_tenant_nginx_config() {
+    local tenant_id="$1"
+    local domain site_path enabled_path
+
+    domain="$(tenant_domain "$tenant_id")"
+    site_path="$(tenant_nginx_site_path "$tenant_id")"
+    enabled_path="$(tenant_nginx_enabled_path "$tenant_id")"
+
+    if [ -f "$enabled_path" ] || [ -L "$enabled_path" ]; then
+        run_host_command rm -f "$enabled_path" || true
+    fi
+
+    if [ -f "$site_path" ]; then
+        run_host_command rm -f "$site_path" || true
+    fi
+
+    if command -v certbot >/dev/null 2>&1 || command -v sudo >/dev/null 2>&1; then
+        run_host_command certbot delete --cert-name "$domain" --non-interactive >/dev/null 2>&1 || true
+    fi
+
+    reload_host_nginx || true
+}
 
 ensure_runtime_config_json() {
     local config_path backup_path
@@ -186,6 +430,7 @@ PY
 initialize_tenant_database() {
     local tenant_id="$1"
     local mode="$2"
+    local admin_password="${3:-admin123}"
 
     APP_CONTAINER=$(docker ps -qf "name=app" | head -n 1)
     if [ -z "$APP_CONTAINER" ]; then
@@ -194,72 +439,50 @@ initialize_tenant_database() {
         return 0
     fi
 
-    docker exec -i "$APP_CONTAINER" python3 - "$tenant_id" "$mode" <<'PY'
+    # Fix: We inject the password securely via a temporary environment variable (-e ADMIN_PASS)
+    docker exec -i -e ADMIN_PASS="$admin_password" "$APP_CONTAINER" python3 - "$tenant_id" "$mode" <<'PY'
 import sys, os, re, datetime, hashlib
 sys.path.insert(0, "/app")
 sys.path.insert(0, "/app/Web")
 from Web.modules.database import settings
 from pymongo import MongoClient
 import Web.modules.inventarsystem.data_protection as dp
+import Web.modules.database.user as us
 
 tenant_id = sys.argv[1].lower()
 mode = sys.argv[2]
+
+# Fix: Read the password directly from the environment variable instead of sys.argv
+admin_password = os.environ.get("ADMIN_PASS", "admin123")
+# Failsafe in case of empty string
+if not admin_password.strip():
+    admin_password = "admin123"
+
 sanitized = "".join(c for c in tenant_id if c.isalnum() or c == "_")
-db_name = f"inventar_{sanitized}"
-client = MongoClient(settings.MONGODB_HOST, int(settings.MONGODB_PORT))
+db_name = f"inventar_{sanitized}" if sanitized else settings.MONGODB_DB
+
+client = MongoClient(settings.MONGODB_HOST, settings.MONGODB_PORT)
 db = client[db_name]
-
-pw_bytes = "admin123".encode("utf-8")
-random_salt = os.urandom(16)
-hashed = hashlib.scrypt(pw_bytes, salt=random_salt, n=16384, r=8, p=1)
-hashed_pw_string = f"v1${random_salt.hex()}${hashed.hex()}"
-
-action_permissions = {
-    "can_borrow": True,
-    "can_insert": True,
-    "can_edit": True,
-    "can_delete": True,
-    "can_manage_users": True,
-    "can_manage_settings": True,
-    "can_view_logs": True,
+users = db["users"]
+permission_defaults = us.build_default_permission_payload("full_access")
+admin_doc = {
+    "Username": "admin",
+    "Password": us.hashing(admin_password),
+    "Admin": True,
+    "active_ausleihung": None,
+    "name": dp.encrypt_text("admin"),
+    "last_name": dp.encrypt_text("admin"),
+    "IsStudent": False,
+    "PermissionPreset": permission_defaults["preset"],
+    "ActionPermissions": permission_defaults["actions"],
+    "PagePermissions": permission_defaults["pages"],
 }
-
-page_permissions = {
-    "home": True,
-    "tutorial_page": True,
-    "my_borrowed_items": True,
-    "notifications_view": True,
-    "impressum": True,
-    "license": True,
-    "library_view": True,
-    "terminplan": True,
-    "home_admin": True,
-    "upload_admin": True,
-    "library_admin": True,
-    "admin_borrowings": True,
-    "library_loans_admin": True,
-    "admin_damaged_items": True,
-    "admin_audit_dashboard": True,
-    "logs": True,
-    "manage_filters": True,
-    "manage_locations": True,
-}
-
-if db.users.count_documents({"Username": dp.encrypt_text("admin")}) == 0:
-    db.users.insert_one({
-        "Username":  dp.encrypt_text("admin"),
-        "Password": hashed_pw_string,
-        "Admin": True,
-        "active_ausleihung": None,
-        "name": dp.encrypt_text("Admin"),
-        "last_name": dp.encrypt_text("User"),
-        "IsStudent": False,
-        "PermissionPreset": "full_access",
-        "ActionPermissions": action_permissions,
-        "PagePermissions": page_permissions,
-    })
+users.replace_one({"Username": "admin"}, admin_doc, upsert=True)
+print("Fallback successfully applied")
 
 if mode == "trial":
+    client = MongoClient(settings.MONGODB_HOST, settings.MONGODB_PORT)
+    db = client[db_name]
     db.settings.update_one(
         {"setting_type": "tenant_trial"},
         {"$set": {
@@ -272,7 +495,9 @@ if mode == "trial":
         upsert=True,
     )
 
-print(f"Tenant {sys.argv[1]} database initialized. Default admin: admin / admin123")
+client.close()
+
+print(f"Tenant {sys.argv[1]} database initialized. Default admin: admin / {admin_password}")
 PY
 }
 
@@ -533,15 +758,18 @@ ${YELLOW}Nutzung:${RESET} $0 <befehl> [tenant_id] [optionen]
 
 ${BLUE}${BOLD}VERFÜGBARE BEFEHLE:${RESET}
   ${GREEN}add${RESET} <tenant_id> [port]
-    Legt einen neuen Tenant an, registriert den Port und initialisiert 
-    die MongoDB-Datenbank mit einem Standard-Admin (${YELLOW}admin / admin123${RESET}).
+        Legt einen neuen Tenant an, registriert den Port, richtet den nginx-Host
+        für ${YELLOW}<tenant_id>.invario-software.de${RESET} ein und initialisiert
+        die MongoDB-Datenbank mit einem Standard-Admin (${YELLOW}admin / admin123${RESET}).
 
   ${GREEN}trial${RESET} <tenant_id> [port] [tage]
     Erstellt einen temporären Test-Tenant. Standardlaufzeit: 7 Tage.
-    Läuft automatisch ab und löscht sich selbst.
+        Läuft automatisch ab, löscht sich selbst und bekommt die gleiche nginx/
+        Certbot-Anbindung wie ein normaler Tenant.
 
   ${GREEN}remove${RESET} [-y|--yes] <tenant_id>
-    Löscht einen Tenant, seine Konfiguration, Ports und die Datenbank.
+        Löscht einen Tenant, seine Konfiguration, Ports, nginx-VHost und das
+        zugehörige Let's-Encrypt-Zertifikat sowie die Datenbank.
     Nutze ${RED}-y${RESET}, um die Bestätigungsabfrage zu überspringen.
 
   ${GREEN}restart-tenant${RESET} <tenant_id>
@@ -593,15 +821,32 @@ case "$COMMAND" in
             exit 1
         fi
 
-        PORT_ARG="${3:-}"
-        if [ -n "$PORT_ARG" ]; then
-            if ! printf '%s\n' "$PORT_ARG" | grep -qE '^[0-9]+$'; then
-                echo "Error: Port must be a numeric value."
-                exit 1
+        ARG3="${3:-}"
+        ARG4="${4:-}"
+
+        PORT_ARG=""
+        PASSWORD_ARG="admin123"
+
+        # Check if the 3rd argument is numeric (Port) or text (Password)
+        if [ -n "$ARG3" ]; then
+            if printf '%s\n' "$ARG3" | grep -qE '^[0-9]+$'; then
+                PORT_ARG="$ARG3"
+                if [ -n "$ARG4" ]; then
+                    PASSWORD_ARG="$ARG4"
+                fi
+            else
+                # If ARG3 is not numeric, treat it as the password without setting a port
+                PASSWORD_ARG="$ARG3"
             fi
+        fi
+
+        if [ -n "$PORT_ARG" ]; then
             register_tenant_port "$TENANT_ID" "$PORT_ARG"
             update_runtime_ports "$PORT_ARG"
             sync_tenant_port_map
+            if ! write_tenant_nginx_config "$TENANT_ID" "$PORT_ARG"; then
+                echo "Warning: nginx/certbot provisioning for '$TENANT_ID' could not be completed automatically."
+            fi
             if [ -n "$(docker ps -qf 'name=app' | head -n 1)" ]; then
                 restart_app_container
             fi
@@ -609,7 +854,7 @@ case "$COMMAND" in
 
         echo "Adding new tenant '$TENANT_ID'..."
         echo "Initializing database for $TENANT_ID..."
-        initialize_tenant_database "$TENANT_ID" "standard"
+        initialize_tenant_database "$TENANT_ID" "standard" "$PASSWORD_ARG"
         echo "Tenant '$TENANT_ID' successfully added. Ready to use."
         ;;
 
@@ -631,6 +876,9 @@ case "$COMMAND" in
             register_tenant_port "$TENANT_ID" "$PORT_ARG"
             update_runtime_ports "$PORT_ARG"
             sync_tenant_port_map
+            if ! write_tenant_nginx_config "$TENANT_ID" "$PORT_ARG"; then
+                echo "Warning: nginx/certbot provisioning for trial tenant '$TENANT_ID' could not be completed automatically."
+            fi
         fi
 
         write_trial_tenant_config "$TENANT_ID" "$PORT_ARG" "$DAYS_ARG"
@@ -643,92 +891,97 @@ case "$COMMAND" in
         initialize_tenant_database "$TENANT_ID" "trial"
         echo "Trial tenant '$TENANT_ID' successfully configured. It will expire after $DAYS_ARG day(s) and self-delete."
         ;;
-    
+
     remove)
-        FORCE_REMOVE=false
-        TENANT_ARG="${2:-}"
-        
-        if [ "$TENANT_ARG" = "--yes" ] || [ "$TENANT_ARG" = "-y" ]; then
-            FORCE_REMOVE=true
-            TENANT_ID="${3:-}"
-        else
-            TENANT_ID="$TENANT_ARG"
+    FORCE_REMOVE=false
+
+    # Fix: Prüfe sowohl Position 2 als auch 3 auf das -y Flag
+    if [ "${2:-}" = "--yes" ] || [ "${2:-}" = "-y" ]; then
+        FORCE_REMOVE=true
+        TENANT_ID="${3:-}"
+    elif [ "${3:-}" = "--yes" ] || [ "${3:-}" = "-y" ]; then
+        FORCE_REMOVE=true
+        TENANT_ID="${2:-}"
+    else
+        TENANT_ID="${2:-}"
+    fi
+
+    if [ -z "$TENANT_ID" ]; then
+        echo "Error: Please provide a tenant_id to remove."
+        exit 1
+    fi
+
+    if [ "$FORCE_REMOVE" != true ]; then
+        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 "Removal canceled."
+            exit 0
         fi
+    fi
 
-        if [ -z "$TENANT_ID" ]; then
-            echo "Error: Please provide a tenant_id to remove."
-            exit 1
-        fi
-
-        if [ "$FORCE_REMOVE" != true ]; then
-            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 "Removal canceled."
-                exit 0
-            fi
-        fi
-
-        echo "Removing tenant '$TENANT_ID'..."
-        APP_CONTAINER=$(docker ps -qf "name=app" | head -n 1)
-        port_to_remove=""
-        
-        if [ -n "$APP_CONTAINER" ]; then
-            # Zuerst die Datenbank via PyMongo hart droppen (Erzwungenes Löschen)
-            port_to_remove="$(docker exec "$APP_CONTAINER" python3 - "$TENANT_ID" <<'PY'
-import sys, re
-sys.path.insert(0, '/app')
-sys.path.insert(0, '/app/Web')
-from tenant import delete_tenant, get_tenant_config
-from Web.modules.database import settings
-from pymongo import MongoClient
-
-tenant_id = sys.argv[1]
-tenant_cfg = get_tenant_config(tenant_id)
-port = tenant_cfg.get('port')
-
-# Datenbanknamen exakt rekonstruieren
-sanitized = "".join(c for c in tenant_id if c.isalnum() or c == "_")
-db_name = f"inventar_{sanitized}"
+    echo "Removing tenant '$TENANT_ID'..."
+    APP_CONTAINER=$(docker ps -qf "name=app" | head -n 1)
+    port_to_remove=""
 
+    if [ -n "$APP_CONTAINER" ]; then
+        # MongoDB-Datenbank via PyMongo direkt im Container droppen
+        # Fix 1: Wir hängen '|| true' an, damit das Skript nicht abstürzt, falls der Befehl fehlschlägt.
+        docker exec -i "$APP_CONTAINER" python3 -c '
+import sys, os
 try:
-    client = MongoClient(settings.MONGODB_HOST, int(settings.MONGODB_PORT))
-    client.drop_database(db_name)
-    print(f"MongoDB database '{db_name}' dropped successfully.", file=sys.stderr)
+    import pymongo
+    tenant_id = sys.argv[1]
+    # In Docker Compose heißt der Host oft "mongodb" statt "localhost"
+    mongo_uri = os.environ.get("MONGO_URI", "mongodb://mongodb:27017/")
+    client = pymongo.MongoClient(mongo_uri, serverSelectionTimeoutMS=2000)
+
+    # Fix 2: Wir versuchen beide Formate zu löschen, da "list" zeigt, dass sie "test" und nicht "inventar_test" heißen.
+    dbs_to_drop = [f"inventar_{tenant_id}", tenant_id]
+    existing_dbs = client.list_database_names()
+
+    for db_name in dbs_to_drop:
+        if db_name in existing_dbs:
+            client.drop_database(db_name)
+            print(f"Dropped database: {db_name}")
 except Exception as e:
-    print(f"Warning: Could not drop database '{db_name}': {e}", file=sys.stderr)
+    print(f"Error dropping database: {e}", file=sys.stderr)
+' "$TENANT_ID" > /dev/null 2>&1 || true
 
-if not delete_tenant(tenant_id):
-    print(f'Error: failed to delete tenant {tenant_id}', file=sys.stderr)
-    sys.exit(1)
-
-if port is not None:
-    print(port)
-PY
-            )"
-            echo "Tenant '$TENANT_ID' database and config removed."
+        # Konfiguration und Port via Host-Funktion bereinigen und Port ermitteln
+        if port_to_remove="$(remove_tenant_port "$TENANT_ID" 2>/dev/null)"; then
+            :
         else
-            echo "Warning: Application container not running. Tenant database may still exist in MongoDB."
-            if port_to_remove="$(remove_tenant_port "$TENANT_ID" 2>/dev/null)"; then
-                :
-            else
-                echo "Warning: tenant '$TENANT_ID' was not configured in config.json or could not be removed."
-            fi
+            port_to_remove=""
         fi
 
-        if [ -n "$port_to_remove" ]; then
-            remove_runtime_port "$port_to_remove"
-        fi
-        sync_tenant_port_map
-        if [ -n "$(docker ps -qf 'name=app' | head -n 1)" ]; then
-            restart_app_container
-        fi
-        if [ -n "$port_to_remove" ]; then
-            echo "Removed tenant '$TENANT_ID' and cleaned runtime port $port_to_remove."
+        echo "Tenant '$TENANT_ID' database and config removed."
+    else
+        echo "Warning: Application container not running. Tenant database may still exist in MongoDB."
+        if port_to_remove="$(remove_tenant_port "$TENANT_ID" 2>/dev/null)"; then
+            :
         else
-            echo "Removed tenant '$TENANT_ID'. No port mapping was present."
+            echo "Warning: tenant '$TENANT_ID' was not configured in config.json or could not be removed."
         fi
-        ;;
+    fi
+
+    if [ -n "$port_to_remove" ]; then
+        remove_runtime_port "$port_to_remove" 2>/dev/null || true
+    fi
+
+    remove_tenant_nginx_config "$TENANT_ID"
+    sync_tenant_port_map
+
+    if [ -n "$(docker ps -qf 'name=app' | head -n 1)" ]; then
+        restart_app_container || true
+    fi
+
+    if [ -n "$port_to_remove" ]; then
+        echo "Removed tenant '$TENANT_ID' and cleaned runtime port $port_to_remove."
+    else
+        echo "Removed tenant '$TENANT_ID'. No port mapping was present."
+    fi
+    ;;
 
     restart-tenant)
         TENANT_ID="${2:-}"

update.sh

@@ -9,13 +9,13 @@ LOG_DIR="$PROJECT_DIR/logs"
 LOG_FILE="$LOG_DIR/update.log"
 STATE_FILE="$PROJECT_DIR/.release-version"
 REPO_SLUG="Invario/Inventarsystem"
-API_URL="https://git.invario-software.eu/api/v1/repos/$REPO_SLUG/releases/latest"
+API_BASE_URL="https://git.invario-software.eu/api/v1/repos/$REPO_SLUG"
 BUNDLE_ASSET="inventarsystem-docker-bundle.tar.gz"
 ENV_FILE="$PROJECT_DIR/.docker-build.env"
 APP_IMAGE_REPO="git.invario-software.eu/invario/inventarsystem"
 COMPOSE_FILE="docker-compose-multitenant.yml"
 MIN_ROOT_FREE_MB="${INVENTAR_MIN_ROOT_FREE_MB:-2048}"
-MODE="release"
+MODE="stable"
 
 mkdir -p "$LOG_DIR"
 chmod 777 "$LOG_DIR" 2>/dev/null || true
@@ -119,6 +119,7 @@ usage() {
 Usage: $0 [options]
 
 Options:
+  -dev               Install the latest prerelease build
   --multitenant      Use docker-compose-multitenant.yml (default)
   -h, --help         Show this help message
 EOF
@@ -127,6 +128,10 @@ EOF
 parse_args() {
     while [[ $# -gt 0 ]]; do
         case "$1" in
+            -dev)
+                MODE="development"
+                shift
+                ;;
             --multitenant)
                 COMPOSE_FILE="docker-compose-multitenant.yml"
                 shift
@@ -179,7 +184,8 @@ create_backup() {
 
 fetch_release_metadata() {
     local meta_file="$1"
-    curl -fsSL "$API_URL" -o "$meta_file"
+    local endpoint="${2:-latest}"
+    curl -fsSL "$API_BASE_URL/releases/$endpoint" -o "$meta_file"
 }
 
 parse_latest_tag() {
@@ -207,6 +213,124 @@ for asset in data.get('assets', []):
 PY
 }
 
+parse_release_tag() {
+    local meta_file="$1"
+    python3 - <<'PY' "$meta_file"
+import json, sys
+with open(sys.argv[1], 'r', encoding='utf-8') as f:
+    data = json.load(f)
+print(data.get('tag_name', '').strip())
+PY
+}
+
+strip_prerelease_suffix() {
+    local tag="$1"
+    python3 - <<'PY' "$tag"
+import re, sys
+tag = sys.argv[1].strip()
+match = re.match(r'^(v\d+\.\d+\.\d+)', tag)
+print(match.group(1) if match else tag)
+PY
+}
+
+compare_semver_tags() {
+    local left_tag="$1"
+    local right_tag="$2"
+    python3 - <<'PY' "$left_tag" "$right_tag"
+import re, sys
+
+def parse(tag):
+    match = re.match(r'^v(\d+)\.(\d+)\.(\d+)', tag.strip())
+    if not match:
+        return None
+    return tuple(int(part) for part in match.groups())
+
+left = parse(sys.argv[1])
+right = parse(sys.argv[2])
+if left is None or right is None:
+    print('unknown')
+elif left > right:
+    print('gt')
+elif left < right:
+    print('lt')
+else:
+    print('eq')
+PY
+}
+
+parse_prerelease_flag() {
+    local meta_file="$1"
+    python3 - <<'PY' "$meta_file"
+import json, sys
+with open(sys.argv[1], 'r', encoding='utf-8') as f:
+    data = json.load(f)
+print('true' if data.get('prerelease') else 'false')
+PY
+}
+
+latest_stable_release() {
+    local meta_file="$1"
+    local releases_file="$2"
+    local release_count=0
+
+    if ! curl -fsSL "$API_BASE_URL/releases" -o "$releases_file"; then
+        return 1
+    fi
+
+    if ! python3 - <<'PY' "$releases_file" "$meta_file"
+import json, sys
+releases_path, target_path = sys.argv[1], sys.argv[2]
+with open(releases_path, 'r', encoding='utf-8') as f:
+    releases = json.load(f)
+for release in releases:
+    if not release.get('prerelease') and not release.get('draft'):
+        with open(target_path, 'w', encoding='utf-8') as out:
+            json.dump(release, out)
+        raise SystemExit(0)
+raise SystemExit(1)
+PY
+    then
+        return 1
+    fi
+    return 0
+}
+
+latest_prerelease() {
+    local meta_file="$1"
+    local releases_file="$2"
+
+    if ! curl -fsSL "$API_BASE_URL/releases" -o "$releases_file"; then
+        return 1
+    fi
+
+    if ! python3 - <<'PY' "$releases_file" "$meta_file"
+import json, sys
+releases_path, target_path = sys.argv[1], sys.argv[2]
+with open(releases_path, 'r', encoding='utf-8') as f:
+    releases = json.load(f)
+for release in releases:
+    if release.get('prerelease') and not release.get('draft'):
+        with open(target_path, 'w', encoding='utf-8') as out:
+            json.dump(release, out)
+        raise SystemExit(0)
+raise SystemExit(1)
+PY
+    then
+        return 1
+    fi
+    return 0
+}
+
+fetch_latest_release_bundle() {
+    local release_meta="$1"
+    local bundle_url
+    bundle_url="$(parse_asset_url "$release_meta" "$BUNDLE_ASSET")"
+    if [ -z "$bundle_url" ]; then
+        return 1
+    fi
+    printf '%s' "$bundle_url"
+}
+
 refresh_runtime_scripts_from_main() {
     local start_url stop_url restart_url update_url
     start_url="https://git.invario-software.eu/$REPO_SLUG/raw/branch/main/start.sh"
@@ -368,12 +492,66 @@ main() {
     archive_logs
     create_backup
 
-    # If user requested a development install, perform a simple dev deploy flow
+    # If user requested a development install, deploy the latest prerelease.
     if [ "$MODE" = "development" ]; then
         log_message "Requested development install"
-        local tag="dev"
-        local app_image="$APP_IMAGE_REPO:$tag"
-        local compose_path="$PROJECT_DIR/$COMPOSE_FILE"
+        local tag meta_file releases_file stable_meta_file stable_tag prerelease_tag prerelease_base_tag bundle_url app_image compose_path
+        local tmp_dir
+
+        tmp_dir="$(mktemp -d)"
+        meta_file="$tmp_dir/prerelease.json"
+        stable_meta_file="$tmp_dir/stable.json"
+        releases_file="$tmp_dir/releases.json"
+        trap 'rm -rf "${tmp_dir:-}"' EXIT
+
+        if ! fetch_release_metadata "$stable_meta_file" "latest"; then
+            log_message "ERROR: Could not fetch latest stable release metadata"
+            exit 1
+        fi
+
+        stable_tag="$(parse_release_tag "$stable_meta_file")"
+        if [ -z "$stable_tag" ]; then
+            log_message "ERROR: Could not determine latest stable release tag"
+            exit 1
+        fi
+
+        if latest_prerelease "$meta_file" "$releases_file"; then
+            prerelease_tag="$(parse_release_tag "$meta_file")"
+            prerelease_base_tag="$(strip_prerelease_suffix "$prerelease_tag")"
+        else
+            prerelease_tag=""
+            prerelease_base_tag=""
+        fi
+
+        if [ -n "$prerelease_tag" ]; then
+            case "$(compare_semver_tags "$stable_tag" "$prerelease_base_tag")" in
+                gt|eq)
+                    log_message "Latest stable release ($stable_tag) supersedes prerelease ($prerelease_tag); using stable release"
+                    tag="$stable_tag"
+                    meta_file="$stable_meta_file"
+                    ;;
+                lt)
+                    tag="$prerelease_tag"
+                    ;;
+                *)
+                    log_message "WARNING: Could not compare stable and prerelease versions; preferring prerelease when available"
+                    tag="$prerelease_tag"
+                    ;;
+            esac
+        else
+            log_message "No prerelease found; falling back to stable release $stable_tag"
+            tag="$stable_tag"
+            meta_file="$stable_meta_file"
+        fi
+
+        bundle_url="$(fetch_latest_release_bundle "$meta_file")"
+        if [ -z "$bundle_url" ]; then
+            log_message "ERROR: Release asset not found: $BUNDLE_ASSET"
+            exit 1
+        fi
+
+        app_image="$APP_IMAGE_REPO:$tag"
+        compose_path="$PROJECT_DIR/$COMPOSE_FILE"
 
         if [ ! -f "$compose_path" ]; then
             log_message "ERROR: compose file not found: $compose_path"
@@ -399,6 +577,9 @@ EOF
             exit 1
         fi
 
+        download_and_extract_bundle "$bundle_url" "$tmp_dir"
+        refresh_runtime_scripts_from_main
+
         # Bring up stack
         docker compose -f "$compose_path" --env-file "$ENV_FILE" pull mongodb redis >> "$LOG_FILE" 2>&1 || true
         docker compose -f "$compose_path" --env-file "$ENV_FILE" up -d --remove-orphans >> "$LOG_FILE" 2>&1
@@ -409,7 +590,7 @@ EOF
         fi
 
         echo "$tag" > "$STATE_FILE"
-        log_message "Development update completed successfully"
+        log_message "Development update completed successfully to prerelease $tag"
         exit 0
     fi
 
@@ -419,8 +600,8 @@ EOF
 
     trap 'rm -rf "${tmp_dir:-}"' EXIT
 
-    log_message "Checking latest Gitea release for $REPO_SLUG..."
-    if ! fetch_release_metadata "$meta_file"; then
+    log_message "Checking latest stable Gitea release for $REPO_SLUG..."
+    if ! fetch_release_metadata "$meta_file" "latest"; then
         log_message "WARNING: Could not fetch release metadata. Falling back to self-healing start path."
         if INVENTAR_SETUP_CRON=0 bash "$PROJECT_DIR/start.sh" >> "$LOG_FILE" 2>&1; then
             if verify_stack_health; then
@@ -436,7 +617,7 @@ EOF
         exit 0
     fi
 
-    latest_tag="$(parse_latest_tag "$meta_file")"
+    latest_tag="$(parse_release_tag "$meta_file")"
     if [ -z "$latest_tag" ]; then
         log_message "WARNING: Could not determine latest release tag. Falling back to self-healing start path."
         if INVENTAR_SETUP_CRON=0 bash "$PROJECT_DIR/start.sh" >> "$LOG_FILE" 2>&1; then