Zwei Widgets: Zettel mit kleinem Markdown, Bild je Nutzer

Zettel: ein Textfeld, mehr nicht — InkNote gibt es schon. Gelesen wird
gesetzt (Ueberschriften, Haken, Aufzaehlungen, fett/kursiv/code, Strich),
geschrieben wird roh. Haken lassen sich ohne Bearbeiten setzen und
aendern die Quelle. Gespeichert wird 800 ms nach dem letzten Anschlag,
sofort beim Verlassen und beim Schliessen des Tabs (keepalive statt
sendBeacon: der kann nur POST und traegt keine Kopfzeilen). Grenze 4000
Zeichen, vom Server durchgesetzt.

Bild: genau eines je Nutzer, hochgeladen oder verlinkt. Die erste Datei,
die HoneyOS ablegt — in bilder/ neben honeyos.json, benannt nach einem
Fingerabdruck der Nutzerkennung. Ein neues Bild ersetzt das alte samt
Datei, die Adresse traegt einen Versionsanteil gegen den Zwischen-
speicher. SVG kommt nicht herein (Text, kann Skripte tragen), und der
Typ wird an den Bytes erkannt, nicht an der Angabe des Browsers.

Der Rahmen kann jetzt Widgets mit eigenem DOM: 'stabil' haelt den Inhalt,
'montiert' verdrahtet ihn. Ohne das haette das Anklopfen bei den Apps
alle zwei Minuten den Text unter den Fingern ausgetauscht.

Nebenbei: Der Aufrufhelfer setzte bei jedem Schreibzugriff
Content-Type: application/json — auch fuer Bildbytes.

web/css/style.css

@@ -1115,6 +1115,117 @@ body {
 .w-zustand { color: var(--p-dim); margin: 0; font-size: 12.5px; }
 .w-fehler { color: var(--p-mid); }
 
+/* ── Zettel ────────────────────────────────────────────────────────────────
+ * Gelesen wird gesetzt, geschrieben wird roh. Beide Ansichten sind gleich
+ * hoch, damit der Kasten beim Umschalten nicht springt. */
+.zettel-text,
+.zettel-feld {
+  min-height: 112px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+.zettel-feld {
+  display: block;
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--p-dim);
+  color: var(--p);
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.45;
+  padding: 8px;
+  resize: vertical;
+}
+.zettel-feld:focus { outline: none; border-color: var(--p); }
+
+.zettel-text { font-size: 13px; line-height: 1.45; color: var(--p-mid); }
+.zettel-text h3,
+.zettel-text h4,
+.zettel-text h5 {
+  margin: 10px 0 4px;
+  color: var(--p);
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.zettel-text h3 { font-size: 13px; }
+.zettel-text h4 { font-size: 12px; }
+.zettel-text h5 { font-size: 11px; color: var(--p-mid); }
+.zettel-text > :first-child { margin-top: 0; }
+.zettel-text p { margin: 0 0 6px; }
+.zettel-text ul,
+.zettel-text ol { margin: 0 0 6px; padding-left: 18px; }
+.zettel-text li { margin: 1px 0; }
+.zettel-text code {
+  background: var(--p-faint);
+  padding: 0 3px;
+  color: var(--p);
+}
+.zettel-text b { color: var(--p); font-weight: 400; }
+.zettel-text hr { border: 0; border-top: 1px solid var(--p-faint); margin: 8px 0; }
+
+/* Häkchen: anklickbar, ohne in den Text zu springen. Die Aufzählungspunkte
+   fallen weg — das Kästchen ist der Punkt. */
+.zettel-text .zettel-hak { list-style: none; margin-left: -18px; }
+.zettel-text .zettel-hak label {
+  display: flex;
+  align-items: baseline;
+  gap: 7px;
+  cursor: pointer;
+}
+.zettel-text .zettel-hak input {
+  appearance: none;
+  flex: none;
+  width: 11px;
+  height: 11px;
+  border: 1px solid var(--p-dim);
+  background: var(--bg);
+  cursor: pointer;
+  position: relative;
+  top: 1px;
+}
+.zettel-text .zettel-hak input:checked { background: var(--p); border-color: var(--p); }
+.zettel-text .zettel-hak.ab span { color: var(--p-dim); text-decoration: line-through; }
+
+.zettel-fuss {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 8px;
+}
+.zettel-stand { color: var(--p-dim); font-size: 11px; }
+.zettel-fuss .btn { font-size: 12px; padding: 3px 9px; }
+
+/* ── Bild ──────────────────────────────────────────────────────────────────
+ * Fester Rahmen, das Bild füllt ihn. Verzerren wäre die Alternative — und
+ * Zuschneiden von Hand ein eigenes Stück Arbeit. */
+.bildw {
+  border: 1px solid var(--p-faint);
+  background: var(--bg);
+  aspect-ratio: 16 / 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.bildw-bild { width: 100%; height: 100%; object-fit: cover; display: block; }
+.bildw .w-zustand { padding: 0 12px; text-align: center; }
+
+.bildw-linkzeile { display: flex; gap: 6px; margin-top: 8px; }
+.bildw-linkzeile input {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg);
+  border: 1px solid var(--p-dim);
+  color: var(--p);
+  font: inherit;
+  font-size: 12px;
+  padding: 4px 6px;
+}
+.bildw-linkzeile input:focus { outline: none; border-color: var(--p); }
+.bildw-knoepfe { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
+
 /* Einspaltig (Handy, schmales Fenster) sollen die Widgets so breit sein wie das
    Systemfenster. Drei verschieden breite Kästen untereinander sehen aus wie ein
    Fehler, nicht wie Absicht. Muss hinter den Regeln stehen, die es aufhebt —