feat: Backend mit OIDC-Anmeldung, Apps und Einstellungen im Server

Aus der statischen Seite wird ein Go-Binary mit eingebetteter Oberfläche.
Grund: Apps über .env zu pflegen wurde unübersichtlich, und kosmetische
Einstellungen sollen auf jedem Gerät gleich sein.

- Anmeldung über den eigenen OIDC-Anbieter (PocketID), mit PKCE. Ohne
  Anmeldung gibt es nichts zu sehen – auch keine App-Liste.
- Sitzung als signiertes Cookie ohne Gegenstück im Server; Schreibzugriffe
  zusätzlich über ein lesbares CSRF-Cookie abgesichert
- Apps werden in der Oberfläche angelegt und bearbeitet, nicht mehr in der
  .env. Der Server prüft jeden Eintrag und meldet zurück, was er behält.
- Einstellungen liegen je Nutzer im Server; localStorage ist nur noch der
  Vorschuss, damit die Röhre beim Laden nicht in der falschen Farbe blitzt
- die Leiste holt die App-Liste aus /api/apps – freigegeben sind allein die
  Ursprünge, die selbst als App eingetragen sind
- Tests fahren einen echten OIDC-Anbieter hoch und gehen den Anmeldeweg
  einmal ganz durch

Ohne HONEYOS_OIDC_ISSUER läuft alles offen – für die Entwicklung, mit
deutlicher Warnung beim Start.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/style.css

@@ -762,3 +762,126 @@ body {
   .task-btn { min-width: 0; }
   .task-date { display: none; }
 }
+
+/* ── Anmeldung ─────────────────────────────────────────────────────────────
+ * Derselbe Bildschirm wie der Boot, nur endet er nicht von selbst. Wer nicht
+ * angemeldet ist, sieht vom Schreibtisch nichts — auch nicht die App-Liste.
+ */
+.login {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: clamp(16px, 5vw, 56px);
+  overflow: hidden;
+}
+
+.login-box {
+  margin-top: 26px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.login-btn {
+  background: none;
+  border: 1px solid var(--p);
+  color: var(--p);
+  font: inherit;
+  font-size: 15px;
+  letter-spacing: 0.14em;
+  padding: 10px 22px;
+  cursor: pointer;
+  animation: pulse 2.4s ease-in-out infinite;
+}
+.login-btn:hover, .login-btn:focus-visible {
+  background: var(--p);
+  color: var(--bg);
+  text-shadow: none;
+  outline: none;
+  animation: none;
+}
+
+@keyframes pulse {
+  50% { box-shadow: 0 0 14px color-mix(in srgb, var(--p) 45%, transparent); }
+}
+
+.login-note {
+  margin: 0;
+  color: var(--p-dim);
+  font-size: 12px;
+  max-width: 52ch;
+  line-height: 1.6;
+}
+.login-note b { color: var(--p-mid); font-weight: 400; }
+
+/* Nutzer in der Leiste */
+.mb-avatar {
+  width: 18px;
+  height: 18px;
+  object-fit: cover;
+  border: 1px solid var(--p-dim);
+}
+.mb-avatar[hidden] { display: none; }
+
+/* ── App-Verwaltung ────────────────────────────────────────────────────── */
+.apped { display: flex; flex-direction: column; gap: 10px; }
+
+.approw {
+  border: 1px solid var(--p-dim);
+  background: var(--bg);
+}
+.approw > summary {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 9px;
+  cursor: pointer;
+  list-style: none;
+  font-size: 13px;
+}
+.approw > summary::-webkit-details-marker { display: none; }
+.approw[open] > summary { border-bottom: 1px solid var(--p-dim); background: var(--p-faint); }
+.approw .ae-glyph { width: 18px; height: 18px; flex: none; }
+.approw .ae-glyph svg { display: block; width: 100%; height: 100%; }
+.approw .ae-url { margin-left: auto; color: var(--p-dim); font-size: 11px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.approw .ae-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
+
+.ae-field { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: center; }
+.ae-field > span { font-size: 11px; color: var(--p-dim); letter-spacing: 0.1em; }
+.ae-field input, .ae-field select {
+  background: var(--bg-raised);
+  border: 1px solid var(--p-dim);
+  color: var(--p);
+  font: inherit;
+  font-size: 12.5px;
+  padding: 5px 7px;
+  min-width: 0;
+}
+.ae-field input:focus, .ae-field select:focus { outline: none; border-color: var(--p); }
+/* Hinweise stehen unter ihrem Feld, bündig mit der Eingabe — nicht daneben. */
+.ae-hint { margin: -4px 0 0 100px; color: var(--p-dim); font-size: 11px; }
+
+@media (max-width: 520px) {
+  .ae-field { grid-template-columns: 1fr; gap: 3px; }
+  .ae-hint { margin-left: 0; }
+}
+
+.ae-actions { display: flex; gap: 6px; justify-content: flex-end; padding-top: 2px; }
+.btn-danger { border-color: var(--p-dim); color: var(--p-mid); }
+.btn-danger:hover { border-color: #d0563a; color: #ff7a5c; background: none; }
+
+.apped-empty {
+  border: 1px dashed var(--p-dim);
+  padding: 18px;
+  text-align: center;
+  color: var(--p-dim);
+  font-size: 12.5px;
+}
+
+.saveline {
+  min-height: 16px;
+  font-size: 11.5px;
+  color: var(--p-mid);
+}
+.saveline[data-kind="err"] { color: #ff7a5c; }