E1 — Einstellungen

Maschinen-lesbare Spezifikation

Diese Sektion enthält verbindliche Implementierungsregeln für den Coding-Agenten.

/* spec:rules — E1 Einstellungen Kachel
 *
 * ROUTE: /settings (E1 hub)
 * DATA LOAD (page.server.ts):
 *   - GET /v1/ingredient-categories to count stapleCount
 *     stapleCount = sum of ingredients where isStaple === true
 *   - member count available from layout data (locals.haushalt)
 *     or fetch GET /v1/households/mine/members and count length
 *   - profile name from locals.benutzer.name
 *
 * LAYOUT: E1 HUB
 *   grid: 2 columns (2fr 1fr) top row + 2 columns (1fr 1fr) bottom row; gap 16px
 *   mobile: single column, full-width cards, gap 12px
 *
 * CARD: all cards are  tags (href to target route)
 *   border-radius: --radius-xl
 *   border: 1px solid --color-border
 *   bg: white
 *   padding: 24px desktop / 16px mobile
 *   hover: box-shadow --shadow-raised, border-color #C0BFB8
 *   transition: box-shadow 150ms ease, border-color 150ms ease
 *   cursor: pointer
 *   focus-visible: outline 2px solid --green-dark, offset 2px
 *
 * VORRÄTE CARD (primary)
 *   border-left: 3px solid --green-dark
 *   stat number: font-family --font-display, font-size 36px, color --green-dark
 *   stat label: "von {total} Zutaten als Vorrat markiert", 11px, --color-text-muted
 *   empty state (stapleCount === 0): hide stat, show "Noch keine Vorräte eingerichtet"
 *   cta: "Vorräte bearbeiten →" (empty: "Jetzt einrichten →")
 *   href: /household/staples?ctx=settings
 *
 * MITGLIEDER CARD
 *   meta: "{memberCount} Mitglieder"
 *   href: /members
 *
 * PROFIL CARD
 *   meta: locals.benutzer.name
 *   href: /profile (not yet implemented — render as disabled or placeholder)
 *
 * ROUTE: /household/staples?ctx=settings (D3)
 *   component: StaplesManager with context="settings" (already exists)
 *   breadcrumb: "← Einstellungen" linking back to /settings
 *   sidebar: "Einstellungen" stays active (no separate nav item for staples)
 *   no save button — StaplesManager auto-saves via debounced PATCH 300ms
 *   hint text below grid: "Änderungen werden automatisch gespeichert. Gilt ab der nächsten Einkaufsliste."
 *   grid: 3-col on md+ (context="settings" already sets this in StaplesManager)
 *
 * CHIP STYLES (for reference — rendered by StapleChip, do NOT reimplement)
 *   selected:   bg --green-dark, color white, border-color --green-dark
 *   unselected: bg transparent, color --color-text-muted, border 1px solid --color-border
 *   hover unselected: border-color --green-light, color --green-dark
 *
 * CATEGORY LABEL TYPOGRAPHY
 *   font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase
 *   color: --color-text-muted; margin-bottom: 10px
 */