fix(t-paliad-068): PR-3 tab harmonisation + chip neutralisation + Notiz hint (F-16, F-20, F-37)

Per docs/audit-polish-2-2026-04-29.md PR-3. Greenlit by m 2026-04-29 15:22.

- F-16 type-pill saturated colours collapsed to one neutral midnight-tint
  chip. The five .akten-type-chip.akten-type-{client,litigation,patent,
  case,project} per-type backgrounds (lavender/pink-red/cyan/salmon/
  neutral-green) made /projects feel alarming for a routine type label
  and the colours carried no semantic ranking. Replaced with a single
  rgb(var(--hlc-midnight-rgb) / 0.06) bg + var(--color-text) fg; the type
  label inside the chip carries the differentiation. The per-type
  modifier classes are kept on the markup so a future signal-use
  (highlighting Mandant roots, etc.) can re-introduce a colour for one
  specific type without re-adding the random palette. Same neutralisation
  applied to .akten-office-chip on /admin/team STANDORT — the audit
  flagged it as the same class of issue.
- F-20 .login-tab.active and .gebuehren-tab.active flipped to the
  canonical pattern from .akten-tab.active — lime underline + midnight
  text + 600 weight. Active tabs now read identically across /login,
  /tools/gebuehrentabellen, project detail, deadline detail, appointment
  detail, settings, and admin.
- F-37 Notiz textarea now ships a small footer hint reading
  "Strg+Enter (oder ⌘+Enter) zum Speichern" / "Ctrl+Enter (or ⌘+Enter)
  to save". The keyboard-shortcut listener at notes.ts:426 was already
  wired; this is purely the visible affordance. New i18n key
  notizen.shortcut.hint (DE+EN); new .notiz-form-hint CSS rule sized
  0.75rem muted-text below the actions row.

Verified
- bun run build clean.
- go build/vet/test ./... all green.
- Live smoke pending Dokploy redeploy.

frontend/src/client/i18n.ts

