changes to the user processing in the api_item_datail Function

Zusätzlich wurde die Item-Suche robuster gemacht:

Vergleich gegen Benutzername
Vergleich gegen Benutzer-ObjectId
Vergleich gegen session['user_id']
Unterstützung für verschlüsselte und unverschlüsselte Benutzerwerte
Unterstützung für Item-IDs als String und als MongoDB-ObjectId
Geändert wurde:

Web/app.py

.github/workflows/release-docker.yml

@@ -150,10 +150,7 @@ jobs:
             LATEST_MAJOR="0"
           fi
 
-          if [ "${BUMP_TYPE:-}" != "major" ] && [ "$TAG_MAJOR" != "$LATEST_MAJOR" ]; then
-            echo "Error: major version must stay v$LATEST_MAJOR.x.x (got $TAG)"
-            exit 1
-          fi
+          
 
           if git rev-parse -q --verify "refs/tags/$TAG" >/dev/null; then
             i=1

Legal/TEST_AUSLEIHUNG.md

@@ -20,13 +20,19 @@ pytest test_ausleihung.py -vv --tb=long
 
 ## Test Coverage
 
-### ✅ Status Determination (5 tests)
+### ✅ Status Determination
 - Future borrowings marked as 'planned'
 - Current borrowings marked as 'active'
-- Past borrowings marked as 'completed'
+- Active borrowings remain 'active' after the planned end until return confirmation
 - Cancelled status never changes
 - Active borrowings without end time
 
+### ✅ Inventory borrowing workflow
+- Planned inventory borrowings activate automatically at their start when the item is available
+- Unavailable items remain planned and notify the requester and current holder
+- Reaching the planned end creates a return warning instead of an automatic return
+- The item is completed and made available only after the user confirms the return
+
 ### ✅ Create Operations (2 tests)
 - Create immediately active borrowing
 - Create planned/future borrowing

Web/modules/database/ausleihung.py

@@ -15,7 +15,8 @@ Hauptfunktionen:
 
 Sammlungsstruktur:
 - ausleihungen: Speichert alle Ausleihungsdatensätze mit ihrem Status
-  - Status-Werte: 'planned' (geplant), 'active' (aktiv), 'completed' (abgeschlossen), 'cancelled' (storniert)
+  - Status-Werte: 'planned' (geplant), 'active' (aktiv), 'completed' (nach bestätigter Rückgabe), 'cancelled' (storniert)
+  - Das geplante Ende beendet eine aktive Ausleihe nicht automatisch; es erzeugt einen Rückgabehinweis.
 """
 '''
    Copyright 2025-2026 AIIrondev
@@ -96,13 +97,10 @@ def get_current_status(ausleihung, log_changes=False, user=None):
             ausleihung_id = str(ausleihung.get('_id', 'unknown'))[:12]
             print(f"[DEBUG] Ausleihe {ausleihung_id} startet in {time_until_start/3600:.1f} Stunden ({start_time}), noch geplant")
         new_status = 'planned'
-    # Wenn kein Enddatum gesetzt ist oder die aktuelle Zeit vor dem Enddatum liegt,
-    # ist die Ausleihung aktiv
-    elif not end_time or current_time < end_time:
-        new_status = 'active'
-    # Wenn die aktuelle Zeit nach dem Enddatum liegt, ist die Ausleihung beendet
+    # Eine aktive Ausleihe bleibt aktiv, bis die Rückgabe ausdrücklich bestätigt
+    # wurde. Das geplante Ende löst nur einen Rückgabehinweis aus.
     else:
-        new_status = 'completed'
+        new_status = 'active'
     
     # Protokollieren Sie Statusänderungen, wenn aktiviert und eine Änderung stattgefunden hat
     if log_changes and new_status != original_status and '_id' in ausleihung:
@@ -185,13 +183,13 @@ def create_backup_database():
 
 # === AUSLEIHUNG MANAGEMENT ===
 
-def add_ausleihung(item_id, user, start_date, end_date=None, notes="", status="active", period=None, exemplar_data=None, due_date=None):
+def add_ausleihung(item_id, user_id, start_date, end_date=None, notes="", status="active", period=None, exemplar_data=None, due_date=None):
     """
     Add a new borrowing record for an item.
     
     Args:
         item_id (str): ID of the item borrowed
-        user (str): Username of the borrower
+        user_id (str): ID of the borrower
         start_date (datetime): Start date and time of the borrowing
         end_date (datetime, optional): End date and time if already returned
         notes (str, optional): Additional notes about the borrowing
