Arbeit der parallelen Session gesichert (Profilbilder für Stimmen, Diene-Zugang)

Wie beim vorherigen Mal lag das nur als Arbeitskopie auf dem Server, nicht
in git. Unverändert übernommen, bevor darauf aufgebaut wird:
- Profilbild-Auswahl für die Stimmen (data-stimmen-avatare.js neu,
  stimmen.js, i18n-stimmen.js, stimmen.html, verwaltung.html, main.css)
- Dritte Zugangs-Kachel für Diene (gate.html, server/gate.js)

Co-Authored-By: Claude Opus 5 <[email protected]>

gate.html

@@ -222,6 +222,25 @@
     background: linear-gradient(120deg, #ff8fc6 0%, #c084fc 30%, #ffd76a 55%, #ff8fc6 80%, #c084fc 100%);
     background-size: 340% 340%;
   }
+  /* Dienes Kachel (21.08.2026, Nutzer-Wunsch: "mach eine 3 Zugangskiste ...
+     ich will nämlich dass Diene schon jetzt auch die Seite sieht, damit wir
+     mit mehreren Augen die letzten kleinen Details verbessern"). Wieder eine
+     EIGENE Farbwelt (Smaragd/Mint/Gold) statt einer Umfärbung der beiden
+     anderen -- so ist auf einen Blick klar, welche Kachel wem gehört. */
+  .gate-card--diene {
+    background:
+      linear-gradient(180deg, rgba(13,24,20,.92), rgba(8,15,13,.96)) padding-box,
+      linear-gradient(110deg, #6ee7b7, #34d399, #d4af37, #6ee7b7) border-box;
+    box-shadow: 0 30px 70px -25px rgba(0,0,0,.75), 0 0 50px -20px rgba(52,211,153,.35);
+  }
+  .gate-card-icon--diene { background-image: url('assets/img/avatar-diene.jpg'); }
+  .gate-card--diene .gate-card-icon { border-color: rgba(110,231,183,.65); }
+  .gate-card--diene .gate-card-name { color: #c7f5e3; }
+  .gate-card--diene input:focus { border-color: rgba(52,211,153,.7); box-shadow: 0 0 0 4px rgba(52,211,153,.16); }
+  .gate-card-btn--diene {
+    background: linear-gradient(120deg, #6ee7b7 0%, #34d399 30%, #ffd76a 55%, #6ee7b7 80%, #34d399 100%);
+    background-size: 340% 340%;
+  }
   .gate-card .gate-fehler { margin-top: .7rem; }
   @media (max-width: 480px) {
     .gate-cards { flex-direction: column; align-items: center; }
@@ -275,6 +294,16 @@
       </button>
       <p class="gate-fehler" id="gate-fehler-vanvan"></p>
     </form>
+
+    <form id="gate-form-diene" class="gate-card gate-card--diene" novalidate>
+      <span class="gate-card-icon gate-card-icon--diene" aria-hidden="true"></span>
+      <h2 class="gate-card-name">Diene</h2>
+      <input type="text" id="gate-code-diene" placeholder="Zugangscode" autocomplete="off" autocapitalize="off" spellcheck="false" />
+      <button type="submit" class="btn-holo gate-card-btn gate-card-btn--diene">
+        <span class="btn-holo-text">💚 Öffnen</span>
+      </button>
+      <p class="gate-fehler" id="gate-fehler-diene"></p>
+    </form>
   </div>
 </div>
 
@@ -374,6 +403,7 @@
   }
   bindeGateKachel("gate-form-dogi", "gate-code-dogi", "gate-fehler-dogi");
   bindeGateKachel("gate-form-vanvan", "gate-code-vanvan", "gate-fehler-vanvan");
+  bindeGateKachel("gate-form-diene", "gate-code-diene", "gate-fehler-diene");
 
   /* Service-Worker-Registrierung — auf allen anderen Seiten macht das main.js, diese Seite
      ist aber bewusst eigenstaendig und laedt main.js nicht. Ohne registrierten Service