Passwoerter verdeckt, Kontobereich mit eigenem Passwortwechsel

Zwei berechtigte Rueckmeldungen von Florian:

1. In der Benutzerverwaltung standen die Passwortfelder auf type='text',
   das Passwort war also im Klartext lesbar - vor fremden Augen und in
   jeder Bildschirmuebertragung. Alle Passwortfelder nutzen jetzt ein
   gemeinsames PasswordInput: verdeckt als Voreinstellung, mit Auge zum
   Aufdecken. Weil ein Administrator das Passwort weitergeben muss, gibt es
   daneben einen Generator fuer ein zufaelliges, vorlesbares Passwort in
   Vierergruppen.

2. Es gab keinen Kontobereich. Neu ist /konto mit Profil, den eigenen
   Gruppen samt Rollenerklaerung, Passwortwechsel und Abmelden. Im
   Kopfbereich fuehrt ein Namenskuerzel dorthin. Ist die Anmeldung
   ausgeschaltet, steht dort 'Ohne Anmeldung' und die Seite erklaert, wie
   man sie einschaltet - vorher suchte man den Abmelden-Knopf vergeblich.

Dabei eine echte Luecke geschlossen: ein Benutzer konnte sein Passwort gar
nicht selbst aendern, nur ein Administrator konnte es setzen. Der Wechsel
verlangt das bisherige Passwort, lehnt ein identisches ab und beendet alle
anderen Sitzungen - die eigene bleibt bestehen.

Nebenbei: die Betriebsart-Knoepfe im Generator haben jetzt data-mode. Ueber
aria-pressed waren sie nicht mehr eindeutig, seit das Passwortfeld einen
eigenen Umschalter hat.

Geprueft: 63 Pruefungen fuer Anmeldung inkl. Passwortwechsel und Konto,
dazu 280 bestehende bei ausgeschalteter Anmeldung.

src/app/layout.tsx

@@ -65,11 +65,21 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
               {isAuthEnabled() && actor.kind === "user" ? (
                 <>
                   <span
-                    className="ml-1 hidden max-w-[14rem] truncate text-slate-500 sm:inline"
-                    title={actor.user.email}
+                    aria-hidden="true"
+                    className="mx-1 hidden h-5 w-px bg-slate-200 sm:block"
+                  />
+                  <Link
+                    href="/konto"
+                    title={`Konto von ${actor.user.email}`}
+                    className="flex max-w-[13rem] items-center gap-2 rounded-lg px-2.5 py-2 text-slate-700 transition-colors hover:bg-slate-100"
                   >
-                    {actorLabel(actor)}
-                  </span>
+                    <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-[0.7rem] font-semibold text-indigo-700 uppercase">
+                      {actorLabel(actor).slice(0, 2)}
+                    </span>
+                    <span className="hidden truncate sm:inline">
+                      {actorLabel(actor)}
+                    </span>
+                  </Link>
                   <LogoutButton />
                 </>
               ) : null}
@@ -79,6 +89,24 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
                   Anmelden
                 </Link>
               ) : null}
+
+              {/* Ohne Anmeldung gibt es kein Konto. Das gehört sichtbar
+                  gesagt — sonst sucht man den Abmelden-Knopf vergeblich. */}
+              {!isAuthEnabled() ? (
+                <>
+                  <span
+                    aria-hidden="true"
+                    className="mx-1 hidden h-5 w-px bg-slate-200 sm:block"
+                  />
+                  <Link
+                    href="/konto"
+                    title="Die Anmeldung ist ausgeschaltet — hier steht, wie du sie einschaltest"
+                    className="rounded-lg px-3 py-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+                  >
+                    Ohne Anmeldung
+                  </Link>
+                </>
+              ) : null}
             </nav>
           </div>
         </header>