@@ -1173,6 +1173,7 @@ const translations: Record<Lang, Record<string, string>> = {
     // Notizen (polymorphic notes — Phase I)
     "notizen.section.title": "Notizen",
     "notizen.placeholder": "Notiz hinzuf\u00fcgen\u2026",
+    "notizen.shortcut.hint": "Strg+Enter (oder \u2318+Enter) zum Speichern",
     "notizen.submit": "Hinzuf\u00fcgen",
     "notizen.save": "Speichern",
     "notizen.cancel": "Abbrechen",
@@ -2456,6 +2457,7 @@ const translations: Record<Lang, Record<string, string>> = {
     // Notizen (polymorphic notes — Phase I)
     "notizen.section.title": "Notes",
     "notizen.placeholder": "Add a note\u2026",
+    "notizen.shortcut.hint": "Ctrl+Enter (or \u2318+Enter) to save",
     "notizen.submit": "Add",
     "notizen.save": "Save",
     "notizen.cancel": "Cancel",

frontend/src/client/notes.ts

@@ -393,11 +393,20 @@ function buildUI(container: HTMLElement, state: NotesState) {
   submit.className = "btn-primary btn-cta-lime btn-small";
   submit.textContent = t("notizen.submit");
 
+  // Keyboard-shortcut hint mirrors the listener at line 426 below — Strg+Enter
+  // on Linux/Windows, Cmd+Enter on macOS. The hint string carries both forms
+  // so we don't need to sniff the platform; it's a tooltip-grade affordance.
+  const hint = document.createElement("p");
+  hint.className = "notiz-form-hint";
+  hint.textContent = t("notizen.shortcut.hint");
+  hint.setAttribute("data-i18n", "notizen.shortcut.hint");
+
   const msg = document.createElement("p");
   msg.className = "form-msg";
 
   actions.appendChild(submit);
   form.appendChild(textarea);
+  form.appendChild(hint);
   form.appendChild(actions);
   form.appendChild(msg);
 

frontend/src/styles/global.css

@@ -384,8 +384,11 @@ main {
 }
 
 .login-tab.active {
-    color: var(--color-accent);
-    border-bottom-color: var(--color-accent);
+    /* Canonical active-tab pattern (F-20) — lime underline + midnight text +
+       600 weight. Matches .akten-tab.active and .gebuehren-tab.active. */
+    color: var(--color-text);
+    border-bottom-color: var(--hlc-lime);
+    font-weight: 600;
 }
 
 .login-error {
@@ -2743,8 +2746,10 @@ input[type="range"]::-moz-range-thumb {
 }
 
 .gebuehren-tab.active {
-    color: var(--color-accent);
-    border-bottom-color: var(--color-accent);
+    /* Canonical active-tab pattern (F-20) — see .login-tab.active. */
+    color: var(--color-text);
+    border-bottom-color: var(--hlc-lime);
+    font-weight: 600;
 }
 
 /* Panels */
@@ -3898,19 +3903,15 @@ input[type="range"]::-moz-range-thumb {
     white-space: nowrap;
 }
 
+/* Office chips matched the type-chip per-type palette and fell out of F-16
+   for the same reason — the colours don't rank or group. Neutralised to the
+   same midnight-tint as .akten-type-chip; the office name carries the
+   information. Per-office classes stay on the markup for future signal use. */
 .akten-office-chip {
-    background: #eef2ff;
-    color: #4338ca;
+    background: rgb(var(--hlc-midnight-rgb) / 0.06);
+    color: var(--color-text);
 }
 
-.akten-office-munich       { background: #eef2ff; color: #4338ca; }
-.akten-office-duesseldorf  { background: #fef3c7; color: #92400e; }
-.akten-office-hamburg      { background: #dbeafe; color: #1e40af; }
-.akten-office-amsterdam    { background: #fee2e2; color: #991b1b; }
-.akten-office-london       { background: #f3e8ff; color: #6b21a8; }
-.akten-office-paris        { background: #e0f2fe; color: #075985; }
-.akten-office-milan        { background: #fce7f3; color: #9d174d; }
-
 .akten-status-chip {
     background: #e5e7eb;
     color: #374151;
@@ -4098,11 +4099,23 @@ input[type="range"]::-moz-range-thumb {
     font-weight: 600;
 }
 
-.akten-type-chip.akten-type-client      { background: #eef2ff; color: #4338ca; }
-.akten-type-chip.akten-type-litigation  { background: #fce7f3; color: #9d174d; }
-.akten-type-chip.akten-type-patent      { background: #e0f2fe; color: #075985; }
-.akten-type-chip.akten-type-case        { background: #fef3c7; color: #92400e; }
-.akten-type-chip.akten-type-project     { background: #dcfce7; color: #166534; }
+/* Project-type chips were per-type saturated random colours — lavender,
+   pink-red, cyan, salmon, neutral-green — that carried no semantic ranking
+   and made /projects feel alarming. F-16 collapses them to one calm
+   midnight-tint chip and lets the type label inside the chip carry the
+   differentiation. The per-type modifier classes are kept on the markup so
+   future signal-use (e.g. highlighting Mandant roots) can re-introduce a
+   colour for one specific type without re-adding the random palette. */
+.akten-type-chip {
+    display: inline-block;
+    padding: 0.15rem 0.55rem;
+    font-size: 0.72rem;
+    font-weight: 600;
+    border-radius: 999px;
+    white-space: nowrap;
+    background: rgb(var(--hlc-midnight-rgb) / 0.06);
+    color: var(--color-text);
+}
 
 .projekt-tree-meta {
     font-size: 0.8rem;
@@ -5623,6 +5636,12 @@ input[type="range"]::-moz-range-thumb {
     gap: 0.5rem;
 }
 
+.notiz-form-hint {
+    margin: 0.25rem 0 0;
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+}
+
 .notiz-list {
     list-style: none;
     padding: 0;