# Typografie-Skala — Konzept

> **Status:** Umgesetzt (Variante A). Ergänzt [`css-strategie.md`](css-strategie.md)
> und passt in die „zuerst aufräumen"-Linie vor den Funktionsergänzungen.
> Variante B (nur eine Textgrösse) ist als möglicher nächster Schritt am Ende
> beschrieben.

## Problem

`css/app.css` setzt **19 hartkodierte `font-size`-Werte** in gemischten Einheiten
(px und das Keyword `small`), jeweils pro Komponente einzeln — an Bootstraps
Typo-System vorbei. Es gibt **keine Basis-Schriftgrösse** (nur `font-family`),
also gilt Bootstrap-4-Default (1rem = 16px), den dann jede Komponente lokal
überschreibt.

Folgen: In einer einzigen Tabelle (Übersicht) stehen vier Grössen (15/14/13/12
px) in 1-px-Schritten — die dahinterliegende Hierarchie (Kanton > Gemeinde >
Brennpunkt > Datum) verpufft als Unruhe. Eine Änderung der Grundgrösse hiesse:
19 Stellen anfassen. px skaliert zudem nicht mit der Standard-Schriftgrösse des
Nutzers (Barrierefreiheit).

## Prinzip

1. **Wenige Stufen mit klaren Rollen** statt vieler Einzelwerte.
2. **rem statt px** — skaliert mit der Nutzer-Einstellung; ein zentraler Ort
   (Grundgrösse) steuert alles.
3. **Hierarchie über Grösse + Schriftgewicht + Farbe**, nicht über 1-px-Schritte.
4. **Ein zentraler Ort** für die Skala (CSS-Custom-Properties neben `--primary`
   in `css/custom-colors.css`).

## Umgesetzte Skala (Variante A)

Grundgrösse = 1rem = 16px (Bootstrap-4-Default beibehalten). Genau **eine
Textgrösse für alles Inhaltliche**, eine **leisere Stufe für Metadaten**, dazu
die Icon-Grösse:

| Token | rem | ≈ px | Rolle |
| --- | --- | --- | --- |
| `--fs-base` | 1rem     | 16 | Fliesstext, Buttons, Tabellen, Formulare, Überschriften (mit Gewicht) |
| `--fs-meta` | 0.875rem | 14 | Metadaten: Datum, Badges, Kommentar-Meta, kleine Aktions-Icons |
| `--fs-icon` | 3rem     | 48 | grosse dekorative Icons (Leerzustände, Upload) |

Drei Tokens ersetzen die früheren 11/12/13/14/15/16/18/20/48/50 px + `small`.
Hierarchie entsteht nicht mehr über die Grösse, sondern über **Gewicht, Farbe
und Abstand**.

## Zuordnung (früher → jetzt)

- **Inhalt → `--fs-base` (16):** Tabellenkopf, Kanton-/Gemeinde-/Brennpunkt-
  Zeilen, Termin-Text und -Header, Formularfelder, Doku-Buttons und -Titel,
  Leerzustand-Text. Die Überschriften (Termine- und Doku-Titel) haben zusätzlich
  `font-weight: 600` bekommen, damit sie bei 16 nicht verschwimmen.
- **Metadaten → `--fs-meta` (14):** Datum (Übersicht), Termin-Badge,
  Kommentar-Meta, kleine Aktions-Icons (Papierkorb/Bearbeiten/…).
- **Icons → `--fs-icon` (48):** Leerzustand-Icon, Upload-Icon.

**Hierarchie der Übersicht:** Kanton (16, fett, grauer Balken) > Gemeinde (16,
halbfett, hell, eingerückt) > Brennpunkt (16, normal, weiss, tiefer eingerückt)
> Datum (14, gedämpft). Alle Textzeilen sind gleich gross; die Staffelung trägt
Hintergrund, Einrückung, Gewicht und Farbe — nicht mehr die Schriftgrösse.

## Umsetzungsweg (reversibel, inkrementell)

Die App bindet das **vorkompilierte** `bootstrap.min.css` ein — kein SCSS-Build
zur Hand. Daher ohne Bootstrap-Neubau:

1. Tokens als Custom-Properties in `css/custom-colors.css` definieren (dort wohnt
   bereits `--primary`).
2. Die verstreuten `font-size`-Werte in `css/app.css` Bereich für Bereich durch
   `var(--fs-…)` ersetzen — nach jedem Bereich mit dem Golden-Master-Test
   gegenprüfen (`tests/goldenmaster.sh`).
3. Optional: wenige semantische Klassen (`.fs-meta`) für neues Markup, damit
   künftig gar keine px mehr nötig sind.

**Zukunftssicher:** Bei einem späteren Bootstrap-SCSS-Build mappen die Tokens auf
`$font-size-base`; bei einer Migration auf Laravel/Tailwind auf `@theme` bzw.
`text-*` (siehe [`laravel-frontend-assets.md`](laravel-frontend-assets.md)).

## Möglicher nächster Schritt: Variante B (nur eine Textgrösse)

Variante A behält als einzige Ausnahme die Metadaten-Stufe (14). Variante B geht
noch strenger: **16 für allen Text**, auch Datum/Badges; deren „nachrangig"-Geste
trägt dann allein die **Farbe** (das Datum ist ohnehin schon gedämpft). Es bliebe
nur `--fs-base` und `--fs-icon`.

Umsetzung wäre klein: `--fs-meta` entfernen und die vier Metadaten-Stellen auf
`--fs-base` setzen. Offen ist nur der Augenschein — ob Datumsangaben bei 16 zu
prominent wirken. Deshalb zuerst Variante A ansehen, dann entscheiden.

## Nicht Teil dieses Schritts

- `font-family` (bleibt „Helvetica", sans-serif).
- Zeilenhöhen/Abstände — eigener Schritt, falls gewünscht.
- Dark-Mode-Farben (`darkBootstrap.min.css`) — unabhängig.