Style changes to the student Cards admin

- Replace fragile .scheduler_lock file mechanism with atomic MongoDB operations
- Prevent multiple background schedulers from starting across web workers
- Add heartbeat task to renew lock periodically and handle crash recovery
- Release lock cleanly on application shutdown

Web/modules/database/items.py

@@ -25,6 +25,7 @@ import datetime
 import Web.modules.database.settings as cfg
 from Web.modules.database.settings import MongoClient
 import Web.modules.inventarsystem.data_protection as dp
+import logging
 
 
 def is_library_item(item):
@@ -1292,4 +1293,137 @@ def sync_group_codes(primary_obj_id, base_code, individual_codes_list):
         return True
     except Exception as e:
         print(f"Error syncing group codes: {e}")
-        return False
+        return False
+
+
+logging.basicConfig(level=logging.INFO, format='%(levelname)s: %(message)s')
+
+
+def cleanup_orphaned_images(fs, dry_run=True):
+    """
+    Finds images in GridFS that are no longer referenced by any item
+    and optionally deletes them.
+
+    Supported item fields:
+        - book_cover_image
+        - image
+        - images
+
+    The fields are expected to contain GridFS file ObjectIds.
+
+    :param fs: GridFS instance, e.g. gridfs.GridFS(db)
+    :param dry_run: If True, only reports what would be deleted.
+                    If False, actually deletes the files.
+    """
+
+    logging.info("Starte Cleanup-Skript...")
+
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+
+    try:
+        db = client[cfg.MONGODB_DB]
+        items_collection = db["items"]
+
+        referenced_files = set()
+
+        for item in items_collection.find(
+            {},
+            {
+                "Images": 1
+            }
+        ):
+            images = item.get("Images")
+
+            if isinstance(images, list):
+                for img in images:
+                    if img:
+                        referenced_files.add(img)
+
+        referenced_files.discard(None)
+
+        logging.info(
+            f"{len(referenced_files)} referenzierte GridFS-Dateien gefunden."
+        )
+
+        orphaned_files = []
+
+        for grid_file in fs.find():
+            file_id = grid_file._id
+            filename = grid_file.filename or ""
+
+            if not filename.lower().endswith(
+                (".jpg", ".jpeg", ".png", ".gif", ".webp")
+            ):
+                continue
+
+            if file_id not in referenced_files:
+                orphaned_files.append(
+                    {
+                        "_id": file_id,
+                        "filename": filename,
+                        "upload_date": grid_file.upload_date,
+                    }
+                )
+
+        logging.info(
+            f"Gefundene verwaiste Bilder: {len(orphaned_files)}"
+        )
+
+        if dry_run:
+            logging.info(
+                "--- DRY RUN AKTIV - Es wird nichts gelöscht ---"
+            )
+
+            for file in orphaned_files:
+                logging.info(
+                    f"Würde löschen: "
+                    f"{file['filename']} "
+                    f"(ID: {file['_id']}, "
+                    f"Hochgeladen: {file['upload_date']})"
+                )
+
+            logging.info(
+                "--- Setze dry_run=False, um physisch zu löschen ---"
+            )
+
+        else:
+            logging.warning("--- LÖSCHVORGANG AKTIV ---")
+
+            deleted_count = 0
+            failed_count = 0
+
+            for file in orphaned_files:
+                try:
+                    fs.delete(file["_id"])
+
+                    deleted_count += 1
+
+                    logging.info(
+                        f"Gelöscht: {file['filename']} "
+                        f"(ID: {file['_id']})"
+                    )
+
+                except Exception as e:
+                    failed_count += 1
+
+                    logging.error(
+                        f"Fehler beim Löschen von "
+                        f"{file['filename']} "
+                        f"(ID: {file['_id']}): {e}"
+                    )
+
+            logging.info(
+                f"Cleanup beendet. "
+                f"{deleted_count} Bilder gelöscht, "
+                f"{failed_count} Fehler."
+            )
+
+        return {
+            "status": "success",
+            "referenced_count": len(referenced_files),
+            "orphaned_count": len(orphaned_files),
+            "dry_run": dry_run,
+        }
+
+    finally:
+        client.close()

Web/modules/database/user.py

@@ -704,6 +704,41 @@ def get_user_by_student_card(student_card_id):
     # Do not call dp.decrypt_text() here because found_user is a MongoDB dictionary.
     return found_user
 
+def get_user_by_student_ident(student_ident):
+    """Return user dict by student ident by decrypting all cards and matching."""
+    if not student_ident:
+        return None
+
+    # Normalisiere den Suchbegriff, den wir finden wollen
+    normalized_target = str(student_ident).strip()
+    if not normalized_target:
+        return None
+
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+    try:
+        db = _get_tenant_db(client)
+        all_student_cards = db['student_cards'].find()
+
+        for user_doc in all_student_cards:
+            encrypted_ident = user_doc.get('AusweisIdent')
+
+            if encrypted_ident:
+                try:
+                    decrypted_ident = dp.decrypt_text(encrypted_ident)
+                    
+                    if decrypted_ident and str(decrypted_ident).strip() == normalized_target:
+                        return user_doc 
+                        
+                except Exception as e:
+                    app.logger.error(f"Entschlüsselungsfehler bei ID {user_doc.get('_id')}: {e}")
+                    continue
+                    
+    except Exception as exc:
+        app.logger.error(f"Datenbankfehler in get_user_by_student_ident: {exc}")
+    finally:
+        client.close()
+
+    return None
 
 def make_admin(username):
     """Grant administrator privileges to a user."""

