# Screens

> Wie ein Screen von Hey Albert aufgebaut ist – auf iPhone, iPad, Mac, Watch und im Browser. Geräte, Orte, Rollen, Dichte, Raster, Kopf und Karten, mit allen Screens von Familie Sonntag.

Quelle: https://brand.heyalbert.family/screens/ · Hey Albert Marke und Designsystem

Hey Albert hat ein Datenmodell und viele Ansichten. Ein Termin ist auf dem Mac eine Karte im Stundenraster, am iPhone eine Zeile in der Liste und auf der Uhr eine Frage mit zwei Antworten. Es ist immer dieselbe Zeile in der Datenbank. Dieses Kapitel beschreibt, was für alle Geräte gilt. Die Kapitel [iPhone](/iphone/), [iPad](/ipad/), [Mac](/mac/) und [Watch](/watch/) zeigen den Aufbau Region für Region, in Punkten.

## Ein Datenmodell, viele Ansichten

Leitsatz 2 ist die Grundlage jedes Screens. Woche, Heute und Kalender rendern dieselben Sachen. Eine Ansicht darf filtern, gruppieren und verdichten. Eigene Daten darf sie nie halten.

> **So**
>
> Eine neue Ansicht liest dieselben Zeilen wie die vorhandenen und zeigt sie anders. Die Rückfahrt am Samstag ist im Wochenboard, in der Liste, im Wochenüberblick und in der Sonntagsrunde dieselbe Sache.

> **Nicht so**
>
> Eine Ansicht bekommt eine eigene Kopie der Daten, „damit es schneller geht“. Dann gibt es zwei Wahrheiten, und eine davon ist falsch.

## Geräte und ihre Rolle

| Gerät | Rolle | Was dort hingehört |
|---|---|---|
| Mac | die Planungsmaschine | Woche planen, Safe, Finanzen, Sonntagsrunde, Haushalt verwalten |
| iPhone | das Alltagsgerät | unterwegs, im Laden, im Auto, im Flur – mit einer Hand |
| iPad | Familien- und Kindergerät | in der Küche, am Tisch, im Kinderzimmer |
| Apple Watch | das Fünf-Sekunden-Gerät | losfahren, angekommen, abgehakt, abgestimmt |
| Browser | die Web-App | Planung und Papierkram für jeden Rechner, derselbe Aufbau wie am Mac |

Die Regel dahinter steht in `docs/11-produkt.md` §10: Was **geplant** wird, gehört auf den Mac. Was **gemeinsam** passiert, gehört aufs iPad. Was **unterwegs** passiert, gehört aufs iPhone. Was **eine Sekunde** dauert, gehört an die Uhr.

## Orte der App

Die App hat drei Arten von Orten. Albert selbst ist kein Ort. Er wirkt in allen.

- **Flächen:** Heute, Woche, Eingang. Hier stehen Sachen aus allen Bereichen.
- **Bereiche:** Essen, Aufgaben, Schule, Freude, Wichtiges. Hier steht eine Art von Sachen in voller Tiefe.
- **Persönlich:** Ich und Haushalt. Profil, eigene Sachen, Menschen und Rechte.

Die Gruppen sind keine Ziele. Niemand klickt auf „Bereiche“, man klickt auf „Essen“.

## Navigation je Gerät

| Gerät | Navigation | Bauteil |
|---|---|---|
| Mac und Browser | schwarze Leiste links, 220 pt, eingeklappt 72 pt | `LeisteMac` |
| iPad quer | Leiste links wie am Mac (Vorschlag) | `LeisteMac` |
| iPad hochkant | Leiste eingeklappt (Vorschlag) | `LeisteMac` |
| iPhone | schwarze Leiste unten, fünf Plätze, das Plus tritt heraus | `LeistePhone` |
| Watch | keine, eine Frage je Bildschirm | – |
| Kinderraum, Wandmodus | keine Leiste, ein eigener Einstieg | – |

Am iPhone hat die Leiste fünf Plätze: Heute · Woche · Plus · Eingang · Ich. Am Mac stehen alle Orte in drei Gruppen.

> **Offen**
>
> `docs/11-produkt.md` §6 nennt am iPhone die Tabs „Heute · Woche · Einkauf · Essen · Mehr“. Das Bauteil `LeistePhone`, alle Referenz-Screens und alle Website-Screens zeigen „Heute · Woche · Plus · Eingang · Ich“. Diese Seite folgt dem gebauten Bauteil. Die Entscheidung liegt beim Gründer.

