Enhance navbar styles with improved responsiveness and visual effects

Web/app.py

@@ -7060,9 +7060,7 @@ def register():
             
             permission_preset = (request.form.get('permission_preset') or 'standard_user').strip()
             use_custom_permissions = request.form.get('use_custom_permissions') == 'on'
-            is_student = bool(request.form.get('is_student')) if cfg.STUDENT_CARDS_MODULE_ENABLED else False
+            
-            student_card_id = us.normalize_student_card_id(request.form.get('student_card_id')) if cfg.STUDENT_CARDS_MODULE_ENABLED else ''
-            max_borrow_days_raw = request.form.get('max_borrow_days') if cfg.STUDENT_CARDS_MODULE_ENABLED else None
             if not username or not password or not name or not last_name:
                 flash('Bitte füllen Sie alle Felder aus', 'error')
                 return redirect(url_for('register'))
@@ -7081,28 +7079,14 @@ def register():
                 for endpoint_name, _ in PERMISSION_PAGE_OPTIONS:
                     page_permissions[endpoint_name] = request.form.get(f'page_{endpoint_name}') == 'on'
 
-            max_borrow_days = None
-            if is_student:
-                if not student_card_id:
-                    flash('Für Schüler muss eine Ausweis-ID angegeben werden.', 'error')
-                    return redirect(url_for('register'))
-                if us.student_card_exists(student_card_id):
-                    flash('Die Ausweis-ID ist bereits vergeben.', 'error')
-                    return redirect(url_for('register'))
-                try:
-                    max_borrow_days = int(max_borrow_days_raw) if max_borrow_days_raw else cfg.STUDENT_DEFAULT_BORROW_DAYS
-                except (TypeError, ValueError):
-                    max_borrow_days = cfg.STUDENT_DEFAULT_BORROW_DAYS
-                max_borrow_days = max(1, min(max_borrow_days, cfg.STUDENT_MAX_BORROW_DAYS))
-
             us.add_user(
                 username,
                 password,
                 name,
                 last_name,
-                is_student=is_student,
+                is_student=False,
-                student_card_id=student_card_id if is_student else None,
+                student_card_id=None,
-                max_borrow_days=max_borrow_days,
+                max_borrow_days=None,
                 permission_preset=permission_preset,
                 action_permissions=action_permissions,
                 page_permissions=page_permissions,

Web/flask.log

@@ -0,0 +1 @@
+[2026-04-19 20:20:39,502] ERROR in app: Error during scheduler shutdown: name '__file__' is not defined

Web/static/css/styles.css

@@ -21,6 +21,28 @@
     --ui-radius: 12px;
 }
 