Web/templates/base.html

@@ -1342,7 +1342,7 @@
                     <ul class="navbar-nav me-auto mb-2 mb-lg-0" id="libraryNavList">
                         {% if current_permissions.pages.get('library_view', False) %}
                         <li class="nav-item" data-nav-fixed="true">
-                            <a class="nav-link {% if current_path == url_for('library_view') %}nav-active{% endif %}" href="{{ url_for('library_view') }}" data-tutorial-tip="Die Bibliothek zeigt Ihnen alle Medien und verfügbaren Bücher.">Medien</a>
+                            <a class="nav-link {% if current_path == url_for('library_view') %}nav-active{% endif %}" href="{{ url_for('library_view') }}" data-tutorial-tip="Die Bibliothek zeigt Ihnen alle Medien und verfügbaren Bücher.">Medien/Ausleihe</a>
                         </li>
                         {% endif %}
                         {% if 'username' in session %}

Web/templates/library_table.html

@@ -135,21 +135,6 @@
     .library-scan-status.warn { color: #9a6700; }
     .library-scan-status.error { color: #b42318; }
 
-    .library-scan-reader-wrap {
-        display: none;
-        margin-top: 12px;
-        max-width: 460px;
-        background: var(--ui-surface);
-        border: 1px solid #d9dde4;
-        border-radius: 8px;
-        overflow: hidden;
-    }
-
-    .library-scan-reader {
-        width: 100%;
-        min-height: 280px;
-    }
-
     /* Filters */
     .library-filter-toggle-btn {
         padding: 10px 16px;
@@ -431,6 +416,71 @@
 
         .library-scan-reader-wrap { max-width: 100%; }
     }
+    .library-scan-reader-wrap {
+        display: none;
+        margin-top: 15px;
+        max-width: 640px;
+        margin-left: auto;
+        margin-right: auto;
+        background: #000;
+        border: 1px solid #d9dde4;
+        border-radius: 8px;
+        overflow: hidden;
+        grid-column: 1 / -1;
+    }
+
+    .library-scan-reader {
+        width: 100%;
+        min-height: 280px;
+        position: relative;
+    }
+
+    .library-scan-reader video {
+        width: 100%;
+        height: auto;
+        display: block;
+        object-fit: cover;
+    }
+
+    .library-scan-reader canvas.drawing,
+    .library-scan-reader canvas.drawingBuffer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+
+    .detail-gallery-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+        margin: 15px 0 20px 0;
+        width: 100%;
+        align-items: center;
+    }
+
+    .item-image-wrapper {
+        background-color: #f8fafc;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        padding: 6px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+    }
+
+    .item-image {
+        max-width: 160px;
+        max-height: 200px;
+        width: auto;
+        height: auto;
+        display: block;
+        object-fit: contain;
+        border-radius: 4px;
+    }
 </style>
 
 <div class="library-table-container" id="libraryTableContainer" data-can-edit="{{ 1 if current_permissions.actions.get('can_edit', False) else 0 }}">
@@ -457,7 +507,6 @@
             🔍 Filter
         </button>
     </div>
-
     <div class="library-scan-controls">
         <select id="scanModeSelect" aria-label="Scan-Modus">
             <option value="card_only">Nur Ausweis erfassen</option>
@@ -475,6 +524,10 @@
         </label>
         <button id="manualActionBtn" class="button" type="button" style="margin-left:6px; background:#4f46e5; color:white;">Code verarbeiten</button>
     </div>
+    <div class="library-scan-reader-wrap" id="scanReaderWrap" style="display: none; margin-top: 15px;">
+        <div class="library-scan-reader" style="width: 100%; max-width: 640px; margin: 0 auto; overflow: hidden; border-radius: 8px; border: 2px solid #ccc;">
+        </div>
+    </div>
     <div id="filterPanel" class="library-filter-panel">
         <div class="filter-row">
             <div class="filter-item">
@@ -805,71 +858,92 @@
         deleteLibraryItem(itemId);
     }
 
-    // =========================================================================
-    // 3. CORE SCANNER ROUTING ENGINE (QUAGGA2)
-    // =========================================================================
-    function startScanner(targetCallback) {
-        const readerWrap = document.getElementById('scanReaderWrap');
+    async function startScanner(callback = null) {
+        if (scannerRunning) {
+            console.warn("Scanner is already running. Stopping it first...");
+            await stopScanner();
+        }
+
+        activeScannerCallback = callback;
+
+        const scannerWrap = document.querySelector('.library-scan-reader-wrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
 
-        activeScannerCallback = targetCallback;
+        // 1. CRITICAL FIX: Make the container visible BEFORE Quagga initializes
+        // Quagga cannot calculate video dimensions if display is 'none'
+        if (scannerWrap) {
+            scannerWrap.style.display = 'block';
+        }
 
-        if (readerWrap) readerWrap.style.display = 'block';
-        setScanStatus('Initializing camera...', 'warn');
+        setScanStatus('Starte Kamera...', 'warn');
 
-        Quagga.init({
-            inputStream: {
-                name: "Live",
-                type: "LiveStream",
-                target: document.querySelector('#library-scanner-container'),
-                constraints: {
-                    width: 640,
-                    height: 480,
-                    facingMode: "environment"
+        // 2. Initialize Quagga with a slight delay to allow the DOM to render the block
+        setTimeout(() => {
+            Quagga.init({
+                inputStream: {
+                    name: "Live",
+                    type: "LiveStream",
+                    // This MUST match the inner div where the video should appear
+                    target: document.querySelector('.library-scan-reader'), 
+                    constraints: {
+                        width: 640,
+                        height: 480,
+                        facingMode: "environment" // Prefer back camera on mobile
+                    }
                 },
-            },
-            decoder: {
-                readers: [
-                    "code_128_reader",
-                    "ean_reader",
-                    "code_39_reader",
-                    "upc_reader",
-                    "codabar_reader",
-                    "i2of5_reader"
-                ]
-            }
-        }, function(err) {
-            if (err) {
-                console.error('Scanner start failed:', err);
-                if (readerWrap) readerWrap.style.display = 'none';
-                const detail = (err && (err.message || err.name)) ? ` (${err.message || err.name})` : '';
-                setScanStatus(`Scanner konnte nicht gestartet werden${detail}`, 'error');
-                return;
-            }
+                locator: {
+                    patchSize: "medium",
+                    halfSample: true
+                },
+                decoder: {
+                    // Keep only the barcode types you actually use to improve performance
+                    readers: ["code_128_reader", "ean_reader", "code_39_reader"] 
+                },
+                locate: true
+            }, function(err) {
+                if (err) {
+                    // This will finally log the actual error (e.g., NotAllowedError) if permissions fail
+                    console.error("Quagga initialization failed:", err);
+                    setScanStatus('Kamera-Fehler: ' + (err.name || err), 'error');
 
-            Quagga.start();
-            scannerRunning = true;
+                    if (scannerWrap) scannerWrap.style.display = 'none';
+                    scannerRunning = false;
+                    return;
+                }
 
-            if (!targetCallback && toggleBtn) {
-                toggleBtn.textContent = 'Scanner stoppen';
-            }
-            setScanStatus('Scanner aktiv. Jetzt Code scannen.', 'warn');
-        });
+                Quagga.start();
+                scannerRunning = true;
+                setScanStatus('Scanner bereit.', 'ok');
+
+                if (toggleBtn) {
+                    toggleBtn.textContent = 'Scanner stoppen';
+                }
+            });
+        }, 50);
     }
 
-    function stopScanner() {
+    async function stopScanner() {
         if (!scannerRunning) return;
 
-        const readerWrap = document.getElementById('scanReaderWrap');
-        const toggleBtn = document.getElementById('toggleScannerBtn');
+        try {
+            Quagga.stop();
+        } catch (e) {
+            console.warn("Error stopping Quagga (it may not have been running):", e);
+        }
 
-        Quagga.stop();
         scannerRunning = false;
         activeScannerCallback = null;
 
-        if (readerWrap) readerWrap.style.display = 'none';
-        if (toggleBtn) toggleBtn.textContent = 'Scanner starten';
-        setScanStatus('Scanner gestoppt.', 'warn');
+        // Hide the container to free up UI space
+        const scannerWrap = document.querySelector('.library-scan-reader-wrap');
+        if (scannerWrap) {
+            scannerWrap.style.display = 'none';
+        }
+
+        const toggleBtn = document.getElementById('toggleScannerBtn');
+        if (toggleBtn) {
+            toggleBtn.textContent = 'Kamera Scanner'; // Reset button text
+        }
     }
 
     async function isStudentCardBarcode(code) {
@@ -1285,69 +1359,75 @@
         const detailContent = document.getElementById('detailContent');
         const detailModal = document.getElementById('detailModal');
 
+        // Lade-Status anzeigen und Modal öffnen
         detailContent.innerHTML = '<p>Lade Details...</p>';
         detailModal.style.display = 'flex';
 
-        const item = libraryItems.find(i => i._id === itemId);
-        let mediaHtml = '';
-
-        // Robuste Prüfung: Wir testen gängige Benennungen aus deinem Backend
-        const imageArray = item.Images || item.Bilder || item.images;
-
-        if (item && Array.isArray(imageArray) && imageArray.length > 0) {
-            const imagesHtml = imageArray.map((image, index) => {
-
-                // Dein neuer Code für die exakte Routen-Generierung
-                const imageSrc = image.startsWith('/uploads/') || image.startsWith('http') ?
-                    image :
-                    `{{ url_for('uploaded_file', filename='') }}${image}`;
-
-                const thumbnailInfo = item.ThumbnailInfo && item.ThumbnailInfo[index];
-                const isVideo = isVideoFile(image);
-
-                if (isVideo) {
-                    const videoSrc = thumbnailInfo && thumbnailInfo.has_thumbnail
-                        ? thumbnailInfo.thumbnail_url
-                        : imageSrc;
-
-                    if (thumbnailInfo && thumbnailInfo.has_thumbnail) {
-                        return `
-                    <div class="video-container" style="position: relative; width: 120px; height: 120px; display: inline-block; margin-right: 15px; margin-bottom: 15px;">
-                        <img src="${videoSrc}" alt="${escapeHtml(item.Name || 'Medium')}" class="item-image" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid #ddd;">
-                        <div class="video-preview-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: rgba(0,0,0,0.6); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 16px;">
-                            ▶
-                        </div>
-                    </div>`;
-                    } else {
-                        return `<div style="width: 120px; height: 120px; background: #333; color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 15px; margin-bottom: 15px;">VIDEO</div>`;
-                    }
-                } else {
-                    const imageSrcFinal = thumbnailInfo && thumbnailInfo.has_thumbnail
-                        ? thumbnailInfo.thumbnail_url
-                        : imageSrc;
-
-                    return `<img src="${imageSrcFinal}" alt="${escapeHtml(item.Name || 'Medium')}" class="item-image" style="width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; margin-right: 15px; margin-bottom: 15px;">`;
-                }
-            }).join('');
-
-            mediaHtml = `<div class="detail-gallery-container" style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap;">${imagesHtml}</div>`;
-        }
-
+        // Daten vom Backend-API-Endpoint abrufen
         fetch(`/api/item_detail/${itemId}`)
             .then(response => {
-                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-                return response.text();
+                if (!response.ok) {
+                    throw new Error('Fehler beim Laden der Artikeldetails');
+                }
+                return response.json();
             })
-            .then(html => {
-                detailContent.innerHTML = mediaHtml + DOMPurify.sanitize(html);
+            .then(data => {
+                detailContent.innerHTML = data.html;
+
+                const imageArray = data.images || [];
+                const thumbnailInfoMap = data.thumbnailInfo || [];
+
+                if (Array.isArray(imageArray) && imageArray.length > 0) {
+                    const imagesHtml = imageArray.map((image, index) => {
+                        const isVideo = typeof isVideoFile === 'function' ? isVideoFile(image) : /\.(mp4|webm|ogg|mov)$/i.test(image);
+                        const thumbnailInfo = thumbnailInfoMap[index];
+
+                        if (isVideo) {
+                            const videoSrc = image.startsWith('/uploads/') || image.startsWith('http')
+                                ? image
+                                : `/uploads/${image}`;
+
+                            return `
+                        <div class="item-image-wrapper" style="width: 100%; height: auto;">
+                            <video src="${videoSrc}" class="item-image ${index === 0 ? 'active-image' : ''}" id="modal-image-${index}" controls preload="metadata" style="width: 100%; height: auto; max-height: 300px;"></video>
+                        </div>`;
+                        } else {
+                            const imageSrc = thumbnailInfo && thumbnailInfo.has_preview
+                                ? thumbnailInfo.preview_url
+                                : (image.startsWith('/uploads/') || image.startsWith('http')
+                                    ? image
+                                    : `/uploads/${image}`);
+
+                            return `
+                        <div class="item-image-wrapper">
+                            <img src="${imageSrc}"
+                                 alt="Buchcover / Bild"
+                                 class="item-image ${index === 0 ? 'active-image' : ''}"
+                                 id="modal-image-${index}"
+                                 loading="lazy"
+                                 onload="console.log('Bild geladen:', '${imageSrc}')"
+                                 onerror="console.error('FEHLER beim Laden des Bildes im DOM:', '${imageSrc}')">
+                        </div>`;
+                        }
+                    }).join('');
+
+                    const mediaHtml = `<div class="detail-gallery-container">${imagesHtml}</div>`;
+
+                    const h2Tag = detailContent.querySelector('h2');
+                    if (h2Tag) {
+                        h2Tag.insertAdjacentHTML('afterend', mediaHtml);
+                    } else {
+                        detailContent.insertAdjacentHTML('afterbegin', mediaHtml);
+                    }
+                }
             })
-            .catch(err => {
-                console.error('Error loading detail:', err);
-                detailContent.innerHTML = '<p style="color: red;">Entschuldigung, die Details konnten nicht geladen werden.</p>';
+            .catch(error => {
+                console.error('Error fetching item detail:', error);
+                detailContent.innerHTML = '<p style="color: red;">Fehler beim Laden der Artikeldetails.</p>';
             });
     }
 
-    // Closes the modal via the 'x' button
+    // Schließt das Modal über den 'x'-Button
     function closeDetailModal() {
         document.getElementById('detailModal').style.display = 'none';
     }

Web/templates/student_cards_admin.html

@@ -18,14 +18,31 @@
         align-items: center;
         margin-bottom: 20px;
         flex-wrap: wrap;
-        gap: 10px;
+        gap: 15px;
+    }
+
+    /* Neu strukturiertes Layout für Formular & Import */
+    .dashboard-grid {
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        gap: 20px;
+        margin-bottom: 30px;
     }
 
     .student-card-form {
         background: var(--ui-bg);
         padding: 20px;
         border-radius: 8px;
-        margin-bottom: 30px;
+    }
+
+    .import-card {
+        border: 1px solid #dbe4ee;
+        border-radius: 8px;
+        padding: 20px;
+        background: #f8fbff;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
     }
 
     .form-row {
@@ -35,6 +52,10 @@
         margin-bottom: 15px;
     }
 
+    .form-row.full-width {
+        grid-template-columns: 1fr;
+    }
+
     .form-group {
         display: flex;
         flex-direction: column;
@@ -47,7 +68,8 @@
     }
 
     .form-group input,
-    .form-group select {
+    .form-group select,
+    .form-group textarea {
         padding: 10px;
         border: 1px solid #ddd;
         border-radius: 4px;
@@ -55,7 +77,8 @@
     }
 
     .form-group input:focus,
-    .form-group select:focus {
+    .form-group select:focus,
+    .form-group textarea:focus {
         outline: none;
         border-color: #007bff;
         box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
@@ -65,14 +88,16 @@
         display: flex;
         gap: 10px;
         justify-content: flex-end;
+        margin-top: 10px;
     }
 
-    .form-actions button {
+    .form-actions button, .form-actions a {
         padding: 10px 20px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         font-weight: 600;
+        text-decoration: none;
     }
 
     .btn-save {
@@ -126,15 +151,18 @@
     .card-actions {
         display: flex;
         gap: 8px;
+        align-items: center;
     }
 
-    .btn-edit, .btn-delete {
+    .btn-edit, .btn-delete, .btn-export {
         padding: 6px 12px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         font-size: 13px;
         font-weight: 600;
+        text-decoration: none;
+        display: inline-block;
     }
 
     .btn-edit {
@@ -164,9 +192,6 @@
         font-weight: 600;
         text-decoration: none;
         display: inline-block;
-    }
-
-    .btn-print {
         background: #17a2b8;
         color: white;
     }
@@ -188,6 +213,7 @@
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
+        align-items: center;
     }
 
     .empty-state {
@@ -201,6 +227,12 @@
         margin: 10px 0;
     }
 
+    @media (max-width: 992px) {
+        .dashboard-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+
     @media (max-width: 768px) {
         .form-row {
             grid-template-columns: 1fr;
@@ -222,96 +254,132 @@
 
         .card-actions {
             flex-direction: column;
+            align-items: stretch;
         }
     }
 </style>
 
 <div class="container">
+    <!-- Header mit Aktionen -->
     <div class="student-card-header">
         <div>
-            <h1>📚 Bibliotheksausweise (Bibliothek)</h1>
+            <h1 style="margin: 0;">📚 Bibliotheksausweise</h1>
         </div>
         <div class="export-buttons">
+            <form method="GET" action="{{ url_for('student_card_class_barcode_download') }}" style="display: inline-flex; gap: 5px; align-items: center; background: white; padding: 2px; border-radius: 4px; border: 1px solid #ddd;">
+                <select name="class_name" required style="border: none; padding: 8px; outline: none; font-size: 14px; background: transparent; cursor: pointer;">
+                    <option value="" disabled selected>-- Klasse wählen --</option>
+                    {% for cls in available_classes %}
+                        <option value="{{ cls }}">{{ cls }}</option>
+                    {% endfor %}
+                </select>
+                <button type="submit" class="btn-print" style="padding: 8px 12px; margin: 0;">📤 PDF</button>
+            </form>
+
             <a href="{{ url_for('student_card_barcode_download') }}" class="btn-print" style="background: #28a745;">📥 Alle Ausweise (PDF)</a>
             <a href="{{ url_for('library_admin') }}" class="btn btn-primary">← Zur Bibliotheks-Upload</a>
         </div>
     </div>
 
-    <div style="border:1px solid #dbe4ee; border-radius:8px; padding:14px; margin-bottom:16px; background:#f8fbff;">
-        <h3 style="margin:0 0 8px 0;">Excel-Import Bibliotheksausweise</h3>
-        <p style="margin:0 0 10px 0; color:#555;">Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch, zum Beispiel aus <strong>ASV (Amtliche Schuldaten)</strong>. Erkannt werden automatisch Spalten wie <strong>Name</strong>, <strong>Klasse</strong>, <strong>Ausweis-ID</strong>, <strong>Notizen</strong> und <strong>Standard-Ausleihdauer</strong>. Fehlt die Ausweis-ID, wird sie automatisch aus Name und Klasse erzeugt.</p>
-        <form method="POST" action="{{ url_for('upload_student_cards_excel') }}" enctype="multipart/form-data" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
-            <input type="file" name="student_cards_excel" accept=".xlsx,.csv" required>
-            <button type="submit" class="btn btn-secondary" name="excel_action" value="validate">Nur validieren</button>
-            <button type="submit" class="btn btn-primary" name="excel_action" value="import">Ausweise importieren</button>
-        </form>
-    </div>
+    <!-- Hauptbereich Grid: Formular + Import -->
+    <div class="dashboard-grid">
+        <!-- Add/Edit Form -->
+        <div class="student-card-form">
+            <h2 style="margin-top:0;">{% if edit_mode %}Ausweis bearbeiten{% else %}Neuer Bibliotheksausweis{% endif %}</h2>
 
-    <!-- Add/Edit Form -->
-    <div class="student-card-form">
-        <h2>{% if edit_mode %}Ausweis bearbeiten{% else %}Neuer Bibliotheksausweis{% endif %}</h2>
-        
-        <form method="POST" action="{{ url_for('student_cards_admin') }}">
-            {% if edit_mode %}
-                <input type="hidden" name="action" value="edit">
-                <input type="hidden" name="card_id" value="{{ form_data.get('card_id', '') }}">
-            {% else %}
-                <input type="hidden" name="action" value="add">
-            {% endif %}
-
-            <div class="form-row">
-                <div class="form-group">
-                    <label for="ausweis_id">Ausweis-ID *</label>
-                    <input type="text" id="ausweis_id" name="ausweis_id" required 
-                           value="{{ form_data.get('ausweis_id', '') }}"
-                           placeholder="z.B. SIS2024001">
-                </div>
-                <div class="form-group">
-                    <label for="student_name">Schüler Name *</label>
-                    <input type="text" id="student_name" name="student_name" required
-                           value="{{ form_data.get('student_name', '') }}"
-                           placeholder="z.B. Max Mustermann">
-                </div>
-            </div>
-
-            <div class="form-row">
-                <div class="form-group">
-                    <label for="default_borrow_days">Standard Ausleihdauer (Tage) *</label>
-                    <input type="number" id="default_borrow_days" name="default_borrow_days" 
-                           min="1" max="365" required
-                           value="{{ form_data.get('default_borrow_days', config.get('default', 14)) }}">
-                </div>
-                <div class="form-group">
-                    <label for="class_name">Klasse</label>
-                    <input type="text" id="class_name" name="class_name"
-                           value="{{ form_data.get('class_name', '') }}"
-                           placeholder="z.B. 10A">
-                </div>
-            </div>
-
-            <div class="form-row">
-                <div class="form-group">
-                    <label for="notes">Notizen</label>
-                    <textarea id="notes" name="notes" rows="3" 
-                              placeholder="Optionale Notizen..."
-                              style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">{{ form_data.get('notes', '') }}</textarea>
-                </div>
-            </div>
-
-            <div class="form-actions">
+            <form method="POST" action="{{ url_for('student_cards_admin') }}">
                 {% if edit_mode %}
-                    <a href="{{ url_for('student_cards_admin') }}" class="btn-cancel">Abbrechen</a>
+                    <input type="hidden" name="action" value="edit">
+                    <input type="hidden" name="card_id" value="{{ form_data.get('card_id', '') }}">
+                {% else %}
+                    <input type="hidden" name="action" value="add">
                 {% endif %}
-                <button type="submit" class="btn-save">
-                    {% if edit_mode %}Speichern{% else %}Hinzufügen{% endif %}
-                </button>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="student_name">Schüler Name *</label>
+                        <input type="text" id="student_name" name="student_name" required
+                               value="{{ form_data.get('student_name', '') }}"
+                               placeholder="z.B. Max Mustermann">
+                    </div>
+                    <div class="form-group">
+                        <label for="class_name">Klasse (optional)</label>
+                        <input type="text" id="class_name" name="class_name" list="class_list"
+                               value="{{ form_data.get('class_name', '') }}"
+                               placeholder="z.B. 10A (Tippen oder Auswählen)">
+
+                        <datalist id="class_list">
+                            {% for cls in available_classes %}
+                                <option value="{{ cls }}">
+                            {% endfor %}
+                        </datalist>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="ausweis_id">Ausweis-ID (optional)</label>
+                        <input type="text" id="ausweis_id" name="ausweis_id"
+                               value="{{ form_data.get('ausweis_id', '') }}"
+                               placeholder="z.B. SIS2024001">
+                    </div>
+                    <div class="form-group">
+                        <label for="ausweis_ident">Lokales Differenzierungsmerkmal (optional aber empfohlen)</label>
+                        <input type="text" id="ausweis_ident" name="ausweis_ident"
+                               value="{{ form_data.get('ausweis_ident', '') }}"
+                        placeholder="z.B. xw5oo123bbe">
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="default_borrow_days">Standard Ausleihdauer (Tage) (optional)</label>
+                        <input type="number" id="default_borrow_days" name="default_borrow_days"
+                               min="1" max="365" required
+                               value="{{ form_data.get('default_borrow_days', config.get('default', 14)) }}">
+                    </div>
+                </div>
+
+                <div class="form-row full-width">
+                    <div class="form-group">
+                        <label for="notes">Notizen</label>
+                        <textarea id="notes" name="notes" rows="2"
+                                  placeholder="Optionale Notizen...">{{ form_data.get('notes', '') }}</textarea>
+                    </div>
+                </div>
+
+                <div class="form-actions">
+                    {% if edit_mode %}
+                        <a href="{{ url_for('student_cards_admin') }}" class="btn-cancel">Abbrechen</a>
+                    {% endif %}
+                    <button type="submit" class="btn-save">
+                        {% if edit_mode %}Speichern{% else %}Hinzufügen{% endif %}
+                    </button>
+                </div>
+            </form>
+        </div>
+
+        <!-- Excel-Import -->
+        <div class="import-card">
+            <div>
+                <h3 style="margin:0 0 8px 0;">Excel-Import</h3>
+                <p style="margin:0 0 15px 0; color:#555; font-size:13px; line-height:1.4;">
+                    Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch (z. B. aus <strong>ASV</strong>). Erkannt werden Name, Nachname, Klasse, Ausweis-ID, lokales Differenzierungsmerkmal, Notizen & Ausleihdauer.
+                </p>
             </div>
-        </form>
+            <form method="POST" action="{{ url_for('upload_student_cards_excel') }}" enctype="multipart/form-data" style="display:flex; flex-direction:column; gap:12px;">
+                <input type="file" name="student_cards_excel" accept=".xlsx,.csv" required style="font-size:13px;">
+                <div style="display:flex; gap:8px;">
+                    <button type="submit" class="btn btn-secondary" name="excel_action" value="validate" style="flex:1;">Validieren</button>
+                    <button type="submit" class="btn btn-primary" name="excel_action" value="import" style="flex:1;">Importieren</button>
+                </div>
+            </form>
+        </div>
     </div>
 
     <!-- Cards List -->
     <div>
-        <h2>Registrierte Ausweise</h2>
+        <h2 style="margin-bottom: 15px;">Registrierte Ausweise</h2>
         {% if student_cards %}
             <table class="cards-table">
                 <thead>
@@ -338,7 +406,7 @@
                                         <input type="hidden" name="edit" value="{{ card._id }}">
                                         <button type="submit" class="btn-edit">Bearbeiten</button>
                                     </form>
-                                    <a href="{{ url_for('student_card_single_barcode_download', card_id=card._id) }}" class="btn-export" style="text-decoration: none; display: inline-block;">📥 PDF</a>
+                                    <a href="{{ url_for('student_card_single_barcode_download', card_id=card._id) }}" class="btn-export">📥 PDF</a>
                                     <form method="POST" style="display: inline;" onsubmit="return confirm('Wirklich löschen?');">
                                         <input type="hidden" name="action" value="delete">
                                         <input type="hidden" name="card_id" value="{{ card._id }}">
@@ -364,5 +432,4 @@
     // All PDF exports now go through backend routes
 </script>
 
-{% endblock %}
-
+{% endblock %}

Web/templates/upload_admin.html

@@ -836,7 +836,7 @@
                             <!-- Options will be loaded by JavaScript -->
                         </select>
                     </div>
-                    <div class="formupload_admin-group">
+                    <div class="form-group">
                         <label for="filter2-4">Wert 4:</label>
                         <select id="filter2-4" name="filter2" class="filter-dropdown-select">
                             <option value="">-- Optional --</option>
@@ -876,12 +876,14 @@
             </div>
 
 
-            <!-- Image upload (hidden for library mode) -->
             <div class="form-group">
-                <label for="images">Bilder/Videos:</label>
-                <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif, .mp4, .mov, .avi, .mkv, .webm, .flv, .m4v, .3gp" multiple>
-                <div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>
-                <!-- Add image preview area -->
+                <label>Buchcover (automatisch):</label>
+                <div id="book-cover-preview-container"></div>
+            </div>
+            <div class="form-group">
+                <label for="images"> Bilder hinzufügen:</label>
+                <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif" multiple>
+                <div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF</div>
                 <div class="image-preview-container" id="image-preview-container"></div>
             </div>
 
@@ -1669,23 +1671,24 @@
         }, 3000);
     }
 
-    // Function to download book cover image
     function downloadBookCover(imageUrl) {
         if (!imageUrl) {
             console.log('No image URL provided');
             return;
         }
-        
-        // Show loading indicator for image download
-        const imagePreviewContainer = document.getElementById('image-preview-container');
-        if (imagePreviewContainer) {
-            const loadingDiv = document.createElement('div');
-            loadingDiv.className = 'image-loading';
-            loadingDiv.innerHTML = '<div class="loading-spinner">Buchcover wird heruntergeladen...</div>';
-            imagePreviewContainer.appendChild(loadingDiv);
+
+        const coverPreviewContainer = document.getElementById('book-cover-preview-container');
+
+        if (!coverPreviewContainer) {
+            console.error('Error: "book-cover-preview-container" not found in the DOM.');
+            return;
         }
-        
-        // Download the image via backend
+
+        const loadingDiv = document.createElement('div');
+        loadingDiv.className = 'image-loading';
+        loadingDiv.innerHTML = '<div class="loading-spinner">Buchcover wird heruntergeladen...</div>';
+        coverPreviewContainer.appendChild(loadingDiv);
+
         fetch('/download_book_cover', {
             method: 'POST',
             headers: {
@@ -1693,78 +1696,63 @@
             },
             body: JSON.stringify({ url: imageUrl })
         })
-        .then(response => response.json())
-        .then(data => {
-            // Remove loading indicator
-            const loadingDiv = imagePreviewContainer?.querySelector('.image-loading');
-            if (loadingDiv) {
-                loadingDiv.remove();
-            }
-            
-            if (data.success) {
-                // Create a preview of the downloaded image
-                const imagePreview = document.createElement('div');
-                imagePreview.className = 'book-cover-preview';
-                imagePreview.innerHTML = `
-                    <div class="preview-item">
-                        <img src="{{ url_for('uploaded_file', filename='') }}${data.filename}" 
-                             alt="Buchcover" class="book-cover-thumbnail">
-                        <p class="book-cover-caption">Buchcover automatisch heruntergeladen</p>
-                        <input type="hidden" name="book_cover_image" value="${data.filename}">
-                        <button type="button" onclick="removeBookCover(this)" 
-                                class="remove-book-cover-button">
-                            Entfernen
-                        </button>
-                    </div>
-                `;
-                
-                if (imagePreviewContainer) {
-                    imagePreviewContainer.appendChild(imagePreview);
+            .then(response => response.json())
+            .then(data => {
+                const currentLoadingDiv = coverPreviewContainer.querySelector('.image-loading');
+                if (currentLoadingDiv) {
+                    currentLoadingDiv.remove();
                 }
-                
-                console.log('Book cover downloaded successfully:', data.filename);
-            } else {
-                console.error('Failed to download book cover:', data.error);
-                // Show error message to user
-                if (imagePreviewContainer) {
-                    const errorDiv = document.createElement('div');
-                    errorDiv.className = 'error-message';
-                    errorDiv.textContent = 'Fehler beim Herunterladen des Buchcovers: ' + data.error;
-                    errorDiv.style.fontSize = '0.8em';
-                    errorDiv.style.padding = '5px';
-                    errorDiv.style.marginTop = '5px';
-                    imagePreviewContainer.appendChild(errorDiv);
-                    
-                    // Remove error message after 5 seconds
-                    setTimeout(() => errorDiv.remove(), 5000);
+
+                if (data.success) {
+                    coverPreviewContainer.innerHTML = '';
+
+                    const imagePreview = document.createElement('div');
+                    imagePreview.className = 'book-cover-preview';
+                    imagePreview.innerHTML = `
+                <div class="preview-item">
+                    <img src="/uploads/${data.filename}"
+                         alt="Buchcover" class="book-cover-thumbnail" style="max-width: 150px; border-radius: 4px;">
+                    <p class="book-cover-caption" style="font-size: 0.9em; color: #555;">Buchcover automatisch heruntergeladen</p>
+                    <input type="hidden" name="book_cover_image" value="${data.filename}">
+                    <button type="button" onclick="removeBookCover(this)"
+                            class="remove-book-cover-button btn btn-sm btn-danger">
+                        Entfernen
+                    </button>
+                </div>
+            `;
+
+                    coverPreviewContainer.appendChild(imagePreview);
+                    console.log('Book cover downloaded successfully:', data.filename);
+                } else {
+                    console.error('Failed to download book cover:', data.error);
+                    showCoverError(coverPreviewContainer, 'Fehler beim Herunterladen des Buchcovers: ' + data.error);
                 }
-            }
-        })
-        .catch(error => {
-            console.error('Error downloading book cover:', error);
-            // Remove loading indicator
-            const loadingDiv = imagePreviewContainer?.querySelector('.image-loading');
-            if (loadingDiv) {
-                loadingDiv.remove();
-            }
-            
-            // Show error message
-            if (imagePreviewContainer) {
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'error-message';
-                errorDiv.textContent = 'Netzwerkfehler beim Herunterladen des Buchcovers';
-                errorDiv.style.fontSize = '0.8em';
-                errorDiv.style.padding = '5px';
-                errorDiv.style.marginTop = '5px';
-                imagePreviewContainer.appendChild(errorDiv);
-                
-                // Remove error message after 5 seconds
-                setTimeout(() => errorDiv.remove(), 5000);
-            }
-        });
+            })
+            .catch(error => {
+                console.error('Error downloading book cover:', error);
+
+                const currentLoadingDiv = coverPreviewContainer.querySelector('.image-loading');
+                if (currentLoadingDiv) {
+                    currentLoadingDiv.remove();
+                }
+
+                showCoverError(coverPreviewContainer, 'Netzwerkfehler beim Herunterladen des Buchcovers');
+            });
     }
-    
-    // Function to remove downloaded book cover
+
+    function showCoverError(container, message) {
+        const errorDiv = document.createElement('div');
+        errorDiv.className = 'error-message';
+        errorDiv.textContent = message;
+        errorDiv.style.fontSize = '0.8em';
+        errorDiv.style.color = 'red';
+        errorDiv.style.padding = '5px';
+        errorDiv.style.marginTop = '5px';
+        container.appendChild(errorDiv);
+
+        setTimeout(() => errorDiv.remove(), 5000);
+    }
+
     function removeBookCover(button) {
         const previewItem = button.closest('.preview-item');
         if (previewItem) {
@@ -1772,7 +1760,6 @@
         }
     }
 
-    // Code validation functions
     function checkCodeUnique(code, excludeId, callback) {
         if (!code || code.trim() === '') {
             callback(true);
@@ -1857,28 +1844,25 @@
     function setupImagePreview() {
         const imageInput = document.getElementById('images');
         const previewContainer = document.getElementById('image-preview-container');
-        
+
         if (imageInput && previewContainer) {
             imageInput.addEventListener('change', function(e) {
                 previewContainer.innerHTML = '';
-                
+
                 const files = e.target.files;
-                
-                // Validate file types before preview
-                const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 
-                                    'video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/x-matroska', 
-                                    'video/webm', 'video/x-flv', 'video/mp4', 'video/3gpp'];
-                let hasInvalidFile = false;
-                
+
+                // Validate file types before preview (Strictly Images)
+                const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+
                 for (let i = 0; i < files.length; i++) {
                     if (!allowedTypes.includes(files[i].type)) {
-                        hasInvalidFile = true;
                         // Clear the file input to prevent submission
                         imageInput.value = '';
-                        previewContainer.innerHTML = '<div class="error-message">Fehler: Datei "' + files[i].name + '" hat ein nicht unterstütztes Format. Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>';
+                        previewContainer.innerHTML = '<div class="error-message">Fehler: Datei "' + files[i].name + '" hat ein nicht unterstütztes Format. Erlaubte Formate: JPG, JPEG, PNG, GIF</div>';
                         return; // Stop processing
                     }
                 }
+
                 for (let i = 0; i < files.length; i++) {
                     const file = files[i];
                     if (file.type.startsWith('image/')) {
@@ -1893,17 +1877,6 @@
                             previewContainer.appendChild(preview);
                         };
                         reader.readAsDataURL(file);
-                    } else if (file.type.startsWith('video/')) {
-                        const preview = document.createElement('div');
-                        preview.className = 'image-preview video-preview';
-                        preview.innerHTML = `
-                            <div class="video-placeholder">
-                                <div class="video-icon">🎥</div>
-                                <div class="video-name">${file.name}</div>
-                            </div>
-                            <button type="button" class="remove-image" onclick="removeImagePreview(this, ${i})">×</button>
-                        `;
-                        previewContainer.appendChild(preview);
                     }
                 }
             });