## Rollen sehen verschiedene Einstiege

Hey Albert ist keine App mit Rechten, die ausgraut, was jemand nicht darf. Jede Rolle bekommt aus demselben Datenmodell einen eigenen Einstieg. Was jemand sehen darf, entscheidet die Datenbank, nie ein ausgeblendeter Knopf.

| Rolle | Wer | Erste Seite |
|---|---|---|
| `owner`, `adult` | Anna, Tobias | Mac: die ganze Woche · iPhone: Heute nach Dringlichkeit · iPad: Portal |
| `child · small` (6–9) | Lena | iPad: ihr Raum, drei Bildkacheln, Zielflächen 56 pt · iPhone: nur „was ist jetzt“ |
| `child · mid` (10–12) | Felix | iPad: Tagespfad, zwei Knöpfe · iPhone: Schulmappe, Nimm-mit, Fahrt fragen |
| `child · teen` (13+) | – | fast die Ansicht der Erwachsenen, ohne Safe, Tresor und Finanzen |
| `guest` | Oma Grete, Opa Werner, Oma Hilde | iPhone: drei Dinge – eingeladene Termine, Album, „Ich fahre“ |
| `service` | Sofia | iPhone: ihre Liste – Schichten, ihre Fahrten, Einkauf; jede Freigabe mit Ablaufdatum |

Safe, Tresor und Finanzen öffnen sich nur über `albert.may_enter()`. Kinder sehen sie nie, auch nicht ausgegraut.

## Dichte: fünf Sekunden

Auf der ersten Seite steht so viel, wie diese Rolle auf diesem Gerät in fünf Sekunden erfasst. Für Oma Grete sind das drei Dinge. Für Lena vier. Für Anna am Mac darf es die ganze Woche sein, sie hat sich hingesetzt. Wer mehr braucht, geht eine Ebene tiefer.

Vor jedem Screen stehen drei Fragen:

1. Für wen ist diese Seite? „Für alle“ heißt: für niemanden.
2. Wie viele Dinge stehen darauf, und wie viele Sekunden hat diese Rolle?
3. Blende ich aus, oder baue ich einen eigenen Einstieg? Ausgrauen ist immer die schlechtere Antwort.

## Raster, Ränder, sichere Zonen

Alles liegt auf dem 8-pt-Raster mit 4 pt als halbem Schritt. Der Rand der Fläche ist am Mac `--flaeche-rand-mac`, am iPhone `--flaeche-rand-phone`. Karten haben innen `--karte-innen` und untereinander `--karte-abstand`.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| raum-halb | var(--raum-halb) | 4px |  |  |
| raum-1 | var(--raum-1) | 8px |  |  |
| raum-2 | var(--raum-2) | 16px |  |  |
| raum-3 | var(--raum-3) | 24px |  |  |
| raum-4 | var(--raum-4) | 32px |  |  |
| raum-5 | var(--raum-5) | 40px |  |  |
| raum-6 | var(--raum-6) | 48px |  |  |
| raum-8 | var(--raum-8) | 64px |  |  |
| karte-innen | var(--karte-innen) | 12px |  |  |
| karte-abstand | var(--karte-abstand) | 8px |  |  |
| flaeche-rand-mac | var(--flaeche-rand-mac) | 32px |  |  |
| flaeche-rand-phone | var(--flaeche-rand-phone) | 20px |  |  |
| leiste-mac | var(--leiste-mac) | 220px |  |  |
| leiste-mac-eng | var(--leiste-mac-eng) | 72px |  |  |
| leiste-phone-hoehe | var(--leiste-phone-hoehe) | 64px |  |  |
| umbruch-tisch | var(--umbruch-tisch) | 768px |  | ab hier ist es ein Tisch, kein Handy (nur Tailwind-Breakpoint, nicht in spacing.css) |

Die sicheren Zonen gehören dem System: Statusleiste, Dynamic Island, Home-Indikator. Wir zeichnen dort nichts und imitieren keine Statusleiste. Bedienelemente liegen nie unter der Leiste am iPhone.

Zielflächen sind Untergrenzen, keine Richtwerte: Zeiger 28, Finger 44, Kind 56.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| ziel-zeiger | var(--ziel-zeiger) | 28px |  |  |
| ziel-finger | var(--ziel-finger) | 44px |  |  |
| ziel-kind | var(--ziel-kind) | 56px |  |  |