@@ -209,7 +207,7 @@ def add_ausleihung(item_id, user, start_date, end_date=None, notes="", status="a
 
         ausleihung = {
             'Item': item_id,
-            'User': dp.encrypt_text(user),
+            'User': str(user_id),
             'Start': start_date,
             'Status': status
         }
@@ -256,8 +254,7 @@ def update_ausleihung(id, item_id=None, user_id=None, start=None, end=None, note
         if item_id is not None:
             update_data['Item'] = item_id
         if user_id is not None:
-            # WICHTIG: Gleiche Verschlüsselung wie in add_ausleihung nutzen!
-            update_data['User'] = dp.encrypt_text(user_id) if hasattr(dp, 'encrypt_text') else user_id
+            update_data['User'] = str(user_id)
         if start is not None:
             update_data['Start'] = ensure_timezone_aware(start)
         if end is not None:
@@ -353,7 +350,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 +364,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).
@@ -546,9 +553,7 @@ def get_ausleihung_by_user(user_id, status=None, use_client_side_verification=Tr
             db = client[cfg.MONGODB_DB]
             ausleihungen = db['ausleihungen']
 
-            # Ensure proper encrypted query string if user IDs are encrypted in DB
-            search_user = dp.encrypt_text(user_id) if hasattr(dp, 'encrypt_text') else user_id
-            query = {'User': search_user, 'Status': {'$ne': 'deleted'}}
+            query = {'User': str(user_id), 'Status': {'$ne': 'deleted'}}
 
             if not use_client_side_verification:
                 if status is not None:
@@ -854,8 +859,8 @@ def reset_item_completely(item_id):
 
 # === KOMPATIBILITÄTSFUNKTIONEN ===
 
-def add_planned_booking(item_id, user, start_date, end_date, notes="", period=None):
-    return add_ausleihung(item_id, user, start_date, end_date, notes, status='planned', period=period)
+def add_planned_booking(item_id, user_id, start_date, end_date, notes="", period=None):
+    return add_ausleihung(item_id, user_id, start_date, end_date, notes, status='planned', period=period)
 
 
 def check_booking_conflict(item_id, start_date, end_date, period=None):

Web/modules/database/user.py

@@ -431,15 +431,14 @@ def check_password_strength(password):
     if password is None:
         return False
 
-    if len(password) < 12:
+    if len(password) < 5:
         return False
 
     has_lower = any(char.islower() for char in password)
     has_upper = any(char.isupper() for char in password)
     has_digit = any(char.isdigit() for char in password)
-    has_symbol = any(not char.isalnum() for char in password)
 
-    if not (has_lower and has_upper and has_digit and has_symbol):
+    if not (has_lower and has_upper and has_digit):
         return False
     return True
 
@@ -698,7 +697,7 @@ def get_user_by_student_card(student_card_id):
     client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
     db = _get_tenant_db(client)
     users = db['student_cards']
-    found_user = users.find_one({'SchülerName': normalized})
+    found_user = users.find_one({'AusweisId': normalized})
     client.close()
 
     # Do not call dp.decrypt_text() here because found_user is a MongoDB dictionary.

Web/modules/emailservice/email.py

@@ -1,5 +1,6 @@
 from email.mime.multipart import MIMEMultipart
 from email.mime.text import MIMEText
+from email.mime.application import MIMEApplication
 import smtplib
 import time
 
@@ -8,27 +9,34 @@ import Web.modules.database.settings as cfg
 
 def _build_smtp_client():
     smtp = smtplib.SMTP(
-        cfg.EMAIL_SMTP_HOST,
-        cfg.EMAIL_SMTP_PORT,
-        timeout=cfg.EMAIL_TIMEOUT_SECONDS,
+        "mail.invario-software.de",
+        587,
+        timeout=10,
     )
     smtp.ehlo()
-    if cfg.EMAIL_USE_TLS:
+    if True:
         smtp.starttls()
         smtp.ehlo()
-    if cfg.EMAIL_USERNAME:
-        smtp.login("no-reply@invario-software.de", "#,EATwIn,68" or "")
+    smtp.login("no-reply@invario-software.de", "eSpage,65,{")
     return smtp
 
 
-def send(email: list | str, subject: str, note: str, sender: str) -> bool:
-    """Sends the email with the link to the Clients."""
+
+def _normalize_recipients(email: list | str) -> list[str]:
+    if isinstance(email, str):
+        email = email.replace(';', ',').split(',')
+    return [str(recipient).strip() for recipient in (email or []) if str(recipient).strip()]
+
+
+def _send_message(email: list | str, subject: str, note: str, sender: str, attachment=None) -> bool:
+    """Send a plain/HTML message, optionally with one PDF attachment."""
     if not cfg.MODULES.is_enabled("mail"):
         print("Debug: Module not enabled")
         return False
 
-    if isinstance(email, str):
-        email = [email]
+    recipients = _normalize_recipients(email)
+    if not recipients:
+        return False
 
     body_message = note
 
@@ -63,25 +71,27 @@ def send(email: list | str, subject: str, note: str, sender: str) -> bool:
     try:
         smtp = _build_smtp_client()
 
-        for i, recipient in enumerate(email):
+        for i, recipient in enumerate(recipients):
             start_time = time.time()
 
-            msg = MIMEMultipart("alternative")
+            msg = MIMEMultipart("mixed" if attachment else "alternative")
             msg["Subject"] = str(subject)
-            msg["From"] = f"{sender} <no-reply@invario-software.de>"
+            from_address = "no-reply@invario-software.de"
+            msg["From"] = f"{sender} <{from_address}>"
             msg["To"] = str(recipient)
 
-            msg.attach(MIMEText(text_content, "plain"))
-            msg.attach(MIMEText(html_content, "html"))
-
-            #smtp.sendmail(
-            #    from_addr=cfg.EMAIL_USERNAME,
-            #    to_addrs=[recipient],
-            #    msg=msg.as_string()
-            #)
+            body = MIMEMultipart("alternative") if attachment else msg
+            body.attach(MIMEText(text_content, "plain"))
+            body.attach(MIMEText(html_content, "html"))
+            if attachment:
+                msg.attach(body)
+                attachment_payload, filename = attachment
+                pdf_part = MIMEApplication(attachment_payload, _subtype="pdf")
+                pdf_part.add_header("Content-Disposition", "attachment", filename=filename)
+                msg.attach(pdf_part)
 
             smtp.sendmail(
-                from_addr="no-reply@invario-software.de",
+                from_addr=from_address,
                 to_addrs=[recipient],
                 msg=msg.as_string()
             )
@@ -89,7 +99,7 @@ def send(email: list | str, subject: str, note: str, sender: str) -> bool:
             elapsed_time = time.time() - start_time
             sleep_time = interval - elapsed_time
 
-            if sleep_time > 0 and i < len(email) - 1:
+            if sleep_time > 0 and i < len(recipients) - 1:
                 time.sleep(sleep_time)
 
         return True
@@ -101,4 +111,14 @@ def send(email: list | str, subject: str, note: str, sender: str) -> bool:
             try:
                 smtp.quit()
             except Exception:
-                pass
+                pass
+
+
+def send(email: list | str, subject: str, note: str, sender: str) -> bool:
+    """Send an HTML/plain email without an attachment."""
+    return _send_message(email, subject, note, sender)
+
+
+def send_pdf(email: list | str, subject: str, note: str, sender: str, pdf_bytes: bytes, filename: str) -> bool:
+    """Send an email with a PDF attachment."""
+    return _send_message(email, subject, note, sender, attachment=(pdf_bytes, filename))

Web/modules/terminplaner/blueprint.py

@@ -3,6 +3,7 @@ import Web.modules.terminplaner.backend_server as appointment_service
 import Web.modules.database.settings as cfg
 import Web.modules.database.termine as termin
 import Web.modules.database.user as us
+from Web.modules.emailservice.email import send, send_pdf
 from Web.modules.terminplaner.backend_server import _resolve_public_base_url
 import csv
 import io
@@ -409,7 +410,7 @@ def client_slot_calendar_export(appointment_id):
     return response
 
 
-@appoint_bp.route('/export_pdf_brief/<plan_id>', methods=['GET'])
+@appoint_bp.route('/export_pdf_brief/<plan_id>', methods=['GET', 'POST'])
 def export_pdf_brief(plan_id):
     # 1. Daten holen (Hier als Beispiel, passe dies auf deine Datenbank an)
     # terminplan = Terminplan.query.get(plan_id)
@@ -532,12 +533,35 @@ def export_pdf_brief(plan_id):
     # Buffer auf Anfang zurücksetzen
     pdf_buffer.seek(0)
     
+    pdf_filename = f"Einladung_{plan_daten['titel'].replace(' ', '_')}.pdf"
+    if request.method == 'POST':
+        recipient_email = (request.form.get('recipient_email') or '').strip()
+        if not recipient_email:
+            flash('Bitte eine Empfänger-E-Mail-Adresse eingeben oder nur PDF auswählen.', 'error')
+            return redirect(url_for('terminplaner.main', tenant=tenant_id or None))
+        if not cfg.MODULES.is_enabled('mail'):
+            flash('Das E-Mail-Add-on ist deaktiviert. Der Einladungsbrief kann weiterhin als PDF heruntergeladen werden.', 'warning')
+            return redirect(url_for('terminplaner.main', tenant=tenant_id or None))
+        sent = send_pdf(
+            recipient_email,
+            f'Einladung zur Terminbuchung: {plan_daten["titel"]}',
+            f'Anbei erhalten Sie den Einladungsbrief für {plan_daten["titel"]} als PDF.',
+            'Terminplanungssystem',
+            pdf_buffer.getvalue(),
+            pdf_filename,
+        )
+        flash(
+            'Einladungsbrief wurde per E-Mail versendet.' if sent else 'Einladungsbrief konnte nicht per E-Mail versendet werden.',
+            'success' if sent else 'error',
+        )
+        return redirect(url_for('terminplaner.main', tenant=tenant_id or None))
+
     # An Nutzer ausliefern
     return send_file(
         pdf_buffer,
         mimetype='application/pdf',
         as_attachment=True,
-        download_name=f"Einladung_{plan_daten['titel'].replace(' ', '_')}.pdf"
+        download_name=pdf_filename
     )
 
 @appoint_bp.route('/')
@@ -557,5 +581,6 @@ def main():
         current_user=current_user,
         upcoming_events=upcoming_events,
         tenant_id=tenant_id,
-        appointment_module_enabled=cfg.MODULES.is_enabled('terminplan')
+        appointment_module_enabled=cfg.MODULES.is_enabled('terminplan'),
+        mail_service_enabled=cfg.MODULES.is_enabled('mail')
     )

Web/push_notifications.py

@@ -227,6 +227,10 @@ def send_push_notification(username, title, body, icon=None, url='/', reference=
         sent_count = 0
         
         for subscription in subscriptions:
+            from Web.modules.emailservice.email import send, send_pdf
+            if cfg.MODULES.is_enabled('mail'):
+                #implement the sending
+                pass
             success = _send_to_subscription(
                 subscription,
                 title,

Web/static/css/styles.css

@@ -921,6 +921,42 @@ html, body {
     }
 }
 
+/* iPad layout: keep content airy while using the available tablet width. */
+@media screen and (min-width: 768px) and (max-width: 1180px) {
+    .container {
+        width: min(100% - 32px, 1120px);
+        margin: 16px auto;
+        padding: 20px;
+    }
+
+    .form-control,
+    .form-select,
+    textarea,
+    input,
+    select {
+        min-height: 44px;
+        font-size: 16px;
+    }
+
+    .btn,
+    button,
+    input[type="submit"],
+    input[type="button"] {
+        min-height: 44px;
+        touch-action: manipulation;
+    }
+
+    .table-responsive {
+        border: 1px solid var(--ui-border);
+        border-radius: var(--ui-radius);
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .table-responsive > .table {
+        margin-bottom: 0;
+    }
+}
+
 /* ========================================================= */
 /* UNIVERSAL DARK MODE OVERRIDES FOR HARDCODED HTML STYLES   */
 /* ========================================================= */

Web/templates/admin_audit.html

@@ -110,10 +110,16 @@
     <div class="audit-panel" style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background: var(--ui-surface);">
       <h4 style="margin:0 0 10px 0; color:#1a1a1a;">📄 PDF-Export (DIN 5008 konform)</h4>
       <p style="margin:0 0 10px 0; font-size:0.9rem; color:#666;">Professionelle Berichte für Schulträger und Behörden</p>
-      <div style="display:flex; gap:8px; flex-wrap:wrap;">
+      <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:end;">
         <a class="btn btn-primary" href="{{ url_for('admin_audit_export_pdf_official') }}" style="flex:1; text-align:center;">
           📋 Amtlicher Bericht (DIN 5008)
         </a>
+        {% if mail_module_enabled %}
+        <form method="post" action="{{ url_for('admin_audit_export_pdf_official') }}" style="display:flex; gap:8px; flex:2; flex-wrap:wrap;">
+          <input type="email" name="recipient_email" required placeholder="Empfänger-E-Mail" aria-label="Empfänger-E-Mail für den Auditbericht" style="flex:1; min-width:220px; padding:8px; border:1px solid #cbd5e1; border-radius:6px;">
+          <button class="btn btn-outline-primary" type="submit">PDF per E-Mail senden</button>
+        </form>
+        {% endif %}
       </div>
     </div>
 

Web/templates/admin_borrowings.html

@@ -195,6 +195,13 @@
         <textarea id="damage-reason" name="damage_reason" rows="5" required style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; resize:vertical;" placeholder="Beschreiben Sie kurz den Schaden oder die Zerstörung."></textarea>
       </div>
 
+      {% if email_service_enabled %}
+      <div style="margin-bottom:16px;">
+        <label for="invoice-recipient-email" style="display:block; font-weight:700; margin-bottom:6px;">Empfänger-E-Mail für den PDF-Versand</label>
+        <input id="invoice-recipient-email" name="recipient_email" type="email" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px;" placeholder="name@beispiel.de">
+      </div>
+      {% endif %}
+
       <div style="display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-bottom:18px;">
         <label style="display:flex; align-items:center; gap:8px;">
           <input type="checkbox" name="mark_destroyed" checked>
@@ -208,7 +215,10 @@
 
       <div style="display:flex; justify-content:flex-end; gap:10px;">
         <button type="button" class="btn btn-secondary" onclick="closeInvoiceModal()">Abbrechen</button>
-        <button type="submit" class="btn btn-danger">PDF-Rechnung erstellen</button>
+        <button type="submit" class="btn btn-outline-danger" name="delivery" value="pdf">Nur PDF herunterladen</button>
+        {% if email_service_enabled %}
+        <button type="submit" class="btn btn-danger" name="delivery" value="email">PDF per E-Mail senden</button>
+        {% endif %}
       </div>
     </form>
   </div>

Web/templates/admin_school_settings.html

@@ -78,11 +78,11 @@
                     <div class="form-row">
                         <div class="form-group">
                             <label for="filter_name_1">Name Filter 1</label>
-                            <input type="text" id="filter_name_1" name="filter_name_1" value="{{ filter_names.get('1', 'Klassenstufe') }}" placeholder="z. B. Klassenstufe">
+                            <input type="text" id="filter_name_1" name="filter_name_1" value="{{ filter_names.get('1', 'Fachgebiet') }}" placeholder="z. B. Fachgebiet">
                         </div>
                         <div class="form-group">
                             <label for="filter_name_2">Name Filter 2</label>
-                            <input type="text" id="filter_name_2" name="filter_name_2" value="{{ filter_names.get('2', 'Fach') }}" placeholder="z. B. Fach">
+                            <input type="text" id="filter_name_2" name="filter_name_2" value="{{ filter_names.get('2', 'Klassenstufe') }}" placeholder="z. B. Klassenstufe">
                         </div>
                         <div class="form-group">
                             <label for="filter_name_3">Name Filter 3</label>

Web/templates/base.html

@@ -1135,12 +1135,7 @@
                             <a class="nav-link quick-link-pill {% if current_path == url_for('terminplaner.configure') %}nav-active{% endif %}" href="{{ url_for('terminplaner.configure') }}" data-tutorial-tip="Neuen Terminplan erstellen und an Ihr Team versenden.">Neue Planung</a>
                         </li>
                         {% endif %}
-                        <li class="nav-item" data-nav-fixed="true">
-                            <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>
-                        </li>
+                        
                         <li class="nav-item dropdown ms-lg-auto">
                             <a class="nav-link dropdown-toggle" href="#" id="termMoreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Weitere Optionen">Mehr Optionen</a>
                             <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="termMoreDropdown">
@@ -1199,6 +1194,13 @@
                                     <li><hr class="dropdown-divider"></li>
                                     <li><a class="dropdown-item" href="{{ url_for('change_password') }}">Passwort ändern</a></li>
                                     <li><hr class="dropdown-divider"></li>
+                                    <li class="dropdown-item" data-nav-fixed="true">
+                                        <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>
+                                    </li>
+                                    <li><hr class="dropdown-divider"></li>
                                     <li><a class="dropdown-item" href="{{ url_for('logout') }}">Logout</a></li>
                                 </ul>
                             </div>
@@ -1228,12 +1230,6 @@
                         </li>
                         {% endif %}
                         {% endif %}
-                        <li class="nav-item" data-nav-fixed="true">
-                            <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>
-                        </li>
 
                         <li class="nav-item dropdown ms-lg-auto">
                             <a class="nav-link dropdown-toggle" href="#" id="invMoreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Weitere Optionen">
@@ -1305,8 +1301,6 @@
                                     <button class="function-search-btn" type="submit">Los</button>
                                 </form>
                             </div>
-                            {% if current_tenant_db %}
-                            <span class="navbar-text tenant-badge" title="Aktive Tenant-Datenbank">{{ current_tenant_db }}</span>
                         {% endif %}
                         <span class="navbar-text text-light me-3">{{ session['username'] }}</span>
                             <div class="dropdown me-2 user-menu-wrap">
@@ -1321,6 +1315,13 @@
                                     <li><hr class="dropdown-divider"></li>
                                     <li><a class="dropdown-item" href="{{ url_for('change_password') }}">Passwort ändern</a></li>
                                     <li><hr class="dropdown-divider"></li>
+                                    <li class="dropdown-item" data-nav-fixed="true">
+                                        <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>
+                                    </li>
+                                    <li><hr class="dropdown-divider"></li>
                                     <li><a class="dropdown-item" href="{{ url_for('logout') }}">Logout</a></li>
                                 </ul>
                             </div>
@@ -1329,7 +1330,6 @@
                 </div>
             </div>
         </nav>
-    {% endif %}
 
         {% if library_module_enabled and CURRENT_MODULE == 'library' %}
         <nav class="navbar navbar-expand-lg navbar-dark" id="libraryNavbar">
@@ -1342,27 +1342,23 @@
                     <ul class="navbar-nav me-auto mb-2 mb-lg-0" id="libraryNavList">
                         {% if current_permissions.pages.get('library_view', False) %}
                         <li class="nav-item" data-nav-fixed="true">
-                            <a class="nav-link {% if current_path == url_for('library_view') %}nav-active{% endif %}" href="{{ url_for('library_view') }}" data-tutorial-tip="Die Bibliothek zeigt Ihnen alle Medien und verfügbaren Bücher.">Medien/Ausleihe</a>
+                            <a class="nav-link {% if current_path == url_for('library_view') %}nav-active{% endif %}" href="{{ url_for('library_view') }}" data-tutorial-tip="Die Bibliothek zeigt Ihnen alle Medien und verfügbaren Bücher.">Ausleihe/Rückgabe</a>
                         </li>
                         {% endif %}
                         {% if 'username' in session %}
+                        <!--
                         {% if current_permissions.pages.get('tutorial_page', False) %}
                         <li class="nav-item">
                             <a class="nav-link quick-link-pill {% if current_path == url_for('tutorial_page') %}nav-active{% endif %}" href="{{ url_for('tutorial_page') }}" data-tutorial-tip="Nutzen Sie das Tutorial, um die Bibliotheksfunktionen kennenzulernen.">Tutorial</a>
                         </li>
                         {% endif %}
+                        -->
                         {% endif %}
                         {% if 'username' in session and current_permissions.actions.get('can_insert', False) and current_permissions.pages.get('library_admin', False) %}
                         <li class="nav-item">
                             <a class="nav-link nav-priority-link {% if current_path == url_for('library_admin') %}nav-active{% endif %}" href="{{ url_for('library_admin') }}" data-tutorial-tip="Neue Bibliotheksmedien können hier aufgenommen werden.">📖 Hochladen</a>
                         </li>
                         {% endif %}
-                        <li class="nav-item" data-nav-fixed="true">
-                            <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>
-                        </li>
 
                         <li class="nav-item dropdown ms-lg-auto">
                             <a class="nav-link dropdown-toggle" href="#" id="libMoreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Weitere Optionen">
@@ -1429,6 +1425,13 @@
                                     <li><hr class="dropdown-divider"></li>
                                     <li><a class="dropdown-item" href="{{ url_for('change_password') }}">Passwort ändern</a></li>
                                     <li><hr class="dropdown-divider"></li>
+                                    <li class="dropdown-item" data-nav-fixed="true">
+                                        <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>
+                                    </li>
+                                    <li><hr class="dropdown-divider"></li>
                                     <li><a class="dropdown-item" href="{{ url_for('logout') }}">Logout</a></li>
                                 </ul>
                             </div>
@@ -1630,6 +1633,8 @@
         </div>
     </div>
 
+<!--
+
     <div id="onboarding-overlay" role="dialog" aria-modal="true" aria-label="Tutorial Vorschlag">
         <div id="onboarding-modal">
             <h3>Wollen Sie eine Vorstellung des Produkts?</h3>
@@ -1643,6 +1648,7 @@
             </div>
         </div>
     </div>
+-->
 
     <div id="notification-toast" class="notification-toast" role="status" aria-live="polite">
         <strong id="notification-toast-title">Neue Benachrichtigung</strong>
@@ -1662,7 +1668,7 @@
             <option value="Benachrichtigungen"></option>
             {% endif %}
             {% if current_permissions.pages.get('tutorial_page', False) %}
-            <option value="Tutorial"></option>
+            <!--<option value="Tutorial"></option>-->
             {% endif %}
         {% endif %}
 
@@ -1765,10 +1771,10 @@
             });
 
             const username = {{ (session['username'] if 'username' in session else '')|tojson }};
-            const isTutorialPage = window.location.pathname === {{ url_for('tutorial_page')|tojson }};
+            //const isTutorialPage = window.location.pathname === {{ url_for('tutorial_page')|tojson }};
             const isLoginPage = window.location.pathname === {{ url_for('login')|tojson }};
             const notificationsPagePath = {{ url_for('notifications_view')|tojson }};
-            const onboardingKey = username ? ('inventarsystem_tutorial_prompt_v1_' + username) : null;
+            //const onboardingKey = username ? ('inventarsystem_tutorial_prompt_v1_' + username) : null;
             const onboardingOverlay = document.getElementById('onboarding-overlay');
             const notificationButtons = Array.from(document.querySelectorAll('[data-notification-button="true"]'));
             const notificationToast = document.getElementById('notification-toast');
@@ -1789,9 +1795,9 @@
                     {% if current_permissions.pages.get('notifications_view', False) %}
                     { label: 'Benachrichtigungen', keywords: ['benachrichtigungen', 'nachrichten', 'notifications'], url: {{ url_for('notifications_view')|tojson }} },
                     {% endif %}
-                    {% if current_permissions.pages.get('tutorial_page', False) %}
-                    { label: 'Tutorial', keywords: ['tutorial', 'hilfe', 'anleitung'], url: {{ url_for('tutorial_page')|tojson }} },
-                    {% endif %}
+                    //{% if current_permissions.pages.get('tutorial_page', False) %}
+                    //{ label: 'Tutorial', keywords: ['tutorial', 'hilfe', 'anleitung'], url: {{ url_for('tutorial_page')|tojson }} },
+                    //{% endif %}
                 {% endif %}
                     
                 { label: 'Impressum', keywords: ['impressum'], url: {{ url_for('impressum')|tojson }} },
@@ -2042,11 +2048,11 @@
                 window.setInterval(pollNotificationStatus, 30000);
             }
 
-            function showOnboarding(){
-                if (onboardingOverlay) {
-                    onboardingOverlay.style.display = 'flex';
-                }
-            }
+            //function showOnboarding(){
+            //    if (onboardingOverlay) {
+            //        onboardingOverlay.style.display = 'flex';
+            //    }
+            //}
 
             function hideOnboarding(){
                 if (onboardingOverlay) {
@@ -2054,19 +2060,19 @@
                 }
             }
 
