chore: bump version to v0.8.30

.release-version

@@ -1 +1 @@
-v0.8.22
+v0.8.30

Web/app.py

@@ -37,6 +37,7 @@ if _CURRENT_DIR not in sys.path:
 import Web.modules.database.user as us
 import Web.modules.database.items as it
 import Web.modules.database.ausleihung as au
+import Web.modules.database.termine as termin
 import Web.modules.log.audit_log as al
 import push_notifications as pn
 import Web.modules.inventarsystem.pdf_export as pdf_export 
@@ -3483,6 +3484,66 @@ def api_library_scan_action():
             client.close()
 
 
+@app.route('/api/scan_upload', methods=['POST'])
+def api_scan_upload():
+    """
+    Server-side barcode/QR decoding endpoint.
+    Accepts image upload and returns detected barcodes (fallback for client-side scanner).
+    """
+    if 'username' not in session:
+        return jsonify({'ok': False, 'message': 'Nicht angemeldet.'}), 401
+
+    try:
+        from pyzbar.pyzbar import decode
+        from PIL import Image
+        import io
+    except ImportError:
+        return jsonify({'ok': False, 'message': 'pyzbar library not installed on server.'}), 500
+
+    if 'image' not in request.files:
+        return jsonify({'ok': False, 'message': 'Keine Bilddatei bereitgestellt.'}), 400
+
+    file = request.files['image']
+    if file.filename == '':
+        return jsonify({'ok': False, 'message': 'Datei ist leer.'}), 400
+
+    try:
+        # Decode image
+        image = Image.open(io.BytesIO(file.read()))
+        image = image.convert('RGB')
+
+        # Detect barcodes using pyzbar
+        results = decode(image)
+
+        if not results:
+            return jsonify({'ok': False, 'message': 'Kein Barcode im Bild erkannt.'}), 400
+
+        # Return all detected barcodes, sorted by confidence (quality)
+        barcodes = [
+            {
+                'type': result.type,
+                'value': result.data.decode('utf-8'),
+                'rect': {
+                    'x': result.rect.left,
+                    'y': result.rect.top,
+                    'width': result.rect.width,
+                    'height': result.rect.height,
+                }
+            }
+            for result in results
+        ]
+
+        return jsonify({
+            'ok': True,
+            'barcodes': barcodes,
+            'message': f'{len(barcodes)} Barcode(s) erkannt.'
+        }), 200
+
+    except Exception as e:
+        app.logger.error(f"Error decoding barcode image: {e}")
+        return jsonify({'ok': False, 'message': f'Fehler beim Dekodieren: {str(e)}'}), 500
+
+
 @app.route('/api/item_detail/<item_id>')
 def api_item_detail(item_id):
     """
@@ -4817,59 +4878,73 @@ def get_user_appointments():
         db = client[MONGODB_DB]
         items_col = db['items']
 
-        # Use the established user-specific route logic for appointments.
-        bookings = au.get_ausleihung_by_user(
-            username,
-            status=['planned', 'active', 'completed'],
-            use_client_side_verification=True,
-        )
-        bookings = sorted(bookings, key=lambda b: b.get('Start') or datetime.datetime.min)
+        # Use the appointment collection for the user's appointments
+        appointments = termin.get_upcoming_for_user(username, limit=250)
 
         result = []
-        for booking in bookings:
-            start_dt = booking.get('Start')
-            if not start_dt:
+        import re as _re
+
+        def _date_iter(start_value: str, end_value: str):
+            try:
+                start_date = datetime.datetime.strptime(start_value, '%Y-%m-%d').date()
+                end_date = datetime.datetime.strptime(end_value, '%Y-%m-%d').date()
+            except Exception:
+                return []
+            if end_date < start_date:
+                end_date = start_date
+            cursor = start_date
+            days = []
+            while cursor <= end_date:
+                days.append(cursor.strftime('%Y-%m-%d'))
+                cursor += datetime.timedelta(days=1)
+            return days
+
+        for appt in appointments:
+            appt_id = str(appt.get('_id') or '')
+            if not appt_id:
                 continue
 
-            end_dt = booking.get('End')
-            if not end_dt and isinstance(start_dt, datetime.datetime):
-                end_dt = start_dt + datetime.timedelta(minutes=45)
-            elif not end_dt:
-                end_dt = start_dt
+            date_start = str(appt.get('date_start') or '')
+            date_end = str(appt.get('date_end') or date_start)
+            time_span = appt.get('time_span', []) or []
+            title = appt.get('note') or f"Termin von {appt.get('user') or ''}"
+            days_in_range = _date_iter(date_start, date_end) or ([date_start] if date_start else [])
 
-            item_id = str(booking.get('Item') or '')
-            item_doc = None
-            if item_id:
-                try:
-                    item_doc = items_col.find_one({'_id': ObjectId(item_id)})
-                except Exception:
-                    item_doc = None
+            span_entries = []
+            for entry in time_span:
+                s = str(entry or '').strip()
+                if not s:
+                    continue
+                m_date = _re.match(r"^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})-(\d{2}:\d{2})$", s)
+                if m_date:
+                    span_entries.append((m_date.group(1), m_date.group(2), m_date.group(3)))
+                    continue
+                m = _re.match(r"^(\d{2}:\d{2})-(\d{2}:\d{2})$", s)
+                if m:
+                    for day in days_in_range:
+                        span_entries.append((day, m.group(1), m.group(2)))
 
-            item_name = item_id or 'Termin'
-            if item_doc:
-                item_name = item_doc.get('Name') or item_doc.get('Code_4') or item_name
+            # If the stored span is already day-specific, use it as-is.
+            # If it was generic, we duplicated it to each day in the range above.
+            if not span_entries and days_in_range:
+                # Fallback: create a simple all-day marker for each date so the appointment is visible.
+                for day in days_in_range:
+                    span_entries.append((day, '08:00', '16:45'))
 
-            period = booking.get('Period')
-            title = item_name
-            if period:
-                title = f"{title} - {period}. Std"
-
-            status = booking.get('VerifiedStatus') or booking.get('Status') or 'unknown'
-            if status == 'active':
-                status = 'current'
-            result.append({
-                'id': str(booking.get('_id')),
-                'title': title,
-                'start': start_dt.isoformat() if isinstance(start_dt, datetime.datetime) else str(start_dt),
-                'end': end_dt.isoformat() if isinstance(end_dt, datetime.datetime) else str(end_dt),
-                'status': status,
-                'itemId': item_id,
-                'userName': str(booking.get('User') or ''),
-                'notes': str(booking.get('Notes') or ''),
-                'period': period,
-                'isCurrentUser': True,
-                'itemBorrower': '',
-            })
+            for day, start_time, end_time in span_entries:
+                result.append({
+                    'id': f"{appt_id}-{day}-{start_time}",
+                    'title': title,
+                    'start': f"{day}T{start_time}",
+                    'end': f"{day}T{end_time}",
+                    'status': 'planned',
+                    'itemId': appt_id,
+                    'userName': str(appt.get('user') or ''),
+                    'notes': str(appt.get('note') or ''),
+                    'period': None,
+                    'isCurrentUser': True,
+                    'itemBorrower': '',
+                })
 
         return jsonify({'ok': True, 'bookings': result})
     except Exception as e:

Web/modules/terminplaner/blueprint.py

@@ -47,6 +47,28 @@ def client(appointment_id):
     if not available:
         return _appointment_not_found_response()
 
+    current_user = str(session.get('username', '') or '').strip()
+    appointment_item = termin.get_item(appointment_id) or {}
+    appointment_owner = str(appointment_item.get('user', '') or '').strip()
+    can_view_booking_names = False
+    if current_user:
+        try:
+            can_view_booking_names = bool(us.check_admin(current_user) or current_user == appointment_owner)
+        except Exception:
+            can_view_booking_names = bool(current_user == appointment_owner)
+
+    available_for_view = dict(available)
+    if not can_view_booking_names:
+        sanitized_bookings = []
+        for booking in (available.get('slots_booked') or []):
+            if isinstance(booking, dict):
+                sanitized_bookings.append({'start': booking.get('start', '')})
+            elif isinstance(booking, (list, tuple)) and len(booking) >= 1:
+                sanitized_bookings.append({'start': booking[0]})
+            else:
+                sanitized_bookings.append({'start': ''})
+        available_for_view['slots_booked'] = sanitized_bookings
+
     if request.method == 'POST':
         start_daytime = request.form.get('start_day_time')
         username = request.form.get('client_name')
@@ -55,22 +77,50 @@ def client(appointment_id):
             return render_template(
                 'termin_client.html',
                 appointment_id=appointment_id,
-                available=available,
+                available=available_for_view,
                 current_user=session.get('username', ''),
+                tenant_id=_current_tenant_id(),
+                can_view_booking_names=can_view_booking_names,
             )
 
         if appointment_service.book_slot(appointment_id, start_daytime, username):
-            flash('Der Termin wurde gespeichert.', 'success')
-            return redirect(url_for('terminplaner.client', appointment_id=appointment_id))
+            return redirect(
+                url_for(
+                    'terminplaner.client_success',
+                    appointment_id=appointment_id,
+                    tenant=_current_tenant_id() or None,
+                    start=start_daytime,
+                    name=username,
+                )
+            )
 
         flash('Der Termin konnte nicht gespeichert werden.', 'error')
 
     return render_template(
         'termin_client.html',
         appointment_id=appointment_id,
-        available=available,
+        available=available_for_view,
         current_user=session.get('username', ''),
         tenant_id=_current_tenant_id(),
+        can_view_booking_names=can_view_booking_names,
+    )
+
+
+@appoint_bp.route('/client/success/<appointment_id>', methods=['GET'])
+def client_success(appointment_id):
+    guard = _require_module_enabled()
+    if guard:
+        return guard
+
+    slot_start = str(request.args.get('start', '') or '').strip()
+    client_name = str(request.args.get('name', '') or '').strip()
+
+    return render_template(
+        'termin_client_success.html',
+        appointment_id=appointment_id,
+        slot_start=slot_start,
+        client_name=client_name,
+        tenant_id=_current_tenant_id(),
     )
 
 

Web/requirements.txt

@@ -15,3 +15,4 @@ openpyxl
 cryptography>=42.0.0
 pywebpush
 py-vapid>=1.9.0
+pyzbar

Web/static/js/scanner.js

@@ -0,0 +1,328 @@
+/**
+ * Hybrid Barcode Scanner
+ * Supports: Real-time camera scanning (ZXing.js), image upload fallback (server-side pyzbar),
+ *           and USB/keyboard scanner emulation.
+ */
+
+class HybridScanner {
+  constructor(options = {}) {
+    this.options = {
+      videoId: options.videoId || 'scanner-video',
+      canvasId: options.canvasId || 'scanner-canvas',
+      formats: options.formats || ['QR_CODE', 'CODE_128', 'EAN_13', 'ISBN', 'CODE_39', 'UPC_A'],
+      fps: options.fps || 10,
+      onSuccess: options.onSuccess || (() => {}),
+      onError: options.onError || (() => {}),
+      facingMode: options.facingMode || 'environment', // 'environment' for rear, 'user' for front
+    };
+
+    this.state = {
+      isRunning: false,
+      stream: null,
+      reader: null,
+      canvas: null,
+      videoElement: null,
+      zxingReady: false,
+      lastScanTime: 0,
+      scanDebounceMs: 300, // Prevent rapid duplicate scans
+    };
+
+    this.keyboardInputBuffer = '';
+    this.keyboardInputTimeout = null;
+  }
+
+  /**
+   * Initialize ZXing library from CDN
+   */
+  async initZXing() {
+    if (this.state.zxingReady) {
+      return true;
+    }
+
+    return new Promise((resolve) => {
+      // Load ZXing library from CDN
+      if (typeof ZXing !== 'undefined') {
+        this.state.zxingReady = true;
+        resolve(true);
+        return;
+      }
+
+      // Use fallback URL for better mobile compatibility
+      let scriptUrl = 'https://unpkg.com/@zxing/library@latest/umd/index.min.js';
+      
+      // Check if already loading
+      const existingScript = document.querySelector(`script[src="${scriptUrl}"]`);
+      if (existingScript) {
+        existingScript.addEventListener('load', () => {
+          this.state.zxingReady = typeof ZXing !== 'undefined';
+          resolve(this.state.zxingReady);
+        }, { once: true });
+        existingScript.addEventListener('error', () => {
+          console.error('Failed to load ZXing library');
+          resolve(false);
+        }, { once: true });
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = scriptUrl;
+      script.async = true;
+      script.onload = () => {
+        this.state.zxingReady = typeof ZXing !== 'undefined';
+        resolve(this.state.zxingReady);
+      };
+      script.onerror = () => {
+        console.error('Failed to load ZXing library');
+        resolve(false);
+      };
+      document.head.appendChild(script);
+    });
+  }
+
+  /**
+   * Start real-time barcode scanning via camera
+   */
+  async start() {
+    if (this.state.isRunning) {
+      return;
+    }
+
+    try {
+      // Ensure ZXing is loaded
+      const zxingReady = await this.initZXing();
+      if (!zxingReady) {
+        this.options.onError('ZXing library failed to load. Please use image upload fallback.');
+        return;
+      }
+
+      // Get DOM elements
+      this.state.videoElement = document.getElementById(this.options.videoId);
+      this.state.canvas = document.getElementById(this.options.canvasId);
+
+      if (!this.state.videoElement || !this.state.canvas) {
+        this.options.onError('Scanner video or canvas element not found.');
+        return;
+      }
+
+      // Request camera access
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          facingMode: this.options.facingMode,
+          width: { ideal: 1280 },
+          height: { ideal: 720 },
+        },
+        audio: false,
+      });
+
+      this.state.stream = stream;
+      this.state.videoElement.srcObject = stream;
+      
+      // Make video element visible (ensure it's not hidden by display: none)
+      this.state.videoElement.style.display = 'block';
+
+      // Initialize ZXing reader
+      const hints = new Map();
+      hints.set(ZXing.DecodeHintType.POSSIBLE_FORMATS, this.options.formats);
+      hints.set(ZXing.DecodeHintType.TRY_HARDER, true);
+      this.state.reader = new ZXing.BrowserMultiFormatReader(hints);
+
+      this.state.isRunning = true;
+
+      // Start scanning loop
+      this.scanLoop();
+
+      // Setup keyboard input fallback for USB scanners
+      this.setupKeyboardInput();
+    } catch (err) {
+      this.options.onError(`Camera error: ${err.message || err}`);
+    }
+  }
+
+  /**
+   * Stop barcode scanning
+   */
+  stop() {
+    if (!this.state.isRunning) {
+      return;
+    }
+
+    this.state.isRunning = false;
+
+    if (this.state.stream) {
+      this.state.stream.getTracks().forEach((track) => track.stop());
+      this.state.stream = null;
+    }
+
+    if (this.state.videoElement) {
+      this.state.videoElement.srcObject = null;
+      this.state.videoElement.style.display = 'none';
+    }
+
+    this.removeKeyboardInput();
+  }
+
+  /**
+   * Main scanning loop for real-time frame processing
+   */
+  scanLoop() {
+    if (!this.state.isRunning) {
+      return;
+    }
+
+    const canvas = this.state.canvas;
+    const video = this.state.videoElement;
+
+    if (!video || !canvas) {
+      setTimeout(() => this.scanLoop(), 100);
+      return;
+    }
+
+    if (video.readyState === video.HAVE_ENOUGH_DATA) {
+      try {
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        
+        if (canvas.width === 0 || canvas.height === 0) {
+          setTimeout(() => this.scanLoop(), 100);
+          return;
+        }
+
+        const context = canvas.getContext('2d');
+
+        if (context) {
+          context.drawImage(video, 0, 0);
+
+          try {
+            const luminanceSource = new ZXing.HTMLCanvasElementLuminanceSource(canvas);
+            const binaryBitmap = new ZXing.BinaryBitmap(new ZXing.HybridBinarizer(luminanceSource));
+
+            try {
+              const result = this.state.reader.decodeFromBitmap(binaryBitmap);
+              this.handleScanResult(result.text);
+            } catch (e) {
+              // No barcode found in frame; continue scanning
+            }
+          } catch (err) {
+            // Silently ignore canvas errors
+          }
+        }
+      } catch (err) {
+        console.warn('Scan loop error:', err);
+      }
+    }
+
+    // Throttle scan loop based on FPS setting
+    setTimeout(() => this.scanLoop(), 1000 / this.options.fps);
+  }
+
+  /**
+   * Handle successful barcode scan with debouncing
+   */
+  handleScanResult(scannedText) {
+    const now = Date.now();
+    if (now - this.state.lastScanTime < this.state.scanDebounceMs) {
+      return; // Ignore rapid duplicates
+    }
+
+    this.state.lastScanTime = now;
+    this.options.onSuccess(scannedText.trim());
+  }
+
+  /**
+   * Setup keyboard input listener for USB scanner emulation
+   * Most USB scanners emulate keyboard input (barcode followed by Enter)
+   */
+  setupKeyboardInput() {
+    this.keyboardListener = (event) => {
+      // Allow only alphanumeric, dash, colon (common in barcodes)
+      if (/^[a-zA-Z0-9:_\-]$/.test(event.key)) {
+        event.preventDefault();
+        this.keyboardInputBuffer += event.key;
+
+        // Reset timeout for multi-part barcodes
+        if (this.keyboardInputTimeout) {
+          clearTimeout(this.keyboardInputTimeout);
+        }
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        if (this.keyboardInputBuffer.length > 0) {
+          this.handleScanResult(this.keyboardInputBuffer);
+          this.keyboardInputBuffer = '';
+        }
+      } else if (event.key === 'Escape') {
+        this.keyboardInputBuffer = '';
+        this.stop();
+      }
+
+      // Auto-trigger if buffer looks complete (common barcode lengths)
+      if ([8, 12, 13, 17].includes(this.keyboardInputBuffer.length)) {
+        this.keyboardInputTimeout = setTimeout(() => {
+          if (this.keyboardInputBuffer.length > 0) {
+            this.handleScanResult(this.keyboardInputBuffer);
+            this.keyboardInputBuffer = '';
+          }
+        }, 200);
+      }
+    };
+
+    document.addEventListener('keydown', this.keyboardListener);
+  }
+
+  /**
+   * Remove keyboard input listener
+   */
+  removeKeyboardInput() {
+    if (this.keyboardListener) {
+      document.removeEventListener('keydown', this.keyboardListener);
+      this.keyboardListener = null;
+    }
+    this.keyboardInputBuffer = '';
+  }
+
+  /**
+   * Upload image for server-side decoding (fallback)
+   * Requires /api/scan_upload endpoint
+   */
+  static async uploadImageForDecoding(file, onSuccess, onError) {
+    try {
+      const formData = new FormData();
+      formData.append('image', file);
+
+      const response = await fetch('/api/scan_upload', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await response.json();
+
+      if (data.ok && data.barcodes && data.barcodes.length > 0) {
+        // Return first detected barcode (highest confidence)
+        onSuccess(data.barcodes[0].value);
+      } else {
+        onError(data.message || 'No barcode detected in image.');
+      }
+    } catch (err) {
+      onError(`Upload error: ${err.message}`);
+    }
+  }
+
+  /**
+   * Toggle camera (front/rear on mobile)
+   */
+  toggleCamera() {
+    if (this.options.facingMode === 'environment') {
+      this.options.facingMode = 'user';
+    } else {
+      this.options.facingMode = 'environment';
+    }
+
+    // Restart scanning with new camera
+    this.stop();
+    this.start();
+  }
+}
+
+// Export for use in templates
+if (typeof window !== 'undefined') {
+  window.HybridScanner = HybridScanner;
+}

Web/templates/base.html

@@ -1392,28 +1392,7 @@
         {% endif %}
 
     {% else %}
-    <nav class="navbar navbar-expand-lg navbar-dark" id="loginNavbar">
-        <div class="container-fluid">
-                    <a class="navbar-brand py-0" href="{{ url_for('home') }}">
-                        {% set school_logo_thumb = school_info.get('logo_thumb') if school_info else '' %}
-                        {% set school_logo_path = school_info.get('logo_path') if school_info else '' %}
-                        {% if school_logo_thumb or school_logo_path %}
-                            {% if school_logo_thumb %}
-                                <img src="{{ url_for('uploaded_file', filename=school_logo_thumb) }}" alt="{{ school_info.name or 'Schullogo' }}" class="invario-logo">
-                            {% else %}
-                                <img src="{{ url_for('uploaded_file', filename=school_logo_path) }}" alt="{{ school_info.name or 'Schullogo' }}" class="invario-logo">
-                            {% endif %}
-                        {% else %}
-                            <img src="{{ url_for('static', filename='img/invario-logo.png') }}" alt="Invario" class="invario-logo">
-                        {% endif %}
-                    </a>
-            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                <li class="nav-item">
-                    <a class="nav-link" href="{{ url_for('impressum') }}">Impressum</a>
-                </li>
-            </ul>
-        </div>
-    </nav>
+    <!-- No navbar for anonymous users on public pages. -->
     {% endif %}
     <div class="container">
         {% with messages = get_flashed_messages(with_categories=true) %}
@@ -1427,6 +1406,11 @@
         {% endwith %}
         {% block content %}{% endblock %}
     </div>
+    {% if 'username' not in session %}
+    <div class="guest-impressum-footer">
+        <a href="{{ url_for('impressum') }}">Impressum</a>
+    </div>
+    {% endif %}
     <!-- Cookie consent banner -->
     <style>
         #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(33,37,41,.98); color: #fff; padding: 14px 16px; display: none; z-index: 2000; box-shadow: 0 -2px 8px rgba(0,0,0,.25); }
@@ -1560,6 +1544,29 @@
             margin-bottom: 2px;
         }
 
+        .guest-impressum-footer {
+            position: fixed;
+            left: 0;
+            right: 0;
+            bottom: 10px;
+            text-align: center;
+            z-index: 1200;
+            pointer-events: none;
+        }
+
+        .guest-impressum-footer a {
+            pointer-events: auto;
+            font-size: 0.76rem;
+            color: rgba(15, 23, 42, 0.72);
+            text-decoration: none;
+            border-bottom: 1px solid rgba(15, 23, 42, 0.28);
+        }
+
+        .guest-impressum-footer a:hover {
+            color: rgba(15, 23, 42, 0.92);
+            border-bottom-color: rgba(15, 23, 42, 0.52);
+        }
+
         .notification-toast.show {
             display: block;
         }

Web/templates/library.html

@@ -67,8 +67,22 @@
 
     <!-- Scanner Panel -->
     <div id="qrContainer" class="qr-container" style="display: none;">
-        <div id="qr-reader" style="width: auto; height: 300px;"></div>
-        <span id="qr-result" style="display: none;"></span>
+        <div class="scanner-header">
+            <h3>Barcode/QR-Code Scanner</h3>
+            <div class="scanner-controls">
+                <button type="button" id="cameraToggle" class="scanner-button" title="Kamera wechseln">📷 Kamera</button>
+                <label for="uploadScanImage" class="scanner-button" title="Bild hochladen zum Dekodieren">📤 Upload</label>
+                <input type="file" id="uploadScanImage" accept="image/*" style="display: none;">
+            </div>
+        </div>
+        <div class="scanner-video-wrapper">
+            <video id="qr-reader" playsinline style="width: 100%; max-width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px;"></video>
+            <canvas id="scanner-canvas" style="display: none;"></canvas>
+        </div>
+        <div id="scanMessage" class="scanner-message" style="margin-top: 10px; text-align: center; font-weight: bold; color: #666;"></div>
+        <p style="font-size: 0.85em; color: #999; margin-top: 10px; margin-bottom: 0; text-align: center;">
+            💡 Hinweis: Scan-Ergebnis wird automatisch in das Feld oben übernommen. USB-Scanner werden als Tastatureingabe erkannt.
+        </p>
     </div>
 
     <!-- Table Header (only in table mode) -->
@@ -206,7 +220,8 @@
     </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js"></script>
+<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
+<script src="/static/js/scanner.js"></script>
 <script>
 // View mode persistence
 const LIBRARY_VIEW_MODE_KEY = 'inventarLibraryViewMode';
@@ -631,8 +646,9 @@ document.getElementById('favoriteToggle').addEventListener('click', function() {
     // TODO: Implement favorites filtering
 });
 
-// Scanner toggle
+// Scanner instance (hybrid: real-time + upload + keyboard)
 let scanner = null;
+
 document.getElementById('scannerBtn').addEventListener('click', function(e) {
     e.stopPropagation();
     const container = document.getElementById('qrContainer');
@@ -640,7 +656,10 @@ document.getElementById('scannerBtn').addEventListener('click', function(e) {
     
     if (isOpen) {
         container.style.display = 'none';
-        if (scanner) scanner.clear();
+        if (scanner) {
+            scanner.stop();
+            scanner = null;
+        }
         this.classList.remove('open');
         this.setAttribute('aria-expanded', 'false');
     } else {
@@ -649,17 +668,66 @@ document.getElementById('scannerBtn').addEventListener('click', function(e) {
         this.setAttribute('aria-expanded', 'true');
         
         if (!scanner) {
-            scanner = new Html5Qrcode('qr-reader');
-            scanner.start(
-                { facingMode: "environment" },
-                { fps: 10, qrbox: 250 },
-                onScanSuccess,
-                onScanError
-            );
+            initScanner();
         }
     }
 });
 
+function initScanner() {
+    scanner = new HybridScanner({
+        videoId: 'qr-reader',
+        canvasId: 'scanner-canvas',
+        formats: ['QR_CODE', 'CODE_128', 'EAN_13', 'ISBN', 'CODE_39', 'UPC_A', 'EAN_8'],
+        fps: 10,
+        facingMode: 'environment',
+        onSuccess: function(decodedText) {
+            const studentId = decodedText.trim();
+            document.getElementById('studentIdInput').value = studentId;
+            document.getElementById('scanMessage').textContent = '✓ Erkannt: ' + studentId;
+            document.getElementById('scanMessage').style.color = '#4CAF50';
+        },
+        onError: function(error) {
+            document.getElementById('scanMessage').textContent = '✗ ' + error;
+            document.getElementById('scanMessage').style.color = '#f44336';
+        }
+    });
+
+    scanner.start();
+}
+
+// Camera toggle
+document.getElementById('cameraToggle')?.addEventListener('click', function() {
+    if (scanner) {
+        scanner.toggleCamera();
+        this.textContent = scanner.options.facingMode === 'user' ? '📷 Rückkamera' : '🤳 Frontkamera';
+    }
+});
+
+// Image upload fallback
+document.getElementById('uploadScanImage')?.addEventListener('change', function(e) {
+    const file = e.target.files[0];
+    if (file) {
+        const messageEl = document.getElementById('scanMessage');
+        messageEl.textContent = 'Wird dekodiert...';
+        messageEl.style.color = '#2196F3';
+        
+        HybridScanner.uploadImageForDecoding(
+            file,
+            (decodedText) => {
+                document.getElementById('studentIdInput').value = decodedText;
+                messageEl.textContent = '✓ Erkannt (Upload): ' + decodedText;
+                messageEl.style.color = '#4CAF50';
+                e.target.value = ''; // Reset file input
+            },
+            (error) => {
+                messageEl.textContent = '✗ ' + error;
+                messageEl.style.color = '#f44336';
+                e.target.value = '';
+            }
+        );
+    }
+});
+
 function onScanSuccess(decodedText, decodedResult) {
     const studentId = decodedText.trim();
     document.getElementById('studentIdInput').value = studentId;
@@ -729,6 +797,9 @@ function onScanError(error) {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         width: 100%;
+        box-sizing: border-box;
+        margin: 0 -12px;
+        padding: 0 12px;
     }
     .library-table-wrapper .table-row {
         min-width: 720px; /* allow table to have intrinsic width and be scrolled */
@@ -737,5 +808,129 @@ function onScanError(error) {
         display: block; /* keep rows stacked but allow horizontal scroll */
     }
 }
+
+/* Hybrid Scanner Styles */
+.qr-container {
+    background: #f5f5f5;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 12px;
+    margin: 12px 0;
+    overflow-x: hidden;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.scanner-header {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.scanner-header h3 {
+    margin: 0;
+    color: #333;
+    font-size: 1em;
+    flex: 0 0 auto;
+    white-space: nowrap;
+}
+
+.scanner-controls {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.scanner-button {
+    background: #2196F3;
+    color: white;
+    border: none;
+    padding: 6px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.85em;
+    white-space: nowrap;
+    flex: 0 1 auto;
+    transition: background-color 0.2s;
+}
+
+.scanner-button:hover {
+    background: #1976D2;
+}
+
+.scanner-button:active {
+    background: #1565C0;
+}
+
+.scanner-video-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 12px 0;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+#qr-reader {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    border: 2px solid #2196F3;
+    border-radius: 8px;
+    display: block;
+}
+
+.scanner-message {
+    min-height: 20px;
+    font-size: 0.9em;
+    text-align: center;
+    word-wrap: break-word;
+}
+
+@media (max-width: 600px) {
+    .qr-container {
+        padding: 10px;
+        margin: 10px 0;
+    }
+
+    .scanner-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 8px;
+    }
+
+    .scanner-header h3 {
+        width: 100%;
+        font-size: 0.95em;
+    }
+
+    .scanner-controls {
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    .scanner-button {
+        flex: 1 1 auto;
+        padding: 8px 6px;
+        font-size: 0.8em;
+    }
+
+    #qr-reader {
+        max-width: 100%;
+        border-radius: 6px;
+    }
+
+    .scanner-message {
+        font-size: 0.85em;
+    }
+}
 </style>
 {% endblock %}

Web/templates/library_table.html

@@ -459,7 +459,10 @@
             Hinweis: Im Schnellmodus zuerst den Schülerausweis scannen, danach den Buch-/Mediencode.
         </div>
         <div id="scanReaderWrap" class="library-scan-reader-wrap">
-            <div id="libraryQrReader" class="library-scan-reader"></div>
+            <div id="libraryQrReader" class="library-scan-reader">
+                <video id="libraryQrReaderVideo" playsinline style="width: 100%; border-radius: 8px;"></video>
+                <canvas id="libraryQrReaderCanvas" style="display: none;"></canvas>
+            </div>
         </div>
     </div>
     <div id="filterPanel" class="library-filter-panel">
@@ -547,7 +550,8 @@
     </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js"></script>
+<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
+<script src="/static/js/scanner.js"></script>
 <script>
     // State
     let libraryItems = [];
@@ -1002,54 +1006,8 @@
     }
 
     async function ensureScannerLibraryLoaded() {
-        if (typeof Html5QrcodeScanner !== 'undefined') {
-            return true;
-        }
-
-        const sources = [
-            'https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js'
-        ];
-
-        for (const src of sources) {
-            try {
-                await new Promise((resolve, reject) => {
-                    const existing = document.querySelector(`script[data-scanner-src="${src}"]`);
-                    if (existing) {
-                        const onLoad = () => resolve();
-                        const onError = () => reject(new Error('Script load failed'));
-                        existing.addEventListener('load', onLoad, { once: true });
-                        existing.addEventListener('error', onError, { once: true });
-                        setTimeout(() => {
-                            existing.removeEventListener('load', onLoad);
-                            existing.removeEventListener('error', onError);
-                            if (typeof Html5QrcodeScanner !== 'undefined') {
-                                resolve();
-                            } else {
-                                reject(new Error('Script not available'));
-                            }
-                        }, 1200);
-                        return;
-                    }
-
-                    const script = document.createElement('script');
-                    script.src = src;
-                    script.async = true;
-                    script.defer = true;
-                    script.dataset.scannerSrc = src;
-                    script.onload = () => resolve();
-                    script.onerror = () => reject(new Error('Script load failed'));
-                    document.head.appendChild(script);
-                });
-
-                if (typeof Html5QrcodeScanner !== 'undefined') {
-                    return true;
-                }
-            } catch (err) {
-                console.warn('Scanner library load failed from', src, err);
-            }
-        }
-
-        return false;
+        // HybridScanner is loaded globally via script tag
+        return typeof HybridScanner !== 'undefined';
     }
 
     async function startScanner() {
@@ -1066,37 +1024,17 @@
         readerWrap.style.display = 'block';
 
         try {
-            const formats = [];
-            if (typeof Html5QrcodeSupportedFormats !== 'undefined') {
-                formats.push(
-                    Html5QrcodeSupportedFormats.QR_CODE,
-                    Html5QrcodeSupportedFormats.EAN_13,
-                    Html5QrcodeSupportedFormats.EAN_8,
-                    Html5QrcodeSupportedFormats.CODE_128,
-                    Html5QrcodeSupportedFormats.CODE_39,
-                    Html5QrcodeSupportedFormats.UPC_A,
-                    Html5QrcodeSupportedFormats.UPC_E,
-                    Html5QrcodeSupportedFormats.ITF,
-                    Html5QrcodeSupportedFormats.CODABAR
-                );
-            }
-
-            const scannerConfig = {
+            scannerInstance = scannerInstance || new HybridScanner({
+                videoId: 'libraryQrReaderVideo',
+                canvasId: 'libraryQrReaderCanvas',
+                formats: ['QR_CODE', 'EAN_13', 'EAN_8', 'CODE_128', 'CODE_39', 'UPC_A', 'UPC_E', 'ITF', 'CODABAR'],
                 fps: 10,
-                rememberLastUsedCamera: true,
-                aspectRatio: 1.333334
-            };
-            if (formats.length > 0) {
-                scannerConfig.formatsToSupport = formats;
-            }
+                facingMode: 'environment',
+                onSuccess: handleScanSuccess,
+                onError: handleScanError
+            });
 
-            scannerInstance = scannerInstance || new Html5QrcodeScanner(
-                'libraryQrReader',
-                scannerConfig,
-                false
-            );
-
-            scannerInstance.render(handleScanSuccess, handleScanError);
+            scannerInstance.start();
             scannerRunning = true;
             toggleBtn.textContent = 'Scanner stoppen';
             setScanStatus('Scanner aktiv. Jetzt Code scannen.', 'warn');
@@ -1113,7 +1051,7 @@
         const readerWrap = document.getElementById('scanReaderWrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
         try {
-            await scannerInstance.clear();
+            scannerInstance.stop();
         } catch (err) {
             console.error('Scanner stop failed:', err);
         }

Web/templates/main.html

@@ -413,7 +413,10 @@
         </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 id="qr-reader" style="display: none;">
+                <video id="qr-reader-video" playsinline style="width: 100%; max-width: 500px; border-radius: 8px;"></video>
+                <canvas id="qr-reader-canvas" style="display: none;"></canvas>
+            </div>
         </div>
         <div id="table-view-header" class="table-view-header" aria-hidden="true">
             <span>Name</span>
@@ -526,7 +529,8 @@
     window.isDebug = false; // Set to true only for development environment
 </script>
 
-<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>
+<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
+<script src="/static/js/scanner.js"></script>
 <script>
     // Global state
     const highlightItemId = (window.serverVars && window.serverVars.highlightItemId && window.serverVars.highlightItemId !== 'null')
@@ -539,7 +543,7 @@
     document.addEventListener('DOMContentLoaded', function() {
         const scanButton = document.getElementById('scanButton');
         const qrReader = document.getElementById('qr-reader');
-        let html5QrcodeScanner = null;
+        let hybridScanner = null;
 
         if (!scanButton || !qrReader) return;
 
@@ -553,28 +557,36 @@
             if (qrReader.style.display !== 'block') {
                 qrReader.style.display = 'block';
                 
-                html5QrcodeScanner = new Html5QrcodeScanner(
-                    'qr-reader', { fps: 10, qrbox: 250 }
-                );
-                
-                html5QrcodeScanner.render((decodedText) => {
-                    html5QrcodeScanner.clear();
-                    qrReader.style.display = 'none';
-                    
-                    // Put scanned code into the search box and trigger search
-                    const searchInput = document.getElementById('code-search');
-                    if (searchInput) {
-                        searchInput.value = decodedText;
-                        searchByCode();
-                    }
+                hybridScanner = new HybridScanner({
+                    videoId: 'qr-reader-video',
+                    canvasId: 'qr-reader-canvas',
+                    formats: ['QR_CODE', 'CODE_128', 'EAN_13', 'EAN_8', 'CODE_39'],
+                    fps: 10,
+                    facingMode: 'environment',
+                    onSuccess: function(decodedText) {
+                        hybridScanner.stop();
+                        qrReader.style.display = 'none';
+                        
+                        // Put scanned code into the search box and trigger search
+                        const searchInput = document.getElementById('code-search');
+                        if (searchInput) {
+                            searchInput.value = decodedText;
+                            searchByCode();
+                        }
 
-                    setScannerUi(false);
+                        setScannerUi(false);
+                    },
+                    onError: function(error) {
+                        console.error('Scanner error:', error);
+                    }
                 });
 
+                hybridScanner.start();
                 setScannerUi(true);
             } else {
-                if (html5QrcodeScanner) {
-                    html5QrcodeScanner.clear();
+                if (hybridScanner) {
+                    hybridScanner.stop();
+                    hybridScanner = null;
                 }
                 qrReader.style.display = 'none';
                 setScannerUi(false);

Web/templates/main_admin.html

@@ -2435,7 +2435,10 @@ document.addEventListener('DOMContentLoaded', ()=>{
         </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 id="qr-reader" style="display: none;">
+                <video id="qr-reader-video" playsinline style="width: 100%; max-width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px;"></video>
+                <canvas id="qr-reader-canvas" style="display: none;"></canvas>
+            </div>
         </div>
 
         <div id="table-view-header" class="table-view-header" aria-hidden="true">
@@ -2729,7 +2732,8 @@ document.addEventListener('DOMContentLoaded', ()=>{
     
     window.isDebug = false; // Set to true only for development environment
 </script>
-<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>
+<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
+<script src="/static/js/scanner.js"></script>
 <script>
     // Function to check if a file is a video
     function isVideoFile(filename) {
@@ -2739,7 +2743,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
     }
 
     // Initialize QR Code scanner and global variables
-    let html5QrcodeScanner = null;
+    let hybridScanner = null;
     let codeSearchTerm = '';
     let descSearchIds = null; // Set of matching IDs or null when disabled
     let currentUsername = '';
@@ -2783,33 +2787,37 @@ document.addEventListener('DOMContentLoaded', ()=>{
         if (qrReader.style.display === 'none') {
             qrReader.style.display = 'block';
             
-            html5QrcodeScanner = new Html5QrcodeScanner(
-                "qr-reader", { 
-                    fps: 10, 
-                    qrbox: 250,
-                    rememberLastUsedCamera: true
-                }
-            );
-            
-            html5QrcodeScanner.render((decodedText) => {
-                html5QrcodeScanner.clear();
-                qrReader.style.display = 'none';
-                
-                // Instead of navigating to the URL, put the scanned code in the search box
-                const searchInput = document.getElementById('code-search');
-                if (searchInput) {
-                    searchInput.value = decodedText;
-                    // Trigger search automatically
-                    searchByCode();
-                }
+            hybridScanner = new HybridScanner({
+                videoId: 'qr-reader-video',
+                canvasId: 'qr-reader-canvas',
+                formats: ['QR_CODE', 'CODE_128', 'EAN_13', 'EAN_8', 'CODE_39', 'UPC_A'],
+                fps: 10,
+                facingMode: 'environment',
+                onSuccess: function(decodedText) {
+                    hybridScanner.stop();
+                    qrReader.style.display = 'none';
+                    
+                    // Put the scanned code in the search box
+                    const searchInput = document.getElementById('code-search');
+                    if (searchInput) {
+                        searchInput.value = decodedText;
+                        // Trigger search automatically
+                        searchByCode();
+                    }
 
-                setScannerUi(false);
+                    setScannerUi(false);
+                },
+                onError: function(error) {
+                    console.error('Scanner error:', error);
+                }
             });
 
+            hybridScanner.start();
             setScannerUi(true);
         } else {
-            if (html5QrcodeScanner) {
-                html5QrcodeScanner.clear();
+            if (hybridScanner) {
+                hybridScanner.stop();
+                hybridScanner = null;
             }
             qrReader.style.display = 'none';
             setScannerUi(false);
@@ -2825,8 +2833,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
         }
 
         if (qrReader.style.display !== 'none') {
-            if (html5QrcodeScanner) {
-                html5QrcodeScanner.clear();
+            if (hybridScanner) {
+                hybridScanner.stop();
+                hybridScanner = null;
             }
             qrReader.style.display = 'none';
             scanEditBtn.textContent = 'Barcode scannen';
@@ -2835,18 +2844,25 @@ document.addEventListener('DOMContentLoaded', ()=>{
 
         qrReader.style.display = 'block';
         scanEditBtn.textContent = 'Scanner schließen';
-        html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', { 
-            fps: 10, 
-            qrbox: 250,
-            rememberLastUsedCamera: true
-        });
-        html5QrcodeScanner.render((decodedText) => {
-            html5QrcodeScanner.clear();
-            qrReader.style.display = 'none';
-            editCodeInput.value = String(decodedText || '').trim();
-            validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
-            scanEditBtn.textContent = 'Barcode scannen';
+        hybridScanner = new HybridScanner({
+            videoId: 'qr-reader-video',
+            canvasId: 'qr-reader-canvas',
+            formats: ['CODE_128', 'CODE_39', 'QR_CODE'],
+            fps: 10,
+            facingMode: 'environment',
+            onSuccess: function(decodedText) {
+                hybridScanner.stop();
+                qrReader.style.display = 'none';
+                editCodeInput.value = String(decodedText || '').trim();
+                validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
+                scanEditBtn.textContent = 'Barcode scannen';
+            },
+            onError: function(error) {
+                console.error('Scanner error:', error);
+            }
         });
+        
+        hybridScanner.start();
     }
 
     function scanIntoEditIsbn() {
@@ -2858,8 +2874,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
         }
 
         if (qrReader.style.display !== 'none') {
-            if (html5QrcodeScanner) {
-                html5QrcodeScanner.clear();
+            if (hybridScanner) {
+                hybridScanner.stop();
+                hybridScanner = null;
             }
             qrReader.style.display = 'none';
             scanIsbnBtn.textContent = 'ISBN scannen';
@@ -2868,20 +2885,27 @@ document.addEventListener('DOMContentLoaded', ()=>{
 
         qrReader.style.display = 'block';
         scanIsbnBtn.textContent = 'Scanner schließen';
-        html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', {
+        hybridScanner = new HybridScanner({
+            videoId: 'qr-reader-video',
+            canvasId: 'qr-reader-canvas',
+            formats: ['ISBN', 'EAN_13', 'EAN_8', 'QR_CODE'],
             fps: 10,
-            qrbox: 250,
-            rememberLastUsedCamera: true
-        });
-        html5QrcodeScanner.render((decodedText) => {
-            html5QrcodeScanner.clear();
-            qrReader.style.display = 'none';
-            editIsbnInput.value = String(decodedText || '').trim();
-            scanIsbnBtn.textContent = 'ISBN scannen';
-            if (typeof fetchBookInfo === 'function') {
-                fetchBookInfo('edit');
+            facingMode: 'environment',
+            onSuccess: function(decodedText) {
+                hybridScanner.stop();
+                qrReader.style.display = 'none';
+                editIsbnInput.value = String(decodedText || '').trim();
+                scanIsbnBtn.textContent = 'ISBN scannen';
+                if (typeof fetchBookInfo === 'function') {
+                    fetchBookInfo('edit');
+                }
+            },
+            onError: function(error) {
+                console.error('Scanner error:', error);
             }
         });
+        
+        hybridScanner.start();
     }
 
     function rebuildFilter3Options() {

Web/templates/termin_client.html

@@ -69,7 +69,14 @@
                                 <div class="fw-semibold mb-2">Bereits gebucht</div>
                                 <ul class="mb-0 small">
                                     {% for booking in available.slots_booked %}
-                                    <li>{{ booking.start }}{% if booking.name %} - {{ booking.name }}{% endif %}</li>
+                                    <li>
+                                        {{ booking.start }}
+                                        {% if can_view_booking_names and booking.name %}
+                                        - {{ booking.name }}
+                                        {% else %}
+                                        - Belegt
+                                        {% endif %}
+                                    </li>
                                     {% endfor %}
                                 </ul>
                             </div>
@@ -127,8 +134,9 @@
                 <p class="mb-0 small text-muted">Mit einem Klick auf ".ics herunterladen" können Sie den Termin in Apple/Google/Outlook-Kalender importieren.</p>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Später</button>
-                <a id="download-slot-ics" class="btn btn-primary" href="#">.ics herunterladen</a>
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Abbrechen</button>
+                <button id="confirm-booking-only" type="button" class="btn btn-primary">Jetzt buchen</button>
+                <button id="confirm-booking-with-ics" type="button" class="btn btn-success">Buchen + .ics</button>
             </div>
         </div>
     </div>
@@ -148,7 +156,8 @@
         const form = document.getElementById('client-booking-form');
         const calendarEl = document.getElementById('client-slot-calendar');
         const modalEl = document.getElementById('calendarDownloadModal');
-        const downloadIcsLink = document.getElementById('download-slot-ics');
+        const confirmBookingOnlyBtn = document.getElementById('confirm-booking-only');
+        const confirmBookingWithIcsBtn = document.getElementById('confirm-booking-with-ics');
         const modal = modalEl ? new bootstrap.Modal(modalEl) : null;
 
         const slotLength = Number.parseInt(available.slot_lenght, 10) || 45;
@@ -258,8 +267,9 @@
         const slotStartSet = new Set(candidateSlots.map(function (slot) { return slot.start; }));
         const allDays = dateRangeInclusive(String(available.date_start || ''), String(available.date_end || ''));
 
-        let slotMinTime = '08:00:00';
-        let slotMaxTime = '18:00:00';
+        // Show the requested UI time window from 08:15 to 20:00 and highlight available slots
+        let slotMinTime = '08:15:00';
+        let slotMaxTime = '20:00:00';
         if (candidateSlots.length > 0) {
             const starts = candidateSlots.map(function (slot) {
                 return new Date(slot.start.replace(' ', 'T') + ':00');
@@ -268,13 +278,14 @@
                 return new Date(slot.end.replace(' ', 'T') + ':00');
             }).filter(function (d) { return !Number.isNaN(d.getTime()); });
 
+            // Keep the computed min/max for gap calculations below
+            var computedMinStart = null;
+            var computedMaxEnd = null;
             if (starts.length > 0 && ends.length > 0) {
-                let minStart = starts[0];
-                let maxEnd = ends[0];
-                starts.forEach(function (d) { if (d < minStart) minStart = d; });
-                ends.forEach(function (d) { if (d > maxEnd) maxEnd = d; });
-                slotMinTime = formatTimeForCalendar(minStart);
-                slotMaxTime = formatTimeForCalendar(maxEnd);
+                computedMinStart = starts[0];
+                computedMaxEnd = ends[0];
+                starts.forEach(function (d) { if (d < computedMinStart) computedMinStart = d; });
+                ends.forEach(function (d) { if (d > computedMaxEnd) computedMaxEnd = d; });
             }
         }
 
@@ -287,7 +298,7 @@
         const initialViewName = multiDayDuration === 1 ? 'timeGridDay' : 'timeGridRange';
         let selectedSlot = '';
         let selectedEvent = null;
-        let selectedShownOnce = false;
+        let allowImmediateSubmit = false;
 
         const calendar = new FullCalendar.Calendar(calendarEl, {
             initialView: initialViewName,
@@ -346,6 +357,8 @@
             }
         });
 
+        // No background greying: show full calendar skeleton and only mark possible slots
+
         function updateSliderLabel() {
             const dateList = dateRangeInclusive(String(available.date_start || ''), String(available.date_end || ''));
             const idx = Number.parseInt(slider.value, 10) || 0;
@@ -379,18 +392,10 @@
                 editable: true,
             });
 
-            if (modal && !selectedShownOnce) {
-                selectedShownOnce = true;
-                modal.show();
-            }
-
             refreshIcsLink();
         }
 
-        function refreshIcsLink() {
-            if (!downloadIcsLink) {
-                return;
-            }
+        function getIcsDownloadUrl() {
             const base = {{ url_for('terminplaner.client_slot_calendar_export', appointment_id=appointment_id, tenant=tenant_id)|tojson }};
             const url = new URL(base, window.location.origin);
             if (selectedSlot) {
@@ -400,9 +405,19 @@
             if (name) {
                 url.searchParams.set('name', name);
             }
-            downloadIcsLink.setAttribute('href', url.toString());
+            return url.toString();
         }
 
+        function refreshIcsLink() {
+            const icsUrl = getIcsDownloadUrl();
+            if (confirmBookingWithIcsBtn) {
+                confirmBookingWithIcsBtn.setAttribute('data-ics-url', icsUrl);
+            }
+        }
+
+        // No background gaps: keep full skeleton/grid visible
+
+        // Add candidate free slots (blue)
         candidateSlots.forEach(function (slot) {
             const start = new Date(slot.start.replace(' ', 'T') + ':00');
             const end = new Date(slot.end.replace(' ', 'T') + ':00');
@@ -410,8 +425,8 @@
                 title: 'Freier Slot',
                 start: start,
                 end: end,
-                color: '#20c997',
-                textColor: '#062b1f',
+                color: '#0d6efd',
+                textColor: '#ffffff',
                 editable: false,
                 extendedProps: {
                     slotStart: slot.start,
@@ -441,9 +456,43 @@
             if (!selectedSlotInput.value) {
                 ev.preventDefault();
                 window.alert('Bitte zuerst im Kalender einen freien Slot auswählen.');
+                return;
+            }
+
+            if (allowImmediateSubmit) {
+                return;
+            }
+
+            ev.preventDefault();
+            if (modal) {
+                modal.show();
             }
         });
 
+        if (confirmBookingOnlyBtn) {
+            confirmBookingOnlyBtn.addEventListener('click', function () {
+                allowImmediateSubmit = true;
+                if (modal) {
+                    modal.hide();
+                }
+                form.submit();
+            });
+        }
+
+        if (confirmBookingWithIcsBtn) {
+            confirmBookingWithIcsBtn.addEventListener('click', function () {
+                const icsUrl = confirmBookingWithIcsBtn.getAttribute('data-ics-url') || getIcsDownloadUrl();
+                if (icsUrl) {
+                    window.open(icsUrl, '_blank');
+                }
+                allowImmediateSubmit = true;
+                if (modal) {
+                    modal.hide();
+                }
+                form.submit();
+            });
+        }
+
         clientNameInput.addEventListener('input', refreshIcsLink);
 
         if (sliderWrap) {

Web/templates/termin_client_success.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Buchung erfolgreich</title>
+    <style>
+        :root {
+            color-scheme: light;
+            --bg-a: #0f4c5c;
+            --bg-b: #16697a;
+            --ok: #22c55e;
+            --text: #0f172a;
+            --muted: #475569;
+            --card: #ffffff;
+        }
+        * {
+            box-sizing: border-box;
+        }
+        body {
+            margin: 0;
+            min-height: 100vh;
+            font-family: "Manrope", "Segoe UI", sans-serif;
+            background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.14), transparent 45%), linear-gradient(135deg, var(--bg-a), var(--bg-b));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+        }
+        .success-window {
+            width: min(900px, 100%);
+            background: var(--card);
+            border-radius: 1.25rem;
+            box-shadow: 0 28px 70px rgba(2, 6, 23, 0.32);
+            padding: clamp(1.5rem, 4vw, 3rem);
+            text-align: center;
+        }
+        .badge {
+            width: 84px;
+            height: 84px;
+            margin: 0 auto 1.25rem auto;
+            border-radius: 50%;
+            display: grid;
+            place-items: center;
+            background: rgba(34, 197, 94, 0.12);
+            color: var(--ok);
+            font-size: 2rem;
+            font-weight: 800;
+        }
+        h1 {
+            margin: 0 0 0.9rem 0;
+            font-size: clamp(1.8rem, 5vw, 3rem);
+            color: var(--text);
+            line-height: 1.1;
+        }
+        p {
+            margin: 0;
+            font-size: 1.1rem;
+            color: var(--muted);
+        }
+        .meta {
+            margin-top: 1.4rem;
+            padding: 1rem;
+            border-radius: 0.9rem;
+            background: #f8fafc;
+            color: #0f172a;
+            font-weight: 600;
+        }
+        .actions {
+            margin-top: 1.8rem;
+            display: flex;
+            justify-content: center;
+            gap: .75rem;
+            flex-wrap: wrap;
+        }
+        .btn {
+            border: 0;
+            border-radius: 0.8rem;
+            padding: .85rem 1.25rem;
+            font-size: 1rem;
+            font-weight: 700;
+            cursor: pointer;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .btn-close {
+            background: #0f4c5c;
+            color: #fff;
+        }
+        .btn-link {
+            background: #e2e8f0;
+            color: #0f172a;
+        }
+    </style>
+</head>
+<body>
+    <main class="success-window" role="main" aria-live="polite">
+        <div class="badge">✓</div>
+        <h1>Buchung erfolgreich</h1>
+        <p>Sie können das Fenster jetzt schließen.</p>
+
+        {% if client_name or slot_start %}
+        <div class="meta">
+            {% if client_name %}
+            <div>Name: {{ client_name }}</div>
+            {% endif %}
+            {% if slot_start %}
+            <div>Termin: {{ slot_start }}</div>
+            {% endif %}
+        </div>
+        {% endif %}
+
+        <div class="actions">
+            <button class="btn btn-close" type="button" onclick="window.close()">Fenster schließen</button>
+            <a class="btn btn-link" href="{{ url_for('terminplaner.client', appointment_id=appointment_id, tenant=tenant_id) }}">Zurück zur Buchungsseite</a>
+        </div>
+    </main>
+</body>
+</html>

Web/templates/terminplan.html

@@ -287,7 +287,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     const filteredEvents = showCompletedBookings 
                         ? processedEvents 
                         : processedEvents.filter(event => event.extendedProps.status !== 'completed');
-                    
+
                     // Provide events to calendar
                     successCallback(filteredEvents);
                 })
@@ -314,22 +314,6 @@ document.addEventListener('DOMContentLoaded', function() {
                 periodDiv.style.display = 'inline-block';
                 periodDiv.style.fontSize = '10px';
                 info.el.appendChild(periodDiv);
-            } else {
-                // Check if it is a multi-day event
-                const start = info.event.start;
-                const end = info.event.end;
-                if (start && end && start.toDateString() !== end.toDateString()) {
-                    const periodDiv = document.createElement('div');
-                    periodDiv.className = 'fc-event-period-marker';
-                    periodDiv.textContent = 'Mehrtägig';
-                    periodDiv.style.backgroundColor = 'rgba(255,255,255,0.3)';
-                    periodDiv.style.borderRadius = '3px';
-                    periodDiv.style.padding = '1px 3px';
-                    periodDiv.style.marginTop = '2px';
-                    periodDiv.style.display = 'inline-block';
-                    periodDiv.style.fontSize = '10px';
-                    info.el.appendChild(periodDiv);
-                }
             }
             
             // Add borrowed indicator if relevant

Web/templates/upload_admin.html

@@ -876,7 +876,10 @@
                     <button type="button" id="scan-code4-btn" class="fetch-isbn-button">Barcode scannen</button>
                 </div>
                 <small style="display:block; color:#666;">Einzelcode manuell setzen oder per Scanner erfassen.</small>
-                <div id="code4-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;"></div>
+                <div id="code4-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;">
+                    <video id="code4-scanner-video" playsinline style="width: 100%; border-radius: 8px;"></video>
+                    <canvas id="code4-scanner-canvas" style="display: none;"></canvas>
+                </div>
                 <small id="code4-scan-status" style="display:block; color:#666; margin-top:6px;"></small>
             </div>
             <div class="form-group">
@@ -907,7 +910,10 @@
                     <button type="button" id="scan-isbn-btn" class="fetch-isbn-button">Barcode scannen</button>
                     <button type="button" class="fetch-isbn-button" onclick="fetchBookInfo('upload')">Bild abrufen</button>
                 </div>
-                <div id="isbn-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;"></div>
+                <div id="isbn-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;">
+                    <video id="isbn-scanner-video" playsinline style="width: 100%; border-radius: 8px;"></video>
+                    <canvas id="isbn-scanner-canvas" style="display: none;"></canvas>
+                </div>
                 <small id="isbn-scan-status" style="display:block; color:#666; margin-top:6px;">Scannen oder manuell eingeben. Gültige ISBNs helfen beim Abruf von Buchdaten, andere Codes werden trotzdem akzeptiert.</small>
                 <div id="book-info-container" class="book-info-container"></div>
             </div>
@@ -971,7 +977,8 @@
     }
 </script>
 
-<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>
+<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
+<script src="/static/js/scanner.js"></script>
 <script>
     const libraryModuleEnabled = {{ 'true' if library_module_enabled else 'false' }};
 
@@ -1050,16 +1057,19 @@
 
         // Stop ISBN scanner if currently running to avoid camera conflicts.
         if (isbnScannerRunning && isbnScannerInstance) {
-            isbnScannerInstance.clear().catch(() => {});
+            isbnScannerInstance.stop();
+            isbnScannerInstance = null;
             const isbnScannerBox = document.getElementById('isbn-scanner');
             const isbnScanButton = document.getElementById('scan-isbn-btn');
             if (isbnScannerBox) isbnScannerBox.style.display = 'none';
             if (isbnScanButton) isbnScanButton.textContent = 'ISBN scannen';
             isbnScannerRunning = false;
+            setIsbnScanStatus('Scanner gestoppt.');
         }
 
         if (code4ScannerRunning && code4ScannerInstance) {
-            code4ScannerInstance.clear().catch(() => {});
+            code4ScannerInstance.stop();
+            code4ScannerInstance = null;
             scannerBox.style.display = 'none';
             scanButton.textContent = 'Barcode scannen';
             code4ScannerRunning = false;
@@ -1069,29 +1079,36 @@
 
         scannerBox.style.display = 'block';
         scanButton.textContent = 'Scanner stoppen';
-        code4ScannerInstance = new Html5QrcodeScanner('code4-scanner', { 
-            fps: 10, 
-            qrbox: 250,
-            rememberLastUsedCamera: true
-        });
         code4ScannerRunning = true;
         setCode4ScanStatus('Scanner läuft. Der Scan wird im Basis-Codefeld übernommen.');
 
-        code4ScannerInstance.render((decodedText) => {
-            const scannedCode = String(decodedText || '').trim();
-            if (!scannedCode) return;
+        code4ScannerInstance = new HybridScanner({
+            videoId: 'code4-scanner-video',
+            canvasId: 'code4-scanner-canvas',
+            formats: ['CODE_128', 'CODE_39', 'QR_CODE'],
+            fps: 10,
+            facingMode: 'environment',
+            onSuccess: function(decodedText) {
+                const scannedCode = String(decodedText || '').trim();
+                if (!scannedCode) return;
 
-            const now = Date.now();
-            if (scannedCode === code4LastScanned && (now - code4LastScannedAt) < 1500) {
-                return;
+                const now = Date.now();
+                if (scannedCode === code4LastScanned && (now - code4LastScannedAt) < 1500) {
+                    return;
+                }
+                code4LastScanned = scannedCode;
+                code4LastScannedAt = now;
+
+                codeField.value = scannedCode;
+                validateCodeField(codeField);
+                setCode4ScanStatus(`Code_4 gesetzt: ${scannedCode}`);
+            },
+            onError: function(error) {
+                setCode4ScanStatus(`Fehler: ${error}`, true);
             }
-            code4LastScanned = scannedCode;
-            code4LastScannedAt = now;
+        });
 
-            codeField.value = scannedCode;
-            validateCodeField(codeField);
-            setCode4ScanStatus(`Code_4 gesetzt: ${scannedCode}`);
-        }, () => {});
+        code4ScannerInstance.start();
     }
 
     function startIsbnScanner() {
@@ -1106,7 +1123,8 @@
 
         // Stop Code_4 scanner if currently running to avoid camera conflicts.
         if (code4ScannerRunning && code4ScannerInstance) {
-            code4ScannerInstance.clear().catch(() => {});
+            code4ScannerInstance.stop();
+            code4ScannerInstance = null;
             const codeScannerBox = document.getElementById('code4-scanner');
             const codeScanButton = document.getElementById('scan-code4-btn');
             if (codeScannerBox) codeScannerBox.style.display = 'none';
@@ -1116,7 +1134,8 @@
         }
 
         if (isbnScannerRunning && isbnScannerInstance) {
-            isbnScannerInstance.clear().catch(() => {});
+            isbnScannerInstance.stop();
+            isbnScannerInstance = null;
             scannerBox.style.display = 'none';
             scanButton.textContent = 'ISBN scannen';
             isbnScannerRunning = false;
@@ -1126,15 +1145,16 @@
 
         scannerBox.style.display = 'block';
         scanButton.textContent = 'Scanner stoppen';
-        isbnScannerInstance = new Html5QrcodeScanner('isbn-scanner', {
-            fps: 10,
-            qrbox: 250,
-            rememberLastUsedCamera: true
-        });
         isbnScannerRunning = true;
         setIsbnScanStatus('Scanner läuft. Bitte ISBN-Code erfassen.');
 
-        isbnScannerInstance.render((decodedText) => {
+        isbnScannerInstance = new HybridScanner({
+            videoId: 'isbn-scanner-video',
+            canvasId: 'isbn-scanner-canvas',
+            formats: ['ISBN', 'EAN_13', 'EAN_8', 'QR_CODE'],
+            fps: 10,
+            facingMode: 'environment',
+            onSuccess: function(decodedText) {
             const scannedCode = String(decodedText || '').trim();
             if (!scannedCode) return;
 
@@ -1147,7 +1167,11 @@
                 setIsbnScanStatus('Kein gültiges ISBN-Format erkannt, der gescannte Wert bleibt aber im Feld.', true);
             }
 
-            isbnScannerInstance.clear().catch(() => {});
+            // Stop scanner after successful scan
+            if (isbnScannerInstance) {
+                isbnScannerInstance.stop();
+                isbnScannerInstance = null;
+            }
             scannerBox.style.display = 'none';
             scanButton.textContent = 'ISBN scannen';
             isbnScannerRunning = false;
@@ -1156,7 +1180,13 @@
                 // Automatically load book metadata after a valid ISBN scan.
                 fetchBookInfo('upload');
             }
-        }, () => {});
+            },
+            onError: function(error) {
+                setIsbnScanStatus(`Fehler: ${error}`, true);
+            }
+        });
+
+        isbnScannerInstance.start();
     }
 
     // Load predefined filter values for dropdowns