Add phase 3: comments and cooking mode

- Comments on visible recipes; author and admin may delete; per-user
  hourly rate limit (COMMENT_RATE_LIMIT_PER_HOUR)
- Cooking mode with large text, tick-off checklists, serving scaling and
  Screen Wake Lock to keep the display on
- Serving calculator auto-submits on change
- Privacy tests cover comment and cooking-mode URLs

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

static/css/app.css

@@ -253,3 +253,21 @@ h3 { font-size: 1rem; margin: 1rem 0 0.25rem; color: var(--muted); }
 .form-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
 .photo-admin { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .photo-admin img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 0.4rem; }
+
+/* --- Comments & cooking mode ------------------------------------------------------ */
+.comment { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
+.comment p { margin: 0.25rem 0; }
+.comment form { margin: 0; }
+.comment-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
+.comment-form { margin-top: 1rem; }
+
+.cook { font-size: 1.15rem; }
+.cook h1 { font-size: 1.5rem; }
+.checklist { list-style: none; padding: 0; margin: 0.5rem 0 0; }
+.checklist li { border-bottom: 1px solid var(--border); }
+.checklist li:last-child { border-bottom: 0; }
+.checklist label { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 0; cursor: pointer; font-weight: 400; }
+.checklist input { width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; flex: 0 0 auto; accent-color: var(--accent); }
+.checklist input:checked + span { opacity: 0.45; text-decoration: line-through; }
+.steps-big { font-size: 1.25rem; line-height: 1.55; }
+.step-no { font-weight: 700; color: var(--accent); }

static/js/app.js

@@ -18,3 +18,24 @@ document.addEventListener("change", (event) => {
   const input = event.target.closest(".servings input[name=portionen]");
   if (input && input.value) input.form.requestSubmit();
 });
+
+// Cooking mode: keep the screen on while the page is visible (Screen Wake Lock API).
+(() => {
+  const page = document.querySelector("[data-wakelock]");
+  if (!page || !("wakeLock" in navigator)) return;
+  const status = page.querySelector(".wakelock-status");
+  let lock = null;
+  const acquire = async () => {
+    try {
+      lock = await navigator.wakeLock.request("screen");
+      if (status) status.hidden = false;
+      lock.addEventListener("release", () => { if (status) status.hidden = true; });
+    } catch {
+      // Not allowed right now (e.g. battery saver); the page still works.
+    }
+  };
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible") acquire();
+  });
+  acquire();
+})();