-            if (onboardingKey && !isTutorialPage && !isLoginPage) {
-                const decision = localStorage.getItem(onboardingKey);
-                if (!decision || decision === 'later') {
-                    showOnboarding();
-                }
-            }
+            //if (onboardingKey && !isTutorialPage && !isLoginPage) {
+            //    const decision = localStorage.getItem(onboardingKey);
+            //    if (!decision || decision === 'later') {
+            //        showOnboarding();
+            //    }
+            //}
 
-            document.getElementById('onboarding-start')?.addEventListener('click', function(){
-                if (onboardingKey) {
-                    localStorage.setItem(onboardingKey, 'started');
-                }
-                window.location.href = {{ url_for('tutorial_page')|tojson }};
-            });
+            //document.getElementById('onboarding-start')?.addEventListener('click', function(){
+            //    if (onboardingKey) {
+            //        localStorage.setItem(onboardingKey, 'started');
+            //    }
+            //    window.location.href = {{ url_for('tutorial_page')|tojson }};
+            //});
 
             document.getElementById('onboarding-later')?.addEventListener('click', function(){
                 if (onboardingKey) {
@@ -2399,21 +2405,21 @@
     <script>
         (function () {
             const username = {{ (session['username'] if 'username' in session else '')|tojson }};
-            const tooltipModeKey = username ? ('inventarsystem_tutorial_tooltips_enabled_' + username) : 'inventarsystem_tutorial_tooltips_enabled';
+            //const tooltipModeKey = username ? ('inventarsystem_tutorial_tooltips_enabled_' + username) : 'inventarsystem_tutorial_tooltips_enabled';
             const enabled = localStorage.getItem(tooltipModeKey) === '1';
 
-            function applyTooltipMode(active) {
-                document.body.classList.toggle('tutorial-tooltips-active', active);
-                let indicator = document.getElementById('tutorialTooltipIndicator');
-                if (!indicator) {
-                    indicator = document.createElement('div');
-                    indicator.id = 'tutorialTooltipIndicator';
-                    indicator.className = 'tutorial-tooltip-indicator';
-                    indicator.textContent = 'Tutorial-Modus aktiv: Tooltips sind eingeschaltet';
-                    document.body.appendChild(indicator);
-                }
-                indicator.style.display = active ? 'inline-flex' : 'none';
-            }
+            //function applyTooltipMode(active) {
+            //    document.body.classList.toggle('tutorial-tooltips-active', active);
+            //    let indicator = document.getElementById('tutorialTooltipIndicator');
+            //    if (!indicator) {
+            //        indicator = document.createElement('div');
+            //        indicator.id = 'tutorialTooltipIndicator';
+            //        indicator.className = 'tutorial-tooltip-indicator';
+            //        indicator.textContent = 'Tutorial-Modus aktiv: Tooltips sind eingeschaltet';
+            //        document.body.appendChild(indicator);
+            //    }
+            //    indicator.style.display = active ? 'inline-flex' : 'none';
+            //}
 
             applyTooltipMode(enabled);
         })();

Web/templates/change_password.html

@@ -26,18 +26,27 @@
         <form method="POST" action="{{ url_for('change_password') }}">
             <div class="form-group">
                 <label for="current_password">Aktuelles Passwort:</label>
-                <input type="password" id="current_password" name="current_password" required>
+                <div class="input-group">
+                    <input type="password" class="form-control" id="current_password" name="current_password" required>
+                    <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('current_password', this)">Anzeigen</button>
+                </div>
             </div>
             
             <div class="form-group">
                 <label for="new_password">Neues Passwort:</label>
-                <input type="password" id="new_password" name="new_password" required>
+                <div class="input-group">
+                    <input type="password" class="form-control" id="new_password" name="new_password" required>
+                    <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('new_password', this)">Anzeigen</button>
+                </div>
                 <small class="form-text text-muted">Das Passwort sollte mindestens 6 Zeichen lang sein.</small>
             </div>
             
             <div class="form-group">
                 <label for="confirm_password">Neues Passwort bestätigen:</label>
-                <input type="password" id="confirm_password" name="confirm_password" required>
+                <div class="input-group">
+                    <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
+                    <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('confirm_password', this)">Anzeigen</button>
+                </div>
             </div>
             
             <div class="form-actions">
@@ -48,6 +57,20 @@
     </div>
 </div>
 
+<script>
+    function togglePasswordVisibility(fieldId, button) {
+        var passwordInput = document.getElementById(fieldId);
+
+        if (passwordInput.type === 'password') {
+            passwordInput.type = 'text';
+            button.textContent = 'Verbergen';
+        } else {
+            passwordInput.type = 'password';
+            button.textContent = 'Anzeigen';
+        }
+    }
+</script>
+
 <style>
     .password-change-form {
         max-width: 500px;
@@ -74,7 +97,7 @@
         font-weight: bold;
     }
     
-    input[type="password"] {
+    .form-control {
         width: 100%;
         padding: 10px;
         border: 1px solid #ced4da;
@@ -122,6 +145,16 @@
     .btn-secondary:hover {
         background-color: #5a6268;
     }
+
+    .btn-outline-secondary {
+        border: 1px solid #ced4da;
+        background-color: #f8f9fa;
+        color: #495057;
+    }
+
+    .btn-outline-secondary:hover {
+        background-color: #e2e6ea;
+    }
     
     .alert {
         padding: 12px;
@@ -141,4 +174,4 @@
         border: 1px solid #c3e6cb;
     }
 </style>
-{% endblock %}
+{% endblock %}

Web/templates/edit_library.html

@@ -274,24 +274,24 @@
             {% if not show_library_features %}
             <!-- ================= SYSTEM FILTERS 1-3 (INVENTORY / OTHER ITEMS ONLY) ================= -->
             <div class="filter-inputs">
-                <h3>{{ filter_names.get('1', 'Jahrgangsstufe') }}</h3>
+                <h3>{{ filter_names.get('1', 'Fach') }}</h3>
                 <div class="multi-filter">
                     {% for idx in range(4) %}
                     <div class="form-group">
-                        <label for="filter1-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
-                        <select id="filter1-{{ idx + 1 }}" name="filter" class="filter-dropdown-select" data-selected="{{ item.Filter[idx] if item.Filter and item.Filter|length > idx else '' }}">
+                        <label for="filter2-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
+                        <select id="filter2-{{ idx + 1 }}" name="filter" class="filter-dropdown-select" data-selected="{{ item.Filter[idx] if item.Filter and item.Filter|length > idx else '' }}">
                             <option value="">-- Optional --</option>
                         </select>
                     </div>
                     {% endfor %}
                 </div>
 
-                <h3>{{ filter_names.get('2', 'Fachgebiet') }}</h3>
+                <h3>{{ filter_names.get('2', 'Jahrgangsstufe') }}</h3>
                 <div class="multi-filter">
                     {% for idx in range(4) %}
                     <div class="form-group">
-                        <label for="filter2-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
-                        <select id="filter2-{{ idx + 1 }}" name="filter2" class="filter-dropdown-select" data-selected="{{ item.Filter2[idx] if item.Filter2 and item.Filter2|length > idx else '' }}">
+                        <label for="filter1-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
+                        <select id="filter1-{{ idx + 1 }}" name="filter2" class="filter-dropdown-select" data-selected="{{ item.Filter2[idx] if item.Filter2 and item.Filter2|length > idx else '' }}">
                             <option value="">-- Optional --</option>
                         </select>
                     </div>

Web/templates/library_borrowings_admin.html

@@ -374,7 +374,7 @@
   <div class="filter-bar">
     <input id="library-search" type="text" placeholder="Nach Element, Benutzer, Klasse, Ausweis oder Rechnung suchen...">
 
-    <!-- NEU: Klassen-Filter -->
+    <!-- Klassen-Filter -->
     <select id="class-filter">
       <option value="all">Alle Klassen</option>
       {% set classes = [] %}
@@ -407,7 +407,6 @@
     <table class="library-table" id="loans-table">
       <thead>
         <tr>
-          <!-- NEU: onClick Handler zum Sortieren hinzugefügt -->
           <th style="cursor: pointer;" onclick="sortTable('loans-table', 0)">Status ↕</th>
           <th style="cursor: pointer;" onclick="sortTable('loans-table', 1)">Element ↕</th>
           <th style="cursor: pointer;" onclick="sortTable('loans-table', 2)">Benutzer ↕</th>
@@ -419,7 +418,6 @@
         </tr>
       </thead>
       <tbody>
-        <!-- NEU: data-klasse hinzugefügt -->
         {% for e in loan_entries %}
         <tr class="loan-row"
             data-borrow-id="{{ e.id }}"
@@ -452,7 +450,6 @@
           <td>
             <div><strong>{{ e.user }}</strong></div>
           </td>
-          <!-- NEU: Klasse Spalte -->
           <td>
             {% if e.klasse %}
               <span class="badge-pill badge-class">{{ e.klasse }}</span>
@@ -469,9 +466,6 @@
             {% if e.invoice_number %}
               <div class="mono">{{ e.invoice_number }}</div>
               <div class="muted">{{ e.invoice_amount }}</div>
-              <!--{% if e.invoice_corrections_count %}
-                <div class="muted" style="color:#7c2d12;">{{ e.invoice_corrections_count }} Korrektur(en)</div>
-              {% endif %} -->
               <div style="margin-top:6px;">
                 <a class="btn btn-outline-primary btn-sm" href="{{ url_for('admin_view_invoice_pdf', borrow_id=e.id) }}" target="_blank" rel="noopener">PDF öffnen</a>
               </div>
@@ -506,18 +500,9 @@
               {% endif %}
 
               {% if e.has_damage %}
-              <!-- Aufruf des Reparatur-Auswahl-Modals -->
               <button type="button" class="btn btn-warning btn-sm" onclick="openRepairModal('{{ e.item_id }}', '{{ e.item_code }}')">Reparieren / Ersetzen</button>
               {% endif %}
 
-              <!--{% if e.invoice_number %}
-              <form method="post" action="{{ url_for('admin_add_invoice_correction', borrow_id=e.id) }}" onsubmit="return confirm('Korrekturbuchung hinzufügen?');" style="display: flex; gap: 6px; align-items: center; flex-wrap: wrap;">
-                <input type="text" name="correction_reason" value="Korrektur zu {{ e.invoice_number }}" placeholder="Korrekturgrund" required style="padding:6px; border:1px solid #ddd; border-radius:6px; min-width:160px; max-width:180px;">
-                <input type="text" name="amount_delta" placeholder="z.B. -{{ e.invoice_amount }}" style="padding:6px; border:1px solid #ddd; border-radius:6px; width:120px;">
-                <button type="submit" class="btn btn-outline-danger btn-sm">Korrektur</button>
-              </form>
-              {% endif %}-->
-
               {% if e.status in ['active', 'planned'] %}
               <form method="post" action="{{ url_for('admin_reset_borrowing', borrow_id=e.id) }}" onsubmit="return confirm('Ausleihe zurücksetzen?');">
                 <button type="submit" class="btn btn-secondary btn-sm">Zurücksetzen</button>
@@ -541,7 +526,6 @@
     <table class="library-table" id="damaged-table">
       <thead>
         <tr>
-          <!-- NEU: onClick Handler zum Sortieren hinzugefügt -->
           <th style="cursor: pointer;" onclick="sortTable('damaged-table', 0)">Element ↕</th>
           <th style="cursor: pointer;" onclick="sortTable('damaged-table', 1)">Code ↕</th>
           <th style="cursor: pointer;" onclick="sortTable('damaged-table', 2)">Schaden ↕</th>
@@ -574,7 +558,6 @@
             <div class="row-actions" style="margin-bottom:8px;">
               <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('library_item_invoices', item_id=item.id) }}">Rechnungen</a>
             </div>
-            <!-- Aufruf des Reparatur-Auswahl-Modals -->
             <button type="button" class="btn btn-warning btn-sm" onclick="openRepairModal('{{ item.id }}', '{{ item.code }}')">Reparieren / Ersetzen</button>
           </td>
         </tr>
@@ -627,6 +610,13 @@
         <textarea id="damage-invoice-reason" name="damage_reason" rows="5" required style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; resize:vertical;" placeholder="Beschreiben Sie kurz den Schaden oder die Zerstörung."></textarea>
       </div>
 
+      {% if email_service_enabled %}
+      <div style="margin-bottom:16px;">
+        <label for="damage-invoice-recipient-email" style="display:block; font-weight:700; margin-bottom:6px;">Empfänger-E-Mail für den PDF-Versand</label>
+        <input id="damage-invoice-recipient-email" name="recipient_email" type="email" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px;" placeholder="name@beispiel.de">
+      </div>
+      {% endif %}
+
       <div style="display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-bottom:18px;">
         <label style="display:flex; align-items:center; gap:8px;">
           <input id="damage-invoice-destroyed" type="checkbox" name="mark_destroyed" checked>
@@ -640,13 +630,16 @@
 
       <div style="display:flex; justify-content:flex-end; gap:10px;">
         <button type="button" class="btn btn-secondary" onclick="closeDamageInvoiceModal()">Abbrechen</button>
-        <button type="submit" class="btn btn-danger">PDF-Rechnung erstellen</button>
+        <button type="submit" class="btn btn-outline-danger" name="delivery" value="pdf">Nur PDF herunterladen</button>
+        {% if email_service_enabled %}
+        <button type="submit" class="btn btn-danger" name="delivery" value="email">PDF per E-Mail senden</button>
+        {% endif %}
       </div>
     </form>
   </div>
 </div>
 
-<!-- Neues Modal: Reparatur-Optionen (Reparieren, Ersetzen mit neuem Code_4, Löschen) -->
+<!-- Modal: Reparatur-Optionen -->
 <div id="repair-action-modal" role="dialog" aria-modal="true" aria-labelledby="repair-modal-title" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.72); z-index:9999; padding:20px; overflow:auto;">
   <div style="max-width:540px; margin:60px auto; background: var(--ui-surface); border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
     <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px;">
@@ -676,7 +669,7 @@
 <script>
 (function() {
   const searchInput = document.getElementById('library-search');
-  const classFilter = document.getElementById('class-filter'); // NEU: Klassenfilter hinzugefügt
+  const classFilter = document.getElementById('class-filter');
   const statusFilter = document.getElementById('loan-status-filter');
   const damageFilter = document.getElementById('damage-filter');
   const loanRows = Array.from(document.querySelectorAll('.loan-row'));
@@ -693,10 +686,8 @@
   const damageInvoiceReason = document.getElementById('damage-invoice-reason');
   const damageInvoiceReplaceBtn = document.getElementById('damage-invoice-replace-btn');
 
-  // NEU: Globale Sortier-Richtungsobjekte
   let sortDirections = {};
 
-  // NEU: Sortier-Funktion
   window.sortTable = function(tableId, columnIndex) {
     const table = document.getElementById(tableId);
     const tbody = table.tBodies[0];
@@ -714,7 +705,6 @@
     const isAscending = sortDirections[sortKey];
     const multiplier = isAscending ? 1 : -1;
 
-    // Pfeil im Header aktualisieren
     const headers = table.querySelectorAll("th");
     headers.forEach(th => {
       if(th.innerHTML.includes('↕') || th.innerHTML.includes('▲') || th.innerHTML.includes('▼')) {
@@ -726,19 +716,15 @@
       currentTh.innerHTML = currentTh.innerHTML.replace('↕', isAscending ? '▲' : '▼');
     }
 
-    // Zeilen sortieren
     rows.sort((a, b) => {
       const cellA = a.cells[columnIndex].textContent.trim();
       const cellB = b.cells[columnIndex].textContent.trim();
       return cellA.localeCompare(cellB, 'de', { numeric: true, sensitivity: 'base' }) * multiplier;
     });
 
-    // Neu einfügen
     rows.forEach(row => tbody.appendChild(row));
   };
 
-
-  // Funktionen für das Reparatur-Modal
   window.openRepairModal = function(itemId, currentCode) {
     const modal = document.getElementById('repair-action-modal');
     const form = document.getElementById('repair-action-form');
@@ -871,26 +857,25 @@
     });
   }
 
-  // NEU: Kombinierte Filter-Funktion (Suche + Status + Schaden + Klasse)
   function applyFilters() {
     const search = (searchInput.value || '').trim().toLowerCase();
     const status = statusFilter.value;
     const damage = damageFilter.value;
-    const klasse = classFilter.value; // NEU
+    const klasse = classFilter.value;
 
     let visibleLoans = 0;
     loanRows.forEach(row => {
       const haystack = row.dataset.search || '';
       const rowStatus = row.dataset.status || '';
-      const rowKlasse = row.dataset.klasse || ''; // NEU
+      const rowKlasse = row.dataset.klasse || '';
       const hasDamage = row.dataset.hasDamage === '1';
 
       const searchMatch = !search || haystack.includes(search);
       const statusMatch = !status || rowStatus === status;
-      const classMatch = klasse === 'all' || rowKlasse === klasse; // NEU
+      const classMatch = klasse === 'all' || rowKlasse === klasse;
       const damageMatch = damage === 'all' || (damage === 'damage' && hasDamage) || (damage === 'clean' && !hasDamage);
 
-      const show = searchMatch && statusMatch && classMatch && damageMatch; // NEU
+      const show = searchMatch && statusMatch && classMatch && damageMatch;
       row.style.display = show ? '' : 'none';
       if (show) visibleLoans++;
     });
@@ -905,10 +890,6 @@
       const searchMatch = !search || haystack.includes(search);
       const statusMatch = !status || rowStatus === status || status === '';
       const damageMatch = damage === 'all' || (damage === 'damage' && hasDamage) || (damage === 'clean' && !hasDamage);
-
-      // Defekte-Medien-Tabelle hat keine verknüpfte "Klasse", deshalb blenden wir sie nur bei Klassen-Filter "all" ein,
-      // oder wenn gar nicht nach Klasse gefiltert wird, damit sie nicht verschwindet.
-      // Falls sie bei aktiver Klassensuche komplett verschwinden soll, passe die Bedingung an:
       const classMatch = klasse === 'all';
 
       const show = searchMatch && statusMatch && damageMatch && classMatch;
@@ -919,7 +900,7 @@
   }
 
   searchInput.addEventListener('input', applyFilters);
-  classFilter.addEventListener('change', applyFilters); // NEU
+  classFilter.addEventListener('change', applyFilters);
   statusFilter.addEventListener('change', applyFilters);
   damageFilter.addEventListener('change', applyFilters);
   applyFilters();

Web/templates/library_table.html

@@ -8,9 +8,9 @@
        1. Modals & Overlays
        ========================================= */
     .modal {
-        display: none; /* Managed by JS (none/flex) */
+        display: none; 
         position: fixed;
-        inset: 0; /* Modern shorthand for top: 0, right: 0, bottom: 0, left: 0 */
+        inset: 0; 
         z-index: 1000;
         background-color: rgba(0, 0, 0, 0.6);
         align-items: center;
@@ -23,7 +23,7 @@
         display: flex;
         flex-direction: column;
         width: 100%;
-        max-width: 900px; /* Consolidated from conflicting 600px/900px rules */
+        max-width: 900px; 
         max-height: 90vh;
         background-color: var(--ui-surface, #fff);
         border-radius: 8px;
@@ -133,6 +133,34 @@
         background: var(--ui-surface);
     }
 
+    /* Blue edge styling for inputs and action button */
+    #activeStudentCard,
+    #manualItemCode {
+        border: 2px solid #3b82f6 !important;
+        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+    }
+
+    #activeStudentCard:focus,
+    #manualItemCode:focus {
+        outline: none;
+        border-color: #2563eb !important;
+        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25) !important;
+    }
+
+    #manualActionBtn {
+        background: #4f46e5 !important;
+        color: white !important;
+        border: 2px solid #3b82f6 !important;
+        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+    }
+
+    #manualActionBtn:hover {
+        background: #4338ca !important;
+        border-color: #2563eb !important;
+        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
+    }
+
     .library-scan-status {
         margin-top: 10px;
         font-size: 0.92em;
@@ -419,31 +447,136 @@
     }
 
     /* =========================================
-       7. Mobile Responsiveness
+       7. Mobile Responsiveness (Updated for Cards)
        ========================================= */
     @media (max-width: 768px) {
         .library-table-container { padding: 10px; }
         .library-search-bar { flex-direction: column; }
         .library-search-input { width: 100%; }
-        .library-items-table { font-size: 0.85em; }
+        
+        /* Enlarge touch targets */
+        .library-search-input,
+        .library-scan-controls select,
+        .library-scan-controls input,
+        .library-filter-toggle-btn,
+        .filter-item input,
+        .filter-item select,
+        .button {
+            min-height: 44px;
+        }
 
+        /* Stack Scan & Controls */
+        .library-scan-controls {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            gap: 12px;
+        }
+        .library-scan-controls > * {
+            width: 100% !important;
+            margin-left: 0 !important;
+        }
+
+        .filter-row {
+            grid-template-columns: 1fr;
+        }
+        
+        .filter-buttons {
+            flex-direction: column;
+            align-items: stretch;
+        }
+        
+        .filter-buttons .button {
+            width: 100%;
+            justify-content: center;
+            margin-bottom: 8px;
+        }
+        
+        .filter-buttons > div[style*="flex-grow"] {
+            display: none;
+        }
+
+        /* Convert Table to Cards */
+        .library-items-table,
+        .library-items-table thead,
+        .library-items-table tbody,
         .library-items-table th,
+        .library-items-table td,
+        .library-items-table tr {
+            display: block;
+            width: 100%;
+        }
+
+        .library-items-table thead tr {
+            position: absolute;
+            top: -9999px;
+            left: -9999px;
+        }
+
+        .library-items-table tr {
+            margin-bottom: 16px;
+            border: 1px solid var(--ui-border, #ddd);
+            border-radius: 12px;
+            background: #fff;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+            overflow: hidden;
+        }
+
         .library-items-table td {
-            padding: 8px 10px;
+            position: relative;
+            padding: 12px 16px 12px 35% !important; 
+            text-align: right;
+            border-bottom: 1px solid #f4f4f4;
+            font-size: 0.95em;
+            min-height: auto;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+        }
+        
+        .library-items-table td::before {
+            content: attr(data-label);
+            position: absolute;
+            left: 16px;
+            width: 30%;
+            text-align: left;
+            font-weight: 600;
+            color: #555;
+            white-space: nowrap;
+        }
+
+        /* Styles specific for the Actions cell */
+        .library-items-table td:last-child {
+            border-bottom: none;
+            padding: 16px !important;
+            background: #f8fafc;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            align-items: stretch;
+        }
+        
+        .library-items-table td:last-child::before {
+            display: none;
+        }
+
+        .table-actions {
+            flex-direction: column;
+            width: 100%;
+            gap: 10px;
         }
 
         .table-actions .button {
-            padding: 4px 8px;
-            font-size: 0.75em;
-        }
-
-        .filter-row,
-        .library-scan-controls {
-            grid-template-columns: 1fr;
+            width: 100%;
+            margin: 0 !important;
+            padding: 12px;
+            font-size: 1em;
+            justify-content: center;
         }
 
         .library-scan-reader-wrap { max-width: 100%; }
     }
+    
     .library-scan-reader-wrap {
         display: none;
         margin-top: 15px;
@@ -500,7 +633,6 @@
         letter-spacing: 2px;
     }
 
-
     .detail-gallery-container {
         display: flex;
         flex-wrap: wrap;
@@ -534,13 +666,12 @@
 
 <div class="library-table-container" id="libraryTableContainer" data-can-edit="{{ 1 if current_permissions.actions.get('can_edit', False) else 0 }}">
     <!-- Header -->
-    <!-- Search and Filter Toggle -->
-    <!-- Customizable Filter Panel -->
     <div class="library-header">
         <h1>📚 Bibliothek</h1>
         <p>Bücher, CDs, DVDs und weitere Medien</p>
     </div>
-    <!-- Student card / quick scan workflow -->
+    
+    <!-- Search and Filter Toggle -->
     <div class="library-search-bar">
         <input
             type="text"
@@ -556,26 +687,31 @@
             🔍 Filter
         </button>
     </div>
+    
+    <!-- Controls -->
     <div class="library-scan-controls">
         <select id="scanModeSelect" aria-label="Scan-Modus">
             <option value="card_only">Nur Ausweis erfassen</option>
-            <option value="quick_toggle">Schnellmodus: Ausweis + Mediencode</option>
+            <option value="quick_toggle">Schnellmodus: 1x Ausweis + 1x Mediencode</option>
             <option value="continuous">Dauermodus: 1x Ausweis, dann N Medien</option>
             <option value="return_only">Nur Rückgabe (nur Mediencode)</option>
         </select>
         <input type="text" id="activeStudentCard" placeholder="Aktiver Ausweis (gescannt)">
         <input type="text" id="manualItemCode" placeholder="Manueller Mediencode (optional)" style="min-width:180px;">
         <button id="resetCardBtn" class="button" type="button">Feld zurücksetzen</button>
-        <button id="toggleScannerBtn" class="button" type="button">Scanner starten</button>
+        <button id="toggleScannerBtn" class="button" type="button">Handyscanner starten</button>
         <button id="physicalScannerBtn" class="button" type="button" style="margin-left:6px;">
             Physischer Scanner starten
         </button>
-        <button id="manualActionBtn" class="button" type="button" style="margin-left:6px; background:#4f46e5; color:white;">Code verarbeiten</button>
+        <button id="manualActionBtn" class="button" type="button" style="margin-left:6px;">Code verarbeiten</button>
     </div>
+    
     <div class="library-scan-reader-wrap" id="scanReaderWrap" style="display: none; margin-top: 15px;">
         <div class="library-scan-reader" style="width: 100%; max-width: 640px; margin: 0 auto; overflow: hidden; border-radius: 8px; border: 2px solid #ccc;">
         </div>
     </div>
+    
+    <!-- Customizable Filter Panel -->
     <div id="filterPanel" class="library-filter-panel">
         <div class="filter-row">
             <div class="filter-item">
@@ -674,7 +810,7 @@
 <script>
 
     // =========================================================================
-    // CUSTOM MODAL HELPERS (Replaces native browser alert, confirm & prompt)
+    // CUSTOM MODAL HELPERS
     // =========================================================================
     function createModalOverlay() {
         const overlay = document.createElement('div');
@@ -867,6 +1003,7 @@
             input.select();
         });
     }
