# Mac und Browser
> Die Planungsmaschine – Woche im Stundenraster, Leiste aus- und eingeklappt, Bereiche mit Liste und Seitenspalte. Gilt für eine Mac-App und für die Web-App im Browser, mit Maßen in Punkten und Tastenkürzeln.
Quelle: https://brand.heyalbert.family/mac/ · Hey Albert Marke und Designsystem
Am Mac setzt man sich hin. Hier ist Dichte erlaubt: die ganze Woche auf einmal, Tabellen, Spalten, Tastatur. Der Mac ist der einzige Ort, an dem Safe, Tresor und Finanzen ganz aufgehen.
## Mac-App und Web-App
Es gibt zwei Wege auf einen großen Bildschirm, und beide haben **denselben Aufbau**:
- **Die Mac-App** aus `apps/apple` (SwiftUI, ein Ziel neben iPhone und iPad). Nur sie kann, was nativ geht: Face ID für den Tresor, Secure Enclave, Mitteilungen, Kurzbefehle.
- **Die Web-App** unter app.hey-albert.app (Next.js, `apps/web`) für jeden Browser, auch auf Rechnern ohne App Store. Die Web-App ist die Fläche für Planung und Papierkram. Der Tresor ist hier nicht, denn der Browser hat keine Secure Enclave.
Leiste, Kopf, Anrede, Raster und Karten sind dieselben Bauteile. Wer eine Fläche für den Mac entwirft, entwirft sie für beide.
> **Offen**
>
> Die Mac-App gibt es noch nicht im Repository. Die App zieht in Phase 0 aus dem Vorgänger nach `apps/apple` (`docs/12-roadmap.md`). Die Web-App zeigt heute die Fläche „Heute“ und das HQ.
## Fenster und Maße
Die Referenz-Screens sind für ein Fenster von **1440 × 900 pt** gezeichnet. `docs/12-roadmap.md` nennt dazu 1600 × 1000 pt. Das Fenster ist frei größenveränderbar. Unter 1200 pt Breite klappt die Leiste ein (Vorschlag).
| Maß | Wert | Token |
|---|---|---|
| Leiste | 220 pt, eingeklappt 72 pt, 24 pt vom Fensterrand | `--leiste-mac`, `--leiste-mac-eng`, `--radius-block` |
| Rand zwischen Leiste und Fläche | 32 pt | `--flaeche-rand-mac` |
| Kopf | Suchpille 46 pt, Kreise 40 pt | – |
| Anrede | 40 pt | `--grad-anrede-mac` |
| Tagesreiter | 68 pt hoch, Radius 12 pt | `--radius-klein` |
| Karten | Polster 12 pt, Radius 16 pt | `--karte-innen`, `--radius-karte` |
| Zielfläche | 28 pt für den Zeiger | `--ziel-zeiger` |
| Orte in der Leiste | 42 pt hoch | – |
## Woche im Stundenraster
Die Heldenansicht. Sieben Spalten, ein Stundenraster, die Jetzt-Linie. Hier wird die Woche verteilt.
**Mac · Woche im Stundenraster** · 1440 × 900 pt · belegt
| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Leiste | 24, 24, 220, 852 | 220 pt, 24 pt vom Fensterrand | --leiste-mac, --radius-block, --flaeche-leiste, --akzent | LeisteMac | Schwarzer Block: Wortmarke „Hey Albert“, dann Flächen (Heute, Woche, Eingang mit Zähler), Bereiche (Essen, Aufgaben, Schule, Freude, Wichtiges), Persönlich (Ich, Haushalt), unten der Mensch mit „Profil und Einstellungen“. Aktiver Ort: rosa Strich links. Albert ist kein Ort. |
| 2 | Kopf der Fläche | 276, 32, 1132, 48 | Suchpille 46 pt, Kreise 40 pt | --flaeche-erhoben, --akzent, --schwarz, --flaeche-rand-mac | Kopfzeile | Suchpille mit rosa Lupe. Rechts darin „In:“ und gestrichelte Bereichs-Chips: Termine, Fahrten, Aufgaben, Dokumente, Post mit Zähler. Dann drei Kreise in fester Reihenfolge: Klingel, Nachrichten, rosa Plus. |
| 3 | Anrede | 276, 104, 700, 48 | 40 pt | --grad-anrede-mac, --laufweite-titel | Anredezeile | „Guten Morgen, Anna.“ in Bricolage 800, eng gelaufen. Im Wochenboard darunter eine Zeile: „Mittwoch, 3. September · 16:40 · zwei Sachen offen, ein Vorschlag“. |
| 4 | Datum und Personen | 276, 166, 420, 34 | | --schwarz, --person-1, --person-2, --person-3, --person-4, --person-5 | DatumPille, PersonenFilter | Schwarze Datum-Pille „1. – 7. September“, daneben der Personenfilter: alle, dann A, T, F, L, S. |
| 5 | Spannen-Regler | 1010, 166, 398, 34 | | --knopf-zweit, --schwarz | SpannenRegler | Heute · 3 Tage · Mo – Fr · Mo – So · Monat, rechtsbündig. |
| 6 | KW und Tagesreiter | 276, 222, 1132, 68 | Reiter 68 pt, Radius 12 pt | --radius-klein, --grad-kapitaelchen, --schwarz, --sonntag | Tagesreiter | Links „KW 36“. Sieben Reiter mit Wochentag in Kapitälchen und Datum „3.9.“. Heute schwarz, Sonntag rosa-grau. |
| 7 | Zeitachse | 276, 300, 52, 600 | | --schrift-mono, --ziffern-tabellarisch, --grad-zweit | Zeitachse | Uhrzeiten HH:MM in Roboto Mono, halbstündlich. Die aktuelle Zeit steht als rosa Pille: „16:40“. |
| 8 | Stundenraster mit Karten | 344, 300, 1064, 600 | | --karte-innen, --radius-karte, --bedeutung-fahrt, --bedeutung-familie, --rand-vorschlag, --rand-offen | Zeitachse, Karte, BuendelKarte, KonfliktKarte | Eine Spalte je Tag. Die Achse setzt nur den Anfang, eine Karte wird so hoch, wie ihr Inhalt braucht. Fahrten blau, Familie gelb, Termine beige, Albert gestrichelt grau ohne Füllung mit zwei Knöpfen, Offenes gestrichelt rosa. |
| 9 | Jetzt-Linie | 276, 616, 1132, 16 | | --linie-jetzt, --muster-gestrichelt | JetztLinie | Gestrichelt über die ganze Breite, fängt keine Klicks. Rosa heißt hier jetzt, nie Fehler. |
| 10 | Schnellmenü (offen) | 1182, 86, 226, 256 | | --flaeche-erhoben, --radius-karte | SchnellMenue | Liegt über dem Raster, wenn das rosa Plus gedrückt ist: Termin (⌘ N), Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz. Gegenstände statt Verben. |
## Leiste eingeklappt
Eingeklappt bleibt die Leiste 72 pt breit. Die gewonnene Breite geht ganz an die Spalten.
**Mac · Leiste eingeklappt** · 1440 × 900 pt · belegt
| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Leiste eingeklappt | 24, 24, 72, 852 | 72 pt | --leiste-mac-eng, --radius-block | LeisteMac | Oben der Ball im cremefarbenen Kreis, dann nur Zeichen, durch Haarlinien in drei Gruppen getrennt. Der rosa Pfeil am Rand klappt wieder auf. Unten der eigene Kreis. |
| 2 | Kopf der Fläche | 128, 32, 1280, 48 | | | Kopfzeile | Wie ausgeklappt, nur breiter. |
| 3 | Anrede | 128, 104, 700, 48 | | --grad-anrede-mac | Anredezeile | „Guten Morgen, Anna.“ |
| 4 | Haupthandlung | 1218, 106, 190, 42 | | --knopf-primaer-flaeche, --ziel-zeiger | Knopf | „Neuer Termin“ als schwarzer Knopf, daneben der Kreis für die Ansicht. Ein Ziel je Fläche. |
| 5 | Datum, Personen, Spanne | 128, 166, 1280, 34 | | | DatumPille, PersonenFilter, SpannenRegler | Eine Zeile, Spanne rechts. |
| 6 | KW und Tagesreiter | 128, 222, 1280, 68 | | | Tagesreiter | Sieben Reiter, breiter als ausgeklappt. |
| 7 | Zeitachse und Raster | 128, 300, 1280, 600 | | | Zeitachse, Karte, JetztLinie | Die gewonnenen 148 pt gehen ganz an die sieben Spalten. |
### LeisteMac
Quelle: `packages/design-system/components/leiste/LeisteMac.jsx`
Die schwarze Leiste des Mac – Logo, drei Gruppen, unten der Mensch.
```jsx
```
Der aktive Ort trägt einen rosa Strich links und ein aufgehelltes Feld. Eingeklappt als `fassung="pille"` tritt er als rosa Kreis seitlich heraus und die Leiste beult sich um ihn. Albert steht nicht in der Leiste – er ist kein Ort.
Das Logo lädt aus `assets/logo-albert-hell.png`; setze auf `` `data-albert-logo=""`, wenn es woanders liegt.
```ts
/**
* Die schwarze Leiste auf dem Mac - voll (220 px) oder eingeklappt (72 px) als Block oder als Pille.
*/
export interface LeisteOrt { name: string; zeichen: string; zaehler?: number }
export interface LeisteGruppe { gruppe: string; eintraege: LeisteOrt[] }
export interface LeisteMacProps {
/** Der Ort, auf dem man steht: "Heute" | "Woche" | "Eingang" | "Essen" | ... */
aktiverOrt?: string;
/** Gruppen der Navigation. Standard: Flächen, Bereiche, Persönlich. */
orte?: LeisteGruppe[];
eingeklappt?: boolean;
/** Eingeklappt gibt es zwei Fassungen: schmaler "block" oder rundum abgerundete "pille",
* bei der der aktive Ort als rosa Kreis seitlich heraustritt. */
fassung?: "block" | "pille";
/** Der Mensch unten in der Leiste. */
ich?: string;
onWahl?: (ort: string) => void;
onKlappen?: () => void;
onProfil?: () => void;
style?: React.CSSProperties;
}
export function LeisteMac(props: LeisteMacProps): JSX.Element;
export const ORTE: LeisteGruppe[];
```
## Bereiche mit Liste und Seitenspalte
Aufgaben, Wichtiges, Freude und Haushalt folgen einem Muster: Titel mit Zählzeile, Offenes oben, eine Tabelle, rechts eine Seitenspalte.
**Mac · Bereich mit Liste und Seitenspalte** · 1440 × 900 pt · belegt
| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Leiste | 24, 24, 220, 852 | | | LeisteMac | Der aktive Bereich trägt den rosa Strich. |
| 2 | Kopf mit Bereichs-Chips | 268, 24, 1148, 46 | | | Kopfzeile | Die Chips gehören dem Bereich: in Aufgaben „Alle, Offen, Kinder, Haushalt“, im Safe „Verträge, Ausweise, Bescheide, Fristen“. |
| 3 | Titel und Zählzeile | 268, 88, 700, 64 | | --grad-anrede-mac, --grad-zweit | Anredezeile | „Aufgaben“, darunter „Diese Woche · 18 Aufgaben · 2 ohne Zuständigen“. Die Zählzeile nennt Offenes immer. |
| 4 | Haupthandlung oder Zahl-Kacheln | 996, 88, 420, 100 | | | Knopf, ZahlKachel | Rechts oben entweder ein schwarzer Knopf („Aufgabe anlegen“, „Menschen einladen“) oder zwei Zahl-Kacheln („3 Fristen in den nächsten 90 Tagen“). |
| 5 | Offen, ohne Zuständigen | 268, 196, 786, 156 | | --rand-offen | Karte | Ganz oben, gestrichelt rosa umrandet: „der einzige Ort, an dem eine Aufgabe ohne Namen liegen darf“. Jede Zeile trägt „Noch niemand“. |
| 6 | Tabelle | 268, 372, 786, 356 | | --hell, --linie-haar, --grad-kapitaelchen | Avatar, ZustandsPille, Knopf | Kopf in Kapitälchen, Zeilen mit Haarlinie, rechts Stand oder Handlung je Zeile. Dichte ist am Mac erlaubt. |
| 7 | Seitenspalte | 1076, 196, 340, 306 | | --bedeutung-familie, --schwarz | Karte, TalerStand | Was zum Bereich gehört, aber nicht in die Liste: Sonntagsrunde, Taler dieser Woche, der Tresor als schwarze Karte mit „Mit Face ID öffnen“. |
| 8 | Hinweise unten | 268, 740, 1148, 60 | | --flaeche-karte | | Im Register Sachbearbeiter, was gilt: „Was wer sehen darf, entscheidet die Datenbank, nicht ein ausgeblendeter Knopf.“ |
## Die Sonntagsrunde
Die Sonntagsrunde ist eine eigene Fläche ohne Leiste. Acht geführte Schritte, Großschrift für den Familienkreis, ein Mensch ist dran. Die Runde läuft vom Mac oder iPad per AirPlay auf den Fernseher. Der Screen ist für 1920 × 1080 pt gezeichnet.
*Sonntagsrunde · breitbild · 3840 × 2160 px*
## Tastatur
Am Mac geht alles mit der Tastatur. Fokus ist immer sichtbar: 2 pt Ring in Offen-Rosa mit 2 pt Abstand, nur bei `:focus-visible`.
| Kürzel | Was | Stand |
|---|---|---|
| ⌘ N | neuer Termin | belegt (Schnellmenü im Referenz-Screen) |
| ⌘ K | Befehlspalette | belegt (`docs/12-roadmap.md`, Phase 0) |
| ⌘ J | Albert fragen | belegt (`docs/11-produkt.md`) |
| ⌘ 1 – 3 | Linsen auf Heute: Verlauf, Tafel, Haushalt | belegt (`docs/11-produkt.md` §5b) |
| ⌘ F | Suche im Kopf | Vorschlag |
| Pfeiltasten | Karte im Raster verschieben, angekündigt für Screenreader | belegt als Anforderung (`docs/11-produkt.md` §5b) |
| ⌘ Z | Rückgängig | Vorschlag, folgt dem System |
| ⌘ \ | Leiste ein- und ausklappen | Vorschlag |
Die Kürzel stehen nur am Mac im Schnellmenü. Am iPhone und iPad nicht.
> **Offen**
>
> `docs/11-produkt.md` beschreibt Albert als Zeichen unten rechts, 44 pt, mit ⌘ J. Das Designsystem sagt, Albert sei kein Ort, und kein Referenz-Screen zeigt das Zeichen. Wo die Assistenzfläche sitzt, ist offen.
## Rollen am Mac
| Rolle | Einstieg |
|---|---|
| Anna, Tobias | Wochenboard, ganze Woche, Leiste mit allem |
| Kind ab 13 | eigener Kalender, Aufgaben – ohne Safe, Tresor, Finanzen |
| Kinder bis 12, Gäste, Au-pair | kein Einstieg am Mac (Matrix III) |
## Alle Flächen am Mac
*Wochenboard · mac · 2880 × 1800 px*
*Aufgaben · mac · 2880 × 1800 px*
*Safe · mac · 2880 × 1800 px*
*Anlass · mac · 2880 × 1800 px*
*FamilyFeedMac · mac · 2880 × 1800 px*
*Haushalt · mac · 2880 × 1800 px*
## Was es am Mac nicht gibt
- „Nimm mit“ abhaken, Abfahrt und Ankunft, Einkaufsliste im Laden. Das passiert unterwegs, am iPhone und an der Uhr.
- Brief scannen und Foto der Buchseite. Dafür ist die Kamera des iPhones da.
- HealthKit, also Bewegung und Gesundheit. Es gibt sie auf dem Mac nicht.
- Kinderräume für Kinder unter 13.