refactor(frontend): share DateInputWithPrecision between life-date and relationship fields

PersonLifeDateField and RelationshipDateField were the same DateInput + restricted
precision <select>: identical onMount seeding (incl. the YEAR fallback for stored
non-offered precisions), the setCustomValidity partial-date guard, and markup.
Extract that into a domain-agnostic DateInputWithPrecision primitive (caller injects
the precisions, labels, hint, and styling deltas); both fields become thin wrappers
that keep their existing public props, so the person new/edit pages and the Stammbaum
call sites are unchanged. Named to stay distinct from the full DatePrecisionField
(documents/timeline, all seven precisions + RANGE). The relationship select drops its
redundant sr-only label, keeping the equivalent aria-label. PersonLifeDateField,
AddRelationshipForm and RelationshipChip specs (26) stay green.

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

.gitea/workflows/ci.yml

@@ -229,14 +229,9 @@ jobs:
     name: Backend Unit Tests
     runs-on: ubuntu-latest
     env:
-      # CI runs against the root-server Docker daemon (29.x). This API pin is a harmless
-      # carry-over from the old NAS runner (Docker 24.x, max API 1.43); safe to drop later.
-      DOCKER_API_VERSION: "1.43"
+      DOCKER_API_VERSION: "1.43"  # NAS runner runs Docker 24.x (max API 1.43); Testcontainers 2.x defaults to 1.44
       DOCKER_HOST: unix:///var/run/docker.sock
-      # Ryuk (Testcontainers' out-of-process reaper) is intentionally LEFT ENABLED so it
-      # removes each run's containers after the JVM exits. Disabling it forced the in-JVM
-      # reaper, which hung at JVM shutdown and leaked Postgres containers run-over-run until
-      # the daemon degraded and the fork timed out at teardown — see #848.
+      TESTCONTAINERS_RYUK_DISABLED: "true"
     steps:
       - uses: actions/checkout@v4
 

.gitea/workflows/nightly.yml

@@ -192,52 +192,17 @@ jobs:
           REPO="${{ github.repository }}"
           RUN_URL="${GITEA_URL}/${REPO}/actions/runs/${{ github.run_id }}"
 
-          # --- Gitea API helper ---
-          # api METHOD URL [extra curl args...] — authenticated Gitea API call.
-          # `curl -sf` collapses every HTTP >=400 into a bare "exit 22", which
-          # surfaces as an opaque step failure (issue #839). Instead we read the
-          # status code and, on a >=400 response, print an actionable ::error::
-          # to stderr (so a calling command substitution does not swallow it) and
-          # return 1 — `set -e` then still fails the step. The token is never
-          # echoed (no set -x; never placed in the message).
-          api() {
-            local method="$1" url="$2"; shift 2
-            local resp http
-            resp=$(curl -s -w '\n%{http_code}' -X "$method" \
-              -H "Authorization: token $NIGHTLY_AUDIT_TOKEN" "$@" -- "$url")
-            http=${resp##*$'\n'}
-            printf '%s' "${resp%$'\n'*}"
-            case "$http" in
-              2*|3*) return 0 ;;
-              401|403)
-                echo "::error::Gitea returned HTTP $http for $method ${url%%\?*} — the NIGHTLY_AUDIT_TOKEN secret is missing, expired, or lacks issue read+write scope; recreate the renovate_bot PAT and update the secret." >&2
-                return 1 ;;
-              *)
-                echo "::error::Gitea returned HTTP ${http:-(none)} for $method ${url%%\?*}." >&2
-                return 1 ;;
-            esac
-          }
-
           # --- Self-test (mirrors ci.yml §Assert pattern) ---
-          # Runs before any real API call so broken logic fails loudly early:
-          # (a) the jq title matcher used by the dedupe step — proves the regex
-          #     only; the create-vs-update decision is exercised by the
-          #     workflow_dispatch AC;
-          # (b) the api helper's HTTP-status handling, driven by a mocked curl so
-          #     it needs no network — proves a 2xx returns the body and a >=400
-          #     fails with an ::error:: instead of an opaque exit 22.
+          # Tests the exact jq test() call used in the dedupe step, before any
+          # API call, so a broken matcher fails loudly early rather than silently
+          # opening duplicate issues. Proves the regex only — create-vs-update
+          # decision is exercised by the workflow_dispatch AC.
           echo "{\"title\": \"${MARKER}\"}" \
             | jq -e --arg m "$MARKER" '.title | test($m; "i")' > /dev/null \
             || { echo "FAIL: self-test — jq test() missed tracking issue title"; exit 1; }
           echo '{"title": "fix(deps): update dependency esbuild (CVE-2025-12345)"}' \
             | jq -e --arg m "$MARKER" '.title | test($m; "i") | not' > /dev/null \
             || { echo "FAIL: self-test — jq test() incorrectly matched unrelated title"; exit 1; }
-          ( curl() { printf 'OK\n200'; }; [ "$(api GET selftest)" = "OK" ] ) \
-            || { echo "FAIL: self-test — api helper dropped body on HTTP 200"; exit 1; }
-          ( curl() { printf 'nope\n401'; }
-            if api GET selftest >/dev/null 2>/tmp/api_selftest_err; then exit 1; fi
-            grep -q '::error::' /tmp/api_selftest_err ) \
-            || { echo "FAIL: self-test — api helper did not emit ::error:: on HTTP 401"; exit 1; }
           echo "Self-test passed."
 
           # --- Run audit ---
@@ -272,7 +237,8 @@ jobs:
             # Renovate vuln PRs also carry the "security" label, so >1 open
             # "security" issue WILL occur. Title-match (not just label) ensures
             # we deduplicate only our own tracking issue.
-            OPEN_ISSUES=$(api GET \
+            OPEN_ISSUES=$(curl -sf \
+              -H "Authorization: token $NIGHTLY_AUDIT_TOKEN" \
               "${GITEA_URL}/api/v1/repos/${REPO}/issues?state=open&type=issues&labels=security&limit=50")
 
             MATCHED=$(echo "$OPEN_ISSUES" | jq \
@@ -289,10 +255,11 @@ jobs:
                 --arg run_url "$RUN_URL" \
                 '$existing + "\n\n---\n\nUpdated by run: " + $run_url')
               PAYLOAD=$(jq -n --arg body "$NEW_BODY" '{"body": $body}')
-              api PATCH \
-                "${GITEA_URL}/api/v1/repos/${REPO}/issues/${ISSUE_NUMBER}" \
+              curl -sf -X PATCH \
+                -H "Authorization: token $NIGHTLY_AUDIT_TOKEN" \
                 -H "Content-Type: application/json" \
-                -d "$PAYLOAD" > /dev/null
+                -d "$PAYLOAD" \
+                "${GITEA_URL}/api/v1/repos/${REPO}/issues/${ISSUE_NUMBER}" > /dev/null
               echo "Updated tracking issue #${ISSUE_NUMBER}"
             else
               # Closed prior issue that recurs → new issue (not reopened).
@@ -301,21 +268,24 @@ jobs:
                 --arg title "$MARKER" \
                 --arg body "$ISSUE_BODY" \
                 '{"title": $title, "body": $body}')
-              CREATED=$(api POST \
-                "${GITEA_URL}/api/v1/repos/${REPO}/issues" \
+              CREATED=$(curl -sf -X POST \
+                -H "Authorization: token $NIGHTLY_AUDIT_TOKEN" \
                 -H "Content-Type: application/json" \
-                -d "$PAYLOAD")
+                -d "$PAYLOAD" \
+                "${GITEA_URL}/api/v1/repos/${REPO}/issues")
               NEW_NUMBER=$(echo "$CREATED" | jq -r '.number')
               echo "Opened new tracking issue #${NEW_NUMBER}"
 
               # Labels are ignored on issue create in Gitea — add in a follow-up call.
-              LABEL_IDS=$(api GET \
+              LABEL_IDS=$(curl -sf \
+                -H "Authorization: token $NIGHTLY_AUDIT_TOKEN" \
                 "${GITEA_URL}/api/v1/repos/${REPO}/labels?limit=50" \
                 | jq '[.[] | select(.name == "security" or .name == "devops" or .name == "P1-high") | .id]')
-              api POST \
-                "${GITEA_URL}/api/v1/repos/${REPO}/issues/${NEW_NUMBER}/labels" \
+              curl -sf -X POST \
+                -H "Authorization: token $NIGHTLY_AUDIT_TOKEN" \
                 -H "Content-Type: application/json" \
-                -d "{\"labels\": $LABEL_IDS}" > /dev/null
+                -d "{\"labels\": $LABEL_IDS}" \
+                "${GITEA_URL}/api/v1/repos/${REPO}/issues/${NEW_NUMBER}/labels" > /dev/null
             fi
 
             exit "$AUDIT_EXIT"

.specify/rtm.md

@@ -173,47 +173,3 @@
 | REQ-012 | chip renders wherever a LetterCard renders (global timeline + expanded YearLetterStrip) | #835 | zeitstrahl-tag-chips | `frontend/src/lib/timeline/LetterCard.svelte` | `LetterCard.svelte.spec.ts#renders the chip inside an expanded YearLetterStrip too` | Done |
 | REQ-013 | sr-only theme label is a Paraglide key present in de/en/es | #835 | zeitstrahl-tag-chips | `frontend/messages/{de,en,es}.json` | `messages.spec.ts#zeitstrahl tag-chip label key is present in all locales` | Done |
 | REQ-014 | GET /api/timeline stays read-only (READ_ALL); no new endpoint/ErrorCode/IDOR; assembly logs UUIDs only | #835 | zeitstrahl-tag-chips | `timeline/TimelineController` (unchanged), `timeline/TimelineService` | `TimelineControllerTest#returns_200_with_read_all_permission`, `#returns_403_when_authenticated_without_read_all` (unchanged path); no tag names logged (review) | Done |
-| REQ-001 | TimelineFilters is presentation-only (3 $bindable layer booleans + onChange); no goto/url.searchParams/api.GET/fetch | #780 | timeline-layer-filter | `frontend/src/lib/timeline/TimelineFilters.svelte` | `TimelineFilters.svelte.spec.ts#renders the three layer toggles with accessible names`, `#reflects a layer as pressed and flips it, firing onChange`; `timelineFilterBoundary.spec.ts` | Done |
-| REQ-002 | route derives a client-side $derived filtered view, passes it to TimelineView; no goto/fetch on toggle | #780 | timeline-layer-filter | `frontend/src/routes/zeitstrahl/+page.svelte`, `frontend/src/lib/timeline/timelineFilter.ts#filterTimeline` | `page.svelte.spec.ts#hides letter cards when the Letters layer is off ... with no fetch`; `timelineFilterBoundary.spec.ts` | Done |
-| REQ-003 | Personal off → personal events (curated + derived life-events) hidden client-side | #780 | timeline-layer-filter | `frontend/src/lib/timeline/timelineFilter.ts#filterTimeline` | `timelineFilter.spec.ts#hides personal events — curated and derived`, `page.svelte.spec.ts#hides personal event cards` | Done |
-| REQ-004 | Historical off → historical event entries hidden client-side | #780 | timeline-layer-filter | `frontend/src/lib/timeline/timelineFilter.ts#filterTimeline` | `timelineFilter.spec.ts#hides HISTORICAL events`, `page.svelte.spec.ts#hides historical event cards` | Done |
-| REQ-005 | Letters off → letter entries hidden client-side | #780 | timeline-layer-filter | `frontend/src/lib/timeline/timelineFilter.ts#filterTimeline` | `timelineFilter.spec.ts#hides LETTER entries`, `page.svelte.spec.ts#hides letter cards` | Done |
-| REQ-006 | zero visible → filter empty-state + one-click reset below the open bar (never blank, never generic empty) | #780 | timeline-layer-filter | `frontend/src/routes/zeitstrahl/+page.svelte`, `frontend/src/lib/timeline/timelineFilter.ts#filterTimeline` | `page.svelte.spec.ts#shows the filtered-empty message + reset below the open bar`, `timelineFilter.spec.ts#drops year bands that become empty` | Done |
-| REQ-007 | sticky "Filter (N aktiv)" trigger; N from isDefaultState/hiddenLayerCount; 44px target | #780 | timeline-layer-filter | `frontend/src/lib/timeline/timelineFilter.ts`, `frontend/src/lib/timeline/TimelineFilters.svelte` | `timelineFilter.spec.ts#isDefaultState`, `#hiddenLayerCount`; `TimelineFilters.svelte.spec.ts#shows a plain trigger ... and a count`, `#gives the trigger a 44px touch target` | Done |
-| REQ-008 | reset text button restores all layers on; visibility tracks a $derived any-layer-off flag | #780 | timeline-layer-filter | `frontend/src/lib/timeline/TimelineFilters.svelte` | `TimelineFilters.svelte.spec.ts#hides the reset button by default and restores all layers when activated` | Done |
-| REQ-009 | prefers-reduced-motion → slide duration 0 (matchMedia guard reused from documents/[id]/+page.svelte:57) | #780 | timeline-layer-filter | `frontend/src/lib/timeline/TimelineFilters.svelte` | manual reduced-motion check + svelte-autofixer/code review (guard reused, only the slide `duration` zeroed) | Done |
-| REQ-010 | 8 timeline_filter_* keys in de/en/es; trigger vs trigger_active({count}) distinct | #780 | timeline-layer-filter | `frontend/messages/{de,en,es}.json` | `messages.spec.ts#zeitstrahl layer-filter keys are present in all locales (#780 REQ-010)` | Done |
-| REQ-001 | WRITE_ALL viewer → "Ereignis hinzufügen" link to /zeitstrahl/events/new in the wrapping Zeitstrahl header | #842 | timeline-curator-affordances | `frontend/src/routes/zeitstrahl/+page.svelte`, `frontend/messages/{de,en,es}.json` | `zeitstrahl/page.svelte.spec.ts#renders the add-event CTA in a wrapping header when the viewer can write` | Done |
-| REQ-002 | viewer without WRITE_ALL → no add-event affordance on /zeitstrahl | #842 | timeline-curator-affordances | `frontend/src/routes/zeitstrahl/+page.svelte` | `zeitstrahl/page.svelte.spec.ts#renders no add-event CTA when the viewer cannot write` | Done |
-| REQ-003 | WRITE_ALL viewer → person-page "Ereignis für diese Person" link to /zeitstrahl/events/new?personId={id} | #842 | timeline-curator-affordances | `frontend/src/routes/persons/[id]/PersonCard.svelte`, `frontend/messages/{de,en,es}.json` | `PersonCard.svelte.spec.ts#shows an add-event link pre-seeded with the person to a curator` | Done |
-| REQ-004 | viewer without WRITE_ALL → no add-event affordance on /persons/{id} | #842 | timeline-curator-affordances | `frontend/src/routes/persons/[id]/PersonCard.svelte` | `PersonCard.svelte.spec.ts#renders no add-event link to a reader` | Done |
-| REQ-005 | WRITE_ALL → EventPill edit link /zeitstrahl/events/{eventId}/edit for a curated PERSONAL event | #842 | timeline-curator-affordances | `frontend/src/lib/timeline/EventPill.svelte` | `EventPill.svelte.spec.ts#shows an edit affordance for a curated PERSONAL event when canWrite is true` | Done |
-| REQ-006 | WRITE_ALL → WorldBand edit link /zeitstrahl/events/{eventId}/edit for a curated HISTORICAL event (new inline ✎) | #842 | timeline-curator-affordances | `frontend/src/lib/timeline/WorldBand.svelte` | `WorldBand.svelte.spec.ts#shows an edit affordance for a curated HISTORICAL event when canWrite is true`, `#mirrors the EventPill pencil` | Done |
-| REQ-007 | viewer without WRITE_ALL → neither EventPill nor WorldBand renders an edit link | #842 | timeline-curator-affordances | `frontend/src/lib/timeline/EventPill.svelte`, `frontend/src/lib/timeline/WorldBand.svelte` | `EventPill.svelte.spec.ts#renders no edit affordance for a curated PERSONAL event when canWrite is false`, `WorldBand.svelte.spec.ts#renders no edit affordance for a curated HISTORICAL event when canWrite is false`, `TimelineView.svelte.spec.ts#renders no edit links in either path when canWrite is false` | Done |
-| REQ-008 | derived OR null eventId → no edit link regardless of permission (contract preserved) | #842 | timeline-curator-affordances | `frontend/src/lib/timeline/EventPill.svelte`, `frontend/src/lib/timeline/WorldBand.svelte` | `EventPill.svelte.spec.ts#shows no edit affordance when eventId is null even with canWrite`, `#shows no edit affordance for a derived event even with canWrite`, `WorldBand.svelte.spec.ts#shows no edit affordance when eventId is null even with canWrite` | Done |
-| REQ-009 | TimelineView threads canWrite through the year-band path and the undated bucket (identical gate) | #842 | timeline-curator-affordances | `frontend/src/lib/timeline/TimelineView.svelte`, `frontend/src/lib/timeline/YearBand.svelte` | `TimelineView.svelte.spec.ts#threads canWrite to a curated event in both a year band and the undated bucket`, `#threads canWrite to a curated HISTORICAL world band in both paths` | Done |
-| REQ-010 | person add-event opens #781 create form prefilled with the person, returns to /persons/{id} on save | #842 | timeline-curator-affordances | `frontend/src/routes/persons/[id]/PersonCard.svelte`, `frontend/src/routes/zeitstrahl/events/new/+page.server.ts` (#781) | `PersonCard.svelte.spec.ts#shows an add-event link pre-seeded with the person to a curator` (URL), `zeitstrahl/events/new/page.server.spec.ts#redirects to /persons/{id} when originPersonId is a valid UUID` (#781) | Done |
-| REQ-011 | non-curator direct nav to /zeitstrahl/events/new or /{id}/edit → 403 (existing #781 route guard, regression) | #842 | timeline-curator-affordances | `frontend/src/routes/zeitstrahl/events/new/+page.server.ts`, `frontend/src/routes/zeitstrahl/events/[id]/edit/+page.server.ts` (#781, unchanged — both share `requireWriteAll`) | `zeitstrahl/events/new/page.server.spec.ts#throws 403 for an authenticated user without WRITE_ALL`, `zeitstrahl/events/[id]/edit/page.server.spec.ts#throws 403 for a user without WRITE_ALL` | Done |
-| REQ-001 | `/zeitstrahl` renders a single chronological timeline with no grouping-mode control (no toggle/Thema/drawer) | #850 | inline-event-clustering | `frontend/src/routes/zeitstrahl/+page.svelte`, `frontend/src/lib/timeline/TimelineView.svelte` | `page.svelte.spec.ts#renders the meta sub-line with range and counts, no grouping segment`; absence of `GroupingControl`/`LetterBucket`/`BucketHeaderChip` (never ported) | Done |
-| REQ-002 | curated event with ≥1 same-year linked letter → contained card (event header + glyph/title/date·provenance/edit + compact letter cards) | #850 | inline-event-clustering | `frontend/src/lib/timeline/EventCluster.svelte`, `frontend/src/lib/timeline/YearBand.svelte`, `frontend/src/lib/timeline/eventClustering.ts` | `EventCluster.svelte.spec.ts#renders a data-testid event-card with the event title once`, `#shows the event-edit link for a curator`, `#renders its letters as compact a.lcard.ev cards`; `YearBand.svelte.spec.ts#renders a curated event with a same-year linked letter as one event-card, title once, no separate pill` | Done |
-| REQ-003 | event card body > 5 letters → first 5 + keyboard-operable show-more/less toggle (aria-expanded, ≥44px) | #850 | inline-event-clustering | `frontend/src/lib/timeline/EventCluster.svelte`, `frontend/src/lib/timeline/eventClustering.ts` (`CLUSTER_PREVIEW=5`) | `EventCluster.svelte.spec.ts#shows the first 5 of 8 letters + a show-more toggle that expands to 8 then back to 5`, `#renders no show-more toggle when the cluster holds 5 or fewer letters` | Done |
-| REQ-004 | linked letters in a year other than the event's band → labeled ✉ text-header card (no pill, no edit link) per such year | #850 | inline-event-clustering | `frontend/src/lib/timeline/EventCluster.svelte`, `frontend/src/lib/timeline/YearBand.svelte` | `EventCluster.svelte.spec.ts#renders a cross-year text header (✉ title, no event-edit, no pill) when no event is given`; `YearBand.svelte.spec.ts#renders a cross-year cluster (event not in this band) as a ✉ text-header card holding it` | Done |
-| REQ-005 | event/derived/world-band with no linked letters → existing plain pill/world-band (unchanged) | #850 | inline-event-clustering | `frontend/src/lib/timeline/YearBand.svelte`, `frontend/src/lib/timeline/EventPill.svelte`, `frontend/src/lib/timeline/WorldBand.svelte` | `YearBand.svelte.spec.ts#renders a curated event with NO linked letters as a plain EventPill, no card` | Done |
-| REQ-006 | letter linked to no curated event → loose chronological letter (alternating; density strip past 12) | #850 | inline-event-clustering | `frontend/src/lib/timeline/YearBand.svelte`, `frontend/src/lib/timeline/eventClustering.ts` | `eventClustering.spec.ts#keeps a letter with no linkedEventId loose`; `YearBand.svelte.spec.ts#renders loose (unlinked) letters in a sparse year as alternating .letter-row, no card` | Done |
-| REQ-007 | loose-letter layout + density strip count ONLY non-event-linked letters; clustered letter never also loose | #850 | inline-event-clustering | `frontend/src/lib/timeline/YearBand.svelte`, `frontend/src/lib/timeline/eventClustering.ts` | `eventClustering.spec.ts#places each letter in exactly one place`; `YearBand.svelte.spec.ts#counts only loose letters in the density strip; event letters stay in the card` | Done |
-| REQ-008 | letter whose only linking event is filtered out (absent from lookup) → loose, never re-introduces the event (filter-then-cluster) | #850 | inline-event-clustering | `frontend/src/lib/timeline/eventClustering.ts` (`splitYearLetters` filters via `eventLookup`) | `eventClustering.spec.ts#keeps a letter whose linkedEventId is absent from the lookup loose (filter-then-cluster, REQ-008)` | Done |
-| REQ-009 | `TimelineEntryDTO` carries nullable `linkedEventId` for LETTER entries, one batched pass, no new column/migration, not @Schema(REQUIRED); a multi-event letter links deterministically (earliest date, then id) | #850 | inline-event-clustering | `backend/.../timeline/TimelineEntryDTO.java`, `backend/.../timeline/TimelineService.java#resolveLetterEventLinks`, `frontend/src/lib/generated/api.ts` | `TimelineServiceTest#letter_in_a_curated_events_documents_carries_that_events_id`, `#letter_in_no_curated_event_has_null_linkedEventId`, `#multi_event_letter_links_deterministically_to_the_earliest_event` | Done |
-| REQ-010 | event/letter/sender/receiver text via Svelte `{...}` escaping; no `{@html}` anywhere in `lib/timeline/` (grep gate, CWE-79) | #850 | inline-event-clustering | `frontend/src/lib/timeline/*.svelte` | `timeline-no-raw-html.spec.ts#no timeline component contains the raw-HTML directive`; `EventCluster.svelte.spec.ts#renders an HTML-bearing event title verbatim as text, never as markup` | Done |
-| REQ-011 | wrapping header keeps #842 add-event CTA + #780 filter trigger; meta-line drops the grouping segment | #850 | inline-event-clustering | `frontend/src/routes/zeitstrahl/+page.svelte` | `page.svelte.spec.ts#renders the meta sub-line with range and counts, no grouping segment`, `#drops the letters segment instead of showing "0 Briefe"` (no "Gruppierung") | Done |
-| REQ-012 | show-more/less labels are new Paraglide keys in de/en/es; unused #827 grouping/Thema keys removed | #850 | inline-event-clustering | `frontend/messages/{de,en,es}.json`, `frontend/src/lib/timeline/EventCluster.svelte` | `messages.spec.ts#zeitstrahl visual-fidelity keys are present in all locales` (now asserts `timeline_bucket_show_more`/`_less`; `timeline_grouping_date` removed) | Done |
-| REQ-013 | `GET /api/timeline` failure → existing localized error state via `getErrorMessage(code)` (unchanged #779) | #850 | inline-event-clustering | `frontend/src/routes/zeitstrahl/+page.svelte` (unchanged error path) | covered by #779 `zeitstrahl` error-state tests (regression — no change) | Done |
-| REQ-014 | HISTORICAL curated event with ≥1 linked letter keeps its full-width WorldBand — never clusters into a card (preserves #779 REQ-009); its letters stay loose | #850 | inline-event-clustering | `frontend/src/lib/timeline/eventClustering.ts` (`buildEventLookup` excludes HISTORICAL) | `eventClustering.spec.ts#excludes a HISTORICAL event so its letters stay loose, keeping its WorldBand (REQ-014)`; `TimelineView.svelte.spec.ts#keeps a HISTORICAL event a WorldBand with a same-year linked letter — never clusters (REQ-014)` | Done |
-| REQ-015 | a cross-year ✉ card is placed at its earliest linked letter's chronological position in the band — never appended after later-dated loose letters | #850 | inline-event-clustering | `frontend/src/lib/timeline/YearBand.svelte` | `YearBand.svelte.spec.ts#interleaves a cross-year card before a later-dated loose letter in the same band (REQ-015)` | Done |
-| REQ-001 | `TimelineEvent.description` flows through `TimelineEntryDTO` to the frontend; null for letters and derived events | #844 | event-note-display | `backend/.../timeline/TimelineEntryDTO.java`, `backend/.../timeline/TimelineService.java#mapEvent`, `frontend/src/lib/generated/api.ts` | `TimelineServiceTest#mapEvent_populates_description_from_event`, `#mapEvent_leaves_description_null_when_event_has_none`, `#mapDocument_leaves_description_null_for_letter`; `TimelineControllerTest#timelineIncludesEventDescription` | Done |
-| REQ-002 | description text is HTML-escaped; no `{@html}` — Svelte `{...}` interpolation ensures XSS safety (CWE-79) | #844 | event-note-display | `frontend/src/lib/timeline/EventNote.svelte` | `event-note.svelte.spec.ts#escapesHtml — renders XSS payload as inert text, no injected element` | Done |
-| REQ-003 | newlines in the description are preserved visually via `white-space: pre-line` | #844 | event-note-display | `frontend/src/lib/timeline/EventNote.svelte` | `event-note.svelte.spec.ts#preservesLineBreaks — note element carries whitespace-pre-line class` | Done |
-| REQ-004 | description renders below the title/subtitle line in EventPill (PERSONAL) and WorldBand (HISTORICAL) | #844 | event-note-display | `frontend/src/lib/timeline/EventPill.svelte`, `frontend/src/lib/timeline/WorldBand.svelte` | `e2e/zeitstrahl-note.spec.ts#PERSONAL curated event note appears below its title`, `#HISTORICAL curated event note appears below its title` | Done |
-| REQ-005 | description longer than 3 lines is clamped and shows a disclosure toggle with aria-expanded=false (show more) | #844 | event-note-display | `frontend/src/lib/timeline/EventNote.svelte` | `event-note.svelte.spec.ts#clampsAndShowsToggle — long note shows "mehr anzeigen" with aria-expanded=false` | Done |
-| REQ-006 | short description (≤ 3 lines) renders fully with no toggle | #844 | event-note-display | `frontend/src/lib/timeline/EventNote.svelte` | `event-note.svelte.spec.ts#shortNoteNoToggle — a one-line note renders fully with no disclosure control` | Done |
-| REQ-007 | clicking the toggle expands the note (aria-expanded=true, "show less"); clicking again collapses it | #844 | event-note-display | `frontend/src/lib/timeline/EventNote.svelte` | `event-note.svelte.spec.ts#toggleExpandsCollapses — click expands, re-click collapses` | Done |
-| REQ-008 | null, empty, or blank-only description renders nothing (no note element in DOM) | #844 | event-note-display | `frontend/src/lib/timeline/EventNote.svelte` | `event-note.svelte.spec.ts#blankNoteRendersNothing — null/empty string/blank-only string produces no note element` (3 cases) | Done |

backend/pom.xml

@@ -369,12 +369,6 @@
 				<artifactId>maven-surefire-plugin</artifactId>
 				<configuration>
 					<forkedProcessTimeoutInSeconds>600</forkedProcessTimeoutInSeconds>
-					<!-- Grace period after the test JVM calls System.exit(0). The 30s default is too
-					     short: the single reused fork closes ~32 cached Spring contexts at shutdown,
-					     each tearing down a Testcontainers Postgres + HikariCP pool, which overruns 30s
-					     and makes Surefire kill the fork (BUILD FAILURE despite 0 test failures). This is
-					     a different knob from forkedProcessTimeoutInSeconds above. See issue #848. -->
-					<forkedProcessExitTimeoutInSeconds>120</forkedProcessExitTimeoutInSeconds>
 					<systemPropertyVariables>
 						<junit.jupiter.execution.timeout.default>90 s</junit.jupiter.execution.timeout.default>
 					</systemPropertyVariables>

backend/src/main/java/org/raddatz/familienarchiv/timeline/TimelineEntryDTO.java

@@ -28,18 +28,6 @@ import java.util.UUID;
  * They are deliberately NOT {@code @Schema(requiredMode = REQUIRED)} so the generated TypeScript
  * types stay optional.
  *
- * <p><b>Letter→event link ({@code linkedEventId}):</b> for a {@link Kind#LETTER} entry, the id of
- * the curated {@link TimelineEvent} whose {@code documents} set contains the letter's document, or
- * {@code null} when the letter is referenced by no curated event (#850). Computed on read from the
- * existing {@code timeline_event_documents} join — no new column. {@code null} for non-letter
- * entries. Deliberately NOT {@code @Schema(requiredMode = REQUIRED)} so the generated TypeScript
- * type stays optional.
- *
- * <p><b>Event description ({@code description}):</b> curator-authored context note for a curated
- * {@link Kind#EVENT} entry (#844). Populated from {@link TimelineEvent#getDescription()} — null
- * for {@link Kind#LETTER} and derived entries. Deliberately NOT
- * {@code @Schema(requiredMode = REQUIRED)} so the generated TypeScript type stays optional.
- *
  * <p>Callers of {@code TimelineEventService.assembleDerivedEvents()} must independently enforce
  * {@code READ_ALL} authorization before invoking that method (see ADR-043).
  */
@@ -59,8 +47,6 @@ public record TimelineEntryDTO(
         DerivedEventType derivedType,
         UUID rootTagId,
         String rootTagName,
-        String rootTagColor,
-        UUID linkedEventId,
-        String description
+        String rootTagColor
 ) {
 }

backend/src/main/java/org/raddatz/familienarchiv/timeline/TimelineEventService.java

@@ -267,7 +267,7 @@ public class TimelineEventService {
                         p.getBirthDate(), null,
                         p.getDisplayName(), EventType.PERSONAL,
                         null, null, List.of(p.getId()), DerivedEventType.BIRTH,
-                        null, null, null, null, null))
+                        null, null, null))
                 .toList();
     }
 
@@ -279,7 +279,7 @@ public class TimelineEventService {
                         p.getDeathDate(), null,
                         p.getDisplayName(), EventType.PERSONAL,
                         null, null, List.of(p.getId()), DerivedEventType.DEATH,
-                        null, null, null, null, null))
+                        null, null, null))
                 .toList();
     }
 
@@ -304,7 +304,7 @@ public class TimelineEventService {
                         null, null,
                         List.of(r.getPerson().getId(), r.getRelatedPerson().getId()),
                         DerivedEventType.MARRIAGE,
-                        null, null, null, null, null));
+                        null, null, null));
             }
         }
         return result;

backend/src/main/java/org/raddatz/familienarchiv/timeline/TimelineService.java

@@ -80,20 +80,13 @@ public class TimelineService {
         // Resolve generation person IDs once — used across all three layers
         Set<UUID> genPersonIds = resolveGenerationPersonIds(filter.generation());
 
-        // Fetch curated events once; the events that survive the filter below feed both the
-        // event entries and the batched letter→event link pass (resolveLetterEventLinks), so the
-        // membership pass costs no extra query and touches only on-screen events. REQ-009.
-        List<TimelineEvent> allEvents = eventRepository.findAll();
-
         // ── curated events ───────────────────────────────────────────────────
         List<TimelineEntryDTO> entries = new ArrayList<>();
-        List<TimelineEvent> filteredEvents = new ArrayList<>();
-        for (TimelineEvent ev : allEvents) {
+        for (TimelineEvent ev : eventRepository.findAll()) {
             if (!passesTypeFilter(ev.getType(), filter.type())) continue;
             if (!passesPersonFilter(ev.getPersons(), filter.personId())) continue;
             if (!passesGenerationFilter(ev.getPersons(), genPersonIds)) continue;
             if (!passesYearFilter(ev.getEventDate(), ev.getPrecision(), filter)) continue;
-            filteredEvents.add(ev);
             entries.add(mapEvent(ev));
         }
 
@@ -114,9 +107,8 @@ public class TimelineService {
             letters.add(doc);
         }
         Map<UUID, RootTag> rootByDocId = resolveLetterRootTags(letters);
-        Map<UUID, UUID> eventByDocId = resolveLetterEventLinks(letters, filteredEvents);
         for (Document doc : letters) {
-            entries.add(mapDocument(doc, rootByDocId, eventByDocId));
+            entries.add(mapDocument(doc, rootByDocId));
         }
 
         return bucket(entries);
@@ -237,14 +229,11 @@ public class TimelineService {
                 null,
                 null,
                 null,
-                null,
-                null,
-                ev.getDescription()
+                null
         );
     }
 
-    private TimelineEntryDTO mapDocument(Document doc, Map<UUID, RootTag> rootByDocId,
-                                         Map<UUID, UUID> eventByDocId) {
+    private TimelineEntryDTO mapDocument(Document doc, Map<UUID, RootTag> rootByDocId) {
         RootTag root = rootByDocId.get(doc.getId());
         return new TimelineEntryDTO(
                 Kind.LETTER,
@@ -262,51 +251,10 @@ public class TimelineService {
                 null,
                 root == null ? null : root.id(),
                 root == null ? null : root.name(),
-                root == null ? null : root.color(),
-                eventByDocId.get(doc.getId()),
-                null
+                root == null ? null : root.color()
         );
     }
 
-    /**
-     * Resolves each letter's linked curated event in one batched pass, keyed by document id: the
-     * event whose {@code documents} set contains the letter (REQ-009). A single doc→event map is
-     * built over the already-loaded events — no per-letter query ({@code TimelineEvent.documents}
-     * carries {@code @BatchSize(50)}). When a document is referenced by more than one curated
-     * event, the earliest-dated event wins (then lowest {@code eventId}); the pass runs over a
-     * stably-ordered copy so the link is a deterministic property of the data, not a coin-flip on
-     * the undefined repository iteration order ({@code putIfAbsent} keeps the first = winner). The
-     * map is built only over the events that survived the timeline filter, so the lazy
-     * {@code documents} collection is hydrated for on-screen events alone (finding #10); a letter
-     * whose only linking event was filtered out links to nothing, matching the frontend's
-     * filter-then-cluster (#850). Logs nothing — the assembly path keeps UUIDs out of logs (§2.7).
-     */
-    private Map<UUID, UUID> resolveLetterEventLinks(List<Document> letters, List<TimelineEvent> events) {
-        Set<UUID> letterDocIds = letters.stream().map(Document::getId).collect(Collectors.toSet());
-        if (letterDocIds.isEmpty()) return Map.of();
-
-        // Stable order so a multi-event letter links deterministically: earliest event date
-        // (undated last), then lowest id. putIfAbsent below then keeps the winner (REQ-009).
-        List<TimelineEvent> ordered = events.stream()
-                .sorted(Comparator
-                        .comparing(TimelineEvent::getEventDate,
-                                Comparator.nullsLast(Comparator.naturalOrder()))
-                        .thenComparing(TimelineEvent::getId))
-                .toList();
-
-        Map<UUID, UUID> eventByDocId = new HashMap<>();
-        for (TimelineEvent ev : ordered) {
-            Set<Document> linkedDocs = ev.getDocuments();
-            if (linkedDocs == null) continue;
-            for (Document linked : linkedDocs) {
-                if (letterDocIds.contains(linked.getId())) {
-                    eventByDocId.putIfAbsent(linked.getId(), ev.getId());
-                }
-            }
-        }
-        return eventByDocId;
-    }
-
     /**
      * Resolves each letter's primary root tag in one batched pass, keyed by document id — no
      * per-letter N+1: each letter contributes only its alphabetically-first assigned tag (#835),

backend/src/test/java/org/raddatz/familienarchiv/timeline/TimelineControllerTest.java

@@ -74,28 +74,6 @@ class TimelineControllerTest {
                 .andExpect(jsonPath("$.undated").isArray());
     }
 
-    // ─── REQ-001: description field serialised ───────────────────────────────
-
-    @Test
-    @org.springframework.security.test.context.support.WithMockUser(authorities = "READ_ALL")
-    void timelineIncludesEventDescription() throws Exception {
-        // REQ-001 (controller slice): a curated event entry with description "Kontext" is
-        // serialised into the timeline response at the correct JSON path.
-        var entry = new TimelineEntryDTO(Kind.EVENT, org.raddatz.familienarchiv.document.DatePrecision.DAY,
-                false, "", "",
-                java.time.LocalDate.of(1914, 8, 1), null, "Kriegsbeginn",
-                EventType.HISTORICAL, UUID.randomUUID(), null, List.of(), null,
-                null, null, null, null, "Kontext");
-        when(timelineService.assemble(any()))
-                .thenReturn(new TimelineDTO(
-                        List.of(new TimelineYearDTO(1914, List.of(entry))),
-                        List.of()));
-
-        mockMvc.perform(get("/api/timeline"))
-                .andExpect(status().isOk())
-                .andExpect(jsonPath("$.years[0].entries[0].description", is("Kontext")));
-    }
-
     // ─── Parameter binding ────────────────────────────────────────────────────
 
     @Test

backend/src/test/java/org/raddatz/familienarchiv/timeline/TimelineServiceTest.java

@@ -69,10 +69,10 @@ class TimelineServiceTest {
         UUID id2 = UUID.fromString("00000000-0000-0000-0000-000000000002");
         var e1 = new TimelineEntryDTO(Kind.LETTER, DatePrecision.DAY, false, "", "",
                 LocalDate.of(1914, 7, 28), null, "Same Title", null, null, id1, List.of(), null,
-                null, null, null, null, null);
+                null, null, null);
         var e2 = new TimelineEntryDTO(Kind.LETTER, DatePrecision.DAY, false, "", "",
                 LocalDate.of(1914, 7, 28), null, "Same Title", null, null, id2, List.of(), null,
-                null, null, null, null, null);
+                null, null, null);
 
         var sorted = List.of(e2, e1).stream()
                 .sorted(TimelineService.WITHIN_BAND_ORDER)
@@ -511,153 +511,6 @@ class TimelineServiceTest {
         verify(tagService, times(1)).resolveRootTags(anyList());
     }
 
-    // ─── event description (#844, REQ-001) ───────────────────────────────────
-
-    @Test
-    void mapEvent_populates_description_from_event() {
-        // REQ-001: a curated event with a description surfaces it on the assembled entry.
-        TimelineEvent ev = TimelineEvent.builder().id(UUID.randomUUID())
-                .title("Kriegsbeginn").type(EventType.HISTORICAL)
-                .eventDate(LocalDate.of(1914, 8, 1)).precision(DatePrecision.DAY)
-                .description("Kontext")
-                .build();
-        when(eventRepository.findAll()).thenReturn(List.of(ev));
-        when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
-        when(documentService.getAllForTimeline()).thenReturn(List.of());
-
-        TimelineDTO result = timelineService.assemble(noFilters());
-
-        TimelineEntryDTO entry = result.years().get(0).entries().get(0);
-        assertThat(entry.description()).isEqualTo("Kontext");
-    }
-
-    @Test
-    void mapEvent_leaves_description_null_when_event_has_none() {
-        // REQ-001: an event without a description → null on the entry.
-        TimelineEvent ev = TimelineEvent.builder().id(UUID.randomUUID())
-                .title("Ereignis").type(EventType.PERSONAL)
-                .eventDate(LocalDate.of(1920, 1, 1)).precision(DatePrecision.YEAR)
-                .build();
-        when(eventRepository.findAll()).thenReturn(List.of(ev));
-        when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
-        when(documentService.getAllForTimeline()).thenReturn(List.of());
-
-        TimelineEntryDTO entry = timelineService.assemble(noFilters()).years().get(0).entries().get(0);
-        assertThat(entry.description()).isNull();
-    }
-
-    @Test
-    void mapDocument_leaves_description_null_for_letter() {
-        // REQ-001: LETTER entries carry null description, regardless of any document fields.
-        Document doc = docWithDate(LocalDate.of(1916, 3, 1), DatePrecision.MONTH);
-        when(eventRepository.findAll()).thenReturn(List.of());
-        when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
-        when(documentService.getAllForTimeline()).thenReturn(List.of(doc));
-
-        TimelineEntryDTO entry = onlyLetterEntry(timelineService.assemble(noFilters()));
-        assertThat(entry.description()).isNull();
-    }
-
-    // ─── letter→event link (#850, REQ-009) ───────────────────────────────────
-
-    @Test
-    void letter_in_a_curated_events_documents_carries_that_events_id() {
-        // REQ-009: linkedEventId = the curated event whose documents set contains the letter.
-        Document letterDoc = docWithDate(LocalDate.of(1915, 5, 1), DatePrecision.MONTH);
-        UUID eventId = UUID.randomUUID();
-        TimelineEvent event = TimelineEvent.builder().id(eventId)
-                .title("Briefe von der Front").type(EventType.PERSONAL)
-                .documents(new HashSet<>(Set.of(letterDoc)))
-                .build(); // no eventDate → event lands undated, leaving the year band to the letter
-        when(eventRepository.findAll()).thenReturn(List.of(event));
-        when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
-        when(documentService.getAllForTimeline()).thenReturn(List.of(letterDoc));
-
-        TimelineEntryDTO entry = onlyLetterEntry(timelineService.assemble(noFilters()));
-
-        assertThat(entry.linkedEventId()).isEqualTo(eventId);
-    }
-
-    @Test
-    void letter_in_no_curated_event_has_null_linkedEventId() {
-        // REQ-009: a letter referenced by no curated event → linkedEventId null; the frontend
-        // then renders it as a loose chronological letter (REQ-006).
-        Document letterDoc = docWithDate(LocalDate.of(1915, 5, 1), DatePrecision.MONTH);
-        TimelineEvent event = TimelineEvent.builder().id(UUID.randomUUID())
-                .title("Anderes Ereignis").type(EventType.PERSONAL)
-                .documents(new HashSet<>(Set.of(Document.builder().id(UUID.randomUUID()).build())))
-                .build();
-        when(eventRepository.findAll()).thenReturn(List.of(event));
-        when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
-        when(documentService.getAllForTimeline()).thenReturn(List.of(letterDoc));
-
-        TimelineEntryDTO entry = onlyLetterEntry(timelineService.assemble(noFilters()));
-
-        assertThat(entry.linkedEventId()).isNull();
-    }
-
-    @Test
-    void multi_event_letter_links_deterministically_to_the_earliest_event() {
-        // REQ-009: a document referenced by >1 curated event links to the earliest-dated event
-        // (then lowest id), independent of repository iteration order — not a coin-flip on
-        // findAll()'s undefined order.
-        Document shared = docWithDate(LocalDate.of(1916, 5, 1), DatePrecision.MONTH);
-        TimelineEvent earlier = TimelineEvent.builder()
-                .id(UUID.fromString("00000000-0000-0000-0000-000000000001"))
-                .title("Frühes Ereignis").type(EventType.PERSONAL)
-                .eventDate(LocalDate.of(1913, 3, 1)).precision(DatePrecision.MONTH)
-                .documents(new HashSet<>(Set.of(shared)))
-                .build();
-        TimelineEvent later = TimelineEvent.builder()
-                .id(UUID.fromString("00000000-0000-0000-0000-000000000002"))
-                .title("Spätes Ereignis").type(EventType.PERSONAL)
-                .eventDate(LocalDate.of(1914, 3, 1)).precision(DatePrecision.MONTH)
-                .documents(new HashSet<>(Set.of(shared)))
-                .build();
-        when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
-        when(documentService.getAllForTimeline()).thenReturn(List.of(shared));
-
-        // `later` first in iteration: a naive putIfAbsent would wrongly pick it.
-        when(eventRepository.findAll()).thenReturn(List.of(later, earlier));
-        assertThat(theLetter(timelineService.assemble(noFilters())).linkedEventId())
-                .isEqualTo(earlier.getId());
-
-        // Reversed order yields the same winner — the link is order-independent.
-        when(eventRepository.findAll()).thenReturn(List.of(earlier, later));
-        assertThat(theLetter(timelineService.assemble(noFilters())).linkedEventId())
-                .isEqualTo(earlier.getId());
-    }
-
-    @Test
-    void letter_linked_only_to_a_filtered_out_event_has_null_linkedEventId() {
-        // finding #10: the link pass runs over the events that survived the filter, not all of
-        // them. A letter whose only linking event is excluded by the active filter links to
-        // nothing (the frontend would drop it loose anyway) — and the lazy `documents` collection
-        // is never hydrated for events that are off-screen.
-        Document letterDoc = docWithDate(LocalDate.of(1916, 5, 1), DatePrecision.MONTH);
-        TimelineEvent worldEvent = TimelineEvent.builder().id(UUID.randomUUID())
-                .title("Somme").type(EventType.HISTORICAL)
-                .documents(new HashSet<>(Set.of(letterDoc)))
-                .build();
-        when(eventRepository.findAll()).thenReturn(List.of(worldEvent));
-        when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
-        when(documentService.getAllForTimeline()).thenReturn(List.of(letterDoc));
-
-        // Filter to PERSONAL only → the HISTORICAL event is filtered out of the view.
-        TimelineEntryDTO entry = theLetter(timelineService.assemble(
-                new TimelineFilter(null, null, EventType.PERSONAL, null, null)));
-
-        assertThat(entry.linkedEventId()).isNull();
-    }
-
-    private static TimelineEntryDTO theLetter(TimelineDTO result) {
-        return java.util.stream.Stream.concat(
-                        result.years().stream().flatMap(y -> y.entries().stream()),
-                        result.undated().stream())
-                .filter(e -> e.kind() == Kind.LETTER)
-                .findFirst().orElseThrow();
-    }
-
     private static TimelineEntryDTO onlyLetterEntry(TimelineDTO result) {
         assertThat(result.years()).hasSize(1);
         return result.years().get(0).entries().get(0);
@@ -670,7 +523,7 @@ class TimelineServiceTest {
     private static TimelineEntryDTO letter(LocalDate date, DatePrecision precision, String title) {
         return new TimelineEntryDTO(Kind.LETTER, precision, false, "", "",
                 date, null, title, null, null, UUID.randomUUID(), List.of(), null,
-                null, null, null, null, null);
+                null, null, null);
     }
 
     private static Document docWithDate(LocalDate date, DatePrecision precision) {

design_handoff_familienarchiv_redesign/DESIGN_RULES.md

@@ -1,210 +0,0 @@
-# Familienarchiv — Design Rules (binding)
-
-This is the visual law for the redesign. It promotes the informal `Regeln` page into
-enforceable specs. **When this doc and a prototype disagree, the prototype wins** — these
-values are transcribed from the prototypes, but the rendered file is ground truth.
-
-Built on the **De Gruyter Brill** corporate identity. Tone: restrained, archival,
-formal-respectful — institutional, not cute. German-first, formal **Sie**, never emoji.
-
----
-
-## 1. Design tokens
-
-Port `prototypes/colors_and_type.css` verbatim into the app (Tailwind 4 `@theme` or CSS
-custom properties). Components reference **semantic** tokens, never raw hex.
-
-### Color — light mode
-
-| Token | Value | Use |
-|---|---|---|
-| `--c-canvas` | `#f0efe9` | Page background (warm sand). Flat, no gradients. |
-| `--c-surface` | `#ffffff` | Cards, inputs, menus. |
-| `--c-muted` | `#f5f4ef` | Subtle fills (mission-control tiles, hover wash). |
-| `--c-line` | `#e4e2d7` | 1px borders. |
-| `--c-line-2` | `#eeede8` | Inner dividers / row separators. |
-| `--c-ink` | `#012851` | Primary text (navy). |
-| `--c-ink-2` | `#4b5563` | Secondary / body text. |
-| `--c-ink-3` | `#6b7280` | Meta, placeholder, captions. |
-| `--c-primary` | `#012851` | Primary buttons, active segment, header. |
-| `--c-primary-fg` | `#ffffff` | Text on primary. |
-| `--c-accent` | `#a1dcd8` | **Mint — decorative only.** Top stripes, left rules, underlines, timeline spine. **Never carries text.** |
-| `--c-accent-bg` | `rgba(161,220,216,.15)` | Tinted note/skill backgrounds. |
-| `--c-header` | `#012851` | Header bar (always navy, both themes). |
-| `--c-turquoise` | `#00c7b1` | Transcription mode only. |
-| `--c-danger` | `#c0392b` | Destructive actions (Löschen). |
-| `--c-focus-ring` | `#012851` | 2px focus outline, 2px offset (mint in dark). |
-
-### Color — dark mode (`:root[data-theme='dark']`)
-
-Navy-tinted. Key flips: `--c-canvas:#010e1e`, `--c-surface:#011526`, `--c-muted:#011a30`,
-`--c-line:#0d3358`, `--c-ink:#f0efe9`, `--c-ink-2:#9ca3af`, `--c-ink-3:#8b97a5`.
-**`--c-accent` flips to turquoise `#00c7b1`**, and `--c-primary` flips to mint `#a1dcd8`
-with `--c-primary-fg:#012851`. Full set in `colors_and_type.css`.
-
-### Person / avatar palette (deterministic — see §5)
-
-`#5a8a6a #a0522d #c17a00 #607080 #7a4f9a #c0446e #3060b0 #4a7a3a #9a8040 #c05540`
-
-> The live avatar constant is `$lib/shared/avatarPalette.ts` (single source of
-> truth). Three of these hues fail the ≥4.5:1 white-initials contrast floor and
-> ship as AA-darkened variants there (sage `#527e61`, amber `#a46800`,
-> sand `#897239`); the bright hues above remain the decorative tag-dot colors.
-
-### Tag dot colors
-
-`--c-tag-sage #5a8a6a`, `--c-tag-sienna #a0522d`, `--c-tag-amber #c17a00`,
-`--c-tag-slate #607080`, `--c-tag-violet #7a4f9a`, `--c-tag-rose #c0446e`,
-`--c-tag-cobalt #3060b0`, `--c-tag-moss #4a7a3a`, `--c-tag-sand #9a8040`,
-`--c-tag-coral #c05540`.
-
-### Badge types (Personen)
-
-| Type | bg / text / border |
-|---|---|
-| Institution | `#e8eff7` / `#1a4971` / `#c4d5e8` |
-| Gruppe | `#f0e8f5` / `#5a2d6f` / `#d8c5e3` |
-| Unbekannt | `#fdf4e3` / `#7a5a0a` / `#f0ddb3` |
-
-### Radius / shadow
-
-- `--radius-sm: 2px` — cards, inputs, buttons, segmented control. **The default.**
-- `--radius-md: 4px` — tag chips/badges only.
-- `--radius-full: 9999px` — avatars, dots, pills.
-- `--shadow-sm: 0 1px 2px 0 rgb(0 0 0/.05)` — resting cards.
-- `--shadow-md: 0 4px 6px -1px rgb(0 0 0/.1), 0 2px 4px -2px rgb(0 0 0/.1)` — dropdowns.
-
----
-
-## 2. Typography
-
-Two families. **Montserrat** (`--font-sans`) for all UI chrome; **Tinos** (`--font-serif`)
-for headlines, body, letter content, transcriptions, story prose.
-
-| Role | Family | Size / weight | Treatment |
-|---|---|---|---|
-| Page title (`h1`) | Tinos | **46px / 700**, line-height 1.06 | sentence case |
-| Story detail title | Tinos | 38px / 700, lh 1.15 | sentence case |
-| Card title (`h3`) | Tinos | 19–24px / 700 | sentence case |
-| Body / letter / snippet | Tinos | 15–18px, lh 1.55–1.75 | snippets *italic*, quotes use `„…“` |
-| **Rubric / eyebrow label** | Montserrat | **12px / 700**, `letter-spacing:.14em`, UPPERCASE | above every page title |
-| Section caption | Montserrat | 11–12px / 700, `.12–.14em`, UPPERCASE | card headers |
-| Button / nav label | Montserrat | 11–12px / 700, `.08–.1em`, UPPERCASE | |
-| Tag chip label | Montserrat | 10px / 700, `.13–.15em`, UPPERCASE | |
-| Meta line | Montserrat | 12px / 400 | counts, dates; separated by ` · ` |
-
-**Casing law:** UI chrome (labels, buttons, nav, captions, tags) is ALL CAPS + wide
-tracking, Montserrat bold. Headlines and document titles are sentence case in Tinos serif.
-
----
-
-## 3. Shared component: page header (eyebrow + title)
-
-Every top-level page opens with this block. **Build it once** as a `PageHeader`
-component (props: eyebrow, title, lede, optional right-side count or action).
-
-```
-<div border-left:4px solid var(--c-accent); padding-left:18px>
-  <eyebrow>   Montserrat 12px/700, .14em, UPPERCASE, color --c-ink-3, margin-bottom 8px
-  <h1>        Tinos 46px/700, lh 1.06, color --c-ink
-  <lede>      Tinos italic 16px, color --c-ink-2, margin-top 10px, max-width 520px
-```
-
-The **4px mint left rule** is the signature. A right-aligned count
-(`38 Personen`, `147 Dokumente · 38 Personen`) or a primary action button sits opposite via
-`justify-content:space-between; align-items:flex-end`.
-
-Page shell for every screen: `min-height:100vh; background:var(--c-canvas)`, header on top,
-then `<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">`.
-
----
-
-## 4. Shared component: app header + nav (`ArchiveHeader`)
-
-Single sticky header reused on every page. **This is the most important thing to extract
-into one component** — it is currently duplicated and must not be.
-
-- `position:sticky; top:0; z-index:50; background:var(--c-header)`.
-- **4px mint stripe** (`#a1dcd8`) across the very top, above the bar.
-- Bar: `max-width:1180px; margin:0 auto; padding:0 32px; height:64px; display:flex; align-items:center`, white text.
-- Wordmark `FAMILIENARCHIV`: Montserrat 18px/700, `letter-spacing:.16em`, UPPERCASE, `margin-right:28px`.
-- Nav items: Montserrat 11px/700, `.07em`, UPPERCASE, color `rgba(255,255,255,.6)`,
-  `line-height:44px`. **Active** item → color `#fff` + `border-bottom:2px solid #a1dcd8`.
-  Nav order: Dokumente · Personen · Briefwechsel · Geschichten · Zeitstrahl · Aktivitäten
-  (· Regeln, internal). Each links to its route; pass the active key as a prop.
-- Right cluster: **Hell / Dunkel** theme toggle (segmented; active segment = mint bg
-  `#a1dcd8` + navy text) and a round user avatar chip (`MR`, white bg, navy text, 32px).
-- **Theme toggle** writes `localStorage['theme']` (`'light'|'dark'`) and sets
-  `document.documentElement.dataset.theme`. A tiny inline boot script in `<head>` reads it
-  before paint to avoid a flash. Map this to the app's existing theme mechanism if one
-  exists; otherwise replicate.
-- Motion: `transition-colors` only. No transforms, no scale on press.
-
----
-
-## 5. Shared primitive: avatar + deterministic color
-
-Every person is a round avatar with initials, colored by a hash of the name so the same
-person is always the same color across every screen. **Extract this into one util +
-component** — it is currently copy-pasted into 6 files.
-
-```js
-// palette = the 10 person colors in §1
-function avatarFor(name) {
-  let h = 0;
-  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
-  const parts = name.trim().split(/\s+/);
-  const initials = (parts[0][0] + (parts.length > 1 ? parts[parts.length-1][0] : '')).toUpperCase();
-  return { bg: palette[h % palette.length], initials };
-}
-```
-
-- Always a perfect circle (`border-radius:full`), white initials in Montserrat 700, `line-height:1`.
-- Sizes in use: **48px**/16px (selectors, person cards), **40px**/14px (story byline, feed,
-  Briefwechsel rows), **26px**/10px (overlapping stacks — `margin-left:-6px` +
-  `2px solid var(--c-surface)` ring), **28px** (timeline person nodes).
-- The color **distinguishes, it does not decorate** — never restyle it for emphasis.
-
----
-
-## 6. Shared component: segmented control (filters / views)
-
-Inline filter switch used on Personen, Geschichten, Zeitstrahl, Aktivitäten, and the header
-theme toggle.
-
-- `display:inline-flex; border:1px solid var(--c-line)` (radius 0 / sm; segments share borders).
-- Each segment: Montserrat 12px/700, `.08em`, UPPERCASE, `padding:9–10px 16px`, `cursor:pointer`.
-- **Active** segment: `background:var(--c-primary); color:var(--c-primary-fg)`.
-- Inactive: `background:var(--c-surface); color:var(--c-ink-2)`, `border-left:1px solid var(--c-line)` between segments.
-
----
-
-## 7. Cards, metadata, empty states
-
-**Card:** `background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20–24px`.
-Most content cards add a **3px mint top border** (`border-top:3px solid var(--c-accent)`) as
-the archival signature; some use a **3px mint left border** for inline/resume strips.
-
-**Metadata line:** one Montserrat 12px line, items separated by ` · `, often led by a 14px
-De Gruyter icon at `opacity:.5`. Example: `📅 14. März 1923 · 14 Dokumente · 4 Personen`
-(icon is an `<img>`, not emoji).
-
-**Status dots:** 7px circle + UPPERCASE label. Transkribiert/Veröffentlicht `#5a8a6a`,
-In Arbeit `#c17a00`, Neu/Entwurf `#607080`.
-
-**Empty state:** dashed `1px var(--c-line)` border, centered. Serif heading
-(`Noch keine Geschichten angelegt.`) + Montserrat sub line ending in the German ellipsis
-(`Beginnen Sie mit einem Brief…`). Quiet, Sie-form, helpful — never cute.
-
----
-
-## 8. Motion, hover, imagery
-
-- All motion is **color**, `transition: color/background/border .15–.2s`. No transform, no
-  scale, no press-down.
-- Rows: `hover:bg-muted/50`. Links: 2px mint underline at `text-underline-offset:3px`,
-  `text-decoration-thickness:2px`. Header nav: `white/60 → white`.
-- Backdrops `bg-black/20`. **No backdrop-blur, no glassmorphism, no gradients, no noise.**
-- Imagery is warm aged letter scans; UI chrome stays cool navy to contrast.
-- De Gruyter icons: black strokes as `<img>`, `opacity-40` resting tint (`.65` on the dark
-  header), globally inverted in dark mode.

design_handoff_familienarchiv_redesign/EPIC.md

@@ -1,217 +0,0 @@
-# EPIC: Familienarchiv Visual Redesign ("Mappe")
-
-> Implement **in order**. Stories 1–4 are foundation and shared primitives — every screen
-> depends on them. Do not start a screen story until 1–4 are merged, or the header, avatar,
-> and tokens get re-implemented per screen and drift. Read `DESIGN_RULES.md` first; open the
-> matching `prototypes/*.dc.html` for pixel ground truth while building each story.
-
-## Epic goal
-
-Reskin the entire Familienarchiv app to the unified "Mappe" archival direction and ship
-three new sections (Geschichten, Zeitstrahl, Aktivitäten). All copy German-first via
-Paraglide; light + dark mode; De Gruyter icon convention preserved.
-
-## Epic-level acceptance criteria
-
-- [ ] All eight screens match their prototype in light **and** dark mode.
-- [ ] Header, page-header, avatar, segmented control, and card exist as **single shared
-      components** — zero duplication of the header markup or the avatar-color function.
-- [ ] No raw hex in components; everything references the semantic tokens.
-- [ ] Every visible string is a Paraglide message key, German authored first; `en`/`es`
-      stubs added.
-- [ ] Icons rendered as `<img>`, invert correctly in dark mode.
-- [ ] No gradients, blur, emoji, or transform-based motion introduced.
-
----
-
-> **Reframe (2026-06-16): this is alignment, not greenfield.** An audit of the live codebase
-> found the substrate already in place — the full token system (`DESIGN_RULES §1–2`), dark
-> mode, the app header, and the three "new" sections (Geschichten, Zeitstrahl, Aktivitäten)
-> all already exist. So **Stories 1–4 below are close-out + extraction**, not from-scratch
-> builds, and Stories 5–11 are "align the existing screen to its prototype," not new pages.
-> The detailed, trackable breakdown lives in the Gitea milestone **"Mappe Visual Redesign"**
-> (issues split into *shared components* then *pages*); **Phase B** at the bottom of this file
-> lists the screens that previously had no prototype and now do.
-
-## Story 1 — Foundation: tokens, fonts, theme
-
-**Goal:** establish the visual substrate the whole app reads from.
-
-- Port `prototypes/colors_and_type.css` into the app's token layer (Tailwind 4 `@theme` /
-  `layout.css`). Keep every variable name in `DESIGN_RULES.md §1`.
-- Wire Montserrat + Tinos (or licensed Gotham/Times) and the `--font-sans`/`--font-serif` vars.
-- Implement light/dark via `:root[data-theme='dark']` + the pre-paint boot script that reads
-  `localStorage['theme']`. Add the global `img[src*='degruyter-icons']{filter:invert(1)}`
-  dark rule.
-
-**Done when:** a throwaway page using `var(--c-*)` tokens renders correct in both themes; no
-flash of wrong theme on reload.
-
-## Story 2 — Shared: app header + nav (`ArchiveHeader`)
-
-**Spec:** `DESIGN_RULES.md §4`. Prototype: `ArchiveHeader.dc.html`.
-
-- One sticky header component: mint stripe, wordmark, nav with active-key prop, theme
-  toggle, user chip. Nav routes to all sections.
-- Theme toggle drives the Story 1 mechanism.
-
-**Done when:** header renders identically on every route; active item shows the mint
-underline; toggle flips theme and persists.
-
-## Story 3 — Shared: avatar + deterministic color
-
-**Spec:** `DESIGN_RULES.md §5`.
-
-- `avatarFor(name)` util (hash → palette index + initials) + an `<Avatar name size>`
-  component supporting 26/28/40/48px and the overlapping-stack ring variant.
-
-**Done when:** the same name yields the same color everywhere; stacks overlap with the
-surface-colored ring.
-
-## Story 4 — Shared: page-header, segmented control, card, metadata, empty state
-
-**Spec:** `DESIGN_RULES.md §3, §6, §7`.
-
-- `PageHeader` (eyebrow + 4px mint left rule + serif h1 + italic lede + right slot).
-- `SegmentedControl` (active = navy). `Card` (mint top/left border variants). `MetaLine`
-  (` · ` separated, optional leading icon). `EmptyState` (dashed, serif + ellipsis).
-
-**Done when:** each primitive matches the prototype and is consumed by the screen stories
-below — not re-styled inline.
-
----
-
-## Story 5 — Dokumente (dashboard / search results)
-
-**Route:** `/`. **Prototype:** `Dokumente.dc.html`.
-
-PageHeader (eyebrow "Archiv", title "Dokumente", lede, right count "147 Dokumente · 38
-Personen"). Then: a **search bar card** (input `Titel, Personen, Tags durchsuchen…` +
-"Datum ↓" sort + "Filter" buttons); a **resume strip** (mint left border, "Weiter bei:" +
-italic underlined doc link); a **`1fr 320px` grid** — left: "Zuletzt hinzugefügt" list
-(title · avatar stack · right-aligned date `width:128px` · status dot+label `width:118px`),
-right column: **upload dropzone** (dashed, Upload icon, `PDF, JPG, PNG, TIFF bis 50 MB`) +
-"Benötigt Metadaten" card; below full-width **Mission Control** — 3 tiles (Segmentierung /
-Transkription / Zur Überprüfung), each with a caption, a pill "skill" hint, a weekly count,
-and a list of linked items. Right column collapses below `lg`; main goes full-width.
-
-**Done when:** matches prototype both themes; status dots use the §7 colors; grid collapses.
-
-## Story 6 — Personen (directory)
-
-**Route:** `/persons`. **Prototype:** `Personen.dc.html`.
-
-PageHeader (eyebrow "Verzeichnis") + right count "38 Personen". Search input
-(`z.B. Oma Frieda, Onkel Karl…`) + segmented control (Alle / Personen / Institutionen /
-Gruppen). **3-column card grid**; each card: 48px avatar, serif name, relation sub, optional
-type **badge** (Institution/Gruppe/Unbekannt — §1 colors), divider, meta line
-`✉ N Briefe · N Dokumente`. Cards carry the 3px mint top border.
-
-**Done when:** badge colors correct; avatar colors deterministic; grid responsive.
-
-## Story 7 — Briefwechsel — DROPPED
-
-The two-person letter-exchange feature was removed from the product. Its prototype, route, and
-nav entry no longer exist. Skip.
-
-## Story 8 — Geschichten (story collections list) — NEW
-
-**Route:** `/geschichten`. **Prototype:** `Geschichten.dc.html`.
-
-PageHeader (eyebrow "Sammlungen") + primary button "Neue Geschichte". Segmented control
-(Alle / Veröffentlicht / In Arbeit / Entwurf) + Filter button. **2-column card grid**; each
-card (link, mint top border): tag chips (dot + UPPERCASE label), serif 24px title, serif dek,
-meta line `📅 range · N Dokumente · N Personen`, footer with overlapping avatar stack + status
-dot/label. Cards link to the story detail.
-
-**Done when:** tag dots and status colors correct; cards link to Story 9.
-
-## Story 9 — Geschichte (single story detail) — NEW
-
-**Route:** `/geschichten/:id`. **Prototype:** `Geschichte.dc.html`. **Two variants**
-(`variant` prop): **"Lesereise"** (a guided reading — intro + narration blocks + letter
-cards + annotation notes) and **"Sammlung"** (a collection — intro + "Erwähnte Dokumente"
-list). Centered `max-width:880px` article card (mint top border, `padding:48px 56px`):
-type badge, 38px serif title, byline row (author avatar + name + "zusammengestellt am …" +
-Bearbeiten / Löschen actions), intro paragraph, then ordered **blocks**:
-
-- **narration** — 3px mint left rule, serif italic 18px.
-- **letter** — clickable row: 40px tile w/ Mail icon, serif title, meta `date · von X an Y`,
-  trailing Arrow-Right icon.
-- **note** — mint-tinted (`--c-accent-bg`) left-rule box, "Anmerkung" caption + serif italic.
-
-**Done when:** both variants render from the prop; block types styled per spec; Löschen uses
-`--c-danger`.
-
-## Story 10 — Zeitstrahl (timeline) — NEW
-
-**Route:** `/zeitstrahl`. **Prototype:** `Zeitstrahl.dc.html`.
-
-PageHeader (eyebrow "Chronik") + right count. Segmented control (Alle / Briefe / Personen /
-Ereignisse) + a small legend. **Centered vertical spine** (`max-width:760px`, 2px mint center
-line). Item types stacked on the spine: **year** pill (navy), **summary** card (count + a
-12-bar monthly-density mini chart in mint + range labels), **letter** cards **alternating
-left/right** with a spine dot (`2px solid --c-primary`) and optional tag pill, **person**
-node (28px navy circle glyph + name + derived meta), **curated** node (★, mint left rule),
-**historical** band (full-width, Globe icon, serif italic, top/bottom hairline).
-
-**Done when:** spine centered; letters alternate; bars scale to value %; all five item types
-render.
-
-## Story 11 — Aktivitäten (activity feed) — NEW
-
-**Route:** `/aktivitaeten`. **Prototype:** `Aktivitaeten.dc.html`.
-
-PageHeader (eyebrow "Verlauf") + "Aktualisieren" button. Segmented control (Alle /
-Transkription / Uploads / Personen). Feed grouped by day (Heute / Gestern / Diese Woche),
-each group a UPPERCASE caption + rows. Each **row**: 40px avatar with a small **action-icon
-badge** bottom-right (Check/Upload/Chat/Edit/…), then a sentence — bold actor name +
-Montserrat verb + *italic underlined* target link — and a time sub.
-
-**Done when:** grouping + icon badges match; target links styled with mint underline.
-
-## Story 12 (optional) — Regeln (internal style reference)
-
-**Prototype:** `Regeln.dc.html`. Internal page documenting the seven blocks (Typografie,
-Farbe, Seitenkopf, Steuerung, Avatare, Metadaten/Leerzustände). Build only if the team wants
-a living in-app reference; otherwise `DESIGN_RULES.md` is the canonical record. Gate behind
-admin/dev.
-
----
-
-## Suggested order & dependencies
-
-```
-1 Tokens ─┬─ 2 Header ──┐
-          ├─ 3 Avatar ──┼─→ 5 Dokumente, 6 Personen,
-          └─ 4 Primitives┘   8 Geschichten → 9 Geschichte,
-                              10 Zeitstrahl, 11 Aktivitäten  (parallelizable)
-                              12 Regeln (optional, last)
-                              → then Phase B (added screens), all depend on 1–4
-```
-
----
-
-## Phase B — Added screens (previously un-prototyped pages)
-
-These are the pages the original handoff never covered. Each now has a hifi `.dc.html`
-prototype in `prototypes/`. All depend on the shared primitives from Stories 1–4 and are
-parallelizable among themselves. **Each maps to one Gitea page-issue** in the milestone.
-Admin + OCR pages are explicitly **out of scope** here (phase-2 milestone).
-
-| # | Screen | Prototype | Route(s) | Done when |
-|---|---|---|---|---|
-| B1 | Dokumente-Liste | `Dokumente-Liste.dc.html` | `/documents` | PageHeader; search card; AND/OR segmented; grouped mint-top cards; avatar-stack rows; 7px status dot+label; pagination |
-| B2 | Dokument-Detail | `Dokument-Detail.dc.html` | `/documents/[id]` | compact top bar w/ mint accent bar; PDF pane + transcription panel w/ Lesen/Bearbeiten segmented + turquoise mode; details card |
-| B3 | Dokument-Bearbeiten | `Dokument-Bearbeiten.dc.html` | `/documents/[id]/edit`, `/new`, `/bulk-edit` | split pane; progress strip; Wer&Wann + Beschreibung cards; dropzone (new); action bar (Löschen danger / Abbrechen / Zur Überprüfung / Speichern) |
-| B4 | PersonDetail | `PersonDetail.dc.html` | `/persons/[id]` | PageHeader; 2-col mint-top cards; deterministic avatar; correspondents + relationships + letter lists |
-| B5 | PersonForm | `PersonForm.dc.html` | `/persons/new`, `/[id]/edit` | PageHeader; Stammdaten card w/ type segmented; caps labels; Namensverlauf; edit-only merge danger zone; save bar |
-| B6 | PersonReview | `PersonReview.dc.html` | `/persons/review` | PageHeader + count; row card w/ muted avatar; idle/rename/merge states; danger merge+delete; confirm dialog; empty state |
-| B7 | Geschichte-Editor | `Geschichte-Editor.dc.html` | `/geschichten/new`, `/[id]/edit` | type-pick segmented; prose editor toolbar; journey editor w/ **color-only** drag; sidebar status+persons; save bar |
-| B8 | Ereignis-Editor | `Ereignis-Editor.dc.html` | `/zeitstrahl/events/new`, `/[id]/edit` | PageHeader; Wann&Was card w/ type segmented + date precision + danger error; persons/docs sidebar; save bar |
-| B9 | Stammbaum | `Stammbaum.dc.html` | `/stammbaum` | PageHeader + count; node cards w/ **§5 avatar** in resting/selected/dimmed; line connectors; side panel; zoom controls; empty state |
-| B10 | Themen | `Themen.dc.html` | `/themen` | PageHeader + count; segmented filter; mint-top cards w/ **§1 tag-dot** (not stripe); child rows; empty state |
-| B11 | Anreicherung | `Anreicherung.dc.html` | `/enrich`, `/[id]`, `/done` | list (status rows) / step (progress bar + split pane + action bar) / done (success card) |
-| B12 | Profil | `Profil.dc.html` | `/profile`, `/users/[id]` | PageHeader; 2-col data/password cards; token banners; notifications; public profile card w/ avatar |
-| B13 | Anmeldung | `Anmeldung.dc.html` | `/login`, `/register`, `/forgot-password`, `/reset-password` | self-contained branded shell (no app header); Tinos sentence-case titles; 17px inputs; token banners |
-| B14 | Hilfe-Transkription | `Hilfe-Transkription.dc.html` | `/hilfe/transkription` | PageHeader; article column; rule cards w/ De Gruyter icons (no emoji); fixes `border-brand-sand`/`bg-white` bugs |

design_handoff_familienarchiv_redesign/README.md

@@ -1,125 +0,0 @@
-# Handoff: Familienarchiv — Visual Redesign ("Mappe" direction)
-
-## Overview
-
-This package hands off a **complete visual redesign of the Familienarchiv web app** to a
-developer using Claude Code. Familienarchiv is a private digital family archive
-(German-first SvelteKit app) for digitising, transcribing, tagging and searching
-historical correspondence.
-
-The redesign unifies every page under one system — internally called **"Mappe"** (German
-for *folder/portfolio*): a warm, archival, institutional look built on the De Gruyter Brill
-corporate identity. It also **adds three new sections** that did not exist in the old app
-(**Geschichten**, **Zeitstrahl**, **Aktivitäten**) alongside redesigns of the existing ones.
-
-The work is broken into an **epic with foundation-first stories**. Read the three docs in
-this order:
-
-1. **`README.md`** (this file) — what's here, fidelity, how to use it.
-2. **`DESIGN_RULES.md`** — the binding visual law (tokens, type, the shared patterns).
-   *Read this before writing any code.*
-3. **`EPIC.md`** — the epic + ordered stories + acceptance criteria. *Implement in order.*
-
-## About the design files
-
-The files in `prototypes/` are **design references created in HTML** — high-fidelity
-prototypes that show the intended look and behaviour exactly. **They are not the production
-codebase and must not be shipped as-is.** They are authored as "Design Components"
-(`.dc.html`) for a prototyping runtime (`support.js`); that runtime is **not** part of the
-target app.
-
-Your task is to **recreate these designs inside the existing Familienarchiv codebase**
-(SvelteKit 2 + Svelte 5 + Tailwind 4 + Paraglide i18n) using its established patterns —
-real Svelte components, real routes, real i18n message keys. Where the prototype uses a
-made-up runtime construct (`<dc-import>`, `<sc-for>`, `renderVals()`), map it to the
-codebase's idiom (a Svelte component import, an `{#each}` block, component props/state).
-
-### Why HTML prototypes are the source of truth
-
-Every colour, size, weight, spacing and radius is written **inline** in the prototype
-markup, and the files **render**. When the written spec and a prototype disagree, **the
-prototype wins** — open it in a browser and measure. Treat `DESIGN_RULES.md` and `EPIC.md`
-as the *intent and ordering*, and the prototypes as the *pixel ground truth*.
-
-To view a prototype: open any `prototypes/*.dc.html` in a browser (they are self-contained;
-`colors_and_type.css`, `support.js` and `assets/icons/` sit alongside them). Use the
-**Hell / Dunkel** toggle in the header to verify dark mode.
-
-## Fidelity
-
-**High-fidelity (hifi).** Final colours, typography, spacing, radii, shadows, copy and
-interaction intent are all decided. Recreate pixel-perfectly using the codebase's existing
-libraries. Do not re-interpret the visual language — apply it.
-
-## What's in this bundle
-
-```
-design_handoff_familienarchiv_redesign/
-├── README.md            ← you are here
-├── DESIGN_RULES.md      ← binding tokens + shared patterns (the "rules")
-├── EPIC.md              ← epic, stories, acceptance criteria (implement in order)
-├── _AUTHORING_KIT.md    ← the contract every prototype was authored against (copy-verbatim snippets)
-└── prototypes/          ← runnable hifi references (source of truth)
-    │   ── original section screens ──
-    ├── ArchiveHeader.dc.html      shared header + nav + theme toggle
-    ├── Dokumente.dc.html          dashboard
-    ├── Personen.dc.html           person directory
-    ├── Geschichten.dc.html        curated story collections (list)
-    ├── Geschichte.dc.html         single story detail (2 variants)
-    ├── Zeitstrahl.dc.html         chronological timeline
-    ├── Aktivitaeten.dc.html       activity feed
-    ├── Regeln.dc.html             the design-rules spec page (internal reference)
-    │   ── added screens (the previously un-prototyped pages) ──
-    ├── Dokumente-Liste.dc.html    document search / grouped results
-    ├── Dokument-Detail.dc.html    document viewer + transcription workbench
-    ├── Dokument-Bearbeiten.dc.html edit / new / bulk-edit (variant prop)
-    ├── PersonDetail.dc.html       person detail (read)
-    ├── PersonForm.dc.html         person new / edit (variant prop)
-    ├── PersonReview.dc.html       provisional-person triage workflow
-    ├── Geschichte-Editor.dc.html  story authoring: new / story / journey (variant prop)
-    ├── Ereignis-Editor.dc.html    timeline event new / edit (variant prop)
-    ├── Stammbaum.dc.html          family tree
-    ├── Themen.dc.html             topics / tag directory
-    ├── Anreicherung.dc.html       enrich workflow: list / step / done (variant prop)
-    ├── Profil.dc.html             account settings + public profile (variant prop)
-    ├── Anmeldung.dc.html          auth: login / register / forgot / reset (variant prop, no app header)
-    ├── Hilfe-Transkription.dc.html transcription help / guidelines
-    │   ── shared assets ──
-    ├── colors_and_type.css        design tokens (port into the app)
-    ├── support.js                 prototype runtime — DO NOT ship
-    └── assets/icons/              De Gruyter "Simple" icons used by the screens
-```
-
-> **Status note (2026-06-16).** Two facts updated this bundle since the original handoff:
-> 1. **This is now an alignment effort, not a greenfield reskin.** The token system
->    (`DESIGN_RULES §1–2`), dark mode, the app header, and the three "new" sections
->    (Geschichten, Zeitstrahl, Aktivitäten) **already exist in the codebase**. Foundation
->    Stories 1–4 are *close-out + extraction* of the missing shared primitives (`PageHeader`,
->    `Avatar`/`avatarFor`, `SegmentedControl`, `Card`, `MetaLine`, `EmptyState`, `StatusDot`),
->    not from-scratch builds. See the Gitea milestone **"Mappe Visual Redesign"** for the
->    issue-level breakdown (shared components, then pages).
-> 2. **Briefwechsel was dropped** — that feature was removed from the product, so its
->    prototype and nav entry are gone. Admin + OCR pages are deferred to a phase-2 milestone.
-
-## Assets
-
-- **Icons** — De Gruyter "Simple" Medium-24px SVGs in `prototypes/assets/icons/`. In the
-  real app these live at `static/degruyter-icons/Simple/…` and are rendered as `<img>`
-  tags. Reuse the existing app copies; this bundle ships only the subset the redesign
-  touches so you can see which are needed.
-- **Fonts** — Montserrat + Tinos via Google Fonts (substitutes for Gotham + Times). The
-  `@import` is at the top of `colors_and_type.css`. If the team has the licensed Gotham/Times
-  faces, swap them in and keep the variable names.
-- **Logo** — none. The brand is the wordmark `FAMILIENARCHIV` (Montserrat Bold, uppercase,
-  `letter-spacing:.16em`) on the navy header.
-
-## Target codebase notes
-
-- **i18n**: all copy in the prototypes is German. The app is German-first with `en`/`es`
-  translations (Paraglide). Every visible string must become a message key, German written
-  first. Existing keys live in `frontend/messages/{de,en,es}.json`.
-- **Icons as `<img>`**: keep the app convention — never inline SVG, never icon fonts. Dark
-  mode inverts them globally via `img[src*='degruyter-icons'] { filter: invert(1); }`.
-- **Tailwind 4**: the prototypes use inline styles for clarity. Port them to the codebase's
-  Tailwind utilities / `@theme` tokens — but the *values* must match the tokens in
-  `DESIGN_RULES.md` exactly.

design_handoff_familienarchiv_redesign/_AUTHORING_KIT.md

@@ -1,275 +0,0 @@
-# Prototype Authoring Kit — "Mappe" redesign
-
-You are authoring a **`.dc.html` design prototype** for the Familienarchiv redesign. These
-prototypes are the **pixel ground truth** for one screen. They are NOT production code — they
-run in a tiny prototyping runtime (`support.js`) and are opened directly in a browser.
-
-**Read alongside this kit:** `DESIGN_RULES.md` (the binding visual law) and the existing
-prototype you are told to use as a template. When this kit and `DESIGN_RULES.md` disagree,
-`DESIGN_RULES.md` wins; when a rule and an existing rendered prototype disagree, the
-prototype wins.
-
-Everything below is **copy-verbatim**. Do not invent new tokens, colors, fonts, radii, or
-spacings. Use only `var(--c-*)` / `var(--font-*)` / `var(--shadow-*)` and the literal values
-shown here.
-
----
-
-## 1. File skeleton (copy exactly; fill the `<main>` and the `renderVals()`)
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="ACTIVE_KEY" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-    <!-- PAGE CONTENT HERE -->
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name,
-      a26:{ ...base, width:26, height:26, fontSize:10 },
-      a28:{ ...base, width:28, height:28, fontSize:11 },
-      a40:{ ...base, width:40, height:40, fontSize:14 },
-      a48:{ ...base, width:48, height:48, fontSize:16 } };
-  }
-  renderVals(){
-    return { /* data the template renders */ };
-  }
-}
-</script>
-</body>
-</html>
-```
-
-- `ACTIVE_KEY` ∈ `dokumente · personen · geschichten · zeitstrahl · aktivitaeten · stammbaum · themen · regeln`.
-  Pick the section your page belongs to (e.g. a document edit page → `dokumente`; a person
-  edit page → `personen`; a timeline event editor → `zeitstrahl`).
-- **Auth pages (`Anmeldung`) have NO `ArchiveHeader`** — they get their own branded shell
-  (see §11).
-
-## 2. Runtime constructs (this is all the runtime understands)
-
-- `{{ expr }}` — interpolate a value from `renderVals()` (path access: `a.b`, `a[0]`). Works
-  in text and in any attribute, including `style="{{ obj }}"` where `obj` is a JS style
-  object.
-- `<sc-for list="{{ items }}" as="x" hint-placeholder-count="6"> … {{ x.foo }} … </sc-for>`
-- `<sc-if value="{{ flag }}" hint-placeholder-val="{{ false }}"> … </sc-if>`
-- `onClick="{{ handler }}"` where `handler` is a function returned from `renderVals()`.
-- The logic class is `class Component extends DCLogic`. `renderVals()` returns the flat data
-  object. Use `this.props.X` to read a prop. `this.state` + `this.setState({...})` for
-  interactivity (rarely needed — prototypes are mostly static).
-- To inject a raw element from logic (e.g. an icon inside a loop), use
-  `React.createElement('img', { className:'dgicon', src:'assets/icons/Mail-MD.svg', style:{width:18,height:18,opacity:.5} })`.
-- **camelCase event/style props** in the template: `onClick`, not `onclick`.
-
-## 3. PageHeader (DESIGN_RULES §3) — every top-level page opens with this
-
-```html
-<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-  <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-    <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">EYEBROW</div>
-    <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Title</h1>
-    <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Lede sentence, Sie-form.</p>
-  </div>
-  <!-- right slot: a count span OR a primary button (see §6) -->
-  <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">147 Dokumente</span>
-</div>
-```
-
-Edit/detail/form pages still open with a PageHeader (eyebrow like `PERSON BEARBEITEN`,
-`EREIGNIS`, `NEUE PERSON`). Immersive split-pane workbenches (document detail viewer,
-document/enrich edit) may use a compact top bar instead — follow your page brief.
-
-## 4. Card (DESIGN_RULES §7)
-
-Base card, **with the 3px mint top-border archival signature** (most content cards):
-
-```html
-<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">…</div>
-```
-
-Variants: inline/resume strip uses `border-left:3px solid var(--c-accent)` instead of the top
-border. Section caption inside a card:
-
-```html
-<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Section title</h2>
-```
-
-## 5. Segmented control (DESIGN_RULES §6) — filters / view switches / binary type picks
-
-```html
-<div style="display:inline-flex; border:1px solid var(--c-line)">
-  <span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:10px 16px; cursor:pointer">Alle</span>
-  <span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 16px; border-left:1px solid var(--c-line); cursor:pointer">Zweitens</span>
-  <!-- repeat inactive segments; each adds border-left:1px solid var(--c-line) -->
-</div>
-```
-
-Active = `background:var(--c-primary); color:var(--c-primary-fg)`. Inactive =
-`background:var(--c-surface); color:var(--c-ink-2)`.
-
-## 6. Buttons (DESIGN_RULES §2 casing law — all UPPERCASE Montserrat 700)
-
-```html
-<!-- PRIMARY (navy) -->
-<button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
-
-<!-- SECONDARY (bordered) -->
-<button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Abbrechen</button>
-
-<!-- DANGER (destructive — Löschen) -->
-<a href="#" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Löschen</a>
-```
-
-## 7. Form field + label (DESIGN_RULES §1, §2)
-
-```html
-<label style="display:block">
-  <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Titel</span>
-  <input placeholder="z.B. Brief an Clara" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-</label>
-```
-
-Inputs are Tinos 16px (auth inputs 17px). Textareas same. Focus is shown by the runtime's
-default outline; if you add a visible focus style use a 2px `var(--c-focus-ring)` outline with
-2px offset — never remove focus without a replacement.
-
-## 8. MetaLine (DESIGN_RULES §7) — ` · `-separated, optional leading icon
-
-```html
-<div style="display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">
-  <img class="dgicon" src="assets/icons/Calendar-Add-MD.svg" style="width:14px; height:14px; opacity:.5">
-  <span>14. März 1923</span><span>·</span><span>14 Dokumente</span><span>·</span><span>4 Personen</span>
-</div>
-```
-
-## 9. Status dot (DESIGN_RULES §7) — 7px circle + UPPERCASE label
-
-```html
-<span style="display:inline-flex; align-items:center; gap:7px">
-  <span style="width:7px; height:7px; border-radius:999px; background:#5a8a6a"></span>
-  <span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">Transkribiert</span>
-</span>
-```
-
-Status colors: Transkribiert / Veröffentlicht / Bestätigt `#5a8a6a` · In Arbeit `#c17a00` ·
-Neu / Entwurf / Unbestätigt `#607080`. **Never color alone** — always the label too.
-
-## 10. Empty state (DESIGN_RULES §7) — dashed, serif heading, German ellipsis
-
-```html
-<div style="border:1px dashed var(--c-line); border-radius:2px; padding:48px 24px; text-align:center">
-  <div style="font-family:var(--font-serif); font-size:20px; color:var(--c-ink); margin-bottom:8px">Noch keine Geschichten angelegt.</div>
-  <div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Beginnen Sie mit einem Brief…</div>
-</div>
-```
-
-## 11. Auth shell (only for `Anmeldung.dc.html` — no ArchiveHeader)
-
-```html
-<div style="min-height:100vh; display:flex; flex-direction:column; background:var(--c-canvas)">
-  <header style="background:var(--c-header)">
-    <div style="height:4px; background:#a1dcd8"></div>
-    <div style="max-width:1180px; margin:0 auto; padding:0 32px; height:64px; display:flex; align-items:center; color:#fff">
-      <span style="font-family:var(--font-sans); font-size:18px; font-weight:700; letter-spacing:.16em; text-transform:uppercase">Familienarchiv</span>
-    </div>
-  </header>
-  <div style="flex:1; display:flex; align-items:center; justify-content:center; padding:40px 16px">
-    <div style="width:100%; max-width:400px; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:36px 32px">
-      <h1 style="font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--c-ink); margin:0 0 8px">Anmelden</h1>
-      <!-- labelled 17px inputs (§7), full-width primary button (§6), secondary link row -->
-    </div>
-  </div>
-</div>
-```
-
-Title is **Tinos sentence-case** (NOT an uppercase chrome label). Inputs 17px. Register
-variant uses `max-width:640px` and sectioned fields.
-
-## 12. Icons (render as `<img class="dgicon">`, never inline SVG, never emoji)
-
-```html
-<img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:16px; height:16px; opacity:.4">
-```
-
-Available in `assets/icons/`: `Account-MD` · `Arrow-Right-MD` · `Bookmarks-MD` ·
-`Calendar-Add-MD` · `Chat-MD` · `Check-MD` · `Copy-Item-MD` · `Edit-Content-MD` ·
-`Filter-MD` · `Folder-MD` · `Globe-MD` · `Library-MD` · `Location-MD` · `Mag-Glass-MD` ·
-`Mail-MD` · `Refresh-MD` · `Upload-MD` · `View-More-MD`. Use only these; pick the closest
-match. Icons rest at `opacity:.4` (`.5` on meta lines). They invert automatically in dark
-mode via the `.dgicon` rule in the skeleton.
-
-## 13. Hard rules checklist (verify before you finish)
-
-- [ ] Every color is a `var(--c-*)` token — **zero** raw hex except the `av()` palette and the
-      `#a1dcd8` mint stripe inside the header/auth shell. No `red-*`/`gray-*`/Tailwind.
-- [ ] Casing law: UI chrome (labels, buttons, nav, captions, tags, status, eyebrow) is
-      **UPPERCASE Montserrat 700 + wide tracking**; headlines & body & names are **Tinos
-      sentence case**. Quotes use `„…"`; snippets are *italic*.
-- [ ] Cards carry the 3px mint **top** border (or 3px mint **left** for inline strips).
-- [ ] Touch targets ≥ 44px (`min-height:44px`) on buttons / interactive rows / icon buttons.
-- [ ] Icon-only buttons would carry an `aria-label` in production — add `title="…"` in the
-      prototype so intent is clear.
-- [ ] **No** transforms, scale, translate, blur, glassmorphism, gradients, or emoji. Motion is
-      color only.
-- [ ] German, formal **Sie**. Use realistic family-archive content (Kurrent/Sütterlin letters
-      ~1894–1945; people like Herbert Cram, Clara Cram, Marie Cram, Eugenie de Gruyter).
-- [ ] Renders correctly in light AND dark — because you used tokens, it will. Do not hardcode
-      anything that breaks dark mode.
-- [ ] Avatars use `this.av(name)` and the size objects (`a26/a28/a40/a48`). Same name → same
-      color (10-color palette).
-
-## 14. Realistic data
-
-Pull field names / sections from the **current Svelte page** you are given so the prototype
-reflects what the app actually shows. Invent plausible German archival content for the values.
-Aim for enough rows/items to show the layout breathing (e.g. 6–9 grid cards, 4–8 list rows).
-
-## 15. Person chip (multiselect / token input)
-
-A selected person inside a form (person multiselect, sender/receiver token input, etc.) is a
-**square 2px rectangle chip** — `--radius-sm`, matching inputs/cards across the app. The
-**avatar inside stays round**, but the chip container is **NOT** a round pill. (`radius-full`
-in §1 is for avatars, dots, and status/count pills — not person chips.) Use this exact
-shape everywhere a removable person appears:
-
-```html
-<span style="display:inline-flex; align-items:center; gap:8px; background:var(--c-muted); border:1px solid var(--c-line); border-radius:2px; padding:4px 6px 4px 4px">
-  <span style="{{ p.a26 }}">{{ p.initials }}</span>
-  <span style="font-family:var(--font-serif); font-size:14px; color:var(--c-ink)">{{ p.name }}</span>
-  <a href="#" title="Person entfernen" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--c-ink-3); text-decoration:none">×</a>
-</span>
-```
-
-The person **name** is content → Tinos serif. The chip itself is `border-radius:2px`. Wrap
-chip lists in `display:flex; flex-wrap:wrap; gap:8px`. (A read-only correspondent link uses
-the same square 2px container with no `×`.)

design_handoff_familienarchiv_redesign/prototypes/Aktivitaeten.dc.html

@@ -1,112 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="aktivitaeten" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-
-    <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-      <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Verlauf</div>
-        <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Aktivitäten</h1>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Wer zuletzt transkribiert, ergänzt und kuratiert hat — die Hände hinter dem Archiv.</p>
-      </div>
-      <button class="fa-link" style="display:inline-flex; align-items:center; gap:8px; background:var(--c-surface); border:1px solid var(--c-line); padding:10px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer">
-        <img class="dgicon" src="assets/icons/Refresh-MD.svg" style="width:15px; height:15px; opacity:.55"> Aktualisieren
-      </button>
-    </div>
-
-    <!-- filter -->
-    <div style="margin-bottom:30px">
-      <div style="display:inline-flex; border:1px solid var(--c-line)">
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 16px; cursor:pointer">Alle</span>
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Transkription</span>
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Uploads</span>
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Personen</span>
-      </div>
-    </div>
-
-    <!-- feed -->
-    <sc-for list="{{ acts }}" as="g" hint-placeholder-count="3">
-      <div style="margin-bottom:30px">
-        <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:14px">{{ g.day }}</div>
-        <sc-for list="{{ g.items }}" as="a" hint-placeholder-count="3">
-          <div style="display:flex; gap:14px; align-items:flex-start; padding:16px 18px; background:var(--c-surface); border:1px solid var(--c-line); margin-bottom:10px">
-            <div style="position:relative; flex-shrink:0">
-              <span style="{{ a.a40 }}">{{ a.initials }}</span>
-              <span style="position:absolute; right:-4px; bottom:-4px; width:20px; height:20px; border-radius:999px; background:var(--c-surface); border:1px solid var(--c-line); display:flex; align-items:center; justify-content:center">
-                {{ a.iconEl }}
-              </span>
-            </div>
-            <div style="flex:1; min-width:0; padding-top:2px">
-              <p style="margin:0; font-family:var(--font-sans); font-size:14px; line-height:1.5; color:var(--c-ink-2)">
-                <span style="font-weight:600; color:var(--c-ink)">{{ a.name }}</span> {{ a.verb }} <a href="#" class="fa-link" style="font-family:var(--font-serif); font-size:16px; font-style:italic; color:var(--c-ink); text-decoration:underline; text-decoration-color:var(--c-accent); text-underline-offset:3px; text-decoration-thickness:2px">{{ a.target }}</a>
-              </p>
-              <div style="margin-top:4px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ a.time }}</div>
-            </div>
-          </div>
-        </sc-for>
-      </div>
-    </sc-for>
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name, a40:{ ...base, width:40, height:40, fontSize:14 } };
-  }
-
-  activities(){
-    const mk = (actor, verb, target, time, icon) => ({ ...this.av(actor), verb, target, time, iconName:icon });
-    return [
-      { day:'Heute', items:[
-        mk('Frieda Rose','hat die Transkription abgeschlossen von','Brief an Frieda aus dem Harz','09:42','Check-MD'),
-        mk('Karl Müller','hat 3 Seiten segmentiert in','Konvolut Rose, Heft III','08:15','Copy-Item-MD'),
-        mk('Anna Bauer','hat einen Kommentar hinterlassen zu','Postkarte aus Wien','07:51','Chat-MD'),
-      ]},
-      { day:'Gestern', items:[
-        mk('Otto Schmidt','hat zwei Dokumente hochgeladen in','Mappe B','17:30','Upload-MD'),
-        mk('Margarete Hoffmann','hat Metadaten ergänzt zu','Umschlag, 1924','14:05','Edit-Content-MD'),
-        mk('Wilhelm Rose','hat die Geschichte erstellt','Wilhelms Lehrjahre','11:20','Bookmarks-MD'),
-      ]},
-      { day:'Diese Woche', items:[
-        mk('Elise Vogt','hat zur Überprüfung freigegeben','Brief aus der Lehrzeit','Di.','Check-MD'),
-        mk('Heinrich Rose','ist dem Archiv beigetreten','','Mo.','Account-MD'),
-      ]},
-    ];
-  }
-
-  renderVals(){
-    return {
-      acts: this.activities().map(g => ({ ...g, items: g.items.map(a => ({ ...a, iconEl: React.createElement('img', { className:'dgicon', src:'assets/icons/'+a.iconName+'.svg', style:{ width:12, height:12, opacity:.65 } }) })) })),
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Anmeldung.dc.html

@@ -1,256 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-
-<!-- ═══ AUTH SHELL (§11) — no ArchiveHeader on auth pages ═══ -->
-<div style="min-height:100vh; display:flex; flex-direction:column; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-
-  <!-- branded auth header: navy bar + 4px mint stripe + wordmark -->
-  <header style="background:var(--c-header)">
-    <div style="height:4px; background:#a1dcd8"></div>
-    <div style="max-width:1180px; margin:0 auto; padding:0 32px; height:64px; display:flex; align-items:center; color:#fff">
-      <span style="font-family:var(--font-sans); font-size:18px; font-weight:700; letter-spacing:.16em; text-transform:uppercase">Familienarchiv</span>
-    </div>
-  </header>
-
-  <div style="flex:1; display:flex; align-items:center; justify-content:center; padding:48px 16px">
-    <div style="width:100%; max-width:{{ cardMaxWidth }}">
-
-      <!-- ─────────────────────────────────────────────── LOGIN ── -->
-      <sc-if value="{{ isLogin }}" hint-placeholder-val="{{ true }}">
-        <div style="width:100%; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:36px 32px">
-
-          <h1 style="font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--c-ink); margin:0 0 6px">Anmelden</h1>
-          <p style="font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--c-ink-2); margin:0 0 24px">Willkommen zurück im Familienarchiv.</p>
-
-          <!-- token-driven error banner (var(--c-danger)) -->
-          <div role="alert" style="display:flex; align-items:flex-start; gap:10px; margin-bottom:18px; border:1px solid var(--c-danger); border-left:3px solid var(--c-danger); background:var(--c-accent-bg); border-radius:2px; padding:11px 14px">
-            <span style="width:7px; height:7px; border-radius:999px; background:var(--c-danger); margin-top:6px; flex-shrink:0"></span>
-            <span style="font-family:var(--font-sans); font-size:13px; color:var(--c-danger)">E-Mail oder Passwort ist nicht korrekt.</span>
-          </div>
-
-          <!-- rate-limit / warning note (tinted with accent-bg) -->
-          <div role="status" style="display:flex; align-items:flex-start; gap:10px; margin-bottom:22px; border:1px solid var(--c-line); border-left:3px solid var(--c-warning); background:var(--c-accent-bg); border-radius:2px; padding:11px 14px">
-            <img class="dgicon" src="assets/icons/Refresh-MD.svg" style="width:15px; height:15px; opacity:.5; margin-top:1px; flex-shrink:0">
-            <span style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-2)">Zu viele Versuche. Bitte warten Sie eine Minute, bevor Sie es erneut versuchen.</span>
-          </div>
-
-          <div style="margin-bottom:18px">
-            <label style="display:block">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">E-Mail</span>
-              <input type="email" autocomplete="email" placeholder="vorname@familie.de" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
-            </label>
-          </div>
-
-          <div style="margin-bottom:24px">
-            <label style="display:block">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Passwort</span>
-              <input type="password" autocomplete="current-password" placeholder="••••••••" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
-            </label>
-          </div>
-
-          <button class="fa-link" style="width:100%; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:12px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Anmelden</button>
-
-          <!-- secondary link row -->
-          <div style="display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; padding-top:18px; border-top:1px solid var(--c-line-2)">
-            <a href="Anmeldung.dc.html" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none">Passwort vergessen?</a>
-            <a href="Anmeldung.dc.html" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">Konto erstellen</a>
-          </div>
-
-        </div>
-      </sc-if>
-
-      <!-- ───────────────────────────────────────── REGISTRIEREN ── -->
-      <sc-if value="{{ isRegister }}" hint-placeholder-val="{{ false }}">
-        <div>
-          <!-- hero: Montserrat eyebrow + Tinos ~38px title -->
-          <div style="text-align:center; margin-bottom:28px">
-            <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:10px">Einladung angenommen</div>
-            <h1 style="font-family:var(--font-serif); font-weight:700; font-size:38px; line-height:1.15; color:var(--c-ink); margin:0">Konto erstellen</h1>
-            <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:12px auto 0; max-width:440px">Legen Sie Ihren Zugang an, um Briefe zu lesen, zu transkribieren und mitzuschreiben.</p>
-          </div>
-
-          <div style="width:100%; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:36px 36px">
-
-            <!-- Section: Über dich -->
-            <section style="margin-bottom:30px">
-              <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Über Sie</h2>
-              <div style="display:grid; grid-template-columns:1fr 1fr; gap:18px">
-                <label style="display:block">
-                  <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Vorname</span>
-                  <input type="text" autocomplete="given-name" placeholder="z.B. Marie" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
-                </label>
-                <label style="display:block">
-                  <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Nachname</span>
-                  <input type="text" autocomplete="family-name" placeholder="z.B. Cram" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
-                </label>
-              </div>
-            </section>
-
-            <!-- Section: Konto -->
-            <section style="margin-bottom:30px">
-              <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Konto</h2>
-
-              <label style="display:block; margin-bottom:18px">
-                <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">E-Mail</span>
-                <input type="email" autocomplete="email" placeholder="marie@familie.de" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
-              </label>
-
-              <!-- Passwort with show/hide affordance -->
-              <label style="display:block; margin-bottom:8px">
-                <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Passwort</span>
-                <div style="position:relative">
-                  <input type="password" autocomplete="new-password" placeholder="Mindestens 8 Zeichen" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 64px 12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
-                  <button type="button" title="Passwort anzeigen" class="fa-link" style="position:absolute; right:6px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; min-height:36px; padding:0 12px; background:transparent; border:none; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); cursor:pointer">Zeigen</button>
-                </div>
-              </label>
-              <p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:0 0 18px">Mindestens 8 Zeichen.</p>
-
-              <!-- Passwort bestätigen with show/hide affordance -->
-              <label style="display:block">
-                <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Passwort bestätigen</span>
-                <div style="position:relative">
-                  <input type="password" autocomplete="new-password" placeholder="Passwort wiederholen" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 64px 12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
-                  <button type="button" title="Passwort anzeigen" class="fa-link" style="position:absolute; right:6px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; min-height:36px; padding:0 12px; background:transparent; border:none; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); cursor:pointer">Zeigen</button>
-                </div>
-              </label>
-            </section>
-
-            <!-- Section: Benachrichtigungen — checkbox card -->
-            <section style="margin-bottom:28px">
-              <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 14px">Benachrichtigungen</h2>
-              <label style="display:flex; align-items:flex-start; gap:14px; cursor:pointer; border:1px solid var(--c-primary); background:var(--c-accent-bg); border-radius:2px; padding:16px">
-                <span style="margin-top:1px; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex-shrink:0; border:1px solid var(--c-primary); background:var(--c-primary); border-radius:2px">
-                  <img class="dgicon" src="assets/icons/Check-MD.svg" style="width:13px; height:13px; filter:brightness(0) invert(1)">
-                </span>
-                <span style="min-width:0">
-                  <span style="display:block; font-family:var(--font-sans); font-size:14px; font-weight:700; color:var(--c-ink)">Bei Erwähnungen benachrichtigen</span>
-                  <span style="display:block; font-family:var(--font-serif); font-size:15px; line-height:1.5; color:var(--c-ink-2); margin-top:3px">Erhalten Sie eine E-Mail, wenn jemand Sie in einem Kommentar oder einer Transkription erwähnt.</span>
-                </span>
-                <input type="checkbox" checked style="position:absolute; opacity:0; width:0; height:0">
-              </label>
-            </section>
-
-            <button class="fa-link" style="width:100%; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:12px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Registrieren</button>
-
-            <p style="text-align:center; font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3); margin:18px 0 0">
-              Schon ein Konto?
-              <a href="Anmeldung.dc.html" class="fa-link" style="font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">Anmelden</a>
-            </p>
-
-          </div>
-        </div>
-      </sc-if>
-
-      <!-- ───────────────────────────────── PASSWORT VERGESSEN ── -->
-      <sc-if value="{{ isForgot }}" hint-placeholder-val="{{ false }}">
-        <div style="width:100%; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:36px 32px">
-
-          <h1 style="font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--c-ink); margin:0 0 8px">Passwort zurücksetzen</h1>
-          <p style="font-family:var(--font-serif); font-size:15px; line-height:1.6; color:var(--c-ink-2); margin:0 0 24px">Geben Sie Ihre E-Mail-Adresse ein. Wir senden Ihnen einen Link, mit dem Sie ein neues Passwort vergeben können.</p>
-
-          <!-- success banner example (token-driven, accent-bg tint) -->
-          <div role="status" style="display:flex; align-items:flex-start; gap:10px; margin-bottom:22px; border:1px solid var(--c-line); border-left:3px solid var(--c-accent); background:var(--c-accent-bg); border-radius:2px; padding:12px 14px">
-            <img class="dgicon" src="assets/icons/Check-MD.svg" style="width:15px; height:15px; opacity:.5; margin-top:1px; flex-shrink:0">
-            <span style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-2)">Falls ein Konto zu dieser Adresse besteht, ist der Link unterwegs. Prüfen Sie Ihr Postfach.</span>
-          </div>
-
-          <label style="display:block; margin-bottom:24px">
-            <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">E-Mail</span>
-            <input type="email" autocomplete="email" placeholder="vorname@familie.de" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
-          </label>
-
-          <button class="fa-link" style="width:100%; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:12px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Link senden</button>
-
-          <div style="text-align:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--c-line-2)">
-            <a href="Anmeldung.dc.html" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none">Zurück zur Anmeldung</a>
-          </div>
-
-        </div>
-      </sc-if>
-
-      <!-- ────────────────────────────── PASSWORT ZURÜCKSETZEN ── -->
-      <sc-if value="{{ isReset }}" hint-placeholder-val="{{ false }}">
-        <div style="width:100%; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:36px 32px">
-
-          <h1 style="font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--c-ink); margin:0 0 8px">Neues Passwort</h1>
-          <p style="font-family:var(--font-serif); font-size:15px; line-height:1.6; color:var(--c-ink-2); margin:0 0 24px">Vergeben Sie ein neues Passwort für Ihr Konto. Danach werden Sie zur Anmeldung weitergeleitet.</p>
-
-          <label style="display:block; margin-bottom:18px">
-            <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Neues Passwort</span>
-            <input type="password" autocomplete="new-password" placeholder="Mindestens 8 Zeichen" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
-          </label>
-
-          <label style="display:block; margin-bottom:24px">
-            <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Passwort bestätigen</span>
-            <input type="password" autocomplete="new-password" placeholder="Passwort wiederholen" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
-          </label>
-
-          <button class="fa-link" style="width:100%; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:12px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Passwort speichern</button>
-
-          <div style="text-align:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--c-line-2)">
-            <a href="Anmeldung.dc.html" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none">Zurück zur Anmeldung</a>
-          </div>
-
-        </div>
-      </sc-if>
-
-    </div>
-  </div>
-
-  <!-- quiet footer wordmark -->
-  <div style="padding:24px 16px; text-align:center">
-    <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--c-ink-3)">Familienarchiv</span>
-  </div>
-
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1180,&quot;height&quot;:1100},&quot;variant&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;login&quot;,&quot;registrieren&quot;,&quot;passwort-vergessen&quot;,&quot;passwort-zuruecksetzen&quot;],&quot;default&quot;:&quot;login&quot;,&quot;tsType&quot;:&quot;string&quot;}}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name,
-      a26:{ ...base, width:26, height:26, fontSize:10 },
-      a28:{ ...base, width:28, height:28, fontSize:11 },
-      a40:{ ...base, width:40, height:40, fontSize:14 },
-      a48:{ ...base, width:48, height:48, fontSize:16 } };
-  }
-  renderVals(){
-    const variant = this.props.variant || 'login';
-    const isLogin    = variant === 'login';
-    const isRegister = variant === 'registrieren';
-    const isForgot   = variant === 'passwort-vergessen';
-    const isReset    = variant === 'passwort-zuruecksetzen';
-
-    return {
-      isLogin, isRegister, isForgot, isReset,
-      cardMaxWidth: isRegister ? '640px' : '400px',
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Anreicherung.dc.html

@@ -1,282 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="dokumente" hint-size="100%,68px"></dc-import>
-
-  <!-- ════════════ VARIANT: LISTE (start screen) ════════════ -->
-  <sc-if value="{{ isListe }}" hint-placeholder-val="{{ true }}">
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-
-    <!-- PageHeader (§3) -->
-    <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-      <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Aufgabe</div>
-        <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Anreicherung</h1>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Ergänzen Sie fehlende Angaben Stück für Stück — wir führen Sie durch jeden Brief.</p>
-      </div>
-      <div style="display:flex; flex-direction:column; align-items:flex-end; gap:10px">
-        <button class="fa-link" style="display:inline-flex; align-items:center; gap:8px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px"><img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:15px; height:15px; opacity:.7; filter:invert(1)">Starten</button>
-        <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ count }} Dokumente offen</span>
-      </div>
-    </div>
-
-    <!-- Card: documents needing metadata (§4 — 3px mint top border) -->
-    <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-      <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 8px">Benötigt Metadaten</h2>
-
-      <sc-for list="{{ docs }}" as="d" hint-placeholder-count="6">
-        <div style="display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--c-line-2); padding:13px 0; min-height:44px">
-          <label style="display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; cursor:pointer; flex-shrink:0">
-            <input type="checkbox" style="width:18px; height:18px; accent-color:var(--c-primary); cursor:pointer">
-          </label>
-          <a href="Anreicherung.dc.html" class="fa-link" style="flex:1; min-width:0; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">{{ d.title }}</a>
-          <span style="display:inline-flex; align-items:center; gap:7px; width:128px; flex-shrink:0">
-            <span style="width:7px; height:7px; border-radius:999px; flex-shrink:0; background:{{ d.dotColor }}"></span>
-            <span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">{{ d.status }}</span>
-          </span>
-          <div style="display:flex; align-items:center; gap:8px; width:160px; flex-shrink:0; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">
-            <img class="dgicon" src="assets/icons/Calendar-Add-MD.svg" style="width:14px; height:14px; opacity:.5">
-            <span>{{ d.date }}</span>
-          </div>
-        </div>
-      </sc-for>
-
-      <p style="margin:16px 0 0; font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">{{ count }} Dokumente warten auf Pflichtangaben.</p>
-    </div>
-
-    <!-- Empty state (§10) — shown when nothing left to enrich -->
-    <sc-if value="{{ isEmpty }}" hint-placeholder-val="{{ false }}">
-      <div style="margin-top:18px; border:1px dashed var(--c-line); border-radius:2px; padding:48px 24px; text-align:center">
-        <div style="font-family:var(--font-serif); font-size:20px; color:var(--c-ink); margin-bottom:8px">Alles angereichert — nichts zu tun.</div>
-        <div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Jeder Brief trägt Titel, Datum und Absender…</div>
-      </div>
-    </sc-if>
-  </main>
-  </sc-if>
-
-  <!-- ════════════ VARIANT: SCHRITT (guided editor) ════════════ -->
-  <sc-if value="{{ isSchritt }}" hint-placeholder-val="{{ false }}">
-  <div style="display:flex; flex-direction:column">
-
-    <!-- compact workflow top bar -->
-    <div style="display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--c-line); background:var(--c-surface); padding:12px 24px">
-      <a href="Anreicherung.dc.html" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; border:1px solid var(--c-line); background:var(--c-surface); padding:9px 14px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none; border-radius:2px">← Zurück</a>
-      <p style="flex:1; min-width:0; text-align:center; font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--c-ink); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">{{ doc.title }}</p>
-      <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); flex-shrink:0">Schritt {{ doc.step }} von {{ doc.total }}</span>
-    </div>
-
-    <!-- EnrichProgress block -->
-    <div style="display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--c-line); background:var(--c-surface); padding:10px 24px">
-      <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); white-space:nowrap">Pflichtfelder {{ doc.filled }} / {{ doc.required }}</span>
-      <div style="flex:1; height:4px; border-radius:999px; background:var(--c-line); overflow:hidden">
-        <div style="height:100%; border-radius:999px; background:var(--c-primary); width:{{ doc.progressPct }}"></div>
-      </div>
-    </div>
-
-    <!-- split pane -->
-    <div style="display:grid; grid-template-columns:6fr 4fr; align-items:stretch; min-height:calc(100vh - 68px - 110px)">
-
-      <!-- LEFT: PDF preview -->
-      <div style="border-right:1px solid var(--c-line); background:var(--c-pdf-bg); display:flex; flex-direction:column">
-        <div style="display:flex; align-items:center; border-bottom:1px solid var(--c-line); background:var(--c-surface); padding:8px 16px">
-          <label class="fa-link" style="margin-left:auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); cursor:pointer"><img class="dgicon" src="assets/icons/Refresh-MD.svg" style="width:14px; height:14px; opacity:.5">Datei ersetzen</label>
-        </div>
-        <div style="flex:1; display:flex; align-items:flex-start; justify-content:center; padding:28px 16px; overflow:auto">
-          <div style="width:100%; max-width:520px; aspect-ratio:1 / 1.414; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-md); border-radius:2px; padding:40px 38px; display:flex; flex-direction:column; gap:14px">
-            <div style="font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--c-ink-3); text-align:right">Wien, im August 1924</div>
-            <div style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink-2)">Meine liebe Clara,</div>
-            <div style="font-family:var(--font-serif); font-size:15px; line-height:1.8; color:var(--c-ink-3)">die Reise verlief gut, doch der Zug nach Mariahilf hatte Verspätung. Onkel Walter lässt herzlich grüßen und fragt nach den Kindern.</div>
-            <div style="font-family:var(--font-serif); font-size:15px; line-height:1.8; color:var(--c-ink-3)">Die Tage hier sind warm; ich denke oft an unseren Garten und an Euch alle daheim.</div>
-            <div style="margin-top:auto; font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--c-ink-3); text-align:right">In Liebe, Herbert</div>
-            <div style="display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">Seite 1 von 1</div>
-          </div>
-        </div>
-      </div>
-
-      <!-- RIGHT: metadata form -->
-      <div style="display:flex; flex-direction:column; background:var(--c-canvas)">
-        <div style="flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:18px">
-
-          <!-- Wer & Wann card -->
-          <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-            <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Wer &amp; Wann</h2>
-
-            <label style="display:block; margin-bottom:18px">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Datum *</span>
-              <input value="02.08.1924" placeholder="TT.MM.JJJJ" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-              <div style="display:flex; align-items:center; gap:8px; margin-top:7px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">
-                <span>Genauigkeit:</span><span style="color:var(--c-ink-2)">Tag</span><span>·</span><span>Monat</span><span>·</span><span>Jahr</span>
-              </div>
-            </label>
-
-            <label style="display:block; margin-bottom:18px">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Absender *</span>
-              <div style="position:relative">
-                <input value="Herbert Cram" placeholder="Person suchen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-                <img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-              </div>
-            </label>
-
-            <label style="display:block; margin-bottom:18px">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Empfänger</span>
-              <div style="position:relative">
-                <input value="Clara Cram" placeholder="Personen hinzufügen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-                <img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-              </div>
-            </label>
-
-            <label style="display:block">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Ort</span>
-              <div style="position:relative">
-                <input value="" placeholder="z.B. Wien" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-                <img class="dgicon" src="assets/icons/Location-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-              </div>
-            </label>
-          </div>
-
-          <!-- Beschreibung card -->
-          <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-            <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Beschreibung</h2>
-
-            <label style="display:block; margin-bottom:18px">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Titel *</span>
-              <input value="Postkarte aus Wien" placeholder="z.B. Brief an Clara" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-            </label>
-
-            <div style="display:flex; align-items:center; gap:10px; margin:0 0 18px">
-              <div style="flex:1; height:1px; background:var(--c-line)"></div>
-              <span style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3)">Optional</span>
-              <div style="flex:1; height:1px; background:var(--c-line)"></div>
-            </div>
-
-            <label style="display:block; margin-bottom:18px">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Schlagworte</span>
-              <input value="Feldpost, Reise, Familie" placeholder="Schlagworte hinzufügen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-            </label>
-
-            <label style="display:block; margin-bottom:18px">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Inhalt</span>
-              <textarea rows="4" placeholder="Kurze Zusammenfassung des Inhalts…" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; line-height:1.6; color:var(--c-ink); outline:none; border-radius:2px"></textarea>
-            </label>
-
-            <div style="display:grid; grid-template-columns:1fr 1fr; gap:18px">
-              <label style="display:block">
-                <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Karton</span>
-                <input value="Mappe B" placeholder="z.B. Mappe B" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-              </label>
-              <label style="display:block">
-                <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Mappe</span>
-                <input value="" placeholder="z.B. Heft III" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-              </label>
-            </div>
-          </div>
-        </div>
-
-        <!-- action bar -->
-        <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--c-line); background:var(--c-surface); padding:14px 20px">
-          <a href="#" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none">Überspringen</a>
-          <div style="display:flex; align-items:center; gap:12px">
-            <button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
-            <button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern &amp; geprüft</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  </sc-if>
-
-  <!-- ════════════ VARIANT: FERTIG (done) ════════════ -->
-  <sc-if value="{{ isFertig }}" hint-placeholder-val="{{ false }}">
-  <main style="max-width:1180px; margin:0 auto; padding:80px 32px; display:flex; justify-content:center">
-    <div style="width:100%; max-width:520px; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:48px 40px; text-align:center">
-      <div style="width:56px; height:56px; margin:0 auto 22px; border-radius:999px; background:var(--c-accent-bg); display:flex; align-items:center; justify-content:center">
-        <img class="dgicon" src="assets/icons/Check-MD.svg" style="width:28px; height:28px; opacity:.7">
-      </div>
-      <h1 style="font-family:var(--font-serif); font-weight:700; font-size:32px; line-height:1.15; color:var(--c-ink); margin:0">Geschafft!</h1>
-      <p style="font-family:var(--font-serif); font-size:17px; line-height:1.6; color:var(--c-ink-2); margin:14px 0 0">Alle Briefe dieser Sitzung sind angereichert. Vielen Dank — Ihre Sorgfalt hält das Archiv beieinander.</p>
-      <div style="display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:30px">
-        <a href="Dokumente.dc.html" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:13px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; text-decoration:none; border-radius:2px">Zur Übersicht</a>
-        <a href="Anreicherung.dc.html" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:13px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; text-decoration:none; border-radius:2px">Zur Liste</a>
-      </div>
-    </div>
-  </main>
-  </sc-if>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1180,&quot;height&quot;:1100},&quot;variant&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;liste&quot;,&quot;schritt&quot;,&quot;fertig&quot;],&quot;default&quot;:&quot;schritt&quot;,&quot;tsType&quot;:&quot;string&quot;}}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name,
-      a26:{ ...base, width:26, height:26, fontSize:10 },
-      a28:{ ...base, width:28, height:28, fontSize:11 },
-      a40:{ ...base, width:40, height:40, fontSize:14 },
-      a48:{ ...base, width:48, height:48, fontSize:16 } };
-  }
-
-  listDocs(){
-    const sc = { 'Neu':'#607080', 'In Arbeit':'#c17a00', 'Entwurf':'#607080' };
-    const raw = [
-      { title:'Postkarte aus Wien', status:'In Arbeit', date:'2. August 1924' },
-      { title:'Brief ohne Titel (Mappe B)', status:'Neu', date:'1924' },
-      { title:'Umschlag — Absender unbekannt', status:'Neu', date:'November 1925' },
-      { title:'Geschäftsbrief betr. Grundstück Mariahilf', status:'In Arbeit', date:'19. November 1925' },
-      { title:'Glückwunsch zum 60. Geburtstag', status:'Entwurf', date:'22. Mai 1928' },
-      { title:'Feldpostkarte, Datum unleserlich', status:'Neu', date:'ohne Datum' },
-    ];
-    return raw.map(d => ({ ...d, dotColor: sc[d.status] || '#607080' }));
-  }
-
-  renderVals(){
-    const variant = this.props.variant || 'schritt';
-    const docs = this.listDocs();
-
-    return {
-      isListe: variant === 'liste',
-      isSchritt: variant === 'schritt',
-      isFertig: variant === 'fertig',
-
-      // liste
-      docs,
-      count: docs.length,
-      isEmpty: false,
-
-      // schritt
-      doc: {
-        title: 'Postkarte aus Wien',
-        step: 3,
-        total: 12,
-        filled: 2,
-        required: 3,
-        progressPct: '66.7%',
-      },
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/ArchiveHeader.dc.html

@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-</helmet>
-<header style="background:var(--c-header); position:sticky; top:0; z-index:50">
-  <div style="height:4px; background:#a1dcd8"></div>
-  <div style="max-width:1180px; margin:0 auto; padding:0 32px; height:64px; display:flex; align-items:center; color:#fff">
-    <a href="Dokumente.dc.html" style="font-family:var(--font-sans); font-size:18px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-right:28px; white-space:nowrap; color:#fff; text-decoration:none">Familienarchiv</a>
-    <nav style="display:flex; gap:2px">
-      <a class="fa-link" href="Dokumente.dc.html" style="{{ nDok }}">Dokumente</a>
-      <a class="fa-link" href="Personen.dc.html" style="{{ nPers }}">Personen</a>
-      <a class="fa-link" href="Geschichten.dc.html" style="{{ nGesch }}">Geschichten</a>
-      <a class="fa-link" href="Zeitstrahl.dc.html" style="{{ nZeit }}">Zeitstrahl</a>
-      <a class="fa-link" href="Aktivitaeten.dc.html" style="{{ nAkt }}">Aktivitäten</a>
-      <a class="fa-link" href="Stammbaum.dc.html" style="{{ nStamm }}">Stammbaum</a>
-      <a class="fa-link" href="Themen.dc.html" style="{{ nThemen }}">Themen</a>
-      <a class="fa-link" href="Regeln.dc.html" style="{{ nReg }}">Regeln</a>
-    </nav>
-    <div style="margin-left:auto; display:flex; gap:16px; align-items:center">
-      <div style="display:flex; border:1px solid rgba(255,255,255,.25)">
-        <button class="fa-link" onClick="{{ setLight }}" style="{{ thLight }}">Hell</button>
-        <button class="fa-link" onClick="{{ setDark }}" style="{{ thDark }}">Dunkel</button>
-      </div>
-      <div style="width:32px; height:32px; border-radius:999px; background:#fff; color:#012851; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:11px; font-weight:700">MR</div>
-    </div>
-  </div>
-</header>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1180,&quot;height&quot;:68},&quot;active&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;dokumente&quot;,&quot;personen&quot;,&quot;geschichten&quot;,&quot;zeitstrahl&quot;,&quot;aktivitaeten&quot;,&quot;stammbaum&quot;,&quot;themen&quot;,&quot;regeln&quot;],&quot;default&quot;:&quot;dokumente&quot;,&quot;tsType&quot;:&quot;string&quot;}}">
-class Component extends DCLogic {
-  state = { theme: null };
-  stored(){ try { return localStorage.getItem('fa-theme'); } catch(e){ return null; } }
-  get theme(){ return this.state.theme ?? this.stored() ?? 'light'; }
-  apply(){ try { document.documentElement.dataset.theme = this.theme === 'dark' ? 'dark' : ''; } catch(e){} }
-  componentDidMount(){ this.apply(); }
-  componentDidUpdate(){ this.apply(); }
-  set(t){ try { localStorage.setItem('fa-theme', t); } catch(e){} this.setState({ theme: t }); }
-
-  renderVals(){
-    const active = this.props.active || 'dokumente';
-    const theme = this.theme;
-    const navBase = { color:'rgba(255,255,255,.6)', padding:'0 9px', fontFamily:'var(--font-sans)', fontSize:11, fontWeight:700, letterSpacing:'.07em', textTransform:'uppercase', textDecoration:'none', lineHeight:'44px', borderBottom:'2px solid transparent', marginTop:'10px', whiteSpace:'nowrap' };
-    const navOn = { ...navBase, color:'#fff', borderBottom:'2px solid #a1dcd8' };
-    const nav = (k) => active===k ? navOn : navBase;
-    const thBase = { fontFamily:'var(--font-sans)', fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', padding:'5px 11px', cursor:'pointer', border:'none', background:'transparent', color:'rgba(255,255,255,.6)' };
-    const thOn = { ...thBase, background:'#a1dcd8', color:'#012851' };
-    return {
-      nDok:nav('dokumente'), nPers:nav('personen'), nGesch:nav('geschichten'), nZeit:nav('zeitstrahl'), nAkt:nav('aktivitaeten'), nStamm:nav('stammbaum'), nThemen:nav('themen'), nReg:nav('regeln'),
-      thLight: theme==='dark' ? thBase : thOn, thDark: theme==='dark' ? thOn : thBase,
-      setLight: () => this.set('light'), setDark: () => this.set('dark'),
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Dokument-Bearbeiten.dc.html

@@ -1,274 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="dokumente" hint-size="100%,68px"></dc-import>
-
-  <!-- ===== Compact top bar (immersive workbench — replaces full PageHeader) ===== -->
-  <div style="border-bottom:1px solid var(--c-line); background:var(--c-surface)">
-    <div style="max-width:1180px; margin:0 auto; padding:0 32px; height:54px; display:flex; align-items:center; gap:18px">
-      <!-- BackButton-style chip -->
-      <a href="{{ backHref }}" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none">
-        <span style="font-size:15px; line-height:1">←</span>{{ backLabel }}
-      </a>
-      <span style="width:1px; height:22px; background:var(--c-line)"></span>
-      <!-- Truncated Tinos title -->
-      <span style="flex:1; min-width:0; font-family:var(--font-serif); font-size:18px; font-weight:700; color:var(--c-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap">{{ workbenchTitle }}</span>
-    </div>
-    <!-- Required-fields progress strip -->
-    <div style="max-width:1180px; margin:0 auto; padding:0 32px 12px; display:flex; align-items:center; gap:14px">
-      <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); white-space:nowrap">Erforderliche Felder {{ reqFilled }} / {{ reqTotal }}</span>
-      <div style="flex:1; height:3px; border-radius:999px; background:var(--c-line); overflow:hidden">
-        <div style="height:100%; border-radius:999px; background:var(--c-primary); width:{{ reqPct }}%"></div>
-      </div>
-    </div>
-  </div>
-
-  <!-- ===== Split pane ===== -->
-  <div style="max-width:1180px; margin:0 auto; padding:0 32px">
-    <div style="display:grid; grid-template-columns:46% 1fr; gap:0; border:1px solid var(--c-line); border-top:none">
-
-      <!-- LEFT: PDF preview OR empty dropzone (variant=neu) -->
-      <div style="background:var(--c-pdf-bg); border-right:1px solid var(--c-line); display:flex; flex-direction:column; min-height:680px">
-
-        <!-- variant: bearbeiten | sammel — PDF preview with "Datei ersetzen" -->
-        <sc-if value="{{ showPreview }}" hint-placeholder-val="{{ true }}">
-          <div style="display:flex; flex-direction:column; height:100%">
-            <!-- Toolbar -->
-            <div style="display:flex; align-items:center; border-bottom:1px solid var(--c-line); background:var(--c-pdf-ctrl); padding:8px 14px">
-              <span style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-pdf-text); opacity:.7">{{ pdfFilename }}</span>
-              <label class="fa-link" style="margin-left:auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); padding:9px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px">
-                <img class="dgicon" src="assets/icons/Refresh-MD.svg" style="width:14px; height:14px; opacity:.5">Datei ersetzen
-              </label>
-            </div>
-            <!-- Page surface -->
-            <div style="flex:1; display:flex; align-items:flex-start; justify-content:center; padding:28px; overflow:hidden">
-              <div style="width:340px; max-width:100%; aspect-ratio:1 / 1.41; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-md); padding:34px 30px; display:flex; flex-direction:column; gap:11px">
-                <div style="font-family:var(--font-serif); font-size:13px; font-style:italic; color:var(--c-pdf-text); opacity:.85">Im Felde, den 12. März 1916</div>
-                <div style="font-family:var(--font-serif); font-size:14px; color:var(--c-pdf-text); line-height:1.7; opacity:.9">Meine innig geliebte Clara, nun sind es bald zwei Jahre, dass ich Dich nicht mehr in den Armen halten durfte …</div>
-                <div style="height:1px; background:var(--c-line); margin:4px 0"></div>
-                <div style="font-family:var(--font-serif); font-size:13px; color:var(--c-pdf-text); line-height:1.7; opacity:.55">… (Kurrentschrift, Seite 1 von 4) …</div>
-                <div style="font-family:var(--font-serif); font-size:13px; color:var(--c-pdf-text); line-height:1.7; opacity:.55">Dein Dich ewig liebender Herbert</div>
-              </div>
-            </div>
-          </div>
-        </sc-if>
-
-        <!-- variant: neu — empty dashed dropzone -->
-        <sc-if value="{{ showDropzone }}" hint-placeholder-val="{{ false }}">
-          <div style="flex:1; display:flex; align-items:center; justify-content:center; padding:32px">
-            <label class="fa-link" style="display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; max-width:420px; min-height:300px; border:2px dashed var(--c-accent); border-radius:2px; background:var(--c-accent-bg); padding:40px 28px; text-align:center; cursor:pointer">
-              <img class="dgicon" src="assets/icons/Upload-MD.svg" style="width:34px; height:34px; opacity:.5">
-              <span style="font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--c-ink-2)">Dateien hier ablegen oder klicken</span>
-              <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">PDF, JPG, PNG, TIFF bis 50 MB</span>
-            </label>
-          </div>
-        </sc-if>
-      </div>
-
-      <!-- RIGHT: scrollable form column -->
-      <div style="background:var(--c-surface); display:flex; flex-direction:column; min-height:680px">
-        <div style="flex:1; padding:24px; display:flex; flex-direction:column; gap:18px">
-
-          <!-- variant: sammel — shared-metadata note -->
-          <sc-if value="{{ isBulk }}" hint-placeholder-val="{{ false }}">
-            <div style="background:var(--c-accent-bg); border:1px solid var(--c-line); border-left:3px solid var(--c-accent); padding:14px 16px; border-radius:2px">
-              <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); margin-bottom:4px">Geteilte Metadaten</div>
-              <p style="margin:0; font-family:var(--font-serif); font-size:15px; font-style:italic; color:var(--c-ink-2)">Felder werden ergänzt, nicht ersetzt.</p>
-            </div>
-          </sc-if>
-
-          <!-- CARD: Wer & Wann -->
-          <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-            <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 18px">Wer &amp; Wann</h2>
-
-            <!-- Absender (typeahead, required) -->
-            <label style="display:block; margin-bottom:16px">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Absender *</span>
-              <div style="position:relative">
-                <input value="{{ f.sender }}" placeholder="Person suchen … z.B. Herbert Cram" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-                <img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-              </div>
-            </label>
-
-            <!-- Empfänger -->
-            <div style="margin-bottom:16px">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Empfänger {{ additiveSuffix }}</span>
-              <div style="display:flex; flex-wrap:wrap; align-items:center; gap:8px; border:1px solid var(--c-line); background:var(--c-surface); padding:8px 10px; border-radius:2px; min-height:44px">
-                <sc-for list="{{ f.receivers }}" as="r" hint-placeholder-count="2">
-                  <span style="display:inline-flex; align-items:center; gap:7px; background:var(--c-muted); border:1px solid var(--c-line); padding:4px 10px 4px 5px; border-radius:2px">
-                    <span style="{{ r.a26 }}">{{ r.initials }}</span>
-                    <span style="font-family:var(--font-serif); font-size:14px; color:var(--c-ink)">{{ r.name }}</span>
-                  </span>
-                </sc-for>
-                <input placeholder="{{ receiverPlaceholder }}" style="flex:1; min-width:120px; border:none; background:transparent; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none">
-              </div>
-            </div>
-
-            <!-- Datum + Präzision -->
-            <div style="display:grid; grid-template-columns:1fr 150px; gap:12px; margin-bottom:16px">
-              <label style="display:block">
-                <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Datum *</span>
-                <input value="{{ f.date }}" placeholder="TT.MM.JJJJ" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-              </label>
-              <label style="display:block">
-                <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Genauigkeit</span>
-                <select style="width:100%; appearance:none; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px; cursor:pointer; min-height:44px">
-                  <option selected>Tag</option><option>Monat</option><option>Jahr</option><option>Unbekannt</option>
-                </select>
-              </label>
-            </div>
-
-            <!-- Ort -->
-            <label style="display:block">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Ort</span>
-              <div style="position:relative">
-                <input value="{{ f.location }}" placeholder="z.B. Im Felde, Galizien" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-                <img class="dgicon" src="assets/icons/Location-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-              </div>
-            </label>
-          </div>
-
-          <!-- CARD: Beschreibung -->
-          <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-            <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 18px">Beschreibung</h2>
-
-            <!-- Titel -->
-            <label style="display:block; margin-bottom:16px">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Titel *</span>
-              <input value="{{ f.title }}" placeholder="z.B. Feldpostbrief an Clara" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-            </label>
-
-            <!-- Notiz / Inhalt -->
-            <label style="display:block; margin-bottom:16px">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Notiz</span>
-              <textarea rows="4" placeholder="Kurze Beschreibung oder erste Notizen zum Inhalt …" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px; resize:vertical">{{ f.note }}</textarea>
-            </label>
-
-            <!-- Tags / Schlagworte -->
-            <div>
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Schlagworte {{ additiveSuffix }}</span>
-              <div style="display:flex; flex-wrap:wrap; align-items:center; gap:8px; border:1px solid var(--c-line); background:var(--c-surface); padding:8px 10px; border-radius:2px; min-height:44px">
-                <sc-for list="{{ f.tags }}" as="t" hint-placeholder-count="3">
-                  <span style="display:inline-flex; align-items:center; gap:6px; background:var(--c-muted); border:1px solid var(--c-line); padding:4px 10px; border-radius:4px">
-                    <span style="width:8px; height:8px; border-radius:999px; background:{{ t.dot }}"></span>
-                    <span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--c-ink-2)">{{ t.label }}</span>
-                  </span>
-                </sc-for>
-                <input placeholder="Schlagwort hinzufügen …" style="flex:1; min-width:120px; border:none; background:transparent; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none">
-              </div>
-            </div>
-          </div>
-
-        </div>
-
-        <!-- Sticky action bar -->
-        <div style="position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--c-line); background:var(--c-surface); padding:14px 24px">
-          <sc-if value="{{ isEdit }}" hint-placeholder-val="{{ true }}">
-            <a href="#" class="fa-link" title="Dokument löschen" style="display:inline-flex; align-items:center; gap:8px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Löschen</a>
-          </sc-if>
-          <div style="display:flex; align-items:center; gap:12px; margin-left:auto">
-            <a href="{{ backHref }}" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 18px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px; text-decoration:none">Abbrechen</a>
-            <button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 18px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Zur Überprüfung</button>
-            <button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 22px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div style="height:48px"></div>
-  </div>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1180,&quot;height&quot;:840},&quot;variant&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;bearbeiten&quot;,&quot;neu&quot;,&quot;sammel&quot;],&quot;default&quot;:&quot;bearbeiten&quot;,&quot;tsType&quot;:&quot;string&quot;}}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name,
-      a26:{ ...base, width:26, height:26, fontSize:10 },
-      a28:{ ...base, width:28, height:28, fontSize:11 },
-      a40:{ ...base, width:40, height:40, fontSize:14 },
-      a48:{ ...base, width:48, height:48, fontSize:16 } };
-  }
-  rcv(name){ const a = this.av(name); return { name, initials:a.initials, a26:a.a26 }; }
-
-  renderVals(){
-    const variant = this.props.variant || 'bearbeiten';
-    const isEdit = variant === 'bearbeiten';
-    const isNew = variant === 'neu';
-    const isBulk = variant === 'sammel';
-
-    const tagPal = {
-      sage:'#5a8a6a', sienna:'#a0522d', amber:'#c17a00', slate:'#607080',
-      violet:'#7a4f9a', cobalt:'#3060b0',
-    };
-
-    const editing = {
-      sender:'Herbert Cram',
-      receivers:[ this.rcv('Clara Cram') ],
-      date:'12.03.1916',
-      location:'Im Felde, Galizien',
-      title:'Feldpostbrief an Clara — „nun sind es bald zwei Jahre“',
-      note:'Vierseitiger Feldpostbrief in Kurrentschrift. Herbert schreibt aus dem Stellungskrieg an seine Frau Clara. Teil des Konvoluts 1914–1918.',
-      tags:[
-        { label:'Feldpost', dot:tagPal.sienna },
-        { label:'1. Weltkrieg', dot:tagPal.slate },
-        { label:'Galizien', dot:tagPal.sage },
-      ],
-    };
-    const blank = {
-      sender:'', receivers:[], date:'', location:'', title:'', note:'', tags:[],
-    };
-    const bulk = {
-      sender:'', receivers:[], date:'', location:'', title:'', note:'',
-      tags:[ { label:'Feldpost', dot:tagPal.sienna } ],
-    };
-    const f = isEdit ? editing : (isBulk ? bulk : blank);
-
-    // Required progress: bearbeiten=alle 3, neu=0, sammel=2 (Absender+Datum geteilt, Titel pro Datei).
-    const reqFilled = isEdit ? 3 : (isBulk ? 2 : 0);
-    const reqTotal = 3;
-
-    return {
-      isEdit, isNew, isBulk,
-      showPreview: isEdit || isBulk,
-      showDropzone: isNew,
-      backHref: isEdit ? 'Dokumente.dc.html' : 'Dokumente-Liste.dc.html',
-      backLabel: 'Zurück',
-      workbenchTitle: isBulk
-        ? '3 Dokumente · Gemeinsame Metadaten'
-        : (isNew ? 'Neues Dokument' : 'Feldpostbrief an Clara — „nun sind es bald zwei Jahre“'),
-      pdfFilename: isBulk ? 'feldpost_1916_03_12.pdf' : 'cram_feldpost_1916.pdf',
-      reqFilled, reqTotal,
-      reqPct: Math.round((reqFilled / reqTotal) * 100),
-      additiveSuffix: isBulk ? '· wird ergänzt' : '',
-      receiverPlaceholder: f.receivers.length ? 'Weitere hinzufügen …' : 'Person suchen …',
-      f,
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Dokument-Detail.dc.html

@@ -1,244 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="dokumente" hint-size="100%,68px"></dc-import>
-
-  <!-- ── Compact top bar (immersive workbench — no big PageHeader) ── -->
-  <div style="position:relative; z-index:10; border-bottom:1px solid var(--c-line); background:var(--c-surface); box-shadow:var(--shadow-sm)">
-    <div style="display:flex; align-items:center; gap:0; padding-right:16px; min-height:76px">
-
-      <!-- Back chip -->
-      <a href="Dokumente.dc.html" class="fa-link" title="Zurück zur Übersicht" style="display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 14px 0 16px; margin-right:6px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">← Zurück</a>
-
-      <div style="width:1px; height:24px; background:var(--c-line); flex-shrink:0; margin-right:14px"></div>
-
-      <!-- Title block with 3px MINT left accent bar -->
-      <div style="border-left:3px solid var(--c-accent); padding-left:14px; min-width:0; flex:1">
-        <div style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:3px">{{ signatur }} · Feldpost</div>
-        <h1 style="font-family:var(--font-serif); font-weight:700; font-size:21px; line-height:1.2; color:var(--c-ink); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">{{ title }}</h1>
-      </div>
-
-      <!-- Overlapping sender/receiver avatar stack (a26) -->
-      <div style="display:flex; align-items:center; padding-left:12px; margin-right:14px; flex-shrink:0">
-        <sc-for list="{{ stack }}" as="p" hint-placeholder-count="2">
-          <span title="{{ p.name }}" style="{{ p.a26 }}">{{ p.initials }}</span>
-        </sc-for>
-      </div>
-
-      <!-- Status dot + UPPERCASE label (§9) -->
-      <span style="display:inline-flex; align-items:center; gap:7px; flex-shrink:0; margin-right:14px">
-        <span style="width:7px; height:7px; border-radius:999px; background:{{ statusColor }}"></span>
-        <span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">{{ status }}</span>
-      </span>
-
-      <div style="width:1px; height:24px; background:var(--c-line); flex-shrink:0; margin-right:14px"></div>
-
-      <!-- Details toggle (secondary, active state) -->
-      <button class="fa-link" aria-expanded="true" style="display:inline-flex; align-items:center; gap:7px; min-height:44px; background:var(--c-primary); color:var(--c-primary-fg); border:1px solid var(--c-primary); padding:0 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; border-radius:2px; flex-shrink:0">
-        Details
-        <span style="font-size:9px; line-height:1">▾</span>
-      </button>
-
-      <div style="width:1px; height:24px; background:var(--c-line); flex-shrink:0; margin:0 14px"></div>
-
-      <!-- Action buttons -->
-      <div style="display:flex; align-items:center; gap:8px; flex-shrink:0">
-        <button class="fa-link" style="display:inline-flex; align-items:center; gap:8px; min-height:44px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:0 18px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px"><img class="dgicon" src="assets/icons/Edit-Content-MD.svg" style="width:15px; height:15px; opacity:.9; filter:invert(1) brightness(2)">Transkribieren</button>
-        <button class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:0 16px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Bearbeiten</button>
-        <button class="fa-link" title="Weitere Aktionen" style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); cursor:pointer; border-radius:2px; flex-shrink:0"><img class="dgicon" src="assets/icons/View-More-MD.svg" style="width:18px; height:18px; opacity:.55"></button>
-      </div>
-    </div>
-
-    <!-- ── Slide-over "Details" metadata card (3px mint TOP border) ── -->
-    <div style="border-top:3px solid var(--c-accent); background:var(--c-surface); padding:26px 32px">
-      <div style="max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1.4fr 1fr 1fr; gap:30px; align-items:start">
-
-        <!-- Details column -->
-        <div>
-          <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:14px">Details</div>
-          <div style="display:flex; flex-direction:column; gap:14px">
-            <div>
-              <div style="display:flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-bottom:3px"><img class="dgicon" src="assets/icons/Calendar-Add-MD.svg" style="width:13px; height:13px; opacity:.5">Datum</div>
-              <div style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">31. Oktober 1915</div>
-            </div>
-            <div>
-              <div style="display:flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-bottom:3px"><img class="dgicon" src="assets/icons/Location-MD.svg" style="width:13px; height:13px; opacity:.5">Ort</div>
-              <div style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">Feldpost — Westfront</div>
-            </div>
-            <div>
-              <div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-bottom:5px">Status</div>
-              <span style="display:inline-flex; align-items:center; gap:7px">
-                <span style="width:7px; height:7px; border-radius:999px; background:{{ statusColor }}"></span>
-                <span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">{{ status }}</span>
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Personen column (avatar chips a40) -->
-        <div>
-          <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:14px">Personen</div>
-          <div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-bottom:6px">Absender</div>
-          <a href="#" class="fa-link" style="display:flex; align-items:center; gap:10px; padding:6px 8px; margin:0 -8px 10px; text-decoration:none; border-radius:2px">
-            <span style="{{ sender.a40 }}">{{ sender.initials }}</span>
-            <span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">{{ sender.name }}</span>
-          </a>
-          <div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-bottom:6px">Empfänger</div>
-          <a href="#" class="fa-link" style="display:flex; align-items:center; gap:10px; padding:6px 8px; margin:0 -8px; text-decoration:none; border-radius:2px">
-            <span style="{{ receiver.a40 }}">{{ receiver.initials }}</span>
-            <span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">{{ receiver.name }}</span>
-          </a>
-        </div>
-
-        <!-- Schlagwörter column (tag chips) -->
-        <div>
-          <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:14px">Schlagwörter</div>
-          <div style="display:flex; flex-wrap:wrap; gap:8px">
-            <sc-for list="{{ tags }}" as="t" hint-placeholder-count="4">
-              <a href="#" class="fa-link" style="display:inline-flex; align-items:center; gap:6px; background:var(--c-muted); border:1px solid var(--c-line); padding:5px 10px; border-radius:4px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--c-ink); text-decoration:none">
-                <span style="width:7px; height:7px; border-radius:999px; background:{{ t.dot }}"></span>{{ t.name }}
-              </a>
-            </sc-for>
-          </div>
-        </div>
-
-        <!-- Geschichten + comment/chat affordance -->
-        <div>
-          <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:14px">Geschichten</div>
-          <a href="Geschichte.dc.html" class="fa-link" style="display:block; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); text-decoration:none; margin-bottom:3px">Feldpost: Herbert an der Westfront 1914–1918</a>
-          <div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-bottom:18px">Marcel Raddatz · 11. Juni 2026</div>
-
-          <a href="#" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); padding:9px 14px; border-radius:2px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">
-            <img class="dgicon" src="assets/icons/Chat-MD.svg" style="width:15px; height:15px; opacity:.55">3 Anmerkungen
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- ── Main split pane ── -->
-  <div style="display:grid; grid-template-columns:1fr 480px; min-height:640px; align-items:stretch">
-
-    <!-- LEFT: document/PDF viewer placeholder on --c-pdf-bg -->
-    <div style="display:flex; flex-direction:column; background:var(--c-pdf-bg); min-height:640px">
-      <div style="flex:1; display:flex; align-items:center; justify-content:center; padding:36px">
-        <!-- aged-scan page placeholder -->
-        <div style="width:100%; max-width:540px; aspect-ratio:3 / 4; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px">
-          <img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:46px; height:46px; opacity:.3">
-          <div style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-3)">Feldpostbrief — Seite 1</div>
-          <div style="font-family:var(--font-sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3)">{{ signatur }} · Kurrentschrift</div>
-        </div>
-      </div>
-
-      <!-- page-control footer (prev/next, page x of y) -->
-      <div style="display:flex; align-items:center; justify-content:center; gap:16px; padding:12px; background:var(--c-pdf-ctrl); border-top:1px solid var(--c-line)">
-        <button class="fa-link" title="Vorherige Seite" style="display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; cursor:pointer; color:var(--c-pdf-text); font-family:var(--font-sans); font-size:16px; font-weight:700">‹</button>
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--c-pdf-text)">Seite 1 von 2</span>
-        <button class="fa-link" title="Nächste Seite" style="display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; cursor:pointer; color:var(--c-pdf-text); font-family:var(--font-sans); font-size:16px; font-weight:700">›</button>
-      </div>
-    </div>
-
-    <!-- RIGHT: transcription panel -->
-    <div style="display:flex; flex-direction:column; background:var(--c-surface); border-left:1px solid var(--c-line); min-height:640px">
-
-      <!-- panel header: read/edit SEGMENTED CONTROL + turquoise accent chip -->
-      <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--c-line)">
-        <div style="display:flex; align-items:center; gap:12px">
-          <!-- segmented control (§6) -->
-          <div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden">
-            <span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 16px; cursor:pointer">Lesen</span>
-            <span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Bearbeiten</span>
-          </div>
-          <!-- turquoise Transkriptionsmodus accent chip -->
-          <span style="display:inline-flex; align-items:center; gap:6px; border:1px solid var(--c-turquoise); padding:5px 10px; border-radius:999px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-turquoise)">
-            <span style="width:7px; height:7px; border-radius:999px; background:var(--c-turquoise)"></span>Transkriptionsmodus
-          </span>
-        </div>
-        <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">4 Abschnitte · zuletzt 12. Juni 2026</span>
-      </div>
-
-      <!-- transcription blocks in Tinos -->
-      <div style="flex:1; overflow-y:auto; padding:26px 28px">
-        <sc-for list="{{ blocks }}" as="b" hint-placeholder-count="4">
-          <div style="{{ b.wrap }}">
-            <p style="font-family:var(--font-serif); font-size:16px; line-height:1.85; color:var(--c-ink); margin:0">{{ b.text }}</p>
-            <sc-if value="{{ b.annotated }}" hint-placeholder-val="{{ false }}">
-              <div style="display:inline-flex; align-items:center; gap:7px; margin-top:10px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3)">
-                <img class="dgicon" src="assets/icons/Chat-MD.svg" style="width:13px; height:13px; opacity:.5">Markiert · 1 Anmerkung
-              </div>
-            </sc-if>
-          </div>
-        </sc-for>
-      </div>
-    </div>
-  </div>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name,
-      a26:{ ...base, width:26, height:26, fontSize:10, marginLeft:-6, border:'2px solid var(--c-surface)' },
-      a40:{ ...base, width:40, height:40, fontSize:14 } };
-  }
-
-  blocks(){
-    const raw = [
-      { annotated:false, text:'Meine liebe, gute Clara! Heute hatte ich endlich wieder einen ruhigen Tag, um Dir ausführlich zu schreiben. Das Wetter ist umgeschlagen, kalter Regen seit gestern, und die Wege sind grundlos. Trotzdem geht es mir gut, sei darum unbesorgt.' },
-      { annotated:true,  text:'In 10 Minuten gehe ich in Stellung zum ehrenvollen, heissen und schweren Kampfe. Was kommen mag, ich gehe ruhig hinein – nur der Gedanke an Dich und die Kinder läßt mich nicht los, Tag und Nacht.' },
-      { annotated:false, text:'Hast Du meine letzten beiden Karten erhalten? Schreibe mir bald, wie es Mutter geht und ob die Kohlen für den Winter schon eingebracht sind. Grüße mir die Nachbarn und besonders Frau Hoffmann recht herzlich.' },
-      { annotated:false, text:'Nun muß ich schließen, der Posten wartet. Bleib gesund und tapfer, meine Gute. In treuer Liebe und mit tausend Küssen, Dein Herbert.' },
-    ];
-    return raw.map(b => ({
-      ...b,
-      wrap: b.annotated
-        ? { borderLeft:'3px solid var(--c-accent)', paddingLeft:18, paddingTop:14, paddingBottom:18, marginBottom:8, background:'var(--c-accent-bg)' }
-        : { paddingTop:14, paddingBottom:18, marginBottom:8, borderBottom:'1px solid var(--c-line)' },
-    }));
-  }
-
-  renderVals(){
-    const sender = this.av('Herbert Cram');
-    const receiver = this.av('Clara Cram');
-    const tagColors = { 'Feldpost':'#a0522d', 'Erster Weltkrieg':'#607080', 'Westfront':'#3060b0', 'Liebesbrief':'#c0446e' };
-    const tags = Object.keys(tagColors).map(name => ({ name, dot:tagColors[name] }));
-    return {
-      signatur:'H-0366',
-      title:'Feldpostbrief an Clara — »in 10 Minuten gehe ich in Stellung«',
-      status:'Transkribiert',
-      statusColor:'#5a8a6a',
-      sender, receiver,
-      stack:[sender, receiver],
-      tags,
-      blocks: this.blocks(),
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Dokumente-Liste.dc.html

@@ -1,219 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="dokumente" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-
-    <!-- PAGE HEADER -->
-    <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-      <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Archiv</div>
-        <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Dokumente</h1>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Durchsuchen Sie den Bestand nach Titel, Person oder Schlagwort — gebündelt nach Jahr.</p>
-      </div>
-      <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">147 Dokumente · 38 Personen</span>
-    </div>
-
-    <!-- SEARCH CARD -->
-    <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:16px; margin-bottom:16px">
-      <!-- row 1: search + sort + filter -->
-      <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap">
-        <div style="position:relative; flex:1; min-width:240px">
-          <input placeholder="Titel, Personen, Tags durchsuchen…" style="width:100%; box-sizing:border-box; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-          <img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-        </div>
-        <button class="fa-link" style="display:flex; align-items:center; gap:8px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); padding:11px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px">Datum ↓</button>
-        <button class="fa-link" style="display:flex; align-items:center; gap:8px; min-height:44px; background:var(--c-muted); border:1px solid var(--c-line); padding:11px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px"><img class="dgicon" src="assets/icons/Filter-MD.svg" style="width:15px; height:15px; opacity:.55">Filter</button>
-      </div>
-
-      <!-- row 2: advanced filters (shown open) -->
-      <div style="margin-top:18px; padding-top:18px; border-top:1px solid var(--c-line-2); display:flex; flex-direction:column; gap:18px">
-
-        <!-- tags + AND/OR segmented control -->
-        <div>
-          <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Schlagwörter</div>
-          <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap">
-            <sc-for list="{{ tagChips }}" as="t" hint-placeholder-count="3">
-              <span style="display:inline-flex; align-items:center; gap:6px; border:1px solid var(--c-line); background:var(--c-muted); padding:5px 10px; border-radius:4px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--c-ink-2)">
-                <span style="{{ t.dot }}"></span>{{ t.name }}
-              </span>
-            </sc-for>
-            <div style="display:inline-flex; border:1px solid var(--c-line); margin-left:4px">
-              <span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 16px; cursor:pointer">Und</span>
-              <span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Oder</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- typeahead + dates + undated toggle -->
-        <div style="display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:14px; align-items:end">
-          <label style="display:block">
-            <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Absender</span>
-            <input placeholder="z.B. Herbert Cram" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-          </label>
-          <label style="display:block">
-            <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Empfänger</span>
-            <input placeholder="z.B. Clara Cram" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-          </label>
-          <label style="display:block">
-            <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Von</span>
-            <input placeholder="01.01.1914" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-          </label>
-          <label style="display:block">
-            <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Bis</span>
-            <input placeholder="31.12.1918" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-          </label>
-        </div>
-
-        <!-- undated-only toggle -->
-        <div>
-          <button class="fa-link" title="Nur undatierte Dokumente anzeigen" style="display:inline-flex; align-items:center; gap:10px; min-height:44px; border:1px solid var(--c-line); background:var(--c-muted); padding:0 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px">
-            <span style="display:inline-flex; width:16px; height:16px; border:1px solid var(--c-ink-3); border-radius:2px"></span>
-            Ohne Datum
-            <span style="display:inline-flex; align-items:center; justify-content:center; min-width:24px; padding:2px 6px; border-radius:999px; background:var(--c-line); color:var(--c-ink-2); font-size:11px; font-weight:700; letter-spacing:0">9</span>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- RESULT COUNT + ACTIONS -->
-    <div style="display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap">
-      <p style="margin:0; font-family:var(--font-sans); font-size:14px; color:var(--c-ink-2)">147 Treffer</p>
-      <div style="display:flex; align-items:center; gap:12px">
-        <a href="#" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; min-height:44px; background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px; text-decoration:none"><img class="dgicon" src="assets/icons/Edit-Content-MD.svg" style="width:15px; height:15px; opacity:.55">Alle bearbeiten</a>
-        <a href="#" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; min-height:44px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px; text-decoration:none">Neu</a>
-      </div>
-    </div>
-
-    <!-- GROUPED RESULT CARDS -->
-    <sc-for list="{{ groups }}" as="g" hint-placeholder-count="3">
-      <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; margin-bottom:18px">
-        <div style="border-bottom:1px solid var(--c-line-2); background:var(--c-muted); padding:11px 24px">
-          <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3)">{{ g.label }}</span>
-        </div>
-        <div>
-          <sc-for list="{{ g.docs }}" as="d" hint-placeholder-count="5">
-            <div style="display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--c-line-2); padding:15px 24px">
-              <a href="#" class="fa-link" style="font-family:var(--font-serif); font-size:18px; color:var(--c-ink); text-decoration:none; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1">{{ d.title }}</a>
-              <div style="display:flex; align-items:center; gap:18px; flex-shrink:0">
-                <div style="display:flex; padding-left:6px">
-                  <sc-for list="{{ d.people }}" as="p" hint-placeholder-count="3">
-                    <span style="{{ p.a26 }}">{{ p.initials }}</span>
-                  </sc-for>
-                </div>
-                <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); width:130px; text-align:right">{{ d.date }}</span>
-                <span style="display:inline-flex; align-items:center; gap:7px; width:120px">
-                  <span style="{{ d.statusDot }}"></span>
-                  <span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">{{ d.status }}</span>
-                </span>
-              </div>
-            </div>
-          </sc-for>
-        </div>
-      </div>
-    </sc-for>
-
-    <!-- PAGINATION -->
-    <div style="display:flex; align-items:center; justify-content:center; gap:8px; margin-top:28px">
-      <a href="#" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:0 14px; border:1px solid var(--c-line); background:var(--c-surface); font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none; border-radius:2px">Zurück</a>
-      <a href="#" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:0 14px; border:1px solid var(--c-primary); background:var(--c-primary); font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--c-primary-fg); text-decoration:none; border-radius:2px">1</a>
-      <a href="#" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:0 14px; border:1px solid var(--c-line); background:var(--c-surface); font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--c-ink-2); text-decoration:none; border-radius:2px">2</a>
-      <a href="#" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:0 14px; border:1px solid var(--c-line); background:var(--c-surface); font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--c-ink-2); text-decoration:none; border-radius:2px">3</a>
-      <span style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; font-family:var(--font-sans); font-size:12px; font-weight:700; color:var(--c-ink-3)">…</span>
-      <a href="#" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:0 14px; border:1px solid var(--c-line); background:var(--c-surface); font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--c-ink-2); text-decoration:none; border-radius:2px">8</a>
-      <a href="#" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:0 14px; border:1px solid var(--c-line); background:var(--c-surface); font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none; border-radius:2px">Weiter</a>
-    </div>
-
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name, a26:{ ...base, width:26, height:26, fontSize:10, marginLeft:-6, border:'2px solid var(--c-surface)' } };
-  }
-  avs(names){ return names.map(n => this.av(n)); }
-
-  // Real DocumentStatus labels (documentStatusLabel.ts) mapped to the 3 status colors.
-  statusColor(status){
-    const sc = {
-      'Transkribiert':'#5a8a6a', 'Geprüft':'#5a8a6a', 'Archiviert':'#5a8a6a',
-      'Hochgeladen':'#c17a00',
-      'Platzhalter':'#607080',
-    };
-    return sc[status] || '#607080';
-  }
-
-  groups(){
-    const tag = (t) => ({ ...t, statusDot:{ display:'inline-block', width:7, height:7, borderRadius:'999px', background:this.statusColor(t.status), flexShrink:0 } });
-    const raw = [
-      { label:'1916', docs:[
-        { title:'Feldpostbrief von der Westfront', date:'3. Februar 1916', status:'Transkribiert', people:['Herbert Cram','Clara Cram'] },
-        { title:'Postkarte aus dem Lazarett Sedan', date:'17. April 1916', status:'Geprüft', people:['Herbert Cram','Marie Cram'] },
-        { title:'Brief an die Mutter, Sütterlin', date:'9. Juni 1916', status:'Hochgeladen', people:['Herbert Cram','Eugenie de Gruyter'] },
-        { title:'Glückwunsch zur Verlobung', date:'28. August 1916', status:'Transkribiert', people:['Clara Cram','Marie Cram'] },
-        { title:'Feldpost — Absender unleserlich', date:'1916 (Monat unbekannt)', status:'Platzhalter', people:['Clara Cram'] },
-        { title:'Weihnachtsgruß aus dem Schützengraben', date:'22. Dezember 1916', status:'Hochgeladen', people:['Herbert Cram','Clara Cram','Marie Cram'] },
-      ]},
-      { label:'1915', docs:[
-        { title:'Erste Karte nach der Einberufung', date:'14. März 1915', status:'Geprüft', people:['Herbert Cram','Eugenie de Gruyter'] },
-        { title:'Brief über das Leben in der Etappe', date:'30. Mai 1915', status:'Transkribiert', people:['Herbert Cram','Clara Cram'] },
-        { title:'Postkarte mit Feldpoststempel', date:'11. September 1915', status:'Hochgeladen', people:['Marie Cram','Clara Cram'] },
-        { title:'Brief an Eugenie, Kurrentschrift', date:'4. November 1915', status:'Platzhalter', people:['Eugenie de Gruyter','Herbert Cram'] },
-        { title:'Adventsgruß an die Familie', date:'5. Dezember 1915', status:'Transkribiert', people:['Herbert Cram','Marie Cram','Clara Cram'] },
-      ]},
-      { label:'1914', docs:[
-        { title:'Brief vor der Mobilmachung', date:'19. Juli 1914', status:'Geprüft', people:['Herbert Cram','Clara Cram'] },
-        { title:'Karte vom Bahnhof Köln', date:'8. August 1914', status:'Transkribiert', people:['Herbert Cram','Eugenie de Gruyter'] },
-        { title:'Erster Feldpostbrief aus Belgien', date:'27. September 1914', status:'Hochgeladen', people:['Herbert Cram','Marie Cram'] },
-        { title:'Umschlag ohne Inhalt (Mappe A)', date:'1914 (undatiert)', status:'Platzhalter', people:['Clara Cram'] },
-      ]},
-    ];
-    return raw.map(g => ({ label:g.label, docs:g.docs.map(d => ({ ...d, people:this.avs(d.people), statusDot:{ display:'inline-block', width:7, height:7, borderRadius:'999px', background:this.statusColor(d.status), flexShrink:0 } })) }));
-  }
-
-  tagChips(){
-    const tc = { sage:'#5a8a6a', sienna:'#a0522d', amber:'#c17a00', cobalt:'#3060b0' };
-    const raw = [
-      { name:'Feldpost', color:tc.sienna },
-      { name:'Erster Weltkrieg', color:tc.cobalt },
-      { name:'Westfront', color:tc.amber },
-    ];
-    return raw.map(t => ({ name:t.name, dot:{ display:'inline-block', width:8, height:8, borderRadius:'999px', background:t.color, flexShrink:0 } }));
-  }
-
-  renderVals(){
-    return {
-      groups: this.groups(),
-      tagChips: this.tagChips(),
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Dokumente.dc.html

@@ -1,174 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="dokumente" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-
-    <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-      <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Archiv</div>
-        <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Dokumente</h1>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Jüngste Eingänge, offene Aufgaben und der schnelle Weg zum nächsten Stück.</p>
-      </div>
-      <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">147 Dokumente · 38 Personen</span>
-    </div>
-
-    <!-- search bar -->
-    <div style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); padding:16px; margin-bottom:16px; display:flex; align-items:center; gap:12px">
-      <div style="position:relative; flex:1">
-        <input placeholder="Titel, Personen, Tags durchsuchen…" style="width:100%; box-sizing:border-box; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:15px; color:var(--c-ink); outline:none; border-radius:2px">
-        <img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-      </div>
-      <button class="fa-link" style="display:flex; align-items:center; gap:8px; background:var(--c-surface); border:1px solid var(--c-line); padding:11px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px">Datum ↓</button>
-      <button class="fa-link" style="display:flex; align-items:center; gap:8px; background:var(--c-muted); border:1px solid var(--c-line); padding:11px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px"><img class="dgicon" src="assets/icons/Filter-MD.svg" style="width:15px; height:15px; opacity:.55">Filter</button>
-    </div>
-
-    <!-- resume -->
-    <div style="display:flex; align-items:center; gap:10px; border:1px solid var(--c-line); border-left:3px solid var(--c-accent); background:var(--c-surface); padding:12px 16px; margin-bottom:20px">
-      <span style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-2)">Weiter bei:</span>
-      <a href="#" class="fa-link" style="font-family:var(--font-serif); font-size:16px; font-style:italic; color:var(--c-ink); text-decoration:underline; text-decoration-color:var(--c-accent); text-underline-offset:3px; text-decoration-thickness:2px">Brief an Frieda aus dem Harz</a>
-    </div>
-
-    <div style="display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start">
-      <!-- recent documents -->
-      <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:24px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Zuletzt hinzugefügt</div>
-        <sc-for list="{{ docs }}" as="d" hint-placeholder-count="6">
-          <div style="display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--c-line-2); padding:13px 0">
-            <a href="#" class="fa-link" style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink); text-decoration:none; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">{{ d.title }}</a>
-            <div style="display:flex; align-items:center; gap:16px; flex-shrink:0">
-              <div style="display:flex; padding-left:6px">
-                <sc-for list="{{ d.people }}" as="p" hint-placeholder-count="2">
-                  <span style="{{ p.a26 }}">{{ p.initials }}</span>
-                </sc-for>
-              </div>
-              <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); width:128px; text-align:right">{{ d.date }}</span>
-              <span style="display:inline-flex; align-items:center; gap:6px; width:118px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)"><span style="{{ d.statusDot }}"></span>{{ d.status }}</span>
-            </div>
-          </div>
-        </sc-for>
-        <p style="margin:16px 0 0; font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">147 Dokumente · 38 Personen</p>
-      </div>
-
-      <!-- right column -->
-      <div style="display:flex; flex-direction:column; gap:18px">
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); padding:6px">
-          <div style="display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px dashed var(--c-line); padding:26px 18px; text-align:center">
-            <img class="dgicon" src="assets/icons/Upload-MD.svg" style="width:30px; height:30px; opacity:.4">
-            <span style="font-family:var(--font-sans); font-size:14px; color:var(--c-ink-2)">Dateien hier ablegen oder klicken</span>
-            <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">PDF, JPG, PNG, TIFF bis 50 MB</span>
-          </div>
-        </div>
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:22px">
-          <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Benötigt Metadaten</div>
-          <sc-for list="{{ needsMeta }}" as="m" hint-placeholder-count="3">
-            <div style="border-bottom:1px solid var(--c-line-2); padding:11px 0">
-              <a href="#" class="fa-link" style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink); text-decoration:none">{{ m }}</a>
-            </div>
-          </sc-for>
-          <a href="#" class="fa-link" style="display:inline-block; margin-top:14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">Alle anzeigen →</a>
-        </div>
-      </div>
-    </div>
-
-    <!-- mission control -->
-    <section style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:24px; margin-top:18px">
-      <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">Mission Control</div>
-      <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px">
-        <sc-for list="{{ mission }}" as="c" hint-placeholder-count="3">
-          <div style="display:flex; flex-direction:column; gap:12px; border:1px solid var(--c-line); background:var(--c-muted); padding:16px">
-            <div>
-              <h3 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink); margin:0 0 8px">{{ c.heading }}</h3>
-              <span style="display:inline-flex; align-items:center; gap:4px; border:1px solid var(--c-line); background:var(--c-accent-bg); padding:3px 10px; border-radius:999px; font-family:var(--font-sans); font-size:11px; font-weight:600; color:var(--c-ink)">{{ c.skill }}</span>
-              <p style="margin:8px 0 0; font-family:var(--font-sans); font-size:12px; font-weight:600; color:var(--c-ink-2)">{{ c.weekly }}</p>
-            </div>
-            <div>
-              <sc-for list="{{ c.items }}" as="it" hint-placeholder-count="3">
-                <a href="#" class="fa-link" style="display:flex; flex-direction:column; padding:8px 0; border-top:1px solid var(--c-line-2); text-decoration:none">
-                  <span style="font-family:var(--font-serif); font-size:15px; color:var(--c-ink)">{{ it.title }}</span>
-                  <span style="margin-top:2px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">{{ it.date }}</span>
-                </a>
-              </sc-for>
-            </div>
-          </div>
-        </sc-for>
-      </div>
-    </section>
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name, a26:{ ...base, width:26, height:26, fontSize:10, marginLeft:-6, border:'2px solid var(--c-surface)' } };
-  }
-  avs(names){ return names.map(n => this.av(n)); }
-
-  docs(){
-    const sc = { 'Transkribiert':'#5a8a6a', 'In Arbeit':'#c17a00', 'Neu':'#607080' };
-    const raw = [
-      { title:'Brief an Frieda aus dem Harz', date:'14. März 1923', status:'Transkribiert', people:['Frieda Rose','Anna Bauer'] },
-      { title:'Postkarte aus Wien', date:'2. August 1924', status:'In Arbeit', people:['Karl Müller'] },
-      { title:'Geschäftsbrief betr. Grundstück Mariahilf', date:'19. November 1925', status:'In Arbeit', people:['Otto Schmidt'] },
-      { title:'Glückwunsch zum 60. Geburtstag', date:'22. Mai 1928', status:'Transkribiert', people:['Margarete Hoffmann'] },
-      { title:'Brief aus der Lehrzeit', date:'8. Oktober 1930', status:'Neu', people:['Wilhelm Rose'] },
-      { title:'Weihnachtsgruß an die Familie', date:'21. Dezember 1931', status:'Transkribiert', people:['Heinrich Rose'] },
-    ];
-    return raw.map(d => ({ ...d, people:this.avs(d.people), statusDot:{ display:'inline-block', width:7, height:7, borderRadius:'999px', background:sc[d.status], flexShrink:0 } }));
-  }
-
-  mission(){
-    return [
-      { heading:'Segmentierung', skill:'Gut für Augen, die Seiten erkennen', weekly:'Diese Woche: 12 Seiten zugeordnet', items:[
-        { title:'Konvolut Rose, Heft III', date:'2. Feb 1923' },
-        { title:'Umschlag Mariahilf', date:'19. Nov 1925' },
-        { title:'Mappe B — unsortiert', date:'' },
-      ]},
-      { heading:'Transkription', skill:'Gut für geübte Leser der Kurrentschrift', weekly:'Diese Woche: 7 Briefe begonnen', items:[
-        { title:'Brief an Frieda aus dem Harz', date:'14. März 1923' },
-        { title:'Postkarte aus Wien', date:'2. Aug 1924' },
-        { title:'Geburtstagsbrief', date:'22. Mai 1928' },
-      ]},
-      { heading:'Zur Überprüfung', skill:'Gut für letzte Korrekturen', weekly:'', items:[
-        { title:'Brief aus der Lehrzeit', date:'8. Okt 1930' },
-        { title:'Weihnachtsgruß', date:'21. Dez 1931' },
-      ]},
-    ];
-  }
-
-  renderVals(){
-    return {
-      docs: this.docs(),
-      needsMeta: ['Brief ohne Titel (Mappe B)', 'Postkarte — Absender unbekannt', 'Umschlag, 1924'],
-      mission: this.mission(),
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Ereignis-Editor.dc.html

@@ -1,288 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="zeitstrahl" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-
-    <!-- back link -->
-    <a href="Zeitstrahl.dc.html" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none; margin-bottom:24px">← Zurück zum Zeitstrahl</a>
-
-    <!-- PageHeader (§3) -->
-    <div style="margin-bottom:30px; border-left:4px solid var(--c-accent); padding-left:18px">
-      <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">{{ eyebrow }}</div>
-      <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">{{ title }}</h1>
-      <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">{{ lede }}</p>
-    </div>
-
-    <div style="display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start">
-
-      <!-- ─── MAIN column ─── -->
-      <div style="display:flex; flex-direction:column; gap:24px">
-
-        <!-- Wann & Was -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-          <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Wann &amp; Was</h2>
-
-          <!-- Titel (with error state on a missing-title field) -->
-          <label style="display:block; margin-bottom:22px">
-            <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Titel *</span>
-            <input value="{{ f.title }}" placeholder="z.B. Hochzeit von Hannemarie Cram" style="{{ titleInputStyle }}">
-            <sc-if value="{{ titleError }}" hint-placeholder-val="{{ false }}">
-              <div style="display:flex; align-items:center; gap:7px; margin-top:7px">
-                <img class="dgicon" src="assets/icons/Check-MD.svg" style="width:14px; height:14px; opacity:.7">
-                <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--c-danger)">{{ titleError }}</span>
-              </div>
-            </sc-if>
-          </label>
-
-          <!-- Ereignistyp — segmented control (§6) -->
-          <div style="margin-bottom:22px">
-            <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Ereignistyp</div>
-            <div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden">
-              <sc-for list="{{ typeSegments }}" as="seg" hint-placeholder-count="2">
-                <span class="fa-link" style="{{ seg.style }}">{{ seg.label }}</span>
-              </sc-for>
-            </div>
-          </div>
-
-          <!-- Datum + Genauigkeit hint -->
-          <div>
-            <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Datum</span>
-            <div style="position:relative; max-width:280px">
-              <input value="{{ f.date }}" placeholder="TT.MM.JJJJ" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-              <img class="dgicon" src="assets/icons/Calendar-Add-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-            </div>
-            <div style="display:flex; align-items:center; gap:8px; margin-top:7px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">
-              <span>Genauigkeit:</span>
-              <sc-for list="{{ precisionHints }}" as="p" hint-placeholder-count="3">
-                <span style="{{ p.style }}">{{ p.label }}</span>
-                <sc-if value="{{ p.sep }}" hint-placeholder-val="{{ true }}"><span>·</span></sc-if>
-              </sc-for>
-            </div>
-          </div>
-        </div>
-
-        <!-- Beschreibung -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-          <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Beschreibung</h2>
-          <label style="display:block">
-            <span class="sr-only" style="position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)">Beschreibung des Ereignisses</span>
-            <textarea rows="5" placeholder="Was geschah an diesem Tag? Hintergrund, Quellen, Beteiligte…" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; line-height:1.7; color:var(--c-ink); outline:none; border-radius:2px">{{ f.description }}</textarea>
-          </label>
-        </div>
-      </div>
-
-      <!-- ─── SIDEBAR ─── -->
-      <div style="display:flex; flex-direction:column; gap:24px">
-
-        <!-- Beteiligte Personen -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-          <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Beteiligte Personen</h2>
-
-          <sc-if value="{{ hasPersons }}" hint-placeholder-val="{{ true }}">
-            <div style="display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px">
-              <sc-for list="{{ persons }}" as="p" hint-placeholder-count="3">
-                <span style="display:inline-flex; align-items:center; gap:8px; background:var(--c-muted); border:1px solid var(--c-line); border-radius:2px; padding:4px 6px 4px 4px">
-                  <span style="{{ p.a26 }}">{{ p.initials }}</span>
-                  <span style="font-family:var(--font-serif); font-size:14px; color:var(--c-ink)">{{ p.name }}</span>
-                  <a href="#" title="Person entfernen" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--c-ink-3); text-decoration:none">×</a>
-                </span>
-              </sc-for>
-            </div>
-          </sc-if>
-          <sc-if value="{{ noPersons }}" hint-placeholder-val="{{ false }}">
-            <div style="border:1px dashed var(--c-line); border-radius:2px; padding:24px 16px; text-align:center; margin-bottom:14px">
-              <div style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink); margin-bottom:4px">Noch keine Person verknüpft.</div>
-              <div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">Beginnen Sie zu tippen…</div>
-            </div>
-          </sc-if>
-
-          <!-- add typeahead -->
-          <div style="position:relative">
-            <input placeholder="Person suchen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-            <img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-          </div>
-        </div>
-
-        <!-- Verknüpfte Briefe -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-          <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Verknüpfte Briefe</h2>
-
-          <sc-if value="{{ hasDocuments }}" hint-placeholder-val="{{ true }}">
-            <div style="display:flex; flex-direction:column; gap:10px; margin-bottom:14px">
-              <sc-for list="{{ documents }}" as="d" hint-placeholder-count="2">
-                <div style="display:flex; align-items:center; gap:12px; border:1px solid var(--c-line); border-radius:2px; padding:12px">
-                  <span style="width:38px; height:38px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); border-radius:2px; display:flex; align-items:center; justify-content:center">{{ d.iconEl }}</span>
-                  <div style="flex:1; min-width:0">
-                    <div style="font-family:var(--font-serif); font-size:15px; color:var(--c-ink); line-height:1.3">{{ d.title }}</div>
-                    <div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:3px">{{ d.meta }}</div>
-                  </div>
-                  <a href="#" title="Brief entfernen" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; font-family:var(--font-sans); font-size:18px; font-weight:700; color:var(--c-ink-3); text-decoration:none">×</a>
-                </div>
-              </sc-for>
-            </div>
-          </sc-if>
-          <sc-if value="{{ noDocuments }}" hint-placeholder-val="{{ false }}">
-            <div style="border:1px dashed var(--c-line); border-radius:2px; padding:24px 16px; text-align:center; margin-bottom:14px">
-              <div style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink); margin-bottom:4px">Noch kein Brief verknüpft.</div>
-              <div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">Verknüpfen Sie einen Brief aus dem Archiv…</div>
-            </div>
-          </sc-if>
-
-          <!-- add typeahead -->
-          <div style="position:relative">
-            <input placeholder="Brief suchen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-            <img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- ─── Sticky save bar ─── -->
-    <div style="position:sticky; bottom:0; z-index:20; margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:0 -2px 8px rgba(0,0,0,.06); border-radius:2px; padding:16px 24px">
-      <div style="display:flex; align-items:center; gap:18px">
-        <sc-if value="{{ isEdit }}" hint-placeholder-val="{{ true }}">
-          <a href="#" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Löschen</a>
-        </sc-if>
-        <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">Ereignisse erscheinen im Zeitstrahl.</span>
-      </div>
-      <div style="display:flex; align-items:center; gap:14px">
-        <a href="{{ discardHref }}" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; border-radius:2px">Abbrechen</a>
-        <button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
-      </div>
-    </div>
-
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1180,&quot;height&quot;:1300},&quot;variant&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;neu&quot;,&quot;bearbeiten&quot;],&quot;default&quot;:&quot;bearbeiten&quot;,&quot;tsType&quot;:&quot;string&quot;}}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name,
-      a26:{ ...base, width:26, height:26, fontSize:10 },
-      a28:{ ...base, width:28, height:28, fontSize:11 },
-      a40:{ ...base, width:40, height:40, fontSize:14 },
-      a48:{ ...base, width:48, height:48, fontSize:16 } };
-  }
-
-  typeSegments(activeLabel){
-    const labels = ['Persönlich','Historisch'];
-    return labels.map((label, i) => {
-      const active = label === activeLabel;
-      const style = {
-        fontFamily:'var(--font-sans)', fontSize:12, fontWeight:700, letterSpacing:'.08em',
-        textTransform:'uppercase', padding:'10px 16px', cursor:'pointer',
-        background: active ? 'var(--c-primary)' : 'var(--c-surface)',
-        color: active ? 'var(--c-primary-fg)' : 'var(--c-ink-2)',
-      };
-      if (i > 0) style.borderLeft = '1px solid var(--c-line)';
-      return { label, style };
-    });
-  }
-
-  precisionHints(activeLabel){
-    const labels = ['Tag','Monat','Jahr'];
-    return labels.map((label, i) => ({
-      label,
-      sep: i < labels.length - 1,
-      style: { color: label === activeLabel ? 'var(--c-ink-2)' : 'var(--c-ink-3)', fontWeight: label === activeLabel ? 700 : 400 },
-    }));
-  }
-
-  renderVals(){
-    const variant = this.props.variant || 'bearbeiten';
-    const isEdit = variant === 'bearbeiten';
-
-    const editing = {
-      title:'Hochzeit von Hannemarie Cram',
-      type:'Persönlich',
-      precision:'Tag',
-      date:'12.05.1945',
-      description:'Hannemarie Cram heiratet mitten im Krieg, wenige Tage nach der Kapitulation. Die Trauung findet im engsten Familienkreis statt — Herbert ist noch an der Front vermisst. Mehrere Glückwunschbriefe aus dem Mai 1945 nehmen auf diesen Tag Bezug.',
-    };
-    const blank = {
-      title:'',
-      type:'Persönlich',
-      precision:'Tag',
-      date:'',
-      description:'',
-    };
-    const f = isEdit ? editing : blank;
-
-    // Error state demo: the Titel field shows a danger border + danger message
-    // (Check/warning icon, never an emoji). On `neu` the empty title is flagged.
-    const titleError = isEdit ? '' : 'Bitte einen Titel eingeben.';
-    const titleInputStyle = {
-      width:'100%',
-      border: '1px solid ' + (titleError ? 'var(--c-danger)' : 'var(--c-line)'),
-      background:'var(--c-surface)', padding:'11px 14px',
-      fontFamily:'var(--font-serif)', fontSize:16, color:'var(--c-ink)',
-      outline:'none', borderRadius:'2px',
-    };
-
-    const personNames = isEdit
-      ? ['Hannemarie Cram', 'Clara Cram', 'Marie Cram']
-      : [];
-    const persons = personNames.map(n => this.av(n));
-
-    const rawDocs = isEdit
-      ? [
-          { title:'C-0512 – 14. Mai 1945 – Glückwunsch zur Hochzeit', meta:'14.05.1945 · von Eugenie de Gruyter an Hannemarie Cram', kind:'letter' },
-          { title:'C-0518 – 20. Mai 1945 – Hochzeitsbericht', meta:'20.05.1945 · von Clara Cram an Marie Cram', kind:'letter' },
-        ]
-      : [];
-    const documents = rawDocs.map(d => ({
-      ...d,
-      iconEl: React.createElement('img', {
-        className:'dgicon',
-        src: d.kind === 'folder' ? 'assets/icons/Folder-MD.svg' : 'assets/icons/Mail-MD.svg',
-        style:{ width:18, height:18, opacity:.5 },
-      }),
-    }));
-
-    return {
-      isEdit,
-      eyebrow:'Chronik',
-      title: isEdit ? f.title : 'Neues Ereignis',
-      lede: isEdit
-        ? 'Pflegen Sie Datum, Beteiligte und verknüpfte Briefe dieses Ereignisses.'
-        : 'Verankern Sie einen Moment der Familiengeschichte im Zeitstrahl.',
-      f,
-      titleError,
-      titleInputStyle,
-      typeSegments: this.typeSegments(f.type),
-      precisionHints: this.precisionHints(f.precision),
-      persons, hasPersons: persons.length > 0, noPersons: persons.length === 0,
-      documents, hasDocuments: documents.length > 0, noDocuments: documents.length === 0,
-      discardHref: isEdit ? 'Zeitstrahl.dc.html' : 'Zeitstrahl.dc.html',
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Geschichte-Editor.dc.html

@@ -1,401 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="geschichten" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 110px">
-
-    <!-- back link -->
-    <a href="{{ backHref }}" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none; margin-bottom:24px">← {{ backLabel }}</a>
-
-    <!-- PageHeader (§3) -->
-    <div style="margin-bottom:30px; border-left:4px solid var(--c-accent); padding-left:18px">
-      <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">{{ eyebrow }}</div>
-      <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">{{ title }}</h1>
-      <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">{{ lede }}</p>
-    </div>
-
-    <!-- ════════════════════ VARIANT: neu (type picker) ════════════════════ -->
-    <sc-if value="{{ isNeu }}" hint-placeholder-val="{{ false }}">
-      <div style="max-width:780px">
-
-        <!-- segmented control (§6) — Lesereise / Sammlung -->
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:10px">Art der Geschichte</div>
-        <div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden; margin-bottom:28px">
-          <span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:10px 22px; cursor:pointer">Lesereise</span>
-          <span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 22px; border-left:1px solid var(--c-line); cursor:pointer">Sammlung</span>
-        </div>
-
-        <!-- two explanatory cards -->
-        <div style="display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:28px">
-
-          <!-- Lesereise card (selected) -->
-          <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-            <div style="display:flex; align-items:center; gap:10px; margin-bottom:12px">
-              <img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:18px; height:18px; opacity:.4">
-              <h2 style="font-family:var(--font-serif); font-size:21px; font-weight:700; color:var(--c-ink); margin:0">Lesereise</h2>
-            </div>
-            <p style="font-family:var(--font-serif); font-size:16px; line-height:1.65; color:var(--c-ink-2); margin:0 0 14px">Eine geführte Abfolge von Briefen in fester Reihenfolge — die Lesenden gehen Schritt für Schritt durch den Briefwechsel. Zwischen den Dokumenten setzen Sie eigene Anmerkungen, die den Bogen spannen.</p>
-            <div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); line-height:1.6">Ideal für: <span style="font-style:normal; color:var(--c-ink-2)">die Feldpost Herberts 1914–1918 chronologisch erzählt.</span></div>
-          </div>
-
-          <!-- Sammlung card -->
-          <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-            <div style="display:flex; align-items:center; gap:10px; margin-bottom:12px">
-              <img class="dgicon" src="assets/icons/Library-MD.svg" style="width:18px; height:18px; opacity:.4">
-              <h2 style="font-family:var(--font-serif); font-size:21px; font-weight:700; color:var(--c-ink); margin:0">Sammlung</h2>
-            </div>
-            <p style="font-family:var(--font-serif); font-size:16px; line-height:1.65; color:var(--c-ink-2); margin:0 0 14px">Ein frei geschriebener Prosatext mit Überschriften und Absätzen, in den Sie einzelne Briefe als Belege einbetten. Sie führen die Feder — die Dokumente stützen Ihre Erzählung.</p>
-            <div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); line-height:1.6">Ideal für: <span style="font-style:normal; color:var(--c-ink-2)">ein Porträt der drei Kinder über mehrere Jahrzehnte.</span></div>
-          </div>
-
-        </div>
-
-        <!-- primary action -->
-        <button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 24px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Weiter</button>
-      </div>
-    </sc-if>
-
-    <!-- ════════════════════ VARIANT: geschichte (prose / Sammlung editor) ════════════════════ -->
-    <sc-if value="{{ isGeschichte }}" hint-placeholder-val="{{ false }}">
-      <div style="display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start">
-
-        <!-- MAIN: editor card -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:0; overflow:hidden">
-
-          <!-- title field -->
-          <div style="padding:24px 28px 0">
-            <label style="display:block">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Titel</span>
-              <input value="Die Kinder: Briefe an und über Hannemarie, Clara-Eugenie und Kurt-Georg" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--c-ink); outline:none; border-radius:2px">
-            </label>
-          </div>
-
-          <!-- toolbar (§6 segment styling) -->
-          <div style="padding:18px 28px 0">
-            <div style="display:inline-flex; flex-wrap:wrap; border:1px solid var(--c-line); border-radius:2px; overflow:hidden">
-              <sc-for list="{{ toolbarButtons }}" as="t" hint-placeholder-count="6">
-                <span class="fa-link" title="{{ t.title }}" style="{{ t.style }}">{{ t.iconEl }}<span>{{ t.label }}</span></span>
-              </sc-for>
-            </div>
-          </div>
-
-          <!-- content editing area (Tinos prose) -->
-          <div style="padding:18px 28px 28px">
-            <div style="border:1px solid var(--c-line); border-radius:2px; background:var(--c-surface); padding:24px 26px; min-height:340px">
-              <p style="font-family:var(--font-serif); font-size:17px; line-height:1.75; color:var(--c-ink); margin:0 0 18px">Herbert und Clara Cram hatten drei Kinder: <b>Hannemarie</b>, <b>Clara-Eugenie</b> und <b>Kurt-Georg</b>. Die Briefe dieser Sammlung drehen sich um sie — als Kleinkinder, als Schüler, als junge Erwachsene im Zweiten Weltkrieg.</p>
-
-              <h3 style="font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--c-ink); margin:26px 0 12px">Die Töchter im Krieg</h3>
-              <p style="font-family:var(--font-serif); font-size:17px; line-height:1.75; color:var(--c-ink); margin:0 0 18px">Clara-Eugenie dient bei der Flak, während <i>Hannemarie</i> 1945 mitten im Krieg heiratet. Durch die Briefe der Eltern und Großeltern entsteht das Bild einer ganzen Generation, die im Schatten der großen Geschichte aufwuchs:</p>
-
-              <blockquote style="border-left:3px solid var(--c-accent); padding-left:20px; margin:0 0 18px">
-                <p style="font-family:var(--font-serif); font-style:italic; font-size:17px; line-height:1.7; color:var(--c-ink-2); margin:0">„Schreibt mir, sobald Ihr könnt — die Tage sind lang ohne ein Wort von Euch."</p>
-              </blockquote>
-
-              <p style="font-family:var(--font-serif); font-size:17px; line-height:1.75; color:var(--c-ink); margin:0">Clara schreibt an ihre Kinder, die Großeltern schreiben über sie, Freunde erkundigen sich nach ihnen<span style="display:inline-block; width:1px; height:20px; background:var(--c-ink); margin-left:2px; vertical-align:-4px"></span></p>
-            </div>
-          </div>
-
-        </div>
-
-        <!-- SIDEBAR: status + persons + cover -->
-        <aside style="display:flex; flex-direction:column; gap:20px">
-
-          <!-- Status -->
-          <section style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20px">
-            <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 12px">Status</h2>
-            <div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden; margin-bottom:12px">
-              <span class="fa-link" style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 13px; cursor:pointer">Entwurf</span>
-              <span class="fa-link" style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 13px; border-left:1px solid var(--c-line); cursor:pointer">In Arbeit</span>
-              <span class="fa-link" style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 13px; border-left:1px solid var(--c-line); cursor:pointer">Veröffentlicht</span>
-            </div>
-            <div style="display:flex; align-items:center; gap:7px">
-              <span style="width:7px; height:7px; border-radius:999px; background:#5a8a6a"></span>
-              <span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">Veröffentlicht — für alle sichtbar</span>
-            </div>
-          </section>
-
-          <!-- Personen -->
-          <section style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20px">
-            <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 6px">Personen</h2>
-            <p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:0 0 14px">Verknüpfte Personen erscheinen auf deren Profilseiten.</p>
-            <div style="display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px">
-              <sc-for list="{{ persons }}" as="p" hint-placeholder-count="4">
-                <span style="display:inline-flex; align-items:center; gap:8px; background:var(--c-muted); border:1px solid var(--c-line); border-radius:2px; padding:4px 6px 4px 4px">
-                  <span style="{{ p.av.a26 }}">{{ p.av.initials }}</span>
-                  <span style="font-family:var(--font-serif); font-size:14px; color:var(--c-ink)">{{ p.name }}</span>
-                  <a href="#" class="fa-link" title="Entfernen" style="display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--c-ink-3); text-decoration:none">×</a>
-                </span>
-              </sc-for>
-            </div>
-            <div style="position:relative">
-              <input placeholder="Person hinzufügen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:10px 38px 10px 13px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-              <img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-            </div>
-          </section>
-
-          <!-- Titelbild / Intro -->
-          <section style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20px">
-            <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 6px">Titelbild / Intro</h2>
-            <p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:0 0 12px">Ein kurzer einleitender Text für die Übersicht.</p>
-            <textarea rows="4" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; line-height:1.6; color:var(--c-ink); outline:none; border-radius:2px">Ein Porträt der drei Cram-Kinder durch die Briefe ihrer Eltern und Großeltern.</textarea>
-          </section>
-
-        </aside>
-      </div>
-    </sc-if>
-
-    <!-- ════════════════════ VARIANT: lesereise (journey editor) ════════════════════ -->
-    <sc-if value="{{ isLesereise }}" hint-placeholder-val="{{ true }}">
-      <div style="display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start">
-
-        <!-- MAIN: title + intro + journey item list -->
-        <div style="display:flex; flex-direction:column; gap:18px">
-
-          <!-- title -->
-          <label style="display:block">
-            <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Titel</span>
-            <input value="Feldpost: Herbert an der Westfront 1914–1918" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--c-ink); outline:none; border-radius:2px">
-          </label>
-
-          <!-- intro -->
-          <label style="display:block">
-            <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Einleitung</span>
-            <textarea rows="3" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; line-height:1.6; color:var(--c-ink); outline:none; border-radius:2px">Herbert Cram schreibt aus den Schützengräben nach Hause — an seine Frau Clara und seine Mutter Marie. Über 440 Feldpostbriefe in vier Jahren, allein 349 im Jahr 1918.</textarea>
-          </label>
-
-          <!-- station list -->
-          <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-top:6px">Stationen der Lesereise</div>
-
-          <div style="display:flex; flex-direction:column; gap:10px">
-            <sc-for list="{{ journeyItems }}" as="it" hint-placeholder-count="5">
-
-              <!-- letter row -->
-              <sc-if value="{{ it.isLetter }}" hint-placeholder-val="{{ true }}">
-                <div style="{{ it.rowStyle }}">
-                  <div style="display:flex; align-items:center; gap:14px; padding:14px 16px">
-                    <!-- drag handle (View-More icon) -->
-                    <span class="fa-link" title="Zum Verschieben ziehen" style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; cursor:grab; color:var(--c-ink-3)">
-                      <img class="dgicon" src="assets/icons/View-More-MD.svg" style="width:18px; height:18px; opacity:.4">
-                    </span>
-                    <!-- 40px Mail tile -->
-                    <span style="width:40px; height:40px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); display:flex; align-items:center; justify-content:center; border-radius:2px">
-                      <img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:18px; height:18px; opacity:.5">
-                    </span>
-                    <!-- title + meta -->
-                    <div style="flex:1; min-width:0">
-                      <div style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink); line-height:1.3">{{ it.title }}</div>
-                      <div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:3px">{{ it.meta }}</div>
-                    </div>
-                    <!-- remove -->
-                    <a href="#" class="fa-link" title="Aus der Lesereise entfernen" style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; font-family:var(--font-sans); font-size:14px; font-weight:700; color:var(--c-ink-3); text-decoration:none">×</a>
-                  </div>
-
-                  <!-- note sub-field -->
-                  <sc-if value="{{ it.hasNote }}" hint-placeholder-val="{{ false }}">
-                    <div style="padding:0 16px 14px 74px">
-                      <div style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Anmerkung</div>
-                      <textarea rows="2" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-accent-bg); padding:10px 13px; font-family:var(--font-serif); font-style:italic; font-size:15px; line-height:1.6; color:var(--c-ink-2); outline:none; border-radius:2px">{{ it.note }}</textarea>
-                    </div>
-                  </sc-if>
-                  <sc-if value="{{ it.noNote }}" hint-placeholder-val="{{ false }}">
-                    <div style="padding:0 16px 14px 74px">
-                      <a href="#" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none">+ Anmerkung hinzufügen</a>
-                    </div>
-                  </sc-if>
-                </div>
-              </sc-if>
-
-            </sc-for>
-          </div>
-
-          <!-- add-document row -->
-          <a href="#" class="fa-link" style="display:flex; align-items:center; gap:12px; border:1px dashed var(--c-line); border-radius:2px; padding:16px 18px; min-height:44px; text-decoration:none">
-            <img class="dgicon" src="assets/icons/Folder-MD.svg" style="width:18px; height:18px; opacity:.4">
-            <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">Dokument hinzufügen</span>
-          </a>
-
-          <!-- empty-state variant note -->
-          <div style="border:1px dashed var(--c-line); border-radius:2px; padding:18px 22px; background:var(--c-muted)">
-            <div style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Variante: leere Lesereise</div>
-            <div style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink); margin-bottom:4px">Noch keine Briefe in dieser Lesereise.</div>
-            <div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Fügen Sie über „Dokument hinzufügen" den ersten Brief hinzu…</div>
-          </div>
-
-        </div>
-
-        <!-- SIDEBAR: same as story -->
-        <aside style="display:flex; flex-direction:column; gap:20px">
-
-          <!-- Status -->
-          <section style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20px">
-            <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 12px">Status</h2>
-            <div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden; margin-bottom:12px">
-              <span class="fa-link" style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 13px; cursor:pointer">Entwurf</span>
-              <span class="fa-link" style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 13px; border-left:1px solid var(--c-line); cursor:pointer">In Arbeit</span>
-              <span class="fa-link" style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 13px; border-left:1px solid var(--c-line); cursor:pointer">Veröffentlicht</span>
-            </div>
-            <div style="display:flex; align-items:center; gap:7px">
-              <span style="width:7px; height:7px; border-radius:999px; background:#c17a00"></span>
-              <span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">In Arbeit — noch nicht öffentlich</span>
-            </div>
-          </section>
-
-          <!-- Personen -->
-          <section style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20px">
-            <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 6px">Personen</h2>
-            <p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:0 0 14px">Verknüpfte Personen erscheinen auf deren Profilseiten.</p>
-            <div style="display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px">
-              <sc-for list="{{ journeyPersons }}" as="p" hint-placeholder-count="3">
-                <span style="display:inline-flex; align-items:center; gap:8px; background:var(--c-muted); border:1px solid var(--c-line); border-radius:2px; padding:4px 6px 4px 4px">
-                  <span style="{{ p.av.a26 }}">{{ p.av.initials }}</span>
-                  <span style="font-family:var(--font-serif); font-size:14px; color:var(--c-ink)">{{ p.name }}</span>
-                  <a href="#" class="fa-link" title="Entfernen" style="display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--c-ink-3); text-decoration:none">×</a>
-                </span>
-              </sc-for>
-            </div>
-            <div style="position:relative">
-              <input placeholder="Person hinzufügen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:10px 38px 10px 13px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-              <img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-            </div>
-          </section>
-
-          <!-- Titelbild / Intro -->
-          <section style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20px">
-            <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 6px">Titelbild / Intro</h2>
-            <p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:0 0 12px">Ein kurzer einleitender Text für die Übersicht.</p>
-            <textarea rows="4" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; line-height:1.6; color:var(--c-ink); outline:none; border-radius:2px">Vier Kriegsjahre in Feldpostbriefen — von der Mobilmachung bis zum Waffenstillstand.</textarea>
-          </section>
-
-        </aside>
-      </div>
-    </sc-if>
-
-    <!-- ════════════════════ Sticky save bar (geschichte + lesereise) ════════════════════ -->
-    <sc-if value="{{ showSaveBar }}" hint-placeholder-val="{{ true }}">
-      <div style="position:sticky; bottom:0; margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:0 -2px 8px rgba(0,0,0,.06); border-radius:2px; padding:16px 24px">
-        <a href="#" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Löschen</a>
-        <div style="display:flex; align-items:center; gap:14px">
-          <button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Vorschau</button>
-          <button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
-        </div>
-      </div>
-    </sc-if>
-
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1180,&quot;height&quot;:1500},&quot;variant&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;neu&quot;,&quot;geschichte&quot;,&quot;lesereise&quot;],&quot;default&quot;:&quot;geschichte&quot;,&quot;tsType&quot;:&quot;string&quot;}}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name,
-      a26:{ ...base, width:26, height:26, fontSize:10 },
-      a28:{ ...base, width:28, height:28, fontSize:11 },
-      a40:{ ...base, width:40, height:40, fontSize:14 },
-      a48:{ ...base, width:48, height:48, fontSize:16 } };
-  }
-
-  // Toolbar segment styled like a §6 segmented control. Active = navy fill.
-  toolbar(){
-    const items = [
-      { label:'Fett',        icon:null,                       active:false },
-      { label:'Kursiv',      icon:null,                       active:false },
-      { label:'Überschrift', icon:null,                       active:true  },
-      { label:'Zitat',       icon:'assets/icons/Chat-MD.svg', active:false },
-      { label:'Liste',       icon:null,                       active:false },
-      { label:'Link',        icon:'assets/icons/Globe-MD.svg',active:false },
-    ];
-    return items.map((it, i) => {
-      const style = {
-        display:'inline-flex', alignItems:'center', gap:6,
-        fontFamily:'var(--font-sans)', fontSize:12, fontWeight:700, letterSpacing:'.08em',
-        textTransform:'uppercase', padding:'9px 14px', cursor:'pointer', whiteSpace:'nowrap',
-        background: it.active ? 'var(--c-primary)' : 'var(--c-surface)',
-        color: it.active ? 'var(--c-primary-fg)' : 'var(--c-ink-2)',
-      };
-      if (i > 0) style.borderLeft = '1px solid var(--c-line)';
-      const iconEl = it.icon
-        ? React.createElement('img', { className:'dgicon', src:it.icon, style:{ width:14, height:14, opacity: it.active ? .9 : .4, filter: it.active ? 'invert(1) brightness(1.6)' : undefined } })
-        : null;
-      return { ...it, title:it.label, style, iconEl };
-    });
-  }
-
-  renderVals(){
-    const variant = this.props.variant || 'geschichte';
-    const isNeu = variant === 'neu';
-    const isGeschichte = variant === 'geschichte';
-    const isLesereise = variant === 'lesereise';
-
-    const header = {
-      neu:        { eyebrow:'Geschichten',          title:'Neue Geschichte',   lede:'Wählen Sie, wie Sie die Briefe Ihrer Familie erzählen möchten.', back:'Zurück zu Geschichten', backHref:'Geschichten.dc.html' },
-      geschichte: { eyebrow:'Geschichte bearbeiten', title:'Die Kinder',        lede:'Schreiben Sie freien Prosatext und betten Sie Briefe als Belege ein.', back:'Zurück zur Geschichte', backHref:'Geschichte.dc.html' },
-      lesereise:  { eyebrow:'Lesereise bearbeiten',  title:'Feldpost 1914–1918',lede:'Ordnen Sie die Briefe in eine geführte Abfolge und ergänzen Sie Anmerkungen.', back:'Zurück zur Lesereise', backHref:'Geschichte.dc.html?variant=Lesereise' },
-    }[variant];
-
-    // Sammlung persons (story editor)
-    const persons = ['Hannemarie Cram','Clara-Eugenie Cram','Kurt-Georg Cram','Clara Cram']
-      .map(n => ({ name:n, av:this.av(n) }));
-
-    // Lesereise persons
-    const journeyPersons = ['Herbert Cram','Clara Cram','Marie Cram']
-      .map(n => ({ name:n, av:this.av(n) }));
-
-    // Journey items — chronological Feldpost. One row in a COLOR-ONLY drag/active
-    // state (§8): bg var(--c-muted) + 3px mint LEFT rule + opacity. NO transform.
-    const rawItems = [
-      { title:'H-0366 – 31. Oktober 1915 – Feldpost', meta:'31.10.1915 · von Herbert Cram an Clara Cram', note:'Der erste erhaltene Brief aus dem Feld — Herbert berichtet vom Quartier hinter der Front.', dragging:false },
-      { title:'H-0370 – 29. März 1916 – Feldpost',    meta:'29.03.1916 · von Herbert Cram an Clara Cram', note:'',  dragging:true  },
-      { title:'H-0023 – 6. Juli 1916 – Feldpost',     meta:'06.07.1916 · von Herbert Cram an Marie Cram', note:'',  dragging:false },
-      { title:'H-0015 – 21. Juli 1916 – Feldpost',    meta:'21.07.1916 · von Herbert Cram an Marie Cram', note:'Zehn Minuten vor dem Gang in Stellung geschrieben — einer der eindringlichsten Briefe des Archivs.', dragging:false },
-      { title:'H-0016 – 22. Juli 1916 – Feldpost',    meta:'22.07.1916 · von Herbert Cram an Marie Cram', note:'',  dragging:false },
-    ];
-    const journeyItems = rawItems.map(it => {
-      const base = 'background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px';
-      const drag = 'background:var(--c-muted); border:1px solid var(--c-line); border-left:3px solid var(--c-accent); border-radius:2px; opacity:.85';
-      return {
-        ...it,
-        isLetter:true,
-        hasNote: it.note.length > 0,
-        noNote: it.note.length === 0,
-        rowStyle: it.dragging ? drag : base,
-      };
-    });
-
-    return {
-      isNeu, isGeschichte, isLesereise,
-      showSaveBar: isGeschichte || isLesereise,
-      eyebrow:header.eyebrow, title:header.title, lede:header.lede,
-      backLabel:header.back, backHref:header.backHref,
-      toolbarButtons:this.toolbar(),
-      persons, journeyPersons, journeyItems,
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Geschichte.dc.html

@@ -1,160 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="geschichten" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:32px 32px 90px">
-
-    <a href="Geschichten.dc.html" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none; margin-bottom:24px">← Zurück zu Geschichten</a>
-
-    <article style="max-width:880px; margin:0 auto; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:48px 56px 56px">
-
-      <!-- header -->
-      <span style="display:inline-block; background:var(--c-accent-bg); border:1px solid var(--c-accent); color:var(--c-ink); padding:4px 11px; border-radius:4px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px">{{ badge }}</span>
-      <h1 style="font-family:var(--font-serif); font-size:38px; font-weight:700; line-height:1.15; color:var(--c-ink); margin:0 0 22px">{{ title }}</h1>
-
-      <div style="display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid var(--c-line)">
-        <div style="display:flex; align-items:center; gap:12px">
-          <span style="{{ author.a40 }}">{{ author.initials }}</span>
-          <div>
-            <div style="font-family:var(--font-sans); font-size:14px; font-weight:600; color:var(--c-ink)">{{ author.name }}</div>
-            <div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:2px">{{ bylineMeta }}</div>
-          </div>
-        </div>
-        <div style="display:flex; align-items:center; gap:14px">
-          <button class="fa-link" style="background:var(--c-surface); border:1px solid var(--c-line); padding:9px 16px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px">Bearbeiten</button>
-          <a href="#" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Löschen</a>
-        </div>
-      </div>
-
-      <!-- intro -->
-      <p style="{{ introStyle }}">{{ intro }}</p>
-
-      <sc-if value="{{ sectionHeading }}" hint-placeholder-val="{{ false }}">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin:36px 0 16px; padding-top:28px; border-top:1px solid var(--c-line)">{{ sectionHeading }}</div>
-      </sc-if>
-
-      <!-- blocks -->
-      <div style="margin-top:8px">
-        <sc-for list="{{ blocks }}" as="b" hint-placeholder-count="6">
-          <sc-if value="{{ b.isNarration }}" hint-placeholder-val="{{ false }}">
-            <div style="border-left:3px solid var(--c-accent); padding-left:22px; margin:30px 0">
-              <p style="font-family:var(--font-serif); font-style:italic; font-size:18px; line-height:1.7; color:var(--c-ink-2); margin:0">{{ b.text }}</p>
-            </div>
-          </sc-if>
-          <sc-if value="{{ b.isLetter }}" hint-placeholder-val="{{ false }}">
-            <a href="#" class="fa-link" style="display:flex; align-items:center; gap:16px; background:var(--c-surface); border:1px solid var(--c-line); padding:14px 18px; text-decoration:none; margin:10px 0">
-              <span style="width:40px; height:40px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); display:flex; align-items:center; justify-content:center">{{ b.iconEl }}</span>
-              <div style="flex:1; min-width:0">
-                <div style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink); line-height:1.3">{{ b.title }}</div>
-                <div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:3px">{{ b.meta }}</div>
-              </div>
-              <img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:18px; height:18px; opacity:.4; flex-shrink:0">
-            </a>
-          </sc-if>
-          <sc-if value="{{ b.isNote }}" hint-placeholder-val="{{ false }}">
-            <div style="background:var(--c-accent-bg); border-left:3px solid var(--c-accent); padding:14px 18px; margin:2px 0 14px">
-              <div style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Anmerkung</div>
-              <p style="font-family:var(--font-serif); font-style:italic; font-size:15px; line-height:1.6; color:var(--c-ink-2); margin:0">{{ b.text }}</p>
-            </div>
-          </sc-if>
-        </sc-for>
-      </div>
-
-    </article>
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1180,&quot;height&quot;:1400},&quot;variant&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;Lesereise&quot;,&quot;Sammlung&quot;],&quot;default&quot;:&quot;Lesereise&quot;,&quot;tsType&quot;:&quot;string&quot;}}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name, a40:{ ...base, width:40, height:40, fontSize:14 } };
-  }
-
-  story(){
-    const variant = this.props.variant || 'Lesereise';
-    if (variant === 'Sammlung'){
-      return {
-        badge:'Sammlung',
-        title:'Die Kinder: Briefe an und über Hannemarie, Clara-Eugenie und Kurt-Georg',
-        dateVerb:'veröffentlicht am', date:'11. Juni 2026', introItalic:false,
-        intro:'Herbert und Clara Cram hatten drei Kinder: Hannemarie, Clara-Eugenie und Kurt-Georg. Die Briefe dieser Sammlung drehen sich um sie – als Kleinkinder, als Schüler, als junge Erwachsene im Zweiten Weltkrieg. Clara schreibt an ihre Kinder, die Großeltern schreiben über sie, Freunde erkundigen sich nach ihnen. Clara-Eugenie dient bei der Flak, Walter kämpft an der Front, Hannemarie heiratet 1945 mitten im Krieg. Durch die Briefe der Eltern und Großeltern entsteht das Bild einer ganzen Generation, die im Schatten der großen Geschichte aufwuchs.',
-        sectionHeading:'Erwähnte Dokumente',
-        blocks:[
-          { kind:'letter', title:'W-0780 – 17. April 1894 – Ruhrort?', meta:'17.04.1894 · von Ella Dieckmann an Geschwister de Gruyter' },
-          { kind:'letter', title:'Eu-0078 – 5. Dezember 1895 – Ruhrort', meta:'05.12.1895 · von Eugenie de Gruyter an Walter de Gruyter' },
-          { kind:'letter', title:'Eu-0087 – 23. Dezember 1895 – Oberhausen', meta:'23.12.1895 · von Eugenie de Gruyter an Walter de Gruyter' },
-          { kind:'letter', title:'Eu-0092 – 11. Januar 1896 – Hückeswagen', meta:'11.01.1896 · von Eugenie de Gruyter an Walter de Gruyter' },
-          { kind:'letter', title:'Eu-0101 – 3. März 1896 – Ruhrort', meta:'03.03.1896 · von Eugenie de Gruyter an Walter de Gruyter' },
-        ],
-      };
-    }
-    return {
-      badge:'Lesereise',
-      title:'Feldpost: Herbert an der Westfront 1914–1918',
-      dateVerb:'zusammengestellt am', date:'11. Juni 2026', introItalic:true,
-      intro:'Herbert Cram schreibt aus den Schützengräben nach Hause – an seine Frau Clara und seine Mutter Marie. Über 440 Feldpostbriefe in vier Jahren, allein 349 im Jahr 1918. Zwischen Pflichterfüllung und Sehnsucht: »In 10 Minuten gehe ich in Stellung zum ehrenvollen, heissen und schweren Kampfe.« Und kurz vor dem Waffenstillstand: »ich bin tatsächlich zu keiner Arbeit mehr zu brauchen, weil Du mir Tag u Nacht im Kopf herumspukst.«',
-      sectionHeading:null,
-      blocks:[
-        { kind:'narration', text:'Als die Mobilmachung am 1. August 1914 begann, wurde Herbert Cram eingezogen. Er war der Sohn von John James Cram aus Monterrey – aufgewachsen ohne den Vater, der in Mexiko lebte. Jetzt schrieb er selbst Feldpostbriefe. Die folgende Korrespondenz umfasst vier Kriegsjahre.' },
-        { kind:'letter', title:'H-0366 – 31. Oktober 1915 – Feldpost', meta:'31.10.1915 · von Herbert Cram an Clara Cram' },
-        { kind:'letter', title:'H-0367 – 20. Dezember 1915 – Feldpost', meta:'20.12.1915 · von Herbert Cram an Clara Cram' },
-        { kind:'narration', text:'1916. Die Schlachten bei Verdun und an der Somme fordern über eine Million Opfer. Herbert ist in Belgien stationiert. Er schreibt über Weihnachtsgrüße und Claras Ausflug nach Baden-Baden. Er schreibt alles – nur nicht über das, was er täglich vor Augen hat.' },
-        { kind:'letter', title:'H-0370 – 29. März 1916 – Feldpost', meta:'29.03.1916 · von Herbert Cram an Clara Cram' },
-        { kind:'letter', title:'H-0372 – 5. Mai 1916 – Feldpost', meta:'05.05.1916 · von Herbert Cram an Clara Cram' },
-        { kind:'letter', title:'H-0023 – 6. Juli 1916 – Feldpost', meta:'06.07.1916 · von Herbert Cram an Marie Cram' },
-        { kind:'note', text:'Herbert beschreibt einen gewaltigen Stadtbrand – Kathedrale, Warenhäuser. Vermutlich ein Ort in Belgien oder Nordfrankreich. Er schildert es nüchtern, fast wie ein Beobachter. Erst am Ende kommt ein Gruß an Clara.' },
-        { kind:'letter', title:'H-0014 – 21. Juli 1916 – Feldpost', meta:'21.07.1916 · von Herbert Cram an Marie Cram' },
-        { kind:'letter', title:'H-0015 – 21. Juli 1916 – Feldpost', meta:'21.07.1916 · von Herbert Cram an Marie Cram' },
-        { kind:'note', text:'Dieser Brief ist einer der eindringlichsten des Archivs. Herbert schrieb ihn am Morgen eines Gefechtstages – zehn Minuten, bevor er in Stellung ging. Er kehrte zurück.' },
-        { kind:'letter', title:'H-0016 – 22. Juli 1916 – Feldpost', meta:'22.07.1916 · von Herbert Cram an Marie Cram' },
-      ],
-    };
-  }
-
-  renderVals(){
-    const s = this.story();
-    const author = this.av('Marcel Raddatz');
-    const blocks = s.blocks.map(b => ({
-      ...b,
-      isNarration: b.kind==='narration',
-      isLetter: b.kind==='letter',
-      isNote: b.kind==='note',
-      iconEl: b.kind==='letter' ? React.createElement('img', { className:'dgicon', src:'assets/icons/Mail-MD.svg', style:{ width:18, height:18, opacity:.5 } }) : null,
-    }));
-    const introStyle = { fontFamily:'var(--font-serif)', fontSize:18, lineHeight:1.75, margin:'0', fontStyle: s.introItalic ? 'italic' : 'normal', color: s.introItalic ? 'var(--c-ink-2)' : 'var(--c-ink)' };
-    return {
-      badge:s.badge, title:s.title, intro:s.intro, introStyle,
-      bylineMeta: s.dateVerb + ' ' + s.date,
-      sectionHeading: s.sectionHeading,
-      author, blocks,
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Geschichten.dc.html

@@ -1,112 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="geschichten" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-
-    <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-      <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Sammlungen</div>
-        <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Geschichten</h1>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Kuratierte Erzählungen aus Briefen, Karten und Fotografien des Archivs.</p>
-      </div>
-      <button class="fa-link" style="display:inline-flex; align-items:center; gap:8px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 16px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Neue Geschichte</button>
-    </div>
-
-    <!-- filter -->
-    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px">
-      <div style="display:inline-flex; border:1px solid var(--c-line)">
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 16px; cursor:pointer">Alle</span>
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Veröffentlicht</span>
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">In Arbeit</span>
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Entwurf</span>
-      </div>
-      <button class="fa-link" style="display:flex; align-items:center; gap:8px; background:var(--c-surface); border:1px solid var(--c-line); padding:9px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer">
-        <img class="dgicon" src="assets/icons/Filter-MD.svg" style="width:15px; height:15px; opacity:.55"> Filter
-      </button>
-    </div>
-
-    <div style="display:grid; grid-template-columns:1fr 1fr; gap:18px">
-      <sc-for list="{{ stories }}" as="s" hint-placeholder-count="6">
-        <a href="Geschichte.dc.html" class="fa-link" style="display:flex; flex-direction:column; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:22px 22px 20px; text-decoration:none">
-          <div style="display:flex; gap:8px; margin-bottom:14px">
-            <sc-for list="{{ s.tags }}" as="t" hint-placeholder-count="2">
-              <span style="display:inline-flex; align-items:center; gap:6px; background:var(--c-muted); border:1px solid var(--c-line-2); padding:3px 9px; border-radius:4px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--c-ink)"><span style="{{ t.dot }}"></span>{{ t.l }}</span>
-            </sc-for>
-          </div>
-          <h3 style="font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--c-ink); margin:0 0 8px; line-height:1.2">{{ s.title }}</h3>
-          <p style="font-family:var(--font-serif); font-size:15px; line-height:1.55; color:var(--c-ink-2); margin:0 0 18px">{{ s.dek }}</p>
-          <div style="display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--c-line-2)">
-            <img class="dgicon" src="assets/icons/Calendar-Add-MD.svg" style="width:14px; height:14px; opacity:.5">
-            <span>{{ s.range }}</span><span>·</span><span>{{ s.docs }} Dokumente</span><span>·</span><span>{{ s.persons }} Personen</span>
-          </div>
-          <div style="display:flex; align-items:center; justify-content:space-between">
-            <div style="display:flex; padding-left:6px">
-              <sc-for list="{{ s.people }}" as="p" hint-placeholder-count="3">
-                <span style="{{ p.a26 }}">{{ p.initials }}</span>
-              </sc-for>
-            </div>
-            <span style="display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)"><span style="{{ s.statusDot }}"></span>{{ s.status }}</span>
-          </div>
-        </a>
-      </sc-for>
-    </div>
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name, a26:{ ...base, width:26, height:26, fontSize:10, marginLeft:-6, border:'2px solid var(--c-surface)' } };
-  }
-  avs(names){ return names.map(n => this.av(n)); }
-
-  stories(){
-    const raw = [
-      { title:'Die Briefe aus dem Harz', dek:'Eine Sommerkorrespondenz zwischen Frieda und ihrer Schwester, voller Wetterberichte und stiller Sehnsucht.', range:'1923–1925', docs:14, persons:4, status:'Veröffentlicht', tags:[{l:'Familie',d:'#5a8a6a'},{l:'Reise',d:'#c17a00'}], people:['Frieda Rose','Anna Bauer','Wilhelm Rose','Heinrich Rose'] },
-      { title:'Das Grundstück in Mariahilf', dek:'Ein Erbschaftsstreit, erzählt in nüchternen Geschäftsbriefen über drei Jahre.', range:'1925–1928', docs:9, persons:6, status:'In Arbeit', tags:[{l:'Recht',d:'#607080'},{l:'Wien',d:'#3060b0'}], people:['Otto Schmidt','Karl Müller','Margarete Hoffmann'] },
-      { title:'Wilhelms Lehrjahre', dek:'Briefe aus der Ausbildung — vom Heimweh bis zum ersten Lohn.', range:'1928–1931', docs:11, persons:3, status:'Entwurf', tags:[{l:'Arbeit',d:'#9a8040'}], people:['Wilhelm Rose','Frieda Rose'] },
-      { title:'Weihnachten bei den Roses', dek:'Glückwünsche und Grüße über drei Jahrzehnte hinweg gesammelt.', range:'1919–1948', docs:23, persons:9, status:'Veröffentlicht', tags:[{l:'Familie',d:'#5a8a6a'},{l:'Fest',d:'#c0446e'}], people:['Margarete Hoffmann','Heinrich Rose','Elise Vogt','Anna Bauer'] },
-      { title:'Postkarten einer Reise', dek:'Wien, Triest, Venedig — Ansichten und kurze Zeilen von unterwegs.', range:'1924', docs:7, persons:2, status:'In Arbeit', tags:[{l:'Reise',d:'#c17a00'}], people:['Karl Müller','Frieda Rose'] },
-      { title:'Stimmen aus dem Feld', dek:'Feldpost und Heimatbriefe der Jahre 1914 bis 1918.', range:'1914–1918', docs:18, persons:5, status:'Entwurf', tags:[{l:'Krieg',d:'#a0522d'}], people:['Heinrich Rose','Otto Schmidt','Wilhelm Rose'] },
-    ];
-    return raw.map(s => {
-      const sc = ({'Veröffentlicht':'#5a8a6a','In Arbeit':'#c17a00','Entwurf':'#607080'})[s.status] || '#607080';
-      return { ...s, people:this.avs(s.people),
-        statusDot:{ display:'inline-block', width:7, height:7, borderRadius:'999px', background:sc, flexShrink:0 },
-        tags:s.tags.map(t => ({ l:t.l, dot:{ display:'inline-block', width:7, height:7, borderRadius:'999px', background:t.d, flexShrink:0 } })) };
-    });
-  }
-
-  renderVals(){
-    return { stories: this.stories() };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Hilfe-Transkription.dc.html

@@ -1,174 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <!-- active="hilfe" is intentionally NOT a nav key → nothing in ArchiveHeader highlights -->
-  <dc-import name="ArchiveHeader" active="hilfe" hint-size="100%,68px"></dc-import>
-  <main style="max-width:880px; margin:0 auto; padding:40px 32px 80px">
-
-    <!-- §3 PageHeader -->
-    <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-      <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Hilfe</div>
-        <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Transkription</h1>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:560px">Damit alle Briefe einheitlich übertragen werden — gleich, wer am Schreibtisch sitzt — finden Sie hier die Konventionen für das Familienarchiv.</p>
-      </div>
-    </div>
-
-    <!-- intro paragraph (Tinos) -->
-    <p style="font-family:var(--font-serif); font-size:18px; line-height:1.75; color:var(--c-ink); margin:0 0 28px; max-width:760px">Die Briefe dieses Archivs sind in <em>Kurrent</em> und <em>Sütterlin</em> geschrieben — der deutschen Schreibschrift des späten 19. und frühen 20. Jahrhunderts. Übertragen Sie den Text so getreu wie möglich, ohne ihn zu modernisieren. Wo Sie unsicher sind, machen Sie die Unsicherheit sichtbar, statt sie zu verstecken. Diese Seite wächst mit: sobald wir eine neue Konvention beschließen, landet sie hier.</p>
-
-    <!-- Wikipedia / Weiterführend card (3px mint top) -->
-    <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px; margin-bottom:36px">
-      <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 12px">Weiterführend</h2>
-      <p style="font-family:var(--font-serif); font-size:16px; line-height:1.65; color:var(--c-ink-2); margin:0 0 16px">Die Kurrent- und Sütterlin-Alphabete sind bei Wikipedia ausführlich erklärt — mit Buchstabentafeln zum Vergleichen. Hier auf dieser Seite stehen nur unsere eigenen Vereinbarungen für dieses Archiv.</p>
-      <!-- EXTERNAL link: in production this carries rel="noopener noreferrer" + target="_blank" -->
-      <a href="https://de.wikipedia.org/wiki/Kurrentschrift" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--c-ink); text-decoration:underline; text-decoration-color:var(--c-accent); text-decoration-thickness:2px; text-underline-offset:3px">
-        <span>Kurrentschrift auf Wikipedia</span>
-        <img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:14px; height:14px; opacity:.5">
-      </a>
-    </div>
-
-    <!-- Rules section caption -->
-    <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 18px">Regeln für die Transkription</h2>
-
-    <!-- Rule cards (RichtlinienRuleCard pattern) -->
-    <div style="display:flex; flex-direction:column; gap:16px; margin-bottom:40px">
-      <sc-for list="{{ rules }}" as="r" hint-placeholder-count="6">
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:22px 24px">
-          <div style="display:flex; align-items:center; gap:12px; margin-bottom:10px">
-            <span style="width:36px; height:36px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); border-radius:2px; display:flex; align-items:center; justify-content:center">{{ r.iconEl }}</span>
-            <h3 style="font-family:var(--font-serif); font-size:20px; font-weight:700; color:var(--c-ink); margin:0; line-height:1.2">{{ r.title }}</h3>
-          </div>
-          <p style="font-family:var(--font-serif); font-size:16px; line-height:1.65; color:var(--c-ink-2); margin:0">{{ r.body }}</p>
-
-          <!-- example block on subtle --c-muted background: Kurrent snippet vs transcription -->
-          <sc-if value="{{ r.hasExample }}" hint-placeholder-val="{{ true }}">
-            <div style="background:var(--c-muted); border:1px solid var(--c-line-2); border-radius:2px; padding:14px 16px; margin-top:16px">
-              <div style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Beispiel</div>
-              <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap">
-                <span style="font-family:var(--font-serif); font-style:italic; font-size:17px; color:var(--c-ink-2); {{ r.inStyle }}">{{ r.in }}</span>
-                <img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:14px; height:14px; opacity:.4; flex-shrink:0">
-                <span style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink)">{{ r.out }}</span>
-              </div>
-            </div>
-          </sc-if>
-        </div>
-      </sc-for>
-    </div>
-
-    <!-- In Klärung section -->
-    <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 10px">In Klärung</h2>
-    <p style="font-family:var(--font-serif); font-size:16px; line-height:1.65; color:var(--c-ink-2); margin:0 0 16px; max-width:760px">Diese Fragen besprechen wir noch. Stoßen Sie beim Transkribieren darauf, treffen Sie eine plausible Wahl und notieren Sie sie im Kommentar des Blocks.</p>
-    <div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px">
-      <sc-for list="{{ klaerungChips }}" as="c" hint-placeholder-count="5">
-        <span style="display:inline-flex; align-items:center; gap:7px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:999px; padding:7px 14px">
-          <span style="width:7px; height:7px; border-radius:999px; background:#c17a00; flex-shrink:0"></span>
-          <span style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2)">{{ c }}</span>
-        </span>
-      </sc-for>
-    </div>
-
-    <!-- closing card -->
-    <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-      <div style="display:flex; align-items:center; gap:12px; margin-bottom:10px">
-        <span style="width:36px; height:36px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); border-radius:2px; display:flex; align-items:center; justify-content:center">
-          <img class="dgicon" src="assets/icons/Chat-MD.svg" style="width:18px; height:18px; opacity:.5">
-        </span>
-        <h3 style="font-family:var(--font-serif); font-size:20px; font-weight:700; color:var(--c-ink); margin:0; line-height:1.2">Fehlt eine Regel?</h3>
-      </div>
-      <p style="font-family:var(--font-serif); font-size:16px; line-height:1.65; color:var(--c-ink-2); margin:0">Stolpern Sie über eine Situation, die hier nicht steht — schreiben Sie einen Kommentar beim betreffenden Block. Wir sammeln die offenen Fälle und besprechen sie beim nächsten Familientreffen.</p>
-    </div>
-
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}">
-class Component extends DCLogic {
-  icon(src){
-    return React.createElement('img', { className:'dgicon', src:'assets/icons/' + src, style:{ width:18, height:18, opacity:.5 } });
-  }
-  renderVals(){
-    const rules = [
-      {
-        icon:'Mag-Glass-MD.svg',
-        title:'Nicht lesbare Wörter',
-        body:'Wenn Sie ein Wort beim besten Willen nicht entziffern können, schreiben Sie [unleserlich]. Lassen Sie nichts einfach weg — die Lücke fällt anderen sonst nicht auf.',
-        hasExample:true,
-        in:'…und ſende Dir ▢▢▢ Grüße',
-        out:'und sende Dir [unleserlich] Grüße',
-      },
-      {
-        icon:'Edit-Content-MD.svg',
-        title:'Durchgestrichene Wörter',
-        body:'Auch durchgestrichener Text gehört zum Brief. Übernehmen Sie ihn in eckigen Klammern mit dem Präfix „durchgestrichen".',
-        hasExample:true,
-        in:'der Text',
-        inStrike:true,
-        out:'[durchgestrichen: der Text]',
-      },
-      {
-        icon:'Check-MD.svg',
-        title:'Das lange s (ſ)',
-        body:'Das ſ ist nur eine alte Schriftform des Buchstabens s — kein eigener Laut. Schreiben Sie immer ein normales s.',
-        hasExample:true,
-        in:'Straße, Poſthaus, Schloſs',
-        out:'Straße, Posthaus, Schloss',
-      },
-      {
-        icon:'View-More-MD.svg',
-        title:'Unsichere Lesart',
-        body:'Wenn Sie ein Wort oder einen Namen zu erkennen meinen, aber nicht sicher sind, ergänzen Sie ein Fragezeichen in eckigen Klammern direkt dahinter.',
-        hasExample:true,
-        in:'Grüße an Tante Mar…',
-        out:'Grüße an Tante [Marie?]',
-      },
-      {
-        icon:'Edit-Content-MD.svg',
-        title:'Originalschreibung bewahren',
-        body:'Übernehmen Sie Rechtschreibung, Zeichensetzung und alte Wortformen genau so, wie sie dastehen. Modernisieren Sie nicht. Anführungen setzen Sie als „…", längere wörtliche Reden bleiben unverändert.',
-        hasExample:true,
-        in:'Theil, Thür, giebt es',
-        out:'Theil, Thür, giebt es',
-      },
-      {
-        icon:'Chat-MD.svg',
-        title:'Dialekt, Fremdwörter, Zitate',
-        body:'Plattdeutsch, Französisch, lateinische Phrasen — wörtlich übernehmen, genau wie sie geschrieben stehen. Übersetzen Sie nicht und glätten Sie nichts.',
-        hasExample:false,
-      },
-    ];
-
-    const mapped = rules.map(r => ({
-      ...r,
-      iconEl: this.icon(r.icon),
-      inStyle: r.inStrike ? 'text-decoration:line-through' : '',
-    }));
-
-    return {
-      rules: mapped,
-      klaerungChips: ['Abkürzungen', 'Datumsformate', 'Originale Zeilenumbrüche', 'Alte Groß- und Kleinschreibung'],
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/PersonDetail.dc.html

@@ -1,273 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-  @media (max-width: 760px){ .pd-grid{ grid-template-columns:1fr !important } }
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="personen" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-
-    <!-- PageHeader (§3) -->
-    <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-      <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Person</div>
-        <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">{{ person.name }}</h1>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">{{ person.lede }}</p>
-      </div>
-      <button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Bearbeiten</button>
-    </div>
-
-    <!-- 2-column layout: 340px left, flexible right; wraps on narrow -->
-    <div class="pd-grid" style="display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start">
-
-      <!-- ════════ LEFT COLUMN ════════ -->
-      <div style="display:flex; flex-direction:column; gap:24px">
-
-        <!-- Identity card -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-          <div style="display:flex; align-items:flex-start; gap:14px">
-            <span style="{{ person.a48 }}">{{ person.initials }}</span>
-            <div style="flex:1; min-width:0">
-              <h2 style="font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--c-ink); margin:0; line-height:1.2">{{ person.name }}</h2>
-              <sc-if value="{{ person.badge }}" hint-placeholder-val="{{ false }}">
-                <span style="{{ person.badge.style }}">{{ person.badge.label }}</span>
-              </sc-if>
-            </div>
-          </div>
-
-          <sc-if value="{{ person.alias }}" hint-placeholder-val="{{ false }}">
-            <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:14px 0 0">„{{ person.alias }}"</p>
-          </sc-if>
-
-          <p style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3); margin:12px 0 0">
-            <span aria-hidden="true">*</span> {{ person.birthYear }} <span style="margin:0 4px">–</span> <span aria-hidden="true">†</span> {{ person.deathYear }}
-          </p>
-
-          <div style="height:1px; background:var(--c-line-2); margin:18px 0"></div>
-
-          <!-- MetaLine (§8) -->
-          <div style="display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">
-            <img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:14px; height:14px; opacity:.5">
-            <span>{{ person.letters }} Briefe</span><span>·</span><span>{{ person.docs }} Dokumente</span>
-          </div>
-        </div>
-
-        <!-- Namensverlauf card -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-          <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Namensverlauf</h2>
-          <ol style="list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px">
-            <sc-for list="{{ nameHistory }}" as="n" hint-placeholder-count="3">
-              <li style="display:flex; align-items:baseline; gap:10px">
-                <span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); white-space:nowrap; min-width:74px">{{ n.kind }}</span>
-                <span style="font-family:var(--font-serif); font-size:15px; color:var(--c-ink)">{{ n.name }}</span>
-                <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-left:auto; white-space:nowrap">{{ n.year }}</span>
-              </li>
-            </sc-for>
-          </ol>
-        </div>
-      </div>
-
-      <!-- ════════ RIGHT COLUMN ════════ -->
-      <div style="display:flex; flex-direction:column; gap:24px; min-width:0">
-
-        <!-- Korrespondenten card -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-          <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Korrespondenten</h2>
-          <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px">
-            <sc-for list="{{ correspondents }}" as="c" hint-placeholder-count="5">
-              <a href="#" class="fa-link" style="display:flex; align-items:center; gap:12px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; padding:8px 12px; text-decoration:none">
-                <span style="{{ c.a40 }}">{{ c.initials }}</span>
-                <div style="flex:1; min-width:0">
-                  <div style="font-family:var(--font-serif); font-size:15px; color:var(--c-ink); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis">{{ c.name }}</div>
-                  <div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-top:2px">{{ c.meta }}</div>
-                </div>
-              </a>
-            </sc-for>
-          </div>
-        </div>
-
-        <!-- Beziehungen card -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-          <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Beziehungen</h2>
-          <ul style="list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px">
-            <sc-for list="{{ relationships }}" as="r" hint-placeholder-count="4">
-              <li style="display:flex; align-items:center; gap:12px">
-                <span style="flex-shrink:0; min-width:96px; background:var(--c-muted); color:var(--c-ink-2); border:1px solid var(--c-line); border-radius:4px; padding:4px 10px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-align:center">{{ r.role }}</span>
-                <a href="#" class="fa-link" style="flex:1; min-width:0; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis">{{ r.name }}</a>
-                <span style="flex-shrink:0; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); white-space:nowrap">{{ r.dates }}</span>
-              </li>
-            </sc-for>
-          </ul>
-        </div>
-
-        <!-- Briefe — Gesendet -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-          <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px">
-            <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0">Briefe — Gesendet</h2>
-            <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ sentCount }} gesamt</span>
-          </div>
-          <div style="display:flex; flex-direction:column; gap:10px">
-            <sc-for list="{{ sentLetters }}" as="b" hint-placeholder-count="4">
-              <a href="#" class="fa-link" style="display:flex; align-items:center; gap:16px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; padding:12px 16px; text-decoration:none">
-                <span style="width:40px; height:40px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); display:flex; align-items:center; justify-content:center">{{ b.iconEl }}</span>
-                <div style="flex:1; min-width:0">
-                  <div style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink); line-height:1.3">{{ b.title }}</div>
-                  <div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:3px">{{ b.meta }}</div>
-                </div>
-                <img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:18px; height:18px; opacity:.4; flex-shrink:0">
-              </a>
-            </sc-for>
-          </div>
-        </div>
-
-        <!-- Briefe — Empfangen -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-          <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px">
-            <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0">Briefe — Empfangen</h2>
-            <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ receivedCount }} gesamt</span>
-          </div>
-          <div style="display:flex; flex-direction:column; gap:10px">
-            <sc-for list="{{ receivedLetters }}" as="b" hint-placeholder-count="4">
-              <a href="#" class="fa-link" style="display:flex; align-items:center; gap:16px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; padding:12px 16px; text-decoration:none">
-                <span style="width:40px; height:40px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); display:flex; align-items:center; justify-content:center">{{ b.iconEl }}</span>
-                <div style="flex:1; min-width:0">
-                  <div style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink); line-height:1.3">{{ b.title }}</div>
-                  <div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:3px">{{ b.meta }}</div>
-                </div>
-                <img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:18px; height:18px; opacity:.4; flex-shrink:0">
-              </a>
-            </sc-for>
-          </div>
-        </div>
-
-        <!-- Geschichten card -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-          <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Geschichten</h2>
-          <div style="display:flex; flex-direction:column; gap:10px">
-            <sc-for list="{{ stories }}" as="g" hint-placeholder-count="2">
-              <a href="#" class="fa-link" style="display:flex; align-items:center; gap:16px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; padding:12px 16px; text-decoration:none">
-                <span style="width:40px; height:40px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); display:flex; align-items:center; justify-content:center">{{ g.iconEl }}</span>
-                <div style="flex:1; min-width:0">
-                  <div style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink); line-height:1.3">{{ g.title }}</div>
-                  <div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:3px">{{ g.meta }}</div>
-                </div>
-                <img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:18px; height:18px; opacity:.4; flex-shrink:0">
-              </a>
-            </sc-for>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name,
-      a26:{ ...base, width:26, height:26, fontSize:10 },
-      a28:{ ...base, width:28, height:28, fontSize:11 },
-      a40:{ ...base, width:40, height:40, fontSize:14 },
-      a48:{ ...base, width:48, height:48, fontSize:16 } };
-  }
-
-  mailIcon(){
-    return React.createElement('img', { className:'dgicon', src:'assets/icons/Mail-MD.svg', style:{ width:18, height:18, opacity:.5 } });
-  }
-  bookIcon(){
-    return React.createElement('img', { className:'dgicon', src:'assets/icons/Library-MD.svg', style:{ width:18, height:18, opacity:.5 } });
-  }
-
-  renderVals(){
-    const person = {
-      ...this.av('Clara Cram'),
-      lede:'Ehefrau von Herbert · 1885–1962',
-      alias:'Clärchen',
-      birthYear:'1885',
-      deathYear:'1962',
-      letters:118,
-      docs:142,
-      badge:null,
-    };
-
-    const nameHistory = [
-      { kind:'Geburtsname', name:'Clara de Gruyter', year:'1885' },
-      { kind:'Verheiratet', name:'Clara Cram',       year:'1908' },
-      { kind:'Verwitwet',   name:'Clara Cram, geb. de Gruyter', year:'1949' },
-    ];
-
-    const correspondents = [
-      { name:'Herbert Cram',      meta:'74 Briefe' },
-      { name:'Marie Cram',        meta:'19 Briefe' },
-      { name:'Eugenie de Gruyter', meta:'12 Briefe' },
-      { name:'Hannemarie Cram',   meta:'8 Briefe' },
-      { name:'Walter de Gruyter', meta:'5 Briefe' },
-    ].map(c => ({ ...this.av(c.name), meta:c.meta }));
-
-    const relationships = [
-      { role:'Ehemann',  name:'Herbert Cram',       dates:'1908–1949' },
-      { role:'Tochter',  name:'Hannemarie Cram',    dates:'* 1910' },
-      { role:'Tochter',  name:'Clara-Eugenie Cram', dates:'* 1913' },
-      { role:'Sohn',     name:'Kurt-Georg Cram',    dates:'* 1916' },
-      { role:'Mutter',   name:'Eugenie de Gruyter', dates:'1860–1934' },
-    ];
-
-    const sentCount = 74;
-    const sentLetters = [
-      { title:'C-0211 – 4. März 1916 – Wiesbaden',  meta:'04.03.1916 · von Clara Cram an Herbert Cram' },
-      { title:'C-0214 – 19. Mai 1916 – Wiesbaden',  meta:'19.05.1916 · von Clara Cram an Herbert Cram' },
-      { title:'C-0240 – 2. Oktober 1917 – Bad Ems', meta:'02.10.1917 · von Clara Cram an Herbert Cram' },
-      { title:'C-0098 – 11. Juli 1918 – Wiesbaden', meta:'11.07.1918 · von Clara Cram an Marie Cram' },
-    ];
-
-    const receivedCount = 44;
-    const receivedLetters = [
-      { title:'H-0366 – 31. Oktober 1915 – Feldpost', meta:'31.10.1915 · von Herbert Cram an Clara Cram' },
-      { title:'H-0370 – 29. März 1916 – Feldpost',    meta:'29.03.1916 · von Herbert Cram an Clara Cram' },
-      { title:'Eu-0341 – 8. April 1917 – Ruhrort',    meta:'08.04.1917 · von Eugenie de Gruyter an Clara Cram' },
-      { title:'H-0405 – 2. November 1918 – Feldpost', meta:'02.11.1918 · von Herbert Cram an Clara Cram' },
-    ];
-
-    const stories = [
-      { title:'Feldpost: Herbert an der Westfront 1914–1918', meta:'Lesereise · 18 Briefe' },
-      { title:'Die Kinder: Briefe an und über Hannemarie, Clara-Eugenie und Kurt-Georg', meta:'Sammlung · 31 Dokumente' },
-    ];
-
-    const withMail = (arr) => arr.map(b => ({ ...b, iconEl:this.mailIcon() }));
-    const withBook = (arr) => arr.map(g => ({ ...g, iconEl:this.bookIcon() }));
-
-    return {
-      person, nameHistory, correspondents, relationships,
-      sentCount, sentLetters:withMail(sentLetters),
-      receivedCount, receivedLetters:withMail(receivedLetters),
-      stories:withBook(stories),
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/PersonForm.dc.html

@@ -1,268 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="personen" hint-size="100%,68px"></dc-import>
-  <main style="max-width:780px; margin:0 auto; padding:40px 32px 80px">
-
-    <!-- back link -->
-    <a href="Personen.dc.html" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none; margin-bottom:24px">← Zurück zu Personen</a>
-
-    <!-- PageHeader (§3) -->
-    <div style="margin-bottom:30px; border-left:4px solid var(--c-accent); padding-left:18px">
-      <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">{{ eyebrow }}</div>
-      <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">{{ title }}</h1>
-      <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">{{ lede }}</p>
-    </div>
-
-    <!-- ─── Stammdaten ─── -->
-    <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-      <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Stammdaten</h2>
-
-      <!-- Personentyp — segmented control (§5/§6) -->
-      <div style="margin-bottom:22px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Personentyp</div>
-        <div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden">
-          <sc-for list="{{ typeSegments }}" as="seg" hint-placeholder-count="4">
-            <span class="fa-link" style="{{ seg.style }}">{{ seg.label }}</span>
-          </sc-for>
-        </div>
-      </div>
-
-      <!-- Anrede/Titel + Vorname -->
-      <div style="display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px">
-        <label style="display:block">
-          <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Anrede / Titel</span>
-          <input value="{{ f.title }}" placeholder="z.B. Frau, Dr." style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-        </label>
-        <label style="display:block">
-          <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Vorname *</span>
-          <input value="{{ f.firstName }}" placeholder="z.B. Clara" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-        </label>
-      </div>
-
-      <!-- Nachname -->
-      <label style="display:block; margin-bottom:18px">
-        <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Nachname *</span>
-        <input value="{{ f.lastName }}" placeholder="z.B. Cram" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-      </label>
-
-      <!-- Aliasnamen -->
-      <label style="display:block; margin-bottom:18px">
-        <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Aliasnamen</span>
-        <input value="{{ f.alias }}" placeholder="z.B. Clärchen, geb. de Gruyter" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-      </label>
-
-      <!-- Lebensdaten: Geburtsdatum + Sterbedatum with precision hint -->
-      <div style="display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px">
-        <div>
-          <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Geburtsdatum</span>
-          <input value="{{ f.birthDate }}" placeholder="TT.MM.JJJJ" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-          <div style="display:flex; align-items:center; gap:8px; margin-top:7px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">
-            <span>Genauigkeit:</span><span style="color:var(--c-ink-2)">Tag</span><span>·</span><span>Monat</span><span>·</span><span>Jahr</span>
-          </div>
-        </div>
-        <div>
-          <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Sterbedatum</span>
-          <input value="{{ f.deathDate }}" placeholder="TT.MM.JJJJ" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-          <div style="display:flex; align-items:center; gap:8px; margin-top:7px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">
-            <span>Genauigkeit:</span><span>Tag</span><span>·</span><span>Monat</span><span>·</span><span style="color:var(--c-ink-2)">Jahr</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Generation (select) -->
-      <label style="display:block; margin-bottom:18px">
-        <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Generation</span>
-        <div style="position:relative">
-          <select style="width:100%; appearance:none; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px; cursor:pointer; min-height:44px">
-            <option>Keine Generation</option>
-            <option>G 0</option><option>G 1</option><option selected>G 2</option>
-            <option>G 3</option><option>G 4</option><option>G 5</option><option>G 6</option>
-          </select>
-          <span style="position:absolute; right:14px; top:50%; transform:translateY(-50%); font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); pointer-events:none">▾</span>
-        </div>
-        <p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:7px 0 0">Ordnet die Person einer Generation im Stammbaum zu.</p>
-      </label>
-
-      <!-- Notizen (textarea) -->
-      <label style="display:block">
-        <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Notizen</span>
-        <textarea rows="4" placeholder="Anmerkungen zu dieser Person…" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; line-height:1.6; color:var(--c-ink); outline:none; border-radius:2px">{{ f.notes }}</textarea>
-      </label>
-    </div>
-
-    <!-- ─── Namensverlauf ─── -->
-    <div style="margin-top:24px; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-      <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Namensverlauf</h2>
-
-      <sc-if value="{{ hasAliases }}" hint-placeholder-val="{{ true }}">
-        <div style="margin-bottom:18px">
-          <sc-for list="{{ aliasRows }}" as="a" hint-placeholder-count="3">
-            <div style="display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--c-line-2)">
-              <div style="display:flex; align-items:baseline; gap:10px; min-width:0">
-                <span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); white-space:nowrap">{{ a.kind }}</span>
-                <span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">{{ a.name }}</span>
-              </div>
-              <a href="#" title="Diesen Namen entfernen" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Entfernen</a>
-            </div>
-          </sc-for>
-        </div>
-      </sc-if>
-      <sc-if value="{{ noAliases }}" hint-placeholder-val="{{ false }}">
-        <div style="border:1px dashed var(--c-line); border-radius:2px; padding:28px 24px; text-align:center; margin-bottom:18px">
-          <div style="font-family:var(--font-serif); font-size:18px; color:var(--c-ink); margin-bottom:6px">Noch keine früheren Namen erfasst.</div>
-          <div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Ergänzen Sie Geburts- oder Ehenamen unten…</div>
-        </div>
-      </sc-if>
-
-      <!-- add row -->
-      <div style="border-top:1px solid var(--c-line); padding-top:18px">
-        <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:12px">Namen hinzufügen</div>
-        <div style="display:grid; grid-template-columns:160px 1fr 1fr auto; gap:12px; align-items:end">
-          <label style="display:block">
-            <span style="display:block; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Art</span>
-            <div style="position:relative">
-              <select style="width:100%; appearance:none; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 36px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px; cursor:pointer; min-height:44px">
-                <option>Geburtsname</option><option>Ehename (verwitwet)</option><option>Ehename (geschieden)</option><option>Sonstiger</option>
-              </select>
-              <span style="position:absolute; right:12px; top:50%; transform:translateY(-50%); font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); pointer-events:none">▾</span>
-            </div>
-          </label>
-          <label style="display:block">
-            <span style="display:block; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Nachname</span>
-            <input placeholder="z.B. de Gruyter" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-          </label>
-          <label style="display:block">
-            <span style="display:block; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Vorname</span>
-            <input placeholder="z.B. Clara" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-          </label>
-          <button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Hinzufügen</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- ─── Zusammenführen (danger zone) — edit only ─── -->
-    <sc-if value="{{ isEdit }}" hint-placeholder-val="{{ true }}">
-      <div style="margin-top:24px; background:var(--c-surface); border:1px solid var(--c-danger); border-top:3px solid var(--c-danger); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-        <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-danger); margin:0 0 6px">Zusammenführen</h2>
-        <p style="font-family:var(--font-serif); font-size:15px; line-height:1.6; color:var(--c-ink-2); margin:0 0 18px; max-width:520px">Diese Person in eine andere überführen. Alle Briefe und Verknüpfungen wandern zur Zielperson — <span style="font-style:italic">{{ title }}</span> wird danach gelöscht.</p>
-
-        <div style="display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap">
-          <label style="display:block; flex:1; min-width:240px">
-            <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); margin-bottom:6px">Zielperson</span>
-            <div style="position:relative">
-              <input placeholder="Person suchen…" style="width:100%; border:1px solid var(--c-danger); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-              <img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-            </div>
-          </label>
-          <button disabled class="fa-link" title="Wählen Sie zuerst eine Zielperson" style="background:var(--c-surface); color:var(--c-danger); border:1px solid var(--c-danger); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:2px; opacity:.4; cursor:not-allowed">Zusammenführen</button>
-        </div>
-      </div>
-    </sc-if>
-
-    <!-- ─── Save bar ─── -->
-    <div style="margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:16px 24px">
-      <a href="{{ discardHref }}" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">Verwerfen</a>
-      <div style="display:flex; align-items:center; gap:18px">
-        <sc-if value="{{ isEdit }}" hint-placeholder-val="{{ true }}">
-          <a href="#" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Löschen</a>
-        </sc-if>
-        <button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">{{ saveLabel }}</button>
-      </div>
-    </div>
-
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1180,&quot;height&quot;:1500},&quot;variant&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;neu&quot;,&quot;bearbeiten&quot;],&quot;default&quot;:&quot;bearbeiten&quot;,&quot;tsType&quot;:&quot;string&quot;}}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name,
-      a26:{ ...base, width:26, height:26, fontSize:10 },
-      a28:{ ...base, width:28, height:28, fontSize:11 },
-      a40:{ ...base, width:40, height:40, fontSize:14 },
-      a48:{ ...base, width:48, height:48, fontSize:16 } };
-  }
-
-  segments(activeLabel){
-    const labels = ['Person','Institution','Gruppe','Unbekannt'];
-    return labels.map((label, i) => {
-      const active = label === activeLabel;
-      const style = {
-        fontFamily:'var(--font-sans)', fontSize:12, fontWeight:700, letterSpacing:'.08em',
-        textTransform:'uppercase', padding:'10px 16px', cursor:'pointer',
-        background: active ? 'var(--c-primary)' : 'var(--c-surface)',
-        color: active ? 'var(--c-primary-fg)' : 'var(--c-ink-2)',
-      };
-      if (i > 0) style.borderLeft = '1px solid var(--c-line)';
-      return { label, style };
-    });
-  }
-
-  renderVals(){
-    const variant = this.props.variant || 'bearbeiten';
-    const isEdit = variant === 'bearbeiten';
-
-    const editing = {
-      title:'Frau', firstName:'Clara', lastName:'Cram', alias:'Clärchen, geb. de Gruyter',
-      birthDate:'24.09.1871', deathDate:'1953',
-      notes:'Ehefrau von Herbert Cram. Über 440 Feldpostbriefe an sie gerichtet (1914–1918). Tochter von Walter und Eugenie de Gruyter.',
-    };
-    const blank = {
-      title:'', firstName:'', lastName:'', alias:'',
-      birthDate:'', deathDate:'', notes:'',
-    };
-    const f = isEdit ? editing : blank;
-
-    const aliasRows = [
-      { kind:'Geburtsname', name:'Clara de Gruyter' },
-      { kind:'Ehename', name:'Clara Cram' },
-    ];
-
-    const fullName = ((f.firstName + ' ' + f.lastName).trim()) || 'Neue Person';
-
-    return {
-      isEdit,
-      eyebrow: isEdit ? 'Person bearbeiten' : 'Neue Person',
-      title: isEdit ? fullName : 'Neue Person',
-      lede: isEdit
-        ? 'Pflegen Sie Stammdaten, Lebensdaten und Namensverlauf dieser Person.'
-        : 'Legen Sie eine neue Person, Institution oder Gruppe für das Archiv an.',
-      f,
-      typeSegments: this.segments('Person'),
-      hasAliases: isEdit,
-      noAliases: !isEdit,
-      aliasRows,
-      discardHref: isEdit ? 'Person.dc.html' : 'Personen.dc.html',
-      saveLabel: isEdit ? 'Änderungen speichern' : 'Person anlegen',
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/PersonReview.dc.html

@@ -1,170 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="personen" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-
-    <!-- PAGE HEADER (§3) -->
-    <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-      <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Prüfen</div>
-        <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Personen prüfen</h1>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Vom Import erzeugte, noch nicht bestätigte Personen. Bitte prüfen Sie jeden Eintrag — bestätigen, umbenennen, zusammenführen oder löschen.</p>
-      </div>
-      <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">12 zu prüfen</span>
-    </div>
-
-    <!-- REVIEW ROWS -->
-    <div style="display:flex; flex-direction:column; gap:14px">
-      <sc-for list="{{ rows }}" as="r" hint-placeholder-count="4">
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:18px 20px">
-
-          <!-- ROW HEADER (always shown) -->
-          <div style="display:flex; align-items:center; gap:14px; flex-wrap:wrap">
-            <!-- 40px MUTED avatar — deliberate "unbestätigt" signal, never a colored avatar -->
-            <span style="width:40px; height:40px; flex-shrink:0; border-radius:999px; background:var(--c-muted); display:inline-flex; align-items:center; justify-content:center" title="Unbestätigt">
-              <img class="dgicon" src="assets/icons/Account-MD.svg" style="width:20px; height:20px; opacity:.5">
-            </span>
-
-            <div style="flex:1; min-width:0">
-              <div style="font-family:var(--font-serif); font-size:19px; font-weight:700; color:var(--c-ink); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">{{ r.name }}</div>
-              <!-- MetaLine (§8) -->
-              <div style="display:flex; align-items:center; gap:8px; margin-top:4px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">
-                <img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:14px; height:14px; opacity:.5">
-                <span>{{ r.docs }} Dokumente</span><span>·</span><span>zuerst gesehen {{ r.firstSeen }}</span>
-              </div>
-            </div>
-
-            <!-- ACTION CLUSTER — segmented-style button group + danger -->
-            <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap">
-              <div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden">
-                <span class="fa-link" style="min-height:44px; display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 15px; cursor:pointer">Bestätigen</span>
-                <span class="fa-link" style="min-height:44px; display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 15px; border-left:1px solid var(--c-line); cursor:pointer">Umbenennen</span>
-                <span class="fa-link" style="min-height:44px; display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 15px; border-left:1px solid var(--c-line); cursor:pointer">Zusammenführen</span>
-              </div>
-              <a href="#" class="fa-link" style="min-height:44px; display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none; padding:0 6px">Löschen</a>
-            </div>
-          </div>
-
-          <!-- UMBENENNEN sub-panel (§7 fields) -->
-          <sc-if value="{{ r.rename }}" hint-placeholder-val="{{ false }}">
-            <div style="margin-top:16px; background:var(--c-muted); border-radius:2px; padding:18px 18px 16px">
-              <div style="display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap">
-                <label style="display:block; flex:1; min-width:160px">
-                  <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Vorname</span>
-                  <input value="Margarethe" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-                </label>
-                <label style="display:block; flex:1; min-width:160px">
-                  <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Nachname</span>
-                  <input value="Cram" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-                </label>
-                <div style="display:flex; gap:10px">
-                  <button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
-                  <button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Abbrechen</button>
-                </div>
-              </div>
-            </div>
-          </sc-if>
-
-          <!-- ZUSAMMENFÜHREN sub-panel — typeahead + disabled-until-selected danger merge -->
-          <sc-if value="{{ r.merge }}" hint-placeholder-val="{{ false }}">
-            <div style="margin-top:16px; background:var(--c-muted); border-radius:2px; padding:18px 18px 16px">
-              <div style="display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap">
-                <label style="display:block; flex:1; min-width:220px">
-                  <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Mit welcher Person zusammenführen?</span>
-                  <div style="position:relative">
-                    <input placeholder="z.B. Clara Cram, Herbert Cram…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-                    <img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-                  </div>
-                </label>
-                <button title="Bitte zuerst eine Zielperson wählen" style="background:var(--c-danger); color:#fff; border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:not-allowed; border-radius:2px; opacity:.4">Zusammenführen</button>
-              </div>
-            </div>
-          </sc-if>
-
-        </div>
-      </sc-for>
-    </div>
-
-    <!-- EMPTY STATE (§10) — shown as a quiet reference of the "nothing left" terminal state -->
-    <div style="margin-top:14px; border:1px dashed var(--c-line); border-radius:2px; padding:48px 24px; text-align:center">
-      <div style="font-family:var(--font-serif); font-size:20px; color:var(--c-ink); margin-bottom:8px">Keine Personen zu prüfen.</div>
-      <div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Alle Einträge wurden bestätigt — neue erscheinen nach dem nächsten Import…</div>
-    </div>
-
-    <!-- PAGINATION FOOTER -->
-    <div style="margin-top:28px; display:flex; align-items:center; justify-content:center; gap:8px">
-      <a href="#" class="fa-link" style="min-height:44px; display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); border:1px solid var(--c-line); background:var(--c-surface); padding:10px 16px; text-decoration:none; border-radius:2px">Zurück</a>
-      <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:11px 15px; border-radius:2px">1</span>
-      <a href="#" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); border:1px solid var(--c-line); background:var(--c-surface); padding:11px 15px; text-decoration:none; border-radius:2px">2</span>
-      <a href="#" class="fa-link" style="min-height:44px; display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); border:1px solid var(--c-line); background:var(--c-surface); padding:10px 16px; text-decoration:none; border-radius:2px">Weiter</a>
-    </div>
-
-  </main>
-
-  <!-- CONFIRM DIALOG OVERLAY (destructive delete) — bg-black/20, NO blur (§8) -->
-  <div style="position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center; padding:24px">
-    <div style="width:100%; max-width:440px; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-md); border-radius:2px; padding:28px 26px">
-      <h2 style="font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--c-ink); margin:0 0 10px; line-height:1.2">Person löschen</h2>
-      <p style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink-2); margin:0 0 22px; line-height:1.55">Diese Person wird endgültig gelöscht. Dokumentverweise bleiben erhalten, verlieren aber diese Person.</p>
-      <div style="display:flex; justify-content:flex-end; gap:10px">
-        <button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Abbrechen</button>
-        <button class="fa-link" style="background:var(--c-danger); color:#fff; border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Löschen</button>
-      </div>
-    </div>
-  </div>
-
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name,
-      a26:{ ...base, width:26, height:26, fontSize:10 },
-      a28:{ ...base, width:28, height:28, fontSize:11 },
-      a40:{ ...base, width:40, height:40, fontSize:14 },
-      a48:{ ...base, width:48, height:48, fontSize:16 } };
-  }
-
-  rows(){
-    // Each row shows a different triage state across the list.
-    return [
-      { name:'Margarethe Cram',     docs:5,  firstSeen:'03.1916', rename:true,  merge:false }, // UMBENENNEN expanded
-      { name:'Unbekannter Absender', docs:8, firstSeen:'07.1917', rename:false, merge:false }, // IDLE
-      { name:'H. Cram',             docs:12, firstSeen:'11.1914', rename:false, merge:true  }, // ZUSAMMENFÜHREN expanded
-      { name:'Eugenie de Gruyter',  docs:3,  firstSeen:'02.1920', rename:false, merge:false }, // IDLE
-    ];
-  }
-
-  renderVals(){
-    return { rows: this.rows() };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Personen.dc.html

@@ -1,117 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="personen" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-
-    <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-      <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Verzeichnis</div>
-        <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Personen</h1>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Jede Hand, die schrieb oder genannt wurde — Absender, Empfänger, Erwähnte.</p>
-      </div>
-      <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">38 Personen</span>
-    </div>
-
-    <!-- search + filter -->
-    <div style="display:flex; align-items:center; gap:14px; margin-bottom:24px; flex-wrap:wrap">
-      <div style="position:relative; flex:1; min-width:240px">
-        <input placeholder="z.B. Oma Frieda, Onkel Karl…" style="width:100%; box-sizing:border-box; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:15px; color:var(--c-ink); outline:none; border-radius:2px">
-        <img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
-      </div>
-      <div style="display:inline-flex; border:1px solid var(--c-line)">
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:10px 16px; cursor:pointer">Alle</span>
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 16px; border-left:1px solid var(--c-line); cursor:pointer">Personen</span>
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 16px; border-left:1px solid var(--c-line); cursor:pointer">Institutionen</span>
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 16px; border-left:1px solid var(--c-line); cursor:pointer">Gruppen</span>
-      </div>
-    </div>
-
-    <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:18px">
-      <sc-for list="{{ people }}" as="p" hint-placeholder-count="9">
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:20px">
-          <div style="display:flex; align-items:flex-start; gap:14px">
-            <span style="{{ p.a48 }}">{{ p.initials }}</span>
-            <div style="flex:1; min-width:0">
-              <h3 style="font-family:var(--font-serif); font-size:19px; font-weight:700; color:var(--c-ink); margin:0; line-height:1.2">{{ p.name }}</h3>
-              <div style="margin-top:3px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ p.relation }}</div>
-            </div>
-            <sc-if value="{{ p.badge }}" hint-placeholder-val="{{ false }}">
-              <span style="{{ p.badge.style }}">{{ p.badge.label }}</span>
-            </sc-if>
-          </div>
-          <div style="height:1px; background:var(--c-line-2); margin:16px 0"></div>
-          <div style="display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">
-            <img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:14px; height:14px; opacity:.5">
-            <span>{{ p.letters }} Briefe</span><span>·</span><span>{{ p.docCount }} Dokumente</span>
-          </div>
-        </div>
-      </sc-for>
-    </div>
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name, a48:{ ...base, width:48, height:48, fontSize:16 } };
-  }
-
-  people(){
-    const badge = (type) => {
-      const map = {
-        Institution:{ bg:'var(--c-badge-institution-bg)', tc:'var(--c-badge-institution-text)', bd:'var(--c-badge-institution-border)' },
-        Gruppe:{ bg:'var(--c-badge-group-bg)', tc:'var(--c-badge-group-text)', bd:'var(--c-badge-group-border)' },
-        Unbekannt:{ bg:'var(--c-badge-unknown-bg)', tc:'var(--c-badge-unknown-text)', bd:'var(--c-badge-unknown-border)' },
-      };
-      const m = map[type]; if(!m) return null;
-      return { label:type, style:{ flexShrink:0, alignSelf:'flex-start', whiteSpace:'nowrap', background:m.bg, color:m.tc, border:'1px solid '+m.bd, padding:'3px 9px', borderRadius:4, fontFamily:'var(--font-sans)', fontSize:10, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase' } };
-    };
-    const raw = [
-      { name:'Frieda Rose', relation:'Großmutter', letters:42, docs:64, type:'Person' },
-      { name:'Heinrich Rose', relation:'Großvater', letters:31, docs:48, type:'Person' },
-      { name:'Anna Bauer', relation:'Schwester von Frieda', letters:23, docs:29, type:'Person' },
-      { name:'Wilhelm Rose', relation:'Sohn', letters:18, docs:22, type:'Person' },
-      { name:'Elise Vogt', relation:'Freundin der Familie', letters:11, docs:14, type:'Person' },
-      { name:'Karl Müller', relation:'Geschäftspartner', letters:9, docs:12, type:'Person' },
-      { name:'Margarete Hoffmann', relation:'Nachbarin', letters:6, docs:8, type:'Person' },
-      { name:'Otto Schmidt', relation:'Notar in Wien', letters:4, docs:5, type:'Person' },
-      { name:'Kaufhaus Mariahilf', relation:'Wien, VI. Bezirk', letters:3, docs:3, type:'Institution' },
-      { name:'Familie Rose', relation:'Sammeleintrag', letters:0, docs:31, type:'Gruppe' },
-      { name:'Unbekannter Absender', relation:'nicht zugeordnet', letters:5, docs:5, type:'Unbekannt' },
-    ];
-    return raw.map(p => ({ ...this.av(p.name), relation:p.relation, letters:p.letters, docCount:p.docs, badge:badge(p.type) }));
-  }
-
-  renderVals(){
-    return { people: this.people() };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Profil.dc.html

@@ -1,180 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="profil" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-
-    <!-- ============ VARIANT: profil (own settings) ============ -->
-    <sc-if value="{{ isProfil }}" hint-placeholder-val="{{ true }}">
-
-      <!-- PageHeader (§3) -->
-      <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-        <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-          <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Konto</div>
-          <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Profil</h1>
-          <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Verwalten Sie Ihre persönlichen Daten, Ihr Passwort und Ihre Benachrichtigungen.</p>
-        </div>
-      </div>
-
-      <!-- Success banner (token-driven: accent bg + accent border) -->
-      <div style="margin-bottom:24px; display:flex; align-items:center; gap:10px; background:var(--c-accent-bg); border:1px solid var(--c-accent); border-radius:2px; padding:12px 16px">
-        <img class="dgicon" src="assets/icons/Check-MD.svg" style="width:16px; height:16px; opacity:.5">
-        <span style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-2)">Ihre Änderungen wurden gespeichert.</span>
-      </div>
-
-      <!-- 2-col card grid -->
-      <div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:24px">
-
-        <!-- Persönliche Daten -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-          <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Persönliche Daten</h2>
-          <div style="display:flex; flex-direction:column; gap:16px">
-            <label style="display:block">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Vorname</span>
-              <input value="Marcel" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-            </label>
-            <label style="display:block">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Nachname</span>
-              <input value="Raddatz" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-            </label>
-            <label style="display:block">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">E-Mail</span>
-              <input type="email" value="marcel@raddatz.cloud" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-            </label>
-          </div>
-          <button class="fa-link" style="margin-top:20px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
-        </div>
-
-        <!-- Passwort ändern -->
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-          <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Passwort ändern</h2>
-          <div style="display:flex; flex-direction:column; gap:16px">
-            <label style="display:block">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Aktuelles Passwort</span>
-              <input type="password" value="passwort123" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-            </label>
-            <label style="display:block">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Neues Passwort</span>
-              <input type="password" value="passwort123" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-            </label>
-            <label style="display:block">
-              <span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Neues Passwort bestätigen</span>
-              <input type="password" value="passwort123" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
-            </label>
-          </div>
-          <button class="fa-link" style="margin-top:20px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Passwort ändern</button>
-        </div>
-      </div>
-
-      <!-- Benachrichtigungen -->
-      <div style="margin-top:24px; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
-        <h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 12px">Benachrichtigungen</h2>
-
-        <label class="fa-link" style="display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer; border-bottom:1px solid var(--c-line-2)">
-          <input type="checkbox" checked style="width:16px; height:16px; accent-color:var(--c-primary); flex-shrink:0">
-          <span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">E-Mail bei Antworten auf meine Beiträge</span>
-        </label>
-        <label class="fa-link" style="display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer">
-          <input type="checkbox" style="width:16px; height:16px; accent-color:var(--c-primary); flex-shrink:0">
-          <span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">E-Mail, wenn ich erwähnt werde</span>
-        </label>
-
-        <button class="fa-link" style="margin-top:16px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
-      </div>
-
-    </sc-if>
-
-    <!-- ============ VARIANT: oeffentlich (public profile) ============ -->
-    <sc-if value="{{ isOeffentlich }}" hint-placeholder-val="{{ false }}">
-
-      <!-- PageHeader (§3) — title = user name -->
-      <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-        <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-          <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Mitglied</div>
-          <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">{{ av.name }}</h1>
-          <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Mitglied des Familienarchivs.</p>
-        </div>
-      </div>
-
-      <!-- Centered profile card -->
-      <div style="max-width:480px; margin:0 auto">
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:32px 28px">
-          <!-- Avatar (§5 deterministic, a48) -->
-          <div style="display:flex; justify-content:center; margin-bottom:18px">
-            <span style="{{ av.a48 }}">{{ av.initials }}</span>
-          </div>
-          <!-- Name (Tinos) -->
-          <div style="text-align:center; margin-bottom:24px">
-            <h2 style="font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--c-ink); margin:0">{{ av.name }}</h2>
-          </div>
-          <!-- Field rows: caps eyebrow label over Tinos value -->
-          <div style="display:flex; flex-direction:column; gap:18px">
-            <div style="display:flex; flex-direction:column; gap:4px">
-              <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3)">E-Mail</span>
-              <span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">marcel@raddatz.cloud</span>
-            </div>
-            <div style="height:1px; background:var(--c-line-2)"></div>
-            <div style="display:flex; flex-direction:column; gap:4px">
-              <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3)">Kontakt</span>
-              <span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">Berlin · erreichbar per E-Mail</span>
-            </div>
-            <div style="height:1px; background:var(--c-line-2)"></div>
-            <div style="display:flex; flex-direction:column; gap:4px">
-              <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3)">Beigetreten</span>
-              <span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">März 2024</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-    </sc-if>
-
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{&quot;variant&quot;:&quot;profil&quot;}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name,
-      a26:{ ...base, width:26, height:26, fontSize:10 },
-      a28:{ ...base, width:28, height:28, fontSize:11 },
-      a40:{ ...base, width:40, height:40, fontSize:14 },
-      a48:{ ...base, width:48, height:48, fontSize:16 } };
-  }
-  renderVals(){
-    const variant = this.props.variant || 'profil';
-    return {
-      isProfil: variant === 'profil',
-      isOeffentlich: variant === 'oeffentlich',
-      av: this.av('Marcel Raddatz')
-    };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Regeln.dc.html

@@ -1,130 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="regeln" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-
-    <div style="margin-bottom:36px">
-      <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-2); display:inline-block; border-bottom:2px solid var(--c-accent); padding-bottom:6px; margin-bottom:18px">Vereinheitlichtes System</div>
-      <h1 style="font-family:var(--font-serif); font-size:44px; font-weight:700; line-height:1.08; margin:0 0 12px; color:var(--c-ink)">Ein Regelwerk für das Familienarchiv</h1>
-      <p style="font-family:var(--font-serif); font-size:18px; line-height:1.6; color:var(--c-ink-2); max-width:640px; margin:0">Sieben Bausteine, die jede Seite teilt — damit Titel, Steuerung, Karten und Metadaten überall gleich klingen. Diese Richtung — „Mappe" — liegt allen Seiten zugrunde.</p>
-    </div>
-
-    <div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:20px">
-
-      <!-- Typografie -->
-      <section style="background:var(--c-surface); border:1px solid var(--c-line); padding:24px">
-        <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">01 — Typografie</div>
-        <div style="display:flex; flex-direction:column; gap:14px">
-          <div style="display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-bottom:1px solid var(--c-line-2); padding-bottom:14px">
-            <span style="font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--c-ink)">Seitentitel</span>
-            <span style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">Tinos · Serif</span>
-          </div>
-          <div style="display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-bottom:1px solid var(--c-line-2); padding-bottom:14px">
-            <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink)">Rubrik / Label</span>
-            <span style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">Montserrat · Versal</span>
-          </div>
-          <div style="display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-bottom:1px solid var(--c-line-2); padding-bottom:14px">
-            <span style="font-family:var(--font-serif); font-size:16px; line-height:1.6; color:var(--c-ink)">Fließtext, Briefinhalt und Transkription</span>
-            <span style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">Tinos · 16</span>
-          </div>
-          <div style="display:flex; align-items:baseline; justify-content:space-between; gap:16px">
-            <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">14. März 1923 · 4 Personen</span>
-            <span style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">Montserrat · Meta</span>
-          </div>
-        </div>
-      </section>
-
-      <!-- Farbe -->
-      <section style="background:var(--c-surface); border:1px solid var(--c-line); padding:24px">
-        <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">02 — Farbe</div>
-        <div style="display:flex; flex-direction:column; gap:10px">
-          <div style="display:flex; align-items:center; gap:12px"><span style="width:28px; height:28px; background:#012851; border:1px solid var(--c-line)"></span><span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">Navy — Tinte &amp; Primärfläche</span></div>
-          <div style="display:flex; align-items:center; gap:12px"><span style="width:28px; height:28px; background:#f0efe9; border:1px solid var(--c-line)"></span><span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">Sand — Hintergrund</span></div>
-          <div style="display:flex; align-items:center; gap:12px"><span style="width:28px; height:28px; background:#a1dcd8; border:1px solid var(--c-line)"></span><span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">Mint — nur Linie, Streifen, Unterton</span></div>
-          <div style="display:flex; align-items:center; gap:12px"><span style="width:28px; height:28px; background:#00c7b1; border:1px solid var(--c-line)"></span><span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">Türkis — Transkriptionsmodus</span></div>
-        </div>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:13px; color:var(--c-ink-3); margin:16px 0 0">Keine Verläufe. Mint trägt nie Text.</p>
-      </section>
-
-      <!-- Seitenkopf -->
-      <section style="background:var(--c-surface); border:1px solid var(--c-line); padding:24px; grid-column:1 / -1">
-        <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">03 — Seitenkopf</div>
-        <div style="padding:20px; background:var(--c-muted); border:1px solid var(--c-line-2); max-width:520px">
-          <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:10px">Geschichten</div>
-          <div style="border-left:4px solid var(--c-accent); padding-left:14px"><div style="font-family:var(--font-serif); font-size:34px; font-weight:700; line-height:1.05; color:var(--c-ink)">Seitentitel</div></div>
-          <p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:12px 0 0">Rubrik in Versalien, großer Serif-Titel, Mint-Steg links. Rechts steht die Zählung.</p>
-        </div>
-      </section>
-
-      <!-- Steuerung -->
-      <section style="background:var(--c-surface); border:1px solid var(--c-line); padding:24px">
-        <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">04 — Steuerung</div>
-        <p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2); margin:0 0 14px">Segmentgruppe für Filter &amp; Ansichten</p>
-        <div style="display:inline-flex; border:1px solid var(--c-line)">
-          <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:8px 14px">Alle</span>
-          <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:8px 14px; border-left:1px solid var(--c-line)">Veröffentlicht</span>
-          <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:8px 14px; border-left:1px solid var(--c-line)">Entwurf</span>
-        </div>
-      </section>
-
-      <!-- Avatare -->
-      <section style="background:var(--c-surface); border:1px solid var(--c-line); padding:24px">
-        <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">05 — Personen &amp; Avatare</div>
-        <div style="display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px">
-          <span style="width:36px; height:36px; border-radius:999px; background:#5a8a6a; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:13px; font-weight:700">FR</span>
-          <span style="width:36px; height:36px; border-radius:999px; background:#7a4f9a; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:13px; font-weight:700">KM</span>
-          <span style="width:36px; height:36px; border-radius:999px; background:#3060b0; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:13px; font-weight:700">AB</span>
-          <span style="width:36px; height:36px; border-radius:999px; background:#c17a00; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:13px; font-weight:700">WR</span>
-          <span style="width:36px; height:36px; border-radius:999px; background:#c0446e; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:13px; font-weight:700">MH</span>
-        </div>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:14px; color:var(--c-ink-2); margin:0; line-height:1.6">Die Farbe wird je Person aus dem Namen berechnet und bleibt stabil — sie unterscheidet, sie schmückt nicht. Form immer rund, Initialen in Montserrat.</p>
-      </section>
-
-      <!-- Metadaten & Leerzustände -->
-      <section style="background:var(--c-surface); border:1px solid var(--c-line); padding:24px; grid-column:1 / -1">
-        <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">06 — Metadaten &amp; Leerzustände</div>
-        <div style="display:grid; grid-template-columns:1fr 1fr; gap:24px">
-          <div>
-            <p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2); margin:0 0 12px">Eine Metazeile, immer gleich getrennt mit ·</p>
-            <div style="display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">
-              <img class="dgicon" src="assets/icons/Calendar-Add-MD.svg" style="width:14px; height:14px; opacity:.5">
-              <span>14. März 1923</span><span>·</span><span>14 Dokumente</span><span>·</span><span>4 Personen</span>
-            </div>
-          </div>
-          <div style="border-left:1px solid var(--c-line); padding-left:24px">
-            <p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2); margin:0 0 12px">Leerzustand — ruhig, Sie-Form, mit Auslassung</p>
-            <div style="border:1px dashed var(--c-line); padding:18px; text-align:center">
-              <p style="font-family:var(--font-serif); font-size:15px; color:var(--c-ink-2); margin:0">Noch keine Geschichten angelegt.</p>
-              <p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:6px 0 0">Beginnen Sie mit einem Brief…</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-    </div>
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}"></script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Stammbaum.dc.html

@@ -1,221 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="stammbaum" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-
-    <!-- §3 PageHeader -->
-    <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-      <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Stammbaum</div>
-        <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Familie Cram</h1>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Drei Generationen, verwoben durch Brief und Blut — wählen Sie eine Person, um ihre Linie zu verfolgen.</p>
-      </div>
-      <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">38 Personen · 4 Generationen</span>
-    </div>
-
-    <!-- Tree + side panel -->
-    <div style="display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap">
-
-      <!-- CANVAS: relative-positioned area holding absolutely-positioned node cards -->
-      <div style="position:relative; flex:1; min-width:480px; height:540px; background:var(--c-muted); border:1px solid var(--c-line); border-radius:2px; overflow:hidden">
-
-        <!-- Connector lines, drawn beneath the node cards -->
-        <svg viewBox="0 0 760 540" preserveAspectRatio="none" style="position:absolute; inset:0; width:100%; height:100%; pointer-events:none">
-          <!-- Gen 1 couple bar (Friedrich + Eugenie) -->
-          <line x1="170" y1="76" x2="430" y2="76" stroke="var(--c-line)" stroke-width="1.5"></line>
-          <!-- Drop from Gen 1 couple to the Gen 2 sibling bar -->
-          <line x1="300" y1="76" x2="300" y2="208" stroke="var(--c-line)" stroke-width="1.5"></line>
-          <!-- Gen 2 sibling bar (Herbert · Clara · Marie) -->
-          <line x1="110" y1="208" x2="540" y2="208" stroke="var(--c-line)" stroke-width="1.5"></line>
-          <!-- Drops onto each Gen 2 child -->
-          <line x1="110" y1="208" x2="110" y2="236" stroke="var(--c-line)" stroke-width="1.5"></line>
-          <line x1="300" y1="208" x2="300" y2="236" stroke="var(--c-line)" stroke-width="1.5"></line>
-          <line x1="540" y1="208" x2="540" y2="236" stroke="var(--c-line)" stroke-width="1.5"></line>
-          <!-- Gen 2 marriage bar (Herbert + Wilhelmine) -->
-          <line x1="110" y1="276" x2="240" y2="276" stroke="var(--c-line)" stroke-width="1.5"></line>
-          <!-- Drop to Gen 3 sibling bar -->
-          <line x1="175" y1="276" x2="175" y2="404" stroke="var(--c-accent)" stroke-width="2"></line>
-          <!-- Gen 3 sibling bar (Gertrud · Karl) -->
-          <line x1="110" y1="404" x2="300" y2="404" stroke="var(--c-accent)" stroke-width="2"></line>
-          <line x1="110" y1="404" x2="110" y2="432" stroke="var(--c-accent)" stroke-width="2"></line>
-          <line x1="300" y1="404" x2="300" y2="432" stroke="var(--c-accent)" stroke-width="2"></line>
-        </svg>
-
-        <!-- Generation rail labels -->
-        <div style="position:absolute; left:14px; top:44px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3)">G 1</div>
-        <div style="position:absolute; left:14px; top:236px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3)">G 2</div>
-        <div style="position:absolute; left:14px; top:432px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3)">G 3</div>
-
-        <!-- NODE CARDS (absolutely positioned via the data) -->
-        <sc-for list="{{ nodes }}" as="n" hint-placeholder-count="8">
-          <div style="{{ n.cardStyle }}">
-            <span style="{{ n.av28 }}">{{ n.initials }}</span>
-            <div style="min-width:0">
-              <div style="font-family:var(--font-serif); font-size:14px; font-weight:700; color:{{ n.nameColor }}; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis">{{ n.name }}</div>
-              <div style="font-family:var(--font-sans); font-size:10px; letter-spacing:.04em; color:{{ n.dateColor }}; margin-top:1px">{{ n.dates }}</div>
-            </div>
-          </div>
-        </sc-for>
-
-        <!-- Zoom controls: vertical control group, bottom-right, 44px targets -->
-        <div style="position:absolute; right:16px; bottom:16px; display:flex; flex-direction:column; gap:1px; border:1px solid var(--c-line); border-radius:2px; overflow:hidden; box-shadow:var(--shadow-sm)">
-          <button class="fa-link" title="Vergrößern" style="width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:none; background:var(--c-surface); cursor:pointer; font-family:var(--font-sans); font-size:20px; font-weight:700; color:var(--c-ink-2); line-height:1">+</button>
-          <button class="fa-link" title="Verkleinern" style="width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:none; border-top:1px solid var(--c-line); background:var(--c-surface); cursor:pointer; font-family:var(--font-sans); font-size:20px; font-weight:700; color:var(--c-ink-2); line-height:1">−</button>
-          <button class="fa-link" title="Ansicht einpassen" style="width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:none; border-top:1px solid var(--c-line); background:var(--c-surface); cursor:pointer">
-            <img class="dgicon" src="assets/icons/View-More-MD.svg" style="width:18px; height:18px; opacity:.45">
-          </button>
-        </div>
-      </div>
-
-      <!-- SIDE PANEL: selected node detail (3px mint top border) -->
-      <aside style="width:320px; flex-shrink:0; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:22px">
-        <!-- Header: large avatar + name + dates -->
-        <div style="display:flex; align-items:center; gap:14px; margin-bottom:18px">
-          <span style="{{ selected.a48 }}">{{ selected.initials }}</span>
-          <div style="min-width:0">
-            <h2 style="font-family:var(--font-serif); font-size:20px; font-weight:700; color:var(--c-ink); margin:0; line-height:1.2">{{ selected.name }}</h2>
-            <div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:2px">{{ selected.dates }}</div>
-          </div>
-        </div>
-
-        <!-- Direct relationships as tag-style chips (dot + label, 4px radius) -->
-        <h3 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 12px">Direkte Beziehungen</h3>
-        <div style="display:flex; flex-direction:column; gap:8px; margin-bottom:22px">
-          <sc-for list="{{ chips }}" as="c" hint-placeholder-count="4">
-            <div style="display:flex; align-items:center; gap:9px">
-              <span style="display:inline-flex; align-items:center; gap:6px; background:var(--c-muted); border:1px solid var(--c-line); border-radius:4px; padding:3px 9px; flex-shrink:0">
-                <span style="width:7px; height:7px; border-radius:999px; background:{{ c.dot }}"></span>
-                <span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">{{ c.label }}</span>
-              </span>
-              <span style="font-family:var(--font-serif); font-size:14px; color:var(--c-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis">{{ c.person }}</span>
-            </div>
-          </sc-for>
-        </div>
-
-        <!-- Meta line (§8) -->
-        <div style="display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2); margin-bottom:18px">
-          <img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:14px; height:14px; opacity:.5">
-          <span>{{ selected.letters }} Briefe</span><span>·</span><span>{{ selected.docs }} Dokumente</span>
-        </div>
-
-        <a href="/persons/{{ selected.id }}" class="fa-link" style="display:inline-flex; align-items:center; gap:6px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-primary); text-decoration:none">
-          Zur Person
-          <img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:14px; height:14px; opacity:.5">
-        </a>
-      </aside>
-    </div>
-
-    <!-- Empty state (alternate — shown when no tree exists yet) -->
-    <div style="margin-top:32px">
-      <div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:10px">Alternativ — leerer Zustand</div>
-      <div style="border:1px dashed var(--c-line); border-radius:2px; padding:48px 24px; text-align:center">
-        <div style="font-family:var(--font-serif); font-size:20px; color:var(--c-ink); margin-bottom:8px">Noch kein Stammbaum vorhanden.</div>
-        <div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Verknüpfen Sie zwei Personen, um die erste Linie zu zeichnen…</div>
-      </div>
-    </div>
-
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name,
-      a28:{ ...base, width:28, height:28, fontSize:11 },
-      a40:{ ...base, width:40, height:40, fontSize:14 },
-      a48:{ ...base, width:48, height:48, fontSize:16 } };
-  }
-
-  // Build one absolutely-positioned node card. state ∈ 'rest' | 'selected' | 'dim'.
-  nodeCard(name, dates, x, y, state){
-    const a = this.av(name);
-    const NODE_W = 168;
-    const card = {
-      position:'absolute', left:x+'px', top:y+'px', width:NODE_W+'px',
-      display:'flex', alignItems:'center', gap:'10px',
-      background:'var(--c-surface)', border:'1px solid var(--c-line)',
-      borderRadius:'2px', padding:'9px 11px', boxShadow:'var(--shadow-sm)', cursor:'pointer'
-    };
-    let nameColor = 'var(--c-ink)';
-    let dateColor = 'var(--c-ink-3)';
-    if (state === 'selected') {
-      card.background = 'var(--c-muted)';
-      card.border = '1px solid var(--c-accent)';
-      card.borderLeft = '3px solid var(--c-accent)';
-      card.paddingLeft = '9px';
-    } else if (state === 'dim') {
-      card.opacity = 0.45;
-    }
-    return {
-      name, dates, initials:a.initials, av28:a.a28,
-      cardStyle:card, nameColor, dateColor
-    };
-  }
-
-  nodes(){
-    // 3 generations, 8 nodes. Highlighted lineage = Herbert → Gertrud/Karl line.
-    // Selected: Herbert Cram. Dimmed: out-of-lineage (the non-ancestor branches).
-    return [
-      // Gen 1 — grandparents
-      this.nodeCard('Friedrich Cram',   '1868–1934', 6,   42,  'rest'),
-      this.nodeCard('Eugenie de Gruyter','1872–1948', 262, 42,  'dim'),
-      // Gen 2 — children + the spouse married in
-      this.nodeCard('Herbert Cram',     '1899–1945', 26,  242, 'selected'),
-      this.nodeCard('Clara Cram',       '1902–1989', 216, 242, 'dim'),
-      this.nodeCard('Marie Cram',       '1905–1992', 456, 242, 'dim'),
-      this.nodeCard('Wilhelmine Voß',   '1903–1981', 156, 242, 'dim'),
-      // Gen 3 — grandchildren
-      this.nodeCard('Gertrud Cram',     '1928–2011', 26,  438, 'rest'),
-      this.nodeCard('Karl Cram',        '1931–1998', 216, 438, 'rest'),
-    ];
-  }
-
-  selected(){
-    const a = this.av('Herbert Cram');
-    return { id:'herbert-cram', name:'Herbert Cram', dates:'1899–1945', initials:a.initials, a48:a.a48, letters:42, docs:64 };
-  }
-
-  chips(){
-    // Tag-style chips: colored dot + UPPERCASE label + person name.
-    return [
-      { label:'Vater',    dot:this.av('Friedrich Cram').bg,    person:'Friedrich Cram' },
-      { label:'Mutter',   dot:this.av('Eugenie de Gruyter').bg, person:'Eugenie de Gruyter' },
-      { label:'Ehefrau',  dot:this.av('Wilhelmine Voß').bg,    person:'Wilhelmine Voß' },
-      { label:'Tochter',  dot:this.av('Gertrud Cram').bg,      person:'Gertrud Cram' },
-      { label:'Sohn',     dot:this.av('Karl Cram').bg,         person:'Karl Cram' },
-    ];
-  }
-
-  renderVals(){
-    return { nodes: this.nodes(), selected: this.selected(), chips: this.chips() };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Themen.dc.html

@@ -1,190 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button,textarea,select{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="themen" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
-
-    <!-- PageHeader (§3) -->
-    <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-      <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Themen</div>
-        <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Themen</h1>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Worüber die Familie schrieb — Schlagworte, nach denen Sie die Sammlung durchstöbern können.</p>
-      </div>
-      <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">24 Themen · 312 Dokumente</span>
-    </div>
-
-    <!-- Segmented control (§6) -->
-    <div style="margin-bottom:28px; display:inline-flex; border:1px solid var(--c-line)">
-      <span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:10px 16px; cursor:pointer">Alle</span>
-      <span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 16px; border-left:1px solid var(--c-line); cursor:pointer">Mit Dokumenten</span>
-      <span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 16px; border-left:1px solid var(--c-line); cursor:pointer">Alphabetisch</span>
-    </div>
-
-    <!-- tag-card grid -->
-    <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:18px">
-      <sc-for list="{{ topics }}" as="t" hint-placeholder-count="9">
-        <div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; overflow:hidden">
-
-          <!-- parent-tag row -->
-          <a href="#" class="fa-link" style="display:flex; align-items:center; gap:11px; min-height:56px; padding:14px 16px 12px; text-decoration:none">
-            <span style="{{ t.dot }}"></span>
-            <span style="font-family:var(--font-serif); font-size:19px; font-weight:700; color:var(--c-ink); line-height:1.2; flex:1; min-width:0">{{ t.name }}</span>
-            <span style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">{{ t.count }}</span>
-          </a>
-
-          <div style="height:1px; background:var(--c-line-2); margin:0 16px"></div>
-
-          <!-- child-tag rows -->
-          <sc-for list="{{ t.children }}" as="c" hint-placeholder-count="4">
-            <a href="#" class="fa-link" style="display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 16px; text-decoration:none">
-              <span style="{{ c.dot }}"></span>
-              <span style="font-family:var(--font-sans); font-size:14px; color:var(--c-ink); flex:1; min-width:0">{{ c.name }}</span>
-              <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ c.count }}</span>
-            </a>
-          </sc-for>
-
-          <!-- + N weitere -->
-          <sc-if value="{{ t.more }}" hint-placeholder-val="{{ false }}">
-            <a href="#" class="fa-link" style="display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; text-decoration:none; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2)">
-              <span>{{ t.more }} weitere</span>
-              <img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:14px; height:14px; opacity:.4">
-            </a>
-          </sc-if>
-
-        </div>
-      </sc-for>
-
-      <!-- empty state (§10) -->
-      <div style="border:1px dashed var(--c-line); border-radius:2px; padding:48px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center">
-        <div style="font-family:var(--font-serif); font-size:20px; color:var(--c-ink); margin-bottom:8px">Noch kein Thema vergeben.</div>
-        <div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Verschlagworten Sie einen Brief, um hier ein Thema anzulegen…</div>
-      </div>
-    </div>
-
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}">
-class Component extends DCLogic {
-  av(name){
-    const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    const parts = name.trim().split(/\s+/);
-    const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
-    const bg = pal[h % pal.length];
-    const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
-    return { bg, initials, name,
-      a26:{ ...base, width:26, height:26, fontSize:10 },
-      a28:{ ...base, width:28, height:28, fontSize:11 },
-      a40:{ ...base, width:40, height:40, fontSize:14 },
-      a48:{ ...base, width:48, height:48, fontSize:16 } };
-  }
-
-  // deterministic-ish tag color from the §1 list, keyed by the topic name
-  tagColor(name){
-    const tokens = ['sage','sienna','amber','slate','violet','rose','cobalt','moss','sand-tag','coral'];
-    let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
-    return 'var(--c-tag-' + tokens[h % tokens.length] + ')';
-  }
-
-  dot(name, size){
-    return { display:'inline-block', width:size, height:size, borderRadius:'999px', background:this.tagColor(name), flexShrink:0 };
-  }
-
-  topics(){
-    const raw = [
-      { name:'Krieg & Feldpost', count:74, children:[
-        { name:'Feldpostbriefe', count:41 },
-        { name:'Lazarett & Verwundung', count:12 },
-        { name:'Gefangenschaft', count:9 },
-        { name:'Heimaturlaub', count:7 },
-        { name:'Vermisstenmeldungen', count:5 },
-      ], total:11 },
-      { name:'Familie & Kinder', count:58, children:[
-        { name:'Geburt & Taufe', count:14 },
-        { name:'Schule & Ausbildung', count:11 },
-        { name:'Großeltern', count:9 },
-        { name:'Erbschaft', count:6 },
-        { name:'Patenschaft', count:4 },
-      ], total:8 },
-      { name:'Orte', count:46, children:[
-        { name:'Wien', count:18 },
-        { name:'Berlin', count:12 },
-        { name:'Harz', count:7 },
-        { name:'München', count:5 },
-        { name:'Triest', count:4 },
-      ], total:9 },
-      { name:'Geschäft & Handel', count:33, children:[
-        { name:'Kaufhaus Mariahilf', count:11 },
-        { name:'Rechnungen', count:8 },
-        { name:'Verträge', count:6 },
-      ] },
-      { name:'Reisen', count:29, children:[
-        { name:'Italienreise 1924', count:9 },
-        { name:'Kuraufenthalt', count:7 },
-        { name:'Postkarten', count:13 },
-      ] },
-      { name:'Krankheit & Gesundheit', count:24, children:[
-        { name:'Sanatorium', count:8 },
-        { name:'Arztbriefe', count:6 },
-        { name:'Genesung', count:5 },
-      ] },
-      { name:'Feiertage', count:21, children:[
-        { name:'Weihnachten', count:12 },
-        { name:'Ostern', count:5 },
-        { name:'Geburtstage', count:4 },
-      ] },
-      { name:'Liebe & Verlobung', count:17, children:[
-        { name:'Liebesbriefe', count:9 },
-        { name:'Verlobung', count:5 },
-        { name:'Hochzeit', count:3 },
-      ] },
-      { name:'Behörde & Recht', count:14, children:[
-        { name:'Notariat', count:6 },
-        { name:'Meldewesen', count:5 },
-        { name:'Steuern', count:3 },
-      ] },
-    ];
-
-    const MAX = 5;
-    return raw.map(t => {
-      const shown = t.children.slice(0, MAX);
-      const total = t.total || t.children.length;
-      const more = total - shown.length;
-      return {
-        name: t.name,
-        count: t.count,
-        dot: this.dot(t.name, 7),
-        children: shown.map(c => ({ name:c.name, count:c.count, dot:this.dot(c.name, 6) })),
-        more: more > 0 ? more : null,
-      };
-    });
-  }
-
-  renderVals(){
-    return { topics: this.topics() };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/Zeitstrahl.dc.html

@@ -1,191 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="./support.js"></script>
-</head>
-<body>
-<x-dc>
-<helmet>
-<link rel="stylesheet" href="colors_and_type.css">
-<style>
-  html,body{margin:0;padding:0;background:#f0efe9}
-  *{box-sizing:border-box}
-  input,button{font-family:inherit}
-  ::selection{background:#a1dcd8;color:#012851}
-  [data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
-  .fa-link{transition:color .15s, background .15s, border-color .15s}
-</style>
-<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
-</helmet>
-<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
-  <dc-import name="ArchiveHeader" active="zeitstrahl" hint-size="100%,68px"></dc-import>
-  <main style="max-width:1180px; margin:0 auto; padding:40px 32px 90px">
-
-    <div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
-      <div style="border-left:4px solid var(--c-accent); padding-left:18px">
-        <div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Chronik</div>
-        <h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Zeitstrahl</h1>
-        <p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Briefdichte, Lebensdaten und kuratierte Stationen — die Sammlung im Lauf der Jahre.</p>
-      </div>
-      <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">147 Dokumente · 1914–1948</span>
-    </div>
-
-    <!-- filter -->
-    <div style="margin-bottom:38px; display:flex; align-items:center; gap:16px; flex-wrap:wrap">
-      <div style="display:inline-flex; border:1px solid var(--c-line)">
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 16px; cursor:pointer">Alle</span>
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Briefe</span>
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Personen</span>
-        <span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Ereignisse</span>
-      </div>
-      <div style="display:flex; align-items:center; gap:16px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">
-        <span style="display:inline-flex; align-items:center; gap:6px"><span style="width:10px; height:10px; border-radius:999px; background:var(--c-primary)"></span>Person</span>
-        <span style="display:inline-flex; align-items:center; gap:6px"><span style="width:10px; height:10px; border-radius:2px; background:var(--c-accent)"></span>Kuratiert</span>
-        <span style="display:inline-flex; align-items:center; gap:6px"><img class="dgicon" src="assets/icons/Globe-MD.svg" style="width:12px; height:12px; opacity:.4">Historisch</span>
-      </div>
-    </div>
-
-    <!-- spine -->
-    <div style="position:relative; max-width:760px; margin:0 auto">
-      <div style="position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--c-accent); transform:translateX(-50%)"></div>
-      <div style="position:relative; display:flex; flex-direction:column; align-items:center; gap:18px">
-        <sc-for list="{{ items }}" as="it" hint-placeholder-count="10">
-
-          <sc-if value="{{ it.isYear }}" hint-placeholder-val="{{ false }}">
-            <div style="background:var(--c-primary); color:var(--c-primary-fg); font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:.1em; padding:6px 16px; border-radius:2px">{{ it.label }}</div>
-          </sc-if>
-
-          <sc-if value="{{ it.isSummary }}" hint-placeholder-val="{{ false }}">
-            <div style="width:100%; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:22px 24px">
-              <div style="display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px">
-                <div style="display:flex; align-items:center; gap:10px">
-                  <img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:18px; height:18px; opacity:.55">
-                  <span style="font-family:var(--font-sans); font-size:18px; font-weight:700; color:var(--c-ink)">{{ it.count }}</span>
-                </div>
-                <a href="#" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">Briefe anzeigen →</a>
-              </div>
-              <div style="display:flex; align-items:flex-end; gap:5px; height:60px">
-                <sc-for list="{{ it.bars }}" as="bar" hint-placeholder-count="12">
-                  <div style="{{ bar.style }}"></div>
-                </sc-for>
-              </div>
-              <div style="display:flex; justify-content:space-between; margin-top:8px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">
-                <span>{{ it.from }}</span><span>Monats-Dichte</span><span>{{ it.to }}</span>
-              </div>
-            </div>
-          </sc-if>
-
-          <sc-if value="{{ it.isLetter }}" hint-placeholder-val="{{ false }}">
-            <div style="{{ it.rowStyle }}">
-              <div style="{{ it.cardStyle }}">
-                <div style="display:flex; align-items:flex-start; gap:9px; margin-bottom:5px">
-                  <img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:15px; height:15px; opacity:.5; flex-shrink:0; margin-top:3px">
-                  <span style="font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--c-ink); line-height:1.3">{{ it.title }}</span>
-                </div>
-                <div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); padding-left:24px">{{ it.meta }}</div>
-                <sc-if value="{{ it.tag }}" hint-placeholder-val="{{ false }}">
-                  <span style="display:inline-flex; align-items:center; gap:7px; margin:10px 0 0 24px; background:var(--c-surface); border:1px solid var(--c-line); padding:3px 11px; border-radius:999px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-2)"><span style="{{ it.tag.dot }}"></span>{{ it.tag.label }}</span>
-                </sc-if>
-              </div>
-              <span style="{{ it.dotStyle }}"></span>
-            </div>
-          </sc-if>
-
-          <sc-if value="{{ it.isPerson }}" hint-placeholder-val="{{ false }}">
-            <div style="display:inline-flex; align-items:center; gap:12px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; box-shadow:var(--shadow-sm); padding:10px 20px 10px 12px">
-              <span style="width:28px; height:28px; border-radius:999px; background:var(--c-primary); color:var(--c-primary-fg); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0">{{ it.glyph }}</span>
-              <div>
-                <div style="font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--c-ink); line-height:1.2">{{ it.name }}</div>
-                <div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-top:2px">{{ it.meta }}</div>
-              </div>
-            </div>
-          </sc-if>
-
-          <sc-if value="{{ it.isCurated }}" hint-placeholder-val="{{ false }}">
-            <div style="display:inline-flex; align-items:center; gap:12px; background:var(--c-surface); border:1px solid var(--c-line); border-left:3px solid var(--c-accent); border-radius:2px; box-shadow:var(--shadow-sm); padding:12px 16px 12px 13px; max-width:100%">
-              <span style="width:28px; height:28px; border-radius:999px; background:var(--c-primary); color:var(--c-primary-fg); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0">★</span>
-              <div style="min-width:0">
-                <div style="font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--c-ink); line-height:1.25">{{ it.title }}</div>
-                <div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-top:2px">{{ it.meta }}</div>
-              </div>
-              <img class="dgicon" src="assets/icons/Bookmarks-MD.svg" style="width:15px; height:15px; opacity:.4; flex-shrink:0">
-            </div>
-          </sc-if>
-
-          <sc-if value="{{ it.isHistorical }}" hint-placeholder-val="{{ false }}">
-            <div style="width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 16px; border-top:1px solid var(--c-line-2); border-bottom:1px solid var(--c-line-2); background:var(--c-canvas); flex-wrap:wrap">
-              <img class="dgicon" src="assets/icons/Globe-MD.svg" style="width:15px; height:15px; opacity:.4">
-              <span style="font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--c-ink-2)">{{ it.title }}</span>
-              <span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ it.meta }}</span>
-            </div>
-          </sc-if>
-
-        </sc-for>
-      </div>
-    </div>
-  </main>
-</div>
-</x-dc>
-<script type="text/x-dc" data-dc-script data-props="{}">
-class Component extends DCLogic {
-  bars(values){
-    return values.map(v => ({ style: { flex:'1', height: v + '%', minHeight:'3px', background:'var(--c-accent)', borderRadius:'1px 1px 0 0' } }));
-  }
-
-  items(){
-    const L = (docId, date, place, sender, recipient, tag) => ({ kind:'letter', title:docId+' – '+date+' – '+place, meta:sender+' → '+recipient+' · '+date, tag });
-    return [
-      { kind:'year', label:'1923' },
-      { kind:'summary', count:'188 Briefe', from:'Jan. 1923', to:'Dez. 1923', bars:[30,42,38,55,48,60,52,66,58,70,62,75] },
-      L('FR-0142','21. Januar 1923','Wien','Frieda Rose','Anna Bauer',{ label:'Briefwechsel', color:'#3060b0' }),
-      L('AB-0098','30. Januar 1923','Berlin','Anna Bauer','Frieda Rose'),
-      L('HR-1412','16. Februar 1923','Harz','Heinrich Rose','Wilhelm Rose'),
-      L('FR-0143','4. März 1923','Wien','Frieda Rose','Anna Bauer'),
-      L('KM-0211','28. März 1923','Triest','Karl Müller','Frieda Rose',{ label:'Reise', color:'#c17a00' }),
-      { kind:'person', name:'Elise Vogt', meta:'1923 · abgeleitet', glyph:'✳' },
-      L('FR-0148','21. September 1923','Wien','Frieda Rose','Anna Bauer'),
-      L('MH-0033','4. Dezember 1923','München','Margarete Hoffmann','Heinrich Rose',{ label:'Weihnachten', color:'#c0446e' }),
-      L('FR-0151','7. Dezember 1923','Wien','Frieda Rose','Anna Bauer'),
-      { kind:'curated', title:'Sommer 1923 – die Briefe aus dem Harz', meta:'Juli 1923 · kuratiert' },
-      { kind:'year', label:'1924' },
-      { kind:'summary', count:'271 Briefe', from:'Jan. 1924', to:'Dez. 1924', bars:[40,55,48,70,62,58,75,52,92,60,72,80] },
-      L('OS-0019','19. Februar 1924','Wien','Otto Schmidt','Heinrich Rose',{ label:'Recht', color:'#607080' }),
-      L('KM-0224','2. August 1924','Venedig','Karl Müller','Frieda Rose',{ label:'Reise', color:'#c17a00' }),
-      { kind:'person', name:'Heinrich Rose', meta:'1924 · abgeleitet', glyph:'†' },
-      L('WR-0061','8. Oktober 1924','Leipzig','Wilhelm Rose','Frieda Rose'),
-      { kind:'historical', title:'Gründung der Rentenmark', meta:'1924 · historisch' },
-    ];
-  }
-
-  renderVals(){
-    let letterN = 0;
-    const items = this.items().map(it => {
-      const isLetter = it.kind==='letter';
-      let rowStyle = null, cardStyle = null, dotStyle = null, tag = it.tag || null;
-      if (isLetter){
-        const left = (letterN % 2) === 0; letterN++;
-        rowStyle = { position:'relative', width:'100%', display:'flex', justifyContent: left ? 'flex-start' : 'flex-end' };
-        cardStyle = { width:'46%', background:'var(--c-surface)', border:'1px solid var(--c-line)', boxShadow:'var(--shadow-sm)', borderRadius:'2px', padding:'14px 18px' };
-        dotStyle = { position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)', width:'13px', height:'13px', borderRadius:'999px', background:'var(--c-surface)', border:'2px solid var(--c-primary)', zIndex:1 };
-        if (tag) tag = { label:tag.label, dot:{ display:'inline-block', width:7, height:7, borderRadius:'999px', background:tag.color, flexShrink:0 } };
-      }
-      return {
-        ...it,
-        isYear: it.kind==='year',
-        isSummary: it.kind==='summary',
-        isPerson: it.kind==='person',
-        isCurated: it.kind==='curated',
-        isHistorical: it.kind==='historical',
-        isLetter,
-        rowStyle, cardStyle, dotStyle, tag,
-        bars: it.bars ? this.bars(it.bars) : [],
-      };
-    });
-    return { items };
-  }
-}
-</script>
-</body>
-</html>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Account-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Account-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Account-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M12,6 C14.7614237,6 17,8.23857625 17,11 C17,12.3722504 16.4471943,13.6153861 15.5521301,14.5188599 L17.855,17.452 L19.1030012,19.0389904 L19.1030012,19.0389904 L19.1020055,19.039995 L19.0710678,19.0710678 C18.997228,19.1449077 18.9222387,19.2175981 18.8461293,19.28911 L19.1020055,19.039995 C19.0039559,19.1389028 18.9038547,19.2357734 18.8017708,19.3305377 C18.7171965,19.4090494 18.6311863,19.4861804 18.5438523,19.5618238 C18.5263469,19.5769851 18.5089856,19.5919182 18.4915726,19.6067925 C18.309932,19.7619691 18.122204,19.9110944 17.9291745,20.0534458 C17.9013947,20.0739295 17.8740517,20.0938783 17.8466043,20.1136912 C16.2028871,21.3004163 14.1831418,22 12,22 C9.81685818,22 7.79711289,21.3004163 6.15271505,20.1131998 L6.44094063,20.3137102 C6.31572015,20.2298139 6.19250037,20.1431636 6.07136795,20.0538458 C5.87779602,19.9110944 5.69006803,19.7619691 5.50799235,19.6064208 C5.4910144,19.5919182 5.47365307,19.5769851 5.45634375,19.5619936 C5.36881373,19.4861804 5.28280351,19.4090494 5.19815647,19.3304702 C5.18343312,19.3168025 5.16867872,19.3030231 5.15396618,19.2891997 C5.07776126,19.2175981 5.00277203,19.1449077 4.92893219,19.0710678 C4.91889576,19.0610327 4.9084335,19.0505254 4.8979945,19.039995 L8.44884397,14.5198429 C7.5532068,13.6162879 7,12.3727481 7,11 C7,8.23857625 9.23857625,6 12,6 Z M12,16 C11.3344438,16 10.69926,15.8699605 10.1184702,15.6339033 L7.68110661,18.7351936 C8.9268731,19.5356884 10.4092137,20 12,20 C13.5907863,20 15.0731269,19.5356884 16.3188934,18.7351936 L13.8815298,15.6339033 C13.30074,15.8699605 12.6655562,16 12,16 Z M12,2 C17.5228475,2 22,6.4771525 22,12 C22,14.0067927 21.408873,15.8755204 20.3912443,17.4415574 L19.0653983,15.7557316 C19.6619312,14.635851 20,13.3574056 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,13.3574056 4.33806879,14.635851 4.93460172,15.7557316 L3.60940596,17.442558 C2.59137888,15.8763164 2,14.0072202 2,12 C2,6.4771525 6.4771525,2 12,2 Z M12,8 C10.3431458,8 9,9.34314575 9,11 C9,12.6568542 10.3431458,14 12,14 C13.6568542,14 15,12.6568542 15,11 C15,9.34314575 13.6568542,8 12,8 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Arrow-Right-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Arrow/Arrow-Right-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Arrow/Arrow-Right-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M8.468,4.00069609 L17,12 L8.468,19.9996961 L7.001,18.6236961 L14.0650029,12 L7.001,5.37669609 L8.468,4.00069609 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Bookmarks-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Bookmarks-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Bookmarks-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M21.3497504,3.6551887 L21.6777078,3.86309927 L22,4.0853485 L22,18.25 C21.3650372,17.7938243 20.6942363,17.4226854 20.0009587,17.1365834 L20,21.7544657 C18.6666667,20.5544657 17,19.9544657 15,19.9544657 C13.8333333,19.9544657 12.8335071,20.3500061 12.0005212,21.141087 C11.1668404,20.3500061 10.1666667,19.9544657 9,19.9544657 C7,19.9544657 5.33333333,20.5544657 4,21.7544657 L4.00045104,17.1359956 C3.42290002,17.374239 2.8609383,17.671489 2.32229219,18.0277508 L2,18.25 L2,4.0853485 C5.00310218,1.92783294 8.80785971,1.67249293 12.0007123,3.31932848 L12.0277538,3.30470469 C14.9881375,1.78996923 18.4697725,1.90679723 21.3497504,3.6551887 Z M6.00029079,16.5555343 L6,18.3814657 L6.19076597,18.3249848 C6.95960841,18.1089212 7.77427089,17.9872902 8.63050815,17.9602585 L9,17.9544657 C9.70153827,17.9544657 10.3709864,18.0578476 11.0007801,18.2619695 L11,17.037 L10.8155673,16.9686082 C9.25884239,16.4128684 7.60516433,16.275144 6.00029079,16.5555343 Z M13.0000078,17.0370934 L12.9996932,18.2620176 C13.5412606,18.0864227 14.1113753,17.9855173 14.7059769,17.9605913 L15,17.9544657 C15.9920333,17.9544657 16.930557,18.078055 17.809234,18.3249848 L18,18.3814657 L18.000458,16.5557194 C16.3318708,16.2641263 14.6104659,16.4245843 13.0000078,17.0370934 Z M4.18153178,5.0890821 L4,5.186 L4,15.005 L4.06303505,14.9835348 C6.30012607,14.2545182 8.70788476,14.2256848 11.0006279,14.9264631 L11,5.055 L10.8189038,4.96641438 C8.68672067,3.96697424 6.27082403,4.01779536 4.18153178,5.0890821 Z M13.2485233,4.93284704 L13,5.053 L13.000418,14.9237981 C15.2176022,14.24164 17.5523857,14.2497554 19.7373743,14.9197474 L20,15.004 L20,5.186 L19.7983923,5.07863244 C17.7203573,4.02022621 15.3279042,3.97173828 13.2485233,4.93284704 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Calendar-Add-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Calendar/Calendar-Add-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Calendar/Calendar-Add-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M8,2 L8,4 L16,4 L16,2 L18,2 L18,4 L22,4 L22,22 L2,22 L2,4 L6,4 L6,2 L8,2 Z M20,6 L4,6 L4,20 L12,20 L12,12 L20,12 L20,6 Z M18,14 L16,14 L16,16 L14,16 L14,18 L16,18 L16,20 L18,20 L18,18 L20,18 L20,16 L18,15.999 L18,14 Z M10,16 L10,18 L6,18 L6,16 L10,16 Z M10,12 L10,14 L6,14 L6,12 L10,12 Z M18,8 L18,10 L8,10 L8,8 L18,8 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Chat-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Chat-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Chat-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M22,2 L22,18 L20,18 L20,22 L12,18 L2,18 L2,2 L22,2 Z M20,4 L4,4 L4,16 L12.472136,16 L18,18.764 L18,16 L20,16 L20,4 Z M14,11 L14,13 L6,13 L6,11 L14,11 Z M18,7 L18,9 L6,9 L6,7 L18,7 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Check-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Check/Check-Isolation-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Check/Check-Isolation-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <polygon id="Primary" fill="#000000" points="7.09090909 20 2 15.0222222 3.45454545 13.6 7.09090909 17.1555556 20.5454545 4 22 5.42222222"></polygon>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Copy-Item-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Copy-Item-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Copy-Item-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M12,2 L13.333,4 L20,4 L20,22 L8,22 L8,19 L4,19 L4,2 L12,2 Z M18,6 L14.667,6 L16,8 L16,19 L10,19 L10,20 L18,20 L18,6 Z M9,4 L6,4 L6,17 L14,17 L14,9 L9,9 L9,4 Z M12,12 L12,14 L8,14 L8,12 L12,12 Z M11,4.106 L11,7 L12.929,7 L11,4.106 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Edit-Content-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Edit-Content-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Edit-Content-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M14,2 L19,14 L15.5,19 L16.2,22 L7.8,22 L8.5,19 L5,14 L10,2 L14,2 Z M11,4.799 L7.269,13.754 L10.65062,18.5847269 L10.32,20 L13.679,20 L13.34938,18.5847269 L16.73,13.754 L13,4.802 L13.0010775,11.2681881 C13.5577563,11.5906726 13.9445763,12.1738636 13.9945143,12.8507377 L14,13 C14,14.1045695 13.1045695,15 12,15 C10.8954305,15 10,14.1045695 10,13 C10,12.2597476 10.4021661,11.6134261 10.9999275,11.2676063 L11,4.799 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Filter-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Filter/Filter-Outline-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Filter/Filter-Outline-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M22,2 L22,6 L15,12 L15,18 L9,22 L9,12 L2,6 L2,2 L22,2 Z M20,4 L4,4 L4,5.08 L11,11.0801302 L11,18.262 L13,16.928 L13,11.0801302 L20,5.079 L20,4 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Folder-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Folder-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Folder-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M7,5 L10.0003125,7 L18,7 L17.9992499,11 L22,11 L18,19 L3.78624992,19 L2.00024992,17.213 L2.00024992,5 L7,5 Z M18.764,13 L7.235,13 L5.235,17 L16.764,17 L18.764,13 Z M6.394,7 L4,7 L3.99924992,15.001 L6,11 L15.9992499,11 L16,9 L9.39481368,9 L6.394,7 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Globe-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Globe-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Globe-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M12,2 C12.1003419,2 12.2003387,2.00147789 12.2999697,2.00441308 L12,2 C12.1537617,2 12.3067129,2.00347034 12.4587794,2.01033697 C12.4954521,2.01199421 12.5317231,2.01382935 12.5679426,2.01585723 C12.6264737,2.01913275 12.6851372,2.02293127 12.7436608,2.02723346 C12.7915316,2.03075478 12.8388385,2.03457179 12.8860514,2.03871689 C12.8982466,2.03978664 12.9111814,2.04094656 12.9241091,2.04213109 C18.0147981,2.50960486 22,6.78940554 22,12 C22,17.2105945 18.0147981,21.4903951 12.926111,21.9576853 L12.9241091,21.9578689 L12.8860514,21.9612831 C12.8388385,21.9654282 12.7915316,21.9692452 12.7441328,21.9727318 L12.9241091,21.9578689 C12.8058809,21.9687019 12.6870573,21.9774769 12.5676745,21.9841578 C12.5317231,21.9861707 12.4954521,21.9880058 12.4591307,21.9896472 C12.4057799,21.9920562 12.3526729,21.9940369 12.2994616,21.9956019 C12.2003387,21.9985221 12.1003419,22 12,22 C11.8996581,22 11.7996613,21.9985221 11.7000303,21.9955869 L12,22 C11.8492858,22 11.6993504,21.9966659 11.5502634,21.9900673 C11.5101985,21.9882925 11.4705955,21.9863044 11.431054,21.9840865 C11.3753284,21.9809613 11.3196693,21.9773757 11.2641361,21.9733367 C11.2121078,21.9695511 11.1604671,21.965392 11.1089387,21.960842 C11.0987512,21.9599432 11.087819,21.9589607 11.0768919,21.9579606 C5.98572453,21.4909563 2,17.2109361 2,12 C2,6.79145534 5.98206706,2.51297228 11.067884,2.04286798 L11.0698856,2.04268317 L11.1289827,2.03740833 C11.1844726,2.03262043 11.2400921,2.0282857 11.2958375,2.02440786 L11.0698856,2.04268317 C11.1795419,2.03256928 11.289711,2.02422582 11.4003642,2.01768164 C11.4684108,2.01365454 11.5370454,2.01029212 11.6058584,2.00762503 C11.6379601,2.00638212 11.6696885,2.00530261 11.7014541,2.00437123 C11.8003324,2.00146798 11.8999948,2 12,2 Z M14.9605708,13.0011053 L9.03942993,13.0011053 C9.2556374,15.7345351 10.3482037,18.1858104 12.0002978,20 C13.6518605,18.1858104 14.7443695,15.7345351 14.9605708,13.0011053 Z M7.03411742,13.0007857 L4.06201291,13.0009551 C4.43072038,15.9548613 6.40987685,18.408508 9.09305822,19.4554712 C7.91128979,17.5578463 7.19398687,15.3401075 7.03411742,13.0007857 Z M19.9379871,13.0009551 L16.9658883,13.000706 C16.8060361,15.3400045 16.0887799,17.5578096 14.9073876,19.4559914 C17.5901232,18.408508 19.5692796,15.9548613 19.9379871,13.0009551 Z M9.09228723,4.54397469 L8.94031619,4.60595876 C6.33467096,5.68538778 4.4232472,8.10203203 4.06188768,11.0000487 L7.03399151,10.9998221 C7.19349016,8.66134944 7.90999033,6.44350106 9.09228723,4.54397469 Z M12.0010044,4.00000006 L11.999,4 L11.8375134,4.1817898 L11.6215735,4.43792576 C10.1816087,6.20031489 9.23813979,8.48027149 9.03926591,10.9998612 L14.9607421,10.999963 C14.7450258,8.26670869 13.6530751,5.81544737 12.0016078,4.00098383 L12.0010044,4.00000006 Z M14.9069418,4.54452879 L14.9759,4.65460226 C16.116896,6.52836364 16.8095759,8.70587882 16.9660312,11.0002812 L19.9381123,11.0000487 C19.569728,8.04569458 17.5904271,5.59161056 14.9069418,4.54452879 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Library-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Library-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Library-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M20,20 L20,22 L4,22 L4,20 L20,20 Z M13,12 L13,18 L11,18 L11,12 L13,12 Z M18,12 L18,18 L16,18 L16,12 L18,12 Z M8,12 L8,18 L6,18 L6,12 L8,12 Z M12,2 L22,10 L2,10 L12,2 Z M12,4.561 L7.7,8 L16.299,8 L12,4.561 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Location-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Location-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Location-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M22,2 L12,22 L9.36956522,14.6304348 L2,12 L22,2 Z M17.528,6.471 L7.087,11.692 L10.9345531,13.0654469 L12.307,16.912 L17.528,6.471 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Mag-Glass-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Mag-Glass-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Mag-Glass-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M15.4059165,4.30009164 C18.2686816,7.16285678 18.4591323,11.6859853 15.9772685,14.7696678 L16.7941446,15.4059165 L22,20.6117719 L20.6117719,22 L15.4059165,16.7941446 L14.7696678,15.9772685 C11.6859853,18.4591323 7.16285678,18.2686816 4.30009164,15.4059165 C1.23330279,12.3391276 1.23330279,7.36688049 4.30009164,4.30009164 C7.36688049,1.23330279 12.3391276,1.23330279 15.4059165,4.30009164 Z M5.54949693,5.54949693 C3.17273557,7.92625829 3.17273557,11.7797498 5.54949693,14.1565112 C7.92625829,16.5332726 11.7797498,16.5332726 14.1565112,14.1565112 C16.5332726,11.7797498 16.5332726,7.92625829 14.1565112,5.54949693 C11.7797498,3.17273557 7.92625829,3.17273557 5.54949693,5.54949693 Z" id="Shape" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Mail-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Mail-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Mail-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M12,2 L22,8 L22,22 L2,22 L2,8 L12,2 Z M20,11.4 L12,16.2 L4,11.4 L4,20 L20,20 L20,11.4 Z M12,8.331 L7.386,11.099 L12,13.869 L16.614,11.099 L12,8.331 Z M12,4.331 L4.052,9.099 L5.443,9.934 L12,6 L18.557,9.934 L19.948,9.099 L12,4.331 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Refresh-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Refresh-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Refresh-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M4,12 C4,9.49542359 5.15094447,7.25966466 6.95278465,5.79277197 L8.5273711,7.10647326 C6.99782453,8.19385943 6,9.98040251 6,12 C6,15.3137085 8.6862915,18 12,18 L12,16 L16,19 L12,22 L12,20 L12,20 C7.581722,20 4,16.418278 4,12 Z M12,2 L12,4 L12,4 C16.418278,4 20,7.581722 20,12 C20,14.5045764 18.8490555,16.7403353 17.0472153,18.207228 L15.4716163,16.8942464 C17.0017351,15.806929 18,14.0200431 18,12 C18,8.6862915 15.3137085,6 12,6 L12,8 L8,5 L12,2 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/Upload-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/Upload-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/Upload-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M4,16 L4,20 L20,20 L20,16 L22,16 L22,22 L2,22 L2,16 L4,16 Z M12.0002405,2 L17.054,7.544 L15.658,8.963 L13,6.047 L13,18 L11,18 L11,6.049 L8.343,8.963 L6.947,7.543 L12.0002405,2 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/assets/icons/View-More-MD.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>🧩 Icons/Simple/Action/24px/View-More-MD</title>
-    <g id="🧩-Icons/Simple/Action/24px/View-More-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M19,9 C20.6568542,9 22,10.3431458 22,12 C22,13.6568542 20.6568542,15 19,15 C17.3431458,15 16,13.6568542 16,12 C16,10.3431458 17.3431458,9 19,9 Z M12,9 C13.6568542,9 15,10.3431458 15,12 C15,13.6568542 13.6568542,15 12,15 C10.3431458,15 9,13.6568542 9,12 C9,10.3431458 10.3431458,9 12,9 Z M5,9 C6.65685425,9 8,10.3431458 8,12 C8,13.6568542 6.65685425,15 5,15 C3.34314575,15 2,13.6568542 2,12 C2,10.3431458 3.34314575,9 5,9 Z M19.005,10.88 C18.3836797,10.88 17.88,11.3836797 17.88,12.005 C17.88,12.6263203 18.3836797,13.13 19.005,13.13 C19.6263203,13.13 20.13,12.6263203 20.13,12.005 C20.13,11.3836797 19.6263203,10.88 19.005,10.88 Z M12.005,10.88 C11.3836797,10.88 10.88,11.3836797 10.88,12.005 C10.88,12.6263203 11.3836797,13.13 12.005,13.13 C12.6263203,13.13 13.13,12.6263203 13.13,12.005 C13.13,11.3836797 12.6263203,10.88 12.005,10.88 Z M5.005,10.88 C4.38367966,10.88 3.88,11.3836797 3.88,12.005 C3.88,12.6263203 4.38367966,13.13 5.005,13.13 C5.62632034,13.13 6.13,12.6263203 6.13,12.005 C6.13,11.3836797 5.62632034,10.88 5.005,10.88 Z" id="Primary" fill="#000000"></path>
-    </g>
-</svg>

design_handoff_familienarchiv_redesign/prototypes/colors_and_type.css

@@ -1,254 +0,0 @@
-/* ============================================================
-   Familienarchiv — Design System Tokens
-   Extracted from frontend/src/routes/layout.css
-   ============================================================ */
-
-/* ─── Fonts ─── */
-/* Tinos = Times substitute, Montserrat = Gotham substitute
-   (De Gruyter Brill CI) — loaded from Google Fonts. */
-@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@400;500;600;700&display=swap');
-
-:root {
-	/* ─── Font families ─── */
-	--font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
-	--font-serif: 'Tinos', 'Times New Roman', Georgia, serif;
-
-	/* ─── Raw brand palette (never used directly in components) ─── */
-	--palette-navy: #012851;
-	--palette-mint: #a1dcd8;
-	--palette-turquoise: #00c7b1;
-	--palette-sand: #f0efe9;
-
-	/* ─── Semantic surfaces ─── */
-	--c-canvas: #f0efe9;   /* app background (sand) */
-	--c-surface: #ffffff;  /* cards / inputs */
-	--c-overlay: #ffffff;  /* menus, popovers */
-	--c-muted: #f5f4ef;    /* subtle fills */
-
-	/* ─── Borders ─── */
-	--c-line: #e4e2d7;
-	--c-line-2: #eeede8;
-
-	/* ─── Text (ink) ─── */
-	--c-ink: #012851;     /* navy — primary text */
-	--c-ink-2: #4b5563;   /* gray-600 — body secondary */
-	--c-ink-3: #6b7280;   /* gray-500 — meta / placeholder */
-
-	/* ─── Accent: decorative mint ─── */
-	--c-accent: #a1dcd8;
-	--c-accent-bg: rgba(161, 220, 216, 0.15);
-
-	/* ─── Primary interactive (navy) ─── */
-	--c-primary: #012851;
-	--c-primary-fg: #ffffff;
-
-	/* ─── Header — always brand-navy ─── */
-	--c-header: #012851;
-
-	/* ─── Turquoise — transcription accent ─── */
-	--c-turquoise: #00c7b1;
-	--c-turquoise-fg: #ffffff;
-
-	/* ─── Focus ring (navy in light mode) ─── */
-	--c-focus-ring: #012851;
-
-	/* ─── Danger ─── */
-	--c-danger: #c0392b;
-	--c-danger-fg: #ffffff;
-
-	/* ─── Warning (amber AA on white) ─── */
-	--c-warning: #b45309;
-	--c-warning-fg: #ffffff;
-
-	/* ─── PDF viewer chrome ─── */
-	--c-pdf-bg: #ebebeb;
-	--c-pdf-ctrl: #d8d8d8;
-	--c-pdf-text: #333333;
-
-	/* ─── Tag dot colors (decorative) ─── */
-	--c-tag-sage: #5a8a6a;
-	--c-tag-sienna: #a0522d;
-	--c-tag-amber: #c17a00;
-	--c-tag-slate: #607080;
-	--c-tag-violet: #7a4f9a;
-	--c-tag-rose: #c0446e;
-	--c-tag-cobalt: #3060b0;
-	--c-tag-moss: #4a7a3a;
-	--c-tag-sand: #9a8040;
-	--c-tag-coral: #c05540;
-
-	/* ─── Person badge types ─── */
-	--c-badge-institution-bg: #e8eff7;
-	--c-badge-institution-text: #1a4971;
-	--c-badge-institution-border: #c4d5e8;
-	--c-badge-group-bg: #f0e8f5;
-	--c-badge-group-text: #5a2d6f;
-	--c-badge-group-border: #d8c5e3;
-	--c-badge-unknown-bg: #fdf4e3;
-	--c-badge-unknown-text: #7a5a0a;
-	--c-badge-unknown-border: #f0ddb3;
-
-	/* ─── Spacing / radii ─── */
-	--radius-none: 0;
-	--radius-sm: 2px;    /* cards, inputs — "rounded-sm" in tailwind */
-	--radius-md: 4px;
-	--radius-full: 9999px;
-
-	/* ─── Shadows ─── */
-	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-
-	/* ─── Breakpoints (reference only) ─── */
-	--breakpoint-xs: 375px;
-
-	/* ─── Typographic sizes ─── */
-	--text-huge: 4rem;  /* 64px — hero */
-}
-
-/* ─── Dark mode (navy-tinted) ─── */
-:root[data-theme='dark'] {
-	color-scheme: dark;
-
-	--c-canvas: #010e1e;
-	--c-surface: #011526;
-	--c-overlay: #011e38;
-	--c-muted: #011a30;
-
-	--c-line: #0d3358;
-	--c-line-2: #092843;
-
-	--c-ink: #f0efe9;
-	--c-ink-2: #9ca3af;
-	--c-ink-3: #8b97a5;
-
-	--c-accent: #00c7b1;
-	--c-accent-bg: rgba(0, 199, 177, 0.12);
-
-	--c-primary: #a1dcd8;
-	--c-primary-fg: #012851;
-
-	--c-header: #012851;
-
-	--c-focus-ring: #a1dcd8;
-
-	--c-pdf-bg: #010e1e;
-	--c-pdf-ctrl: #011526;
-	--c-pdf-text: #f0efe9;
-
-	--c-danger: #e55347;
-	--c-danger-fg: #ffffff;
-}
-
-/* ─── Base element styles ─── */
-body {
-	background-color: var(--c-canvas);
-	color: var(--c-ink);
-	font-family: var(--font-serif);
-	font-size: 16px;
-	line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-	font-family: var(--font-sans);
-	font-weight: 600;
-	color: var(--c-ink);
-}
-
-/* ─── Semantic typography
-   The app uses Montserrat for UI labels / headings / buttons and
-   Tinos for body, letter content, transcriptions, and document
-   titles. Labels are almost always UPPERCASE + tracking-widest. ─── */
-
-.ds-display {
-	font-family: var(--font-sans);
-	font-size: 64px;     /* text-huge */
-	font-weight: 700;
-	letter-spacing: 0.05em;
-	text-transform: uppercase;
-	line-height: 1.05;
-	color: var(--c-ink);
-}
-
-.ds-h1 {
-	font-family: var(--font-sans);
-	font-size: 32px;
-	font-weight: 700;
-	letter-spacing: 0.1em;        /* tracking-widest */
-	text-transform: uppercase;
-	color: var(--c-ink);
-}
-
-.ds-h2 {
-	font-family: var(--font-sans);
-	font-size: 20px;
-	font-weight: 700;
-	letter-spacing: 0.1em;
-	text-transform: uppercase;
-	color: var(--c-ink);
-}
-
-.ds-h3 {                          /* section title — serif, used for documents */
-	font-family: var(--font-serif);
-	font-size: 20px;
-	font-weight: 500;
-	color: var(--c-ink);
-}
-
-.ds-body {
-	font-family: var(--font-serif);
-	font-size: 16px;
-	line-height: 1.6;
-	color: var(--c-ink);
-}
-
-.ds-body-sm {
-	font-family: var(--font-sans);
-	font-size: 14px;
-	color: var(--c-ink-2);
-}
-
-.ds-meta {                        /* timestamps, counts, field meta */
-	font-family: var(--font-sans);
-	font-size: 12px;
-	color: var(--c-ink-3);
-}
-
-.ds-label {                       /* form labels, section captions */
-	font-family: var(--font-sans);
-	font-size: 12px;
-	font-weight: 700;
-	letter-spacing: 0.1em;
-	text-transform: uppercase;
-	color: var(--c-ink-2);
-}
-
-.ds-label-xs {                    /* tag chip style — extra-tiny caps */
-	font-family: var(--font-sans);
-	font-size: 10px;
-	font-weight: 700;
-	letter-spacing: 0.15em;
-	text-transform: uppercase;
-	color: var(--c-ink);
-}
-
-.ds-button-label {                /* buttons, nav items */
-	font-family: var(--font-sans);
-	font-size: 12px;
-	font-weight: 700;
-	letter-spacing: 0.1em;
-	text-transform: uppercase;
-}
-
-.ds-link {
-	color: var(--c-ink);
-	text-decoration: underline;
-	text-decoration-color: var(--c-accent);
-	text-underline-offset: 4px;
-	text-decoration-thickness: 2px;
-}
-
-.ds-italic-quote {                /* search snippet / excerpt */
-	font-family: var(--font-serif);
-	font-style: italic;
-	color: var(--c-ink-2);
-}

frontend/e2e/zeitstrahl-filter.spec.ts

@@ -1,93 +0,0 @@
-import AxeBuilder from '@axe-core/playwright';
-import { test, expect, type APIRequestContext } from '@playwright/test';
-
-/**
- * Global /zeitstrahl layer filter (#780). Runs against the real stack with the
- * seeded admin session (auth.setup). Covers the primary journey (hide the
- * Letters layer → letter cards vanish + the trigger reports one active filter →
- * reset restores everything) and a 375px axe pass with the collapsible open in
- * both light and dark mode.
- *
- * #779 (the /zeitstrahl route) is merged, so this spec is NOT skipped. Per
- * e2e/CLAUDE.md, E2E is not yet wired into CI — this axe gate runs locally only
- * for now.
- */
-
-const stamp = () => new Date().toISOString().replace(/[^0-9]/g, '');
-
-async function createPerson(request: APIRequestContext, firstName: string, lastName: string) {
-	const res = await request.post('/api/persons', {
-		data: { personType: 'PERSON', firstName, lastName }
-	});
-	if (!res.ok()) throw new Error(`create person failed: ${res.status()}`);
-	return (await res.json()).id as string;
-}
-
-/** Seeds one dated letter so the timeline has content (and a LetterCard to hide). */
-async function seedDatedLetter(request: APIRequestContext, isoDate: string, title: string) {
-	const senderId = await createPerson(request, 'Filter-Test', `Absender ${stamp()}`);
-	const receiverId = await createPerson(request, 'Filter-Test', `Empfaenger ${stamp()}`);
-
-	const createRes = await request.post('/api/documents', { multipart: { title } });
-	if (!createRes.ok()) throw new Error(`create document failed: ${createRes.status()}`);
-	const docId = (await createRes.json()).id as string;
-
-	const put = await request.put(`/api/documents/${docId}`, {
-		multipart: {
-			title,
-			documentDate: isoDate,
-			metaDatePrecision: 'DAY',
-			senderId,
-			receiverIds: receiverId
-		}
-	});
-	if (!put.ok()) throw new Error(`update document failed: ${put.status()}`);
-}
-
-test.describe('Zeitstrahl — layer filter (#780)', () => {
-	test('hiding the Letters layer removes letter cards and reports the active count; reset restores', async ({
-		page,
-		request
-	}) => {
-		// A sparse year keeps the seeded letter an individual card (not a dense strip).
-		const title = `E2E Filter Brief ${stamp()}`;
-		await seedDatedLetter(request, '1903-03-03', title);
-
-		await page.goto('/zeitstrahl');
-		await page.waitForSelector('[data-hydrated]');
-		await expect(page.getByText(title)).toBeVisible();
-
-		await page.getByTestId('timeline-filter-trigger').click();
-		await page.getByTestId('timeline-filter-letters').click();
-
-		await expect(page.getByText(title)).toHaveCount(0);
-		await expect(page.getByTestId('timeline-filter-trigger')).toContainText('1 aktiv');
-
-		await page.getByTestId('timeline-filter-reset').click();
-		await expect(page.getByText(title)).toBeVisible();
-	});
-
-	test('no wcag2a/wcag2aa violations at 375px with the filter bar open (light + dark)', async ({
-		page,
-		request
-	}) => {
-		await seedDatedLetter(request, '1915-06-15', `E2E Filter A11y ${stamp()}`);
-
-		await page.setViewportSize({ width: 375, height: 800 });
-		await page.goto('/zeitstrahl');
-		await page.waitForSelector('[data-hydrated]');
-
-		// Open the collapsible so axe scans the toggles, not just the trigger.
-		await page.getByTestId('timeline-filter-trigger').click();
-		await expect(page.getByTestId('timeline-filter-personal')).toBeVisible();
-
-		const scan = () => new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();
-
-		const light = await scan();
-		expect(light.violations, JSON.stringify(light.violations, null, 2)).toEqual([]);
-
-		await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
-		const dark = await scan();
-		expect(dark.violations, JSON.stringify(dark.violations, null, 2)).toEqual([]);
-	});
-});

frontend/e2e/zeitstrahl-note.spec.ts

@@ -1,77 +0,0 @@
-import { test, expect, type APIRequestContext } from '@playwright/test';
-
-/**
- * Curator-note display on /zeitstrahl (#844) — validates that a description saved
- * against a curated timeline event surfaces in the DOM under that event's title.
- * Covers REQ-001 (description flows from backend) and REQ-004 (rendered below title).
- */
-
-const stamp = () => new Date().toISOString().replace(/[^0-9]/g, '');
-
-async function createEvent(
-	request: APIRequestContext,
-	type: 'PERSONAL' | 'HISTORICAL',
-	title: string,
-	description: string
-): Promise<string> {
-	const res = await request.post('/api/timeline/events', {
-		data: {
-			title,
-			type,
-			eventDate: '1918-11-11',
-			precision: 'DAY',
-			description
-		}
-	});
-	if (!res.ok()) throw new Error(`create event failed: ${res.status()} ${await res.text()}`);
-	return (await res.json()).id as string;
-}
-
-async function deleteEvent(request: APIRequestContext, id: string): Promise<void> {
-	await request.delete(`/api/timeline/events/${id}`);
-}
-
-test.describe('Zeitstrahl event note (#844)', () => {
-	let personalEventId: string;
-	let historicalEventId: string;
-	const personalTitle = `E2E Persönlich ${stamp()}`;
-	const historicalTitle = `E2E Historisch ${stamp()}`;
-	const personalNote = 'Persönliche Notiz für diesen Moment.';
-	const historicalNote = 'Historischer Kontext für dieses Ereignis.';
-
-	test.beforeAll(async ({ request }) => {
-		personalEventId = await createEvent(request, 'PERSONAL', personalTitle, personalNote);
-		historicalEventId = await createEvent(request, 'HISTORICAL', historicalTitle, historicalNote);
-	});
-
-	test.afterAll(async ({ request }) => {
-		if (personalEventId) await deleteEvent(request, personalEventId);
-		if (historicalEventId) await deleteEvent(request, historicalEventId);
-	});
-
-	test('PERSONAL curated event note appears below its title on /zeitstrahl (REQ-001, REQ-004)', async ({
-		page
-	}) => {
-		await page.goto('/zeitstrahl');
-
-		const personalEntry = page.locator('li').filter({ hasText: personalTitle }).first();
-		await expect(personalEntry).toBeVisible({ timeout: 10000 });
-
-		const note = personalEntry.locator('[data-testid="event-note"]');
-		await expect(note).toBeVisible();
-		await expect(note).toContainText(personalNote);
-	});
-
-	test('HISTORICAL curated event note appears below its title on /zeitstrahl (REQ-001, REQ-004)', async ({
-		page
-	}) => {
-		await page.goto('/zeitstrahl');
-
-		const historicalEntry = page.locator('li').filter({ hasText: historicalTitle }).first();
-		await expect(historicalEntry).toBeVisible({ timeout: 10000 });
-
-		const note = historicalEntry.locator('[data-testid="event-note"]');
-		await expect(note).toBeVisible();
-		await expect(note).toContainText(historicalNote);
-	});
-});

frontend/messages/de.json

@@ -130,8 +130,6 @@
 	"doc_no_scan": "Kein Scan vorhanden",
 	"persons_heading": "Personenverzeichnis",
 	"persons_subtitle": "Durchsuchen Sie den Index aller erfassten Personen im Familienarchiv.",
-	"persons_eyebrow": "Verzeichnis",
-	"persons_lede": "Jede Hand, die schrieb oder genannt wurde — Absender, Empfänger, Erwähnte.",
 	"persons_btn_new": "Neue Person",
 	"persons_search_placeholder": "Namen suchen...",
 	"persons_empty_heading": "Keine Personen gefunden.",
@@ -190,7 +188,6 @@
 	"person_hint_generation": "Generation in der Familie (G 0 = älteste Generation)",
 	"person_year_error": "Bitte eine vierstellige Jahreszahl eingeben",
 	"person_years_error_order": "Geburtsjahr muss vor dem Todesjahr liegen",
-	"person_add_event": "Ereignis für diese Person",
 	"person_docs_heading": "Gesendete Dokumente",
 	"person_no_docs": "Diese Person ist noch nicht als Absender verknüpft.",
 	"person_received_docs_heading": "Empfangene Dokumente",
@@ -1038,7 +1035,6 @@
 	"nav_geschichten": "Geschichten",
 	"nav_zeitstrahl": "Zeitstrahl",
 	"timeline_heading": "Zeitstrahl",
-	"timeline_add_event": "Ereignis hinzufügen",
 	"timeline_empty_state": "Noch keine Ereignisse.",
 	"timeline_undated_section": "Ohne Datum",
 	"timeline_unknown_person": "Unbekannt",
@@ -1051,28 +1047,16 @@
 	"timeline_derived_birth": "Geburt",
 	"timeline_derived_death": "Tod",
 	"timeline_derived_marriage": "Heirat",
+	"timeline_grouping_date": "Gruppierung: Datum",
 	"timeline_provenance_derived": "abgeleitet",
 	"timeline_provenance_curated": "kuratiert",
-	"timeline_bucket_show_more": "+ {count} weitere Briefe anzeigen",
-	"timeline_bucket_show_less": "Weniger anzeigen",
 	"timeline_letter_glyph_label": "Brief",
-	"timeline_cluster_letter_count": "{count} Briefe",
 	"timeline_tag_chip_label": "Thema",
 	"timeline_layer_historical_suffix": "historisch",
 	"timeline_strip_density_caption": "Monats-Dichte",
 	"timeline_events_count": "{count} Ereignisse",
 	"timeline_letters_count_singular": "1 Brief",
 	"timeline_events_count_singular": "1 Ereignis",
-	"timeline_filter_label_layers": "Ebenen anzeigen",
-	"timeline_filter_layer_personal": "Persönliche Ereignisse",
-	"timeline_filter_layer_historical": "Historische Ereignisse",
-	"timeline_filter_layer_letters": "Briefe",
-	"timeline_filter_trigger": "Filter",
-	"timeline_filter_trigger_active": "Filter ({count} aktiv)",
-	"timeline_filter_reset": "Filter zurücksetzen",
-	"timeline_filter_empty_state": "Keine Einträge entsprechen diesen Filtern.",
-	"timeline_note_show_more": "mehr anzeigen",
-	"timeline_note_show_less": "weniger anzeigen",
 	"event_editor_new_title": "Neues Ereignis",
 	"event_editor_edit_title": "Ereignis bearbeiten",
 	"event_editor_section_when": "Wann",

frontend/messages/en.json

@@ -130,8 +130,6 @@
 	"doc_no_scan": "No scan available",
 	"persons_heading": "Person directory",
 	"persons_subtitle": "Browse the index of all recorded persons in the family archive.",
-	"persons_eyebrow": "Directory",
-	"persons_lede": "Every hand that wrote or was named — senders, recipients, those mentioned.",
 	"persons_btn_new": "New person",
 	"persons_search_placeholder": "Search names...",
 	"persons_empty_heading": "No persons found.",
@@ -190,7 +188,6 @@
 	"person_hint_generation": "Generation within the family (G 0 = oldest generation)",
 	"person_year_error": "Please enter a four-digit year",
 	"person_years_error_order": "Birth year must be before death year",
-	"person_add_event": "Add event for this person",
 	"person_docs_heading": "Sent documents",
 	"person_no_docs": "This person has not yet been linked as a sender.",
 	"person_received_docs_heading": "Received documents",
@@ -1038,7 +1035,6 @@
 	"nav_geschichten": "Stories",
 	"nav_zeitstrahl": "Timeline",
 	"timeline_heading": "Timeline",
-	"timeline_add_event": "Add event",
 	"timeline_empty_state": "No events yet.",
 	"timeline_undated_section": "Without Date",
 	"timeline_unknown_person": "Unknown",
@@ -1051,28 +1047,16 @@
 	"timeline_derived_birth": "Birth",
 	"timeline_derived_death": "Death",
 	"timeline_derived_marriage": "Marriage",
+	"timeline_grouping_date": "Grouping: Date",
 	"timeline_provenance_derived": "derived",
 	"timeline_provenance_curated": "curated",
-	"timeline_bucket_show_more": "+ {count} more letters",
-	"timeline_bucket_show_less": "Show fewer",
 	"timeline_letter_glyph_label": "Letter",
-	"timeline_cluster_letter_count": "{count} letters",
 	"timeline_tag_chip_label": "Topic",
 	"timeline_layer_historical_suffix": "historical",
 	"timeline_strip_density_caption": "Monthly density",
 	"timeline_events_count": "{count} events",
 	"timeline_letters_count_singular": "1 letter",
 	"timeline_events_count_singular": "1 event",
-	"timeline_filter_label_layers": "Show layers",
-	"timeline_filter_layer_personal": "Personal events",
-	"timeline_filter_layer_historical": "Historical events",
-	"timeline_filter_layer_letters": "Letters",
-	"timeline_filter_trigger": "Filter",
-	"timeline_filter_trigger_active": "Filter ({count} active)",
-	"timeline_filter_reset": "Reset filters",
-	"timeline_filter_empty_state": "No entries match these filters.",
-	"timeline_note_show_more": "show more",
-	"timeline_note_show_less": "show less",
 	"event_editor_new_title": "New event",
 	"event_editor_edit_title": "Edit event",
 	"event_editor_section_when": "When",

frontend/messages/es.json

@@ -130,8 +130,6 @@
 	"doc_no_scan": "No hay escaneo disponible",
 	"persons_heading": "Directorio de personas",
 	"persons_subtitle": "Explore el índice de todas las personas registradas en el archivo familiar.",
-	"persons_eyebrow": "Directorio",
-	"persons_lede": "Cada mano que escribió o fue nombrada — remitentes, destinatarios, mencionados.",
 	"persons_btn_new": "Nueva persona",
 	"persons_search_placeholder": "Buscar nombres...",
 	"persons_empty_heading": "No se encontraron personas.",
@@ -190,7 +188,6 @@
 	"person_hint_generation": "Generación dentro de la familia (G 0 = generación más antigua)",
 	"person_year_error": "Introduzca un año de cuatro dígitos",
 	"person_years_error_order": "El año de nacimiento debe ser anterior al año de fallecimiento",
-	"person_add_event": "Añadir evento para esta persona",
 	"person_docs_heading": "Documentos enviados",
 	"person_no_docs": "Esta persona aún no está vinculada como remitente.",
 	"person_received_docs_heading": "Documentos recibidos",
@@ -1038,7 +1035,6 @@
 	"nav_geschichten": "Historias",
 	"nav_zeitstrahl": "Línea de tiempo",
 	"timeline_heading": "Línea de tiempo",
-	"timeline_add_event": "Añadir evento",
 	"timeline_empty_state": "Aún no hay eventos.",
 	"timeline_undated_section": "Sin Fecha",
 	"timeline_unknown_person": "Desconocido",
@@ -1051,28 +1047,16 @@
 	"timeline_derived_birth": "Nacimiento",
 	"timeline_derived_death": "Fallecimiento",
 	"timeline_derived_marriage": "Matrimonio",
+	"timeline_grouping_date": "Agrupación: Fecha",
 	"timeline_provenance_derived": "derivado",
 	"timeline_provenance_curated": "curado",
-	"timeline_bucket_show_more": "+ {count} cartas más",
-	"timeline_bucket_show_less": "Mostrar menos",
 	"timeline_letter_glyph_label": "Carta",
-	"timeline_cluster_letter_count": "{count} cartas",
 	"timeline_tag_chip_label": "Tema",
 	"timeline_layer_historical_suffix": "histórico",
 	"timeline_strip_density_caption": "Densidad mensual",
 	"timeline_events_count": "{count} eventos",
 	"timeline_letters_count_singular": "1 carta",
 	"timeline_events_count_singular": "1 evento",
-	"timeline_filter_label_layers": "Mostrar capas",
-	"timeline_filter_layer_personal": "Eventos personales",
-	"timeline_filter_layer_historical": "Eventos históricos",
-	"timeline_filter_layer_letters": "Cartas",
-	"timeline_filter_trigger": "Filtro",
-	"timeline_filter_trigger_active": "Filtro ({count} activos)",
-	"timeline_filter_reset": "Restablecer filtros",
-	"timeline_filter_empty_state": "Ninguna entrada coincide con estos filtros.",
-	"timeline_note_show_more": "mostrar más",
-	"timeline_note_show_less": "mostrar menos",
 	"event_editor_new_title": "Nuevo evento",
 	"event_editor_edit_title": "Editar evento",
 	"event_editor_section_when": "Cuándo",

frontend/package-lock.json

@@ -9515,9 +9515,9 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "7.3.5",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.5.tgz",
-			"integrity": "sha512-KuOaNhcnGFN2zIPGA7wRmzF+lJA1sea7rHq17aiJ++9lzY1WWG6Jpwqwe1KNbRVPIqHmr8GLYx7jbrQcN/7/ww==",
+			"version": "7.3.3",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.3.tgz",
+			"integrity": "sha512-/4XH147Ui7OGTjg3HbdWe5arnZQSbfuRzdr9Ec7TQi5I7R+ir0Rlc9GIvD4v0XZurELqA035KVXJXpR61xhiTA==",
 			"license": "MIT",
 			"dependencies": {
 				"esbuild": "^0.27.0",

frontend/src/lib/generated/api.ts

@@ -2467,9 +2467,6 @@ export interface components {
             rootTagId?: string;
             rootTagName?: string;
             rootTagColor?: string;
-            /** Format: uuid */
-            linkedEventId?: string;
-            description?: string;
         };
         TimelineYearDTO: {
             /** Format: int32 */
@@ -2649,11 +2646,11 @@ export interface components {
             empty?: boolean;
         };
         PageableObject: {
+            paged?: boolean;
             /** Format: int32 */
             pageNumber?: number;
             /** Format: int32 */
             pageSize?: number;
-            paged?: boolean;
             /** Format: int64 */
             offset?: number;
             sort?: components["schemas"]["SortObject"];

frontend/src/lib/messages.spec.ts

@@ -74,10 +74,9 @@ describe('message key parity', () => {
 	// every locale so no surface ever falls back to a missing translation.
 	it('zeitstrahl visual-fidelity keys are present in all locales (#833 REQ-015)', () => {
 		const requiredKeys = [
+			'timeline_grouping_date',
 			'timeline_provenance_derived',
 			'timeline_provenance_curated',
-			'timeline_bucket_show_more',
-			'timeline_bucket_show_less',
 			'timeline_letter_glyph_label',
 			'timeline_layer_historical_suffix',
 			'timeline_strip_density_caption',
@@ -99,47 +98,4 @@ describe('message key parity', () => {
 		expect(en).toMatchObject({ timeline_tag_chip_label: 'Topic' });
 		expect(es).toMatchObject({ timeline_tag_chip_label: 'Tema' });
 	});
-
-	// #850 finding #6: the event-card letter count carries an sr-only "{count} Briefe" so the
-	// bare "· 2" never announces to a screen reader without context.
-	it('zeitstrahl cluster letter-count key is present in all locales (#850 finding #6)', () => {
-		expect(de).toHaveProperty('timeline_cluster_letter_count');
-		expect(en).toHaveProperty('timeline_cluster_letter_count');
-		expect(es).toHaveProperty('timeline_cluster_letter_count');
-	});
-
-	// #780 REQ-010: the layer-filter strings are Paraglide keys in every locale.
-	// timeline_filter_trigger (0 active) and timeline_filter_trigger_active ({count},
-	// ≥1 active) are distinct keys so the trigger never reads "Filter (0 aktiv)".
-	it('zeitstrahl layer-filter keys are present in all locales (#780 REQ-010)', () => {
-		const requiredKeys = [
-			'timeline_filter_label_layers',
-			'timeline_filter_layer_personal',
-			'timeline_filter_layer_historical',
-			'timeline_filter_layer_letters',
-			'timeline_filter_trigger',
-			'timeline_filter_trigger_active',
-			'timeline_filter_reset',
-			'timeline_filter_empty_state'
-		];
-		for (const key of requiredKeys) {
-			expect(de, `missing key in de: ${key}`).toHaveProperty(key);
-			expect(en, `missing key in en: ${key}`).toHaveProperty(key);
-			expect(es, `missing key in es: ${key}`).toHaveProperty(key);
-		}
-		// the active-count key carries the established {count} placeholder
-		expect(de.timeline_filter_trigger_active).toContain('{count}');
-		expect(en.timeline_filter_trigger_active).toContain('{count}');
-		expect(es.timeline_filter_trigger_active).toContain('{count}');
-	});
-
-	// #842: the two curator-affordance CTA labels (Zeitstrahl header + person page)
-	// are Paraglide keys present in every locale; the edit pencils reuse btn_edit.
-	it('curator-affordance CTA keys are present in all locales (#842)', () => {
-		for (const key of ['timeline_add_event', 'person_add_event']) {
-			expect(de, `missing key in de: ${key}`).toHaveProperty(key);
-			expect(en, `missing key in en: ${key}`).toHaveProperty(key);
-			expect(es, `missing key in es: ${key}`).toHaveProperty(key);
-		}
-	});
 });

frontend/src/lib/shared/avatarPalette.spec.ts

@@ -1,50 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { AVATAR_PALETTE } from './avatarPalette';
-
-// ─── WCAG 2.1 relative-luminance / contrast (1.4.3) ──────────────────────────
-// White initials sit on every palette color (DESIGN_RULES §5). The avatar
-// background is theme-invariant (same hex in light and dark), so a single
-// white-on-color check covers both themes.
-
-function srgbToLinear(channel: number): number {
-	const c = channel / 255;
-	return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-}
-
-function relativeLuminance(hex: string): number {
-	const r = parseInt(hex.slice(1, 3), 16);
-	const g = parseInt(hex.slice(3, 5), 16);
-	const b = parseInt(hex.slice(5, 7), 16);
-	return 0.2126 * srgbToLinear(r) + 0.7152 * srgbToLinear(g) + 0.0722 * srgbToLinear(b);
-}
-
-function contrastRatio(a: string, b: string): number {
-	const la = relativeLuminance(a);
-	const lb = relativeLuminance(b);
-	const [hi, lo] = la > lb ? [la, lb] : [lb, la];
-	return (hi + 0.05) / (lo + 0.05);
-}
-
-const WHITE = '#ffffff';
-
-describe('AVATAR_PALETTE', () => {
-	it('has exactly 10 colors (DESIGN_RULES §5)', () => {
-		expect(AVATAR_PALETTE).toHaveLength(10);
-	});
-
-	it('is all lowercase 6-digit hex', () => {
-		for (const c of AVATAR_PALETTE) {
-			expect(c).toMatch(/^#[0-9a-f]{6}$/);
-		}
-	});
-
-	it('has no duplicate colors (each person color is distinct)', () => {
-		expect(new Set(AVATAR_PALETTE).size).toBe(AVATAR_PALETTE.length);
-	});
-
-	it('every color meets WCAG AA (>=4.5:1) against white initials in both themes', () => {
-		for (const c of AVATAR_PALETTE) {
-			expect(contrastRatio(c, WHITE)).toBeGreaterThanOrEqual(4.5);
-		}
-	});
-});

frontend/src/lib/shared/avatarPalette.ts

@@ -1,32 +0,0 @@
-/**
- * Canonical 10-color person/avatar palette — single source of truth.
- *
- * Used by `<Avatar>` (issue #855), hashed by name so the same person renders the
- * same color on every screen (DESIGN_RULES §5). Do not duplicate these values in
- * CSS or another module; import this constant instead.
- *
- * White Montserrat initials sit on each color, so every swatch must meet WCAG AA
- * (≥4.5:1) for normal text — avatar initials are 700-weight but ≤16px, below the
- * large-text threshold. The background is theme-invariant (identical hex in light
- * and dark, white initials in both), so one white-on-color check covers both
- * themes. Guarded by `avatarPalette.spec.ts`.
- *
- * Three §1 brand hues failed white-on-color and use AA-darkened variants here;
- * the bright originals remain the decorative tag-dot colors in `layout.css`
- * (tag dots carry no text, so the contrast floor does not apply to them):
- *   sage  #5a8a6a → #527e61  (3.98 → 4.65:1)
- *   amber #c17a00 → #a46800  (3.47 → 4.61:1)
- *   sand  #9a8040 → #897239  (3.79 → 4.64:1)
- */
-export const AVATAR_PALETTE = [
-	'#527e61', // sage   (AA-adjusted from #5a8a6a)
-	'#a0522d', // sienna
-	'#a46800', // amber  (AA-adjusted from #c17a00)
-	'#607080', // slate
-	'#7a4f9a', // violet
-	'#c0446e', // rose
-	'#3060b0', // cobalt
-	'#4a7a3a', // moss
-	'#897239', // sand   (AA-adjusted from #9a8040)
-	'#c05540' // coral
-] as const;

frontend/src/lib/shared/primitives/PageHeader.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-import type { Snippet } from 'svelte';
-
-let {
-	eyebrow,
-	title,
-	lede,
-	right
-}: {
-	eyebrow: string;
-	title: string;
-	lede?: string;
-	right?: Snippet;
-} = $props();
-</script>
-
-<div
-	data-testid="page-header-wrapper"
-	style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap"
->
-	<div
-		data-testid="page-header-inner"
-		style="border-left:4px solid var(--c-accent); padding-left:18px"
-	>
-		<div
-			data-testid="page-header-eyebrow"
-			style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px"
-		>
-			{eyebrow}
-		</div>
-		<h1
-			style="font-family:var(--font-serif); font-weight:700; font-size:clamp(28px,8vw,46px); line-height:1.06; color:var(--c-ink); margin:0"
-		>
-			{title}
-		</h1>
-		{#if lede}
-			<p
-				data-testid="page-header-lede"
-				style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px"
-			>
-				{lede}
-			</p>
-		{/if}
-	</div>
-	{#if right}
-		{@render right()}
-	{/if}
-</div>

frontend/src/lib/shared/primitives/PageHeader.svelte.spec.ts

@@ -1,135 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
-
-import PageHeader from './PageHeader.svelte';
-
-afterEach(() => {
-	cleanup();
-});
-
-describe('PageHeader', () => {
-	// ── Structural / heading-hierarchy assertions ─────────────────────────
-
-	it('renders exactly one h1 containing the title', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const headings = page.getByRole('heading', { level: 1 });
-		await expect.element(headings).toBeInTheDocument();
-		await expect.element(headings).toHaveTextContent('Personen');
-	});
-
-	it('renders the eyebrow as a non-heading element (div or span)', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		// The eyebrow must NOT be a heading of any level
-		const h1 = page.getByRole('heading', { level: 1 });
-		await expect.element(h1).toBeInTheDocument();
-
-		// No h2-h6 headings should be present
-		const h2 = page.getByRole('heading', { level: 2 });
-		await expect.element(h2).not.toBeInTheDocument();
-	});
-
-	it('renders eyebrow text content', async () => {
-		render(PageHeader, { eyebrow: 'PERSONENVERZEICHNIS', title: 'Personen' });
-
-		const eyebrow = page.getByTestId('page-header-eyebrow');
-		await expect.element(eyebrow).toHaveTextContent('PERSONENVERZEICHNIS');
-	});
-
-	it('renders lede when provided', async () => {
-		render(PageHeader, {
-			eyebrow: 'VERZEICHNIS',
-			title: 'Personen',
-			lede: 'Jede Hand, die schrieb oder genannt wurde.'
-		});
-
-		const lede = page.getByTestId('page-header-lede');
-		await expect.element(lede).toHaveTextContent('Jede Hand, die schrieb oder genannt wurde.');
-	});
-
-	it('does not render lede element when lede prop is omitted', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const lede = page.getByTestId('page-header-lede');
-		await expect.element(lede).not.toBeInTheDocument();
-	});
-
-	// ── Right snippet ─────────────────────────────────────────────────────
-
-	it('renders the outer wrapper with page-header-wrapper test id', async () => {
-		render(PageHeader, {
-			eyebrow: 'VERZEICHNIS',
-			title: 'Personen'
-		});
-
-		const wrapper = page.getByTestId('page-header-wrapper');
-		await expect.element(wrapper).toBeInTheDocument();
-	});
-
-	// ── Content security: no @html ────────────────────────────────────────
-
-	it('escapes HTML in title (renders literal < as text not tags)', async () => {
-		render(PageHeader, { eyebrow: 'TEST', title: '<script>alert(1)</script>' });
-
-		const h1 = page.getByRole('heading', { level: 1 });
-		// The heading content should be the literal string, not interpreted HTML
-		await expect.element(h1).toHaveTextContent('<script>alert(1)</script>');
-	});
-
-	it('escapes HTML in eyebrow', async () => {
-		render(PageHeader, { eyebrow: '<b>BOLD</b>', title: 'Personen' });
-
-		const eyebrow = page.getByTestId('page-header-eyebrow');
-		await expect.element(eyebrow).toHaveTextContent('<b>BOLD</b>');
-	});
-
-	// ── Design tokens / style ─────────────────────────────────────────────
-
-	it('h1 has font-size set to the clamp expression', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const h1 = page.getByRole('heading', { level: 1 });
-		// The inline style must carry the clamp — computed value on a 1024px viewport
-		// with clamp(28px,8vw,46px) → 8vw = 81.92px > 46px → capped at 46px
-		const el = h1.element() as HTMLElement;
-		const fs = el.style.fontSize || getComputedStyle(el).fontSize;
-		expect(fs).toMatch(/clamp|46px|28px/);
-	});
-
-	it('wrapper has data-testid page-header-wrapper', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const wrapper = page.getByTestId('page-header-wrapper');
-		await expect.element(wrapper).toBeInTheDocument();
-	});
-
-	it('inner container inline style includes the 4px accent left border and 18px padding', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const inner = page.getByTestId('page-header-inner');
-		const el = inner.element() as HTMLElement;
-		const styleAttr = el.getAttribute('style') ?? '';
-		expect(styleAttr).toContain('border-left:4px solid var(--c-accent)');
-		expect(styleAttr).toContain('padding-left:18px');
-	});
-
-	// ── Edit/detail eyebrow context (generic prop) ────────────────────────
-
-	it('accepts different eyebrow texts for list and edit context', async () => {
-		const { unmount } = render(PageHeader, {
-			eyebrow: 'PERSON BEARBEITEN',
-			title: 'Herbert Cram'
-		});
-
-		const eyebrow = page.getByTestId('page-header-eyebrow');
-		await expect.element(eyebrow).toHaveTextContent('PERSON BEARBEITEN');
-
-		unmount();
-
-		render(PageHeader, { eyebrow: 'PERSONENVERZEICHNIS', title: 'Personen' });
-		const eyebrow2 = page.getByTestId('page-header-eyebrow');
-		await expect.element(eyebrow2).toHaveTextContent('PERSONENVERZEICHNIS');
-	});
-});

frontend/src/lib/timeline/EventCluster.svelte

@@ -1,104 +0,0 @@
-<script lang="ts">
-import * as m from '$lib/paraglide/messages.js';
-import LetterCard from './LetterCard.svelte';
-import GlyphLabel from './GlyphLabel.svelte';
-import EventHeader from './EventHeader.svelte';
-import { entryKey } from './entryKey';
-import { CLUSTER_PREVIEW } from './eventClustering';
-import type { components } from '$lib/generated/api';
-
-type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
-
-/**
- * A curated event with linked letters, rendered as one contained card: the event IS the card's
- * header (so its title reads once — never also as a floating pill, #850 REQ-002), and its letters
- * sit inside as compact `.lcard.ev` cards.
- *
- * - Same-year event (`event` given): the shared EventHeader carries the accent glyph + sr-only
- *   label, the title, a `{date} · {kuratiert|abgeleitet}` subtitle, the letter count, and — for a
- *   curator on a curated event — an edit link to `/zeitstrahl/events/{eventId}/edit` (REQ-002).
- * - Cross-year (`title` given, no `event`): a plain `✉ {title}` text header, no edit link, no pill
- *   chrome — it holds that other year's linked letters (REQ-004).
- *
- * A card shows its first {@link CLUSTER_PREVIEW} letters, then a keyboard-operable show-more/less
- * toggle reveals/collapses the rest instead of flooding the timeline (REQ-003).
- */
-let {
-	letters,
-	event = undefined,
-	title = '',
-	canWrite = false
-}: {
-	letters: TimelineEntryDTO[];
-	/** The same-year curated event whose letters this card holds — renders as the header. */
-	event?: TimelineEntryDTO;
-	/** Header label for a cross-year card (no `event`). */
-	title?: string;
-	canWrite?: boolean;
-} = $props();
-
-const count = $derived(letters.length);
-
-// First-5 preview + show-more (REQ-003): a large cluster stays readable instead of dumping every
-// card into the timeline.
-let expanded = $state(false);
-const visible = $derived(expanded ? letters : letters.slice(0, CLUSTER_PREVIEW));
-const hiddenCount = $derived(letters.length - CLUSTER_PREVIEW);
-</script>
-
-<section
-	class="my-3 overflow-hidden rounded-md border border-l-2 border-line border-l-brand-mint bg-surface shadow-sm"
-	data-testid="event-card"
->
-	{#if event}
-		<!-- A same-year curated event IS the card header (the shared EventHeader) — its title reads
-		     once here, never also as a floating pill (REQ-002); the edit pencil uses the single
-		     canEditEvent gate (REQ-010, #850 finding #5). -->
-		<header
-			data-testid="event-header"
-			class="flex items-center gap-2 border-b border-line bg-canvas px-3 py-2"
-		>
-			<EventHeader entry={event} canWrite={canWrite} count={count} />
-		</header>
-	{:else}
-		<!-- Cross-year card (REQ-004): the same event's letters in another year band get a plain
-		     ✉ text header — no pill chrome, no edit link. -->
-		<header
-			data-testid="event-header"
-			class="flex items-center gap-2 border-b border-line px-3 py-2"
-		>
-			<span class="font-serif text-sm font-bold whitespace-pre-line text-ink">
-				<GlyphLabel glyph="✉" label={m.timeline_letter_glyph_label()} />
-				{title}
-			</span>
-			<span data-testid="event-count" class="font-sans text-xs text-ink-3">
-				<span aria-hidden="true">· {count}</span>
-				<span class="sr-only">{m.timeline_cluster_letter_count({ count })}</span>
-			</span>
-		</header>
-	{/if}
-
-	<div class="px-3 py-2">
-		<ul class="space-y-1.5">
-			{#each visible as letter (entryKey(letter))}
-				<li>
-					<LetterCard entry={letter} variant="event" compact={true} />
-				</li>
-			{/each}
-		</ul>
-		{#if hiddenCount > 0}
-			<button
-				type="button"
-				data-testid="bucket-show-more"
-				aria-expanded={expanded}
-				onclick={() => (expanded = !expanded)}
-				style="display: inline-flex; align-items: center; min-height: 44px"
-				class="mt-1 px-1 font-sans text-xs font-semibold text-brand-navy hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
-			>
-				{expanded
-					? m.timeline_bucket_show_less()
-					: m.timeline_bucket_show_more({ count: hiddenCount })}
-			</button>
-		{/if}
-	</div>
-</section>

frontend/src/lib/timeline/EventCluster.svelte.spec.ts

@@ -1,129 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { tick } from 'svelte';
-import * as m from '$lib/paraglide/messages.js';
-import EventCluster from './EventCluster.svelte';
-import { makeEntry } from './test-factories';
-import type { components } from '$lib/generated/api';
-
-type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
-
-afterEach(() => cleanup());
-
-const EV_ID = 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa';
-
-const makeEvent = (overrides: Partial<TimelineEntryDTO> = {}): TimelineEntryDTO =>
-	makeEntry({
-		kind: 'EVENT',
-		type: 'PERSONAL',
-		documentId: undefined,
-		eventId: EV_ID,
-		eventDate: '1916-07-06',
-		precision: 'DAY',
-		title: 'Ein gewaltiger Stadtbrand',
-		...overrides
-	});
-
-const letters = (n: number): TimelineEntryDTO[] =>
-	Array.from({ length: n }, (_, i) =>
-		makeEntry({ kind: 'LETTER', documentId: `doc-${i}`, title: `Brief ${i}`, linkedEventId: EV_ID })
-	);
-
-describe('EventCluster — contained event card (#850)', () => {
-	it('renders a data-testid event-card with the event title once (REQ-002)', () => {
-		render(EventCluster, { letters: letters(2), event: makeEvent() });
-		expect(document.querySelector('[data-testid="event-card"]')).not.toBeNull();
-		const occurrences = (document.body.textContent?.match(/Ein gewaltiger Stadtbrand/g) ?? [])
-			.length;
-		expect(occurrences).toBe(1);
-	});
-
-	it('shows the event-edit link for a curator on a curated event (REQ-002)', () => {
-		render(EventCluster, { letters: letters(2), event: makeEvent(), canWrite: true });
-		const edit = document.querySelector('[data-testid="event-edit"]') as HTMLAnchorElement;
-		expect(edit).not.toBeNull();
-		expect(edit.getAttribute('href')).toBe(`/zeitstrahl/events/${EV_ID}/edit`);
-	});
-
-	it('hides the event-edit link when canWrite is false', () => {
-		render(EventCluster, { letters: letters(2), event: makeEvent(), canWrite: false });
-		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
-	});
-
-	it('hides the event-edit link for a derived event even with canWrite', () => {
-		render(EventCluster, {
-			letters: letters(2),
-			event: makeEvent({ derived: true, eventId: undefined, derivedType: 'BIRTH' }),
-			canWrite: true
-		});
-		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
-	});
-
-	it('renders its letters as compact a.lcard.ev cards (REQ-002)', () => {
-		render(EventCluster, { letters: letters(2), event: makeEvent() });
-		expect(document.querySelectorAll('a.lcard.ev').length).toBeGreaterThan(0);
-	});
-
-	it('shows the first 5 of 8 letters + a show-more toggle that expands to 8 then back to 5 (REQ-003)', async () => {
-		render(EventCluster, { letters: letters(8), event: makeEvent() });
-		expect(document.querySelectorAll('a.lcard').length).toBe(5);
-		const toggle = document.querySelector('[data-testid="bucket-show-more"]') as HTMLButtonElement;
-		expect(toggle).not.toBeNull();
-		expect(toggle.getAttribute('aria-expanded')).toBe('false');
-		expect(toggle.getBoundingClientRect().height).toBeGreaterThanOrEqual(44);
-
-		toggle.click();
-		await tick();
-		expect(document.querySelectorAll('a.lcard').length).toBe(8);
-		expect(toggle.getAttribute('aria-expanded')).toBe('true');
-
-		toggle.click();
-		await tick();
-		expect(document.querySelectorAll('a.lcard').length).toBe(5);
-	});
-
-	it('renders no show-more toggle when the cluster holds 5 or fewer letters', () => {
-		render(EventCluster, { letters: letters(5), event: makeEvent() });
-		expect(document.querySelector('[data-testid="bucket-show-more"]')).toBeNull();
-	});
-
-	it('renders a cross-year text header (✉ title, no event-edit, no pill) when no event is given (REQ-004)', () => {
-		render(EventCluster, {
-			letters: letters(2),
-			title: 'Briefe von der Front',
-			canWrite: true
-		});
-		expect(document.querySelector('[data-testid="event-card"]')).not.toBeNull();
-		expect(document.body.textContent).toContain('✉');
-		expect(document.body.textContent).toContain('Briefe von der Front');
-		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
-	});
-
-	it('pairs the cross-year ✉ glyph with an sr-only label so it is not a silent glyph (finding #6)', () => {
-		render(EventCluster, { letters: letters(2), title: 'Briefe von der Front' });
-		const header = document.querySelector('[data-testid="event-header"]') as HTMLElement;
-		const hidden = header.querySelector('[aria-hidden="true"]');
-		expect(hidden?.textContent).toContain('✉');
-		const srOnly = header.querySelector('.sr-only');
-		expect(srOnly?.textContent).toBe(m.timeline_letter_glyph_label());
-	});
-
-	it('gives the letter count an sr-only "{count} Briefe" label so "· 2" is not announced bare (finding #6)', () => {
-		render(EventCluster, { letters: letters(2), title: 'Briefe von der Front' });
-		const count = document.querySelector('[data-testid="event-count"]') as HTMLElement;
-		// the visible "· 2" stays aria-hidden; the sr-only sibling carries the meaning
-		expect(count.querySelector('[aria-hidden="true"]')?.textContent).toContain('· 2');
-		expect(count.querySelector('.sr-only')?.textContent).toBe(
-			m.timeline_cluster_letter_count({ count: 2 })
-		);
-	});
-
-	it('renders an HTML-bearing event title verbatim as text, never as markup (REQ-010)', () => {
-		render(EventCluster, {
-			letters: letters(1),
-			event: makeEvent({ title: '<img src=x onerror=alert(1)>' })
-		});
-		expect(document.querySelector('[data-testid="event-card"] img')).toBeNull();
-		expect(document.body.textContent).toContain('<img src=x onerror=alert(1)>');
-	});
-});

frontend/src/lib/timeline/EventHeader.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">
-import * as m from '$lib/paraglide/messages.js';
-import GlyphLabel from './GlyphLabel.svelte';
-import { getAccentConfig, canEditEvent } from './eventCardConfig';
-import { timelineDateLabel } from './dateLabel';
-import type { components } from '$lib/generated/api';
-
-type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
-
-/**
- * The shared header for a curated or derived timeline event — the accent glyph circle, the title,
- * and the `{date} · {kuratiert|abgeleitet}` subtitle, plus a curator edit pencil gated by the
- * single canEditEvent() contract. Rendered by EventPill (inside the floating axis pill) and by
- * EventCluster (as a same-year event-card header), so the glyph/title/subtitle markup and the
- * security-relevant edit gate live in one place (#850 finding #5). It renders three sibling nodes
- * (glyph circle, text block, optional edit pencil) into the parent's flex row — the parent owns
- * the wrapper (pill vs card header). An optional letter `count` appends a screen-reader-labeled
- * "· {count}" for the event-card case.
- */
-let {
-	entry,
-	canWrite = false,
-	count = undefined
-}: { entry: TimelineEntryDTO; canWrite?: boolean; count?: number } = $props();
-
-const config = $derived(getAccentConfig(entry));
-const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
-// Provenance reads off entry.derived: a derived life-event is "abgeleitet", a curated event
-// "kuratiert"; the date is an optional prefix so an undated event still reads the provenance.
-const provenance = $derived(
-	entry.derived ? m.timeline_provenance_derived() : m.timeline_provenance_curated()
-);
-const subtitle = $derived(dateLabel ? `${dateLabel} · ${provenance}` : provenance);
-const canEdit = $derived(canEditEvent(entry, canWrite));
-</script>
-
-<span
-	class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full {config.accent === 'curated'
-		? 'bg-brand-mint text-brand-navy'
-		: 'bg-brand-navy text-brand-mint'}"
->
-	<GlyphLabel glyph={config.glyph} label={config.label} />
-</span>
-<span class="min-w-0 text-left">
-	{#if entry.title}
-		<span class="block font-serif text-sm font-bold whitespace-pre-line text-brand-navy"
-			>{entry.title}</span
-		>
-	{/if}
-	<span class="block font-sans text-xs text-ink-3">
-		{subtitle}
-		{#if count !== undefined}
-			<span data-testid="event-count">
-				<span aria-hidden="true">· {count}</span>
-				<span class="sr-only">{m.timeline_cluster_letter_count({ count })}</span>
-			</span>
-		{/if}
-	</span>
-</span>
-{#if canEdit}
-	<a
-		data-testid="event-edit"
-		href="/zeitstrahl/events/{entry.eventId}/edit"
-		class="ml-auto rounded-sm px-1 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
-	>
-		<span aria-hidden="true">✎</span>
-		<span class="sr-only">{m.btn_edit()}</span>
-	</a>
-{/if}

frontend/src/lib/timeline/EventHeader.svelte.spec.ts

@@ -1,66 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import * as m from '$lib/paraglide/messages.js';
-import EventHeader from './EventHeader.svelte';
-import { makeEntry } from './test-factories';
-import type { components } from '$lib/generated/api';
-
-type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
-
-afterEach(() => cleanup());
-
-const EV_ID = 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa';
-
-const curated = (overrides: Partial<TimelineEntryDTO> = {}): TimelineEntryDTO =>
-	makeEntry({
-		kind: 'EVENT',
-		type: 'PERSONAL',
-		derived: false,
-		eventId: EV_ID,
-		eventDate: '1916-07-06',
-		precision: 'DAY',
-		title: 'Ein gewaltiger Stadtbrand',
-		documentId: undefined,
-		...overrides
-	});
-
-describe('EventHeader', () => {
-	it('renders the glyph with an sr-only label, the title, and the provenance subtitle', () => {
-		render(EventHeader, { entry: curated() });
-		expect(document.querySelector('.sr-only')?.textContent).toBe(m.timeline_layer_family());
-		expect(document.body.textContent).toContain('Ein gewaltiger Stadtbrand');
-		expect(document.body.textContent).toContain(m.timeline_provenance_curated());
-	});
-
-	it('shows the edit pencil for a writer on a curated event (canEditEvent gate)', () => {
-		render(EventHeader, { entry: curated(), canWrite: true });
-		const edit = document.querySelector('[data-testid="event-edit"]') as HTMLAnchorElement;
-		expect(edit).not.toBeNull();
-		expect(edit.getAttribute('href')).toBe(`/zeitstrahl/events/${EV_ID}/edit`);
-	});
-
-	it('hides the edit pencil without write, for a derived event, and for a null eventId', () => {
-		render(EventHeader, { entry: curated(), canWrite: false });
-		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
-		cleanup();
-		render(EventHeader, { entry: curated({ derived: true }), canWrite: true });
-		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
-		cleanup();
-		render(EventHeader, { entry: curated({ eventId: undefined }), canWrite: true });
-		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
-	});
-
-	it('renders a screen-reader-labeled letter count when a count is given', () => {
-		render(EventHeader, { entry: curated(), count: 3 });
-		const count = document.querySelector('[data-testid="event-count"]') as HTMLElement;
-		expect(count.querySelector('[aria-hidden="true"]')?.textContent).toContain('· 3');
-		expect(count.querySelector('.sr-only')?.textContent).toBe(
-			m.timeline_cluster_letter_count({ count: 3 })
-		);
-	});
-
-	it('omits the letter count when no count is given (the pill case)', () => {
-		render(EventHeader, { entry: curated() });
-		expect(document.querySelector('[data-testid="event-count"]')).toBeNull();
-	});
-});

frontend/src/lib/timeline/EventNote.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-import * as m from '$lib/paraglide/messages.js';
-
-let { description }: { description?: string | null } = $props();
-
-let expanded = $state(false);
-let clamped = $state(false);
-let noteEl: HTMLElement | undefined = $state();
-
-$effect(() => {
-	if (noteEl) {
-		clamped = noteEl.scrollHeight > noteEl.clientHeight;
-	}
-});
-
-function toggle() {
-	expanded = !expanded;
-}
-
-const hasContent = $derived(!!description && description.trim().length > 0);
-</script>
-
-{#if hasContent}
-	<div class="mt-1">
-		<p
-			data-testid="event-note"
-			bind:this={noteEl}
-			class="font-sans text-xs whitespace-pre-line text-ink-2"
-			style={expanded
-				? 'white-space:pre-line'
-				: 'white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3'}
-		>
-			{description}
-		</p>
-		{#if clamped || expanded}
-			<button
-				data-testid="note-toggle"
-				type="button"
-				class="mt-0.5 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
-				aria-expanded={expanded ? 'true' : 'false'}
-				onclick={toggle}
-			>
-				{expanded ? m.timeline_note_show_less() : m.timeline_note_show_more()}
-			</button>
-		{/if}
-	</div>
-{/if}

frontend/src/lib/timeline/EventPill.svelte

@@ -1,32 +1,65 @@
 <script lang="ts">
-import EventHeader from './EventHeader.svelte';
-import EventNote from './EventNote.svelte';
+import * as m from '$lib/paraglide/messages.js';
 import { getAccentConfig } from './eventCardConfig';
+import { timelineDateLabel } from './dateLabel';
 import type { components } from '$lib/generated/api';
 
 type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
 
 /**
  * Centered axis pill for a derived life-event or a curated PERSONAL event
- * (REQ-007/008). The pill border keys off the accent (curated = mint, derived =
- * navy); its glyph, title, subtitle, and curator edit pencil are the shared
- * EventHeader, so the edit gate (canEditEvent) lives in one place — #842
- * REQ-005/007/008, #850 finding #5. The gate is UX only; the real boundary is the
- * #781 route guard + backend permission.
+ * (REQ-007/008). The glyph is wrapped aria-hidden with an sr-only label sibling
+ * (REQ-018). An edit affordance shows only for a curated event with an eventId
+ * (never derived, never null — REQ-008).
  */
-let { entry, canWrite = false }: { entry: TimelineEntryDTO; canWrite?: boolean } = $props();
+let { entry }: { entry: TimelineEntryDTO } = $props();
 
 const config = $derived(getAccentConfig(entry));
+const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
+// Provenance reads off entry.derived (not the accent): a derived life-event is
+// "abgeleitet", a curated PERSONAL event is "kuratiert" (REQ-007).
+const provenance = $derived(
+	entry.derived ? m.timeline_provenance_derived() : m.timeline_provenance_curated()
+);
+// Provenance always shows; the date is an optional prefix so an undated event
+// still reads "abgeleitet"/"kuratiert" (REQ-007).
+const subtitle = $derived(dateLabel ? `${dateLabel} · ${provenance}` : provenance);
+const canEdit = $derived(!entry.derived && entry.eventId != null);
 </script>
 
-<div class="flex flex-col items-center justify-center">
+<div class="flex justify-center">
 	<div
 		class="inline-flex items-center gap-2 rounded-full bg-surface px-3 py-1 shadow-sm {config.accent ===
 		'curated'
 			? 'border-2 border-brand-mint'
 			: 'border border-brand-navy'}"
 	>
-		<EventHeader entry={entry} canWrite={canWrite} />
+		<span
+			class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full {config.accent ===
+			'curated'
+				? 'bg-brand-mint text-brand-navy'
+				: 'bg-brand-navy text-brand-mint'}"
+		>
+			<span aria-hidden="true">{config.glyph}</span>
+			<span class="sr-only">{config.label}</span>
+		</span>
+		<span class="text-left">
+			{#if entry.title}
+				<span class="block font-serif text-sm font-bold whitespace-pre-line text-brand-navy"
+					>{entry.title}</span
+				>
+			{/if}
+			<span class="block font-sans text-xs text-ink-3">{subtitle}</span>
+		</span>
+		{#if canEdit}
+			<a
+				data-testid="event-edit"
+				href="/zeitstrahl/events/{entry.eventId}/edit"
+				class="ml-1 rounded-sm px-1 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
+			>
+				<span aria-hidden="true">✎</span>
+				<span class="sr-only">{m.btn_edit()}</span>
+			</a>
+		{/if}
 	</div>
-	<EventNote description={entry.description} />
 </div>

frontend/src/lib/timeline/EventPill.svelte.spec.ts

@@ -51,9 +51,8 @@ describe('EventPill', () => {
 		expect(srOnly?.textContent).toBe('Geburt');
 	});
 
-	it('shows an edit affordance for a curated PERSONAL event when canWrite is true (REQ-005)', () => {
+	it('shows an edit affordance for a curated PERSONAL event with an eventId (REQ-008)', () => {
 		render(EventPill, {
-			canWrite: true,
 			entry: makeEntry({
 				kind: 'EVENT',
 				derived: false,
@@ -67,45 +66,11 @@ describe('EventPill', () => {
 		});
 		const edit = document.querySelector('[data-testid="event-edit"]') as HTMLAnchorElement | null;
 		expect(edit).not.toBeNull();
-		expect(edit?.getAttribute('href')).toBe(`/zeitstrahl/events/${EVENT_ID}/edit`);
+		expect(edit?.getAttribute('href')).toContain(EVENT_ID);
 	});
 
-	it('renders no edit affordance for a curated PERSONAL event when canWrite is false (REQ-007)', () => {
+	it('shows no edit affordance when eventId is null (REQ-008)', () => {
 		render(EventPill, {
-			canWrite: false,
-			entry: makeEntry({
-				kind: 'EVENT',
-				derived: false,
-				type: 'PERSONAL',
-				eventId: EVENT_ID,
-				title: 'Auswanderung',
-				senderName: '',
-				receiverName: '',
-				documentId: undefined
-			})
-		});
-		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
-	});
-
-	it('renders no edit affordance when the canWrite prop is omitted (gate-closed default) (REQ-007)', () => {
-		render(EventPill, {
-			entry: makeEntry({
-				kind: 'EVENT',
-				derived: false,
-				type: 'PERSONAL',
-				eventId: EVENT_ID,
-				title: 'Auswanderung',
-				senderName: '',
-				receiverName: '',
-				documentId: undefined
-			})
-		});
-		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
-	});
-
-	it('shows no edit affordance when eventId is null even with canWrite (REQ-008)', () => {
-		render(EventPill, {
-			canWrite: true,
 			entry: makeEntry({
 				kind: 'EVENT',
 				derived: false,
@@ -120,8 +85,8 @@ describe('EventPill', () => {
 		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
 	});
 
-	it('shows no edit affordance for a derived event even with canWrite (REQ-008)', () => {
-		render(EventPill, { canWrite: true, entry: derived('MARRIAGE', 'Heirat') });
+	it('shows no edit affordance for a derived event (REQ-008)', () => {
+		render(EventPill, { entry: derived('MARRIAGE', 'Heirat') });
 		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
 	});
 

frontend/src/lib/timeline/LetterCard.svelte

@@ -11,33 +11,11 @@ type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
  * A single archive letter on the timeline: sender → receiver, title, and a
  * precision-aware date chip, linking to the document. Names/titles are
  * OCR/import-derived — rendered via default `{...}` escaping with
- * `whitespace-pre-line` for line breaks (REQ-010); never the raw-HTML directive.
- *
- * Inside an event cluster the card sits in the contained event card and renders as
- * the `.lcard.ev` `compact` variant (#850, REQ-002): tighter row, and the redundant
- * date chip is dropped when the title already embeds the date. The per-letter tag
- * chip can be suppressed via `suppressTagChip` for callers that already convey it.
+ * `whitespace-pre-line` for line breaks (REQ-021); never the raw-HTML directive.
  */
-let {
-	entry,
-	variant = 'plain',
-	suppressTagChip = false,
-	compact = false
-}: {
-	entry: TimelineEntryDTO;
-	variant?: 'plain' | 'event';
-	suppressTagChip?: boolean;
-	compact?: boolean;
-} = $props();
+let { entry }: { entry: TimelineEntryDTO } = $props();
 
-const isEventVariant = $derived(variant === 'event');
 const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
-// Inside an event card the band frames the time, so a compact in-card letter drops the
-// redundant date chip — but ONLY when the (free-form OCR) title actually embeds the formatted
-// date, e.g. "H-0023 – 6. Juli 1916". A title without the date keeps its chip, so a letter like
-// "Brief an Mutter" never loses its month/day (the band frames only the year) — #850, finding #4.
-const titleEmbedsDate = $derived(!!dateLabel && !!entry.title && entry.title.includes(dateLabel));
-const showDate = $derived(!compact || !titleEmbedsDate);
 const sender = $derived(entry.senderName === '' ? m.timeline_unknown_person() : entry.senderName);
 const receiver = $derived(
 	entry.receiverName === '' ? m.timeline_unknown_person() : entry.receiverName
@@ -50,37 +28,28 @@ const receiver = $derived(
 <a
 	href="/documents/{entry.documentId}"
 	style="display: flex; flex-direction: column; justify-content: center; min-height: 44px"
-	class="lcard rounded-sm border border-l-[3px] border-line border-l-brand-mint bg-surface px-3 shadow-sm transition-colors hover:border-brand-mint focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
-	class:py-2={!compact}
-	class:py-1={compact}
-	class:ev={isEventVariant}
-	class:compact={compact}
+	class="rounded-sm border border-l-[3px] border-line border-l-brand-mint bg-surface px-3 py-2 shadow-sm transition-colors hover:border-brand-mint focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
 >
 	{#if entry.title}
 		<!-- ✉ + sr-only label are static chrome rendered as sibling nodes, NEVER
 		     interpolated into the escaped user title; the title keeps its own
 		     pre-line span for multi-line OCR text (REQ-008/016/021). -->
-		<span
-			class="font-serif font-bold break-words text-ink"
-			class:text-sm={!compact}
-			class:text-xs={compact}
-		>
+		<span class="font-serif text-sm font-bold break-words text-ink">
 			<GlyphLabel glyph="✉" label={m.timeline_letter_glyph_label()} />
 			<span class="whitespace-pre-line">{entry.title}</span>
 		</span>
 	{/if}
-	<span class="font-sans text-xs break-words text-ink-3" class:mt-0.5={!compact}>
+	<span class="mt-0.5 font-sans text-xs break-words text-ink-3">
 		<span class="font-serif whitespace-pre-line">{sender}</span>
 		<span aria-hidden="true">→</span>
 		<span class="font-serif whitespace-pre-line">{receiver}</span>
-		{#if dateLabel && showDate}
+		{#if dateLabel}
 			<span data-testid="letter-date"> · {dateLabel}</span>
 		{/if}
 	</span>
-	{#if entry.rootTagName && !suppressTagChip}
+	{#if entry.rootTagName}
 		<!-- The primary root-tag chip sits on its own line beneath the meta line
-		     (#835 §3); absent when the letter has no tag (REQ-006), and suppressed when
-		     the caller already conveys the topic (suppressTagChip). -->
+		     (#835 §3); absent when the letter has no tag (REQ-005). -->
 		<TagChip name={entry.rootTagName} color={entry.rootTagColor ?? null} />
 	{/if}
 </a>

frontend/src/lib/timeline/LetterCard.svelte.spec.ts

@@ -127,58 +127,3 @@ describe('LetterCard', () => {
 		expect(chip?.textContent).toContain('Familie');
 	});
 });
-
-describe('LetterCard — event-cluster variants (#850, REQ-002)', () => {
-	it('carries the .lcard.ev class in the event variant (REQ-002)', () => {
-		render(LetterCard, { entry: makeEntry(), variant: 'event' });
-		expect(document.querySelector('a.lcard.ev')).not.toBeNull();
-	});
-
-	it('is a plain card with no .ev marker by default (REQ-006)', () => {
-		render(LetterCard, { entry: makeEntry() });
-		expect(document.querySelector('a.ev')).toBeNull();
-	});
-
-	it('suppresses the per-letter tag chip when asked, even with a root tag', () => {
-		render(LetterCard, {
-			entry: makeEntry({ rootTagName: 'Krieg', rootTagColor: 'sienna' }),
-			suppressTagChip: true
-		});
-		expect(document.querySelector('[data-testid="tag-chip"]')).toBeNull();
-	});
-
-	it('still shows the per-letter tag chip when not suppressed', () => {
-		render(LetterCard, { entry: makeEntry({ rootTagName: 'Krieg', rootTagColor: 'sienna' }) });
-		expect(document.querySelector('[data-testid="tag-chip"]')).not.toBeNull();
-	});
-
-	it('drops the compact date chip only when the title actually embeds the formatted date (#850)', () => {
-		// An archive title like "H-0023 – 6. Juli 1916" already carries the date, so inside an
-		// event card (where the band frames the time) the redundant chip is dropped.
-		const entry = makeEntry({ eventDate: '1916-07-06', precision: 'DAY' });
-		const dateLabel = timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd);
-		render(LetterCard, { entry: { ...entry, title: `H-0023 – ${dateLabel}` }, compact: true });
-		expect(document.querySelector('[data-testid="letter-date"]')).toBeNull();
-		expect(document.body.textContent).toContain('Karl Raddatz'); // sender still shown
-	});
-
-	it('keeps the compact date chip when the title does NOT embed the date (#850, finding #4)', () => {
-		// Titles are free-form OCR text — a titled letter whose title carries no date must keep
-		// its month/day, since inside an event card the band frames only the year.
-		render(LetterCard, {
-			entry: makeEntry({ eventDate: '1916-07-06', precision: 'DAY', title: 'Brief an Mutter' }),
-			compact: true
-		});
-		expect(document.querySelector('[data-testid="letter-date"]')).not.toBeNull();
-	});
-
-	it('keeps the date in the compact variant when the letter has no title (#850)', () => {
-		render(LetterCard, { entry: makeEntry({ title: undefined }), compact: true });
-		expect(document.querySelector('[data-testid="letter-date"]')).not.toBeNull();
-	});
-
-	it('renders the compact variant on a single tighter row (#850)', () => {
-		render(LetterCard, { entry: makeEntry(), compact: true });
-		expect(document.querySelector('a.lcard.compact')).not.toBeNull();
-	});
-});

frontend/src/lib/timeline/TimelineFilters.svelte

@@ -1,133 +0,0 @@
-<script lang="ts">
-import * as m from '$lib/paraglide/messages.js';
-import { slide } from 'svelte/transition';
-import { hiddenLayerCount, isDefaultState, type TimelineLayerFilters } from './timelineFilter';
-
-// Presentation-only layer filter for the global /zeitstrahl (#780, REQ-001).
-// Holds no timeline data and never navigates or fetches — the route owns the
-// $state and derives the filtered view. Three $bindable layer booleans plus an
-// onChange notification hook are the whole contract.
-let {
-	personalOn = $bindable(true),
-	historicalOn = $bindable(true),
-	lettersOn = $bindable(true),
-	onChange
-}: {
-	personalOn?: boolean;
-	historicalOn?: boolean;
-	lettersOn?: boolean;
-	onChange?: () => void;
-} = $props();
-
-let open = $state(false);
-
-// Reuse the reduced-motion guard expression from documents/[id]/+page.svelte:57
-// for a new purpose — zeroing the slide duration so the collapsible opens
-// instantly when the reader prefers reduced motion (REQ-009).
-const prefersReducedMotion = $derived(
-	typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
-);
-const slideDuration = $derived(prefersReducedMotion ? 0 : 200);
-
-const filters: TimelineLayerFilters = $derived({ personalOn, historicalOn, lettersOn });
-const hiddenCount = $derived(hiddenLayerCount(filters));
-const anyLayerOff = $derived(!isDefaultState(filters));
-
-function reset() {
-	personalOn = true;
-	historicalOn = true;
-	lettersOn = true;
-	onChange?.();
-}
-</script>
-
-{#snippet layerToggle(label: string, testid: string, pressed: boolean, toggle: () => void)}
-	<button
-		type="button"
-		data-testid={testid}
-		aria-pressed={pressed}
-		onclick={toggle}
-		class="inline-flex min-h-[44px] items-center gap-2 rounded border px-3 font-sans text-sm transition-colors {pressed
-			? 'border-primary bg-primary text-primary-fg'
-			: 'border-line bg-muted text-ink-2 hover:bg-line'}"
-	>
-		<span
-			aria-hidden="true"
-			class="inline-flex h-4 w-4 items-center justify-center rounded-sm border {pressed
-				? 'border-primary-fg bg-primary-fg/20'
-				: 'border-ink-3'}"
-		>
-			{#if pressed}✓{/if}
-		</span>
-		{label}
-	</button>
-{/snippet}
-
-<section class="mb-6">
-	<!-- Sticky trigger kept in document flow so the hidden-layer count stays
-	     visible without clipping timeline content (REQ-007). -->
-	<div class="sticky top-16 z-20 bg-canvas py-2">
-		<button
-			type="button"
-			data-testid="timeline-filter-trigger"
-			aria-expanded={open}
-			aria-controls={open ? 'timeline-filter-panel' : undefined}
-			onclick={() => (open = !open)}
-			class="inline-flex min-h-[44px] items-center gap-2 rounded border border-line bg-surface px-4 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
-		>
-			{hiddenCount === 0
-				? m.timeline_filter_trigger()
-				: m.timeline_filter_trigger_active({ count: hiddenCount })}
-		</button>
-	</div>
-
-	{#if open}
-		<div id="timeline-filter-panel" transition:slide={{ duration: slideDuration }}>
-			<fieldset class="mt-2 rounded-sm border border-line bg-surface p-4">
-				<legend class="px-1 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-					{m.timeline_filter_label_layers()}
-				</legend>
-				<div class="flex flex-wrap gap-2">
-					{@render layerToggle(
-						m.timeline_filter_layer_personal(),
-						'timeline-filter-personal',
-						personalOn,
-						() => {
-							personalOn = !personalOn;
-							onChange?.();
-						}
-					)}
-					{@render layerToggle(
-						m.timeline_filter_layer_historical(),
-						'timeline-filter-historical',
-						historicalOn,
-						() => {
-							historicalOn = !historicalOn;
-							onChange?.();
-						}
-					)}
-					{@render layerToggle(
-						m.timeline_filter_layer_letters(),
-						'timeline-filter-letters',
-						lettersOn,
-						() => {
-							lettersOn = !lettersOn;
-							onChange?.();
-						}
-					)}
-				</div>
-
-				{#if anyLayerOff}
-					<button
-						type="button"
-						data-testid="timeline-filter-reset"
-						onclick={reset}
-						class="mt-3 inline-flex min-h-[44px] items-center font-sans text-sm text-primary underline-offset-2 hover:underline"
-					>
-						{m.timeline_filter_reset()}
-					</button>
-				{/if}
-			</fieldset>
-		</div>
-	{/if}
-</section>

frontend/src/lib/timeline/TimelineFilters.svelte.spec.ts

@@ -1,74 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
-import * as m from '$lib/paraglide/messages.js';
-import TimelineFilters from './TimelineFilters.svelte';
-
-afterEach(() => cleanup());
-
-const allOn = () => ({ personalOn: true, historicalOn: true, lettersOn: true, onChange: vi.fn() });
-
-async function openBar() {
-	await page.getByTestId('timeline-filter-trigger').click();
-}
-
-describe('TimelineFilters', () => {
-	it('renders the three layer toggles with accessible names inside a labelled group (REQ-001)', async () => {
-		render(TimelineFilters, allOn());
-		await openBar();
-		await expect
-			.element(page.getByRole('button', { name: m.timeline_filter_layer_personal() }))
-			.toBeVisible();
-		await expect
-			.element(page.getByRole('button', { name: m.timeline_filter_layer_historical() }))
-			.toBeVisible();
-		await expect
-			.element(page.getByRole('button', { name: m.timeline_filter_layer_letters() }))
-			.toBeVisible();
-		// the fieldset legend groups the toggles
-		await expect.element(page.getByText(m.timeline_filter_label_layers())).toBeVisible();
-	});
-
-	it('reflects a layer as pressed and flips it, firing onChange (REQ-001)', async () => {
-		const props = allOn();
-		render(TimelineFilters, props);
-		await openBar();
-		const personal = page.getByTestId('timeline-filter-personal');
-		await expect.element(personal).toHaveAttribute('aria-pressed', 'true');
-		await personal.click();
-		await expect.element(personal).toHaveAttribute('aria-pressed', 'false');
-		expect(props.onChange).toHaveBeenCalled();
-	});
-
-	it('shows a plain trigger when all layers are on and a count once a layer is hidden (REQ-007/010)', async () => {
-		render(TimelineFilters, allOn());
-		const trigger = page.getByTestId('timeline-filter-trigger');
-		await expect.element(trigger).toHaveTextContent(m.timeline_filter_trigger());
-		await expect.element(trigger).not.toHaveTextContent('aktiv');
-		await trigger.click();
-		await page.getByTestId('timeline-filter-letters').click();
-		await expect.element(trigger).toHaveTextContent(m.timeline_filter_trigger_active({ count: 1 }));
-	});
-
-	it('gives the trigger a 44px touch target (REQ-007)', async () => {
-		render(TimelineFilters, allOn());
-		await expect.element(page.getByTestId('timeline-filter-trigger')).toHaveClass(/min-h-\[44px\]/);
-	});
-
-	it('hides the reset button by default and restores all layers when activated (REQ-008)', async () => {
-		const props = allOn();
-		render(TimelineFilters, props);
-		await openBar();
-		const reset = page.getByTestId('timeline-filter-reset');
-		// absent (not just hidden) while every layer is on
-		expect(reset.query()).toBeNull();
-		await page.getByTestId('timeline-filter-historical').click();
-		await expect.element(reset).toBeVisible();
-		await reset.click();
-		await expect
-			.element(page.getByTestId('timeline-filter-historical'))
-			.toHaveAttribute('aria-pressed', 'true');
-		await expect.poll(() => reset.query()).toBeNull();
-		expect(props.onChange).toHaveBeenCalled();
-	});
-});

frontend/src/lib/timeline/TimelineView.svelte

@@ -6,7 +6,6 @@ import LetterCard from './LetterCard.svelte';
 import EventPill from './EventPill.svelte';
 import WorldBand from './WorldBand.svelte';
 import { entryKey } from './entryKey';
-import { buildEventLookup } from './eventClustering';
 import type { components } from '$lib/generated/api';
 
 type TimelineDTO = components['schemas']['TimelineDTO'];
@@ -19,19 +18,8 @@ type TimelineYearDTO = components['schemas']['TimelineYearDTO'];
  * empty timeline shows a calm message (REQ-017). `personId` is a declared seam
  * for the per-person rail (issue #10) and is undefined here; it is not passed to
  * leaf cards (REQ-025). Owns no <main> — the layout does.
- *
- * The event lookup is built once over the whole (already layer-filtered) timeline
- * and threaded to every band so a curated event's letters cluster under it inline
- * (#850, REQ-002). The undated bucket stays plain (events as pills, letters as
- * cards) — out of clustering scope.
  */
-let {
-	timeline,
-	personId = undefined,
-	canWrite = false
-}: { timeline: TimelineDTO; personId?: string; canWrite?: boolean } = $props();
-
-const eventLookup = $derived(buildEventLookup(timeline));
+let { timeline, personId = undefined }: { timeline: TimelineDTO; personId?: string } = $props();
 
 type Row = { t: 'band'; year: TimelineYearDTO } | { t: 'gap'; from: number; to: number };
 
@@ -62,7 +50,7 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
 		{#each rows as row (row.t === 'band' ? `band-${row.year.year}` : `gap-${row.from}`)}
 			<li>
 				{#if row.t === 'band'}
-					<YearBand year={row.year} canWrite={canWrite} eventLookup={eventLookup} />
+					<YearBand year={row.year} />
 				{:else}
 					<GapSpan from={row.from} to={row.to} />
 				{/if}
@@ -87,9 +75,9 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
 					<li>
 						{#if entry.kind === 'EVENT'}
 							{#if entry.type === 'HISTORICAL'}
-								<WorldBand entry={entry} canWrite={canWrite} />
+								<WorldBand entry={entry} />
 							{:else}
-								<EventPill entry={entry} canWrite={canWrite} />
+								<EventPill entry={entry} />
 							{/if}
 						{:else}
 							<LetterCard entry={entry} />

frontend/src/lib/timeline/TimelineView.svelte.spec.ts

@@ -105,7 +105,6 @@ describe('TimelineView', () => {
 
 	it('renders an undated curated EVENT as a pill, not a broken letter card (REQ-008/016)', () => {
 		render(TimelineView, {
-			canWrite: true,
 			timeline: makeTimelineDTO({
 				undated: [
 					makeEntry({
@@ -126,8 +125,8 @@ describe('TimelineView', () => {
 		// The event renders inside the undated section…
 		expect(document.querySelector('[data-testid="undated-section"]')).not.toBeNull();
 		expect(document.body.textContent).toContain('Auswanderung');
-		// …as an EventPill (its edit affordance, threaded canWrite), never as a
-		// letter card linking to /documents/undefined with "Unbekannt → Unbekannt".
+		// …as an EventPill (its edit affordance), never as a letter card linking
+		// to /documents/undefined with "Unbekannt → Unbekannt".
 		expect(document.querySelector('[data-testid="event-edit"]')).not.toBeNull();
 		expect(document.querySelector('a[href="/documents/undefined"]')).toBeNull();
 		expect(document.body.textContent).not.toContain('Unbekannt');
@@ -277,131 +276,4 @@ describe('TimelineView', () => {
 		);
 		expect(sides).toEqual(['left', 'right', 'left', 'right']);
 	});
-
-	// A curated PERSONAL event reachable through both dispatch paths: the year-band
-	// path (TimelineView → YearBand → EventPill) and the undated bucket
-	// (TimelineView → EventPill). canWrite must thread to both (REQ-009).
-	const curated = (eventId: string, title: string) =>
-		makeEntry({
-			kind: 'EVENT',
-			type: 'PERSONAL',
-			derived: false,
-			eventId,
-			title,
-			senderName: '',
-			receiverName: '',
-			documentId: undefined
-		});
-
-	const bothPaths = () =>
-		makeTimelineDTO({
-			years: [makeYear(1924, [curated('banded', 'Umzug nach Berlin')])],
-			undated: [curated('undated', 'Auswanderung')]
-		});
-
-	it('threads canWrite to a curated event in both a year band and the undated bucket (REQ-009)', () => {
-		render(TimelineView, { canWrite: true, timeline: bothPaths() });
-		const hrefs = Array.from(document.querySelectorAll('[data-testid="event-edit"]')).map((a) =>
-			a.getAttribute('href')
-		);
-		expect(hrefs).toContain('/zeitstrahl/events/banded/edit');
-		expect(hrefs).toContain('/zeitstrahl/events/undated/edit');
-	});
-
-	it('renders no edit links in either path when canWrite is false (REQ-007/009)', () => {
-		render(TimelineView, { canWrite: false, timeline: bothPaths() });
-		expect(document.querySelectorAll('[data-testid="event-edit"]')).toHaveLength(0);
-	});
-
-	it('threads canWrite to a curated HISTORICAL world band in both paths (REQ-006/009)', () => {
-		const world = (eventId: string, title: string) =>
-			makeEntry({
-				kind: 'EVENT',
-				type: 'HISTORICAL',
-				derived: false,
-				eventId,
-				precision: 'YEAR',
-				eventDate: '1929-01-01',
-				eventDateEnd: undefined,
-				title,
-				senderName: '',
-				receiverName: '',
-				documentId: undefined
-			});
-		render(TimelineView, {
-			canWrite: true,
-			timeline: makeTimelineDTO({
-				years: [makeYear(1929, [world('wb', 'Weltwirtschaftskrise')])],
-				undated: [world('wu', 'Unbekanntes Weltereignis')]
-			})
-		});
-		const hrefs = Array.from(document.querySelectorAll('[data-testid="event-edit"]')).map((a) =>
-			a.getAttribute('href')
-		);
-		expect(hrefs).toContain('/zeitstrahl/events/wb/edit');
-		expect(hrefs).toContain('/zeitstrahl/events/wu/edit');
-	});
-
-	it('builds the event lookup and clusters a curated event + same-year linked letter into an event-card (#850)', () => {
-		const evId = 'eeeeeeee-eeee-eeee-eeee-eeeeeeeeeeee';
-		const event = makeEntry({
-			kind: 'EVENT',
-			type: 'PERSONAL',
-			derived: false,
-			eventId: evId,
-			eventDate: '1916-07-06',
-			precision: 'DAY',
-			title: 'Ein gewaltiger Stadtbrand',
-			senderName: '',
-			receiverName: '',
-			documentId: undefined
-		});
-		const letter = makeEntry({
-			eventDate: '1916-05-10',
-			documentId: 'doc-linked',
-			title: 'Brief',
-			linkedEventId: evId
-		});
-		render(TimelineView, {
-			timeline: makeTimelineDTO({ years: [makeYear(1916, [event, letter])] })
-		});
-		expect(document.querySelector('[data-testid="event-card"]')).not.toBeNull();
-		expect(document.querySelector('a.lcard.ev')).not.toBeNull();
-		// the title reads once — the event is the card header, not also a loose pill
-		const titles = (document.body.textContent?.match(/Ein gewaltiger Stadtbrand/g) ?? []).length;
-		expect(titles).toBe(1);
-	});
-
-	it('keeps a HISTORICAL event a WorldBand with a same-year linked letter — never clusters (REQ-014)', () => {
-		const evId = 'dddddddd-dddd-dddd-dddd-dddddddddddd';
-		const world = makeEntry({
-			kind: 'EVENT',
-			type: 'HISTORICAL',
-			derived: false,
-			eventId: evId,
-			eventDate: '1916-07-01',
-			precision: 'DAY',
-			title: 'Schlacht an der Somme',
-			senderName: '',
-			receiverName: '',
-			documentId: undefined
-		});
-		const letter = makeEntry({
-			eventDate: '1916-05-10',
-			documentId: 'doc-world-linked',
-			title: 'Brief von der Front',
-			linkedEventId: evId
-		});
-		render(TimelineView, {
-			timeline: makeTimelineDTO({ years: [makeYear(1916, [world, letter])] })
-		});
-		// the world event stays a full-width band — no contained event card
-		expect(document.querySelector('[data-testid="event-card"]')).toBeNull();
-		expect(document.querySelector('a.lcard.ev')).toBeNull();
-		// the linked letter renders loose on the spine, not inside a card
-		expect(document.querySelector('.letter-row')).not.toBeNull();
-		// and the band keeps its WorldBand "· historisch" register
-		expect(document.body.textContent).toContain(m.timeline_layer_historical_suffix());
-		expect(document.body.textContent).toContain('Schlacht an der Somme');
-	});
 });

frontend/src/lib/timeline/WorldBand.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 import * as m from '$lib/paraglide/messages.js';
-import { getAccentConfig, canEditEvent } from './eventCardConfig';
+import { getAccentConfig } from './eventCardConfig';
 import { timelineDateLabel } from './dateLabel';
-import EventNote from './EventNote.svelte';
 import type { components } from '$lib/generated/api';
 
 type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
@@ -12,11 +11,9 @@ type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
  * (REQ-009). A RANGE carries a visible span pill ("1914–1918") with a Zeitraum
  * aria-label; a RANGE with no end degrades to the start year, no pill (REQ-010).
  * The glyph is a redundant non-color cue with an sr-only label (REQ-018); text
- * uses text-ink-2 to stay AA in both themes (REQ-019). A curator (`canWrite`,
- * gate-closed by default) gets an inline edit pencil for a curated event with an
- * eventId — #842 REQ-006/007/008; UX gate only, the #781 route guard is the boundary.
+ * uses text-ink-2 to stay AA in both themes (REQ-019).
  */
-let { entry, canWrite = false }: { entry: TimelineEntryDTO; canWrite?: boolean } = $props();
+let { entry }: { entry: TimelineEntryDTO } = $props();
 
 const config = $derived(getAccentConfig(entry));
 const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
@@ -27,9 +24,6 @@ const dateText = $derived(showSpan ? null : entry.precision === 'RANGE' ? fromYe
 // Every WorldBand is a HISTORICAL band, so the visible "historisch" register
 // always trails the subtitle as plain text — never a second pill (REQ-009).
 const historical = $derived(m.timeline_layer_historical_suffix());
-// A HISTORICAL event is never derived, so canEditEvent's derived check is a
-// no-op here — the gate is the curator flag plus a real eventId (#842 REQ-006/008).
-const canEdit = $derived(canEditEvent(entry, canWrite));
 </script>
 
 <div class="my-3 border-y border-line bg-canvas px-4 py-2 text-center">
@@ -52,15 +46,4 @@ const canEdit = $derived(canEditEvent(entry, canWrite));
 	<!-- Single trailing "· historisch" register, after the title and any
 	     span pill / date — one render site, consistent separator (REQ-009). -->
 	<span class="ml-2 font-sans text-xs text-ink-3">· {historical}</span>
-	{#if canEdit}
-		<a
-			data-testid="event-edit"
-			href="/zeitstrahl/events/{entry.eventId}/edit"
-			class="ml-2 rounded-sm px-1 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
-		>
-			<span aria-hidden="true">✎</span>
-			<span class="sr-only">{m.btn_edit()}</span>
-		</a>
-	{/if}
-	<EventNote description={entry.description} />
 </div>

frontend/src/lib/timeline/WorldBand.svelte.spec.ts

@@ -73,35 +73,4 @@ describe('WorldBand', () => {
 		expect(pill?.textContent).not.toContain(m.timeline_layer_historical_suffix());
 		expect(document.body.textContent).toContain(m.timeline_layer_historical_suffix());
 	});
-
-	const HIST_EVENT_ID = '44444444-4444-4444-4444-444444444444';
-
-	it('shows an edit affordance for a curated HISTORICAL event when canWrite is true (REQ-006)', () => {
-		render(WorldBand, { canWrite: true, entry: historical({ eventId: HIST_EVENT_ID }) });
-		const edit = document.querySelector('[data-testid="event-edit"]') as HTMLAnchorElement | null;
-		expect(edit).not.toBeNull();
-		expect(edit?.getAttribute('href')).toBe(`/zeitstrahl/events/${HIST_EVENT_ID}/edit`);
-	});
-
-	it('mirrors the EventPill pencil: aria-hidden ✎ glyph + sr-only Bearbeiten label (REQ-006)', () => {
-		render(WorldBand, { canWrite: true, entry: historical({ eventId: HIST_EVENT_ID }) });
-		const edit = document.querySelector('[data-testid="event-edit"]');
-		expect(edit?.querySelector('[aria-hidden="true"]')?.textContent).toBe('✎');
-		expect(edit?.querySelector('.sr-only')?.textContent).toBe(m.btn_edit());
-	});
-
-	it('renders no edit affordance for a curated HISTORICAL event when canWrite is false (REQ-007)', () => {
-		render(WorldBand, { canWrite: false, entry: historical({ eventId: HIST_EVENT_ID }) });
-		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
-	});
-
-	it('renders no edit affordance when the canWrite prop is omitted (gate-closed default) (REQ-007)', () => {
-		render(WorldBand, { entry: historical({ eventId: HIST_EVENT_ID }) });
-		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
-	});
-
-	it('shows no edit affordance when eventId is null even with canWrite (REQ-008)', () => {
-		render(WorldBand, { canWrite: true, entry: historical({ eventId: undefined }) });
-		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
-	});
 });

frontend/src/lib/timeline/YearBand.svelte

@@ -3,10 +3,8 @@ import EventPill from './EventPill.svelte';
 import WorldBand from './WorldBand.svelte';
 import LetterCard from './LetterCard.svelte';
 import YearLetterStrip from './YearLetterStrip.svelte';
-import EventCluster from './EventCluster.svelte';
 import { isDense } from './timelineDensity';
 import { entryKey } from './entryKey';
-import { splitYearLetters, type EventCluster as EventClusterModel } from './eventClustering';
 import type { components } from '$lib/generated/api';
 
 type TimelineYearDTO = components['schemas']['TimelineYearDTO'];
@@ -14,113 +12,37 @@ type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
 
 /**
  * One year of the timeline: a <section> with a sticky <h2> (REQ-006). Events
- * render in DTO order as pills/world-bands; entries are never re-sorted (REQ-003).
- *
- * A curated event with letters linked to it (#850) becomes a contained event card:
- * the event IS the card header and its linked letters sit inside (no separate pill —
- * REQ-002). A curated event with letters in another year band renders here as a
- * cross-year text-header card (REQ-004). An event with no linked letters stays a
- * plain pill/world-band (REQ-005).
- *
- * Every other letter (no linkedEventId, or linking to an event the #780 layer filter
- * removed) stays loose: alternating left/right while the band holds ≤ 12 such loose
- * letters (REQ-006), folding into a single month-density strip above that (REQ-007).
- * The loose-letter layout and the strip count ONLY these loose letters — clustered
- * letters never re-appear loose (REQ-007).
+ * render in DTO order as pills/bands; letters render as individual cards while
+ * the band holds ≤ 12 (REQ-011) or collapse to a single density strip above that
+ * (REQ-012). Entries are never re-sorted — DTO order is preserved (REQ-003).
  */
-let {
-	year,
-	canWrite = false,
-	eventLookup
-}: {
-	year: TimelineYearDTO;
-	canWrite?: boolean;
-	eventLookup?: Map<string, string>;
-} = $props();
+let { year }: { year: TimelineYearDTO } = $props();
 
 type Row =
 	| { t: 'event'; entry: TimelineEntryDTO }
-	| { t: 'eventcard'; event?: TimelineEntryDTO; cluster: EventClusterModel }
 	| { t: 'letter'; entry: TimelineEntryDTO; side: 'left' | 'right' }
 	| { t: 'strip' };
 
-// Split this band's letters into event clusters and the loose remainder once; the loose
-// list alone drives the alternating layout and the density strip (REQ-007).
-const split = $derived(
-	splitYearLetters(
-		year.entries.filter((e) => e.kind === 'LETTER'),
-		eventLookup
-	)
-);
-const loose = $derived(split.loose);
-const dense = $derived(isDense(loose.length));
-// Clusters keyed by eventId (built once in splitYearLetters): row assembly looks a letter's
-// disposition up in O(1) — `byEvent.has(linkedEventId)` — instead of scanning the loose array
-// per letter (was O(L²) on a dense band), and resolves an event's card with `byEvent.get`.
-const byEvent = $derived(split.byEvent);
-
-// Event ids that have a same-year EVENT entry in THIS band: those clusters render as that
-// event's header (at the EVENT position); every other cluster is cross-year (REQ-004/015).
-const sameYearEventIds = $derived.by<Record<string, true>>(() => {
-	const ids: Record<string, true> = {};
-	for (const entry of year.entries) {
-		if (entry.kind === 'EVENT' && entry.eventId) ids[entry.eventId] = true;
-	}
-	return ids;
-});
+const letters = $derived(year.entries.filter((e) => e.kind === 'LETTER'));
+const dense = $derived(isDense(letters.length));
 
 const rows = $derived.by<Row[]>(() => {
 	const out: Row[] = [];
-	const emitted: Record<string, true> = {};
 	let stripInserted = false;
 	let letterIndex = 0;
-
 	for (const entry of year.entries) {
 		if (entry.kind === 'EVENT') {
-			// A curated event whose letters live in THIS band becomes the contained card's
-			// header — its title reads once, no separate pill (REQ-002). Otherwise it stays a
-			// plain pill/world-band (REQ-005).
-			const cluster = entry.eventId ? byEvent.get(entry.eventId) : undefined;
-			if (cluster) {
-				out.push({ t: 'eventcard', event: entry, cluster });
-				emitted[cluster.eventId] = true;
-			} else {
-				out.push({ t: 'event', entry });
-			}
-			continue;
-		}
-
-		const cluster = entry.linkedEventId ? byEvent.get(entry.linkedEventId) : undefined;
-		if (!cluster) {
-			// A loose letter (not clustered): alternate while sparse, or fold the whole loose set
-			// into one density strip (inserted once, at the first loose letter) when dense.
-			if (!dense) {
-				out.push({ t: 'letter', entry, side: letterIndex % 2 === 0 ? 'left' : 'right' });
-				letterIndex += 1;
-			} else if (!stripInserted) {
-				out.push({ t: 'strip' });
-				stripInserted = true;
-			}
-			continue;
-		}
-
-		// A clustered letter. A same-year cluster is emitted at its EVENT entry, so skip it here.
-		// A cross-year cluster has no EVENT anchor in this band — emit its ✉ card HERE, at the
-		// position of its earliest linked letter, so the band stays in strict time order (REQ-015).
-		if (!sameYearEventIds[cluster.eventId] && !emitted[cluster.eventId]) {
-			out.push({ t: 'eventcard', cluster });
-			emitted[cluster.eventId] = true;
+			out.push({ t: 'event', entry });
+		} else if (!dense) {
+			out.push({ t: 'letter', entry, side: letterIndex % 2 === 0 ? 'left' : 'right' });
+			letterIndex += 1;
+		} else if (!stripInserted) {
+			out.push({ t: 'strip' });
+			stripInserted = true;
 		}
 	}
-
 	return out;
 });
-
-function rowKey(row: Row): string {
-	if (row.t === 'strip') return `strip-${year.year}`;
-	if (row.t === 'eventcard') return `evcard:${row.cluster.eventId}`;
-	return entryKey(row.entry);
-}
 </script>
 
 <section class="py-2">
@@ -134,27 +56,20 @@ function rowKey(row: Row): string {
 	</h2>
 
 	<div class="mt-3 space-y-3">
-		{#each rows as row (rowKey(row))}
+		{#each rows as row (row.t === 'strip' ? `strip-${year.year}` : entryKey(row.entry))}
 			{#if row.t === 'event'}
 				{#if row.entry.type === 'HISTORICAL'}
-					<WorldBand entry={row.entry} canWrite={canWrite} />
+					<WorldBand entry={row.entry} />
 				{:else}
-					<EventPill entry={row.entry} canWrite={canWrite} />
+					<EventPill entry={row.entry} />
 				{/if}
-			{:else if row.t === 'eventcard'}
-				<EventCluster
-					letters={row.cluster.letters}
-					event={row.event}
-					title={row.cluster.title}
-					canWrite={canWrite}
-				/>
 			{:else if row.t === 'letter'}
 				<div class="letter-row" data-side={row.side}>
 					<span data-testid="letter-dot" class="letter-dot bg-surface" aria-hidden="true"></span>
 					<LetterCard entry={row.entry} />
 				</div>
 			{:else}
-				<YearLetterStrip letters={loose} year={year.year} />
+				<YearLetterStrip letters={letters} year={year.year} />
 			{/if}
 		{/each}
 	</div>

frontend/src/lib/timeline/YearBand.svelte.spec.ts

@@ -165,126 +165,3 @@ describe('YearBand', () => {
 		}
 	});
 });
-
-describe('YearBand — inline event clustering (#850)', () => {
-	const EV_ID = 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa';
-
-	function curatedEvent(overrides = {}) {
-		return makeEntry({
-			kind: 'EVENT',
-			derived: false,
-			type: 'PERSONAL',
-			eventId: EV_ID,
-			eventDate: '1916-07-06',
-			precision: 'DAY',
-			title: 'Ein gewaltiger Stadtbrand',
-			senderName: '',
-			receiverName: '',
-			documentId: undefined,
-			...overrides
-		});
-	}
-
-	function linkedLetters(year: number, count: number, eventId = EV_ID) {
-		return Array.from({ length: count }, (_, i) =>
-			makeEntry({
-				eventDate: `${year}-05-10`,
-				documentId: `linked-${i}`,
-				title: `Brief ${i}`,
-				linkedEventId: eventId
-			})
-		);
-	}
-
-	const lookup = new Map([[EV_ID, 'Ein gewaltiger Stadtbrand']]);
-
-	it('renders a curated event with a same-year linked letter as one event-card, title once, no separate pill (REQ-002)', () => {
-		render(YearBand, {
-			year: makeYear(1916, [curatedEvent(), ...linkedLetters(1916, 1)]),
-			eventLookup: lookup
-		});
-		expect(document.querySelectorAll('[data-testid="event-card"]')).toHaveLength(1);
-		const titles = (document.body.textContent?.match(/Ein gewaltiger Stadtbrand/g) ?? []).length;
-		expect(titles).toBe(1);
-		// the letter is inside the card, not a loose .letter-row
-		expect(document.querySelector('a.lcard.ev')).not.toBeNull();
-		expect(document.querySelector('.letter-row')).toBeNull();
-		// no plain EventPill for it (the pill is the only floating .rounded-full wrapper)
-		expect(document.querySelector('.justify-center .rounded-full.border-brand-mint')).toBeNull();
-	});
-
-	it('renders a curated event with NO linked letters as a plain EventPill, no card (REQ-005)', () => {
-		render(YearBand, {
-			year: makeYear(1916, [curatedEvent()]),
-			eventLookup: lookup
-		});
-		expect(document.querySelector('[data-testid="event-card"]')).toBeNull();
-		// the curated EventPill is the bordered floating rounded-full wrapper
-		expect(
-			document.querySelector('.justify-center .rounded-full.border-brand-mint')
-		).not.toBeNull();
-		expect(document.body.textContent).toContain('Ein gewaltiger Stadtbrand');
-	});
-
-	it('renders loose (unlinked) letters in a sparse year as alternating .letter-row, no card (REQ-006)', () => {
-		const loose = manyLetters(1916, 3); // no linkedEventId
-		render(YearBand, { year: makeYear(1916, loose), eventLookup: lookup });
-		expect(document.querySelectorAll('.letter-row')).toHaveLength(3);
-		expect(document.querySelector('[data-testid="event-card"]')).toBeNull();
-	});
-
-	it('counts only loose letters in the density strip; event letters stay in the card (REQ-006/007)', () => {
-		// 15 loose letters fold into one strip; a 3-letter event card shows its 3.
-		const loose = manyLetters(1916, 15);
-		const year = makeYear(1916, [curatedEvent(), ...linkedLetters(1916, 3), ...loose]);
-		render(YearBand, { year, eventLookup: lookup });
-		// the event card holds 3 letters
-		expect(document.querySelectorAll('a.lcard.ev')).toHaveLength(3);
-		// the loose letters fold into exactly one density strip
-		const strips = document.querySelectorAll('[data-testid="strip-expand"]');
-		expect(strips).toHaveLength(1);
-		// the strip card's count text is 15 (the loose letters), not 18 (REQ-006/007)
-		const stripCard = strips[0].closest('.max-w-md') as HTMLElement;
-		expect(stripCard.textContent).toContain('15');
-		expect(stripCard.textContent).not.toContain('18');
-	});
-
-	it('renders a cross-year cluster (event not in this band) as a ✉ text-header card holding it (REQ-004)', () => {
-		// The event id is in eventLookup but no matching EVENT entry sits in this band.
-		render(YearBand, {
-			year: makeYear(1917, linkedLetters(1917, 2)),
-			eventLookup: lookup
-		});
-		const card = document.querySelector('[data-testid="event-card"]');
-		expect(card).not.toBeNull();
-		expect(document.body.textContent).toContain('✉');
-		expect(document.body.textContent).toContain('Ein gewaltiger Stadtbrand');
-		// cross-year card carries no edit link and no pill
-		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
-		expect(document.querySelector('.justify-center .rounded-full.border-brand-mint')).toBeNull();
-	});
-
-	it('interleaves a cross-year card before a later-dated loose letter in the same band (REQ-015)', () => {
-		// Chronological band order (what the backend delivers): a February cross-year letter, then
-		// a November loose letter. The cross-year card must sit at its earliest letter's position —
-		// before the November loose letter — so the band still reads in strict time order.
-		const febLinked = makeEntry({
-			eventDate: '1917-02-10',
-			documentId: 'feb-linked',
-			title: 'Feldpostbrief',
-			linkedEventId: EV_ID
-		});
-		const novLoose = makeEntry({
-			eventDate: '1917-11-20',
-			documentId: 'nov-loose',
-			title: 'Brief im November'
-		});
-		render(YearBand, { year: makeYear(1917, [febLinked, novLoose]), eventLookup: lookup });
-		const card = document.querySelector('[data-testid="event-card"]') as HTMLElement;
-		const looseLink = document.querySelector('a[href="/documents/nov-loose"]') as HTMLElement;
-		expect(card).not.toBeNull();
-		expect(looseLink).not.toBeNull();
-		// the cross-year card precedes the later-dated loose letter in DOM order
-		expect(card.compareDocumentPosition(looseLink) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
-	});
-});

frontend/src/lib/timeline/event-note.svelte.spec.ts

@@ -1,74 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { tick } from 'svelte';
-import * as m from '$lib/paraglide/messages.js';
-import EventNote from './EventNote.svelte';
-
-afterEach(() => cleanup());
-
-const LONG_NOTE = Array.from({ length: 15 }, (_, i) => `Zeile ${i + 1}`).join('\n');
-
-describe('EventNote (REQ-002–008)', () => {
-	it('escapesHtml — renders XSS payload as inert text, no injected element (REQ-002)', () => {
-		render(EventNote, { description: '<script>alert(1)</script>' });
-		// The literal string should appear as text content
-		expect(document.body.textContent).toContain('<script>alert(1)</script>');
-		// No injected <script> with alert() should exist (Svelte's own scripts don't contain it)
-		const scripts = Array.from(document.querySelectorAll('script'));
-		expect(scripts.some((s) => s.textContent?.includes('alert(1)'))).toBe(false);
-	});
-
-	it('preservesLineBreaks — note element carries whitespace-pre-line class (REQ-003)', () => {
-		render(EventNote, { description: 'A\n\nB' });
-		const note = document.querySelector('[data-testid="event-note"]') as HTMLElement;
-		expect(note).not.toBeNull();
-		expect(note.className).toContain('whitespace-pre-line');
-	});
-
-	it('blankNoteRendersNothing — null description produces no note element (REQ-008)', () => {
-		render(EventNote, { description: null });
-		expect(document.querySelector('[data-testid="event-note"]')).toBeNull();
-	});
-
-	it('blankNoteRendersNothing — empty string produces no note element (REQ-008)', () => {
-		render(EventNote, { description: '' });
-		expect(document.querySelector('[data-testid="event-note"]')).toBeNull();
-	});
-
-	it('blankNoteRendersNothing — blank-only string produces no note element (REQ-008)', () => {
-		render(EventNote, { description: '   ' });
-		expect(document.querySelector('[data-testid="event-note"]')).toBeNull();
-	});
-
-	it('shortNoteNoToggle — a one-line note renders fully with no disclosure control (REQ-006)', async () => {
-		render(EventNote, { description: 'Kurze Notiz.' });
-		await tick();
-		expect(document.body.textContent).toContain('Kurze Notiz.');
-		expect(document.querySelector('[data-testid="note-toggle"]')).toBeNull();
-	});
-
-	it('clampsAndShowsToggle — long note shows "mehr anzeigen" with aria-expanded=false (REQ-005)', async () => {
-		render(EventNote, { description: LONG_NOTE });
-		await tick();
-		const btn = document.querySelector('[data-testid="note-toggle"]') as HTMLButtonElement;
-		expect(btn).not.toBeNull();
-		expect(btn.textContent?.trim()).toBe(m.timeline_note_show_more());
-		expect(btn.getAttribute('aria-expanded')).toBe('false');
-	});
-
-	it('toggleExpandsCollapses — click expands, re-click collapses (REQ-007)', async () => {
-		render(EventNote, { description: LONG_NOTE });
-		await tick();
-		const btn = document.querySelector('[data-testid="note-toggle"]') as HTMLButtonElement;
-
-		btn.click();
-		await tick();
-		expect(btn.getAttribute('aria-expanded')).toBe('true');
-		expect(btn.textContent?.trim()).toBe(m.timeline_note_show_less());
-
-		btn.click();
-		await tick();
-		expect(btn.getAttribute('aria-expanded')).toBe('false');
-		expect(btn.textContent?.trim()).toBe(m.timeline_note_show_more());
-	});
-});

frontend/src/lib/timeline/eventCardConfig.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { getAccentConfig, canEditEvent } from './eventCardConfig';
+import { getAccentConfig } from './eventCardConfig';
 import type { components } from '$lib/generated/api';
 
 type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
@@ -51,24 +51,3 @@ describe('getAccentConfig', () => {
 		expect(cfg.accent).toBe('curated');
 	});
 });
-
-// The single source of the curator edit-affordance gate (CLAUDE.md's TimelineEntryDTO contract):
-// a curated event shows its edit pencil only for a writer, never for a derived life-event or a
-// null eventId. Shared by EventPill, WorldBand, and EventCluster (#850 finding #5).
-describe('canEditEvent', () => {
-	it('allows a writer to edit a curated event with an eventId', () => {
-		expect(canEditEvent(event({ derived: false, eventId: 'e-1' }), true)).toBe(true);
-	});
-
-	it('denies a viewer without write permission', () => {
-		expect(canEditEvent(event({ derived: false, eventId: 'e-1' }), false)).toBe(false);
-	});
-
-	it('denies a derived life-event even for a writer', () => {
-		expect(canEditEvent(event({ derived: true, eventId: 'e-1' }), true)).toBe(false);
-	});
-
-	it('denies an event with no eventId even for a writer', () => {
-		expect(canEditEvent(event({ derived: false, eventId: undefined }), true)).toBe(false);
-	});
-});

frontend/src/lib/timeline/eventCardConfig.ts

@@ -36,16 +36,3 @@ export function getAccentConfig(entry: TimelineEntryDTO): AccentConfig {
 	}
 	return { glyph: '★', label: m.timeline_layer_family(), accent: 'curated' };
 }
-
-/**
- * The curator edit-affordance gate, in one place — the security-relevant contract documented on
- * CLAUDE.md's `TimelineEntryDTO` row (`derived || eventId == null` → no edit link). A curated
- * event's edit pencil shows only for a viewer with WRITE_ALL (`canWrite`), and only when it is a
- * real curated event: never a derived life-event (nothing to edit) and never a null `eventId`.
- * HISTORICAL events are never derived, so this also covers the world band. The gate is UX only —
- * the #781 route guard + backend permission are the real boundary. Shared by EventPill, WorldBand,
- * and EventCluster so the gate has a single source of truth (#850 finding #5).
- */
-export function canEditEvent(entry: TimelineEntryDTO, canWrite: boolean): boolean {
-	return canWrite && !entry.derived && entry.eventId != null;
-}

frontend/src/lib/timeline/eventClustering.spec.ts

@@ -1,141 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { buildEventLookup, splitYearLetters, CLUSTER_PREVIEW } from './eventClustering';
-import { makeEntry } from './test-factories';
-import type { components } from '$lib/generated/api';
-
-type TimelineDTO = components['schemas']['TimelineDTO'];
-type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
-
-const EV_A = 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa';
-const EV_B = 'bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb';
-
-const makeEvent = (overrides: Partial<TimelineEntryDTO> = {}): TimelineEntryDTO =>
-	makeEntry({ kind: 'EVENT', type: 'PERSONAL', documentId: undefined, ...overrides });
-
-describe('eventClustering — buildEventLookup', () => {
-	it('maps a curated year-band event to its title, excluding undated-bucket events (#7)', () => {
-		const timeline: TimelineDTO = {
-			years: [
-				{
-					year: 1916,
-					entries: [makeEvent({ eventId: EV_A, title: 'Ein gewaltiger Stadtbrand' })]
-				}
-			],
-			undated: [makeEvent({ eventId: EV_B, title: 'Briefe von der Front' })]
-		};
-		const lookup = buildEventLookup(timeline);
-		expect(lookup.get(EV_A)).toBe('Ein gewaltiger Stadtbrand');
-		// An undated event renders as a plain pill in the undated bucket — out of clustering
-		// scope. Including it here would scatter its dated letters into orphaned ✉ cross-year
-		// cards detached from the pill (#7), so it must NOT enter the lookup.
-		expect(lookup.has(EV_B)).toBe(false);
-		expect(lookup.size).toBe(1);
-	});
-
-	it('ignores derived events (no eventId) and letters', () => {
-		const timeline: TimelineDTO = {
-			years: [
-				{
-					year: 1916,
-					entries: [
-						makeEvent({ eventId: undefined, title: 'Geburt' }), // derived
-						makeEntry({ kind: 'LETTER', documentId: 'doc-1' })
-					]
-				}
-			],
-			undated: []
-		};
-		expect(buildEventLookup(timeline).size).toBe(0);
-	});
-
-	it('excludes a HISTORICAL event so its letters stay loose, keeping its WorldBand (REQ-014)', () => {
-		const timeline: TimelineDTO = {
-			years: [
-				{ year: 1916, entries: [makeEvent({ eventId: EV_A, type: 'HISTORICAL', title: 'Somme' })] }
-			],
-			undated: []
-		};
-		const lookup = buildEventLookup(timeline);
-		expect(lookup.has(EV_A)).toBe(false);
-		expect(lookup.size).toBe(0);
-	});
-
-	it('skips an event with an empty or whitespace title — no bare ✉ card (#8)', () => {
-		const timeline: TimelineDTO = {
-			years: [
-				{
-					year: 1916,
-					entries: [
-						makeEvent({ eventId: EV_A, title: '' }),
-						makeEvent({ eventId: EV_B, title: '   ' })
-					]
-				}
-			],
-			undated: []
-		};
-		expect(buildEventLookup(timeline).size).toBe(0);
-	});
-});
-
-describe('eventClustering — splitYearLetters', () => {
-	it('exposes a CLUSTER_PREVIEW of 5', () => {
-		expect(CLUSTER_PREVIEW).toBe(5);
-	});
-
-	it('clusters letters by linkedEventId with matching counts', () => {
-		const lookup = new Map([[EV_A, 'Stadtbrand']]);
-		const letters = [
-			makeEntry({ kind: 'LETTER', documentId: 'd1', linkedEventId: EV_A }),
-			makeEntry({ kind: 'LETTER', documentId: 'd2', linkedEventId: EV_A })
-		];
-		const { clusters, loose } = splitYearLetters(letters, lookup);
-		expect(clusters).toHaveLength(1);
-		expect(clusters[0].eventId).toBe(EV_A);
-		expect(clusters[0].title).toBe('Stadtbrand');
-		expect(clusters[0].letters).toHaveLength(2);
-		expect(loose).toHaveLength(0);
-	});
-
-	it('keeps a letter with no linkedEventId loose', () => {
-		const lookup = new Map([[EV_A, 'Stadtbrand']]);
-		const letters = [makeEntry({ kind: 'LETTER', documentId: 'd1', linkedEventId: undefined })];
-		const { clusters, loose } = splitYearLetters(letters, lookup);
-		expect(clusters).toHaveLength(0);
-		expect(loose).toHaveLength(1);
-	});
-
-	it('keeps a letter whose linkedEventId is absent from the lookup loose (filter-then-cluster, REQ-008)', () => {
-		const lookup = new Map([[EV_A, 'Stadtbrand']]);
-		const letters = [makeEntry({ kind: 'LETTER', documentId: 'd1', linkedEventId: EV_B })];
-		const { clusters, loose } = splitYearLetters(letters, lookup);
-		expect(clusters).toHaveLength(0);
-		expect(loose).toHaveLength(1);
-	});
-
-	it('places each letter in exactly one place (REQ-007)', () => {
-		const lookup = new Map([[EV_A, 'Stadtbrand']]);
-		const letters = [
-			makeEntry({ kind: 'LETTER', documentId: 'd1', linkedEventId: EV_A }),
-			makeEntry({ kind: 'LETTER', documentId: 'd2', linkedEventId: undefined }),
-			makeEntry({ kind: 'LETTER', documentId: 'd3', linkedEventId: EV_B })
-		];
-		const { clusters, loose } = splitYearLetters(letters, lookup);
-		const clustered = clusters.flatMap((c) => c.letters.length).reduce((a, b) => a + b, 0);
-		expect(clustered + loose.length).toBe(3);
-		expect(clustered).toBe(1);
-		expect(loose).toHaveLength(2);
-	});
-
-	it('keeps clusters in first-seen order', () => {
-		const lookup = new Map([
-			[EV_B, 'Front'],
-			[EV_A, 'Stadtbrand']
-		]);
-		const letters = [
-			makeEntry({ kind: 'LETTER', documentId: 'd1', linkedEventId: EV_A }),
-			makeEntry({ kind: 'LETTER', documentId: 'd2', linkedEventId: EV_B })
-		];
-		const { clusters } = splitYearLetters(letters, lookup);
-		expect(clusters.map((c) => c.eventId)).toEqual([EV_A, EV_B]);
-	});
-});

frontend/src/lib/timeline/eventClustering.ts

@@ -1,88 +0,0 @@
-import type { components } from '$lib/generated/api';
-
-type TimelineDTO = components['schemas']['TimelineDTO'];
-type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
-
-/** Letters shown inside an event card before a "show more" toggle appears (#850, REQ-003). */
-export const CLUSTER_PREVIEW = 5;
-
-/** One contained event card's worth of letters within a year band (#850). */
-export interface EventCluster {
-	/** The curated event's id — also the `{#each}` key. */
-	eventId: string;
-	/** The curated event's title (from the event lookup). */
-	title: string;
-	letters: TimelineEntryDTO[];
-}
-
-/** The result of splitting a year's letters into event clusters and the loose remainder. */
-export interface SplitLetters {
-	clusters: EventCluster[];
-	loose: TimelineEntryDTO[];
-	/** Clusters keyed by `eventId` for O(1) lookup during row assembly (a letter's disposition is
-	 *  `byEvent.has(linkedEventId)`; an event's card is `byEvent.get(eventId)`). */
-	byEvent: Map<string, EventCluster>;
-}
-
-/**
- * Maps each curated event present in the (already layer-filtered) timeline to its title. These
- * are the only events a letter may cluster under — a letter whose `linkedEventId` is absent here
- * links to an event the #780 layer filter removed, so it falls back to a loose chronological
- * letter (filter-then-cluster, REQ-008). Curated PERSONAL events carry an `eventId`; derived
- * life-events and letters do not, so they never enter the lookup. HISTORICAL events are excluded
- * too: a world event always keeps its full-width WorldBand and never clusters, even with linked
- * letters (REQ-014) — those letters stay loose.
- *
- * Only year-band events are collected: an undated event renders as a plain pill in the undated
- * bucket (out of clustering scope), so including it would scatter its dated letters into orphaned
- * cross-year cards detached from that pill (#7).
- *
- * An event with an empty/whitespace title is skipped too — clustering under it would render a
- * label-less `✉` mystery card; its letters stay loose instead (#8).
- */
-export function buildEventLookup(timeline: TimelineDTO): Map<string, string> {
-	const lookup = new Map<string, string>();
-	const collect = (entries: TimelineEntryDTO[]) => {
-		for (const entry of entries) {
-			const title = entry.title?.trim();
-			if (entry.kind === 'EVENT' && entry.eventId && entry.type !== 'HISTORICAL' && title) {
-				lookup.set(entry.eventId, title);
-			}
-		}
-	};
-	for (const band of timeline.years) collect(band.entries);
-	return lookup;
-}
-
-/**
- * Splits one year's `LETTER` entries into event clusters and the loose remainder. A letter joins
- * the cluster keyed by its `linkedEventId` IFF that id is set AND present in `eventLookup`
- * (filter-then-cluster, REQ-007/008); every other letter is loose and stays in the chronological
- * flow (REQ-006). Clusters keep first-seen order; each letter appears in exactly one place.
- */
-export function splitYearLetters(
-	letters: TimelineEntryDTO[],
-	eventLookup?: Map<string, string>
-): SplitLetters {
-	const byEvent = new Map<string, EventCluster>();
-	const clusters: EventCluster[] = [];
-	const loose: TimelineEntryDTO[] = [];
-
-	for (const letter of letters) {
-		const eventId = letter.linkedEventId;
-		const title = eventId != null ? eventLookup?.get(eventId) : undefined;
-		if (eventId != null && title !== undefined) {
-			let cluster = byEvent.get(eventId);
-			if (!cluster) {
-				cluster = { eventId, title, letters: [] };
-				byEvent.set(eventId, cluster);
-				clusters.push(cluster);
-			}
-			cluster.letters.push(letter);
-		} else {
-			loose.push(letter);
-		}
-	}
-
-	return { clusters, loose, byEvent };
-}

frontend/src/lib/timeline/timeline-no-raw-html.spec.ts

@@ -1,24 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { readdirSync, readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname, join } from 'node:path';
-
-const timelineDir = dirname(fileURLToPath(import.meta.url));
-
-/**
- * REQ-010 / CWE-79: inline event clustering renders curator event titles and import-derived
- * letter titles + sender/receiver text through every component under lib/timeline (the reused
- * LetterCard, the new EventCluster card, the existing pills/bands/strip). That text must always
- * render through Svelte's default `{...}` escaping — never `{@html}`. This grep gate fails loudly
- * the moment any timeline component reaches for the raw-HTML directive.
- */
-describe('lib/timeline never uses {@html} (REQ-010)', () => {
-	it('no timeline component contains the raw-HTML directive', () => {
-		const components = readdirSync(timelineDir).filter((file) => file.endsWith('.svelte'));
-		expect(components.length).toBeGreaterThan(0);
-		const offenders = components.filter((file) =>
-			readFileSync(join(timelineDir, file), 'utf8').includes('{@html')
-		);
-		expect(offenders).toEqual([]);
-	});
-});

frontend/src/lib/timeline/timelineFilter.spec.ts

@@ -1,151 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import {
-	isDefaultState,
-	hiddenLayerCount,
-	filterTimeline,
-	ALL_LAYERS_ON,
-	type TimelineLayerFilters
-} from './timelineFilter';
-import { makeEntry, makeYear, makeTimelineDTO } from './test-factories';
-
-// Entry factories pinned to the three layers the filter discriminates (#780).
-const letter = (overrides = {}) => makeEntry({ kind: 'LETTER', ...overrides });
-
-const curatedPersonal = (overrides = {}) =>
-	makeEntry({
-		kind: 'EVENT',
-		type: 'PERSONAL',
-		derived: false,
-		documentId: undefined,
-		title: 'Umzug nach Berlin',
-		senderName: '',
-		receiverName: '',
-		...overrides
-	});
-
-// Derived life-events carry type=PERSONAL (issue #776 REQ-009) — they belong to
-// the Personal layer, not a fourth one.
-const derivedLifeEvent = (overrides = {}) =>
-	makeEntry({
-		kind: 'EVENT',
-		type: 'PERSONAL',
-		derived: true,
-		derivedType: 'BIRTH',
-		documentId: undefined,
-		title: 'Geburt',
-		senderName: '',
-		receiverName: '',
-		...overrides
-	});
-
-const historical = (overrides = {}) =>
-	makeEntry({
-		kind: 'EVENT',
-		type: 'HISTORICAL',
-		derived: false,
-		documentId: undefined,
-		title: 'Erster Weltkrieg',
-		senderName: '',
-		receiverName: '',
-		...overrides
-	});
-
-const off = (overrides: Partial<TimelineLayerFilters>): TimelineLayerFilters => ({
-	...ALL_LAYERS_ON,
-	...overrides
-});
-
-describe('isDefaultState (REQ-007)', () => {
-	it('is true when all three layers are on', () => {
-		expect(isDefaultState(ALL_LAYERS_ON)).toBe(true);
-	});
-
-	it('is false when any single layer is off', () => {
-		expect(isDefaultState(off({ personalOn: false }))).toBe(false);
-		expect(isDefaultState(off({ historicalOn: false }))).toBe(false);
-		expect(isDefaultState(off({ lettersOn: false }))).toBe(false);
-	});
-});
-
-describe('hiddenLayerCount (REQ-007)', () => {
-	it('is 0 in the default all-on state', () => {
-		expect(hiddenLayerCount(ALL_LAYERS_ON)).toBe(0);
-	});
-
-	it('counts each layer that is off', () => {
-		expect(hiddenLayerCount(off({ lettersOn: false }))).toBe(1);
-		expect(hiddenLayerCount(off({ personalOn: false, historicalOn: false }))).toBe(2);
-		expect(hiddenLayerCount({ personalOn: false, historicalOn: false, lettersOn: false })).toBe(3);
-	});
-});
-
-describe('filterTimeline', () => {
-	it('returns every entry unchanged in the default all-on state', () => {
-		const dto = makeTimelineDTO({
-			years: [makeYear(1915, [letter(), historical(), curatedPersonal()])],
-			undated: [letter({ documentId: 'u1' })]
-		});
-		const result = filterTimeline(dto, ALL_LAYERS_ON);
-		expect(result.years[0].entries).toHaveLength(3);
-		expect(result.undated).toHaveLength(1);
-	});
-
-	it('hides LETTER entries when lettersOn is false, keeping events (REQ-005)', () => {
-		const dto = makeTimelineDTO({
-			years: [makeYear(1915, [letter(), historical(), curatedPersonal()])],
-			undated: [letter({ documentId: 'u1' })]
-		});
-		const result = filterTimeline(dto, off({ lettersOn: false }));
-		expect(result.years[0].entries.every((e) => e.kind !== 'LETTER')).toBe(true);
-		expect(result.years[0].entries).toHaveLength(2);
-		expect(result.undated).toHaveLength(0);
-	});
-
-	it('hides HISTORICAL events when historicalOn is false, keeping personal + letters (REQ-004)', () => {
-		const dto = makeTimelineDTO({
-			years: [makeYear(1915, [letter(), historical(), curatedPersonal(), derivedLifeEvent()])]
-		});
-		const result = filterTimeline(dto, off({ historicalOn: false }));
-		const kept = result.years[0].entries;
-		expect(kept.some((e) => e.kind === 'EVENT' && e.type === 'HISTORICAL')).toBe(false);
-		expect(kept.some((e) => e.kind === 'LETTER')).toBe(true);
-		expect(kept.some((e) => e.kind === 'EVENT' && e.type === 'PERSONAL')).toBe(true);
-		expect(kept).toHaveLength(3);
-	});
-
-	it('hides personal events — curated and derived — when personalOn is false (REQ-003)', () => {
-		const dto = makeTimelineDTO({
-			years: [makeYear(1915, [letter(), historical(), curatedPersonal(), derivedLifeEvent()])]
-		});
-		const result = filterTimeline(dto, off({ personalOn: false }));
-		const kept = result.years[0].entries;
-		// neither the curated PERSONAL event nor the derived life-event survives
-		expect(kept.some((e) => e.kind === 'EVENT' && e.type === 'PERSONAL')).toBe(false);
-		expect(kept.some((e) => e.derived)).toBe(false);
-		// historical events and letters are untouched
-		expect(kept.some((e) => e.kind === 'EVENT' && e.type === 'HISTORICAL')).toBe(true);
-		expect(kept.some((e) => e.kind === 'LETTER')).toBe(true);
-		expect(kept).toHaveLength(2);
-	});
-
-	it('drops year bands that become empty and filters the undated bucket (REQ-006)', () => {
-		const dto = makeTimelineDTO({
-			years: [
-				makeYear(1915, [letter()]), // becomes empty when letters are hidden
-				makeYear(1918, [historical()]) // survives
-			],
-			undated: [letter({ documentId: 'u1' }), historical({ documentId: undefined })]
-		});
-		const result = filterTimeline(dto, off({ lettersOn: false }));
-		expect(result.years).toHaveLength(1);
-		expect(result.years[0].year).toBe(1918);
-		expect(result.undated.every((e) => e.kind !== 'LETTER')).toBe(true);
-		expect(result.undated).toHaveLength(1);
-	});
-
-	it('does not mutate the input timeline', () => {
-		const dto = makeTimelineDTO({ years: [makeYear(1915, [letter(), historical()])] });
-		filterTimeline(dto, off({ lettersOn: false }));
-		expect(dto.years[0].entries).toHaveLength(2);
-	});
-});

frontend/src/lib/timeline/timelineFilter.ts

@@ -1,63 +0,0 @@
-import type { components } from '$lib/generated/api';
-
-type TimelineDTO = components['schemas']['TimelineDTO'];
-type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
-
-/**
- * The three visibility layers a reader can toggle on the global `/zeitstrahl`
- * (#780). Purely a presentation concern — the whole timeline is loaded once by
- * #779; these toggles derive a client-side filtered view of it.
- */
-export interface TimelineLayerFilters {
-	/** Personal events — curated `PERSONAL` events and derived life-events. */
-	personalOn: boolean;
-	/** Historical events (`type === 'HISTORICAL'`). */
-	historicalOn: boolean;
-	/** Letters (`kind === 'LETTER'`). */
-	lettersOn: boolean;
-}
-
-/** The default view: every layer visible. */
-export const ALL_LAYERS_ON: TimelineLayerFilters = {
-	personalOn: true,
-	historicalOn: true,
-	lettersOn: true
-};
-
-/** True when no layer is hidden — the default, all-on state (REQ-007). */
-export function isDefaultState(filters: TimelineLayerFilters): boolean {
-	return filters.personalOn && filters.historicalOn && filters.lettersOn;
-}
-
-/** How many layers are currently hidden — the "N active" trigger count (REQ-007). */
-export function hiddenLayerCount(filters: TimelineLayerFilters): number {
-	return (
-		(filters.personalOn ? 0 : 1) + (filters.historicalOn ? 0 : 1) + (filters.lettersOn ? 0 : 1)
-	);
-}
-
-/**
- * Decides whether one entry survives the active layer toggles. A letter rides
- * the Letters layer; a historical event the Historical layer; everything else
- * (curated `PERSONAL` events and derived life-events, which also carry
- * `type === 'PERSONAL'`) the Personal layer.
- */
-function isVisible(entry: TimelineEntryDTO, filters: TimelineLayerFilters): boolean {
-	if (entry.kind === 'LETTER') return filters.lettersOn;
-	if (entry.type === 'HISTORICAL') return filters.historicalOn;
-	return filters.personalOn;
-}
-
-/**
- * Derives a client-side filtered copy of the timeline (REQ-003/004/005/006).
- * Year bands left empty by the active toggles are dropped so `TimelineView`
- * never renders a hollow band, and the undated bucket is filtered the same way.
- * Pure — the input DTO is never mutated.
- */
-export function filterTimeline(timeline: TimelineDTO, filters: TimelineLayerFilters): TimelineDTO {
-	const years = timeline.years
-		.map((band) => ({ ...band, entries: band.entries.filter((e) => isVisible(e, filters)) }))
-		.filter((band) => band.entries.length > 0);
-	const undated = timeline.undated.filter((e) => isVisible(e, filters));
-	return { years, undated };
-}

frontend/src/lib/timeline/timelineFilterBoundary.spec.ts

@@ -1,37 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-
-// REQ-001/002: the layer filter is presentation-only and fully client-side. It
-// must never navigate or fetch — the route derives the filtered view from
-// already-loaded data. This static guard mirrors the project's existing
-// grep-gates (e.g. the no-`{@html}` checks) and fails the build if a future
-// edit reintroduces navigation or a network call into either file.
-const read = (relative: string) =>
-	readFileSync(fileURLToPath(new URL(relative, import.meta.url)), 'utf8');
-
-const FILES = {
-	'TimelineFilters.svelte': read('./TimelineFilters.svelte'),
-	'/zeitstrahl/+page.svelte': read('../../routes/zeitstrahl/+page.svelte')
-};
-
-const FORBIDDEN: { label: string; pattern: RegExp }[] = [
-	{ label: 'goto(', pattern: /\bgoto\s*\(/ },
-	{ label: 'url.searchParams', pattern: /url\.searchParams/ },
-	{ label: 'api.GET', pattern: /\bapi\.GET\b/ },
-	{ label: 'fetch(', pattern: /\bfetch\s*\(/ }
-];
-
-describe('layer-filter boundary (REQ-001/002)', () => {
-	for (const [name, source] of Object.entries(FILES)) {
-		it(`${name} was found and is non-empty`, () => {
-			expect(source.length).toBeGreaterThan(0);
-		});
-
-		for (const { label, pattern } of FORBIDDEN) {
-			it(`${name} contains no ${label}`, () => {
-				expect(pattern.test(source), `${name} must not use ${label}`).toBe(false);
-			});
-		}
-	}
-});

frontend/src/routes/layout.css

@@ -201,20 +201,6 @@
 	   rows without competing with node fills. 8% on light surface ≈ #ECF6F4
 	   (~1.04:1 vs canvas — decorative carve-out). */
 	--c-gutter-stripe: rgba(161, 220, 216, 0.08);
-
-	/* Radius — theme-invariant (DESIGN_RULES §1). sm is the default (cards,
-	   inputs, buttons, segmented control); md is tag chips/badges only; full is
-	   avatars, dots, pills. */
-	--radius-sm: 2px;
-	--radius-md: 4px;
-	--radius-full: 9999px;
-
-	/* Elevation — resting cards (sm) and dropdowns/menus (md). Dark mode defines
-	   its own values in both dark blocks below: a navy-on-sand shadow is nearly
-	   invisible on dark surfaces, so dark cards need a stronger shadow to keep
-	   the 3px-mint-top-border card signature lifted. */
-	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
 /* ─── 5. Dark mode ─────────────────────────────────────────────────────────── */
@@ -313,11 +299,6 @@
 		--c-warning-bg: #2a2113;
 		--c-warning-border: #6d5417;
 		--c-warning-text: #fbd38d;
-
-		/* Elevation — stronger than light mode; the light shadows are invisible
-		   on dark navy surfaces. KEEP IN SYNC with :root[data-theme='dark']. */
-		--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
-		--shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.6), 0 2px 4px -2px rgb(0 0 0 / 0.6);
 	}
 }
 
@@ -409,11 +390,6 @@
 	--c-warning-bg: #2a2113;
 	--c-warning-border: #6d5417;
 	--c-warning-text: #fbd38d;
-
-	/* Elevation — stronger than light mode; the light shadows are invisible
-	   on dark navy surfaces. KEEP IN SYNC with the @media block above. */
-	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
-	--shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.6), 0 2px 4px -2px rgb(0 0 0 / 0.6);
 }
 
 /* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */

frontend/src/routes/persons/+page.svelte

@@ -7,7 +7,7 @@ import { m } from '$lib/paraglide/messages.js';
 import PersonCard from '$lib/person/PersonCard.svelte';
 import PersonFilterBar from '$lib/person/PersonFilterBar.svelte';
 import Pagination from '$lib/shared/primitives/Pagination.svelte';
-import PageHeader from '$lib/shared/primitives/PageHeader.svelte';
+import PersonsStatsBar from './PersonsStatsBar.svelte';
 import PersonsEmptyState from './PersonsEmptyState.svelte';
 
 let { data } = $props();
@@ -53,62 +53,71 @@ const noFiltersActive = $derived(
 </svelte:head>
 
 <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-	<PageHeader eyebrow={m.persons_eyebrow()} title={m.page_title_persons()} lede={m.persons_lede()}>
-		{#snippet right()}
-			<div class="flex shrink-0 items-center gap-3">
-				<!-- Search -->
-				<div class="relative">
-					<label for="search" class="sr-only">{m.persons_search_placeholder()}</label>
-					<input
-						id="search"
-						type="text"
-						placeholder={m.persons_search_placeholder()}
-						bind:value={q}
-						oninput={handleSearch}
-						onfocus={() => (qFocused = true)}
-						onblur={() => (qFocused = false)}
-						class="block w-56 rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
-					/>
-					<div
-						class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"
-					>
-						<img
-							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
-							alt=""
-							aria-hidden="true"
-							class="h-4 w-4 opacity-40"
-						/>
-					</div>
-				</div>
-
-				<!-- Triage link (transcriber only) -->
-				{#if data.canWrite}
-					<a
-						href="/persons/review"
-						class="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm border border-line bg-surface px-4 py-2 font-sans text-sm font-semibold text-ink transition-colors hover:bg-muted"
-					>
-						{m.persons_toggle_needs_review({ count: data.needsReviewCount })}
-					</a>
-				{/if}
-
-				<!-- New person CTA -->
-				{#if data.canWrite}
-					<a
-						href="/persons/new"
-						class="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm bg-primary px-4 py-2.5 font-sans text-sm font-bold tracking-wide text-primary-fg transition-colors hover:bg-primary/80"
-					>
-						<img
-							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
-							alt=""
-							aria-hidden="true"
-							class="h-4 w-4 invert dark:invert-0"
-						/>
-						{m.persons_btn_new()}
-					</a>
-				{/if}
+	<!-- Header: title+stats on left, search+CTA on right -->
+	<div class="mb-6 flex flex-wrap items-end justify-between gap-4 border-b border-ink/10 pb-6">
+		<div>
+			<h1 class="font-serif text-3xl font-medium text-ink">{m.page_title_persons()}</h1>
+			<div class="mt-2">
+				<PersonsStatsBar
+					totalPersons={data.stats.totalPersons ?? 0}
+					totalDocuments={data.stats.totalDocuments ?? 0}
+				/>
 			</div>
-		{/snippet}
-	</PageHeader>
+		</div>
+
+		<div class="flex items-center gap-3">
+			<!-- Search -->
+			<div class="relative">
+				<label for="search" class="sr-only">{m.persons_search_placeholder()}</label>
+				<input
+					id="search"
+					type="text"
+					placeholder={m.persons_search_placeholder()}
+					bind:value={q}
+					oninput={handleSearch}
+					onfocus={() => (qFocused = true)}
+					onblur={() => (qFocused = false)}
+					class="block w-56 rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+				/>
+				<div
+					class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"
+				>
+					<img
+						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
+						alt=""
+						aria-hidden="true"
+						class="h-4 w-4 opacity-40"
+					/>
+				</div>
+			</div>
+
+			<!-- Triage link (transcriber only) -->
+			{#if data.canWrite}
+				<a
+					href="/persons/review"
+					class="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm border border-line bg-surface px-4 py-2 font-sans text-sm font-semibold text-ink transition-colors hover:bg-muted"
+				>
+					{m.persons_toggle_needs_review({ count: data.needsReviewCount })}
+				</a>
+			{/if}
+
+			<!-- New person CTA -->
+			{#if data.canWrite}
+				<a
+					href="/persons/new"
+					class="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm bg-primary px-4 py-2.5 font-sans text-sm font-bold tracking-wide text-primary-fg transition-colors hover:bg-primary/80"
+				>
+					<img
+						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
+						alt=""
+						aria-hidden="true"
+						class="h-4 w-4 invert dark:invert-0"
+					/>
+					{m.persons_btn_new()}
+				</a>
+			{/if}
+		</div>
+	</div>
 
 	<!-- Filter chips + show-all toggle -->
 	<div class="mb-8">

frontend/src/routes/persons/[id]/PersonCard.svelte

@@ -128,8 +128,7 @@ const deathText = $derived(formatLifeDate(person.deathDate, person.deathDatePrec
 			</div>
 		{/if}
 
-		<!-- Curator actions — full width, outlined. Both links are gated to
-		     WRITE_ALL; the gate is UX only (the #781 route guard is the boundary). -->
+		<!-- Edit button — full width, outlined -->
 		{#if canWrite}
 			<a
 				href="/persons/{person.id}/edit"
@@ -143,15 +142,6 @@ const deathText = $derived(formatLifeDate(person.deathDate, person.deathDatePrec
 				/>
 				{m.btn_edit()}
 			</a>
-			<!-- Opens #781's create form pre-seeded with this person; on save it
-			     returns to /persons/{id} (originPersonId). #842 REQ-003/010. -->
-			<a
-				data-testid="person-add-event"
-				href="/zeitstrahl/events/new?personId={person.id}"
-				class="mt-2 flex min-h-[44px] w-full items-center justify-center rounded border border-line px-3 py-2 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
-			>
-				{m.person_add_event()}
-			</a>
 		{/if}
 	</div>
 </div>

frontend/src/routes/persons/[id]/PersonCard.svelte.spec.ts

@@ -1,32 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import PersonCard from './PersonCard.svelte';
-
-afterEach(() => cleanup());
-
-const PERSON_ID = '55555555-5555-5555-5555-555555555555';
-
-const makePerson = (overrides = {}) => ({
-	id: PERSON_ID,
-	firstName: 'Karl',
-	lastName: 'Raddatz',
-	displayName: 'Karl Raddatz',
-	personType: 'PERSON',
-	...overrides
-});
-
-describe('PersonCard add-event affordance (#842)', () => {
-	it('shows an add-event link pre-seeded with the person to a curator (REQ-003)', () => {
-		render(PersonCard, { person: makePerson(), canWrite: true });
-		const add = document.querySelector(
-			'[data-testid="person-add-event"]'
-		) as HTMLAnchorElement | null;
-		expect(add).not.toBeNull();
-		expect(add?.getAttribute('href')).toBe(`/zeitstrahl/events/new?personId=${PERSON_ID}`);
-	});
-
-	it('renders no add-event link to a reader (REQ-004)', () => {
-		render(PersonCard, { person: makePerson(), canWrite: false });
-		expect(document.querySelector('[data-testid="person-add-event"]')).toBeNull();
-	});
-});

frontend/src/routes/zeitstrahl/+page.svelte

@@ -1,40 +1,14 @@
 <script lang="ts">
 import * as m from '$lib/paraglide/messages.js';
 import TimelineView from '$lib/timeline/TimelineView.svelte';
-import TimelineFilters from '$lib/timeline/TimelineFilters.svelte';
 import { timelineMeta } from '$lib/timeline/timelineMeta';
-import { filterTimeline } from '$lib/timeline/timelineFilter';
 import type { PageData } from './$types';
 
 let { data }: { data: PageData } = $props();
 
+const meta = $derived(timelineMeta(data.timeline));
 const hasContent = $derived(data.timeline.years.length > 0 || data.timeline.undated.length > 0);
 
-// Layer-filter state (#780). Layer hiding is client-side only — the whole
-// timeline is loaded once by #779's SSR load and we derive a filtered view of
-// it here; there is no goto, no URL param, and no extra fetch.
-let personalOn = $state(true);
-let historicalOn = $state(true);
-let lettersOn = $state(true);
-
-const filteredTimeline = $derived(
-	filterTimeline(data.timeline, { personalOn, historicalOn, lettersOn })
-);
-const filteredEmpty = $derived(
-	filteredTimeline.years.length === 0 && filteredTimeline.undated.length === 0
-);
-
-// Meta-line figures track the *filtered* view, so the header counts always
-// match what is actually on screen once layers are toggled off (#780 — this
-// closes the prior D1 limitation, where the counts stayed on the full timeline).
-const meta = $derived(timelineMeta(filteredTimeline));
-
-function resetFilters() {
-	personalOn = true;
-	historicalOn = true;
-	lettersOn = true;
-}
-
 // Compose the sub-line from segments joined by " · " so the range drops out
 // cleanly when there are no year bands; the whole line is absent when the
 // timeline is empty (REQ-002). Counts come from the route alone, never from
@@ -60,7 +34,7 @@ const metaLine = $derived.by(() => {
 				: m.timeline_events_count({ count: meta.eventCount })
 		);
 	}
-	// REQ-011: the toggle-free chronological view carries no grouping segment.
+	segments.push(m.timeline_grouping_date());
 	return segments.join(' · ');
 });
 </script>
@@ -74,45 +48,10 @@ const metaLine = $derived.by(() => {
 	     border is intentionally omitted (the page is already bg-canvas), per the
 	     review of REQ-001 — the sheet reads through its padding, not a frame line. -->
 	<div data-testid="timeline-canvas" class="rounded-[10px] bg-canvas p-6">
-		<!-- Wrapping header so the CTA drops below the heading at narrow widths
-		     (≤360px) instead of overflowing — #842 REQ-001. -->
-		<header class="flex flex-wrap items-center justify-between gap-3">
-			<h1 class="font-serif text-2xl font-bold text-brand-navy">{m.timeline_heading()}</h1>
-			{#if data.canWrite}
-				<a
-					data-testid="timeline-add-event"
-					href="/zeitstrahl/events/new"
-					class="inline-flex h-11 items-center rounded bg-primary px-4 font-sans text-sm font-medium text-primary-fg hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
-				>
-					{m.timeline_add_event()}
-				</a>
-			{/if}
-		</header>
+		<h1 class="font-serif text-2xl font-bold text-brand-navy">{m.timeline_heading()}</h1>
 		{#if hasContent}
 			<p data-testid="timeline-meta" class="mt-1 mb-6 font-sans text-xs text-ink-3">{metaLine}</p>
-			<TimelineFilters
-				bind:personalOn={personalOn}
-				bind:historicalOn={historicalOn}
-				bind:lettersOn={lettersOn}
-			/>
-		{/if}
-		{#if hasContent && filteredEmpty}
-			<!-- Filtered-empty: a calm message + one-click reset below the still-open
-			     filter bar — never a blank page, and never the generic "no events"
-			     state (which would imply the archive itself is empty). REQ-006. -->
-			<div data-testid="timeline-filter-empty" class="py-12 text-center">
-				<p class="font-serif text-base text-ink-2">{m.timeline_filter_empty_state()}</p>
-				<button
-					type="button"
-					data-testid="timeline-filter-empty-reset"
-					onclick={resetFilters}
-					class="mt-3 inline-flex min-h-[44px] items-center font-sans text-sm text-primary underline-offset-2 hover:underline"
-				>
-					{m.timeline_filter_reset()}
-				</button>
-			</div>
-		{:else}
-			<TimelineView timeline={filteredTimeline} canWrite={data.canWrite} />
 		{/if}
+		<TimelineView timeline={data.timeline} />
 	</div>
 </div>

frontend/src/routes/zeitstrahl/page.svelte.spec.ts

@@ -1,6 +1,5 @@
 import { describe, it, expect, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
 import * as m from '$lib/paraglide/messages.js';
 import Page from './+page.svelte';
 import { makeEntry, makeYear, makeTimelineDTO } from '$lib/timeline/test-factories';
@@ -43,7 +42,7 @@ describe('/zeitstrahl page', () => {
 		expect(canvas?.querySelector('ol')).not.toBeNull();
 	});
 
-	it('renders the meta sub-line with range and counts, no grouping segment (REQ-011)', () => {
+	it('renders the meta sub-line with range, counts, and grouping (REQ-002)', () => {
 		const dto = makeTimelineDTO({
 			years: [
 				makeYear(1909, [
@@ -59,8 +58,7 @@ describe('/zeitstrahl page', () => {
 		expect(sub?.textContent).toContain('1909–1924');
 		expect(sub?.textContent).toContain(m.timeline_letters_count({ count: 3 }));
 		expect(sub?.textContent).toContain(m.timeline_events_count({ count: 2 }));
-		// REQ-011: the toggle-free view drops the grouping meta segment.
-		expect(sub?.textContent).not.toContain('Gruppierung');
+		expect(sub?.textContent).toContain(m.timeline_grouping_date());
 	});
 
 	it('omits the range segment when there are no year bands (REQ-002)', () => {
@@ -85,7 +83,7 @@ describe('/zeitstrahl page', () => {
 		const sub = document.querySelector('[data-testid="timeline-meta"]');
 		expect(sub).not.toBeNull();
 		expect(sub?.textContent).not.toContain(m.timeline_letters_count({ count: 0 }));
-		expect(sub?.textContent).not.toContain('Gruppierung');
+		expect(sub?.textContent).toContain(m.timeline_grouping_date());
 	});
 
 	it('drops the events segment instead of showing "0 Ereignisse" (REQ-002)', () => {
@@ -113,156 +111,3 @@ describe('/zeitstrahl page', () => {
 		expect(sub?.textContent).not.toContain(m.timeline_events_count({ count: 1 }));
 	});
 });
-
-describe('/zeitstrahl layer filter (#780)', () => {
-	const letter = (title: string, documentId: string) => makeEntry({ documentId, title });
-	const historical = (title: string) =>
-		makeEntry({
-			kind: 'EVENT',
-			type: 'HISTORICAL',
-			derived: false,
-			eventId: 'h1',
-			documentId: undefined,
-			title,
-			senderName: '',
-			receiverName: ''
-		});
-	const personal = (title: string) =>
-		makeEntry({
-			kind: 'EVENT',
-			type: 'PERSONAL',
-			derived: false,
-			eventId: 'p1',
-			documentId: undefined,
-			title,
-			senderName: '',
-			receiverName: ''
-		});
-
-	const mixed = () =>
-		makeTimelineDTO({
-			years: [
-				makeYear(1915, [
-					letter('Brief Eins', 'd1'),
-					historical('Erster Weltkrieg'),
-					personal('Umzug nach Berlin')
-				])
-			]
-		});
-
-	async function openBar() {
-		await page.getByTestId('timeline-filter-trigger').click();
-	}
-
-	it('hides letter cards when the Letters layer is off and restores them, with no fetch (REQ-005/002)', async () => {
-		render(Page, { data: pageData(mixed()) });
-		await expect.element(page.getByText('Brief Eins')).toBeVisible();
-		await openBar();
-		await page.getByTestId('timeline-filter-letters').click();
-		await expect.poll(() => page.getByText('Brief Eins').query()).toBeNull();
-		await expect.element(page.getByText('Umzug nach Berlin')).toBeVisible();
-		await page.getByTestId('timeline-filter-letters').click();
-		await expect.element(page.getByText('Brief Eins')).toBeVisible();
-	});
-
-	it('hides historical event cards when the Historical layer is off (REQ-004)', async () => {
-		render(Page, { data: pageData(mixed()) });
-		await openBar();
-		await page.getByTestId('timeline-filter-historical').click();
-		await expect.poll(() => page.getByText('Erster Weltkrieg').query()).toBeNull();
-		await expect.element(page.getByText('Brief Eins')).toBeVisible();
-		await expect.element(page.getByText('Umzug nach Berlin')).toBeVisible();
-	});
-
-	it('hides personal event cards when the Personal layer is off (REQ-003)', async () => {
-		render(Page, { data: pageData(mixed()) });
-		await openBar();
-		await page.getByTestId('timeline-filter-personal').click();
-		await expect.poll(() => page.getByText('Umzug nach Berlin').query()).toBeNull();
-		await expect.element(page.getByText('Brief Eins')).toBeVisible();
-		await expect.element(page.getByText('Erster Weltkrieg')).toBeVisible();
-	});
-
-	it('shows the filtered-empty message + reset below the open bar when all layers are off (REQ-006)', async () => {
-		render(Page, { data: pageData(mixed()) });
-		await openBar();
-		await page.getByTestId('timeline-filter-personal').click();
-		await page.getByTestId('timeline-filter-historical').click();
-		await page.getByTestId('timeline-filter-letters').click();
-		await expect.element(page.getByText(m.timeline_filter_empty_state())).toBeVisible();
-		await expect.element(page.getByTestId('timeline-filter-empty-reset')).toBeVisible();
-		// the generic TimelineView empty state is never what shows for a filtered-empty view
-		expect(page.getByText(m.timeline_empty_state()).query()).toBeNull();
-		// the one-click reset restores every layer
-		await page.getByTestId('timeline-filter-empty-reset').click();
-		await expect.element(page.getByText('Brief Eins')).toBeVisible();
-	});
-
-	it('recomputes the meta-line counts from the filtered view, so a hidden layer drops out of the totals (#780, resolves D1)', async () => {
-		render(Page, { data: pageData(mixed()) });
-		const meta = page.getByTestId('timeline-meta');
-		// all layers on → the one letter and the two events are counted
-		await expect.element(meta).toHaveTextContent(m.timeline_letters_count_singular());
-		await expect.element(meta).toHaveTextContent(m.timeline_events_count({ count: 2 }));
-
-		await openBar();
-		await page.getByTestId('timeline-filter-letters').click();
-
-		// the hidden letter leaves the count instead of lingering as "1 Brief";
-		// the event total is untouched
-		await expect.element(meta).not.toHaveTextContent(m.timeline_letters_count_singular());
-		await expect.element(meta).toHaveTextContent(m.timeline_events_count({ count: 2 }));
-	});
-});
-
-describe('/zeitstrahl curator affordances (#842)', () => {
-	const curated = (eventId: string) =>
-		makeEntry({
-			kind: 'EVENT',
-			type: 'PERSONAL',
-			derived: false,
-			eventId,
-			title: 'Auswanderung',
-			senderName: '',
-			receiverName: '',
-			documentId: undefined
-		});
-
-	const withWrite = (timeline: ReturnType<typeof makeTimelineDTO>) => ({
-		...pageData(timeline),
-		canWrite: true
-	});
-
-	it('renders the add-event CTA in a wrapping header when the viewer can write (REQ-001)', () => {
-		render(Page, { data: withWrite(makeTimelineDTO({ years: [makeYear(1909, [makeEntry()])] })) });
-		const add = document.querySelector(
-			'[data-testid="timeline-add-event"]'
-		) as HTMLAnchorElement | null;
-		expect(add).not.toBeNull();
-		expect(add?.getAttribute('href')).toBe('/zeitstrahl/events/new');
-		// The header wraps so the CTA drops below the heading at narrow widths (≤360px)
-		// rather than overflowing — REQ-001.
-		expect(add?.closest('header')?.classList.contains('flex-wrap')).toBe(true);
-	});
-
-	it('renders no add-event CTA when the viewer cannot write (REQ-002)', () => {
-		render(Page, {
-			data: pageData(makeTimelineDTO({ years: [makeYear(1909, [makeEntry()])] }))
-		});
-		expect(document.querySelector('[data-testid="timeline-add-event"]')).toBeNull();
-	});
-
-	it('threads canWrite to the timeline so a curator sees an event edit link (REQ-001/009)', () => {
-		render(Page, {
-			data: withWrite(makeTimelineDTO({ years: [makeYear(1924, [curated('p9')])] }))
-		});
-		expect(document.querySelector('a[href="/zeitstrahl/events/p9/edit"]')).not.toBeNull();
-	});
-
-	it('shows no event edit link to a reader (REQ-007)', () => {
-		render(Page, {
-			data: pageData(makeTimelineDTO({ years: [makeYear(1924, [curated('p9')])] }))
-		});
-		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
-	});
-});