DESIGN.md

---
name: Yuvomi
description: Familienplaner in Apples Handwerk und Yuvomis Handschrift - warme Buehne, eine violette Stimme, WCAG AA als Invariante
colors:
  accent-violet: "#6C3AED"
  accent-violet-hover: "#5B2FD4"
  accent-violet-dark: "#A78BFA"
  accent-light: "#F3EFFE"
  grouped-bg: "#F5F3ED"
  surface: "#FFFFFF"
  surface-dark: "#2B2825"
  surface-3: "#EDEAE3"
  fill-well: "#EDEAE3"
  surface-elevated: "#FBFAF7"
  surface-elevated-hover: "#EDEAE3"
  bg-dark: "#191816"
  # Dark-Gegenstuecke von Kante und Sekundaertext (tokens.css, Dark-Block):
  # stehen hier, weil die Offline-Seite (public/offline.html) sie als Literal
  # spiegelt - sie laedt kein tokens.css (R22, Detektor-Rest).
  border-dark: "#47423B"
  text-secondary-dark: "#B4AEA5"
  label: "#1D1B17"
  text-secondary: "#63615B"
  text-tertiary: "#6B675F"
  text-quaternary: "#8C8880"
  border: "#E4E0D7"
  border-subtle: "#EDEAE3"
  border-strong: "#CFC9BC"
  ink-on-vivid: "#FFFFFF"
  success: "#1E7B35"
  warning: "#A85D00"
  danger: "#D70015"
  info: "#0663C7"
  # Familientoene (Block 2, 2026-08-10): die Modul-Einzeltoene sind neun
  # Familien; jedes --module-* bezieht aus seiner Familie. Hier steht bewusst
  # keine Zahl - sie ist schon einmal gedriftet (CLAUDE.md, „Kanonische
  # Quellen"). Quelle der Wahrheit und Modul-Zuordnung:
  # public/styles/tokens.css, Abschnitt 4.
  # overview: dashboard - time: calendar, schedule, reminders - work: tasks,
  # housekeeping, waste, rewards - kitchen: meals, recipes, shopping, pantry -
  # money: budget, split-expenses - people: contacts, birthdays -
  # health: health - records: documents, notes, inventory - neutral: settings
  family-overview: "#6C3AED"
  family-time: "#00668F"
  family-work: "#157F3D"
  family-kitchen: "#C2410C"
  family-money: "#0F766E"
  family-people: "#CE2A63"
  family-health: "#9E1E88"
  family-records: "#42587E"
  family-neutral: "#677079"
  # Wetterlagen (2026-08-17): eine PARALLELE Domaenenfamilie, keine zehnte
  # Familie. Die Familientoene beantworten „welches Modul", die Wetterlage
  # beantwortet „was ist draussen" - deshalb teilt keine Lage den Wert einer
  # Familie, und keine erscheint ausserhalb einer Wetterflaeche. Bauart wie bei
  # den Mahlzeit-Typen. Dark-Werte und die fuenf Temperaturbaender der
  # Verlaufszeile: public/styles/tokens.css, Abschnitt 5b.
  weather-clear: "#B45309"
  weather-night: "#4C4FBF"
  weather-cloud: "#4F6478"
  weather-rain: "#0A5C9E"
  weather-snow: "#00768C"
  weather-storm: "#8B2FC9"
typography:
  display:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: "clamp(3rem, 9vw, 4.5rem)"
    fontWeight: 700
  large-title:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: "2.125rem"
    fontWeight: 700
    lineHeight: 1.21
    letterSpacing: "-0.015em"
  title-1:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: "1.75rem"
    fontWeight: 700
    lineHeight: 1.21
    letterSpacing: "-0.015em"
  title-2:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: "1.375rem"
    fontWeight: 700
    lineHeight: 1.21
    letterSpacing: "-0.015em"
  title-3:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: "1.25rem"
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: "0"
  headline:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: "1.0625rem"
    fontWeight: 600
    lineHeight: 1.3
  # Zeilentitel: der Name einer Listenzeile (.list-row__name, .u-row-title).
  # Eine Zeile ist Lesetext mit Betonung, eine Karte fuehrt ihren Titel als
  # headline; Zeilenhoehe des Body (R16, 2026-10-05, test:typography).
  row-title:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: "1rem"
    fontWeight: 500
    lineHeight: 1.47
  body:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: "1.0625rem"
    fontWeight: 400
    lineHeight: 1.47
  subheadline:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: 1.47
  footnote:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: "0.8125rem"
    fontWeight: 500
    lineHeight: 1.21
  # Metazeile: was unter dem Namen einer Zeile, Karte oder Kachel steht
  # (Datum, Ort, Anzahl, Betrag, Stand). Footnote in regular, Zeilenhoehe
  # erbt die Zeile (R21, 2026-10-21, D4, test:typography).
  meta-line:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: "0.8125rem"
    fontWeight: 400
  micro-label:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1.21
    letterSpacing: "0.05em"
  caption-2:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: "0.6875rem"
    fontWeight: 600
    lineHeight: 1.21
  mono:
    fontFamily: "ui-monospace, 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace"
    fontSize: "0.875rem"
    fontWeight: 400
rounded:
  2xs: "2px"
  xs: "4px"
  sm: "10px"
  md: "12px"
  lg: "16px"
  xl: "26px"
  full: "9999px"
  glass-card: "26px"
  glass-inner: "18px"
spacing:
  px: "1px"
  0h: "2px"
  1: "4px"
  1h: "6px"
  2: "8px"
  2h: "10px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  8: "32px"
  10: "40px"
  12: "48px"
  16: "64px"
components:
  button-primary:
    backgroundColor: "color-mix(in srgb, var(--color-accent) 88%, var(--neutral-950))"
    textColor: "{colors.ink-on-vivid}"
    rounded: "{rounded.full}"
    padding: "8px 16px"
    height: "48px (--target-lg); ab 1024px mit Zeiger (hover: hover) 40px (--target-md)"
  button-primary-hover:
    backgroundColor: "color-mix(in srgb, var(--color-accent) 76%, var(--neutral-950))"
  button-icon:
    rounded: "{rounded.full}"
    size: "44px"
  # Erhabene Surface-Pille, Modulton NUR in der Tinte (seit 2026-08-12; die
  # gefuellte Fassung ist zurueckgenommen, Rezept in tokens.css Abschnitt 6c).
  # rounded.full gilt fuer die Shell-Pille (.sub-tab); rounded.sm nur fuer das
  # konzentrisch eingesetzte .segmented__item im radius-md-Traeger.
  segment-active:
    backgroundColor: "var(--seg-active-bg)"
    textColor: "color-mix(in srgb, var(--module-accent, var(--color-accent)) var(--tint-ink), var(--color-text-primary))"
    rounded: "{rounded.full}"
  # Die ANDERE Haelfte von „eine Behandlung pro Kontrolltyp" (siehe „Chips"): der
  # aktive Filter-Chip ist eine getoente FLAECHE, ausdruecklich NICHT die
  # gefuellte Segment-Pille darueber. Drei Stufen derselben Farbe, alle drei aus
  # der Toenungsskala: --tint-state als Grund, --tint-hint als Kante (hier nicht
  # als Feld fuehrbar, das Vokabular kennt kein borderColor - sie steht an
  # .filter-chip--active), --tint-ink als Tinte. Inaktiv traegt das Label Sekundaertext, die Farbe
  # erscheint erst mit der Aktivierung (Beschluss 2026-08-17, umgesetzt
  # 2026-08-27; die dauerhaft getoente Schrift las sich als „Filter ist an").
  # Die Zahl hinter einer Stufe steht in tokens.css Abschnitt 6b, nirgends
  # sonst - der Chip nennt seit c788ce01 (2026-08-08) nur noch die Stufe.
  chip:
    backgroundColor: "color-mix(in srgb, var(--module-accent, var(--color-accent)) var(--tint-state), transparent)"
    textColor: "color-mix(in srgb, var(--module-accent, var(--color-accent)) var(--tint-ink), var(--color-text-primary))"
    rounded: "{rounded.full}"
    padding: "4px 12px (--space-1 / --space-3), Kante 1.5px"
    height: "48px (--target-lg); --sm-Variante 40px, auf (hover: none) 44px"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: "16px"
  widget-header:
    backgroundColor: "{colors.surface} (bandlos seit 2026-08-17; Absender ist das Vollton-Siegel)"
    padding: "12px 16px 8px (die .widget__header-Basisregel; keine Dashboard-Sonderregel mehr)"
    height: "52px (Titelzeile 32px + 12/8px Polster; keine Kante, keine min-height)"
  day-sheet:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    padding: "12px 16px"
  row-carrier:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: "0px"
  inset-well:
    backgroundColor: "{colors.fill-well}"
    rounded: "{rounded.md}"
    padding: "12px"
  # Der Daumen des eigenen Scrollbalkens (#970/#1039). Die 10px sind die SPUR;
  # schmaler wirkt der Daumen ueber die transparente Border, nicht ueber eine
  # kleinere Breite - die Treffflaeche bleibt. Die Seitenleiste mischt statt
  # --module-accent gegen --color-border (sie gehoert keinem Modul).
  scroller-thumb:
    backgroundColor: "color-mix(in srgb, var(--module-accent) var(--tint-hint), transparent)"
    rounded: "{rounded.full}"
    size: "10px Spur, Daumen per 3px transparenter Border + background-clip: padding-box"
  # Der Rahmen eines Vorschaubilds (#1059). Die Groesse folgt der Flaeche: 40px in
  # der Rezeptliste (--target-md), 32px im Planer (--target-sm), 20px in der
  # Kachel (--icon-lg, dort --radius-xs). Der Bild-Editor im Formular ist ein
  # KNOPF und deshalb rund (84px, siehe „Das Vorschaubild"). Die Farbe gilt nur
  # dem Platzhalter; das Bild fuellt den Rahmen per object-fit: cover.
  media-thumb:
    backgroundColor: "var(--color-surface-2)"
    rounded: "{rounded.sm}"
    size: "40px Rezeptliste / 32px Planer / 20px Kachel"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.label}"
    rounded: "{rounded.sm}"
    padding: "8px 12px"
    height: "48px"
  fab-glass:
    backgroundColor: "color-mix(in srgb, var(--color-accent) 78%, transparent)"
    textColor: "{colors.ink-on-vivid}"
    rounded: "{rounded.full}"
    size: "44px (mobil, in der Nav-Kapsel) / 48px (Desktop)"
  # Die Bildmarke selbst (utils/brand-mark.js, seit R18): ein SVG mit eigenem
  # Verlauf und drei weissen Kreisen (82 % Deckung), in beiden Themes dieselbe.
  # Der Traeger (.auth-hero__mark) gibt nur Groesse, Rundung und --shadow-md.
  # Bis R18 stand hier ein in Akzent gefuelltes Tile mit Zeichen in
  # ink-on-vivid und rounded.lg.
  brand-tile:
    backgroundColor: "linear-gradient(135deg, #8B5CF6, #6C3AED) (--brand-mark-from / --brand-mark-to)"
    textColor: "#FFFFFF (--brand-mark-ink)"
    rounded: "22.5% (rx 36 von 160)"
    size: "64px, kompakt 48px"
---

# Design System: Yuvomi

<!-- Neu aufgezeichnet 2026-08-06 aus dem GEBAUTEN Stand des HIG-Redesigns nach
     Fundament + Rest-Rollout Runde 1-3 und zwei Finish-Review-Durchlaeufen
     (feat/hig-redesign). Quelle der Wahrheit fuer JEDEN Wert: public/styles/tokens.css;
     die Kopf-Abgrenzung steht in public/styles/typography.css, die Buttonform in
     der .btn-Basisregel in public/styles/layout.css.

     Nachgefuehrt 2026-08-12 gegen den Stand v2.6.0 (Dashboard-Bogen v2.4.0-v2.6.0:
     Tagesprogramm, Wand-Modus, Absenderband). Der Abgleich lief ueber jeden
     Frontmatter-Wert und hat dabei drei Angaben korrigiert, die kein Token mehr
     deckte: den erfundenen 32px-Radius, den Modulton am Primaerknopf und den
     Modulton am Fokusring - die beiden letzten waren Reste aus der Zeit vor der
     Eine-Stimme-Regel und standen hier laenger als im Code.

     Nachgefuehrt 2026-08-15 gegen tokens.css und die Komponenten (109 Commits
     auf public seit dem letzten Edit). Der FLIESSTEXT war durchweg gedeckt, das
     FRONTMATTER an drei Stellen nicht: `segment-active` beschrieb noch die
     gefuellte Pille, obwohl der Body die Ruecknahme vom 12.08. schon fuehrt;
     `widget-header` trug Polster und Hoehe aus der Zeit vor der v2.6.0-Kur
     (12/44 statt 8/49); die Familienzuordnung kannte `inventory` nicht (PR #741,
     records-Familie). Die Modulzahl steht hier seither gar nicht mehr - sie war
     schon vor dem Merge nicht die Laenge ihrer eigenen Liste. Derselbe Lauf hat
     drei ueberlebte Kommentare im Code korrigiert (.btn--primary in layout.css,
     .sub-tab--active in sub-tabs.css, --color-text-secondary in tokens.css); in
     allen dreien war DESIGN.md aktueller als die Quelle.

     Der Sidecar-Nachzug am selben Tag hat eine Luecke aufgedeckt, die vorher
     niemandem auffiel, weil `.impeccable/design.json` sie zugedeckt hatte: der
     Sidecar fuehrte zur Eine-Stimme-Regel ein Do und ein Don't, die HIER nie
     standen (`git log -S` findet sie in keiner Fassung) - die zentrale Regel der
     App hatte in dieser Liste keinen einzigen Eintrag. Beide stehen jetzt in
     Do's and Don'ts, und der Sidecar leitet sie von dort ab statt sie zu
     erfinden. Im selben Zug sind die beiden verbliebenen „17" gefallen: der
     Modulzahl fehlte Inventar, und die Key Characteristics sagten „17
     AA-verifizierte Modul-Tints", waehrend die Overview zwoelf Zeilen darueber
     neun Familientoene fuehrt.

     Nachgefuehrt 2026-08-17 mit der Dark-Kur (Etappe 1 der Modernisierung,
     Critique vom selben Tag): die Dark-FLAECHEN sind gestiegen, die Buehne
     nicht (Surface #262422 -> #2B2825, Well/Elevated #322F2B -> #37332E,
     Hover #403C37 -> #443E37; Anlass: Buehne->Karte lag bei 1.15:1 und die
     Schwarz-Schatten sind auf der Kohle wirkungslos - das Board las als Wand
     gleich dunkler Rechtecke). Die opaken Dark-Schatten tragen jetzt den
     1px-Weiss-Ring der Glas-Schatten in leiser Dosierung, das Dark-Glas ist
     von iOS-Neutralgrau auf die warme Fassung der eigenen Surface gewechselt,
     und die Tertiaerrolle steht in BEIDEN Themes erstmals warm (#6B675F /
     #A9A39A statt Hue-291-Resten der abgeloesten Apple-Rampe). Messlauf:
     .impeccable/redesign-tools/dark-ramp-final.mjs; alle Werte gegen
     test:frontend-audit (296), test:document-guards (31) und test:typography
     (15) verifiziert.

     Etappe 2 am selben Tag: das Absenderband ist zurueckgebaut (Band,
     getoente Trennlinie UND 2px-Oberkante), der Absender jeder Dashboard-
     Karte ist das Vollton-Siegel, auch in der Kachelreihe. Etappe 3 hat den
     Vollton anschliessend zum EINEN Siegelgesicht gemacht und die Klasse
     `--vivid` damit gestrichen. Anlass und Messlatte stehen an der Signature Component
     „Der Widget-Kopf"; der ignore.md-Eintrag border-accent-on-rounded ist
     mit der 2px-Linie gegangen.

     Etappe 3 und 4 am selben Tag, beide aus derselben Chroma-Lehre: die
     Wochen- und Ganztages-Bloecke des Kalenders tragen ihre Layer-Farbe
     jetzt als 3px-VOLLTON-Kante statt als zweite Waschung (dazu die
     Initialen-Schwelle 20px/11px und 4px Polster an den Kalender-Chips),
     und die Familien-Geburtstage sprechen die Identitaetsfarbe ihres
     Mitglieds statt der Modul-Toenung (unverknuepfte Kontakte behalten
     sie). Die drei neuen Regeln stehen bei Colors, Typography und an der
     Signature Component „Event-Bloecke im Kalender"; verifiziert gegen
     test:frontend-audit (296), test:calendar (65), test:dashboard (71),
     test:document-guards (31).

     Nachgefuehrt 2026-08-18, geprueft gegen v2.21.0. Waehrend des Laufs kam
     v2.21.1 dazu (Mitternachts-Termin, Modal-Overflow, UTC-Tagesschluessel);
     ihre drei public/-Aenderungen beruehren keinen hier dokumentierten Wert -
     `.modal-panel` wechselt von `overflow: hidden` auf `clip` und ist keine der
     drei Stellen, an denen dieses Dokument `overflow: hidden` fuehrt. Seit dem
     letzten Schreibzugriff hat sonst KEIN Commit public/ angefasst, der
     Abgleich lief deshalb nicht gegen neue Arbeit, sondern gegen die eigene: Frontmatter (Farben, Radien, Spacing,
     Typo-Rollen), Schattenvokabular, Motion, Icon- und Zielgroessen sind
     mechanisch gegen tokens.css geprueft und decken sich; von den 115 hier
     genannten Tokens existiert jedes, von 46 Selektoren und 18 Dateinamen
     ebenfalls. Was NICHT stimmte, war dreimal dieselbe Stelle: die Etappe-3-
     Streichung von `module-seal--vivid` und `--seal-base` war an ihrer eigenen
     Signature Component ausgeschrieben, aber im Widget-Kopf-Abschnitt, im
     Nachsatz darunter und in der Do-Liste stand die Klasse weiter als gebauter
     Stand - dieselbe Datei verbot zwei Absaetze weiter oben ihre Rueckkehr per
     Guard. Zwei Wahrheiten in einer Datei, und die Etappe war nur Stunden alt.
     Der Sidecar trug denselben Rueckstand schaerfer: sein `.module-seal`-
     Snippet baute noch die 16-%-Toenung samt `--vivid`-Variante, also genau
     das, was der Guard verbietet, und `narrative.rules` fuehrte die
     zurueckgenommene Traeger-Regel als geltende.

     Drei weitere Sidecar-Befunde desselben Laufs, und alle drei sind hier nur
     deshalb notiert, weil `.impeccable/design.json` gitignored ist und keine
     CI ihn je anfasst: die tonalen Rampen von `family-overview` und
     `family-time` lagen auf Hue/Chroma eines Tons, den ihr Token nicht mehr
     traegt (family-time zeigte eine VIOLETTE Rampe unter einer azurblauen
     Scheibe - der Rueckstand des Umzugs, den ihre eigene Notiz beschreibt);
     die sechs Wetterlagen standen seit ihrer Aufnahme ins Frontmatter ohne
     jedes colorMeta da, waehrend alle neun Familientoene Name, Dark-Wert und
     Rampe fuehren; und ein Don't war auf seinen ersten Satz gekuerzt. Die
     Rampen sind aus dem jeweiligen canonical neu gerechnet, alle 29 Eintraege
     stimmen jetzt gegen ihren Ausgangswert.

     Nachgefuehrt 2026-09-30 gegen v2.71.0 (32 Commits auf public seit #1502). Frontmatter
     (Farben, Familien, Wetterlagen, Radien) deckt sich mit tokens.css, alle 143 genannten
     Tokens und 131 Selektoren existieren oder stehen ausdruecklich als entfallen. Ein
     Widerspruch aus den neuen Commits: der Wand-Ausstieg stand hier noch als Nur-Zeichen im
     Ruhezustand, genau die Falle, die #1559 zurueckgenommen hat. Zwei aeltere: die Dark-Kanten
     trugen die Werte von vor der Dark-Kur (#454039 / #37332E), und der Absatz dazu fuehrte
     „Bedienelement-Kanten verfehlen 3:1" als Betreiber-Entscheidung, waehrend Inputs darunter
     laengst --color-border-control mit 3:1 beschreiben; der Dark-Akzent nannte 4.96:1 statt
     4.61:1. Neu aufgenommen: Schalterbahn (#1572), klebender Wand-Fuss und Meldungen oben
     (#1559), -ink-Fristfarbe auf ausgewaehlter Zeile, Wetter-Ausfallzustand (#1584). -->

## Page Composition

Visual language (colour, typography, components, AA) lives in this document and
`tokens.css`. **Spatial composition** - page width, header/body alignment,
composition modes, and extension layout rules - lives in
[`docs/PAGE-COMPOSITION.md`](docs/PAGE-COMPOSITION.md) with primitives in `layout.css` and
`public/utils/page-layout.js`.

## Direction Contract

Stand bis 2026-08-08 als HTML-Kommentar am Body-Anfang von `public/index.html`
und wurde damit an jeden Browser ausgeliefert. Er gehoert hierher, wo die
uebrigen Designentscheidungen stehen.

**THESIS:** Apples HANDWERK, Yuvomis HANDSCHRIFT. Die Struktur ist
Plattform-Kanon (Gruppenlisten, Kapsel-Controls, Typo-Skala, Motion,
AA-Disziplin); die Haut gehoert Yuvomi. Verweigert wird der Kategorie-Standard
(freundlicher Pastell-Organizer) - und seit 2026-08-10 ausdruecklich auch die
woertliche Uebernahme von Apples PALETTE und seinem Pro-App-Tint-Modell.

**KORREKTUR VOM 2026-08-10, und der Anlass steht in einem Satz des Betreibers:**
"Im Vergleich zum alten Yuvomi fuehlt sich die App nicht mehr wie aus einem Guss
an." Hier stand vorher "Plattform-Kanon in voller Treue" mit kuehlen
System-Neutralen (#F2F2F7 / Near-Black #0A0A0C) und Apple Indigo als globalem
Tint. Drei Uebernahmen waren zu woertlich, und alle drei sind zurueckgenommen:
die KUEHLE BUEHNE (Apples Grau war Apples Buehne, nicht Yuvomis - jetzt warmes
Papier #F5F3ED / warme Kohle #191816), der INDIGO-TINT (die Bildmarke ist
violett und gesetzt; Logo und App sprachen zwei Farben - jetzt #6C3AED) und das
PRO-APP-TINT-MODELL (Apple faerbt pro App, Yuvomi hat siebzehn Zimmer in EINEM
Haus - siehe die Eine-Stimme-Regel). Was BLEIBT, ist alles, was die Runden 1-9
an Struktur und Messbarkeit gebaut haben. Der Kanon war nicht der Fehler, seine
woertliche Anwendung auf die Haut war es.

**OWN-WORLD:** Liquid-Glass-Designphilosophie (Lesbarkeit vor Transparenz:
diffuses, sattes Glas, Inhalte opak). SF-Pro-System-Stack, Apple-Typo-Skala
(Body 17, Large Title 34, Footnote 13). WARME Neutrale (#F5F3ED grouped /
#191816 dunkel mit #2B2825-Flaechen). Eine Stimme: das Violett der Bildmarke
#6C3AED. Neun Familientoene als Orientierungsvokabular, im INHALT. Glas nur als
Chrome (Tab-Bar, Sidebar, Sheets), Inhalte opak. Kapsel-Controls,
Inset-Grouped-Listen, Feder-Motion.

**STORY:** Ein Familienmitglied oeffnet die App und sie fuehlt sich an wie ein
Ort, der ihm gehoert: Orientierung in zwei Sekunden, heute zuerst, jedes Modul
ein vertrauter Raum mit eigenem Zeichen - unter einem Dach, das nie die Farbe
wechselt.

**FIRST VIEWPORT:** Dashboard - Large-Title-Gruss, Heute-Programm als
Inset-Grouped-Listen, Glas-Tab-Bar mit eingesetztem FAB (mobil) /
Glas-Sidebar mit farbiger Modul-Legende (Desktop).

**FORM:** User-pinned Kanon (Apple HIG, Liquid-Glass-Designphilosophie;
Messlatte Apple-Systemapps + Fantastical) als STRUKTUR, nicht als Palette.

## Overview

**Creative North Star: "Apples Handwerk, Yuvomis Handschrift"**

Yuvomi ist so gebaut, wie eine mitgelieferte App gebaut waere - und sieht aus wie Yuvomi.
Der Kanon ist die Apple Human Interface Guidelines in der Liquid-Glass-Designphilosophie;
die Messlatte sind Apple-Systemapps und Fantastical. Er gilt fuer die STRUKTUR: Gruppen-
listen, Kapsel-Controls, Typo-Skala, Feder-Motion, die Messdisziplin. Er gilt NICHT fuer
die Haut - warme Buehne, das Violett der Bildmarke als einzige Stimme, neun Familientoene
im Inhalt. Verweigert wird der Kategorie-Standard (freundlicher Pastell-Organizer) ebenso
wie eine App, die aussieht wie irgendeine Systemapp. Diese Linie heisst Lesbarkeit vor
Transparenz: Glas ist diffus und satt statt roh-transparent, und es bleibt striktes
Chrome-Material (Tab-Bar, Sidebar, Sheets, FAB); alle Inhalte sind opak.

**Keine Versionsnummer in der Referenzzeile, und das ist eine gepruefte Angabe.** „iOS 27"
stand bis Runde 6 an neun Stellen im Quelltext und war nicht belegbar: die Suche auf
developer.apple.com findet die Liquid-Glass-Linie als **iOS 26 / macOS 26, eingefuehrt auf
der WWDC25** - das ist die Herkunft, und sie steht genau hier, einmal. Eine
Philosophie-Bezeichnung haelt auch, wenn Apple die naechste Fassung veroeffentlicht. Alles
Gebaute stimmt mit der belegten Linie ueberein; die kollabierende Large-Title-Leiste wird
von ihr sogar ausdruecklich bestaetigt. **Das war eine Korrektur der Referenzzeile, keine
Design-Revision.**

Jedes Modul ist ein vertrauter Raum mit eigenem Tint (Apple-Systemapp-Muster:
jede App ihre Farbe - hier aber im INHALT, siehe die Eine-Stimme-Regel), zusammengehalten
von warmen Neutralen, dem System-Font-Stack
und der Apple-Typo-Skala. WCAG AA ist Invariante, nicht Ambition: Apple-Rohwerte, die AA
verfehlen, werden auf ihre Accessible-Variante vertieft (Apples eigenes
Increased-Contrast-Muster); alle Modul-Tints sind gegen ihre realen Hintergruende
verifiziert. Light und Dark Mode sind gleichrangig; die Dark-Architektur laeuft ueber
private Tokens (`--_name`), die oeffentliche Token-API bleibt stabil.

Rollout-Stand: die ganze App steht in der neuen Welt. Runde 1 zog die geteilten Grundlagen
(Glas nur noch Chrome, EINE Segment-Sprache, keine Akzentstreifen, randlose Karten),
Runde 2 das Kasten-in-Kasten-Vokabular samt Traeger-Regel, Runde 3 die Befunde des
Finish-Reviews: die Zeilenlisten-Regel, EINE Buttonform, EIN Toenungsrezept, das
Wetter-Widget als randlose Karte ohne Verlauf, Notizfarben nach der User-Farben-Regel und
die Anmeldeseite als Teil der Welt. **Das Wetter-Widget hat 2026-08-17 Farbe
zurueckbekommen, aber nicht seinen Verlauf** - die randlose Karte bleibt, der Ton kommt
jetzt aus der Wetterlage statt aus dem globalen Akzent (siehe die Signature Component
„Das Wetter-Widget").

**Der Dashboard-Bogen (v2.4.0 bis v2.6.0) hat die Uebersicht von einem Raster zu einer
Buehne gemacht** - und dabei drei Formen hinzugefuegt, die es vorher nicht gab: das
TAGESPROGRAMM als das eine Blatt, das die Seite anfuehrt (Radius und Elevation setzen den
Rang, nicht Material), das ABSENDERBAND, das die Modulzugehoerigkeit einer Karte aus einer
2px-Haarlinie in eine getoente Kopfflaeche hebt (2026-08-17 vom VOLLTON-SIEGEL abgeloest -
die Waschung konnte im Dark keine Farbe tragen, siehe die Signature Component
„Der Widget-Kopf"), und den WAND-MODUS als den wachen Zustand
derselben Route - dieselbe Flaeche in anderer Gangart, gelesen aus zwei Metern. Erst mit
ihm bekommen die Display-Stufen 48/72px die Rolle, fuer die sie reserviert waren.

**Runde 6 (2026-08-07) hat die Regeln vollstaendig gemacht, statt neue Flaechen zu
gestalten** - und dabei den Satz gelernt, der ueber ihnen steht: **ein Guard ueber eine
Namensliste deckt keine Regel ab, sondern N Dateien.** Deshalb nennt jede Regel hier ab
sofort die EBENE, auf der sie pruefbar ist: Wert (existiert, statisch), Struktur (aus
deklarativen Quellen wie `ROUTES` abgeleitet, nie aus Dateilisten), Signatur (findet
Kandidaten ueber ihre Bauart im Quelltext, nicht ueber ihren Namen) und Dokument
(`npm run test:document-guards`, im gerenderten Zustand). Gebaut wurden: das Kopf-Fundament
und die Leisten-Regel als Kriterium, die vollendete Buttonform samt Label-Verlust- und
Zielgroessen-Regel, die bezahlten Namensschulden (`.list-row`, `.metric-card`, `.auth-*`),
die Zeilenlisten-Regel in Aufgaben und Agenda - und die Wischsemantik, deren Anlass kein
Konsistenzwunsch war, sondern die eine Stelle der App, an der eine Geste sofort und
endgueltig loeschte.

**Key Characteristics:**
- Plattform-Kanon statt Eigenwelt: Apple HIG, Liquid Glass, System-Font-Stack
- Glas nur als Chrome; Inhalte immer opak (Lesbarkeit vor Transparenz)
- Eine Stimme (Bildmarken-Violett) im Chrome, neun AA-verifizierte Familientoene im Inhalt,
  beides auf warmen Neutralen
- Apple-Typo-Skala (Large Title 34 / Body 17 / Footnote 13), Kapsel-Controls, Inset-Grouped-Listen
- Eine Kernform fuer Zeilenfolgen: genau ein Traeger, Zeilen als Haarlinien
- Der FAB sitzt in der Nav-Kapsel und kostet keine Contentflaeche
- Das Dashboard hat zwei Gangarten: Blatt und Raster am Geraet, Wand-Modus auf zwei Metern
- Feder-Motion (Overshoot-Easing) fuer Glas-Elemente, dezente Dauern fuer alles andere
- WCAG AA als Invariante in Light UND Dark, inkl. prefers-reduced-transparency- und prefers-contrast-Fallbacks

## Colors

Warme Neutrale als Buehne, das Violett der Bildmarke als Stimme, 17 Modul-Tints als
Orientierungsvokabular; alle Textfarben AA-vertieft. Es gibt keinen chromatischen
Verlauf auf Inhalt. Die Farbdramatik der App ist auf EINE Gattung beschraenkt: weiche,
kreisrunde Lichtfelder HINTER dem Inhalt, die nie eine Flaeche fuellen und nie unter Text
liegen, wo sie ihn traegt. Zwei Stellen gehoeren ihr an, und beide teilen dieselben
Ausschalter (in reduced-transparency und prefers-contrast auf 0):

- der **Lichthauch der Wetterglyphe** (`--weather-glow-opacity`, 2026-08-17), der aus dem
  Zeichen zu kommen scheint und lange vor dem Text auslaeuft - das einzige Lichtfeld IN der
  App;
- das **Marken-Lichtfeld** (`--brand-field`, Staerke `--brand-field-opacity` 0.20 light /
  0.26 dark; R18, 2026-10-07): drei stehende Kreise in den beiden Farben der Bildmarke,
  hinter der Glastafel der Zugangsseiten und im Ladebild - den zwei Orten, an denen nichts
  Opakes darueber liegt. Ohne Filter, ohne Animation. Kein Text steht direkt darauf
  (Sekundaertext fiele im Kern auf 2,96:1): auf den Zugangsseiten steht alles auf der
  Tafel, der Schriftzug des Ladebilds in Label-Farbe. Das Ladebild ist seit R20 eine stehende
  Skizze der Shell (Kopf mit Siegel, Kapsel bzw. Seitenleiste), ohne Puls; `role="progressbar"`
  mit dem Markennamen, die Ansage kommt vom Screenreader. Seit R21 S9b skizziert es die
  Uebersicht, wo sie gleich steht: Balken fuer Gruss, Wetter und "Heute wichtig", EINE hohe
  Programmkarte, am Desktop ohne Kopf (die Schiene traegt die Marke) und mit der Kachelreihe
  darunter. Oberkante der Programmkarte gegen den ersten Schirm: 390px 84 -> 223 (Programm 226),
  1280px 80 -> 158 (166), Kachelreihe 482 (486); `test:material`.

**Die App selbst hat keinen Backdrop mehr.** Bis R18 liefen hinter dem Inhalt vier
driftende, weichgezeichnete Farbfelder (`.lg-blob`) und ein Akzentverlauf auf der Shell -
beide vollstaendig verdeckt von der opaken Inhaltsflaeche, also Dauerlast fuer ein Bild,
das niemand sah (gemessen in drei Laeufen). Sie sind gestrichen. **Glas bricht in der App
nur Inhalt:** was unter der Tab-Kapsel, unter einem Blatt oder unter der ausgeklappten
Seitenleiste liegt. Guard: `test:material`.

**Die Unterscheidung ist keine Wortklauberei, sie ist die Lehre aus dem Verlauf, den
Runde 3 entfernt hat.** Der war die Karte: eine deckende Flaeche von Kante zu Kante, im
GLOBALEN Akzent statt in der Domaene, unter der jeder Text stand - und im Dark ein heller
Block im dunklen Dashboard. Ein Lichtfeld hinter einer Glyphe teilt davon keine einzige
Eigenschaft. Was auch nach der Rueckkehr der Farbe gilt: keine getoente Vollflaeche auf
Inhalt, kein Verlauf ueber eine Karte, kein Text auf einer Flaeche, die nicht gemessen ist
(der Sekundaertext ueber dem staerksten Punkt des Lichthauchs haelt 4.82-4.97:1).

### Primary
- **Das Violett der Bildmarke** (`accent-violet` #6C3AED): die Stimme der App. 6.10:1 auf
  Weiss, 5.49:1 auf dem Grouped-Grund; Dark-Variante `#A78BFA` (4.61:1 auf der hellsten
  Flaeche, auf der sie als Text steht, `#37332E`; 5.39:1 auf Surface, 6.52:1 auf der Buehne). Der getoente Zwilling `accent-light` traegt
  Fokus-Glows und Heute-Chips. Das Dashboard teilt den Wert bewusst als Modul-Tint - es
  ist der Raum der Marke.

  **Hier stand bis 2026-08-10 Apple Indigo** (#5856D6, AA-vertieft auf #4F4DC9), mit der
  Begruendung "Brand-Naehe zur violetten Bildmarke, ohne das alte Violett zu wiederholen".
  Die Farbe war richtig gemessen und trotzdem falsch gewaehlt: die Bildmarke ist violett
  und laut PRODUCT.md als Marke gesetzt, die App war es nicht mehr - Logo und Oberflaeche
  sprachen zwei Farben. Und weil zusaetzlich jedes Modul das Chrome umfaerbte (siehe die
  Eine-Stimme-Regel), kam das Indigo ohnehin nur auf dem Dashboard vor: es gab keine Farbe,
  die app-weit "Yuvomi" hiess.

### Secondary
- **Neun Familientoene, aus denen die Modul-Tints beziehen** (Frontmatter `family-*`,
  Quelle `tokens.css` Abschnitt 4). Die siebzehn Einzeltoene waren siebzehn Entscheidungen und
  enthielten Kollisionspaare, die niemand auseinanderhalten konnte - zwei Violetts, zwei
  Teals. Jetzt gibt es neun klar trennbare Familien (`overview`, `time`, `work`, `kitchen`,
  `money`, `people`, `health`, `records`, `neutral`), jedes `--module-*` bezieht aus seiner,
  und **innerhalb einer Familie unterscheidet das Siegel-Icon, nicht der Ton** (an einer
  Mischstelle darf es das Zeichen des Objekts sein, siehe Herkunfts-Regel). Damit
  verschwinden die Kollisionen strukturell statt durch Nachjustieren. Die Kueche war der
  Praezedenzfall: vier Module, ein Ton, unterschieden durch ihr Zeichen. Die privaten
  `--_family-*` tragen den Dark-Wechsel; die oeffentliche `--module-*`-API bleibt vollstaendig.
- **17 Modul-Tints** (Frontmatter `module-*`): jedes Modul traegt seine eigene Akzentfarbe
  auf seinem Siegel, seinen Leisten und Segmenten, seinen Chips und seinem Widget - aber
  NICHT auf der Shell (Eine-Stimme-Regel). Der Router setzt `--active-module-accent` auf
  `<html>`; Komponenten im Inhalt greifen auf
  `var(--module-accent, var(--color-accent))` zu. Die Kuechen-Gruppe (Mahlzeiten, Rezepte,
  Einkaufen, Vorrat) ist im ROUTING vier Module mit vier eigenen `module:`-Werten und in
  NAVIGATION, AKZENT und STATUSBAR eines; sie teilt den Meals-Tint
  (`--module-kitchen: var(--_module-meals)`) - ein Farbwechsel beim Tabwechsel waere die staerkste
  "du hast den Kontext verlassen"-Botschaft der App; die vier Einzel-Tokens bleiben fuer
  Dashboard-Widgets und Nav-Icons bestehen. Alle Tints sind AA-verifiziert; sieben
  Light-Werte wurden gegen den Grouped-Grund nachvertieft (jetzt >=4.55:1 auf bg,
  >=5:1 auf Weiss). Dark Mode kippt auf vivide Hell-Varianten mit dunkler Tinte
  (`--color-ink-on-vivid`).
- **Die Modul-Identitaet lebt in den Elementen, nicht in der Flaeche.** Die PWA-theme-color
  ist app-weit der Seitengrund (#F5F3ED / #191816, also `--color-bg`), nicht der Modul-Tint.
- **Die NAVIGATION ist die Legende der Modultoene** - Sidebar und Tab-Bar, nicht die eine
  ohne die andere. Seit die Stimme das Chrome traegt, war die Frage offen, wo die neun
  Familien noch SICHTBAR werden, ohne den Rahmen wieder umzufaerben. Antwort: dort, wo alle
  Module nebeneinander stehen - jedes Zeichen in seinem Ton, einmal statt in jedem Zimmer
  (Apples Settings-Muster). Der Ton sitzt auf dem ICON, nie auf Label oder Flaeche: ein Icon
  ist Grafik (3:1), ein Label waere Text und muesste 4.5:1 halten - was sieben der neun
  Familientoene reissen wuerden.
  **Die Regel hing bis 2026-08-17 an einem Breakpoint**, und das war ein Fehler, keine
  Entscheidung: ueber 1024px trug jedes Nav-Zeichen seinen Ton, darunter waren alle grau.
  Dieselbe Komponente sprach je nach Fenstergroesse eine andere Sprache, und ausgerechnet auf
  Telefonen - der Hauptbuehne (PRODUCT.md) - war in der Navigation gar kein Modulton zu
  sehen. Gemessen gegen die Glaskapsel (der echte Grund ist die Mischung aus Kapsel und
  Seite, #F9F9FA / #2B2825): Light 4,79-6,81:1, Dark 4,57-8,41:1 - beides ueber der
  Textschwelle, der Ton ist hier also nicht die Grenze. Aktiv gewinnt in BEIDEN Leisten die
  Stimme zurueck: eine Zeile, die als Ganzes violett ist, deren Zeichen aber allein seine
  Familienfarbe behielte, liest sich als „nicht mitgemeint".
  **Pruefebene: Regel** (`die Sidebar zeigt die Modultoene als Legende` +
  `die Tab-Bar zeigt dieselbe Legende wie die Sidebar`, `test:frontend-audit`) - zwei Guards,
  weil die beiden Faelle getrennt kaputtgehen koennen.
- **DIE VOLLTON-REGEL: was eine Identitaet NENNT, traegt seine Farbe im Vollton** (seit
  2026-08-18). Eine 16-%-Waschung kann eine Farbaussage nicht tragen, und das ist gemessen,
  nicht empfunden: im Dark HELLT eine Beimischung fast nur auf (Buntheit 4-8 von 24-73 des
  Volltons, `dark-chroma.mjs`), im Light kollabieren benachbarte Familientoene auf denselben
  Wert - Notizen, Dokumente und Inventar teilen die Familie `records` und hatten bei 16 %
  BITWEISE denselben Scheibengrund. Die Toenung loescht genau den Unterschied, den sie
  zeigen soll. Die Regel hat zwei Zweige, und welcher gilt, entscheidet die HERKUNFT der
  Farbe:
  - **Kuratierter Ton** (Modul-/Familienton, Kategoriefarbe aus einer festen Liste): die
    Farbe IST die Flaeche, die Tinte ist `--color-ink-on-vivid`. Traeger ist `.vivid-mark`
    (layout.css) - dieselbe Regel, die auch das `.module-seal` haeutet, damit Sheen und
    Tinte nicht auseinanderlaufen koennen; die Geometrie bleibt bei der jeweiligen Marke.
    Gemessen ueber alle betroffenen Marken in beiden Themes, mit und ohne Sheen:
    **light 3,65-7,17:1, dark 6,17-12,24:1** (`.impeccable/redesign-tools/vollton-marken.mjs`) -
    dasselbe Feld, das schon am Siegel steht.
  - **Freie Nutzerfarbe** (Kalenderfarbe, Terminfarbe, Abo-Farbe): der Vollton steht NEBEN
    dem Inhalt, nicht darunter - als 3px-Kante, Ring oder Punkt. Eine Flaeche braucht eine
    Tinte, und auf einer frei gewaehlten Helligkeit gibt es keine (ein schwarzer Termin lag
    bei 1.22:1). Eine Kante braucht keine.

  **DIE GEGENRICHTUNG GEHOERT ZUR REGEL: wer nichts nennt, bleibt neutral.** Ein Platzhalter
  - die Dropzone, das leere Vorschaufeld, der Avatar eines Kontakts ohne Haushalts-
  Verknuepfung - sagte mit einer Modultoenung „Dokumente" auf einer Seite, die das schon
  beantwortet hat. Diese Flaechen sind neutral (`--color-fill-well` plus Sekundaertinte,
  also der dokumentierte Well und keine eigene Erfindung).

  **UND SIE GILT AUCH FUER DEN ORT, AN DEM DIE FARBE GEWAEHLT WIRD.** Die sieben Toene der
  Kontakt-Kategorien standen als sieben Regeln `.contact-group--<key>` in contacts.css -
  ein Selektor auf den Schluessel, der per Konstruktion nur die SEED-Kategorien treffen
  kann. Seit #357 legt der Haushalt eigene an, und die fielen alle auf den Modulton
  zurueck: „Familie" und „Dienstleistungen" sahen gleich aus. Seit Migration 152 traegt
  die Kategorie ihren Ton SELBST, waehlbar aus genau diesen sieben (Endpoint
  `/contacts/meta`, Palette im Kategorie-Manager), und ohne Wahl bleibt sie neutral.
  Gespeichert wird der Token-Ausdruck, nicht ein Hex-Wert - die Toene sind
  themenabhaengig, und ein Hex koennte den Dunkelmodus nicht bedienen (dasselbe Muster
  wie bei den Kontofarben des Budgets).

  **WARUM EINE ALLOWLIST UND KEIN FREIER FARBWAEHLER:** die Kategoriescheibe ist eine
  Vollton-Marke, ihre Tinte ist die feste `--color-ink-on-vivid`. Das haelt nur ueber
  kuratierten Toenen. Eine frei gewaehlte Farbe muesste nach dem zweiten Zweig als Kante
  erscheinen - und damit gaebe es wieder zwei Gesichter fuer eine Marke.

  **DER ANLASS IST EINE WIEDERHOLUNG, und die ist die eigentliche Lehre.** Die Messung von
  2026-08-17 hat `module-seal--vivid` und `--seal-base` gestrichen und einen Guard
  hinterlassen, der die KLASSE nannte. Elf Geschwister derselben Bauart lebten unter anderen
  Namen weiter - die Kategoriescheibe der Kontakte, das Absenderzeichen der Dokumentenkarte,
  das Modulzeichen der Einstellungs-Modulliste, die Marke der geteilten Ausgaben, das
  Schwangerschaftszeichen -, und im Kalender hatte dieselbe Etappe zwei von vier
  Ereignis-Ansichten umgestellt: Woche und Ganztag trugen die Vollton-Kante, Monat und Tag
  nicht. Ein Termin sprach zwei Sprachen, je nachdem welchen Ansichtsknopf man gedrueckt
  hatte. **Ein Guard ueber eine Namensliste deckt keine Regel ab, sondern N Dateien** - zum
  dritten Mal in diesem Projekt.
  **Pruefebene: Signatur** (`eine Marke nennt ihre Identitaet im Vollton, nicht zweimal als
  Waschung`, `test:frontend-audit`). Gesucht wird die BAUART, nicht der Name: ein bemessener
  Behaelter (`width` UND `height` - eine Marke ist bemessen, ein Chip waechst mit seinem
  Text), dessen Hintergrund eine Identitaetsfarbe als Waschung fuehrt und der dieselbe Farbe
  im Vordergrund noch einmal nennt, ohne sie irgendwo voll zu tragen.
- **Marken der Einstellungsliste (R19):** jede ist eine gefuellte Kachel (`.vivid-mark`,
  settings/shell.js `createLeafMark`) - ein Modul im Modulton, Konfiguration ohne Modul im
  Grau der Einstellungen (`--module-settings`). Die blasse Mulde fuer Nicht-Module ist
  entfallen: zwei Formen in einer Liste lasen sich wie zwei Arten von Eintrag.
- **DIE SKALEN-REGEL: ein Etikett nennt seinen Ton EINMAL, und zwar voll** (seit
  2026-08-18). Die Vollton-Regel hat die MARKEN geraeumt; ihr Guard sucht einen bemessenen
  Behaelter, und genau das liess die zweite Haelfte des Bestands stehen - ein Etikett ist
  nicht bemessen, es waechst mit seinem Text. Die Bauart war dieselbe: getoente Flaeche,
  darauf dieselbe Farbe noch einmal gemischt. Auf einer SKALA kostet sie mehr als an einer
  Marke, weil sie nicht eine Aussage schwaecht, sondern mehrere gegeneinander:
  - Gemessen an den vier Prioritaetsstufen der Aufgaben (`skalen-vollton.mjs`, CIEDE2000
    auf der Kartenflaeche): „Hoch" -> „Dringend" liegt als Waschung bei **3,47 light /
    4,01 dark**. Das ist ueber der Wahrnehmungsschwelle von 2,3, aber ein Drittel dessen,
    was dieses Projekt fuer die Diagramm-Serien als Abstand akzeptiert hat (11,3) - und
    zwei Etiketten der Liste stehen nie nebeneinander, sondern jedes allein in seiner
    Zeile. Im Vollton sind es **12,90 und 23,62**.
  - Und sie verdeckt Stufen, die es gar nicht gibt: `.birthday-chip--default` und
    `--soon` waren BITWEISE identisch, obwohl `countdownChip()` drei Stufen kennt und das
    im Kommentar sagt. Ein Geburtstag morgen und einer in vierzig Tagen sahen gleich aus.
    Niemandem aufgefallen, weil eine Toenung ohnehin kaum etwas sagt.

  **Drei Antworten, und was gilt, entscheidet, was das Etikett SAGT:**
  - **Meldung** (Danger/Warning/Success/Info - Vorrat, Inventar-Status, erwartete Buchung):
    der Ton steht in der SCHRIFT, im vollen Wert, ohne Flaeche. Die semantischen Toene
    halten das als Kleintext (Danger 5,38:1 light / 5,20:1 dark, Warning 4,96 / 7,13 auf
    `--color-surface`) - die Ink-Mischung war hier nie noetig, sie stammt aus der Regel
    fuer MODUL-Toene, die als Schrift wirklich scheitern. Zwei Meldungen nebeneinander
    trennt ein Mittelpunkt ueber den `+`-Kombinator, nicht eine Kapsel.
  - **Rangmarke** (eine Stufe einer geordneten Reihe - Aufgaben-Prioritaet): ein
    8px-Vollton-PUNKT traegt die Farbe, die Schrift bleibt Sekundaertinte. Gescannt wird
    der Punkt, gelesen das Wort. 8px ist das Bestandsmass fuer einen Farbpunkt
    (Kalender-Ebenen, Feiertagsmarke der Agenda). Der Punkt steht seit 2026-08-19 als
    `.priority-dot` in `list-row.css`, nicht mehr in `tasks.css`: dieselbe Stufe erscheint
    auch am Aufgaben-Chip des Kalenders, und ein Page-CSS je Seite heisst, dass tasks.css
    dort gar nicht geladen ist. Die zweite Fassung, die daraus entstand, war ein getoentes
    Feld mit getoenter Schrift - dieselbe Aufgabe sprach je nach Modul zwei Sprachen
    (gemessen lagen die vier Felder 6,61 und 6,77 auseinander, bei 11,3 fuer die
    Diagrammserien). **Wer eine Skala in einem zweiten Modul zeigt, verschiebt ihr Bauteil
    in ein geteiltes Stylesheet, statt es dort nachzubauen.**
  - **Zuordnung** (nennt eine Identitaet): Vollton-FLAECHE mit `--color-ink-on-vivid` -
    aber nur, wenn die genannte Identitaet nicht die des Raums ist, in dem das Etikett
    steht. Sonst greift die Herkunfts-Regel und das Etikett bleibt NEUTRAL
    (`--color-fill-well` plus Sekundaertinte). Nach dieser Haelfte sind acht Stellen
    neutral geworden, die den Modulton in seinem eigenen Modul trugen: Haushalt-Badge im
    Budget, Bedarfs-Badge und Schwangerschaftszeichen in der Gesundheit, Zaehlmarke im
    Mehr-Blatt, Widget-Zaehler, Alters-Badge (es stand neben einem Avatar in der
    MITGLIEDSfarbe), Uhrzeit im Gesundheits-Widget, offener Betrag im
    Haushaltshilfe-Widget.

  **Bedienelemente sind ausgenommen, und zwar mit Grund, nicht mit Namensliste:** fuer sie
  gilt die Eine-Stimme-Regel und ihr eigener Guard. Ein aktiver Filter-Chip beantwortet
  „wo bin ich", und dafuer ist der Modulton zustaendig.
  **Pruefebene: Signatur + Regel** (`was keine Marke ist, nennt seinen Ton auch nicht
  zweimal blass` und `zwei Stufen einer Reihe sehen nie unabsichtlich gleich aus`,
  `test:frontend-audit`). Der erste ist die KOMPLEMENTMENGE des Marken-Guards und traegt
  deshalb kein Namensmuster: alles, was nicht bemessen ist, keinen `cursor: pointer` hat
  und die Farbe nirgends voll traegt. Der zweite vergleicht Geschwister-Modifier EINER
  Basisklasse: malen zwei dasselbe, ohne sich eine Regel zu teilen, ist eine Stufe zu viel
  benannt - teilen sie sich eine (`--disposed, --lost`), ist die Gleichheit ausgesprochen.

### Tertiary
- **Semantik im Apple-Vokabular, AA-vertieft**: Success (Apple Green, 5.1:1), Warning
  (Amber-Braun, bewusst von Danger-Rot getrennt fuer Farbfehlsicht, 4.9:1), Danger
  (Apple Red, 5.4:1), Info (Apple Blue, 5.4:1, getrennt vom Contacts-Tint). Dark Mode:
  vivide Apple-Dark-Werte (#30D158 / #FF9F0A / #FF6961 / #409CFF) mit dunkler Tinte statt
  Weiss. Der Toast kippt nicht mit: sein Shell-Glas ist in BEIDEN Themes dunkel
  (`--toast-bg`/`--toast-text`, dunkel `--color-surface-raised` mit hellem Text; R16,
  2026-09-28 - vorher war er im Dark die hellste Flaeche der Seite). **Ein Erfolg ist keine
  Vollflaeche (Re-Critique 2026-09-27, C2):** der Erfolgs-Toast steht auf demselben
  Shell-Glas wie jeder Toast, gruen ist nur sein Haekchen (`--shell-success-ink`, gegen das
  komponierte Glas gemessen); Fehler und Warnung bleiben Vollflaechen - sie sollen
  unterbrechen, eine Bestaetigung nicht. Alle Aufrufe laufen ueber `showToast`, die Regel
  steht einmal in glass.css (`test:toast-placement`).
- **Chart-Serien** (`--chart-series-1..7`): eigene Datenreihen-Palette, bewusst KEINE
  geborgten Modul-Tints (Modulfarben tragen Bedeutung, die in einem Ausgaben-Donut falsch
  waere). Sieben Toene, im Dark aufgehellt auf >=3:1 Grafikkontrast; mehr Segmente werden
  zu "Sonstige" zusammengefasst. **Geborgt heisst gleicher WERT, nicht gleicher Name.**
  Der erste Guard pruefte, ob `--module-*` in der Palette steht - erfuellt, waehrend Serie 2
  buchstaeblich `--_family-money` war (#0F766E light, #2DD4BF dark), der Modulton des
  Budgets, in dem die Palette laeuft. Gemessen wird deshalb wahrnehmungsnah (CIEDE2000,
  Schwelle 2.3 = Just Noticeable Difference) und nur gegen die Module, die Diagramme
  wirklich zeigen: Serie 2 ist seit 2026-08-11 Petrol (#297989 / #22D3EE, dE 11.3 bzw.
  16.2 zu money). Serie 3 (= kitchen) und Serie 7 (= work, dE 1.9) bleiben stehen, weil
  Kueche und Aufgaben keine Diagramme haben - eine Ausnahme mit Verfallsdatum an beiden
  Enden, denn der Guard leitet die geprueften Module aus `router.js` ab und findet sie in
  dem Lauf, in dem dort ein Diagramm entsteht. Serie 1 (Indigo, dE 7.5 zum Akzent) bleibt
  bewusst: sie heisst in der Kontofarben-Wahl "Violett", dort ist die Naehe die Zusage.
  **Die Serien gelten fuer KATEGORIEN** (Donut, Kategorien-Balken). Ein Diagramm EINER Messung
  im eigenen Modul (Gesundheit: Vitalkurve, Aktivitaet, Fastenwoche) traegt den Modulton:
  Messwert im Vollton, Ziel bzw. Vergleich in der getoenten Stufe (Tinte + 5 %, 3:1 in beiden
  Themes). Die Fastenwoche lief bis R19 auf Serie 1/2 und war die einzige Ausnahme.
  **Schraffur als zweite Kodierung (R20):** bei Tritanopie liegen Serie 2/7 (dE 5,6) und 3/6
  (6,2) unter 8; statt neuer Farben tragen Serie 6 und 7 eine 45-Grad-Schraffur
  (`--chart-texture-ink`, `--chart-texture-tile`, `categoryTexture()` in
  `utils/budget-category-colors.js`) in Donut, Kategorie-, Unterkategorie- und Planbalken. Die
  Balkenkachel ist um 1/Skala breiter, weil der Balken per scaleX waechst, und die Richtung ist
  das Eckwort `to bottom right`, kein Winkel: ein fester Winkel blieb in der breiten Kachel 45 Grad
  und stand nach dem Stauchen fast senkrecht (#2084). `test:budget-ui`
  rechnet nach, dass jedes Paar unter 8 genau eine schraffierte Seite hat.
- **Prioritaeten** (`--color-priority-low..urgent`): unveraendert aus dem Bestand, die
  Helligkeits-Trennung (High ~1,8x Urgent) ist farbfehlsicht-verifiziert. **Die
  Badge-Fuellung ist seit 2026-08-18 entfallen** (Skalen-Regel, Zweig Rangmarke): der Ton
  steht im 8px-Punkt, das Etikett traegt weder Fuellung noch Kante noch getoente Schrift.
  Was er vorher dreimal blass sagte, sagt er jetzt einmal voll.

### Neutral
- **Grouped Background** (`grouped-bg` #F5F3ED): der App-Grund - warmes Papier in Apples
  Grouped-MUSTER, nicht in Apples Grau. Die Luminanz ist die des abgeloesten systemGray6
  (L=0.8962 gegen 0.8910, also 0,6 % heller), damit der Tausch keinen dokumentierten
  AA-Wert reissen kann. Dark: warme Kohle `bg-dark` #191816 - dreifach ueber dem
  abgeloesten Near-Black #0A0A0C, das auf OLED schlicht "aus" hiess und Karten ohne
  lesbare Tiefe darauf schwimmen liess.
- **Surface** (`surface`, dark `surface-dark`): Karten, Zellen, Arbeitsflaechen
  (`--color-surface-work` fuer lesbare Arbeitsbereiche, `--color-surface-raised` fuer
  subtile Erhoehung).
- **Der Hover ist die naechste Flaechenstufe, keine eigene Farbe** - und deshalb gibt es
  ihn zweimal. `--color-surface-hover` ist der Schritt von `--color-surface` aus;
  `--color-surface-elevated-hover` (seit 2026-08-11) der Schritt von der bereits erhoehten
  Flaeche. Wer im Ruhezustand schon `--color-surface-elevated` traegt - Suchfeld im
  Mehr-Blatt, Suchbereich-Chip, Wieder-einblenden-Chip des Dashboards -, landete ohne diese
  Stufe im Dark auf seiner EIGENEN Farbe: der Hover war dort unsichtbar, gemessen 1:1. Dass
  es vorher trotzdem ging, war Zufall - der alte Dark-Wert sprang zwei Rampenstufen und traf
  so gerade noch darueber. Die Stufe ist nicht neu, sie war nur nie benannt; im Light faellt
  sie mit ihrer Schwester zusammen, weil die helle Rampe dort dicht liegt.
- **Inset-Well** (`fill-well` = `--color-surface-3`): die eine erlaubte Fuellung fuer eine
  Kachel INNERHALB einer Karte. Gemessen 1.20:1 light unter Weiss und 1.16:1 dark ueber
  `surface-dark`; Text darauf haelt AA in beiden Themes (Sonde 2 misst es am gerenderten
  Dokument).
- **Label** (`label` #1D1B17): Primaertext, 17.3:1 auf Weiss. Sekundaer 6.19:1 auf Weiss
  und 5.58:1 auf bg, Tertiaer >=4.6:1 auf bg (auch Placeholder-Farbe), Quartaer nur
  dekorativ, nie Fliesstext.
- **Kanten** (`border` Standard, `border-subtle` Trenner, `border-strong` Hover): im Dark
  Mode eigenstaendig gesetzt (#47423B / #3E3933 / #6F6A61, seit der Dark-Kur 2026-08-17),
  weil die Neutral-Rampe dort zu dicht an der Flaechenfarbe liegt. Karten- und Trennkanten
  bleiben bewusst unter 3:1, wie Apples eigene Grouped-List-Separatoren - sie grenzen
  Flaechen ab, keine Bedienelemente. **Wo eine Kante die Grenze eines BEDIENELEMENTS ist,
  haelt sie 3:1 nach WCAG 1.4.11**, und dafuer gibt es je einen eigenen Token statt einer
  Ausnahme: `--color-border-control` fuer die Ruhekante von Eingabefeldern (siehe Inputs)
  und `--color-switch-off` fuer die Bahn eines ausgeschalteten Schalters (#1572). Die Bahn
  stand auf `--neutral-300` und lag bei 1,65:1 auf Weiss und 1,46:1 auf dem dunklen `-raised`
  - ein Schalter, der aus war, verschwand in seiner Zeile. Die Bahn selbst traegt die Grenze,
  keine zusaetzliche Kante: die Form bleibt Apples randlose Kapsel. Light `#88847C` (eine Spur
  unter `--neutral-500`, weil die Rampenstufe auf dem Zeilen-Hover 2,94 truege) haelt 3,72 auf
  Weiss, 3,36 auf der Buehne, 3,10 auf dem Hover; Dark `#948E85` (= `--_neutral-500`) 3,25-4,51.
  Guard: `test:frontend-audit`, „die ausgeschaltete Schalterbahn haelt 3:1 auf jeder Flaeche, auf der ein Schalter steht". Der TEXT-Kontrast
  ist ueberall ohne Verstoss.

### Named Rules
**Rot ist eine Warnung, kein Vorzeichen (Re-Critique 2026-09-27, C1).** Im Budget war jede
Ausgabe rot - der Normalfall eines Haushaltsbuchs las sich als Dauer-Alarm, und die echte
Warnung ging darin unter. Ausgaben stehen jetzt in Textfarbe, die Richtung traegt das
Vorzeichen (`amountByRole(..., 'flow')`), Kategoriebalken und Trendlinie tragen den
Modulton bzw. die Sekundaerfarbe; Einnahmen duerfen ruhig gruen sein. `--color-danger`
bleibt fuer das, was wirklich eine Handlung verlangt: ein Konto im Minus, ein negativer
Saldo, ein ueberschrittener Plan. Ein Zustand steht nie NUR in der Farbe
(`test:budget-ui`).

Seit R21 (D8) gilt das auch fuer Veraenderungen und Schulden: ein Delta ("+25,00 € ggue.
Sep", je Kategorie und auf den Kennzahlkarten) steht in der Sekundaerfarbe mit Vorzeichen
und Pfeil - `trendMarkup` ohne `betterWhen`; die Valenzfarbe bleibt Metriken mit fester
guter Richtung ausserhalb des Geldes vorbehalten. Der ueberschrittene Plan traegt sein Rot
am "von 80 €" der Statistik (`.budget-bar-row__of--over`). Eine Kreditkarte im ueblichen
Minus ist Textfarbe, rot erst ueber ihrem Rahmen (`available_limit` unter null). Eine
offene Schuld in der Aufteilung - Karte, Kurzzeile, Kachel der Uebersicht - ist Textfarbe;
"Du bekommst" darf gruen bleiben wie eine Einnahme (`test:budget-ui`,
`test:dashboard-split-balance`).

**Die Eine-Stimme-Regel (2026-08-10).** Die App hat GENAU EINE Akzentfarbe, und das ist
das Violett der Bildmarke. Sie traegt alles, was in jedem Modul dasselbe tut: die
Tab-Leiste und die Sidebar samt Aktiv-Pille, den FAB, den Primaer- und Sekundaerknopf,
Umschalter und Checkboxen, den Fokusring, den Datepicker, die Suche und jedes
Shell-Overlay. Der MODULTON traegt, was sagt, wo man ist: das Siegel im Kopf, die Leisten
und Segmente INNERHALB des Moduls, seine Chips und Sektionsmarken, seine Zeilen-Hover und
die ausgewaehlte Zeile der Spaltenform (seit R21 S9b; vorher Violett wie die Seitenleisten-
Pille, neben einem Filter-Chip im Modulton - zwei Auswahlfarben auf einem Schirm,
`test:master-detail`), sein Widget auf dem Dashboard, sein Zeichen in der Sidebar-Legende.

**Das Kriterium ist die Frage, die das Element beantwortet** - "was tut das hier" oder "wo
bin ich". Die Shell beantwortet nie die zweite: sie ist in jedem Modul dieselbe.

Der Anlass war das Urteil des Betreibers, die App fuehle sich "nicht mehr wie aus einem
Guss" an, und die Ursache war genau hier. Der Modulton war ins Chrome gewandert: Tab-Leiste,
FAB, Primaerknopf, Fokusring, sogar die damaligen Backdrop-Blobs lasen `--active-module-accent`. Beim
Wechsel Budget → Einkaufen → Aufgaben faerbte sich damit der ganze RAHMEN der App von Tuerkis
auf Rostrot auf Gruen um - nicht das Zimmer, das Haus. Apple faerbt pro APP, nicht pro TAB;
in einer App bleibt der Tint konstant, und der Tab-Name sagt, wo man ist.

**Gemessen und nicht behauptet:** vor der Regel las das Chrome an 43 Stellen in layout.css,
19 in glass.css und 7 in datepicker.css einen Modulton. Danach kein einziges Mal.

Pruefebene: **Struktur** (`test/test-frontend-audit.js`, Guard
`die Shell traegt die Stimme, nicht den Modulton`). Er leitet das Chrome aus SELEKTOR-Formen
ab - Shell-Wurzeln (`.nav-bottom`, `.nav-sidebar`, `.page-fab`, `.more-*`, `.search-overlay`,
`.modal-overlay`, `.app-shell`) plus geteilte Bedienelemente (`.btn--*`,
`.toggle`, `.form-check`, `--focus-ring-color`) -, nicht aus einer Dateiliste; die Liste
waere beim achtzehnten Modul wieder unvollstaendig.

**Die Pro-Hintergrund-Regel.** AA gilt PRO Hintergrund, nicht pro Farbe. Ein Tint, der auf
Weiss besteht, kann auf dem Grouped-Grund reissen (sieben Modul-Tints taten genau das und
wurden nachvertieft). Jede neue Farb-Flaechen-Paarung wird gegen ihren realen Grund
gemessen, in Light und Dark - nicht geschaetzt und nicht aus einer fremden Palette
uebernommen. Als Guard im Repo steht die Messung in `test/test-document-guards.js`
(Sonde 2 misst den komponierten Kontrast am gerenderten Dokument).

**Die Zuruecknahme-Regel (#1230, 2026-09-15).** Was beiseitegelegt ist - erledigte und
archivierte Aufgaben, archivierte Konten, pausierte Abos, inaktive Medikamente und Praemien,
schon importierte Zeilen -, tritt ueber drei Token-Rollen zurueck, nie ueber `opacity`:
`--color-surface-receded` (die Flaeche sinkt auf die vertiefte Stufe),
`--color-border-receded` (die ruhigste Kante) und `--color-text-receded` (der Sekundaertext
eine Stufe leiser, 5,39 / 7,71:1 auf der zurueckgenommenen Flaeche). Titel bleiben
secondary, Badges, Prioritaets-Chips und Initialen voll: sie tragen die Aussage des
Zustands. Die Deckung multiplizierte den Kontrast JEDES Textes mit herunter und lag
gerendert bei 1,65-3,86:1 light und 2,40-4,23:1 dark. Alle drei sind Aliase, die
Dark-Bloecke ziehen sie ueber die Stufen darunter mit. Guard: `test/test-frontend-audit.js`,
"zurueckgenommene Karten und Zeilen" - keine Zustandsregel setzt `opacity` unter 1.

**Die Akzent-auf-Toenung-Regel.** Akzent-TEXT auf akzent-getoentem Grund (Chips, Badges,
Avatare) nutzt `color-mix(in srgb, var(--module-accent) 70%, var(--color-text-primary))`;
bewusst kein Token, weil die Formel dort ausgewertet werden muss, wo `--module-accent`
gilt. Nur fuer Text; Icons tragen den vollen Akzent (dort gilt 3:1).
**Ihre Grenze:** die Formel gilt fuer KURATIERTE Modultoene, nicht fuer frei gewaehlte
Nutzerfarben. An den Enden der Helligkeitsachse bricht sie - weiss auf light 1.92:1,
schwarz auf dark 1.97:1, und selbst der graue Avatar-Fallback #8E8E93 landet bei 4.47:1.
Auf einer Nutzerfarben-Toenung traegt der Text deshalb ein TOKEN
(`--color-text-primary`: 9.3-17.0:1 ueber die ganze Palette und ueber Extremwerte).

**Die User-Farben-Regel.** Frei waehlbare Layer-/User-Farben (Kalender-Layer, Feiertage,
Notizzettel, Avatare) sind nie Textfarbe, nur Border oder Dot; Flaechen-Toenungen daraus
laufen ueber die gemessenen color-mix-Rezepte. Insbesondere traegt eine Nutzerfarbe nie
eine ganze Inhaltsflaeche: die Notizkarte tat das bis Runde 3 mit einer zur Laufzeit
gerechneten Textfarbe und war damit die einzige Stelle, an der die Lesbarkeit an einer
ungemessenen Farbe hing (und im Dark-Theme ein Feld heller Pastellbloecke).

**Die Identitaetsfarben-Regel** (2026-08-17, Etappe 4). Wo eine PERSON gemeint ist, spricht
ihre Identitaetsfarbe - und app-weit dieselbe. Ihr Traeger ist die Avatar-Scheibe im VOLLTON;
das ist keine Ausnahme von der User-Farben-Regel, sondern ihr Dot in seiner groessten Form,
und die Beschriftung darauf rechnet `getReadableTextColor()` gegen den gewaehlten Ton statt
gegen eine angenommene Flaeche. Anlass war das Geburtstags-Widget: es toente jede Scheibe mit
dem Modulton, und dieselbe Person leuchtete in der Familien-Kachel und sass eine Karte weiter
grau. **Ihre Grenze ist die Verknuepfung.** Ein Geburtstag ohne Familienmitglied
(`family_user_color` NULL, im Dashboard-Payload per LEFT JOIN mitgeliefert) behaelt die
neutrale Modul-Toenung. Eine gehashte Ersatzfarbe waere schlimmer als keine: sie spraeche die
Farbsprache des Haushalts fuer Fremde.

**Die Toenungsskala-Regel** (loest die frühere Ein-Toenungsrezept-Regel ab, Runde 9).
Jede Toenung nimmt eine benannte Stufe aus `tokens.css` (Abschnitt 6b), keine schreibt eine
Zahl. Die alte Fassung sagte „16 %, EIN Rezept, app-weit" und beschrieb damit 23 von 214
gemessenen Stellen; die uebrigen 191 hatten keinen Wert zu greifen und schrieben ihren
eigenen hin - 37 Prozentstufen.

Die sieben Stufen und ihre Rollen: `--tint-wash` (8 %) untergreift FREMDEN Inhalt (Leisten,
Banner, ganze Zeilen, Kalenderfelder); `--tint-state` (12 %) ist ein Zustand auf ungetoenter
Flaeche; `--tint-surface` (16 %) ist die Toenung, die das Element SELBST ist (Chip, Badge,
Icon-Well, Notizkarte, Event-Bar); `--tint-raised` (24 %) ein Zustand darauf; `--tint-hint`
(50 %) eine Andeutung (Kante, Linie, Leerzustands-Icon); `--tint-ink` (70 %) Text auf
getoenter Flaeche; `--tint-shadow` (20 %) ein Schatten daraus.

Die vier Flaechenstufen sind eine LEITER, und ein Zustand steigt eine Sprosse. Die
Unterscheidung wash/surface ist gemessen und keine Stilwahl: die niedrigen Fundstellen sind
im gerenderten Dokument im Median 47.520 px2 gross, die hohen 1.764 px2 - Faktor 27. Eine
Leiste traegt bei 1,11:1 Farbe ins Bild, wo ein 24px-Badge bei demselben Verhaeltnis
verschwindet; 16 % traegt in beiden Themes (1,19-1,41:1 gegen den jeweiligen Grund).

Was KEINE Toenung ist: Deckwerte ab 45 % (die Farbe IST dort die Flaeche und wird
verdunkelt), Nutzerfarben als Text (dort gilt die User-Farben-Regel) und Animationsstufen in
`@keyframes`. Pruefebene: Signatur (`jede Toenung nimmt eine Stufe der Toenungsskala`,
`test:frontend-audit`).

**Die Waschung untergreift fremden Inhalt - aber sie kann im Dark keine FARBE tragen
(Grenze nachgetragen 2026-08-17).** Zwei Stellen haben 2026-08-11 von einer Linie oder
einer neutralen Flaeche auf `--tint-wash` gewechselt („Farbe wird Flaeche, nicht Strich",
v2.6.0): der Widget-Kopf des Dashboards und die angeheftete Notiz, die ihre Notizfarbe
zurueckbekam. Die Notiz traegt sie weiter - dort ist die Waschung ein ZUSTAND auf heller
Flaeche und tut, was die Skala verspricht. Der Widget-Kopf dagegen wollte mit der Waschung
FARBE sagen, und genau das kann sie im Dark nicht: die CIEDE2000/LCh-Zerlegung
(dark-chroma.mjs) zeigt, dass die 8-%-Mischung dort fast nur AUFHELLT (Buntheit 4-8 gegen
24-73 des Volltons). Das Absenderband ist deshalb 2026-08-17 dem Vollton-Siegel gewichen
(siehe „Der Widget-Kopf"). Die Rollen-Grenze der Skala bleibt unveraendert:
`--tint-surface` ist die Stufe eines Chips, der SELBST das getoente Objekt ist, und
Farbaussagen gehoeren in Volltonelemente, nicht in Beimischung.

**Die Tagesmarke-Regel (2026-08-19).** „Heute" ist in jedem Modul dieselbe Aussage, also
traegt sie die STIMME. Wo eine TAGESZELLE den aktuellen Tag markiert, gehoert ihr die
Vollton-Marke in `--color-accent` mit `--color-ink-on-vivid` darauf, und die Zelle bekommt
weder Fuellung noch Rahmen - der Kanon, den der Kalender seit jeher fuehrt
(`.month-day--today .month-day__number`, `.week-view__day-num--today`) und dem der
Datepicker mit seinem Inset-Ring folgt. Kreis, wo eine Ziffer steht; Kapsel, wo ein Datum
steht.

Der Anlass war das Wochenboard der Kueche: es faerbte Wochentag UND Datum in
`--module-accent` und war damit die dritte Fassung von „heute" neben den zwei des
Kalenders - eine Marke, die ihre Identitaet als getoente SCHRIFT nennt statt im Vollton,
und dafuer auch noch den Modulton im eigenen Modul nimmt, wo der Kopf die Herkunft
laengst beantwortet. Das Nachziehen ueber die Bauart fand die zweite Fundstelle sofort:
der Zyklus-Kalender ringte seinen heutigen Tag im Gesundheitston, und das ist im
Zyklus-Gitter ausgerechnet der Ton, der den PHASEN am naechsten liegt (CIEDE2000 gegen
`--cycle-period`: **17,23 light / 14,33 dark**; in der Stimme 31,50 / 25,97, und der
engste Abstand des ganzen Gitters steigt damit von 17,23/14,33 auf 26,60/25,97). „Heute"
liegt regelmaessig auf einem geloggten Tag - dann stehen beide Ringe an derselben Zelle.

**Zwei Kategorien sind ausdruecklich NICHT gemeint, und beide unterscheiden sich nach der
Bauart, nicht nach einer Ausnahmeliste.** Eine FRISTMELDUNG („heute faellig",
`.due-date--today`, `.housekeeping-task--today`) sagt nicht „das ist der heutige Tag",
sondern „das ist jetzt dran", und traegt die Warnfarbe. Auf einer AUSGEWAEHLTEN Zeile der
Spaltenform (Akzent `--tint-state` ueber der Flaeche, light #EDE7FD) haelt die Vollfarbe keine
4,5:1 mehr („Heute faellig" 4,14, „Ueberfaellig" 4,47); dort tritt die `-ink`-Stufe ein
(`--color-warning-ink` / `--color-danger-ink`, 5,31 / 5,73, `tasks.css`) - dieselbe Antwort, die
tokens.css fuer Text auf getoenter Flaeche immer gibt. Und die GEBURTSTAGSZEILE behaelt
ihren Modulton mit der Begruendung, die im Quelltext steht: die Zeile beantwortet „wann",
und der eine Tag, an dem die Antwort HEUTE lautet, ist der Anlass des ganzen Moduls -
gemessen 5,08:1 light / 7,35:1 dark. Beides sind Zeile, Chip oder Textspanne, keine
Tageszelle. Pruefebene: Signatur (`eine Tagesmarke traegt die Stimme, nicht den Modulton`,
`test:frontend-audit`) - der Guard sucht einen exakten Namensabschnitt `day` im Selektor,
weil ein `includes('day')` `birthday` mitfaengt.

## Typography

**Display/Body Font:** System-Stack (-apple-system, BlinkMacSystemFont, "SF Pro Text",
"Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif)
**Mono Font:** ui-monospace, 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace

**Character:** SF Pro auf Apple-Geraeten, die ehrliche Plattform-Grotesk ueberall sonst.
Keine Webfonts, keine Displayschrift; die Stimme ist die des Betriebssystems. Jede Rolle
ist genau einmal definiert (typography.css); ein Element nimmt sie ueber die
`u-*`-Utility-Klasse oder ueber seinen dort registrierten BEM-Selektor an.

### Hierarchy
Apple-Skala: Large Title 34, Title 2 22, Title 3 20, Headline 17 semibold, Body 17,
Subheadline 15, Footnote 13, Caption 2 11.

- **Large Title** (bold, 34px, lh 1.21, Tracking -0.015em): Seitentitel, Dashboard-Gruss und
  seit Runde 3 auch der Anmelde-Titel; bleibt auf Desktop stabil 34px. Traegt IMMER
  Label-Farbe.
- **Title 1** (bold, 28px, lh 1.21, Tracking -0.015em, `tabular-nums`): die KENNZAHL einer
  Karte, nicht eine Ueberschrift - der Kontosaldo, die Temperatur, die Uhrzeit der
  Uhr-Kachel. Sie steht gestapelt (kleines Label darueber, Zahl darunter), nie als Zahl am
  rechten Ende einer Beschriftungszeile: so gebaut ist sie anatomisch dasselbe wie die
  Nebenzeile darunter, und die Hauptaussage der Karte sieht aus wie ihre Fussnote.
- **Title 2** (bold, 22px, Tracking -0.015em, `text-wrap: balance`): Modul-Kopf-Titel im
  Canonical Page Head - EINE Rolle fuer alle Module, Settings-Leaf und Split.
- **Title 3** (semibold, 20px, lh 1.3): Bereichs-Ueberschrift in Satzschreibung.
- **Headline** (semibold, 17px, lh 1.3): Karten-/Item-Titel. Die Dichte-Variante
  (`.u-compact`, 15px) macht hohe Informationsdichte zur bewussten Entscheidung statt zum
  Groessen-Override pro Selektor.
- **Zeilentitel** (medium, 16px, Zeilenhoehe des Body): der Name einer Listenzeile
  (`.list-row__name`, `.u-row-title`). Eine ZEILE steht in einem Traeger neben
  ihresgleichen, ihr Name ist Lesetext mit Betonung; eine KARTE ist ein Objekt mit eigener
  Flaeche und fuehrt ihren Titel als Headline. Bis R16 (Critique 2026-10-05) standen an
  dieser Stelle vier Schnitte: 15/600 (Aufgaben), 16/400 (Buchung, Abo - ein
  `font: inherit` am Knopf hatte das Gewicht mitgenommen), 16/500 (vierzehn Module) und
  17/600 (Agenda, Kontakte, Geburtstage). Benannte Ausnahmen: die Dokumentzeile bleibt
  Headline, weil Raster und Liste dasselbe Objekt in zwei Ansichten zeigen; der
  Aufgabentitel behaelt die enge Zeilenhoehe. **Seit R23 (N2) auch Kanban-Karte, Mahlzeit
  und Darlehen**: sie stehen wie Zeilen neben ihresgleichen und tragen denselben
  Gegenstand wie die Zeile der Nachbaransicht - 15/600 und 17/600 dort neben 16/500 hier
  hiessen ein Gegenstand, zwei Stimmen. Headline bleibt fuer Rezeptkarte, Widget, Notizkarte.
  Guard: `test:typography`, "der Zeilentitel ist eine Rolle".
  **Titelregel (R19): hoechstens ZWEI Zeilen, dann Ellipse** - fuer jeden Zeilentitel
  (`.list-row__name`, Aufgabe, Kontakt, Abo, Buchung, Belohnungen, Agenda-Text) aus EINER
  Regel in typography.css; vorher vier (einzeilig, unbegrenzt, mobil anders als Desktop).
  Kein Modulblatt setzt dort `nowrap` oder eine andere Zeilenzahl (Guard `test:typography`).
- **Body** (regular, 17px, lh 1.47 = Apples 17/25): Fliesstext, Listenzellen.
- **Subheadline** (regular, 15px): Sekundaertext - freistehender Lesetext neben dem
  Hauptinhalt (Erklaerung eines Leerzustands, Beschreibung einer Karte, Untertitel eines
  Kontaktkopfs). `.u-meta` traegt die Rolle, Bestandsklassen sind in typography.css
  registriert; bis R21 standen sie bei 14, der Stufe der Bedienelemente. Guard
  `test:typography` "Sekundaertext ist Subheadline 15".
- **Footnote** (13px): in regular die **Metazeile**, in medium das Label ueber Feldern und das
  Versal-Datum ueber dem Gruss. **Eine Zeile ist Titel 16 + Metazeile 13** (R21, D4): was
  unter dem Namen einer Zeile, Karte oder Kachel steht - Datum, Ort, Anzahl, Betrag,
  Kategorie, Stand, Veraenderung -, nimmt die EINE Metazeilen-Rolle in typography.css.
  Gemessen standen dort drei Groessen (Aufgaben 12, Budget/Inventar/Kontakte/Agenda 14,
  Dashboard 12 neben 13). Das Modulblatt traegt Farbe, Layout und Hervorhebung
  (Ueberfaellig halbfett), keine Groesse; ein Chip IN der Zeile bleibt Caption 1. Guard
  `test:typography` "die Metazeile ist eine Rolle": er liest jede `__meta`-Klasse aus
  Stylesheets UND Markup und verlangt sie registriert oder als benannte Ausnahme (heute
  `.day-event__meta`, Mikrotext im Zeitraster: die Zeile lebt in einem Block, dessen Hoehe die
  Dauer ist, und erscheint erst, wenn der Block sie fasst - R21 S9b hat das geprueft und
  bewusst bei 12 gelassen).
  **Das Feld spricht in Footnote 13** (R21 S9b): Label (medium), Hinweis darunter, Feldfehler
  und die Legende einer Feldgruppe; vorher 14 (Labels, die meisten Hinweise) neben 12 (Hinweise
  in Aufgaben, Dokumenten, Belohnungen, Zyklus). Das Feld selbst bleibt 16. Die Beschreibung
  unter einer Einstellungszeile und die Nebenwerte der mobilen Kurzzeile (Ein/Aus) sind
  Metazeile. Guard `test:typography` "Label, Hinweis und Fehler am Feld sind Footnote 13"; er
  liest jede Klasse auf `-hint`/`__hint` und fuehrt Hinweise, die nicht unter einem Feld
  stehen, als benannte Ausnahmen.
- **Der Tageskopf der Agenda** ist Subheadline 15 halbfett (das relative Wort in der Textfarbe,
  der volle Tag sekundaer) - bis R21 14/700, eine Stufe ausserhalb der Rollen.
- **Caption 1** (12px, `--text-xs`): nur Badges, Zaehler, Chips, Nav-Labels und
  Mikro-Labels - nie eine Lesezeile (R21, D4). Die dichte Monatszelle des Kalenders ist
  Mikrotext und bleibt bei 12, am Tablet wie am Desktop EINE Zeile mit Ellipse (R23, D14;
  R21 liess dort zwei Zeilen mit Silbentrennung zu - das Raster wurde je Woche anders hoch).
- **Versal-Mikro-Label** (semibold, 12px, Tracking 0.05em, uppercase): der Sektionskopf
  einer Grouped-Liste. 0.05em (`--tracking-label`) ist der EINE Tracking-Wert und hat sechs
  gestreute Werte abgeloest.
- **Caption 2** (semibold, 11px): Badges, Zaehler.
- **Navigations-Gruppierungslabel** (semibold, 12px, Satzschreibung): Sidebar-Sektionen,
  Settings-Domaenen, Aufgaben-Gruppen. Ganze Phrasen lesen in Versal + Tracking geschrien
  und laufen dem warmen Familien-Ton zuwider.
- **Display** (bold, `clamp(48px, 9vw, 72px)`): die Wand-Uhr, und seit v2.5.0 der einzige
  Ort, an dem die zwei Display-Stufen ueberhaupt stehen. Sie existieren NUR fuer
  Anzeigewerte auf Distanz, nie fuer Ueberschriften; die Ueberschriften-Skala endet bewusst
  bei 34px. Die Stufen sind die Enden eines `clamp`, kein fester Wert - was aus zwei Metern
  lesbar sein muss, haengt an der Flaeche, nicht an einer Zahl.
- Inputs nie unter 16px (`--text-base`, iOS-Zoom-Schwelle).

### Datum, Zeit, Abstand, Anteil (R23, D11)
EINE Schreibweise, aus `public/utils/date-format.js`; kein Modul setzt sie selbst zusammen.
- **Uhrzeit** nach der 12-/24-Stunden-Einstellung (`clockText`), das Zeitwort ("Uhr") einmal
  am Ende und nie im 12-Stunden-Format. **Spanne** "06:00 - 14:00" (`timeSpanText`,
  Schicht `shiftTimeText` mit "+1" ueber Mitternacht) - auch im Schichtplan und in der
  Haushaltshilfe, die bis R23 die rohe 24-Stunden-Zeichenkette schrieben.
- **Datum** (`dateText`): Tag und Monat in der Schreibweise der Region, das Jahr nur
  ausserhalb des laufenden; mit kurzem Wochentag ("Sa., 24.10."), wo ein Mensch nach dem
  Tag fragt (Detailzeile, Toast, Abholung, Besuch). **Zeitraum** (`dateRangeText`): das
  Jahr hoechstens einmal. **Zeitpunkt** (`dateTimeText`): "24.10. 14:30 Uhr" - die Stempel
  "zuletzt synchronisiert/gesehen/installiert" der Einstellungen, Offline-Stand, Erinnerung.
  Ausnahmen mit `year: true`: Dokumentnamen (Beleg), das Geburtsdatum im Kalendertermin und
  die Kalender-Periodenkoepfe (Tag, Woche, Agenda - beim Blaettern ist das Jahr die
  Orientierung, wie "Oktober 2026" im Monat). Diagrammachsen schreiben ihre Tage ebenso
  (vorher "07.07.2026" mitten auf der Achse).
- **Abstand** (`relativeDayText`/`daysFromTodayText`): "Heute", "Morgen", "Gestern", sonst
  "in 6 Tagen"/"vor 3 Tagen" (Intl.RelativeTimeFormat), ab 31 Tagen Wochen, Monate, Jahre.
  Nie "6 Tage" fuer einen Zeitpunkt - das liest sich wie eine Dauer. Der Countdown-Zaehler der
  Uebersicht bleibt bewusst ein Zaehler ("9 Tage", #647).
- **Anteil** (`percentText`) ueber Intl der Region, nie `${n}%` von Hand.
- "Heute" ist immer der Tag der Haushaltszone; ein Zeitpunkt wird umgerechnet, ein Key gelesen.
  Guard: `test:date-format` (de, en 12 h, fr; unter UTC, Auckland, Los Angeles) - seit S11b
  auch app-weit: kein rohes `formatDate(` (auch nicht als Alias oder Wert) und kein
  `toLocale*String(` ausserhalb von i18n.js, date-format.js, day-label.js, birth-date.js und
  dem einen Wandkopf der Uebersicht (vorher ~100 Aufrufe in 30 Dateien).

### Named Rules
**Ein Wort bricht an der Silbe, mit Strich (Re-Critique 2026-09-27, W1).** "Tomatensupp/e"
und "SAUERSTOFFSAETTI/GUNG" kamen aus `overflow-wrap: break-word` neben `hyphens: manual`:
das Wort brach dort, wo die Zeile endete, ohne Strich. Wer ein Wort brechen laesst, gibt
seinem Subjekt `hyphens: auto; hyphenate-limit-chars: 6 4 4` (die App setzt `lang`, der
Browser kennt die Silben), dazu direkt darunter `-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 4`, weil Safari die Kurzform nicht kennt und sonst ohne Grenze
trennt (#1774); `overflow-wrap: anywhere` bleibt die letzte Stufe fuer
Zeichenketten ohne Silben (URLs, Codes, Zeitangaben). Versal-Labels, die nicht passen,
werden kuerzer oder verlieren den Versal-Transform, statt mitten im Wort zu brechen. Der
Guard (`test:typography`) prueft die Regel am Subjekt, nicht die Schreibweise, und fuehrt
die Bestandsausnahmen als schrumpfende Karte.

**Die Kopf-Abgrenzungs-Regel.** Zwei Kopfrollen, und was ein Kopf benennt entscheidet
welche: benennt er einen BEREICH der Seite ("Heute wichtig", "Punktestaende", "Nach
Kategorie", "Transaktionen"), ist er eine Ueberschrift in Satzschreibung. Wiederholt er
sich mit wechselndem Wert ueber EINE Liste (Kategorie in Kontakten, Mahlzeitentyp im
Wochenplan, Monat in einer Chronik), ist er ein Versal-Mikro-Label. Nicht der Traeger
entscheidet, sondern das Benannte. Ausgeschrieben in typography.css.

**Die Leisten-Regel.** Ob ein Seitentitel ueber einer Leiste steht, entscheidet der
`module:`-Wert der Zielroute (`ROUTES` in `router.js`). Wechselt die Leiste ihn, ist SIE die
Kopf-Navigation und traegt keinen Titel ueber sich - der Tab-Name IST der Modulname (Kueche:
vier eigenstaendige Module unter einer Leiste). Wechselt sie ihn nicht, oder wechselt sie gar
keine Route, gehoert sie unter den Large Title in den kanonischen `page-toolbar`-Kopf
(Budget, Belohnungen, Haushaltshilfe). Sektionen mit eigener Shell
(Einstellungen) fuehren ihren Titel in ihrem eigenen Kopf; das ist der dritte Fall der Regel,
keine Ausnahme von ihr - als Ausnahme stuende er beim achtzehnten Modul wieder offen.

Nicht die Bauart entscheidet: `renderSubTabs` gegen `wireTablist` ist eine
Implementierungswahl, und bei der Gesundheit faellt beides auseinander - ihre Tabs sind echte
Routen und tragen trotzdem alle `module: 'health'`. Sie war deshalb bis Runde 6 das einzige
Modul mit Sichtwechsel ohne Seitentitel. An der Stelle, die das haette beantworten muessen,
stand „aus Layout-Gruenden": eine Beobachtung, kein Kriterium. Liegt die Leiste IM Kopf, gibt
sie dessen Rail-Verhalten ab (Sticky, Grund, Trennlinie, Hoehe) - derselbe Satz wie beim
Well: der Traeger entscheidet. Seit R10 (2026-09-27) hat die Gesundheit gar keine Leiste mehr:
neun Tabs passten auf keinem Telefon, die Uebersicht ist jetzt ihre Navigation (Breitenregel).

**Die Keine-sichtbare-Titelwiederholung-Regel.** Traegt eine Leiste den Namen eines Panels
bereits - Sub-Tabs im Budget, die Navigation in den Einstellungen -, dann benennt eine
Ueberschrift direkt darunter keine Ebene, sondern verdoppelt Information. Alle sechs
Gesundheits-Panels taten das wortgleich ("Uebersicht" ueber "Uebersicht"), fuenf
Settings-Blaetter zuvor ebenso. Unsichtbar (`.sr-only`) darf und soll die Ueberschrift
stehen bleiben: sie haelt die Dokumentgliederung zwischen dem `h1` des Moduls und den `h3`
der Abschnitte, und ein `role="tabpanel"` traegt denselben Namen ohnehin im `aria-label`.
Verboten ist nur, sie zu ZEIGEN.

Dasselbe gilt eine Ebene tiefer: ein Abschnitt, der heisst wie sein Panel, benennt sich
gegen seine Geschwister nicht ("Medikamente" neben "Heute faellig" wurde "Alle
Medikamente"). Der Guard prueft JEDES Modul, das eine Leiste rendert, und leitet Leiste wie
Ueberschriften aus dem Markup ab. Zwei Vorfassungen waren Dateilisten: die erste kannte nur
die Einstellungen, die zweite nahm die Gesundheit dazu - eine Allowlist mit zwei Eintraegen.
Der erste Lauf der Regel fand sofort, was beide uebersahen: das Budget zeigte einen Tab
„Budget" unter dem Titel „Budget". Aufgeloest wurde das ueber den TAB, nicht ueber den Titel
(„Uebersicht") - das Budget hat sieben Tabs, von denen einer zufaellig den Modulnamen trug.

**Sie gilt auch fuer Laufzeitdaten, und dort war sie zwei Runden lang blind.** Der Einkauf
zeigte den Namen der gewaehlten Liste zweimal: als aktiven Chip der Listenwahl und direkt
darunter als Kopf mit Umbenennen-Stift und Ueberlaufmenue. Der Guard sah das aus drei
Gruenden nicht - die Chip-Leiste traegt kein `role="tablist"`, der Titel war kein `h1-3`
(ein `span.page-toolbar__title`), und der Name ist gar kein i18n-Key, sondern
`state.activeList.name`. Ein statischer Test kann diesen WERT nicht kennen; er kann aber
die STRUKTUR sehen: rendert eine Seite eine Auswahlleiste ueber eine Sammlung und zeigt sie
dasselbe Feld des GEWAEHLTEN Eintrags noch einmal in einem Titel-Slot, steht derselbe Text
zweimal auf der Seite - unabhaengig davon, welcher es zur Laufzeit ist. Das prueft seit
2026-08-11 eine zweite Sonde in `test-typography.js`. **Der gewaehlte Eintrag IST der
Titel**; was der Kopf sonst trug, gehoert neben ihn - im Einkauf an das hintere Ende der
Chip-Zeile, wo ein Ueberlaufmenue Umbenennen, Import, Kategorien und Loeschen fuehrt. Der
Umbau nahm mobil rund 64px (53 % auf 62 % Contentflaeche, gleichauf mit Aufgaben und
Budget) und loeschte dabei zwei Sonderbehandlungen, die es nur wegen des Kopfes gab: die
responsive Doppelfassung der Aktionen und eine `max-height`-Media-Query, die Listenwahl und
Kopf im Querformat nebeneinander zwang.

**Die Label-Farben-Regel.** Large Titles tragen immer `--color-text-primary`; kein
Gradient-Text und kein Akzent-Titel (beides gehoerte zur abgeloesten Welt; die Tageszeit
spricht allein ueber den Grusstext, die Marke allein ueber das Tile).

**Die Echte-Information-Regel.** Die Versal-Footnote ueber dem Large Title (Apple-News-
Muster, z. B. das Intl-formatierte Datum im Dashboard-Masthead) ist echte Information und
Kanon-Bestandteil. Dekorative Kicker und Eyebrows ohne Informationswert bleiben verboten;
die generische Opt-in-Klasse dafuer ist mit dem Rollout entfallen, weil ihr Name zur
Rueckkehr des Musters einlud.

**Die Initialen-Schwelle-Regel** (2026-08-17, Etappe 3). Unter der Lesbarkeit gibt es keine
Initialen, nur die Farbe. Ein Avatar zeigt seine Initialen - und der Stapel sein „+N" - erst
ab 20px Scheibe und dann nie unter 11px, dem Wert von Caption 2 und damit der kleinsten
Textrolle, die die App ueberhaupt kennt (Verhaeltnis <= 0.55 statt der freien Proportion).
Darunter IST die Scheibe der Kanal: die Nutzerfarbe traegt per Identitaetsfarben-Regel
ohnehin das Signal, der Name steht im `title`. Vorher stand hier eine 9px-Untergrenze, und
die Kalender-Gitter riefen mit `size` 14-16 genau hinein (Sonde `undersized-ui-text`, 13
Fundstellen). Ein 9px-Text sagt weniger als ein sauberer Punkt. Wo der Stapel neben
Fliesstext steht statt in einem Chip, hebt `minFont` die Untergrenze (Agenda-Zeile seit
2026-09-24: 12px auf 22px Scheibe, neben der Metazeile - damals 14px, seit R21 13px) - die Scheibe waechst mit, damit
das Verhaeltnis haelt.

## Layout

- **Grund-Raster:** 4px (`--space-1` = 4px bis `--space-16` = 64px). Content-Spalte max
  1280px (`--content-max-width`), schmale Lesespalte 720px (`--content-max-width-narrow`).
- **Seiten-Gutter:** ein kanonischer Wert `--page-gutter` (16px, ab 1024px 32px), damit
  Kopf und Inhalt dieselbe Fluchtlinie haben. Full-Bleed-Koepfe ruecken ihren Inhalt per
  `--page-inline-pad` auf die zentrierte Spalte - genau EINMAL pro Ahnenkette, sonst
  addieren sich die Raender (Guard `page-inline-pad contract`).
- **Breakpoints, verbindlich:** <=640 Mobile (eine Spalte, Bottom-Nav), 768 Tablet,
  >=1024 Desktop (Sidebar, mehrspaltig), >=1440 Wide; dazu die zweite Achse <500px Hoehe
  (kompakte Hoehe, siehe „Die Chrome-Regel"). Komponenten-interne Umbrueche gehoeren in
  @container-Queries, nicht in neue Viewport-Breakpoints.
- **Lange Listen rechnen nur, was in Sicht ist (`content-visibility: auto`):** Aufgaben (ab der
  zweiten Gruppe), Kontakte und Rezepte seit R20, seit R21 S8 auch die Agenda (ab dem
  zweiten Tag), Vorrat und Inventar (ab der zweiten Gruppe), die Buchungen des Budgets und der
  Einkauf in der einen Spalte. Zeilenweise gilt es seit R22 (D4) erst ab der zwanzigsten Zeile
  (`:nth-child(n+20)`), und der Platzhalter ist die Content-Box der echten Zeile (Kontakte 48,
  Buchungen 45, Rezepte 64px) - mit "je Zeile" ab der ersten sprang die Liste beim Aufbau
  (Kontakte CLS 0,098 -> 0). Immer unter `@supports` mit
  `contain-intrinsic-size: auto none auto <gemessene Hoehe>` (sonst springt der Bildlaufbalken),
  und `overflow-clip-margin` fuer Schatten und Fokusring des Traegers, die die
  Paint-Containment an der Gruppenkante sonst abschnitte. Nicht dort, wo Spalten oder Masonry
  nach Hoehe verteilen (Notizen; Einkauf ab 60rem): Platzhalterhoehen liessen Gruppen beim
  Scrollen die Spalte wechseln. Guard `test:frontend-audit`. Seit R22 (D22) auch IN der Gruppe:
  Aufgaben und Einkauf schieben Zeilen ab `:nth-child(n+20)` auf (Content-Box 85/80px bzw.
  48px; der Einkauf in jeder Breite, weil der Platzhalter die echte Zeile ist). Neu gemessen in
  S9 nach dem 12px-Einzug und der Metazeile unter dem Avatar: 84,6 / 80 / 100,6 (Detailspalte),
  unveraendert. **Seit R22-F (F2.2) auch der Einkauf ab 60rem je Kategorie**, aber erst nach dem
  ersten gezeichneten Bild (`.items-lanes.is-sized`): bis dahin legt jede Kategorie einmal ganz
  und merkt sich ihre Hoehe (`contain-intrinsic-size: auto`), danach wechselt keine die Spalte.
- **Der erste Aufbau einer langen Liste zeichnet nur, was im Bild steht (R22-F, F2.1):**
  Aufgaben und Einkauf bauen ihre Zeilen ueber `utils/row-fill.js` - jede Zeile ausserhalb des
  Bildes (plus ein Viertel Bildschirm) steht als `.row-pending` in der Hoehe ihrer Zeile
  (`--row-pending-size` = dieselbe Content-Box wie das `contain-intrinsic-size` des Moduls) und
  kommt in Happen nach dem naechsten Bild. Ganz gezeichnet wird bei jedem weiteren Aufbau, auf
  dem Rueckweg mit gemerktem Scrollstand (D2), bei einem Deep-Link und bei jeder Eingabe in die
  Liste. Neue lange Listen nutzen denselben Baustein; nachgekommene Zeilen bekommen Zeichen und
  Wischgeste ueber `onRows`. 4x CPU, Frame des Wechsels: Aufgaben 276 -> 96 ms, Einkauf
  216 -> 91 ms (mobil), Laptop 315 -> 114 und 396 -> 125 ms. Guards `test:ux-utils`, `test:frontend-audit`.
- **Eine Notizkarte zeigt mobil drei Textzeilen (R22-F, F2.3):** mit Titel zwei Zeilen
  Vorschau, ohne Titel drei (`.note-card__title + .note-card__content`); Checklisten bleiben
  ungekappt, weil sie auf der Karte bedienbar sind. 390x844: vier statt drei Notizen ganz im
  ersten Bild. Guard `test:mobile-room-work`.
- **Die Metazeile der Aufgabe laeuft unter den Avatar (R22, D17):** ab 640px ist eine Zeile mit
  Personenstapel ein Raster wie mobil - der Stapel steht neben dem Titel und liegt ueber beiden
  Zeilen (`align-self: start`, sonst streckte er die Titelzeile um 1px und der Platzhalter
  stimmte nicht), die Metazeile spannt bis unter ihn (1280: 194 -> 230px, keine abgeschnittene
  Faelligkeit mehr). Im Detail steht „Wer hat erledigt?" als erster Eintrag des Mehr-Menues
  („Erledigt von ..."), nicht als Icon hinter „Erledigen"; die Quittung nach Haken oder Wisch
  nennt die Aufgabe. „Neue Aufgabe": Faelligkeit und Uhrzeit teilen eine Zeile (`.form-pair`),
  erst bei 320px untereinander. Guards: `test:frontend-audit` ("R22 D17"),
  `test:task-detail-finish`, `test:task-series-feedback`, `test:people-pickers`.
- **Ein Kontextmenue geht am Zeiger auf (R22 S9):** ein Menue ohne sichtbaren Ausloeser
  (Personenauswahl der Aufgabenzeile per Rechtsklick/Long-Press, „Erledigt von ..." aus dem
  Mehr-Menue des Detail-Fusses) oeffnet ueber `showPopoverMenuAt(panel, { x, y, above })`
  (utils/popover-menu.js): linke obere Ecke am Punkt, kippt auf die andere Seite, wo kein Platz
  ist; `above` stellt es ueber einen Ausloeser im Fuss. Der Punkt gilt fuer ein Oeffnen. Vorher
  rechnete das Menue am unsichtbaren Knopf und hing am Laptop ueber der Seitenleiste.
  Guards: `test:popover-menu`, `test:people-pickers`, `test:task-detail-finish` ("R22").
- **Eine Zeile baut nur, was man sieht (R22, D22):** Zeilenmenues (Mehr, "Wer hat erledigt?")
  legen ihre Eintraege per `popoverMenuHtml({ defer: true })` / `rowMenuHtml({ defer: true })`
  in ein `<template>`, das `beforetoggle` beim Oeffnen einhaengt (die Wurzel braucht
  `installPopoverMenus`); Aufdeck-Flaechen tragen ihren Inhalt als `deferredRevealHtml()`,
  eingehaengt mit `touchstart` bzw. dem Wisch-Hinweis (utils/swipe-row.js). Lucide-Zeichen einer
  langen Liste kommen je ZEILE in Sicht-Reihenfolge (`drawIconsInSightOrder`, utils/ux.js: Kopf
  und 30 Zeilen sofort, der Rest in Happen je Task). Wer im Aufbau misst, misst nur, was er
  braucht: `getClientRects()` an einer aufgeschobenen Zeile zwingt deren Layout nach (Vorwahl
  der Spaltenform fragt deshalb nur bis zur ersten sichtbaren Zeile, utils/master-detail.js),
  `innerWidth` erzwingt ein ausstehendes Layout (`matchMedia` nicht). Eine Kanban-Spalte zeigt
  hoechstens 50 Karten, darunter "N weitere anzeigen" (`KANBAN_COL_CAP`). Gemessen mobil 4x CPU,
  261 Aufgaben/259 Artikel mit je einer Gruppe von 120: Aufbau-Frame 593 -> 263 ms bzw.
  581 -> 201 ms, Knoten 22.100 -> 11.100 bzw. 13.000 -> 7.800; Brett 290 -> 120 ms (4.100 -> 1.000 Knoten). Guards
  `test:popover-menu`, `test:task-filters`, `test:shopping-ux`, `test:ux-utils`,
  `test:master-detail`, `test:kanban-columns`, `test:frontend-audit`.
- **Fensterhoehe in einer Rechnung:** `var(--viewport-height)`, nie `100dvh` direkt
  (#1276). Der Token steht auf `100vh` und kippt per `@supports (height: 100dvh)` auf dvh.
  Ein vh-Zwilling davor rettet nur Deklarationen OHNE `var()`/`env()`: mit `var()` gilt
  `calc(100dvh - var(--space-4))` beim Parsen als gueltig, verdraengt den Zwilling und wird
  erst beim Berechnen ungueltig - dann faellt `max-height` auf `none`, nicht auf 100vh
  (Chrome vor 108, Safari vor 15.4). Die Shell-Hoehe an `body` und `.app-shell` behaelt ihre
  Kette `100vh` / `-webkit-fill-available` / `100dvh`. Guard:
  `test/test-old-browser-fallbacks.js`.
- **Was von der Breite eines BAUSTEINS abhaengt, fragt seinen Container - und die Regel hat
  zwei gemessene Anlassfaelle.** Das Notizen-Raster im Dashboard haengte seine Spaltenzahl
  an Viewport-Breakpoints und stand ab 1024px dreispaltig, auch wenn die Notizkarte selbst
  nur EINE Rasterspalte breit war: drei Notizen in je ~105px, uebrig blieben drei Ellipsen
  nebeneinander. Seine Schwellen sind jetzt Kartenbreiten und aus der Kachel
  zurueckgerechnet (eine Notizkachel braucht ~200px fuer Titel und zweizeilige Vorschau,
  also 420px fuer zwei und 620px fuer drei). Die Wand-Buehne schaltet aus demselben Grund
  auf zwei Spalten - ein fuenfter Viewport-Breakpoint neben den vier verbindlichen waere die
  Alternative gewesen.
  **Die Falle dabei:** `container` gehoert an den VORFAHREN, nie an das Element, das die
  Query stellt - `@container` sucht immer aufwaerts. An der Buehne selbst deklariert, blieb
  die Regel darunter wirkungslos und die Wand einspaltig, bei jeder Breite und ohne
  Fehlermeldung.
- **Dashboard-Raster:** `auto-fill` mit Mindestspalte 280px (`minmax(min(100%, 280px), 1fr)`)
  und `dense`-Flow in JEDEM Zustand - auch mit eigener Reihenfolge und im Bearbeiten-Modus
  (2026-09-23; vorher schaltete eine Umsortierung auf die Quellordnung, 18 % Loecher bei
  1440px). Die gespeicherte Reihenfolge ist die Rangfolge; was an Loechern bleibt, liegt an den
  Groessen, und dafuer schlaegt der Bearbeiten-Modus eine vor. Bei 240px legte ein
  1440er-Fenster vier 270px-Spalten an, in denen die Ellipse reihenweise echte Inhalte kappte („Familienmitg…", „Tante Claire Bec…"). Eine
  Spalte, in der Namen nicht ganz stehen, ist keine Spalte; drei ruhige tragen dieselben
  fuenf Karten besser als vier gedraengte, und ab ~1700px kommt die vierte von selbst
  zurueck.
- **Navigation:** mobil eine schwebende Glas-Tab-Bar-Kapsel (64px hoch plus 8px Luft und
  safe-area; die Bar-Zone selbst ist transparent, das Glas traegt die Kapsel), die UEBER dem
  Inhalt liegt - der Scrollport reicht bis zur Unterkante (Kopfregel mobil). Ab 1024px
  Glas-Sidebar (56px kollabiert / 220px expandiert) mit gleitender Aktiv-Pille.
  `--nav-bottom-height` enthaelt den Home-Indikator schon; wer mit der Zone rechnet, addiert
  `--safe-area-inset-bottom` nie ein zweites Mal (Toast-Stapel bis R21: 58 statt 24px Luft,
  `test:mobile-chrome`).
- **Touch-Targets:** `--target-base` 44px auf Zeigergeraeten, waechst via
  `@media (hover: none)` auf 48px. Das Kriterium ist die Zeigerfaehigkeit, nicht die Breite;
  die 44pt der iOS-HIG sind ein Minimum, kein Ziel.
- **FAB-Geometrie:** `--target-base` unter 1024px (44px am Zeiger, 48px am Finger), weil der
  Knopf dort IN der Nav-Kapsel sitzt, und `--target-lg` (48px) ab 1024px, wo er wieder frei
  ueber dem Inhalt schwebt. **Hier stand bis 2026-08-11 „52px mobil, 48px ab Desktop":** die
  52px sind das Grundmass des frei schwebenden Knopfes in der Wurzel und werden von beiden
  Groessenklassen ueberschrieben, greifen also in keinem Viewport mehr. `--fab-safe-zone` ist
  der NACHLAUF am Inhaltsende (`padding-block-end` an `.app-content`), sodass am Scroll-Ende
  nichts Bedienbares unter dem Knopf liegt; unter 1024px ist sie 0, weil er dort in der
  Nav-Kapsel sitzt. Der FAB lebt in der Shell-Layer `#fab-layer`, nicht im Scrollport. Siehe
  „Die Nachlauf-Regel".
- **Icon-Stufen:** genau vier (12/16/20/24px, `--icon-sm..xl`); Lucide bleibt das Icon-Set,
  keine Glyphen-Fonts.
- **Ein Modul fuehrt EIN Zeichen, in EINER Hand** (2026-08-17). Wo ein Modul sich zu erkennen
  gibt - Leiste, Sidebar, „Mehr"-Blatt, Widget-Kopf, Kennzahl-Kachel, „Heute wichtig", Suche,
  Wand -, zeichnet Yuvomis eigener monoliniger Satz (`public/nav-icons.js`); was er nicht
  kennt, faellt auf Lucide zurueck. Aktions- und Zustandszeichen (Chevron, Plus, Uhrzeit-Slot
  einer Mahlzeit) bleiben Lucide - sie beantworten nicht „welches Modul".
  **Der Fehler war nicht ein falscher Glyph, sondern die dritte Tabelle:** die Zuordnung
  Modul → Zeichen stand in `navItems()`, in `widgetIcon()` und noch einmal an jeder
  `widgetHeader()`-Aufrufstelle. Sie sind auseinandergelaufen - Notizen war in der Leiste ein
  Zettel (`sticky-note`) und im Widget-Kopf eine Stecknadel (`pin`), Haushaltshilfe ein Pinsel
  und auf der Kachel Funkeln (`sparkles`). Jetzt gibt es `MODULE_ICON`, und die Koepfe
  bekommen ihre WIDGET-ID statt eines Icon-Namens: die Abweichung ist nicht mehr schreibbar.
- **Die Strichstaerke ist die Handschrift, nicht ein Zufall** (`--icon-stroke`, 1.5 gerenderte
  px plus `vector-effect: non-scaling-stroke`). **Seit R21 (D4) fuer JEDES Zeichen**: Lucide
  (`.lucide`), der eigene Satz und die eigenen Terminzeichen zeichnen in jeder Groesse 1,5px;
  vorher standen 9 bis 12 Strichstaerken (1,0-4,7px) nebeneinander. `vector-effect` steht an
  den STRICHEN (`.lucide *`), nicht am `<svg>`: die Eigenschaft erbt nicht, und an der Wurzel,
  wo sie bis R21 stand, wirkte sie nie - die Modulzeichen zeichneten skaliert (1.5 bei 16px =
  1,0px). Guard `test:frontend-audit` "Strich der Modulzeichen". Der eigene Satz
  zeichnet mit 1.6 auf viewBox 24, Lucide mit 2; bei 20px bzw. 16px ergab beides zufaellig
  1,333px - die Uebereinstimmung hing an den GROESSEN, nicht an einer Regel, und fiel, sobald
  ein eigenes Zeichen bei 16px stand. CSS schlaegt das `stroke-width`-Attribut, deshalb gilt
  der Wert fuer beide Haende. **Der Wert ist die Mitte der Lucide-Spanne** (Entscheidung Ulas
  2026-10-15, A/B-Probe): Lucide zeichnet bei 16-20px 1,33-1,67px, die Modulzeichen standen mit
  1.35 als duennste Linie daneben (Mehr-Blatt: 1,35er Kacheln ueber 1,67er Icons; Kopf: Siegel
  neben 2,0er Werkzeugen; auf 1x im Dunkel blass). 1.5 liegt in der Mitte; der Guard in
  `test:frontend-audit` rechnet die Mitte aus `--icon-md`/`--icon-lg`, statt die Zahl festzunageln.
- **Motion:** Dauern kanonisch 80-400ms (`--duration-2xs..2xl`), immer in ms. `--ease-out`
  cubic-bezier(0.16,1,0.3,1) fuer Einblendungen; Feder mit Overshoot `--ease-glass`
  cubic-bezier(0.34,1.56,0.64,1) fuer Glas-Elemente - seit R21 dort, wo der Browser `linear()`
  kennt, als gedaempfte Feder (`@supports` in tokens.css): gleicher Gipfel (1,095), gleiche Dauer,
  aber in Ruhe ab 57 % statt 91 % der Zeit (Blatt-Einfahrt gemessen: Ueberschwinger 117 -> 67ms
  sichtbar, Gipfel bei +100 statt +162ms; Guard `test:motion` "Glasfeder D1"); die Sidebar-Pille bekommt die sanftere
  Feder `--ease-sidebar-glide`, damit sie nicht ueber das Ziel-Item hinausschiesst.
  Hoehenwechsel (Zeile oder Gruppe klappt ein/auf, `collapseOut`/`expandIn` in `utils/ux.js`,
  samt Gruppenwinkel) laufen auf der symmetrischen `--ease-in-out` cubic-bezier(0.42,0,0.58,1):
  `--ease-out` nahm dort 80 % der Hoehe in 60ms, die Nachbarn sprangen hinterher. **Ausklappen
  ist seit R19 Compositor-Arbeit:** die Zeile blendet aus und wird 3 % kleiner (opacity,
  transform), faellt dann in einem Frame auf null, und die Nachbarn gleiten per FLIP
  (`flipPlayElements` in `utils/flip.js`) nur mit `transform` nach - keine Hoehe, kein Abstand
  je Frame (am 4x gedrosselten Telefon sprang die Hoehenanimation in Stufen). Unter reduzierter
  Bewegung blendet die Zeile aus und die Nachbarn blenden an ihrer neuen Stelle ein, statt um
  die Zeilenhoehe zu springen. **Seit R21 (D3) erst gleiten, dann schliessen:** fiel die Zeile
  sofort auf null, schrumpfte ihre Karte (`.row-carrier`) im selben Frame, waehrend die Zeilen
  darunter noch heranglitten - die letzte stand bis zu 64px abgeschnitten, und unter der Karte
  lag ein leeres Band derselben Hoehe. Jetzt misst Schritt 2 die geschlossene Lage nur (nie
  gemalt), die Nachbarn gleiten per `transform` dorthin, jede Karte, die eine Flaeche malt,
  kuerzt ihre Unterkante im selben Takt per `clip-path: inset(... round ...)`, und erst dann
  faellt die Zeile auf null - nach einem gemalten Inline-Halt, damit die Layout-Messung nichts
  zaehlt (CLS 0,048 -> 0). Zeilen, die im selben Moment gehen, schliessen gemeinsam. Der Zaehler
  der Gruppe wechselt im Frame, in dem die Zeile ausblendet (Aufgaben @913 -> @497ms, Einkauf
  @1680 -> @1257ms); die Verweildauer davor bleibt. Guard `test:motion` "collapseOut R21 (D3)".
  **`expandIn` spiegelt das seit R19:** das Element steht sofort in
  voller Hoehe und blendet mit 3 % Skalierung ein, die Nachbarn gleiten per FLIP aus der Lage,
  die ein Frame mit `display: none` am Element misst (damit faellt auch der `gap` des Traegers
  weg - die Option `absorbGap` ist entfallen). `interpolate-size` waere wieder Layout je Frame.
  prefers-reduced-motion schaltet Signature-Animationen ab.
- **Eine Kurvenfamilie (R16):** Interaktions-Motion nimmt Dauer UND Kurve aus Tokens. Die drei
  Shorthands `--transition-fast/base/slow` bestehen aus `var(--duration-*) var(--ease-out)` -
  sie fuehrten bis R16 das Keyword `ease` (306 Nutzungen gegen 70 mit `--ease-out`), Hover und
  Press liefen damit auf einer anderen Kurve als Seiten, Dialoge und Listen. Ein Shorthand ist
  Dauer + Kurve: dahinter steht nie eine zweite Kurve (die Deklaration waere ungueltig). Kein
  `transition: all`, keine Literal-Dauer, kein nacktes Keyword - weder im Stylesheet noch in
  Skripten (Inline-Transitions zeigen auf `var(--duration-*) var(--ease-*)`, die Web Animations
  API liest `durationToken()`/`easingToken()` aus `utils/ux.js`). Ausgenommen sind nur
  Endlos-Schleifen (`infinite`: Wetter, Spinner, Shimmer) und die acht benannten Stellen
  in `test:motion` (`MOTION_EXCEPTIONS`, jede mit Grund). Eintritt darf federn, Austritt ist
  kuerzer und ohne Ueberschwinger; im Arbeitsfluss laeuft nichts laenger als 300ms. Unter
  reduzierter Bewegung gilt EINE "aus"-Konvention: `0s` aus `reset.css`, kein `0.01ms` daneben.
  **Spinner (R21, D12):** EINE Statusdrehung (`@keyframes status-spin`, layout.css) in EINEM
  Tempo (`--spin-period`, 700ms) - vorher Knopf 550, Anmeldung 700, Dokumentvorschau 800ms. Ein
  Spinner ist Statusbewegung und dreht unter reduzierter Bewegung weiter (Abmeldung per
  `--motion-blend: var(--spin-period)` in reset.css); ein stehender sah aus wie ein haengender
  Vorgang. Dekor (Wetter-Strahlen) bleibt aus. Guard: `test:motion` ("Spinner D12").
- **Die Titelkante im Blatt steht (R21):** ein Kopf mit Knoepfen richtet die ERSTE Titelzeile
  mittig an ihnen aus (`align-items: flex-start` plus `(--target-base - Zeilenhoehe) / 2` am
  Titel), weitere Zeilen wachsen nach unten. Vorher zentrierte er: ein zweizeiliger Titel
  rutschte an die Polsterkante, die Titelkante sprang von Aufgabe zu Aufgabe um 12px (25 gegen
  13px). Guard: `test:mobile-chrome`.
- **Blatt von unten - ein Paar:** Dialog-Sheet, Mehr-Blatt und die mobile Suche fahren aus
  `--sheet-in` (`--duration-xl` + `--ease-glass`) und `--sheet-out` (`--duration-md` +
  `--ease-out`), mit dem kurzen Hub `--sheet-lift` (24px) und einer Blende. Vorher drei
  Bewegungen fuer dieselbe Geste (Dialog 24px/Feder/300ms, Mehr-Blatt Vollhub 250ms, Suche
  Vollhub). Der Vollhub ist entfallen, weil die Feder ihn nicht traegt: ueber die volle Hoehe
  wirft sie das Blatt sichtbar ueber seine Ruhelage. Geschlossen sind Mehr-Blatt und Suche
  durchsichtig, nehmen keinen Zeiger und sind `inert`.
- **Das Anlegen-Blatt in zwei Frames (R21 S8):** die FAB-Blaetter der Module oeffnen gestuft
  (`openModal({ staged: true })`): im Tipp stehen Dialog, Abdunklung und Kopf, die Tafel ist
  unsichtbar und faehrt nicht ein (`.modal-panel--pending`); nach dem ersten Bild kommen
  Formular, Fusszeile, Fokus und `onSave`, und erst dann beginnt die Einfahrt - mit der ganzen
  Feder, weil keine Arbeit mehr in ihre ersten Frames faellt. Eine leere Tafel, die waechst, zeigt
  sich nie. Gemessen 390px, 4x CPU, Aufgaben: INP 160 -> 72 ms, Abdunklung 135 -> 66 ms nach dem
  Tipp, Tafel 135 -> 159 ms (ein Frame spaeter, dafuer ohne Luecke in der Feder). Gestuft nur fuer
  Aufrufer, die nach `openModal()` nicht synchron ins Formular greifen; wer ein offenes Modal
  abloest (Leseansicht -> Bearbeiten), fuellt sofort. Guard: `test:modal-dialog`.
- **Die Dokumentvorschau ist nie eine leere Buehne (R21 S8):** der Betrachter stellt die Vorschau,
  die die Kachel schon gerastert hat (data:-URL nur im Seitenspeicher,
  `utils/document-thumbs.js`), als Poster in dieselbe Rasterzelle wie das Bild, darueber ein
  Ladezeichen in seiner Kapsel; das Bild blendet darueber (`--duration-sm`), sobald es da ist oder
  scheitert, und das Poster tritt zurueck (Deckkraft, damit ein Bild mit Transparenz es nicht
  durchscheinen laesst). Gleiches Seitenverhaeltnis, also gleiche Groesse - nichts springt. Am
  Telefon zieht das Poster beim PDF in den Platz der ersten Seite, bis pdf.js sie gezeichnet hat.
  Ohne Kachel-Vorschau steht nur das Ladezeichen. Guards: `test:documents-ux`,
  `test:documents-viewer-focus`.
- **Menue-Ausgang:** Popover-Menues (`.popover-menu`, Dokument-Kontextmenue) blenden aus und
  nehmen die 4 % Wachstum zurueck (`overlay`/`display` diskret, `--duration-xs` gegen
  `--duration-md` der Einfahrt). Zwei `transition`-Deklarationen, die erste ohne
  `allow-discrete`: wo der Browser es nicht kennt, schliesst das Menue hart wie zuvor.
- **Listenbewegung - der Standard (`utils/list-motion.js`):** eine Liste, die ihre Zeilen neu
  baut, zeichnet ueber `redrawList(host, render, { selector, keyAttr })`: der Aufbau aus dem
  Leeren blendet einmal gestaffelt ein, eine neue Zeile tritt ein (`expandIn`), eine reine
  Umsortierung gleitet (FLIP) - nie zwei Bewegungen uebereinander. Eine Zeile, die geht, klappt
  VOR dem Neuzeichnen aus (`collapseRow`). Nutzer: Aufgaben und Einkauf (Bestand),
  Haushaltshilfe, Entsorgung (drei Listen), Vorrat, Belohnungen; seit R17 auch Notizen,
  Dokumente, Kontakte, die Buchungsliste des Budgets, Inventar, Abos, Aufteilung (Ausgaben und
  Serien) und Geburtstage - jede Seite ueber einen Schalter `motion: true`, den nur setzt, wer
  die DATEN geaendert hat. In einem Kartenraster (Notizen, Dokumente im Raster) klappt die
  gehende Karte NICHT vorher aus: die Nachbarkarte haelt die Zeilenhoehe, die Nachbarn gleiten
  in die Luecke (FLIP). Filter und Suche zeichnen ohne
  Bewegung neu - dort wechselt die Frage, nicht die Liste. Ein Skelett gehoert zum ERSTEN
  Laden; danach bleibt der Inhalt stehen, bis der neue da ist. **Skelett (R19):** die Linien
  erscheinen erst nach `--duration-sm` (kommt der Inhalt schneller, sieht man sie nie; die
  Kartenflaechen stehen sofort und halten das Layout), der Schimmer ist ein Band als `::after`,
  das per `transform` gleitet (vorher `background-position`: Paint je Frame). Die Uebersicht
  blendet vom Skelett zum Inhalt ueber `swapContent`. `stagger` laeuft seit R19 ueber Web
  Animations mit `delay` und `fill: backwards` statt ueber Timer und Inline-Werte.
  **Kein Sprung beim Aufbau (R22, D4):** was nach dem ersten Bild kommt, darf nichts
  Sichtbares verschieben - auch nicht nach einer Eingabe (Reiterwechsel), wo CLS den Sprung
  ueber `hadRecentInput` verschweigt; die Sonden zaehlen deshalb alle `layout-shift`-Eintraege.
  Einstellungsblaetter: ein Abschnitt erscheint ganz und in der Reihenfolge des Blatts
  (`revealSectionsInOrder`, shell.js); bis dahin liegt sein Traeger ausserhalb des Flusses
  (`[data-pending]`, settings.css), das Skelett steht an der Kante. Kaltstart mobil Mitglieder
  0,25 -> 0, Modulblatt Kalender 0,53 -> 0, Gesundheit 0,20 -> 0 (Desktop 0,13/0,10 -> 0). Guard:
  `test:settings-navigation`. Budget-Reiter Abos und Aufteilung: der Kennzahl-Slot steht ab dem
  ersten Bild in Zielform (`metricGlanceSkeletonHtml`/`metricCardsSkeletonHtml`, dasselbe Markup
  mit `.skeleton-text`), nach dem Reiterwechsel mobil 0,0996/0,060 -> 0, Laptop 0,025 -> 0
  (Guard `test:budget-ui`). Gesundheit mobil: solange die Heute-Region wartet, steht die
  Bereichsliste unsichtbar an ihrem Platz (`visibility: hidden`, hoechstens
  `PRIORITY_WAIT_MS`), 0,023 -> 0 (Guard `test:health-nav`). Zeilenweise `content-visibility`
  siehe „Lange Listen" (ab Zeile 20, Platzhalter = Content-Box, `test:frontend-audit`).
- **Inhaltswechsel - der Standard (`utils/content-swap.js`):** derselbe Traeger, neuer Inhalt
  (Reiterwechsel im Modul, Monats-/Wochen-Blaettern, Bereichswechsel) tauscht ueber
  `swapContent(host, update, { direction })`: Blende ab 0,4 Deckkraft (kein leerer Frame),
  auf Wunsch 8px Versatz in Schrittrichtung (in RTL gespiegelt, derselbe Richtungssinn wie das
  Wischen), `--duration-md` + `--ease-out`. `update()` laeuft immer zuerst und synchron - der
  Endzustand haengt an keiner Animation. Reduzierte Bewegung: nur eine kurze Blende. Ein neuer
  Aufruf bricht den laufenden ab, nichts sperrt Eingaben. Die Richtung kommt aus
  `wireTablist` (`onChange(id, { direction })`) bzw. vom Stepper (`swapPeriod` in
  `utils/period-stepper.js`). Die Seite selbst wechselt weiter ueber `swapPage` (naechster
  Punkt). Zwei kleine Geschwister in `utils/ux.js`: `toggleRegion(region, open)` fuer per
  `hidden` geschaltete Aufklapper, `growBars(root, { selector, memo })` fuer Balken ueber
  `--bar-scale` (der Endwert steht im Markup, der Helfer setzt nur den Startwert). Seit R17
  tauschen darueber auch die Detailspalte von "Liste + Detail" (nur beim Wechsel der Auswahl,
  ohne Richtung - ein Versatz machte die Spalte zum Bezugsrahmen ihres klebenden Kopfes), das
  Tagesraster des Datepickers (gerichtet), die Schritte des Erststart-Dialogs (die Karte steht,
  so hoch wie der hoechste Schritt) und die Serienzeile der Aufteilung beim
  Pausieren/Fortsetzen. Drittes Geschwister: `drawChartOnce(memo, { lines, arcs })` - Kurven
  zeichnen sich entlang der Zeitachse ein (`clip-path`), Ringsegmente fuellen sich im
  Uhrzeigersinn, EINMAL je Sitzung und Diagramm; Blaettern spielt es nicht neu ab.
- **Zeitraum-Wisch (`utils/period-swipe.js`):** Kalender (Monat, Woche, Tag) und seit R17 die
  Budget-Reiter mit Zeitachse (`TAB_CAPS.month`: Budget, Plan, Berichte) blaettern per
  waagerechtem Wisch ueber denselben Stepper wie die Pfeile. Senkrecht gewinnt das Scrollen;
  was selbst waagerecht arbeitet (`.u-scroll-fade`, die Diagrammflaeche der Berichte,
  Eingabefelder), behaelt seinen Finger. Das Hereingleiten steht in layout.css. Im Kalender
  seit R21 echtes Umblaettern mit vorgeladenem Nachbarn und stehender Achse (D2, siehe
  „Der Zeitraum-Wisch" unter Wischbedienung). Der Weg eines Blatts ist, was neben der Achse
  zieht: in der Woche die Spalten, im Tag (eine Karte) seine Spalte - dem Nachbarn sind Rand und
  Achsenflaeche abgeschnitten, sonst zog zwischen den Spalten eine 76px-Luecke mit (S9a,
  `periodSpan`/`alignPeriodGhost`, `test:calendar`).
- **Titel im Kopf:** der Groessenwechsel des Large Title faellt weiter in einen Frame (keine
  `font-size`-Transition); der Titel blendet an der neuen Stelle ein (`opacity`,
  `--duration-xs`), ebenso der angedockte Titel der scrollenden Seiten (ein und aus).
  **Einklappen ohne Sprung (R20):** gedeckelte Koepfe (Kalender, Budget, Gesundheitsbereiche)
  und die Faltzeile der Kueche wechseln ihren Zustand in EINEM Layout; was dabei springt (Zeilen
  des Kopfes, alles darunter), gleitet per FLIP mit `transform` (`--duration-md`). Ein
  Inline-`transform` haelt die alte Lage zwei Frames, bevor die Animation uebernimmt - eine sofort
  gestartete Compositor-Animation zaehlt die Layout-Shift-Messung nicht. Gemessen 390px: CLS
  Kalender 0,061 -> 0,001, Budget 0,059 -> 0, Einkauf 0,058 -> 0,001 (`holdThenGlide`,
  utils/ux.js). Unter reduzierter Bewegung steht der Wechsel; der Titel blendet (`--motion-blend`).
  **Auch IN einer Zeile (R22-F):** gehalten werden neben den Zeilen ihre Teile auf Ebene zwei
  und drei (`nestedHeadParts`; ohne Zeichen und ohne Verborgenes), in Dokumentreihenfolge hinter
  ihren Vorfahren - jedes Kind haelt dann nur seinen eigenen Weg in der Zeile. Kalender Agenda
  390px 0,0098 -> 0,0003, Tablet 0,051 -> 0,0005 je Scroll (`test:ux-utils` "R22-F").
  **Die Faltzeile folgt der Richtung (R22, D15):** 24px abwaerts falten sie, 40px aufwaerts ab
  dem Wendepunkt holen sie mitten in der Liste zurueck (vorher erst bei scrollTop < 8); was der
  Umbau selbst ausloest (der Browser klemmt am Listenende), setzt nur den Wendepunkt
  (`foldByDirection`, utils/ux.js; `test:ux-utils` "R22 D15"). Die 65-px-Koepfe der uebrigen
  Module bleiben bei der Lage-Regel.
  **Gemessen wird nach dem Gleiten (R21):** der ResizeObserver mass die Zeilen sonst an ihrer
  gehaltenen alten Lage, nahm dem Kopf die Lead-Zone, und er klappte nach dem ersten Ausklappen
  nie wieder ein. **Ein Modul kann den Kopf mit seiner Flaeche falten (R21, D9):** ein Port mit
  `data-head-collapse="module"` urteilt nicht selbst, das Modul ruft `requestHeadCollapse()` -
  der Telefon-Monat faltet ihn mit dem Raster (Guard `test:ux-utils` "R21").
- **Seitenwechsel:** Kontinuitaet vor Effekt - Navigation, Kopf und Tab-Leisten STEHEN, nur
  der Inhalt wechselt. Der Router tauscht per View Transition (`utils/view-transition.js`).
  **Seit R22 (D1) schneidet der Wechsel zwischen gleichrangigen Zielen** (Tab-Leiste,
  Seitenleiste, Mehr-Blatt, Befehlspalette/Suche, Kuechen-Reiter): das alte Bild steht, bis die
  Zielseite gezeichnet hat (hoechstens `FIRST_RENDER_WAIT_MS`, danach ihr Skelett), dann ein
  harter Tausch ohne Blende in Wurzel und Kopf (`html.page-cut`, layout.css). Pille,
  Aktivzustand und Kuechen-Kapsel wechseln im Tausch selbst und springen (`onSwap` in
  `renderPage`, `updateNav(path, { instant })`, Kuechen-Leiste `markOnNavigate: false`) - im
  Frame des neuen Inhalts; den Tipp quittiert bis dahin der Druckzustand, nach
  `NAV_ACK_MS` (150 ms) ohne Tausch zieht die Navigation vorab nach. Gemessen vorher 13-15
  Frames Doppelbelichtung, Pille 100-250 ms vor dem deckenden Inhalt (mobil 294-353 ms,
  Laptop 294-394 ms bis deckend); nachher 0 Blendframes, Pille und Inhalt im selben Frame
  (77-125 ms nach dem Tipp, 4x CPU 159-293 ms). Gerichtet bewegt sich nur der Weg in die
  Hierarchie und zurueck (Drill-down unten). Reduzierte Bewegung und Browser ohne API: derselbe
  Schnitt. Nie Versatz oder Feder auf Inhalt. Ausgaenge (Sheet, Dialog, Overlay) laufen auf jeder Breite und
  schlagen ihre Einfahrt per Spezifitaet, nicht per Ladereihenfolge (Guard `test:motion`).
  Seit R18 traegt die KAPSEL den Namen `nav-bottom` selbst (nicht ihr Elternknoten: der wurde
  zur Backdrop Root, das Glas fiel fuer die Dauer der Blende aus), ihre Pille und der
  schwebende FAB haben eigene Namen und stehen. `fab-in` ist die Ankunft EINES FAB, nicht jeder
  Seite: es spielt nur, wenn die Vorseite keinen hatte (`html.fab-steady`). Waehrend des
  Tauschs staffelt keine Liste (`stagger` schweigt waehrend `html.page-swapping`). Ein Tipp
  waehrend des Tauschs bricht ihn ab UND kommt an (R19): Chromium trifft ihn auf `<html>`, `swapPage` haelt
  seinen `click` dort an und reicht ihn nach dem Ende des Tauschs und der Navigation an das
  Element an derselben Stelle (vorher ging er verloren, gemessen 0 von 12 Doppeltipps).
  **Das neue Bild zeigt den Inhalt, nicht das Skelett (R21, D1):** der Update-Callback wartet
  auf den Render der Zielseite, hoechstens `FIRST_RENDER_WAIT_MS` (150 ms); so lange steht das
  alte Bild. Vorher zeigte das neue Bild 0 von 6 Mal Inhalt, der echte Inhalt sprang 45-123 ms
  (4x CPU: bis 245 ms) spaeter mitten in die Blende; jetzt 6 von 6 auf 390 und 1280, 1x und 4x.
  Was waehrenddessen laeuft (die Pille seit dem Tipp), setzt danach an seiner Stelle fort
  (`holdRunningAnimations`, der Start ruckt um die Wartezeit - `pause()` wirkt dort nicht, die
  Zeitleiste steht). Der Router gibt dazu Scrollstand des Rueckwegs und Nachzuegler-FAB in
  denselben Render. Ein blendendes Bild unter einer stehenden Gruppe (`animation: none`) traegt
  `animation-fill-mode: both`, sonst steht es im letzten Frame wieder deckend (Geisterframe des
  Kopfes, R21). Guards: `test:motion`. **Rueckweg zur Uebersicht ohne Netz:** ein voller Stand,
  der juenger als eine Minute ist (dieselbe Regel wie beim Zurueckkehren in den Tab), zeichnet
  sofort und fragt danach still nach (stale-while-revalidate, neu gebaut nur bei anderer
  Antwort); jeder geglueckte Schreibvorgang (`yuvomi:write` aus `api.js`) verwirft ihn, die Wand
  nimmt nie einen. Neues Bild mobil +26-32 ms statt +108 (4x: +84 statt +141). Guards:
  `test:dashboard-clarity`, `test:api`.
- **Bewegung haengt an der Beruehrung, nicht am Zustand (R18):** eine Zustandsklasse
  (`--checked`, `--done`, `.is-*`) traegt Aussehen, nie eine `animation` - sie spielte bei jedem
  Neuzeichnen auf Zeilen, die niemand beruehrt hat. Die Quittung eines Hakens startet der
  Handler: `acknowledgeCheck(el, { checked })` in `utils/ux.js`, ein Ueberschwinger
  (1 - 1,16 - 1 in `--duration-md`), beim Zuruecknehmen ein Nachgeben (1 - 0,9 - 1 in
  `--duration-sm`). Wer danach neu zeichnet, wartet auf ihr Promise. Guard: `test:motion`
  (`STATE_ANIMATION_EXCEPTIONS`, zwei benannte Stellen am Large Title).
- **Drill-down hat eine Richtung (R18):** wo eine Ebene die andere ERSETZT (Einstellungen ohne
  Seitenleiste: Uebersicht <-> Blatt; Gesundheit schmal: Uebersicht <-> Bereich), laeuft der
  Wechsel ueber `swapContent` mit `direction` +1 hinein, -1 zurueck. Das ist die benannte
  Ausnahme zur Regel "Seiteninhalt bewegt sich nicht": der Wechsel zwischen Geschwistern
  schneidet (R22, D1). Neben einer Seitenleiste bzw. in der Split-Ansicht bleibt es bei der Blende.
  **Seit R19 mit altem Bild (`swapRegion(host, update, { direction })`, utils/content-swap.js):**
  eine View Transition mit Typ `region-forward`/`region-back`/`region-fade` (Regeln in
  layout.css, Name `region-swap` nur fuer die Dauer). Vorwaerts schiebt sich die neue Ebene von
  der Seite herein (24 %, `--duration-lg`), die alte tritt um ein Drittel zurueck und blendet
  aus; zurueck schiebt sich die alte Ebene hinaus und liegt dabei oben. Die Gruppe steht und
  schneidet auf die Region zu, die Wurzel zeigt nur ihr lebendes Bild (eine gleitende
  Segment-Kapsel im Kopf friert nicht ein), Navigation/Kapsel/FAB stehen wie beim
  Seitenwechsel. Reduzierte Bewegung: nur Blende (`--duration-sm`). Ohne
  `:active-view-transition-type()` faellt es auf `swapContent` zurueck. Nutzer: Einstellungen
  (Uebersicht <-> Blatt) und der Kalender-Ansichtswechsel (Richtung nach der Leiste Monat ->
  Woche -> Tag -> Agenda; vorher eine richtungslose Blende). **Seit R21 wie der Seitenwechsel
  (D1):** gibt `update` ein Promise zurueck, wartet das neue Bild darauf (hoechstens 150 ms);
  die Gruppe schneidet nur waagerecht (`overflow: clip visible`), und ein Kopf ohne gleitende
  Kapsel blendet per `fade` als `page-toolbar` an Ort und Stelle. Der Einstellungs-Drill zeigte
  vorher im ersten Frame "< Einstellungen" ueber der auf zwei Zeilen gekappten Uebersicht; die
  Marke `settings-page--leaf` setzt er jetzt erst im Wechsel. Guard: `test:motion`. Die Gesundheit bleibt bei
  `swapContent` (ihr Wechsel ist synchron in `activateArea` verankert).
- **Druck und Hover (R18):** Zeilen und Karten, die als Ganzes ein Ziel sind, teilen EINEN
  Press-Baustein (`list-row.css`): `--color-surface-hover`, hinein `--duration-2xs`, heraus die
  Dauer der Ruhe-Regel. Ein Knopf in der Zeile drueckt die Zeile nicht mit, eine gezogene
  Wischzeile sieht nicht gedrueckt aus, zurueckgenommene Zeilen behalten ihre Flaeche. Die
  Hover-Flaechen der geteilten Bausteine stehen unter `@media (hover: hover)` - auf Touch klebt
  `:hover` nach dem Tipp; fuer alle uebrigen haelt `test:motion` einen Ratchet.
- **Zwei Druckstufen (R22, D8):** was beim Druck nachgibt, nimmt `--press-scale-sm` (0.95: Chips,
  Segmente, Reiter, Icon-Knoepfe, Zeilenaktionen, Menueeintraege, FAB) oder `--press-scale-lg`
  (0.98: Textknoepfe, Karten, Suchfeld im Mehr-Blatt) aus tokens.css - vorher sechs Literale von
  0.92 bis 0.985, und Chips, Segmente, Menueeintraege, Notiz- und Mahlzeitkarte quittierten gar
  nicht. Hinein `--duration-2xs`, heraus die Dauer der Ruhe-Regel; ein Knopf in einer Karte
  drueckt die Karte nicht mit. Die Zeilen des Press-Bausteins bleiben ohne Bewegung (oben). Guard:
  `test:motion` (kein :active-Skalenliteral, die Liste der Bausteine mit ihrer Stufe).
- **Blatt-Geste zu Ende gefuehrt (R18):** der Tipp- und Esc-Ausgang bleibt der kurze Hub. Nach
  einer Zieh-Geste faehrt das Blatt von der Lage des Fingers aus dem Bild
  (`utils/sheet-drag.js`, Web Animations API auf `translate`): Dauer = Reststrecke /
  Loslass-Tempo, geklemmt zwischen `--duration-xs` und `--duration-md`. Unter der Schwelle
  federt es mit derselben Rechnung zurueck (hoechstens `--duration-lg`). Die Abdunklung des
  Mehr-Blatts folgt dem Zug (`--sheet-pull` am Backdrop, nur `opacity`); am Dialog-Sheet nicht -
  dort ist das Overlay zugleich Elternknoten der Tafel.
- **Theme-Wechsel (R18):** die Wahl in den Einstellungen blendet ueber die Wurzel
  (`swapTheme`, 200ms). Der Nachtwechsel des Wandmodus schaltet ohne Blende.
- **Scroll-Affordanz:** horizontal scrollende Leisten (Chip-Reihen, Filterzeilen) tragen
  eine Fade-Mask an der ueberlaufenden Kante (`has-fade-start`/`has-fade-end`, gesetzt von
  `wireScrollFade`) und 24px `scroll-padding-inline`, damit das erste sichtbare Element nicht
  an der Kante klebt.

### Die Breitenregel: drei Regime (2026-09-26, Critique A8)

Die Messmatrix vom 26.09. fand drei Breiten ohne erkennbare Regel: 720px (acht Module), 960px
(Haushaltshilfe, Inventar) und 1124-1156px (sechs Module). Bei 1440px liessen die 720er-Listen
468px (38 %) leere Buehne stehen. Das Lesemass war sanktioniert, die leere rechte Haelfte nicht.
Seitdem steht jede Seite hinter der Shell in **genau einem von drei Regimen**:

- **Lesemass** - eine Spalte auf `--layout-reading` (720px), Kopfzeile `--narrow` bis zur
  Listenkante. Fuer reine Listen und Formulare ohne Detail, das daneben stehen koennte.
  Umsetzung: Kompositionsmodus `reading` oder `form`.
- **Liste + Detail** - unter der Schwelle exakt wie Lesemass (die Zeile oeffnet Modal, Sheet
  oder Aufklapper). Ab einer Modulflaeche von `--layout-split-threshold` (65rem) steht links
  die Liste auf einer Bahn zwischen `--layout-list-min` und `--layout-list-max` (480-520px;
  seit R23 D13 mindestens 480px - mit 420 blieben dem Aufgabentitel bei 1280 194px),
  rechts das Detail der ausgewaehlten Zeile mit eigenem Kopf (Titel, Aktionen), das fuer sich
  scrollt. Die Auswahl steht in der Adresse (`?open=<id>`, Zurueck-Taste - derselbe Parameter
  wie der Deep-Link der globalen Suche und der Essenskarten, auf allen vier Seiten), Pfeil hoch/runter
  bewegt sie, Enter oeffnet, Esc im Detail fuehrt zur Zeile zurueck und in der Liste hebt es
  die Auswahl auf. Nennt die Adresse keine Auswahl, ist am Desktop die erste Zeile gewaehlt
  (`replaceState`, kein History-Eintrag, kein Fokuswechsel), mobil nie; ein unbekannter
  Deep-Link bleibt ein ruhiger Leerzustand. **Unter der Schwelle geht `?open=` mit dem Blatt
  (R22, D2):** ist das letzte Overlay zu und nennt die Adresse noch diesen Eintrag, nimmt
  `replaceState` den Parameter weg - ein Neuladen oeffnet nichts wieder; Seiten, die den Link
  selbst einloesen (Kalender, Rezepte, Aufgaben ausserhalb der Liste), rufen
  `releaseAddressOnClose()`. Pruefebene: Verhalten (test:master-detail, test:overlay-history).
  Einstellungen und Gesundheit fuehren die Auswahl
  als Pfad (`/settings/<bereich>/<blatt>`, `/health/<bereich>`, Option `address` des
  Bausteins) statt als `?open=`. Vorbild ist Apples Mail. Umsetzung:
  `.app-page--list-detail` an der Seitenwurzel (Container `module-surface`) plus der Baustein
  `utils/master-detail.js` (`.split-view` in layout.css); die Aufteilung (`split`) war das
  erste Modul dieser Art und fuehrt ihre eigene Geometrie.
- **Flaeche** - die volle Hauptspalte fuer Seiten, deren Inhalt selbst zweidimensional ist:
  Raster, Board, Masonry, Kacheln, Diagramme. Umsetzung: `full` oder `dashboard`; das Budget
  fuehrt als `reading` seine eigene Bahn (Lesemass-Liste plus Seitenleiste, `--budget-lane`),
  die die Hauptspalte fuellt. Dazu gehoert die **Flaeche mit Spalten** (R16, 2026-10-05) fuer
  Module aus kurzen Listen: `dashboard` plus `app-page--columns` an der Wurzel, der Inhalt im
  Raster `.page-columns` (`renderPageColumns()`), siehe unten.

**Die Schwelle misst die Modulflaeche, nicht den Viewport.** Neben der ausgeklappten
Seitenleiste hat ein 1440er-Fenster 1220px Hauptspalte (Detailspalte da), ein 1280er 1060px
(Detailspalte da), mit eingeklappter Leiste 1224px (Detailspalte da). Bis R10 (2026-09-27)
stand die Schwelle bei 75rem, und der 1280er-Laptop fiel auf Einspalter plus Modal zurueck;
65rem = 1040px laesst dort auch mit einer klassischen 17px-Bildlaufleiste Liste und Detail
nebeneinander (420 + 24 + ~560). Bei 1440 nimmt die Listenspur
488px (40 %, samt Seitenpolster), das Detail 676px bis zur Kopfkante (gemessen 2026-09-26).
Ueber 1344px Modulflaeche (Content-Spalte 1280 plus zwei Gutter) wird der Baustein nicht
breiter, sondern steht mittig: Liste und Detail fluchten mit dem Kopf, der seinen Inhalt auf
die Content-Spalte zieht (1920: beide Kanten bei 430 und 1710 statt 252 und 1888).
Auf diesem Deckel (ab 84rem Modulflaeche) nimmt die Liste `--layout-list-wide` (640px) statt der
40 %-Formel, das Detail die 680px daneben (R20, Re-Critique 2026-10-17: die Kontakte kuerzten bei
1920 neun E-Mails und brachen die Chips um, waehrend das Detail 768px fuer kurze Felder hatte).
Am Tablet unter der Schwelle (640-1023px) laeuft die Liste so breit wie ihr Kopf statt auf dem
Lesemass (834: vorher 98px rechts leer).
Auch der Kalender mit Seitenleiste (R19) steht seit R23 (D13) auf der Inhaltsspalte: ab
86.25rem Kalenderflaeche teilen sich Leiste und Raster die 1280px (260 + 24 + 996), Kopf und
Siegel fluchten mit jedem Modul (1920: x 430, 2560: x 750). Bis dahin rueckten Kopf, Leiste
und Raster auf den Seitenrand (252-1888), und der Titel sprang beim Modulwechsel um 178px -
die "eine Ausnahme" gibt es nicht mehr. Nur die Suche hat keine Leiste; die Agenda behaelt sie seit R20 ohne „Als Naechstes“ (das ist die Agenda selbst) - vorher sprang der Inhalt beim Ansichtswechsel von x 536 auf 220.
Die Uebersicht steht seit R19 (2026-10-16) auf derselben Spalte: sie polstert am Desktop mit
`--page-inline-pad` statt mit eigenen 32/40px und ohne ihr altes Hoechstmass von 1680px. Vorher
begann sie bei 1920 bei x 270 und jedes Modul bei x 430; jetzt 252 / 252 / 430 bei 1280 / 1440 /
1920 auf allen Seiten (`test:dashboard-clarity`).

**Die Kueche plant die Woche auf voller Breite** (R23, D13). Die Rezepte stehen als Leiste UNTER
dem Plan (`.meals-layout`: eine Spalte, Zeilen `minmax(0, 1fr) auto`), nicht mehr als Spalte rechts
(272/320px - genau der sechste und siebte Tag). Unter 72rem Flaeche (`@container meals-board`)
wandert der Mahlzeittyp aus der 116px-Spalte in einen Kopf ueber seiner Reihe, und sieben Tage
stehen mit mindestens 128px (1280: 134px, kein ausgescrollter Montag mehr). Bei 1024 bleibt das
Fenster, mit Anriss an beiden Kanten. Ab 1440 traegt die Typspalte wieder.

**Der Kopf behaelt seine Form** (R23, D13). Ab 1024px schrumpfen die Aktionen nicht
(`.page-toolbar__actions { flex-shrink: 0 }`), die Suche gibt nach - bei 1024 ragte "+ Aufgabe"
24px ueber seinen Slot. Ein Werkzeug, das in einer Ansicht nichts kann, wird abgeschaltet statt
entfernt (Filter im Aufgaben-Verlauf), und der angedockte FAB tritt im Auswahlmodus unsichtbar ab
(`visibility`), statt Segment und Menue um seine Breite zu schieben. Ein Ansichtswechsel laesst die
alte Ansicht stehen, bis die neue geladen ist, und tauscht Kopfmass und Koerper im selben Bild
(Aufgaben: kein gedimmtes Zwischenbild mehr).

**Am Finger steht der Griff nur im Sortiermodus** (R23, D13). In Aufgaben und Einkauf lagen
Mehr-Knopf und Griff nebeneinander an der Daumenkante (34 + 34px). Ohne schwebenden Zeiger tritt der
Griff ab; „Reihenfolge ändern" im Werkzeugmenue (`.is-sorting` an der Seitenwurzel) holt ihn zurueck.
Am Zeiger bleibt er immer stehen, dort ist er auch der Tastaturpfad.

**Die Detailspalte ist so hoch wie ihr Inhalt** (R21 S7, D9). Sie reichte als Karte bis an den
Fensterrand, und ein kurzes Detail trug seinen Fuss dort - gemessen 1920: Geburtstag 528px leer
ueber dem Fuss, Rezept 419, Kontakt 285, Aufgabe 210, Inventar 194. Jetzt endet sie unter ihrem
Inhalt (`align-self: start`, Obergrenze die Zeile bzw. bei den klebenden Spalten von Geburtstagen
und Inventar die Luft ueber dem Fensterrand); laengerer Inhalt scrollt, Kopf und Fuss kleben wie
bisher. Guard: `test:master-detail`, `test:inventory-list-detail`, `test:birthday-localization`.

**Bearbeiten geschieht in der Detailspalte** (R19, 2026-10-16). Ab der Schwelle legt sich das
Formular deckungsgleich auf die Spalte (gleiche Flaeche, Radius `--radius-lg`, leiser Schatten,
als Grund nur ein Hauch - die halbe leichte Abdunklung, `--color-overlay-light` zu
`--tint-hint`, rund 10 % Schwarz, ohne Blur -, der zeigt, dass die Liste daneben gerade nicht
bedienbar ist (R19-Nachlese, layout.css `.modal-overlay--docked::backdrop`; Blende statt Hub);
darunter bleibt es das Modal. Es IST weiter der
Dialog: Fokusfalle, Escape/Abbrechen, die Frage nach ungespeicherten Aenderungen (ein Klick auf die
Liste schliesst und fragt), der eine History-Marker und die Serien-Rueckfragen bleiben, wie sie
sind. Wird die Spalte waehrenddessen zu schmal, wird es wieder das Fenster. EIN Weg: die
Kopf-Aktion mit `dock: true` (`detailPaneHeaderEl`) bzw. Enter auf der gewaehlten Zeile meldet die
Spalte an (`dockNextModal`, components/modal.js), das naechste `openModal()` nimmt sie - Aufgaben,
Kontakte, Inventar, Geburtstage (ueber detail-view.js) und Rezepte (`test:modal-dialog`,
`test:master-detail`).

**Waehrend gewaehlt wird, gehoert der untere Rand der Auswahl** (R20, Muster Apple Erinnerungen).
Traegt die Seitenwurzel `.app-page.is-selecting` (Aufgaben, Kontakte), treten der FAB ueberall und
unter 1024px auch die Kapsel ab; die Pille rueckt an deren Platz. Die ganze Zeile waehlt, die
gewaehlte ist im App-Akzent getoent, der Wisch-Pfeil faellt weg, und die Spalten-Markierung der
offenen Zeile schweigt (layout.css „Der Auswahlmodus nimmt der Shell ihre Bedienung ab").
Eine Sammelaktion mit `paneOnly` steht nur in der Spalte (Aufgaben: „Archivieren"), weil die
einzeilige Pille keine vierte Kapsel in jeder Sprache traegt.

**Mehrfachauswahl steht in der Detailspalte** (R19, 2026-10-16, Muster Apple Mail). Ab der
Schwelle zeigt die Spalte waehrend einer Auswahl „N ausgewaehlt" mit den Sammelaktionen als
Knoepfe (Rueckfrage, Fokus auf Abbrechen und Esc wie in der Pille); Detail und Leerzustand bleiben
im Baum und kehren danach zurueck. Die schwebende Pille entfaellt dort - sie stand ueber dem
Detail einer anderen Zeile, und zwei Loeschen mit verschiedener Reichweite waren sichtbar.
Darunter und ohne Baustein (Aufgaben-Brett) bleibt es die Pille. EIN Weg fuer alle Seiten:
`setSelectionBulk(handle, spec)` in `utils/master-detail.js` (Aufgaben, Kontakte;
`test:master-detail`).

**Der klebende Kopf der Detailspalte bleibt oben** (R16, 2026-09-28). Im Zyklus-Kalender der
Gesundheit und bei den Vitalwerten schoben sich Ziffern und Kennzahlen mit eigenem `z-index`
beim Scrollen ueber den Kopf. Statt
eines z-index-Wettlaufs bekommt alles hinter `.split-view__detail-head` einen eigenen
Stapelkontext (`isolation: isolate`, layout.css) - fuer jede Split-Detailspalte
(`test:master-detail`). Wo die Spalte selbst keine Karte traegt (Gesundheit: die Bereiche
bringen ihre Karten mit), ist der Kopf die Karte - Radius `--radius-lg`, leiser Schatten, keine
Trennlinie (R21 S7, D9: vorher ein weisser eckiger Balken ohne Traeger; `test:health-cycle`).

**Eine Aussenkante je Modul, kurze Listen zweispaltig** (R16, 2026-10-05). Die Messmatrix
vom 05.10. fand die 720px-Spalte weiter in leerer Flaeche: Haushaltshilfe (Aufgaben, Berichte,
Personal), Entsorgung und Belohnungen (Uebersicht, Verlauf) nutzten 67,9 % der Flaeche bei
1280 und 59,0 % bei 1440. Wo ein Reiter breit war, wechselte die Kante je Reiter, und der
angedockte Primaerknopf sprang mit (Belohnungen 271/431px). Seitdem gilt:

- **Der Kopf endet in jedem Reiter eines Moduls an derselben Kante**, der breiten. Kein
  Reiter schaltet `--page-measure` oder den Kopf um (kein `[data-tab]`-Mass, kein
  `--wide`-Modifier am Kopf); der Primaerknopf steht fest.
- **Die Liste bleibt auf dem Lesemass** - eine Zeilenliste wird nicht auf 1000px gestreckt.
  `.page-columns` fuehrt sie in der ersten Spur (hoechstens `--layout-reading`), in jedem
  Reiter gleich breit.
- **Ab `--layout-split-threshold` steht rechts eine Seitenspalte** bis zur Modulkante,
  mindestens `--layout-rail-min` (360px, die Inhaltsbreite eines Telefons) breit. Sie bekommt
  nur, was es als Daten und Baustein schon gibt: Belohnungen/Uebersicht die letzten Buchungen
  (der Abschnittstitel fuehrt in den Reiter Verlauf), Belohnungen/Verlauf die Punktestaende,
  Entsorgung Abfallarten und Quellen neben den Abholungen, Haushaltshilfe/Berichte die
  Kennzahlen (`railFirst`: mobil ueber der Liste, am Desktop daneben), Haushaltshilfe/Haushaltshilfen
  das Protokoll der gewaehlten Person, Haushaltshilfe/Aufgaben seit R17 die zwei Kennzahlen
  „Faellig" und „Erledigt im Monat" (dieselben wie auf der Uebersicht; unter 640px bleiben sie
  aus). Ein Reiter ohne zweiten Inhalt laesst die Spur leer, statt Inhalt zu erfinden.
- Unter der Schwelle steht alles einspaltig in Quelltextreihenfolge auf dem Lesemass.

Gemessen 1280 / 1440: Liste 612 / 720px, Seitenspalte 360 / 412px, Kopfkante 1248 / 1408 in
allen Reitern. Guard: PAGE-020 in `test:frontend-audit`.

**Das Budget folgt derselben Regel mit seiner eigenen Bahn** (`--budget-lane`, Lesemass +
Abstand + Seitenleiste; die Variable steht an `.budget-page`, damit der Kopf sie liest). Der
Kopf endet an der Bahn statt am Lesemass (Knopf 972 -> 1248 / 1376), und jeder Reiter fuellt
sie: Plan mit Kategorien links und Sparziel in der Seitenleiste, Darlehen mit Filter, Karten
und Transaktionen links und den drei Kennzahlen rechts (vorher vier Kanten), Konten mit dem
Nettovermoegen als Leistenkarte NEBEN den Konten (R17, E14: `.budget-accounts`, die Karte
`.metric-grid--rail`; die Konten je Zeile eines auf dem Lesemass - vorher EINE Karte ueber
981 / 1124px), Abonnements mit der Liste auf dem Lesemass und Kennzahlen samt Diagrammen in
der Seitenleiste (R21 S7, D9: vorher die Liste ueber 1124px, Name -> Betrag 1004px, jetzt 600px;
`test:budget-ui`), Aufteilung mit den Ausgaben in der breiten Spalte (die Kennzahlen der gewaehlten Gruppe in
deren Spalte ueber ihrem Kopf, die Gruppenliste beginnt oben; mobil Gruppenwahl vor Kennzahl;
Hover ist nicht Auswahl - R21 S7, D9),
Statistik mit dem Anteilsring in Zeile 1 neben dem Verlauf, darunter Ausgaben und Einnahmen
NEBENEINANDER (R17: zwei Bloecke je ~480-550px, der Name 14px, der Betrag am Balkenende - vorher
ein 830px-Balken zwischen Name und Betrag); der Verlauf laeuft ab heute punktiert weiter und
traegt eine Heute-Marke, mobil rechnet er auf 600x300 (`test:budget-ui`).

**Das vierte Mass ist abgeschafft.** 960px (`data`) war ein Zwischenstand, keine Entscheidung:
es liess 228px leer, ohne dass die Flaeche etwas trug. Zugeordnet am 2026-09-26:

- **Inventar -> Liste + Detail**, weil es ein Detail-Markup hat (`openDetailView`, dieselbe
  Leseansicht wie Kontakte); eingehaengt mit #1477 (`reading` + `list-detail`,
  `test:inventory-list-detail`).
- **Haushaltshilfe -> Lesemass**, am 2026-10-05 (R16) weiter zur **Flaeche mit Spalten**:
  die Frage "ein Regime je Reiter oder ein geteilter Kopf" ist entschieden - eine Kante je
  Modul, die breite, und die Listenreiter fuellen sie mit einer Seitenspalte (oben).

`.app-page--data` bleibt nur fuer Erweiterungs-Manifeste, die `data` erklaeren; keine
Kernseite fuehrt es. Die Zuordnung aller Seiten:

| Seite | Regime | Umsetzung |
|---|---|---|
| `rewards.js` Belohnungen | Flaeche | `dashboard` + Spalten (`.page-columns`); der Katalog ist ein Raster ueber das Mass |
| `waste.js` Entsorgung | Flaeche | `dashboard` + Spalten (`.page-columns`) |
| `housekeeping.js` Haushaltshilfe | Flaeche | `dashboard` + Spalten (`.page-columns`); die Uebersicht fuehrt zwei gleiche Karten |
| `birthdays.js` Geburtstage | Liste + Detail | `reading` + `list-detail` |
| `contacts.js` Kontakte | Liste + Detail | `reading` + `list-detail` |
| `tasks.js` Aufgaben | Liste + Detail | `full` + `list-detail` in Liste und Verlauf (#1550: neben dem Eintrag seine Aufgabe); Kanban ist Flaeche |
| `recipes.js` Rezepte | Liste + Detail | `reading` + `list-detail` |
| `inventory.js` Inventar | Liste + Detail | `reading` + `list-detail` (vorher `data`); seit R17 EINE Liste aller Gegenstaende nach Kategorie gruppiert, die Kategorien als Filter-Chips darueber (`?category=` waehlt den Chip vor und wird ersetzt, nicht gestapelt), kein Kategorie-Zwischenschritt; kurze Angaben im Detail zweispaltig ab 35rem Spaltenbreite (`@container detail-pane`) |
| `calendar.js` Kalender | Liste + Detail | `full` + `list-detail` in der Agenda; Monat, Woche, Tag sind Flaeche; der Tag fuehrt ab der Schwelle eine Seitenspalte mit den Folgetagen (`.day-rail`); ab 86.25rem Kalenderflaeche (ca. 1600er Fenster) steht in Monat, Woche und Tag links die Seitenleiste (Mini-Monat, Kalender und Personen aus derselben Quelle wie das Filterblatt, „Als Naechstes“), auf der Inhaltsspalte wie jedes Modul (R23 D13; R19 rueckte die Seite dafuer noch auf den Seitenrand). Steht die Leiste, gehoeren Kalender und Personen IHR: das Filterblatt traegt dann nur Ebenen und Anzeige, sein Zaehler zaehlt nur diese, und Zuruecksetzen laesst die Leiste stehen (`railCarriesFilters`, R23 - vorher dieselben Schalter an zwei Orten). Heute ist im Mini-Monat wie im Raster die gefuellte Akzent-Scheibe (`--color-accent`), der gewaehlte Tag ein Ring derselben Farbe; Personen-Chips lassen einen gemeinsamen Nachnamen weg (`sharedSurname`, Re-Kritik 2026-10-17) |
| `health.js` Gesundheit | Liste + Detail | `dashboard` + `list-detail` (Uebersicht + Bereiche links, Pfad-Adresse) |
| `settings.js` Einstellungen | Liste + Detail | eigene Shell: Liste + Blatt ab der Split-Schwelle (`settings-surface`, Kompositions-Ausnahme) |
| `split-expenses.js` Aufteilung | Liste + Detail | `split`, eigene Geometrie |
| `dashboard.js` Uebersicht | Flaeche | `dashboard` |
| `notes.js` Notizen | Flaeche | `full` |
| `shopping.js` Einkauf | Flaeche | `page-measure--narrow` unter 60rem, darueber Kategorien in zwei Spalten (Notizen-Muster, Kompositions-Ausnahme) |
| `pantry.js` Vorrat | Flaeche | `reading` mit eigener Bahn: ab 60rem die Liste auf dem Lesemass und das Panel als Seitenspalte bis zur Kopfkante (Geometrie von `.page-columns`, R19); das Seitenpolster traegt `.pantry-body` |
| `meals.js` Mahlzeiten | Flaeche | Wochenraster (Kompositions-Ausnahme) |
| `documents.js` Dokumente | Flaeche | `full` |
| `health-fasting.js` Fasten | Flaeche | Bereich der Gesundheit |
| `schedule.js` Schichtplan | Flaeche | `full` |
| `budget.js` Budget | Flaeche | `reading` mit eigener Bahn |
| `budget-stats.js` Budget-Statistik | Flaeche | Reiter des Budgets |
| `budget-plans.js` Budget-Plan | Flaeche | Reiter des Budgets |
| `subscriptions.js` Abos | Flaeche | `full` |

**Einstellungen (R10, 2026-09-27).** Drei Bereiche: Konto (fuer alle), Haushalt (Admin) und
Module. Je Modul EIN Blatt wie Apples "Einstellungen > App": oben eine Statuszeile (Zustand
fuer alle, Verweis auf "Aktive Module" nur fuer Admins - ein Modul geht NUR dort an und aus),
darunter die Abschnitte "Fuer mich" und "Fuer den Haushalt" (Admin). Die Sammelschublade
"Modul-Optionen" und der Bereich "Synchronisation" sind aufgeloest: Kalender-Sync, Abos, Feeds
und Termin-Vorgaben stehen im Blatt Kalender, Kontakte-Sync bei Kontakten, Erinnerungen-Sync
bei Aufgaben, Zyklus und persoenliche Vorgaben bei Gesundheit, Speicher und DMS bei Dokumenten.
Jede Adresse von vor R10 leitet per `replaceState` auf Blatt plus `?section=<abschnitt>` um;
eigene Links zeigen direkt auf das neue Blatt (test:settings-navigation). Ab der Split-Schwelle
steht links die Liste (`--layout-nav-list`, 320px, Suche klebt an ihrer Kante), rechts das
Blatt im Lesemass, das erste Blatt vorgewaehlt. Eigene Shell statt Baustein, weil jedes Blatt
eine Router-Route mit Dirty-Guard ist - PAGE-017 fuehrt sie in `OWN_LIST_DETAIL_SHELL`.
Geprueft in R19 (2026-10-16, Befund „1920: rechts 426px leer“): die Liste fluchtet mit dem
Kopf (x 430) wie jedes Modul, das Blatt ist ein Formular und bleibt im Lesemass (774-1494). Der
Rest rechts ist das Lesemass, kein Loch - ein breiteres Blatt zoege die Felder auf 900px, und eine
dritte Spalte haette keinen Inhalt, den es schon gibt (Regel „ein Reiter ohne zweiten Inhalt
laesst die Spur leer“). Die Listenbreite bleibt `--layout-nav-list`, gemeinsam mit der Gesundheit.

**Gesundheit (R10, 2026-09-27).** Keine Tab-Leiste mehr: die Uebersicht ist die Navigation -
Zusammenfassung plus eine Liste "Alle Bereiche" (Icon, Name, letzter Wert oder Status, Muster
Apple Health "Durchsuchen"). Jeder Bereich hat eine Pfad-Adresse `/health/<bereich>`, alte
`?tab=`-Adressen leiten um. Mobil schiebt ein Bereich sich mit "< Gesundheit" und dem
Bereichsnamen als Titel auf; ab der Split-Schwelle stehen links Uebersicht und Bereiche
(`--layout-nav-list`), rechts der Bereich (Baustein mit `address`).

**Zwei Heimaten, je ein Weg (R21, D7; Critique a5 P2).** Die Zyklusvorgaben bleiben im Dialog
der Zyklusseite, das Gesundheitsblatt der Einstellungen fuehrt mit "Zyklus-Einstellungen"
dorthin (`/health/cycle?open=settings` oeffnet den Dialog und verlaesst die Adresse), und die
Suche findet den Weg ueber den Satz, der die Vorgaben aufzaehlt. Der Dialog spricht die Sprache
der Dialoge (Zeilen im Traeger, Zahl mit "Tage" als `formCompositeHtml`-Einheit, An/Aus als
`formSwitchRowHtml`), ein Hinweis steht unter dem Feld, das er meint. Freigaben: das Menue der
Personenwahl endet in der eigenen Ansicht mit "Wer sieht das?" (`?option=` auf die
Standard-Sichtbarkeit), und dort steht, dass Betreuende auch Privates sehen - fuer Admins mit dem
Weg zu den Mitgliedern. Ein Tipp mit Ziel ist ein Link mit eigenem Text, nie HTML aus einem
Locale-String (`test:health-cycle`, `test:settings-navigation`).

**EINE Personenwahl fuer das ganze Modul (R23, D4).** Die Person gilt je Sitzung fuer alle
Bereiche (`utils/health-person.js`, sessionStorage je Konto): jeder Bereich liest sie beim Oeffnen
und prueft sie gegen seine Mitgliederliste, jede Wahl schreibt sie - auch im Fasten, das bei einer
Person ohne lesbares Fasten auf die eigene zurueckfaellt. Steht eine fremde Person, nennt jeder
Bereich sie im Hinweis ("Du traegst fuer X ein" bzw. nur lesen, auch das Fasten), und die Zeilen
der Bereichsliste bleiben leer, statt den eigenen Status ueber die falsche Person zu sagen.
**Und EIN Ort fuer sie (R23, Critique G5 P2):** rechts in der Titelzeile des Seitenkopfs, auf der
Uebersicht wie in jedem Bereich, in jeder Breite (`hoistPlan`: immer `toolbar`). Vorher stand sie
im Detailkopf, in der Zeile „‹ Gesundheit" und im Streifen vor der Liste. Am Telefon ist sie ein
Gesicht (32px-Scheibe mit Initialen in der Personenfarbe, Name und Chevron weichen, der Knopf
nennt die Person im Namen), ab 768px die Pille mit Namen. **Der Bereichskopf ist einzeilig wie
die Uebersicht:** Rueckweg als Zeichen, Bereichsname als Titel, die Person rechts, kein Siegel -
der Tipp in einen Bereich hob den Kopf sonst von 65 auf 113px (Shift 0,97 bei 390, 0,51 bei
768); jetzt 65/69px in jeder Ansicht. **Verlaufszeilen oeffnen als Ganzes** (Trainings-Log,
Letzte Messungen, seit S11b auch Vorsorge, Naehrwerte, Zyklus-Historie und die Wertzeilen im
Laborbefund - dort bleibt der Papierkorb das eine zweite Ziel): `.list-row` mit
`.list-row__main--interactive` statt Eigenbau mit Stift als einzigem Ziel; der Titel in der
Zeilentitel-Stufe 16/500.

**Gesundheit als Briefing (R21, Critique 2026-10-21, D6).** Ueber den Karten der Uebersicht steht
EIN Satz aus vorhandenen Daten (`.health-brief`, Body 17): was sich seit der letzten Messung
veraendert hat, die drei zuletzt gemessenen Messarten ("Seit der letzten Messung: Gewicht -0,2 kg,
Schlaf +30 Min. und ..."), ohne Vorwert der letzte Wert, ohne Messung kein Satz. Er nennt Richtung
und Betrag, nie eine Bewertung - die Zahl gehoert der Person, das Urteil ihrer Aerztin. Mobil zieht er
mit "Heute faellig" vor die Bereichsliste. **Was nicht gemessen ist, bekommt keine
Kachel:** keine grauen Felder mit "-" (ein Kind ohne Messung hatte neun, 145.200px² am Laptop), sondern
EINE ruhige Zeile "Noch keine Messwerte" mit der Erfassen-Aktion (`.health-overview__empty-row`); die
Vitalwerte-Seite listet leere Messarten auf jeder Breite in "Weitere Messwerte". **Die Kurven sind
ablesbar:** Mindestspanne je Messart (`minSpan` in utils/health-vitals.js, z. B. Blutzucker 40 mg/dL -
drei Werte zwischen 88 und 90 standen vorher auf einer 0,5er-Achse), die Einheit am obersten
Achsenwert ("120 mmHg", `chartGridMarkup({ unit })`), der Puls auf eigener Achse unter dem Blutdruck
(`axes`), die Reihen direkt an ihrer Kurve beschriftet statt einer Farblegende. Die Aktivitaetsachse
nennt Minuten; eine fehlende Bewertung im Laborbefund bleibt eine leere Zelle statt "-".
Guards: `test:health-vitals` ("R21 D6"), `test:health-nav` (Umzugsplan).

**Ein Leerzustand je Ebene, ein Verb je Aktion (R22, D12; Critique a5).** Ein leerer BEREICH
zeigt `areaEmptyHtml`: Glyphe des Bereichs, Titel, Satz und die Anlege-Aktion (sekundaer -
FAB bzw. Kopf-Pille tragen dasselbe Verb violett); ein leerer ABSCHNITT in einem Bereich mit
Inhalt ist die ruhige Zeile `cardEmptyRowHtml` (Satz + Erfassen, wo es etwas zu erfassen gibt;
ausserhalb einer Karte mit eigener Flaeche `--surface`). Nie ein nackter grauer Satz, nie eine
Auswahl ohne Auswahl ("Waehle einen Befund" ohne Befund). Wo der Inhalt die Hauptaktion traegt
(Zyklus: "Periode gestartet"), entfaellt die Kopf-Aktion; Nachtragen steht am Verlauf und im
Leerzustand. **Das Fasten seit R23 D14 umgekehrt:** der FAB bzw. die Kopf-Pille heisst „Fasten
starten" und startet (nur bei mir, nur ohne laufendes Fasten - `mountFasting` meldet es per
`onIntent`), der Ring traegt dann nur „Ich habe frueher begonnen" und ein „..." mit Nachtragen
und Einstellungen (vorher Startknopf + Zahnrad in der Aktionszeile, Nachtragen als Geisterknopf
am Verlauf); laeuft ein Fasten, traegt der Ring „Fasten beenden" und der FAB faellt weg. Die
Zyklus-Legende des Kalenders nennt nur, was der Monat zeigt (R23, distill). Der Bereichsname steht hoechstens zweimal (Liste und
Detailkopf); die Kopf-Pille nennt das OBJEKT, nie den Bereich (de „+ Untersuchung" statt
„+ Vorsorge", R22 S10; `test:health-nav` "R14 P6" an der Referenz-Locale). "Einnehmen" heisst bei geplanter und Bedarfsdosis gleich und
traegt auf jeder Seite und Breite Tablette UND Wort (R22-F, F4.5: die Stufe ohne Tablette unter 26rem
ist entfallen; gemessen 320-1920px ohne Ueberlauf; `test:health-nav`). Der Detailkopf am Desktop beginnt auf der Hoehe
der Bereichsliste und klebt dort (`top` = Abstand) auf einem Grundstreifen im Seitengrund
(Ring `--space-2` um die Ecken, nach oben versetzt bis zur Spaltenkante). Das Erfassen-Formular
steht in EINEM `.form-rows`-Traeger (die Wertefelder als Glied darin). Die Bereichsliste fuehrt
ihre Glyphen ohne Kachel in Modultinte (Muster Apple Health "Durchsuchen") - bewusst anders als
die getoenten Kacheln der Seitenleiste, die Module nennen. Guards: `test:health-nav` ("R22 D12"),
`test:health-cycle`, `test:control-dialect` (Dialogfuesse ohne Inline-Stil).

Guard: PAGE-017 bis PAGE-019 in `test/test-frontend-audit.js` - jede Seite steht genau einmal in
dieser Tabelle, keine Kernseite fuehrt `data`, eine Lesemass-Seite fuehrt `reading`/`form`, eine
Liste-+-Detail-Seite haengt den Baustein ein (Ausnahmeliste, die nur schrumpft, bis die Module
ihn eingehaengt haben), und jede Split-Abfrage in `public/styles/` steht an der Schwelle aus
tokens.css.

## Elevation & Depth

Hybrid aus zurueckhaltenden iOS-Schatten fuer opake Inhalte und Glas-Material fuer
Chrome. Tiefe entsteht primaer ueber Material (Blur + Transluzenz + Specular-Kanten), nicht
ueber dramatische Schatten. Dark Mode verstaerkt die Schatten deutlich (Glas braucht dort
mehr Trennung vom dunklen Grund) - und seit der Dark-Kur (2026-08-17) tragen auch die
opaken Stufen sm/md/lg/xl dort den 1px-Weiss-Ring der Glas-Schatten (0.05-0.06): ein
rgba(0,0,0)-Wurf auf der Kohle-Buehne ist gemessen unsichtbar, der Ring ist die Trennung,
die der Schatten im Dark nicht leisten kann. Im Light bleibt der Ring den Glas-Schatten
vorbehalten; xs bleibt in beiden Themes ohne Ring.

### Shadow Vocabulary
- **shadow-xs** (`0 1px 2px rgba(0,0,0,0.08)`): kleinste Abhebung.
- **shadow-sm** (`0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.04)`): Karten und
  Zeilen-Traeger in Ruhe.
- **shadow-md** (`0 2px 10px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)`): Dropdowns,
  Hover, Marken-Tile.
- **shadow-lg** (`0 8px 28px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.04)`): Modals, FAB.
- **shadow-xl** (`0 18px 56px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.06)`): hoechste Ebene.
- **glass-shadow-sm/md/lg**: Glas-Varianten mit eingebautem 1px-Weiss-Ring
  (z. B. `0 6px 24px rgba(0,0,0,0.10), 0 0 0 1px rgba(255,255,255,0.50)`). Ausnahme: die
  schwebende Tab-Bar-Kapsel traegt einen eigenen dunklen Halt, weil der weisse Ring auf dem
  hellen Grouped-Grund unsichtbar ist und die Kapsel sonst formlos schwimmt.
- **Specular-Insets**: `--glass-inset-soft..strong` (inset 0 1px 0 Weiss 0.18-0.32) als
  Oberrand-Lichtkante, komplementaer `--glass-inset-bottom-*` (dunkler Unterrand).
  `--glass-sheen` ist der gethemte Flaechen-Lichtfang der oberen Kapselhaelfte (light 0.35,
  dark bewusst nur auf 0.16 abgesenkt statt auf die 0.09 der Kanten-Highlights, damit
  getoentes Glas im Dark-Theme von einer opaken Flaeche unterscheidbar bleibt).

### Named Rules
**Die Glas-ist-Chrome-Regel.** backdrop-filter existiert nur auf Chrome-Elementen:
Tab-Bar-Kapsel, Sidebar, Sheets/Modals, Toast, Datepicker-Popover, FAB samt seinem
Backdrop und seinen Aktionen. Inhalte - Karten, Listen, Widgets, Text - sind opak.
Blur-Stufen kanonisch 2/6/10/20/32px (`--blur-2xs..lg`).

**Der Modulkopf traegt KEIN Glas, und das ist eine begruendete Abweichung vom Kanon, keine
Auslassung.** Die belegte Liquid-Glass-Linie fuehrt Navigationsleisten transparent; Yuvomi
stellt den Kopf nahtlos und opak auf den Seitengrund (`--color-bg`). Zwei Gruende, beide
gemessen: die kollabierende Large-Title-Leiste lebt davon - Glas zeigte am Scroll-Anfang
eine Flaeche, wo gerade keine sein soll, und haette die gewonnene Ruhe wieder aufgehoben -
und `position: sticky` plus `backdrop-filter` in einem `overflow: auto`-Container leert auf
iOS 26+ den ganzen Scrollport (WebKit-Compositor-Bug, der Kommentar steht an der Regel).
Der Guard `Der Modulkopf traegt kein Glas, und das bleibt so` haelt sie: er lernt die
Kopf-Klassen aus dem Markup, damit auch ein Modul auffaellt, das seiner EIGENEN Kopfklasse
Glas gaebe. Der letzte Rest der alten Annahme - ein
`prefers-reduced-transparency`-Fallback fuer fuenf Modul-Koepfe, der ein backdrop-filter
abschaltete, das keiner mehr trug, und sie dabei auf `--color-surface` umfaerbte - ist mit
Runde 6 entfallen.

**Die Rang-Regel (v2.6.0).** Welchen Rang ein Block auf seiner Seite hat, sagen RADIUS und
ELEVATION - nie das Material. Wer wichtiger ist, bekommt die groessere Kartenform und eine
Schattenstufe mehr, und er bleibt trotzdem opaker Inhalt; Glas waere hier der falsche Griff,
weil es Chrome bedeutet und nicht Bedeutung.

Der Anlass war das Tagesprogramm: es lag auf `--radius-lg` plus `--shadow-sm` und damit eine
Stufe UNTER den Widgets darunter, die `--shadow-md` tragen. Der wichtigste Block der Seite
war der leiseste - „Was steht heute an?" wog optisch weniger als „Geburtstage". Es traegt
jetzt `--radius-xl` (26px, die Kartenform der Glas-Welt) und `--shadow-lg`, und der Abstand
zum Raster ist damit eine Stufe in beide Richtungen. Dieselbe Rechnung ist auch der Grund,
warum es mobil nicht mehr schrumpft: auf dem Geraet, das PRODUCT.md als Hauptszene fuehrt,
war es die kleinste Fassung seiner selbst.

**Die Fallback-Regel.** Jede Glas-Flaeche hat einen opaken Fallback. Nicht-Blur-Stile
(background, border, shadow) stehen AUSSERHALB von `@supports` und wirken ueberall; nur der
backdrop-filter steht drin (mit webkit-Zwilling fuer Safari < 18). prefers-reduced-
transparency kippt alle Glas-Tokens auf `--color-surface`-Werte und alle Blur-Stufen auf 0;
prefers-contrast: more haertet Kanten auf Textfarben, schaltet Blur und beide Lichtfelder
ab und hebt den Notes-Tint auf 6.3:1. Seit R21 (D4) hebt es auch den Metatext: Sekundaer- und
Tertiaertext stehen eine Rampenstufe naeher an der Textfarbe (`--neutral-700`, hell 9,3:1
statt 6,2 auf Weiss) - die kleinste Schrift des Schirms war bis dahin die einzige, die
unveraendert blieb. Guard `test:typography` "prefers-contrast: more hebt".

**Die Ausweich-Regel des Toast-Stapels (#1421, 2026-09-22).** Der untere Shell-Stapel
(Toasts, Sammelpille) liegt UEBER Dialogen (`--z-toast` 300 ueber `--z-modal` 200), damit
eine Meldung waehrend eines Dialogs sichtbar bleibt - und er verdeckt dabei keine
Bedienleiste des Dialogs. **Die Sammelpille tritt vor jedem Dialog und Blatt ab (R23):** sie
ist eine Bedienung fuer die Liste darunter, keine Meldung; ueber „In den Vorrat" stand sie als
zweite Fusszeile, deren Löschen ins Leere griff. `html:has(.modal-overlay | .more-sheet |
.search-overlay--visible) .bulk-pill-layer { display: none }` (layout.css), generisch statt
je Aufrufer; sie kehrt mit dem Schliessen zurueck, wenn ihre Teilmenge noch besteht (Guard
`test:frontend-audit` "die Sammel-Pille steht nie über einem Dialog"). Anlass: der Toast einer faelligen Erinnerung lag bei 1280x900
genau auf "Speichern" des Kalenderdialogs, der Klick verwarf die Erinnerung und speicherte
nichts. `pointer-events: none` am Toast waere keine Antwort (der Knopf bliebe verdeckt, und
der Erinnerungs-Toast ist selbst bedienbar); CSS-Ankerpositionierung auch nicht (iOS vor 26
kennt sie nicht, und die Wahl haengt an gemessenen Hoehen). `public/utils/toast-placement.js`
waehlt deshalb die erste passende Lage: dort, wo er steht; ueber dem Dialog; darunter; an
seinem Platz ueber reinem Inhalt; im Dialog direkt ueber der unteren Leiste; die naechste
freie Kante. Als Leiste zaehlen `.modal-panel__header/__footer`, `.modal-actions`,
`[data-dialog-actions]` UND jeder sichtbare Knopf und Link des Dialogs, dazu das gerade
fokussierte Feld (WCAG 2.4.11). **Die Detailspalte von Liste+Detail ist eine Sperrzone, kein
Dialog (R22, D18):** ohne offenen Dialog steht der Stapel unten in der LISTENSPALTE, in deren
Breite und Mitte (`listColumnDock`), Spalte samt Kopf und Fuss bleiben frei; die Erinnerung
weicht ihr nicht. Vorher richtete er sich an der Spalte aus wie an einem Dialog und stand mittig
ueber ihrem Inhalt (Aufgaben 1440: y 371-424 in x 883-1263). **Hoechstens EINE Rueckmeldung
(R22, D18):** ein neuer Toast ersetzt den stehenden, fuer den alten gilt seine Handlung (sein
`onExpire` laeuft wie nach der Frist); beim Modulwechsel endet sie ebenso (`endFeedbackToasts`,
die Kueche zaehlt als ein Modul). Dauerhafte Toasts (Erinnerungen) sind keine Rueckmeldung und
bleiben. **Erinnerungen sind ein eigener Kanal (R22, S10):** zeitgebunden, 30 s, mit eigenem
Verwerfen - sie stehen im selben Stapel neben der einen Rueckmeldung, nie auf ihr (gemessen
390, 1280 mit Detailspalte, 1440: keine Ueberlappung, die Rueckmeldung behaelt ihre Lage).
Zusammen stehen hoechstens drei Toasts; Platz macht nur eine aeltere Erinnerung
(`capPersistentToasts`, utils/toast-surface.js), nie die Rueckmeldung samt Rueckgaengig - bis
R22 nahm die Erinnerung den aeltesten Toast der Flaeche, gleich welchen.
Pruefebene: test:toast-show, test:toast-placement. Findet sich kein Platz, zeigt der Stapel nur den juengsten
Toast, die uebrigen stehen `inert` als `.toast--tucked` bereit. Ein Dialog mit eigener
Kopf- oder Fusszeile zeichnet sie mit `data-dialog-actions` aus; das Register dazu fuehrt
`test:toast-placement`. Im Wand-Modus steht der Stapel ohne offenen Dialog OBEN statt unten
(#1559, siehe „Der Wand-Modus"): dort gibt es keine Tab-Leiste, mit der er rechnet, und unten
liegen Ausstieg und Timer-Knoepfe. **Sperrzonen ohne Dialog (#1917):** was `data-toast-keepout`
traegt, haelt der Stapel frei wie eine Bedienleiste, auch wenn kein Dialog offen ist - er nimmt
dann die naechste freie Kante, in seiner eigenen Breite und Mitte. Die Regel haengt am Attribut,
nicht an einer Seite; gesetzt ist es an Uhrzeit, Datum und Fuss der Wand, wo der Hinweis beim
Einschalten bis rund 834px Breite acht Sekunden auf der Uhr lag. **Weichen ganz (R21):** vor einer
offenen Flaeche mit `data-toast-yield` nimmt der Stapel alle Toasts zurueck (`inert`) und haelt
ihre Frist an (`toast:hold`/`toast:release`); mit dem Schliessen kommen sie mit der Restfrist
wieder. Gesetzt am Mehr-Blatt: es steht fast bildhoch, es gab keine freie Lage, und der
Rueckgaengig-Toast lag auf Griff und Suche (390x844: Toast 12-66, Suche ab 62). **Gleiches steht
einmal da (R21 S9a):** derselbe Satz desselben Typs ohne Aktion, waehrend er noch steht, wird kein
zweiter Toast - die Frist beginnt von vorn, eine ruhige Zahl (`.toast__count`, `aria-hidden`)
zaehlt mit, die Ansage kommt trotzdem (stille Ansage). Vorher stapelten sich drei gleiche und
verdraengten zwei andere. Toasts mit Aktion bleiben einzeln (`test:toast-show`).

## Shapes

Apple-Kurvatur, durchgehend gerundet, nie scharfkantig: Formfelder und Zellen 10px
(`--radius-sm`), Karten 12px (`--radius-md`), Zeilen-Traeger und grosse Flaechen 16px
(`--radius-lg`), Sheets und Glas-Chrome 26px+ (`--radius-xl`, `--radius-glass-card` 26 /
`--radius-glass-inner` 18), Kapseln und Pillen `--radius-full` (Tab-Bar-Kapsel, FAB, Chips,
ALLE Buttons). **Alles, was schwebt, traegt EINE Stufe (R18, 2026-10-07):** Dialog,
Mehr-Blatt, Such-Palette, Termin-Popover, Heute-Blatt, Toast, die Seitenleiste am Desktop
und die Tafel der Zugangsseiten 26px; die kleinen schwebenden Flaechen (Ueberlaufmenue,
Konto-Menue, Kontextmenue, Filter-Popover) 18px. Dialog, Mehr-Blatt und Palette trugen bis
dahin 16px - dieselbe Gattung in zwei Formen. Ein Blatt, das mit Abstand zur Fensterkante
schwebt (Dialog-Sheet, Mehr-Blatt), rundet rundum. Ein
border-radius wird ausschliesslich ueber ein Radius-Token oder eine Prozentangabe gesetzt
(Guard in test-frontend-audit.js).

**Die Konzentrik-Regel.** Verschachtelte Rundungen sind konzentrisch: der innere Radius ist
der aeussere minus Abstand, ausgeschrieben als `calc(var(--radius-*) - Npx)` bzw. `+ Npx`
fuer Umhuellungen (belegt in tasks.css, documents.css, health.css). Nie denselben Radius
blind nach innen kopieren. An den schwebenden Flaechen gerechnet und in `test:material`
gehalten: Dialog und Zugangstafel 26 - 16 Polster = 10px Felder (`--radius-sm`), Zeilenlisten im
Mehr-Blatt 26 - 12 = 14px, seine Systemzeile und der Treffertraeger der Palette 26 - 16 =
10px, Menuezeilen 18 - 4 = 14px.

**Die Lichtkante der Tafeln (R18).** Dialog, Mehr-Blatt und Such-Palette fangen oben Licht
wie Kapsel und Seitenleiste: `--glass-inset-elevated` an einem Pseudo-Element UEBER dem
Inhalt (ein Inset-Schatten der Tafel laege unter Kopf und Fuss), ohne Blur - am Dialog ist
`backdrop-filter` gesperrt, weil sein Rumpf scrollt. Der Dialogkopf ist keine eigene
Flaeche: er zeigt die Tafel, die Haarlinie trennt (bis R18 trug er das Chrome-Glas, hell
ein kuehler Graustreifen ueber der weissen Tafel).

## Components

### Komponenten-Kanon: ein Dialekt je Bedienfrage (Runde 5, 2026-09-26)

Anlass: die Critique vom 2026-09-26 (P1 "Bedienelemente sprechen mehrere Dialekte") zaehlte
allein im Budget vier Stile fuer Zeilenaktionen, app-weit fuenf Suchfelder, zwei
Listentraeger, vier Arten der Primaeraktion und Dialoge mit und ohne gehobenen Fuss. Wer
Loeschen in einem Tab gelernt hat, erkennt es im Nachbartab nicht wieder. Die Regel: **jede
Bedienfrage hat genau EINE Antwort, und sie ist ein vorhandener Baustein** - die Referenzen
sind Dokumente (ein Werkzeugmenue), Kalender (Filterblatt, Dialogfuss) und der Budget-Kopf.

| Frage | Die EINE Antwort | Baustein | Nicht mehr |
|---|---|---|---|
| Bearbeiten/Loeschen/Mehr an einer Zeile | **Zeilenaktionen (Entscheidung Ulas, 2026-10-07; ersetzt die Lesart "alles sichtbar" aus ignore.md):** je Zeile HOECHSTENS ZWEI dauerhaft sichtbare Icon-Aktionen (`.row-action`; seit R21: EINE Handlung plus Mehr-Knopf, Reihenfolge und Griff siehe **D10 Zeilen-Endzone**); alles Weitere und alles Destruktive steht als Eintrag mit Icon UND Wort hinter EINEM dauerhaft sichtbaren Mehr-Knopf. Nichts wird hinter Hover oder Geste versteckt; Wischen bleibt Zusatzweg; Loeschen bleibt widerrufbar bzw. fragt nach wie vorher. Der Zieh-Griff und sein Auf/Ab-Paar zaehlen nicht. **Zeilenaktionen sind neutral**, auch Anrufen in der Kontaktzeile (R23, Ulas 2026-10-25; vorher gruen nach Audit F1): Farbe traegt nur der Danger-Eintrag, die Leseansicht faerbt "Anrufen" als ihre Hauptaktion in der Modulfarbe. Keine Textkapsel ("Bearbeiten"/"Loeschen" als `.btn`) in einer Listenzeile. Benannte Ausnahmen: die Mahlzeit-Karte (kein Papierkorb, Loeschen im Dialog der Karte), die Werkzeugleiste im Kopf des Dokumentbetrachters (keine Listenzeile). Guards: `test:control-dialect` `row-action-count`, `row-text-capsule`, `row-danger-visible` (Ratchet) | `rowActionHtml()` / `rowActionEl()` und `rowMenuHtml({ id, label, items })` (utils/row-action.js; baut auf `popoverMenuHtml`) | `btn--secondary btn--icon` (violett umrandet), `btn--danger-outline` als Ring, eigene Stiftzellen, `btn--icon btn--sm` |
| Name der Zeilenaktion | nennt das OBJEKT: "Anna anrufen", "Kategorie Obst loeschen" | `t('common.editNamed' / 'deleteNamed' / 'removeNamed' / 'moreActionsNamed', { name })` oder ein Modul-Key mit `{{name}}` | zwoelfmal "Anrufen", fuenfmal "Loeschen" |
| Suchen | EIN Suchfeld: gefuellte Kapsel (`--color-fill-field`, `--radius-full`, Kante transparent, Fokus = Akzentkante + Ring), mobil im Kopf die Icon-Form. Am Desktop (ab 1024px) EINE Breite `--page-search-width` (320px, endet in Liste+Detail vor der Listenspur) an EINER Stelle: der Center-Slot direkt hinter dem Titel (Referenz Dokumente) | `renderPageSearch({ className: '... page-toolbar__center' })` + `wirePageSearch()` (utils/page-search.js); Breite und Lage stehen in page-search.css; die globale Suche teilt die Regel per Selektorliste; eine Suche nur fuer einen Abschnitt steht in dessen Kopf (`.section-toolbar`, Hauptbuch im Budget) mit derselben Breite und mobil derselben Icon-Form. Die globale Suche (⌘K) ist eine ARIA-1.2-Combobox: der erste Treffer ist vorgewaehlt, Pfeile bewegen nur die Markierung (der Fokus bleibt im Feld, nachkommende Treffer lassen sie an ihrer Zeile), Enter oeffnet sie (`utils/palette-combobox.js`, R16). Reihenfolge seit R20: Gehe zu, Daten, Neu anlegen; ein Namensanfang schlaegt ein Teilstueck (`paletteRank`), das Verb holt Anlege-Befehle erst ab drei Zeichen, gemischte Sektionen tragen das Modulsiegel an der Zeile, und ohne Treffer steht der Befehl, die Eingabe als Aufgabe anzulegen. Seit R21 nennt eine Fusszeile die Tasten (Pfeile, Enter, Esc; nur mit feinem Zeiger, `aria-hidden`), und Termine stehen kommend vorn, Vergangenes dahinter (juengstes zuerst; `upcomingEventsFirst`, server/services/search.js, `test:search`) | eigene Felder mit 10/12/16px-Ecke, randlose Leisten, `form-input type=search`; Modulbreiten (neun Breiten 280-830px) und Auto-Rand ans Zeilenende |
| Folge gleichartiger Zeilen | `.row-carrier` (Surface, `--radius-lg`, `--shadow-sm`, Haarlinien `> * + *`); liegt die Liste schon in einer Karte: `.row-divided` | list-row.css | `.list-rows` (12px, ohne Schatten) - laeuft aus, danach faellt die Regel |
| Anlegen | `page-fab` MIT Nomen: mobil in der Kapsel, am Desktop angedockt als Kopf-Pille "+ Nomen" (Kuerzel "n" angesagt); ein Kontext-FAB nennt je Tab sein Nomen (ein Nomen, keine Verbphrase) | `createPageFab({ dockLabel })`, `setPageFabAction(fab, { label, dockLabel, onClick })` (utils/fab.js) | schwebender FAB ohne Nomen, dessen Bedeutung mit dem Tab wechselt; Inline-Anlegeformulare ueber der Liste; eigener Kopfknopf `.toolbar-new-btn` |
| Dialogknoepfe | `.modal-panel__footer`: [Loeschen `btn--danger-outline` MIT Text, am Anfangsrand] ... [Abbrechen] [Primaer `btn--primary`]; `mountFooter()` hebt ihn an den Blattrand, mobil ueber die Falz - auch die geteilten Rueckfragen (confirm/prompt/select). **Das Verb (R17, E6): Anlegen = "Hinzufuegen" (`common.add`), Bearbeiten = "Speichern" (`common.save`), in jedem Dialog;** eine benannte Handlung behaelt ihr Verb (Hochladen, Einloesen, Freigeben, Zahlung eintragen). Neben einem absendenden Primaerknopf steht immer Abbrechen; ein Blatt, dessen Schalter sofort wirken (Teilnehmer der Belohnungen), schliesst mit "Fertig" allein, ein Leseblatt mit "Schliessen" vor der Handlung. Gehalten in `test:frontend-audit` ueber `test/dialog-grammar.js` (liest das Markup der oeffnenden Funktion, beurteilt die Beschriftung am deutschen Locale-Wert). Den Anfangsrand haelt EINE Regel in layout.css an `.modal-panel__delete` (setzt `decorateFooterDelete`, RTL gespiegelt), kein `margin` je Modul (R16) | modal.js; Vorbild Kalender-Termin, Aufgabe | `.modal-actions` im scrollenden Koerper, Loeschen als rotes Icon; "Erstellen"/"Aufgabe erstellen"/"Darlehen erstellen" neben "Hinzufuegen"; ein Primaerknopf ohne Abbrechen (Belohnungen bis R17); `btn--primary` linksbuendig im Formular (Haushaltshilfe bis R17) |
| Speichern in den Einstellungen (R17, E8) | **Schalter und Auswahl wirken sofort; ein Formular (Konto, Passwort, CalDAV, SMTP ...) speichert per Knopf (und Enter), und der sitzt rechts im Kartenfuss** - als Letzter im Markup, Nebenaktionen (Testen, Entfernen) davor, wie im Dialogfuss. Ein langes Blatt darf die Zeile kleben lassen (`.perm-actions`), aber rechts. **Ein einzelnes Zahl- oder Kurzfeld ohne Formular drumherum speichert beim Verlassen und mit Enter, quittiert per Toast, Escape nimmt die Eingabe zurueck** (H12 vom 2026-09-27, "ein Speichermodell auf der Seite"): Standard-Punkte der Belohnungen und Nachfrist der Uebersicht. R17 Schritt 4 hatte beiden kurz einen Knopf gegeben; Schritt 5 hat H12 wiederhergestellt und auf die Uebersicht ausgedehnt | `.settings-form-actions` (settings.css; `:has(> .btn--primary)` schliesst rechts ab); `bindDefaultPoints`, `bindGraceDays`; `test:frontend-audit`, `test:settings-navigation` | 99px linksbuendig, 612px vollbreit ("Passwort speichern" nackt in der Formularspalte), ein Speichern-Knopf fuer EIN Zahlfeld neben sofort wirkenden Schaltern |
| Boolean in den Einstellungen | Schalter (`.toggle`-Bahn, `role="switch"`), Label links, Zustand rechts; im Dialog ebenso ein Schalter, wo ein Zustand an/aus geht: **seit R23 (D8) in JEDEM Moduldialog die Schalterzeile `formSwitchRowHtml`** (Kalender, Aufgaben, Wiederholung, Budget, Abo, Notiz, Einkauf/Vorrat, Entsorgung, Mahlzeit, Schichtplan, Belohnungen) - Label links in der Groesse der Schalterzeile (im Zeilentraeger `.form-rows` in Zeilengroesse), Hinweis darunter per `aria-describedby`; eine freistehende `.toggle`-Bahn nur, wo die Zeile ihren Namen schon traegt (Teilnehmer, "Jahr unbekannt" am Geburtsdatum seit R22 D20, `utils/birth-date.js`), dann mit `role="switch"` (Guard `test:control-dialect` "D8"); Bahn aus = `--color-switch-off` (3:1, siehe Kanten), der Knopf startet per `inset-inline-start` und laeuft in RTL nach links wie bei Apple (#1572) | `toggleRowHtml({ ..., control: 'switch' })`, im Dialog `formSwitchRowHtml()` (settings/components.js) | native 18px-Checkbox, "Aktiviert"-Badge neben dem Haken, `.toggle`-Bahn mit Text rechts, `.form-check`/`.rw-switch` als Schalter |
| Auswahl aus 2-4 Werten (Theme) | `.segmented` im Well (Abschnitt "Segmented Controls") | panel.css | drei getrennte Rahmenknoepfe |
| Auswahl in einer Segment-/Tab-Leiste zeigen | EINE Bewegung: eine Kapsel hinter den Labels gleitet (`--duration-lg` + `--ease-out`, nur `transform`, Breite nur wenn sie sich aendert; reduzierte Bewegung springt); die Sidebar-Pille behaelt ihre Feder, hoechstens `--duration-xl`. Die Pille der mobilen Tab-Leiste folgt derselben Regel (bis 2026-10-15 `--duration-md`). Gleiten antwortet auf einen WECHSEL: die erste Platzierung eines frisch gebauten Indikators (Laden, Neubau der Leiste) springt ans Ziel, sonst glitt er sichtbar vom ersten Eintrag herein (`placeNavIndicator` in router.js, 2026-10-15) | `attachSegmentIndicator(bar)` (utils/segment-indicator.js; folgt jedem Wechsel des aktiven Eintrags selbst), `renderSubTabs({ indicator })`, `{ key }` fuer Leisten, die neu gebaut werden | springende Flaeche am aktiven Tab; eigene WAAPI-Kapseln; Literal-Dauern (450ms) |
| Mobiles Blatt (Dialog, Mehr) | EINE Grammatik: Griff 36x5 in der Kopfzone (`--sheet-grabber`: hell `--color-border-strong`, dunkel Glas-Weiss), Griff-Oberkante bis Titel 16px; 1:1 mitgehen, schliessen ab 80px Weg ODER Flick > 0.5px/ms, sonst zurueckfedern (`--duration-lg` + `--ease-out`), nach oben Gummiband; der Zug liegt auf `translate`. Ein- und Ausfahrt aus EINEM Paar (`--sheet-in`/`--sheet-out`, Hub `--sheet-lift`), auch die mobile Suche. Der Backdrop des Mehr-Blatts blendet im Ausgang des Blatts aus (`opacity` + `visibility` ueber `--sheet-out`, geschlossen ohne Zeiger), statt per `display: none` im ersten Frame zu verschwinden | `wireSheetDrag(sheet, { scroller, onDismiss })` (utils/sheet-drag.js) | leerer Griff-Streifen, Glas-Weiss auf weisser Tafel, Faktor 0.6, Schliessen erst bei `touchend`, Zurueckspringen ohne Transition |
| Mehrfachauswahl in einer Liste | Auswahlkreis ERSETZT Statuskreis und Zeilen-Picker (Apple Erinnerungen); Leiste = Bulk-Pille mit "Fertig"; Name je Zeile mit Objekt ("<Titel> auswaehlen"); Loeschen im Pillen-Stil, Rueckfrage in der Pille, eine Folge, die die Frage nicht traegt, als Detailzeile darunter (Dokumente: kein Papierkorb) | `.select-circle` (layout.css; gewaehlt seit R23 D7 UMRANDET im App-Akzent mit Haken, nie gefuellt - gefuellt heisst erledigt) + `setBulkPill({ label, actions })` / `clearBulkPill()` (utils/bulk-pill.js), `confirm: { question, detail? }` | native blaue Checkbox neben dem Statuskreis, eigene Aktionsleiste, gefuellte rote Loeschen-Kapsel |
| Aktionen an Karte oder Zeile | dauerhaft sichtbar, ruhig per Tertiaerfarbe; reduziert wird ihre ZAHL (hoechstens zwei + Mehr-Knopf, Zeile oben), nie ihre Sichtbarkeit | `.row-action`, `rowMenuHtml()` | Einblenden erst per `:hover`/`:focus-within` |
| Erledigen an einer Zeile | EIN Abhakkreis: 20px, 2px, in Ruhe `--color-text-tertiary`; unter dem Zeiger laedt der Modulton ein, erledigt ist `--color-success` mit Haken (Gruen bestaetigt, es steht nie in Ruhe da); `--static` = Zeichen ohne Einladung. **Seit R23 (D7) dasselbe Zeichen an Teilaufgaben (Zeile, Detail, Blatt) eine Stufe kleiner (`--sm`, 16px) und an Checklisten in Notiz und Beschreibung (in em, im Ton der Karte, erledigt gruen)**; Umbenennen/Loeschen einer Teilaufgabe im Zeilenmenue. Das Kaestchen des Einkaufs (`.item-check`) ist ein Kaestchen und bleibt eigen (Supermarkt-Geste) | `.check-ring` / `--sm` / `--done` / `.check-ring__check` (list-row.css) an `.task-status-btn`, `.housekeeping-task__check`, `.subtask-item__checkbox`, `.detail-subtask__ring`; `.note-md-box` (typography.css) | zweiter Ring je Modul (24px, in Ruhe gruen); 18px-Kaestchen, Lucide-Kreis oder Quadrat fuer dieselbe Geste; Stift + Papierkorb an der Teilaufgabe |
| Umsortieren per Ziehen (R23, N3) | Der Platz an der Zielstelle ist ein LEERER Schlitz (getoent, gestrichelt im Modulton, Inhalt unsichtbar), das Ziehbild die Zeile selbst, deckend und gehoben; die Nachbarn weichen mit `--duration-sm` + `--ease-out` aus, ohne Feder | `.sortable-ghost` (layout.css, EINMAL), `makeSortable()` (utils/sortable.js, nimmt SortableJS' Inline-0.8 am Klon zurueck) | 40-%-Abbild als Platz, 80-%-Ziehbild, `--ease-glass` beim Ausweichen |
| Was eine Zeile tut (R16, R17 E7) | **In Abhak-Listen des Einkaufs hakt der Zeilen-Tipp ab; sonst oeffnet er** (wo es ein Leseblatt gibt, das Leseblatt: Kalender, Kontakte, Inventar, seit R17 Geburtstage unter der Spaltenschwelle; sonst Bearbeiten, mit Leserecht die Leseansicht) - als echter Knopf (`.list-row__main--interactive`). Im Einkauf bleibt ein EIGENER Weg in die Artikel-Details (bis 2026-10-07 der Stift, seither der Eintrag "Bearbeiten" im Mehr-Knopf der Zeile): die ganze Zeile ist dort das Abhak-Ziel (einhaendig im Laden, 358 statt 48px; R16, von E7 ausdruecklich ausgenommen). **Im Leseblatt sitzt Bearbeiten an EINER Stelle:** als Primaerknopf am Ende des Fusses (`edit.primary`; Termin, Inventar, Kontakt, Geburtstag), in der Detailspalte als Kopfaktion; die Aufgabe ist die benannte Ausnahme (Hauptabsicht Erledigen). **Loeschen = Wisch mobil + ein fester Ort am Desktop:** den Dialogfuss (Desktop, Tastatur) und auf Touch den Wisch zum Zeilenende. Eine Zeilenaktion, die nur den Zeilenkoerper doppelt (Stift), entfaellt; sichtbare Zeilenaktionen bleiben sichtbar (ignore.md), reduziert wird ihre ZAHL | `wireSwipeRows()` (utils/swipe-row.js), `scheduleUndoableDelete()` (utils/ux.js), `decorateFooterDelete()` (modal.js; mobil Papierkorb nur in der Dreiheit Loeschen/Abbrechen/Primaer - steht daneben hoechstens EINE beschriftete Aktion wie im Leseblatt von Rezept, Kontakt, Notiz, behaelt Loeschen sein Wort, `--delete-worded`, R23) | Stift + Papierkorb als 2 x 48px am Zeilenende, vier Grammatiken je Modulgruppe |
| Bearbeiten in einer Leseansicht | **EIN gefuellter Primaerknopf am Ende des Fusses** - Blatt, Popover und Detailspalte (R19, `withPrimaryEdit` in components/detail-view.js). Andere Primaerknoepfe desselben Fusses treten zurueck (Rezept: Einplanen sekundaer). **Einzige Ausnahme: die Aufgabe** (Ulas 2026-10-16) - wer sie oeffnet, will sie meist abhaken; Erledigen (erledigt: Wieder oeffnen) bleibt der EINE gefuellte Knopf am Ende, Bearbeiten steht sekundaer davor, mobil als Stift (`keepPrimary: true` an `openDetailView`). Rezepte oeffnen mobil als Leseblatt statt aufzuklappen | `withPrimaryEdit(actions, edit, { keepPrimary })`, `detailFooterEl()` | Bearbeiten umrandet im Kopf, zwei gefuellte Knoepfe in einem Fuss |
| Suche ohne Treffer | EIN Leerzustand (R19): Titel "Keine Treffer", ein Satz (mit Filtern ein zweiter), Begriff und Filter als Chips (`.empty-state__term`), EINE Aktion "Suche zuruecksetzen" (hebt alles auf, was die Chips nennen), Zusatzwege dahinter | `searchEmptyOptions()` / `searchEmptyEl()` / `searchEmptyHTML()` / `mountSearchEmpty()` (utils/empty-state.js); Guard `test:search-empty` | eigener Titel/Satz je Modul, Begriff in Anfuehrungszeichen, kein Ausweg |
| Avatar-Stapel | Scheiben mit 2px Luft (`gap: --space-0h`) in Lesereihenfolge, "+N" zuletzt, hoechstens drei Gesichter (R19) | `renderAvatarStack()` (components/user-multi-select.js) | Ueberlappung, die Initialen des Nachbarn anschneidet |
| Kontakt ohne Konto | Initialen auf neutraler Flaeche (`--color-fill-well`), Haushaltsmitglieder Foto/Farbe (R19); eine Anrede vorn ("Dr.", "Prof.") zaehlt nicht mit, solange zwei Woerter bleiben (R23, utils/initials.js) | `contactAvatar()` (pages/contacts.js) | Kategoriezeichen als Avatar; "DW" fuer "Dr. Anna Weber" |
| Name einer Zeile | Rolle **Zeilentitel**: 16px medium (Abschnitt Typography) | `.list-row__name` / `.u-row-title` (typography.css) | 15/600, 16/400, 17/600 je Modul |
| Abschnitt als Auszug eines Reiters | der Abschnittstitel IST der Weg: Knopf im `h2.u-section-title` mit Pfeil | `.section-title-link` (layout.css) | "Alle anzeigen"-Knopf daneben, Nachbau je Modul |
| Ueberschrift ueber Inhalt | **Gruppentitel IN einer Liste** = `.list-group__title` (12px Versalien), Wort plus Zaehlstand, OHNE Zeichen (R23 D10: Einkauf, Vorrat, Inventar trugen das Kategorie-/Ort-Icon; es bleibt im Kategorie-Verwalter und in den Auswahlen; Guard `test:control-dialect` "D10: kein Gruppentitel ..."). **Abschnittstitel einer Flaeche** = `h2.u-section-title` (20px semibold) AUF DER BUEHNE, ueber der Karte oder dem Traeger, Werkzeuge rechts daneben; ohne Icon. Wiederholt er den Namen des offenen Reiters, steht er nur in der Gliederung (`.sr-only`) | list-row.css, typography.css | Titel in der Karte, `div` ohne Ueberschriftenrolle, Icon vor dem Titel |
| Betrag in Zeile oder Karte | semibold, `tabular-nums`; Ton nur mit Aussage (Zuwachs gruen, Schuld rot, **null neutral**). Fett bleibt der Kennzahl (`.metric-card__value`, Title 1) | `--font-weight-semibold`; `test:budget-ui` | 600 / 700 / 900 je Reiter, Gewicht als Literal oder mit `!important`, "0,00 €" in Erfolgsgruen |
| Zeitraum blaettern | EINE Reihenfolge im Markup (= Tab-Folge): Pfeil zurueck, Wert, Pfeil vor, DAHINTER der Reset ("Heute"/"Aktuell" - ein Reset, kein Schritt). Die Pfeile nennen ihr OBJEKT ("Vorherige Woche", "Naechster Monat"), der Wert haelt eine feste Breite, damit kein Pfeil wandert. Kalender, Wochenplan, Budget, Berichte der Haushaltshilfe und seit R16 der Schichtplan (dort im Koerper: "Schichtplan" + Stepper passen mobil nicht in eine Kopfzeile). Gleiches gilt seit R17 fuer die Berichte der Haushaltshilfe: "Haushaltshilfe" (ca. 236px) + Stepper (192px) > 358px, und als eigene Kopfzeile schob der Zeitraum die Reiterleiste um 52px nach unten - er steht unter 1024px als Zeile UNTER den Reitern, zwischen Kopf und Inhalt (`#housekeeping-period`); ab 1024px haengt `placeReportPeriod()` denselben Knoten als Center-Slot in die Titelzeile (E16: dort sprang nie etwas, und unter den Reitern scrollte der Monat weg) | `periodStepperHtml()` + `syncPeriodReset()` (utils/period-stepper.js) in Kalender, Essensplan, Budget, Haushaltshilfe/Berichte und Schichtplan/Vergleich; Module behalten ids und Klassen, die Shell haengt an `period-stepper__*`. Der Reset zeigt sich nur neben dem laufenden Zeitraum (`.is-current` + `inert`, Fokus vorher zum Zurueck-Pfeil). **Seit R21 blaettern Links/Rechts, solange der Fokus auf dem Stepper steht** (Pfeil, Wert oder Reset; RTL gespiegelt, `aria-keyshortcuts` an den Pfeilen): `wirePeriodArrowKeys()` am Traeger der Pfeile, nie am Seitencontainer - im Kalender gelten die Pfeile seitenweit (router.js). Derselbe Griff blaettert im Dokumentbetrachter durch die sichtbare Liste (Vor/Zurueck-Paar vorn in der Leiste; seit R22 ein eigenes Kind der Meta-Zeile, am Listenrand der fehlende Pfeil gedimmt statt einer Luecke, mobil in der Zeile des Kategorie-Knopfs). **Steht statt des Steppers eine Notiz (Budget: Konten, Abos, Darlehen), haelt ihr Slot die Breite des Steppers** (R22: mobil 2 x `--target-base` + 96px, Tablet + 144px; vorher wuchs er in die freie Zeile, Layout-Shift beim Reiterwechsel 0,0005 / 0,012 -> 0) **und beginnt am Desktop, wo der Monat beginnt** (`text-align: start`; `test:budget-ui` "Kopfnotiz"). **Die Pfeile stehen neutral (R19)**, kein Modul faerbt sie um (der Essensplan trug sie im Akzent; Guard `test:frontend-audit`). Im Essensplan bleibt der Stepper in der Zeile UNTER der Kuechen-Leiste - die Leiste ist der gemeinsame Kopf von vier Reitern. **Mobil in der Titelzeile (`--period-inline`, Budget) liegt der Reset durchsichtig UEBER dem Wert:** Tipp aufs Monatslabel springt zurueck, der Wert steht im Modulton, solange man daneben steht; Name und Tab-Stopp bleiben | `< Heute > Wert`, Pfeile namens "Zurueck"/"Weiter", Reihenfolge per CSS-`order` |
| Kennzahl einer Flaeche | EINE Karte, EIN Wert-Grad: am Desktop `.metric-grid` mit Title 1 (28px) - auch in einer Seitenspalte, die EINE Karte je Zeile stapelt (die Spalte sagt es der Zeile mit `--summary-cards: 1` + `--metric-value-size`); mobil die Kurzzeile, bei einer einzigen Zahl ohne Aufklapper (`metricGlanceHtml()` ohne `controls`). Seit R18 FUEHRT je Geld-Reiter eine Zahl: `lead: true` in der Kurzzeile, `.metric-card--lead` in der Reihe `.metric-grid--led` (Large Title 34 in der Seitenspalte, sonst Title 1, kleiner nur bei Ueberlauf - R23 D12; die uebrigen treten zurueck). **Eine Saldo-Aussage (R22, D9):** die Aufteilung nennt die Richtung, die nicht null ist ("Du schuldest", "Du bekommst" oder "Ausgeglichen"), EINE Karte - beide nur bei zwei Waehrungen in beide Richtungen. Eine Seitenspalte beginnt an der Werkzeuglinie der Liste und stapelt Karten in Inhaltshoehe (`grid-auto-rows: auto`, `padding-block: 0`; Abos wie Darlehen). Eine Darlehenskarte fuehrt mit ihrer Zahl, "Restschuld" steht leise in der Bezugszeile, kein Versal-Eyebrow | `.metric-grid`, `.metric-grid--rail`, `.budget-glance*` (panel.css), utils/metric-glance.js, utils/metric-card.js | 20px in der Seitenleiste neben 28px in der Zeile, Zweier-Reihe mit 144px-Karten, Karte statt Kurzzeile unter 640px |
| Reiter-Skelett im Budget (R16) | Kennzahlen (s. o.), dann je Abschnitt `.u-section-title` AUF DER BUEHNE mit den Werkzeugen rechts (`.section-toolbar`), darunter der Zeilentraeger (`.row-carrier`). Karten nur, wo ein OBJEKT eine Karte ist (Darlehen, Gruppe, Konto). Statistik: Verlauf und Anteilsring teilen Zeile 1, die Balken nehmen darunter die Bahn; mobil steht der Ring als Kopf der Kategorieliste | budget.js, subscriptions.js, split-expenses.js, budget-stats.js | Titel in der Karte (`.subscriptions-list-section`, `.split-card`), Kartentitel 17px als Abschnittstitel, Ring in einer Leiste, die unter ihm leer bleibt |
| Pflichtfeld | der Stern ist EIN Element hinter dem Label: `${REQUIRED_MARK}` (`.required-marker`, aus dem Baum genommen); die Pflicht sagt das Feld (`required`) - IMMER, auch wo kein Stern steht. Stern an jedem Pflichtfeld; ein Formular aus EINEM Feld (2FA-Code, Display koppeln) und die Anmeldeseiten tragen keinen, dort ist die Pflicht offensichtlich. Zeilen-Bausteine tragen ihn per `labelExtra` (2026-10-18, Guard in `test:frontend-audit`, seit R23 auch fuer `yuvomi-datepicker required`); `formField()` des Schichtplans setzt ihn selbst, wo das Feld `required` traegt. Neben dem Stern steht kein "(optional)" am Kannfeld - zwei Markierungen fuer dieselbe Frage. **Der Fehler steht am Feld, alle auf einmal** (`reportFieldErrors`), nie als Sammel-Toast. **Erstfokus** = erstes Pflichtfeld zum Tippen, sonst erstes Tippfeld, erst dann Auswahl/Schalter (nicht Logo, nicht Typ-Auswahl; Felder in `[hidden]`-Gruppen zaehlen nicht; `firstEntryField`, components/modal.js). Ohne Feld (Dokument-Betrachter, Leseansicht) nimmt nach einem Zeigertipp der Dialogtitel den Fokus (`tabindex=-1`, ohne Ring), nach Tastatur das X mit Ring - die Eingabeart merkt modal.js vor `showModal()` (R23, Critique G4: umrandetes X nach Tipp) | utils/html.js | " *" im Locale-Text, handgebauter Span je Seite |
| Datei waehlen, Farbe waehlen (R23, D8) | EINE Dateiwahl: die Ablagezone der Sicherung (grosses Label ueber verstecktem Feld, Ziehen + Waehlen, gewaehlte Datei darunter); EIN Farbwaehler: der runde `settings-color-button` | `fileDropzoneHtml()` + `wireFileDropzone()` (settings/components.js), `.settings-color-button` | natives "Datei auswaehlen"-Feld, rechteckiger `form-input--color`, nacktes `type=color` als Textfeld |
| Vor der Anmeldung | EIN Kopf mit Marke (`authHeroHtml()`; ueber einer Karte mit eigener h1 als Absatz, `heading: false`), EIN Auge an JEDEM Passwortfeld (`wirePasswordToggle()`), EIN Fehlerfeld (`authErrorHtml()`: `role="alert"` + `tabindex="-1"`, kein `aria-live` daneben) | utils/auth-ui.js; `test:auth-pages-ui` | Marke nur auf der Anmeldung, Auge nur auf zwei von vier Seiten, drei Fehlerfeld-Fassungen |
| Option in den Einstellungen (R17, E9) | **Eine Zeile in einem Traeger je Abschnitt** (`.row-carrier.settings-group`), wie "Aktive Module": Label links, Bedienelement rechts (Schalter, Auswahl, Kurzfeld), in JEDER Breite zweispaltig - das Label bricht um, das Bedienelement ist bei der halben Traegerbreite gedeckelt (`50cqi`), ein einzelnes Textfeld (Text, E-Mail, Telefon, Adresse, Passwort) FUELLT diese Haelfte statt bei seinen 20 Zeichen zu bleiben (Re-Kritik 2026-10-17: E-Mail 201px in 680px), die Zeile ist mindestens `--target-lg` hoch. Ein Segment oder eine Chip-Gruppe steht unter dem Label (`--stacked`). Der Hinweis zu EINER Zeile ist ihre Sekundaerzeile und laeuft unter beiden Spalten; der Hinweis zur Gruppe ist ihr Fuss auf dem Grund (`.settings-group__footer`). Eine einzelne Zeile traegt keine eigene Ueberschrift. Eine Karte (`.settings-card`) bleibt dem Formular: mehrere Felder und ein Knopf (Konto, Passwort, CalDAV, SMTP, Token). Mehrfachauswahl in einer Zeile = `.filter-chip` mit `aria-pressed` (Standard-Erinnerungen). Der Wert einer Auswahl ist KURZ ("Automatisch", "Deutschland"), weil die Bedienspalte mobil rund 180px hat; was er gerade bedeutet, steht vorn in ihrer Hinweiszeile ("Gerade Englisch.", `settings.hintWithCurrent`) und geht mit, wenn Auswahl oder Automatik wechseln. Eine Region heisst nach ihrem Land, mit Sprache nur, wo das Land allein nicht unterscheidet (Kanada, Philippinen) oder die Sprache das Format bestimmt (Schweiz) (R21 S9c). Passt ein Name nicht, steht seine Kurzform im Wert und der volle Name vorn im Hinweis: Laender und Sprachen ueber `settings.regionShort.*`/`settings.languageShort.*` ("VAE", "Portugiesisch (BR)"), die Sprache einer Region als Kuerzel ("Kanada (FR)") (#2151); eine Waehrung als Code und Symbol ("GBP £", Name aus `Intl.DisplayNames` im Hinweis), eine Zone als ihre Stadt ("New Salem", die IANA-Kennung im Hinweis) (#2166) | `settingRowHtml()`, `settingSwitchRowHtml()` (settings/components.js), settings.css "Gruppierte Zeilen"; `test:settings-navigation` rendert jeden Abschnitt und haelt "keine Karte mit genau einem Bedienelement", dazu "R21 S9c": kurzer Wert, Detail vorn im Hinweis, Regionen unterscheidbar, und "#2151": jeder Regions- und Sprachname in jeder Sprache im gemessenen Zeichenbudget | das Detail in Klammern im Wert ("Automatisch (Englisch)", "Deutsch (Deutschland)" - bei 390px als "Automatisch (Engl…" gekappt), eine Karte je Option (Darstellung: zehn Einstellungen in acht Karten, 1714px), Kartentitel + Hinweis UEBER einem einzelnen Schalter, ein vollbreites Auswahlfeld fuer "5 Minuten", 16px-Checkbox in einer Pille neben `role="switch"` |
| Ueberschriften im Einstellungsblatt | EINE Stufenleiter, die Groesse folgt der Tiefe: Blatt 22/700, Reichweite ("Fuer mich"/"Fuer den Haushalt") 20/600, Abschnitt 17/600, Karte 16/500; ohne Reichweite eine Stufe kuerzer (22/20/17). Die Ebene im Baum zieht `levelScopedHeadings()` per `aria-level` nach | typography.css, settings/shell.js | Reichweite als kleinste Stufe (16px sekundaer), "Termine" zweimal auf der Ebene der Reichweite; seit R17 auch zweimal dieselbe ABSCHNITTSueberschrift in einem Blatt ("Termine" fuer mich und fuer den Haushalt - der persoenliche Abschnitt heisst "Termin-Vorgaben"), drei Stufen vor dem ersten Feld (Kartentitel ueber einer einzelnen Zeile) |
| Antippbarer Wert in einem Leseblatt | Wert in Textfarbe, das Zeichen der Zeile im Modulton, Unterstreichung unter dem Zeiger | `.contact-detail__link`, `.detail-row:has(...) > .detail-row__icon` (contacts.css) | Link im Modul-Rot neben "Loeschen" in Warnrot |
| Kurze Angaben in einem Leseblatt, schmal (R19) | **Info-Listen-Form:** Label vorn, Wert am Ende, EINE Zeile; ein langer Wert bricht unter das Label. Nur Textwerte, Fliesstext und Knoten bleiben untereinander; opt-in je Ansicht (`rowLayout: 'inline'`, heute Inventar: 12 Zeilen 565 -> 371px bei 390px) | `detailBodyEl` / `.detail-view--inline-rows` (detail-view.css) | Label als Caption ueber jedem Wert, 45px je Feld |
| Icon stylen | auf `svg` (oder eine Klasse) zielen - Lucide ersetzt `<i data-lucide>` durch `<svg>` | - | Regeln auf `... i`: sie trafen nie (38 entfernt) |
| **D1 Kopf-Werkzeug-Slot** (Critique 2026-10-16, "die Werkzeugebene spricht drei bis vier Dialekte") | Feste Reihenfolge rechts im Kopf: **Suche · Ansicht · Filter · Mehr**, dahinter am Desktop die "+ Nomen"-Pille. EINE Haut fuer jeden Kopf-Icon-Knopf: `btn btn--secondary btn--icon` (Ring `--color-border`, Tinte Akzent) - auch die Lupe in ihrer Icon-Form, die Kreise der Uebersicht, das "..." der Entsorgung, "Kalender verwalten". Ansichtswahl IMMER `.segmented` (Icon-Variante `--icons` erlaubt) mit `attachSegmentIndicator`; im Kopf misst sie aussen so viel wie ein Kopfknopf. Suche am Desktop als Feld (`renderPageSearch`, Center-Slot oder `.page-toolbar__tools`), mobil als Lupe an ERSTER Stelle der Werkzeuggruppe in der Titelzeile. Mobil stehen die Werkzeuge in der Titelzeile (`page-toolbar--title-tools`); passt eine Ansichtswahl nicht daneben, steht sie im Menue (Einfachauswahl) bzw. - bei vier Ansichten - als Pop-up-Knopf mit dem WORT der Ansicht und festem Auf/Ab-Zeichen (Kalender). Kalender am Desktop EINE Zeile (125 -> 69px), Tablet zwei (182 -> 135px), Aufgaben mobil 120 -> 65px | `popoverMenuHtml()` (Standard-Ausloeser), `pageToolsMenuHtml()`, `renderPageSearch()`, `.segmented` + `.page-toolbar .segmented*` (panel.css), `.page-toolbar__tools` (page-search.css); `test:popover-menu`, `test:dashboard-a11y`, `test:calendar`, `test:documents-ux`, `test:mobile-chrome` (Lupe, Traegerliste) | `.group-toggle` als Ansichtswahl, runde Eigen-Pille der Dokumente, eigenes Well des Kalenders, `btn--ghost` als Menue-Ausloeser, graue Kreise ohne Rand, nackte Lupe, Suchknopf, der eine Leiste unter dem Kopf aufdeckt, Ansichts-Glyphe, die mit der Ansicht wechselt, Werkzeuge in einer eigenen zweiten Zeile |
| **D2 Filter** | Eine Dimension mit hoechstens sechs Werten = Chipzeile inline, Chips immer `--sm`. Mehrere Dimensionen = EIN Filterblatt: Personen und Kategorien als Chips, Ebenen und Ansichtsschalter als Schalter (`.switch`), EIN Reset-Text (vorhandenen Key wiederverwenden). Ausloeser = Kopf-Icon-Knopf mit Zaehler-Badge, kein Wort "Filter" | `filterButtonHtml()` ohne `showLabel`, `openFilterSheet()` (utils/filter-sheet.js), `.filter-chip--sm` | Text-Pille "Filter (n)", 48px-Chips in Kontakten und Vorrat, Checkbox-Blatt, zwei Reset-Texte |
| **D3 Unternavigation** | Hoechstens sieben Bereiche = Text-Reiter (`.sub-tab`, OHNE Icons; seit R22 S9 auch die Kuechen-Reiter am Desktop); mehr = Liste mit Drill-down | `renderSubTabs({ indicator })`; `test:frontend-audit` "D3: die Unternavigation der Module ist Text" | Icon-Reiter, eigene Bereichsspalte, Segment + Chips als Navigation |
| **D4 Formulare** | Zwei Dialekte nach ZWECK: Label-ueber-Feld fuer Text und Stammdaten, Inset-Zeile fuer Messwerte. Datum/Uhrzeit sieht in beiden wie ein Feld aus. Pflichtfeld/Name zuerst und fokussiert, Seltenes hinter "Weitere Angaben" | `.form-group`/`.form-input`, `<yuvomi-datepicker>` | Dialekt nach Modul, nacktes Datum als Text |
| **D5 Anlegen** | Der FAB ist der eine Weg (benannte Ausnahme: Quick-Add im Einkauf, Felder in Kapsel+Fill wie die Suche). Ein Leerzustand neben dem FAB hat keine zweite Primaeraktion (seit R23 D14 mit Guard `test:control-dialect` "R23 D14": die Aktion traegt `tone: 'secondary'`, oder der Aufruf begruendet, dass dort kein FAB steht; die leere Einkaufsliste hat gar keinen Knopf, ueber ihr steht die Schnelleingabe; ein leerer Dokumente-Ordner ist ein Ort, „„Steuern" ist leer", kein Filter ohne Treffer); das Planer-"+" nur in leeren Zellen. **Abschnittsaktion:** genau EINE `btn--secondary btn--sm` (Icon + Wort) rechts neben dem Abschnittstitel; seltene Nebenaktionen hinter einem `btn--secondary btn--icon btn--sm <modul>-section-tools popover-menu__trigger` (kein `pageToolsMenuHtml`). Guard: `test:control-dialect` `section-action` | `createPageFab()` (utils/fab.js); `popoverMenuHtml({ triggerClass: 'btn btn--secondary btn--icon btn--sm <modul>-section-tools' })` (utils/popover-menu.js) | `btn--primary` im Leerzustand neben dem FAB; mehr als eine `btn--secondary btn--sm` im Abschnittskopf; `btn--ghost` neben `btn--secondary` |
| **D6 Zeilen** (R18; seit R21 geschaerft durch D10) | Alles Weitere hinter EINEM sichtbaren Mehr-Knopf (`ellipsis`), auch auf Touch; Zeilenkoerper oeffnet, Chevron nur bei Navigation. Wie viel sichtbar bleibt und in welcher Reihenfolge, sagt D10 | `rowMenuHtml()`; `test:control-dialect` | Aktion nur per Geste oder Hover, Stift neben oeffnendem Koerper |
| **D7 Modale** | Das geteilte Modal laeuft auf `<dialog>.showModal()` (Top-Layer, inerter Hintergrund, Esc) | modal.js | eigener Fokusfang ueber einem `div` |
| **D8 Typo** | Gruppenueberschrift in Listen = EIN Stil (Micro-Label, ohne Icon). Die Titelzeile hat eine feste Mindesthoehe (`min-block-size: var(--target-base)`, Titel mittig): der Large Title steht in jedem Modul am selben Ort (vorher 8 gegen 11px). Die Einstellungen tragen am Desktop den Modulkopf wie jedes Modul; eine Abschnittsueberschrift, die das Blatt wiederholt ("Mein Konto" unter "Konto"), steht nur in der Gliederung | `.list-group__title`; layout.css Large-Title-Zone; `test:mobile-chrome` (D8) | Icon vor der Gruppenueberschrift, springender Titel, Einstellungen ohne Kopf |
| **D9 Farbe** | Datenidentitaet (Budget-Kategorie) behaelt EINE Farbe ueberall; Zustand sagen Text und Icon, nicht Umfaerben. **Seit R22 auch der Journal-Punkt:** eine Ausgabe traegt `--entry-color` ihrer Kategorie (Einnahme gruen, Umbuchung neutral), die schraffierten Serien als Ring mit Kern; ohne Ausgabe im Zeitraum die Farbe der Katalogstelle (`categoryPaint()`). Erwartet (Streifen) und kommend (hohler Ring) gehen vor | Kategorie-Token, `categoryPaint()` (utils/budget-category-colors.js); `test:budget-ui` "R22 D9: der Punkt einer Ausgabe" | Kategorie, die je Zustand die Farbe wechselt; ein Punkt, der nur das Vorzeichen wiederholt |
| **Dokumente: Liste vor Raster** (R22, D11) | Ohne gespeicherte Wahl oeffnet die LISTE auf jedem Geraet (Typ-Zeichen der Kategorie, Datum, Groesse); das Raster bleibt waehlbar und rahmt seine Vorschau 4:3 statt quadratisch. Unter 30rem traegt die Zeile Datum und Groesse in der Metazeile VOR der Kategorie (die nennt das Zeichen schon). Ordner UND Kategorien bleiben (R21). Der FAB zeigt "+" wie jeder Anlegen-Knopf; der Speicherort im Upload ist eine Auskunft fuer Admins | documents.js `state.view`, documents.css `.document-row__meta-stats`; `test:documents-ux` "R22 D11", `test:documents-viewer-focus` | Raster als Desktop-Standard mit 190px-Vorschauen leerer Blaetter; schmale Zeile ohne Datum; Upload-Pfeil als FAB-Glyphe |
| **Kennzahl null ist kein Weg** (R22, Inventar) | Eine waehlbare Kennzahl (Fristen-Filter) ist nur ein Knopf, solange sie etwas filtert: bei 0 und ausgeschaltetem Filter steht sie als ruhige Zeile, nicht in Akzenttinte | inventory.js `renderMetrics`; `test:inventory-list-detail` "R22" | "Braucht Aufmerksamkeit 0" als Link |
| **Kategoriebalken im Budget** (R23, Critique G4) | EINE Bahn und EINE Fuellung: `.budget-bar-row__track` (8px `--space-2`, `--color-fill-well`, rund) und `.budget-bar-row__fill` (waechst per `scaleX(--bar-scale)`, Ausgaben in Kategoriefarbe, sonst Modulton). Die Abo-Aufteilung ("Nach Kategorie", "Nach Zahlungsart") teilt beide seit R23 (Bahn in derselben Regel, Fuellung `--expenses`); ihr Name steht wie in der Kategoriezeile als Fussnote in Sekundaertinte und bricht um. Die Planzeile bleibt eine Listenzeile mit Titel (sie oeffnet den Plan), ihre Bahn ist dieselbe Mulde | budget.css, subscriptions.css; `test:control-dialect` "Kategoriebalken: ..." | 8px-Literal auf `--color-surface-3`, `<i style="width:%">` im Modulton, abgeschnittener Name |
| **Lead-Kachel im Budget** (R22, D9) | EINE Bauform am Zeilenanfang: `.budget-tile` (40px, `--radius-md`, Flaeche `--tint-surface`, Kante `--tint-hint` aus `--tile-color`, Zeichen/Schrift `--color-text-primary`); Konto = Kontofarbe + Kontoart-Zeichen, Abo = Marken-/Kategoriefarbe mit Logo oder Initialen als FUELLUNG, Ausgabe der Aufteilung = Ton der Kategorie (`categoryTone`), Gruppe neutral. Das Journal bleibt beim Punkt. Endzone in jedem Reiter nach D10: Abo [Verlaengern][Mehr: Verlaengern, Loeschen], Konto [Mehr], Darlehensrate [Mehr]; die Buchung traegt KEINEN Mehr-Knopf (keine zweite Handlung, Loeschen im Blatt - ein Mehr nur fuer Loeschen brach mobil die Metazeile in 6 von 9 Zeilen um). Dialoge flach wie Buchung und Inventar (Haarlinie + leiser Titel statt Well), Fuss nach Kanon ohne Inline-Stil (`.modal-panel__footer-group`) | budget.css, subscriptions.css, split-expenses.css; `test:budget-ui` "Lead-Kachel", "Abo-Dialog flach"; `test:control-dialect` "Dialog-Fuesse von Budget" | drei Kacheln (14/45 % als Literal, deckende Flaeche, 42px grau ohne Kante); Chevron an der Abo-Zeile; Well-Abschnitte im Dialog |
| **D10 Zeilen-Endzone** (Critique R21, 2026-10-21; EINE Spezifikation fuer alle Module) | **Am Zeilenende in dieser Reihenfolge: [hoechstens EINE sichtbare Handlung] [Mehr-Knopf] [Griff, ganz rechts, nur in sortierbaren Listen].** Hoechstens zwei sichtbare Icon-Ziele je Zeile (Handlung + Mehr). Destruktives steht immer im Mehr-Knopf (`rowMenuHtml`, `danger: true`); dorthin wanderten in R21 auch Ueberspringen einer Dosis, Plan und Schliessen eines Taschengeldkontos, Einzahlen und in der Dokumentzeile das Auge (das Menue fuehrt dann "Ansehen"). Ein Chevron steht nur an reiner Navigation (Gesundheitsbereiche, Einstellungen), nie an einer Zeile, die ein Objekt oeffnet und einen Mehr-Knopf traegt. **Die ganze Zeile oeffnet:** der Oeffner (`.u-row-title` oder `.list-row__main--interactive`) streckt sein `::after` ueber die Zeile, Steuerelemente stehen darueber (`z-index: 1`, Spezifitaet null), die Zeile ist ihr eigener Stapelkontext; der Oeffner selbst bleibt `position: static`. Wo die Textspalte knapp ist, steht der Mehr-Knopf schmal, aber hoch wie der Griff (`.row-action--slim`; Dosis, Aufgaben mit eigener Rasterregel). Gemessen vorher (Seed, 390/1280): 29/24 Zeilen ausserhalb der Folge ohne den Vorrat (Einkauf Griff vor Mehr 22, Rezepte Chevron + Mehr 6 mobil, Dosis zwei Knoepfe 1, Taschengeld drei Knoepfe 1 am Laptop), freie Zeilenflaeche, die auf einen Tipp oeffnet: Aufgaben 29 % (Laptop 33 %), Geburtstage 68, Inventar 75, Vorrat 79, Haushaltshilfe 82, Kontakte 85, Rezepte 89 %; nachher 0 Zeilen und ueberall 100 %. **Benannte Ausnahmen:** der VORRAT - der Mengen-Stepper ist die Wertsteuerung der Zeile, und bei knappen und leeren Artikeln steht davor der Warenkorb, weil "mit einem Tipp auf die Liste" das Versprechen von README und Website ist (`test:docs-landing`, `test:readme-consistency`); so stehen dort drei Ziele, und es gibt keinen Mehr-Knopf (Loeschen per Wisch und im Dialogfuss). Karten folgen ihrer Kartenleiste, nicht der Zeile (Notiz: Anheften in der Ecke; Mahlzeit; Dokument im Raster: Auge, Herunterladen, Mehr; Praemie). Die Darlehenskarte fuehrt seit R23 die Endzone der Zeile unten rechts: [Rate buchen][Mehr] (`.budget-loan-card__endzone`; der Mehr-Knopf stand zwischen Titel und Betrag, an keiner Kante). Die Verwalter (Kategorien, Tags, Abo-Kategorien und Zahlungsarten, Schnelllinks, Familie) folgen seit #2152 derselben Endzone, die Modulreihenfolge in Einstellungen > Navigation seit #2180 ([Ausblenden][Mehr][Griff]; allein in ihrer Gruppe haelt die Zeile den Platz von Mehr und Griff frei); der Griff ist dort ein Knopf mit Pfeiltasten, Auf/Ab stehen zusaetzlich im Mehr-Menue (Schalter, Screenreader ohne Pfeiltasten). Die Einkaufszeile hakt als Ganzes ab statt zu oeffnen (R16) | list-row.css (Strecke, `.row-action--slim`); `rowMenuHtml()`; Guards `test:control-dialect` `row-endzone-order`, `row-primary-count`, `row-chevron-with-menu`, "D10: der Oeffner ...", "D10: kein Modul stellt den Oeffner ..." | Griff vor dem Mehr-Knopf, zwei Knoepfe mit Wort je Zeile, Chevron neben dem Mehr-Knopf, tote Metazeile neben einem Titel-Knopf |

**Wege und Eingaben (R16 Schritt 3, Critique 2026-10-05).** Neun Regeln, je mit ihrem Ort:
- **Eine Abkuerzung hat einen dauerhaften Ort.** Die Sammel-Pille des Einkaufs steht fuenf
  Sekunden und bleibt dann unterdrueckt; "In den Vorrat" und "Abgehakt loeschen" stehen deshalb
  AUCH im Werkzeugmenue der Liste, in einer benannten Gruppe, solange etwas abgehakt ist
  (`listToolsItems()`, dieselben Handler und Rechtefragen). **Ein Menue mit mehr als einer
  Frage hat Gruppen:** `popoverMenuHtml` nimmt `{ group, items }` (Ueberschrift als Name der
  Gruppe, kein Eintrag) und `{ separator: true }`; im Einkauf Abgehakt | Liste | Stammdaten |
  Loeschen.
- **Ein Dialog fragt erst, was den Gegenstand ausmacht, dann den Freitext.** Aufgabe: Titel,
  Faelligkeit/Uhrzeit, Zugewiesen an, Prioritaet/Kategorie, dann die Notiz. Ein LEERER
  Abschnitt (Wiederholung, Erinnerung) liegt hinter "Weitere Einstellungen" und wird im
  Hinweis genannt; ein gesetzter steht offen an seinem Platz. Gemessen 390x844: Faelligkeit
  y 699 -> 304, Koerper 1455 -> 1076px, Fokusziele 33 -> 17.
- **Die Formatierleiste ist ein Werkzeug des Felds** (`renderMarkdownToolbar` /
  `wireMarkdownToolbar`, geteilt von Notizen und Aufgaben): `hidden`, bis das Feld den Fokus
  hat, danach bleibt sie (ein Ausblenden verschoebe das Feld unter dem Finger); EINE scrollende
  Zeile mit Rand-Fade (162 -> 58px mobil); EIN Tab-Stopp (`role="toolbar"`, wandernder
  `tabindex`, Pfeile/Pos1/Ende; Umschalt+Tab aus dem Feld fuehrt hinein).
- **Ein Editor ist eine Arbeitsflaeche, kein Formular.** Notiz: Titel und Text ohne
  Labelzeile (Label `.sr-only`), das Textfeld traegt die Mindesthoehe der Flaeche
  (`.note-editor__text`: mobil 160 -> 321px ab y=295 statt 430, mit Leiste ab 357; Desktop
  160 -> 400px). Metafelder stehen darunter bzw. hinter "Weitere Einstellungen".
- **Der laufende Zeitraum ist gleitend, der vergangene kalendarisch.** Gesundheit: "Monat" =
  letzte 30 Tage, "Woche" = letzte 7, endend am Tag des Haushalts (`todayKey()`); wer
  zurueckblaettert, bekommt Kalendermonat und -woche. "Weiter" haelt zuerst am laufenden
  Kalenderzeitraum (der Rest der Woche, des Monats), dann am naechsten: kein Tag liegt in
  keinem Fenster (`stepVitalAnchor`). Die Beschriftung nennt das Fenster, das gilt. Eine Kennzahl hat EINEN Zeitraum auf jeder Flaeche und nennt ihn (Einnahmetreue: 7
  Tage in Uebersicht und Medikamente). Eine Monatsachse traegt Monatsnamen.
- **Der Filterknopf zaehlt Abweichungen vom Standard.** Aufgaben: Status "Offen" ist der
  Ruhezustand und zaehlt nicht; "Filter zuruecksetzen" stellt ihn her. Im Filterblatt
  (`openFilterSheet`) klappt eine lange, seltene Achse ein, solange nichts darin gewaehlt ist
  (`fold`), und Ansichtsoptionen stehen als abgesetzter Abschnitt am Ende (`variant: 'view'`).
  35 -> 22 Bedienelemente, 1084 -> 908px.
- **Eine Geste, deren Ergebnis feststeht, wartet nicht auf den Server.** Verschieben im
  Essensplan ist optimistisch (Ruecksprung + Fehler-Toast bei Ablehnung), die Haptik beim
  Abhaken kommt mit dem Tipp. Eine Erfolgsmeldung nennt das Ergebnis, nie den Dialogtitel.
- **Ein Bild zeigt sich, wo es eines gibt** - die Frage ist nicht, woher der Datensatz kommt.
  Rezeptzeile: Vorschaubild bei eigenem Bild; Detail: Kopfbild 3:2 im RAHMEN, das Bild
  `object-fit: cover` (beschneiden, nie stauchen), ohne Bild kein Platzhalterblock.
- **Ein langes Blatt beginnt mit dem Weg zu seinen Teilen.** Einstellungen: ab vier
  Abschnitten Sprungmarken als eine scrollende Zeile von Links auf `?section=`
  (`settingsSheetJumpTargets`), mobil zwei Zeilen Blattbeschreibung. Die Marken sind
  TEXTLINKS im App-Akzent, keine Chips (R21): in Chip-Optik sahen sie aus wie die Auswahl
  darunter (Erinnerungs-Chips im Kalender-Blatt) - eine Marke springt, sie waehlt nichts
  (`test:settings-navigation`). Eine Marke heisst wie
  die Ueberschrift, an die sie springt (`syncJumpLabels`, R17): der Registry-Name des
  Abschnitts ist nur der Rueckfall und bleibt der Suchbegriff. Gesundheit mobil: nach
  der Bereichsliste zwei Vitalkennzahlen (Titel = Weg zu allen) und EINE Zeile "Alle Werte
  anzeigen"; der CSV-Export ist ein Knopf im Kopf. Startseite 2711 -> 1394px.
  Laeuft die Zeile mobil ueber, traegt sie den geteilten Anriss (`wireScrollFade`, R22).
- **Einstellungen sagen weniger und fuehren weiter (R22, D13).** Vor dem ersten Feld stehen
  hoechstens zwei Saetze, der Rest hinter "Mehr dazu" (`hintFoldHtml`, natives `<details>`).
  Seit R23 (D14) auch Rollen und Rechte, Aktive Module und "Zuweisung nachtragen" (gemessen:
  alle 29 Blaetter, je Blatt und Karte hoechstens zwei Saetze vor dem ersten Feld). Die
  **Kalender-Synchronisation ist ein eigenes Blatt** (`/settings/modules/calendar-sync`, direkt
  hinter dem Kalender, ohne zweite Statuszeile; die einzige benannte Ausnahme von "je Modul
  ein Blatt"): das Kalender-Blatt trug vorher 12 Karten auf 3473px.
  Am Telefon stapelt eine Zeile, deren Bedienelement EIN Textfeld ist (Label oben, Feld
  vollbreit; `:has()` als Verbesserung) - die einzige Ausnahme von "zweispaltig in jeder
  Breite", Auswahl und Schalter bleiben daneben. Die Bereichszeile unter der Liste markiert
  die Gruppe des offenen Blatts, nach eigenem Scrollen die ueber dem oberen Drittel, oben die
  erste, am Ende die letzte. Die Wochenstart-Vorschau ist ein Wochenkopf (Kuerzel, der erste
  Tag halbfett mit Akzentlinie), keine Reihe umrandeter Kaestchen.
  Eine Mitgliederzeile oeffnet per Tipp (der Name ist der Knopf, seine Flaeche deckt die
  Zeile) und endet in [Mehr][Griff]; der Geburtstag steht nicht in der Zeile. Was an zwei Orten
  wohnt (Wetter: Mein Wetter / Fotos und Wetter; Wand: Dieses Geraet / Wandtabletts), verweist
  gegenseitig per Satz + Link - kein Zusammenlegen. Links in Hinweisen tragen Akzenttinte. Das
  Siegel steht unter 1024px am Blatt-Titel (der Kopf zeigt dort nur "< Einstellungen"), ab
  1024px im Kopf mit dem Modulnamen. Laeuft die Seitenleiste ueber, klebt an ihrem unteren Rand
  eine Zeile mit den drei Gruppen als Weg (`createNavigationIndex`). Guard:
  `test:settings-navigation` ("R22 D13"), `test:manager-endzone`.

**Die Zeilenregel in der Kueche (R16, Critique 2026-10-05).** In Abhak-Listen des Einkaufs
hakt der Zeilen-Tipp ab; sonst oeffnet er. Loeschen = Wisch mobil + ein fester Ort am Desktop.
- **Einkauf:** der Tipp auf die Zeile hakt ab (die ganze Zeile ist das Ziel, nicht nur das
  Kaestchen - die Geste im Laden ist einhaendig), auf Touch zusaetzlich der Wisch vom
  Zeilenanfang. In die Artikel-Details fuehrt ein EIGENER Weg der Zeile: bis 2026-10-07 der
  Stift, seit R18 der Eintrag "Bearbeiten" im Mehr-Knopf (`rowMenuHtml`, Zeilenaktionen im
  Kanon oben). Zweimal stand es kurz anders (ein Zwischenstand von R16 und R17 Schritt 4
  unter E7): der Zeilenkoerper als Oeffnen-Knopf, der eigene Weg fort, das Abhak-Ziel 48 statt
  358px. Beide Male zurueckgenommen - E7 nimmt den Einkauf aus (`test:shopping` haelt den
  Bearbeiten-Eintrag und den Zeilen-Toggle, `test:shopping-readonly-ui` den Zeilenklick am
  Handler). Loeschen: Wisch zum Zeilenende (Touch), der Eintrag "Loeschen" im Mehr-Knopf
  (bis R18 ein Papierkorb in der Zeile), Dialogfuss (immer).
- **Vorrat:** Koerper oeffnet. Loeschen: Wisch zum Zeilenende (Touch; Stepper und Warenkorb
  sind Ausnahmezone, `wirePantrySwipe()`), Dialogfuss (immer), jeweils mit Rueckgaengig. Der
  Chevron am Zeilenende entfaellt hier - dort steht der "+"-Knopf.
- **Mahlzeiten:** die Karte oeffnet den Dialog, Loeschen steht im Dialogfuss - in jeder
  Breite. Die Karte traegt seit R18 keinen Papierkorb mehr (benannte Ausnahme der
  Zeilenaktionen im Kanon oben).
- **Rezepte:** die Zeile oeffnet das Rezept; Bearbeiten und Loeschen stehen im Mehr-Menue der
  Zeile und im Leseblatt.

**Die Uebergaben der Kueche (R23, D2/D3).** Jeder Weg in den Einkauf (Rezept, Mahlzeit-Karte,
"Aus dem Essensplan", Warenkorb im Vorrat) folgt EINER Regel (server/services/kitchen-handover.js):
ein offener Artikel gleichen normalisierten Namens wird uebersprungen, ein abgehakter zaehlt
nicht; die Meldung nennt beides ("5 Zutaten auf Wocheneinkauf übernommen. 2 standen schon
darauf.", `transferMessage()`), jeder Weg traegt Rueckgaengig. Die Uebernahme in den Vorrat
belegt Menge, Einheit und Lagerort JE ZEILE vor - gleichnamiger Bestand, sonst der Ort, an dem
der Haushalt die Kategorie meistens lagert, sonst "Alle nach …" im Kopf (das alle Zeilen
setzt) - und fuehrt in eine Charge gleichen Namens, Orts und vertraeglicher Einheit (g/kg,
ml/l) zusammen. Ein Rueckgaengig nimmt Vorrat UND Abraeumen der Liste zurueck. Zeilenraster:
Name | Menge | Einheit | Ort, unter 34rem Listenbreite der Name oben und die drei Felder in
der zweiten Zeile, Haarlinie zwischen den Artikeln.

**Der INHALT eines Dialogs spricht den Ton seines Moduls.** `.modal-panel__body` setzt
`--module-accent: var(--active-module-accent, var(--color-accent))`: das Modal haengt an
`<body>`, ausserhalb der Modulwurzel, und der aktive Chip im Aufgaben-Filterblatt stand
deshalb violett neben demselben Chip in Gruen. Am Koerper, nicht am Overlay: Rahmen, Kopf
und Fuss sind Shell und tragen die Stimme (Eine-Stimme-Regel).

**Benannte Ausnahmen, je mit Grund an der Stelle:** die Essenskarte (`.meal-card__action-btn`,
bis zu drei Aktionen in einem 148px-Slot, Trefferflaeche per `::before`, meals.css);
Foto- und Avatar-Overlays (`*-photo-action`, `settings-avatar-action`: die Aktion liegt auf
einem Bild, nicht in einer Zeile); die Schnellaktionen des Dashboards (`fab-main`: ein Menue
ueber alle Module, kein Nomen); Filterblaetter (Kalender, Aufgaben) behalten die Haken-Zeile
von `toggleRowHtml()` - ob auch dort Schalter stehen, ist offen; Auswahllisten
`modal-actions--stack` (Serien-Umfang) sind kein Fuss.

**Die Optik von "Abbrechen" ist entschieden (Runde 5, 2026-09-26): `btn--secondary`, nie
`btn--ghost`.** Der Brief dieser Runde setzte `btn--ghost` (wie Kalender und Aufgaben); seit der
Critique 2026-07-30 hielt `test:frontend-audit` fuer die drei geteilten Rueckfragen das Gegenteil
fest (`btn--secondary`, "im Loeschen-Confirm, wo Abbrechen am wichtigsten ist, am
unauffaelligsten"), und 61 Seiten-Dialoge folgten ihm, 27 dem Kalender. Hier stand bis R21
"Offen ... bis das entschieden ist, zaehlt `cancel-ghost` nur"; `test:control-dialect` fuehrt
`cancel-ghost` laengst als Regel mit leerer Ratsche.

**Gehalten als Ratchet** (`test:control-dialect`): sechzehn Scanner zaehlen je Datei die
Abweichler; die Ausnahmeliste `PENDING` (Stand 2026-09-26, fuer die sechs Regeln der Runde 7
2026-09-27: `toolbar-new-btn`, `hover-reveal`, `row-checkbox`, `segment-indicator`,
`search-width`, `sheet-drag`) darf nur sinken. Ein NEUER Abweichler ist rot, ebenso eine
Zahl, die gesunken ist, ohne dass die Liste nachzieht - so bleibt die Liste ein Arbeitsvorrat
und wird keine Allowlist.

### Buttons
- **Shape:** die Kapsel (`--radius-full`) in der `.btn`-Basisregel, min-height 48px, Padding
  8px 16px, Label 14px medium. EINE Form fuer ALLE Varianten - primary, secondary, ghost,
  danger, icon, icon-sm. Bis Runde 3 stand `--radius-md` in der Basisregel, waehrend
  glass.css primary/secondary auf `--radius-full` zog: welche Form ein Button bekam,
  entschied die Ladereihenfolge. Die Kapsel gewinnt, weil der Direction Contract
  "Kapsel-Controls" ausdruecklich nennt.
- **Primary:** die STIMME leicht abgedunkelt (`color-mix(in srgb, var(--color-accent) 88%,
  var(--neutral-950))`) mit `--color-ink-on-vivid` (light weiss, dark dunkle Tinte) und
  shadow-sm plus Specular-Inset. **Hier stand bis 2026-08-12 „Modul-Akzent":** derselbe Rest
  aus der Zeit vor der Eine-Stimme-Regel, den der FAB-Abschnitt einen Tag zuvor abgelegt
  hat. `layout.css` liest `--color-accent`, seit die Regel gilt; der Primaerknopf tut in
  jedem Modul dasselbe und ist damit nach ihrem Kriterium eindeutig. Auf modullosen Routen
  (Login, Setup) war er ohnehin immer die Stimme.
- **Hover:** vertieft auf 76-%-Mix, shadow-md, Transitions 150ms.
- **Fokus (app-weit):** 2px-Ring in `--focus-ring-color` (= `var(--color-accent)`), Offset
  2px. **Auch hier stand bis 2026-08-12 der Modulton** - und er war die groesste einzelne
  Fundstelle im Chrome, weil jedes fokussierbare Element der App an diesem einen Token
  haengt. Die zwei Zeilen werden
  ausgeschrieben, kein Shorthand-Token: ein Shorthand auf `:root` baeckt die Farbe ein und
  lokale Ueberschreibungen blieben wirkungslos. `--focus-ring-offset-inset` (-2px) ist nur
  fuer Elemente an einer geclippten Kante da.

- **Glyphe (R22, D8):** jede Glyphe direkt im `.btn` misst `--icon-md` (16px) - als Grundregel
  `:where(.btn) > svg` mit Spezifitaet null, eine Groessenklasse am Zeichen gewinnt weiter. Vorher
  zeichnete Lucide ohne Klasse 24px, und im selben Kopf standen 16er neben 24er Glyphen
  (Zeitraum-Pfeile, Belohnungen, Haushaltshilfe, das angedockte Plus). Der schwebende FAB behaelt
  `--icon-xl`; angedockt ist er ein Textknopf mit `--icon-md`. Zeilenaktionen (`.row-action`,
  Notiz-Nadel, Ordner-Kebab) zeichnen mit dem Token `--icon-row` (18px, die Rolle eines Bauteils,
  keine Stufe der Skala), Filter-Chips mit `--icon-md`. Guard: `test:frontend-audit`
  ("D8: .btn > svg misst --icon-md ...").
- **Klein (`.btn--sm`):** fuer dichte Aktionsreihen - Polsterung 4px 12px, Luecke 4px, die
  Hoehe bleibt die Zielgroesse der Geraetewelt (`--target-md` am Zeiger, `--target-base` am
  Finger). Klein heisst schmaler, nicht unter die Zielgroesse. Steht seit 2026-09-24 in
  `layout.css`; vorher in rewards.css, und damit trug die Klasse an rund hundert Stellen
  ausserhalb von /rewards nichts. Mit `.btn--icon` kombiniert behaelt der Icon-Knopf seine
  quadratische Flaeche (die Regel steht davor). Guard: „.btn--sm steht in einem global
  geladenen Blatt" und „haelt die Zielgroesse der Geraetewelt" (test-frontend-audit).

**Die Eine-Buttonform-Regel.** Es gibt genau eine Buttonform, und sie steht genau an einer
Stelle. Der Guard `one button shape app-wide` prueft die Kapsel in der `.btn`-Basisregel und
verbietet JEDER weiteren Regel mit einer `.btn`-Variante im Selektor, einen border-radius zu
setzen. `--radius-glass-button` ist entfallen, weil ein eigener Token nahelegte, es gaebe
daneben noch eine zweite, nicht-glaeserne Buttonform.

**Die Regel gilt auch fuer Knoepfe, die keine `.btn` sind.** Ein Guard, der eine KLASSE
sucht, findet nur, wer sie schon traegt - und blind blieben ausgerechnet die drei Knoepfe,
die das Problem waren: "Aktuell" (Budget), "Heute" (Kalender) und "Heute" (Wochenplan)
beanspruchten `.btn` nie und standen deshalb in drei Formen und zwei Farbgrammatiken
nebeneinander, obwohl sie dieselbe Funktion tragen. Der Budget-Knopf war Deklaration fuer
Deklaration eine `.btn--secondary`, nur mit `--radius-sm` statt der Kapsel. Wer die
Grammatik einer geteilten Variante braucht, nimmt die KLASSE. Der Guard prueft das seit
Runde 5 ueber die SIGNATUR der Variante (ihre Kante `--color-border` plus ihre Tinte im
Modul-/App-Akzent), nicht ueber ihren Namen.

**Der Geltungsbereich ist positiv formuliert (Runde 6, Phase 3).** Er stand vorher als zwei
Negativlisten da und liess im gerenderten Dokument 41 Knoepfe ausserhalb - darunter
`.row-action`, die zweithaeufigste Buttonform der App, eine geteilte Shell-Klasse in sechs
Modulen, direkt neben Kapsel-Knoepfen im selben Kopf. Der Wortlaut:

> Es gibt EINE Buttonform: die Kapsel. Sie gilt fuer jedes Element, das eine Aktion
> ausloest und eine eigene Flaeche oder Kante traegt. Bei einem quadratischen Icon-Knopf
> ist die Kapsel ein Kreis.
> Ausgenommen sind Zustandsschalter (Checkbox, Toggle, Segment, Wochentagswaehler),
> Drop-Ziele, Zellen eines Rasters und ZEILEN einer Zeilenliste.
> Die Ausnahme ist eine Liste von KATEGORIEN, keine Liste von Selektoren.

**Die vierte Kategorie ist neu und keine neue Idee.** Eine ZEILE ist kein Kasten - das
sagt das Kasten-in-Kasten-Vokabular seit Runde 5 und die Zeilenlisten-Regel seit Runde 6.
Ihre Hervorhebung (Hover, Auswahl, Rang) folgt der Form ihres Traegers, nicht der eines
Knopfes; deshalb behalten `.rw-standing__id` und `.meal-slot__add-more-btn` ihre Form
(die Rangzeile `.rewards-widget-row` ist mit der Belohnungen-Rangliste entfallen,
2026-09-23). Ein Knopf IN einer Zeile ist davon nicht gedeckt:
`.row-action` ist rund. Wer die Kategorie nicht nennen kann, traegt die Kapsel.

**Geprueft auf zwei Ebenen, weil eine sie nicht traegt.** Im Stylesheet steht weder Tag
noch Rolle; was dort scharf ist, ist die Form eines umgrenzten Ziels. Ebene 3
(`ein quadratischer Icon-Knopf ist ein Kreis`, test-frontend-audit.js) prueft deshalb alle
Regeln mit gleicher Breite und Hoehe und fuehrt die Ausnahmen mit ihrer Kategorie. Ebene 4
(Sonde „Buttonform", test-document-guards.js) prueft den Rest im gerenderten Dokument, wo
Tag, Rolle und Nachbarschaft bekannt sind.

Zwei Einzelfaelle sind dabei mit erledigt: `.dashboard .weather-widget__refresh` hat seine
`border-radius`-Zeile verloren (sie ueberschrieb die Kapsel der Basisregel 1455 Zeilen
spaeter mit 0-2-0, direkt unter einem Kommentar, der vor genau dieser Spezifitaetsfalle
warnt), und `.cal-toolbar__view-btn` traegt jetzt die konzentrische Formel
`calc(var(--radius-sm) - 2px)` statt `--radius-xs` - sein Traeger ist deklarationsgleich
mit dem von `.group-toggle__btn`, das sie schon trug.

**Die Label-Verlust-Regel (Runde 6, Phase 3b).** Verliert ein beschriftetes Bedienelement
sein Label - weil der Viewport schmal wird oder weil es in seiner Icon-only-Variante steht -,
dann wechselt es in die Icon-Form seiner Familie, **behaelt die Zielgroesse `--target-base`**
und traegt seinen Zustand ueber getoente Flaeche PLUS gefuelltes Icon. Nie ueber die Kante
allein: eine Kante liest niemand als „eingeschaltet".

Der Kern ist die Zielgroesse: **ein Label zu verlieren darf ein Ziel nie verkleinern.** Genau
das war der Bestand, und zwar viermal mit vier eigenen Antworten - `.cal-toolbar__mine-btn`
schrumpfte unter 640px vom beschrifteten Chip auf 28x28, `.birthdays-toolbar__import` zog nur
seinen Innenabstand zusammen und blieb als 50x48-Oval in einer Form zurueck, die es sonst
nirgends gibt, `.perm-seg__opt` stand als Icon-Segment auf 34x30, und allein
`.documents-dms-link-btn` machte es richtig. Alle messen `--target-base`
(auf Touch `--target-lg`).

Die Rechte-Matrix hat das Label seit R21 in JEDER Breite: am Zeiger Icon und Wort
nebeneinander, am Finger untereinander, gleich breite Stufen fuer den gleitenden Daumen.
Die Legende ueber der Matrix, die am Zeiger die Icons erklaerte, entfiel - wer bei jedem
Schalter nachschlagen muss, was ein durchgestrichenes Auge heisst, setzt Rechte fuer Kinder
nach Gefuehl. Reicht die Zeile nicht (Mitglieds-Modus mit "Erben"), rueckt das Segment
unter den Namen (`test:permissions`).

**Der erste der vier ist seit 2026-08-28 GESCHICHTE, und sein Ende ist die staerkere Lesart
derselben Regel.** `.cal-toolbar__mine-btn` und die vier Ebenen-Chips daneben sind aus dem
Kalenderkopf verschwunden; ihre Schalter stehen jetzt beschriftet im Filter-Blatt
(`openCalendarFilters`). Der Anlass war gemessen: die Regel hatte ihre Zielgroesse gerettet,
aber nicht die Verstaendlichkeit - ein 48px-Kreis mit einem 8px-Punkt darin ist ein volles
Ziel und sagt trotzdem nichts, und der Zustand, den er „ueber getoente Flaeche" tragen sollte,
mass 1,085:1. **Die Regel sagt, was passiert, wenn ein Label faellt. Sie sagt nicht, dass es
fallen muss** - und wo ein Blatt Platz hat, ist das Label die bessere Antwort als die beste
Icon-Form.

**DIE BLATT-REGEL (2026-08-28).** Traegt eine Werkzeugzeile mehr als zwei gleichrangige
Schalter, gehoeren sie in ein Blatt hinter EINEN Knopf, und der Knopf traegt die ZAHL der
aktiven. Drei Gruende, alle drei gemessen und alle drei im Kalenderkopf zugleich aufgetreten:
die Zeile kostet Hoehe, die auf dem Telefon der Inhalt bezahlt (56px = 6,6 % der
Viewporthoehe); die Schalter verlieren unter 640px ihr Label und werden zu Kreisen, die
sehend nicht mehr auseinanderzuhalten sind; und ihr Zustand muss dann von einer Toenung
getragen werden, die ihn nicht tragen kann.

Der Zaehler ist dabei kein Schmuck, sondern die eigentliche Leistung: er beantwortet die
einzige Frage, die der Kopf beantworten MUSS („nehme ich gerade etwas weg?"), und er tut es
mit einer Zahl statt mit einem Farbunterschied - lesbar auch dort, wo eine Waschung keine
Farbe tragen kann. **Was ein Blatt nicht aufnimmt, sind Meldungen.** Die
Ueberlappungswarnung des Schichtplans (`role="status"`) blieb im Kopf: eine Warnung, die man
erst aufklappen muss, ist keine.

**Ein leeres Filterset heisst ALLE, nie KEINE.** Die Umkehrung erzeugt einen Zustand, aus dem
die leere Flaeche selbst nicht mehr herausfuehrt - wer alle Haekchen entfernt, saehe nichts
mehr und haette ausserhalb des Blatts keinen Hinweis darauf, warum. Aus derselben Ueberlegung
faellt beim Laden jede gespeicherte Auswahl weg, die es nicht mehr gibt (ein ausgetretenes
Mitglied), und eine Auswahl, die wieder alle umfasst, wird zu „kein Filter" zurueckgesetzt -
sonst zaehlte der Knopf einen Filter, der nichts wegnimmt.

NICHT geregelt ist, WANN ein Label faellt: das entscheidet die Leiste, in der das Element
steht, denn es haengt daran, was sonst noch in ihr liegt. Kalender und Geburtstage geben ihr
Label bei 640px ab, die Dokumente bei 768px, und die Einstellungen genau umgekehrt - dort
faellt es auf dem BREITEN Viewport, weil am Zeiger der Tooltip die kompaktere Antwort ist.
Geregelt ist nur, was dann passiert.

**Geprueft auf Ebene 3** (`wer sein Label verliert, bleibt ein volles Ziel`,
test-frontend-audit.js): der Guard sucht die SIGNATUR des Label-Verlusts - eine Regel, die
ein `span` oder ein `__label`/`__text`/`__name`-Element auf `display: none` setzt - und
verlangt vom Traeger im SELBEN At-Block beide Achsen als Zielmass. Wer klickbar ist, kommt
dabei aus dem Markup (`<button>`, `role="button"`, `.btn`), nicht aus dem Klassennamen: die
erste Fassung fragte nur nach `cursor: pointer` und nach Namen auf `-btn` und war damit blind
fuer jeden Knopf, der seine Klickbarkeit von `.btn` erbt und sich nach seiner Funktion nennt.

**Die Zielgroessen-Regel (Runde 6, Phase 3c).** **Eine Reihe traegt ihre Dichte gemeinsam, ein
Einzelziel muss allein treffbar sein.** Daraus folgen genau zwei Faelle:

- **Freistehend** - kein gleichartiges Ziel engt es ein. Es haelt die Zielgroesse seiner
  Gerätewelt (`--target-md` am Zeiger, `--target-lg` am Finger; `--target-base` liefert
  beides) in **mindestens einer Achse** und erfuellt in der anderen WCAG 2.5.8.
- **In einer Reihe** - ein anderes Ziel, das mindestens eine Klasse mit ihm teilt, steht
  weniger als 16px entfernt. Fuer es gilt allein WCAG 2.5.8: 24x24, oder kein anderes
  Zielzentrum naeher als 24px.

Das Kriterium ist die **Einengung**, nicht die Anzahl: ein Ziel in einer Reihe kann nicht
wachsen, ohne seinen Nachbarn zu verdraengen - genau deshalb darf es dicht sein. Ein
freistehendes Ziel hat den Platz und keine Ausrede. Dieselbe Antwort gibt Fitts: ein
isoliertes Ziel wird einzeln angesteuert und braucht seine Flaeche; ein Ziel in einer Reihe
wird im Kontext angesteuert, und Vergroessern kostet dort die Uebersicht. Und die Einengung
ist eine Eigenschaft des **Bauteils**, nicht der Instanz - ein Tagfilter an einer Aufgabe mit
nur einem Tag steht allein da und bleibt ein Reihen-Bauteil.

**Keine Namensliste fuer Dichte.** Die Spacing-Ausnahme des Standards deckt jeden bewusst
dichten Fall mechanisch ab - gemessen: Monatsraster-Chips (Zentrumsabstand 31,5),
Aufgaben-Tagfilter (29,3), Sidebar-Umschalter (31,5). Die Ausnahmeliste des Guards ist leer.

**Wer die Spacing-Ausnahme nimmt, muss sie brauchen (Critique 2026-08-10, Befund 3).** Ein
FREISTEHENDES Ziel nimmt den Platz, den sein Traeger ihm laesst. Die Ausnahme ist fuer Ziele
gedacht, die dicht stehen MUESSEN - dieselbe Begruendung wie die Einengung selbst. Wer unter
24px bleibt, obwohl sein Traeger ihm den Raum laesst, ist kurz aus Versehen, nicht aus
Platznot.

Der Anlass: `.task-card__title` mass 22,1px in einer Karte mit 12px leerem Padding darueber
und 4px darunter, und Sonde 4 sagte gruen, weil das naechste Zielzentrum weit genug weg lag.
Die Critique mass denselben Fall gegen einen pauschalen 44px-Massstab - und hatte damit recht
aus dem falschen Grund. Nicht 44px ist der Massstab (die Regel oben begruendet ausfuehrlich,
warum nicht), sondern die ungenutzte Reserve. Der Titel traegt jetzt 38px Trefferflaeche ueber
ein `::before`, der Text steht unveraendert.

**Zwei Grenzen gehoeren zur Klausel, und beide sind gemessen, nicht gesetzt.** Sie gilt NICHT
fuer Reihen-Bauteile - die erste Fassung meldete die Aufgaben-Tagfilter und zwoelf
`.cal-task-chip`, formal zu Recht (sie stehen nebeneinander, koennten also vertikal wachsen),
aber das waere eine neue Regel gewesen, keine Klausel. Und sie gilt NICHT fuer Inline-Ziele:
WCAG 2.5.8 nimmt ein Ziel ausdruecklich aus, dessen Groesse durch die Zeilenhoehe des
umgebenden Textes bestimmt ist. Ohne diese Ausnahme meldete sie drei Hinweis-Links in
`<p class="form-hint">`, und der einzige Weg sie „zu reparieren" waere gewesen, den Fliesstext
um sie herum auseinanderzuziehen.

Gefunden hat die Klausel ausser dem Titel genau einen weiteren echten Fall: der
`.nav-sidebar__toggle` mass 219x23 am Fuss der Sidebar, mit Platz nach beiden Seiten - 23px
ist die Hoehe seines 15px-Icons plus Zeilenrest, keine Entscheidung. Er traegt jetzt
`--target-md`.

**Dabei fiel eine Modifier-Blindheit von Sonde 4 auf.** `rowBuilt` schluesselte ueber die
volle Klassenliste, und damit war `cal-task-chip.cal-task-chip--high` ein anderes Bauteil als
`--medium`: wer nur in fuenf von sechs Varianten in einer Reihe vorkommt, galt in der sechsten
als freistehend. Drei `--high`-Chips blieben so gemeldet, waehrend die uebrigen als Reihe
erkannt wurden. Die Sonde fuehrt jetzt zusaetzlich jede EINZELKLASSE - dieselbe Blindheit, die
Sonde 6 hatte, als sie nach `.metric-grid` fragte und die Reihe nicht sah.

**Gemessen wird die TREFFERFLAECHE, nicht die Box.** `.weather-widget__refresh` ist 34x34
gross und dehnt seine Flaeche per `::before` auf `--target-base` aus; eine Box-Messung meldet
ihn als Verstoss, obwohl der Finger 44px findet. Das ist zugleich das Rezept fuer „kompakt
aussehen, voll treffen".

**Wo gedehnt wird, gehoert die sichtbare Flaeche immer dem eigenen Ziel** (2026-09-24). Die
Aufgabe in Agenda und Tagesliste (`.agenda-tasks .cal-task-chip`) bleibt die 24px-Bar und dehnt
ihre Flaeche per `::before` senkrecht auf `--target-base`; die Polsterung der Liste ist genau
diese Dehnung (`--task-hit-grow`), sonst griffe die Flaeche in den Termin darueber. Zwischen zwei
Aufgaben duerfen sich die Dehnungen ueberlappen (8px Zeilenabstand statt 20-24px, sonst stand
die Liste im 48px-Takt luftiger als die Terminzeilen) - aber UNTER den Chips: `z-index: -1` im
eigenen Stapelkontext (`isolation: isolate`), damit ein Tipp auf eine sichtbare Bar nie die
Nachbarin trifft. Eine Ueberlappung auf der sichtbaren Flaeche ist ein Treffer fuer das
falsche Ziel, eine in der Luft dazwischen nicht. Traegt das Ziel selbst
`overflow: hidden`, schneidet es sein Pseudo ab: dann `overflow: visible` und die Ellipse ans
Kind. Im Ganztags-Stapel der Woche bleibt die Aufgabe ein Reihen-Bauteil (24px, Spacing-
Ausnahme) - dort kann keiner wachsen, ohne den Nachbarn zu verdecken.

**Die Groesse des Icon-Knopfs gehoert der Shell.** `.btn--icon` nimmt `--target-base` und
schaltet damit ueber `(hover: none)`. Vorher schaltete es ueber `@media (min-width: 1024px)`,
also nach der Breite - ein Tablet ab 1024px bekam 40px, und Aufgaben wie Abonnements hatten
den Shell-Fehler je fuer sich lokal repariert. Derselbe Kopf-Icon-Knopf mass dadurch 40px in
Kalender und Kontakten und 44px in Aufgaben und Dokumenten. Der Textknopf `.btn` schaltete bis
2026-10-22 noch nach der Breite: ein Tablet im Querformat (1180px, `hover: none`) bekam 40px,
jeder Knopf im Kopf und die angedockte "+ Nomen"-Pille mit ihm. Seitdem gilt `--target-md` nur
ab 1024px UND mit Zeiger (`hover: hover`), sonst `--target-lg` (`test:frontend-audit`,
`test:page-fab-docked-browser`). Die Pille selbst setzt keine Groesse mehr: ihre eigenen 44px
und 4px Luecke standen seit dem Andocken in layout.css und griffen nie.

**Geprueft auf zwei Ebenen, weil es zwei Zusagen sind.** Die Zielgroessen-Regel haengt an
Nachbarschaft und Trefferflaeche und ist nur im Dokument pruefbar (**Ebene 4**, `Sonde 4` in
test-document-guards.js, beide Geraetewelten). Die Besitzfrage des Icon-Knopfs steht dagegen
offen im Stylesheet und waere im Dokument unsichtbar, weil beide Antworten die
Zielgroessen-Regel halten (**Ebene 3**, `die Groesse des Icon-Knopfs gehoert der Shell`).

### Segmented Controls
- **EINE Sprache shell-weit:** aktives Segment = erhabene Surface-Pille im Well
  (`--seg-active-bg` + `--seg-active-shadow`), Modulton NUR als Tinte
  (`color-mix(in srgb, <Akzent> var(--tint-ink), var(--color-text-primary))`); inaktiv
  Sekundaertext, Hover hebt nur die Textfarbe. Gilt identisch fuer Aufgaben-Gruppentoggle,
  Kalender-Ansichtswahl, Budget-Tabs, Sub-Tabs, Kuechen-Tabs, Dokumenten-View-Toggle,
  Listen-Tabs, Gesundheits-Zeitraum und die Settings-Schalter. Der Traeger ist ein Well
  (`--color-surface-3`), sonst ist die Pille kein Zustand. Der Daumen ist in BEIDEN Themes die
  HELLERE Flaeche: hell Weiss auf dem Well (1.20:1), dunkel die Stufe UEBER dem Well
  (`--_seg-active-bg` #443E37 auf #37332E, 1.19:1) - mit `--color-surface` lag er im Dark
  als Mulde in seiner Bahn (R18). Die Modulton-Tinte haelt darauf AA (knappster Wert
  Gesundheit 4.51:1). Dasselbe gilt fuer den Schalterknopf: `--color-switch-knob` ist in
  beiden Themes Weiss, die An-Bahn traegt `--color-btn-primary`. Innenradius konzentrisch:
  `--radius-sm` (10px) im `--radius-md`-Traeger (12px) mit 2px Polster (panel.css,
  `.segmented__item`). Kein 3px-Akzentstreifen unter aktiven Tabs.
- **Der Daumen traegt in beiden Themes eine Kante (R23, Critique G6-1, WCAG 1.4.11).** 1,19:1
  (dunkel) und 1,20:1 (hell) sind ein Abstand, kein Zustand, und ein Schatten zeichnet die Form
  nur optisch. `--seg-active-shadow` fuehrt deshalb einen 1px-Innenring (`--_seg-active-ring`) in
  #857F76: dunkel 3,16:1 gegen die Bahn #37332E (4,47:1 gegen den Seitengrund der Reiterleisten),
  hell 3,30:1 gegen die Bahn #EDEAE3 und 3,97:1 gegen den weissen Daumen. Die helle Feldkante
  (#8C8880) reicht nicht, sie haelt gegen die Bahn nur 2,94:1. Heller fuellen geht dunkel nicht
  (die Modulton-Tinte darauf faellt sonst unter AA). Der Schatten bleibt als Tiefe. Guard:
  `test-frontend-audit.js` "der Segmentdaumen hat in jedem Theme eine 3:1-Kante".
- **EINE BEHANDLUNG PRO KONTROLLTYP.** Der Modulton erscheint genau einmal als FLAECHE
  (aktiver Filter-Chip, getoent) und einmal als TINTE (aktives Segment). Bis 2026-08-12
  war das Segment deckend gefuellt; auf `/tasks` standen dadurch vier Gruen-Behandlungen
  gleichzeitig im Bild (gefuellter Ansichtsumschalter, gefuelltes Gruppen-Segment,
  getoenter Chip, Chip mit roher Akzent-Kante). Die alte Begruendung fuer die Fuellung
  („Modul-Akzent als Text erreicht nur ~3.5:1") stammt aus der Zeit vor den Familientoenen
  (v2.1.0) und ist abgelaufen: heute haelt selbst der rohe Ton 5.04:1 hell / 4.82:1 dunkel,
  die `--tint-ink`-Mischung 7.37:1 / 6.61:1 ueber alle neun Familien. Gehalten von
  `das aktive Segment ist ueberall dieselbe Pille` in `test/test-frontend-audit.js`,
  in beiden Richtungen (Vollstaendigkeit der drei Zeilen UND kein Rueckfall auf gefuellt).
- **Die Tinte ist kein Token, und das ist Absicht.** Ein Custom Property, das
  `var(--module-accent)` enthaelt, wird dort aufgeloest, wo es DEKLARIERT ist. An `:root`
  gibt es keinen Modulton - ein `--seg-active-ink` war in jedem Modul violett und riss den
  Filter-Chip gleich mit. Die `color-mix`-Zeile steht deshalb an jeder Fundstelle
  ausgeschrieben; zusammengehalten wird sie vom Guard, nicht von der Kaskade.

### Chips
- **Form:** Kapsel (`--radius-full`) mit 1.5px-Kante in `--color-border` (filter-chip.css).
  Eine Nutzerfarbe steht nie als Textfarbe, sondern als Scheibe (`.filter-chip__swatch`, Personen);
  die Kalender-Ebenen-Chips mit ~60-%-Nutzerfarbkante sind seit 2026-08-28 entfallen (ihre
  Schalter stehen im Filterblatt, siehe die Label-Verlust-Regel). Alle
  Labels stehen inaktiv in Sekundaertext - auch der Mir-zugewiesen-Chip (Beschluss
  2026-08-17, umgesetzt 2026-08-27: seine dauerhaft getoente Schrift las sich als
  „Filter ist an"; die Farbe erscheint erst mit der Aktivierung). Ein aktiver
  Filter-Chip traegt den Ton als
  getoente FLAECHE (`--tint-state` Grund, `--tint-hint` Kante, `--tint-ink` Tinte) - das
  ist die andere Haelfte der Regel „eine Behandlung pro Kontrolltyp" und ausdruecklich
  NICHT die Segment-Pille. Scrollende Chip-Reihen bekommen die Fade-Mask (siehe Layout).
- **Innenabstand:** vertikal mindestens 4px (`--space-1`). Die Kalender-Aufgaben-Chips
  standen mit 2px buendig an der Kante ihrer eigenen Toenung (Sonde `cramped-padding`, 7
  Fundstellen); eine getoente Flaeche braucht Luft zu ihrem Rand, sonst liest sie sich als
  abgeschnitten statt als Chip. Einzige Ausnahme ist das dichte Monatsraster, das seine
  engere Fassung ueber einen `.month-day`-Override behaelt.
- **Mahlzeit-Typ-Chips (R20):** `.filter-chip[data-meal-type]` traegt den 8px-Punkt des
  Mahlzeit-Tons (`--meal-*`) wie das Board - Kennung, nicht Zustand. Die Regel steht in
  filter-chip.css, weil Mahlzeit- und Rezept-Dialog auf verschiedenen Routen leben.
- **Sieben Wochentage, eine Zeile (R20):** Wochentags-Chips (Medikament-Zeitfenster,
  Entsorgungs-Termin) stehen als Raster `repeat(7, minmax(0, 1fr))` statt umbrechender
  Reihe: 48px hoch, je ~43px breit im 390er-Blatt. Mit 48px Mindestbreite stand "So" allein.

### Cards / Containers
- **Corner Style:** 12px (`--radius-md`) fuer die Karte, 16px (`--radius-lg`) fuer den
  Zeilen-Traeger, 26px fuer Glas-nahe Container.
- **Background:** `--color-surface`, opak. Karten sind randlos auf dem Grouped-Grund - die
  Trennung leistet der Schatten, nicht eine Kante.
- **Shadow:** shadow-sm in Ruhe; Hover-Anhebung nur fuer interaktive Karten.
- **Inset-Grouped-Liste:** die Kernform der neuen Welt. "Heute wichtig" auf dem Dashboard ist
  EINE Inset-Grouped-Liste (ein Traeger, Zeilen mit Haarlinien, Vollton-Siegel plus Titel plus
  Untertitel plus trailing Uhrzeit), nicht viele Einzelkarten. Als wichtigster Block der Seite
  traegt der Traeger eine Stufe mehr als die Karten darunter: `--radius-xl` und `--shadow-lg`
  (`.today-cockpit__grid`, dashboard.css). Hier stand bis R21 "getoente Icon-Kachel ... plus
  trailing Count".
- **Internal Padding:** 16px (`--space-4`), kompakt 12px.
- **Gruppen-Traeger (R20):** eine Karte je Gruppe (Abfallart mit ihren Terminen) traegt
  dieselbe Haut wie `.row-carrier` - Flaeche, `--radius-lg`, shadow-sm, keine Kontur; den
  Abstand zwischen den Karten haelt die Liste (`gap`), nie die Karte selbst
  (test:frontend-audit "a card per row").
- **Kapseln auf Shell-Material (R20):** Sammel-Pille und Toast-"Rueckgaengig" bleiben 28px
  hohe Kapseln; am Finger (`pointer: coarse`) reicht ein unsichtbarer `::after`-Saum auf
  `--target-base`, damit Pille und `--bulk-pill-safe-zone` nicht wachsen.
- **Saeulendiagramm mit einer Reihe (R20, Haushaltshilfe):** Saeulen auf einer Haarlinie,
  keine volle Bahn (die las sich als Fortschritt); bezahlt im Vollton der Serie, offen als
  `--tint-hint`-Tint derselben Serie, Legende darunter; ein leerer Monat traegt nur die
  Grundlinie und keinen "0,00 €"-Wert, ganze Betraege ohne Nachkommastellen.
- **Zahlen-Stepper (R20, "Alle N Wochen"):** das native `<input type="number">` bleibt das
  Feld (Label, Tastatur), links und rechts `btn--secondary btn--icon` mit Minus/Plus; an der
  Grenze `disabled`, der Fokus geht dann ins Feld.
- **Betragsfeld (R23, D1, `utils/amount-field.js`):** jede Geldeingabe ist EIN Baustein -
  Textfeld mit `inputmode="decimal"`, Platzhalter und Bestand in der Schreibweise der Region
  ("0,00", "1200,50"), nie `type="number"` (Chrome las "1.200" unter de still als 1,2). Der
  Speicherweg nennt den Grund am Feld (`amountFieldError`): Tausendertrenner mit Beispiel,
  keine Zahl, nicht positiv, mehr Stellen als die Waehrung ("Schritten von 0,01", locale-
  korrekt). Vorzeichen je Feld: positiv (Buchung, Darlehen, Plan), ab null (Rahmen, Abo,
  Kaufpreis, Satz), beliebig (Startsaldo). Ein unangetasteter Bestand neben dem Raster
  bleibt speicherbar. Waehrungswahl im Dialog zieht nur den Platzhalter nach
  (test:budget-ui "kein Geldfeld ist ein type=number").
- **Ortssuche (R20, Wetter-Standort, `settings/weather-location.js`):** gestapelte Zeile
  "Ort" mit Textfeld (`enterkeyhint="search"`, kein Seitenfilter-`type="search"`) und
  `btn--secondary` "Suchen"; gesucht wird erst auf Enter/Knopf (Server-Proxy
  `GET /weather/geocode`, Open-Meteo). Treffer als Knopfliste (Name primaer, Region und Land
  sekundaer; gleichnamige Treffer derselben Region tragen den Kreis, sonst die Koordinaten),
  Ansage ueber eine `role="status"`-Zeile, Fehler am Feld (`reportFieldError`). Breite und
  Laenge stehen unter "Koordinaten von Hand" (`settings-disclosure`), offen nur, wenn
  Koordinaten ohne Ortsnamen gespeichert sind.
- **Farbstreifen der Leseansicht (R20):** `openDetailView({ accentColor })` nur mit einer
  Farbe, die etwas sagt (Marke, Kalender) - nie der blosse Modulton; der stand 16px unter der
  Haarlinie des Kopfs als Doppellinie (test:detail-view).
- **Lange Unterlisten (R20, Raten):** die neuesten sechs offen, der Rest gerendert hinter
  "Alle anzeigen (n)" - derselbe Knopf wie "Geplant" im Hauptbuch (`.budget-planned-toggle`).
- **Dokumentraster (R20):** der Kartentitel haelt im Raster zwei Zeilen (`min-block-size:
  2lh`), damit Meta und Leiste einer Reihe fluchten; Subgrid scheidet aus, weil die Karte ein
  Container ist. Der Leerzustand spannt alle Spalten.

### Named Rules
**Die Kasten-in-Kasten-Regel.** Karten sind randlos auf dem Grouped-Grund, also traegt
NICHTS in einer Karte eine eigene Kante - sonst stuende ein umrandeter Kasten in einer
kantenlosen Karte. Es gibt genau zwei Antworten, app-weit dieselben: eine ZEILE wird zur
Haarlinie (`+ selector { border-top: 1px solid var(--color-border-subtle) }`,
Container-`gap` auf 0, Padding vertikal, keine Flaeche, kein Radius); eine KACHEL wird zum
Inset-Well (`background: var(--color-fill-well)`, KEINE border, Radius bleibt). Echte
BEDIENELEMENTE - Inputs, Buttons, Chips, Checkboxen, Stepper, Drop-Ziele - behalten ihre
Kante: sie sind keine Kaesten, sondern Griffe.

**Die Traeger-Regel.** Der Well gilt nur INNERHALB einer Karte. Dieselbe Kachel auf dem
Grouped-Grund ist eine randlose Karte (`--color-surface` + `--shadow-sm`) - ein Well liegt
dort bei 1.06:1 und verschwindet; der Well sitzt bewusst auf der Surface-3-Rolle statt auf
dem Grouped-Grund, weil der Grund im Dark ein Loch zur Buehne risse (1.16:1 nach unten) und
im Light zu schwach traegt (1.12:1). Traegt eine Komponente beide Kontexte, steht der Well im
Kontextselektor der Karte, nie in der Basisregel (Muster
`.health-overview__card .health-metric-card`). LEERZUSTAENDE bekommen gar keine Flaeche:
zentrierter Sekundaertext, kein Rahmen, kein Well - sonst muesste jeder Leerzustand seinen
Traeger kennen.

**Der Ladefehler nennt die Ursache (R19, 2026-10-16).** `mountLoadError()` (bzw.
`loadErrorHTML()` fuer Templates) nimmt seinen Satz aus dem Fehler (`loadErrorSentence`:
Bremse, Serverfehler, offline, keine Verbindung) - die Beschreibung des Aufrufers ist nur der
Rueckfall. Der Statuscode steht zugeklappt unter "Technische Details", nie als sichtbarer Chip.
Zeigt die Flaeche den Fehler, gibt es keinen Toast daneben. Die Sitzungspruefung beim Start
hat denselben Zustand als Shell-Fassung (`utils/session-unreachable.js`, im Lichtfeld des
Ladebilds): nur ein 401 fuehrt zur Anmeldung, alles andere versucht mit wachsendem Abstand
und nach `Retry-After` selbst erneut. Ihr Titel folgt der Ursache wie der Satz darunter
(`unreachableTitleKey`: Verbindung, Server nicht bereit, zu viele Anfragen; R20). Scheitert ein
SEITENWECHSEL am Netz, zeichnet `showPageUnreachable()` denselben Ton in den Inhaltsbereich
("Du bist offline", `role="status"`, kein Zeitgeber) und baut die Seite beim `online`-Ereignis
selbst neu; der Absturzbildschirm bleibt Fehlern im Code der Seite. Das Offline-Banner steht am
Desktop rechts der schwebenden Seitenleiste (`--sidebar-width` + `--sidebar-float-gap`).

**Die Fusszeilen-Regel (v2.6.0). Ueberschuessige Hoehe wird Atem, nicht Loch.** Eine Karte
mit Fusszeile streckt ihren Koerper (`flex: 1`) und verankert die Fusszeile unten
(`margin-block-start: auto`), damit der Ueberschuss ZWISCHEN Inhalt und Abschluss faellt
statt hinter den Abschluss.

Der Anlass ist eine Eigenheit jedes Rasters: die Zeilenhoehen richten sich nach den
1x1-Kacheln, eine 1x2-Karte bekommt also die Summe zweier Zeilen plus Gap. Gemessen waren
das 489px Karte gegen 319px Inhalt bei „Familie" und 294px bei „Budget" - und weil jeder
Koerper oben klebte, sass der Rest als toter Block unter dem letzten Element. Mit dem Anker
liest die Karte als bewusst gesetzter Rahmen aus Kopf, Inhalt und Fuss. Die Regel gilt fuer
JEDE Karte mit Fusszeile, nicht nur fuer die zwei, die heute zu kurz sind.

Sie loest das Loch nicht allein: dazu gehoert, dass eine Listen-Kachel ihre Zeilenzahl aus
ihrer HOEHE nimmt statt aus einer Konstante, die fuer eine und fuer zwei Rasterzeilen
dieselbe war. Ueber das Standard-Board gemessen bleiben 3px Leerraum pro Karte.

**Das Raster der Uebersicht hat im Normalmodus kein Loch - rechts, dann unten** (R10 L9, R21 D5).
Nach der dichten Packung waechst jede Kachel erst nach rechts in den Rest ihrer Zeile
(`rowFillSpans`), dann nach unten in freie Zellen, die von links niemand erreicht
(`columnFillSpans`): eine 1x1-Kachel neben zwei hohen liess darunter 305x185px leer (1440px,
vier Spalten) bzw. 319x201px (Kinderkonto, drei Spalten). Beides ist Darstellung
(`data-row-fill`/`data-col-fill`), gespeichert bleibt die gewaehlte Groesse; im Anpassen-Modus
waechst nichts. Die Kennzahlreihe (`align-self: start`) waechst nicht nach unten. Gemessen nachher:
0 Loecher bei 2, 3 und 4 Spalten, Erwachsene und Kind (`test:dashboard`, „R21 D5").

**Und eine Fusszeile ist eine Auskunft, kein Griff.** Die Tagesbilanz des Haushalts schliesst
ihre Karte als hairline-getrennte Zeile ab, exakt wie der Fuss der Budgetkarte - ein
getoentes Well haette dieselbe Form gehabt wie „1 zu bestaetigen" in den Belohnungen, und das
ist eine HANDLUNGSaufforderung. Dieselbe Form fuer zwei Bedeutungen ist genau der Befund, den
das Board schon einmal hatte.

**Die Zeilenlisten-Regel.** Die Kasten-in-Kasten-Regel sagt, wie eine Zeile INNEN aussieht;
diese sagt, worauf sie liegt. Eine Folge gleichartiger Zeilen liegt in GENAU EINEM Traeger:
einer randlosen Karte (`background: var(--color-surface)`, `--radius-lg`,
`box-shadow: var(--shadow-sm)`, `overflow: hidden`). Die Zeilen darin sind flaechen- und
kantenlos und trennen sich ueber den `+`-Kombinator, NIE per `border-bottom` je Zeile - das
zieht eine Linie unter die letzte und macht den Traegerrand doppelt. Der Kopf steht UEBER dem
Traeger auf dem Grund, nie in ihm (welche Kopfrolle, sagt die Kopf-Abgrenzungs-Regel). Es
gibt damit weder eine traegerlose Zeilenfolge auf dem Grund noch eine Karte pro Zeile; drei
Vokabulare koexistierten vorher (Geburtstage, Belohnungen, Kontakte, Budget,
Einstellungs-Uebersicht, Medikamente). Begruendung: eine Zeilenfolge direkt auf dem Grund hat
keinen linken Rand, an dem das Auge die Liste als EIN Objekt fasst; eine Karte pro Zeile hat
N Raender und damit N Objekte. Einzige Ausnahme: ein RASTER aus Objekten mit eigenem Medium
(Foto, Dokumentvorschau) - dort ist jede Kachel eine eigene Karte, weil sie nebeneinander
steht statt untereinander. Guard: `row lists sit in exactly one carrier` liest ALLE
Stylesheets und haelt jede Haarlinien-Zeile frei von Karten-Merkmalen (Schatten, Radius,
Surface-Fuellung).

**Die Traegergrammatik stand zweimal, und sie war nicht zweimal dieselbe (Befund vom
2026-08-11, aufgeloest mit #1478 und #1492, siehe den Schluss dieses Abschnitts).** Geteilt liegt sie als `.row-carrier` (list-row.css) - genau die vier
Deklarationen oben, samt der Ausnahme, dass ein Traeger, der nur einen Leerzustand enthaelt,
seine Karte abgibt. Daneben steht `.list-rows`, der Traeger der gruppierten Listen (Einkauf,
Vorrat, Rezepte, Aufgaben, Agenda); `tokens.css` nennt ihn „dieselbe Grammatik plus dem
Lesemass der Kuechenlisten". Nachgemessen ist er das nicht: er traegt `--radius-md` (12px)
statt `--radius-lg` und **gar keinen Schatten** - `border: 1px solid transparent` und sonst
nichts. Der Radius ist an seiner Verwendungsstelle begruendet (shopping.css: die Gruppe
klippt mit ihrem `overflow: hidden` die Wischflaeche), der fehlende Schatten nirgends. Die
Fuellung ist dagegen keine Abweichung: `--color-surface-work` hat in beiden Themes denselben
Wert wie `--color-surface` (#FFFFFF / #2B2825).

**Das LESEMASS ist seit 2026-08-13 keine der Abweichungen mehr.** Es trug nur `.list-rows`,
mit der ausgeschriebenen Begruendung, die Listen ausserhalb der Kueche seien breiter. Das war
eine Beschreibung des Bestands: gemessen bei 1440px stand die Aufgabenliste auf 720px und die
Kontaktliste auf 1156px, also sprang die Inhaltsspalte beim Modulwechsel um 436px. Beide
Traeger kappen jetzt auf `--content-max-width-narrow`, und beide machen den Container
`list-rows` auf. Welche der zwei Klassen eine Zeilenfolge traegt, ist damit eine Frage ihrer
Verschachtelung (Gruppe im Scroller gegen alleinstehender Traeger), nicht ihrer Breite. Guard:
`die Kuechen-Listen teilen eine Zeilen-Grammatik`, Abschnitt 4.

**Was die Zeile hat und was daneben steht.** Die geteilte Zeile (`.list-row`) fuehrt seit dem
Dichte-Paket vierzehn Module. Zwei benannte Stufen weichen begruendet ab - `--roomy` fuer eine
Zeile, deren Titel-Trefferflaeche die Polsterung mitrechnet (Aufgaben), `--tight` fuer eine,
die links ein BILD statt eines Bedienelements fuehrt (Kontakte). Mehr Stufen gibt es nicht:
eine dritte Zahl in einem Modul-Stylesheet ist ein Nachbau, und ein Guard sagt das auch so
(„Abweichen ist erlaubt, wiederholen nicht").

**Der Zeileneinzug (R22, D8).** Waagerecht steht eine Zeile auf `--space-3` (12px, `.list-row`),
`--roomy` und Zeilen, die mit einem 16er Traeger fluchten (Dosis, Besuche), auf `--space-4`.
Darunter gibt es nichts: Aufgaben mobil (die 8px-Polsterung des Takts galt auch waagerecht) und
die mobile Agenda (8px rundum) stehen seit R22 auf 12. Guard: `test:frontend-audit` ("D8: keine
Zeilenliste steht waagerecht unter dem Einzug ...").

**Drei Flaechen sind AUSDRUECKLICH keine Zeilenliste**, damit sie beim naechsten Durchgang
nicht wieder als Rueckstand gelesen werden: die Notizen (Masonry-Raster, eigener Guard), die
Aufteilung im Budget (Karten-IA mit eigener Rechenlogik) und die Mahlzeiten-Slots (Zellen
eines Wochenrasters mit Drag-und-Drop und Ablagezustand, `style="${gridPos}"` - eine
Rasterzelle ist keine Zeile, auch wenn sie eine Zeile hoch ist). Sie fallen unter die
Raster-Ausnahme der Zeilenlisten-Regel oben.

**Warum das mehr ist als eine Ungenauigkeit:** diese Regel und der Karten-Abschnitt machen
beide den SCHATTEN zum Trenner („randlos auf dem Grouped-Grund - die Trennung leistet der
Schatten, nicht eine Kante"). Ohne ihn haengt die Kante des Traegers allein an der Luminanz:
gemessen 1.11:1 (Weiss auf `--color-bg`) und 1.15:1 im Dark - dieselbe Groessenordnung, mit
der die Traeger-Regel den Well vom Grouped-Grund verbannt hat. Der Guard kann es nicht sehen,
weil er die ZEILE prueft (sie darf keine Karte sein), nie den Traeger. Was daraus folgt -
`.list-rows` bekommt Schatten und 16px, oder die Regel nennt zwei Traegerformen samt
Kriterium -, ist offen und gehoert an das gerenderte Material, nicht in diesen Absatz.

**Aufgeloest durch die Kanon-Runde (#1478, 2026-09-27; der letzte Rest mit #1492):** kein
Markup traegt `.list-rows` mehr - die gruppierten Listen (Einkauf, Vorrat, Rezepte, Aufgaben,
Agenda) stehen in `.row-carrier`, also in EINER Traegerform mit Schatten. Die Klasse lebt nur
noch als Regel in list-row.css; die Kanon-Tabelle fuehrt sie als "laeuft aus, danach faellt
die Regel".

**Die Wischsemantik-Regel.** Dieselbe Geste bedeutet in jeder Liste dasselbe. Der
Zeilenanfang traegt die primaere positive Aktion, das Zeilenende das Destruktive oder
Sekundaere; die Kante ist logisch, die Fingerbewegung dahin spiegelt in RTL. Zugeordnet
wird ein RANG, keine Rolle - `--edit` ist primaer, wo keine positive Aktion daneben steht,
und sekundaer, wo eine steht. Fest liegen die Enden: `--delete` steht nie am Zeilenanfang,
`--done` nie am Ende. **Und eine Geste, die loescht, hat einen Rueckweg** - nie ein direktes
`api.delete`. Der Anlass der Regel war kein Konsistenzwunsch, sondern die eine Stelle der
App, an der eine Geste sofort und endgueltig loeschte.

**Es gibt zwei Rueckwege, und ob die Tat ein BEHAELTER ist, entscheidet (R23, D6).** Der
Normalfall ist der Undo-Toast: er unterbricht nicht und haelt den Weg fuenf Sekunden offen.
Beim Loeschen geschieht am Server bis zum Ende der Frist nichts (`scheduleUndoableDelete`) -
Geburtstag, Einkaufszeile, Buchung, Abo, Gegenstand, leeres Konto, geteilte Ausgabe, jede
Zeile der Gesundheit. Die Bestaetigung (`confirmModal` mit `danger: true`) bleibt nur dem
BEHAELTER mit Inhalt, dessen Inhalt die Tat mitnimmt und den der Dialog benennen muss:
Medikament mit Protokoll, Laborbefund mit Werten, Konto mit Buchungen, Ordner, Gruppe. Bis
R23 fragte auch das Abo (Erinnerungen, naechste Buchung) - das tut die aufgeschobene
Loeschung jetzt nicht mehr vorher, sondern gar nicht: bis zum Ende der Frist ist nichts
davon weg. Eine Bestaetigung ohne `danger` zaehlt nicht: die rote Taste ist das, was den
Rueckweg erkennbar macht.

"Leer" und "mit Buchungen" misst jeder an dem, was ER sieht: im personal-Modus koennen an einem
Konto private Buchungen anderer haengen. Ueber die entscheidet der Loeschende nicht mit, und er
erfaehrt auch nichts von ihnen - keine eigene Ablehnung, kein Feld in der Liste, beides waere
ein Orakel fuer fremde Privatsphaere. Der Server loest nur die sichtbaren Buchungen vom Konto;
bleibt Fremdes daran, steht das Konto fuer dessen Besitzer archiviert weiter, fuer alle anderen
ist es geloescht (`ACCOUNT_SHELL`, server/routes/budget/helpers.js). Dieselbe Regel gilt fuer
jeden kuenftigen Behaelter, in dem Privates anderer liegen kann.

**Statusaktionen fragen nie vorher, sie quittieren mit Rueckweg (R23, D6).** Abhaken,
Freigeben/Ablehnen, Auschecken, Einnehmen/Auslassen, Abo bezahlen: der Toast sagt
"<Objekt> <Verb>" ("„Ibuprofen“ eingenommen.", "Maria ausgecheckt.") und bietet
Rueckgaengig, das die Tat am Server ECHT zuruecknimmt - Bestand, Buchungen, Punkte
(`reopen` der Belohnungen, `work-sessions/:id/reopen`, `logs/:id/undo` mit der Gutschrift aus
`stock_deducted`, `renew/undo` per Marke des Servers). Ein Baustein: `offerUndo()`
(utils/ux.js). Ein Toast mit Aktion traegt kein Haekchen (toast-show.js), das Haekchen
bleibt der Bestaetigung ohne Rueckweg. Bis R23 fragte ausgerechnet das harmlosere Ablehnen
nach, und das Freigeben lief ohne Rueckweg durch (N4). Die Elternaufgabe mit offenen
Teilaufgaben sagt es im Toast und bietet "Alle abhaken" statt Rueckgaengig (zurueck geht
es ueber den Haken). Guards: `test:feedback-undo-ui`, `test:toast-show`; die Gegenwege
halten die Route-Suiten.

Zuordnung als Tabelle bei der Signature Component; Guards auf Ebene 3
(`Eine Wischgeste, die loescht, hat einen Rueckgaengig-Weg`) und Ebene 4 (Sonde 5), weil
nur das gerenderte Dokument sieht, ob eine Liste ueberhaupt verdrahtet ist.

### Inputs / Fields
- **Style - EINE Feldhaut (Entscheidung Ulas, 2026-10-07):** 10px Radius (`--radius-sm`),
  **1px** Border `--color-border-control` auf dem 3:1-Minimum gegen die Umgebung (WCAG 1.4.11:
  hell #8C8880 3,18 auf der Buehne; dunkel #857F76 3,16 auf `-raised`; Karten- und Trennkanten
  bleiben `--color-border`), Fuellung `--color-field-bg` - hell die Arbeitsflaeche, dunkel eine
  MULDE in der Stufe des Wells (#37332E, 1,17:1 ueber Dialog und Karte). Bis dahin: 1,5px, zwei
  Fuellungen (Seite, Dialog) und im Dark ein Fast-Schwarz mit heller Kante ("Drahtgitter").
  Padding 8px 12px, min-height 48px (Desktop 40px) - `input` und `select` sind GLEICH hoch
  (enge Zeilenhoehe, die Mindesthoehe bestimmt allein), Schriftgroesse nie unter 16px,
  Placeholder `--color-text-placeholder` (= Tertiaer, gethemt; NIE die Disabled-Farbe, und
  als Elementselektor auf `input`/`textarea`, damit kein Feld auf Chromes UA-Default
  zurueckfaellt). **Das Suchfeld ist davon ausgenommen:** es ist ein Bedienelement und
  traegt die gefuellte Kapsel des Komponenten-Kanons (`--color-fill-field`, Kante
  transparent, Platzhalter in Sekundaertext), nicht die Formularkante.
- **Gesperrt (`:disabled`, 2026-10-08) - EIN Aussehen an der Feldhaut**
  (`.input:disabled, .form-input:disabled`, layout.css), keine Regel je Dialog: die Fuellung
  faellt weg (`transparent`), die Kante wird die Kartenkante (`--color-border`; 1.4.11 gilt
  dem bedienbaren Element), der Wert steht in `--color-text-secondary` und bleibt lesbar
  (gemessen 6,19:1 hell, 6,66:1 dunkel im Dialog) - nie `--color-text-disabled`, nie ueber
  `opacity` (Deckung multipliziert den Kontrast herunter, wie bei `--color-surface-receded`).
  Die Regel hebt die Daempfung des Browsers ausdruecklich auf (`opacity: 1` gegen Chromes
  0,7 an `select:disabled`, `-webkit-text-fill-color: currentColor` gegen WebKits
  Fuellfarbe), sonst gilt der gerechnete Kontrast nicht. Zeiger `not-allowed`. **Kein
  Platzhalter:** `:disabled::placeholder` ist `transparent` - sekundaer gegen tertiaer sind
  1,10 / 1,14:1, ein leeres gesperrtes Feld laese sich sonst als gefuelltes. **Kein
  Zeichen:** JEDE gesperrte Auswahl legt `--field-chevron` ab (das Bild laesst sich nicht
  umfaerben); der Kalenderknopf des Datepickers dimmt ueber `.ydp__trigger:disabled`, also
  auch im gesperrten `fieldset`. Unter `prefers-contrast: more` geht die Kante auf
  `--color-text-secondary`. Die randlosen Auswahlen (Formularzeile, Einheit im
  zusammengesetzten Feld) haben weder Kante noch Flaeche und stehen in Ruhe schon
  sekundaer: sie nehmen zusaetzlich Tertiaer. Schalter und Knoepfe tragen keinen
  Wert und dimmen weiter ueber die Deckung. `readonly` ist kein gesperrtes Feld und sieht
  aus wie ein bedienbares (Ausnahme: `.input--fixed`, der von der Einladung vorgegebene Wert).
- **Feldkanon:** ein `select` traegt `appearance: none` und sein eigenes Zeichen
  (`--field-chevron`, Lucide chevron-down, 16px, mit dem Feldpolster eingerueckt, in RTL
  gespiegelt); das Auswahlblatt bleibt das native. Dazu 32px Innenpolster am Ende
  (`padding-inline-end: var(--space-8)`) plus `text-overflow: ellipsis`, damit ein langer
  Optionstext vor dem Zeichen endet. `[multiple]`/`[size]` behalten ihr natives Bild.
  Zahlfelder zeigen keine nativen Spin-Pfeile. Das ist app-weiter Kanon, kein Modul-Detail.
- **Focus:** Akzentkante plus 3px Glow aus `color-mix(--color-accent, --tint-shadow)` und die
  Glas-Innenkante `--glass-inset-input` (glass.css; die `--color-accent-light`-Fassung in
  layout.css wird davon ueberschrieben); interaktive Nicht-Felder
  tragen den app-weiten 2px-Ring. **Der Fokus eines Feldes ist immer die eine Stimme
  (Violett), nie ein Modulton** - die Schnellzeile des Einkaufs war bis 2026-10-07 orange.
- **Formularzeile (Entscheidung Ulas, 2026-10-07):** Ziel fuer Erfassungsdialoge und
  Einstellungen sind GRUPPIERTE ZEILEN nach HIG - als EIN Baustein, gestuft eingefuehrt
  (`utils/form-row.js`: `formRowsHtml`, `formRowHtml`, `formCompositeHtml`; Regeln in
  layout.css "Formularzeile"). Traeger `.form-rows` mit Haarlinien (im Dialog ohne eigene
  Flaeche: Zeile-in-Karte), Zeile `.form-row` mit **Etikett links, Wert rechts**; ein Hinweis nur
  zu dieser Zeile laeuft darunter ueber die volle Breite. In der Zeile gilt:
  - **Auswahl** = randloser `select.form-input`: Wert in Sekundaerfarbe, rechtsbuendig, dahinter
    das Zeichen (`--field-chevron`). WCAG 1.4.11 ist ueber das ZEICHEN erfuellt, nicht ueber eine
    Kante (hell 6,19:1 auf Weiss, dunkel 6,66:1 auf `-surface`); der Fokus zeichnet Akzentkante
    und Glow des Feldkanons. Am Finger 48px, an der Maus 40px.
  - **Datum/Uhrzeit** = `yuvomi-datepicker` als Wert (ohne Kasten, rechtsbuendig).
  - **Zusammengesetztes Feld** = Teilfelder mit Trenner und Einheit als Suffix
    ("120 / 80 mmHg"): `role="group"` mit dem Zeilenetikett als Namen, JEDES Teilfeld mit eigenem
    zugaenglichen Namen, die Einheit als Beschreibung. Teilfelder bleiben Felder mit Kante.
  - **Schalter** = `toggleRowHtml({ control: 'switch' })` als Zeile des Traegers.
  - **Lange Etiketten** (24 Sprachen): das Etikett bricht an der Silbe, der Wert bleibt
    einzeilig (hoechstens 62 % des Traegers); unter 20rem Traegerbreite stapelt jede Zeile, eine
    Zeile mit breitem Wert (`wide`, Datum mit Uhrzeit) schon unter 26rem (Container Query; ohne
    sie bleibt die Zeile zweispaltig).
  - **Freitext bleibt ein Feld OHNE Zeilenraster:** Titel, Notiz, Beschreibung (`.form-input`,
    Etikett darueber; ein Titel darf die grosse erste Zeile sein).
  - **Jedes Bedienelement behaelt ein programmatisch verknuepftes Etikett** (`labelFor` bzw.
    `labelId` + `aria-labelledby`).
  Die Einstellungszeile IST dieser Baustein (`settingRowHtml()` delegiert an `formRowHtml()`,
  Klassen `settings-setting-row form-row`); ihre Masse im Kartentraeger bleiben in settings.css.
  **Umgestellt:** alle Einstellungszeilen mit Auswahl, der Dialog "Messwert erfassen"
  (Gesundheit). **Noch Felder mit Etikett darueber** (naechste Stufe): "Aufgabe" und "Termin".
  Alle uebrigen Dialoge behalten Felder mit Kontur nach der einen Feldhaut.
  **R19 (Einstellungen B7): EIN Formular-Dialekt fuer ALLE Einstellungen.** Jedes Blatt fuehrt
  seine Felder als Zeilen einer Gruppe (`settingRowHtml`/`settingSwitchRowHtml` im
  `.row-carrier.settings-group`; in einer Karte legt die Gruppe ihre Flaeche ab, auch die
  Schalterzeile fluchtet). **Die Dialoge der Einstellungen sprechen ihn ebenfalls** (Familie:
  Mitglied anlegen/bearbeiten, Einladung; CalDAV, CardDAV, Kalender-Abo, Rezeptdienste) - im
  Dialog-Traeger `.form-rows`, Schalter mit Hinweis ueber `formSwitchRowHtml`. Geprueft, ob
  das im Dialog sinnvoll ist: ja. Die Werte sind kurz und strukturiert (Name, Adresse,
  Benutzer, Passwort, Rolle), das Feld behaelt bei 390 rund 200px, und die Dialoge werden
  kuerzer statt laenger (Inhalt bei 390: Mitglied 899 -> 643px, Einladung 848 -> 556px, CalDAV
  472 -> 330px); es ist die Form der iOS-Kontoanlage. Eine Pflichtmeldung steht in der Zeile
  UNTER beiden Spalten, nicht neben dem Feld (`_ensureFieldError`, components/modal.js).
  **Bewusst ohne Zeilenraster:** der Kopf mit Bild (Profil im Konto, Mitglied bearbeiten),
  die Eingabe eines Zwei-Faktor-Codes (ein Feld, ein Schritt), Freitext und die
  Chip-Auswahl der Betreuer (traegt ihr eigenes Etikett). Guard: `test:settings-navigation`
  ("R19: umgestellte Blaetter sprechen den Zeilen-Dialekt").
- **Klassenname:** `.input` und `.form-input` sind ein Alias auf dieselbe Regel (layout.css).
  Kanonisch fuer neuen Code ist `.form-input` - der Name, den `.form-group`/`.form-field`/
  `.form-label` schon fuehren. Bestand bleibt unangetastet, Umbenennen aller Fundstellen ist
  keine Migration wert.
- **Zwei Felder nebeneinander:** `.form-pair` (layout.css, R17 E6) - `auto-fit` mit 8rem
  Untergrenze, misst das Modal; `--wide` (11rem) fuer Datumsfelder (Inventar). Bis R17 stand die
  Regel als `.pantry-form-row` in pantry.css und kopiert als `.inventory-form-row`; der
  Artikel-Dialog des Einkaufs benutzte die Vorratsklasse, deren Blatt dort nicht laedt (Dialog
  mobil 748 -> 563px). Kein Modulblatt kopiert die Zeile (`test:frontend-audit`).
- **Ein Feldtakt im Dialog (R22-F, F4.1):** zwischen zwei Feldern steht `--space-4`, gesetzt
  vom Behaelter. Die Marge von `.form-group` ist der Takt im Block-Fluss; in einem Gap-Behaelter
  (Dialog-Rumpf, `.form-advanced__body`, `.form-stack`, `.form-pair`, `.modal-grid`, Erinnerungs-
  und Wiederholungszeilen, Abo-Raster) faellt sie weg (layout.css "EIN FELDTAKT IM DIALOG"), und
  ein Block als Kind einer Gap-Spalte endet ohne sie. Ein Formular, das Felder, Paare und Raster
  mischt, ist `.form-stack` (Aufgaben). Nie eine Inline-Marge am Feld. Vorher mobil 32px
  (Mahlzeit, Budget, Kontakt, Vorrat, Abfall), 28 (Inventar, Abo), 16 (Aufgaben), 48 hinter
  einem Block. Paare und Raster behalten ihre engere Spalten-/Zeilenluecke (`--space-3`), die
  Seitenformulare der Einstellungen (`.settings-form`) ihren eigenen Takt. Guard:
  `test:frontend-audit` ("F4.1 Dialog-Feldtakt", findet auch den naechsten Gap-Behaelter).
- **Feldsatz in Dialogen (R17, E6):** `<label class="form-field">` mit `.form-label` (Footnote
  13 medium, sekundaer; bis R21 S9b 14px) + `.form-input`; Pflichtfeld = `${REQUIRED_MARK}` am Label; ein Geldbetrag traegt
  `.budget-amount-input` (48px/20/600), sein Nachbar in der Zeile dieselbe Hoehe. Die Dialoge der
  Aufteilung folgen dem seit R17 (vorher `<label>Text<input class="input">`, Label 16px primaer,
  Betrag 42px/16/500, kein Stern), der Schichtplan schreibt die Kanon-Klassen. Wochentage sind
  `.filter-chip` mit `aria-pressed`, ein Boolean im Dialog ist `.toggle` (Termin der Entsorgung).
  Die uebrigen Dateien mit `.input`/`.label` fuehrt `ALIAS_PENDING` in `test:frontend-audit`.
- **Alle Feldfehler auf einmal (R19):** ein Speicherpfad meldet mit `reportFieldErrors()`
  (components/modal.js) JEDEN Fehler an seinem Feld und fokussiert das erste in
  Dokumentreihenfolge - nie einen Fehler je Klick in der Reihenfolge der Pruefung.
- **Keine Browser-Blasen, auch in den Einstellungen (R20):** ein Formular mit `required`,
  `minlength` oder `type="email"` traegt `novalidate` und meldet ueber `reportFieldErrors()`. In
  den Einstellungen macht `settingRowHtml({ field: true })` die Zeile zum Traeger: die Meldung
  steht unter der Zeile, ueber beide Spalten. Felder ohne natives Eingabeelement melden am
  sichtbaren Traeger und fokussieren selbst: die Ablage der Dokumente (`reportDropzoneError`,
  Meldung hinter der Ablage, `aria-invalid`/`aria-describedby` am Datei-Input, der den Fokus
  bekommt) und die Wochentags-Chips der Entsorgung (Fokus auf den ersten Tag). Eine Absage des
  Servers mit `reason` (`wrong_password`, `email_port_invalid`) geht an dasselbe Feld. Die Regeln
  des Markups (`required`, `min`, `max`, `step`, Zahltyp) bleiben im Markup: `constraintErrors(form)`
  (components/modal.js) liest ihren ValidityState und gibt `reportFieldErrors()` die Meldung in
  der Stimme der App ("Mindestens 15.") - kein zweites Nachrechnen im Handler. Seit R21 halten das
  alle zwoelf Gesundheitsformulare (`test:health-errors`); Beispielwerte sind keine Platzhalter
  (ein leeres Blutdruckfeld zeigte "120 / 80" wie eine Messung). Seit R21 S9a gilt es fuer JEDES
  Formular mit Feldregeln (`maxlength` zaehlt nicht, es laesst sich nicht verletzen): 28 von 59
  hatten noch kein `novalidate` (Schichtplan, Aufteilung, Haushaltshilfe, Abos, Dokumente, Fasten,
  Einstellungen, Tablet-Kopplung), jetzt 0; Guard `test:control-dialect` `form-novalidate`. Die
  Seiten vor der Anmeldung melden ueber ihr EINES Fehlerfeld (`flagField`, utils/auth-ui.js).
- **Nachfragen ohne Sperre (R19):** `.form-hint--warning` (Tinte `--color-warning-ink`) fuer
  ungewoehnliche, aber speicherbare Werte (Vitalwerte: 650 kg). Unmoegliches ist ein
  Feldfehler, nicht diese Zeile.
- **Hinweiszeile:** `.form-hint` (14px, Sekundaertext, Tonlagen `--success`/`--danger`/`--warning`) steht
  in layout.css, weil fast jedes Modul sie benutzt - bis 2026-09-24 lebte sie in settings.css
  und renderte ueberall sonst als 16px-Koerpertext. Eine geteilte Klasse gehoert in ein Blatt,
  das index.html verlinkt; eine Kopie oder Ersatzklasse im Seiten-Blatt ist der Fehler, nicht
  die Loesung (`test:frontend-audit`). `.task-field-hint` (12px, tertiaer) ist die leisere
  Bestandsstimme der Aufgaben und Erinnerungen.
- **„Weitere Einstellungen" nennt, was dahinter liegt:** `advancedSection(..., { hint })` setzt
  unter die Beschriftung eine Caption-Zeile mit den Feldnamen. Ein Feld, das nur hinter dem
  Aufklapper steht, findet sonst nur, wer schon weiss, dass es existiert. Nach dem Tipp rollt
  der Dialog das Aufgeklappte ueber die feste Fusszeile, die Beschriftung bleibt im Bild
  (openModal, R21; vorher 0 von 5 neuen Zeilen sichtbar am Telefon). Was fast jede Buchung
  braucht, gehoert nicht dahinter: das Konto steht vor dem Aufklapper, sobald es Konten gibt.

### Nur lesen: das Zeichen statt des Knopfs (#1252, #1265)
Wer ein Modul nur lesen darf, sieht den ZUSTAND, aber keine Handlung. Der Server weist
jeden Schreibversuch mit 403 ab; die Oberflaeche ist die ehrliche Entsprechung dazu, nicht
die Grenze. Ein Knopf, der erst im Fehler-Toast oder als zurueckspringender Haken antwortet,
ist die teurere Auskunft als einer, der gar nicht da ist.

- **Der Anlegeweg** faellt app-weit: `applyModuleReadonly()` (router.js) setzt
  `html[data-module-readonly]`, layout.css blendet damit `.page-fab`, `.toolbar-new-btn`
  und `.notes-manage-categories` aus, setzt `--fab-safe-zone` auf 0 und zeigt oben
  `.module-readonly-banner`. Alles Weitere entscheidet die Seite selbst
  (`isNavModuleReadOnly()` plus eine Positivliste der erlaubten Aktionen im delegierten
  Handler), auch fuer Wege ohne eigenen Knopf: Sortierzug, Wischgeste, Popover-Menues.
- **Zustand bleibt als Zeichen, nicht als `disabled`-Knopf.** Ein gesperrter Knopf traegt
  Trefflaeche und Hover-Rahmen weiter und verspricht eine Beruehrung, die nichts tut. Die
  Bauart heisst `--static` (`.task-status-btn--static`, `.subtask-item__checkbox--static`,
  `.item-check--static`, `.note-card__pin--static` und weitere): ein
  `<span role="img">`, dessen `aria-label` den Zustand nennt ("Titel: erledigt"),
  `cursor: default`, kein vergroesserndes `::before`, und die Hover-Regel nimmt es per
  `:not()` aus. Eine Wischzeile ohne Geste wird `.swipe-row--static` und verliert ihren
  Chevron. Markdown-Checklisten tragen dieselbe Form ueber `checklist.stateLabels` in
  `renderMarkdownLight`.
- **Die Antwort folgt dem Datensatz.** Ein gesetzter Wert bleibt gesperrt sichtbar (er ist
  echt), ein leerer Schalter faellt ganz weg - leer ist kein Zustand.
- **Das Wandtablett** faellt unter dieselbe Regel und behaelt trotzdem seine zwei benannten
  Handlungen (Abhaken, Einloesen); jede betroffene Stelle fragt deshalb ZUERST
  `actingAsDisplay()`.

Gemessen am echten Markup: `test:module-readonly-ui`, `test:budget-readonly-ui`,
`test:shopping-readonly-ui`.

### Kinderkonten: Startrechte und eigene Sicht (R20, entschieden 2026-10-17)
Ein NEUES Konto mit Familienrolle Kind startet mit Mitglied-Zeilen
(`CHILD_START_PERMISSIONS`, server/permissions.js): Budget `none`, Haushaltshilfe `read`,
Fasten aus, `housekeeping_view_amounts` aus. Nur verschaerfend, nur beim Anlegen (Admin,
Einladung); bestehende Konten und ein spaeterer Rollenwechsel bleiben unberuehrt.
Seit R21 (D6) startet es ausserdem ohne Zyklus-Tab (`CHILD_START_PREFERENCES`): keine Rechte-Zeile,
sondern die persoenliche Abwahl aus #760, die das Kind in seinen Einstellungen selbst umschaltet -
geschrieben nur, wo noch nichts steht (`test:child-start-permissions`, "R21 D6").

- **Betraege fehlen am Server, nicht nur im Bild.** Ohne `housekeeping_view_amounts` kommen
  Satz, Summen, Zahlstatus und offener Lohn als `null`; die Seite zeigt dann statt
  „Betrag · Zahlstatus" die Zeit des Besuchs („08:30-12:00"), die Zahlungskarte entfaellt
  und die Besuche nehmen die Zeile allein (`.housekeeping-dashboard-columns--single`). Eine
  `null` steht nie als „0,00 €".
- **Die Zahlungsaufgabe gehoert den Erwachsenen, die bezahlen.** Sie nennt den Lohn und entsteht
  deshalb auf Sichtbarkeit `assignees`, zugewiesen der eincheckenden Person (nur mit
  `housekeeping_view_amounts`) und den aktiven Admins (`paymentTaskAudience`,
  server/services/payment-task-audience.js; dieselbe Regel zieht offene Altaufgaben per Migration 250
  und jede beim Bearbeiten ihres Besuchs nach). EINE Stelle statt eines Filters je Flaeche: die geteilte
  Sichtbarkeitsregel haelt sie aus Liste, Detail, Uebersicht, Suche und MCP. Checkt ein Konto ohne
  Betraege ein, wird die erste Admin-Person Erstellerin, weil die Regel die Erstellerin immer
  durchlaesst.
- **Die Uebersicht eines Kindes** folgt der Vorgabe mit zwei Abweichungen
  (`childDefaultWidgetConfig`): Belohnungen zuerst und sichtbar, Budget aus. Im Heute-Blatt
  ruecken Aufgaben, die nur anderen gehoeren, ans Ende und fallen zuerst unter „+N weitere".
- **Ein Objekt der Uebersicht oeffnet sich UEBER ihr (R22, D3).** Aufgabe (`openTaskById`) und
  Termin (`openEventById`, calendar.js: dieselbe Ansicht wie im Kalender, mit Anker am Desktop als
  Popover, Fuss [Loeschen] ... [Bearbeiten]) gehen als Blatt ueber der Uebersicht auf und werden
  dort bearbeitet und geloescht (R22-F): das Blatt holt Mitglieder, Kalender und Praeferenzen
  selbst (`loadAwayFormContext`), nach dem Schreiben zeichnet sich die Uebersicht neu
  (`onChanged`), waehrend der Rueckgaengig-Frist sind die Zeilen des Termins aus
  (`onRemoving`, `eventRowRemovedBy`); jede Zeile mit
  `/calendar?open=<id>` (Heute-Blatt, Termin-Kachel, Countdown) nimmt diesen Weg (`eventLinkOf`).
  Wo es kein wiederverwendbares Blatt gibt, nennt die Zeile ihr Objekt im Modul: Mahlzeit
  `/meals?open=<id>` (Karte ins Bild, ihr Blatt geht auf), Dosis `/health/meds`, Geburtstag
  `/birthdays?open=<id>`; die Haushaltshilfe bleibt `/housekeeping`. Pruefebene: test:dashboard-a11y.
- **Das zweispaltige Heute-Blatt liest sich spaltenweise (R22, D16):** ab 720px Containerbreite
  traegt jede Spalte eigene, eingerueckte Trenner (`::before`, `inset-inline: --space-4`), keine
  Haarlinie laeuft ueber beide; bei ungerader Zahl spannt die letzte Zeile unter beiden
  (`.today-cockpit-card--span`). Die Einkaufszeile schliesst das SICHTBARE Programm und steht vor
  „+N weitere heute". Im Kindkonto steht die eigene Belohnungskachel oben (die Anfrage folgt dem
  Ziel statt `margin-block-start: auto`). Was die Reihe der 1x1-Kachel ueber ihren Inhalt hinaus
  gibt, fuellt der Verlauf (bis drei Zeilen) in einer Flaeche ohne eigene Hoehe: ganze Zeilen
  oder keine (umbrechende Spalte, `.rewards-recent--fill`), in einer Reihe kurzer Kacheln bleibt
  sie 0px (R22 S10; 1440: 206px Inhalt in 427px Kachel, jetzt drei Zeilen). Guards:
  `test:dashboard-today` ("R22 D16"), `test:dashboard-rewards` ("Groessen").
- **Anpassen: Optionen am Chip (R22, D16):** ein ausgeblendetes Widget mit Optionen ist ein
  geteilter Knopf - links einblenden (ein Tipp), rechts am selben Pill der Pfeil ins Menue
  „<Kachel> einblenden" / „Optionen fuer <Kachel>"; kein freier Regler-Kreis ohne Wort.
  Guard: `test:dashboard-a11y` ("R22 D16").
- **Die leere Befehlspalette (R22, D16):** „Zuletzt besucht" (jeder Modulbesuch, hoechstens
  fuenf, der offene Ort nicht, lokal je Konto, nur Ziel und Modul) und bis zu fuenf
  Anlege-Befehle, beides als Zeilen mit Modulsiegel in der Bauart der Treffer; ohne Besuch die
  ersten Ziele als „Gehe zu". Keine Kachel je Navigationsziel mehr (vorher 19).
  Guard: `test:search-palette` ("R22 D16").
- **Die eigene Karte auf /rewards** (`.rw-own`): Stand im Large-Title-Grad, das naechste Ziel
  mit Zeichen, Name und Preis ueber dem Balken (unter 48rem Kartenbreite stehen die Handlungen
  darunter, R22), „Deine Buchungen" leise (seit R22 nicht mehr ein drittes „Verlauf" neben
  Reiter und Seitenspalte) und „Anfragen" primaer erst,
  wenn der Stand reicht. Opak und randlos wie die Praemienkarte, der Modulton nur im Zeichen
  des Ziels - kein Spiel-Look.
- **Anlegen und Einladen** nennen die Startrechte unter der Familienrolle, nur bei Kind
  (`settings.childStartHint`), und nur dann zeigt `aria-describedby` darauf. Der Hinweis der
  Einladungsvorlage verweist bei Kind auf diese Startrechte, statt "sieht alle Module" zu sagen
  (R23); das Rollenprofil Kind traegt eine Zeile mit denselben Startrechten, nach Stufe
  gebuendelt aus dem Katalog (`childStartSummary`, admin-permissions.js).
- **Fremdes nur lesen (R23, D5).** Fuenf Capabilities nach dem Muster von
  `housekeeping_view_amounts` (Standard `allow`, keine Migration): `calendar_edit_others`,
  `notes_edit_others`, `inventory_edit_others`, `inventory_view_prices`, `tasks_reorder_family`.
  Neue Kinderkonten starten ohne alle fuenf und mit der Entsorgung nur zum Lesen (D15). Ohne
  Recht: lesen und anlegen ja, aendern und loeschen nur Eigenes ("eigen" = angelegt; im Kalender
  auch zugewiesen) - am Server (403 `not_owner`, `mayChangeRecord`), in der Oberflaeche ohne tote
  Knoepfe: ein fremder Termin, Gegenstand oder Zettel oeffnet als Leseansicht ohne Bearbeiten
  und Loeschen, mit dem Satz "Von <Name> angelegt - du kannst es ansehen, aber nicht aendern"
  (`common.foreignReadOnlyHint`); Nadel und Mehr-Menue fehlen an der fremden Notiz-Karte. Das
  Abhaken einer Checklisten-Zeile bleibt offen (Benutzen, nicht Umschreiben). Ohne Preisrecht
  fehlen Kaufpreis und Waehrung in der Antwort, also auch Wert-Kennzahl, Preisspalte und
  Preisfeld. Ohne Handordnungsrecht keine Griffe und kein "Zuruecksetzen" in den Aufgaben.
  Kontakte bleiben aussen vor: ein Kontakt traegt keinen Ersteller.

Gemessen: `test:child-start-permissions`, `test:edit-others-permissions`, `test:edit-others-ui`,
`test:housekeeping-ui`, `test:dashboard-today`, `test:dashboard-rewards`, `test:member-order`.

### Navigation
- **Mobil:** schwebende Glas-Kapsel (radius-full) mit gleitendem Aktiv-Indikator, duenner
  als das uebrige Chrome (2026-10-01): `--glass-bg-capsule` (hell 0.66, dunkel 0.50) ueber
  `--blur-lg` + `saturate(--lg-capsule-saturate)` + `--glass-capsule-tone`, dazu Lichtfang
  (`--glass-sheen-capsule`) und Glanzrand (`--glass-inset-capsule`). Die inaktiven Labels
  stehen dafuer in Primaertext - mit Tertiaertext war die alte Deckung schon die AA-Grenze.
  Ohne backdrop-filter traegt sie `--glass-bg-elevated`; Rechnung und Messwerte in
  tokens.css (a1).
- **Desktop:** Glas-Sidebar mit gleitender Aktiv-Pille; Toolbar ohne Akzentstreifen, Titel in
  Title 2.
- **Die Aktiv-Pille der Seitenleiste ist in hell und dunkel EIN Material (Entscheidung Ulas
  2026-10-15):** eine violette Pille, `--sidebar-indicator-tint` 24 % Akzent im Kartenglas
  (vorher 12 %), Rand aus Akzent-Tint (`--sidebar-indicator-rim-tint` 18 %, mehr Kontrast:
  100 %) statt Weiss, dezente Glanzkante oben (`--glass-inset-soft`), Schatten nur mit Versatz
  und Weichzeichnung (`--sidebar-indicator-shadow`, hell 0.06, dunkel 0.35; kein Weissring
  mehr). Vorher las sie hell als blasser Fleck mit unsichtbarem Weissrand und dunkel als
  grau-violette Glasplatte - zwei Stimmen. Pixelprobe 1440 breit gegen das Sidebar-Glas: hell
  1,19 -> 1,45:1, dunkel 1,22 -> 1,51:1; aktives Label darauf 5,69 / 4,74:1; die neutrale
  Hover-Flaeche bleibt leiser (1,14 / 1,17:1). Ohne Glas (reduzierte Transparenz) bleibt sie
  bei `--tint-surface`: 24 % auf dem opaken #37332E gaebe dem Label nur 4,19:1.
- **Die Seitenleiste ist eine schwebende Tafel (R18, 2026-10-07)** - die Form der mobilen
  Kapsel am Desktop: 8px Abstand zur Fensterkante oben, unten und an der Startkante
  (`--sidebar-float-gap`), `--radius-glass-card`, `--glass-shadow-md`, Lichtkante
  `--glass-inset-elevated`, Glas rundum gefasst. Vorher: volle Hoehe, Radius 0, ein Blur
  ueber der einfarbigen Buehne. **Die Inhaltsbreite aendert sich nicht:** `.app-content`
  haelt weiter `--sidebar-width` frei, die Tafel ragt um ihren Abstand in den 32px-Gutter
  des Inhalts (24px Luft bleiben) - jede Schwelle, die gegen "Fenster minus 220px" gerechnet
  ist, gilt unveraendert. Eingeklappt ist sie eine 56px-Kapsel; ausgeklappt per Hover oder
  Fokus liegt sie UEBER dem Inhalt und bricht ihn (Schattenstufe `--glass-shadow-lg`, das
  Glas bleibt bei 0.86 - mit dem duenneren Kapselwert fiele das Zeilenlabel ueber einer
  Tintenzeile rechnerisch auf 2,80:1). Einstellungen und Kontozeile tragen den Einzug der
  gleitenden Pille (4px), damit ihre Flaeche in der Kurve der Tafel liegt. Die Icon-Mulde
  ist in beiden Themes eine Mulde: 8 % Tinte im Glas (hell 1,17:1, dunkel 1,26:1 gegen die
  Tafel; hell stand sie vorher bei 1,007:1).
- **Die Seitenleiste zeigt jedes Modul ohne Scrollen - auf 1440x900 UND 1280x800**
  (Critique 2026-09-26, P1-2). Vorher lagen auf 1440x900 Geburtstage, Gesundheit und Budget
  unter der Falz, auf 1280x800 rund 270px. Die Rechnung: Zeilen `--sidebar-row-height` (32px,
  ein Reihen-Bauteil nach der Zielgroessen-Regel, Apples Mac-Dichte), Sektionslabels 22px,
  Suche (⌘K / Ctrl+K, dazu `/`) und Einklappen als Werkzeuge IN der Logo-Zeile, Hilfe /
  Aenderungen / Abmelden in einem Konto-Menue hinter dem Avatar (geteiltes `popover-menu`,
  Rollen und Pfeiltasten wie das Werkzeugmenue, oeffnet nach oben). Gemessen mit 15 Modulen:
  Modulliste 614px, fester Rahmen 157px - 771px von 800; seit die Leiste schwebt (R18),
  kommen 2 x 8px Abstand und 2 x 1px Kante dazu: 789px von 800. Die Kontozeile nennt, wer angemeldet
  ist, und traegt den Update-Punkt, solange „Aenderungen" etwas Neues hat. **Kurze Fenster
  (bis 800px Hoehe, Nav-Polish 2026-10-15):** Sektionslabels 18,5 statt 22,5px (4px Luft
  darueber, keine darunter), unter Logo-Zeile 0 statt 4px und unter der Liste 4 statt 8px -
  auch 1024x768 zeigt jedes Modul. Eine Container-Abfrage an der Tafel
  (`@container nav-sidebar (max-height: 758px)` = 800px Fenster), keine Media-Query: die
  Hoehen-Achse kennt nur --bp-short. Gemessen Liste/Sicht: 1440x900 614/725 (unveraendert),
  1280x800 594/629 (vorher 614/625), 1024x768 594/597 (vorher 614/584, Budget hinter dem Fade).
  Guard: `test:frontend-audit` (Rechnung fuer 800 und 768px, Schwelle gegen 800px).
- **Eingeklappt springt keine Zeile (Nav-Polish 2026-10-15).** Jede Modulzeile steht in der
  56px-Kapsel, im Hover-/Fokus-Ausklappen und ausgeklappt auf derselben Hoehe (1440x900:
  Uebersicht y=69 in allen drei Zustaenden; vorher eingeklappt 127, Kalender 163 statt 127,5 -
  der Zeiger lag nach der Hover-Absicht auf einer anderen Zeile). Die Logo-Zeile hat in beiden
  Zustaenden ihre Zeilenform (44px); eingeklappt steht die Bildmarke allein, Suche und
  Einklappen liegen dahinter an der Clip-Kante der Kapsel (kein Deckkraft-Reveal), bleiben aber
  fokussierbar:
  Tab klappt die Tafel per `:focus-within` auf, der Zeiger erreicht sie ueber das
  Hover-Ausklappen, die Suche dazu ueber ⌘K / Ctrl+K und `/`. Sektionslabels behalten
  eingeklappt ihre Hoehe und zeigen statt Text eine Haarlinie `--color-border-subtle` in
  Muldenbreite auf der Icon-Flucht - die Gruppentrennung der Kapsel. Guard:
  `test:frontend-audit` (keine Eingeklappt-Regel fasst die Hoehe von Logo-Zeile oder Label an).
- **Icon-Flucht als Token:** `--sidebar-icon-inset` (15px) und `--sidebar-icon-well` (26px);
  Zeilen, Einstellungen/Konto und Sektionslabels rechnen damit. Die Labelkante steht auf der
  Muldenkante (x=24 bei 1440x900, vorher 21).
- **Zaehl-Badge in der Seitenleiste:** ausgeklappt am Zeilenende, wie der Zaehler einer
  Mac-Seitenleiste (die Icon-Huelle tritt per `display: contents` aus dem Layout, das Badge
  wird Flex-Kind hinter dem Label; Tonvarianten unveraendert). Vorher an der Mulden-Ecke: es
  deckte die rechte obere Icon-Ecke, ragte 1px ueber die Zeile und stiess zweistellig ans Label.
  Eingeklappt (auch im Flyout) und mobil bleibt es an der Ecke.
- **Druck in der Seitenleiste skaliert nicht.** `scale(0.97)` an der Zeile ist weg (Text und
  Mulde schrumpften, die Hover-Flaeche stand - es wackelte); stattdessen wird die Hover-Flaeche
  unter der gedrueckten Zeile eine Tintenstufe kraeftiger (`--color-text-primary` mit
  `--tint-wash` in `--color-surface-3`: hell #EDEAE3 -> ~#DCD9D3, dunkel #37332E -> ~#46423D),
  hinein `--duration-2xs`, heraus `--duration-sm` (Press-Baustein). Mobil unveraendert.
- **Die Kapsel minimiert beim Lesen (R19, Entscheidung Ulas 2026-10-16, iOS-26-Muster):**
  abwaerts aus einer Nutzergeste (ab 24px Strecke) blenden die Labels aus und die Kapsel wird
  flacher (`--nav-height-minimized`: Touch 64 -> 56px, Ziel 48px + 4px Luft); aufwaerts
  (ab 16px), oben und am Seitenende faehrt sie aus, jeder Seitenwechsel beginnt ausgefahren,
  Fokus in der Kapsel holt die Labels sofort zurueck. Die Unterkante steht, der FAB bleibt und
  rueckt per `translate` konzentrisch nach (8 -> 4px rundum). Kein Layout-Shift:
  `--nav-bottom-height` rechnet weiter mit der ausgefahrenen Hoehe (`watchNavCapsuleHeight`
  misst minimiert und auf dem Rueckweg nicht), Nachlauf, Toasts und Mehr-Blatt stehen still.
  Reduzierte Bewegung: derselbe Wechsel ohne Gleiten. Entscheidung: `nextNavMinimized`,
  Verdrahtung `watchNavMinimize` (utils/ux.js). Guards: `test:ux-utils`, `test:mobile-chrome`.
  **Seit R20 eine echte Pille (Ulas 2026-10-17, iOS 26 Tab-Bar-Minimize):** minimiert schrumpft
  die Kapsel an ihrer Startkante auf das aktive Ziel (`.nav-item--pill`; Polster + hoechstens 64px
  + Polster, 390px: 374 -> 80px breit, 56 hoch); die anderen Tabs blenden aus und nehmen keinen
  Treffer, das aktive gleitet per `translate` an den Anfang, die Tab-Pille blendet aus. Die Tabs
  bleiben minimiert und auf dem Rueckweg auf ihrer gemessenen Breite (`navPillGeometry`, gemessen
  an der ausgefahrenen Kapsel), beide Raender stehen explizit - kein Layout-Shift. Ein Tipp auf die
  Pille faehrt sie aus, ohne zu navigieren. **Seit R21 flacher per `scale`, nicht per Hoehe:** die
  `min-height` zog die Zone mit, ihre Oberkante wanderte - gemessen doch ein Layout-Shift je Frame
  (0,0013 je Ein- und Ausfahren, unter reduzierter Bewegung 0,017 je Wechsel). Die Kapsel behaelt
  ihre Layout-Hoehe und staucht sich von der Unterkante (`--nav-flat-scale`, gemessen von
  `measureNavPill` gegen einen Messfuehler fuer `--nav-height-minimized`), die Ziele strecken sich
  zurueck (`--nav-flat-unscale`). Danach 0,00015 bzw. 0,00003. Ohne `scale` (@supports) bleibt die
  Hoehe der Rueckfall. Guard: `test:mobile-chrome`.
- **Die Tabs stehen in jedem Modul auf denselben Koordinaten (R19, Persona Casey).** Ohne
  FAB verteilten sich die fuenf Tabs auf die volle Kapsel (62 gegen 73px bei 390px) - ein
  Budget-Reiterwechsel nach „Statistik", Belohnungen, Haushaltshilfe oder die Einstellungen
  schoben jedes Ziel um bis zu 44px. Seit der Re-Kritik 2026-10-17 ist der Platz des Knopfs
  IMMER reserviert (`.nav-bottom__items`, `padding-inline-end` = FAB plus Kantenabstand): die
  Kapsel hat in jedem Modul und Reiter dieselbe Breite, ohne Knopf bleibt sein Platz leeres
  Glas. Die Zwischenloesung aus R19 (Kapsel ohne Knopf um die Reserve kuerzer) liess ihr Ende
  je Reiter springen (382 -> 334px bei 390) und stand linksbuendig vor einem Loch.
- Labels mobil in 11px (`--type-micro`, Caption 2 - der iOS-Wert fuer Tab-Bar-Titel; Begruendung
  an `.nav-bottom .nav-item__label`); lange Locales duerfen die Kapsel wachsen lassen, nie clippen.
  **Ab 640px Caption 1 (12px, R21, D4):** die 11px sind die Antwort auf 58px je Slot am
  375er-Telefon; am Tablet hat jeder Slot ueber 100px, und das Label war dort die kleinste
  Schrift des Schirms (Guard `test:typography` "R21 Inge").
- **"Mehr" ist kein Modul (Nav-Polish 2026-10-15):** in Ruhe steht sein Zeichen tertiaer wie
  beim Aufbau (`--color-text-tertiary`, hell #6B675F); vorher setzte der Zustand nach jeder
  Navigation den App-Akzent, und der Ueberlauf sah aus wie der aktive Tab. Liegt die aktive
  Route im Blatt, traegt er ihren Modulton. Guard: `test:frontend-audit`.
- **Bei offenem Mehr-Blatt bleibt die Pille auf der aktuellen Seite und Mehr neutral
  (Entscheidung Ulas 2026-10-15):** das Blatt liegt modal ueber dem Ort, wie ein iOS-Sheet, das
  die Tab-Auswahl nicht aendert; eine zweite Markierung in der Leiste waere eine zweite
  Pillen-Sprache.
- **Die Pille der Leiste ist dunkel eine halbe Stufe kraeftiger** (`--nav-indicator-tint`: hell
  16 %, dunkel 24 %). Pixelprobe 390x844 gegen die Kapsel: 1,32/1,28:1 -> 1,51/1,48:1;
  Akzentzeichen auf der Pille 3,70:1 (Grafik, >= 3:1), Labelton 4,93:1.
- **Mehr-Blatt:** so breit wie die Kapsel (`max-inline-size: --nav-capsule-max`, zentriert;
  768px: 744 -> 560px, 390px unveraendert 366px). Die Module stehen als **gruppierte
  Zeilenliste wie in den iOS-Einstellungen** (R19, Ulas 2026-10-16), je Sektion der
  Seitenleiste eine eingelassene Liste (`.more-sheet__list`): Zeile 44px (seit R23; die Zeilen
  stehen in einer Reihe, dort gilt WCAG 2.5.8 - mit 48px stand Budget bei 390x844 61px unter der
  Falz, jetzt im Bild ohne Blende; Gruppen 6px auseinander), Mulde
  32px (seit R23 D9 die getoente Mulde der Seitenleiste, Zeichen 20px im Modulton), Name in `--type-body` einzeilig, Zaehlbadge und Pfeil am Ende, Trennlinie ab der
  Textkante. Vorher je Sektion ein Vierer-Raster mit 1-2 Kacheln je Gruppe (724px, Luecken).
  Die System-Reihe darunter bleibt eine volle Reihe aus vier monochromen Zielen und ist der
  **feste Fuss** des Blatts (`.more-sheet__foot`, R21 S7, D7): nur die Module scrollen, Einstellungen,
  Hilfe, Neuigkeiten und Abmelden sind immer zu sehen (vorher bei 390x844 unter dem Blattende).
  Das Blatt traegt den **gruppierten Grund** (`--color-bg`), die Listen ihre Flaeche
  (`--sheet-tile-bg`) ohne Schatten - keine Karte auf einer Karte (R21 S7, Detektor nested-cards).
  **Seit R22 (D14):** die Oberkante bleibt unter der Statusleiste (`max-block-size` zieht
  `max(--space-8, --safe-area-inset-top + --space-2)` ab; 390x844 mit 59px Zone: y 32 -> 67), der
  Koerper traegt die Kantenblende der Seitenleiste (`wireScrollFade(body, { axis: 'y' })`,
  `.more-sheet__body.has-fade-*`, Blende `--space-6`). **Seit R23 (D13)** bekommt eine Sektion
  auch im Blatt erst ab zwei Eintraegen einen Kopf, gezaehlt an der Liste des Blatts
  (`navSectionLabelKey(section, count)`, kein `standalone` mehr): Budget steht ohne „Finanzen",
  der Gruppenabstand trennt es von „Menschen" (390x844: Budget y 703 -> 684).
  Die vier Ziele der Systemreihe haben keinen Innenrand in der Breite (der Raster-Gap trennt):
  „Einstellungen" steht ab 360px ganz, bei 375px brach es als „Einstel-lungen" (R22 S10).
  Guards: `test:mobile-chrome`, `test:frontend-audit` ("R22 D14"), `test:settings-navigation`.
- **Navigations-Ordnung (R19, Ulas 2026-10-16):** Planen = Kalender, Aufgaben, Belohnungen,
  Notizen, Schichtplan; Haushalt = Kueche, Haushaltshilfe, Entsorgung, Dokumente, Inventar;
  Menschen = Kontakte, Geburtstage, Gesundheit; Budget. **Eine Sektion mit nur einem Eintrag
  hat keinen Kopf** (`navSectionLabelKey`, settings/module-order.js) - Budget steht ohne
  „Finanzen" mit der Luft einer Gruppe (`.nav-item--headerless`); gezaehlt wird in der
  Seitenleiste. Das Mehr-Blatt liest seit R23 (D13) dieselbe Regel, gezaehlt an seiner Liste. Eine eigene `module_order` sortiert
  weiter innerhalb der Sektionen. Der Schichtplan zeichnet `briefcase-business` (Lucide) statt
  einer zweiten Kalenderform. Guard: `test:settings-navigation`.
- **Der FAB sitzt konzentrisch in der Kapsel:** hinten derselbe Abstand wie oben und unten
  (`--nav-fab-inset` = (Kapselhoehe - Knopf) / 2; Touch heute 8/8/8px, bei 60px Kapsel
  6/6/6 statt 4px hinten), die Reserve der Kapsel waechst mit, die Fuge zum letzten Tab
  bleibt 1px.
- **Die Kapsel ist 64px hoch (Entscheidung Ulas 2026-10-15, vorher 60):** zwischen
  Kapselkante und Icon-Pille oben bzw. Label unten standen 3/3px (1px Rand + 2px Polster), jetzt
  5/5px (gemessen 4,95). Alles Abhaengige rechnet ueber `--nav-bottom-height` mit: Nachlauf
  `.app-content` 76 -> 80px, Mehr-Blatt weiter 8px ueber der Kapsel, Toast-Unterkante weiter
  24px ueber ihr. Gemessen 360x780, 390x844, 768x1024 (hell und dunkel, Geometrie gleich):
  Labels einzeilig, Slot 56/62px unveraendert. Wachsen die Labels zweizeilig (el, fil bei
  360px), misst `watchNavCapsuleHeight` weiter 72,19px - die Mindesthoehe greift dort nicht.
- **Filled Variant, app-weit:** JEDER ausgewaehlte Zustand traegt sein Icon gefuellt
  (`fill: color-mix(in srgb, currentColor 30%, transparent)`) - Tab-Bar, Sub-Tabs,
  Listen-Tabs, Filterchips, Segmente, View-Toggles. Lucide bleibt Stroke-Bibliothek; die
  Fuellung entsteht unter vollem Stroke und wirkt nur auf geschlossene Pfade. 16 % las auf
  20px-Tab-Bar-Groesse noch als Outline, deshalb 30 %. Zweiter Kanal neben der Flaeche,
  nie ihr Ersatz.

### Modulkopf (Signature Component)
Eine `.page-toolbar` pro Modul, **Absender-Siegel und Titel links**, Center-Slot (Suche oder
Zeitraum-Navigation), Aktionen rechts. In der KOMPAKTEN Groessenklasse (<1024px, die Welt mit
Tab-Bar) steht der Titel am Scroll-Anfang als **Large Title** (34px) auf eigener Zeile und
faellt beim Scrollen auf den Inline-Schnitt (22px) zurueck; die Trennlinie erscheint erst beim
Andocken, davor steht der Kopf nahtlos auf dem Seitengrund. Ab 1024px regiert die Sidebar -
dort bleibt es beim Inline-Titel, wie in Apples regulaerer Groessenklasse.

**Die Werkzeugzeilen-Regel (Critique 2026-08-27, P1).** Die Werkzeug-Leiste eines Modulkopfs
(Tab-Leiste, Ansichts-Segment) ist die BAR-ZEILE: eine eigene, volle Zeile unter Titel,
Center und Aktionen (`.page-toolbar__bar`, order 4), auf allen Viewports bis auf zwei
benannte Ausnahmen der Kopfregel mobil: die Reiter als Titelzeile zwischen 768 und 1023px
(`page-toolbar--tabs-title`, R19) und die einzeilige Kalenderleiste ab 1024px (R21 S7). Der Slot stand
seit Runde 6 als Zusage im Shell-Kommentar („eine Tab-Leiste im Kopf ist eine eigene,
horizontal scrollende Zeile") - die Regel darunter gab aber nur das Scrollen, nie die Zeile,
und die Einzeilen-Doktrin aus #882 zwang jede Leiste in die Titelzeile, wo sie ihre eigenen
Module versteckte. Gemessen bei 1280px: die Budget-Tabs hatten 138px clientWidth fuer 606px
Inhalt (1 von 7 Tabs sichtbar - Abonnements, Darlehen und Statistik waren Geheimwissen),
das Kalender-Segment 212px fuer 245px („Agenda" unsichtbar, das Monatslabel daneben auf
seiner 7ch-Untergrenze ellipsiert); mobil zeigte Gesundheit 3 von 6, die Haushaltshilfe
3 von 4 Tabs, und das einzige Existenzsignal war ein Fade. Drei Zusagen:

1. **Die Titelzeile bleibt EINE Zeile** - #882 gilt unveraendert; die Bar-Zeile ist die eine
   erlaubte zweite und bricht selbst nie um (sie scrollt). Pruefebene: Dokument (Sonde 19
   zaehlt Titel- und Bar-Zeile getrennt; Sonde 15 erlaubte die Bar-Zeile der kompakten
   Hoehe schon immer - neu ist, dass sie eine Eigenschaft des KOPFES ist, keiner
   Groessenklasse).
2. **Eine ueberlaufende Leiste zeigt ihre Fortsetzung**: Scroll-Fade (wireScrollFade; die
   eps-Toleranz des Helfers steht seit 2026-08-27 auf 2px - bei 8px schluckte sie einen
   echten 4px-Ueberlauf des uk-Kalender-Segments) plus ein Ende IN der Fade-Zone: die
   scharfe Tab-Leisten-Maske (12px statt der 24px der Chip-Reihen, Masken-Familie in
   filter-chip.css, gilt auch der Kuechen-Rail) schneidet das letzte Werkzeug sichtbar an -
   auch eines, dessen Kante zufaellig buendig faellt. Der Befund ist LEERRAUM vor der
   Endkante, der breiter ist als der Fade: dann faded die Maske Leere, und das naechste
   Werkzeug ist unauffindbar (so verdeckte der breite Fade das „Vorrat 10"-Badge komplett).
   Pruefebene: Dokument (Sonde 20: Fade verdrahtet UND Leerraum an der Endkante <= 12px).
3. **Ein Scope-Schalter ist keine Werkzeug-Leiste.** Die zwei Pillen „Mein Budget /
   Haushalt" beantworten „wessen Zahlen", nicht „welcher Bereich", und bleiben in der
   Titelzeile - eine Zwei-Optionen-Wippe auf eigener Zeile waere Zeilenverbrauch ohne
   Sichtbarkeitsgewinn.

Traeger: die Klasse sitzt direkt an einer Pillen-Leiste (budget-tabs, sub-tabs-bar im Kopf,
housekeeping-/rewards-tabs) oder als neutraler Wrapper um einen Segment-Traeger, dessen
Well nicht die ganze Zeile faerben darf (Kalender-Views). **Die Werkzeuge der Ansicht stehen
am Ende derselben Zeile** (Kalender: Filter und Suche, Critique 2026-09-24): im Aktions-Slot
bauten sie mobil eine eigene Kopfzeile und standen je nach Kollaps-Zustand links oder
rechts. In der Bar-Zeile stehen sie ab 640px in jeder Ansicht und jedem Zustand an derselben
Stelle; unter 640px stehen sie seit R17 (2026-09-28) in Zeile 1 neben dem Titel (siehe
„Variante: Zeitraum-Kopf" unter der Kopfregel mobil). Wird es eng, gibt das Segment nach (es scrollt mit Fade), nie die
Werkzeuge: die haben kein Label zum Anschneiden, nur ihre Trefferflaeche. Der fruehere Rail-Pad-
Ausnahmeeintrag fuer Tab-Innenabstaende ist mit dem Subjekt-Scan des #577-Guards entfallen:
ein Selektor, dessen letztes Compound nicht die Rail ist, polstert ein KIND der Rail.

**Eine Hoehe je Zeile (R22, D8).** Bedienelemente, die in EINER Zeile stehen, teilen eine
Hoehe: am Zeiger ab 1024px (`(min-width: 1024px) and (hover: hover)`, dieselbe Bedingung wie
`.btn`) misst der Kopf `--target-md` (40px) - Text- und Icon-Knoepfe, Suche, Segment (aussen),
Reiter (`.sub-tab`), Listen-Kapseln und ihr Plus, die Icon-Form der Kalender-Suche, die
Kopfknoepfe der Uebersicht und der Abschnittskopf (`.section-toolbar`); am Finger ueberall
`--target-base`. Vorher standen bei 1280px Reiter und Listen-Kapseln mit 44px neben 40er
Knoepfen, die Lupe des Kalenders mit 44, die Uebersicht mit 44, und der Dokumenten-Status mass
50 neben 40er Chips (er rechnet jetzt wie das Kopf-Segment). Segmente schreiben ueberall 14px
(`--text-sm`; der Kalender hatte 15). Guards: `test:frontend-audit` ("D8: eine Hoehe je
Kopfzeile ..."), `test:typography`.

**Der Absender steht genau einmal, und die Shell setzt ihn.** Das Markensiegel des Moduls
sitzt unmittelbar vor dem Seitentitel und wird von `wireCollapsingHeader` angehaengt - am
selben Ort und aus demselben Grund wie der angedockte Titel: der Kopf ist die eine
Komponente, die alle Module teilen, und "genau eines" ist nur dort eine Eigenschaft des
Bauteils, wo der Kopf es selbst anlegt. Als Opt-in fehlte es beim achtzehnten Modul, und als
Modul-Markup waere die Dosierung eine Bitte an siebzehn Dateien. Es haengt am TITEL, nicht am
Kopf: wo kein Seitentitel steht, hat der Kopf keinen Absender zu fuehren - dieselbe
Abgrenzung, die die Leisten-Regel zieht.

**Das Siegel nimmt den Rang seines Titels an.** Die zwei Schnitte der
Canonical-Page-Head-Rolle haben ihre Entsprechung in EINEM Wertepaar an der Leiste
(`--seal-head-size` / `--seal-head-icon`): 32px neben dem Large Title, 24px neben dem
Inline-Schnitt, in denselben drei Zustaenden, die typography.css fuehrt. Die Titelbasis
rechnet ab, was das Siegel belegt (`calc(100% - var(--seal-head-lead))`) - mit `100%` haette
der Titel sich unter sein eigenes Siegel geschoben und die Lead-Zone waere um eine Zeile
gewachsen. Gemessen ueber alle zehn Koepfe: Kopfhoehe und Lead-Zone sind mit und ohne Siegel
identisch, es kostet also keine Zeile.

**Die Kuechen-Leiste fuehrt ihren Absender selbst.** Nach der Leisten-Regel IST sie die
Kopf-Navigation; ihr Siegel steht am Desktop vor dem Titel "Kueche". Mobil weichen Titel und
Siegel gemeinsam (R9 M10, kitchen-tabs.css): die Bottom-Nav fuehrt dort Wort und Besteck als
aktiven Eintrag, und die 26px des Siegels fehlten den vier Tabs mit ihren Zaehlern.
Die vier Kuechen-Koepfe bleiben siegellos: sie teilen einen Tint, weil sie ein Raum sind, und
zwei von ihnen tragen gar keinen Seitentitel. `renderSubTabs` weist ein Siegel deshalb
zurueck, wenn die Leiste das Modul nicht wechselt (`semantics: 'tabs'`, Gesundheit) - dort
liegt sie IM Kopf, und der traegt seinen Absender bereits.

**Die Kapsel ist nicht die Trefferflaeche (R21, D11).** Mobil war die aktive Kuechen-Kapsel
ein 58x48-Fast-Kreis mit rund 3px Luft ums Wort, "Vorrat11" klebte. Die Leiste gibt der
geteilten Kapsel (`utils/segment-indicator.js`) per CSS eine eigene Form: `--seg-pill-block`
(`--target-md`, 40px, mittig im 48px-Ziel) und `--seg-pill-outset` (4px ueber den Tab hinaus,
in dessen 8px Polster) - 12px Luft ums Wort, 16px zwischen zwei Worten, und die Leiste passt
bei 375px weiter ohne Scrollen. Der Zaehler steht 4px neben dem Wort mit 4px Innenpolster.
Andere Leisten setzen die Eigenschaften nicht und messen den Eintrag wie bisher. Zwischen zwei
Kuechen-Reitern blendet nur der Koerper (Typ `kitchen` am Seitenwechsel): die Kontextzeile
wechselt mit dem Tipp, statt doppelt belichtet zu blenden; seit R22 (D1) schneidet dort wie
ueberall der ganze Wechsel, und die Kapsel springt im Frame des neuen Koerpers an ihr Ziel.
Guards: `test:kitchen-tabs`, `test:motion`.

**Andocken kann nur ein Kopf mit Lead-Zone** - und eine hat nur, wessen Inhalt auf mehr als
einer Zeile steht. Wo keine ist, traegt die Leiste ihre Linie durchgehend und markiert
schlicht die Kopfkante. Das ist kein Sonderfall, sondern derselbe Satz von der anderen
Seite: ohne wegscrollende Zeile gibt es kein Andocken zu zeigen. Gemessen trifft das zwei
Lagen - die regulaere Groessenklasse ab 1024px (Inline-Titel; seit der Werkzeugzeilen-Regel
traegt ein Kopf dort zwar zusaetzlich seine Bar-Zeile, aber die gehoert nicht zur Lead-Zone -
sie ist die Bedienzeile, die beim Andocken stuende, und Andocken bleibt ohnehin der kompakten
Klasse) und mobil die vier einzeiligen Kuechen-Koepfe, wo die Kuechen-Leiste den
Modulnamen traegt, also kein Seitentitel darueber steht und der Kopf allein seinen
Center-Slot und EIN Werkzeugmenue fuehrt (seit R14 auch der Essensplan: Wochenstepper und
„..." in einer 65px-Zeile). Traegt diese Zeile nur Werkzeuge (Rezepte, Vorrat), faltet sie
angedockt trotzdem ein - ohne Lead-Zone, als Faltzeile (siehe „Variante: die Tab-Leiste ist
der Titel").

Und **was als Zeile zaehlt, entscheidet die UEBERLAPPUNG der vertikalen Intervalle, nicht
die Oberkante.** Flex-Items unterschiedlicher Hoehe stehen mittig ausgerichtet nebeneinander
und beginnen dabei bis zu 15px auseinander; ein hoehenloser Slot, den ein Modul nur je nach
Zustand fuellt, macht gar keine Zeile auf. Beide Faelle sind einmal als Lead-Zone
durchgegangen und haben dabei genau die Linie verborgen, die zu zeigen war - auf Desktop bei
11 von 14 Koepfen folgenlos (jede Regel dazu steht in der kompakten Groessenklasse), bei den
Rezepten sichtbar.

### Der Solo-Haushalt (Critique 2026-08-10, Persona Miriam)

**Was nur eine sinnvolle Belegung hat, wird nicht gefragt.**

PRODUCT.md fuehrt seit 2026-08-06 Solo-Nutzer als bestaetigte zweite Zielgruppe, und die
Oberflaeche wusste davon nichts: das prominenteste Widget zeigte eine grosse 1 mit „im
Haushalt" - ein Zaehler, dessen einziger Inhalt ist, dass man allein ist. Jede Aufgabe trug
das Pflichtfeld „Sichtbarkeit" mit genau einer Antwort, jede Dokumentkarte wiederholte „Ganze
Familie", „Zugewiesen an" bot einen selbst und „- Niemand -".

**Ein stiller Schalter, keine Einstellung.** Der Haushalt hat eine Groesse, die App kann sie
zaehlen (`/auth/me` liefert `householdSize`, `utils/household.js` haelt sie), und ein
Schalter fuer etwas Zaehlbares waere ein Formular fuer eine Frage, die niemand stellen
wollte - dazu einer, den Solo-Nutzer erst faenden, nachdem sie die Bevormundung schon gesehen
haben. Es ist derselbe Mechanismus, den der Block-2-Brief fuer das Ueberlappungszeichen
festgelegt hat: „erscheint nur, wenn es mehr als einen moeglichen Beteiligten gibt; im
Solo-Haushalt entfaellt es still".

**Der Schalter aendert keine Daten.** Ein Eintrag behaelt seine `visibility` und seine
Zuweisung; nur gefragt wird nicht mehr danach - die Felder bleiben im DOM und tragen ihren
Wert, sie sind `hidden`. Kommt ein zweites Mitglied dazu, stehen sie wieder da, und alles, was
inzwischen entstanden ist, hat schon die richtigen Werte. Ein Schalter, der Daten wegnimmt,
waere eine Migration; dieser ist eine Darstellung.

**Split-Gaeste zaehlen nicht mit** - sie sind externe Beteiligte einer Ausgabenteilung, keine
Haushaltsmitglieder (dieselbe Grenze, die `access_scope` zieht). Ein Haushalt von einer Person
mit drei Reisebekanntschaften ist ein Solo-Haushalt.

**Eine Quelle, nicht zwei.** Das Aufgaben-Formular fragte vorher `users.length > 1` - dieselbe
Frage aus einer anderen Zahl, naemlich der geladenen Nutzerliste des Moduls. Zwei Quellen
laufen auseinander, sobald eine einen Sonderfall bekommt, und diese hatte schon einen: die
Nutzerliste zaehlt Split-Gaeste mit.

**Zusaetzlich eine Wurzelklasse** (`html.household-solo`): manche Stellen sind reines Layout
und haben kein JS, das fragen koennte. Eine Quelle, zwei Wege.

### Das Ueberlappungszeichen (Block-2-Brief, gebaut 2026-08-10)

Der dritte Teil der Formfamilie, neben dem Siegel und seiner Herkunfts-Regel. **Ein Avatar
ueberlappt das Markensiegel - wer ∩ was**, das Familien-Zeichen der Drei-Kreise-Bildmarke, auf
zwei Kreise gebracht: einer sagt, aus welchem Raum das Objekt kommt, der andere, wen es
angeht.

**Sein Einsatzgesetz ist das des Siegels plus zwei Bedingungen.** Es erscheint, wo ohnehin ein
Siegel steht (also an Mischstellen), UND das Objekt traegt eine Person, UND der Haushalt hat
mehr als ein Mitglied. Nie Pflichtelement: wer keine Person hat, bekommt sein Siegel wie
bisher. Das ist der Sinn und keine Bequemlichkeit - ein Zeichen, das immer da ist, sagt
nichts.

**Die Ueberlappung IST das Zeichen, nicht die Nachbarschaft.** Zwei Kreise nebeneinander
waeren zwei Angaben; erst der Schnitt macht daraus eine. Der Versatz betraegt ein Drittel des
Avatars, und der Ring darum nimmt `--seal-pair-ground` (Voreinstellung `--color-surface`) -
die Flaeche, auf der das PAAR steht. Er hiess `--seal-base` und teilte sich den Namen mit dem
Mischgrund des Siegels; das waren immer zwei Fragen, und mit dem Vollton ist von ihnen nur
noch die des Rings uebrig. Ohne den Ring laufen zwei gesaettigte Flaechen ineinander, sobald
die Toene sich aehneln - seit dem Vollton noetiger als vorher, nicht weniger.

**Gebaut ist es an der Mischstelle „Heute wichtig"**, wo es das „von wem" der Aufgabe und des
Termins traegt; Einkauf und Essen bekommen keines, weil sie keine Person haben. Gehalten von
`utils/seal-pair.js` und einem Guard („das Ueberlappungszeichen kommt aus einer Hand"), der
Handnachbauten verbietet - sie haetten die drei Bedingungen nicht.

**NICHT gebaut im Monatsraster**, und das ist eine Entscheidung: der Chip misst dort 20px und
traegt bewusst nur den Titel (Apple-Kalender-Kanon, im Quelltext begruendet). Ein Zeichen
darin waere die Siegel-Inflation, die der Brief als Anti-Ziel fuehrt. Das „Wer" eines
Monatstermins bleibt damit ein offener Befund - seine Antwort liegt in der Tages- und
Detailansicht, nicht in einer kleineren Marke.

**Auch nicht im Erinnerungs-Toast**, aus einem anderen Grund: `/reminders` liefert keine
Personendaten (geprueft 2026-08-10, nur `entity_title`). Das waere eine Server-Erweiterung und
gehoert in einen eigenen Schritt.

### Die Chrome-Regel (Critique 2026-08-10, Frage 4)

**Ueber dem Inhalt stehen der Kopf und hoechstens EINE Bedienzeile. Was nicht hineinpasst,
wandert hinter einen Einstieg, nicht in eine dritte Zeile.**

Das ist die vierte Regel dieser Bauart, neben der Wischsemantik (die Reichweite der Tat
entscheidet den Rueckweg), dem Kopf-Kontrakt (der `module:`-Wert der Route entscheidet die
Leiste) und der Zielgroessen-Regel. Sie beantwortet die Frage, an der laut Critique Aufgaben,
Kalender, Einkaufen und Budget gleichzeitig scheiterten: was ist der primaere Inhalt einer
Modulseite, und wieviel Chrome darf davorstehen.

**Die Groessenklasse hat dafuer eine zweite Achse** (tokens.css §11c): unter 500px
Viewporthoehe faellt der Kopf auf seine Bar-Zeile, die Suche in ihre Icon-Form, jede Leiste
gibt eine Padding-Stufe ab. Der FAB traegt dazu nichts bei (siehe unten). Die Breite
allein konnte das nicht entscheiden - nach ihr ist ein 640x400-Fenster (ein 1280x800-Laptop
bei 200 % Zoom, also WCAG 1.4.4) von einem 375x812-Telefon nicht zu unterscheiden, auf dem
dieselben 296px Kopf unauffaellig sind. Dieselbe Lage haben Splitscreen-Tablets, kleine
Fenster und jedes Telefon im Querformat; iOS fuehrt sie als `verticalSizeClass`.

**Die Suche wechselt in ihre Icon-Form, nicht in ein leeres Feld.** Das ist die
Label-Verlust-Regel, angewandt auf den Flaechenverlust, und sie braucht dafuer weder Markup
noch JS: `.page-search` IST ein `<label for>`, ein Klick darauf fokussiert den Input, und
`:focus-within` klappt das Feld wieder auf - der Einstieg ist derselbe Knoten wie das Feld.
Die Bedingung ist woertlich die der gedeckelten Architektur (nur ohne Fokus UND ohne Wert):
eine Suche, die einem beim Scrollen der eigenen Treffer unter den Haenden verschwindet, waere
der falsche Gehorsam gegenueber der Regel.

**Was NICHT passiert: keine Leiste verschwindet, keine Zielgroesse schrumpft.** Eine Leiste
wegzunehmen hiesse, eine Navigationsebene zu verstecken, die es nur in dieser Groessenklasse
nicht gaebe. Die Tabs behalten `--target-base` und verlieren nur die Luft um sich herum.

**Die FAB-Zone faellt in der kompakten Hoehe NICHT, und muss es nicht.** Bis 2026-08-10 stand
hier die Rechnung, wie weit `--fab-safe-zone` fallen darf (92 auf 60px), samt der Warnung,
dass 0 am Scroll-Ende `.pantry-stepper__btn` und `.contact-more-menu` unter dem Knopf
unerreichbar macht (#634). Beides ist erledigt, seit der Knopf unter 1024px in der Nav-Kapsel
sitzt: dort ist die Zone ueberall 0, und darueber traegt sie die Nachlauf-Regel (siehe unten)
als Nachlauf am Inhaltsende, der den Scrollport nicht verkuerzt. Der Kompromiss zwischen
Flaeche und Erreichbarkeit war nur noetig, solange die Reserve den Scrollport verkuerzte
(tokens.css, „Kompakte Hoehe - die zweite Achse der Groessenklasse (§11c)"). Der grosse Gewinn kam ohnehin aus dem Kopf: auf
/tasks 296px Chrome ueber 231px Scrollport vorher, 137px ueber 263px nachher - von „keine
einzige Aufgabe sichtbar" auf zwei.

### Kopfregel mobil (2026-09-26, Critique A1 P1-3 / A8)

Die Chrome-Regel oben sagt, WIEVIEL ueber dem Inhalt stehen darf; die Kopfregel sagt, WIE
ein Modulkopf unter 768px gebaut ist. Anlass: dieselbe Frage hatte sechs Antworten - Kopf
114px in der Mehrheit, 170-176px in Aufgaben und Inventar, feste Filterreihen in Notizen,
Kontakten und Vorrat (Port erst bei y179), und unter der Glas-Kapsel lief nie Inhalt.

1. **Hoechstens zwei Kopfzeilen.** Zeile 1 traegt allein den Large Title (34/700) mit dem
   Absender-Siegel davor. Zeile 2 ist die Bar-Zeile, die beim Scrollen stehen bleibt: vorn
   das Such-Icon (wo das Modul sucht), dann die Kontext-Steuerung (Ansichts-Segment,
   Zeitraum-Stepper, Listen-Kapseln, „Filter (n)"), trailing genau EIN Werkzeugmenue „..."
   (`pageToolsMenuHtml`, utils/popover-menu.js, Vorbild `documents-tools-btn`). Traegt ein
   Modul Sub-Tabs, ist die Tab-Leiste die ganze Zeile 2 (Schichtplan, Haushaltshilfe,
   Belohnungen). Die Primaeraktion bleibt mobil der FAB in der Kapsel, am Desktop die
   angedockte Kopf-Pille. Ziel ausgeklappt <= 114px, mit Stepper <= 122px. Gemessen
   2026-09-27 (R11, 390px): Aufgaben, Notizen, Kontakte, Dokumente, Inventar, Geburtstage,
   Entsorgung, Einstellungen 114-120px, Kalender 117px, Budget 162px (seit R16 117px, siehe unten).
   Bis R11 stand hier, Such-Icon und Menue sassen in Zeile 1 neben dem Titel - gebaut war
   immer Zeile 2 (Re-Critique 2026-09-27, A8 P3-1). Neben dem Large Title haetten sie ihn
   bei 390px auf rund 220px gekuerzt, und angedockt waeren sie mit ihm aus dem Bild gewandert.

   **Nie ein Kopf ohne Ortsangabe.** Angedockt wandert Zeile 1 aus dem Bild, und der Titel
   kommt als kleiner Inline-Titel zurueck (`wireCollapsingHeader`, utils/ux.js): in die
   Bar-Zeile, wo sie ihm 88px laesst; sonst falten ihre Kontrollen ins „..." (R9 M9). Eine
   Tab-Leiste als Bar-Zeile gibt es zwischen 768 und 1023px nicht: seit R19 stehen die
   Reiter dort in der Titelzeile (`--tabs-title`), der Kopf ist einzeilig. Unter 768px
   nennt der Kopf seit R21 (D7) wieder den Ort - Siegel und Name, die Reiter darunter; angedockt
   steht der Inline-Titel VOR den Reitern in ihrer Zeile (`--dock-tabs`, R21 S7), die Leiste
   nimmt den Rest und scrollt. Die dritte Bauart dafuer (Band,
   R11 H1) ist seit R20 entfallen - gemessen erreichte sie keine Route mehr. Kopfhoehe und
   Klebekante haengen in keinem Weg am Andock-Zustand.
   **1a. Werkzeuge in der Titelzeile.** (R16, Critique 2026-10-05 P1 mobil.) Traegt die
   Werkzeugzeile hoechstens ZWEI Icon-Knoepfe (Such-Icon, „...") und weder Segment noch
   Stepper noch Tab-Leiste, ist sie keine Zeile wert: die Knoepfe stehen am Ende der
   Titelzeile, Zeile 2 entfaellt (`page-toolbar--title-tools`, layout.css; in
   `renderPageHeader` die Option `titleTools`). Traeger: Kontakte, Geburtstage, Entsorgung,
   Einstellungen-Wurzel, Notizen, Dokumente, Gesundheit (seit R16 Schritt 3: das Werkzeug
   des Kopfs ist dort der CSV-Export, Kopf 65px; im Bereich weicht es Rueckweg und Person) und seit R17 das Inventar (Suche + Werkzeugmenue; Kopf 114 -> 65px, in einer Kategorie mit Rueckweg-Zeile 154 -> 113px, erste Zeile y 186 -> 137). Gemessen 390px: Kopf 114 -> 65px; erste Zeile Kontakte y 218 -> 169,
   Geburtstage 179 -> 77 (dazu entfiel der Dauerhinweis, der wortgleich im Dialog steht),
   Entsorgung 164 -> 115. Der Titel gibt nach (Basis 0, Ellipse - „Recogida de basura"
   kuerzt), die Knoepfe nie. Auf dem Tablet (768-1023px), wo das Suchfeld als Feld daneben
   steht, gibt dagegen das Feld nach: der Titel nimmt seine Breite bis zur halben Zeile
   (Re-Kritik 2026-10-17, bei 834px stand „Aufgab..." neben einem 386px-Feld). Der Kopf ist damit EINZEILIG: keine Lead-Zone, nichts dockt an
   oder klappt ein, Hoehe und Klebekante sind in jedem Scrollstand gleich, die Linie steht
   durchgehend. Das ist der Unterschied zu R11 (Absatz oben): dort waeren die Werkzeuge mit
   einer wegscrollenden Titelzeile aus dem Bild gewandert; dieser Kopf hat nur die eine und
   behaelt sie. Die offene Suche (Fokus oder Begriff) nimmt die Zeile, der Titel verlaesst
   dafuer das Bild (nicht den Baum), das Siegel bleibt. Ein beschrifteter Kopfknopf zaehlt
   nicht als Icon: er wird unter 768px nach der Label-Verlust-Regel zum Eintrag im „...",
   ab 768px steht er wieder - je Breite ein Weg. (Die Entsorgung hatte hier „Abfallart
   hinzufuegen"; seit R23 D14 ist das in jeder Breite ein Menueeintrag - nach der ersten Art
   ist sie ein Werkzeug, die erste traegt der FAB. Die Typkarten nennen nur noch die Regel,
   den naechsten Termin nennt allein „Naechste Abholungen".)
   Dasselbe gilt fuer ein Ansichts-Segment mit zwei Optionen: in den Dokumenten steht die
   Ansicht unter 768px als Einfachauswahl im Kopf-Menue (wie im Kalender), der Umschalter ab
   768px. Damit entfaellt in Notizen und Dokumenten die Zeile ueber der Chipreihe: Notizen
   erste Karte y 232 -> 183, Dokumente 249 -> 200 (vier Baender -> drei).
   Seit R21 S9b ordnet sich die Filterzeile der Dokumente unter 768px nach Achsen: Status als
   Segment, Ordner UND Kategorie in EINER Auswahl hinter dem Ordner-Chip (zwei Gruppen,
   wie Orte und Tags einer Dateien-App), dazu hoechstens der Fristen-Chip. Die Kategorie-Chips
   stehen ab 768px; beide Ordnungen bleiben (D7). Der Chip nennt die gewaehlte Kategorie mit
   ihrem Zeichen. Gemessen 390px: Kategorien ganz im Bild 0/6 (Spur 775px ueber) -> alle sechs
   nach einem Tipp, Spur 0px ueber (`test:documents-ux`).
   Seit D1 (Critique 2026-10-16) traegt auch der Aufgabenkopf seine Werkzeuge in der
   Titelzeile: Lupe, Filter als Icon mit Zaehler (D2) und „...", die Ansicht Liste/Brett
   unter 768px als Einfachauswahl im Menue. Gemessen 390px: Kopf 120 -> 65px, erste
   Gruppe y 132 -> 78. Drei Icon-Knoepfe lassen „Aufgaben" bei 390px 166px.
   **Seit R19 gilt 1a bis 1023px**, also auch auf dem Tablet: bei 834px stand die Suche als
   Feld in einer eigenen Zeile unter dem Titel (Aufgaben, Kontakte, Inventar, Notizen,
   Dokumente 118px). Jetzt teilen Titel (natuerliche Breite, Ellipse), Suchfeld und Werkzeuge
   die Zeile: 118 -> 69px. Dasselbe gilt fuer `--period-inline` (Budget 174 -> 129px).
   NICHT Traeger sind Koepfe mit Stepper oder Tab-Leiste in Zeile 2
   (Budget, Kalender als eigene Variante) und die
   Kuechen-Koepfe: dort IST die Tab-Leiste die Titelzeile und laeuft bei 390px ohne Werkzeug
   schon bis 65px vor die Kante (R14 P7 bleibt, die Zeile faltet beim Scrollen, R17 K1).
   `test:mobile-chrome` haelt Traegerliste, Geltung nur unter 768px und „nie neben einer
   Bar-Zeile".
2. **Keine losen Verwaltungs-Icons oder Textknoepfe im Kopf.** Kategorien, Tags, Lagerorte,
   Mehrfachauswahl, Import, Verlauf stehen im Werkzeugmenue - mit Icon UND Text; ein
   Ansichts-Schalter dort ist ein `menuitemcheckbox` mit Haken.
3. **Filter stehen nicht fest ueber dem Port.** Entweder als `.page-chip-row` als erstes
   Element IM Scrollport (scrollt weg) oder hinter „Filter (n)" mit Blatt
   (utils/filter-sheet.js, Vorbild Kalender). Aktive Filter bleiben sichtbar: die Zahl am
   Knopf oder die Chips im Port. Nie beides fuer dieselbe Achse.
   Eine Chipreihe bleibt EINE Reihe, auch am Zeigergeraet (R22, D20; Kontakte brachen bis
   dahin ab 1024px in zwei Reihen um, rund 48px Kopf): sie scrollt waagerecht mit Fade an der
   Kante (`wireScrollFade`), das Mausrad bewegt sie, bis sie am Ende ist, dann die Seite
   (`wireWheelToRow` in contacts.js; `test:contacts-list-detail`).
   Am Desktop (ab 1024px) ist das Blatt ein POPOVER am Filterknopf (R17, E13:
   `openFilterSheet({ anchor })`, `.filter-popover` in layout.css) - ohne Overlay und
   Unschaerfe, die Liste dahinter bleibt sichtbar und filtert live; Esc und Tipp daneben
   schliessen, der Fokus geht an den Knopf zurueck. Mobil bleibt es das Blatt.
4. **Die Suche ist mobil ein Icon**, das zum Feld aufgeht (`.page-search`, Label-Verlust-Regel
   oben). Die Icon-Form fragt nach dem Kopf, nicht nach dem Elternteil: sie greift auch in
   einem Wrapper-Slot, und ein Slot, der nur die Suche traegt, schrumpft mit ihr. Der
   bevorzugte Weg bleibt, die Suche selbst zum Slot zu machen (`className: '...
   page-toolbar__center'`).
5. **Der Inhalt laeuft unter die Glas-Kapsel.** `.nav-bottom` liegt absolut an der Unterkante
   der Shell, nicht im Flex-Fluss; der Scrollport reicht bis zum Rand, und das Glas zeigt,
   was darunter scrollt. Die Zone der Kapsel ist der vierte Summand des Nachlaufs
   (`--nav-tail`, nur unter 1024px und nicht im Wand-Modus) - die letzte Zeile endet damit
   am Scroll-Ende ueber der Kapsel, auch in Modulen mit eigenem Port. Die transparente Zone
   um die Kapsel ist klickdurchlaessig (`pointer-events`), `scroll-padding-block-end` haelt
   Fokusziele ueber dem Glas, und was im Inhalt unten klebt, klebt an `var(--nav-tail)`,
   nie an `bottom: 0`. FAB, Toasts und Mehr-Blatt rechnen weiter ab `--nav-bottom-height`
   und stehen, wo sie standen.

**Variante: die Tab-Leiste ist der Titel (Kueche).** Wo mehrere Module eine gemeinsame
Tab-Leiste tragen, die selbst sagt, wo man ist, ersetzt sie den Large Title: Zeile 1 = die
Leiste, Zeile 2 = EINE Kopfzeile je Tab mit [Kontext] ... [Such-Icon] [EIN „..."] (am Desktop
dazu die angedockte Primaer-Pille). Such-Icon und Menue wandern in Zeile 2, weil die Leiste
bei 390px schon ohne sie ueberlaeuft (gemessen scrollWidth 403/390). Die Zwei-Zeilen-Regel
gilt unveraendert. Ein Tab ohne Werkzeuge traegt kein leeres „..." (Rezepte).
**Ein Werkzeugmenue beginnt bei zwei Eintraegen (R16).** Mit einem einzigen Eintrag gibt
`pageToolsMenuHtml()` den direkten Knopf aus - Icon der Handlung, ihr Name als
`aria-label`/`title`, dasselbe `data-action` (Vorrat: „Lagerorte verwalten" statt „..." mit
einem Eintrag). Ein Schalter (`checked`) bleibt im Menue.
**Die einzeilige Kopfzeile ist am Desktop ein volles Ziel hoch (R16):** 69px in jedem Modul
(`.page-toolbar { min-block-size }` ab 1024px), gleich ob sie einen Segment-Umschalter (44px)
oder nur 40px-Knoepfe traegt - vorher 65 gegen 69px, der angedockte Primaerknopf bei y 12
gegen 14. Mehrzeilige Koepfe (Budget 121, Kalender 125, Schichtplan 117) sind unberuehrt.
EINE Regel fuer alle vier Tabs (R14, Re-Critique 2026-09-28 P7): die Leiste traegt nur Tabs
mit ihren Zahlen, jedes Werkzeug steht in Zeile 2 seines Tabs. Die R9-Verdichtung (Werkzeuge
am Ende der Leiste, Zaehler als Punkt an der Ecke) ist zurueckgenommen - sie gab vier Tabs
vier Kopfbauarten, und „Einkauf 23" war je nach Tab eine Zahl oder ein Punkt. Ausgeklappt
misst der Kuechenkopf in allen vier Tabs 121px (Leiste 56 + Zeile 2 65, 390px).

**Zeile 2 faltet angedockt** (R17 K1, A4 P2-4 / A8 P3-2; seit R17 Schritt 5 in allen vier Tabs).
Rezepte (Lupe, mit Anbieter dazu der Quellenfilter) und Vorrat (Lupe, „...") zahlten 65px
fuer ein bis zwei Icons. `wireCollapsingHeader` (utils/ux.js) erkennt die Zeile selbst
(`page-toolbar--fold-row`: Gruppen-Variante, einzeilig, ohne Titel) und haengt sie an dieselbe Schwelle und Klasse wie den Kopf der gedeckelten Module:
ein Nutzer-Scroll im Port setzt `is-collapsed` (ab 24px, zurueck unter 8px), und nur, wenn
der Port die Zeile ausgeklappt traegt (Reserve >= Zeile + 48px, ausgeklappt gemessen, sonst
pendelt eine knappe Liste). Angedockt steht nur die Leiste mit der Linie der Zeile darunter;
ungescrollt ist der Kopf unveraendert. Gemessen 390x844: Vorrat-Port 723 → 787px, erste
Zeile y 121 → 57; Rezepte ebenso, sobald die Liste die Reserve hat. **Seit R17 Schritt 5
falten auch Mahlzeiten und Einkauf** (Critique 2026-10-07, A1 P2: 121px Kopf in jedem
Scrollstand, der Vorrat daneben 56): die Erkennung fragt nicht mehr, was im Center-Slot
steht. Die Leiste nennt den Ort; Woche und Liste kommen oben wieder wie die Suche, und wer
gerade die Woche blaettert, behaelt die Zeile (Fokus). Gemessen 390x844: Port 723 → 787px in
beiden. Die Schnelleingabe des Einkaufs liegt unter der Zeile im Listenbereich - der FAB
oeffnet sie auch gefaltet (y 57, Fokus im Feld). Am Desktop (ab 1024px) faltet nichts: dort
traegt die Zeile Suchfeld und angedockte Primaer-Pille.
Gefaltet wird ueber Rand und Verschiebung, nicht ueber die Hoehe: der negative Rand
(`--fold-row-h`, ohne Linie) zieht die Liste hoch, dieselbe Strecke schiebt die Zeile hinter
die Leiste, wo die Seite sie abschneidet. Beides gleitet in Safari (eine Hoehe nach `auto`
braeuchte `interpolate-size`), der Inhalt blendet; reduzierte Bewegung faltet ohne
Bewegung. Die Zeile bleibt offen, solange sie Fokus, einen Suchbegriff oder ein offenes Menue
traegt - wer per Tab hineinkommt, bekommt sie zurueck. Die Werkzeuge erreicht man angedockt
ueber den Rueckweg nach oben, wie die Suche der gedeckelten Koepfe (Kontakte); in der Leiste
selbst ist fuer sie kein Platz (390px, de: 65-87px frei, zwei 48px-Ziele passen nicht, ohne
die Zaehler wieder zu Punkten zu machen).

**Sub-Tabs + Zeitraum: der Zeitraum steht in der Titelzeile (Budget, R16 2026-10-05).** Ein
Modul, dessen Zeile 2 schon die Sub-Tabs traegt und dessen Tab einen Zeitraum blaettert, fuehrt
den Stepper am ENDE von Zeile 1 (`page-toolbar--period-inline`, layout.css): der Titel gibt nach
(Basis 0, Ellipse), der Stepper nie. Bis R16 war das die benannte Ausnahme mit drei Kopfzeilen
(Budget 162px), und auf vier von sieben Reitern trug die mittlere nur eine Bildunterschrift.
Gemessen 390px: Budget 162 -> 117px auf JEDEM Reiter (die Notiz der Reiter ohne Zeitraum steht
am selben Zeilenende, hoechstens zweizeilig), erste Buchung y 342 -> 297. Drei Dinge machen den
Platz: das Monatslabel zeigt mobil die Kurzform („Okt. 2026", `data-short`) in fester Breite
(96px - die Pfeile stehen beim Blaettern still); der Ruecksprung „Aktuell" reserviert keinen
Platz und nimmt ihn auch nicht vom Titel: er liegt durchsichtig UEBER dem Monatslabel, zwischen
den Pfeilen (R16 Schritt 2b - zuerst stand er per `order` links vom Stepper, und der Titel
verliess solange das Bild). Ein Tipp aufs Label springt zum laufenden Monat, der Knopf behaelt
Namen und Platz in der Tab-Folge, und das Label steht im Modulton, solange ein anderer Monat
offen ist (kein Pfeil bewegt sich, #1200 gilt weiter). Eingeklappt bleibt
der Titel stehen und faellt nur auf den Inline-Schnitt: er teilt die Zeile, sein Verschwinden
sparte keine Hoehe. Der Kopf aendert seine Hoehe damit in keinem Zustand.
Die Haushaltshilfe-Berichte (170px) bleiben in der Dreizeilen-Form, gemessen und begruendet
(R16 Schritt 2b): „Haushaltshilfe" braucht im Large Title rund 236px, der Stepper 192px - in
358px passt beides nicht, und ein auf „Haush…" gekuerzter Titel waere der teurere Tausch. Der
Stepper selbst ist der geteilte Baustein (utils/period-stepper.js). Ein drittes Element (Werkzeugzeile, Chipreihe) wandert weiter ins Menue oder
in den Port. `test:budget-ui` haelt Klasse, nachgebende Titelbasis und den Center-Slot ohne
eigene Zeile.

**Verwaltung steht mobil nicht vor dem Inhalt (R16, 2026-10-05).** Der Kopf war nur die
halbe Rechnung: in vier Flaechen stand unter ihm eine eigene Bedienflaeche, die den Inhalt
unter den Falz schob. Vier Antworten, je eine Bauart, gemessen bei 390x844:
- **Wahl, die man selten aendert, ist EINE aufklappbare Zeile.** Aufteilung: die Gruppenwahl
  nennt die aktive Gruppe und klappt Suche, „+", Aktiv/Archiviert und die Liste auf; der
  Gruppenkopf darunter wiederholt den Namen nicht und ist nur noch seine Aktionszeile.
  Erste Ausgabe y 975 -> 499. Ohne aktive Gruppe steht die Liste offen.
- **Kennzahlen sind mobil die Kurzzeile** (`metricGlanceHtml`, `.budget-glance*`, seit R16
  in panel.css statt budget.css - der Baustein laedt jetzt in jedem Modul). Inventar erste
  Kategorie y 292 -> 186, Haushaltshilfe erste Besuchszeile y 475 -> 418. Eine Kennzahl mit
  dem Wert 0 entfaellt in der Zeile und mobil auch aufgeklappt (`metric-card--empty`); ein
  aktiver Kachel-Filter (Inventar „Braucht Aufmerksamkeit") haelt die Zeile aufgeklappt.
- **Filter und Zeitraum eines Reiters sind hoechstens zwei Zeilen.** Schichtplan/Uebersicht
  seit R22 (D6) EINE Werkzeugzeile: Zeitraum (der Reset liegt mobil auf dem Wert), Woche/Tag
  und die Personen als ein Knopf mit den Gesichtern der Gewaehlten (`renderAvatarStack`), der
  das Personenblatt des Kalenders oeffnet (`openFilterSheet`) - bis R21 Ansicht und Chipreihe
  in Zeile 1, der Stepper in Zeile 2. Auswertung: Person und Zeitraum nebeneinander ohne
  Kartenflaeche, die Aktionen darunter (257 -> 104px). Feld-Labels, die dabei weichen,
  bleiben im Baum (geclippt), nie `display: none`.
- **EIN Wochenraster: Schichtplan auf dem Raster des Kalenders (R22, D6; Critique a3 P2).**
  Tageskopf („MO 19" nebeneinander, mittig, heute im Akzentkreis), 24-Stunden-Achse in
  `--cal-hour-height`, Stundenlinien, Jetzt-Linie und der Scroll zur laufenden Stunde
  (`alignedHourScroll`, morgens ab 07:00 bzw. ab der ersten frueheren Schicht) kommen aus EINEM
  Baustein: `utils/time-grid.js` + `styles/time-grid.css` (per `@import` in calendar.css und
  schedule.css, `PAGE_STYLE_IMPORTS` im Router). Die verdichtete Stundenskala des Schichtplans
  (nur belegte Stunden) ist entfallen. Die Uebersicht scrollt mit der SEITE: der Kopf dockt wie
  in jedem Modul auf seine 65px-Leiste, Werkzeugzeile und Tageskoepfe kleben darunter
  (`.schedule-overview__dock`, Klebekante = Unterkante des angedockten Kopfs,
  `syncOverviewDock()`); waagerecht rollt nur das Raster, die Kopfzeile folgt. Je Tag eine
  Spur je Person (Mindestbreite `--schedule-lane-min`), Kopf der Spur ohne den geteilten
  Nachnamen; Eintraege ohne Uhrzeit stehen in der Ganztagszone unter dem Tageskopf. Gemessen
  390px: Raster ab y 315 -> 198, Inhalt 53 -> 77 %. Guard `test:schedule` (R22 D6),
  `test:calendar`. **Der Titel einer Schicht steht an der SICHTBAREN Oberkante ihres Blocks**
  wie im Kalender, aber gerechnet statt `sticky` (der waagerechte Scroller ist in beiden Achsen
  Scroll-Container): `pinOverviewTitles()` setzt `--title-shift` bis an die Klebekante, nie
  tiefer, als der Block Platz hat (R22-F; Titel y -24 -> 200 bei Kante 198, mobil;
  `test:schedule` "R22-F"). **Eine Blocksprache mit dem Kalender** (R23): der Block auf der
  Achse traegt das Rezept von `.week-event` - Vollton-Kante `--cal-event-edge` in der
  Schichtfarbe, Tinte 35 %, Titel halbfett; den Punkt tragen nur Eintraege ohne Stunde
  (Ganztagszone, Feiertag), wie die Schicht-Chips des Kalenders. **Tage rasten an der Achse
  ein** (`scroll-snap`, Polster = Achsenbreite), und am Telefon ist ein Tag so breit, dass
  ganze Tage ins Bild passen (drei bei einer Person, sonst einer; vorher 2,8 und der erste
  halb unter der Achse). Neben der Seitenleiste ebenso **ganze Tage**: so viele, wie das
  Mindestmass (7rem je Spur) erlaubt, gemessen am Abschnitt (`container-type`, `cqi`) - bei
  1024px sechs Tage zu 113px statt sieben zu 112px mit einem 4px-Streifen des ersten neben der
  Achse (R23 S11b). **Ein Reiterwechsel haelt den Kopf**: der neue Reiter beginnt unter
  der angedockten Leiste, die Uebersicht wieder auf der laufenden Stunde; `update()` meldet
  `'own-scroll'`, und der Router setzt den Stand bei der Soft-Navigation nicht noch einmal auf 0
  (vorher zwei Spruenge 0,035/0,038 beim Wechsel, und die Rueckkehr stand auf 00:00). Traegt
  ein Reiter die Hoehe nicht (Planung mobil), bekommt er seit R23 S10 genau den fehlenden
  Nachlauf (`--schedule-tail` an `.schedule-body`, gemessen an der Lead-Zone) - der Kopf bleibt
  angedockt (vorher klappte er auf und zog die Reiter 35px weg, 0,029 + 0,032).
  **Der FAB nennt den Plan** (R23 D14): „+ Schichtplan" in Planung UND Uebersicht (derselbe
  Dialog; vorher „Eintrag" und auf der Uebersicht kein Anlegeweg), nur die Auswertung bleibt
  ohne. Freie Tage sind dort kein Balken unter den Schichtarten, sondern stehen in der Notiz der
  Kennzahl („Schichten · Freie Tage: 9").
- **Schichtplan: der Plan zuerst (R17, E1).** "Vergleich" ist erster Reiter und Startreiter,
  die eigene Person vorgewaehlt; ohne Schichtart oder Plan traegt er den Leerzustand, der das
  Fehlende anlegt, statt Personenwahl und Stepper ueber einem leeren Raster. "Heute" ist EINE
  Zeile aus Marken (`.schedule-today`, 132 -> 48px mobil), keine Karte mit Listenzeilen.
  Schichtart und Plan sind `.list-row` mit "Bearbeiten"/"Loeschen" wie Ausnahmen und
  Zusatzschichten; Bearbeiten oeffnet den Dialog des Anlegens mit EINEM "Speichern" (Plan samt
  Zyklustagen) - kein `<details>` mit Formular in der Flaeche.
- **Kacheln werden mobil kompakte Karten.** Praemien: 358x218 -> rund 130px (Zeichen und Text
  nebeneinander, Preis und Aktion darunter). Ein Abschnittstitel, der den Reiter wiederholt,
  steht mobil nur im Baum.
**Variante: die Reiter sind die Titelzeile (R19, Critique 2026-10-16 P2).** Schichtplan,
Belohnungen und Haushaltshilfe trugen unter 1024px den Large Title ueber ihrer Reiterleiste:
121/121/129px bei 390px, 118-130px bei 834px. `page-toolbar--tabs-title` stellt die Leiste in
die Titelzeile, wie iOS ein Segment als Titel der Navigationsleiste fuehrt - zwischen 768 und
1023px: Large Title und Reiter nebeneinander (Titel gibt nach, Leiste scrollt mit Fade),
gemessen 69px (834). UNTER 768px NENNT DER KOPF DEN ORT (R21, D7; Critique a2 P2): bis dahin
wich dort der Titel samt Siegel aus dem Bild, und "Besuche | Arbeiten | Berichte" sagte nicht,
dass man in der Haushaltshilfe steht - die Kapsel markierte "Mehr". Dort gilt jetzt der Kopf
aller Module mit Reitern (Budget): Siegel und Name, die Reiter als Bar-Zeile darunter, beim
Scrollen wandert die Titelzeile aus dem Bild und die Reiter kleben (121/121/121px ruhend statt
65px - der Preis des Ortsnamens). ANGEDOCKT BLEIBT DER ORT IN DER REITER-ZEILE (R21 S7, Leitlinie
"mobil mehr Platz fuer Inhalt"): der Kopf ist dann so hoch wie die Leiste (65px; die Haushaltshilfe
trug bis dahin 73px, ihre Leiste die feste Kuechenhoehe), vorn steht der Inline-Titel (hoechstens
45 %, Ellipse), die Leiste nimmt den Rest und scrollt mit Fade, der gewaehlte Reiter bleibt im
Bild; die Reiter gleiten per FLIP an ihre neue Stelle (`wireCollapsingHeader`, `--dock-tabs`).
Am Desktop bleibt die Bar-Zeile eine eigene Zeile. Guard: `test:mobile-chrome`, `test:ux-utils`.
Der erste Reiter des Schichtplans heisst seit R21 "Uebersicht" wie in Budget und Gesundheit
(vorher "Vergleich") und fehlt, solange es keine Schichtart gibt - kein leerer Reiter vorn.
Ein Abschnittstitel, der den aktiven Reiter wiederholt ("Schichtarten" unter "Schichtarten"),
steht nur im Baum (`test:schedule`).
Was hier NICHT umgezogen ist und warum, steht in der Messmatrix der Umsetzung: Vorrat (die
Kuechen-Leiste hat keine Titelzeile, die Werkzeugzeile faltet beim Scrollen), Rezepte
(ebenso), Gesundheit-Startseite, Einstellungsblaetter, Budget/Statistik.

**Variante: Zeitraum-Kopf (Kalender).** (R17 Z1, 2026-09-28, A1 P2-3/P3-7.) Wo der Titel
ein navigierbarer Zeitraum ist - heute nur im Kalender -, stehen mobil die Werkzeuge in
Zeile 1: Large Title, dahinter trailing Filter, Lupe und EIN „..." (dort die Ansichtswahl
als `menuitemradio`, das Segment ist unter 640px ausgeblendet). Zeile 2 gehoert allein
dem Zeitraum-Stepper (zurueck, Wert, vor, dahinter „Heute"). Begruendung: Apples Kalender
stellt seine Werkzeuge ebenso neben den Zeitraum-Titel, und kein Modul hat einen so
geringen Inhaltsanteil zu verteilen - das Raster braucht jede Zeile, eine dritte kostete
48px, und neben dem Stepper blieben dem mobilen Wochenlabel („26.09. - 28.09.2026",
155px) nur 134px. Innen gilt die Kopfregel unveraendert: Filter, Lupe und „..." tragen
EINE Form, die Kopf-Icon-Form `.btn--secondary.btn--icon` (48px Ziel), und der Filter ist
der geteilte `filterButtonHtml` mit der Zahl als Badge und im Namen („2 Filter aktiv").
Die Variante ist markiert, nicht geraten: der Kopf traegt `page-toolbar--period-title`,
und nur unter dieser Klasse loest calendar.css die Bar-Zeile auf (`display: contents`).
`test:mobile-chrome` findet jede Regel, die eine Bar- oder Werkzeugzeile eines Kopfs
aufloest, und laesst sie nur mit der Klasse durch; die Klasse selbst nur in den Modulen,
die dieser Absatz nennt. Ein zweites Modul mit Zeitraum-Titel kommt hier dazu, nicht in
eine Ausnahmekarte.
**Angedockt nennt er den Ort (R22, D20):** eingeklappt verlaesst der Titel das Bild; ueber dem
Zeitraum steht dann „Kalender" als Caption in derselben 65px-Zeile (`.cal-toolbar__place`,
aria-hidden - das <h1> bleibt der Seitentitel), zwei Zeilen per Umbruch, nicht per
`flex-direction` (die Richtung des Kopfs gehoert der Shell). Der Stepper behaelt beim Andocken
48px (vorher 48 -> 24px). Zwischen 640 und 1023px loest sich der Stepper auf und die Pfeile
bleiben; dort ordnet der Zeitraum-Slot ein Raster - Caption in der Spalte des Labels darueber,
Pfeile und „Heute" ueber beide Zeilen, die Zeile bleibt 48px (R22 S10). Eingeklappt FALTEN
(weglassen) darf nur der Telefonkopf, ab 640px wird nur geordnet. Guards `test:calendar`
"R22 D20", `test:mobile-chrome` "R17".
**Der Kopf steht vor den Daten (R21):** render() baut ihn im synchronen Teil, bis zum ersten
Laden `inert` - kam die Zeitraum-Zeile mit den Daten, rutschte die Flaeche 52px (CLS 0,057
mobil, 0,026 laptop -> 0). **Der Ansichtsknopf ist so breit wie sein laengstes Wort (R21):** alle
vier Woerter liegen unsichtbar in einer Rasterzelle unter dem sichtbaren, sonst sprang der
Weiter-Pfeil zwischen „Tag" und „Agenda" 26px (Guard `test:calendar` "R21").
**Das Zeitraum-Label wird nie gekappt (R21 S7, D9):** passt der Text nicht in seine feste Box,
nimmt es die kuerzere Fassung desselben Zeitraums - eine Spanne im laufenden Jahr ohne Jahr
(„21.10. - 23.10."), ein Tag mit kurzem Wochentag; ein anderes Jahr bleibt stehen
(`fitPeriodLabel`). Gemessen vorher: mobil uk 24px, el/it 13, ru 11; Desktop en 20px - danach 0.
**Ab 1024px eine Zeile, notfalls kompakt (R21 S7, D9):** passt die volle Zeile nicht (1280:
153px zu wenig), steht sie kompakt (`cal-toolbar--compact`, `syncToolbarFit`): die Suche in
der Icon-Form der Shell, die mit Fokus oder Begriff aufgeht und dann den Platz der
Ansichtswahl nimmt; „Kalender verwalten" nur im Filterblatt. 1280: 113 -> 69px. Erst wenn
auch das nicht passt (uk bei 1280), bricht die Bar-Zeile um. Im Monat zeigt die Seitenleiste
keinen Mini-Monat - die Ansicht ist der Monat (`miniMonthWanted`).
**Das Menue zeigt die aktive Ansicht (R17, E11).** Der Ausloeser traegt statt „..." die Glyphe
der offenen Ansicht (dieselbe wie ihr Menue-Eintrag: Monat `calendar-days`, Woche
`calendar-range`, Tag `calendar-1`, Agenda `list`) und nennt sie im Namen („Ansicht: Woche");
`syncViewMenu()` zieht beides beim Wechsel nach. Vorher sagte der mobile Kopf nirgends, welche
Ansicht offen ist - das Segment, das es am Desktop sagt, ist unter 640px ausgeblendet.
**Eingeklappt ist der Zeitraum-Kopf EINE Zeile (R17 Schritt 5, Critique 2026-10-07 A1 P1).**
Gemessen 390x844 mass er ausgeklappt wie eingeklappt 117px: Titel und Siegel gingen, aber die
Werkzeuge hielten Zeile 1 offen (drei Icons neben 206px Leerraum) und der Stepper blieb in
Zeile 2. Eingeklappt rueckt der Stepper jetzt in Zeile 1 vor das Menue: 117 -> 65px, Port
719 -> 771px, in Woche, Tag und Agenda; der Telefon-Monat faltet ihn seit R21 (D9) mit seinem
Raster, wenn die Tagesliste es auf die Woche einklappt (117 -> 65px, Liste ab y 144 statt 196). Suche,
Filter und "Heute" falten dafuer ins Ansichtsmenue - als Eintraege mit demselben Namen, die das
Original klicken (`data-collapse-fold` am Werkzeug, `data-collapse-fold-menu` am Menue; die
Stellvertreter baut `wireCollapsingHeader` beim Oeffnen, wie bei der Faltung der scrollenden
Koepfe; schliesst das Menue, geht der Fokus vom Stellvertreter an den Ausloeser, BEVOR der
Eintrag aus dem DOM faellt - die Popover-API gibt ihn sonst an niemanden zurueck). Das Label bekommt so 194px ("07.10. - 06.11.2026" braucht 172; mit allen dreien
blieben 68). Ein AKTIVER Filter faltet nicht, seine Zahl bleibt (Regel 3), dann kuerzt das
Label; "Heute" ist nur ein Eintrag, wenn ein anderer Zeitraum offen ist. Nur unter 640px -
darueber gibt es kein Menue, in das gefaltet wird. Die Reserve-Regel des Kopfs rechnet seither
mit der ausgeklappten Hoehe (sonst pendelt eine Liste, deren Reserve zwischen Schwelle und
Schwelle + 52px liegt). **Seit R20 (6c, Ulas 2026-10-17) falten statt Filter und Wort die PFEILE:**
der kompakte Kopf ist der von Apple Kalender - Zeitraum, Ansicht MIT Wort ("Agenda"), Lupe,
Filter. Blaettern geht per Wisch, Taste (j/k) und ueber die beiden Stellvertreter "Vorherige/
Naechste ..." oben im Ansichtsmenue; "Heute" deckt ohne Pfeile das ganze Label (`inset-inline: 0`),
ein Tipp darauf springt zurueck, im laufenden Zeitraum ist er inert. Der Menueknopf halbiert
eingeklappt seinen Innenrand: 390px traegt "17.10. - 16.11.2026" ungekuerzt (162/162px), 320px
kuerzt mit Ellipse ohne Ueberlappung. **Eingeklappt ist auch der Budgetkopf EINE Zeile (R19, Critique 2026-10-16 P2):** bis R19
blieb er in jedem Zustand bei 117px, weil der Titel eingeklappt stehen blieb und Zeile 1 mit dem
Stepper offen hielt. Jetzt verlaesst der Titel samt Siegel das Bild (nicht den Baum), die
Reiter ruecken in die Zeile des Zeitraums und scrollen dort, der Stepper bleibt am Zeilenende
stehen (er wandert nur hoch). Reiter ohne Zeitraum geben ihre Notiz ab, die Wippe „Mein Budget
/ Haushalt" weicht ebenso; oben kommt beides wieder. Gemessen 390px 117 -> 65px, 834px 129 ->
73px. Das ist keine gefaltete Reiterleiste im Menue (Werkzeugzeilen-Regel), die Leiste bleibt
sichtbar. `test:mobile-chrome` haelt die Kalender-Regeln.

Pruefebene: **Struktur** (`test:mobile-chrome` - Kapsel ausser Fluss, `--nav-tail` im
Nachlauf, keine klebende Chipreihe, kein `sticky; bottom: 0`, Icon-Form im Wrapper, die
Bausteine an einer Stelle) plus **Messung** je Modul (Kopfhoehe ausgeklappt, erste Zeile y,
letzte Zeile ueber der Kapsel; Sonde in der Rezeptkarte der Umsetzung). Desktop bleibt
unberuehrt: dort gibt es keine Kapsel, `--nav-tail` ist 0.

### Die Nachlauf-Regel (2026-08-12)

**Die Reserve des FAB ist ein NACHLAUF am Inhaltsende, keine Verkuerzung des Scrollports.**
`padding-block-end: var(--fab-safe-zone)` an `.app-content`, nicht `margin-block-end`. Der
Scrollport reicht damit bis an die Fensterkante, und die 96px liegen als leerer Raum HINTER
der letzten Zeile - erreichbar nur, wenn man ganz nach unten scrollt, und genau dort gebraucht.

**Die eigentliche Korrektur ist die Invariante, nicht der Mechanismus.** Die Marge sicherte zu:
„bei KEINEM Scrollstand liegt etwas Bedienbares unter dem Knopf". Notwendig ist: **nichts ist
UNERREICHBAR.** Beide gemessenen Schadensfaelle lagen am SCROLL-ENDE - mobil
`.pantry-stepper__btn` und `.contact-more-menu` (2026-08-10), am Desktop acht Ziele mit
verdecktem Zentrum, darunter `contact-more-menu__trigger` mit 64 % und Budgets
`row-action--danger` mit 45 % (2026-08-12). Am Scroll-Ende laesst sich nichts mehr wegschieben;
mitten im Scrollen dagegen jederzeit, in beide Richtungen.

**Der Anlass war das Dashboard-Raster.** Am Desktop kostete die Marge 96px ueber die volle
Breite: gemessen 12 % eines 900er-Fensters und 25 % zusaetzlicher Scrollweg auf dem
Standard-Board. Sichtbar wurde sie als Widget-Reihe, die 96px ueber der Fensterkante mitten in
den Karten abbrach, mit totem Band darunter. Ein Raster, dessen Zusage buendige, gleich hohe
Karten sind, kann seine Unterkante nicht an eine unsichtbare Reserve abgeben.

**Dass der Knopf im Scrollen auf Inhalt liegt, ist kein Mangel, sondern was ein schwebender
Knopf IST.** Und es ist sicher, weil die Gefahrenrichtung stimmt: er liegt oben, ein Fehlgriff
landet also auf „Anlegen" und nicht auf „Loeschen" darunter. Laege es umgekehrt, waere die
strenge Invariante ihren Preis wert.

**Der Nachlauf gehoert an das, was WIRKLICH scrollt** (2026-08-20). Hier stand: „Ein Nachlauf
trifft beide Scrollport-Architekturen richtig, auf zwei Wegen - geprueft, nicht angenommen …
gemessen ueber 15 Routen: kein totes Band." Der erste Weg stimmt: wo `.app-content` selbst
scrollt (Dashboard, Aufgaben, Belohnungen, Geburtstage, Dokumente …), reitet der Nachlauf am
Inhaltsende und der Scrollport bleibt fensterhoch. Der zweite war falsch, und die Formulierung
sagt auch, warum er durchging: „verkuerzt er dessen Bezugshoehe - dort verhaelt sich alles exakt
wie mit der Marge, also **ohne Regress**". Gemessen wurde gegen den Vorzustand, nicht gegen die
Zusage. Kein Regress heisst nicht richtig: bei den acht Modul-Roots mit `height: 100%` verkuerzt
das Padding an `.app-content` den echten Scrollport bei jedem Scrollstand und laesst darunter
einen Streifen stehen, der nichts traegt und nicht mitscrollt.

Sichtbar wurde es erst, als die Sammelpille dazukam: sie bekam 2026-08-13 die richtige Fassung
(Nachlauf am echten Scrollport), die alte an `.app-content` blieb daneben stehen, und die drei
Module mit Pille zahlten sie sieben Tage lang doppelt - 76px am Zeiger, 80px am Finger, in jedem
der drei gleich. Die Regel lautet deshalb: **der Nachlauf haengt an der Rolle `.page-scrollport`,
die jede Seite mit eigenem Scrollport selbst vergibt** - nie an der Box, die den Scrollport
enthaelt. Die drei fixierten Flaechen sind Summanden (`--fab-tail`, `--bulk-pill-tail`,
`--install-prompt-tail`), eine Regel legt die Summe an. Ein Scrollport mit eigenem Bodenpolster
meldet es als `--scrollport-pad` an, statt `padding-bottom` zu schreiben, sonst ersetzt der
Nachlauf es.

**Wo `.app-content` selbst scrollt, reitet der Nachlauf auf einem Platzhalter**
(`.page-transition::after`, 2026-09-23). Das Polster allein griff dort nur zur Haelfte: ein
Scrollport haengt sein Endpolster an das Ende seines Fluss-Kindes, und `.page-transition` ist
fensterhoch (`height: 100%`). Was darueber hinauslief, bekam keins - gemessen 24px statt 96px
unter dem letzten Widget der Uebersicht, der FAB lag am Seitenende auf der rechten Spalte. Das
Polster bleibt und haelt die Box um den Nachlauf kuerzer; die Scrollhoehe ist damit
max(Fenster, Inhaltsende + Nachlauf). Pruefebene: `test:dashboard-surface-browser`.

**Ein Toast ist kein Summand** (2026-09-24). Der Erinnerungs-Toast liegt 30 Sekunden ueber
dem unteren Rand - am Desktop ueber der letzten Monatszeile, mobil ueber der Tagesliste - und
laesst sich verwerfen. Als vierter Summand haette er den Nachlauf nur fuer diese Zeit
verlaengert: in scrollenden Flaechen harmlos, im Desktop-Monat aber, der den Scrollport ohne
Ueberlauf fuellt, haette er jede Zeile um ~16px gestaucht und beim Verschwinden wieder
gestreckt - ein Raster, das mit jeder Meldung springt. Erreichbar bleibt darunter alles: die
Zelle zeigt ueber dem Toast Ziffer und ersten Eintrag und oeffnet den Tag, und der Toast
geht. Die Invariante der Regel gilt fuer DAUERHAFTE Flaechen (FAB, Pille, Banner).

**Mobil aendert die Regel am FAB nichts, und das ist per Konstruktion so:** unter 1024px ist
`--fab-safe-zone` 0, weil der Knopf in der Nav-Kapsel sitzt. Ein Nachlauf von 0 ist dasselbe
wie eine Marge von 0. Seit der Kopfregel mobil (2026-09-26) traegt dort aber die Kapsel
selbst einen Summanden (`--nav-tail`): sie liegt ueber dem Inhalt statt unter ihm.

Pruefebene: **Dokument** (`Sonde 18 - am Scroll-Ende liegt nichts Bedienbares unter dem FAB`,
test-document-guards.js, beide Geraetewelten) plus **Struktur** (`der FAB weicht der Zeile,
statt eine Gasse zu reservieren`, test-frontend-audit.js), der die Marge ausdruecklich
verbietet. Seit 2026-08-20 dazu drei Guards ueber die Rolle: `wer seinen eigenen Scrollport
mitbringt, markiert ihn` (Kriterium ist die Bauart des Modul-Roots, keine Modulliste),
`die Scrollport-Rolle sitzt an einer Box mit Ueberlauf` (Gegenrichtung) und `die Pillenzone
steht nur am markierten Scrollport` (Abwesenheit an `.app-content`). Der letzte ist die Lehre
aus dem Vorgaenger, den er ersetzt: der forderte die falsche Bauart ausdruecklich ein und
zementierte damit den Defekt, den er absichern sollte. Sonde 18 ist gegen ihren Anlassfall gegengeprueft: ohne Reserve meldet sie
`contact-more-menu__trigger` (64 %) und `row-action--danger` (45 %). **Und sie hatte selbst
zwei blinde Fassungen** - die erste suchte den Scroller an seinem Namen statt an seinem
Overflow und meldete Zwischenstaende als Ende, die zweite zaehlte Ziele mit, die der Scrollport
WEGSCHNEIDET (`getBoundingClientRect` meldet die Layout-Position, nicht die Sichtbarkeit; mobil
waren das drei Kuechen-Ziele bei y 721-838 hinter einem Scrollport, der bei 735,9 endet).
Dieselbe Falle 2, die Sonde 4 an ihren Kanten beschreibt.

**Der Scrollport traegt einen NAMEN (R22, D2):** `data-scroll-port="<name>"` steht an jedem
Element mit der Rolle `.page-scrollport` (bei `className =`-Aufbau als `dataset.scrollPort`
in der Zeile danach). Der Router merkt sich beim Verlassen jeden benannten Port mit Stand > 0
je History-Eintrag (`scrollKey` in `history.state`) und setzt ihn nach dem Render des
Rueckwegs wieder - ein Port, dessen Zeilen spaeter kommen, wird bis 1,5 s nachgezogen, nie
gegen eine Eingabe. Eine neue Navigation startet oben. Ein Name je Bereich, nicht je Reiter
(`budget` fuer alle Budget-Panels); ein geparkter Nachbar (`inert`) zaehlt nicht.
Pruefebene: **Struktur** (`every page scroll port names itself for the restore`,
test-mobile-scroll-layout.js) plus Einheit (Schluessel je Eintrag, Nachziehen).

**Gemessen wird sie an der Sichtflaeche, nicht am Scrollport** - der Unterschied ist bei
dieser Regel entscheidend und war zweimal die Quelle einer falschen Messung. Die App hat zwei
Scrollport-Architekturen: in Kueche, Budget, Kalender, Notizen und Kontakten liegt der Kopf
AUSSERHALB des scrollenden Containers. Eine Sonde, die ab Scrollport-Oberkante misst, sieht
sein Chrome dort gar nicht und meldet 0 %, obwohl 252px Leisten darueber stehen.

**In der Kueche ist der Kopf zweiteilig, und das ist kein Sonderfall.** Nach der
Leisten-Regel IST die Kuechen-Leiste die Kopf-Navigation (siehe „Modulkopf"); der Modulkopf
darunter benennt den Platz IN dem Raum. Zusammen sind sie DER Kopf, und die Regel zaehlt sie
als einen. Das ist die einzige ehrliche Lesart: die Leiste traegt bei 375px schon 347-375px
Inhalt in 375px Breite, ein Zusammenfuehren zu einer physischen Zeile braeuchte horizontales
Scrollen - und dann waere der Modulkopf weg, sobald jemand die Tabs bedient.

Damit sind die Rezepte konform (Kopf plus die eine Bedienzeile ihres Center-Slots) und der
Essensplan traegt seinen dokumentierten zweizeiligen Kopf. Uebrig blieben genau zwei Routen
mit einer Zeile zu viel, und beide sind lokal geloest, ohne die Kuechen-Architektur
anzufassen:

- **Einkauf:** Listenwahl und Listenkopf teilen sich eine Zeile (Grid, zwei Spalten). Der
  Listenname im Kopf ist ohnehin eine Dublette der aktiven Tab links - ausblenden schied
  trotzdem aus, weil er dort kein Text ist, sondern das Ziel zum Umbenennen. Er schrumpft
  stattdessen als Erster. Gemessen 640x400: Scrollport 27 → 84px, die erste Artikelzeile ist
  wieder da.
- **Vorrat:** Modulkopf und Filterzeile teilen sich eine Zeile. Das ist ein direkter Gewinn
  aus der Kopf-Regel - die Suche steht in der kompakten Hoehe als Icon da statt als
  291px-Feld, und den Platz nimmt die Filterzeile. Gemessen: Chrome 173 → 105px, Scrollport
  106 → 158px, zwei volle Artikelzeilen.

**Was aus der Lead-Zone mitgeht, entscheidet der Inhalt des Slots** - dieselbe Abgrenzung
wie zwischen Bereich und Gruppe: eine SUCHE verschwindet (Apples
`hidesSearchBarWhenScrolling`), solange sie weder Fokus noch Wert hat; der ZEITRAUM einer
Seite (Monat im Budget, Datum im Kalender) bleibt stehen und beantwortet weiter „wo bin ich".

Die MECHANIK richtet sich nach der Scrollport-Architektur des Moduls, die Regel nicht:
- **Die Seite scrollt** (Aufgaben, Geburtstage, Dokumente, Belohnungen, Haushaltshilfe): der
  Kopf liegt im Scrollport und dockt ueber ein negatives `top` an (`--page-toolbar-lead` =
  Hoehe der Zeilen ueber der letzten). Seine Hoehe aendert sich NIE - ein Klassen-Umschalter
  wuerde hier ein Element im Fluss verkuerzen, den Scroll-Offset verschieben und den Kopf um
  seine eigene Schwelle pendeln lassen.
- **Eine innere Liste scrollt** (Budget, Kalender, Notizen, Kontakte): der Modul-Root ist
  `overflow: hidden`, der Kopf liegt ausserhalb und bewegt sich nie. Dort klappt die
  Titelzeile wirklich ein - gefahrlos, weil der Hoehenwechsel nur den inneren Port
  verlaengert, ohne dessen Offset anzufassen.

**Im Kalender klappt die Titelzeile GANZ ein, nicht nur auf den Inline-Schnitt**
(Critique 2026-09-24, P1). Der Inline-Titel sollte neben den Zeitraum ruecken - der fuellt
mobil aber die ganze Zeile, also blieb der Titel auf seiner eigenen, und der Kollaps sparte
5-14px. Eingeklappt verlaesst der Titel jetzt das Bild (geclippt wie `.sr-only`, das `<h1>`
bleibt die Seitenueberschrift), sein Siegel geht mit; Zeitraum und Bar-Zeile bleiben. Den
Modulnamen fuehrt dann die Tab-Leiste unten. Das gilt nur, wo ein Zeitraum den Kopf weiter
verankert - Notizen und Kontakte haetten danach nichts mehr, was sagt, wo man ist. Gemessen
bei 375px: Kopf 230 -> 166px ausgeklappt, 121px eingeklappt; Inhalt Monat 56 -> 65 %, Woche
46 -> 62 % (6,5 -> 9 Stunden), Tag 54 -> 67 %, Agenda 62 -> 69 %. **Ein Ansichtswechsel ist
ein neuer Scrollport, kein Scroll:** der Kalender laesst die Shell danach an seinem neuen Port
neu urteilen, sonst erbte der Monat, der gar nicht scrollen kann, den eingeklappten Kopf der
Woche. Und **einklappen kann nur ein vermessener Kopf** - ein Scroll-Ereignis vor der ersten
Messung (die Woche springt beim ersten Render auf „jetzt") markierte den Kopf sonst ohne
Lead-Zone als eingeklappt, und `update()` misst einen eingeklappten Kopf nie wieder.
**Einklappen darf nur ein Scroll, den der Nutzer fuehrt** (Re-Kritik 2026-09-25, P2): die
Shell merkt sich das Ziel der letzten Geste (Rad, Beruehrung, Zeiger, Taste) und wertet einen
Scroll nur, wenn diese Geste im bewegten Port lag. Der Sprung der Woche auf „jetzt" und das
Neu-Urteilen nach dem Ansichtswechsel sind keine Geste - gewertet wie eine, klappten sie beim
Tipp auf „Woche" oder „Tag" den Titel ein und zogen die Tabs mobil von y 105 auf y 60, unter
den Finger. Ein Scroll ohne Geste darf nur die Reserve-Regel: traegt der neue Port den
eingeklappten Kopf nicht (Monat), klappt er auf; sonst haelt der Kopf seinen Zustand ueber den
Wechsel.

Der Kopf bleibt in ZEILENRICHTUNG - kein Modul setzt eine eigene Flex-Richtung auf einer
Kopf-Klasse. Eine Tab-Leiste im Kopf ist eine eigene, horizontal scrollende Zeile UNTER dem
Large Title; die Shell erkennt sie an `[role="tablist"]`, nicht an einem Klassennamen (die
vier heissen `.housekeeping-tabs`, `.rewards-tabs`, `.cal-toolbar__views`, `.budget-tabs` -
eine Regel ueber diese Liste fehlte beim fuenften). Wer dort steht, sagt die Leisten-Regel
oben.

Verdrahtet wird EINMAL, von der Shell (`wireCollapsingHeader` in `utils/ux.js`, aufgerufen
vom Router): der Kopf ist die eine Komponente, die alle Module teilen, und ein Opt-in, das
jedes Modul selbst setzen muesste, fehlt beim naechsten. Die Titelgroesse gehoert der
Canonical-Page-Head-Rolle in typography.css, der Umbruch layout.css.

### Der getoente Scrollbalken (#970, #1039)

**Ein Scroller, dessen Balken das Betriebssystem zeichnet, gehoert sichtbar dem System und
nicht der App.** Auf Plattformen mit klassischem, Platz nehmendem Balken stand neben jeder
getoenten Liste ein voller System-Balken, unter Windows/Firefox/Chromium dauerhaft sichtbar
statt nur beim Scrollen. Die Antwort ist kein Verstecken, sondern ein eigener, duenner
Balken aus Tokens.

**Die Rezeptur sind vier Deklarationen, und sie steht zweimal da, weil zwei Engines sie
verschieden lesen.** Firefox nimmt `scrollbar-width: thin` plus `scrollbar-color` direkt am
Scroller; WebKit und Chromium brauchen die Pseudo-Element-Fassung: `::-webkit-scrollbar` mit
`width: 10px`, ein transparenter Track, und der Daumen als
`color-mix(in srgb, var(--module-accent) var(--tint-hint), transparent)` mit
`border-radius: var(--radius-full)`. Der Daumen traegt eine **3px transparente Border mit
`background-clip: padding-box`** - so wirkt er schmaler als die 10px-Spur, ohne dass die
Treffflaeche schrumpft. `--tint-hint` ist nicht frei gewaehlt: tokens.css fuehrt die Stufe
ausdruecklich fuer „Kante, Linie, Scrollbar-Daumen".

**Der Balken ist nicht der Fade, und keiner ersetzt den anderen.** Der Fade am
Scrollport-Ende beantwortet „ist da noch mehr?" (Audit F-01, sonst waren Budget, Gesundheit
und Einstellungen auf 800er-Laptops unauffindbar). Der Balken beantwortet „wo bin ich, und
womit ziehe ich?". Ein Anriss ist eine Andeutung, kein Griff. Am Telefon ist der Unterschied
gleichgueltig, weil dort die Geste zieht; am Desktop mit Maus IST der Balken das
Bedienelement. Die Regel haengt deshalb an der BREITE, nicht am Vorkommen einer Zeile:
`scrollbar-width: none` bleibt am Telefon richtig.

**Der Anlass war eine Ruecknahme, keine Neuerung** (#970). Bis v2.64.1 stand
`scrollbar-width: none` samt verstecktem `::-webkit-scrollbar` am Seitenmenue ausgerechnet
in `@media (min-width: 1024px)` - also genau dort, wo mit der Maus gezogen wird und keine
Wischgeste einspringt, und der Fade darunter galt als Ersatz. Er beantwortete eine andere
Frage.

**Vier Traeger, vier angepasste Kopien - es gibt keine gemeinsame Basis, und das ist
benannt, nicht uebersehen** (hier stand bis R21 "Drei"; die Notizen-Reihe kam 2026-09-13 dazu):

- `.budget-list` samt `.budget-loans__list` und den beiden Tab-Panels (budget.css) ist das
  Vorbild und stand vor der Regel da; seit #904 scrollt das Budget-Panel selbst und gehoerte
  deshalb in dieselbe Gruppe.
- `.list-scroller` (list-row.css, seit #1039) ist der geteilte Scroller von Einkauf, Vorrat
  und Rezepten - eine Regel, drei Module. budget.css blieb dabei unveraendert.
- `.nav-sidebar__items` (layout.css, seit #970) mischt gegen `--color-border` statt gegen
  `--module-accent`: **die Seitenleiste gehoert keinem Modul und darf nicht die Farbe des
  gerade offenen annehmen.**
- `.notes-filters` (notes.css) ist die einzige WAAGERECHTE Kopie: die Kategorie-Reihe der
  Notizen laeuft mit vielen Kategorien ueber, und am Desktop wischt niemand. Sie holt den
  Balken gegen das `display: none` des Chip-Reihen-Bausteins zurueck (`display: block`,
  `height: 10px`), sonst dieselbe Rezeptur ohne Hover.

**Zwei Abweichungen teilen die Kopien nicht, und beide stehen hier ungeglaettet.** Erstens
gibt es den Hover-Zustand nur an `.list-scroller`
(`calc(var(--tint-hint) + var(--tint-state))`, gerechnet auf zwei bestehenden Stufen statt
auf einer neuen Zahl): eine reine `--tint-hint`-Kante traegt laut tokens.css nie allein, ein
Zustand auf ihr braucht denselben Bezug. Budget, Seitenleiste und Notizen haben ihn nicht.
Der Hover setzt nur `background-color`: bis R21 stand dort die Kurzschreibweise `background`,
die `background-clip` auf `border-box` zuruecksetzt, und der Daumen wuchs unter Hover von 4
auf die vollen 10px der Spur (gemessen auf dem `::-webkit-scrollbar`-Pfad; Guard
`test:shopping`, "Der Listen-Scroller traegt einen duennen, getoenten Scrollbalken").
Zweitens nennt `scrollbar-color` in Budget, Listen-Scroller und Notizen den `--module-accent`
in VOLLER Saettigung, waehrend der WebKit-Daumen daneben auf `--tint-hint` mischt. Das steht
in allen drei Dateien zeichengleich, ist damit die Rezeptur und kein Ausrutscher; die
Seitenleiste ist die einzige, die beide Seiten gleich toent. **Welche Seite ein Browser
zeichnet, entscheiden die Standard-Eigenschaften:** seit Chromium 121 und Safari 26.2 gewinnen
`scrollbar-width`/`scrollbar-color`, und die `::-webkit-scrollbar`-Regeln greifen nicht mehr
(gemessen in Chrome 155: mit `scrollbar-width: thin` entfaellt die 10px-Spur ganz). Den
`--tint-hint`-Daumen samt Hover sieht heute nur noch Safari vor 26.2. Hier stand bis R21
"Firefox zeichnet den Daumen dort also kraeftiger als Chromium" - das galt vor Chromium 121.

**Offen, und bewusst nicht behauptet:** die `mask-image`-Fades liegen auf DEMSELBEN Element
wie der Balken, und eine Maske erfasst die Elementbox samt Scrollbalken. Auf Plattformen mit
klassischem, Platz nehmendem Balken verblasst sein unterstes Stueck deshalb im Fade-Bereich.
Die BEDIENUNG bleibt, weil eine Maske die Deckkraft aendert und nicht das Hit-Testing -
nachmessen liess es sich hier nicht, macOS zeichnet Overlay-Balken, die dabei gar nicht
erscheinen. Wenn es stoert, ist der Weg nicht `scrollbar-width: none` zurueck, sondern der
Fade von der Maske auf ein ueberlagertes Gradient-Pseudoelement; dann liegt er ueber dem
Inhalt statt ueber der Box.

Pruefebene: **Struktur**, zwei Guards. `Seitenmenue: der Scrollbalken ist am Desktop
sichtbar (#970)` (test-frontend-audit.js) misst den Zustand IN der Desktop-Query statt das
Vorkommen einer Zeichenfolge in der Datei, verbietet dort `scrollbar-width: none` und das
versteckte Pseudo-Element und besteht auf `scrollbar-color` aus Tokens statt als Literal.
`Der Listen-Scroller traegt einen duennen, getoenten Scrollbalken (#1039)`
(test-shopping.js) haelt beide Engine-Fassungen und den Hover fest. Das Vorbild in
budget.css hat keinen - der Guard haengt an der Kopie, nicht am Original.

### Das Vorschaubild (#1059)

**Ein fremdes Bild bekommt einen festen Rahmen, nie die Hoehe seiner Zeile.** Mealie und Tandoor
liefern ihre Rezeptbilder in jedem Seitenverhaeltnis, ein selbst hochgeladenes Bild ebenso.
Jedes Vorschaubild steht deshalb in einem quadratischen Rahmen fester Groesse mit
`overflow: hidden`, und das Bild darin traegt `width: 100%`, `height: 100%` und
`object-fit: cover`: **schneiden statt verzerren.** Eine bebilderte Karte ist damit genauso
hoch wie ihre textige Nachbarin (laut Kommentar in meals.css gemessen 121px zu 121px an
derselben Karte).

**Die Rezeptur ist ein JS-Baustein und drei Rahmen.** `public/utils/recipe-thumb.js` baut den
Rahmen fuer alle drei Anzeigeflaechen (Rezeptliste, Essensplaner, Kachel „Mahlzeiten heute"),
damit der Ruecksturz auf den Platzhalter nicht an drei Orten einzeln richtig sein muss. Der
Baustein waehlt die Quelle - **das eigene Bild gewinnt** (`/recipes/:id/image` vor
`/recipes/:id/provider-thumbnail`), weil sich, wer eines hochlaedt, fuer genau dieses
entschieden hat - und setzt `alt=""` (der Titel daneben sagt dasselbe) und `loading="lazy"`.
Auf denselben Platzhalter (`utensils`-Symbol, Klasse `<rahmen>--placeholder`) faellt er in
zwei Faellen: kein Bild laut letztem Sync, dann **ohne Request**, weil Mealie jeden 404 als
Fehlerzeile in sein eigenes Log schreibt (mealie-recipes/mealie#4804); oder Bild seit dem Sync
verschwunden, dann ueber den `error`-Listener. Die String-Form `recipeThumbHtml()` fuer Planer
und Kachel braucht nach dem Einfuegen `wireRecipeThumbs(root)`: ein `onerror` im Markup waere
ein Inline-Handler und scheitert an der CSP. Ein Bild, das beim Verdrahten schon fertig und
ohne Abmessungen ist (`complete` mit `naturalWidth === 0`), gilt dabei als Fehlerfall, sonst
waere ein schneller 404 vorbei, bevor jemand zuhoert.

**Die Groesse folgt der Flaeche, und nur der Ausloeser ist rund:**

- `.recipe-row__thumb` (recipes.css) ist das Vorbild aus der Mealie-Anbindung: `--target-md`
  (40px), `--radius-sm`, Platzhalter auf `--color-surface-2` mit Tertiaertinte. Die
  Rezeptliste zeigt den Rahmen, wo die Zeile ein Bild hat oder das Rezept gespiegelt ist (dort
  notfalls als Platzhalter); ein eigenes Rezept ohne Bild bleibt eine Textzeile
  (`rowShowsThumb()`, R16). Hier stand bis R21 "IMMER" - die Frage ist "hat es ein Bild", nicht
  "woher kommt es".
- `.meal-card__thumb` (meals.css): `--target-sm` (32px), `--radius-sm`, derselbe Platzhalter.
  **Nur die bebilderte Karte wird zum Grid** (`.meal-card__open--with-thumb`), jede andere
  bleibt die Spalten-Flex, die sie war. Die erste Fassung gab jeder Karte einen Bildslot und
  bezahlte das mit 32px plus Abstand von einer rund 100px breiten Wochenspalte, in jeder Zelle.
  Das Ticket schliesst genau das aus: „a missing picture is a quiet gap, not a layout change".
- `.meal-slot__thumb` (dashboard.css): `--icon-lg` (20px), `--radius-xs`, **nur mit Bild** und
  IN der Titelzeile, so hoch wie sie. Der Slot traegt oben rechts schon das Symbol seiner
  Mahlzeitenart; ein zweites Besteck-Symbol daneben waere Unruhe ohne Aussage.
- Der Bild-Editor im Rezeptformular (`.recipe-image-preview`, recipes.css) ist dieselbe Bauart
  wie `.inventory-photo-editor` (inventory.css): 84px, `--radius-full`, Grund aus
  `--module-accent` auf `--tint-surface`, die Vorschau ist selbst der Ausloeser, daneben zwei
  Knoepfe. **Rund ist hier keine Geschmacksfrage:** der Editor ist ein quadratischer KNOPF,
  und die Ausnahmen der Kreis-Regel sind Zustandsschalter, Rasterzellen und Felder mit eigener
  Kante. Die drei Vorschau-Rahmen darueber loesen nichts aus, fallen deshalb nicht unter die
  Regel und tragen das abgerundete Quadrat.

Planer und Kachel rufen den Baustein nur, wenn eines der beiden Bild-Flags gesetzt ist; der
Platzhalter aus dem ersten Fall erscheint dort also nie, nur der Ruecksturz aus dem zweiten.

**Zwei Abweichungen stehen hier ungeglaettet.** Erstens teilen die beiden Editoren Form und
Groesse, aber nicht die Tinte ihres Platzhalter-Symbols: `.inventory-photo-preview__fallback`
mischt den Modulton auf `--tint-ink`, `.recipe-image-preview` steht auf
`--color-text-tertiary`. Zweitens liegt der Platzhalter von Zeile und Karte auf
`--color-surface-2`, der der Editoren auf der Modultoenung: das eine ist ein ruhiger
Leerplatz in einer Liste, das andere ein Bedienelement, das zum Hochladen einlaedt.

**Offen, aus dem Code gelesen und nicht im Browser nachgestellt:** die Kachel hat keinen
Platzhalter-Stil. Faellt ihr Bild im zweiten Fall weg, haengt `wireRecipeThumbs()` trotzdem
`meal-slot__thumb--placeholder` samt `utensils`-Symbol an, und dashboard.css kennt die Klasse
nicht. Dann stuende neben dem Symbol der Mahlzeitenart ein zweites Besteck-Symbol, also genau
die Doppelung, die der Kommentar in `renderTodayMeals()` vermeiden will. Ob der Rahmen dort im
Fehlerfall wegfallen oder einen eigenen Platzhalter bekommen soll, ist nicht entschieden.

Pruefebene: **keine Struktur-Guards fuer den Rahmen selbst.** Kein Test haelt
`object-fit: cover`, die festen Abmessungen oder den Ruecksturz in `recipe-thumb.js` fest.
Gesichert sind drei Randbedingungen: `ein quadratischer Icon-Knopf ist ein Kreis`
(test-frontend-audit.js) erzwingt die runde Editor-Form; `eine geaenderte Modifier-Klasse
verhindert das Wiederfinden nicht` (test-modal-utils.js) haelt fest, dass
`meal-card__open--with-thumb` Darstellung ist und keine Identitaet, denn wer beim Bearbeiten
ein Bild hinzufuegt, aendert die Klasse des Knopfes, zu dem der Fokus zurueck muss; und
test-recipes-routes.js prueft, dass die Rezeptliste nur das Flag `has_own_image` traegt, nie
die Bilddaten.

### Wischbedienung (Signature Component)
Listenzeilen tragen ihre Aktionen auf Touch in zwei Wischrichtungen; auf Zeigergeraeten
bleiben die sichtbaren Knoepfe, denn dort gibt es keine Geste. Die Panels hinter der Karte
trennen **zwei Achsen**: die SEITE ist die Kante, an der das Panel liegt (`--leading` am
Zeilenanfang, `--trailing` am Zeilenende), die ROLLE traegt allein die Bedeutung (`--done`
success, `--edit` accent, `--delete` danger). Eine Klasse, die beides packt, ist beim
zweiten Nutzer verbraucht.

**Die Kante ist logisch, nicht links und rechts.** In `ar` und `fa` setzt die App
`dir=rtl`; die Panels stehen auf `inset-inline-start/-end` und den vier logischen
Eckradien, und `wireSwipeRows` leitet aus derselben Schreibrichtung ab, welche
Fingerbewegung welche Kante aufdeckt. Der Nudge-Hinweis und der permanente Chevron sind
Richtungsangaben und spiegeln mit.

**Dieselbe Geste bedeutet in jeder Liste dasselbe.** Der Zeilenanfang traegt die primaere
positive Aktion, das Zeilenende das Destruktive oder Sekundaere:

| Liste | Zeilenanfang (in LTR: Wisch nach rechts) | Zeilenende (in LTR: Wisch nach links) |
|---|---|---|
| Aufgaben | erledigt umschalten (`--done`), fliegt hinaus | Detailansicht (`--edit`), federt zurueck |
| Einkauf | abhaken (`--done`), fliegt hinaus | loeschen (`--delete`), federt zurueck, widerrufbar |
| Geburtstage | bearbeiten (`--edit`), federt zurueck | loeschen (`--delete`), federt zurueck, widerrufbar |
| Haushaltshilfe (Aufgaben) | erledigen (`--done`), federt zurueck - die Zeile bleibt, nur ihre Frist setzt zurueck | loeschen (`--delete`), federt zurueck, widerrufbar |
| Abonnements | Zahlung buchen (`--done`), federt zurueck, fragt nach | loeschen (`--delete`), federt zurueck, fragt nach |
| Vorrat | - (keine Geste: am Zeilenanfang gibt es nichts Positives zu erledigen, Bearbeiten ist der Zeilenkoerper) | loeschen (`--delete`), federt zurueck, widerrufbar |

Die Abo-Zeile ist die einzige, deren `--done` nicht abhakt, sondern BUCHT: sie schiebt das
Faelligkeitsdatum und legt einen Budget-Eintrag an. Ein zweiter Wisch nimmt das nicht
zurueck, anders als bei einer Aufgabe an derselben Kante - deshalb fragt sie nach, und
deshalb fliegt sie nicht hinaus. Bearbeiten liegt dort auf keiner Wischrichtung, sondern auf
dem Zeilenkoerper (`.list-row__main--interactive`), und der ist ein echter `<button>`: ein
blosser Tap-Handler haette den Bearbeiten-Knopf aus der Zeile genommen, ohne einen
Tastaturweg an seine Stelle zu setzen.

`--edit` steht in Aufgaben am Zeilenende und in Geburtstagen am Anfang, und das ist kein
Widerspruch: die Regel ordnet einen RANG zu, keine Rolle. Wo eine positive Aktion in der
Liste steht, ist Bearbeiten die sekundaere; wo keine steht, ist es die primaere. Fest
liegen die beiden Enden der Skala - `--delete` steht nie am Zeilenanfang, `--done` nie am
Ende. Genau das misst der Guard - je Kante, die eine Zeile belegt: eine einseitige Zeile
(Vorrat) deckt an der leeren Kante nichts auf, und auch das misst Sonde 5.

**Eine Geste, die loescht, hat einen Rueckweg**, nie ein direktes `api.delete`. Der Einkauf
war die eine Stelle, die sofort und endgueltig loeschte - wer die Geste in zwei Listen als
harmlos gelernt hat, verlor in der dritten Daten ohne Rueckweg. Welcher der beiden Rueckwege
richtig ist, entscheidet die Reichweite der Tat: der Undo-Toast, wo sie sich in einem Satz
zuruecknehmen laesst, die Bestaetigung, wo sie ueber ihr Modul hinaus wirkt (siehe „Die
Wischsemantik-Regel" bei Cards / Containers).

Die Karte fliegt nur dann hinaus, wenn die Zeile die Liste tatsaechlich verlaesst; ist die
Aktion widerrufbar oder oeffnet sie nur einen Dialog, federt die Karte zurueck. Eine
hinausgeflogene Karte behauptet, die Sache sei erledigt, waehrend das Undo-Fenster noch
offen steht. Die Geste selbst - Schwellwert 80px, Daempfung darueber, Scroll-Erkennung,
Haptik am Schwellwert, Ausnahme fuer den Sortiergriff, der einmalige Hinweis nach dem
Seitentausch - liegt geteilt in `utils/swipe-row.js`.

**Der Zeitraum-Wisch ist dieselbe Geste auf einer Flaeche statt einer Zeile** (Critique
2026-09-24, P1). Waagerecht ueber Monat, Woche oder Tag blaettert einen Zeitraum weiter
(`utils/period-swipe.js`); die Agenda ist eine fortlaufende Liste ohne Nachbarn und bleibt
aussen vor. Schwelle, Richtungssperre und Haptik sind die der Wischzeilen, damit der Weg
derselbe ist, den die Hand schon kennt. Drei Grenzen, alle gemessen statt vermutet: **der
Rand gehoert dem System** (ein Kontakt in den aeusseren 20px ist die Zurueck-Geste von iOS
und Android und wird gar nicht angenommen), **senkrecht gewinnt** (wer zuerst senkrecht zieht,
scrollt das Zeitraster, und die Geste ist fuer diesen Kontakt vorbei), und **ein offener
Dialog nimmt sie der Flaeche darunter** - geprueft am Modal-Overlay, NICHT an
`[aria-modal]`: das „Mehr"-Blatt und das Such-Overlay tragen es auch geschlossen und
schalteten die Geste beim Bau still ab. Die Zeit laeuft in Leserichtung, in `ar`/`fa`
gespiegelt. Der Inhalt folgt dem Finger und der neue Zeitraum gleitet von der Seite herein,
aus der er geholt wurde; unter reduzierter Bewegung beides nicht, die Geste bleibt. Die
Pfeilknoepfe bleiben der Weg fuer Maus und Tastatur. Die Flaeche traegt
`touch-action: pan-y pinch-zoom` - ohne `pinch-zoom` verwirft Chromium das Aufziehen.

**Im Kalender blaettert der Wisch echt um (R21, D2).** Vorher zog der Finger die ganze Ansicht
samt Stundenachse ~110px gedaempft mit, daneben stand leere Flaeche (29 % der Breite), und der
neue Zeitraum kam erst nach Loslassen und Laden mit einer Blende. Jetzt liegen die Daten beider
Nachbarn nach jedem Zeichnen bereit (nur an Touch-Geraeten, ein Schreibvorgang verwirft sie),
der Leerlauf baut daraus ihr Bild mit demselben Renderer, und die Geste stellt es neben die
Ansicht (`neighbor` an `wirePeriodSwipe`): der Inhalt folgt dem Finger 1:1, der Nachbar zieht
mit, Stundenachse, Ganztags-Beschriftung und Wochentagskopf STEHEN (`axis`, gegen den Zug
gehalten, eine Ebene ueber dem Raster). In der Woche ist ein Blatt so breit wie die Spalten
neben der Achse (`span`) - die Spalten des Nachbarn schliessen nahtlos an; Tag (eine Karte) und
Monat blaettern um ihre ganze Breite. Losgelassen rastet er ab 80px oder mit Schwung ein
(Flick: ab 0,35 px/ms und 24px, `periodSwipeCommit`), sonst federt alles zurueck; erst wenn der
Nachbar steht, baut `navigate()` den Zeitraum wirklich auf - an derselben Stelle, mit derselben
Uhrzeit auf derselben Hoehe (`stepFromSwipe`). Ohne vorgeladene Daten bleibt es beim alten
Weg. Reduzierte Bewegung: kein Zug, der neue Zeitraum blendet ein (`period-swipe-in--fade`).
Gemessen 390/834px, 1x und 4x: Achse 112 -> 0px Drift, Abdeckung 71 -> 100 %, CLS 0. Guard
`test:calendar` "R21 D2". **Das Vorladen fragt beide Nachbarn in EINEM Abruf je Quelle (R21
S8):** fehlen beide, reicht die Spanne vom vorigen bis zum naechsten Zeitraum, und jeder
Nachbar behaelt seine eigenen Grenzen (`buildDayIndex()` klammert, was ueber den Rand reicht);
fehlt einer, wird nur er gefragt. Vorher je Nachbar vier Quellen - nach jedem Zeichnen bis zu
acht Anfragen fuer zwei Zeitraeume, jetzt hoechstens vier. Guard `test:calendar` "R21 S8".
**Der Nachbar wird im Leerlauf geparkt, nicht unter dem Finger eingesetzt (R21 S8):** das
vorgebaute Bild steht schon im Traeger, mit der Box des Panels, unsichtbar
(`.period-swipe-ghost--parked`) und nach dem Ausrichten ruhend (`--rest`,
`content-visibility: hidden` - das Layout bleibt, Stilrunden der Seite rechnen es nicht mit);
die Geste nimmt beide Klassen ab, haengt es nicht neu ein und schreibt seine Box nicht neu
(`parkPeriodGhost`, `placeGhostBox`). Der Monat vermisst seine Zellen dabei nur einmal je Breite.
Guard `test:calendar` "R21 S8".

**Geprueft auf zwei Ebenen, weil jede etwas anderes sehen kann.** Ebene 3 (statisch, in
`test-frontend-audit.js`) folgt von jeder Wischrichtung mit `--delete` der Kante zu der
Funktion, die sie ruft, und verlangt dort den Rueckweg. Ebene 4 (`test:document-guards`,
Sonde 5) faehrt die Geste im gerenderten Dokument in `de` und `ar` und misst, welches
Panel sie aufdeckt - **ob eine Liste ueberhaupt verdrahtet ist, sieht nur diese Ebene.**
Der Einkauf verdrahtete seine Gesten nur im Nachlade-Pfad und antwortete beim ersten
Oeffnen der Seite auf gar nichts; im Quelltext stand alles richtig da.

**Anlegen im Zeitraster nach Apple-Muster** (Re-Critique 2026-09-28, R17). In Woche und Tag
legt ein Einzelklick oder Tipp auf leere Zeit NICHTS an - er schliesst nur Offenes; daneben
klicken ist der natuerlichste Weg aus einer Leseansicht und oeffnete vorher „Neuer Termin".
Angelegt wird mit der Maus per **Doppelklick**, mit Finger oder Stift per **langem Druck**
(500ms, Abbruch bei mehr als 10px Bewegung, Raster-Scroll oder `pointercancel`); welche Geste
gilt, entscheidet der Zeiger des Kontakts, nicht eine Media Query. Waehrend des Drucks steht an
der Druckstelle ein **Platzhalter der kommenden Startzeit** (`.cal-press-ghost`): er blendet
ueber die Haltezeit ein, wird an der Schwelle deckend und faellt mit jedem Abbruch weg - iOS
vibriert fuer Webseiten nicht, ohne ihn sah man bis zum Loslassen nichts. Nur Deckkraft, unter
reduzierter Bewegung ohne Einblenden. Der sichtbare Weg bleibt „+ Termin" und das Kuerzel n;
der Leerzustand des Tages nennt die Geste des Zeigers. Die Monatsansicht legt per Einzelklick
nie an und blieb, wie sie war. Umsetzung: `wireTimeGridCreate` in `pages/calendar.js`.
**Der Hover toent das Band, nicht die Spalte (R22, D20):** mit echtem Zeiger steht unter dem
Zeiger die Stunde, die ein Doppelklick anlegt (`.cal-hover-slot`, dieselbe Zeit wie der
Platzhalter); vorher faerbte `:hover` die ganze Tagesspalte (548 x 960px). Guard `test:calendar`.

**Schichten im Kalender (R22, D5; Critique a3 P1).** Woche/Tag: der Ganztags-Chip heisst
„<Kuerzel> · <Initialen>" („F · LJ") VOR der Uhrzeit; die Uhrzeit steht ganz oder gar nicht
(der Chip ist eine Zeile hoch und bricht um, was nicht daneben passt - gemessen an der
Breite, nicht an einer Zahl). Der volle Text ist der Name des Chips und steht im Detail beim
Tipp. Monat: keine Terminzeile mehr, sondern bis zu drei Striche in der Schichtfarbe am
Tageskopf und „+N" (`.month-day__shifts`, absolut in der Zelle; den Bezugsrahmen gibt die Klasse
`month-day--shifts` aus dem Renderer, kein `:has()` - ohne `:has()` stuenden alle Striche an
derselben Ecke des Rasters; am Telefon zwischen Ziffer und Punkten); „+N
weitere" zaehlt nur Termine, Aufgaben und Feiertage, der Name der Zelle zaehlt die Schichten
weiter. Die Agenda und die Tagesliste nennen Schicht UND Person ausgeschrieben. Das Kuerzel
doppelt den Namen nie: `shiftTypeLabel()` (utils/shift-label.js) laesst es weg, wo der Name
damit beginnt („24-Stunden-Schicht", „1. Stunde"). Guard `test:calendar`, `test:schedule`.
**Seit R23 (D14) sind Zeitbloecke die Vorgabe:** eine Schicht mit Uhrzeit steht in Woche und
Tag als Block im Raster wie ein Termin; der Ganztags-Chip bleibt fuer Schichten ohne Uhrzeit
und fuer 24-Stunden-Schichten, und als bewusste Wahl („Schichten als Zeitbloecke anzeigen"
aus). Die Striche im Monat haben einen Schluessel: das Filterblatt nennt unter „Darstellung"
jede Schichtart des geladenen Zeitraums einmal (derselbe Strich, Kuerzel, Name;
`scheduleLegendHtml`, nur was die Personenwahl zeigt).

### Das Markensiegel (Signature Component)
Yuvomis eigene Ausweisform und die Antwort auf "Health hat die Ringe, was hat Yuvomi?" - die
eine Stelle, an der die Marke etwas kann, was keine Systemapp braucht: **Yuvomi ist der
einzige Ort, an dem siebzehn Apps in einem Raum leben, und das Siegel weist jedes Ding als
"aus Raum X" aus.**

**Material:** eine kreisrunde VOLLTON-Scheibe mit Modul-Icon und der Sheen-Lichtkante der
Bildmarke (drei transluzente Kreise) - Flaeche im Familienton, Tinte `--color-ink-on-vivid`,
Sheen als Gradient aus `--glass-sheen`. **KEIN backdrop-filter**: die Glas-ist-Chrome-Regel
bleibt unberuehrt, und der Sheen-Stop kippt unter `prefers-reduced-transparency` und
`prefers-contrast` mit seinem Token auf die flache Scheibe.

**Die Herkunfts-Regel (das Einsatzgesetz).** Ein Siegel zeigt die Herkunft eines Objekts, und
Herkunft zeigt man nur, wo sie nicht selbstverstaendlich ist. Daraus folgen genau zwei Faelle:

- **Jede MISCHSTELLE** - eine Liste, deren Zeilen aus verschiedenen Modulen stammen
  (moduluebergreifende Suche, "Heute wichtig", Dashboard-Widget-Koepfe, "Mehr"-Liste,
  Benachrichtigungsdarstellung) - gibt jedem Objekt sein Siegel und BENENNT dabei die fremde
  Herkunft, inline oder ueber die Klasse ihres Traegers. Die Herkunft nennt der TON der
  Scheibe; das ZEICHEN darf das des Objekts sein, wo das Objekt eines traegt (der Mahlzeittyp,
  das am Termin gewaehlte Icon in "Heute wichtig" und an der Wand). Ohne eigenes Zeichen steht
  das des Moduls, und eine Zeile, die fuer mehrere Objekte spricht, behaelt es immer.
- **Im eigenen Modul** steht es genau einmal, als Absender im Kopf (siehe Modulkopf). Es
  benennt dort nichts, sondern ERBT den Ton des Raumes, in dem es steht - genau daran ist die
  Rolle zu erkennen.

Damit ist die Dosierung Gesetz statt Geschmack. Vorher trug die Gesundheit vierzehn
Vorkommen und die Dokumente keines. Anti-Ziel ist die Siegel-Inflation: in den Listen eines
Moduls spraeche ein wiederholtes Siegel den Modul-Tint ueber die etablierten Elemente.
**Pruefebene: Signatur** (`wer ein Markensiegel baut, benennt eine Herkunft oder ist der
Kopf`, `test:frontend-audit`) - der Guard findet jede Bau-Stelle ueber ihre Bauart und
verlangt von jeder eine der beiden Rollen; die Kopfrolle darf nur die Shell bauen.

**Die Navigation traegt KEINES, und das ist dieselbe Regel, nicht ihre Ausnahme.** In der
Tab-Bar und der Sidebar steht das Label unter dem Icon - die Herkunft ist dort
selbstverstaendlich, ein Siegel waere Dekor. Was sie traegt, ist der Ton auf dem nackten
Zeichen (Legende, siehe „Colors") - das ist kein halbes Siegel, sondern der andere Kanal:
keine Scheibe, keine Flaeche, nur die Farbe des Zeichens. Die Leiste ist ausserdem der einzige Ort, der
nicht "woher" beantwortet, sondern "wo bin ich"; getoente Scheiben auf allen Eintraegen nehmen
der aktiven Pille ihre Alleinstellung, und Suche, Hilfe und Abmelden bekaemen Scheiben ohne
Modul. Das Mehr-Sheet trug Siegel, weil es ein VERZEICHNIS von Raeumen ist - der
Unterschied bleibt nur lesbar, solange die Leiste keine traegt. (Entscheidung von Ulas am
2026-08-10, am gerenderten Material getroffen.)

**Seit R23 (D9, Ulas 2026-10-24): in LISTEN die Mulde, der Vollton den Absendern.** Dasselbe
Modulzeichen stand in vier Formen: Mulde in der Seitenleiste, Vollton-Scheibe im Mehr-Blatt,
nacktes Zeichen in der Kapsel, Verlaufskachel (`.vivid-mark`, Zeichen randlos) in Einstellungen
> Aktive Module und > Navigation (Critique S-P2-2, G6-4). Eine Liste beantwortet "wohin", nicht
"woher": Mehr-Blatt (`.more-item__icon-well`, 32px, Zeichen 20px) und die Modulzeilen der
Einstellungen (`.settings-module-row__icon`, 44px, Zeichen 24px) tragen jetzt die Geste der
Seitenleiste - 8 % Tinte im Grund (`--tint-wash`), `--glass-inset-input`, Zeichen im Modulton.
Der Vollton bleibt, wo ein Absender spricht: Seitenkopf-Siegel, Widget-Kopf, Palette/Suche,
Erinnerungs-Toast. Die Kapsel bleibt beim nackten Zeichen.

**Drei Groessenrollen, dazu die Wand:** Listenzeile `--sm` (24px, Icon 16px), die Basis (32px,
`--target-sm`, Icon 16px - die Zeilen von "Heute wichtig" und das Mehr-Blatt) und Modulkopf
(32/24px je nach Rang seines Titels, siehe Modulkopf). Die Wand fuehrt ihr Siegel auf
Distanz in 48px (`.wall-row__seal`, `--target-lg`, Icon `--icon-xl`). Hier stand bis R21 "Zwei
Groessenrollen" ohne die Basis.

**Das Siegel hat EIN Gesicht, und es ist der Vollton** (2026-08-17). Hier standen zwei: eine
16-%-Toenung fuer den Regelfall und `--vivid` fuer die eine umgekehrte Flaeche (den Toast),
dazu ein Parameter `--seal-base` fuer den Grund, gegen den die Toenung mischt. Der Vollton hat
die Regel gewonnen, statt neben ihr zu bestehen - erst der Widget-Kopf, dann die Kachelreihe,
und beide mit derselben Begruendung.

**Was die Toenung erledigt hat, ist eine Messung, und zwar zweimal dieselbe.** Im Dark zerlegt
`dark-chroma.mjs` die Beimischung in Helligkeits- und Buntheitsanteil: sie hellt fast nur auf
(Buntheit 4-8 von 24-73 des Volltons) - eine Waschung KANN im Dark keine Farbe tragen. Im Light
war der Befund schaerfer und stand sichtbar im „Mehr"-Blatt: Notizen, Dokumente und Inventar
teilen die Familie `records`, und ihr Scheibengrund war bei 16 % **bitweise derselbe**
(#E1E4EA). Die Toenung loeschte genau den Unterschied, den sie zeigen soll. Der Vollton ist
dieselbe Sprache, die die App fuer jede vivide Flaeche schon fuehrt (Primaerknopf, FAB,
aktives Segment, Marken-Tile).

**Gemessen ueber alle neun Familientoene, Glyph gegen Scheibe, an der unguenstigsten Stelle**
(unter dem Sheen, wo 16 % Weiss den Ton aufhellen): Light 3,65-5,18:1, Dark 7,42-12,24:1 -
ueberall ueber der 3:1-Grafikschwelle. Ohne Sheen liegt Light bei 5,04-7,17:1.
**Pruefebene: Regel** (`dashboard „Heute wichtig" is one inset-grouped list`,
`test:frontend-audit`) - der Guard verbietet die Rueckkehr von `--seal-base` UND von
`--vivid`, und er liest ueber `eachRule`, damit ihn die Begruendung in den Kommentaren nicht
selbst ausloest.

**Das Ueberlappungszeichen** (Avatar ueberlappt Siegel, "wer ∩ was") ist das Familien-Zeichen
aus der Drei-Kreise-Marke. Es erscheint nur, wenn es mehr als einen moeglichen Beteiligten
gibt; im Solo-Haushalt entfaellt es still. **Nie Pflichtelement** - ein Personen-Zwang fuer
Solo-Nutzer ist ein Anti-Ziel des Briefs.

**Eine Systembenachrichtigung kann kein Siegel tragen**, und der Titel uebernimmt seine
Aufgabe: sie hat kein DOM, ihr `icon` erreicht nur einen Teil der Plattformen, und Android
maskiert ihr `badge` monochrom, womit der Familienton ohnehin verloren ginge. Der Titel
erreicht jede Plattform und stand app-weit auf "Yuvomi" - auf dem, was das System darueber
ohnehin anzeigt. Er nennt jetzt das Herkunftsmodul (Kalender, Aufgaben, Abonnements,
Medikamente), serverseitig uebersetzt ueber die Datensprache des Haushalts, clientseitig ueber
die Sprache des Nutzers. Die beiden Karten liegen beidseits der Schichtgrenze und sind an die
`entity_type` gebunden, die der Server wirklich schreibt (Guard-Ebene Signatur).

### Der Widget-Kopf: das Vollton-Siegel als Absender (Signature Component)
Seit 2026-08-17 (Widget-Kopf-Kur, Etappe 2 der Modernisierung) ist der Kopf einer
Dashboard-Karte eine TITELZEILE DIREKT AUF DER KARTENFLAECHE: davor das Markensiegel im
Vollton (Ton = Flaeche, Tinte = `--color-ink-on-vivid`), Titel in
Text-Primary, Zaehler als neutraler Badge (Well-Grund, Sekundaertext, `.widget__badge`),
„Alle" als neutraler Textlink mit Ton erst im Hover. Kein Band, keine getoente Trennlinie, keine 2px-Oberkante: der Absender einer Karte
ist GENAU EIN Element, und es traegt den Modulton zu 100 %. Die Kachelreihe
(`metric-card--tile`) fuehrt dasselbe Siegel - zwei Siegel-Gesichter auf einem Board
waeren zwei Wahrheiten.

**Hier stand `module-seal--vivid`, und die Klasse gibt es nicht mehr.** In Etappe 2 war sie
die Ausnahme neben der 16-%-Toenung; Etappe 3 desselben Tages hat den Vollton zur Regel
gemacht, er steht seither in der `.module-seal`-Basisregel, und die Variante ist mitsamt
`--seal-base` gestrichen (siehe „Das Markensiegel"). Der Kopf setzt hier also keine Klasse
mehr, er setzt nur `--seal-accent`.

**Hier stand von v2.6.0 bis 2026-08-17 das ABSENDERBAND** - ein vollbreites
`--tint-wash`-Band mit getoenter Trennlinie plus der 2px-Haarlinie an der Oberkante, drei
Farbaussagen in ~51px. Es ist an seiner eigenen Messlatte zurueckgebaut: es sollte den im
Dark unsichtbaren Haarlinien-Kanal ersetzen, aber eine WASCHUNG kann im Dark keine Farbe
tragen. Die Chroma-Zerlegung (CIEDE2000/LCh, `.impeccable/redesign-tools/dark-chroma.mjs`)
zeigt: die 8-%-Mischung hellt fast nur auf (Buntheit 4-8 gegen 24-73 des Volltons; records
VERLIERT auf der warmen Kohle sogar Buntheit). Das Band war damit im Light ein
Pastellstreifen und im Dark ein Braunschleier - „klobige eingefaerbte Zeile" (Betreiber,
Critique 2026-08-17) traf beide. Die Lehre ist allgemeiner als das Band: **wer im Dark Farbe
sagen will, sagt sie im Vollton eines kleinen Elements, nicht in der Beimischung einer
grossen Flaeche.**

**Den Ton setzt die Karte, nicht die Seite.** Jede `.widget--*`-Klasse legt `--widget-accent`
auf ihren Modulton (fuer den Link-Hover, die Aktivierung im Leerzustand und Hervorhebungen im
Inhalt wie den naechsten Abfalltermin; der Zaehler-Badge ist neutral); das Siegel selbst bekommt
`--seal-accent` aus dem Slug seiner Route. Der Fallback ist die Stimme. Ein
`--active-module-accent` an dieser Stelle loeste auf dem Dashboard den Akzent der UEBERSICHT
auf, also bekaemen alle Widgets dieselbe Farbe - ausgerechnet in dem Raster, in dem siebzehn
Module nebeneinanderstehen.

**`--seal-base` braucht der Kopf nicht mehr - und niemand sonst.** Die Mischgrund-Falle
(„Der Traeger entscheidet, welches Gesicht es zeigt") gehoerte zum getoenten Gesicht auf dem
Band-Grund; der Vollton kennt keine Mischung, sein Ton IST die Flaeche (AA an der
Toast-Herkunft gemessen: Glyph auf Scheibe 5,1-9,8:1 in beiden Themes). Der Parameter ist
mit ihr app-weit entfallen, ein Guard verbietet seine Rueckkehr; was den Namen weiterfuehrt,
ist `--seal-pair-ground` am Ueberlappungszeichen, und das beantwortet eine andere Frage.

**Die Badge zaehlt die Sache, und sie spricht nicht in der Ueberschrift** (2026-09-23). Sie
nennt die Gesamtzahl aus der Antwort (`notesTotal`, `birthdayTotal`, `openTaskCount`), nicht
die Laenge der gezeigten Liste - was nicht passt, steht als „+N weitere" darunter. Eine Liste
ohne Gesamtzahl (die Termine, bei fuenf geschnitten) traegt keine Badge: eine Zahl, die nur
ihre eigene Obergrenze nennt, ist keine Auskunft. Die Badge ist `aria-hidden`, dieselbe Zahl
steht als sr-only-Satz hinter der h3 - sonst hiesse die Ueberschrift „Geburtstage 5".

### Das Tagesprogramm (Signature Component)
Das eine Blatt, das die Uebersicht anfuehrt: EIN Traeger auf `--color-surface` mit
`--radius-xl` und `--shadow-lg`, Zeilen als Haarlinien, je Zeile ein Siegel fuer den Raum,
aus dem der Eintrag kommt. Kein Glas und kein `backdrop-filter` - die Glas-ist-Chrome-Regel
gilt, das Blatt ist Inhalt (Rang kommt aus Radius und Elevation, siehe „Die Rang-Regel").

**Seine Zeilen atmen mehr als eine Listenzeile** (`--space-3` statt `--space-2` vertikal): das
Blatt traegt drei bis sechs Zeilen, nicht dreissig - der gewonnene Raum kostet keinen Scroll
und ist der Unterschied zwischen „Liste" und „Programm". Die Zeilenhoehe ist auf allen
Geraeten dieselbe.

**Der Zustand spricht im Ton der Zeile, nicht in Neutralgrau.** Jede Zeile weiss ueber
`--today-card-accent` schon, aus welchem Raum sie kommt - das Siegel links zeigt es -, und ein
neutraler Hover warf diese Auskunft im Moment der Beruehrung weg. `--tint-state` (12 %) ist
die Skalenstufe fuer genau das: Zustand auf einer ungetoenten Flaeche.

**Jedes Modul, das heute etwas hat, spricht ueber EINEN Vertrag** (2026-09-23,
`public/utils/today-sheet.js`). Eine Quelle liefert Zeilen in der Form des Blatts und einen
Raum-Ton (`today-cockpit-card--<ton>`, `wall-row--<ton>`); ob sie spricht, entscheiden fuer
alle dieselben drei Riegel - Modul an, Widget-Recht, eigene Kachel NICHT sichtbar (Kein-Echo:
jede Zahl steht einmal auf dem Schirm, auch zwischen Blatt und Kennzahlreihe). **Die Coda ist
eine Entwarnung und faellt nur, wenn sie stimmt:** keine Zeile ist mehr offen und keine
verschwindet hinter „+N weitere". Eine Auskunft (Schicht, Geburtstag) haelt sie nicht auf, ein
Auftrag (Dosis, Freigabe, Tonne am Morgen, Vorrat, der heute ablaeuft) schon. **Beendetes
verlaesst das Blatt** zur Endzeit, ohne Neuladen; die Termin-Kachel behaelt es zurueckgetreten
darueber. **Ab 720px Blattbreite laufen die Zeilen in zwei Spalten** (spaltenweise, per
Container-Abfrage) - ein Programm von sechs Zeilen soll auf einem breiten Schirm nicht
halbleer eine Spalte hinunterlaufen.

**Eine Titelkante fuer alle Zeilen** (R23): die Siegelspalte ist so breit wie das Paar aus Siegel
und Avatar (`.seal-pair`), nicht `auto` - vorher standen Titel mit und ohne Avatar 12px versetzt.
**Am Telefon steht das Blatt ohne sichtbare Ueberschrift** direkt unter dem Gruss (die h2 bleibt
im Dokument, im Anpassen-Modus sichtbar), und die Wetterzeile steht unter dem Datum neben den
Kopfknoepfen statt in einer eigenen Zeile: erste Zeile bei 390x844 y 226 -> 169.

**Die Uebersicht ist ein Briefing, kein Kachel-Board** (R21, Critique 2026-10-21, D5). Das Blatt
steht vor allen Kacheln und ist ihr Inhalt; die Kacheln sind Zusatz. **Auf dem Telefon traegt das
Blatt so viele Zeilen, wie in den ersten Schirm passen** (bis zur Kapsel, mindestens zwei):
`measurePhoneProgram` misst nach dem Zeichnen im selben Task und zeichnet nur das Blatt neu, der
naechste Aufbau rechnet mit dem gemessenen Wert. Vorher ein fester Deckel von zwei Zeilen
(gemessen 390x844: 2 von 9 Punkten, darunter Familie und Budget im ersten Schirm; jetzt 8 von 9,
das Programm fuellt 77 % statt 29 % der Flaeche bis zur Kapsel). „+N weitere" ist Footnote 13.
Was unter den Zeilen bleibt, zaehlt mit (R21 S7): passt die Einkaufszeile nicht mehr ueber die
Kapsel, faltet sie mit der letzten Zeile in „+N weitere"; ein zweiter Blick nach dem Neuzeichnen
darf nur verringern (Decke je Fensterhoehe). Drehung und Fensterhoehe messen neu
(`createPhoneProgramFit`, ein Bild spaeter gebuendelt); ein Wechsel zwischen Telefon und breit
baut die Uebersicht neu.
**Geld steht ab Werk nicht auf der Uebersicht:** das Budget-Widget ist ein Opt-in
(`DEFAULT_HIDDEN_WIDGETS`), und die Kennzahlreihe fuehrt keinen Saldo - ein Kontostand ist keine
Kennzahl fuer den Morgen und gehoert nicht auf den Schirm, den jeder im Haushalt sieht. Die offene
Forderung der geteilten Ausgaben bleibt in der Reihe: sie verlangt eine Handlung. Gespeicherte
Layouts behalten ihre Sichtbarkeit (keine Migration). Guards: `test:dashboard` („R21 D5"),
`test:typography` („R21 S5": das Innenleben der Kacheln liest in den D4-Rollen).

### Das Wetter-Widget (Signature Component)

**Das Wetter ist der einzige Inhalt der App, den niemand im Haushalt eingegeben hat** - er
kommt von draussen und aendert sich von selbst. Deshalb ist es die einzige Kachel, die eine
eigene Farbe und eine eigene Bewegung traegt. Bis 2026-08-17 stand seine Glyphe in
`--module-dashboard`, also im Violett der Uebersicht: die Karte sagte damit, WO sie haengt -
eine Auskunft, die auf einer Dashboard-Karte niemand braucht, weil sie schon aus der Seite
folgt.

**SECHS LAGEN ALS TON** (tokens.css 5b): klar, Nacht, bewoelkt, Regen, Schnee, Gewitter.
Sie sind eine PARALLELE Domaenenfamilie, keine zehnte Familientonfamilie - das Vokabular
der neun Familien gehoert den Modulen, und keine Lage teilt den Wert einer von ihnen. Die
Lage wird aus dem ICON-NAMEN abgeleitet, nicht aus dem Beschreibungstext: der ist
lokalisiert und in der OWM-Fassung frei formuliert, das Icon ist beim selben Provider immer
derselbe Schluessel. Zwoelf Werte, gemessen gegen ihre drei realen Gruende je Theme,
Zielwert **4.5:1 statt 3:1** - der Ton traegt in der Verlaufszeile auch die
Hoechsttemperatur, und das ist Kleintext. Farbe ist nie alleiniger Traeger: daneben stehen
die Glyphe der Lage und der ausgeschriebene `wmo.*`-Text.

**DER LICHTHAUCH** haengt an der Glyphe, nicht an der Karte - eine Huelle um sie, weil ein
SVG keine Pseudo-Elemente hat. Zwei Stufen, zwei Rollen: der Kern toent als Objekt
(`--tint-surface`), das auslaufende Feld untergreift fremden Inhalt (`--tint-wash`). Der
erste Anlauf hing an `.weather-widget__main` und rechnete sich von dessen Inline-Ende zur
Glyphe zurueck; ab 860px Containerbreite bekommt der Kasten eine feste Basis und das Licht
lag gemessen 108px neben seiner Sonne. **Wo ein Bezug eine Rechnung braucht, ist der
Anker falsch gewaehlt.**

**VIER GANGARTEN**, und jede sagt, was sie zeigt: `rays` dreht die Sonnenstrahlen um die
stehende Scheibe (72s), `drift` laesst die Wolke ziehen, `fall` schickt Tropfen und Flocken
versetzt nach unten, `flash` laesst das LICHT doppelt aufleuchten statt die Glyphe zucken
(ein Blitz IM Zeichen liest bei 24px wie ein Darstellungsfehler). Die Gangart haengt am
Icon, NICHT am Ton: `sun` und `cloud-sun` tragen denselben Bernstein und bewegen sich
gegensaetzlich, weil bei `cloud-sun` die Wolke selbst ein `<path>` ist. Ziele sind
Kindknoten der Lucide-SVGs; trifft eine Regel nach einem Update ins Leere, steht die Glyphe
still - der schlechteste Ausgang ist kein Defekt.

**DER AUSSCHALTER IST EINE BEDINGUNG, KEINE GEGENREGEL**, und das ist die uebertragbare
Lehre dieser Runde. Der erste Anlauf folgte der Hausform
(`@media (prefers-reduced-motion: reduce) { ... animation: none }`) und hat den Regen nicht
angehalten: die Tropfenregel traegt ein `:not(:first-child)` und damit eine Klasse mehr
Spezifitaet als die Gegenregel. Die Sonne stand still, der Regen fiel weiter, und beide
standen im selben Block. Ein Spezifitaets-Wettruesten waere die zweite Falle gewesen - jede
neue Gangart braeuchte ihre eigene Gegenzeile, und die vergisst man genau einmal. Die
Bewegung steht deshalb NUR DANN im Stylesheet, wenn sie erwuenscht ist
(`prefers-reduced-motion: no-preference`). Was bleibt, bleibt: Ton, Lichthauch und
Spannenbalken sind Farbe und Form, keine Bewegung. Guard-Ebene: Signatur (jede Regel, die
eine Wetterflaeche animiert, muss unter einer Bewegungs-Bedingung stehen) - er fand
denselben Befund im Bestand, den Ladekringel des Aktualisieren-Knopfs, und der bleibt als
BENANNTE Ausnahme: eine Aktivitaetsanzeige muss auch unter reduzierter Bewegung erkennbar
sein, und die Zusicherung belegt, dass sie fluechtig ist.

**DIE SPANNE DER WOCHE** macht aus der Verlaufszeile eine Auskunft. Unter jedem Wochentag
standen zwei nackte Zahlen ohne Beziehung zueinander - welcher Tag der waermste ist, war
eine Rechenaufgabe. Der Balken ist auf die Spanne der GANZEN Vorhersage normiert: Lage sagt,
wo der Tag in der Woche liegt, Laenge, wie weit er schwankt, Farbe, wie warm es wird. Fuenf
BENANNTE Temperaturbaender statt einer stufenlosen Rampe, und der Grund ist ein Guard: eine
Interpolation haette ihren Mischwert als Zahl am Element gebraucht
(`calc(var(--x) * 100%)`), und genau diese Bauart sieht der Toenungs-Guard nicht - sie waere
die achtunddreissigste Prozentstufe gewesen, nur unsichtbar. Die Schwellen stehen in jeder
Einheit ausgeschrieben statt umgerechnet: „unter null" ist im Fahrenheit-Haushalt 32 °F und
nicht 31,999.

**DREI FLAECHEN, ZWEI GANGARTEN.** Karte, Masthead-Zeile und Wand-Modus teilen Ton und
Bewegung; die Kartenglyphe traegt Farbe allein, ihre fuenf Vorhersagezeichen bleiben
sekundaer und die Auskunft uebernimmt der Balken. Auf der WAND ist es umgekehrt: dort traegt
jeder der vier Tage seinen eigenen Ton, weil aus zwei Metern Farbe die schnellere Auskunft
ist als Form. Nachts gibt die Wand beides ab - ein bernsteinfarbenes Sonnenzeichen waere im
dunklen Flur der hellste Punkt im Raum.

**KEIN WETTER IST EIN ZUSTAND, KEIN VERSCHWINDEN** (#1584, 2026-09-30). Eine gescheiterte Abfrage
kam als leeres Datum zurueck, der Renderer lieferte dafuer nichts, und die Kachel verschwand aus
dem Raster, aus der Anpassen-Ablage und nahm die Wetterzeile im Kopf mit. Jetzt entscheidet der
GRUND: ist kein Wetter eingerichtet (`not_configured`), ist die Kachel nicht verfuegbar wie ein
abgeschaltetes Modul; ist es eingerichtet und der Anbieter scheitert, bleibt die Kachel stehen -
`.weather-widget--unavailable` mit `cloud-off`-Zeichen, „Wetter gerade nicht verfuegbar" im
`.widget__empty` und dem Aktualisieren-Knopf, und die automatische Aktualisierung laeuft weiter.
Ein unbekannter Grund zaehlt als eingerichtet: im Zweifel bleibt die Kachel.

**DIE UEBERSICHT AUF DEM TELEFON (R19, Entscheidung Ulas 2026-10-16).** Unter 768px steht die
Wetterzeile im Masthead auch dann, wenn die Karte im Raster steht - die Karte lag bei 390px erst
bei y 1438 und behaelt die Vorhersage; ab 768px schliessen sich beide aus wie bisher
(`.dashboard-overview__weather--card`). Die Familie ist unter 640px EINE Avatar-Reihe: Gesicht,
Zahl offener Aufgaben als Marke im Akzent, Vorname darunter, der naechste gemeinsame Termin als
Textzeile unter der Reihe (Karte 427 -> 166px); Name und Satz jeder Person bleiben geclippt im
Baum, die Tagesbilanz der Fusszeile entfaellt (sie steht in den Marken). Der Wand-Modus steht
unter 768px mit „Widgets anpassen" in EINEM Anpassen-Menue (`settings-2`), ab 768px bleiben die
zwei Knoepfe; die Eintraege klicken die Knoepfe, ein Display behaelt seinen Wand-Knopf.

### Anmeldeseite
Die erste Seite der App ist Teil derselben Welt, keine Ausnahme - und sie hat einen Ort
(R18, 2026-10-07; gilt fuer Anmeldung, Einrichtung, Einladung, Passwort-Reset und das
Koppeln eines Wandtabletts). Zwei Ebenen, wie ueberall sonst: **Raumlicht und Glas.** Die
Shell traegt das Marken-Lichtfeld (`--brand-field`, siehe „Colors"): drei stehende, weiche
Kreise in den Farben der Bildmarke. Die Seite selbst (`main.auth-page`) ist die Glastafel
davor: `--radius-xl`, Lichtkante, `--glass-bg-elevated` mit `--blur-lg` in `@supports`,
opak (`--color-surface`) ohne `backdrop-filter` und unter reduzierter Transparenz. Hier
scrollt nichts unter dem Glas weg, also darf die Tafel den Blur selbst tragen.

**Alles steht auf der Tafel** - Marke, Name, Formular, Versionszeile. Direkt auf dem Feld
hielte Sekundaertext AA nicht (2,96:1 im Kern); auf der Tafel halten gegen den
schlechtesten Grund (drei Kerne uebereinander, ohne Blur) Label und Satz 5,43:1 hell /
6,20:1 dunkel, die Versionszeile 4,93 / 5,46, der Link 5,31 / 5,02 und die Feldkante
3,09 / 4,21 (`test:material`). Die Karte im Markup (`.auth-card`) ist nur noch die Huelle
des Formulars: Flaeche, Schatten und Polster traegt die Tafel. Ist sie hoeher als das
Fenster, scrollt ihre Huelle; das Feld bleibt stehen. Ohne `:has()` entfaellt das Feld, die
Tafel steht waagerecht mittig auf der planen Buehne.

Das ist kein Rueckfall in den Verlauf, den Runde 3 entfernt hat: der lag als Akzent-Hauch
AUF der Buehne unter freiem Text. Das Lichtfeld liegt HINTER einer Tafel, die den Text
traegt, und faellt unter `prefers-reduced-transparency` und `prefers-contrast` weg.

Die Marke ist die Bildmarke selbst (`utils/brand-mark.js`, 64px, kompakt 48px), in beiden
Themes dieselbe; der Traeger gibt nur Groesse und Schatten. Der Titel ist ein Large Title
in Label-Farbe wie jeder Seitentitel. Die Bildmarke ist als Marke gesetzt und unantastbar.

**Der Fehler steht am Feld, der Fokus auch (R23 D14).** Einrichtung, Anmeldung und Koppeln
melden einen Fehler, der ein Feld meint, unter diesem Feld: dasselbe eine Fehlerfeld
(`authErrorHtml`, `role="alert"`) zieht dorthin, das Feld wird markiert und bekommt den
Fokus (`showAuthError` in utils/auth-ui.js). Falsche Zugangsdaten stehen am Passwort (es
wird markiert und ausgewaehlt); Sperre und Verbindung gehoeren keinem Feld und stehen vor
dem Knopf. Passwortfelder tragen keine Punkte als Platzhalter (sie wirkten ausgefuellt),
die Einrichtung sagt „Konto", und die Kopplung traegt die Marke wie jede Auth-Seite und
prueft die zehn Zeichen vor dem Versuch.

### Erststart-Rundgang und Fehlerbildschirm (R20, Re-Critique 2026-10-17)
Der **Rundgang** (dashboard.js `showOnboarding`) beginnt mit der Bildmarke (64px, Traeger
`.onboarding-mark` wie `.auth-hero__mark`), nicht mit einem Lucide-Zeichen. Nennt ein Schritt
ein Bedienelement, zeigt er darauf: der **Lichtring** (`.onboarding-spotlight`) liegt ueber
Seitenleiste bzw. Kapsel (`.nav-bottom__items`) und dem sichtbaren `.page-fab`, 6px Luft,
Radius des Ziels plus Luft, Ring 2px `--color-accent`. Den Abdunkler traegt der Ring als
Schatten nach aussen (100vmax Spreizung, `--color-bg` 78 %), das Overlay wird dafuer klar
(`.onboarding-overlay--spot`); ohne sichtbares Ziel bleibt die Unschaerfe. Klicks faengt das
Overlay, der Ring ist aria-hidden, die Tafel liegt positioniert darueber.
Ab Schritt 2 steht **„Zurueck"** dort, wo auf Schritt 1 „Ueberspringen" steht (R23 S10);
Esc und die Zurueck-Geste beenden den Rundgang weiter. Die Hilfe fuehrt mit „Rundgang
ansehen" zurueck auf die Uebersicht und zeigt ihn dort erneut (einmal je Wunsch, ohne die
Erste-Schritte-Karte zu starten).

**Erste Schritte (R23 D14).** Nach dem Rundgang keine Sackgasse: ein Admin sieht auf der
Uebersicht eine Karte mit drei Wegen - Familie einladen, Module auswaehlen, Region und
Zeitzone pruefen (`utils/first-steps.js`, an der Stelle des Zonen-Hinweises, vom ersten Bild
an). Derselbe Traeger wie jede Liste, Zeilen in Zielgroesse, der Abhakkreis als Zeichen
(`.check-ring--static`, erledigt in Erfolgsfarbe), ein Zaehler „1/3" und ein X. Die Familie
gilt ab zwei Mitgliedern als erledigt, Module und Region, sobald der Weg einmal genommen
wurde; alles erledigt oder weggeklickt beendet die Karte fuer immer. Sie beginnt nur nach dem
Rundgang - Bestandshaushalte sehen sie nach einem Update nie - und ihr Stand liegt im Browser
(eine Anleitung fuer den ersten Abend, kein Datensatz).

Der **Fehlerbildschirm einer Seite** (router.js `renderError`) nennt die Seite mit ihrem Namen
aus der Navigation ("Die Seite „Kontakte" lässt sich gerade nicht öffnen"), haengt an die
Ursache aus `friendlyError` den Satz, dass der Rest weiterlaeuft, und bietet neben "Neu laden"
"Zur Übersicht" (nicht auf der Uebersicht selbst). Ohne Shell bleibt der allgemeine Titel. Er
ist Region-Fokusziel ohne Rahmen (`.page-crash`, wie `.page-unreachable`).

**Anpassen am Telefon** (unter 640px): Hoch und Runter liegen in EINER Kapsel auf
`--color-fill-well` mit Haarlinie, Groesse, Optionen und Ausblenden stehen ohne Ring daneben;
die Ziele bleiben 48px. Vorher vier umrandete Kreise je Zeile.

### FAB (Signature Component)
Getoente Glas-Kapsel: der App-Akzent mit 78 % Deckung
(`color-mix(in srgb, var(--color-accent) 78%, transparent)`) ueber
`--blur-md` + `saturate(var(--lg-glass-saturate))`, Specular-Kanten (`--glass-inset-strong`
plus Bottom-Inset) und `--glass-sheen` auf der oberen Kapselhaelfte als Materialbeweis -
am Scroll-Ende liegt per `--fab-safe-zone` leerer Nachlauf unter dem FAB, der Sheen ist dort
der einzige Beweis, dass die Flaeche Glas ist. Die 78 % sind eine Untergrenze: darunter faellt das
Plus-Glyph auf hellen Modul-Tints unter 3:1 (gemessen 78 % Tasks-Gruen auf Weiss = 3.4:1).
Hover geht auf Vollton, der Fallback ist opak. Einblendung als Feder (`--duration-xl` + `--ease-out`),
reduced-motion-sicher. (Der hier bis 2026-09-26 zugesagte Ring-Pulse hing an der toten
Klasse `.fab` und lief nie; er ist mit ihr entfallen.)

**Er traegt die Stimme, nicht den Modulton - hier stand bis 2026-08-11
`var(--module-accent, var(--color-accent))`.** Der Wert war ein Rest aus der Zeit vor der
Eine-Stimme-Regel: `layout.css` (Basisregel und opaker Fallback) und `glass.css` (Glaspfad)
lesen seit 2026-08-10 beide `--color-accent`, und die Frontmatter fuehrte ihn ebenfalls schon
richtig - allein dieser Abschnitt beschrieb noch den alten Zustand. Der FAB ist nach dem
Kriterium der Regel eindeutig: er tut in jedem Modul dasselbe. Die 3:1-Messung oben stammt
noch aus der Modulton-Zeit und bleibt die Begruendung der Untergrenze; sie haelt fuer den
einen Akzent erst recht, weil das Violett dunkler ist als das gemessene Tasks-Gruen.

### Event-Bloecke im Kalender (Signature Component)
**Im Monatsraster** flache Tint-Bars statt satter Farbfelder: Flaeche auf `--tint-surface`
(Layer-Farbe auf `--color-surface-work`, Hover eine Sprosse hoeher auf `--tint-raised`),
Tinte `color-mix(in srgb, var(--ev-color) 35%, var(--color-text-primary))`; gemessen
7.2-9.5:1 ueber die Layer-Farben. Kein Rahmen und kein Avatar-Stack im Monat (das "wer"
traegt das title-Attribut); Glyphen nach der Icon-Regel unten, wie in jeder Ansicht - hier
stand bis 2026-09-24 „keine Icons im Monat", waehrend die Monatsbalken die Serienmarke laengst
trugen. "Heute" ist NUR ein gefuellter Akzent-Kreis auf der Ziffer;
Nachbarmonatstage dimmen ueber Flaeche UND Ziffer (AA-fest), nie ueber blosse Opacity auf
Text allein.

**Der Titel vor dem „Wer"** (Re-Kritik 2026-09-25, P2). In Woche und Ganztag darf der
Avatar-Stack dem Titel keinen Platz nehmen; er schrumpfte nie und liess mobil von „Zahnarzt -
Familie" 44 von 112px, am Desktop vom Ganztagsbalken „Städtereise übers Wochenende" 73 von
181px. Im Wochenblock steht er deshalb in der ZEITZEILE hinter der Uhrzeit, nie in der
Titelzeile; im Ganztagsbalken teilt er sich mit dem Label (Titel plus Uhrzeit) eine Zeile.
Beide Zeilen sind umbrechend, eine Zeilenhoehe hoch und schneiden den Rest ab - der Stack
erscheint nur, wenn er neben die Uhrzeit bzw. das GANZE Label passt, sonst faellt er als
Ganzes in die unsichtbare zweite Zeile. Die Mindestbreite ist damit gemessen, nicht als rem-Wert
geschaetzt; ist der Block zu flach fuer die Zeitzeile (`ev-block`-Hoehenfrage), geht er mit ihr.
Rangfolge: Titel, Uhrzeit, Wer. Das „Wer" bleibt im title-Attribut und im gesprochenen Namen,
die Tagesansicht zeigt ihn ab einer Stunde (`roomy`), der Monat nie. Gemessen danach: mobil
Zahnarzt 44 -> 78px (Stack faellt), Desktop 67 -> 101px mit Stack, Städtereise 73 -> 101px.

**Die Vollton-Kanten-Regel** (2026-08-17, Etappe 3). Wo ein Block GROSS genug ist, ihn zu
tragen, sagt eine Kante im Vollton, zu wem er gehoert - 3px (`--cal-event-edge`) an der
Inline-Start-Seite, der Zeitleisten-Kanon der Messlatte (Apple Kalender, Fantastical). Der
Tagesspalten-Block hatte sie als eigenes Element (`.day-event__spine`, seit 2026-09-24
entfallen) laengst; Wochen- und Ganztages-Bloecke bekamen
sie als `border-inline-start`, weil sie ohne sie im Dark entsaettigter Nebel waren: 16 %
Fuellung plus eine 1px-Kante auf halber Deckung ist dieselbe Beimischungs-Falle, an der das
Absenderband zerbrochen ist - **eine Waschung hellt auf, sie faerbt nicht.** Fuellung
(`--tint-surface`) und Tinte (damals 38 % im Wochen- und Tagesblock, 35 % im Ganztages-Balken
und im Monat; seit 2026-09-24 ueberall 35 %) bleiben bei ihren gemessenen Rezepten; die Farbe
wandert in die Kante, wo die User-Farben-Regel sie ausdruecklich zulaesst.

**Hier stand bis 2026-08-28 „Das Monatsraster bleibt kantenlos", und das war seit der
Umsetzung falsch.** Alle vier Blockarten tragen die Kante - `.month-day__event` genauso wie
`.week-event`, `.day-event` und `.allday-event`, seit 2026-09-24 auch die Listenzeile (siehe
„Eine Termingrammatik" unten); im Quelltext ist sie am Monatschip
begruendet, nur hier war die Ausnahme stehengeblieben. Zwei Wahrheiten in zwei Dateien, und
die Datei mit dem Anspruch, die Quelle zu sein, war die falsche. Der befuerchtete Effekt
(„bei 20px Chiphoehe waere die Kante ein Viertel des Blocks") ist gemessen nicht
eingetreten: 3px auf 20,8px sind ein Siebtel, und der Chip liest als Balken mit Kante, nicht
als Kante mit Rest.

**DER PUNKT BRAUCHT EINEN RING, DIE KANTE NICHT** (2026-08-28). Unter 640px faellt der
Monatschip auf einen Punkt zusammen, und damit wird die freie Nutzerfarbe vom Beiwerk zum
EINZIGEN Informationstraeger der Hauptansicht - ab da schuldet sie 3:1 nach WCAG 1.4.11,
und das kann sie nicht halten: von den neun Seed-Terminfarben fielen FUENF gegen die helle
Arbeitsflaeche durch (Amber 2,15:1, Cyan 2,43:1, Teal 2,49:1, Gruen 2,54:1, Orange 2,80:1),
gegen die Wochenendflaeche zusaetzlich Rot. Im Dark bestanden alle - **eine Invariante, die
nur in einem Theme haelt, ist keine.** Die Antwort ist nicht, die Farbe nachzudunkeln: sie
gehoert dem Haushalt. Ein Ring in `--color-text-tertiary` traegt die Abgrenzung stattdessen
selbst (light 4,74-5,64:1, dark 5,88:1), und der Punkt waechst dafuer von 8 auf 10px, damit
Ring UND Farbe nebeneinander lesbar bleiben. Alle 24 gemessenen Kombinationen liegen danach
bei mindestens 4,69:1.

Die Regel dahinter, und sie gilt ueber den Kalender hinaus: **wo eine freie Nutzerfarbe zum
alleinigen Traeger einer Information wird, traegt nicht sie den Kontrast, sondern ihre
Fassung.** Die User-Farben-Regel kannte bis dahin den Textfall (verboten) und den
Flaechenfall (gemessene Mix-Rezepte); fuer den Punkt, der zur einzigen Auskunft wird, gab es
kein Rezept. Jetzt gibt es eines.

**Die Form sagt, WAS es ist, der Ring, DASS es da ist** (2026-09-24). Aufgabe und Termin
unterschied im Punkteraster bis dahin nur ein Ring in `--color-surface-work` um den
Aufgabenpunkt - die Farbe der Flaeche, auf der er steht, im Dark unsichtbar. Jetzt tragen
beide dieselbe Fassung (`--color-text-tertiary`, die Ring-Regel oben), und die Art traegt die
FORM: Termin rund, Aufgabe ein Quadrat mit `--radius-2xs` - das Kaestchen, das sie in der Liste
als Checkbox-Glyph fuehrt. Eine Unterscheidung, die an einer zweiten Farbe haengt, haelt in
einem Theme und faellt im anderen; eine Form haelt in beiden.

**Eine Termingrammatik** (Critique 2026-09-24, P2). Ein Termin sprach vier Mundarten: im Monat
Balken mit Kante, in der Woche Block mit Kante, 1px-Rahmen und Standardglyph, im Tag Karte mit
Kante UND eigenem Spine-Element (zwei Farbstriche) und senkrecht zentriertem Titel, in der
Liste weisse Zeile mit 8px-Farbpunkt. Die Monatsbalken sind die Referenz, alle anderen folgen:

- **Der Block** (Monat, Woche, Tag, Ganztag): Flaeche `--tint-surface` in der Terminfarbe auf
  dem Grund, auf dem er steht (`--color-surface-work`, im Tag `--color-surface`), Hover eine
  Sprosse hoeher; Tinte EIN Rezept, 35 % Terminfarbe in `--color-text-primary`; Kante
  `--cal-event-edge` im Vollton an Inline-Start; kein Rahmen, `--radius-xs`. Gemessen ueber
  die zwoelf Seed-/Kalenderfarben (Amber, Cyan, Teal eingeschlossen): Ruhe mindestens 7,22:1
  light / 6,96:1 dark, Hover 6,83 / 6,47. Die 38 % der Woche waren naeher an der Nutzerfarbe,
  also nie der bessere Kontrast. Der Monatschip haelt ueber und unter dem Titel 3px
  (`--cal-chip-pad-block`, R21 S9b): mit 2px lag die Zeile buendig an Kante und Flaeche
  (Detektor cramped-padding, 16 Treffer bei 1280). Die Spur der Monatsbaender
  (`--month-band-h`) rechnet mit demselben Token (`test:calendar`).
- **Titel oben, Zeit darunter, wenn Platz ist.** Zeitbloecke richten den Titel an der
  Oberkante aus (klebend, wenn der Block oben aus dem Scrollport ragt), halbfett; die Zeitzeile
  tritt ueber das Gewicht zurueck, nie ueber Opacity. Ob sie Platz hat, fragt eine
  Container-Query nach der HOEHE des Blocks (`container: ev-block / size`, unter 2.125rem
  entfaellt sie) - eine Minutenschwelle waere bei 56px-Stunden (Woche) und 40px-Stunden (Tag)
  in einer der beiden Ansichten falsch; angeschnitten ist schlechter als weg.
- **Die Listenzeile** (Agenda, Tagesliste des Telefon-Monats) bleibt eine Zeile auf der
  Traegerflaeche - eine getoente Zeile waere eine Karte in der Karte -, aber die Zugehoerigkeit
  traegt dieselbe Kante, am TEXT (`.agenda-event__body`), so hoch wie Titel und Metazeile.
  Das Craft-Verbot „farbige Seitenkante an Listenzeilen" ist hier bewusst gebrochen: die Kante
  ist die Kalenderfarbe selbst, dieselbe wie am Block, keine Dekoration.
- **Die Icon-Regel.** Ein Terminicon erscheint nur, wenn jemand eines gewaehlt hat
  (`hasEventIcon()`: 'calendar' ist Spalten-Default und Rueckfall, ein Kalenderglyph im
  Kalender sagt nichts); die Serienmarke bei jeder Serie. Beides in JEDER Ansicht gleich, ueber
  einen Baustein (`eventGlyphsHtml()`), 12px im Block, 16px in der Listenzeile. Die Glyphen
  tragen die Tinte des Titels (`currentColor`), nie den Vollton der Terminfarbe: Amber auf
  hellem Amber ist der Textfall, den die User-Farben-Regel verbietet, und die Farbe steht schon
  in der Kante. Zwei Ausnahmen: die Titelfassung des Telefon-Monats (~44px Spalte, der Titel
  hat sieben Zeichen) laesst die Glyphen weg; die Tagesliste darunter zeigt sie. Und im
  einzeiligen Monatsbalken ab 1024px weicht unter 9rem Balkenbreite NUR die Serienmarke dem
  Titel (`@container month-chip`, R22 S10: bei 1280 endeten 28 von 40 Titeln mit Ellipse, ohne
  die Marke 9); das gewaehlte Terminicon ist Inhalt und bleibt (`test:calendar` "R22 S10").
- **Ein Zeitformat.** Jede Spanne geht durch `timeSpanText()`: „17:00 - 18:30", der Trenner
  aus `calendar.dayRangeLabel`, die Uhrzeiten aus `formatTime()` (12 Stunden, Ziffern der
  Locale), das Suffix der Locale („Uhr") EINMAL am Ende. Im Raster ohne Suffix (der Block steht
  an seiner Uhrzeit), in Liste, Detailansicht, Schichtdetail, Tooltip und gesprochenem Namen
  mit - ein Termin klingt in jeder Ansicht gleich. „ab"/„bis" am ersten und letzten Tag eines
  Mehrtagestermins bleiben. Vorher: drei Schreibweisen, zwei mit Gedankenstrich, Schichtzeiten
  als rohe 24-Stunden-Zeichenkette auch fuer wen 12 Stunden eingestellt hat.
- **Die Ganztags-Beschriftung** der Zeitspalte steht als ganzes Wort mit weichem Trennstrich in
  der Locale („ganz-/taegig"), bricht in der 44px-Spalte um und haelt Abstand zur Kante;
  „ganztg." war 42,5px breit in 40px Innenmass und eine Abkuerzung zum Entziffern.

**Mehrtaegige Termine** (Re-Kritik 2026-09-25, P2). Ein Termin ueber mehrere Tage ist EIN Band
je Wochenzeile, kein Chip je Tag - in der Ganztagszeile der Woche und im Monat ab 640px, nach
dem Muster, das der Wochenstreifen der Uebersicht (`.week-strip__band`) laengst zeichnete.
Vorher stand „Staedtereise" 13.-15.10. als drei gleiche Chips a 128px, jeder mit Icon und
Avataren, und der Screenreader hoerte dreimal „Ganztaegig"; gemessen danach: ein Balken, 395px,
der Titel ganz.

- **Band ist, was die Ganztagszeile traegt und mehrere Tage beruehrt** (`isBandEvent()`:
  ganztaegig oder ab 24 Stunden, dieselbe Regel wie der Wochenstreifen). Ein kurzer
  Nachttermin bleibt an beiden Tagen ein eigener Eintrag (#1313).
- **Die Grammatik ist die des Blocks, neu sind nur die ENDEN.** Toenung, Tinte 35 % und
  Kante wie `.allday-event`/`.month-day__event` (gemessen 7,22-8,08:1 light, 7,51-7,65:1 dark
  mit Amber, Cyan, Teal). Die Kante und die Rundung stehen nur am ECHTEN Anfang bzw. Ende;
  laeuft der Termin ueber die Zeile hinaus, ist das Ende offen - keine Kante, keine Rundung,
  bis an den Spaltenrand - und traegt ein Chevron in der Tinte des Titels (`.cal-band--before`
  / `--after`, `.cal-band__cont`). Die offene Kante allein ist bei 4px Radius zu leise. Alles
  logisch: in RTL oeffnet sich die andere Seite, das Chevron dreht mit.
- **Titel und Glyphen einmal**, am Anfang bzw. am Zeilenanfang der Fortsetzung. In der Woche
  gilt die Zeile „Titel vor dem Wer" (oben): Titel mit „ab", dann „bis" am Ende des Bands, dann
  die Zugewiesenen - alle in DERSELBEN umbrechenden Zeile, was neben dem ganzen Titel nicht
  passt, faellt weg. Mobil hatte das „bis" den Titel sonst auf „Te…" gekuerzt. Im Monat kein
  Stack (Monatskanon), das „Wer" steht im title.
- **Spuren** vergibt `packLanes()` (utils/week-strip.js), EINE Packung fuer Uebersicht und
  Kalender: stabil nach echtem Anfang, bei Gleichstand der laengere zuerst, jeder in die
  niedrigste freie Spur. Einzeltages-Chips stehen darunter. Im Monat liegt eine Schicht
  `.month-bands` ueber den sieben Zellen einer Woche; die Zelle haelt so viele Spuren frei,
  wie an ihrem Tag belegt sind (`.month-day__lanes`). Welche Spuren stehen bleiben,
  entscheidet `fitMonthDayCells()` fuer die ganze ZEILE - ein Band ueber drei Zellen kann nicht
  in einer davon weichen -, und das „+N" zaehlt die verborgenen Baender mit.
- **Nachbarmonat und Fokus gelten auch unter dem Band.** Ueber Tagen aus dem Nachbarmonat
  faellt die Toenung des Bands auf `--tint-wash` wie beim Chip der Zelle, Text und Kante
  bleiben (`.cal-band--outside`: ein Verlauf mit harten Stopps mitten in der Spaltenfuge, die
  Zahl der Spalten aussen setzt `monthBandsHtml()`). Der Fokusring der Monatszelle sitzt auf
  ihrem `::after` UEBER der Schicht; die Zelle selbst hebt sich nicht, sonst verschwaende das
  Band unter ihrer Flaeche - vorher deckte ein kreuzendes Band die Seiten des Rings.
- **Tastatur und Screenreader.** In der Woche ist das Band ein Knopf wie jeder Block; im Monat
  bleibt die Zelle der eine Tab-Stopp (#1460), die Schicht ist `aria-hidden`, und die Zelle
  nennt das Band mit „(Tag 2 von 3)". Der Name eines Bands nennt die Spanne („13. bis 15.
  Oktober", verdichtet ueber `formatRangeToParts`, Bindewort aus der Locale statt des
  Gedankenstrichs der Locale) und bei einer Fortsetzung „Fortsetzung". Nennt eine Zelle drei von
  vier Titeln, sagt sie „und 1 weiterer".
- **Punkt und Liste bleiben je Tag.** Im Telefon-Monat heisst der Punkt „hier ist etwas";
  Agenda und Tagesliste behalten eine Zeile je Tag, sagen aber „Tag 2 von 3" hinter der
  Uhrzeit. Die Tagesansicht zeigt das Stueck des Tages mit offenen Enden.

### Mobil-Monat: Raster oben, der gewaehlte Tag darunter (Critique 2026-09-24, P2)
Unter 640px ist der Monat geteilt, nach der Messlatte (Apple Kalender „Liste", Fantastical,
Outlook): **das Raster sagt, WO etwas ist, die Liste sagt, WAS.** Vorher sprang ein Tipp auf
einen Tag in die Tagesansicht - wer lesen wollte, was am Dienstag steht, verliess den Monat.

- **Ein Tipp WAEHLT den Tag.** Die Auswahl ist ein 2px-Ring in `--color-text-primary` mit
  2px Luft (`outline-offset`) um die Ziffer; heute bleibt der gefuellte Akzentkreis, und am
  gewaehlten Heute stehen beide. Ring statt zweiter Fuellung, weil zwei gefuellte Kreise
  (Akzent und Neutral) nicht sagen, welcher der gewaehlte ist. Ein Tag aus dem Nachbarmonat
  blaettert dorthin und waehlt ihn. In die Tagesansicht fuehrt der Kopf der Liste (Datum mit
  Chevron) - Doppeltipp ist kein Weg.
- **Die Liste spricht die Zeilensprache der Agenda** (dieselben Zeilen, derselbe Kopf: Datum
  fett, Wochentag sekundaer). Eine eigene Monatszeile waere eine weitere Termin-Mundart. Sie
  steht NEBEN `.month-view`, nicht darin: die Punktregeln sind an `.month-view` geschnitten und
  haetten die Aufgaben der Liste zu Quadraten ohne Titel geschrumpft. Ein freier Tag sagt es
  ruhig (kompakter Leerzustand, Aktion `btn--secondary`) - er ist kein Fehlerfall.
- **Die Punkte sagen nur noch, wo.** Zentriert unter der Ziffer, hoechstens vier, ohne „+N" -
  wie viel es ist, sagt die Liste. Zeilen mit fester Hoehe (Punkte), damit das Einklappen eine
  animierbare Strecke hat - **seit R21 ein Budget von sechs Zeilen zu 48px** (sechs Wochen 48px,
  fuenf 57,6px, vier 72px): mit 48px je Woche sprang die Liste beim Monatswechsel 48px.
  Eingeklappt traegt die eine Woche die Hoehe ihres Inhalts (48px Punkte, 80px Titel), damit
  der Wochenschritt ueber Monatsgrenzen nicht springt. **Die Titelfassung hat ein Budget von 320px, nicht 80px je Woche**
  (vier Wochen 80px, fuenf 64px, sechs 53px): mit 80px fest blieben der Liste bei 375x812
  81px, im Sechs-Wochen-Monat nichts; jetzt ist sie in jedem Monat gleich hoch (170px Zeilen).
  Was nicht passt, zeigt die Zelle als nackte Zahl („+2") - „+2 weitere" brach auf ~50px um
  und wurde angeschnitten, und was die weiteren sind, sagt die Liste.
- **Einklappen auf die Woche.** Hochziehen oder Scrollen der Liste klappt das Raster auf die
  Woche des gewaehlten Tags zusammen (die Zeile bleibt stehen, die anderen gehen auf null),
  Herunterziehen oder Zurueckscrollen an den Listenanfang klappt auf; der Knopf im Listenkopf
  (`aria-expanded`) tut dasselbe ohne Geste. Die Scroll-Regel klappt nur ein, wenn die Liste
  danach noch scrollen kann - sonst klemmt scrollTop auf 0, und genau das ist das Signal zum
  Aufklappen: das Raster pumpte. Unter `prefers-reduced-motion` ohne Uebergang.
- **Eingeklappt geht der Monat wochenweise**, wie in Apples Kalender: Wischen, Pfeile und
  j/k ruecken die Auswahl um sieben Tage, der Monat folgt ihr ueber die Grenze. Ein
  Monatssprung haette die Auswahl vom 24.09. auf den 01.10. gerissen - weg aus der einen Woche,
  die man sieht. Aufgeklappt bleibt es der Monat. Die Schrittweite steht EINMAL
  (`periodStepOf`) und benennt auch die Pfeile.
- **Termintitel wohnt am Monat**, als Umschalter im Listenkopf (`aria-pressed`, an = Fuellung
  UND Akzent-Glyph), nicht mehr im Filterblatt unter „Darstellung": ein Schalter, der die
  Ansicht aendert, gehoert an die Ansicht. Die Titelfassung ist die dichtere Stufe, drei
  Zeilen je Zelle; die Liste darunter wird dafuer kuerzer, das Einklappen gibt sie zurueck.

**Die Pfeile sagen, was sie tun.** „Vorheriger Monat", „Naechste Woche", „Naechste 3 Tage"
(Telefon-Woche), „Naechste 30 Tage" (Agenda) als Name und Tooltip - vorher hiessen sie in
jeder Ansicht „Zurueck"/„Weiter", und in der Agenda sprang „Weiter" still dreissig Tage. Die
Agenda nennt im Kopf dazu ihre Spanne („24.09. - 24.10.2026") statt nur ihren Anfang.

**Das Raster hat so viele Zeilen, wie der Monat braucht** (vier bis sechs, alle Breiten).
Ladefenster und Zeichnung lesen dieselbe Rechnung (`monthGridSpan`); fest 42 Tage zeigten im
September 2026 eine ganze Zeile Oktober.

### Der Kalender per Tastatur und Screenreader (Critique 2026-09-24, P1)
**Wer den Kalender nicht sieht oder nicht anfasst, erreicht jeden Termin, den der Finger
erreicht.** Vorher trugen die Bloecke in Woche und Tag nur `cursor: pointer`, und der Monat war
35-42 einzelne Tab-Stopps ohne Pfeiltasten.

- **Der Monat ist EIN ARIA-Grid mit EINEM Tab-Stopp.** `role=grid` an `.month-view` (Name: das
  Zeitraum-Label), die Wochentagsleiste als Kopfzeile, je Woche ein `.month-grid__row`
  (`role=row`, selbst ein 7-Spalten-Raster mit `minmax(0, 1fr)` und `min-height: 0`, sonst
  verschoebe ein voller Tag seine Woche), der Tag als `gridcell` mit roving tabindex. Pfeile
  bewegen den Tag und wechseln am Rand den Monat, Pos1/Ende springen an Anfang und Ende der
  Woche nach dem Wochenstart des Haushalts, Bild auf/ab um einen Monat mit geklemmter
  Tageszahl. Enter/Leertaste tut, was der Tipp tut: am Telefon waehlen (`aria-selected`, nicht
  `aria-pressed` - das ist die Semantik eines Umschalters), am Desktop den Tag oeffnen, und der
  Fokus geht mit auf dessen ersten Eintrag. Der Name der Zelle sagt, was dort steht:
  „Donnerstag, 24.09.2026, Heute, 3 Einträge: Zahnarzt, Fußball, Training".
- **Termine in der Zelle sind keine eigenen Tab-Stopps.** Das APG-Grid kennt Widgets in Zellen
  nur ueber einen zweiten Modus (Enter hinein, Escape heraus), den niemand findet; ausserdem
  zeigt die Zelle nur, was hineinpasst („+N"). Der Weg fuehrt ueber die Zelle in den Tag, wo
  JEDER Eintrag ein Knopf ist - vollstaendig statt zur Haelfte.
- **Jeder Block ist ein Knopf** (`.week-event`, `.day-event`, `.allday-event`, der Tageskopf der
  Woche) und heisst wie die Agenda-Zeile: Serie, Titel, Zeit, Ort, Kalender, Personen. Die
  DOM-Reihenfolge einer Spalte ist die Uhrzeit (`chronological()`), Schichten eingemischt, denn
  sie ist die Tab-Reihenfolge. Eine Aufgabe nennt ihre Prioritaet im Namen - der Punkt ist
  `aria-hidden`.
- **Der Fokusring liegt aussen, wo Platz ist, innen, wo geschnitten wird.** Auf den getoenten
  Bloecken aussen (`--focus-ring-offset`, `z-index` ueber die Nachbar-Lanes): innen laege der
  Akzent auf einer Toenung und schnitte die Vollton-Kante. In `.allday-cell` (schneidet ab)
  und an der Monatszelle innen (`--focus-ring-offset-inset`, auf `::after` ueber den Baendern).
- **Die Auswahl im Telefon-Monat wird angesagt, das Zeichnen nicht.** Eine polite Live-Region
  (`#cal-live`) ausserhalb von `#cal-body` - eine Region, die mit ihrem Inhalt entsteht, sagt
  nichts - meldet „Freitag, 25.09.2026, 2 Einträge" nur bei einer Auswahl, nie bei einem
  Neuaufbau.
- **Kuerzel nach Google Kalender, nur auf /calendar:** `t` heute, `k`/`j` zurueck/vor (dazu die
  Pfeile, wenn kein Bedienelement den Fokus hat; RTL gespiegelt), `m`/`w`/`d`/`a` die Ansicht.
  Sie stehen in `SHORTCUTS` der Shell mit `route` - EIN Dispatcher, damit „g d" nie zugleich
  „d" ist -, die Hilfe (`?`) zeigt sie nur dort, und die Knoepfe tragen `aria-keyshortcuts`.
  Die Tablist heisst „Ansicht", nicht wie die H1.

### Das Leseblatt: die Hauptaktion in die Daumenzone (Critique 2026-09-24, Persona Casey)
Im Sheet der Detailansicht stand „Bearbeiten" oben im Kopf und „Löschen" unten in der
Fusszeile - die riskanteste Aktion war die erreichbarste. Mit `edit.primary` steht Bearbeiten
als Primaerknopf am ENDE der Fusszeile, Löschen bleibt `danger-ghost` am Anfang
(`margin-inline-end: auto`, in RTL gespiegelt), und der Kopfknopf erscheint erst im Formular,
als „Zurück". Opt-in, weil die Hauptabsicht dem Objekt gehoert: im Termin ist es Bearbeiten, in
der Aufgabe das Erledigen. Die Rueckfrage beim Löschen bleibt. Kalender, Inventar und seit R17
(E7) Kontakte und Geburtstage nehmen es. Der Geburtstag hat unter der Spaltenschwelle seither
ueberhaupt erst ein Leseblatt (`openBirthdaySheet`; vorher ging der Tipp direkt in den Editor) -
sein Bearbeiten ist eine Fussaktion, die das Blatt schliesst und den Editor-Dialog oeffnet, weil
der Editor ein eigener Dialog mit Bild-Upload ist. Stehen im Fuss neben Loeschen und Bearbeiten
weitere leise Aktionen mit Icon (Kontakt: vCard-Export), zeigen sie unter 640px nur das Icon
(detail-view.css), wie in der schmalen Detailspalte.
**Das Popover am Desktop folgt derselben Ordnung** (Re-Kritik 2026-09-25, P2): es setzte
Bearbeiten als Sekundaerknopf VOR alle Aktionen, Löschen stand 8px daneben, sein `--start` schob
nichts mehr auseinander, und „In Maps öffnen" rutschte allein in eine zweite Zeile. Mit
`edit.primary` gilt jetzt auch dort: Aufruferaktionen zuerst, Bearbeiten primaer am Ende. In
286px Innenbreite teilen sich Löschen und Maps die erste Zeile, Bearbeiten steht unten am Ende -
dasselbe Bild wie im Sheet, und kein Aktionsknopf verliert seine Beschriftung.
**Die Folgeaktion steht neben ihrem Wert, solange er 8rem behaelt** (R23): mit 10rem passte
„In Maps öffnen" am Telefon nie neben den Ort und stand immer in einer eigenen Zeile.
**Ein Weg in ein anderes Modul ist eine Folgeaktion der Zeile, die ihn begruendet** (R21, D7):
die Geburtstagszeile eines Kontakts fuehrt "In Geburtstagen anzeigen", die Datumszeile eines
importierten Geburtstags "Kontakt anzeigen" (`birthday_id` / `contact_id`, Migration 90) - nur
mit Zugang zum Zielmodul. `leaveDetailTo()` (detail-view.js) schliesst Blatt oder Popover vor
dem Sprung; der Router schliesst kein geteiltes Modal (`test:contacts-list-detail`,
`test:birthday-localization`, `test:contacts-routes`).
**Verknuepfen geht auch von Hand (R22, D7):** der Geburtstag-Dialog fuehrt unter "Weitere
Angaben" die Auswahl "Mit Kontakt verknuepfen" (freie Kontakte + "Keiner", nur mit
Kontakte-Leserecht, nie an einem Mitglieder-Geburtstag). Gleicht ein unverknuepfter Geburtstag
genau einem freien Kontakt im Namen, steht in seiner Leseansicht eine ruhige Zeile "Kontakt -
Ein Kontakt heisst genauso" mit der Folgeaktion "Verknuepfen" - kein Banner, keine Farbe. Das
Datum folgt dem Kontakt nicht (#2124); ein Kontakt ohne eigenes Datum zeigt in seiner
Geburtstagszeile das des verknuepften Eintrags, damit der Rueckweg nicht wegfaellt. Ein
vergebener Kontakt ist 409, der Dialog bleibt offen und laedt die Auswahl neu
(`test:birthday-import-rights`, `test:inventory-notes-errors`, `test:module-readonly-ui`).
**Der Notiz-Lesedialog bleibt ein Modal, sein Fuss folgt aber diesem Kanon** (R22, D20):
Loeschen `danger-ghost` am Anfang, Bearbeiten gefuellt mit Stift am Ende; im Editor wechselt
derselbe Knopf auf `danger-outline` (Dialogfuss).
**Kein Dialogfuss traegt einen Inline-Stil (R22, D9/D12/D20, S10 app-weit):** den Anfangsrand
von Loeschen gibt `.modal-panel__delete` (gesetzt von `decorateFooterDelete`, modal.js), einen
anderen Anfangsknopf ("Gast anlegen") `.modal-panel__footer-start`, Abbrechen + Primaer
gruppiert `.modal-panel__footer-group` (`--tight` fuer Loeschen + Icon-Knopf). Der Schub am
Loeschen-Knopf steht in einer Regel OHNE `:has()` - in einer gemischten Selektorliste verwarf
ihn ein Browser an der Mindestversion ganz; nur die Gruppe mit Loeschen haengt an `:has()`.
Guard `test:control-dialect` ("R22 S10", jedes Skript der App).


**Im Formular eines Leseblatts gibt es EINEN Rueckweg (R19, Critique 2026-10-16, Heuristik 3).**
„Aufgabe bearbeiten" hatte mobil vier Auswege: Kopf-„Zurueck", x, Abbrechen, Papierkorb.
Traegt der Formularfuss ein Abbrechen (`data-action="close-modal"`), fuehrt es zurueck in die
Leseansicht (Eingaben bleiben im DOM wie bei „Zurueck"), und der Kopfknopf faellt weg; das x
schliesst wie bisher mit Verwerfen-Frage. Ein Formular ohne Abbrechen behaelt „Zurueck"
(components/detail-view.js, `switchToForm`). Im Aufgabenformular liegt der Countdown
ausgeschaltet hinter „Weitere Einstellungen" (Regel wie Wiederholung und Erinnerung, R16);
mobil 1027 -> 942px Formular.

### Der Termin-Dialog: Haeufiges oben, Seltenes benannt (Critique 2026-09-24, P2)
Der Dialog war mobil drei Bildschirme lang (1559px bei 523 sichtbar), und Sichtbarkeit und
Stichtag standen VOR Wiederholung und Erinnerung. Die Reihenfolge folgt jetzt der Haeufigkeit:
Titel, Ganztaegig, Von, Bis, Wer, Wiederholung, Erinnerung, Ort, Beschreibung; hinter
„Weitere Einstellungen" Sichtbarkeit, Stichtag, Farbe, Icon, Sync-Ziel, Anhang - und die
Zeile des Aufklappers nennt sie.
- **Seit R19 steht auch die Beschreibung hinter dem Aufklapper** (erstes Feld dort, wie die
  Notizen bei Apple am Ende), und eine gesetzte Beschreibung oeffnet ihn beim Bearbeiten.
  Mobil mass der Dialog 933px Inhalt in 591px (1,58 Bildschirme), jetzt 776px (1,31).
- **Der geteilte Nachname steht nicht in jedem Personen-Chip** (`sharedSurname`,
  components/user-multi-select.js): tragen ALLE Personen der Wahl denselben Nachnamen, zeigt
  der Chip den Vornamen, der volle Name bleibt der zugaengliche Name (`.sr-only`). Ein Konto
  mit anderem Nachnamen laesst alle Namen voll. Gilt in jeder Personenwahl (Termin, Aufgabe,
  Budget); bei 390px drei Chip-Zeilen -> zwei.
- **Von und Bis sind je eine Zeile** (`.cal-when`): EINE Beschriftung, Datum und Uhrzeit
  daneben, die Beschriftungsspalte `max-content` in einem Raster fuer beide Zeilen. Das Datum
  heisst wie seine Zeile, die Uhrzeit bringt ihren Namen ueber `label` mit.
- **Ein Takt:** `.cal-event-form` ist eine Flex-Spalte mit 16px, Gruppen ohne eigene Marge -
  im Modal wie im Leseblatt (dort fehlte die Luecke, im Modal war sie doppelt). Wiederholung und
  Erinnerung sind Felder in der Reihe, keine Abschnitte: keine eigenen Trennlinien, der
  Erinnerungsschalter spricht wie „Ganztaegig". Die einzige Linie trennt „Weitere
  Einstellungen" ab.
- **Beim Bearbeiten klappt nur Unsichtbares auf:** eingeschraenkte Sichtbarkeit, Stichtag,
  Anhang. Farbe und Icon zeigt der Termin selbst. Eine Warnung, die im zugeklappten Teil
  erscheint, oeffnet ihn - aufklappen, nie zuklappen.
- **„Niemand" ist ein ruhiger Eintrag, keine Person:** kein Avatar, keine Striche um das Wort
  (`.user-ms__option--none`). Und er steht NUR in einer Einzelwahl (der Koch einer
  Mahlzeit), nie in einer Mehrfachwahl (R21): dort heisst „niemand" kein Chip gewaehlt -
  als erster Chip zwischen den Personen sah er aus wie eine weitere (`test:people-pickers`). Doppelte Initialen (Leo und Linda
  Johnson, beide „LJ") loest die EINE geteilte Funktion auf (`public/utils/initials.js`,
  #1464): wer seine Zeichen teilt, bekommt den naechsten freien Buchstaben seines Vornamens
  („LE", „LI"), aus der Liste aller Konten, also in jeder Ansicht gleich.

### Der Wand-Modus (Signature Component)
**Der WACHE Zustand des Dashboards - keine zweite Seite, sondern dieselbe Flaeche in anderer
Gangart.** Gelesen wird sie aus zwei Metern und ohne Beruehrung; alles Weitere folgt aus
diesem einen Satz. Der Screensaver bleibt der ruhende Zustand und legt sich nach seiner
Leerlaufzeit unveraendert darueber.

**Eine geteilte Flaeche, kein persoenlicher Bildschirm** (#1817). Die Wand haengt in der Kueche,
gleich aus wessen Sitzung sie geoeffnet wurde - sie zeigt deshalb nur, was der ganze Haushalt
sehen darf: Aufgaben und Termine mit Sichtbarkeit "alle", Termine aus Abos nur aus geteilten.
Was einer Person allein gehoert, steht an keiner Stelle der Wand, auch nicht fuer sie selbst,
und wer nur darueber "dran" waere, erscheint nicht unter den Gesichtern. Dasselbe gilt fuer
Beitraege ohne Sichtbarkeitsstufe, die nur dem Betrachter gelten: die eigene Dosis, die eigene
Schicht, die eigene Erinnerung, wartende Freigaben. Sie fehlen an jeder Wand, wie auf einem
gekoppelten Display - ohne Ersatzzeile und ohne Luecke: das Programm rueckt zusammen, und ein
Tag ohne Zeile sagt "Heute frei". Durchgesetzt am Leser (`audience=household`), nicht im
Browser. Uebersicht und Heute-Blatt bleiben persoenlich. Die Antwort fuer die Wand ist eine
Allowlist: sie traegt nur die Quellen, die die Flaeche zeichnet - Notizen, Geld (Budget,
geteilte Ausgaben, offener Lohn), Schnellzugriffe und Countdowns erreichen das Geraet nicht,
und ein neues Modul steht erst an der Wand, wenn es dort einen Platz bekommen hat.

**Die Shell tritt ab.** Sidebar und Tab-Leiste sind Arm-Laengen-Moebel; auf zwei Metern sind
sie siebzehn unleserliche Ziele. Auch die Installations-Einladung verschwindet - auf einer
Anzeige, die niemand bedient, waere sie die lauteste Karte im Bild.

**Eine Distanz-Skala, an einer Stelle** (`--wall-clock`, `--wall-row-title`, `--wall-row-sub`,
`--wall-section`, `--wall-pad`), und sie hat ZWEI Bezugsgroessen aus zwei gemessenen Gruenden:
die Uhr haengt an `vw`, weil sie eine einzelne lange Ziffernfolge ist und von der BREITE
begrenzt wird; alles andere haengt an `vmin`. Mit `vh` wurden die Zeilen auf einem Tablet im
Hochformat groesser, weil dort Hoehe reichlich ist - und liefen seitlich in die Enge und unten
aus dem Bild. `vmin` bindet die Groesse an die knappe Seite und haelt beide Lagen im Schirm.
**An einer Wand kann niemand scrollen, das Bild muss passen.** Die Enden der Skala sind
Tokens: hier bekommen die Display-Stufen 48/72px ihre Rolle. **Und ein ruhiger Tag darf
groesser sprechen** (2026-09-23): die Skala ist fuer den vollen Tag gerechnet, bis drei
Eintraege tritt die Programmzeile eine Stufe hoeher (Titel bis 48px, am Traeger per `:has`
gezaehlt). Gemessen bei 1280x800 mit zwei Zeilen: leere Flaeche unter der Buehne 40 % → 28 %.

**Genau EIN gefuellter Traeger** - die Programmliste - und sonst Inhalt auf der Buehne. Die
Anti-Referenz ist die Smart-Home-Dashboard-Optik: Kacheln voller Messwerte, Ringe und Sensoren
ohne Anlass. Die Uhr ist deshalb keine Kachel, sondern der Kopf der Flaeche: kein Surface, kein
Rahmen, linksbuendig wie jeder Seitenkopf.

**Eine Zeile, nicht zwei - quer.** Auf zwei Metern erkennt man einen Eintrag an seinem Anfang; ein
Umbruch kostet die Hoehe einer ganzen weiteren Zeile, und die Flaeche hat sechs davon, bevor
sie scrollen muesste. Hochkant (`orientation: portrait`) ist die Hoehe da und die Breite nicht:
Programmtitel und Wetterzeile tragen dort zwei Zeilen (R22; 834x1112 zeigte "Geburtstagstorte..."
ueber einem Drittel leerer Flaeche). Guard: `test:frontend-audit` ("hochkant ..."). Die Zaehler an den Gesichtern sind aus derselben Rechnung keine
Mikro-Badges, sondern volle Marken mit Kante - eine 13px-Marke an einem 56px-Gesicht waere aus
zwei Metern Dekoration.

**Unter jedem Gesicht stehen die Aufgaben von heute beim Namen, und die Zeilenzahl folgt dem
Platz** (#1817). Die Zahl sagt, DASS etwas offen ist, der Titel sagt WAS. Offene zuerst in
Primaerfarbe, darunter das heute Erledigte in Sekundaerfarbe mit Haken - kein Durchstreichen,
keine Deckkraft: auf zwei Metern liest beides niemand. Mit Titeln wird aus der Reihe der
Gesichter ein Raster von Personen (Gesicht und Vorname als Kopf, die Zeilen in voller
Spaltenbreite; ab fuenf Personen drei Spalten). Weil die Wand nicht scrollt, steigt
`fitWallWho` eine Leiter von Budgets hinab, bis das Bild passt: erst weichen die Haken, auf der
ganzen Flaeche, dann die offenen Titel; was nicht passt, ist eine Zahl ("+2 weitere"), und die
letzte Stufe ist die Reihe der Gesichter wie zuvor. Gemessen bei 1280x800: vier Personen tragen
drei Zeilen, sechs tragen zwei. **Die Zahl ist die Liste** (R23): die Zahl am Gesicht zaehlt, was
heute vor der Person liegt - Aufgaben UND ihre Programmzeilen (Termin, Kochen) -, und genau das
steht darunter: die Programmzeilen beim Namen vor den Aufgaben, durch dieselbe Leiter, Titel plus
„+N weitere" ergeben die Zahl (vorher „3" ueber einem Titel, „1" ueber keinem). **Reicht das
Tablett auch ohne Titel nicht, gibt das Programm Zeilen ab** (R23, `shedWallProgram`): gemessen,
eine nach der anderen, in „+N weitere heute", zwei bleiben; danach duerfen wieder Titel stehen,
die nichts kosten. Vorher lief 768x1024 25px und 1024x768 45px aus dem Bild. Nachts geht die Liste mit der Wand: offener Titel und Name eine
Stufe zurueck, Erledigtes und Zaehlzeile eine weitere, und der Haken gibt sein Gruen ab.

**Nachtabsenkung nach UHRZEIT, nicht nach Farbmodus.** Zwischen 22 und 6 Uhr traegt die Wurzel
`data-wall-night` und der dunkle Grund wird erzwungen, auch bei hellem Theme: das Problem im
Flur ist die Leuchtdichte, und ein dunkles Theme leuchtet immer noch. Erzwungen heisst nicht
gespeichert - die Wahl des Nutzers bleibt unberuehrt und wird am Morgen zurueckgestellt.

**Geraetelokal und manuell geschaltet** (`localStorage`, wie Theme und Locale). Das Wandtablet
laeuft in der Praxis auf einem geteilten Konto; eine servergespeicherte Einstellung schaltete
allen Familienmitgliedern das Handy-Dashboard um. Und keine Automatik nach Geraeteform: eine
Fehlerkennung auf dem Laptop erzeugte einen Zustand, den niemand angefordert hat.

**Der Ausstieg ist leise, aber mit Wort, und hell auf Beruehrung** (#1559, 2026-09-29). Ein
dauerhaft voller Knopf widerspraeche der ruhigen Flaeche, ein unsichtbarer waere eine Falle -
und bis #1559 WAR er eine: im Ruhezustand stand nur sein Zeichen da, und wer den Modus aus
Versehen eingeschaltet hatte, sah ein graues Symbol ohne Namen und fand nicht hinaus
(D#1494). Das Wort steht deshalb immer da, in Sekundaerfarbe ohne Kapsel (AA, fokussierbar,
volle Zielgroesse) - die Ruhe kommt aus der Farbe, nicht aus dem Weglassen. Jede Beruehrung
setzt `data-wall-awake` und hebt den Knopf fuer sechs Sekunden auf die volle Kapsel. Das
Polster ist in beiden Zustaenden dasselbe, der Knopf aendert beim Wecken seine Breite nicht;
bewegt wird nur Farbe (Grund, Kante, Schrift).

**Der Fuss klebt, wenn die Flaeche laenger ist als das Bild** (#1559). Auf 390x844 lag der
Ausstieg bei y=832-880, auf 375x667 ganz darunter - der einzige Weg hinaus nur per Scrollen
erreichbar. `.wall__foot` ist `position: sticky` an `bottom: var(--nav-tail)` (im Wand-Modus 0)
und fuellt seinen Streifen mit `--color-bg`, damit der Inhalt DARUNTER durchscrollt; unten haelt
er `--wall-pad`, mindestens die Safe-Area. Keine Regel nach Geraeteklasse: `sticky` greift nur,
wenn der Platz fehlt, und Polster und Gegenrand heben sich im Fluss auf (1280x800 passt weiter,
`test:dashboard-surface-browser`). **Meldungen stehen auf der Wand OBEN**: unten liegen Ausstieg
und Timer-Startknoepfe, und der Hinweis beim Einschalten lag am Telefon acht Sekunden auf „5 Min".
Oben steht die Uhr; sie nimmt keinen Tipp, ist aber Sperrzone (#1917), und wo der Stapel sie
traefe, rueckt er direkt unter das Datum. Die Lage neben einem offenen Dialog (`[data-dock]`)
bleibt Sache der Ausweich-Regel des Toast-Stapels. **Der klebende Fuss hat eine Scroll-Kante**
(#1917): ueber ihm laeuft der Inhalt in einem Verlauf zum Grund der Flaeche aus, statt an einer
unsichtbaren harten Kante mitten im Gesicht zu enden. Sie ist statisch, in jedem Browser
dieselbe, und ihre Hoehe `--wall-foot-edge` ist zugleich der Endabstand vor dem Fuss: am
Scrollende steht der letzte Eintrag frei ueber ihr. Auf der Wand ist sie der Abstand der
Flaeche selbst (`--wall-gap`, die Flaeche wird keinen Pixel hoeher), am Telefon (Flaeche unter
520px, dieselbe Grenze wie beim Zeilentitel) `--space-12`, die Hoehe eines Gesichts. Kein
Zustand, kein Skript, keine Bewegung, kein Tipp bleibt an ihr haengen.

**Die Startknoepfe der Kuechenuhr ruhen sichtbar, und die erste Beruehrung weckt nur**
(2026-09-23). Unsichtbare Knoepfe, die trotzdem auf Beruehrung reagierten, waren eine Falle:
wer die Wand wecken wollte, startete einen Timer. Sie ruhen jetzt in Tertiaerfarbe (AA), der
erste Zeiger auf eine schlafende Wand setzt nur `data-wall-awake` (Tastatur ausgenommen), und
Wecken VERSCHIEBT nichts - die Fusszeile ist ein festes Raster, damit der zweite Tipp dort
trifft, wo der erste hinzielte. Ansagen nennen Start, Stopp und Ende, nicht jede Sekunde.

**Dass die Flaeche lebt, sagt eine absolute Uhrzeit**, kein „vor 3 Minuten": eine relative
Angabe braeuchte einen zweiten Timer, nur damit sie sich selbst aktuell haelt.

## Do's and Don'ts

### Do:
- **Do** jeden Design-Wert aus `public/styles/tokens.css` beziehen; hartkodierte Werte in
  Komponenten sind Bugs (Projekt-Invariante).
- **Do** Dark Mode ueber die privaten `--_name`-Tokens fuehren; die oeffentliche Token-API
  bleibt stabil und wird nie doppelt geaendert.
- **Do** jede neue Farb-Flaechen-Paarung gegen ihren REALEN Hintergrund auf AA messen
  (Pro-Hintergrund-Regel), in Light und Dark.
- **Do** die Stimme fuer alles nehmen, was in jedem Modul dasselbe tut (Shell, FAB,
  Primaer- und Sekundaerknopf, Umschalter, Fokusring, Suche, Overlays), und den Modulton
  nur fuer das, was sagt, WO man ist (Siegel im Kopf, Leisten und Segmente im Modul, Chips,
  Zeilen-Hover, Widget). Das Kriterium ist die Frage, die das Element beantwortet - „was tut
  das hier" oder „wo bin ich" (Eine-Stimme-Regel).
- **Do** eine Folge gleichartiger Zeilen in GENAU EINEN Traeger legen und ueber den
  `+`-Kombinator trennen (Zeilenlisten-Regel).
- **Do** in einer Karte zwischen ZEILE (Haarlinie) und KACHEL (Inset-Well) waehlen; nur
  Bedienelemente behalten ihre Kante.
- **Do** jede Toenung eine benannte Stufe der Toenungsskala nehmen lassen (`--tint-wash` 8 /
  `--tint-state` 12 / `--tint-surface` 16 / `--tint-raised` 24 / `--tint-hint` 50 /
  `--tint-ink` 70 / `--tint-shadow` 20), nie eine eigene Zahl; die vier Flaechenstufen sind
  eine Leiter, ein Zustand steigt eine Sprosse.
- **Do** verschachtelte Radien konzentrisch rechnen (`calc(var(--radius-*) - Npx)`).
- **Do** opake Fallbacks fuer jedes Glas-Element mitliefern (reduced-transparency,
  prefers-contrast, fehlender backdrop-filter).
- **Do** ein Markensiegel nur setzen, wo es eine Rolle hat: an einer Mischstelle benennt es
  eine fremde Herkunft, im eigenen Modul steht es genau einmal als Absender im Kopf
  (Herkunfts-Regel). Und **Do** seinen Ton allein ueber `--seal-accent` setzen: die Scheibe
  traegt ihn im Vollton und mischt gegen gar nichts, deshalb stellt sich die Frage nach dem
  Grund nur noch fuer die Tinte darauf.
- **Do** den Rang eines Blocks ueber Radius und Elevation setzen, nie ueber Material
  (Rang-Regel); der wichtigste Block einer Seite darf nicht der leiseste sein.
- **Do** einer Karte mit Fusszeile den Koerper strecken und die Fusszeile verankern
  (`flex: 1` plus `margin-block-start: auto`), damit Ueberschuss zwischen Inhalt und
  Abschluss faellt statt dahinter.
- **Do** eine Spaltenzahl, die von der Breite eines BAUSTEINS abhaengt, per `@container`
  fragen - und den `container` am VORFAHREN deklarieren, nie am fragenden Element.
- **Do** die Kennzahl einer Karte gestapelt setzen (kleines Label darueber, Zahl in Title 1
  darunter, `tabular-nums`), nie als Zahl am rechten Ende einer Beschriftungszeile. Title 1
  ist die Zusage, nicht die einzige Stufe: eine schmale KENNZAHLREIHE klemmt ihre Werte auf
  Title 2 (unter 600px) und Title 3 (unter 400px), und Title 3 ist die Untergrenze - darunter
  waere die Kennzahl so gross wie die Ueberschrift ueber ihr. Gefragt wird die REIHE, nicht
  die Karte: wer eine Reihe aus `.metric-card` baut, deklariert
  `container: metric-grid / inline-size` an ihr (`.metric-grid` und das Vitalraster der
  Gesundheit tun genau das). Ein `container-type` an der KARTE selbst ist der Fehler dahinter -
  `contain: inline-size` nimmt einem Grid-Item seine intrinsische Breite, und die Karten
  fielen gemessen auf 18px zusammen.
- **Do** einen Wert, der auch auf der kleinsten Stufe nicht passt, TEILEN statt weiter zu
  verkleinern: die Kennzahl traegt eine Aussage, die Praezisierung gehoert in
  `.metric-card__note`. „18.08.2026 · 08:30" war Datum UND Uhrzeit in einer Zahl und lief
  38px ueber die Kartenkante; jetzt steht das Datum im Wert und die Uhrzeit in der Fussnote.
- **Do** eine AUSWERTUNGSFLAECHE nach vier Zusagen bauen (die Grammatik, die der
  Wetterbalken aus v2.21.0 gestiftet hat - sie war bis 2026-08-19 die einzige Flaechenfamilie
  ohne Abschnitt hier, und das war kein Zufall, sondern die Ursache fuer fuenf Dialekte):
  1. **Ein Verhaeltnis steht als ANTEIL am Element** (`--bar-scale`, `--span-from/--span-to`,
     jeweils 0..1), nie als gerechnete Pixelhoehe im Markup. Der Wert ist DATEN, die Geometrie
     ist DESIGN - das Balkenpaar der Haushaltshilfe trug `style="height:88px"` und skalierte
     deshalb nicht mit seiner Karte.
  2. **Ein Balken hat eine BAHN.** Ohne sie zeigt er nur sich selbst; mit ihr zeigt er seinen
     Anteil. Die Bahn ist neutral (`--color-fill-well`), die Fuellung traegt die Farbe.
  3. **Die Achse gehoert INS Diagramm**, nicht daneben: eine Beschriftung ausserhalb des SVG
     verschiebt sich gegen ihre eigenen Gitterlinien, sobald das Diagramm skaliert.
     `chartGridMarkup()` in health.js ist die Referenz - fuenf Linien mit Werteachse, EINE
     geteilte Geometrie (`CHART`) fuer alle drei Charts des Moduls.
  4. **Ein Diagramm ist nie der alleinige Traeger.** Die Zahl steht dabei; der Balken ist der
     zweite Kanal, nicht der Ersatz. Ein Anteil steht leiser HINTER seinem Betrag
     (Sekundaertext, regular, `--space-1` Abstand), auf jeder Flaeche in derselben Form aus
     EINER Rechnung (`sharePercent()` in money.js; Budget-Uebersicht und Statistik seit #1968).
- **Do** jeder fixierten Shell-Flaeche ueber dem Scrollport einen NACHLAUF am Inhaltsende
  geben, und zwar als Summand (`--install-prompt-tail`), nicht als weitere `:has()`-Fassung:
  FAB, Sammelaktions-Pille und Install-Banner sind drei Flaechen und waeren als Kombinatorik
  acht Regeln. Der Banner hatte bis 2026-08-19 gar keinen und verdeckte auf /rewards gemessen
  97px der letzten Zeile, ohne Scrollweg dorthin. Wer den Summanden setzt, schreibt ihn als
  `:root:has(...)` - `html:has(<typ>)` ist Spezifitaet (0,0,2) und verliert gegen das `:root`
  der Basis.
- **Do** den Primaerknopf eines Modulkopfs sein NOMEN zeigen lassen (`newLabel.*`:
  „Termin", „Geburtstag"); das Verb traegt das Plus-Zeichen. Der kurze Text steht als
  `data-dock-label` am `.page-fab`, damit der Router ihn beim Andocken findet
  (Register-Regel). Angedockt ist das sichtbare Nomen der NAME, der ganze Satz steht in
  `data-action-label` und als Titel mit „(n)"; schwebend (ohne Text) ist der Satz das
  `aria-label` (R20, WCAG 2.5.3 - `syncFabName()` in utils/fab.js, die eine Stelle fuer
  Andocken, Abdocken und den Aktionswechsel je Tab).
- **Do** ein sichtbares Etikett im Namen tragen (Label in Name, R20): wo ein `aria-label`
  noetig ist, beginnt es mit dem, was zu sehen ist (Zyklustag „1, 01.10.2026, …"); wo die
  Zeile mehr zeigt als ein Etikett (Kontozeile, Ausgleichszeile), gibt es KEIN `aria-label` -
  der Inhalt ist der Name, die Handlung ein `.sr-only`-Nachsatz („…, Buchungen anzeigen").
  Initialen in einem benannten Knopf sind Zeichnung, kein Text (`data-initials` +
  `::before`, Kontoknopf und Belohnungen). Die Monatszelle traegt ihre Zusammenfassung als
  `.month-day__label` (sr-only), das Sichtbare steht in `.month-day__visual` (`aria-hidden`,
  `display: contents`).
- **Do** die Zugehoerigkeit eines farbigen Blocks ueber eine VOLLTON-Kante tragen (3px an der
  Inline-Start-Seite), sobald der Block sie tragen kann, und Fuellung wie Tinte bei ihren
  gemessenen Rezepten lassen (Vollton-Kanten-Regel).
- **Do** eine Person ueberall in ihrer Identitaetsfarbe zeigen, und zwar auf der
  Vollton-Scheibe; wer keine hat (unverknuepfter Kontakt), bleibt NEUTRAL, statt eine
  gehashte oder die Modul-Toenung zu bekommen (Identitaetsfarben-Regel). Der Modulton stand
  hier bis 2026-08-18 als „neutral" - er ist es nicht, er ist eine leise Farbaussage, und
  sie sagte „Geburtstage" auf einer Seite, die das schon beantwortet hat.
  **Die PERSON schlaegt dabei ihre Kategorie:** eine Kontaktzeile mit
  `family_user_id` traegt Bild und Farbe des Mitglieds, keine Kategoriescheibe - und ihre
  Tinte kommt aus `getReadableTextColor`, weil eine Avatarfarbe frei gewaehlt und ihre
  Helligkeit damit unbestimmt ist.
- **Do** eine Marke, die eine Identitaet NENNT, ihre Farbe im VOLLTON tragen lassen:
  kuratierter Ton als Flaeche (Klasse `vivid-mark`, Tinte `--color-ink-on-vivid`), freie
  Nutzerfarbe als Kante, Ring oder Punkt daneben. Und **Do** neutral bleiben, wo nichts
  genannt wird - ein Platzhalter braucht keine Herkunft (Vollton-Regel).
- **Do** den heutigen Tag einer TAGESZELLE in der Stimme markieren, als Vollton-Marke am
  Datum, waehrend die Zelle selbst leer bleibt (Tagesmarke-Regel) - Kreis um eine Ziffer,
  Kapsel um ein Datum. Eine Fristmeldung („heute faellig") ist keine Tageszelle und
  behaelt ihre Warnfarbe.
- **Do** einer Zahl, die neben einer anderen Zahl steht, ihr Wort mitgeben („wird 37" neben
  „13 Tage"); stand das Wort bisher nur unsichtbar im `title`, ist es sichtbar faellig -
  Kopfrechnen ist keine Gestaltung.
- **Do** eine Liste, die im Schmalen zur Liste wird, dort auch die Zeilen-Grammatik
  sprechen lassen (Textspalte mit `min-width: 0`, unschrumpfbare Bedienzone, EINE Zeile).
  Der Wochenplan der Kueche stapelte als einziger der vier Tabs - Titel, Aktionszeile,
  Anlege-Streifen - und kostete damit 172px Slot fuer 16 Zeichen und 5830px Scroll fuer
  eine Woche bei 454px sichtbarer Flaeche. Als Zeile: 73px und 3056px.
- **Do** ein Etikett seinen Ton EINMAL und voll nennen lassen (Skalen-Regel): eine Meldung
  in der Schrift, eine Rangmarke im 8px-Punkt neben neutraler Schrift, eine Zuordnung als
  Vollton-Flaeche - und neutral (`--color-fill-well`), wenn die genannte Identitaet die des
  Raums ist, in dem das Etikett steht.
- **Do** den Glyph einer Kennzahlkarte die Farbe seines LABELS tragen lassen (`inherit`):
  er ist das Piktogramm der Beschriftung neben ihm, und die Farbe der Karte gehoert ihrem
  WERT (`trendValence()` in `utils/metric-card.js`). Neun Vitalkarten mit neun identischen
  Modul-Glyphen sagten neunmal, in welchem Modul man steht - das ist die Wetter-Glyphe vor
  v2.21.0, nur an einem geteilten Bauteil.
- **Do** je Geld-Bildschirm EINE Zahl fuehren lassen (R18): Saldo in der Uebersicht,
  Nettovermoegen in Konten, Restschuld in Darlehen, Monatskosten in Abos. **EINE feste Stufe je
  Ort (R23, D12), semibold:** in einer Seitenspalte Large Title 34 (`.metric-card--lead`, die
  Spalte meldet sich mit `--metric-rail: ;`), in einer Reihe und mobil in der Kurzzeile Title 1
  28 (`metricGlanceHtml({ lead: true })`, `.budget-glance--lead`, die Nebenwerte als EINE ruhige
  Zeile darunter); in einer Reihe mit mehreren Karten treten die uebrigen eine Stufe zurueck und
  verlieren das Fett (`.metric-grid--led`). **Kleiner nur bei Ueberlauf:** `fitMetricLeads()`
  (utils/metric-card.js) misst Karte bzw. Kurzzeile per ResizeObserver vor dem ersten Bild und
  setzt `data-fit` (Title 2, dann Title 3). Bis R23 waehlte die Zahl ihre Stufe nach ihrer
  Zeichenzahl (18-48px, sechs Groessen derselben Rolle). Ein Ziel ("von 90,00 €") steht in der
  Notiz, nie neben dem Wert. In einer VIERERZEILE (Darlehen) bricht eine lange Leitzahl
  (`leadStep()`, ab 11 Zeichen) die Reihe unter 928px in zwei mal zwei (`.metric-grid--long-lead`,
  R22 S10) - eine Layout-, keine Schriftfrage. Inventar fuehrt seine Kennzahlen auch in der
  Listenspur als Karten (zu zweit, die waehlbare ueber die volle Zeile), nicht als Tabelle.
  Display-Stufen bleiben Anzeigewerten vorbehalten; eine Ueberschrift endet weiter bei Large Title.
- **Do** das LABEL einer Kennzahl in Satzschreibung setzen (Caption 1, medium), nicht als
  gesperrte Versalzeile: es benennt EINEN Wert und wiederholt sich nicht ueber eine Liste, und
  Versalien mit Sperrung laufen ein Drittel breiter ("SAUERSTOFFSÄTTI-/GUNG" brach in jeder
  Vitalkachel). Versal bleibt der Gruppenkopf einer Liste (typography.css).
- **Do** einer Kennzahlkarte mit optionalen Teilen ihre FESTE ANATOMIE geben: Kopf - Wert -
  Trendlinie - Meta, jede in ihrer Zeile (`.metric-rows` am Raster der Karten, panel.css).
  Fehlt ein Teil, bleibt seine Zeile leer, statt die naechste hochzuziehen; mit Subgrid teilen
  die Karten einer Rasterzeile dieselben vier Zeilenhoehen, ohne bleibt der Rueckfall mit
  festen Zeilen. Wert und Einheit stehen auf einer Grundlinie - dafuer meldet sich das Raster
  als `metric-grid`-Container. Fuellt sich das Raster selbst (`auto-fit`/`auto-fill`), sagt
  die Breite der Reihe nichts ueber die Kachel: dort ist zusaetzlich die WERTZEILE ein Container
  (`metric-tile` an `.metric-card__body`) und senkt den Wert auf Title 2, in der schmalsten
  Kachel auf Title 3 mit der Einheit in Caption 1 (#1799, gemessen an "180/110 mmHg";
  `test:metric-tile-fit-browser`). **Don't** die Kachel selbst zum Container machen: ihr
  Layout-Containment schaltet das Subgrid ab, und die geteilten Zeilen sind weg.
- **Do** eine Trendlinie in der Kennzahlkarte im MODULTON zeichnen, 1,5px mit einem Hauch
  Flaeche darunter (14 % auf 0), den letzten Punkt in Label-Farbe mit Ring in Kartenflaeche
  (`.metric-card__spark`). Kein Erfolgs- oder Gefahrenton: bei Vitalwerten ist "hoch" je nach
  Groesse gut oder schlecht. Der Glyph im Kopf bleibt in Label-Farbe - der Modulton steht je
  Karte an genau einer Stelle. Grafikkontrast 3:1 gegen Karte UND Well rechnen.
- **Do** eine Zeitreihe in EINER Sprache zeichnen (R18, Referenz: Budget-Verlauf in
  budget-stats.js): hoechstens drei Gitterlinien (`calmAxis`: Grundlinie, Mitte, Obergrenze mit
  15 % Luft), runde Stoesse und Kappen, eine Flaeche unter der fuehrenden Serie (Ton auf 0),
  EIN Strichmuster - durchgezogen ist gewesen, punktiert kommt noch; Serien trennen sich ueber
  Farbe, Flaeche und den beschrifteten Punkt, nie ueber eine zweite Strichelung. Am heutigen
  Tag (sonst am letzten Tag mit Daten) steht ein 8px-Punkt mit Wert in TEXTFARBE und Hof in
  Flaechenfarbe; "Heute" sitzt UEBER der obersten Linie, nie darauf. Die Zeitachse nennt nur,
  was der Kopf nicht nennt ("1.", "16.", "31." unter "Oktober 2026"). Das Diagramm liegt auf
  einem Traeger wie die Listen daneben (`.budget-stats__card`). Ein Ring traegt seine Summe in
  der Mitte (zwei Zeilen, tabellarisch); der beschreibende Satz bleibt als `sr-only` im Baum.
- **Do** einer Leseansicht einen KOPF geben, wo eine Angabe die Entitaet ausmacht
  (`openDetailView({ head })`, components/detail-view.js `detailHeadEl`): die Zeit in Worten
  ("Heute, 20:00 - 22:00", aus `dayHeadingLabel`), die Faelligkeit in den Worten der Liste,
  beim Geburtstag das Bild gross und zwei Kennzahlen ("wird 41", "in 26 Tagen"). Personen stehen
  dort als Avatar mit Namen, nie als Kommatext. Der Titel bleibt in der Kopfzeile seines
  Rahmens (Blatt, Popover, Spalte - alle drei Title 3); der Kopf wiederholt ihn nicht. Ein
  Farbpunkt vor der Unterzeile loest den frei stehenden Farbstreifen ab (`head.dot`). Was im
  Kopf steht, steht nicht noch einmal als Zeile darunter; Screenreader hoeren das Label der
  abgeloesten Zeile weiter (`subtitleLabel`). In der Aufgabe ist "Erledigen" der EINE
  Primaerknopf des Fusses.
- **Do** das Detail eines Rezepts OHNE Bild direkt mit seinem Inhalt beginnen lassen
  (Mahlzeit-Chips, Zutaten; den Titel traegt der Kopf des Rahmens). Das flache Band im
  Kuechenton aus R18 ist seit R20 weg (Entscheidung Ulas 2026-10-17: am Desktop ein 480px
  breiter Stummel ueber den Zutaten). Kein 3:2-Rahmen, kein grauer Block, kein Ersatz: ein
  Platzhalter fuer ein fehlendes Foto bleibt verboten (R16), und ein Bild, das beim Laden
  scheitert, nimmt seinen Rahmen mit. Die Liste bleibt ohne; Rezepte mit Bild behalten ihr
  Kopfbild. Zutatenmengen stehen in einer eigenen rechtsbuendigen,
  tabellarischen Spalte vor dem Namen (Subgrid ueber die Liste, Rueckfall je Zeile).
- **Do** einen Tageskopf in Worten setzen: "Heute", "Morgen", "Gestern" fuehren, dahinter
  Wochentag und Datum; die anderen Tage nennen nur diese ("Samstag, 24. Oktober", mit Jahr nur
  ausserhalb des laufenden). Quelle ist `dayHeading()` in utils/day-label.js (Arithmetik auf
  dem Key, kein Date aus dem Key).
- **Do** eine Balkenreihe ueber die Zeit so zeichnen wie die Aktivitaet der Gesundheit
  (`activityChartMarkup`): Balken oben voll gerundet und unten gerade auf der Grundlinie (ein
  Pfad, kein `rect rx`), hoechstens ~24px breit, HEUTE im Vollton mit seinem Wert, die
  uebrigen Tage getoent (`--tint-ink` + 5 Punkte: die erste Stufe, die 3:1 gegen die Karte in
  beiden Themes haelt), drei Gitterlinien (`calmDomain`, utils/chart.js). Unter 640px rechnet
  das Diagramm auf einer hoeheren Flaeche mit mehr Fuss, damit die feste Achsenschrift nicht in
  die Balkenfuesse laeuft.
- **Do** Inhalt auf der Uebersicht auf vier Stufen lesen lassen: 17 (Headline), 15
  (Subheadline), 13 (Footnote), 12 (Caption). 14 und 16 bleiben Bedienelementen, 28 und 34 den
  Kennzahlen. Wer umstellt, stellt nach UNTEN oder gleich breit um - so entsteht kein neuer
  Umbruch in langen Sprachen.
- **Do** einen STAND in Textfarbe setzen (Kontostand, Nettovermoegen), nur das Minus rot.
  Gruen bleibt Veraenderungen und Einnahmen vorbehalten: es sagt "es ist mehr geworden", und
  ein Stand ist weder gut noch schlecht.
- **Do** die Werkzeug-Leiste eines Modulkopfs in die Bar-Zeile legen
  (`.page-toolbar__bar`): eine eigene, volle Zeile unter Titel, Center und Aktionen, auf
  allen Viewports, scrollend mit Peek-Fade statt buendigem Ende (Werkzeugzeilen-Regel).
  Ein Zwei-Optionen-Scope-Schalter bleibt in der Titelzeile.
- **Do** ausblenden mit `hidden` und sonst nichts (D13, R21): EINE Regel in reset.css,
  `[hidden]:not([hidden="until-found"]) { display: none !important }`, schlaegt jede Klasse mit
  `display`. Keine Rettungsregel je Klasse mehr, und nie ein `display` ungleich `none` mit
  `!important` - das allein koennte sie schlagen (`test:hidden-cascade`).

### Don't:
- **Don't** einem Nur-lesen-Nutzer einen `disabled`-Knopf hinstellen, wo ein Zustand
  steht; er zeigt das Zeichen (`--static`), und eine Handlung ohne Recht faellt ganz weg.
- **Don't** einen zweiten Buttonradius einfuehren; die Kapsel steht in der `.btn`-Basisregel
  und gilt fuer alle Varianten inklusive Icon-Buttons.
- **Don't** ein `aria-label` als sichtbaren Text weiterreichen; es beschreibt eine
  Handlung („Geburtstag hinzufuegen") und wird als Knopfbeschriftung zum dritten
  Register neben denen, die es schon gibt.
- **Don't** einen zweiten Anlege-Weg neben einem sichtbaren stehen lassen; und wenn
  einer weichen muss, dann unter DERSELBEN Bedingung, unter der der andere erscheint -
  nie unter einer eigenen Zahl daneben.
- **Don't** der Shell oder einem geteilten Bedienelement den Modulton geben - auch nicht
  unter einem eigenen Klassennamen. Der Struktur-Guard liest SELEKTOR-Formen; wer
  `.btn--secondary` unter eigenem Namen umfaerbt, steht in keiner davon. Genau dafuer gibt
  es den zweiten Guard ueber die Klassen-Kopplung im Markup.
- **Don't** Gradient-Text oder Akzent-Titel: Large Titles und Ueberschriften tragen immer
  Label-Farbe.
- **Don't** chromatische Verlaeufe auf Inhalt legen; auch nicht unter freiem Text auf der
  Anmeldebuehne und nicht auf einem Widget. Ein weiches Lichtfeld HINTER einer Glyphe oder
  hinter einer Glastafel ist keins - es fuellt keine Flaeche, traegt keinen Text und hat
  die Ausschalter seiner Gattung (siehe „Colors"). Wer es kopiert, kopiert auch die Messung.
- **Don't** der App wieder einen Backdrop hinter den Inhalt legen (Blobs, Shell-Verlauf):
  die Inhaltsflaeche ist opak und verdeckt ihn. Glas bricht in der App nur Inhalt.
- **Don't** Akzentstreifen an Toolbars, Tabs oder Koepfen; die gehoerten zur abgeloesten Welt.
- **Don't** dekorative Kicker/Eyebrows; eine Versal-Zeile ist nur als echte Information
  erlaubt (Apple-News-Muster, z. B. das Masthead-Datum).
- **Don't** Glas auf Inhalte legen; backdrop-filter gehoert ausschliesslich dem Chrome.
- **Don't** einer Zeile in einer Liste eine Karte anziehen (Schatten, Radius,
  Surface-Fuellung) und nie `border-bottom` je Zeile.
- **Don't** User-/Layer-Farben als Textfarbe verwenden; nur Border/Dot bzw. die gemessenen
  16-%/35-%-Mix-Rezepte, und nie eine ganze Inhaltsflaeche (die Avatar-Scheibe ist der Dot
  in seiner groessten Form, keine Flaeche - Identitaetsfarben-Regel).
- **Don't** Initialen unter die kleinste Textrolle der App schrumpfen; ab 20px Scheibe
  11px, darunter traegt die Farbe allein (Initialen-Schwelle-Regel).
- **Don't** die Bildmarke anfassen (drei transluzente Kreise, Violett plus Sheen); sie ist
  als Marke gesetzt.
- **Don't** Ueberschriften ueber 34px; die Display-Stufen 48/72px sind exklusiv fuer
  Anzeigewerte (Wandtablet-Uhr).
- **Don't** neue Viewport-Breakpoints erfinden; die vier Grenzen sind verbindlich,
  komponenteninterne Umbrueche laufen ueber Container-Queries.
- **Don't** einer Modulliste (Mehr-Blatt, Einstellungen > Module) die Vollton-Scheibe oder eine
  Verlaufskachel geben; Listen tragen die Mulde der Seitenleiste (R23, D9).
- **Don't** Siegel in die Listen eines Moduls streuen oder der Tab-Bar/Sidebar geben; im
  eigenen Raum ist die Herkunft selbstverstaendlich, und die Leiste beantwortet "wo bin ich",
  nicht "woher".
- **Don't** eine Stufe einer Skala als getoentes Feld bauen - schon gar nicht mit
  getoenter Schrift und getoenter Kante darauf. Die vier Prioritaets-Etiketten nannten
  ihren Ton dreimal blass, und zwischen den beiden obersten Stufen blieben davon 3,47
  (light) uebrig. Und **Don't** zwei Stufen derselben Reihe dieselbe Regel schreiben, ohne
  sie ihnen zu GEBEN: `--default` und `--soon` der Geburtstags-Chips waren bitweise gleich,
  weil die Gleichheit in zwei Regeln stand statt in einer.
- **Don't** eine Zugehoerigkeit ueber eine Haarlinie allein tragen lassen; was in einem Theme
  ein Signal ist und im anderen keines, ist kein Kanal. Und **Don't** sie ueber eine
  Waschung tragen lassen: eine Beimischung hellt im Dark fast nur auf. Der Kanal fuer
  Zugehoerigkeit ist das Vollton-Siegel (Widget-Kopf, 2026-08-17; davor Absenderband).
- **Don't** dieselbe Identitaetsfarbe zweimal blass nennen - getoente Flaeche UND blasser
  Glyph darauf. Das ist die zurueckgenommene Fassung des Siegels unter anderem Namen, und
  sie hat elf Mal ueberlebt, weil der Guard von damals die Klasse nannte statt der Regel.
- **Don't** eine Regel dieser Art nur dort anwenden, wo sie aufgefallen ist. Die
  Vollton-Kante erreichte zwei von vier Kalender-Ansichten, und das Vollton-Siegel eine von
  zwoelf Marken - beide Male war die Etappe „fertig", waehrend dasselbe Objekt zwei
  Sprachen sprach. Wer eine Regel setzt, sucht ihre Geschwister ueber die BAUART. Und
  **Don't** dabei eine Bauart ueber `includes()` suchen: „jede Klasse mit `day` darin"
  faengt `birthday` mit, und die Geburtstagszeile ist der dokumentierte Gegenfall. Der
  Vergleich laeuft ueber NAMENSABSCHNITTE.
- **Don't** eine Tab-Leiste in den Actions-Slot oder neben den Titel setzen; dort versteckt
  sie ihre eigenen Module hinter einem Fade (Budget: 1 von 7 Tabs bei 1280px, „Agenda" des
  Kalenders unsichtbar). Die Bar-Zeile ist ihr Ort, und wer sie verlaesst, macht Sonde 19
  und 20 rot (Werkzeugzeilen-Regel).
- **Don't** eine Regel in einen Media-Block schreiben, der VOR den Bauteilen steht, die sie
  ueberschreiben soll. Bei gleicher Spezifitaet gewinnt die spaetere Regel: `display: none`
  und `flex-direction: row` im 640px-Block von meals.css verloren gegen die
  Komponentendefinitionen 200 Zeilen darunter, und jede einzelne Regel sah dabei richtig
  aus. Aufgefallen ist es nur an der Messung - das Wochengitter war danach 358px HOEHER
  statt niedriger. Wer einen schmalen Zustand baut, stellt ihn hinter sein Bauteil.
- **Don't** einen Zustand ueber `opacity` auf dem eigenen Inhalt zeigen; eine Kachel, die
  ihren Text schlechter lesbar macht, um Anfassbarkeit zu signalisieren, steigt stattdessen
  eine Sprosse der Toenungsskala.
- **Don't** einen Wert der Distanz-Skala als Einzelzahl hinschreiben; die Wand-Flaeche fuehrt
  ihre Skala an einer Stelle, und was aus zwei Metern lesbar sein muss, haengt an `vmin` (die
  Uhr an `vw`), nie an `vh`.
- **Don't** einen Scrollbalken dort verstecken, wo mit der Maus gezogen wird: ein
  `scrollbar-width: none` gehoert ans Telefon, wo die Geste zieht, nie in eine
  Desktop-Query. Der Fade darunter ist kein Ersatz - er sagt, DASS mehr da ist, der Balken
  sagt, WO man ist, und laesst einen hin (siehe „Der getoente Scrollbalken").
- **Don't** einem fremden Bild die Hoehe seiner Zeile ueberlassen oder einem engen Raster
  vorsorglich in jeder Zelle einen Bildslot geben. Ein Vorschaubild steht in einem festen
  Rahmen mit `object-fit: cover`, und im Wochenplaner wird nur die bebilderte Karte zum Grid;
  ein fehlendes Bild ist eine ruhige Luecke, keine Layout-Aenderung (siehe „Das Vorschaubild").
- **Don't** hinter ein `:has()`, das nicht im Subjekt steht, einen Universalselektor (`> *`)
  oder ein `::placeholder` setzen (R21 S8). Chrome fuehrt die Reste aller solchen Regeln in
  EINER Invalidierungsmenge; ein `*` oder `::placeholder` darin macht sie zum ganzen
  Teilbaum, und jedes Einfuegen unter `<html>` - ein Dialog, ein Toast, ein Feld - rechnete
  den Stil des ganzen Dokuments neu (gemessen /tasks 1x, Einfuegen + Stil 2,7 -> 1,3 ms).
  Die Kinder beim Namen (`> :is(.a, .b)`), eine Bedingung, die sich selbst erfuellt, oder
  das `:has()` ins Subjekt. Guard `test:frontend-audit`.
- **Don't** Funktion, Lage oder Lesbarkeit an `:has()` haengen (R22 S10). Die Mindestversion
  (Chrome 87, Safari 14.1, docs/installation.md) kennt es nicht und verwirft jede Regel damit;
  verloren gehen darf so nur Verfeinerung (Druck, Hover, eine engere Spalte, ein ruhigerer
  Sprung). Haengt ein Bezugsrahmen daran, setzt der Renderer eine Klasse (`month-day--shifts`).
  Und nie `:has()` in eine Selektorliste mit Teilen ohne `:has()`: der alte Browser verwirft
  die GANZE Liste, auch die Teile, die er kennt (Loeschen-Schub im Dialogfuss, getrennt seit
  R22 S10; im Bestand stehen noch elf solche Listen, Ticket).