Tauschanfragen für Teammitglieder ergänzen

Betrachter klicken ihren Tag an, wählen ihren Namen, optional Wunschperson
und Wunschtag, und schreiben eine Notiz; keine Anmeldung nötig, zehn
Anfragen je Stunde und Adresse. Offene Anfragen markieren den Tag im
Kalender. Bearbeiter sehen sie unter „Anfragen" mit Zähler und führen den
Tausch aus (über Kreuz oder Übernahme), öffnen den Tag oder lehnen ab.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

public/index.html

@@ -16,6 +16,7 @@
       <a href="#kalender" data-view="kalender">Kalender</a>
       <a href="#personen" data-view="personen">Personen</a>
       <a href="#abwesenheiten" data-view="abwesenheiten">Abwesenheiten</a>
+      <a href="#anfragen" data-view="anfragen">Anfragen <span id="requests-count" class="count" hidden></span></a>
       <a href="#einstellungen" data-view="einstellungen">Einstellungen</a>
     </nav>
     <button type="button" id="auth-button" class="topbar-action" hidden>Anmelden</button>
@@ -32,6 +33,7 @@
           <button type="button" id="today-month" class="ghost">Heute</button>
         </div>
         <div class="actions">
+          <button type="button" id="open-request" class="primary" hidden>Tausch anfragen …</button>
           <button type="button" id="open-plan" class="primary">Auslosen …</button>
           <button type="button" id="open-nextcloud">Nextcloud …</button>
           <a id="download-ics" class="button ghost" href="#" download>ICS-Datei</a>
@@ -49,6 +51,7 @@
         <span><span class="badge co">N</span> Nebenmoderation</span>
         <span><span class="lock" aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="1.5"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span> fixiert</span>
         <span><span class="avatar empty small" aria-hidden="true">?</span> unbesetzt</span>
+        <span><span class="req-mark" aria-hidden="true"></span> Tauschanfrage offen</span>
       </div>
       <section class="stats" aria-labelledby="stats-title">
         <h3 id="stats-title">Einsätze in diesem Monat</h3>
@@ -145,6 +148,15 @@
       <ul id="absence-list" class="list"></ul>
     </section>
 
+    <!-- Anfragen (nur Bearbeiter) -->
+    <section id="view-anfragen" class="view" hidden aria-labelledby="requests-title">
+      <h2 id="requests-title">Tauschanfragen</h2>
+      <p class="hint">Teammitglieder melden hier, wenn sie an einem Tag nicht können. Nichts wird automatisch geändert: „Ausführen" tauscht wie gewünscht, „Tag öffnen" lässt dich selbst wählen.</p>
+      <ul id="request-list" class="list"></ul>
+      <label class="inline" id="requests-toggle"><input type="checkbox" id="requests-show-done"> Erledigte und abgelehnte anzeigen</label>
+      <ul id="request-list-done" class="list" hidden></ul>
+    </section>
+
     <!-- Einstellungen -->
     <section id="view-einstellungen" class="view" hidden aria-labelledby="settings-title">
       <h2 id="settings-title">Einstellungen</h2>
@@ -256,6 +268,25 @@
     </form>
   </dialog>
 
+  <!-- Dialog: Tausch anfragen (für alle) -->
+  <dialog id="request-dialog">
+    <form method="dialog" class="dialog-form" id="request-form">
+      <h2>Tausch anfragen</h2>
+      <p id="request-info" class="hint"></p>
+      <label>Ich bin <select name="personId" required></select></label>
+      <label>Tag, an dem ich nicht kann <input type="date" name="date" required></label>
+      <label>Ich würde gern tauschen mit (optional) <select name="partnerId"><option value="">– noch offen –</option></select></label>
+      <label>Wunschtag für den Tausch (optional) <input type="date" name="partnerDate"></label>
+      <label>Notiz (optional) <input name="note" maxlength="300" placeholder="z. B. Arzttermin, bin erst ab 10 Uhr da"></label>
+      <p id="request-result" class="result" hidden></p>
+      <div class="form-actions">
+        <span class="spacer"></span>
+        <button type="button" class="ghost" id="request-close">Abbrechen</button>
+        <button type="submit" class="primary" id="request-submit">Anfrage senden</button>
+      </div>
+    </form>
+  </dialog>
+
   <!-- Dialog: Anmelden zum Bearbeiten -->
   <dialog id="login-dialog">
     <form method="dialog" class="dialog-form" id="login-form">