Cleanup of the front end and backend of the upload function to only allow images and no videos because of space and memory reasons as well as hardening the uploading process.

Configure Quagga2 barcode scanner with environment facing mode
Add fallback keyboardScanKeydownHandler for physical keyboard-wedge scanners
Secure fetch requests by including X-CSRFToken headers
Implement loadRemainingLibraryItemsInBackground for seamless data loading
Refactor showItemDetail to accurately render videos, external URLs, and local uploa

Web/modules/database/items.py

@@ -20,12 +20,30 @@ 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
 
 
+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.
@@ -250,7 +268,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 +279,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,
+            'is_library': is_lib,
+            'library_category': library_category,
+            'Verfuegbar': bool(verfuegbar),
             'LastUpdated': datetime.datetime.now()
         }
 
         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})
 
@@ -1147,4 +1174,122 @@ 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

Web/modules/database/user.py

@@ -211,6 +211,7 @@ PERMISSION_PRESETS = {
         },
         'pages': {
             'home': True,
+            'home_admin': True,
             'tutorial_page': True,
             'my_borrowed_items': True,
             'notifications_view': True,
@@ -369,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
@@ -384,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 []
@@ -399,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()
@@ -414,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()
@@ -496,7 +497,7 @@ 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:
@@ -507,8 +508,6 @@ def check_nm_pwd(username, password):
                     default_users = client[cfg.MONGODB_DB]['users']
                     user_record_fallback = default_users.find_one(
                         {'$or': [
-                            {'Username': dp.encrypt_text(username)},
-                            {'username': dp.encrypt_text(username)},
                             {'Username': username},
                             {'username': username},
                         ]}
@@ -711,9 +710,9 @@ def make_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': 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
 
@@ -723,9 +722,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
 
@@ -737,7 +736,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:
@@ -773,12 +772,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()
@@ -791,7 +790,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:
@@ -806,7 +805,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:
@@ -823,9 +822,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
@@ -840,9 +839,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
@@ -856,7 +855,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"):
@@ -871,7 +870,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"):
@@ -906,12 +905,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}}
             )
 
@@ -933,12 +932,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/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>Unterrichtsfach (Filter 1):</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>Jahrgangsstufe (Filter 2):</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>Schlagwort (Filter 3):</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/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;
@@ -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
@@ -3742,9 +3444,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,163 +3870,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 = {
@@ -4678,7 +4220,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?')">
@@ -4687,7 +4228,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');
@@ -4924,6 +4467,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;
@@ -5350,8 +4900,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) {
@@ -5471,99 +5019,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 '';
@@ -5690,9 +5145,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
     }
 </script>
 
-<!-- Include edit item functions -->
-{% include "edit_item_functions.html" %}
-
 <!-- Include reset item functions -->
 {% include "reset_item_functions.html" %}
 
@@ -5920,16 +5372,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/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,409 @@ 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(--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.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;
+    }
+}
+</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

@@ -249,7 +249,7 @@
 
     <!-- Add/Edit Form -->
     <div class="student-card-form">
-        <h2>{% if edit_mode %}Ausweis bearbeiten{% else %}Neuer Schülerausweis{% endif %}</h2>
+        <h2>{% if edit_mode %}Ausweis bearbeiten{% else %}Neuer Bibliotheksausweis{% endif %}</h2>
         
         <form method="POST" action="{{ url_for('student_cards_admin') }}">
             {% if edit_mode %}

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; 
@@ -916,7 +836,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>
@@ -954,11 +874,13 @@
                 <label for="anschaffungskosten">Anschaffungskosten (€)</label>
                 <input id="anschaffungskosten" name="anschaffungskosten">
             </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>
+
+
+            <!-- Image upload -->
+            <div class="form-group">
+                <label for="images">Bilder:</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>
                 <!-- Add image preview area -->
                 <div class="image-preview-container" id="image-preview-container"></div>
             </div>
@@ -1876,11 +1798,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">
@@ -1893,9 +1815,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) {
@@ -1935,28 +1857,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/')) {
@@ -1971,17 +1890,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);
                     }
                 }
             });
@@ -2047,34 +1955,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 %}