## Der Kopf einer Fläche

Jede Fläche beginnt gleich. Erst der Kopf, dann die Anrede, dann die Zeile mit Datum und Filter, dann der Inhalt.

- **Kopf** (Mac, iPad): Suchpille mit rosa Lupe, gestrichelte Bereichs-Chips, rechts drei Kreise in fester Reihenfolge – Klingel, Nachrichten, rosa Plus. Am iPhone gibt es keinen Kopf, das Plus sitzt in der Leiste.
- **Anrede:** „Guten Morgen, Anna.“ in Bricolage 800. Auf Heute grüßt sie, auf allen anderen Flächen benennt sie: „Woche 36“, „Aufgaben“, „Einkauf“. Darunter eine Nebenzeile mit Datum und dem, was zählt: „zwei Sachen offen, ein Vorschlag“.
- **Zeile:** Datum-Pille, Personenfilter, Spannen-Regler.

### Kopfzeile

Quelle: `packages/design-system/components/kopf/Kopfzeile.jsx`

Der Kopf jeder Fläche auf dem Mac und iPad – Suche links, drei Kreise rechts.

```jsx
<Kopfzeile bereiche={["Termine", "Fahrten", "Aufgaben", "Dokumente", { name: "Post", zaehler: 2 }]}
  onPlus={() => setMenue(true)} />
```

Die Reihenfolge der Kreise steht fest: Klingel, Nachrichten, Plus – Plus ist rosa und immer der letzte. Chips sind gestrichelt, weil sie Bereiche einschränken und nichts anlegen.

```ts
/**
 * Der Kopf jeder Flaeche: Suchfeld mit rosa Lupe, Bereichs-Chips, drei Kreise rechts.
 */
export interface KopfzeileProps {
  platzhalter?: string;
  /** Bereichs-Chips, gestrichelt: "Termine", "Fahrten", "Aufgaben", "Dokumente", { name: "Post", zaehler: 2 }. */
  bereiche?: Array<string | { name: string; zaehler?: number }>;
  gewaehlterBereich?: string;
  onBereich?: (name: string) => void;
  onSuche?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  /** Rosa Punkt an der Klingel, wenn etwas Neues da ist. */
  klingelPunkt?: boolean;
  onKlingel?: () => void;
  onNachrichten?: () => void;
  /** Oeffnet das Schnellmenue "Schnell anlegen". */
  onPlus?: () => void;
  style?: React.CSSProperties;
}
export function Kopfzeile(props: KopfzeileProps): JSX.Element;
```

## Die fünf Kartenarten

Aus Karten bestehen Heute, Woche und Kalender. Die Art sagt die Fläche, das Symbol die Sache, die Punkte die Menschen.

| Art | Fläche und Rand | Wofür |
|---|---|---|
| Termin | beige, Haarlinie | alles mit Zeit und Ort |
| Fahrt | blau | Fahrten mit Von → Nach |
| Familie | gelb | Rituale, gemeinsames Essen, Sonntagsrunde |
| Vorschlag | gestrichelt grau, ohne Füllung (Mac) · gelb mit Formen (iPhone) | Alberts Vorschlag, immer mit zwei Knöpfen |
| Offen | gestrichelt Offen-Rosa | etwas ohne Zuständigen, laut gezeigt |

### Karte

Quelle: `packages/design-system/components/karten/Karte.jsx`

Die Karte – das Ding, aus dem Heute, Woche und Kalender bestehen. Ein Datenmodell, viele Ansichten.

```jsx
<Karte art="fahrt" titel="Rückfahrt Auswärtsspiel" ort="Sportplatz Nord → Zuhause"
  zeit="14:00 – 14:30" leute={["felix"]} hoehe="hoch"
  pillen={<ZustandsPille>Kein Fahrer</ZustandsPille>}
  knoepfe={<Knopf>Ich fahre</Knopf>} />

<Karte art="vorschlag" titel="Bei Tobias steht ab 13:00 nichts. Fragen?"
  unterzeile="Vorschlag von Albert"
  knoepfe={<KarteVorschlagKnoepfe onUebernehmen={…} onZurueck={…} />} />
```

Register Family Manager, kurz und ruhig. Die Bedeutungen werden nicht getauscht: blau ist Fahrt, gelb ist Familie, gestrichelt rosa heisst "ohne Zuständigen". Ein Vorschlag hat immer zwei Knöpfe – Albert erledigt nie still.

