Enhance booking user decryption and improve item modal styling

Web/app.py

@@ -5918,6 +5918,11 @@ def get_bookings():
 
         result = []
         for booking in bookings:
+            raw_booking_user = booking.get('User') or ''
+            try:
+                booking_user = decrypt_text(raw_booking_user) if raw_booking_user else ''
+            except Exception:
+                booking_user = str(raw_booking_user)
             start_dt = booking.get('Start')
             if not start_dt:
                 continue
@@ -5960,10 +5965,10 @@ def get_bookings():
                 '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 ''),
+                'userName': str(booking_user),
                 'notes': str(booking.get('Notes') or ''),
                 'period': period,
-                'isCurrentUser': str(booking.get('User') or '') == username,
+                'isCurrentUser': str(booking_user) == username,
                 'itemBorrower': item_borrower,
             })
 
@@ -7911,9 +7916,14 @@ def get_planned_bookings(item_id):
         cursor = ausleihungen.find({'Item': item_id, 'Status': 'planned'}).sort('Start', 1)
         bookings = []
         for r in cursor:
+            raw_user = r.get('User') or ''
+            try:
+                booking_user = decrypt_text(raw_user) if raw_user else ''
+            except Exception:
+                booking_user = str(raw_user)
             bookings.append({
                 'id': str(r.get('_id')),
-                'user': r.get('User', ''),
+                'user': booking_user,
                 'period': r.get('Period'),
                 'start': r.get('Start').isoformat() if r.get('Start') else None,
                 'end': r.get('End').isoformat() if r.get('End') else None,
@@ -7940,7 +7950,13 @@ def get_planned_bookings_public(item_id):
         cursor = ausleihungen.find({'Item': item_id, 'Status': 'planned'}).sort('Start', 1)
         bookings = []
         for r in cursor:
+            raw_user = r.get('User') or ''
+            try:
+                booking_user = decrypt_text(raw_user) if raw_user else ''
+            except Exception:
+                booking_user = str(raw_user)
             bookings.append({
+                'user': booking_user,
                 'period': r.get('Period'),
                 'start': r.get('Start').isoformat() if r.get('Start') else None,
                 'end': r.get('End').isoformat() if r.get('End') else None
@@ -7990,8 +8006,12 @@ def check_availability():
         items_col = db['items']
 
         # Collect potential conflicts (planned and active) for this day
-        same_day_start = datetime.datetime.combine(booking_date.date(), datetime.time.min)
-        same_day_end = datetime.datetime.combine(booking_date.date(), datetime.time.max)
+        same_day_start = datetime.datetime.combine(
+            booking_date.date(), datetime.time.min, tzinfo=ZoneInfo("Europe/Berlin")
+        )
+        same_day_end = datetime.datetime.combine(
+            booking_date.date(), datetime.time.max, tzinfo=ZoneInfo("Europe/Berlin")
+        )
         candidates = list(ausleihungen.find({
             'Item': item_id,
             'Status': {'$in': ['planned', 'active']},
@@ -8009,6 +8029,8 @@ def check_availability():
             if r_start is None:
                 r_start = same_day_start
             # Overlap check: req_start < r_end and req_end > r_start
+            r_start = au.ensure_timezone_aware(r_start)
+            r_end = au.ensure_timezone_aware(r_end)
             if req_start < r_end and req_end > r_start:
                 conflicts.append({
                     'id': str(r.get('_id')),
@@ -8052,18 +8074,20 @@ def plan_booking():
         # Validate inputs
         if not all([item_id, start_date_str, period_start]):
             return {"success": False, "error": "Missing required fields"}, 400
+        if booking_type not in {'single', 'range'}:
+            return {"success": False, "error": "Invalid booking type"}, 400
         if not end_date_str:
             end_date_str = start_date_str
             
         # Parse dates
         try:
             if start_date_str:
-                start_date = datetime.datetime.fromisoformat(start_date_str)
+                start_date = datetime.datetime.fromisoformat(start_date_str).replace(tzinfo=None)
             else:
                 return {"success": False, "error": "Missing start date"}, 400
             
             if end_date_str:
-                end_date = datetime.datetime.fromisoformat(end_date_str)
+                end_date = datetime.datetime.fromisoformat(end_date_str).replace(tzinfo=None)
             else:
                 return {"success": False, "error": "Missing end date"}, 400
             
@@ -8085,16 +8109,23 @@ def plan_booking():
         
         # Handle period range
         periods = []
-        if period_start:
+        try:
             period_start_num = int(period_start)
-        else:
-            period_start_num = 1  # Default if None
+        except (TypeError, ValueError):
+            return {"success": False, "error": "Invalid start period"}, 400
+        if not 1 <= period_start_num <= 10:
+            return {"success": False, "error": "Invalid start period"}, 400
     
         # If period_end is provided, it's a range of periods
         if period_end:
-            period_end_num = int(period_end)
+            try:
+                period_end_num = int(period_end)
+            except (TypeError, ValueError):
+                return {"success": False, "error": "Invalid end period"}, 400
             
             # Validate period range
+            if not 1 <= period_end_num <= 10:
+                return {"success": False, "error": "Invalid end period"}, 400
             if period_end_num < period_start_num:
                 return {"success": False, "error": "End period cannot be before start period"}, 400
                 
@@ -8104,51 +8135,50 @@ def plan_booking():
             # Single period booking
             periods = [period_start_num]
             
-        # For date range bookings, we'll process each date separately
-        booking_ids = []
-        errors = []
-        
-        # If it's a range of days
-        if booking_type == 'range' and start_date != end_date:
-            current_date = start_date
-            while current_date <= end_date:
-                # For each day in the range
-                day_booking_ids, day_errors = process_day_bookings(
-                    item_id, 
-                    current_date,
-                    periods,
-                    notes
-                )
-                booking_ids.extend(day_booking_ids)
-                errors.extend(day_errors)
-                
-                # Move to next day
-                current_date += datetime.timedelta(days=1)
-        else:
-            # Single day with multiple periods
-            booking_ids, errors = process_day_bookings(
-                item_id,
-                start_date,
-                periods,
-                notes
-            )
-            
-        # Return results
-        if errors:
-            if booking_ids:
-                # Some succeeded, some failed
+        if end_date < start_date:
+            return {"success": False, "error": "End date cannot be before start date"}, 400
+        if booking_type == 'single' and start_date.date() != end_date.date():
+            return {"success": False, "error": "Single bookings must use one date"}, 400
+
+        requested_slots = []
+        current_date = start_date
+        last_date = end_date if booking_type == 'range' else start_date
+        while current_date.date() <= last_date.date():
+            for period in periods:
+                period_times = get_period_times(current_date, period)
+                if not period_times:
+                    return {"success": False, "error": f"Invalid period {period}"}, 400
+                requested_slots.append((current_date.date(), period, period_times))
+            current_date += datetime.timedelta(days=1)
+
+        # Preflight the complete request so conflicts never create partial ranges.
+        for index, (booking_date, period, period_times) in enumerate(requested_slots):
+            if au.check_booking_conflict(item_id, period_times['start'], period_times['end'], period):
                 return {
-                    "success": True, 
-                    "partial": True,
-                    "booking_ids": booking_ids,
-                    "errors": errors
-                }
-            else:
-                # All failed
-                return {"success": False}, 500
-        else:
-            # All succeeded
-            return {"success": True, "booking_ids": booking_ids}
+                    "success": False,
+                    "error": "Booking conflict",
+                    "conflicts": [{"date": booking_date.isoformat(), "period": period}],
+                }, 409
+            for previous_date, previous_period, _ in requested_slots[:index]:
+                if previous_date == booking_date and previous_period == period:
+                    return {"success": False, "error": "Duplicate booking period"}, 400
+
+        booking_ids = []
+        try:
+            for _, period, period_times in requested_slots:
+                booking_id = au.add_planned_booking(
+                    item_id, session['username'], period_times['start'],
+                    period_times['end'], notes, period=period
+                )
+                if not booking_id:
+                    raise RuntimeError(f"Failed to create booking for period {period}")
+                booking_ids.append(str(booking_id))
+        except Exception:
+            for booking_id in booking_ids:
+                au.cancel_ausleihung(booking_id)
+            raise
+
+        return {"success": True, "booking_ids": booking_ids}
             
     except Exception as e:
         import traceback
@@ -8208,7 +8238,7 @@ def add_booking():
     if 'username' not in session:
         return jsonify({'success': False, 'error': 'Not logged in'})
     
-    item_id = html.escape(request.form.get('item_id'))
+    item_id = html.escape((request.form.get('item_id') or '').strip())
     
     # Check if item exists and is reservable
     item = it.get_item(item_id)
@@ -8223,18 +8253,36 @@ def add_booking():
     period = request.form.get('period')
     notes = request.form.get('notes', '')
     
-    # Parse dates as naive datetime objects
+    # Form timestamps represent local school time.
     try:
-        # Simple datetime parsing without timezone
         if start_date_str:
-            start_date = datetime.datetime.strptime(start_date_str, '%Y-%m-%d %H:%M:%S')
+            start_date = datetime.datetime.strptime(
+                start_date_str, '%Y-%m-%d %H:%M:%S'
+            ).replace(tzinfo=ZoneInfo("Europe/Berlin"))
         else:
             return jsonify({'success': False, 'error': 'Missing start date'})
         
         if end_date_str:
-            end_date = datetime.datetime.strptime(end_date_str, '%Y-%m-%d %H:%M:%S')
+            end_date = datetime.datetime.strptime(
+                end_date_str, '%Y-%m-%d %H:%M:%S'
+            ).replace(tzinfo=ZoneInfo("Europe/Berlin"))
         else:
-            end_date = None
+            return jsonify({'success': False, 'error': 'Missing end date'}), 400
+
+        if end_date <= start_date:
+            return jsonify({'success': False, 'error': 'End date must be after start date'}), 400
+
+        period_value = None
+        if period not in (None, ''):
+            try:
+                period_value = int(period)
+            except (TypeError, ValueError):
+                return jsonify({'success': False, 'error': 'Invalid period'}), 400
+            if not 1 <= period_value <= 10:
+                return jsonify({'success': False, 'error': 'Invalid period'}), 400
+
+        if au.check_booking_conflict(item_id, start_date, end_date, period_value):
+            return jsonify({'success': False, 'error': 'Booking conflict'}), 409
         
         # Continue with adding the booking
         booking_id = au.add_planned_booking(
@@ -8243,12 +8291,15 @@ def add_booking():
             start_date=start_date,
             end_date=end_date,
             notes=notes,
-            period=period
+            period=period_value
         )
-        
+
+        if not booking_id:
+            return jsonify({'success': False, 'error': 'Failed to create booking'}), 500
         return jsonify({'success': True, 'booking_id': str(booking_id)})
     except Exception as e:
-        return jsonify({'success': False})
+        app.logger.error(f"Error creating booking: {e}")
+        return jsonify({'success': False, 'error': 'Invalid booking data'}), 400
 
 @app.route('/cancel_booking/<id>', methods=['POST'])
 def cancel_booking(id):
@@ -8267,11 +8318,12 @@ def cancel_booking(id):
     current_permissions = us.get_effective_permissions(session['username'])
     
     # Check if user owns this booking
-    if booking.get('User') != session['username'] and not current_permissions['actions'].get('can_manage_users', False):
+    booking_user = au.dp.decrypt_text(booking.get('User')) if booking.get('User') else ''
+    if booking_user != session['username'] and not current_permissions['actions'].get('can_manage_users', False):
                return {"success": False, "error": "Not authorized to cancel this booking"}, 403
     
     # Cancel the booking
-    result = au.cancel_booking(id)
+    result = au.cancel_ausleihung(id)
     
     if result:
         return {"success": True}
@@ -11274,12 +11326,14 @@ def get_period_times(booking_date, period_num):
         # Create datetime objects for start and end times
         start_datetime = datetime.datetime.combine(
             booking_date.date(),
-            datetime.time(start_hour, start_min)
+            datetime.time(start_hour, start_min),
+            tzinfo=ZoneInfo("Europe/Berlin")
         )
         
         end_datetime = datetime.datetime.combine(
             booking_date.date(),
-            datetime.time(end_hour, end_min)
+            datetime.time(end_hour, end_min),
+            tzinfo=ZoneInfo("Europe/Berlin")
         )
         
         return {
@@ -12273,7 +12327,11 @@ def cancel_ausleihung_route(id):
             
         # Log ausleihung details for debugging
         ausleihung_status = ausleihung.get('Status', 'unknown')
-        ausleihung_user = ausleihung.get('User', 'unknown')
+        raw_ausleihung_user = ausleihung.get('User', '')
+        try:
+            ausleihung_user = decrypt_text(raw_ausleihung_user) if raw_ausleihung_user else ''
+        except Exception:
+            ausleihung_user = str(raw_ausleihung_user or '')
         print(f"Found ausleihung: ID={id}, Status={ausleihung_status}")
 
         current_permissions = us.get_effective_permissions(session['username'])

Web/modules/database/ausleihung.py

@@ -42,12 +42,12 @@ def _get_client():
     return MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
 # Add this helper function after imports
 def ensure_timezone_aware(dt):
-    """Ensures a datetime is timezone-aware, using UTC if naive"""
+    """Return a timezone-aware datetime, treating naive DB values as UTC."""
     if dt is None:
         return None
     if dt.tzinfo is None:
-        # Treat naive datetimes as UTC
-        return dt.replace(tzinfo=None)
+        # PyMongo returns BSON datetimes as naive UTC unless tz_aware is enabled.
+        return dt.replace(tzinfo=datetime.timezone.utc)
     return dt
 
 def get_current_status(ausleihung, log_changes=False, user=None):
@@ -82,8 +82,8 @@ def get_current_status(ausleihung, log_changes=False, user=None):
         return 'completed'
     
     current_time = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
-    start_time = ausleihung.get('Start')
-    end_time = ausleihung.get('End')
+    start_time = ensure_timezone_aware(ausleihung.get('Start'))
+    end_time = ensure_timezone_aware(ausleihung.get('End'))
     
     # Wenn kein Startdatum vorhanden ist, Status auf 'planned' setzen
     if not start_time:
@@ -353,7 +353,7 @@ def cancel_ausleihung(id):
 
         # Mark the booking as cancelled
         result = ausleihungen.update_one(
-            {'_id': ObjectId(id)},
+            {'_id': ObjectId(id), 'Status': {'$in': ['planned', 'active']}},
             {'$set': {
                 'Status': 'cancelled',
                 'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
@@ -367,6 +367,16 @@ def cancel_ausleihung(id):
         return False
 
 
+def get_booking(id):
+    """Compatibility wrapper for the booking route."""
+    return get_ausleihung(id)
+
+
+def cancel_booking(id):
+    """Compatibility wrapper for the booking route."""
+    return cancel_ausleihung(id)
+
+
 def remove_ausleihung(id):
     """
     Markiert einen Ausleihungsdatensatz als gelöscht (Soft-Delete).

Web/templates/base.html

@@ -1136,7 +1136,7 @@
                         </li>
                         {% endif %}
                         <li class="nav-item" data-nav-fixed="true">
-                            <button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
+                            <button type="button" class="btn btn-link nav-link px-3" data-theme-toggle aria-label="Dark Mode umschalten" aria-pressed="false" title="Theme umschalten">
                                 <span class="theme-icon-light" style="display: none;">☀️</span>
                                 <span class="theme-icon-dark" style="display: none;">🌙</span>
                             </button>
@@ -1229,7 +1229,7 @@
                         {% endif %}
                         {% endif %}
                         <li class="nav-item" data-nav-fixed="true">
-                            <button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
+                            <button type="button" class="btn btn-link nav-link px-3" data-theme-toggle aria-label="Dark Mode umschalten" aria-pressed="false" title="Theme umschalten">
                                 <span class="theme-icon-light" style="display: none;">☀️</span>
                                 <span class="theme-icon-dark" style="display: none;">🌙</span>
                             </button>
@@ -1358,7 +1358,7 @@
                         </li>
                         {% endif %}
                         <li class="nav-item" data-nav-fixed="true">
-                            <button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
+                            <button type="button" class="btn btn-link nav-link px-3" data-theme-toggle aria-label="Dark Mode umschalten" aria-pressed="false" title="Theme umschalten">
                                 <span class="theme-icon-light" style="display: none;">☀️</span>
                                 <span class="theme-icon-dark" style="display: none;">🌙</span>
                             </button>
@@ -2345,33 +2345,56 @@
 
     <!-- Theme Toggle Script -->
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const toggleBtns = document.querySelectorAll('#themeToggleBtn');
-            if (toggleBtns.length === 0) return;
-            
-            function updateIcons(theme) {
-                const isDark = theme === 'dark';
-                document.querySelectorAll('.theme-icon-light').forEach(icon => icon.style.display = isDark ? 'inline' : 'none');
-                document.querySelectorAll('.theme-icon-dark').forEach(icon => icon.style.display = isDark ? 'none' : 'inline');
+        (function () {
+            const root = document.documentElement;
+            const metaThemeColor = document.getElementById('meta-theme-color');
+            const themeToggleSelector = '[data-theme-toggle]';
+
+            function getTheme() {
+                return root.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
             }
 
-            // Get current setup from initial script in head
-            let currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
-            updateIcons(currentTheme);
+            function updateThemeUi(theme) {
+                const isDark = theme === 'dark';
+                document.querySelectorAll('.theme-icon-light').forEach(icon => {
+                    icon.style.display = isDark ? 'inline' : 'none';
+                });
+                document.querySelectorAll('.theme-icon-dark').forEach(icon => {
+                    icon.style.display = isDark ? 'none' : 'inline';
+                });
+                document.querySelectorAll(themeToggleSelector).forEach(button => {
+                    button.setAttribute('aria-pressed', String(isDark));
+                    button.setAttribute('aria-label', isDark ? 'Light Mode einschalten' : 'Dark Mode einschalten');
+                    button.setAttribute('title', isDark ? 'Light Mode einschalten' : 'Dark Mode einschalten');
+                });
+                if (metaThemeColor) {
+                    metaThemeColor.setAttribute('content', isDark ? '#1a252f' : '#2c3e50');
+                }
+            }
 
-            toggleBtns.forEach(btn => {
-                btn.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    currentTheme = currentTheme === 'light' ? 'dark' : 'light';
-                    
-                    document.documentElement.setAttribute('data-theme', currentTheme);
-                    localStorage.setItem('inventarsystem-theme', currentTheme);
-                    document.getElementById('meta-theme-color').setAttribute('content', currentTheme === 'dark' ? '#1a252f' : '#2c3e50');
-                    
-                    updateIcons(currentTheme);
+            function applyTheme(theme, persist) {
+                const normalizedTheme = theme === 'dark' ? 'dark' : 'light';
+                root.setAttribute('data-theme', normalizedTheme);
+                if (persist) {
+                    try {
+                        localStorage.setItem('inventarsystem-theme', normalizedTheme);
+                    } catch (error) {
+                        console.warn('Theme konnte nicht gespeichert werden:', error);
+                    }
+                }
+                updateThemeUi(normalizedTheme);
+            }
+
+            document.addEventListener('DOMContentLoaded', function () {
+                updateThemeUi(getTheme());
+                document.addEventListener('click', function (event) {
+                    const button = event.target.closest(themeToggleSelector);
+                    if (!button) return;
+                    event.preventDefault();
+                    applyTheme(getTheme() === 'dark' ? 'light' : 'dark', true);
                 });
             });
-        });
+        })();
     </script>
     <script>
         (function () {

Web/templates/main_admin.html

@@ -4063,21 +4063,29 @@ 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 var(--ui-border);border-radius:8px;padding:10px;background:var(--ui-surface);display:grid;gap:6px;">
-                        <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;">
-                            <span style="display:inline-block;padding:2px 8px;border-radius:999px;font-size:0.75rem;font-weight:700;${badgeStyle}">${badgeText}</span>
-                            <span style="font-size:0.84rem;color:#475569;">${entry.dateLabel}</span>
+                    <div class="damage-history-entry ${entry.type === 'repair' ? 'is-repair' : 'is-report'}">
+                        <div class="damage-history-entry-head">
+                            <span class="damage-history-badge" style="${badgeStyle}">${badgeText}</span>
+                            <time>${entry.dateLabel}</time>
                         </div>
-                        <div style="font-size:0.9rem;color:#0f172a;"><strong>Von:</strong> ${entry.actor}</div>
-                        <div style="font-size:0.92rem;color:#1f2937;">${entry.description}</div>
-                        ${metaLine}
+                        <div class="damage-history-actor"><strong>Von</strong>${entry.actor}</div>
+                        <div class="damage-history-description">${entry.description}</div>
+                        ${entry.meta ? `<div class="damage-history-meta">${escapeHtml(entry.meta)}</div>` : ''}
                     </div>
                 `;
             }).join('')
             : '<div style="font-size:0.92rem;color:#64748b;">Keine Beschädigungs-Historie vorhanden.</div>';
         
         modalContent.innerHTML = `
-            <h2>${escapeHtml(item.Name || '')}</h2>
+            <div class="item-modal-heading">
+                <div>
+                    <span class="item-modal-eyebrow">Objektdetails</span>
+                    <h2>${escapeHtml(item.Name || '')}</h2>
+                </div>
+                <span class="item-modal-status ${isBorrowed ? 'is-borrowed' : 'is-available'}">
+                    <span class="item-modal-status-dot"></span>${isBorrowed ? 'Ausgeliehen' : 'Verfügbar'}
+                </span>
+            </div>
             ${borrowerInfoHtml}
             ${appointmentInfoHtml}
                 
@@ -4090,7 +4098,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 ` : ''}
             </div>
 
-            <div class="modal-details">
+            <div class="modal-details item-modal-details">
                 <div class="detail-group">
                     <div class="detail-label">Ort:</div>
                     <div class="detail-value">${escapeHtml(item.Ort || '-')}</div>
@@ -4145,22 +4153,22 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 </div>
             
                 {% if current_permissions.actions.get('can_view_logs', False) %}
-                <div class="detail-group full-width" style="margin-top:12px;">
+                <div class="detail-group full-width item-modal-history" style="margin-top:12px;">
                     <div class="detail-label" style="font-weight:600; color:#374151;">Beschädigungs-Historie</div>
                     <div class="detail-value">
-                        <button id="toggle-damage-history" class="calendar-toggle-btn" style="margin-bottom:12px; padding:10px 16px; border-radius:6px; background:#f3f4f6; border:1px solid #d1d5db; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all 0.2s ease;">
+                        <button id="toggle-damage-history" class="calendar-toggle-btn modal-section-toggle" style="margin-bottom:12px;">
                             <span>🛠️</span>
                             <span id="toggle-damage-history-text">Historie anzeigen</span>
                         </button>
-                        <div id="damage-history-panel" style="display:none; margin-top:8px; border:1px solid #e7edf5; border-radius:10px; padding:12px; background: var(--ui-surface-soft);">
-                            <div style="display:grid; gap:10px;">${damageHistoryHtml}</div>
+                        <div id="damage-history-panel" class="modal-history-panel" style="display:none;">
+                            <div class="damage-history-list">${damageHistoryHtml}</div>
                         </div>
                     </div>
                 </div>
                 {% endif %}
             
                 <div class="detail-group full-width" style="margin-top:12px; padding:10px; border:1px solid #e3e3e3; border-radius:8px;">
-                    <div class="detail-label">Verfügbarkeit prüfen:</div>
+                    <div class="detail-label">Verfügbarkeit prüfen</div>
                     <div class="detail-value">
                         <div style="display:flex; flex-wrap:wrap; gap:8px; align-items:center;">
                             <input type="date" id="avail-date" style="padding:6px;">
@@ -4180,10 +4188,10 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 </div>
             </div>
         
-            <div class="detail-group full-width" style="margin-top:15px;">
+            <div class="detail-group full-width item-modal-bookings" style="margin-top:15px;">
                 <div class="detail-label">Geplante Ausleihen:</div>
                 <div class="detail-value">
-                    <button id="toggle-bookings" class="calendar-toggle-btn" style="margin-bottom:12px; padding:10px 16px; border-radius:6px; background:#f3f4f6; border:1px solid #d1d5db; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all 0.2s ease;">
+                    <button id="toggle-bookings" class="calendar-toggle-btn modal-section-toggle" style="margin-bottom:12px;">
                         <span>📅</span>
                         <span id="toggle-bookings-text">Kalender anzeigen</span>
                     </button>
@@ -5381,5 +5389,308 @@ document.addEventListener('DOMContentLoaded', ()=>{
         border-radius: 10px !important;
     }
 }
+
+/* Detailed item modal: compact hierarchy and calm information density. */
+#item-modal .modal-content {
+    width: min(94vw, 880px);
+    max-width: 880px;
+    margin: 4vh auto;
+    padding: 0;
+    overflow: hidden;
+    border: 1px solid #d8e1eb;
+    border-radius: 16px;
+    background: var(--ui-surface);
+    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
+}
+
+#item-modal .modal-content > *:not(.item-modal-heading):not(.modal-image-container):not(.modal-details):not(.modal-actions) {
+    margin-left: 28px;
+    margin-right: 28px;
+}
+
+#item-modal .item-modal-heading {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 18px;
+    padding: 26px 30px 22px;
+    border-bottom: 1px solid #e6edf4;
+    background: linear-gradient(180deg, #f8fbfe 0%, var(--ui-surface) 100%);
+}
+
+#item-modal .item-modal-eyebrow {
+    display: block;
+    margin-bottom: 5px;
+    color: #708197;
+    font-size: 0.72rem;
+    font-weight: 800;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+}
+
+#item-modal .item-modal-heading h2 {
+    margin: 0;
+    color: #172536;
+    font-size: clamp(1.25rem, 2.5vw, 1.7rem);
+    line-height: 1.2;
+    text-align: left;
+    overflow-wrap: anywhere;
+}
+
+#item-modal .item-modal-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    flex: 0 0 auto;
+    margin-top: 5px;
+    padding: 6px 10px;
+    border: 1px solid;
+    border-radius: 999px;
+    font-size: 0.78rem;
+    font-weight: 800;
+    white-space: nowrap;
+}
+
+#item-modal .item-modal-status.is-available {
+    color: #17633b;
+    border-color: #b9e2ca;
+    background: #effaf3;
+}
+
+#item-modal .item-modal-status.is-borrowed {
+    color: #9b3d32;
+    border-color: #f2c5bf;
+    background: #fff4f2;
+}
+
+#item-modal .item-modal-status-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: currentColor;
+}
+
+#item-modal .modal-image-container {
+    min-height: 180px;
+    margin: 0;
+    padding: 22px 28px;
+    border-radius: 0;
+    background: #f4f7fa;
+}
+
+#item-modal .modal-image {
+    max-height: 320px;
+    border-radius: 10px;
+    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+}
+
+#item-modal .item-modal-details {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0 22px;
+    margin: 0;
+    padding: 24px 28px 4px;
+}
+
+#item-modal .item-modal-details .detail-group {
+    display: block;
+    min-width: 0;
+    margin: 0;
+    padding: 12px 0;
+    border-bottom: 1px solid #edf1f5;
+}
+
+#item-modal .item-modal-details .detail-label {
+    min-width: 0;
+    margin: 0 0 4px;
+    color: #718096;
+    font-size: 0.72rem;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+#item-modal .item-modal-details .detail-value {
+    min-width: 0;
+    color: #243447;
+    font-size: 0.95rem;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+}
+
+#item-modal .item-modal-details .detail-group.full-width,
+#item-modal .item-modal-details .item-modal-history,
+#item-modal .item-modal-details .item-modal-bookings {
+    grid-column: 1 / -1;
+}
+
+#item-modal .item-modal-details .detail-group.full-width .detail-value {
+    padding: 12px 14px;
+    border: 1px solid #e1e8ef;
+    border-radius: 9px;
+    background: #f8fafc;
+}
+
+#item-modal .item-modal-details .item-modal-history,
+#item-modal .item-modal-details .item-modal-bookings {
+    margin-top: 12px !important;
+    padding: 16px;
+    border: 1px solid #dfe7ef;
+    border-radius: 12px;
+    background: #fbfcfd;
+}
+
+#item-modal .modal-section-toggle {
+    min-height: 38px;
+    margin: 0 0 12px !important;
+    padding: 8px 12px;
+    border: 1px solid #cdd8e3;
+    border-radius: 8px;
+    background: var(--ui-surface);
+    color: #36516c;
+    font-size: 0.86rem;
+    font-weight: 750;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+#item-modal .modal-section-toggle:hover {
+    border-color: #9db6cc;
+    background: #f1f6fa;
+}
+
+#item-modal .modal-history-panel {
+    margin-top: 4px;
+    padding: 12px;
+    border: 1px solid #e2e9f0;
+    border-radius: 10px;
+    background: #f5f8fb;
+}
+
+#item-modal .damage-history-list {
+    display: grid;
+    gap: 9px;
+}
+
+#item-modal .damage-history-entry {
+    position: relative;
+    display: grid;
+    gap: 7px;
+    padding: 12px 14px 12px 17px;
+    border: 1px solid #dce5ed;
+    border-radius: 9px;
+    background: var(--ui-surface);
+}
+
+#item-modal .damage-history-entry::before {
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 3px;
+    content: '';
+    border-radius: 9px 0 0 9px;
+    background: #e35d54;
+}
+
+#item-modal .damage-history-entry.is-repair::before {
+    background: #3aa76d;
+}
+
+#item-modal .damage-history-entry-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+#item-modal .damage-history-badge {
+    padding: 3px 8px;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 800;
+}
+
+#item-modal .damage-history-entry time,
+#item-modal .damage-history-meta {
+    color: #738196;
+    font-size: 0.78rem;
+}
+
+#item-modal .damage-history-actor {
+    display: flex;
+    gap: 5px;
+    color: #425466;
+    font-size: 0.84rem;
+}
+
+#item-modal .damage-history-actor strong {
+    color: #718096;
+    font-weight: 700;
+}
+
+#item-modal .damage-history-description {
+    color: #243447;
+    font-size: 0.91rem;
+    line-height: 1.4;
+}
+
+#item-modal .modal-actions {
+    justify-content: flex-end;
+    gap: 9px;
+    margin: 0;
+    padding: 18px 28px 24px;
+    border-top: 1px solid #e6edf4;
+    background: #fbfcfd;
+}
+
+@media (max-width: 640px) {
+    #item-modal .modal-content {
+        width: calc(100vw - 18px);
+        margin: 9px auto;
+        border-radius: 13px;
+    }
+
+    #item-modal .item-modal-heading {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 10px;
+        padding: 21px 20px 17px;
+    }
+
+    #item-modal .item-modal-status {
+        margin-top: 0;
+    }
+
+    #item-modal .modal-image-container {
+        padding: 16px 18px;
+    }
+
+    #item-modal .item-modal-details {
+        grid-template-columns: 1fr;
+        gap: 0;
+        padding: 16px 18px 0;
+    }
+
+    #item-modal .item-modal-details .detail-group.full-width,
+    #item-modal .item-modal-details .item-modal-history,
+    #item-modal .item-modal-details .item-modal-bookings {
+        grid-column: auto;
+    }
+
+    #item-modal .item-modal-details .item-modal-history,
+    #item-modal .item-modal-details .item-modal-bookings {
+        padding: 13px;
+    }
+
+    #item-modal .modal-actions {
+        justify-content: stretch;
+        padding: 15px 18px 19px;
+    }
+
+    #item-modal .modal-actions > *,
+    #item-modal .modal-actions form,
+    #item-modal .modal-actions button {
+        flex: 1 1 100%;
+        width: 100%;
+    }
+}
 </style>
 {% endblock %}