+
     // =========================================================================
     // 1. GLOBAL STATE DEFINITIONS
     // =========================================================================
@@ -891,19 +1028,18 @@
     let renderedCount = INITIAL_RENDER_COUNT;
     let filterPanelOpen = false;
 
-    // Scanner Related State Variables
     let scannerInstance = null;
     let scannerRunning = false;
     let activeScannerCallback = null;
     let activeStudentCardId = '';
     let lastScanValue = '';
     let lastScanAt = 0;
-    // Keyboard-scanner support (physical scanners that act as keyboard wedges)
+    
     let keyboardScannerEnabled = false;
     let keyboardScanBuffer = '';
     let keyboardLastKeyAt = 0;
     let physicalScannerModalOpen = false;
-    const KEYBOARD_SCAN_INTERCHAR_MS = 500; // max time between slower scanner keystrokes
+    const KEYBOARD_SCAN_INTERCHAR_MS = 500; 
     const physicalScanQueue = [];
     let keyboardScanProcessing = false;
     let editLibraryState = {
@@ -1040,13 +1176,14 @@
             const actionLabel = statusKey === 'available' ? 'Ausleihen' : (statusKey === 'borrowed' ? 'Reservieren' : 'Nicht ausleihbar');
             const actionDisabled = statusKey === 'damaged' ? 'disabled' : '';
 
+            // Using data-label injection for accurate mobile rendering mapping
             return `
         <tr>
-            <td class="table-title">${escapeHtml(item.Name || 'Untitled')}</td>
-            <td>${escapeHtml(item.ISBN || '-')}</td>
-            <td>${getItemTypeLabel(item.ItemType || 'book')}</td>
-            <td style="font-weight:600; text-align:center;">${item.Quantity || item.GroupedDisplayCount || 1}</td>
-            <td>
+            <td data-label="Titel" class="table-title">${escapeHtml(item.Name || 'Untitled')}</td>
+            <td data-label="ISBN/Code">${escapeHtml(item.ISBN || '-')}</td>
+            <td data-label="Typ">${getItemTypeLabel(item.ItemType || 'book')}</td>
+            <td data-label="Anzahl" style="font-weight:600; text-align:center;">${item.Quantity || item.GroupedDisplayCount || 1}</td>
+            <td data-label="Status">
                 <span class="table-status ${statusClass}">
                     ${statusText}
                 </span>
@@ -1056,7 +1193,7 @@
                 <button class="button" style="background: #28a745; color: white;" onclick="borrowItem('${item._id}')" ${actionDisabled}>
                     ${actionLabel}
                 </button>
-                ${canEditLibraryItems ? `<button class="button" style="background:#0ea5e9;color:#fff;" onclick="openEditLibraryItem('${item._id}')">Bearbeiten</button>` : ''}
+                ${canEditLibraryItems ? `<button class="button" style="background:#0ea5e9;color:#fff; margin-left:6px;" onclick="openEditLibraryItem('${item._id}')">Bearbeiten</button>` : ''}
                 ${canEditLibraryItems ? `<button class="button" style="background:#dc2626;color:#fff; margin-left:6px;" onclick="confirmDeleteLibraryItem('${item._id}')">Löschen</button>` : ''}
             </td>
         </tr>`;
@@ -1125,26 +1262,22 @@
         const scannerWrap = document.querySelector('.library-scan-reader-wrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
 
-        // 1. CRITICAL FIX: Make the container visible BEFORE Quagga initializes
-        // Quagga cannot calculate video dimensions if display is 'none'
         if (scannerWrap) {
             scannerWrap.style.display = 'block';
         }
 
         setScanStatus('Starte Kamera...', 'warn');
 
-        // 2. Initialize Quagga with a slight delay to allow the DOM to render the block
         setTimeout(() => {
             Quagga.init({
                 inputStream: {
                     name: "Live",
                     type: "LiveStream",
-                    // This MUST match the inner div where the video should appear
                     target: document.querySelector('.library-scan-reader'),
                     constraints: {
                         width: 640,
                         height: 480,
-                        facingMode: "environment" // Prefer back camera on mobile
+                        facingMode: "environment" 
                     }
                 },
                 locator: {
@@ -1152,13 +1285,11 @@
                     halfSample: true
                 },
                 decoder: {
-                    // Keep only the barcode types you actually use to improve performance
                     readers: ["code_128_reader", "ean_reader", "code_39_reader"]
                 },
                 locate: true
             }, function(err) {
                 if (err) {
-                    // This will finally log the actual error (e.g., NotAllowedError) if permissions fail
                     console.error("Quagga initialization failed:", err);
                     setScanStatus('Kamera-Fehler: ' + (err.name || err), 'error');
 
@@ -1190,7 +1321,6 @@
         scannerRunning = false;
         activeScannerCallback = null;
 
-        // Hide the container to free up UI space
         const scannerWrap = document.querySelector('.library-scan-reader-wrap');
         if (scannerWrap) {
             scannerWrap.style.display = 'none';
@@ -1198,7 +1328,7 @@
 
         const toggleBtn = document.getElementById('toggleScannerBtn');
         if (toggleBtn) {
-            toggleBtn.textContent = 'Kamera Scanner'; // Reset button text
+            toggleBtn.textContent = 'Kamera Scanner'; 
         }
     }
 
@@ -1210,7 +1340,6 @@
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
-                    // Falls du in Flask CSRF-Protect nutzt, muss der Token mitgesendet werden:
                     'X-CSRFToken': '{{ csrf_token }}',
                     'X-CSRF-Token': '{{ csrf_token }}'
                 }
@@ -1218,7 +1347,6 @@
 
             if (!response.ok) return false;
 
-            // Wir parsen die Antwort. Flask jsonify({"is_student_card": true/false})
             const data = await response.json();
             return data === true || data.is_student_card === true;
 
@@ -1245,7 +1373,7 @@
     });
 
     // =========================================================================
-    // Keyboard scanner handling (physical scanners that send chars then Enter)
+    // Keyboard scanner handling 
     // =========================================================================
     function getPhysicalScannerInstruction() {
         const mode = document.getElementById('scanModeSelect')?.value || 'card_only';
@@ -1291,6 +1419,7 @@
         keyboardScannerEnabled = false;
         keyboardScanBuffer = '';
         keyboardLastKeyAt = 0;
+        setActiveStudentCard('');
         document.removeEventListener('keydown', keyboardScanKeydownHandler);
         const modal = document.getElementById('physicalScannerModal');
         if (modal) modal.style.display = 'none';
@@ -1299,7 +1428,6 @@
     }
 
     function keyboardScanKeydownHandler(e) {
-        // Only active when explicitly enabled
         if (!keyboardScannerEnabled || !physicalScannerModalOpen) return;
 
         if (e.key === 'Escape') {
@@ -1310,7 +1438,6 @@
 
         const now = Date.now();
 
-        // If Enter/Return pressed -> finalize buffer
         if (e.key === 'Enter') {
             e.preventDefault();
             const code = keyboardScanBuffer.trim();
@@ -1318,7 +1445,6 @@
             keyboardLastKeyAt = 0;
             if (!code) return;
 
-            // Scanner keystrokes must not be submitted into the focused form field.
             const displayCode = document.getElementById('physicalScannerCode');
             if (displayCode) displayCode.textContent = code;
             updatePhysicalScannerModal('Enter erkannt. Code wird verarbeitet...', 'warn');
@@ -1326,9 +1452,7 @@
             return;
         }
 
-        // Accept all printable scanner characters, including letters and punctuation.
         if (e.key.length === 1) {
-            // If time gap too big, start new buffer
             if (keyboardLastKeyAt && (now - keyboardLastKeyAt) > KEYBOARD_SCAN_INTERCHAR_MS) {
                 keyboardScanBuffer = '';
             }
@@ -1336,7 +1460,6 @@
             keyboardLastKeyAt = now;
             const displayCode = document.getElementById('physicalScannerCode');
             if (displayCode) displayCode.textContent = keyboardScanBuffer;
-            // Prevent default so scanner input is captured even while an input has focus.
             e.preventDefault();
         }
     }
@@ -1365,21 +1488,18 @@
 
         const now = Date.now();
         if (scannedCode === lastScanValue && (now - lastScanAt) < 1500) {
-            return; // Verhindert doppeltes Scannen in kurzer Zeit
+            return; 
         }
         lastScanValue = scannedCode;
         lastScanAt = now;
 
-        // Den aktuellen Modus aus dem Dropdown auslesen
         const mode = (document.getElementById('scanModeSelect') || {}).value || 'card_only';
 
-        // 1. Modus: Nur Rückgabe
         if (mode === 'return_only') {
             await returnByCode(scannedCode);
             return;
         }
 
-        // 2. Modus: Nur Ausweis
         if (mode === 'card_only') {
             setActiveStudentCard(scannedCode);
             setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}. Bitte den nächsten Ausweis scannen.`, 'ok');
@@ -1388,13 +1508,11 @@
             return;
         }
 
-        // 3. Modus: Schnellmodus (1x Ausweis, 1x Buch)
         if (mode === 'quick_toggle') {
             await processQuickToggleScan(scannedCode);
             return;
         }
 
-        // 4. Modus: Dauermodus (1x Ausweis, Nx Bücher)
         if (mode === 'continuous') {
             await processContinuousScan(scannedCode);
             return;
@@ -1471,7 +1589,6 @@
                 updatePhysicalScannerModal('Aktion erfolgreich. Bereit für den nächsten Mediencode.', 'ok');
             }
 
-            // Tabellen-Ansicht aktualisieren
             if (typeof loadLibraryItems === "function") {
                 await loadLibraryItems();
             }
@@ -1491,7 +1608,6 @@
 
     async function processQuickToggleScan(scannedCode) {
 
-        // 2. Wenn kein Ausweis gesetzt ist, wird der Code als Ausweis interpretiert
         if (!activeStudentCardId) {
             setActiveStudentCard(scannedCode);
             setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}. Bitte den nächsten Mediencode scannen.`, 'ok');
@@ -1500,7 +1616,6 @@
             return;
         }
 
-        // 3. Ausleihe/Rückgabe verarbeiten (wenn Ausweis vorhanden)
         try {
             setScanStatus('Verarbeite Mediencode...', 'warn');
             const response = await fetch('/api/library_scan_action', {
@@ -1695,7 +1810,6 @@
     }
 
     function showSmallConfirm(message, kind='ok', action = null) {
-        // Append the small helper text in German
         const helper = 'Sie können fortfahren. Dies ist nur eine kleine Benachrichtigung.';
         const el = document.createElement('div');
         el.className = `small-popup ${kind === 'error' ? 'error' : 'ok'}`;
@@ -1720,12 +1834,10 @@
         closeButton.innerHTML = '&times;';
         el.appendChild(closeButton);
         document.body.appendChild(el);
-        // close handler
         closeButton.addEventListener('click', () => {
             if (el && el.parentNode) el.parentNode.removeChild(el);
         });
-        // auto remove after 3 seconds
-        setTimeout(() => { try { if (el && el.parentNode) el.parentNode.removeChild(el); } catch(e){} }, 3000);
+        setTimeout(() => { try { if (el && el.parentNode) el.parentNode.removeChild(el); } catch(e){} }, 15000);
     }
 
     async function startNextStudentCardScan() {
@@ -1764,11 +1876,9 @@
         const detailContent = document.getElementById('detailContent');
         const detailModal = document.getElementById('detailModal');
 
-        // Lade-Status anzeigen und Modal öffnen
         detailContent.innerHTML = '<p>Lade Details...</p>';
         detailModal.style.display = 'flex';
 
-        // Daten vom Backend-API-Endpoint abrufen
         fetch(`/api/item_detail/${itemId}`)
             .then(response => {
                 if (!response.ok) {
@@ -1832,15 +1942,12 @@
             });
     }
 
-    // Schließt das Modal über den 'x'-Button
     function closeDetailModal() {
         document.getElementById('detailModal').style.display = 'none';
     }
 
-    // Closes the modal if the user clicks the dark background overlay
     window.onclick = function(event) {
         const modal = document.getElementById('detailModal');
-        // If the click happened directly on the dark overlay (not the white box)
         if (event.target === modal) {
             closeDetailModal();
         }
@@ -1905,12 +2012,10 @@
         }
     }
 
-    // Run when DOM structure is entirely ready
     document.addEventListener('DOMContentLoaded', async () => {
-        wireScannerUi();       // Setup scanner control buttons
-        loadLibraryItems();   // Fetch your database items right away!
+        wireScannerUi();       
+        loadLibraryItems();   
 
-        // Safely connect standard Filters and Search inputs inside DOMContentLoaded
         const filterToggleBtn = document.getElementById('filterToggleBtn');
         if (filterToggleBtn) {
             filterToggleBtn.addEventListener('click', () => {
@@ -1968,15 +2073,11 @@
                     return;
                 }
 
-                // Leitet den manuellen Code an die zentrale Logik weiter,
-                // die prüft, welcher Modus im Dropdown aktiv ist.
                 handleScanSuccess(code);
 
-                // Feld nach Eingabe leeren, um direkt den nächsten Code bereitzuhaben
                 manualItemCode.value = '';
             });
 
-            // Optional: Auch auf "Enter" im Textfeld reagieren
             manualItemCode.addEventListener('keypress', (e) => {
                 if (e.key === 'Enter') {
                     e.preventDefault();

Web/templates/mahnungen_admin.html

@@ -187,7 +187,11 @@
                                             {% endif %}
                                             <button type="button" class="btn btn-sm btn-outline-warning text-dark"
                                                     onclick="resetMahnung('{{ item.id }}', '{{ item.schueler_name }}')">
-                                                <i class="bi bi-arrow-counterclockwise"></i> Zurücksetzen
+                                                <i class="bi bi-arrow-counterclockwise"></i> Zurücksetzen (14 Tage)
+                                            </button>
+                                            <button type="button" class="btn btn-sm btn-outline-warning text-dark"
+                                                    onclick="resetMahnungCustom('{{ item.id }}', '{{ item.schueler_name }}')">
+                                                <i class="bi bi-arrow-counterclockwise"></i> Zurücksetzen mit eigener Frist
                                             </button>
                                         </div>
                                     </td>
@@ -210,7 +214,7 @@
 
 <!-- E-Mail Modal -->
 <div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
-    <div class="modal-dialog">
+    <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="emailModalLabel">Mahnungs-E-Mail senden</h5>
@@ -228,7 +232,7 @@
                         <input type="email" class="form-control" id="modalEmail" placeholder="E-Mail-Adresse eingeben...">
                     </div>
                     <div class="mb-3">
-                        <label for="modalMessage" class="form-label">Nachricht</label>
+                        <label for="modalMessage" class="form-label">Nachrichten-Text</label>
                         <textarea class="form-control" id="modalMessage" rows="4" placeholder="Optionaler Text..."></textarea>
                     </div>
                 </form>
@@ -241,6 +245,31 @@
     </div>
 </div>
 
+<!-- Custom Reset Days Modal -->
+<div class="modal fade" id="customResetModal" tabindex="-1" aria-labelledby="customResetModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="customResetModalLabel">Mahnung zurücksetzen</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
+            </div>
+            <div class="modal-body">
+                <input type="hidden" id="resetModalLoanId">
+                <p>Möchten Sie die Mahnung für <strong id="resetModalStudentName"></strong> wirklich zurücksetzen?</p>
+                <p class="text-muted small">Dadurch wird die Mahnstufe auf 0 gesetzt und der Schülerausweis entsperrt.</p>
+                <div class="mb-3">
+                    <label for="resetModalDays" class="form-label">Frist verlängern um (Tage):</label>
+                    <input type="number" class="form-control" id="resetModalDays" value="14" min="1">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+                <button type="button" class="btn btn-warning" onclick="submitCustomReset()">Mahnung zurücksetzen</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <script>
 function openEmailModal(loanId, studentName, studentEmail) {
     document.getElementById('modalLoanId').value = loanId;
@@ -292,7 +321,7 @@ function resetMahnung(loanId, studentName) {
 
     const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
 
-    fetch('/mahnungen_reset', {
+    fetch('/mahnungen_reset/14', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
         body: JSON.stringify({ loan_id: loanId })
@@ -301,7 +330,46 @@ function resetMahnung(loanId, studentName) {
     .then(data => {
         if (data.success) {
             alert(data.message);
-            location.reload(); // Seite neu laden, um die aktualisierte Ansicht zu sehen
+            location.reload();
+        } else {
+            alert('Fehler: ' + data.message);
+        }
+    })
+    .catch(error => {
+        alert('Fehler beim Senden der Anfrage.');
+        console.error(error);
+    });
+}
+
+function resetMahnungCustom(loanId, studentName) {
+    document.getElementById('resetModalLoanId').value = loanId;
+    document.getElementById('resetModalStudentName').textContent = studentName;
+    document.getElementById('resetModalDays').value = 14;
+
+    var customModal = new bootstrap.Modal(document.getElementById('customResetModal'));
+    customModal.show();
+}
+
+function submitCustomReset() {
+    const loanId = document.getElementById('resetModalLoanId').value;
+    const daysToExtend = parseInt(document.getElementById('resetModalDays').value, 10);
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
+
+    if (isNaN(daysToExtend) || daysToExtend < 1) {
+        alert('Bitte geben Sie eine gültige Anzahl an Tagen ein.');
+        return;
+    }
+
+    fetch(`/mahnungen_reset/${daysToExtend}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
+        body: JSON.stringify({ loan_id: loanId })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            alert(data.message);
+            location.reload();
         } else {
             alert('Fehler: ' + data.message);
         }

Web/templates/main_admin.html

@@ -266,6 +266,11 @@
         border-radius: 4px;
     }
 
+    .code-search-label {
+        color: #b93845;
+        font-weight: 700;
+    }
+
     .search-button {
         padding: 8px 12px;
         background-color: #007bff;
@@ -284,10 +289,10 @@
     }
 
     #code-search.searching {
-        background-color: #fff3cd;
+        background-color: #fff5f5;
         transition: background-color 0.3s;
-        border: 2px solid #ffc107;
-        box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
+        border: 2px solid #d65a62;
+        box-shadow: 0 0 8px rgba(190, 55, 66, 0.28);
     }
 
     /* QR Scanner styles */
@@ -562,26 +567,55 @@
        align-items: center;
     }
    
-    .navigation-buttons {
-        display: flex;
-        justify-content: center;
-        gap: 10px;
+    .items-navigation {
+        display: grid;
+        grid-template-columns: 42px minmax(0, 1fr) 42px;
+        align-items: center;
+        column-gap: 16px;
+        width: calc(100% + 116px);
+        margin-left: -58px;
         margin-top: 20px;
     }
 
-    .navigation-buttons .prev-button,
-    .navigation-buttons .next-button {
-        background-color: #007bff;
-        color: #fff;
-        border: none;
-        cursor: pointer;
-        padding: 10px;
-        border-radius: 5px;
+    .navigation-button-slot {
+        display: flex;
+        justify-content: center;
     }
 
-    .navigation-buttons .prev-button:hover,
-    .navigation-buttons .next-button:hover {
-        background-color: #0056b3;
+    .navigation-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 42px;
+        height: 42px;
+        padding: 0;
+        background: var(--ui-surface-soft);
+        color: var(--ui-title);
+        border: 1px solid var(--ui-border);
+        box-shadow: var(--ui-shadow-sm);
+        cursor: pointer;
+        border-radius: 10px;
+        font-size: 1.15rem;
+        font-weight: 700;
+        line-height: 1;
+        transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
+        z-index: 1;
+    }
+
+    .navigation-button:hover {
+        background: var(--ui-surface);
+        border-color: var(--module-accent-color);
+        box-shadow: var(--ui-shadow-md);
+        transform: translateY(-2px) scale(1.04);
+    }
+
+    .navigation-button:active {
+        transform: translateY(0) scale(0.96);
+    }
+
+    .navigation-button:focus-visible {
+        outline: 3px solid rgba(37, 99, 235, 0.35);
+        outline-offset: 3px;
     }
 
     /* Modal styles */
@@ -744,15 +778,15 @@
     }
 
     .code-match {
-        border: 2px solid #17a2b8 !important;
-        box-shadow: 0 0 15px rgba(23, 162, 184, 0.5) !important;
+        border: 2px solid #d65a62 !important;
+        box-shadow: 0 0 15px rgba(190, 55, 66, 0.28) !important;
         position: relative;
         z-index: 5;
     }
 
     .exact-code-match {
-        border: 3px solid #28a745 !important;
-        box-shadow: 0 0 20px rgba(40, 167, 69, 0.7) !important;
+        border: 3px solid #b93845 !important;
+        box-shadow: 0 0 20px rgba(185, 56, 69, 0.42) !important;
         position: relative;
         z-index: 11;
     }
@@ -1633,7 +1667,13 @@
         }
         
         /* Navigation buttons mobile */
-        .navigation-buttons {
+        .items-navigation {
+            display: block !important;
+            width: 100% !important;
+            margin-left: 0 !important;
+        }
+
+        .navigation-button-slot {
             display: none !important; /* Hide horizontal navigation on mobile */
         }
         
@@ -1946,7 +1986,7 @@
     /* Standardized button styles across the application */
     .search-button, .scan-button, .filter-toggle, .clear-filter, 
     .add-new-btn, .popup-close-button, .prev-image-button, .next-image-button,
-    .navigation-buttons .prev-button, .navigation-buttons .next-button {
+    .navigation-button {
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -1971,6 +2011,122 @@
         box-sizing: border-box;
         white-space: nowrap;
     }
+
+    /* iPad: use the wider canvas for cards, filters, forms, and image previews. */
+    @media screen and (min-width: 768px) and (max-width: 1180px) {
+        .admin-content-container {
+            width: min(100%, 1120px) !important;
+            max-width: 1120px !important;
+            margin: 0 auto !important;
+            padding: 20px 24px 28px !important;
+            box-sizing: border-box !important;
+        }
+
+        .filter-container {
+            display: grid !important;
+            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+            align-items: start;
+            gap: 14px !important;
+        }
+
+        .filter-group {
+            min-width: 0 !important;
+            width: auto !important;
+            padding: 14px !important;
+        }
+
+        .filter-group.search-field {
+            grid-column: span 2;
+        }
+
+        .search-container {
+            gap: 8px;
+        }
+
+        .search-container input,
+        .form-group input,
+        .form-group select,
+        .form-group textarea {
+            min-height: 44px;
+            font-size: 16px;
+        }
+
+        .items-container {
+            display: grid !important;
+            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+            gap: 18px !important;
+            padding: 14px 0 24px !important;
+            overflow: visible !important;
+            scroll-snap-type: none !important;
+        }
+
+        .item-card {
+            width: auto !important;
+            max-width: none !important;
+            min-width: 0 !important;
+            padding: 16px !important;
+            scroll-snap-align: none !important;
+        }
+
+        .item-card .image-container {
+            width: 100% !important;
+            max-width: none !important;
+            height: auto !important;
+            aspect-ratio: 4 / 3;
+            margin: 10px 0 14px !important;
+            overflow: hidden !important;
+            border: 1px solid var(--ui-border);
+            border-radius: 12px !important;
+            background: var(--ui-surface-soft);
+        }
+
+        .item-card .image-container .item-image,
+        .item-card .image-container .video-container {
+            width: 100% !important;
+            height: 100% !important;
+        }
+
+        .item-card .image-container .item-image {
+            object-fit: contain !important;
+            object-position: center;
+            background: var(--ui-surface-soft);
+        }
+
+        .item-card .image-container .item-image[data-index="0"] {
+            display: block !important;
+            position: relative !important;
+            opacity: 1 !important;
+        }
+
+        .item-card .image-container .item-image:not([data-index="0"]) {
+            display: none !important;
+        }
+
+        .item-card .image-container .video-container {
+            position: relative;
+            display: block !important;
+        }
+
+        .form-row {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 16px;
+        }
+
+        .form-actions {
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .form-actions > * {
+            min-height: 44px;
+        }
+
+        #item-modal .modal-content {
+            width: min(92vw, 880px);
+        }
+    }
+
 </style>
 <style>
     .bookmark-btn { position:absolute; top:8px; right:8px; width:46px; height:46px; background:rgba(255,255,255,.92); border:2px solid #ffc107; border-radius:50%; font-size:1.65rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#ffc107; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:background .2s, transform .15s, color .2s; z-index:6; pointer-events:auto; }
@@ -2343,7 +2499,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
         <div class="filter-container">
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>{{ filter_names.get('2', 'Fach') }}</label>
+                    <label>{{ filter_names.get('1', 'Fach') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter1-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(1)">Clear</button>
                 </div>
@@ -2357,7 +2513,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>{{ filter_names.get('1', 'Klassenstufe') }}</label>
+                    <label>{{ filter_names.get('2', 'Klassenstufe') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter2-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(2)">Clear</button>
                 </div>
@@ -2385,7 +2541,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
 
             <div class="filter-group search-field">
                 <div class="filter-header">
-                    <label for="code-search">Code suchen:</label>
+                    <label class="code-search-label" for="code-search">Code suchen:</label>
                     <button type="button" class="clear-filter" onclick="clearCodeSearch()">Clear</button>
                 </div>
                 <div class="search-container">
@@ -2420,19 +2576,23 @@ document.addEventListener('DOMContentLoaded', ()=>{
         <div id="table-view-header" class="table-view-header" aria-hidden="true">
             <span>Name</span>
             <span>Ort</span>
-            <span>{{ filter_names.get('2', 'Fach') }}</span>
-            <span>{{ filter_names.get('1', 'Jahrgangsstufe') }}</span>
+            <span>{{ filter_names.get('1', 'Fach') }}</span>
+            <span>{{ filter_names.get('2', 'Jahrgangsstufe') }}</span>
             <span>{{ filter_names.get('3', 'Schlagwort') }}</span>
             <span>Barcode</span>
             <span>Anzahl</span>
         </div>
 
-        <div id="items-container" class="items-container">
-            <!-- Items will be dynamically loaded here -->
-        </div>
-        <div class="navigation-buttons">
-            <button class="prev-button" onclick="scrollPrev()">&#10094;</button>
-            <button class="next-button" onclick="scrollNext()">&#10095;</button>
+        <div class="items-navigation">
+            <div class="navigation-button-slot">
+                <button class="navigation-button prev-button" type="button" onclick="scrollPrev()" aria-label="Vorherige Elemente">&#10094;</button>
+            </div>
+            <div id="items-container" class="items-container">
+                <!-- Items will be dynamically loaded here -->
+            </div>
+            <div class="navigation-button-slot">
+                <button class="navigation-button next-button" type="button" onclick="scrollNext()" aria-label="Nächste Elemente">&#10095;</button>
+            </div>
         </div>
     </div>
     <div id="item-modal" class="item-modal">
@@ -3206,9 +3366,12 @@ document.addEventListener('DOMContentLoaded', ()=>{
         });
     }
 
-    function loadItems(offset = 0, append = false) {
+    function loadItems(offset = 0, append = false, searchTerm = '', searchScope = 'all') {
         // Keep list payload lightweight; full details are fetched on-demand in openItemQuick.
-        return fetch(`{{ url_for('get_items') }}?offset=${offset}&limit=${MAIN_ADMIN_ITEMS_PAGE_SIZE}&light_mode=true`)
+        const searchParams = searchTerm
+            ? `&search=${encodeURIComponent(searchTerm)}&search_scope=${encodeURIComponent(searchScope)}`
+            : '';
+        return fetch(`{{ url_for('get_items') }}?offset=${offset}&limit=${MAIN_ADMIN_ITEMS_PAGE_SIZE}&light_mode=true${searchParams}`)
             .then(response => response.json())
             .then(data => {
                 const itemsContainer = document.querySelector('#items-container');
@@ -3241,7 +3404,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 }
                 pageItems.sort((a, b) => {
                     const nameA = a.Name ? a.Name.toLowerCase() : '';
-                    const nameB = a.Name ? a.Name.toLowerCase() : '';
+                    const nameB = b.Name ? b.Name.toLowerCase() : '';
                     return nameA.localeCompare(nameB);
                 });
 
@@ -3285,6 +3448,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                         card.dataset.code = (item.Code_4 !== undefined && item.Code_4 !== null) ? 
                           String(item.Code_4).trim() : '';
                         card.dataset.groupCodes = JSON.stringify(Array.isArray(item.GroupedAllCodes) ? item.GroupedAllCodes : []);
+                                                card.dataset.groupedUnits = JSON.stringify(Array.isArray(item.GroupedUnitStates) ? item.GroupedUnitStates : []);
         
                         // Add filter values to their respective sets
                         filter1Array.forEach(value => {
@@ -3394,9 +3558,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
                             <div class="card-content" data-item-id="${item._id}">
                                 <h3 class="item-col-name">${item.Name}</h3>
                                 <p class="item-col-location"><strong>Ort:</strong> ${item.Ort || '-'}</p>
-                                <p class="item-col-filter1"><strong>Unterrichtsfach:</strong> ${filter1Display}${filter1More}</p>
-                                <p class="item-col-filter2"><strong>Jahrgangsstufe:</strong> ${filter2Display}${filter2More}</p>
-                                <p class="item-col-filter3"><strong>Schlagwort:</strong> ${filter3Display}${filter3More}</p>
+                                <p class="item-col-filter1"><strong>{{ filter_names.get('1', 'Jahrgangsstufe') }}:</strong> ${filter1Display}${filter1More}</p>
+                                <p class="item-col-filter2"><strong>{{ filter_names.get('2', 'Jahrgangsstufe') }}:</strong> ${filter2Display}${filter2More}</p>
+                                <p class="item-col-filter3"><strong>{{ filter_names.get('3', 'Jahrgangsstufe') }}:</strong> ${filter3Display}${filter3More}</p>
                                 <p class="item-col-code"><strong>Barcode:</strong> ${item.Code_4 || '-'}</p>
                                 <p class="item-col-count"><strong>Anzahl:</strong> ${groupedCount}</p>
                                 ${hasDamage ? `<div class="damage-badge">${damageCount > 0 ? `Schäden gemeldet: ${damageCount}` : 'Schäden gemeldet'}</div>` : ''}
@@ -3415,7 +3579,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                                 </div>
                                 {% if current_permissions.actions.get('can_borrow', False) %}
                                 ${isAvailableForBorrow && !item.BlockedNow ? 
-                                    `<form method="POST" action="{{ url_for('ausleihen', id='') }}${item._id}">
+                                    `<form method="POST" action="{{ url_for('ausleihen', id='') }}${item._id}" data-grouped-borrow-form>
                                         ${isGroupedItem ? `
                                         <div class="grouped-borrow-controls" style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; align-items:center;">
     <label style="font-size:0.85rem; margin:0;">Anzahl:</label>
@@ -3445,6 +3609,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                                 :
                                     `<button class="ausleihen disabled-button" disabled>${item.BlockedNow ? 'Reserviert' : 'Ausgeliehen'}</button>`
                                 }
+                                ${isGroupedItem ? '<div class="grouped-searched-action" data-grouped-searched-action style="display:none;"></div>' : ''}
                                 {% endif %}
                                 {% if current_permissions.actions.get('can_delete', False) %}
                                 <form method="POST" action="{{ url_for('delete_item', id='') }}${item._id}" style="display:inline;" onsubmit="return confirm('Sind Sie sicher, dass Sie dieses Objekt löschen möchten?')">
@@ -3679,13 +3844,66 @@ document.addEventListener('DOMContentLoaded', ()=>{
             card.classList.remove('highlight-item', 'code-match', 'exact-code-match');
         });
         
-        applyFilters(true);
+        if (codeSearchTerm) {
+            loadItems(0, false, codeSearchTerm, 'all');
+        } else {
+            loadItems();
+        }
         
         setTimeout(() => {
             searchInput.classList.remove('searching');
         }, 500);
     }
 
+    function syncSearchedGroupedAction(card, searchTerm, exactCodeMatch) {
+        const searchedAction = card.querySelector('[data-grouped-searched-action]');
+        if (!searchedAction) return;
+
+        const borrowForm = card.querySelector('[data-grouped-borrow-form]');
+        searchedAction.style.display = 'none';
+        searchedAction.innerHTML = '';
+
+        if (!exactCodeMatch || !searchTerm) {
+            if (borrowForm) borrowForm.style.display = '';
+            return;
+        }
+
+        let groupedUnits = [];
+        try {
+            groupedUnits = JSON.parse(card.dataset.groupedUnits || '[]');
+        } catch {
+            groupedUnits = [];
+        }
+
+        const matchedUnit = groupedUnits.find(unit =>
+            String(unit.code || '').trim().toLowerCase() === searchTerm
+        );
+        if (!matchedUnit) return;
+
+        if (matchedUnit.available) {
+            if (borrowForm) borrowForm.style.display = '';
+            const specificSelect = borrowForm?.querySelector('[name="specific_item_id"]');
+            if (specificSelect) {
+                specificSelect.value = matchedUnit.id;
+            }
+            return;
+        }
+
+        if (borrowForm) borrowForm.style.display = 'none';
+        searchedAction.style.display = 'block';
+        if (matchedUnit.borrowed_by_current_user) {
+            searchedAction.innerHTML = `
+                <form method="POST" action="/zurueckgeben/${encodeURIComponent(matchedUnit.id)}">
+                    <button class="ausleihen" type="submit">Zurückgeben (${escapeHtml(matchedUnit.code || 'Code')})</button>
+                </form>`;
+        } else {
+            searchedAction.innerHTML = `
+                <button class="ausleihen disabled-button" type="button" disabled>
+                    ${escapeHtml(matchedUnit.code || 'Code')} ausgeliehen
+                </button>`;
+        }
+    }
+
     function applyFilters(isDirectSearch = false) {
         const itemsContainer = document.querySelector('#items-container');
         const items = itemsContainer.querySelectorAll('.item-card');
@@ -3732,6 +3950,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             if (passesAllFilters && matchesCodeSearch && matchesDesc && (!favoritesOnly || isFavoriteCard)) {
                 item.style.display = 'block';
                 visibleCount++;
+                syncSearchedGroupedAction(item, searchTerm, exactCodeMatch);
                 
                 if (exactCodeMatch) {
                     item.classList.add('highlight-item', 'exact-code-match');
@@ -3756,6 +3975,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 }
             } else {
                 item.style.display = 'none';
+                syncSearchedGroupedAction(item, '', false);
             }
         });
 
@@ -3830,7 +4050,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             card.classList.remove('highlight-item', 'code-match', 'exact-code-match');
         });
         
-        applyFilters();
+        loadItems();
     }
 
     // Description search using backend substring match
@@ -3839,21 +4059,12 @@ document.addEventListener('DOMContentLoaded', ()=>{
         const term = (input?.value || '').trim();
         if (!term){
             descSearchIds = null;
-            applyFilters(true);
+            loadItems(0, false, codeSearchTerm, 'all');
             return;
         }
         input?.classList.add('searching');
-        fetch(`/search_word/${encodeURIComponent(term)}`)
-            .then(r=>r.json())
-            .then(data=>{
-                if (data && data.success && Array.isArray(data.response)){
-                    descSearchIds = new Set(data.response.map(String));
-                } else {
-                    descSearchIds = new Set();
-                }
-                applyFilters(true);
-            })
-            .catch(()=>{ descSearchIds = new Set(); applyFilters(true); })
+        descSearchIds = null;
+        loadItems(0, false, term, 'title_description')
             .finally(()=>{ setTimeout(()=> input?.classList.remove('searching'), 300); });
     }
 
@@ -3861,7 +4072,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
         const input = document.getElementById('desc-search');
         if (input) input.value = '';
         descSearchIds = null;
-        applyFilters();
+        loadItems(0, false, codeSearchTerm, 'all');
     }
 
     // Open item modal with fresh details from backend.
@@ -4063,21 +4274,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 +4309,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>
@@ -4104,17 +4323,17 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 </div>
 
                 <div class="detail-group">
-                    <div class="detail-label">Unterrichtsfach:</div>
+                    <div class="detail-label">{{ filter_names.get('1', 'Unterrichtsfach') }}:</div>
                     <div class="detail-value">${escapeHtml(filter1Array.join(', ') || '-')}</div>
                 </div>
 
                 <div class="detail-group">
-                    <div class="detail-label">Jahrgangsstufe:</div>
+                    <div class="detail-label">{{ filter_names.get('2', 'Jahrgangsstufe') }}:</div>
                     <div class="detail-value">${escapeHtml(filter2Array.join(', ') || '-')}</div>
                 </div>
 
                 <div class="detail-group">
-                    <div class="detail-label">Schlagwort:</div>
+                    <div class="detail-label">{{ filter_names.get('3', 'Schlagwort') }}:</div>
                     <div class="detail-value">${escapeHtml(filter3Array.join(', ') || '-')}</div>
                 </div>
 
@@ -4145,22 +4364,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 +4399,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 +5600,314 @@ 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;
+    max-height: 92vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    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;
+        max-height: calc(100dvh - 18px);
+        overflow-y: 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 %}

Web/templates/manage_filters.html

@@ -21,9 +21,8 @@
             <div class="card shadow-sm border-0 h-100 rounded-3">
                 <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                     <h2 class="card-title h5 mb-0 fw-semibold text-primary">
-                        <i class="bi bi-funnel me-2"></i>{{ filter_names.get('1', 'Jahrgangsstufe') }}
+                        <i class="bi bi-funnel me-2"></i>{{ filter_names.get('2', 'Jahrgangsstufe') }}
                     </h2>
-                    <span class="badge bg-primary-subtle text-primary rounded-pill">Filter 1</span>
                 </div>
                 <div class="card-body p-4">
                     <form method="POST" action="{{ url_for('add_filter_value', filter_num=1) }}" class="mb-4">
@@ -87,9 +86,8 @@
             <div class="card shadow-sm border-0 h-100 rounded-3">
                 <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                     <h2 class="card-title h5 mb-0 fw-semibold text-primary">
-                        <i class="bi bi-funnel me-2"></i>{{ filter_names.get('2', 'Fachgebiet') }}
+                        <i class="bi bi-funnel me-2"></i>{{ filter_names.get('1', 'Fachgebiet') }}
                     </h2>
-                    <span class="badge bg-primary-subtle text-primary rounded-pill">Filter 2</span>
                 </div>
                 <div class="card-body p-4">
                     <form method="POST" action="{{ url_for('add_filter_value', filter_num=2) }}" class="mb-4">

Web/templates/my_borrowed_items.html

@@ -142,6 +142,9 @@
                     {% if item.ActiveAppointment %}
                     <span class="appointment-status status-active">Aktiv</span>
                     {% endif %}
+                    {% if item.ReturnPending %}
+                    <span class="return-due-badge">RÜCKGABE ERFORDERLICH</span>
+                    {% endif %}
                 </div>
                 
                 <div class="item-details">
@@ -202,7 +205,9 @@
                     <div class="action-buttons-container">
                         <form method="POST" action="{{ url_for('zurueckgeben', id=item._id) }}">
                             <input type="hidden" name="source_page" value="my_borrowed_items">
-                            <button class="return-button" type="submit">Zurückgeben</button>
+                            <button class="return-button{% if item.ReturnPending %} return-button-due{% endif %}" type="submit">
+                                {% if item.ReturnPending %}Rückgabe bestätigen{% else %}Zurückgeben{% endif %}
+                            </button>
                         </form>
                         <form method="POST" action="{{ url_for('cancel_ausleihung_route', id=item.AppointmentData.id) }}" onsubmit="return confirm('Möchten Sie diese aktive Ausleihung wirklich stornieren?');">
                             <button class="cancel-button" type="submit">Stornieren</button>
@@ -497,6 +502,30 @@ document.addEventListener('DOMContentLoaded', function() {
     .return-button:hover {
         background-color: #0069d9;
     }
+
+    .return-due-badge {
+        background-color: #dc3545;
+        color: #fff;
+        padding: 4px 9px;
+        border-radius: 12px;
+        font-size: 0.75rem;
+        font-weight: 800;
+        margin-left: 10px;
+    }
+
+    .return-button-due {
+        background-color: #dc3545;
+        animation: return-due-pulse 1.8s ease-in-out infinite;
+    }
+
+    .return-button-due:hover {
+        background-color: #b02a37;
+    }
+
+    @keyframes return-due-pulse {
+        0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.45); }
+        50% { box-shadow: 0 0 0 7px rgba(220, 53, 69, 0); }
+    }
     
     .return-count-group {
         display: flex;

Web/templates/register.html

@@ -88,11 +88,10 @@
                     <div class="password-rules" id="password-rules" aria-live="polite">
                         <p class="password-rules-title">Passwort-Anforderungen:</p>
                         <ul>
-                            <li id="pw-rule-length" class="pw-rule">Mindestens 12 Zeichen</li>
+                            <li id="pw-rule-length" class="pw-rule">Mindestens 5 Zeichen</li>
                             <li id="pw-rule-lower" class="pw-rule">Mindestens ein Kleinbuchstabe</li>
                             <li id="pw-rule-upper" class="pw-rule">Mindestens ein Grossbuchstabe</li>
                             <li id="pw-rule-digit" class="pw-rule">Mindestens eine Zahl</li>
-                            <li id="pw-rule-symbol" class="pw-rule">Mindestens ein Sonderzeichen</li>
                         </ul>
                     </div>
 
@@ -105,7 +104,7 @@
                                    name="password"
                                    placeholder="Geben Sie ein sicheres Passwort ein"
                                    required
-                                   pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{12,}">
+                                   pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{5,}">
                             <button type="button" id="toggle-pw-btn" class="toggle-pw-btn" onclick="togglePasswordVisibility()" style="background:none; border:none; cursor:pointer; padding-right:10px;">👁️</button>
                         </div>
                     </div>
@@ -201,11 +200,11 @@ function generateUsername() {
 
 // PASSWORT GENERATOR
 function generateSecurePassword() {
-    const length = 16;
-    const charsetLower = "abcdefghijklmnopqrstuvwxyz";
-    const charsetUpper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-    const charsetNum = "0123456789";
-    const charsetSym = "!@#$%^&*()_+~|}{[]:;?><,.-=";
+    const length = 5;
+    const charsetLower = "abcdefghijklmnpqrstuvwxyz";
+    const charsetUpper = "ABCDEFGHIJKLMNPQRSTUVWXYZ";
+    const charsetNum = "123456789";
+    const charsetSym = "!#$(),.=";
 
     let password = "";
     // Garantiert mindestens 1 Zeichen aus jeder Kategorie

Web/templates/student_cards_admin.html

@@ -1,11 +1,3 @@
-<!--
-   Copyright 2025-2026 AIIrondev
-
-   Licensed under the Inventarsystem EULA (Endbenutzer-Lizenzvertrag).
-   See Legal/LICENSE for the full license text.
-   Unauthorized commercial use, SaaS hosting, or removal of branding is prohibited.
-   For commercial licensing inquiries: https://github.com/AIIrondev
--->
 {% extends "base.html" %}
 
 {% block title %}Bibliotheksausweise - Inventarsystem{% endblock %}
@@ -21,7 +13,6 @@
         gap: 15px;
     }
 
-    /* Neu strukturiertes Layout für Formular & Import */
     .dashboard-grid {
         display: grid;
         grid-template-columns: 2fr 1fr;
@@ -145,6 +136,38 @@
         background: #5a6268;
     }
 
+    /* Filter Controls Styling */
+    .filter-bar {
+        display: flex;
+        gap: 12px;
+        margin-bottom: 15px;
+        flex-wrap: wrap;
+        align-items: center;
+        background: var(--ui-bg);
+        padding: 12px;
+        border-radius: 8px;
+        border: 1px solid #ddd;
+    }
+
+    .filter-bar input,
+    .filter-bar select {
+        padding: 8px 12px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 14px;
+    }
+
+    .filter-bar input {
+        flex: 1;
+        min-width: 200px;
+    }
+
+    .filter-counter {
+        font-size: 13px;
+        color: #666;
+        margin-left: auto;
+    }
+
     .cards-table {
         width: 100%;
         border-collapse: collapse;
@@ -255,7 +278,8 @@
     }
 
     :root[data-theme="dark"] .student-card-form,
-    :root[data-theme="dark"] .import-card {
+    :root[data-theme="dark"] .import-card,
+    :root[data-theme="dark"] .filter-bar {
         background: var(--ui-surface) !important;
         color: var(--ui-text) !important;
         border-color: var(--ui-border) !important;
@@ -269,7 +293,8 @@
     :root[data-theme="dark"] .import-card p,
     :root[data-theme="dark"] .rollover-hint,
     :root[data-theme="dark"] .empty-state,
-    :root[data-theme="dark"] .empty-state p {
+    :root[data-theme="dark"] .empty-state p,
+    :root[data-theme="dark"] .filter-counter {
         color: var(--ui-text-muted) !important;
     }
 
@@ -286,6 +311,8 @@
     :root[data-theme="dark"] .form-group input,
     :root[data-theme="dark"] .form-group select,
     :root[data-theme="dark"] .form-group textarea,
+    :root[data-theme="dark"] .filter-bar input,
+    :root[data-theme="dark"] .filter-bar select,
     :root[data-theme="dark"] .export-buttons form,
     :root[data-theme="dark"] .export-buttons select {
         background: var(--ui-bg) !important;
@@ -297,6 +324,8 @@
     :root[data-theme="dark"] .form-group input:focus,
     :root[data-theme="dark"] .form-group select:focus,
     :root[data-theme="dark"] .form-group textarea:focus,
+    :root[data-theme="dark"] .filter-bar input:focus,
+    :root[data-theme="dark"] .filter-bar select:focus,
     :root[data-theme="dark"] .export-buttons select:focus {
         border-color: #60a5fa !important;
         box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22) !important;
@@ -334,6 +363,16 @@
         .export-buttons > a {
             flex: 1 1 100%;
         }
+
+        .filter-bar {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .filter-counter {
+            margin-left: 0;
+            text-align: right;
+        }
     }
 
     @media (max-width: 992px) {
@@ -473,7 +512,9 @@
             <div>
                 <h3 style="margin:0 0 8px 0;">Excel-Import</h3>
                 <p style="margin:0 0 12px 0; color:#555; font-size:13px; line-height:1.4;">
-                    Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch (z. B. aus <strong>ASV</strong>). Erkannt werden Name, Nachname, Klasse, Ausweis-ID, lokales Differenzierungsmerkmal, Notizen & Ausleihdauer.
+                    Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch (z. B. aus <strong>ASV</strong>). Erkannt werden Rufame, Nachname, Klasse*, Ausweis-ID*, lokales Differenzierungsmerkmal*, Notizen* & Ausleihdauer*.
+                    Hinweis: Die Daten werden Validiert und müssen dann noch einmal aus sicherheits gründen hochgeladen werden!
+                    Im folgenden ist eine export vorlage für ihre ASV-Software hinterlegt: <a href="{{ url_for('get_asv_export') }}" target="_blank" style="color:#007bff; text-decoration:underline;">ASV Export Vorlage</a>
                 </p>
             </div>
 
@@ -503,7 +544,20 @@
     <div>
         <h2 style="margin-bottom: 15px;">Registrierte Ausweise</h2>
         {% if student_cards %}
-            <table class="cards-table">
+            <!-- Filter Options -->
+            <div class="filter-bar">
+                <input type="text" id="cardSearchInput" placeholder="🔍 Name oder Ausweis-ID suchen...">
+                <select id="classFilterSelect">
+                    <option value="">Alle Klassen</option>
+                    {% for cls in available_classes %}
+                        <option value="{{ cls }}">{{ cls }}</option>
+                    {% endfor %}
+                </select>
+                <button type="button" id="clearFilterBtn" class="btn-cancel" style="padding: 8px 12px; font-size: 13px;">Zurücksetzen</button>
+                <span class="filter-counter" id="filterCounter">Angezeigt: {{ student_cards|length }} / {{ student_cards|length }}</span>
+            </div>
+
+            <table class="cards-table" id="cardsTable">
                 <thead>
                     <tr>
                         <th>Ausweis-ID</th>
@@ -516,7 +570,7 @@
                 </thead>
                 <tbody>
                     {% for card in student_cards %}
-                        <tr>
+                        <tr class="card-row" data-id="{{ card.AusweisId|lower }}" data-name="{{ card.SchülerName|lower }}" data-class="{{ card.Klasse or '' }}">
                             <td><strong>{{ card.AusweisId }}</strong></td>
                             <td>{{ card.SchülerName }}</td>
                             <td>{{ card.Klasse or '—' }}</td>
@@ -529,6 +583,12 @@
                                         <button type="submit" class="btn-edit">Bearbeiten</button>
                                     </form>
                                     <a href="{{ url_for('student_card_single_barcode_download', card_id=card._id) }}" class="btn-export">📥 PDF</a>
+                                    {% if email_service_enabled %}
+                                    <form method="POST" action="{{ url_for('student_card_single_barcode_download', card_id=card._id) }}" style="display:flex; gap:4px; align-items:center;">
+                                        <input type="email" name="recipient_email" required placeholder="E-Mail" aria-label="E-Mail für {{ card.SchülerName }}" style="width:150px; padding:5px;">
+                                        <button type="submit" class="btn-export">PDF senden</button>
+                                    </form>
+                                    {% endif %}
                                     <form method="POST" style="display: inline;" onsubmit="return confirm('Wirklich löschen?');">
                                         <input type="hidden" name="action" value="delete">
                                         <input type="hidden" name="card_id" value="{{ card._id }}">
@@ -540,6 +600,10 @@
                     {% endfor %}
                 </tbody>
             </table>
+            
+            <div id="noResultsMsg" class="empty-state" style="display: none;">
+                <p>Keine passende Ausweise für diesen Filter gefunden.</p>
+            </div>
         {% else %}
             <div class="empty-state">
                 <p>Keine Bibliotheksausweise registriert.</p>
@@ -551,7 +615,56 @@
 
 <script src="https://cdn.jsdelivr.net/npm/qrcode.js"></script>
 <script>
-    // All PDF exports now go through backend routes
+    document.addEventListener('DOMContentLoaded', function() {
+        const searchInput = document.getElementById('cardSearchInput');
+        const classSelect = document.getElementById('classFilterSelect');
+        const clearBtn = document.getElementById('clearFilterBtn');
+        const filterCounter = document.getElementById('filterCounter');
+        const rows = document.querySelectorAll('.card-row');
+        const noResultsMsg = document.getElementById('noResultsMsg');
+        const totalRows = rows.length;
+
+        function filterCards() {
+            const query = searchInput ? searchInput.value.toLowerCase().trim() : '';
+            const selectedClass = classSelect ? classSelect.value : '';
+            let visibleCount = 0;
+
+            rows.forEach(row => {
+                const id = row.getAttribute('data-id') || '';
+                const name = row.getAttribute('data-name') || '';
+                const cardClass = row.getAttribute('data-class') || '';
+
+                const matchesQuery = !query || id.includes(query) || name.includes(query);
+                const matchesClass = !selectedClass || cardClass === selectedClass;
+
+                if (matchesQuery && matchesClass) {
+                    row.style.display = '';
+                    visibleCount++;
+                } else {
+                    row.style.display = 'none';
+                }
+            });
+
+            if (filterCounter) {
+                filterCounter.textContent = `Angezeigt: ${visibleCount} / ${totalRows}`;
+            }
+
+            if (noResultsMsg) {
+                noResultsMsg.style.display = (visibleCount === 0 && totalRows > 0) ? 'block' : 'none';
+            }
+        }
+
+        if (searchInput) searchInput.addEventListener('input', filterCards);
+        if (classSelect) classSelect.addEventListener('change', filterCards);
+
+        if (clearBtn) {
+            clearBtn.addEventListener('click', function() {
+                if (searchInput) searchInput.value = '';
+                if (classSelect) classSelect.value = '';
+                filterCards();
+            });
+        }
+    });
 </script>
 
 {% endblock %}

Web/templates/terminplaner.html

@@ -42,6 +42,12 @@
                     <a href="{{ url_for('terminplaner.export_pdf_brief', plan_id=plan_id) }}" class="btn btn-outline-success btn-sm">
                         📄 Brief als PDF herunterladen
                     </a>
+                    {% if mail_service_enabled %}
+                    <form method="post" action="{{ url_for('terminplaner.export_pdf_brief', plan_id=plan_id) }}" class="d-flex flex-wrap gap-2 mt-2">
+                        <input type="email" name="recipient_email" required placeholder="Empfänger-E-Mail" aria-label="Empfänger-E-Mail für den Einladungsbrief" class="form-control" style="max-width:280px;">
+                        <button type="submit" class="btn btn-outline-primary btn-sm">PDF per E-Mail senden</button>
+                    </form>
+                    {% endif %}
                 </div>
 
                 {% if calendar_link %}

Web/templates/upload_admin.html

@@ -738,7 +738,7 @@
     {% if show_library_features %}
     <div class="upload-import-panel" style="border:1px solid #dbe4ee; border-radius:8px; padding:14px; margin-bottom:16px; background:#f8fbff;">
         <h3 style="margin:0 0 8px 0;">Excel-Import Bibliothek (Mehrere Bücher)</h3>
-        <p style="margin:0 0 10px 0; color:#555;">Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch. Spalten werden automatisch erkannt (z.B. Name, Ort, Beschreibung, ISBN, Code, Anzahl). Für den Bibliotheksimport ist eine gültige ISBN je Zeile erforderlich.</p>
+        <p style="margin:0 0 10px 0; color:#555;">Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch. Spalten werden automatisch erkannt (z.B. Name, Ort, Beschreibung, ISBN, Code, Anzahl). Für den Bibliotheksimport ist eine gültige ISBN je Zeile erforderlich.  Hinweis: Die Daten werden Validiert und müssen dann noch einmal aus sicherheits gründen hochgeladen werden!</p>
         <form method="POST" action="{{ url_for('upload_library_excel') }}" enctype="multipart/form-data" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
             <input type="file" name="library_excel" accept=".xlsx,.csv" required>
             <button type="button" class="btn btn-link" onclick="downloadSampleCsv('library')">Beispiel-CSV herunterladen</button>
@@ -750,7 +750,7 @@
     {% else %}
     <div class="upload-import-panel" style="border:1px solid #dbe4ee; border-radius:8px; padding:14px; margin-bottom:16px; background:#f8fbff;">
         <h3 style="margin:0 0 8px 0;">Excel-Import Inventar (Mehrere Artikel)</h3>
-        <p style="margin:0 0 10px 0; color:#555;">Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch. Spalten werden automatisch erkannt (z.B. Name, Ort, Beschreibung, Filter1/2/3, Kosten, Jahr, Code, Anzahl).</p>
+        <p style="margin:0 0 10px 0; color:#555;">Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch. Spalten werden automatisch erkannt (z.B. Name, Ort, Beschreibung, Filter1/2/3, Kosten, Jahr, Code, Anzahl).  Hinweis: Die Daten werden Validiert und müssen dann noch einmal aus sicherheits gründen hochgeladen werden!</p>
         <form method="POST" action="{{ url_for('upload_inventory_excel') }}" enctype="multipart/form-data" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
             <input type="file" name="inventory_excel" accept=".xlsx,.csv" required>
             <button type="button" class="btn btn-link" onclick="downloadSampleCsv('inventory')">Beispiel-CSV herunterladen</button>
@@ -865,38 +865,6 @@
             <!-- Normal Item Mode: Standard Filters -->
             <div class="filter-inputs">
                 <h3>{{ filter_names.get('1', 'Jahrgangsstufe') }}</h3>
-                <div class="multi-filter">
-                    <div class="form-group">
-                        <label for="filter1-1">Wert 1:</label>
-                        <select id="filter1-1" name="filter" class="filter-dropdown-select" required>
-                            <option value="">-- Bitte auswählen --</option>
-                            <!-- Options will be loaded by JavaScript -->
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="filter1-2">Wert 2:</label>
-                        <select id="filter1-2" name="filter" class="filter-dropdown-select">
-                            <option value="">-- Optional --</option>
-                            <!-- Options will be loaded by JavaScript -->
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="filter1-3">Wert 3:</label>
-                        <select id="filter1-3" name="filter" class="filter-dropdown-select">
-                            <option value="">-- Optional --</option>
-                            <!-- Options will be loaded by JavaScript -->
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="filter1-4">Wert 4:</label>
-                        <select id="filter1-4" name="filter" class="filter-dropdown-select">
-                            <option value="">-- Optional --</option>
-                            <!-- Options will be loaded by JavaScript -->
-                        </select>
-                    </div>
-                </div>
-                
-                <h3>{{ filter_names.get('2', 'Fachgebiet') }}</h3>
                 <div class="multi-filter">
                     <div class="form-group">
                         <label for="filter2-1">Wert 1:</label>
@@ -928,6 +896,38 @@
                     </div>
                 </div>
                 
+                <h3>{{ filter_names.get('2', 'Fachgebiet') }}</h3>
+                <div class="multi-filter">
+                    <div class="form-group">
+                        <label for="filter1-1">Wert 1:</label>
+                        <select id="filter1-1" name="filter" class="filter-dropdown-select" required>
+                            <option value="">-- Bitte auswählen --</option>
+                            <!-- Options will be loaded by JavaScript -->
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="filter1-2">Wert 2:</label>
+                        <select id="filter1-2" name="filter" class="filter-dropdown-select">
+                            <option value="">-- Optional --</option>
+                            <!-- Options will be loaded by JavaScript -->
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="filter1-3">Wert 3:</label>
+                        <select id="filter1-3" name="filter" class="filter-dropdown-select">
+                            <option value="">-- Optional --</option>
+                            <!-- Options will be loaded by JavaScript -->
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="filter1-4">Wert 4:</label>
+                        <select id="filter1-4" name="filter" class="filter-dropdown-select">
+                            <option value="">-- Optional --</option>
+                            <!-- Options will be loaded by JavaScript -->
+                        </select>
+                    </div>
+                </div>
+                
                 <h3>{{ filter_names.get('3', 'Schlagwort') }}</h3>
                 <div class="multi-filter">
                     <div class="form-group">

Web/templates/user_del.html

@@ -228,7 +228,12 @@
                     </div>
                     <div class="mb-3">
                         <label for="new-password" class="form-label">Neues Passwort:</label>
-                        <input type="password" class="form-control" id="new-password" name="new_password" required>
+                        <div class="input-group">
+                            <input type="password" class="form-control" id="new-password" name="new_password" required>
+                            <button class="btn btn-outline-secondary" type="button" id="togglePasswordBtn" onclick="togglePasswordVisibility()">
+                                Anzeigen
+                            </button>
+                        </div>
                         <div class="password-requirements small text-muted mt-1">
                             <p>Das Passwort muss mindestens 6 Zeichen lang sein.</p>
                         </div>
@@ -397,14 +402,36 @@
         modal.show();
     }
 
+    function togglePasswordVisibility() {
+        var passwordInput = document.getElementById('new-password');
+        var toggleBtn = document.getElementById('togglePasswordBtn');
+        
+        if (passwordInput.type === 'password') {
+            passwordInput.type = 'text';
+            toggleBtn.textContent = 'Verbergen';
+        } else {
+            passwordInput.type = 'password';
+            toggleBtn.textContent = 'Anzeigen';
+        }
+    }
+    
     function openResetPasswordModal(username) {
         document.getElementById('reset-username').value = username;
         document.getElementById('username-display').value = username;
-
+    
+        var passwordInput = document.getElementById('new-password');
+        var toggleBtn = document.getElementById('togglePasswordBtn');
+    
+        // Reset password field state on modal open
+        passwordInput.value = '';
+        passwordInput.type = 'password';
+        if (toggleBtn) {
+            toggleBtn.textContent = 'Anzeigen';
+        }
+    
         var modal = new bootstrap.Modal(document.getElementById('resetPasswordModal'));
         modal.show();
     }
-
     function openPermissionsModal(button) {
         var username = button.getAttribute('data-username') || '';
         var preset = button.getAttribute('data-preset') || 'standard_user';