```ts
/**
 * Die Karte in fuenf Arten. Die Farbe sagt die Art, das Symbol die Sache, die Punkte die Leute.
 */
export interface KarteProps {
  /** "termin" beige | "fahrt" blau | "familie" gelb | "vorschlag" gestrichelt grau | "offen" gestrichelt rosa. */
  art?: "termin" | "fahrt" | "familie" | "vorschlag" | "offen";
  /** Kartentitel, ein Gegenstand: "Rückfahrt Auswärtsspiel". */
  titel: string;
  /** Zweitzeile: Ort oder Bündel-Teile, mit " · " getrennt. */
  ort?: React.ReactNode;
  /** Zeitspanne als "16:00 – 17:00" (Halbgeviertstrich mit Leerzeichen). */
  zeit?: string;
  /** Wer dabei ist; der Zustaendige zuerst. */
  leute?: string[];
  /** Sach-Symbol, wenn es nicht aus der Art folgt: "schule", "sport", "arzt", "musik". */
  symbol?: string;
  /** "kurz" (78 px) oder "hoch" (132 px) - fuer das Stundenraster. */
  hoehe?: "kurz" | "hoch";
  /** Zustands- und Fahrt-Pillen. */
  pillen?: React.ReactNode;
  /** Handlungsknoepfe; bei Vorschlaegen immer zwei. */
  knoepfe?: React.ReactNode;
  /** Kleine Zeile unter dem Inhalt, z. B. "Vorschlag von Albert". */
  unterzeile?: React.ReactNode;
  /** Einzeiler fuer Listen: Symbol, Titel, Zeit, Punkt. */
  kompakt?: boolean;
  klickbar?: boolean;
  /** Leicht gekippt, wie ein liegender Klebezettel. */
  gekippt?: boolean;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Karte(props: KarteProps): JSX.Element;
export function KarteVorschlagKnoepfe(props: { uebernehmen?: string; zurueck?: string; onUebernehmen?: () => void; onZurueck?: () => void }): JSX.Element;
```

## Zustände sind Pflicht

Kein Screen ist fertig ohne seine Zustände: leer, lädt, Fehler, offline, rückgängig. Alle stehen im Kapitel [Zustände](/zustaende/). Fertig ist eine Ansicht erst mit allem hier:

- [ ] leerer Zustand
- [ ] Skelett statt Kreisel
- [ ] Tastatur und :focus-visible
- [ ] Handy und Tisch
- [ ] hell und dunkel als Token-Umschaltung
- [ ] optimistisches Update mit „Rückgängig“
- [ ] richtiges Register
- [ ] kein Hex-Wert
- [ ] Zielflächen 28/44/56

## Was es wo gibt

„Voll“ heißt: hier gehört es hin. „Reduziert“: vorhanden, bewusst knapper. „Lesen“: ansehen, nicht bearbeiten. Aus `docs/11-produkt.md` §10, gekürzt auf die Orte der App.

| Ort | Mac | iPad | iPhone | Watch |
|---|---|---|---|---|
| Heute | reduziert | voll | voll | reduziert |
| Woche (Wochenboard) | voll | reduziert | lesen | – |
| Eingang (Post, Scan) | voll | voll | reduziert, Scan voll | – |
| Essen und Einkauf | voll (Plan) | voll | voll (Liste im Laden) | Abstimmung |
| Aufgaben | voll | voll | reduziert, abhaken voll | abhaken |
| Fahrten | planen voll | reduziert | Abfahrt und Ankunft voll | Abfahrt und Ankunft |
| Schule | Stundenplan | reduziert | Schulmappe voll | Hausaufgabe diktieren |
| Freude (Feed, Anlässe, Album) | voll | voll | reduziert | – |
| Wichtiges (Safe, Tresor, Finanzen) | voll | reduziert | lesen | – |
| Sonntagsrunde | voll | voll | lesen | – |
| Haushalt und Rechte | voll | reduziert | lesen | – |

## Alle Screens von Familie Sonntag

Das sind die Screens, mit denen Website, App Store und diese Seite arbeiten. Jeder ist als PNG zum Herunterladen verlinkt.