+@media (prefers-color-scheme: dark) {
+    :root {
+        --ui-bg: #0f172a;
+        --ui-bg-accent: #1e293b;
+        --ui-surface: #1e293b;
+        --ui-surface-soft: #25314a;
+        --ui-border: #334155;
+        --ui-text: #f1f5f9;
+        --ui-text-muted: #94a3b8;
+        --ui-title: #ffffff;
+        --ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
+        --ui-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.5);
+    }
+    
+    /* Make inputs visible in dark mode */
+    input, select, textarea {
+        background-color: var(--ui-surface-soft) !important;
+        color: var(--ui-text) !important;
+        border-color: var(--ui-border) !important;
+    }
+}
+
 body {
     font-family: "Manrope", "Segoe UI", "Noto Sans", sans-serif;
     color: var(--ui-text);
@@ -92,7 +114,7 @@ span {
 .card-header,
 .modal-header,
 thead th {
-    background: linear-gradient(180deg, #f7fafd, #edf3f8) !important;
+    background: var(--ui-surface-soft) !important;
     border-bottom: 1px solid var(--ui-border) !important;
     color: var(--ui-title) !important;
 }
@@ -107,10 +129,10 @@ input[type="email"],
 input[type="date"],
 select {
     border-radius: 10px !important;
-    border: 1px solid #cad5e0 !important;
+    border: 1px solid var(--ui-border) !important;
     min-height: 40px;
     color: var(--ui-text) !important;
-    background-color: #fff !important;
+    background-color: var(--ui-surface) !important;
     transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
@@ -131,11 +153,13 @@ select:focus {
 .table th,
 .table td {
     vertical-align: middle;
-    border-color: #dee6ee !important;
+    border-color: var(--ui-border) !important;
+    background-color: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
 }
 
 .table-striped > tbody > tr:nth-of-type(odd) {
-    background-color: #f8fbff;
+    background-color: var(--ui-surface-soft) !important;
 }
 
 .alert {
@@ -144,8 +168,10 @@ select:focus {
 }
 
 .navbar {
-    border-bottom: 1px solid #273341;
+    border-bottom: 1px solid var(--ui-border);
     box-shadow: none;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
 }
 
 .navbar-brand {
@@ -164,17 +190,9 @@ select:focus {
     }
 }
 
-/* Edit and generate buttons with black text for better visibility */
+/* Edit and generate buttons with theme-aware text for better visibility */
-.edit-button {
+.edit-button, .duplicate-button, .generate-qr-button {
-    color: black !important; /* Override any existing color */
+    color: var(--ui-text) !important; /* Override any existing color */
-}
-
-.duplicate-button {
-    color: black !important; /* Override any existing color */
-}
-
-.generate-qr-button {
-    color: black !important; /* Override any existing color */
 }
 
 .ausleihen {
@@ -805,4 +823,17 @@ body.table-view .item-card .actions {
         padding: 7px 12px !important;
         font-size: 0.84rem !important;
     }
-}
+}
+/* iOS and Mobile optimization fixes */
+html, body {
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+}
+.scrollable-container, .items-container {
+    -webkit-overflow-scrolling: touch;
+}
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+    .fixed-bottom, .modal-footer {
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+}

Web/static/manifest.json

@@ -1,134 +1,23 @@
 {
-  "name": "Inventarsystem",
+  "name": "Ausleihsystem",
-  "short_name": "Inventar",
+  "short_name": "Ausleihe",
-  "description": "Verwaltungssystem für Schulinventare mit Ausleihmanagement",
+  "description": "System zur Verwaltung von Ausleihen",
   "start_url": "/",
-  "scope": "/",
   "display": "standalone",
-  "orientation": "portrait-primary",
   "background_color": "#ffffff",
-  "theme_color": "#007bff",
+  "theme_color": "#1f2937",
-  "dir": "ltr",
-  "lang": "de-DE",
-  "prefer_related_applications": false,
-  "related_applications": [],
   "icons": [
     {
-      "src": "/static/img/logo-72x72.png",
+      "src": "/static/img/icon-192.png",
-      "sizes": "72x72",
       "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-96x96.png",
-      "sizes": "96x96",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-128x128.png",
-      "sizes": "128x128",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-152x152.png",
-      "sizes": "152x152",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-192x192.png",
       "sizes": "192x192",
-      "type": "image/png",
+      "purpose": "any maskable"
-      "purpose": "any"
     },
     {
-      "src": "/static/img/logo-384x384.png",
+      "src": "/static/img/icon-512.png",
-      "sizes": "384x384",
       "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-512x512.png",
       "sizes": "512x512",
-      "type": "image/png",
+      "purpose": "any maskable"
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-192x192-maskable.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "/static/img/logo-512x512-maskable.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
     }
-  ],
+  ]
-  "screenshots": [
-    {
-      "src": "/static/img/screenshot-540x720.png",
-      "sizes": "540x720",
-      "type": "image/png",
-      "form_factor": "narrow"
-    },
-    {
-      "src": "/static/img/screenshot-1280x720.png",
-      "sizes": "1280x720",
-      "type": "image/png",
-      "form_factor": "wide"
-    }
-  ],
-  "categories": ["education", "productivity"],
-  "shortcuts": [
-    {
-      "name": "Meine Ausleihungen",
-      "short_name": "Ausleihungen",
-      "description": "Zeige meine aktuellen Ausleihungen",
-      "url": "/my_borrowed_items",
-      "icons": [
-        {
-          "src": "/static/img/shortcut-96x96.png",
-          "sizes": "96x96"
-        }
-      ]
-    },
-    {
-      "name": "Kalender",
-      "short_name": "Kalender",
-      "description": "Kalender für Ausleihplanungen",
-      "url": "/terminplan",
-      "icons": [
-        {
-          "src": "/static/img/shortcut-96x96.png",
-          "sizes": "96x96"
-        }
-      ]
-    }
-  ],
-  "share_target": {
-    "action": "/share",
-    "method": "POST",
-    "enctype": "multipart/form-data",
-    "params": {
-      "title": "title",
-      "text": "text",
-      "url": "url",
-      "files": [
-        {
-          "name": "media",
-          "accept": ["image/*", "video/*"]
-        }
-      ]
-    }
-  }
 }

Web/static/sw.js

@@ -0,0 +1,18 @@
+const CACHE_NAME = 'ausleihe-cache-v1';
+
+self.addEventListener('install', (event) => {
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(clients.claim());
+});
+
+self.addEventListener('fetch', (event) => {
+    // Einfacher Fallback aufs Netzwerk (Offline-Seite könnte hier ergänzt werden)
+    event.respondWith(
+        fetch(event.request).catch(() => {
+            return caches.match(event.request);
+        })
+    );
+});

Web/templates/base.html

@@ -10,10 +10,12 @@
 <html lang="de" data-module="{{ CURRENT_MODULE }}">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="theme-color" content="#2c3e50" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#1a252f" media="(prefers-color-scheme: dark)">
     <meta name="csrf-token" content="{{ csrf_token }}">
     <title>{% block title %}Inventarsystem{% endblock %}</title>
     {% block head %}
@@ -102,6 +104,9 @@
             --module-accent-color: #3498db;
             --module-accent-light: rgba(52, 152, 219, 0.1);
             --module-brand-icon: "📦";
+            --page-bg-gradient: linear-gradient(180deg, #f2f5f8, #e7edf4);
+            --page-bg-overlay1: rgba(86, 145, 200, 0.08);
+            --page-bg-overlay2: rgba(52, 98, 150, 0.09);
         }
 
         html[data-module="library"] {
@@ -112,17 +117,35 @@
             --module-brand-icon: "📚";
         }
 
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --module-primary-color: #1a252f;
+                --module-primary-light: #2c3e50;
+                --module-accent-color: #2980b9;
+                --module-brand-icon: "📦";
+                --page-bg-gradient: linear-gradient(180deg, #0f172a, #1e293b);
+                --page-bg-overlay1: rgba(56, 189, 248, 0.05);
+                --page-bg-overlay2: rgba(59, 130, 246, 0.06);
+            }
+            html[data-module="library"] {
+                --module-primary-color: #4a354d;
+                --module-primary-light: #614666;
+                --module-accent-color: #8e44ad;
+            }
+        }
+
         /* Global styles */
         body {
             font-family: "Manrope", "Segoe UI", "Noto Sans", sans-serif;
             background:
-                radial-gradient(1200px 500px at 10% -10%, rgba(86, 145, 200, 0.08), transparent 55%),
+                radial-gradient(1200px 500px at 10% -10%, var(--page-bg-overlay1), transparent 55%),
-                radial-gradient(900px 420px at 95% 0%, rgba(52, 98, 150, 0.09), transparent 52%),
+                radial-gradient(900px 420px at 95% 0%, var(--page-bg-overlay2), transparent 52%),
-                linear-gradient(180deg, #f2f5f8, #e7edf4);
+                var(--page-bg-gradient);
             margin: 0;
             padding: 0;
-            padding-bottom: 30px;
+            padding-bottom: auto; /* Fallback for dynamic calculation */
-            color: #1f2d3d;
+            padding-bottom: env(safe-area-inset-bottom, 30px);
+            color: var(--ui-text, #1f2d3d);
         }
         
         .container {
@@ -135,11 +158,13 @@
             background-color: var(--module-primary-color) !important;
             position: sticky;
             top: 0;
+            padding-top: env(safe-area-inset-top, 0); /* iOS Safe Area */
             z-index: 1900;
         }
 
         .navbar .container-fluid {
             gap: 10px;
+            padding-bottom: env(safe-area-inset-bottom, 0); /* Fallback */
         }
         
         .navbar-brand {
@@ -351,18 +376,19 @@
         
         /* Dropdown menus - consistent with system design */
         .dropdown-menu {
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            box-shadow: var(--ui-shadow-md);
-            border: 1px solid #dee2e6;
+            border: 1px solid var(--ui-border);
             border-radius: 8px;
             padding: 8px 0;
             min-width: 200px;
             margin-top: 5px;
+            background-color: var(--ui-surface);
         }
         
         .dropdown-item {
             padding: 10px 16px;
             font-size: 0.9rem;
-            color: #495057;
+            color: var(--ui-text);
             transition: all 0.2s ease;
             border: none;
             background: none;
@@ -370,8 +396,8 @@
         
         .dropdown-item:hover,
         .dropdown-item:focus {
-            background-color: #f8f9fa;
+            background-color: var(--ui-surface-soft);
-            color: #007bff;
+            color: var(--module-accent-color);
             transform: translateX(2px);
         }
         
@@ -434,12 +460,16 @@
             }
             
             .nav-item.dropdown .dropdown-toggle {
-                padding: 8px 12px;
+                padding: 12px 12px;
+                min-height: 48px;
             }
 
             .navbar-toggler {
-                padding: 0.5rem 0.65rem;
+                padding: 0.6rem 0.8rem;
                 border-width: 2px;
+                min-height: 48px;
+                min-width: 48px;
+                margin-top: 4px;
             }
 
             .function-search-wrap {
@@ -573,17 +603,38 @@
                 margin-left: auto;
                 flex: 0 0 auto;
                 align-self: flex-start;
+                min-width: 48px;
+                min-height: 48px;
+                border: none;
+                background: rgba(255, 255, 255, 0.1);
+                border-radius: 10px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: background 0.2s ease;
+            }
+            
+            .navbar-toggler:active,
+            .navbar-toggler:focus {
+                background: rgba(255, 255, 255, 0.2);
+                box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
             }
 
             .navbar-collapse {
                 order: 4;
                 width: 100%;
-                margin-top: 8px;
+                margin-top: 12px;
-                padding: 10px 10px 6px;
+                padding: 12px;
-                border-radius: 14px;
+                border-radius: 16px;
-                background: rgba(15, 23, 42, 0.18);
+                background: rgba(15, 23, 42, 0.85);
-                backdrop-filter: blur(10px);
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-                -webkit-backdrop-filter: blur(10px);
+                border: 1px solid rgba(255, 255, 255, 0.1);
+                backdrop-filter: blur(16px);
+                -webkit-backdrop-filter: blur(16px);
+                max-height: calc(100vh - 90px); /* fallback */
+                max-height: calc(100dvh - 90px);
+                overflow-y: auto;
+                -webkit-overflow-scrolling: touch;
             }
 
             .navbar-collapse.show,
@@ -595,7 +646,7 @@
                 width: 100%;
                 align-items: stretch;
                 gap: 8px;
-                padding-top: 2px;
+                padding-top: 4px;
             }
 
             .navbar-nav .nav-item {
@@ -605,11 +656,12 @@
             .navbar-nav .nav-link {
                 width: 100%;
                 justify-content: flex-start;
-                min-height: 46px;
+                min-height: 48px;
-                padding: 0.8rem 0.95rem;
+                padding: 0.9rem 1.1rem;
+                margin-bottom: 2px;
                 border-radius: 12px;
-                background: rgba(255, 255, 255, 0.08);
+                background: rgba(255, 255, 255, 0.06);
-                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
             }
 
             .navbar-nav .nav-link.nav-active,
@@ -632,6 +684,23 @@
                 margin-left: 0;
                 margin-top: 6px;
                 border-radius: 12px;
+                background: rgba(255, 255, 255, 0.08); /* Match nav-link slightly */
+                border: 1px solid rgba(255, 255, 255, 0.08);
+                box-shadow: none;
+            }
+
+            .navbar-nav .dropdown-item {
+                color: rgba(255, 255, 255, 0.9);
+                padding: 12px 16px;
+                border-radius: 8px;
+                margin: 2px 8px;
+                width: calc(100% - 16px);
+            }
+
+            .navbar-nav .dropdown-item:hover,
+            .navbar-nav .dropdown-item:focus {
+                background: rgba(255, 255, 255, 0.15);
+                color: #fff;
             }
 
             .module-selector-bar {

Web/templates/main.html

@@ -6,7 +6,7 @@
 
     /* Calendar styles for detailed view */
     .calendar-wrapper {
-        background: #fff;
+        background: var(--ui-surface);
         border: 1px solid #dbe3ee;
         border-radius: 12px;
         overflow: hidden;
@@ -28,7 +28,7 @@
         height: 34px;
         border: 1px solid #dbe3ee;
         border-radius: 8px;
-        background: #fff;
+        background: var(--ui-surface);
         color: #334155;
         font-weight: 700;
         line-height: 1;
@@ -109,7 +109,7 @@
     }
 
     .cal-cell.selected.has-booking::after {
-        background: #fff;
+        background: var(--ui-surface);
     }
 
     .calendar-day-details {
@@ -138,7 +138,7 @@
     }
 
     .cal-booking-item {
-        background: #fff;
+        background: var(--ui-surface);
         border: 1px solid #dbe3ee;
         border-left: 3px solid #2563eb;
         border-radius: 10px;
@@ -296,7 +296,7 @@
     #code-search {
         flex: 1;
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
     }
 
@@ -724,7 +724,9 @@
     // Add this line to define allItems globally
     let allItems = [];
 
-    const MAIN_ITEMS_PAGE_SIZE = 120;
+    // Dynamic page size: scan viewport/screen size to only load the exact amount needed.
+    const isMobileDevice = window.matchMedia('(max-width: 768px)').matches;
+    const MAIN_ITEMS_PAGE_SIZE = isMobileDevice ? 20 : 120;
     let mainItemsNextOffset = 0;
     let mainItemsHasMore = false;
     let mainItemsLoadingMore = false;
@@ -781,10 +783,10 @@
             styles.flexDirection === 'column';
 
         const distanceToEnd = isMobileLayout
-            ? itemsContainer.scrollHeight - (itemsContainer.scrollTop + itemsContainer.clientHeight)
+            ? Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - (window.scrollY + window.innerHeight)
             : itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
         const prefetchThreshold = isMobileLayout
-            ? Math.max(220, itemsContainer.clientHeight * 0.9)
+            ? window.innerHeight * 1.5
             : Math.max(260, itemsContainer.clientWidth * 1.4);
         if (distanceToEnd > prefetchThreshold) {
             return;
@@ -1167,6 +1169,7 @@
 
         if (!mainItemsScrollPrefetchBound) {
             itemsContainer.addEventListener('scroll', maybePrefetchMainItems, { passive: true });
+            window.addEventListener('scroll', maybePrefetchMainItems, { passive: true });
             mainItemsScrollPrefetchBound = true;
         }
 
@@ -1188,7 +1191,7 @@
                 updateMainItemsLoadingIndicator();
             });
         }, {
-            root: itemsContainer,
+            root: isMobileLayout ? null : itemsContainer,
             threshold: 0.15,
             rootMargin: isMobileLayout ? '0px 0px 900px 0px' : '0px 900px 0px 0px'
         });
@@ -1466,7 +1469,7 @@
                 const badgeText = entry.type === 'repair' ? 'Repariert' : 'Schaden';
                 const metaLine = entry.meta ? `<div style="font-size:0.84rem;color:#4b5563;">${escapeHtml(entry.meta)}</div>` : '';
                 return `
-                    <div style="border:1px solid #dbe3ee;border-radius:8px;padding:10px;background:#fff;display:grid;gap:6px;">
+                    <div style="border:1px solid var(--ui-border);border-radius:8px;padding:10px;background:var(--ui-surface);display:grid;gap:6px;">
                         <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;">
                             <span style="display:inline-block;padding:2px 8px;border-radius:999px;font-size:0.75rem;font-weight:700;${badgeStyle}">${badgeText}</span>
                             <span style="font-size:0.84rem;color:#475569;">${entry.dateLabel}</span>
@@ -2805,7 +2808,7 @@
     }
 
     .container {
-        background-color: #fff;
+        background-color: var(--ui-surface);
         padding: 20px;
         border-radius: 5px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@@ -2830,8 +2833,8 @@
     .filter-group {
         position: relative;
         min-width: 200px;
-        background-color: #fff;
+        background-color: var(--ui-surface);
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 5px;
         padding: 10px;
     }
@@ -2865,7 +2868,7 @@
         max-height: 300px;
         overflow-y: auto;
         background-color: white;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 5px;
         box-shadow: 0 4px 8px rgba(0,0,0,0.2);
         z-index: 100;
@@ -2954,7 +2957,7 @@
     #code-search {
         flex: 1;
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
     }
 
@@ -3083,8 +3086,8 @@
     }
 
     .item-card {
-        background-color: #fff;
+        background-color: var(--ui-surface);
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 5px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         padding: 20px;
@@ -3191,7 +3194,7 @@
     .form-group textarea {
         width: 100%;
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
         box-sizing: border-box;
     }
@@ -3561,6 +3564,9 @@
             margin: 0 !important;
             padding: 15px !important;
             scroll-snap-align: none !important;
+            /* Only render when user looks at it (content-visibility virtualizes the DOM) */
+            content-visibility: auto;
+            contain-intrinsic-size: auto 300px;
         }
         
         .item-card:hover {
@@ -3935,7 +3941,7 @@
 
     /* Calendar Styles - Optimized & Mobile Friendly */
     .calendar-wrapper {
-        background: #fff;
+        background: var(--ui-surface);
         border-radius: 12px;
         overflow: hidden;
         border: 1px solid #e5e7eb;
@@ -3948,7 +3954,7 @@
         justify-content: space-between;
         align-items: center;
         padding: 15px;
-        background-color: #fff;
+        background-color: var(--ui-surface);
         border-bottom: 1px solid #f3f4f6;
     }
     
@@ -3973,7 +3979,7 @@
     .calendar-grid {
         display: grid;
         grid-template-columns: repeat(7, 1fr);
-        background-color: #fff;
+        background-color: var(--ui-surface);
         padding: 10px;
         gap: 5px;
     }
@@ -4035,7 +4041,7 @@
     }
     
     .cal-cell.selected.has-booking::after {
-        background-color: #fff;
+        background-color: var(--ui-surface);
     }
 
     .calendar-day-details {
@@ -4063,7 +4069,7 @@
     
     .cal-booking-item {
         padding: 10px;
-        background: #fff;
+        background: var(--ui-surface);
         border: 1px solid #e5e7eb;
         border-radius: 8px;
         margin-bottom: 8px;
@@ -4430,7 +4436,7 @@ function openItemQuick(id){
 }
 
 .filter-group {
-    background: #ffffff;
+    background: var(--ui-surface);
     border: 1px solid #cfd8e3;
     border-radius: 12px;
     padding: 12px;
@@ -4478,7 +4484,7 @@ function openItemQuick(id){
 }
 
 .clear-filter {
-    background: #fff;
+    background: var(--ui-surface);
     color: #495868;
 }
 
@@ -4487,7 +4493,7 @@ function openItemQuick(id){
     border: 1px solid #cfd8e3;
     border-radius: 12px;
     box-shadow: 0 8px 20px rgba(20, 35, 60, 0.12);
-    background: #ffffff;
+    background: var(--ui-surface);
     padding: 10px;
 }
 

Web/templates/main_admin.html

@@ -55,7 +55,7 @@
         max-width: 980px;
         margin: 0 auto 18px;
         border: 1px solid #dbe3ee;
-        background: #ffffff;
+        background: var(--ui-surface);
         border-radius: 10px;
         padding: 14px;
         box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
@@ -138,8 +138,8 @@
     .filter-group {
         position: relative;
         min-width: 200px;
-        background-color: #fff;
+        background-color: var(--ui-surface);
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 5px;
         padding: 10px;
     }
@@ -173,7 +173,7 @@
         max-height: 300px;
         overflow-y: auto;
         background-color: white;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 5px;
         box-shadow: 0 4px 8px rgba(0,0,0,0.2);
         z-index: 100;
@@ -262,7 +262,7 @@
     #code-search {
         flex: 1;
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
     }
 
@@ -391,8 +391,8 @@
     }
 
     .item-card {
-        background-color: #fff;
+        background-color: var(--ui-surface);
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 5px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         padding: 20px;
@@ -632,7 +632,7 @@
     .form-group textarea {
         width: 100%;
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
         box-sizing: border-box;
     }
@@ -703,7 +703,7 @@
     .filter-inputs {
         margin: 20px 0;
         padding: 15px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 5px;
         background-color: #f8f9fa;
     }
@@ -723,7 +723,7 @@
     .filter-dropdown-select {
         width: 100%;
         padding: 8px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--ui-border);
         border-radius: 4px;
         background-color: white;
     }
@@ -1612,6 +1612,9 @@
             margin: 0 !important;
             padding: 15px !important;
             scroll-snap-align: none !important;
+            /* Only render when user looks at it (content-visibility virtualizes the DOM) */
+            content-visibility: auto;
+            contain-intrinsic-size: auto 300px;
         }
         
         .item-card:hover {
@@ -2003,7 +2006,7 @@
     }
     /* Calendar styles for detailed view */
     .calendar-wrapper {
-        background: #fff;
+        background: var(--ui-surface);
         border: 1px solid #dbe3ee;
         border-radius: 12px;
         overflow: hidden;
@@ -2025,7 +2028,7 @@
         height: 34px;
         border: 1px solid #dbe3ee;
         border-radius: 8px;
-        background: #fff;
+        background: var(--ui-surface);
         color: #334155;
         font-weight: 700;
         line-height: 1;
@@ -2106,7 +2109,7 @@
     }
 
     .cal-cell.selected.has-booking::after {
-        background: #fff;
+        background: var(--ui-surface);
     }
 
     .calendar-day-details {
@@ -2135,7 +2138,7 @@
     }
 
     .cal-booking-item {
-        background: #fff;
+        background: var(--ui-surface);
         border: 1px solid #dbe3ee;
         border-left: 3px solid #2563eb;
         border-radius: 10px;
@@ -3339,7 +3342,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
     });
 
     // Function to load items from server
-    const MAIN_ADMIN_ITEMS_PAGE_SIZE = 120;
+    // Dynamic page size: scan viewport/screen size to only load the exact amount needed.
+    const isMobileDevice = window.matchMedia('(max-width: 768px)').matches;
+    const MAIN_ADMIN_ITEMS_PAGE_SIZE = isMobileDevice ? 20 : 120;
     let mainAdminItemsNextOffset = 0;
     let mainAdminItemsHasMore = false;
     let mainAdminItemsLoadingMore = false;
@@ -3397,10 +3402,10 @@ document.addEventListener('DOMContentLoaded', ()=>{
             styles.flexDirection === 'column';
 
         const distanceToEnd = isMobileLayout
-            ? itemsContainer.scrollHeight - (itemsContainer.scrollTop + itemsContainer.clientHeight)
+            ? Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - (window.scrollY + window.innerHeight)
             : itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
         const prefetchThreshold = isMobileLayout
-            ? Math.max(220, itemsContainer.clientHeight * 0.9)
+            ? window.innerHeight * 1.5
             : Math.max(260, itemsContainer.clientWidth * 1.4);
         if (distanceToEnd > prefetchThreshold) {
             return;
@@ -3772,6 +3777,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
 
         if (!mainAdminItemsScrollPrefetchBound) {
             itemsContainer.addEventListener('scroll', maybePrefetchMainAdminItems, { passive: true });
+            window.addEventListener('scroll', maybePrefetchMainAdminItems, { passive: true });
             mainAdminItemsScrollPrefetchBound = true;
         }
 
@@ -3793,7 +3799,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 updateMainAdminItemsLoadingIndicator();
             });
         }, {
-            root: itemsContainer,
+            root: isMobileLayout ? null : itemsContainer,
             threshold: 0.15,
             rootMargin: isMobileLayout ? '0px 0px 900px 0px' : '0px 900px 0px 0px'
         });
@@ -4355,7 +4361,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 const badgeText = entry.type === 'repair' ? 'Repariert' : 'Schaden';
                 const metaLine = entry.meta ? `<div style="font-size:0.84rem;color:#4b5563;">${escapeHtml(entry.meta)}</div>` : '';
                 return `
-                    <div style="border:1px solid #dbe3ee;border-radius:8px;padding:10px;background:#fff;display:grid;gap:6px;">
+                    <div style="border:1px solid var(--ui-border);border-radius:8px;padding:10px;background:var(--ui-surface);display:grid;gap:6px;">
                         <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;">
                             <span style="display:inline-block;padding:2px 8px;border-radius:999px;font-size:0.75rem;font-weight:700;${badgeStyle}">${badgeText}</span>
                             <span style="font-size:0.84rem;color:#475569;">${entry.dateLabel}</span>
@@ -5494,7 +5500,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
 }
 
 .filter-group {
-    background: #ffffff;
+    background: var(--ui-surface);
     border: 1px solid #cfd8e3;
     border-radius: 12px;
     padding: 12px;
@@ -5542,7 +5548,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
 }
 
 .clear-filter {
-    background: #fff;
+    background: var(--ui-surface);
     color: #495868;
 }
 
@@ -5551,7 +5557,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
     border: 1px solid #cfd8e3;
     border-radius: 12px;
     box-shadow: 0 8px 20px rgba(20, 35, 60, 0.12);
-    background: #ffffff;
+    background: var(--ui-surface);
     padding: 10px;
 }
 

Web/templates/register.html

@@ -70,27 +70,6 @@
                     </div>
                 </div>
 
-                {% if student_cards_module_enabled %}
-                <div class="form-group">
-                    <label style="display:flex; align-items:center; gap:8px; color:#1f2937;">
-                        <input type="checkbox" id="is-student" name="is_student" style="width:auto;">
-                        Schülerkonto mit Ausweis
-                    </label>
-                    <div id="student-fields" style="display:none; margin-top:10px;">
-                        <label for="student-card-id">Ausweis-ID</label>
-                        <div class="input-container">
-                            <span class="input-icon">🪪</span>
-                            <input type="text" id="student-card-id" name="student_card_id" placeholder="z.B. S-2026-001">
-                        </div>
-                        <label for="max-borrow-days" style="margin-top:10px;">Standard-Ausleihdauer (Tage)</label>
-                        <div class="input-container">
-                            <span class="input-icon">📅</span>
-                            <input type="number" id="max-borrow-days" name="max_borrow_days" min="1" max="{{ student_max_borrow_days }}" value="{{ student_default_borrow_days }}">
-                        </div>
-                    </div>
-                </div>
-                {% endif %}
-
                 <div class="form-group">
                     <label for="permission-preset">Berechtigungs-Preset</label>
                     <select id="permission-preset" name="permission_preset" class="form-select">
@@ -561,25 +540,6 @@ document.addEventListener('DOMContentLoaded', function () {
         passwordInput.addEventListener('blur', updatePasswordRules);
         updatePasswordRules();
     }
-
-    {% if student_cards_module_enabled %}
-    const studentCheckbox = document.getElementById('is-student');
-    const studentFields = document.getElementById('student-fields');
-    const studentCardInput = document.getElementById('student-card-id');
-
-    if (!studentCheckbox || !studentFields || !studentCardInput) {
-        return;
-    }
-
-    function toggleStudentFields() {
-        const isChecked = studentCheckbox.checked;
-        studentFields.style.display = isChecked ? 'block' : 'none';
-        studentCardInput.required = isChecked;
-    }
-
-    studentCheckbox.addEventListener('change', toggleStudentFields);
-    toggleStudentFields();
-    {% endif %}
 });
 </script>
 {% endblock %}

flask.pid

@@ -0,0 +1 @@
+394722