diff --git a/Web/app.py b/Web/app.py
index fda4f2a..c7f21cd 100755
--- a/Web/app.py
+++ b/Web/app.py
@@ -2569,7 +2569,6 @@ def uploaded_file(filename):
         if denied:
             return denied
 
-        # 1. Try serving from MongoDB GridFS first
         try:
             fs = get_gridfs()
             grid_out = fs.find_one({'filename': filename})
@@ -2582,15 +2581,6 @@ def uploaded_file(filename):
         except Exception as grid_err:
             app.logger.warning(f"GridFS lookup failed for {filename}: {grid_err}")
 
-        # 2. Fallback to production path for legacy local files
-        prod_path = "/opt/Inventarsystem/Web/uploads"
-        dev_path = app.config['UPLOAD_FOLDER']
-        if os.path.exists(os.path.join(prod_path, filename)):
-            return send_from_directory(prod_path, filename)
-        # 3. Fallback to development path
-        if os.path.exists(os.path.join(dev_path, filename)):
-            return send_from_directory(dev_path, filename)
-
         # 4. Use a placeholder image if file not found - first try SVG, then PNG
         svg_placeholder_path = os.path.join(app.static_folder, 'img', 'no-image.svg')
         png_placeholder_path = os.path.join(app.static_folder, 'img', 'no-image.png')