![Anlass](https://brand.heyalbert.family/bilder/screens/Anlass.png)

*Anlass · mac · 2880 × 1800 px*

![Aufgaben](https://brand.heyalbert.family/bilder/screens/Aufgaben.png)

*Aufgaben · mac · 2880 × 1800 px*

![Eingang](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![Einkauf](https://brand.heyalbert.family/bilder/screens/Einkauf.png)

*Einkauf · iphone · 780 × 1688 px*

![Essensplan](https://brand.heyalbert.family/bilder/screens/Essensplan.png)

*Essensplan · iphone · 780 × 1688 px*

![FamilyFeed](https://brand.heyalbert.family/bilder/screens/FamilyFeed.png)

*FamilyFeed · iphone · 780 × 1688 px*

![FamilyFeedMac](https://brand.heyalbert.family/bilder/screens/FamilyFeedMac.png)

*FamilyFeedMac · mac · 2880 × 1800 px*

![Gewohnheiten](https://brand.heyalbert.family/bilder/screens/Gewohnheiten.png)

*Gewohnheiten · iphone · 780 × 1688 px*

![Haushalt](https://brand.heyalbert.family/bilder/screens/Haushalt.png)

*Haushalt · mac · 2880 × 1800 px*

![Jahresbuch](https://brand.heyalbert.family/bilder/screens/Jahresbuch.png)

*Jahresbuch · objekt · 2246 × 1588 px*

![LenaBereich](https://brand.heyalbert.family/bilder/screens/LenaBereich.png)

*LenaBereich · ipad · 1668 × 2388 px*

![Main](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![MomentTurnbeutel](https://brand.heyalbert.family/bilder/screens/MomentTurnbeutel.png)

*MomentTurnbeutel · iphone · 780 × 1688 px*

![MomentVersicherung](https://brand.heyalbert.family/bilder/screens/MomentVersicherung.png)

*MomentVersicherung · iphone · 780 × 1688 px*

![Rueckblick](https://brand.heyalbert.family/bilder/screens/Rueckblick.png)

*Rueckblick · ipad · 1668 × 2388 px*

![Safe](https://brand.heyalbert.family/bilder/screens/Safe.png)

*Safe · mac · 2880 × 1800 px*

![Schule](https://brand.heyalbert.family/bilder/screens/Schule.png)

*Schule · iphone · 780 × 1688 px*

![Sonntagsrunde](https://brand.heyalbert.family/bilder/screens/Sonntagsrunde.png)

*Sonntagsrunde · breitbild · 3840 × 2160 px*

![Taler](https://brand.heyalbert.family/bilder/screens/Taler.png)

*Taler · iphone · 780 × 1688 px*

![Ueberall](https://brand.heyalbert.family/bilder/screens/Ueberall.png)

*Ueberall · iphone · 780 × 1688 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

![Wochenboard](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

![Anlass](https://brand.heyalbert.family/bilder/screens/Anlass.png)

*Anlass · mac · 2880 × 1800 px*

![Aufgaben](https://brand.heyalbert.family/bilder/screens/Aufgaben.png)

*Aufgaben · mac · 2880 × 1800 px*

![Eingang](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![Einkauf](https://brand.heyalbert.family/bilder/screens/Einkauf.png)

*Einkauf · iphone · 780 × 1688 px*

![Essensplan](https://brand.heyalbert.family/bilder/screens/Essensplan.png)

*Essensplan · iphone · 780 × 1688 px*

![FamilyFeed](https://brand.heyalbert.family/bilder/screens/FamilyFeed.png)

*FamilyFeed · iphone · 780 × 1688 px*

![FamilyFeedMac](https://brand.heyalbert.family/bilder/screens/FamilyFeedMac.png)

*FamilyFeedMac · mac · 2880 × 1800 px*

![Gewohnheiten](https://brand.heyalbert.family/bilder/screens/Gewohnheiten.png)

*Gewohnheiten · iphone · 780 × 1688 px*

![Haushalt](https://brand.heyalbert.family/bilder/screens/Haushalt.png)

*Haushalt · mac · 2880 × 1800 px*

![Jahresbuch](https://brand.heyalbert.family/bilder/screens/Jahresbuch.png)

*Jahresbuch · objekt · 2246 × 1588 px*

![LenaBereich](https://brand.heyalbert.family/bilder/screens/LenaBereich.png)

*LenaBereich · ipad · 1668 × 2388 px*

![Main](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![MomentTurnbeutel](https://brand.heyalbert.family/bilder/screens/MomentTurnbeutel.png)

*MomentTurnbeutel · iphone · 780 × 1688 px*

![MomentVersicherung](https://brand.heyalbert.family/bilder/screens/MomentVersicherung.png)

*MomentVersicherung · iphone · 780 × 1688 px*

![Rueckblick](https://brand.heyalbert.family/bilder/screens/Rueckblick.png)

*Rueckblick · ipad · 1668 × 2388 px*

![Safe](https://brand.heyalbert.family/bilder/screens/Safe.png)

*Safe · mac · 2880 × 1800 px*

![Schule](https://brand.heyalbert.family/bilder/screens/Schule.png)

*Schule · iphone · 780 × 1688 px*

![Sonntagsrunde](https://brand.heyalbert.family/bilder/screens/Sonntagsrunde.png)

*Sonntagsrunde · breitbild · 3840 × 2160 px*

![Taler](https://brand.heyalbert.family/bilder/screens/Taler.png)

*Taler · iphone · 780 × 1688 px*

![Ueberall](https://brand.heyalbert.family/bilder/screens/Ueberall.png)

*Ueberall · iphone · 780 × 1688 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

![Wochenboard](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

![Anlass](https://brand.heyalbert.family/bilder/screens/Anlass.png)

*Anlass · mac · 2880 × 1800 px*

![Aufgaben](https://brand.heyalbert.family/bilder/screens/Aufgaben.png)

*Aufgaben · mac · 2880 × 1800 px*

![Eingang](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![Einkauf](https://brand.heyalbert.family/bilder/screens/Einkauf.png)

*Einkauf · iphone · 780 × 1688 px*

![Essensplan](https://brand.heyalbert.family/bilder/screens/Essensplan.png)

*Essensplan · iphone · 780 × 1688 px*

![FamilyFeed](https://brand.heyalbert.family/bilder/screens/FamilyFeed.png)

*FamilyFeed · iphone · 780 × 1688 px*

![FamilyFeedMac](https://brand.heyalbert.family/bilder/screens/FamilyFeedMac.png)

*FamilyFeedMac · mac · 2880 × 1800 px*

![Gewohnheiten](https://brand.heyalbert.family/bilder/screens/Gewohnheiten.png)

*Gewohnheiten · iphone · 780 × 1688 px*

![Haushalt](https://brand.heyalbert.family/bilder/screens/Haushalt.png)

*Haushalt · mac · 2880 × 1800 px*

![Jahresbuch](https://brand.heyalbert.family/bilder/screens/Jahresbuch.png)

*Jahresbuch · objekt · 2246 × 1588 px*

![LenaBereich](https://brand.heyalbert.family/bilder/screens/LenaBereich.png)

*LenaBereich · ipad · 1668 × 2388 px*

![Main](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![MomentTurnbeutel](https://brand.heyalbert.family/bilder/screens/MomentTurnbeutel.png)

*MomentTurnbeutel · iphone · 780 × 1688 px*

![MomentVersicherung](https://brand.heyalbert.family/bilder/screens/MomentVersicherung.png)

*MomentVersicherung · iphone · 780 × 1688 px*

![Rueckblick](https://brand.heyalbert.family/bilder/screens/Rueckblick.png)

*Rueckblick · ipad · 1668 × 2388 px*

![Safe](https://brand.heyalbert.family/bilder/screens/Safe.png)

*Safe · mac · 2880 × 1800 px*

![Schule](https://brand.heyalbert.family/bilder/screens/Schule.png)

*Schule · iphone · 780 × 1688 px*

![Sonntagsrunde](https://brand.heyalbert.family/bilder/screens/Sonntagsrunde.png)

*Sonntagsrunde · breitbild · 3840 × 2160 px*

![Taler](https://brand.heyalbert.family/bilder/screens/Taler.png)

*Taler · iphone · 780 × 1688 px*

![Ueberall](https://brand.heyalbert.family/bilder/screens/Ueberall.png)

*Ueberall · iphone · 780 × 1688 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

![Wochenboard](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

![Sonntagsrunde](https://brand.heyalbert.family/bilder/screens/Sonntagsrunde.png)

*Sonntagsrunde · breitbild · 3840 × 2160 px*

![Jahresbuch](https://brand.heyalbert.family/bilder/screens/Jahresbuch.png)

*Jahresbuch · objekt · 2246 × 1588 px*

> **Wörter in den Screens**
>
> Einige Website-Screens (Eingang am iPhone, die Leiste am Mac) schreiben „Inbox“, das Bauteil `LeisteMac` und die Doku schreiben „Eingang“. Bis zur Entscheidung gilt in der App „Eingang“.