@@ -5171,7 +5161,6 @@ def upload_item():
     Returns:
         flask.Response: Redirect to admin homepage
     """
-    # Check if the user is authenticated
     if 'username' not in session:
         return jsonify({'success': False, 'message': 'Nicht angemeldet'}), 401
         
@@ -5182,7 +5171,9 @@ def upload_item():
     permissions = _get_current_user_permissions() or us.build_default_permission_payload('standard_user')
     if not _action_access_allowed(permissions, 'can_insert'):
         return jsonify({'success': False, 'message': 'Einfüge-Rechte erforderlich'}), 403
-        
+
+    fs = get_gridfs()
+
     can_access_admin_home = _page_access_allowed(permissions, 'home_admin') and _action_access_allowed(permissions, 'can_manage_settings')
     if can_access_admin_home:
         success_redirect_endpoint = 'home_admin'
@@ -5269,14 +5260,9 @@ def upload_item():
                     duplicate_images = mobile_data.get('duplicate_images', [])
             except json.JSONDecodeError as e:
                 app.logger.error(f"Error parsing mobile data: {str(e)}")
-    except Exception as e:
-        error_msg = f"Fehler beim Verarbeiten der Formulardaten"
-        app.logger.error(error_msg)
-        if is_mobile:
-            return jsonify({'success': False, 'message': error_msg}), 400
-        else:
-            flash('Fehler beim Verarbeiten der Formulardaten. Bitte versuchen Sie es erneut.', 'error')
-            return redirect(url_for(success_redirect_endpoint))
+    except:
+        flash('Fehler beim Verarbeiten der Formulardaten. Bitte versuchen Sie es erneut.', 'error')
+        return redirect(url_for(success_redirect_endpoint))
 
     # Expand special "all values" selections for predefined filters.
     filter_upload = expand_filter_selection(filter_upload, 1)
@@ -5328,10 +5314,6 @@ def upload_item():
             flash(error_msg, 'error')
             return redirect(url_for(success_redirect_endpoint))
 
-    # -------------------------------------------------------------------
-    # 1. PARSE AND UNIFY CODES
-    # -------------------------------------------------------------------
-    # Assuming `code_4` might come in as a single string or a list depending on your form setup
     primary_code_raw = request.form.get('code_4', '').strip()
     individual_codes_raw = request.form.get('individual_codes', '').strip()
     
@@ -5341,19 +5323,12 @@ def upload_item():
         all_item_codes.append(primary_code_raw)
         
     if individual_codes_raw:
-        # Split textarea by newlines, clean whitespace, and ignore empty lines
         extra_codes = [c.strip() for c in individual_codes_raw.replace('\r', '').split('\n') if c.strip()]
-        
-        # Add to master list, ensuring no duplicates within the submitted list itself
+
         for c in extra_codes:
             if c not in all_item_codes:
                 all_item_codes.append(c)
 
-    # -------------------------------------------------------------------
-    # 2. OVERRIDE ITEM COUNT
-    # -------------------------------------------------------------------
-    # If the user scanned/generated codes, the amount of codes IS the item count.
-    # Otherwise, fallback to a manual item_count field if it exists.
     if len(all_item_codes) > 0:
         item_count = len(all_item_codes)
     else:
@@ -5362,9 +5337,6 @@ def upload_item():
         except ValueError:
             item_count = 1
 
-    # -------------------------------------------------------------------
-    # 3. IMAGE VALIDATION
-    # -------------------------------------------------------------------
     if upload_mode != 'library' and not is_duplicating and not images and not duplicate_images and not book_cover_image:
         error_msg = 'Bitte laden Sie mindestens ein Bild hoch'
         if is_mobile:
@@ -5373,14 +5345,9 @@ def upload_item():
             flash(error_msg, 'error')
             return redirect(url_for(success_redirect_endpoint))
 
-    # -------------------------------------------------------------------
-    # 4. UNIFIED DB UNIQUENESS VALIDATION
-    # -------------------------------------------------------------------
-    # Validate every code in our master list against the database
     for code in all_item_codes:
         if not it.is_code_unique(code):
             app.logger.info(f"DEBUG: Code '{code}' is not unique.")
-            # Special case: If they only uploaded ONE item, redirect them to that existing item
             if item_count == 1:
                 existing_item = it._get_items_collection().find_one({"code_4": code})
                 if existing_item:
@@ -5395,8 +5362,7 @@ def upload_item():
                     
                     flash(error_msg, 'info')
                     return redirect(url_for(success_redirect_endpoint, open_item=str(existing_item['_id'])))
-            
-            # If multiple items are being uploaded, just throw a standard error
+
             error_msg = f'Der Code "{code}" wird bereits von einem anderen Artikel verwendet. Bitte überprüfen Sie Ihre Eingaben.'
             if is_mobile:
                 return jsonify({'success': False, 'message': error_msg}), 400
@@ -5404,9 +5370,6 @@ def upload_item():
                 flash(error_msg, 'error')
                 return redirect(url_for(success_redirect_endpoint))
 
-    # -------------------------------------------------------------------
-    # 5. BATCH CODE GENERATOR (Remains mostly unchanged)
-    # -------------------------------------------------------------------
     def generate_unique_batch_code(base_code, position):
         """Generate a unique code for every item in a batch if no specific code is provided."""
         if not base_code:
@@ -5424,7 +5387,6 @@ def upload_item():
             suffix += 1
         return None
 
-    # Process any new uploaded images with robust error handling
     image_filenames = []
     processed_count = 0
     error_count = 0
@@ -5433,650 +5395,190 @@ def upload_item():
     # Create a structured log entry for upload session
     upload_session_id = str(uuid.uuid4())[:8]
     app.logger.info(f"Starting image upload session {upload_session_id} - Files: {len(images)}, User: {encrypt_text(username)}")
-    
-    # Ensure all required directories exist
-    for directory in [app.config['UPLOAD_FOLDER']]:
-        try:
-            os.makedirs(directory, exist_ok=True)
-        except Exception as e:
-            app.logger.error(f"Failed to create directory {directory}: {str(e)}")
-    
-    # Process each image independently
+
     for index, image in enumerate(images):
-        # In library mode, skip manual image uploads (use only book_cover_image from ISBN fetch)
         if upload_mode == 'library':
-            app.logger.info(f"[Library Mode] Skipping manual image upload {index+1}/{len(images)}")
+            app.logger.info(f"[Upload {upload_session_id}] Skipping manual upload (Library Mode)")
             skipped_count += 1
             continue
-        
-        image_log_prefix = f"[Upload {upload_session_id}][Image {index+1}/{len(images)}]"
-        
-        if not image or not image.filename or image.filename == '':
-            app.logger.warning(f"{image_log_prefix} Empty file or filename")
+
+        if not image or not image.filename:
             skipped_count += 1
             continue
-            
-        # Get file extension for special handling
-        _, file_ext = os.path.splitext(image.filename.lower())
-        is_png = file_ext.lower() == '.png'
-        
-        if is_png:
-            app.logger.info(f"PNG DEBUG: {image_log_prefix} Detected PNG file: {image.filename}")
-            # Check file size
-            image.seek(0, os.SEEK_END)
-            file_size = image.tell() / (1024 * 1024)  # Size in MB
-            image.seek(0)  # Reset file pointer
-            app.logger.info(f"PNG DEBUG: {image_log_prefix} PNG file size: {file_size:.2f}MB")
-            
-            # Check first few bytes for PNG signature and analyze header
-            header_bytes = image.read(64)  # Read more for thorough analysis
-            image.seek(0)  # Reset pointer
-            png_signature = b'\x89PNG\r\n\x1a\n'
-            is_valid_signature = header_bytes.startswith(png_signature)
-            
-            # Create a hex dump of header for debugging
-            hex_dump = ' '.join([f"{b:02x}" for b in header_bytes[:32]])
-            app.logger.info(f"PNG DEBUG: {image_log_prefix} PNG header hex: {hex_dump}")
-            app.logger.info(f"PNG DEBUG: {image_log_prefix} PNG signature valid: {is_valid_signature}, bytes: {header_bytes[:8]!r}")
-            
-            # Analyze PNG chunks if signature is valid
-            if is_valid_signature:
-                try:
-                    # Look for IHDR chunk that should follow the signature
-                    if header_bytes[8:12] == b'IHDR':
-                        # Extract width and height from IHDR chunk (bytes 16-23)
-                        import struct
-                        width = struct.unpack('>I', header_bytes[16:20])[0]
-                        height = struct.unpack('>I', header_bytes[20:24])[0]
-                        bit_depth = header_bytes[24]
-                        color_type = header_bytes[25]
-                        app.logger.info(f"PNG DEBUG: {image_log_prefix} PNG dimensions from header: {width}x{height}, bit depth: {bit_depth}, color type: {color_type}")
-                    else:
-                        app.logger.warning(f"PNG DEBUG: {image_log_prefix} Expected IHDR chunk not found. Found: {header_bytes[8:12]!r}")
-                except Exception as chunk_err:
-                    app.logger.error(f"PNG DEBUG: {image_log_prefix} Error analyzing PNG chunks: {str(chunk_err)}")
-            else:
-                app.logger.error(f"PNG DEBUG: {image_log_prefix} Invalid PNG signature!")
-        
+
+        image_log_prefix = f"[Upload {upload_session_id}][Image {index + 1}/{len(images)}]"
         app.logger.info(f"{image_log_prefix} Processing: {image.filename}")
-        
+
         try:
-            # Comprehensive file validation with detailed logging
+            # 1. Validation
             is_allowed, error_message = allowed_file(image.filename, image, max_size_mb=cfg.IMAGE_MAX_UPLOAD_MB)
-            
             if not is_allowed:
                 app.logger.warning(f"{image_log_prefix} Validation failed: {error_message}")
-                if is_png:
-                    app.logger.error(f"PNG DEBUG: {image_log_prefix} PNG validation failed: {error_message}")
                 skipped_count += 1
                 if not is_mobile:
                     flash(error_message, 'error')
                 continue
-                
-            # Get the file extension for content type determination
+
             secure_name = secure_filename(image.filename)
-            _, ext_part = os.path.splitext(secure_name)
-            is_png = ext_part.lower() == '.png'
-            
-            # Generate a completely unique filename using UUID
-            unique_id = str(uuid.uuid4())
-            timestamp = time.strftime("%Y%m%d%H%M%S")
-            
-            # New filename format with UUID to ensure uniqueness
-            saved_filename = f"{unique_id}_{timestamp}{ext_part}"
-            app.logger.info(f"{image_log_prefix} Assigned unique filename: {saved_filename}")
-            
-            if is_png:
-                app.logger.info(f"PNG DEBUG: {image_log_prefix} Creating PNG with filename: {saved_filename}")
-            
-            # For iOS devices, we need special handling for the file save
-            if is_ios:
-                app.logger.info(f"{image_log_prefix} Using iOS-specific file handling")
-                # Save to a temporary file first to avoid iOS stream issues
-                temp_path = os.path.join(app.config['UPLOAD_FOLDER'], f"temp_{saved_filename}")
-                
-                try:
-                    if is_png:
-                        app.logger.info(f"PNG DEBUG: {image_log_prefix} Using iOS PNG save method")
-                        # Before saving, verify the file content again
-                        try:
-                            image.seek(0)
-                            pre_save_data = image.read(16)
-                            image.seek(0)
-                            pre_save_hex = ' '.join([f"{b:02x}" for b in pre_save_data])
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Pre-save data: {pre_save_hex}")
-                        except Exception as pre_err:
-                            app.logger.error(f"PNG DEBUG: {image_log_prefix} Error checking pre-save data: {str(pre_err)}")
-                    
-                    # For PNGs, try a direct binary save first
-                    if is_png:
-                        try:
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Attempting binary save for iOS PNG")
-                            image.seek(0)
-                            png_data = image.read()
-                            with open(temp_path, 'wb') as f:
-                                f.write(png_data)
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Binary write complete, size: {len(png_data)} bytes")
-                        except Exception as bin_err:
-                            app.logger.error(f"PNG DEBUG: {image_log_prefix} Binary write failed: {str(bin_err)}")
-                            # Fall back to normal save
-                            image.seek(0)
-                            image.save(temp_path)
-                    else:
-                        image.save(temp_path)
-                    
-                    # Validate the saved file
-                    if os.path.exists(temp_path) and os.path.getsize(temp_path) > 0:
-                        if is_png:
-                            file_size = os.path.getsize(temp_path)
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Temp PNG file saved successfully: {file_size/1024:.1f}KB")
-                            
-                            # Verify it's a valid PNG
-                            try:
-                                with open(temp_path, 'rb') as f:
-                                    png_header = f.read(16)
-                                    png_signature = b'\x89PNG\r\n\x1a\n'
-                                    is_valid = png_header.startswith(png_signature)
-                                    
-                                    header_hex = ' '.join([f"{b:02x}" for b in png_header])
-                                    app.logger.info(f"PNG DEBUG: {image_log_prefix} Saved file header: {header_hex}")
-                                    
-                                    if not is_valid:
-                                        app.logger.error(f"PNG DEBUG: {image_log_prefix} Invalid PNG signature in saved file!")
-                                    else:
-                                        app.logger.info(f"PNG DEBUG: {image_log_prefix} Valid PNG signature confirmed in saved file")
-                                        
-                                    # Try opening with PIL to confirm it's valid
-                                    try:
-                                        with Image.open(temp_path) as img:
-                                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Saved PNG validates with PIL: {img.format} {img.size}")
-                                    except Exception as pil_err:
-                                        app.logger.error(f"PNG DEBUG: {image_log_prefix} Saved PNG fails PIL validation: {str(pil_err)}")
-                                        
-                            except Exception as verify_err:
-                                app.logger.error(f"PNG DEBUG: {image_log_prefix} Error verifying PNG: {str(verify_err)}")
-                        
-                        # Rename to the final filename
-                        final_path = os.path.join(app.config['UPLOAD_FOLDER'], saved_filename)
-                        os.rename(temp_path, final_path)
-                        app.logger.info(f"{image_log_prefix} Successfully saved via iOS handler: {os.path.getsize(final_path)/1024:.1f}KB")
-                    else:
-                        if is_png:
-                            app.logger.error(f"PNG DEBUG: {image_log_prefix} Failed to save temp PNG file (zero size or missing)")
-                        raise Exception("Failed to save image file (zero size or missing)")
-                except Exception as e:
-                    app.logger.error(f"{image_log_prefix} iOS save failed: {str(e)}")
-                    if is_png:
-                        app.logger.error(f"PNG DEBUG: {image_log_prefix} iOS PNG save failed: {str(e)}")
-                        app.logger.error(f"PNG DEBUG: {image_log_prefix} Error type: {type(e).__name__}")
-                        # Log full traceback for PNG errors
-                        import io
-                        tb_output = io.StringIO()
-                        traceback.print_exc(file=tb_output)
-                        app.logger.error(f"PNG DEBUG: {image_log_prefix} Full traceback:\n{tb_output.getvalue()}")
-                    
-                    # Try regular save as fallback
-                    try:
-                        image.seek(0)  # Reset file pointer
-                        if is_png:
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Attempting fallback PNG save method")
-                        
-                        image.save(os.path.join(app.config['UPLOAD_FOLDER'], saved_filename))
-                        app.logger.info(f"{image_log_prefix} Fallback save successful")
-                        
-                        if is_png:
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Fallback PNG save successful")
-                    except Exception as fallback_err:
-                        app.logger.error(f"{image_log_prefix} Fallback save also failed: {str(fallback_err)}")
-                        if is_png:
-                            app.logger.error(f"PNG DEBUG: {image_log_prefix} Fallback PNG save also failed: {str(fallback_err)}")
-                            app.logger.error(f"PNG DEBUG: {image_log_prefix} Error type: {type(fallback_err).__name__}")
-                            
-                        error_count += 1
-                        continue
-            else:
-                # Regular file save for non-iOS devices
-                try:
-                    if is_png:
-                        app.logger.info(f"PNG DEBUG: {image_log_prefix} Using standard PNG save method")
-                        
-                        # Check file content before saving
-                        try:
-                            image.seek(0)
-                            pre_save_data = image.read(16)
-                            image.seek(0)
-                            pre_save_hex = ' '.join([f"{b:02x}" for b in pre_save_data])
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Pre-save data: {pre_save_hex}")
-                            
-                            # Check if it's really a PNG
-                            png_signature = b'\x89PNG\r\n\x1a\n'
-                            if not pre_save_data.startswith(png_signature):
-                                app.logger.error(f"PNG DEBUG: {image_log_prefix} File does not have valid PNG signature before save!")
-                        except Exception as pre_err:
-                            app.logger.error(f"PNG DEBUG: {image_log_prefix} Error checking pre-save data: {str(pre_err)}")
-                        
-                        # Try an alternative saving method for PNGs with detailed error tracking
-                        try:
-                            # Read the image data directly
-                            image.seek(0)
-                            image_data = image.read()
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Read {len(image_data)} bytes of PNG data")
-                            
-                            # Write it manually to file
-                            save_path = os.path.join(app.config['UPLOAD_FOLDER'], saved_filename)
-                            with open(save_path, 'wb') as f:
-                                f.write(image_data)
-                            
-                            file_size = os.path.getsize(save_path)
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Direct binary PNG write successful: {file_size/1024:.1f}KB")
-                            
-                            # Verify the saved file
-                            try:
-                                with open(save_path, 'rb') as f:
-                                    saved_header = f.read(16)
-                                    header_hex = ' '.join([f"{b:02x}" for b in saved_header])
-                                    app.logger.info(f"PNG DEBUG: {image_log_prefix} Saved PNG header: {header_hex}")
-                                    
-                                    is_valid = saved_header.startswith(png_signature)
-                                    app.logger.info(f"PNG DEBUG: {image_log_prefix} Saved PNG has valid signature: {is_valid}")
-                                    
-                                    if is_valid:
-                                        # Additional validation with PIL
-                                        try:
-                                            with Image.open(save_path) as img:
-                                                app.logger.info(f"PNG DEBUG: {image_log_prefix} Saved PNG validates with PIL: {img.format} {img.size}")
-                                        except Exception as pil_err:
-                                            app.logger.error(f"PNG DEBUG: {image_log_prefix} Saved PNG fails PIL validation: {str(pil_err)}")
-                            except Exception as verify_err:
-                                app.logger.error(f"PNG DEBUG: {image_log_prefix} Error verifying saved PNG: {str(verify_err)}")
-                            
-                        except Exception as png_write_err:
-                            app.logger.error(f"PNG DEBUG: {image_log_prefix} Direct PNG write failed: {str(png_write_err)}")
-                            app.logger.error(f"PNG DEBUG: {image_log_prefix} Error type: {type(png_write_err).__name__}")
-                            
-                            # Log traceback for PNG errors
-                            import io
-                            tb_output = io.StringIO()
-                            traceback.print_exc(file=tb_output)
-                            app.logger.error(f"PNG DEBUG: {image_log_prefix} Binary write traceback:\n{tb_output.getvalue()}")
-                            
-                            # Fall back to standard method
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Attempting standard PIL save method")
-                            image.seek(0)
-                            image.save(os.path.join(app.config['UPLOAD_FOLDER'], saved_filename))
-                    else:
-                        # Standard save for non-PNG files
-                        image.save(os.path.join(app.config['UPLOAD_FOLDER'], saved_filename))
-                    
-                    app.logger.info(f"{image_log_prefix} Standard save successful")
-                except Exception as save_err:
-                    app.logger.error(f"{image_log_prefix} Failed to save file: {str(save_err)}")
-                    if is_png:
-                        app.logger.error(f"PNG DEBUG: {image_log_prefix} Standard PNG save failed: {str(save_err)}")
-                        app.logger.error(f"PNG DEBUG: {image_log_prefix} Error type: {type(save_err).__name__}")
-                        
-                        # Log traceback for PNG errors
-                        import io
-                        tb_output = io.StringIO()
-                        traceback.print_exc(file=tb_output)
-                        app.logger.error(f"PNG DEBUG: {image_log_prefix} Standard save traceback:\n{tb_output.getvalue()}")
-                        
-                        # Try one last method - save as a different format
-                        try:
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Attempting last resort conversion to WebP")
-                            image.seek(0)
-                            
-                            # Try to convert PNG to WebP as a last resort
-                            with Image.open(image) as img:
-                                # Ensure RGBA for transparency
-                                if img.mode != 'RGBA':
-                                    img = img.convert('RGBA')
-                                webp_path = os.path.splitext(os.path.join(app.config['UPLOAD_FOLDER'], saved_filename))[0] + '.webp'
-                                img.save(webp_path, 'WEBP')
-                                app.logger.info(f"PNG DEBUG: {image_log_prefix} Successfully saved as WebP instead: {webp_path}")
-                                # Update the saved_filename to reflect the new extension
-                                saved_filename = os.path.basename(webp_path)
-                        except Exception as webp_err:
-                            app.logger.error(f"PNG DEBUG: {image_log_prefix} Final WebP conversion failed: {str(webp_err)}")
-                            
-                        
-                    error_count += 1
-                    continue
-            
-            # Verify the file was saved correctly
-            saved_path = os.path.join(app.config['UPLOAD_FOLDER'], saved_filename)
-            if not os.path.exists(saved_path) or os.path.getsize(saved_path) == 0:
-                app.logger.error(f"{image_log_prefix} Saved file is missing or empty: {saved_path}")
-                if is_png:
-                    app.logger.error(f"PNG DEBUG: {image_log_prefix} Saved PNG is missing or empty: {saved_path}")
-                error_count += 1
-                continue
-            
-            # Special verification for PNG files
-            if is_png:
-                try:
-                    app.logger.info(f"PNG DEBUG: {image_log_prefix} Verifying saved PNG: {saved_path}")
-                    saved_size = os.path.getsize(saved_path) / 1024.0  # in KB
-                    app.logger.info(f"PNG DEBUG: {image_log_prefix} Saved PNG size: {saved_size:.1f}KB")
-                    
-                    # Check file integrity by trying to open it
-                    try:
-                        with Image.open(saved_path) as img:
-                            png_width, png_height = img.size
-                            png_mode = img.mode
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Saved PNG valid: {png_width}x{png_height}, mode: {png_mode}")
-                    except Exception as png_verify_err:
-                        app.logger.error(f"PNG DEBUG: {image_log_prefix} PNG verification failed: {str(png_verify_err)}")
-                        
-                        # Try to fix by copying from the original
-                        try:
-                            image.seek(0)
-                            with open(saved_path, 'wb') as f:
-                                f.write(image.read())
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Attempted to fix PNG by direct copy")
-                        except Exception as png_fix_err:
-                            app.logger.error(f"PNG DEBUG: {image_log_prefix} PNG fix attempt failed: {str(png_fix_err)}")
-                except Exception as e:
-                    app.logger.error(f"PNG DEBUG: {image_log_prefix} PNG verification error: {str(e)}")
-            
-            # Generate optimized versions (thumbnails and previews)
-            optimization_success = False
-            try:
-                # Log original file size before optimization
-                original_path = os.path.join(app.config['UPLOAD_FOLDER'], saved_filename)
-                original_size = os.path.getsize(original_path)
-                
-                # Get original image dimensions
-                original_dimensions = "unknown"
-                try:
-                    with Image.open(original_path) as img:
-                        original_dimensions = f"{img.width}x{img.height}"
-                        if is_png:
-                            app.logger.info(f"PNG DEBUG: {image_log_prefix} Original PNG dimensions: {original_dimensions}, mode: {img.mode}")
-                except Exception as dim_err:
-                    app.logger.warning(f"{image_log_prefix} Could not get image dimensions: {str(dim_err)}")
-                    if is_png:
-                        app.logger.error(f"PNG DEBUG: {image_log_prefix} Could not get PNG dimensions: {str(dim_err)}")
-                        app.logger.error(f"PNG DEBUG: {image_log_prefix} Error type: {type(dim_err).__name__}")
-                        
-                
-                app.logger.info(f"{image_log_prefix} Starting optimization for {saved_filename} ({original_size/1024:.1f}KB, {original_dimensions})")
-                
-                # PNG-specific optimization options
-                if is_png:
-                    app.logger.info(f"PNG DEBUG: {image_log_prefix} Starting PNG optimization")
-                    # For PNGs, we might need different parameters
-                    optimization_result = generate_optimized_versions(
-                        saved_filename, 
-                        max_original_width=500, 
-                        target_size_kb=100,  # Higher target for PNGs to maintain transparency
-                        debug_prefix=f"PNG DEBUG: {image_log_prefix}"
-                    )
-                else:
-                    # Standard optimization for non-PNG images
-                    optimization_result = generate_optimized_versions(saved_filename, max_original_width=500, target_size_kb=80)
-                
-                # Log file size after optimization
-                if optimization_result['success'] and optimization_result['original']:
-                    optimized_name = optimization_result['original']
-                    optimized_path = os.path.join(app.config['UPLOAD_FOLDER'], optimized_name)
-                    
-                    if os.path.exists(optimized_path):
-                        optimized_size = os.path.getsize(optimized_path)
-                        reduction = (1 - (optimized_size / original_size)) * 100 if original_size > 0 else 0
-                        
-                        # Get optimized dimensions
-                        optimized_dimensions = "unknown"
-                        try:
-                            with Image.open(optimized_path) as img:
-                                optimized_dimensions = f"{img.width}x{img.height}"
-                        except Exception as dim_err:
-                            app.logger.warning(f"{image_log_prefix} Could not get optimized dimensions: {str(dim_err)}")
-                            
-                        app.logger.info(
-                            f"{image_log_prefix} Optimization results:\n"
-                            f"  File: {saved_filename} → {optimized_name}\n"
-                            f"  Size: {original_size/1024:.1f}KB → {optimized_size/1024:.1f}KB ({reduction:.1f}% reduction)\n"
-                            f"  Dimensions: {original_dimensions} → {optimized_dimensions}"
-                        )
-                        
-                        # Use the optimized filename
-                        saved_filename = optimized_name
-                    else:
-                        app.logger.warning(f"{image_log_prefix} Optimized file reported success but not found: {optimized_path}")
-                else:
-                    app.logger.warning(f"{image_log_prefix} Optimization failed or returned no file")
-            except Exception as e:
-                app.logger.error(f"{image_log_prefix} Optimization failed: {str(e)}")
-                
-                # No fallback thumbnail generation needed as we only use the main image
-            
-            # Always add the filename to our list even if optimization failed
-            # We'll use the original in that case
-            image_filenames.append(saved_filename)
+
+            # 2. Read directly into memory (Bypasses OS-level file quirks and iOS temp-file bugs)
+            image_bytes = image.read()
+
+            # 3. Process, standardize, and optimize using Pillow in-memory
+            optimized_io = io.BytesIO()
+            with Image.open(io.BytesIO(image_bytes)) as img:
+                # Ensure safe color mode
+                if img.mode not in ('RGB', 'RGBA'):
+                    img = img.convert('RGBA')
+
+                # Standardize dimensions (e.g., max width 500px)
+                max_width = 500
+                if img.width > max_width:
+                    ratio = max_width / img.width
+                    new_size = (max_width, int(img.height * ratio))
+                    img = img.resize(new_size, Image.Resampling.LANCZOS)
+
+                # Export as WebP to a memory buffer
+                # (WebP naturally handles transparency, drastically reduces size, and bypasses PNG signature corruption)
+                img.save(optimized_io, format='WEBP', quality=85, optimize=True)
+
+            optimized_io.seek(0)
+
+            new_filename = f"{uuid.uuid4().hex}_{int(time.time())}.webp"
+
+            file_id = fs.put(
+                optimized_io,
+                filename=new_filename,
+                content_type='image/webp',
+                metadata={
+                    'original_filename': secure_name,
+                    'upload_session': upload_session_id
+                }
+            )
+
+            image_filenames.append(file_id)
             processed_count += 1
-            app.logger.info(f"{image_log_prefix} Successfully processed")
-            
+
+            final_size_kb = len(optimized_io.getvalue()) / 1024
+            app.logger.info(
+                f"{image_log_prefix} Saved to GridFS as {new_filename} | ID: {file_id} | Size: {final_size_kb:.1f}KB")
+
         except Exception as e:
-            app.logger.error(f"{image_log_prefix} Unexpected error: {str(e)}")
+            app.logger.error(f"{image_log_prefix} Processing failed: {str(e)}")
             error_count += 1
-            # Continue with the next image
-    
-    # Log summary of upload session
+
     app.logger.info(f"Upload session {upload_session_id} completed: {processed_count} processed, {error_count} errors, {skipped_count} skipped")
 
-    # Handle duplicate images if duplicating
+    # 1. Duplikate verarbeiten (Direkt via MongoDB / GridFS)
     if duplicate_images:
-        app.logger.info(f"Processing {len(duplicate_images)} duplicate images: {duplicate_images}")
-        
-        # For mobile browsers, we need to verify the duplicate images exist first
-        verified_duplicates = []
-        for dup_img in duplicate_images:
-            # Try looking in different paths
-            # Add all possible paths where images might be stored
-            dev_upload_path = app.config['UPLOAD_FOLDER']
-            prod_upload_path = '/var/Inventarsystem/Web/uploads'
-            
-            # Also look for image variations with suffixes that might be in the path
-            name_part, ext_part = os.path.splitext(dup_img)
-            possible_filenames = [
-                dup_img,
-                f"{name_part}.webp", # Check WebP first
-                f"{name_part}.jpg",  # In case it was converted to JPG
-                f"{name_part}.png",  # In case it was saved as PNG
-            ]
-            
-            possible_paths = []
-            for filename in possible_filenames:
-                possible_paths.extend([
-                    os.path.join(dev_upload_path, filename),  # Development upload path
-                    os.path.join(prod_upload_path, filename),  # Production upload path
-                ])
-            
-            app.logger.info(f"Looking for duplicate image {dup_img} in paths: {possible_paths}")
-            
-            # Try to find the original image
-            found = False
-            for path in possible_paths:
-                if os.path.exists(path) and os.path.isfile(path):
-                    verified_duplicates.append((dup_img, path))
-                    app.logger.info(f"Found duplicate image at: {path}")
-                    found = True
-                    break
-            
-            if not found:
-                app.logger.warning(f"Duplicate image not found: {dup_img}")
-                # Try to find any image with a similar filename (removing size or resolution parts)
-                # This handles cases where the filename may have variations like "_800" suffix
-                base_name = os.path.splitext(dup_img)[0]
-                base_name = re.sub(r'_\d+$', '', base_name)  # Remove trailing _NUMBER
-                
-                if len(base_name) > 5:  # Only if we have a meaningful base name
-                    app.logger.info(f"Trying to find similar images with base name: {base_name}")
-                    
-                    # Search in development directory
-                    dev_files = os.listdir(app.config['UPLOAD_FOLDER']) if os.path.exists(app.config['UPLOAD_FOLDER']) else []
-                    # Search in production directory
-                    prod_path = "/var/Inventarsystem/Web/uploads"
-                    prod_files = os.listdir(prod_path) if os.path.exists(prod_path) else []
-                    
-                    # Combine all files
-                    all_files = dev_files + prod_files
-                    
-                    # Find similar files
-                    for f in all_files:
-                        if base_name in f:
-                            img_path = os.path.join(app.config['UPLOAD_FOLDER'], f)
-                            if not os.path.exists(img_path):
-                                img_path = os.path.join(prod_path, f)
-                            
-                            if os.path.exists(img_path) and os.path.isfile(img_path):
-                                app.logger.info(f"Found similar image: {f} at {img_path}")
-                                verified_duplicates.append((f, img_path))
-                                found = True
-                                break
-                
-                # If we still can't find anything, just use a placeholder
-                if not found:
-                    app.logger.warning(f"Could not find any similar image for: {dup_img}, will use placeholder")
-        
-        # Create copies of verified images with new unique filenames
+        app.logger.info(f"Processing {len(duplicate_images)} duplicate images from GridFS: {duplicate_images}")
         duplicate_image_copies = []
-        
-        # Create a placeholder name for each image that wasn't found
         placeholder_used = False
-        original_count = len(duplicate_images)
-        
-        # Process each original image - either use found file or placeholder
+
         for i, dup_img in enumerate(duplicate_images):
-            # Look for corresponding verified image
-            found_image = None
-            for verified_img, src_path in verified_duplicates:
-                if verified_img == dup_img:
-                    found_image = (verified_img, src_path)
-                    break
-            
             try:
-                # Generate a new unique filename (same for real or placeholder)
-                unique_id = str(uuid.uuid4())
-                timestamp = time.strftime("%Y%m%d%H%M%S")
-                _, ext_part = os.path.splitext(dup_img) if dup_img else '.jpg'
-                new_filename = f"{unique_id}_{timestamp}{ext_part}"
-                
-                # If we found the image, copy it
-                if found_image:
-                    dup_img, src_path = found_image
-                    app.logger.info(f"Copying image {i+1}/{original_count} from {src_path} to {new_filename}")
-                    
-                    # Copy the image file to the new name
-                    dst_path = os.path.join(app.config['UPLOAD_FOLDER'], new_filename)
-                    
-                    # Make sure the target directory exists
-                    os.makedirs(os.path.dirname(dst_path), exist_ok=True)
-                    
-                    # Copy the file
-                    shutil.copy2(src_path, dst_path)
-                    
-                    # Verify the file was copied successfully
-                    if os.path.exists(dst_path):
-                        app.logger.info(f"Successfully copied image to {dst_path}")
-                    else:
-                        app.logger.error(f"Failed to copy image to {dst_path}")
-                        # If copy fails, use placeholder
-                        raise Exception("Copy failed - will use placeholder")
-                    
-                    # Generate optimized versions (thumbnails and previews) for the new copy
-                    try:
-                        result = generate_optimized_versions(new_filename, max_original_width=500, target_size_kb=80)
-                        app.logger.info(f"Generated optimized versions: {result}")
-                        if result['success'] and result['original']:
-                            new_filename = result['original']
-                    except Exception as e:
-                        app.logger.error(f"Error generating optimized versions for {new_filename}: {e}")
-                        # If optimization fails, at least keep the original file
-                        result = {'original': new_filename}
-                        
-                
-                # If we didn't find the image, use a placeholder
+                # Suche das Originalbild direkt in der GridFS-Datenbank
+                existing_file = fs.find_one({"filename": dup_img})
+
+                # Fallback: Falls der exakte Name nicht gefunden wird, suche über Regex nach dem Basisnamen
+                if not existing_file:
+                    base_name = re.sub(r'_\d+(?=\.[^.]+$)', '', dup_img)  # Entfernt Suffixe wie _800
+                    base_name_no_ext = os.path.splitext(base_name)[0]
+
+                    if len(base_name_no_ext) > 5:
+                        app.logger.info(f"Trying regex search for base name: {base_name_no_ext}")
+                        existing_file = fs.find_one({"filename": {"$regex": f"^{re.escape(base_name_no_ext)}"}})
+
+                new_filename = f"{uuid.uuid4().hex}_{int(time.time())}.webp"
+
+                if existing_file:
+                    app.logger.info(f"Found image in GridFS for {dup_img}. Duplicating...")
+                    # Bilddaten in den Speicher laden und direkt als neue Datei in GridFS ablegen
+                    image_data = existing_file.read()
+
+                    fs.put(
+                        image_data,
+                        filename=new_filename,
+                        content_type=existing_file.content_type,
+                        metadata={'original_duplicate_of': dup_img}
+                    )
+                    duplicate_image_copies.append(new_filename)
+                    processed_count += 1
                 else:
-                    app.logger.warning(f"Using placeholder for image {i+1}/{original_count} (original: {dup_img})")
-                    
-                    # Copy placeholder to uploads directory with the new filename
-                    placeholder_path = os.path.join(app.static_folder, 'img', 'no-image.svg')
-                    if not os.path.exists(placeholder_path):
-                        placeholder_path = os.path.join(app.static_folder, 'img', 'no-image.png')
-                    
+                    app.logger.warning(f"Could not find {dup_img} in GridFS. Using placeholder.")
+                    placeholder_path = os.path.join(app.static_folder, 'img', 'no-image.png')
+
                     if os.path.exists(placeholder_path):
-                        dst_path = os.path.join(app.config['UPLOAD_FOLDER'], new_filename)
-                        shutil.copy2(placeholder_path, dst_path)
-                        app.logger.info(f"Copied placeholder image to {dst_path}")
+                        with open(placeholder_path, 'rb') as pf:
+                            placeholder_data = pf.read()
+
+                        fs.put(
+                            placeholder_data,
+                            filename=new_filename,
+                            content_type='image/png',
+                            metadata={'is_placeholder': True}
+                        )
+                        duplicate_image_copies.append(new_filename)
                         placeholder_used = True
-                        
-                        # Skip the optimization step for placeholder images
-                        # Just add directly to the list of image filenames
-                        continue
-                    else:
-                        app.logger.error(f"Placeholder image not found at {placeholder_path}")
-                        # Create a simple placeholder file
-                        with open(os.path.join(app.config['UPLOAD_FOLDER'], new_filename), 'w') as f:
-                            f.write("Placeholder")
-                        placeholder_used = True
-                        # Skip the optimization step
-                        continue
-                
-                # Add the new filename to our list (either copied or placeholder)
-                duplicate_image_copies.append(new_filename)
-                processed_count += 1
-                
-                app.logger.info(f"Processed image {i+1}/{original_count}: {new_filename}")
+
             except Exception as e:
-                app.logger.error(f"Error processing image {i+1}/{original_count} ({dup_img}): {str(e)}")
-                
+                app.logger.error(f"Error duplicating image {dup_img}: {str(e)}")
                 error_count += 1
-        
-        # Log placeholder usage
+
         if placeholder_used:
-            app.logger.warning(f"Used placeholders for some missing images during duplication")
-        
-        # Log if no images were processed
-        if not duplicate_image_copies:
-            app.logger.warning(f"No duplicate images were processed")
-            if duplicate_images:
-                app.logger.warning(f"Original had {len(duplicate_images)} images, but none were copied")
-        
-        # Add the new image copies to our list of filenames
+            app.logger.warning("Used placeholders for some missing images during duplication")
+
         image_filenames.extend(duplicate_image_copies)
 
-    # Handle book cover image if provided
+    # 2. Buchcover verarbeiten
     if book_cover_image:
-        # Verify the book cover image exists
-        full_path = os.path.join(app.config['UPLOAD_FOLDER'], book_cover_image)
-        if os.path.exists(full_path) and os.path.isfile(full_path):
-            # Create a unique filename for the book cover
-            unique_id = str(uuid.uuid4())
-            timestamp = time.strftime("%Y%m%d%H%M%S")
-            _, ext_part = os.path.splitext(book_cover_image)
-            
-            new_filename = f"{unique_id}_{timestamp}_book_cover{ext_part}"
-            new_path = os.path.join(app.config['UPLOAD_FOLDER'], new_filename)
-            
-            # Copy the file to the new unique name
-            shutil.copy2(full_path, new_path)
-            
-            # Use the new filename instead
-            image_filenames.append(new_filename)
-            app.logger.info(f"Copied book cover from {book_cover_image} to {new_filename}")
-        else:
-            app.logger.warning(f"Book cover image not found: {book_cover_image}")
-    
-    # If location is not in the predefined list, add it
+        new_filename = f"{uuid.uuid4().hex}_{int(time.time())}_book_cover.webp"
+
+        # Prüfen, ob das Cover noch als lokale temporäre Datei existiert (z.B. von einer API geladen)
+        local_path = os.path.join(app.config.get('UPLOAD_FOLDER', ''), book_cover_image)
+
+        try:
+            if os.path.exists(local_path):
+                # Lokales Bild einlesen, zu WebP optimieren und in GridFS schieben
+                with Image.open(local_path) as img:
+                    if img.mode not in ('RGB', 'RGBA'):
+                        img = img.convert('RGBA')
+
+                    optimized_io = io.BytesIO()
+                    img.save(optimized_io, format='WEBP', quality=85, optimize=True)
+                    optimized_io.seek(0)
+
+                    fs.put(
+                        optimized_io,
+                        filename=new_filename,
+                        content_type='image/webp',
+                        metadata={'is_book_cover': True}
+                    )
+                image_filenames.append(new_filename)
+                app.logger.info(f"Processed local book cover and saved to GridFS: {new_filename}")
+            else:
+                # Falls es bereits in GridFS liegt, einfach duplizieren
+                existing_cover = fs.find_one({"filename": book_cover_image})
+                if existing_cover:
+                    fs.put(
+                        existing_cover.read(),
+                        filename=new_filename,
+                        content_type=existing_cover.content_type,
+                        metadata={'is_book_cover': True}
+                    )
+                    image_filenames.append(new_filename)
+                    app.logger.info(f"Duplicated existing GridFS book cover: {new_filename}")
+                else:
+                    app.logger.warning(f"Book cover not found locally or in GridFS: {book_cover_image}")
+        except Exception as e:
+            app.logger.error(f"Error processing book cover {book_cover_image}: {str(e)}")
+
+    # 3. Item-Erstellung (Logik bleibt identisch, da it.add_item nun die GridFS-Filenames erhält)
     predefined_locations = it.get_predefined_locations()
     if ort and ort not in predefined_locations:
         it.add_predefined_location(ort)
-    
-    reservierbar = 'reservierbar' in request.form
 
-    # Add one or more own items; sub-items are hidden in overview and counted on parent.
+    reservierbar = 'reservierbar' in request.form
     created_item_ids = []
     series_group_id = str(uuid.uuid4()) if item_count > 1 else None
     base_code = code_4[0] if code_4 else None
@@ -6096,6 +5598,8 @@ def upload_item():
             return redirect(url_for(success_redirect_endpoint))
 
         parent_item_id = str(created_item_ids[0]) if created_item_ids else None
+
+        # image_filenames enthält jetzt ausschließlich GridFS-Filenames (oder ObjectIds, je nach deinem Setup)
         item_id = it.add_item(
             name, ort, beschreibung, image_filenames, filter_upload,
             filter_upload2, filter_upload3,
@@ -6125,11 +5629,10 @@ def upload_item():
         return redirect(url_for(success_redirect_endpoint))
 
     item_id = created_item_ids[0] if created_item_ids else None
-    
+
     if item_id:
-    # Create QR code for the item (deactivated)
-    # create_qr_code(str(item_id))
         success_msg = f'Element wurde erfolgreich hinzugefügt ({len(created_item_ids)} erstellt)'
+
         if upload_mode == 'library':
             try:
                 _append_audit_event_standalone(
@@ -6145,7 +5648,6 @@ def upload_item():
             except Exception:
                 app.logger.warning('Audit write failed for library_item_created')
 
-        
         flash(success_msg, 'success')
         return redirect(url_for(success_redirect_endpoint, highlight_item=str(item_id)))
     else:
diff --git a/Web/templates/main.html b/Web/templates/main.html
deleted file mode 100755
index 2090c96..0000000
--- a/Web/templates/main.html
+++ /dev/null
@@ -1,4692 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-
-<style>
-
-    /* Calendar styles for detailed view */
-    .calendar-wrapper {
-        background: var(--ui-surface);
-        border: 1px solid #dbe3ee;
-        border-radius: 12px;
-        overflow: hidden;
-        margin-top: 10px;
-    }
-
-    .calendar-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 12px;
-        padding: 12px;
-        border-bottom: 1px solid var(--ui-border);
-        background: var(--ui-surface-soft);
-    }
-
-    .calendar-header button {
-        width: 34px;
-        height: 34px;
-        border: 1px solid #dbe3ee;
-        border-radius: 8px;
-        background: var(--ui-surface);
-        color: var(--ui-text);
-        font-weight: 700;
-        line-height: 1;
-        cursor: pointer;
-    }
-
-    .calendar-header button:hover {
-        background: var(--ui-bg);
-    }
-
-    .calendar-header span {
-        font-weight: 700;
-        font-size: 1rem;
-        color: #0f172a;
-        text-align: center;
-        flex: 1;
-    }
-
-    .calendar-grid {
-        display: grid;
-        grid-template-columns: repeat(7, minmax(0, 1fr));
-        padding: 8px;
-        gap: 4px;
-    }
-
-    .cal-cell {
-        aspect-ratio: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 8px;
-        color: var(--ui-text);
-        font-size: 0.95rem;
-        font-weight: 600;
-        line-height: 1;
-        cursor: pointer;
-        position: relative;
-    }
-
-    .cal-cell.header {
-        aspect-ratio: auto;
-        height: 28px;
-        font-size: 0.78rem;
-        font-weight: 700;
-        color: #64748b;
-        cursor: default;
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
-    }
-
-    .cal-cell:not(.header):not(.empty):hover {
-        background: var(--ui-bg);
-    }
-
-    .cal-cell.empty {
-        cursor: default;
-    }
-
-    .cal-cell.today {
-        background: #eff6ff;
-        color: #1d4ed8;
-        border: 1px solid #bfdbfe;
-    }
-
-    .cal-cell.selected {
-        background: #2563eb !important;
-        color: #fff !important;
-    }
-
-    .cal-cell.has-booking::after {
-        content: '';
-        width: 7px;
-        height: 7px;
-        border-radius: 999px;
-        background: #ef4444;
-        position: absolute;
-        bottom: 5px;
-    }
-
-    .cal-cell.selected.has-booking::after {
-        background: var(--ui-surface);
-    }
-
-    .calendar-day-details {
-        border-top: 1px solid #e7edf5;
-        padding: 12px;
-        background: var(--ui-surface-soft);
-        display: none;
-    }
-
-    .calendar-day-details h5 {
-        margin: 0 0 10px;
-        font-size: 0.96rem;
-        font-weight: 700;
-        color: #0f172a;
-    }
-
-    #cal-details-list {
-        display: grid;
-        gap: 8px;
-    }
-
-    .cal-empty-state {
-        font-size: 0.9rem;
-        color: #64748b;
-        padding: 8px 2px;
-    }
-
-    .cal-booking-item {
-        background: var(--ui-surface);
-        border: 1px solid #dbe3ee;
-        border-left: 3px solid #2563eb;
-        border-radius: 10px;
-        padding: 10px;
-        display: grid;
-        gap: 6px;
-    }
-
-    .cal-booking-label {
-        display: inline-block;
-        font-size: 0.72rem;
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
-        color: #64748b;
-        margin-right: 6px;
-        font-weight: 700;
-    }
-
-    .cal-booking-time,
-    .cal-booking-user,
-    .cal-booking-note {
-        font-size: 0.9rem;
-        color: #1f2937;
-        line-height: 1.35;
-        word-break: break-word;
-    }
-
-    .cal-booking-time strong {
-        font-size: 0.94rem;
-        color: #0f172a;
-    }
-
-    .cal-booking-period {
-        margin-left: 8px;
-        color: var(--ui-text);
-        font-size: 0.85rem;
-        font-weight: 600;
-    }
-
-    @media (max-width: 480px) {
-        .calendar-grid {
-            gap: 3px;
-            padding: 6px;
-        }
-
-        .cal-cell {
-            font-size: 0.86rem;
-            border-radius: 7px;
-        }
-
-        .calendar-header {
-            padding: 10px;
-        }
-
-        .calendar-header span {
-            font-size: 0.95rem;
-        }
-
-        .calendar-day-details {
-            padding: 10px;
-        }
-    }
-    .filter-option {
-        margin-bottom: 5px;
-        display: flex;
-        align-items: center;
-    }
-
-    .filter-option input[type="checkbox"] {
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-        cursor: pointer;
-    }
-
-    .filter-option:hover {
-        background-color: #f5f5f5;
-    }
-
-    .filter-option label {
-        margin-left: 5px;
-        cursor: pointer;
-    }
-
-    .filter-option-group {
-        margin-bottom: 12px;
-        border-bottom: 1px solid var(--ui-border);
-        padding-bottom: 8px;
-    }
-
-    .filter-group-header {
-        font-weight: bold;
-        margin-bottom: 5px;
-        color: var(--ui-text-muted);
-        font-size: 0.9rem;
-    }
-
-    .selected-filters {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 5px;
-        min-height: 30px;
-    }
-
-    .filter-tag {
-        display: inline-flex;
-        align-items: center;
-        background-color: #e9ecef;
-        border-radius: 15px;
-        padding: 3px 10px;
-        font-size: 0.8rem;
-    }
-
-    .filter-tag-group {
-        color: var(--ui-text-muted);
-        font-size: 0.8em;
-        font-style: italic;
-        margin-right: 2px;
-    }
-
-    .filter-tag-remove {
-        background: none;
-        border: none;
-        color: var(--ui-text-muted);
-        margin-left: 5px;
-        cursor: pointer;
-        font-size: 1rem;
-        line-height: 1;
-    }
-
-    /* Search styles */
-    .search-container {
-        display: flex;
-        gap: 5px;
-        margin-top: 5px;
-    }
-
-    #code-search {
-        flex: 1;
-        padding: 8px;
-        border: 1px solid var(--ui-border);
-        border-radius: 4px;
-    }
-
-    .search-button {
-        padding: 8px 12px;
-        background-color: #007bff;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-    }
-
-    .search-button:hover {
-        background-color: #0056b3;
-    }
-
-    .search-field {
-        min-width: 250px;
-    }
-
-    #codesearch {
-    border: 1px solid #dc3545 !important;
-    }
-</style>
-<div class="container admin-content-container">
-    <!-- Conflict warning banner (populated by JS) -->
-    <div id="conflict-banner" style="display:none; background:#fff3cd; border:1px solid #ffc107; border-left:4px solid #fd7e14; color:#856404; padding:12px 16px; border-radius:4px; margin-bottom:16px; position:relative;">
-        <strong>⚠ Reservierungskonflikt</strong>
-        <span id="conflict-banner-text"></span>
-        <button onclick="document.getElementById('conflict-banner').style.display='none'" style="position:absolute;top:8px;right:10px;background:none;border:none;font-size:1rem;cursor:pointer;color:#856404;">✕</button>
-    </div>
-    <script>
-    document.addEventListener('DOMContentLoaded', function() {
-        fetch('/api/booking_conflicts')
-            .then(r => r.json())
-            .then(data => {
-                if (data.conflicts && data.conflicts.length > 0) {
-                    const banner = document.getElementById('conflict-banner');
-                    const text = document.getElementById('conflict-banner-text');
-                    const c = data.conflicts[0];
-                    if (data.conflicts.length === 1) {
-                        text.textContent = ' Ihre Reservierung für "' + c.Item + '" ist aktiv, aber der Gegenstand ist bereits von jemand anderem ausgeliehen. Bitte wenden Sie sich an einen Administrator.';
-                    } else {
-                        text.textContent = ' ' + data.conflicts.length + ' Ihrer Reservierungen sind aktiv, aber die Gegenstände sind bereits ausgeliehen. Bitte wenden Sie sich an einen Administrator.';
-                    }
-                    banner.style.display = 'block';
-                }
-            })
-            .catch(() => {});
-    });
-    </script>
-    <div class="content">
-        <h1 style="position:relative;">Inventar Objekte
-            <div class="view-switch-group">
-                <button id="toggle-view-mode" class="view-toggle-btn" title="In Tabellenansicht wechseln">
-                    <span id="view-mode-icon">🗂</span>
-                </button>
-                <button id="toggle-favorites-view" class="view-toggle-btn" title="Nur Merkliste anzeigen">
-                    <span id="favorites-view-icon">🔖</span>
-                </button>
-            </div>
-        </h1>
-        <div class="filter-container">
-            <div class="filter-group">
-                <div class="filter-header">
-                    <label>Unterrichtsfach:</label>
-                    <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter1-dropdown')">▼</button>
-                    <button type="button" class="clear-filter" onclick="clearFilter(1)">Clear</button>
-                </div>
-                <div class="selected-filters" id="selected-filter1"></div>
-                <div class="filter-dropdown" id="filter1-dropdown">
-                    <div class="filter-options" id="filter1-options">
-                        <!-- Filter options will be dynamically loaded here -->
-                    </div>
-                </div>
-            </div>
-            
-            <div class="filter-group">
-                <div class="filter-header">
-                    <label>Jahrgangsstufe:</label>
-                    <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter2-dropdown')">▼</button>
-                    <button type="button" class="clear-filter" onclick="clearFilter(2)">Clear</button>
-                </div>
-                <div class="selected-filters" id="selected-filter2"></div>
-                <div class="filter-dropdown" id="filter2-dropdown">
-                    <div class="filter-options" id="filter2-options">
-                        <!-- Filter options will be dynamically loaded here -->
-                    </div>
-                </div>
-            </div>
-            
-            <div class="filter-group">
-                <div class="filter-header">
-                    <label>Schlagwort:</label>
-                    <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter3-dropdown')">▼</button>
-                    <button type="button" class="clear-filter" onclick="clearFilter(3)">Clear</button>
-                </div>
-                <div class="selected-filters" id="selected-filter3"></div>
-                <div class="filter-dropdown" id="filter3-dropdown">
-                    <div class="filter-options" id="filter3-options">
-                        <!-- Filter options will be dynamically loaded here -->
-                    </div>
-                </div>
-            </div>
-            
-            <div class="filter-group search-field" id="codesearch">
-                <div class="filter-header">
-                    <label for="code-search">Code suchen:</label>
-                    <button type="button" class="clear-filter" onclick="clearCodeSearch()">Clear</button>
-                </div>
-                <div class="search-container">
-                    <input type="text" id="code-search" placeholder="Code eingeben..." autocomplete="off">
-                    <button type="button" class="search-button" onclick="searchByCode()">
-                        <i class="fas fa-search"></i> Suchen
-                    </button>
-                </div>
-            </div>
-
-            <div class="filter-group search-field">
-                <div class="filter-header">
-                    <label for="desc-search">Titel/Beschreibung suchen:</label>
-                    <button type="button" class="clear-filter" onclick="clearDescSearch()">Clear</button>
-                </div>
-                <div class="search-container">
-                    <input type="text" id="desc-search" placeholder="Begriff in Beschreibung..." autocomplete="off">
-                    <button type="button" class="search-button" onclick="searchByDescription()">
-                        <i class="fas fa-search"></i> Suchen
-                    </button>
-                </div>
-            </div>
-        </div>
-        <div class="qr-container">
-            <button id="scanButton" class="scan-button" aria-controls="qr-reader" aria-expanded="false">Barcode scannen</button>
-            <div id="qr-reader"></div>
-        </div>
-        <div id="table-view-header" class="table-view-header" aria-hidden="true">
-            <span>Name</span>
-            <span>Ort</span>
-            <span>Unterrichtsfach</span>
-            <span>Jahrgangsstufe</span>
-            <span>Schlagwort</span>
-            <span>Barcode</span>
-        </div>
-        <div id="items-container" class="items-container">
-            <!-- Items will be dynamically loaded here -->
-        </div>
-        
-    </div>
-    </div>
-    <div id="item-modal" class="item-modal">
-        <div class="modal-content">
-            <span class="close-modal">&times;</span>
-            <div id="modal-content-wrapper">
-                <!-- Content will be dynamically inserted here -->
-            </div>
-        </div>
-    </div>
-
-    <!-- Schedule Appointment Modal -->
-    <div id="schedule-modal" class="item-modal">
-        <div class="modal-content">
-            <span class="close-modal" onclick="closeScheduleModal()">&times;</span>
-            <h2>Reservieren</h2>
-            <form id="schedule-form">
-                <input type="hidden" id="schedule-item-id" name="item_id">
-
-                <div class="form-group" id="schedule-specific-item-group" style="display:none;">
-                    <label for="schedule-specific-item">Unterartikel (optional):</label>
-                    <select id="schedule-specific-item" name="specific_item_id">
-                        <option value="">Automatisch wählen</option>
-                    </select>
-                </div>
-                
-                <div class="form-group">
-                    <label for="schedule-date">Startdatum:</label>
-                    <input type="date" id="schedule-date" name="schedule_date" required>
-                </div>
-
-                <div class="form-group">
-                    <label for="schedule-multi-day" style="display:inline-block; width:auto; margin-right:10px;">Mehrtägig:</label>
-                    <input type="checkbox" id="schedule-multi-day" name="is_multi_day" style="width:auto;">
-                </div>
-
-                <div class="form-group" id="schedule-end-date-group" style="display:none;">
-                    <label for="schedule-end-date">Enddatum:</label>
-                    <input type="date" id="schedule-end-date" name="schedule_end_date">
-                </div>
-                
-                <div class="form-group">
-                    <label for="schedule-start-period">Von Schulstunde:</label>
-                    <select id="schedule-start-period" name="start_period" required>
-                        <option value="">-- Bitte wählen --</option>
-                        <option value="1">1. Stunde (08:00 - 08:45)</option>
-                        <option value="2">2. Stunde (08:45 - 09:30)</option>
-                        <option value="3">3. Stunde (09:45 - 10:30)</option>
-                        <option value="4">4. Stunde (10:30 - 11:15)</option>
-                        <option value="5">5. Stunde (11:30 - 12:15)</option>
-                        <option value="6">6. Stunde (12:15 - 13:00)</option>
-                        <option value="7">7. Stunde (13:30 - 14:15)</option>
-                        <option value="8">8. Stunde (14:15 - 15:00)</option>
-                        <option value="9">9. Stunde (15:15 - 16:00)</option>
-                        <option value="10">10. Stunde (16:00 - 16:45)</option>
-                    </select>
-                </div>
-                
-                <div class="form-group">
-                    <label for="schedule-end-period">Bis Schulstunde:</label>
-                    <select id="schedule-end-period" name="end_period" required>
-                        <option value="">-- Bitte wählen --</option>
-                        <option value="1">1. Stunde (08:00 - 08:45)</option>
-                        <option value="2">2. Stunde (08:45 - 09:30)</option>
-                        <option value="3">3. Stunde (09:45 - 10:30)</option>
-                        <option value="4">4. Stunde (10:30 - 11:15)</option>
-                        <option value="5">5. Stunde (11:30 - 12:15)</option>
-                        <option value="6">6. Stunde (12:15 - 13:00)</option>
-                        <option value="7">7. Stunde (13:30 - 14:15)</option>
-                        <option value="8">8. Stunde (14:15 - 15:00)</option>
-                        <option value="9">9. Stunde (15:15 - 16:00)</option>
-                        <option value="10">10. Stunde (16:00 - 16:45)</option>
-                    </select>
-                </div>
-                
-                <div class="form-group">
-                    <label for="schedule-notes">Notizen:</label>
-                    <textarea id="schedule-notes" name="notes" placeholder="Optionale Notizen..."></textarea>
-                </div>
-                
-                <div class="form-actions">
-                    <button type="submit" class="save-button">Termin speichern</button>
-                    <button type="button" class="cancel-button" onclick="closeScheduleModal()">Abbrechen</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-
-<!-- Initialize template variables before any JavaScript code -->
-<script>
-    // Create a global object to hold server-side template values
-    window.serverVars = {
-        highlightItemId: "{% if highlight_item is defined and highlight_item %}{{ highlight_item }}{% else %}null{% endif %}"
-    };
-    
-    window.isDebug = false; // Set to true only for development environment
-</script>
-<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
-<script>
-    // Global state
-    const highlightItemId = (window.serverVars && window.serverVars.highlightItemId && window.serverVars.highlightItemId !== 'null')
-        ? window.serverVars.highlightItemId
-        : null;
-    let codeSearchTerm = '';
-    let descSearchIds = null; // Set of matching IDs or null when disabled
-
-    // Keep track of the scanner state globally/outer scope
-    let isScanning = false; 
-    let activeScannerCallback = null; // Tracks which function currently owns the scanner output
-
-    function startScanner(targetCallback) {
-        const qrReader = document.getElementById('qr-reader');
-        const statusText = document.getElementById('status');
-
-        // Store the custom action that should happen when a barcode is found
-        activeScannerCallback = targetCallback;
-
-        // Show the container
-        if (qrReader) qrReader.style.display = 'block';
-        if (statusText) statusText.innerText = "Initializing camera...";
-
-        Quagga.init({
-            inputStream: {
-                name: "Live",
-                type: "LiveStream",
-                // Make sure this targets your correct HTML container element 
-                target: document.querySelector('#scanner-container'), 
-                constraints: {
-                    width: 640,
-                    height: 480,
-                    facingMode: "environment" // Force rear camera
-                },
-            },
-            decoder: {
-                // Your required formats mapped to Quagga2 reader strings
-                readers: ["code_128_reader", "ean_reader", "code_39_reader", "upc_reader"]
-            } 
-        }, function(err) {
-            if (err) {
-                console.error("Initialization error:", err);
-                if (statusText) statusText.innerText = "Camera Error";
-                return;
-            }
-
-            Quagga.start();
-            isScanning = true;
-
-            // If we are using the main search button, manage its UI state
-            if (!targetCallback) {
-                setScannerUi(true);
-            }
-
-            if (statusText) statusText.innerText = "Scanning...";
-        });
-    }
-
-    function stopScanner() {
-        Quagga.stop();
-        isScanning = false;
-        activeScannerCallback = null; // Reset the callback routing
-
-        const qrReader = document.getElementById('qr-reader');
-        if (qrReader) qrReader.style.display = 'none';
-
-        setScannerUi(false);
-    }
-
-    function setScannerUi(isOpen) {
-        const scanBtn = document.getElementById('scanButton');
-        if (!scanBtn) return;
-
-        scanBtn.classList.toggle('is-active', isOpen);
-        scanBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-        scanBtn.textContent = isOpen ? 'Scanner schliessen' : 'Barcode scannen';
-    }
-
-    // Unified global reader callback
-    Quagga.onDetected(function(data) {
-        const barcode = String(data.codeResult.code || '').trim();
-        console.log("Barcode detected:", barcode);
-
-        // Keep a local reference to the active callback before shutting down the engine
-        const currentCallback = activeScannerCallback;
-
-        // Critical: Stop scanning immediately to prevent multiple triggers
-        stopScanner();
-
-        // Route data based on who opened the scanner
-        if (typeof currentCallback === "function") {
-            // Send data directly to the specific edit field's logic
-            currentCallback(barcode);
-        } else {
-            // Fallback Default: Main search box logic
-            const resultText = document.getElementById('barcode-result');
-            if (resultText) resultText.innerText = barcode;
-
-            const searchInput = document.getElementById('code-search');
-            if (searchInput) {
-                searchInput.value = barcode;
-                if (typeof searchByCode === "function") {
-                    searchByCode();
-                }
-            }
-        }
-    });
-
-    // Event Listener for the main standalone search button
-    document.getElementById('scanButton')?.addEventListener('click', function() {
-        if (!isScanning) {
-            // Pass null so it defaults to filling the standard search box
-            startScanner(null); 
-        } else {
-            stopScanner();
-        }
-    });
-
-    // Return preferred primary and fallback image URLs based on extension
-    // Simplified to trust the URL provided by the backend
-    function getImageSrc(url) {
-        try {
-            if (!url || typeof url !== 'string') {
-                return { primary: url, fallback: url };
-            }
-            return { primary: url, fallback: url };
-        } catch (e) {
-            console.warn('getImageSrc failed for', url, e);
-            return { primary: url, fallback: url };
-        }
-    }
-
-    function saveFilterState() {
-        localStorage.setItem('inventarSystemFilters', JSON.stringify(activeFilters));
-    }
-    
-    function loadFilterState() {
-        const savedFilters = localStorage.getItem('inventarSystemFilters');
-        if (savedFilters) {
-            try {
-                // Parse saved filters
-                const parsedFilters = JSON.parse(savedFilters);
-                
-                // Restore to active filters
-                if (parsedFilters.filter1) activeFilters.filter1 = parsedFilters.filter1;
-                if (parsedFilters.filter2) activeFilters.filter2 = parsedFilters.filter2;
-                if (parsedFilters.filter3) activeFilters.filter3 = parsedFilters.filter3;
-                
-                // Update UI to show selected filters
-                updateSelectedFilters(1);
-                updateSelectedFilters(2);
-                updateSelectedFilters(3);
-            } catch (e) {
-                console.error("Error loading saved filters:", e);
-            }
-        }
-    }
-    
-    // Function to clear filter state from localStorage
-    function clearFilterState() {
-        localStorage.removeItem('inventarSystemFilters');
-        // Reset active filters
-        activeFilters = {
-            filter1: [],
-            filter2: [],
-            filter3: []
-        };
-    }
-    
-    document.addEventListener('DOMContentLoaded', function() {
-        // Load saved filters
-        loadFilterState();
-        
-        // Find and attach event listener to all logout links
-        const logoutLinks = document.querySelectorAll('a[href*="logout"]');
-        logoutLinks.forEach(link => {
-            link.addEventListener('click', function() {
-                clearFilterState(); // Clear filters when logging out
-            });
-        });
-        
-        // Set up schedule form submission
-        setupScheduleFormSubmission();
-        
-        // Fetch user status to get current username and full filter lists
-        Promise.all([
-            fetch('/user_status').then(response => response.json()),
-            fetch('/get_filter').then(response => response.json()),
-        ])
-            .then(([userData, filterData]) => {
-                currentUsername = userData.username;
-                if (filterData.filter1) {
-                    allFilter1Values = new Set(filterData.filter1.filter(value => value && typeof value === 'string' && value.trim() !== ''));
-                }
-                if (filterData.filter2) {
-                    allFilter2Values = new Set(filterData.filter2.filter(value => value && typeof value === 'string' && value.trim() !== ''));
-                }
-                if (filterData.filter3) {
-                    allFilter3Values = new Set(filterData.filter3.filter(value => value && typeof value === 'string' && value.trim() !== ''));
-                }
-
-                // Now load items with username information
-                loadItems();
-                // Setup card images display after a short delay to ensure items are loaded
-                setTimeout(setupCardImagesDisplay, 500);
-            })
-            .catch(error => {
-                console.error('Error fetching user status or filters:', error);
-                loadItems(); // Load items anyway in case of error
-            });
-
-        // Add event listener for code search input
-        const codeSearchInput = document.getElementById('code-search');
-        if (codeSearchInput) {
-            codeSearchInput.addEventListener('input', function() {
-                // Use a small delay to avoid excessive filtering while typing
-                clearTimeout(this.searchTimeout);
-                this.searchTimeout = setTimeout(() => {
-                    searchByCode();
-                }, 300);
-            });
-        }
-        // Add event listener for description search input
-        const descInput = document.getElementById('desc-search');
-        if (descInput) {
-            descInput.addEventListener('input', function(){
-                clearTimeout(this.searchTimeout);
-                this.searchTimeout = setTimeout(() => {
-                    searchByDescription();
-                }, 400);
-            });
-            descInput.addEventListener('keydown', function(e){
-                if (e.key === 'Enter') { e.preventDefault(); searchByDescription(); }
-            });
-        }
-        
-        // After items are loaded, make sure filters are updated if there are active selections
-        if (activeFilters.filter1.length > 0) {
-            rebuildFilter2Options();
-        }
-        if (activeFilters.filter1.length > 0 || activeFilters.filter2.length > 0) {
-            rebuildFilter3Options();
-        }
-    });
-
-    // Global variables to store active filters
-    let activeFilters = {
-        filter1: [],
-        filter2: [],
-        filter3: []
-    };
-
-    let allFilter1Values = new Set();
-    let allFilter2Values = new Set();
-    let allFilter3Values = new Set();
-
-    // Add this line to define allItems globally
-    let allItems = [];
-
-    // Dynamic page size: scan viewport/screen size to only load the exact amount needed.
-    const isMobileDevice = window.matchMedia('(max-width: 768px)').matches;
-    const MAIN_ITEMS_PAGE_SIZE = isMobileDevice ? 20 : 120;
-    let mainItemsNextOffset = 0;
-    let mainItemsHasMore = false;
-    let mainItemsLoadingMore = false;
-    let mainItemsLightMode = true;  // Track if we're in light mode to gradually request full data
-    let mainItemsObserver = null;
-    let mainItemsSentinel = null;
-    let mainItemsLoadingIndicator = null;
-    let mainItemsScrollPrefetchBound = false;
-    let cardVirtualizationObserver = null;
-
-    function ensureMainItemsLoadingIndicator() {
-        const itemsContainer = document.querySelector('#items-container');
-        if (!itemsContainer) return null;
-
-        if (!mainItemsLoadingIndicator) {
-            mainItemsLoadingIndicator = document.createElement('div');
-            mainItemsLoadingIndicator.id = 'main-items-loading-indicator';
-            mainItemsLoadingIndicator.className = 'items-loading-indicator empty-frames-placeholder';
-            mainItemsLoadingIndicator.innerHTML = `
-                <div class="empty-frame p-3 mx-2" style="flex: 1; height: 100px; border-radius: 12px; background: rgba(255,255,255,0.02); min-width: 250px;"></div>
-                <div class="empty-frame p-3 mx-2" style="flex: 1; height: 100px; border-radius: 12px; background: rgba(255,255,255,0.02); min-width: 250px; display: none;" class="d-none d-md-block"></div>
-                <div class="empty-frame p-3 mx-2" style="flex: 1; height: 100px; border-radius: 12px; background: rgba(255,255,255,0.02); min-width: 250px; display: none;" class="d-none d-lg-block"></div>
-            `;
-            mainItemsLoadingIndicator.style.display = 'flex';
-            mainItemsLoadingIndicator.style.width = '100%';
-        }
-
-        itemsContainer.appendChild(mainItemsLoadingIndicator);
-        return itemsContainer;
-    }
-
-    function updateMainItemsLoadingIndicator() {
-        const itemsContainer = ensureMainItemsLoadingIndicator();
-        if (!itemsContainer || !mainItemsLoadingIndicator) return;
-
-        const shouldShow = mainItemsHasMore || mainItemsLoadingMore;
-        mainItemsLoadingIndicator.style.display = shouldShow ? 'flex' : 'none';
-        mainItemsLoadingIndicator.classList.toggle('is-loading', mainItemsLoadingMore);
-
-        const label = mainItemsLoadingIndicator.querySelector('.loading-label');
-        if (label) {
-            label.textContent = mainItemsLoadingMore
-                ? 'Weitere Objekte werden geladen...'
-                : 'Weitere Objekte werden vorbereitet...';
-        }
-    }
-
-    function maybePrefetchMainItems() {
-        const itemsContainer = document.querySelector('#items-container');
-        if (!itemsContainer || !mainItemsHasMore || mainItemsLoadingMore) {
-            return;
-        }
-
-        const styles = window.getComputedStyle(itemsContainer);
-        const isMobileLayout =
-            window.matchMedia('(max-width: 768px)').matches ||
-            styles.display === 'grid' ||
-            styles.flexDirection === 'column';
-
-        const distanceToEnd = isMobileLayout
-            ? Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - (window.scrollY + window.innerHeight)
-            : itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
-        const prefetchThreshold = isMobileLayout
-            ? window.innerHeight * 1.5
-            : Math.max(260, itemsContainer.clientWidth * 1.4);
-        if (distanceToEnd > prefetchThreshold) {
-            return;
-        }
-
-        mainItemsLoadingMore = true;
-        updateMainItemsLoadingIndicator();
-        loadItems(mainItemsNextOffset, true).finally(() => {
-            mainItemsLoadingMore = false;
-            updateMainItemsLoadingIndicator();
-        });
-    }
-
-    function loadItems(offset = 0, append = false) {
-        // Keep list payload lightweight; full details are fetched on-demand in openItemQuick.
-        return fetch(`{{ url_for('get_items') }}?offset=${offset}&limit=${MAIN_ITEMS_PAGE_SIZE}&light_mode=true`)
-            .then(response => response.json())
-            .then(data => {
-                const itemsContainer = document.querySelector('#items-container');
-                // Creating a Set to store unique filter values
-                const filter1Values = new Set();
-                const filter2Values = new Set();
-                const filter3Values = new Set();
-                
-                // Store all items data globally for filter rebuilding
-                const pageItems = data.items || [];
-                allItems = append ? allItems.concat(pageItems) : pageItems;
-                
-                // Clear the container first
-                if (!append) {
-                    itemsContainer.innerHTML = '';
-                }
-                
-                if (!append && (!pageItems || pageItems.length === 0)) {
-                    itemsContainer.innerHTML = '<div class="no-items-message">Keine Objekte gefunden</div>';
-                    return;
-                }
-
-                // Sort items by name in ascending order (A-Z)
-                pageItems.sort((a, b) => {
-                    const nameA = a.Name ? a.Name.toLowerCase() : '';
-                    const nameB = b.Name ? b.Name.toLowerCase() : '';
-                    return nameA.localeCompare(nameB); // Ascending order
-                });
-
-                allItems.forEach(itemForFilters => {
-                    const f1 = Array.isArray(itemForFilters.Filter) ? itemForFilters.Filter : (itemForFilters.Filter ? [itemForFilters.Filter] : []);
-                    const f2 = Array.isArray(itemForFilters.Filter2) ? itemForFilters.Filter2 : (itemForFilters.Filter2 ? [itemForFilters.Filter2] : []);
-                    const f3 = Array.isArray(itemForFilters.Filter3) ? itemForFilters.Filter3 : (itemForFilters.Filter3 ? [itemForFilters.Filter3] : []);
-                    f1.forEach(value => { if (value && typeof value === 'string' && value.trim() !== '') filter1Values.add(value); });
-                    f2.forEach(value => { if (value && typeof value === 'string' && value.trim() !== '') filter2Values.add(value); });
-                    f3.forEach(value => { if (value && typeof value === 'string' && value.trim() !== '') filter3Values.add(value); });
-                });
-                
-                const favoriteIds = new Set(data.favorites || []);
-                window.currentFavorites = favoriteIds;
-                try { sessionStorage.setItem('favoritesCache:' + ({{ session.get('username', '') | tojson }} || 'anon'), JSON.stringify(Array.from(favoriteIds))); } catch(e){}
-                pageItems.forEach(item => {
-                    try {
-                        const card = document.createElement('div');
-                        card.classList.add('item-card');
-                        
-                        // Add class to make card clickable 
-                        card.classList.add('clickable-card');
-                        
-                        // Add highlight class if this is the item we're looking for
-                        if (highlightItemId && item._id === highlightItemId) {
-                            card.classList.add('highlight-item');
-                            setTimeout(() => {
-                                card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                            }, 500);
-                        }
-                        
-                        // Determine favorite state early
-                        const favActive = favoriteIds.has(item._id);
-
-                        // Process and store filter values with consistent handling
-                        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] : []);
-                        
-                        // Store arrays on the card as data attributes
-                        card.dataset.filter1 = JSON.stringify(filter1Array);
-                        card.dataset.filter2 = JSON.stringify(filter2Array);
-                        card.dataset.filter3 = JSON.stringify(filter3Array);
-                        card.dataset.code = (item.Code_4 !== undefined && item.Code_4 !== null) ? 
-                          String(item.Code_4).trim() : '';
-        
-                        // Add filter values to their respective sets - all values should be strings
-                        filter1Array.forEach(value => {
-                            if (value && typeof value === 'string' && value.trim() !== '') {
-                                filter1Values.add(value);
-                            }
-                        });
-        
-                        filter2Array.forEach(value => {
-                            if (value && typeof value === 'string' && value.trim() !== '') {
-                                filter2Values.add(value);
-                            }
-                        });
-        
-                        filter3Array.forEach(value => {
-                            if (value && typeof value === 'string' && value.trim() !== '') {
-                                filter3Values.add(value);
-                            }
-                        });
-
-                        // Display first filter value or dash if none exist
-                        const filter1Display = filter1Array.length > 0 ? filter1Array[0] : '-';
-                        const filter2Display = filter2Array.length > 0 ? filter2Array[0] : '-';
-                        const filter3Display = filter3Array.length > 0 ? filter3Array[0] : '-';
-                        
-                        // Additional filter values indicator
-                        const filter1More = filter1Array.length > 1 ? ` (+${filter1Array.length - 1} mehr)` : '';
-                        const filter2More = filter2Array.length > 1 ? ` (+${filter2Array.length - 1} mehr)` : '';
-                        const filter3More = filter3Array.length > 1 ? ` (+${filter3Array.length - 1} mehr)` : '';
-
-                        const imagesHtml = item.Images && item.Images.length > 0 ? item.Images.slice(0, 1).map((file, index) => {
-                            // Get file with correct case handling
-                            const image = file;
-                            
-                            // Make sure we have a proper URL for the image
-                            const baseImageSrc = image.startsWith('/uploads/') || image.startsWith('http') ? 
-                                            image : 
-                                            `{{ url_for('uploaded_file', filename='') }}${image}`;
-                            
-                            // Use thumbnail info if available
-                            const thumbnailInfo = item.ThumbnailInfo && item.ThumbnailInfo[index];
-                            
-                            if (isVideoFile(image)) {
-                                // For videos, use thumbnail if available, otherwise original video
-                                const videoSrc = thumbnailInfo && thumbnailInfo.has_thumbnail 
-                                    ? thumbnailInfo.thumbnail_url 
-                                    : baseImageSrc;
-                                
-                                if (thumbnailInfo && thumbnailInfo.has_thumbnail) {
-                                    // Show thumbnail image with video overlay for card view - using classes instead of inline styles
-                                    return `<div class="video-container" data-index="${index}">
-                                            <img src="${videoSrc}" alt="${item.Name}" class="item-image" data-index="${index}" data-original="${image}">
-                                            <div class="video-preview-overlay">
-                                                <div class="video-play-button">▶</div>
-                                            </div>
-                                            </div>`;
-                                } else {
-                                    // Fallback to video element - using classes instead of inline styles
-                                    return `<div class="video-container" data-index="${index}">
-                                            <video src="${videoSrc}" class="item-image" data-index="${index}" preload="metadata" muted data-original="${image}">
-                                            <source src="${videoSrc}" type="video/mp4">
-                                            Ihr Browser unterstützt keine Videos.
-                                            </video>
-                                            <div class="video-preview-overlay">
-                                                <div class="video-play-button">▶</div>
-                                            </div>
-                                            </div>`;
-                                }
-                            } else {
-                                // For images, use optimized 480p version for performance
-                                // Extract filename from full path for optimization endpoint
-                                const imageFilename = image.split('/').pop();
-                                
-                                // Generate optimized image URL (480p max, WebP or JPEG)
-                                let optimizedSrc = `{{ url_for('optimized_image', filename='') }}${imageFilename}`;
-                                
-                                // Fallback to original/thumbnail if optimization fails
-                                let baseSrc = thumbnailInfo && thumbnailInfo.has_thumbnail 
-                                    ? thumbnailInfo.thumbnail_url 
-                                    : (image.startsWith('/uploads/') || image.startsWith('http') ? 
-                                        image : 
-                                        `{{ url_for('uploaded_file', filename='') }}${image}`);
-                                
-                                // Use our PNG to JPG conversion helper function
-                                const imageSrc = getImageSrc(baseSrc);
-                                    
-                                return `<img src="${optimizedSrc}" alt="${item.Name}" class="item-image" data-index="${index}" 
-                                        data-original="${image}" loading="lazy"
-                                        onerror="if(this.src !== '${imageSrc.primary}') this.src='${imageSrc.primary}'; else if(this.src !== '${imageSrc.fallback}') this.src='${imageSrc.fallback}'; else this.src='{{ url_for('static', filename='img/no-image.png') }}';">`;
-                            }
-                        }).join('') : '';
-                        
-                        const groupedCount = Number(item.GroupedDisplayCount || 1);
-                        const availableGroupedCount = Number(item.AvailableGroupedCount ?? (item.Verfuegbar ? 1 : 0));
-                        const isGroupedItem = groupedCount > 1;
-                        const groupedAvailableUnits = Array.isArray(item.GroupedAvailableUnits) ? item.GroupedAvailableUnits : [];
-                        const isAvailableForBorrow = isGroupedItem ? availableGroupedCount > 0 : !!item.Verfuegbar;
-                        const canScheduleItem = isGroupedItem || item.Reservierbar !== false;
-
-                        // Check if item is borrowed by current user (single items only)
-                        const isBorrowedByMe = !isGroupedItem && !item.Verfuegbar && item.User === currentUsername;
-                        
-                        // Add borrower info badge if item is borrowed
-                        let borrowerBadge = '';
-                        if (!item.Verfuegbar && item.BorrowerInfo) {
-                            borrowerBadge = `
-                                <div class="borrower-badge">
-                                    Ausgeliehen von: <strong>${item.BorrowerInfo.username}</strong>
-                                    ${item.BorrowerInfo.borrowTime ? '<br><span class="borrow-time">Seit: ' + item.BorrowerInfo.borrowTime + '</span>' : ''}
-                                </div>`;
-                        }
-                        
-                        card.innerHTML = `
-                            <div class="card-content" data-item-id="${item._id}">
-                                <h3 class="item-col-name">${item.Name}</h3>
-                                <p class="item-col-location"><strong>Ort:</strong> ${item.Ort || '-'}</p>
-                                <p class="item-col-filter1"><strong>Unterrichtsfach:</strong> ${filter1Display}${filter1More}</p>
-                                <p class="item-col-filter2"><strong>Jahrgangsstufe:</strong> ${filter2Display}${filter2More}</p>
-                                <p class="item-col-filter3"><strong>Schlagwort:</strong> ${filter3Display}${filter3More}</p>
-                                <p class="item-col-code"><strong>Barcode:</strong> ${item.Code_4 || '-'}</p>
-                                <p class="item-col-count"><strong>Anzahl:</strong> ${groupedCount}</p>
-                                ${isGroupedItem ? `<p class="item-col-count"><strong>Verfügbar:</strong> ${availableGroupedCount}</p>` : ''}
-                                <div class="image-container">
-                                    ${imagesHtml}
-                                </div>
-                                ${borrowerBadge}
-                            </div>
-                            <div class="actions">
-                                ${isAvailableForBorrow && !item.BlockedNow ? 
-                                    `<form method="POST" action="{{ url_for('ausleihen', id='') }}${item._id}" class="inline-action-form">
-                                        ${isGroupedItem ? `
-                                        <div class="grouped-borrow-controls" style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; align-items:center;">
-                                            <label style="font-size:0.85rem; margin:0;">Anzahl:</label>
-                                            <input type="number" name="exemplare_count" min="1" max="${availableGroupedCount}" value="1" style="width:74px; padding:4px;">
-                                            <label style="font-size:0.85rem; margin:0;">oder Code:</label>
-                                            <select id="specific-item-card-${item._id}" name="specific_item_id" style="max-width:190px; padding:4px;">
-                                                <option value="">Automatisch wählen</option>
-                                                ${groupedAvailableUnits.map(unit => `<option value="${unit.id}">${unit.code || '-'}</option>`).join('')}
-                                            </select>
-                                        </div>` : ''}
-                                        <button class="ausleihen" type="submit">Ausleihen</button>
-                                    </form>` 
-                                : isBorrowedByMe ?
-                                    `<form method="POST" action="{{ url_for('zurueckgeben', id='') }}${item._id}" class="inline-action-form">
-                                        <button class="ausleihen" type="submit">Zurückgeben</button>
-                                    </form>`
-                                :
-                                    `<button class="ausleihen disabled-button" disabled>${item.BlockedNow ? 'Reserviert' : 'Ausgeliehen'}</button>`
-                                }
-                                ${canScheduleItem ? `<button class="schedule-button" type="button" onclick="openScheduleModal('${item._id}')">Reservieren</button>` : ''}
-                                <button class="quick-details-button" type="button" onclick="openItemQuick('${item._id}')">Details</button>
-                            </div>
-                        `;
-                        if (favActive) card.classList.add('favorite-item');
-                        itemsContainer.appendChild(card);
-                        // Attach favorite action button handler
-                        const favBtn = document.createElement('button');
-                        favBtn.className = 'bookmark-btn' + (favActive? ' active':'');
-                        favBtn.type = 'button';
-                        favBtn.dataset.favId = item._id;
-                        favBtn.textContent = favActive? '★':'☆';
-                        favBtn.setAttribute('aria-label','Merken');
-                        favBtn.addEventListener('click',(ev)=>{ev.stopPropagation();toggleFavorite(item._id, favBtn, card);});
-                        card.appendChild(favBtn);
-                        
-                        // Add direct click event listeners to the card content area
-                        const cardContent = card.querySelector('.card-content');
-                        if (cardContent) {
-                            cardContent.addEventListener('click', function(e) {
-                                // Don't trigger if clicking on buttons or form elements
-                                if (e.target.tagName === 'BUTTON' || 
-                                    e.target.tagName === 'A' || 
-                                    e.target.tagName === 'INPUT' ||
-                                    e.target.closest('button') || 
-                                    e.target.closest('a') || 
-                                    e.target.closest('.image-container')) {
-                                    return;
-                                }
-                                
-                                // Stop event from bubbling up
-                                e.stopPropagation();
-
-                                // Always load full, up-to-date item details for the modal.
-                                openItemQuick(item._id);
-                            });
-                        }
-                    } catch (err) {
-                        console.error('Error processing item:', err, item);
-                    }
-                });
-                
-                // Populate filter options using server-provided full filter lists when available.
-                populateFilterOptions('filter1-options', allFilter1Values.size ? [...allFilter1Values].sort() : [...filter1Values].sort(), 1);
-                populateFilterOptions('filter2-options', allFilter2Values.size ? [...allFilter2Values].sort() : [...filter2Values].sort(), 2);
-                populateFilterOptions('filter3-options', allFilter3Values.size ? [...allFilter3Values].sort() : [...filter3Values].sort(), 3);
-                
-                // Start display from leftmost position on full reload only.
-                if (!append) {
-                    itemsContainer.scrollLeft = 0;
-                }
-                
-                // Apply filters
-                applyFilters();
-                
-                // Setup proper image display for all cards
-                setupCardImagesDisplay();
-
-                // After the data is loaded, rebuild filters if needed
-                if (activeFilters.filter1.length > 0) {
-                    rebuildFilter2Options();
-                }
-                if (activeFilters.filter1.length > 0 || activeFilters.filter2.length > 0) {
-                    rebuildFilter3Options();
-                }
-
-                mainItemsNextOffset = (data.offset || offset) + (data.count || pageItems.length);
-                mainItemsHasMore = Boolean(data.has_more);
-                updateMainItemsLoadingIndicator();
-                setupMainItemsLazyLoading();
-                maybePrefetchMainItems();
-            })
-            .catch(error => {
-                console.error('Error fetching items:', error);
-                mainItemsLoadingMore = false;
-                mainItemsHasMore = false;
-                updateMainItemsLoadingIndicator();
-                if (append) {
-                    return;
-                }
-                const itemsContainer = document.querySelector('#items-container');
-                itemsContainer.innerHTML = 
-                    '<div class="error-message">Fehler beim Laden der Objekte. Bitte versuchen Sie es später erneut.</div>';
-            });
-    }
-
-    function ensureMainItemsSentinel() {
-        const itemsContainer = document.querySelector('#items-container');
-        if (!itemsContainer) return null;
-
-        ensureMainItemsLoadingIndicator();
-
-        if (!mainItemsSentinel) {
-            mainItemsSentinel = document.createElement('div');
-            mainItemsSentinel.id = 'main-items-sentinel';
-            mainItemsSentinel.style.flex = '0 0 1px';
-            mainItemsSentinel.style.width = '1px';
-            mainItemsSentinel.style.minWidth = '1px';
-            mainItemsSentinel.style.height = '1px';
-            mainItemsSentinel.style.pointerEvents = 'none';
-        }
-
-        if (!mainItemsSentinel.parentNode) {
-            itemsContainer.appendChild(mainItemsSentinel);
-        } else {
-            itemsContainer.appendChild(mainItemsSentinel);
-        }
-
-        return itemsContainer;
-    }
-
-    function setupMainItemsLazyLoading() {
-        const itemsContainer = ensureMainItemsSentinel();
-        if (!itemsContainer) return;
-
-        const styles = window.getComputedStyle(itemsContainer);
-        const isMobileLayout =
-            window.matchMedia('(max-width: 768px)').matches ||
-            styles.display === 'grid' ||
-            styles.flexDirection === 'column';
-
-        if (mainItemsObserver) {
-            mainItemsObserver.disconnect();
-            mainItemsObserver = null;
-        }
-
-        if (!mainItemsScrollPrefetchBound) {
-            itemsContainer.addEventListener('scroll', maybePrefetchMainItems, { passive: true });
-            window.addEventListener('scroll', maybePrefetchMainItems, { passive: true });
-            mainItemsScrollPrefetchBound = true;
-        }
-
-        // Setup DOM virtualization for items
-        if (!cardVirtualizationObserver) {
-            cardVirtualizationObserver = new IntersectionObserver((entries) => {
-                entries.forEach(entry => {
-                    const card = entry.target;
-                    if (entry.isIntersecting) {
-                        if (card.dataset.deloaded === 'true') {
-                            card.innerHTML = card.dataset.savedHtml;
-                            card.dataset.deloaded = 'false';
-                            card.classList.remove('is-deloaded');
-                            card.classList.remove('empty-frame');
-                            const favBtn = card.querySelector('.bookmark-btn');
-                            if (favBtn) {
-                                favBtn.addEventListener('click', (ev) => {
-                                    ev.stopPropagation();
-                                    toggleFavorite(card.dataset.itemId, favBtn, card);
-                                });
-                            }
-                            const cardContent = card.querySelector('.card-content');
-                            if (cardContent) {
-                                cardContent.addEventListener('click', function(e) {
-                                    if (e.target.tagName === 'BUTTON' || e.target.tagName === 'A' || e.target.tagName === 'INPUT' ||
-                                        e.target.closest('button') || e.target.closest('a') || e.target.closest('.image-container')) return;
-                                    e.stopPropagation();
-                                    openItemQuick(card.dataset.itemId);
-                                });
-                            }
-                        }
-                    } else {
-                        if (card.dataset.deloaded !== 'true') {
-                            const rect = card.getBoundingClientRect();
-                            if (rect.height > 50) {
-                                card.style.minHeight = rect.height + 'px';
-                                card.dataset.itemId = card.querySelector('.card-content')?.dataset.itemId || '';
-                                card.dataset.savedHtml = card.innerHTML;
-                                card.innerHTML = '';
-                                card.dataset.deloaded = 'true';
-                                card.classList.add('is-deloaded');
-                                card.classList.add('empty-frame');
-                            }
-                        }
-                    }
-                });
-            }, {
-                // Keep approx ~120 items rendered in DOM relative to scroll position.
-                // Assuming ~100-400px per item/row, this margin unloads elements beyond that range.
-                rootMargin: isMobileLayout ? '18000px 0px 18000px 0px' : '9000px 0px 9000px 0px'
-            });
-        }
-        
-        // Observe all valid cards
-        document.querySelectorAll('.item-card').forEach(card => cardVirtualizationObserver.observe(card));
-
-        if (!mainItemsHasMore) return;
-
-        mainItemsObserver = new IntersectionObserver(entries => {
-            if (!entries.some(entry => entry.isIntersecting)) {
-                return;
-            }
-
-            if (mainItemsLoadingMore || !mainItemsHasMore) {
-                return;
-            }
-
-            mainItemsLoadingMore = true;
-            updateMainItemsLoadingIndicator();
-            loadItems(mainItemsNextOffset, true).finally(() => {
-                mainItemsLoadingMore = false;
-                updateMainItemsLoadingIndicator();
-            });
-        }, {
-            root: isMobileLayout ? null : itemsContainer,
-            threshold: 0.15,
-            rootMargin: isMobileLayout ? '0px 0px 900px 0px' : '0px 900px 0px 0px'
-        });
-
-        mainItemsObserver.observe(mainItemsSentinel);
-        updateMainItemsLoadingIndicator();
-    }
-
-    function searchByCode() {
-        const searchInput = document.getElementById('code-search');
-        const rawSearchTerm = searchInput.value;
-        codeSearchTerm = rawSearchTerm.trim().toLowerCase();
-        
-        // Add visual feedback when searching
-        searchInput.classList.add('searching');
-        
-        // Reset highlighting before applying filters
-        const itemsContainer = document.querySelector('#items-container');
-        const allCards = itemsContainer.querySelectorAll('.item-card');
-        allCards.forEach(card => {
-            card.classList.remove('highlight-item', 'code-match', 'exact-code-match');
-        });
-        
-        // Apply filters which will handle highlighting
-        applyFilters(true); // Pass true to indicate this is a direct search
-        
-        // Remove visual feedback after a delay
-        setTimeout(() => {
-            searchInput.classList.remove('searching');
-        }, 500);
-    }
-
-    function applyFilters(isDirectSearch = false) {
-        const itemsContainer = document.querySelector('#items-container');
-        const items = itemsContainer.querySelectorAll('.item-card');
-        
-        let visibleCount = 0;
-        let codeMatchCount = 0;
-        let exactMatchCount = 0;
-        let firstMatchedCard = null;
-        let firstDescMatchedCard = null;
-        let exactMatchCard = null;
-        
-        // Process search term
-        const searchTerm = codeSearchTerm ? codeSearchTerm.trim().toLowerCase() : '';
-    const isCodeSearch = searchTerm.length > 0;
-        
-        items.forEach(item => {
-            const itemFilter1 = item.dataset.filter1;
-            const itemFilter2 = item.dataset.filter2;
-            const itemFilter3 = item.dataset.filter3;
-            const rawCode = item.dataset.code || '';
-            const itemCode = rawCode.trim().toLowerCase();
-            const itemId = item.querySelector('.card-content')?.dataset.itemId || item.dataset.itemId || '';
-            
-            // Check if item matches all active filters
-            const matchesFilter1 = checkFilterMatch(activeFilters.filter1, itemFilter1);
-            const matchesFilter2 = checkFilterMatch(activeFilters.filter2, itemFilter2);
-            const matchesFilter3 = checkFilterMatch(activeFilters.filter3, itemFilter3);
-            const passesAllFilters = matchesFilter1 && matchesFilter2 && matchesFilter3;
-            
-            // Check for code match (special logic for exact matches)
-            let matchesCodeSearch = !isCodeSearch || itemCode.includes(searchTerm);
-            let exactCodeMatch = isCodeSearch && itemCode === searchTerm;
-            
-            const matchesDesc = !descSearchIds || (itemId && descSearchIds.has(String(itemId)));
-            if (passesAllFilters && matchesCodeSearch && matchesDesc) {
-                // Show item if it matches all filters and code search
-                item.style.display = 'block';
-                visibleCount++;
-                
-                // Add appropriate highlight classes for code matches
-                if (exactCodeMatch) {
-                    item.classList.add('highlight-item', 'exact-code-match');
-                    exactMatchCount++;
-                    if (!exactMatchCard) {
-                        exactMatchCard = item;
-                    }
-                } else if (isCodeSearch && itemCode.includes(searchTerm)) {
-                    item.classList.add('code-match');
-                    codeMatchCount++;
-                    if (!firstMatchedCard) {
-                        firstMatchedCard = item;
-                    }
-                }
-
-                // Add description match highlight
-                if (descSearchIds && itemId && descSearchIds.has(String(itemId))) {
-                    item.classList.add('desc-match');
-                    if (!firstDescMatchedCard) firstDescMatchedCard = item;
-                } else {
-                    item.classList.remove('desc-match');
-                }
-            } else {
-                // Hide non-matching items
-                item.style.display = 'none';
-            }
-        });
-        
-        // Handle scrolling and highlighting for code searches
-        if (isCodeSearch && visibleCount > 0 && (codeMatchCount > 0 || exactMatchCount > 0)) {
-            setTimeout(() => {
-                // Prefer exact match, fallback to partial match
-                const cardToHighlight = exactMatchCard || firstMatchedCard;
-                
-                if (cardToHighlight) {
-                    // Fixed scrolling logic to center the card properly
-                    centerCardInView(cardToHighlight, itemsContainer);
-                    
-                    // Add stronger attention-grabbing animation
-                    applyAttentionAnimation(cardToHighlight);
-                }
-            }, 300);
-        } else if (isDirectSearch && isCodeSearch && visibleCount === 0) {
-            debugLog(`No matches found for search term "${searchTerm}"`, {
-                allCodes: Array.from(items).map(item => item.dataset.code?.trim() || 'empty')
-            });
-        }
-
-        // If description search active, scroll to first desc match
-        if (descSearchIds && firstDescMatchedCard) {
-            setTimeout(() => {
-                centerCardInView(firstDescMatchedCard, itemsContainer);
-                applyAttentionAnimation(firstDescMatchedCard);
-            }, 250);
-        }
-    }
-
-    // Description search using backend substring match (Beschreibung)
-    function searchByDescription() {
-        const input = document.getElementById('desc-search');
-        const term = (input?.value || '').trim();
-        if (!term) {
-            descSearchIds = null;
-            applyFilters(true);
-            return;
-        }
-        input?.classList.add('searching');
-        fetch(`/search_word/${encodeURIComponent(term)}`)
-            .then(r => r.json())
-            .then(data => {
-                if (data && data.success && Array.isArray(data.response)) {
-                    descSearchIds = new Set(data.response.map(String));
-                } else {
-                    descSearchIds = new Set();
-                }
-                applyFilters(true);
-            })
-            .catch(() => { descSearchIds = new Set(); applyFilters(true); })
-            .finally(() => { setTimeout(() => input?.classList.remove('searching'), 250); });
-    }
-
-    function clearDescSearch() {
-        const input = document.getElementById('desc-search');
-        if (input) input.value = '';
-        descSearchIds = null;
-        applyFilters();
-    }
-
-    // Helper function to center a card in the container view
-    function centerCardInView(card, container) {
-        // Make sure the card is visible first
-        card.style.display = 'block';
-        
-        // Get positions and dimensions
-        const containerRect = container.getBoundingClientRect();
-        const cardRect = card.getBoundingClientRect();
-        
-        // Calculate scroll position to center the card
-        const scrollPosition = card.offsetLeft - (containerRect.width/2) + (cardRect.width/2);
-        
-        // Debug the centering calculation if in debug mode
-        if (window.isDebug) {
-            console.log('Card positioning details:', {
-                cardName: card.querySelector('h3')?.textContent,
-                containerWidth: containerRect.width,
-                cardWidth: cardRect.width,
-                cardLeft: card.offsetLeft,
-                calculatedScrollPosition: scrollPosition
-            });
-        }
-        
-        // Smooth scroll to position
-        container.scrollTo({
-            left: scrollPosition,
-            behavior: 'smooth'
-        });
-    }
-
-    // Helper function to apply attention animation to a card
-    function applyAttentionAnimation(card) {
-        // Simply apply green border without animation
-        card.style.border = '3px solid #28a745';
-        card.style.boxShadow = '0 0 20px rgba(40, 167, 69, 0.7)';
-    }
-
-    function clearCodeSearch() {
-        const searchInput = document.getElementById('code-search');
-        searchInput.value = '';
-        codeSearchTerm = '';
-        
-        // Reset highlighting
-        const itemsContainer = document.querySelector('#items-container');
-        const allCards = itemsContainer.querySelectorAll('.item-card');
-        allCards.forEach(card => {
-            card.classList.remove('highlight-item', 'code-match', 'exact-code-match');
-        });
-        
-        // Apply filters to show all matching items
-        applyFilters();
-    }
-
-    // Add video file detection function
-    function isVideoFile(filename) {
-        const videoExtensions = ['.mp4', '.mov', '.avi', '.mkv', '.webm', '.flv', '.m4v', '.3gp'];
-        const extension = filename.toLowerCase().substring(filename.lastIndexOf('.'));
-        return videoExtensions.includes(extension);
-    }
-
-    function openItemModal(item) {
-        const escapeHtml = (value) => String(value ?? '')
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#39;');
-
-        const formatHistoryDate = (value) => {
-            if (!value) return '-';
-            const dt = new Date(value);
-            if (Number.isNaN(dt.getTime())) {
-                return escapeHtml(value);
-            }
-            return dt.toLocaleString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
-        };
-
-        const damageReports = Array.isArray(item.DamageReports) ? item.DamageReports : [];
-        const damageRepairs = Array.isArray(item.DamageRepairs) ? item.DamageRepairs : [];
-        const damageHistoryEntries = [];
-
-        damageReports.forEach((report) => {
-            damageHistoryEntries.push({
-                type: 'report',
-                rawDate: report?.reported_at || null,
-                dateLabel: formatHistoryDate(report?.reported_at),
-                actor: escapeHtml(report?.reported_by || '-'),
-                description: escapeHtml(report?.description || 'Schaden gemeldet'),
-                meta: '',
-            });
-        });
-
-        damageRepairs.forEach((repair) => {
-            const resolvedReports = Array.isArray(repair?.resolved_reports) ? repair.resolved_reports : [];
-            damageHistoryEntries.push({
-                type: 'repair',
-                rawDate: repair?.repaired_at || null,
-                dateLabel: formatHistoryDate(repair?.repaired_at),
-                actor: escapeHtml(repair?.repaired_by || '-'),
-                description: 'Als repariert markiert',
-                meta: `${resolvedReports.length} Meldung(en) abgeschlossen`,
-            });
-        });
-
-        damageHistoryEntries.sort((a, b) => {
-            const ta = a.rawDate ? new Date(a.rawDate).getTime() : 0;
-            const tb = b.rawDate ? new Date(b.rawDate).getTime() : 0;
-            return (Number.isNaN(tb) ? 0 : tb) - (Number.isNaN(ta) ? 0 : ta);
-        });
-
-        const damageHistoryHtml = damageHistoryEntries.length
-            ? damageHistoryEntries.map((entry) => {
-                const badgeStyle = entry.type === 'repair'
-                    ? 'background:#dcfce7;color:#166534;'
-                    : 'background:#fee2e2;color:#991b1b;';
-                const badgeText = entry.type === 'repair' ? 'Repariert' : 'Schaden';
-                const metaLine = entry.meta ? `<div style="font-size:0.84rem;color:#4b5563;">${escapeHtml(entry.meta)}</div>` : '';
-                return `
-                    <div style="border:1px solid var(--ui-border);border-radius:8px;padding:10px;background:var(--ui-surface);display:grid;gap:6px;">
-                        <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;">
-                            <span style="display:inline-block;padding:2px 8px;border-radius:999px;font-size:0.75rem;font-weight:700;${badgeStyle}">${badgeText}</span>
-                            <span style="font-size:0.84rem;color:#475569;">${entry.dateLabel}</span>
-                        </div>
-                        <div style="font-size:0.9rem;color:#0f172a;"><strong>Von:</strong> ${entry.actor}</div>
-                        <div style="font-size:0.92rem;color:#1f2937;">${entry.description}</div>
-                        ${metaLine}
-                    </div>
-                `;
-            }).join('')
-            : '<div style="font-size:0.92rem;color:#64748b;">Keine Beschädigungs-Historie vorhanden.</div>';
-
-        // Get modal elements
-        const modal = document.getElementById('item-modal');
-        const modalContent = document.getElementById('modal-content-wrapper');
-        
-        // Format filter values for display
-        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] : []);
-        
-        // Build image/video HTML with proper tags - use full size for modal
-        const imagesHtml = item.Images ? item.Images.map((file, index) => {
-            // Check if the file already has a full URL path or just the filename
-            const imageSrc = file.startsWith('/uploads/') || file.startsWith('http') ? 
-                            file : 
-                            `{{ url_for('uploaded_file', filename='') }}${file}`;
-            
-            if (isVideoFile(file)) {
-                return `<video src="${imageSrc}" class="modal-image ${index === 0 ? 'active-image' : ''}" id="modal-image-${index}" controls preload="metadata">
-                         Your browser does not support the video tag.
-                         </video>`;
-            } else {
-                // For images, use optimized 480p version for performance
-                // Extract filename for optimization endpoint
-                const imageFilename = file.split('/').pop();
-                let optimizedSrc = `{{ url_for('optimized_image', filename='') }}${imageFilename}`;
-                
-                // Fallback to original if optimization fails
-                const baseSrc = file.startsWith('/uploads/') || file.startsWith('http') ? 
-                               file : 
-                               `{{ url_for('uploaded_file', filename='') }}${file}`;
-                
-                // Use our PNG to JPG conversion helper function
-                const imageSrc = getImageSrc(baseSrc);
-                
-                return `<img src="${optimizedSrc}" alt="${item.Name}" class="modal-image ${index === 0 ? 'active-image' : ''}" id="modal-image-${index}" 
-                         onerror="if(this.src !== '${imageSrc.primary}') this.src='${imageSrc.primary}'; else if(this.src !== '${imageSrc.fallback}') this.src='${imageSrc.fallback}'; else this.src='{{ url_for('static', filename='img/no-image.png') }}';">`;
-            }
-        }).join('') : '';
-        
-        const groupedCount = Number(item.GroupedDisplayCount || 1);
-        const availableGroupedCount = Number(item.AvailableGroupedCount ?? (item.Verfuegbar ? 1 : 0));
-        const isGroupedItem = groupedCount > 1;
-        const groupedAvailableUnits = Array.isArray(item.GroupedAvailableUnits) ? item.GroupedAvailableUnits : [];
-        const canScheduleItem = isGroupedItem || item.Reservierbar !== false;
-        // Check if item is borrowed
-        const isBorrowed = isGroupedItem ? availableGroupedCount <= 0 : !item.Verfuegbar;
-        
-        // Build borrower info panel if applicable
-        let borrowerInfoHtml = '';
-        if (isBorrowed && item.BorrowerInfo) {
-            borrowerInfoHtml = `
-                <div class="borrower-info-panel">
-                    <h4>Ausleihstatus</h4>
-                    <p class="borrower-name">Ausgeliehen von: ${item.BorrowerInfo.username}</p>
-                    <p class="borrow-time">Seit: ${item.BorrowerInfo.borrowTime || 'Unbekannt'}</p>
-                </div>
-            `;
-        }
-        
-        // Build modal content HTML
-        modalContent.innerHTML = `
-            <h2>${item.Name}</h2>
-            <div class="modal-action-bar" style="position:absolute; top:10px; right:10px; display:flex; gap:8px;">
-                <button type="button" class="bookmark-btn" id="modal-bookmark-btn" title="Merken">${(window.currentFavorites||new Set()).has(item._id) ? '★' : '☆'}</button>
-            </div>
-            ${borrowerInfoHtml}
-            
-            <div class="modal-image-container">
-                ${imagesHtml}
-                ${item.Images && item.Images.length > 1 ? `
-                    <button class="modal-image-nav modal-prev-image" onclick="changeModalImage(-1)">&#10094;</button>
-                    <button class="modal-image-nav modal-next-image" onclick="changeModalImage(1)">&#10095;</button>
-                    <div class="image-counter">1/${item.Images.length}</div>
-                ` : ''}
-            </div>
-            
-            <div class="modal-details">
-                <div class="detail-group">
-                    <div class="detail-label">Ort:</div>
-                    <div class="detail-value">${item.Ort || '-'}</div>
-                </div>
-                
-                <div class="detail-group">
-                    <div class="detail-label">Status:</div>
-                    <div class="detail-value ${isBorrowed ? 'status-borrowed' : ''}">
-                        ${isBorrowed ? 'Ausgeliehen' : 'Verfügbar'}
-                    </div>
-                </div>
-                
-                <div class="detail-group">
-                    <div class="detail-label">Unterrichtsfach:</div>
-                    <div class="detail-value">${filter1Array.join(', ') || '-'}</div>
-                </div>
-                
-                <div class="detail-group">
-                    <div class="detail-label">Jahrgangsstufe:</div>
-                    <div class="detail-value">${filter2Array.join(', ') || '-'}</div>
-                </div>
-                
-                <div class="detail-group">
-                    <div class="detail-label">Schlagwort:</div>
-                    <div class="detail-value">${filter3Array.join(', ') || '-'}</div>
-                </div>
-                
-                <div class="detail-group">
-                    <div class="detail-label">Code:</div>
-                    <div class="detail-value">${item.Code_4 || '-'}</div>
-                </div>
-
-                <div class="detail-group">
-                    <div class="detail-label">Anzahl:</div>
-                    <div class="detail-value">${groupedCount}</div>
-                </div>
-
-                ${isGroupedItem ? `
-                <div class="detail-group">
-                    <div class="detail-label">Verfügbar:</div>
-                    <div class="detail-value">${availableGroupedCount}</div>
-                </div>` : ''}
-                
-                <div class="detail-group">
-                    <div class="detail-label">Anschaffungsjahr:</div>
-                    <div class="detail-value">${item.Anschaffungsjahr || '-'}</div>
-                </div>
-                
-                <div class="detail-group">
-                    <div class="detail-label">Anschaffungskosten:</div>
-                    <div class="detail-value">${item.Anschaffungskosten ? item.Anschaffungskosten + ' €' : '-'}</div>
-                </div>
-                
-                <div class="detail-group full-width">
-                    <div class="detail-label">Beschreibung:</div>
-                    <div class="detail-value">${item.Beschreibung || '-'}</div>
-                </div>
-
-                <div class="detail-group full-width" style="margin-top:12px;">
-                    <div class="detail-label" style="font-weight:600; color:#374151;">Beschädigungs-Historie</div>
-                    <div class="detail-value">
-                        <button id="toggle-damage-history" class="calendar-toggle-btn" style="margin-bottom:12px; padding:10px 16px; border-radius:6px; background:#f3f4f6; border:1px solid #d1d5db; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all 0.2s ease;">
-                            <span>🛠️</span>
-                            <span id="toggle-damage-history-text">Historie anzeigen</span>
-                        </button>
-                        <div id="damage-history-panel" style="display:none; margin-top:8px; border:1px solid #e7edf5; border-radius:10px; padding:12px; background: var(--ui-surface-soft);">
-                            <div style="display:grid; gap:10px;">${damageHistoryHtml}</div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="detail-group full-width" style="margin-top:14px; padding:12px; border:1px solid #e5e7eb; border-radius:10px; background:#fbfbfd; box-shadow: 0 1px 1px rgba(0,0,0,0.03);">
-                    <div class="detail-label" style="font-weight:600; color:#374151;">Verfügbarkeit prüfen</div>
-                    <div class="detail-value">
-                        <div style="display:flex; flex-wrap:wrap; gap:10px; align-items:center;">
-                            <input type="date" id="avail-date" style="padding:8px 10px; border:1px solid #d1d5db; border-radius:8px;">
-                            <select id="avail-start" style="padding:8px 10px; border:1px solid #d1d5db; border-radius:8px;">
-                                <option value="">Von Stunde</option>
-                                <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
-                            </select>
-                            <select id="avail-end" style="padding:8px 10px; border:1px solid #d1d5db; border-radius:8px;">
-                                <option value="">Bis Stunde</option>
-                                <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
-                            </select>
-                            <button id="avail-check" class="filter-toggle" style="padding:8px 12px; border-radius:8px;">Prüfen</button>
-                            <span id="avail-result" style="margin-left:8px; font-weight:600;"></span>
-                        </div>
-                        <div id="avail-conflicts" style="margin-top:8px; color:#b91c1c; font-size:0.95em;"></div>
-                    </div>
-                </div>
-
-                <div class="detail-group full-width" style="margin-top:12px;">
-                    <div class="detail-label" style="font-weight:600; color:#374151;">Geplante Ausleihen</div>
-                    <div class="detail-value">
-                        <button id="toggle-bookings" class="calendar-toggle-btn" style="margin-bottom:12px; padding:10px 16px; border-radius:6px; background:#f3f4f6; border:1px solid #d1d5db; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all 0.2s ease;">
-                            <span>📅</span>
-                            <span id="toggle-bookings-text">Kalender anzeigen</span>
-                        </button>
-                        <div id="bookings-panel" style="display:none; margin-top:10px;">
-                            <div class="calendar-wrapper">
-                                <div class="calendar-header">
-                                    <button id="cal-prev">&lt;</button>
-                                    <span id="cal-month-year"></span>
-                                    <button id="cal-next">&gt;</button>
-                                </div>
-                                <div id="calendar-grid" class="calendar-grid"></div>
-                            </div>
-                            <div id="calendar-day-details" class="calendar-day-details">
-                                <h5 id="cal-details-date"></h5>
-                                <div id="cal-details-list"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="modal-actions">
-                ${(!isBorrowed) && !item.BlockedNow ? 
-                    `<form method="POST" action="/ausleihen/${item._id}">
-                        ${isGroupedItem ? `
-                        <div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; align-items:center;">
-                            <label style="font-size:0.85rem; margin:0;">Anzahl:</label>
-                            <input type="number" name="exemplare_count" min="1" max="${availableGroupedCount}" value="1" style="width:78px; padding:4px;">
-                            <label style="font-size:0.85rem; margin:0;">oder Code:</label>
-                            <select id="specific-item-modal-${item._id}" name="specific_item_id" style="max-width:220px; padding:4px;">
-                                <option value="">Automatisch wählen</option>
-                                ${groupedAvailableUnits.map(unit => `<option value="${unit.id}">${unit.code || '-'}</option>`).join('')}
-                            </select>
-                        </div>` : ''}
-                        <button class="ausleihen" type="submit">Ausleihen</button>
-                    </form>` 
-                    : (!isGroupedItem && item.User === currentUsername) ?
-                    `<form method="POST" action="/zurueckgeben/${item._id}">
-                        <button class="ausleihen" type="submit">Zurückgeben</button>
-                    </form>`
-                    : `<button class="ausleihen disabled-button" disabled>${item.BlockedNow ? 'Reserviert' : 'Ausgeliehen'}</button>`
-                }
-                ${canScheduleItem ? `<button class="schedule-button" onclick="openScheduleModal('${item._id}')">Reservieren</button>` : ''}
-                <button type="button" class="details-button" onclick="document.getElementById('item-modal').style.display='none';">Schließen</button>
-            </div>
-        `;
-        
-        // Show the modal
-        modal.style.display = 'block';
-        
-        // Set up close button
-        const closeButton = modal.querySelector('.close-modal');
-        closeButton.onclick = function() {
-            modal.style.display = 'none';
-        };
-        // Bookmark button in modal
-        const modalBookmark = document.getElementById('modal-bookmark-btn');
-        if(modalBookmark){
-            modalBookmark.addEventListener('click', ()=>{
-                // Find corresponding card elements if present
-                const card = document.querySelector(`.item-card .card-content[data-item-id="${item._id}"]`)?.parentElement;
-                toggleFavorite(item._id, modalBookmark, card || modalBookmark);
-            });
-        }
-        
-        // Store current image index for navigation
-        window.currentModalImageIndex = 0;
-        window.totalModalImages = item.Images ? item.Images.length : 0;
-        
-        // Set up click outside to close
-        window.onclick = function(event) {
-            const itemModal = document.getElementById('item-modal');
-            const scheduleModal = document.getElementById('schedule-modal');
-            
-            if (event.target === itemModal) {
-                itemModal.style.display = 'none';
-            }
-            if (scheduleModal && event.target === scheduleModal) {
-                scheduleModal.style.display = 'none';
-            }
-        };
-
-        // Planned bookings panel (Calendar Logic)
-        const toggleBtn = document.getElementById('toggle-bookings');
-        const panel = document.getElementById('bookings-panel');
-        const calGrid = document.getElementById('calendar-grid');
-        const calMonthYear = document.getElementById('cal-month-year');
-        const calPrev = document.getElementById('cal-prev');
-        const calNext = document.getElementById('cal-next');
-        const detailsPanel = document.getElementById('calendar-day-details');
-        const detailsDate = document.getElementById('cal-details-date');
-        const detailsList = document.getElementById('cal-details-list');
-        const damageToggleBtn = document.getElementById('toggle-damage-history');
-        const damageHistoryPanel = document.getElementById('damage-history-panel');
-        const damageToggleText = document.getElementById('toggle-damage-history-text');
-
-        let bookings = [];
-        let currentDate = new Date();
-        let displayedMonth = currentDate.getMonth();
-        let displayedYear = currentDate.getFullYear();
-
-        function renderCalendar() {
-            calGrid.innerHTML = '';
-            const monthNames = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
-            calMonthYear.textContent = `${monthNames[displayedMonth]} ${displayedYear}`;
-
-            // Headers
-            const days = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
-            days.forEach(day => {
-                const div = document.createElement('div');
-                div.className = 'cal-cell header';
-                div.textContent = day;
-                calGrid.appendChild(div);
-            });
-
-            const firstDay = new Date(displayedYear, displayedMonth, 1);
-            const lastDay = new Date(displayedYear, displayedMonth + 1, 0);
-            
-            // Adjust for Monday start (0 = Sunday, 1 = Monday)
-            let startDayIndex = firstDay.getDay() - 1;
-            if (startDayIndex === -1) startDayIndex = 6;
-
-            // Empty cells before first day
-            for (let i = 0; i < startDayIndex; i++) {
-                const div = document.createElement('div');
-                div.className = 'cal-cell empty';
-                calGrid.appendChild(div);
-            }
-
-            // Days
-            for (let i = 1; i <= lastDay.getDate(); i++) {
-                const div = document.createElement('div');
-                div.className = 'cal-cell';
-                div.dataset.day = String(i);
-                div.textContent = i;
-                
-                const currentDayDate = new Date(displayedYear, displayedMonth, i);
-                const today = new Date();
-                if (currentDayDate.toDateString() === today.toDateString()) {
-                    div.classList.add('today');
-                }
-
-                // Check for bookings
-                const dayBookings = bookings.filter(b => {
-                    const checkDate = new Date(displayedYear, displayedMonth, i);
-                    checkDate.setHours(0,0,0,0);
-                    
-                    const bStart = new Date(b.start);
-                    bStart.setHours(0,0,0,0);
-                    
-                    // If end is present use it, otherwise assume single day
-                    let bEnd = b.end ? new Date(b.end) : new Date(bStart);
-                    bEnd.setHours(0,0,0,0);
-
-                    return checkDate >= bStart && checkDate <= bEnd;
-                });
-
-                if (dayBookings.length > 0) {
-                    div.classList.add('has-booking');
-                    div.onclick = () => showDayDetails(i, dayBookings);
-                }
-
-                calGrid.appendChild(div);
-            }
-        }
-
-        function showDayDetails(day, dayBookings) {
-            // Remove selected class from others
-            document.querySelectorAll('.cal-cell').forEach(c => c.classList.remove('selected'));
-            const selectedDay = calGrid.querySelector(`.cal-cell[data-day="${day}"]`);
-            if (selectedDay) {
-                selectedDay.classList.add('selected');
-            }
-
-            const esc = (value) => String(value ?? '')
-                .replace(/&/g, '&amp;')
-                .replace(/</g, '&lt;')
-                .replace(/>/g, '&gt;')
-                .replace(/"/g, '&quot;')
-                .replace(/'/g, '&#39;');
-            
-            detailsPanel.style.display = 'block';
-            detailsDate.textContent = `Termine am ${day}.${displayedMonth + 1}.${displayedYear}`;
-            
-            if (dayBookings.length === 0) {
-                detailsList.innerHTML = '<div class="cal-empty-state">Keine Termine für diesen Tag.</div>';
-                return;
-            }
-
-            detailsList.innerHTML = dayBookings.map(b => {
-                const startStr = new Date(b.start).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
-                const endStr = b.end ? new Date(b.end).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) : '';
-                const timeRange = `${startStr}${endStr ? ' - ' + endStr : ''}`;
-                const periodStr = b.period ? `${b.period}. Stunde` : '';
-                const userStr = b.user ? esc(b.user) : 'Nicht angegeben';
-                const notesStr = b.notes ? esc(b.notes) : '';
-                return `<div class="cal-booking-item">
-                    <div class="cal-booking-time"><span class="cal-booking-label">Zeit</span><strong>${esc(timeRange)}</strong>${periodStr ? `<span class="cal-booking-period">${esc(periodStr)}</span>` : ''}</div>
-                    <div class="cal-booking-user"><span class="cal-booking-label">Nutzer</span>${userStr}</div>
-                    ${notesStr ? `<div class="cal-booking-note"><span class="cal-booking-label">Notiz</span>${notesStr}</div>` : ''}
-                </div>`;
-            }).join('');
-        }
-
-        toggleBtn?.addEventListener('click', ()=>{
-            const btnText = document.getElementById('toggle-bookings-text');
-            if(panel.style.display === 'none'){
-                panel.style.display = 'block';
-                if(btnText) btnText.textContent = 'Kalender verbergen';
-                toggleBtn.style.background = '#e0e7ff';
-                toggleBtn.style.borderColor = '#818cf8';
-                if(bookings.length === 0){
-                    fetch(`/get_planned_bookings_public/${item._id}`)
-                        .then(r=>r.json())
-                        .then(d=>{ 
-                            if(d && d.ok && Array.isArray(d.bookings)){ 
-                                bookings = d.bookings; 
-                                renderCalendar(); 
-                            } else { 
-                                calGrid.innerHTML = '<div style="padding:10px; grid-column:1/-1;">Fehler beim Laden.</div>'; 
-                            } 
-                        })
-                        .catch(()=>{ calGrid.innerHTML = '<div style="padding:10px; grid-column:1/-1;">Fehler beim Laden.</div>'; });
-                } else {
-                    renderCalendar();
-                }
-            } else {
-                panel.style.display = 'none';
-                detailsPanel.style.display = 'none';
-                if(btnText) btnText.textContent = 'Kalender anzeigen';
-                toggleBtn.style.background = '#f3f4f6';
-                toggleBtn.style.borderColor = '#d1d5db';
-            }
-        });
-
-        calPrev?.addEventListener('click', () => {
-            displayedMonth--;
-            if (displayedMonth < 0) {
-                displayedMonth = 11;
-                displayedYear--;
-            }
-            detailsPanel.style.display = 'none';
-            renderCalendar();
-        });
-
-        calNext?.addEventListener('click', () => {
-            displayedMonth++;
-            if (displayedMonth > 11) {
-                displayedMonth = 0;
-                displayedYear++;
-            }
-            detailsPanel.style.display = 'none';
-            renderCalendar();
-        });
-
-        damageToggleBtn?.addEventListener('click', () => {
-            const shouldOpen = damageHistoryPanel.style.display === 'none';
-            damageHistoryPanel.style.display = shouldOpen ? 'block' : 'none';
-            if (damageToggleText) {
-                damageToggleText.textContent = shouldOpen ? 'Historie verbergen' : 'Historie anzeigen';
-            }
-            damageToggleBtn.style.background = shouldOpen ? '#e0e7ff' : '#f3f4f6';
-            damageToggleBtn.style.borderColor = shouldOpen ? '#818cf8' : '#d1d5db';
-        });
-
-        // Availability checker (user)
-        const availDate = document.getElementById('avail-date');
-        const availStart = document.getElementById('avail-start');
-        const availEnd = document.getElementById('avail-end');
-        const availBtn = document.getElementById('avail-check');
-        const availRes = document.getElementById('avail-result');
-        const availConf = document.getElementById('avail-conflicts');
-        availBtn?.addEventListener('click', ()=>{
-            const d = availDate?.value;
-            const s = availStart?.value;
-            const e = availEnd?.value || s;
-            if(!d || !s){
-                availRes.textContent = 'Bitte Datum und Startstunde wählen.';
-                return;
-            }
-            availRes.textContent = 'Prüfe…';
-            availConf.innerHTML = '';
-            fetch(`/check_availability?item_id=${encodeURIComponent(item._id)}&date=${encodeURIComponent(d)}&start=${encodeURIComponent(s)}&end=${encodeURIComponent(e)}`)
-                .then(r=>r.json())
-                .then(ans=>{
-                    if(ans && ans.ok){
-                        if(ans.available){
-                            availRes.textContent = 'Verfügbar ✅';
-                        } else {
-                            availRes.textContent = 'Nicht verfügbar ❌';
-                            if(Array.isArray(ans.conflicts)){
-                                availConf.innerHTML = ans.conflicts.map(c=>{
-                                    const start = c.start ? new Date(c.start).toLocaleString() : '';
-                                    const end = c.end ? new Date(c.end).toLocaleString() : '';
-                                    const who = c.user ? ` (${c.user})` : '';
-                                    const status = c.status || '';
-                                    return `<div>- ${status}${who}: ${start}${end? ' - '+end: ''}</div>`;
-                                }).join('');
-                            }
-                        }
-                    } else {
-                        availRes.textContent = 'Fehler bei der Prüfung.';
-                    }
-                })
-                .catch(()=>{ availRes.textContent = 'Fehler bei der Prüfung.'; });
-        });
-    }
-
-    // Modal image navigation for detailed view
-    function changeModalImage(direction) {
-        const total = window.totalModalImages || 0;
-        if (total <= 1) return;
-
-        const currentIndex = window.currentModalImageIndex || 0;
-        // Remove active class from current image
-        const currentImage = document.getElementById(`modal-image-${currentIndex}`);
-        if (currentImage) {
-            currentImage.classList.remove('active-image');
-            if (currentImage.tagName === 'VIDEO') {
-                try { currentImage.pause(); } catch (e) {}
-            }
-        }
-
-        // Compute new index with wrap-around
-        let newIndex = (currentIndex + direction) % total;
-        if (newIndex < 0) newIndex = total - 1;
-
-        // Activate new image
-        const newImage = document.getElementById(`modal-image-${newIndex}`);
-        if (newImage) newImage.classList.add('active-image');
-
-        // Update counter
-        const counter = document.querySelector('.image-counter');
-        if (counter) counter.textContent = `${newIndex + 1}/${total}`;
-
-        window.currentModalImageIndex = newIndex;
-    }
-
-    // Add this function to ensure proper image display on mobile and desktop
-    function setupCardImagesDisplay() {
-        // Wait for DOM to be fully loaded
-        setTimeout(() => {
-            const cards = document.querySelectorAll('.item-card');
-            cards.forEach(card => {
-                const images = card.querySelectorAll('.item-image');
-                
-                // Add active class to first image
-                if (images.length > 0) {
-                    images[0].classList.add('active-image');
-                    
-                    // Also handle video containers if present
-                    const videoContainers = card.querySelectorAll('.video-container');
-                    if (videoContainers.length > 0) {
-                        videoContainers[0].classList.add('active-container');
-                    }
-                }
-            });
-        }, 200);
-    }
-
-    function closeAllFilterDropdowns(exceptId = null) {
-        document.querySelectorAll('.filter-dropdown').forEach(dd => {
-            if (!exceptId || dd.id !== exceptId) {
-                dd.style.display = 'none';
-            }
-        });
-        document.querySelectorAll('.filter-toggle').forEach(btn => {
-            btn.classList.remove('is-open');
-            btn.setAttribute('aria-expanded', 'false');
-        });
-    }
-
-    function toggleFilterDropdown(dropdownId) {
-        const dropdown = document.getElementById(dropdownId);
-        if (!dropdown) {
-            return;
-        }
-
-        const shouldOpen = dropdown.style.display !== 'block';
-        closeAllFilterDropdowns(dropdownId);
-        dropdown.style.display = shouldOpen ? 'block' : 'none';
-        const group = dropdown.closest('.filter-group');
-        const toggle = group ? group.querySelector('.filter-toggle') : null;
-        if (toggle) {
-            toggle.classList.toggle('is-open', shouldOpen);
-            toggle.setAttribute('aria-expanded', shouldOpen ? 'true' : 'false');
-        }
-    }
-
-    document.addEventListener('click', function(event) {
-        if (!event.target.closest('.filter-group')) {
-            closeAllFilterDropdowns();
-        }
-    });
-
-    function clearFilter(filterNum) {
-        activeFilters[`filter${filterNum}`] = [];
-        document.getElementById(`selected-filter${filterNum}`).innerHTML = '';
-        
-        // Uncheck all checkboxes
-        const checkboxes = document.querySelectorAll(`#filter${filterNum}-options input[type="checkbox"]`);
-        checkboxes.forEach(checkbox => {
-            checkbox.checked = false;
-        });
-        
-        // If Filter 1 was cleared, rebuild Filter 2 and Filter 3 options
-        if (filterNum === 1) {
-            rebuildFilter2Options();
-            rebuildFilter3Options();
-        }
-        // If Filter 2 was cleared, rebuild Filter 3 options
-        else if (filterNum === 2) {
-            rebuildFilter3Options();
-        }
-        
-        // Save and apply the updated filters
-        saveFilterState();
-        applyFilters();
-    }
-
-    function updateFilter(filterNum, value, isChecked, group = '') {
-        const filterKey = `filter${filterNum}`;
-        // Add group prefix if provided
-        const filterValue = group ? `${group}:${value}` : value;
-        
-        if (isChecked) {
-            // Add filter value if not already present
-            if (!activeFilters[filterKey].includes(filterValue)) {
-                activeFilters[filterKey].push(filterValue);
-            }
-        } else {
-            // Remove filter value
-            activeFilters[filterKey] = activeFilters[filterKey].filter(v => v !== filterValue);
-        }
-        
-        // Update the filter display
-        updateSelectedFilters(filterNum);
-        
-        // If Filter 1 changed, rebuild Filter 2 options, then rebuild Filter 3
-        if (filterNum === 1) {
-            rebuildFilter2Options();
-            rebuildFilter3Options();
-        }
-        // If Filter 2 changed, rebuild Filter 3 options
-        else if (filterNum === 2) {
-            rebuildFilter3Options();
-        }
-        
-        // Save and apply the filters
-        saveFilterState();
-        applyFilters();
-    }
-
-    function updateSelectedFilters(filterNum) {
-        const container = document.getElementById(`selected-filter${filterNum}`);
-        container.innerHTML = '';
-        
-        activeFilters[`filter${filterNum}`].forEach(filter => {
-            // Extract display value from filter
-            let displayValue = filter;
-            let groupName = '';
-            
-            // Handle group:value format
-            if (filter.includes(':')) {
-                [groupName, displayValue] = filter.split(':');
-            }
-            
-            // Create filter tag
-            const tag = document.createElement('div');
-            tag.className = 'filter-tag';
-            
-            // Show group if present
-            let tagContent = '';
-            if (groupName) {
-                tagContent += `<span class="filter-tag-group">${groupName}:</span>`;
-            }
-            
-            // Add filter value and remove button
-            tagContent += displayValue;
-            tagContent += `<button class="filter-tag-remove" onclick="removeFilter(${filterNum}, '${filter}')">&times;</button>`;
-            
-            tag.innerHTML = tagContent;
-            container.appendChild(tag);
-        });
-    }
-
-    function removeFilter(filterNum, filter) {
-        const filterKey = `filter${filterNum}`;
-        
-        // Remove from active filters
-        activeFilters[filterKey] = activeFilters[filterKey].filter(f => f !== filter);
-        
-        // Update UI
-        updateSelectedFilters(filterNum);
-        
-        // Uncheck corresponding checkbox if exists
-        let value = filter;
-        let group = '';
-        
-        if (filter.includes(':')) {
-            [group, value] = filter.split(':');
-        }
-        
-        // Find and uncheck the checkbox
-        const checkboxes = document.querySelectorAll(`#filter${filterNum}-options input[type="checkbox"]`);
-        checkboxes.forEach(checkbox => {
-            if ((checkbox.value === value) && 
-                ((!group && !checkbox.dataset.group) || 
-                 (group && checkbox.dataset.group === group))) {
-                checkbox.checked = false;
-            }
-        });
-        
-        // If Filter 1 was changed, rebuild Filter 2 and Filter 3 options
-        if (filterNum === 1) {
-            rebuildFilter2Options();
-            rebuildFilter3Options();
-        }
-        // If Filter 2 was changed, rebuild Filter 3 options
-        else if (filterNum === 2) {
-            rebuildFilter3Options();
-        }
-        
-        // Save and apply the filters
-        saveFilterState();
-        applyFilters();
-    }
-
-    function bulkToggleFilterOptions(filterNum, shouldSelect) {
-        const filterKey = `filter${filterNum}`;
-        const checkboxes = Array.from(document.querySelectorAll(`#filter${filterNum}-options input[type="checkbox"]`));
-        if (checkboxes.length === 0) {
-            return;
-        }
-
-        const nextValues = new Set(activeFilters[filterKey]);
-
-        checkboxes.forEach(checkbox => {
-            const value = checkbox.value;
-            const group = checkbox.dataset.group || '';
-            const filterValue = group ? `${group}:${value}` : value;
-            checkbox.checked = shouldSelect;
-
-            if (shouldSelect) {
-                nextValues.add(filterValue);
-            } else {
-                nextValues.delete(filterValue);
-            }
-        });
-
-        activeFilters[filterKey] = Array.from(nextValues);
-        updateSelectedFilters(filterNum);
-
-        if (filterNum === 1) {
-            rebuildFilter2Options();
-            rebuildFilter3Options();
-        } else if (filterNum === 2) {
-            rebuildFilter3Options();
-        }
-
-        saveFilterState();
-        applyFilters();
-    }
-
-    function populateFilterOptions(containerId, filterValues, filterNum) {
-        const container = document.getElementById(containerId);
-        if (!container) {
-            debugLog(`Container not found: ${containerId}`);
-            return;
-        }
-        
-        container.innerHTML = ''; // Clear previous options
-        
-        const bulkActions = document.createElement('div');
-        bulkActions.style.display = 'flex';
-        bulkActions.style.gap = '8px';
-        bulkActions.style.marginBottom = '10px';
-
-        const selectAllBtn = document.createElement('button');
-        selectAllBtn.type = 'button';
-        selectAllBtn.className = 'clear-filter';
-        selectAllBtn.textContent = 'Alle wählen';
-        selectAllBtn.onclick = () => bulkToggleFilterOptions(filterNum, true);
-
-        const clearAllBtn = document.createElement('button');
-        clearAllBtn.type = 'button';
-        clearAllBtn.className = 'clear-filter';
-        clearAllBtn.textContent = 'Alle abwählen';
-        clearAllBtn.onclick = () => bulkToggleFilterOptions(filterNum, false);
-
-        bulkActions.appendChild(selectAllBtn);
-        bulkActions.appendChild(clearAllBtn);
-        container.appendChild(bulkActions);
-
-        // First group values by category/prefix if they exist
-        const groupedValues = {};
-        
-        // Process filter values to identify groups
-        filterValues.forEach(value => {
-            if (!value) return; // Skip empty values
-            
-            let group = 'Default';
-            let displayValue = value;
-            
-            // Check if value contains grouping delimiter
-            if (typeof value === 'string' && value.includes(':')) {
-                [group, displayValue] = value.split(':', 2);
-            }
-            
-            // Initialize group array if needed
-            if (!groupedValues[group]) {
-                groupedValues[group] = [];
-            }
-            
-            // Add value to group
-            groupedValues[group].push(displayValue);
-        });
-        
-        // Now create DOM elements for each group
-        Object.keys(groupedValues).sort().forEach(group => {
-            // Skip empty groups
-            if (!groupedValues[group].length) return;
-            
-            // Create option group
-            const groupDiv = document.createElement('div');
-            groupDiv.className = 'filter-option-group';
-            
-            // Add group header if not default
-            if (group !== 'Default') {
-                const header = document.createElement('div');
-                header.className = 'filter-group-header';
-                header.textContent = group;
-                groupDiv.appendChild(header);
-            }
-            
-            // Add each filter option in this group
-            groupedValues[group].sort().forEach(value => {
-                // Create filter option
-                const optionDiv = document.createElement('div');
-                optionDiv.className = 'filter-option';
-                
-                // Create unique ID for checkbox
-                const safeValue = value.replace(/[^a-zA-Z0-9]/g, '_');
-                const safeGroup = group.replace(/[^a-zA-Z0-9]/g, '_');
-                const id = `filter${filterNum}-${safeGroup}-${safeValue}`;
-                
-                // Create checkbox
-                const checkbox = document.createElement('input');
-                checkbox.type = 'checkbox';
-                checkbox.id = id;
-                checkbox.value = value;
-                
-                // Store group info for filtering
-                if (group !== 'Default') {
-                    checkbox.dataset.group = group;
-                }
-                
-                // Check if this value is already active
-                const filterValue = group !== 'Default' ? `${group}:${value}` : value;
-                checkbox.checked = activeFilters[`filter${filterNum}`].includes(filterValue);
-                
-                // Add change handler
-                checkbox.onchange = () => {
-                    updateFilter(filterNum, value, checkbox.checked, 
-                        group !== 'Default' ? group : '');
-                };
-                
-                // Create label
-                const label = document.createElement('label');
-                label.htmlFor = id;
-                label.textContent = value;
-                
-                // Add to DOM
-                optionDiv.appendChild(checkbox);
-                optionDiv.appendChild(label);
-                groupDiv.appendChild(optionDiv);
-            });
-            
-            // Add group to container
-            container.appendChild(groupDiv);
-        });
-    }
-
-    function checkFilterMatch(activeFilterValues, itemFilterValuesJSON) {
-        // If no active filters, all items match
-        if (!activeFilterValues || activeFilterValues.length === 0) {
-            return true;
-        }
-        
-        try {
-            // Parse item filter values
-            const itemFilterValues = JSON.parse(itemFilterValuesJSON || '[]');
-            
-            // If item has no values, it can't match any filters
-            if (!itemFilterValues || itemFilterValues.length === 0) {
-                return false;
-            }
-            
-            // Check if ANY active filter values match ANY item filter values
-            for (const activeFilter of activeFilterValues) {
-                // Extract value from activeFilter (remove group prefix if exists)
-                const activeValue = activeFilter.includes(':') 
-                    ? activeFilter.split(':')[1] 
-                    : activeFilter;
-                
-                // Check if any item filter value matches this active filter
-                if (itemFilterValues.includes(activeValue)) {
-                    return true;
-                }
-            }
-            
-            // No match found
-            return false;
-        } catch (err) {
-            console.error("Error in checkFilterMatch:", err);
-            debugLog("Error in checkFilterMatch:", {
-                error: err.message,
-                activeFilters: activeFilterValues,
-                itemFilters: itemFilterValuesJSON
-            });
-            return false;
-        }
-    }
-
-    // Add these functions right after the loadFilterState() function
-
-    function rebuildFilter3Options() {
-        if (!allItems) return;
-        
-        // Get current filter 1 and filter 2 selections
-        const filter1Selections = activeFilters.filter1;
-        const filter2Selections = activeFilters.filter2;
-        
-        // If both filters are empty, show all filter3 values from server
-        if (filter1Selections.length === 0 && filter2Selections.length === 0) {
-            // Include dynamically added ones from loaded items too, just in case
-            const combinedFilter3Values = new Set(typeof allFilter3Values !== 'undefined' ? [...allFilter3Values] : []);
-            allItems.forEach(item => {
-                const filter3Array = Array.isArray(item.Filter3) ? item.Filter3 : 
-                                   (item.Filter3 ? [item.Filter3] : []);
-                
-                filter3Array.forEach(value => {
-                    if (value && typeof value === 'string' && value.trim() !== '') {
-                        combinedFilter3Values.add(value);
-                    }
-                });
-            });
-            
-            // Populate filter 3 dropdown with all values
-            populateFilterOptions('filter3-options', [...combinedFilter3Values].sort(), 3);
-            return;
-        }
-        
-        // Filter items based on filter1 and filter2 selections
-        const filteredItems = allItems.filter(item => {
-            // Check if item passes Filter 1
-            const filter1Array = Array.isArray(item.Filter) ? item.Filter : (item.Filter ? [item.Filter] : []);
-            const filter1Match = filter1Selections.length === 0 || 
-                filter1Selections.some(filter => {
-                    // Extract value from filter (remove group prefix if exists)
-                    const filterValue = filter.includes(':') ? filter.split(':')[1] : filter;
-                    return filter1Array.includes(filterValue);
-                });
-            
-            // Check if item passes Filter 2
-            const filter2Array = Array.isArray(item.Filter2) ? item.Filter2 : (item.Filter2 ? [item.Filter2] : []);
-            const filter2Match = filter2Selections.length === 0 || 
-                filter2Selections.some(filter => {
-                    // Extract value from filter (remove group prefix if exists)
-                    const filterValue = filter.includes(':') ? filter.split(':')[1] : filter;
-                    return filter2Array.includes(filterValue);
-                });
-            
-            return filter1Match && filter2Match;
-        });
-        
-        // Get unique Filter 3 values from filtered items
-        const availableFilter3Values = new Set();
-        filteredItems.forEach(item => {
-            const filter3Array = Array.isArray(item.Filter3) ? item.Filter3 : (item.Filter3 ? [item.Filter3] : []);
-            filter3Array.forEach(value => {
-                if (value && typeof value === 'string' && value.trim() !== '') {
-                    availableFilter3Values.add(value);
-                }
-            });
-        });
-        
-        // Keep track of current filter 3 selections that are still valid
-        const validFilter3Selections = [];
-        activeFilters.filter3.forEach(filter => {
-            // Extract value from filter (remove group prefix if exists)
-            const filterValue = filter.includes(':') ? filter.split(':')[1] : filter;
-            if (availableFilter3Values.has(filterValue)) {
-                validFilter3Selections.push(filter);
-            }
-        });
-        
-        // Update active filter 3 selections (remove invalid ones)
-        if (validFilter3Selections.length !== activeFilters.filter3.length) {
-            activeFilters.filter3 = validFilter3Selections;
-            updateSelectedFilters(3);
-            // No need to call applyFilters() here as it will be called after this function
-        }
-        
-        // Populate filter 3 dropdown with only available values
-        populateFilterOptions('filter3-options', [...availableFilter3Values].sort(), 3);
-    }
-
-    function rebuildFilter2Options() {
-        if (!allItems || allItems.length === 0) return;
-        
-        // Get current filter 1 selections
-        const filter1Selections = activeFilters.filter1;
-        
-        // If filter1 is empty, show all filter2 values
-        if (filter1Selections.length === 0) {
-            // Get all unique filter2 values
-            const allFilter2Values = new Set();
-            allItems.forEach(item => {
-                const filter2Array = Array.isArray(item.Filter2) ? item.Filter2 : 
-                                   (item.Filter2 ? [item.Filter2] : []);
-                
-                filter2Array.forEach(value => {
-                    if (value && typeof value === 'string' && value.trim() !== '') {
-                        allFilter2Values.add(value);
-                    }
-                });
-            });
-            
-            // Populate filter 2 dropdown with all values
-            populateFilterOptions('filter2-options', [...allFilter2Values].sort(), 2);
-            return;
-        }
-        
-        // Filter items based on filter1 selections
-        const filteredItems = allItems.filter(item => {
-            // Check if item passes Filter 1
-            const filter1Array = Array.isArray(item.Filter) ? item.Filter : (item.Filter ? [item.Filter] : []);
-            return filter1Selections.some(filter => {
-                // Extract value from filter (remove group prefix if exists)
-                const filterValue = filter.includes(':') ? filter.split(':')[1] : filter;
-                return filter1Array.includes(filterValue);
-            });
-        });
-        
-        // Get unique Filter 2 values from filtered items
-        const availableFilter2Values = new Set();
-        filteredItems.forEach(item => {
-            const filter2Array = Array.isArray(item.Filter2) ? item.Filter2 : (item.Filter2 ? [item.Filter2] : []);
-            filter2Array.forEach(value => {
-                if (value && typeof value === 'string' && value.trim() !== '') {
-                    availableFilter2Values.add(value);
-                }
-            });
-        });
-        
-        // Keep track of current filter 2 selections that are still valid
-        const validFilter2Selections = [];
-        activeFilters.filter2.forEach(filter => {
-            // Extract value from filter (remove group prefix if exists)
-            const filterValue = filter.includes(':') ? filter.split(':')[1] : filter;
-            if (availableFilter2Values.has(filterValue)) {
-                validFilter2Selections.push(filter);
-            }
-        });
-        
-        // Update active filter 2 selections (remove invalid ones)
-        if (validFilter2Selections.length !== activeFilters.filter2.length) {
-            activeFilters.filter2 = validFilter2Selections;
-            updateSelectedFilters(2);
-            // No need to call applyFilters() here as it will be called after this function
-        }
-        
-        // Populate filter 2 dropdown with only available values
-        populateFilterOptions('filter2-options', [...availableFilter2Values].sort(), 2);
-    }
-    
-    // Add ISBN fetch functionality
-    function fetchBookInfo(formType) {
-        // Determine which form we're working with (upload or edit)
-        const isbnField = document.getElementById('isbn');
-        const infoContainer = document.getElementById('book-info-container');
-        const isbn = isbnField.value.trim().replace(/-/g, ''); // Remove hyphens
-        
-        if (!isbn) {
-            alert('Bitte geben Sie eine ISBN ein.');
-            return;
-        }
-        
-        // Show loading indicator
-        infoContainer.innerHTML = '<div class="loading-spinner">Informationen werden abgerufen...</div>';
-        
-        // Make API request to fetch book data
-        fetch(`/fetch_book_info/${isbn}`)
-            .then(response => {
-                if (!response.ok) {
-                    if (response.status === 404) {
-                        throw new Error('Buch nicht gefunden. Überprüfen Sie die ISBN.');
-                    } else {
-                        throw new Error('Fehler beim Abrufen der Buchinformationen');
-                    }
-                }
-                return response.json();
-            })
-            .then(data => {
-                if (data.error) {
-                    infoContainer.innerHTML = `<div class="error-message">${data.error}</div>`;
-                    return;
-                }
-                
-                // Display book information
-                infoContainer.innerHTML = `
-                    <div class="book-info">
-                        <h4>${data.title}</h4>
-                        ${data.authors ? `<p><strong>Autor(en):</strong> ${data.authors}</p>` : ''}
-                        ${data.publisher ? `<p><strong>Verlag:</strong> ${data.publisher}</p>` : ''}
-                        ${data.publishedDate ? `<p><strong>Erscheinungsdatum:</strong> ${data.publishedDate}</p>` : ''}
-                        ${data.pageCount ? `<p><strong>Seitenanzahl:</strong> ${data.pageCount}</p>` : ''}
-                        ${data.price ? `<p><strong>Preis:</strong> ${data.price}</p>` : ''}
-                        ${data.thumbnail ? `<img src="${data.thumbnail}" alt="Buchcover" class="book-thumbnail">` : ''}
-                        ${data.description ? `
-                            <div class="book-description">
-                                <h5>Beschreibung:</h5>
-                                <p>${data.description}</p>
-                            </div>
-                        ` : ''}
-                    </div>
-                `;
-            })
-            .catch(error => {
-                console.error('Error:', error);
-                infoContainer.innerHTML = `<div class="error-message">Fehler: ${error.message}</div>`;
-            });
-    }
-
-    function openScheduleModal(itemId) {
-        const scheduleModal = document.getElementById('schedule-modal');
-        if (!scheduleModal) return; // Exit if modal doesn't exist
-        
-        const itemIdField = document.getElementById('schedule-item-id');
-        const dateField = document.getElementById('schedule-date');
-        const endDateField = document.getElementById('schedule-end-date');
-        const multiDayCheckbox = document.getElementById('schedule-multi-day');
-        const endDateGroup = document.getElementById('schedule-end-date-group');
-        const notesField = document.getElementById('schedule-notes');
-        const startPeriodField = document.getElementById('schedule-start-period');
-        const endPeriodField = document.getElementById('schedule-end-period');
-        const specificGroup = document.getElementById('schedule-specific-item-group');
-        const specificSelect = document.getElementById('schedule-specific-item');
-        
-        if (itemIdField) itemIdField.value = itemId;
-
-        const selectedItem = Array.isArray(allItems) ? allItems.find(item => item._id === itemId) : null;
-        const groupedCount = Number(selectedItem?.GroupedDisplayCount || 1);
-        const groupedUnits = Array.isArray(selectedItem?.GroupedAvailableUnits) ? selectedItem.GroupedAvailableUnits : [];
-
-        if (specificGroup && specificSelect) {
-            if (groupedCount > 1 && groupedUnits.length > 0) {
-                specificGroup.style.display = 'block';
-                specificSelect.innerHTML = '<option value="">Automatisch wählen</option>' +
-                    groupedUnits.map(unit => `<option value="${unit.id}">${unit.code || '-'}</option>`).join('');
-            } else {
-                specificGroup.style.display = 'none';
-                specificSelect.innerHTML = '<option value="">Automatisch wählen</option>';
-            }
-            specificSelect.value = '';
-        }
-        
-        // Set default date to today
-        if (dateField) {
-            const today = new Date().toISOString().split('T')[0];
-            dateField.value = today;
-        }
-
-        // Reset multi-day fields
-        if (multiDayCheckbox) {
-            multiDayCheckbox.checked = false;
-            multiDayCheckbox.onchange = function() {
-                if (endDateGroup) {
-                    endDateGroup.style.display = this.checked ? 'block' : 'none';
-                    if (endDateField) {
-                        endDateField.required = this.checked;
-                        if (this.checked && !endDateField.value) {
-                            endDateField.value = dateField.value;
-                        }
-                    }
-                }
-            };
-            // Trigger change to set initial state
-            multiDayCheckbox.dispatchEvent(new Event('change'));
-        }
-        
-        // Clear form
-        if (notesField) notesField.value = '';
-        if (startPeriodField) startPeriodField.value = '';
-        if (endPeriodField) endPeriodField.value = '';
-        if (endDateField) endDateField.value = '';
-        
-        scheduleModal.style.display = 'block';
-    }
-
-    function closeScheduleModal() {
-        const scheduleModal = document.getElementById('schedule-modal');
-        if (scheduleModal) {
-            scheduleModal.style.display = 'none';
-        }
-    }
-
-    // Setup schedule form submission
-    function setupScheduleFormSubmission() {
-        const scheduleForm = document.getElementById('schedule-form');
-        if (scheduleForm) {
-            scheduleForm.addEventListener('submit', function(e) {
-                e.preventDefault();
-                
-                const formData = new FormData(this);
-                
-                // Use the current origin (protocol + hostname) to ensure we're using the correct protocol
-                fetch(window.location.origin + '/schedule_appointment', {
-                    method: 'POST',
-                    body: formData
-                })
-                .then(response => {
-                    // Check if response is 409 Conflict
-                    if (response.status === 409) {
-                        return response.json().then(data => {
-                            alert('Terminkonflikt: ' + (data.message || 'Der gewählte Termin steht nicht zur Verfügung.'));
-                            return { success: false };
-                        });
-                    } else if (!response.ok) {
-                        return response.json().then(data => {
-                            console.error('Error response:', data);
-                            return { success: false, message: data.message };
-                        });
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    if (data.success) {
-                        alert('Termin wurde erfolgreich geplant!');
-                        closeScheduleModal();
-                        // Reload items to show updated appointment info
-                        loadItems();
-                    } else if (data.message) {
-                        alert('Fehler beim Planen des Termins: ' + data.message);
-                    }
-                })
-                .catch(error => {
-                    console.error('Error scheduling appointment:', error);
-                    alert('Fehler beim Planen des Termins');
-                });
-            });
-        }
-    }
-
-    function formatDateForInput(dateString) {
-        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
-        const date = new Date(dateString);
-        return date.toLocaleDateString('de-DE', options).replace(/\./g, '-');
-    }
-</script>
-
-<style>
-    /* Main container and layout styles */
-    body {
-        font-family: Arial, sans-serif;
-        background-color: #f4f4f4;
-        margin: 0;
-        padding: 0;
-    }
-
-    .container {
-        background-color: var(--ui-surface);
-        padding: 20px;
-        border-radius: 5px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        width: 80%;
-        max-width: 1200px;
-        margin: 20px auto;
-    }
-
-    h1, h2 {
-        text-align: center;
-    }
-
-    /* Filter styles */
-    .filter-container {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 20px;
-        justify-content: center;
-        margin-bottom: 20px;
-    }
-
-    .filter-group {
-        position: relative;
-        min-width: 200px;
-        background-color: var(--ui-surface);
-        border: 1px solid var(--ui-border);
-        border-radius: 5px;
-        padding: 10px;
-    }
-
-    .filter-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 10px;
-    }
-
-    .filter-toggle, .clear-filter {
-        background-color: var(--ui-surface-soft);
-        border: 1px solid #dee2e6;
-        border-radius: 3px;
-        padding: 3px 8px;
-        cursor: pointer;
-    }
-
-    .clear-filter {
-        font-size: 0.8rem;
-        color: var(--ui-text-muted);
-    }
-
-    .filter-dropdown {
-        display: none;
-        position: absolute;
-        top: 100%;
-        left: 0;
-        width: 100%;
-        max-height: 300px;
-        overflow-y: auto;
-        background-color: white;
-        border: 1px solid var(--ui-border);
-        border-radius: 5px;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-        z-index: 100;
-        padding: 8px;
-    }
-
-    .filter-options {
-        padding: 10px;
-    }
-
-    .filter-option {
-        margin-bottom: 5px;
-        display: flex;
-        align-items: center;
-    }
-
-    .filter-option input[type="checkbox"] {
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-        cursor: pointer;
-    }
-
-    .filter-option:hover {
-        background-color: #f5f5f5;
-    }
-
-    .filter-option label {
-        margin-left: 5px;
-        cursor: pointer;
-    }
-
-    .filter-option-group {
-        margin-bottom: 12px;
-        border-bottom: 1px solid var(--ui-border);
-        padding-bottom: 8px;
-    }
-
-    .filter-group-header {
-        font-weight: bold;
-        margin-bottom: 5px;
-        color: var(--ui-text-muted);
-        font-size: 0.9rem;
-    }
-
-    .selected-filters {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 5px;
-        min-height: 30px;
-    }
-
-    .filter-tag {
-        display: inline-flex;
-        align-items: center;
-        background-color: #e9ecef;
-        border-radius: 15px;
-        padding: 3px 10px;
-        font-size: 0.8rem;
-    }
-
-    .filter-tag-group {
-        color: var(--ui-text-muted);
-        font-size: 0.8em;
-        font-style: italic;
-        margin-right: 2px;
-    }
-
-    .filter-tag-remove {
-        background: none;
-        border: none;
-        color: var(--ui-text-muted);
-        margin-left: 5px;
-        cursor: pointer;
-        font-size: 1rem;
-        line-height: 1;
-    }
-
-    /* Search styles */
-    .search-container {
-        display: flex;
-        gap: 5px;
-        margin-top: 5px;
-    }
-
-    #code-search {
-        flex: 1;
-        padding: 8px;
-        border: 1px solid var(--ui-border);
-        border-radius: 4px;
-    }
-
-    .search-button {
-        padding: 8px 12px;
-        background-color: #007bff;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-    }
-
-    .search-button:hover {
-        background-color: #0056b3;
-    }
-
-    .search-field {
-        min-width: 250px;
-    }
-
-    #code-search.searching {
-        background-color: #fff3cd;
-        transition: background-color 0.3s;
-        border: 2px solid #ffc107;
-        box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
-    }
-
-    /* QR Scanner styles */
-    .qr-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-bottom: 20px;
-    }
-
-    .scan-button {
-        padding: 10px 20px;
-        background-color: #007bff;
-        color: white;
-        border: none;
-        border-radius: 5px;
-        cursor: pointer;
-        margin-bottom: 10px;
-    }
-
-    .scan-button:hover {
-        background-color: #0056b3;
-    }
-
-    /* Item display styles */
-    .items-container {
-        display: flex;
-        overflow-x: auto;
-        gap: 20px;
-        padding: 20px 0;
-        scroll-snap-type: x mandatory;
-        position: relative;
-        scroll-behavior: smooth;
-    }
-
-    .items-loading-indicator {
-        display: none;
-        flex: 0 0 220px;
-        min-width: 220px;
-        max-width: 220px;
-        height: 180px;
-        align-self: center;
-        margin-right: 8px;
-        border: 1px solid #dbe3ee;
-        border-radius: 10px;
-        background: var(--ui-surface-soft);
-        color: var(--ui-text);
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        gap: 10px;
-        scroll-snap-align: center;
-    }
-
-    .items-loading-indicator .loading-label {
-        font-size: 0.84rem;
-        text-align: center;
-        line-height: 1.3;
-        max-width: 170px;
-    }
-
-    .items-loading-indicator .loading-track {
-        width: 160px;
-        height: 8px;
-        border-radius: 999px;
-        background: #e2e8f0;
-        overflow: hidden;
-    }
-
-    .items-loading-indicator .loading-fill {
-        width: 45%;
-        height: 100%;
-        border-radius: inherit;
-        background: linear-gradient(90deg, #60a5fa, #2563eb);
-        transform: translateX(-100%);
-    }
-
-    .items-loading-indicator.is-loading .loading-fill {
-        animation: items-loader-slide 1.05s ease-in-out infinite;
-    }
-
-    @media (max-width: 768px) {
-        .items-loading-indicator {
-            width: 100%;
-            min-width: 0;
-            max-width: none;
-            min-height: 120px;
-            height: auto;
-            padding: 14px 10px;
-            scroll-snap-align: none;
-        }
-
-        .items-loading-indicator .loading-track {
-            width: min(240px, 82%);
-        }
-    }
-
-    @keyframes items-loader-slide {
-        0% { transform: translateX(-100%); }
-        100% { transform: translateX(260%); }
-    }
-
-    .item-card {
-        background-color: var(--ui-surface);
-        border: 1px solid var(--ui-border);
-        border-radius: var(--ui-radius);
-        box-shadow: var(--ui-shadow-sm);
-            padding: 15px;
-            width: 100%;
-            max-width: 340px;
-            flex: 1 1 300px;
-            scroll-snap-align: center;
-            cursor: pointer;
-            transition: transform 0.2s, box-shadow 0.2s;
-            position: relative;
-            content-visibility: auto;
-            contain-intrinsic-size: 300px 380px;
-        }
-        .item-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .item-card h3 {
-            margin-top: 0;
-            font-size: 1.15rem;
-            margin-bottom: 8px;
-        }
-
-        .item-card .description {
-            max-height: 60px;
-            overflow-y: auto;
-            font-size: 0.9rem;
-            margin-bottom: 8px;
-        }
-
-        .item-card .image-container {
-            position: relative;
-            max-width: 300px;
-            margin: 8px 0;
-        }
-
-        .item-card .item-image {
-            width: 100%;
-            height: auto;
-            max-height: 180px;
-        display: block;
-    }
-
-    /* Image navigation buttons removed */
-
-    /* Video preview styling within cards (parity with admin) */
-    .item-card video.item-image {
-        background-color: #000;
-        position: relative;
-    }
-
-    /* Modal styles */
-    .item-modal {
-        display: none;
-        position: fixed;
-        z-index: 2500;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-        background-color: rgba(0,0,0,0.4);
-    }
-
-    .modal-content {
-        background-color: #fefefe;
-        margin: 15% auto;
-        padding: 20px;
-        border: 1px solid #888;
-        width: 80%;
-        max-width: 600px;
-        border-radius: 5px;
-        max-height: 70vh;
-        overflow-y: auto;
-    }
-
-    .close-modal {
-        color: #aaa;
-        float: right;
-        font-size: 28px;
-        font-weight: bold;
-        cursor: pointer;
-    }
-
-    .close-modal:hover,
-    .close-modal:focus {
-        color: black;
-        text-decoration: none;
-    }
-
-    /* Form styles */
-    .form-group {
-        margin-bottom: 15px;
-    }
-
-    .form-group label {
-        display: block;
-        margin-bottom: 5px;
-        font-weight: bold;
-    }
-
-    .form-group input,
-    .form-group select,
-    .form-group textarea {
-        width: 100%;
-        padding: 8px;
-        border: 1px solid var(--ui-border);
-        border-radius: 4px;
-        box-sizing: border-box;
-    }
-
-    .form-group textarea {
-        min-height: 80px;
-        resize: vertical;
-    }
-
-    .form-row {
-        display: flex;
-        gap: 15px;
-    }
-
-    .form-row .form-group {
-        flex: 1;
-    }
-
-    .form-actions {
-        display: flex;
-        gap: 10px;
-        justify-content: flex-end;
-        margin-top: 20px;
-    }
-
-    .save-button, .cancel-button {
-        padding: 10px 20px;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-weight: bold;
-    }
-
-    .save-button {
-        background-color: #28a745;
-        color: white;
-    }
-
-    .save-button:hover {
-        background-color: #218838;
-    }
-
-    .cancel-button {
-        background-color: var(--ui-text-muted);
-        color: white;
-    }
-
-    .cancel-button:hover {
-        background-color: #545b62;
-    }
-
-    /* Highlight and status styles */
-    .highlight-item {
-        border: 3px solid gold !important;
-        box-shadow: 0 0 20px rgba(255, 215, 0, 0.7) !important;
-        position: relative;
-        z-index: 10;
-    }
-
-    .code-match {
-        border: 2px solid #17a2b8 !important;
-        box-shadow: 0 0 15px rgba(23, 162, 184, 0.5) !important;
-        position: relative;
-        z-index: 5;
-    }
-
-    .exact-code-match {
-        border: 3px solid #28a745 !important;
-        box-shadow: 0 0 20px rgba(40, 167, 69, 0.7) !important;
-        position: relative;
-        z-index: 11;
-    }
-
-    /* Description match highlight */
-    .desc-match {
-        border: 2px solid #ffc107 !important; /* warning/amber */
-        box-shadow: 0 0 15px rgba(255, 193, 7, 0.5) !important;
-        position: relative;
-        z-index: 6;
-    }
-
-    /* Messages */
-    .error-message, .no-items-message {
-        padding: 20px;
-        text-align: center;
-        width: 100%;
-        color: var(--bs-danger-text, #842029);
-        background-color: var(--bs-danger-bg-subtle, #f8d7da);
-        border: 1px solid var(--bs-danger-border-subtle, #f5c2c7);
-        border-radius: var(--bs-border-radius);
-        margin: 20px 0;
-    }
-
-    /* Action Button Styles */
-    .modal-actions {
-        display: flex;
-        gap: 10px;
-        justify-content: flex-start;
-        margin-top: 20px;
-        padding-top: 15px;
-        border-top: 1px solid #dee2e6;
-        flex-wrap: wrap;
-    }
-
-    .modal-actions form {
-        margin: 0;
-    }
-
-    .ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
-        padding: 10px 18px;
-        border: var(--bs-border-width) var(--bs-border-style) transparent;
-        border-radius: var(--bs-border-radius);
-        cursor: pointer;
-        font-weight: 600;
-        font-size: 0.9rem;
-        text-decoration: none;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        transition: all 0.3s ease;
-        min-width: 120px;
-        height: 40px;
-        white-space: nowrap;
-        flex: 0 0 auto;
-        box-sizing: border-box;
-        margin: 5px;
-    }
-
-    /* Ausleihen/Zurückgeben Button */
-    .ausleihen {
-        background-color: var(--bs-success);
-        color: var(--bs-white) !important;
-        border: 2px solid var(--bs-success);
-    }
-
-    .ausleihen:hover {
-        background-color: #157347; /* Darker success color */
-        border-color: #146c43;
-        transform: translateY(-1px);
-        box-shadow: var(--bs-box-shadow);
-        color: var(--bs-white) !important;
-        text-decoration: none;
-    }
-
-    .ausleihen:active {
-        transform: translateY(0);
-        box-shadow: var(--bs-box-shadow-sm);
-    }
-
-    /* Edit Button */
-    .edit-button {
-        background-color: var(--bs-primary);
-        color: var(--bs-white) !important;
-        border: 2px solid var(--bs-primary);
-    }
-
-    .edit-button:hover {
-        background-color: #0b5ed7; /* Darker primary color */
-        border-color: #0a58ca;
-        transform: translateY(-1px);
-        box-shadow: var(--bs-box-shadow);
-        color: var(--bs-white) !important;
-        text-decoration: none;
-    }
-
-    .edit-button:active {
-        transform: translateY(0);
-        box-shadow: var(--bs-box-shadow-sm);
-    }
-
-    /* Delete Button */
-    .delete-button {
-        background-color: var(--bs-danger);
-        color: var(--bs-white) !important;
-        border: 2px solid var(--bs-danger);
-    }
-
-    .delete-button:hover {
-        background-color: #bb2d3b; /* Darker danger color */
-        border-color: #b02a37;
-        transform: translateY(-1px);
-        box-shadow: var(--bs-box-shadow);
-        color: var(--bs-white) !important;
-        text-decoration: none;
-    }
-
-    .delete-button:active {
-        transform: translateY(0);
-        box-shadow: var(--bs-box-shadow-sm);
-    }
-
-    /* Schedule Button */
-    .schedule-button {
-        background-color: var(--bs-info);
-        color: var(--bs-white) !important;
-        border: 2px solid var(--bs-info);
-    }
-
-    .schedule-button:hover {
-        background-color: #0dcaf0; /* Brighter info color for visibility */
-        border-color: #31d2f2;
-        transform: translateY(-1px);
-        box-shadow: var(--bs-box-shadow);
-        color: var(--bs-dark) !important;
-        text-decoration: none;
-    }
-
-    .schedule-button:active {
-        transform: translateY(0);
-        box-shadow: var(--bs-box-shadow-sm);
-    }
-
-    /* Duplicate Button */
-    .duplicate-button {
-        background-color: var(--bs-purple);
-        color: var(--bs-white) !important;
-        border: 2px solid var(--bs-purple);
-    }
-
-    .duplicate-button:hover {
-        background-color: #6610f2; /* Slightly brighter purple */
-        border-color: #6f42c1;
-        transform: translateY(-1px);
-        box-shadow: var(--bs-box-shadow);
-        color: var(--bs-white) !important;
-        text-decoration: none;
-    }
-
-    .duplicate-button:active {
-        transform: translateY(0);
-        box-shadow: var(--bs-box-shadow-sm);
-    }
-
-    /* Disabled Button */
-    .disabled-button {
-        background-color: var(--bs-secondary) !important;
-        border-color: var(--bs-secondary) !important;
-        color: var(--bs-white) !important;
-        cursor: not-allowed !important;
-        opacity: 0.6;
-    }
-
-    .disabled-button:hover {
-        cursor: not-allowed;
-        transform: none;
-    }
-    
-    /* Actions Container */
-    .actions {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-        justify-content: center;
-        align-items: stretch;
-        margin-top: 15px;
-        padding-top: 15px;
-        border-top: 1px solid #dee2e6;
-    }
-
-    .actions form {
-        margin: 0;
-        display: flex;
-    }
-
-    .actions button, 
-    .actions a {
-        flex: 0 0 auto;
-        width: 120px;
-        height: 40px;
-        margin: 0;
-    }
-    
-    /* Responsive adjustments */
-    @media (max-width: 768px) {
-        /* Mobile viewport and scrolling improvements */
-        html, body {
-            overflow-x: hidden !important;
-            -webkit-overflow-scrolling: touch !important;
-            touch-action: pan-y !important;
-            height: 100% !important;
-        }
-        
-        body {
-            padding: 0 !important;
-            margin: 0 !important;
-        }
-
-        .filter-container {
-            flex-direction: column;
-        }
-        
-        .form-row {
-            flex-direction: column;
-        }
-        
-        /* Mobile-responsive styles for user interface */
-        .container {
-            width: 100% !important;
-            max-width: 100% !important;
-            margin: 0 !important;
-            padding: 12px 12px 18px !important;
-            border-radius: 0 !important;
-            box-sizing: border-box !important;
-        }
-        
-        h1, h2 {
-            font-size: 1.4rem !important;
-            margin-bottom: 15px !important;
-        }
-        
-        .filter-container {
-            flex-direction: column !important;
-            gap: 15px !important;
-            margin-bottom: 15px !important;
-        }
-        
-        .filter-group {
-            min-width: auto !important;
-            width: 100% !important;
-        }
-        
-        .filter-header {
-            flex-wrap: wrap !important;
-            gap: 10px !important;
-        }
-        
-        .filter-toggle, .clear-filter {
-            padding: 8px 12px !important;
-            font-size: 0.9rem !important;
-            min-height: 44px !important;
-            touch-action: manipulation !important;
-        }
-        
-        .filter-dropdown {
-            position: relative !important;
-            top: auto !important;
-            left: auto !important;
-            width: 100% !important;
-            max-height: 200px !important;
-            margin-top: 10px !important;
-        }
-        
-        .filter-options {
-            padding: 5px !important;
-        }
-        
-        .filter-options label {
-            display: block !important;
-            padding: 10px 12px !important;
-            margin: 2px 0 !important;
-            border-radius: 4px !important;
-            cursor: pointer !important;
-            touch-action: manipulation !important;
-            min-height: 44px !important;
-            display: flex !important;
-            align-items: center !important;
-        }
-        
-        .filter-options label:hover {
-            background-color: #f8f9fa !important;
-        }
-        
-        .filter-options input[type="checkbox"] {
-            margin-right: 10px !important;
-            transform: scale(1.2) !important;
-        }
-        
-        /* Items container mobile optimization */
-        .items-container {
-            display: grid !important;
-            grid-template-columns: 1fr !important;
-            gap: 15px !important;
-            padding: 10px 0 !important;
-            overflow-x: visible !important;
-            scroll-snap-type: none !important;
-        }
-        
-        .item-card {
-            max-width: 100% !important;
-            margin: 0 !important;
-            padding: 15px !important;
-            scroll-snap-align: none !important;
-            /* Only render when user looks at it (content-visibility virtualizes the DOM) */
-            content-visibility: auto;
-            contain-intrinsic-size: auto 300px;
-        }
-        
-        .item-card:hover {
-            transform: translateY(-2px) !important;
-        }
-        
-        /* Modal improvements for mobile */
-        .modal-content {
-            width: calc(100vw - 16px) !important;
-            max-width: none !important;
-            margin: 8px auto !important;
-            max-height: 85vh !important;
-            overflow-y: auto !important;
-            padding: 16px !important;
-        }
-        
-        /* Button improvements */
-        .modal-actions {
-            flex-direction: column !important;
-            gap: 10px !important;
-        }
-        
-        .ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
-            width: 100% !important;
-            min-height: 44px !important;
-            padding: 12px 20px !important;
-            font-size: 1rem !important;
-            touch-action: manipulation !important;
-        }
-        
-        /* Navigation buttons mobile */
-        .navigation-buttons {
-            display: none !important; /* Hide horizontal navigation on mobile */
-        }
-        
-        /* QR Scanner mobile */
-        .qr-container {
-            margin-bottom: 15px !important;
-        }
-        
-        .scan-button {
-            width: 100% !important;
-            max-width: 300px !important;
-            padding: 12px 20px !important;
-            font-size: 1rem !important;
-            min-height: 44px !important;
-            touch-action: manipulation !important;
-        }
-        
-        #qr-reader {
-            width: 100% !important;
-            max-width: 400px !important;
-            margin: 15px auto !important;
-        }
-        
-        /* Search field mobile */
-        .search-field input {
-            width: 100% !important;
-            padding: 12px 15px !important;
-            font-size: 16px !important;
-            border-radius: 6px !important;
-            border: 1px solid #ddd !important;
-        }
-        
-        /* Form improvements */
-        .form-group {
-            margin-bottom: 15px !important;
-        }
-        
-        .form-group label {
-            display: block !important;
-            margin-bottom: 8px !important;
-            font-weight: 600 !important;
-            color: var(--ui-title) !important;
-        }
-        
-        .form-group input, .form-group select, .form-group textarea {
-            width: 100% !important;
-            padding: 12px 15px !important;
-            font-size: 16px !important;
-            border: 1px solid #ddd !important;
-            border-radius: 6px !important;
-            box-sizing: border-box !important;
-        }
-        
-        /* Image container mobile */
-        .item-card .image-container {
-            max-width: 100% !important;
-            height: 200px !important;
-            overflow: hidden !important;
-            border-radius: 8px !important;
-        }
-        
-        .item-card .item-image {
-            width: 100% !important;
-            height: 100% !important;
-            object-fit: cover !important;
-        }
-        
-        /* Touch improvements */
-        * {
-            -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
-        }
-        
-        button, .btn, a, input[type="submit"], input[type="button"] {
-            touch-action: manipulation !important;
-            -webkit-user-select: none !important;
-            user-select: none !important;
-        }
-        
-        /* Focus improvements for accessibility */
-        button:focus, .btn:focus, input:focus, select:focus, textarea:focus {
-            outline: 2px solid #007bff !important;
-            outline-offset: 2px !important;
-            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important;
-        }
-    }
-    
-    /* Tablet specific styles */
-    @media screen and (min-width: 769px) and (max-width: 1024px) {
-        .container {
-            width: 90% !important;
-        }
-        
-        .items-container {
-            display: grid !important;
-            grid-template-columns: repeat(2, 1fr) !important;
-            gap: 20px !important;
-        }
-        
-        .filter-container {
-            display: grid !important;
-            grid-template-columns: repeat(2, 1fr) !important;
-            gap: 20px !important;
-        }
-    }
-
-    /* QR Reader styling */
-    #qr-reader {
-        width: 500px;
-        display: none;
-    }
-
-    /* Element text colors for better visibility */
-    .edit-button, .duplicate-button, .generate-qr-button {
-        color: var(--ui-title) !important;
-    }
-    
-    /* Standardized button styles across the application */
-    .ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
-        padding: 10px 18px;
-        border: none;
-        border-radius: 5px;
-        cursor: pointer;
-        font-weight: bold;
-        font-size: 0.9rem;
-        text-decoration: none;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        transition: all 0.3s ease;
-        min-width: 120px;
-        height: 40px;
-        white-space: nowrap;
-        flex: 0 0 auto;
-        box-sizing: border-box;
-    }
-    
-    .search-button, .scan-button, .filter-toggle, .clear-filter, 
-    .add-new-btn, .popup-close-button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        min-width: 80px;
-        height: 36px;
-        padding: 0 15px;
-        font-weight: 500;
-        box-sizing: border-box;
-    }
-
-    /* Align visuals with admin page styles */
-    /* Ensure only the active image is shown on cards */
-    .item-image.active-image { 
-        display: block !important; 
-        opacity: 1 !important; 
-        z-index: 5; 
-    }
-    .item-image:not(.active-image) { 
-        display: none !important; 
-    }
-    .video-container.active-container { 
-        display: block !important; 
-    }
-    .video-container:not(.active-container) { 
-        display: none !important; 
-    }
-
-    /* Video preview play overlay on thumbnails */
-    .video-preview-overlay {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 3em;
-        color: white;
-        background-color: rgba(0, 0, 0, 0.7);
-        border-radius: 50%;
-        width: 80px;
-        height: 80px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-        z-index: 2;
-    }
-
-    /* Modal image display and navigation */
-    .modal-image {
-        display: none;
-        max-width: 100%;
-        max-height: 70vh;
-        margin: 0 auto;
-    }
-    .modal-image.active-image {
-        display: block !important;
-    }
-    /* Ensure videos in modal scale correctly */
-    video.modal-image {
-        width: 100%;
-        height: auto;
-    }
-    /* Modal image display and navigation */
-    .modal-image {
-        display: none;
-        max-width: 100%;
-        max-height: 70vh;
-        margin: 0 auto;
-    }
-    .modal-image.active-image {
-        display: block !important;
-    }
-    .modal-image-nav {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        background-color: rgba(0, 0, 0, 0.7);
-        color: white;
-        border: none;
-        padding: 15px 20px;
-        font-size: 18px;
-        cursor: pointer;
-        border-radius: 4px;
-        transition: background-color 0.3s ease;
-    }
-    .modal-image-nav:hover { background-color: rgba(0, 0, 0, 0.9); }
-    .modal-prev-image { left: 10px; }
-    .modal-next-image { right: 10px; }
-    .image-counter {
-        position: absolute;
-        bottom: 10px;
-        right: 10px;
-        background-color: rgba(0, 0, 0, 0.7);
-        color: white;
-        padding: 5px 10px;
-        border-radius: 4px;
-        font-size: 0.9rem;
-    }
-
-    /* Modal image container visual parity with admin */
-    .modal-image-container {
-        position: relative;
-        text-align: center;
-        margin: 20px 0;
-        max-height: 400px;
-        overflow: hidden;
-        border-radius: 8px;
-        background-color: var(--ui-surface-soft);
-    }
-
-    /* Borrower and appointment info panels in modal */
-    .borrower-info-panel {
-        background-color: #fff3cd;
-        border: 1px solid #ffeaa7;
-        border-radius: 5px;
-        padding: 15px;
-        margin-bottom: 20px;
-    }
-    .borrower-info-panel h4 { color: #856404; margin: 0 0 10px 0; font-size: 1.1rem; }
-    .borrower-name, .borrow-time { margin: 5px 0; color: #856404; font-weight: 500; }
-
-    /* Modal Details Styling (text formatting) */
-    .modal-details { margin: 20px 0; }
-    .detail-group { display: flex; margin-bottom: 10px; align-items: flex-start; }
-    .detail-group.full-width { flex-direction: column; margin-bottom: 15px; }
-    .detail-label { font-weight: bold; color: var(--ui-text-muted); min-width: 150px; margin-right: 10px; }
-    .detail-value { color: #212529; flex: 1; word-wrap: break-word; }
-    .detail-group.full-width .detail-label { margin-bottom: 5px; }
-    .detail-group.full-width .detail-value {
-        background-color: var(--ui-surface-soft);
-        padding: 10px;
-        border-radius: 4px;
-        border: 1px solid #dee2e6;
-        white-space: pre-wrap;
-    }
-    .status-borrowed { color: #dc3545; font-weight: bold; }
-
-    /* Match admin button styling for borrow */
-    .ausleihen {
-        background-color: #9dff00 !important;
-        color: #ffffff !important;
-        border: 2px solid #007bff !important;
-    }
-    .ausleihen:hover {
-        background-color: #91ff00 !important;
-        border-color: #004085 !important;
-        transform: translateY(-1px);
-        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
-    }
-    .ausleihen:active {
-        transform: translateY(0);
-        box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
-    }
-
-    /* Match admin schedule button styling */
-    .schedule-button {
-        background-color: #17a2b8 !important;
-        color: #ffffff !important;
-        border: 2px solid #17a2b8 !important;
-    }
-    .schedule-button:hover {
-        background-color: #138496 !important;
-        border-color: #117a8b !important;
-        transform: translateY(-1px);
-        box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
-        color: #ffffff !important;
-        text-decoration: none;
-    }
-    .schedule-button:active {
-        transform: translateY(0);
-        box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
-    }
-
-    /* Align modal actions layout to admin */
-    .modal-actions { align-items: stretch; }
-    .modal-actions form { margin: 0; flex: 0 0 auto; }
-    .bookmark-btn { position:absolute; top:8px; right:8px; width:46px; height:46px; background:rgba(255,255,255,.92); border:2px solid #ffc107; border-radius:50%; font-size:1.65rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#ffc107; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:background .2s, transform .15s, color .2s; z-index:6; }
-    .bookmark-btn:hover { background:#ffc107; color:#212529; }
-    .bookmark-btn:active { transform:scale(.9); }
-    .bookmark-btn.active { background:#ffc107; color:#212529; }
-    .favorite-item { outline: 2px solid #ffc107; }
-    body.favorites-only .item-card:not(.favorite-item){ display:none !important; }
-    .quick-details-button { background:#6c757d; color:#fff; border:2px solid #6c757d; padding:6px 10px; border-radius:4px; cursor:pointer; }
-    .quick-details-button:hover { background:#5a6268; }
-    .inline-action-form { display:inline-block; margin:0; }
-    .modal-action-bar .bookmark-btn { font-size:1.6rem; }
-
-    .container {
-        --table-columns: minmax(170px, 2fr) repeat(5, minmax(105px, 1fr));
-    }
-
-    /* Calendar Styles - Optimized & Mobile Friendly */
-    .calendar-wrapper {
-        background: var(--ui-surface);
-        border-radius: 12px;
-        overflow: hidden;
-        border: 1px solid #e5e7eb;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-        margin-top: 10px;
-    }
-    
-    .calendar-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 15px;
-        background-color: var(--ui-surface);
-        border-bottom: 1px solid var(--ui-border);
-    }
-    
-    .calendar-header button {
-        background: #f3f4f6;
-        border: none;
-        border-radius: 8px;
-        width: 36px;
-        height: 36px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        transition: background-color 0.2s;
-        font-weight: bold;
-        color: #374151;
-    }
-    
-    .calendar-header button:hover { background-color: #e5e7eb; }
-    .calendar-header span { font-weight: 600; font-size: 1.1rem; color: #111827; }
-    
-    .calendar-grid {
-        display: grid;
-        grid-template-columns: repeat(7, 1fr);
-        background-color: var(--ui-surface);
-        padding: 10px;
-        gap: 5px;
-    }
-    
-    .cal-cell {
-        aspect-ratio: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-start;
-        padding-top: 8px;
-        font-size: 0.95rem;
-        cursor: pointer;
-        border-radius: 8px;
-        transition: all 0.2s;
-        color: #374151;
-        position: relative;
-    }
-    
-    .cal-cell.header {
-        aspect-ratio: auto;
-        height: 30px;
-        justify-content: center;
-        padding: 0;
-        font-weight: 600;
-        font-size: 0.85rem;
-        color: #9ca3af;
-        cursor: default;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-    
-    .cal-cell:not(.header):not(.empty):hover { 
-        background-color: #f3f4f6; 
-    }
-    
-    .cal-cell.empty { cursor: default; }
-    
-    .cal-cell.today { 
-        background-color: #eff6ff;
-        color: #2563eb;
-        font-weight: bold;
-    }
-    
-    .cal-cell.selected {
-        background-color: #2563eb !important;
-        color: #fff !important;
-        box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
-    }
-    
-    .cal-cell.has-booking::after {
-        content: '';
-        position: absolute;
-        bottom: 6px;
-        width: 6px;
-        height: 6px;
-        background-color: #ef4444;
-        border-radius: 50%;
-    }
-    
-    .cal-cell.selected.has-booking::after {
-        background-color: var(--ui-surface);
-    }
-
-    .calendar-day-details {
-        border-top: 1px solid #f3f4f6;
-        padding: 15px;
-        background-color: #f9fafb;
-        display: none;
-        animation: slideDown 0.2s ease-out;
-    }
-    
-    @keyframes slideDown {
-        from { opacity: 0; transform: translateY(-10px); }
-        to { opacity: 1; transform: translateY(0); }
-    }
-
-    .calendar-day-details h5 { 
-        margin: 0 0 12px 0; 
-        font-size: 1rem; 
-        font-weight: 600;
-        color: #111827; 
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-    
-    .cal-booking-item {
-        padding: 10px;
-        background: var(--ui-surface);
-        border: 1px solid #e5e7eb;
-        border-radius: 8px;
-        margin-bottom: 8px;
-        font-size: 0.9rem;
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-        border-left: 4px solid #2563eb;
-    }
-
-    /* Mobile adjustments */
-    @media (max-width: 480px) {
-        .calendar-grid { gap: 2px; padding: 5px; }
-        .cal-cell { font-size: 0.85rem; border-radius: 6px; }
-        .calendar-header { padding: 10px; }
-        .calendar-header span { font-size: 1rem; }
-    }
-
-    /* Smartphone-focused cleanup: remove heavy UI chrome and improve touch layout */
-    @media (max-width: 768px) {
-        body {
-            padding-bottom: 12px;
-        }
-
-        .container {
-            width: 100% !important;
-            max-width: 100% !important;
-            margin: 0 !important;
-            padding: 12px !important;
-            border: none !important;
-            border-radius: 0 !important;
-            box-shadow: none !important;
-            box-sizing: border-box !important;
-        }
-
-        .filter-group {
-            border: none !important;
-            border-radius: 0 !important;
-            box-shadow: none !important;
-            background: transparent !important;
-            padding: 8px 0 !important;
-        }
-
-        .filter-header {
-            align-items: flex-start !important;
-        }
-
-        .filter-header > label {
-            display: block !important;
-            flex: 1 1 100% !important;
-            margin: 0 0 6px 0 !important;
-            font-size: 0.95rem !important;
-            font-weight: 600 !important;
-            line-height: 1.35 !important;
-            color: var(--ui-title) !important;
-            word-break: break-word !important;
-            overflow-wrap: anywhere !important;
-        }
-
-        /* Table-mode improvements for mobile/iPad */
-        body.table-view .item-card {
-            padding: 10px 8px !important;
-        }
-
-        body.table-view .item-card .card-content {
-            grid-template-columns: 1fr !important;
-            gap: 4px !important;
-        }
-
-        body.table-view .item-card .card-content h3 {
-            margin: 0 0 6px 0 !important;
-            font-size: 0.95rem !important;
-            word-break: break-word !important;
-            overflow-wrap: anywhere !important;
-            line-height: 1.3 !important;
-        }
-
-        body.table-view .item-card .card-content p {
-            margin: 3px 0 !important;
-            font-size: 0.85rem !important;
-            line-height: 1.3 !important;
-        }
-
-        body.table-view .item-card .card-content p strong {
-            display: inline !important;
-            font-weight: 600 !important;
-            margin-right: 4px !important;
-            min-width: auto !important;
-            word-break: break-word !important;
-            overflow-wrap: break-word !important;
-        }
-
-        body.table-view .item-card .card-content .item-col-name {
-            font-size: 0.95rem !important;
-        }
-
-        body.table-view .item-card .image-container {
-            display: none !important;
-        }
-
-        body.table-view .item-card .actions {
-            gap: 6px !important;
-        }
-
-        .filter-option label,
-        .filter-tag,
-        .filter-tag-group {
-            white-space: normal !important;
-            word-break: break-word !important;
-            overflow-wrap: anywhere !important;
-        }
-
-        .selected-filters {
-            gap: 6px !important;
-        }
-
-        .search-container {
-            flex-direction: column !important;
-            gap: 8px !important;
-        }
-
-        .search-container input,
-        .search-container .search-button {
-            width: 100% !important;
-        }
-
-        /* Extra small screens table mode */
-        @media (max-width: 480px) {
-            body.table-view .item-card .card-content p strong {
-                display: block !important;
-                margin-right: 0 !important;
-                margin-bottom: 2px !important;
-                color: var(--ui-text-muted) !important;
-                font-size: 0.8rem !important;
-            }
-
-            body.table-view .item-card .card-content p {
-                margin-left: 8px !important;
-                margin-top: 4px !important;
-                padding: 2px 0 !important;
-            }
-
-            body.table-view .item-card {
-                padding: 8px 6px !important;
-            }
-
-            body.table-view .item-card .card-content h3 {
-                font-size: 0.9rem !important;
-            }
-        }
-
-        .items-container {
-            display: grid !important;
-            grid-template-columns: 1fr !important;
-            gap: 15px !important;
-            padding: 10px 0 !important;
-            overflow-x: visible !important;
-            scroll-snap-type: none !important;
-        }
-
-        body.table-view .table-view-header {
-            display: none !important;
-        }
-
-        body.table-view .item-card .card-content {
-            grid-template-columns: 1fr !important;
-            gap: 6px !important;
-        }
-
-        body.table-view .item-card .card-content p strong {
-            display: inline !important;
-        }
-
-        .item-card {
-            max-width: 100% !important;
-            margin: 0 !important;
-            padding: 15px !important;
-            scroll-snap-align: none !important;
-            content-visibility: auto;
-            contain-intrinsic-size: auto 300px;
-        }
-
-        .item-card:hover {
-            transform: translateY(-2px) !important;
-            box-shadow: var(--ui-shadow-md) !important;
-        }
-
-        .item-card .image-container {
-            height: auto !important;
-            max-height: 220px !important;
-            border-radius: 6px !important;
-        }
-
-        .actions {
-            gap: 8px !important;
-            border-top: none !important;
-            padding-top: 8px !important;
-        }
-
-        .grouped-borrow-controls {
-            width: 100% !important;
-        }
-
-        .actions form,
-        .actions button,
-        .actions a {
-            width: 100% !important;
-        }
-
-        .grouped-borrow-controls {
-            flex-direction: column !important;
-            align-items: stretch !important;
-            gap: 6px !important;
-            margin-bottom: 10px !important;
-        }
-
-        .grouped-borrow-controls label {
-            font-size: 0.8rem !important;
-            font-weight: 600 !important;
-            margin: 0 !important;
-        }
-
-        .grouped-borrow-controls input,
-        .grouped-borrow-controls select {
-            width: 100% !important;
-            max-width: none !important;
-            min-height: 40px !important;
-            padding: 8px 10px !important;
-            box-sizing: border-box !important;
-        }
-
-        .inline-action-form {
-            width: 100% !important;
-        }
-
-        .inline-action-form .ausleihen,
-        .inline-action-form button {
-            width: 100% !important;
-        }
-
-        .bookmark-btn {
-            width: 40px !important;
-            height: 40px !important;
-            font-size: 1.35rem !important;
-            top: 6px !important;
-            right: 6px !important;
-        }
-
-        .modal-content {
-            width: calc(100vw - 16px) !important;
-            max-width: none !important;
-            margin: 80px auto 10px !important;
-            max-height: 85vh !important;
-            overflow-y: auto !important;
-            border-radius: 8px !important;
-            padding: 16px !important;
-        }
-
-        #schedule-specific-item-group {
-            width: 100% !important;
-        }
-
-        #schedule-specific-item-group select {
-            width: 100% !important;
-            max-width: none !important;
-        }
-
-        #conflict-banner {
-            border: none !important;
-            border-left: 4px solid #fd7e14 !important;
-            border-radius: 0 !important;
-            margin-left: -12px !important;
-            margin-right: -12px !important;
-        }
-    }
-</style>
-<script>
-let favoritesOnly = false;
-let tableViewMode = false;
-const favoritesCacheKey = 'favoritesCache:' + ({{ session.get('username', '') | tojson }} || 'anon');
-
-function setViewModeState() {
-    document.body.classList.toggle('table-view', tableViewMode);
-    const icon = document.getElementById('view-mode-icon');
-    const button = document.getElementById('toggle-view-mode');
-    if (icon) icon.textContent = tableViewMode ? '🖼' : '🗂';
-    if (button) {
-        button.title = tableViewMode ? 'In Kartenansicht wechseln' : 'In Tabellenansicht wechseln';
-        button.setAttribute('aria-pressed', tableViewMode ? 'true' : 'false');
-    }
-}
-
-function toggleFavorite(id, btn, card){
-    const method = btn.textContent === '★' ? 'DELETE' : 'POST';
-    fetch(`/favorites/${id}`, {method})
-        .then(r=>{ if(!r.ok) console.error('HTTP Fehler Favoriten', r.status); return r.json().catch(()=>({ok:false,error:'invalid json'})); })
-        .then(data=>{
-            if(!data.ok){ console.error('Antwort Fehler Favoriten', data); return; }
-            const isFav = (data.favorites||[]).includes(id);
-            document.querySelectorAll(`.bookmark-btn[data-fav-id='${id}']`).forEach(b=>{
-                b.textContent = isFav ? '★' : '☆';
-                b.classList.toggle('active', isFav);
-                b.setAttribute('aria-pressed', isFav ? 'true' : 'false');
-            });
-            if(card){
-                if(isFav) card.classList.add('favorite-item'); else card.classList.remove('favorite-item');
-                if(favoritesOnly && !isFav) card.style.display='none';
-            }
-            if(!window.currentFavorites) window.currentFavorites = new Set();
-            if(isFav) window.currentFavorites.add(id); else window.currentFavorites.delete(id);
-            try { sessionStorage.setItem(favoritesCacheKey, JSON.stringify(Array.from(window.currentFavorites))); } catch(e){}
-        })
-        .catch(err=>console.error('Netzwerkfehler Favoriten', err));
-}
-document.addEventListener('DOMContentLoaded', ()=>{
-    // Initialize favorites cache set if stored
-    try {
-        if(!window.currentFavorites){
-            const cached = sessionStorage.getItem(favoritesCacheKey);
-            if(cached){ window.currentFavorites = new Set(JSON.parse(cached)); }
-        }
-    } catch(e){}
-    const toggleBtn = document.getElementById('toggle-favorites-view');
-    if(toggleBtn){
-        toggleBtn.addEventListener('click', ()=>{
-            favoritesOnly = !favoritesOnly;
-            document.body.classList.toggle('favorites-only', favoritesOnly);
-            document.getElementById('favorites-view-icon').textContent = favoritesOnly ? '⭐' : '🔖';
-            applyFilters();
-        });
-    }
-
-    const viewToggleBtn = document.getElementById('toggle-view-mode');
-    try {
-        tableViewMode = localStorage.getItem('inventarViewMode') === 'table';
-    } catch (e) {
-        tableViewMode = false;
-    }
-    setViewModeState();
-
-    if (viewToggleBtn) {
-        viewToggleBtn.addEventListener('click', () => {
-            tableViewMode = !tableViewMode;
-            setViewModeState();
-            try {
-                localStorage.setItem('inventarViewMode', tableViewMode ? 'table' : 'cards');
-            } catch (e) {}
-        });
-    }
-});
-
-// Open item modal directly from quick details button by fetching fresh data (ensures up-to-date favorite state)
-function openItemQuick(id){
-    fetch(`/get_item/${id}`).then(r=>r.json()).then(item=>{
-        if(item && !item.error){
-            // ensure favorites set available
-            if(!window.currentFavorites){
-                window.currentFavorites = new Set(JSON.parse(sessionStorage.getItem(favoritesCacheKey)||'[]'));
-            }
-            openItemModal(item);
-        }
-    });
-}
-</script>
-
-<style>
-/* Unified polished filter styling aligned with switch and action buttons */
-.filter-container {
-    gap: 14px;
-    align-items: flex-start;
-}
-
-.filter-group {
-    background: var(--ui-surface);
-    border: 1px solid #cfd8e3;
-    border-radius: 12px;
-    padding: 12px;
-    box-shadow: 0 2px 6px rgba(20, 35, 60, 0.08);
-}
-
-.filter-header {
-    margin-bottom: 8px;
-    gap: 8px;
-}
-
-.filter-header label {
-    font-weight: 700;
-    color: #2f3e4e;
-}
-
-.filter-toggle,
-.clear-filter,
-.search-button,
-.scan-button {
-    border-radius: 10px;
-    border: 1px solid #c7ced6;
-    min-height: 36px;
-    padding: 7px 12px;
-    font-weight: 700;
-    box-shadow: none;
-    transition: transform 0.12s ease, box-shadow 0.14s ease, filter 0.14s ease;
-}
-
-.filter-toggle {
-    width: 36px;
-    min-width: 36px;
-    padding: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: #2f3e4e;
-}
-
-.filter-toggle.is-open {
-    transform: rotate(180deg);
-    background: #e9f2ff;
-    border-color: #7ea1c8;
-    color: #1f4f7a;
-}
-
-.clear-filter {
-    background: var(--ui-surface);
-    color: #495868;
-}
-
-.filter-dropdown {
-    top: calc(100% + 8px);
-    border: 1px solid #cfd8e3;
-    border-radius: 12px;
-    box-shadow: 0 8px 20px rgba(20, 35, 60, 0.12);
-    background: var(--ui-surface);
-    padding: 10px;
-}
-
-.filter-option {
-    border-radius: 8px;
-    padding: 6px 8px;
-}
-
-.selected-filters {
-    min-height: 34px;
-    gap: 6px;
-}
-
-.filter-tag {
-    background: #edf4fb;
-    border: 1px solid #d0dfef;
-    color: #2a4763;
-    border-radius: 999px;
-    padding: 4px 10px;
-}
-
-.search-container input {
-    border: 1px solid #cfd8e3;
-    border-radius: 10px;
-    min-height: 36px;
-}
-
-.qr-container {
-    margin-top: 6px;
-    margin-bottom: 16px;
-    padding: 10px 12px;
-    border: 0;
-    border-radius: 12px;
-    background: transparent;
-    box-shadow: none;
-}
-
-#qr-reader {
-    margin-top: 10px;
-    border: 0;
-    border-radius: 12px;
-    background: transparent;
-    overflow: hidden;
-}
-
-.scan-button {
-    background: linear-gradient(180deg, #f6fbff, #e8f2ff);
-    color: #214867;
-    border-color: #96b5d3;
-}
-
-.scan-button.is-active {
-    background: linear-gradient(180deg, #fff4e8, #ffe7cf);
-    color: #8a4c08;
-    border-color: #e1a467;
-}
-
-@media (max-width: 768px) {
-    .filter-group {
-        border-radius: 12px !important;
-        padding: 12px !important;
-    }
-
-    .filter-toggle,
-    .clear-filter,
-    .search-button,
-    .scan-button {
-        min-height: 40px !important;
-        border-radius: 10px !important;
-    }
-
-    .filter-dropdown {
-        border-radius: 10px !important;
-    }
-
-    .qr-container {
-        border-radius: 10px !important;
-        padding: 10px !important;
-    }
-
-    #qr-reader {
-        border-radius: 10px !important;
-    }
-}
-</style>
-
-{% if open_item %}
-<script>
-    document.addEventListener("DOMContentLoaded", function() {
-        if (typeof openEditModalFromServer === 'function') {
-            setTimeout(function() {
-                openEditModalFromServer('{{ open_item }}');
-            }, 500);
-        }
-    });
-</script>
-{% endif %}
-{% endblock %}
-<style>
-    /* Admin/Main Content Container align */
-    .admin-content-container {
-        --table-columns: minmax(190px, 2fr) repeat(6, minmax(110px, 1fr));
-    }
-    @media screen and (min-width: 769px) and (max-width: 1024px) {
-        .admin-content-container {
-            width: 90% !important;
-        }
-        .items-container {
-            display: grid !important;
-            grid-template-columns: repeat(2, 1fr) !important;
-            gap: 20px !important;
-        }
-    }
-    @media screen and (max-width: 768px) {
-        .admin-content-container {
-            width: 100% !important;
-            max-width: 100% !important;
-            margin: 0 !important;
-            padding: 12px 12px 18px !important;
-            box-sizing: border-box !important;
-            overflow-x: hidden !important;
-        }
-        .item-card .item-image {
-            width: 100% !important;
-            height: auto !important;
-            max-height: 300px !important;
-            display: block !important;
-            object-fit: cover !important;
-        }
-        .item-card .image-container {
-            height: 200px !important;
-            overflow: hidden !important;
-            position: relative !important;
-            margin-bottom: 15px !important;
-        }
-        .actions {
-            gap: 8px !important;
-            border-top: none !important;
-            padding-top: 8px !important;
-            flex-direction: column !important;
-            align-items: stretch !important;
-        }
-        .actions form,
-        .actions button,
-        .actions a {
-            width: 100% !important;
-        }
-        .items-container, .item-card, .image-container, .item-image {
-            touch-action: pan-y !important;
-            -webkit-overflow-scrolling: touch !important;
-        }
-    }
-    @media (max-width: 767px) {
-        body {
-            overflow-x: hidden;
-            -webkit-overflow-scrolling: touch;
-            touch-action: pan-y;
-        }
-        .admin-content-container {
-            width: 100%;
-            max-width: 100%;
-            margin: 0;
-            padding: 12px 12px 18px;
-            box-sizing: border-box;
-            overflow-x: hidden;
-        }
-    }
-</style>