diff --git a/CLAUDE.md b/CLAUDE.md
index d7594ec..85870ff 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -27,3 +27,17 @@ Wofür dieses Projekt gut ist, und was jemand wissen muss, der hier weiterarbeit
- Wenig Abhängigkeiten — was Browser und Node schon können, reicht meistens
- Semantisches HTML, mobil zuerst, bedienbar per Tastatur, ausreichender Kontrast
- Konfiguration über Umgebungsvariablen; keine Zugangsdaten im Quelltext
+
+## Design
+
+Die Oberfläche folgt dem tradeo Corporate Design System in `docs/DESIGN.md`. Kurzfassung für die App:
+
+- Farben: nur tradeo Blue `#122E45` und Weiß. Neutraltöne als Deckkraft-Abstufungen von tradeo Blue
+ (`--tint-*`, `--line*`, `--text-*` in `public/style.css`). Keine neuen Farben erfinden.
+- Schrift: Poppins (600/500) für Titel und Kennzeichen, Inter für alles andere; beide selbst gehostet
+ unter `public/fonts/`.
+- 8-px-Raster, Radius 6 px, linksbündig, ruhige Flächen, dezente Trennlinien statt Kästen.
+- Keine Emojis als Icons; nur schlichte Linien-SVGs mit funktionalem Zweck. Sentence case, keine
+ Ausrufezeichen.
+- Was das CDS offen lässt (Statusfarbe, Radius, Icon-Familie, Dark Mode), ist im Kopf von
+ `public/style.css` als offene Designentscheidung vermerkt und dort zentral änderbar.
diff --git a/docs/DESIGN.md b/docs/DESIGN.md
new file mode 100644
index 0000000..986ee69
--- /dev/null
+++ b/docs/DESIGN.md
@@ -0,0 +1,734 @@
+# tradeo Corporate Design System
+**Version:** 0.1 — Arbeitsstand
+**Zweck:** Einheitliche visuelle Referenz für Mitarbeitende, Designer, Entwickler und KI/LLM-Systeme
+**Geltungsbereich:** Primär interne Kommunikation; externe Nutzung nur vereinzelt
+
+---
+
+## 0. Grundsatz
+
+Dieses Dokument ist kein Inspirationskatalog, sondern ein verbindliches **Design-System**.
+
+Neue Gestaltungen werden nicht frei erfunden. Sie werden ausschließlich aus den hier definierten bzw. aus bestehenden tradeo-Komponenten zusammengesetzt.
+
+**Leitsatz:**
+> Bestehende Komponenten kombinieren — keine neue visuelle Sprache erfinden.
+
+Wenn eine benötigte Komponente noch nicht definiert ist, wird sie zunächst in das Design-System aufgenommen und erst danach produktiv verwendet.
+
+---
+
+# 1. Markencharakter
+
+tradeo soll visuell wirken als:
+
+- technisch
+- reduziert
+- hochwertig
+- freundlich
+- minimalistisch
+- modern
+- professionell
+- ruhig
+- funktional
+
+## 1.1 Gestaltungsprinzipien
+
+### 1. Klarheit vor Dekoration
+Jedes Element braucht einen funktionalen Grund. Dekoration ohne Informations- oder Orientierungsfunktion wird vermieden.
+
+### 2. Funktion vor Spielerei
+Lesbarkeit, Orientierung und Verständlichkeit haben Vorrang vor visueller Originalität.
+
+### 3. Ruhe statt visueller Lautstärke
+Wenige Farben, klare Hierarchien, großzügige Abstände und kontrollierte Kontraste.
+
+### 4. Professionell, aber nicht kühl
+Die Gestaltung soll technisch und präzise sein, gleichzeitig aber zugänglich und freundlich wirken.
+
+### 5. Einheitlichkeit vor Einzelkreativität
+Ein neues Medium soll eindeutig als Teil von tradeo erkennbar sein, auch wenn kein Logo sichtbar ist.
+
+---
+
+# 2. Logo
+
+## 2.1 Primärlogo
+
+Das bestehende tradeo-Logo bleibt unverändert.
+
+**Erlaubt:**
+- Originaldarstellung
+- weiße Wortmarke auf tradeo-Blau
+- vorhandene, bereits eingesetzte Logo-Varianten
+
+**Nicht erlaubt:**
+- Verzerren
+- Strecken
+- Stauchen
+- Drehen
+- Umfärben außerhalb bestehender Varianten
+- Schatten hinzufügen
+- Konturen hinzufügen
+- Buchstaben einzeln verändern
+- neue Logo-Lockups erfinden
+
+## 2.2 Schutzraum
+
+Um das Logo ist immer ausreichend freie Fläche vorzusehen.
+
+Bis ein exakter Schutzraum anhand der Original-Logodatei definiert ist, gilt:
+
+> Keine Texte, Linien, Icons oder Rahmen unmittelbar an das Logo setzen.
+
+---
+
+# 3. Farben
+
+## 3.1 Bestätigte Primärfarbe
+
+### tradeo Blue
+- **HEX:** `#122E45`
+- **RGB:** `18 / 46 / 69`
+
+**Verwendung:**
+- zentrale Markenflächen
+- Header
+- Titelbereiche
+- primäre Buttons
+- Navigationsflächen
+- zentrale Beschilderungselemente
+- Hintergründe mit weißem Text
+
+tradeo Blue ist die visuell dominierende Markenfarbe.
+
+## 3.2 Weiß
+
+- **HEX:** `#FFFFFF`
+
+**Verwendung:**
+- Haupt-Hintergrund
+- Text auf tradeo Blue
+- ruhige Negativflächen
+- Karten und Inhaltsflächen
+
+## 3.3 Weitere Farben
+
+Weitere Farben und Gradients werden **nicht frei neu definiert**.
+
+Es dürfen ausschließlich Farbtöne und Verläufe verwendet werden, die bereits in bestehenden tradeo-Medien — insbesondere auf der Website — vorkommen und anschließend als verbindliche Tokens in dieses Dokument übernommen wurden.
+
+### Status: noch zu erfassen
+- sekundäre Blautöne
+- Grautöne
+- Website-Hintergrundfarben
+- vorhandene Gradients
+- bestehende Akzentfarben
+- funktionale Statusfarben
+
+---
+
+# 4. Typografie
+
+## 4.1 Primärschrift
+
+### Poppins
+
+Poppins ist die primäre tradeo-Schrift.
+
+**Bevorzugte Verwendung:**
+- Hauptüberschriften
+- Bereichsbezeichnungen
+- Schilder
+- kurze Labels
+- Titel
+- Key Messages
+- Navigation
+- prägnante Kennzeichnungen
+
+### Empfohlene Schnitte
+- **SemiBold / 600:** Hauptüberschriften
+- **Medium / 500:** Unterüberschriften und Labels
+- **Regular / 400:** kurze, ruhige Texte wenn Poppins eingesetzt wird
+
+---
+
+## 4.2 Sekundärschrift
+
+### Inter — vorgeschlagene Ergänzung
+
+Inter ergänzt Poppins als neutrale, professionelle Funktionsschrift.
+
+**Bevorzugte Verwendung:**
+- Fließtext
+- Tabellen
+- längere Beschreibungen
+- UI-Texte
+- Formulare
+- Daten
+- Präsentationsinhalte
+- technische Informationen
+
+### Empfohlene Schnitte
+- **Regular / 400:** Standardtext
+- **Medium / 500:** hervorgehobener Text
+- **SemiBold / 600:** Labels und wichtige UI-Informationen
+
+> Hinweis: Inter ist aktuell ein Vorschlag und sollte einmal intern freigegeben werden, bevor sie als verbindliche Zweitschrift gilt.
+
+---
+
+# 5. Typografische Hierarchie
+
+Die folgenden Rollen sind verbindlich. Die konkrete Größe wird je nach Medium skaliert.
+
+## Display / Hero
+- Schrift: Poppins
+- Gewicht: 600
+- Einsatz: große zentrale Aussage
+- maximal wenige Wörter
+- hoher Weißraumanteil
+
+## H1 / Seitentitel
+- Schrift: Poppins
+- Gewicht: 600
+- Einsatz: Hauptüberschrift eines Mediums
+
+## H2 / Abschnitt
+- Schrift: Poppins
+- Gewicht: 500–600
+- Einsatz: Untergliederung
+
+## Label
+- Schrift: Poppins oder Inter
+- Gewicht: 500–600
+- Einsatz: kurze funktionale Bezeichnungen
+
+## Body
+- Schrift: Inter
+- Gewicht: 400
+- Einsatz: Fließtext
+
+## Data / Table
+- Schrift: Inter
+- Gewicht: 400–500
+- Einsatz: Tabellen, Kennzahlen, Statusinformationen
+
+## Caption
+- Schrift: Inter
+- Gewicht: 400
+- Einsatz: Zusatzinformationen
+
+---
+
+# 6. Schreibweise
+
+## Standard
+- bevorzugt **Sentence case**
+- kurze Überschriften
+- klare Substantive und Verben
+- keine werbliche Übertreibung
+- keine unnötig lockere Jugendsprache
+
+## Vermeiden
+- ÜBERMÄSSIGE GROSSSCHREIBUNG
+- mehrere Ausrufezeichen
+- verspielte Sonderzeichen
+- unnötige Emojis
+- pseudo-technische Buzzwords
+- lange Textblöcke auf Schildern
+
+---
+
+# 7. Layout-System
+
+## 7.1 Grundprinzip
+
+Layouts folgen einer klaren visuellen Hierarchie:
+
+1. Orientierung
+2. Hauptinformation
+3. unterstützende Information
+4. Details
+
+Nicht alle vier Ebenen müssen verwendet werden.
+
+## 7.2 Ausrichtung
+
+**Standard:** linksbündig
+
+Zentrierung nur wenn:
+- eine einzelne Aussage im Mittelpunkt steht
+- keine mehrstufige Informationshierarchie vorhanden ist
+- die Komposition dadurch nachweislich ruhiger wird
+
+## 7.3 Weißraum
+
+Weißraum ist ein aktives Gestaltungsmittel.
+
+Elemente sollen nicht deshalb vergrößert oder ergänzt werden, nur weil Platz verfügbar ist.
+
+## 7.4 Informationsdichte
+
+Bevorzugt:
+- wenige Elemente
+- klare Gruppen
+- erkennbare Abstände
+- deutliche Hierarchie
+
+Vermeiden:
+- viele gleichgewichtete Elemente
+- flächendeckende Boxen
+- mehrere konkurrierende Überschriften
+- unnötige Rahmen
+
+---
+
+# 8. Spacing-System für digitale Medien
+
+Für UIs und digitale Layouts wird ein **8-Pixel-Grundraster** empfohlen.
+
+Typische Abstände:
+
+- `4 px` — Mikroabstand
+- `8 px` — eng zusammengehörige Elemente
+- `16 px` — Standardabstand
+- `24 px` — Gruppenabstand
+- `32 px` — Abschnitt
+- `48 px` — großer Abschnitt
+- `64 px+` — große Layouttrennung
+
+Abweichungen sind nur sinnvoll, wenn sie aus einem bestehenden tradeo-Layout übernommen werden.
+
+---
+
+# 9. Formen
+
+## Grundcharakter
+- geometrisch
+- sauber
+- weich genug, um freundlich zu wirken
+- nicht verspielt
+
+## Vermeiden
+- dekorative Freiformen
+- Comic-Elemente
+- übermäßige Rundungen
+- starke 3D-Effekte
+- visuell aggressive Rahmen
+
+Für digitale Interfaces sollen Radien konsistent verwendet werden.
+
+**Exakte Radius-Tokens:** noch anhand bestehender tradeo-UIs / Website festzulegen.
+
+---
+
+# 10. Gradients
+
+Gradients dürfen verwendet werden, wenn sie aus bestehenden tradeo-Medien übernommen sind.
+
+## Regeln
+- subtil
+- ruhig
+- innerhalb der bestehenden Farbwelt
+- keine Regenbogenverläufe
+- keine Neonwirkung
+- kein dominantes „Gaming“- oder „Web3“-Erscheinungsbild
+
+**Exakte Gradient-Tokens:** noch aus der Website zu extrahieren.
+
+---
+
+# 11. Icons
+
+Icons sind funktionale Orientierungselemente.
+
+## Bevorzugt
+- einheitliche Icon-Familie
+- reduzierte Formen
+- klare Silhouetten
+- konsistente Strichstärken
+- technisch-neutral
+
+## Nicht erlaubt
+- Mischung verschiedener Icon-Stile
+- Emoji als regulärer Icon-Ersatz
+- Cartoon-Icons
+- handgezeichnete Stilwechsel
+- dekorative Icons ohne Funktion
+
+**Verbindliche Icon-Familie:** noch festzulegen.
+
+---
+
+# 12. Fotografie und Bildsprache
+
+Wenn Fotos verwendet werden, sollen sie:
+
+- authentisch
+- technisch
+- sauber
+- ruhig
+- hochwertig
+- dokumentarisch
+- realistisch
+
+wirken.
+
+Bevorzugte Motive:
+- Mitarbeiter bei realer Arbeit
+- Hardware
+- Prozesse
+- Logistik
+- Technik
+- Arbeitsplatzsituationen
+- Details von Materialien und Produkten
+
+Vermeiden:
+- generische Stock-Fotografie
+- überinszenierte Business-Szenen
+- künstlich überschwängliche Gestik
+- stark verspielte Inszenierung
+- extreme Filter
+
+---
+
+# 13. Beschilderungen
+
+Beschilderungen haben besonders hohe Anforderungen an Verständlichkeit.
+
+## Prioritäten
+1. Erkennbarkeit
+2. Lesbarkeit
+3. Orientierung
+4. CI-Konsistenz
+5. Gestaltung
+
+## Grundaufbau
+
+**Ebene 1 — Hauptinformation**
+z. B. `Wareneingang`
+
+**Ebene 2 — Funktion / Präzisierung**
+z. B. `Anlieferung & Prüfung`
+
+**Ebene 3 — optionale Zusatzinformation**
+z. B. Öffnungszeiten oder Prozesshinweis
+
+**Ebene 4 — optionale Kennzeichnung**
+Icon, Nummer, Richtungspfeil
+
+## Regeln
+- möglichst nur eine zentrale Aussage
+- Poppins für Hauptinformation
+- hoher Kontrast
+- keine langen Texte
+- Symbole nur mit funktionalem Nutzen
+- keine unnötigen Zierrahmen
+- Pfeile und Orientierungselemente immer konsistent
+
+---
+
+# 14. Präsentationen
+
+## Grundprinzip
+Eine Folie = eine Kernaussage.
+
+## Gestaltung
+- Poppins für Titel
+- Inter für Inhalte
+- großzügiger Weißraum
+- wenig Text
+- visuelle Hierarchie statt Textmenge
+- Diagramme reduziert
+- tradeo Blue als primäre Markenfarbe
+
+## Nicht verwenden
+- dekorative PowerPoint-Effekte
+- WordArt
+- übermäßige Animationen
+- 3D-Diagramme
+- bunte SmartArt-Stile
+- Clipart
+
+---
+
+# 15. Thumbnails und Banner
+
+## Ziel
+Schnell erfassbare zentrale Aussage.
+
+## Aufbau
+- starke Headline
+- maximal wenige unterstützende Elemente
+- klare Bild-/Text-Hierarchie
+- tradeo-Farbwelt
+- Poppins dominant
+
+## Nicht verwenden
+- Meme-Ästhetik
+- Clickbait-Stil
+- schrille Farben
+- zu viele Textblöcke
+- mehrere konkurrierende Blickfänge
+
+---
+
+# 16. Interne Anwendungen und UIs
+
+tradeo-UIs sollen wie ein Teil derselben visuellen Organisation wirken.
+
+## Typografie
+- Poppins: Page Title / Module Title
+- Inter: Navigation, Tabellen, Formulare, Controls, Fließtext
+
+## Grundregeln
+- klare Navigation
+- wenige visuelle Ebenen
+- großzügige Abstände
+- einfache Statusdarstellung
+- konsistente Buttons
+- konsistente Karten
+- klare Interaktionszustände
+
+## Primäre Aktion
+Primäre Aktionen werden bevorzugt in tradeo Blue dargestellt.
+
+## Sekundäre Aktion
+Zurückhaltender als die primäre Aktion.
+
+## Destruktive Aktion
+Nur funktional markieren; niemals als dekorative Akzentfarbe verwenden.
+
+---
+
+# 17. Tabellen und Daten
+
+Daten sollen funktional und scanbar dargestellt werden.
+
+## Regeln
+- Inter verwenden
+- klare Spalten
+- Zahlen sauber ausrichten
+- dezente Trennlinien
+- geringe visuelle Dichte
+- Hervorhebung nur bei inhaltlicher Relevanz
+
+Vermeiden:
+- abwechselnd stark gefärbte Tabellenzeilen
+- dicke Rahmen
+- mehrere Akzentfarben
+- dekorative Tabellenköpfe
+
+---
+
+# 18. Do / Don't
+
+## DO
+- bestehende Komponenten wiederverwenden
+- wenige Farben einsetzen
+- klar hierarchisieren
+- großzügigen Weißraum lassen
+- Poppins bewusst einsetzen
+- technische Präzision zeigen
+- Inhalte schnell erfassbar machen
+- Vorlagen verwenden
+
+## DON'T
+- neue Farben spontan erfinden
+- neue Schriftarten einführen
+- verspielte Gestaltung verwenden
+- unnötige Icons ergänzen
+- Elemente stark dekorieren
+- mehrere Designsprachen mischen
+- „jung“, „hip“ oder „quirky“ gestalten
+- visuelle Trends ohne Bezug zu tradeo übernehmen
+
+---
+
+# 19. Entscheidungsregel für neue Medien
+
+Vor Freigabe eines neuen Mediums müssen folgende Fragen mit **Ja** beantwortet werden:
+
+- Verwendet es ausschließlich bestehende tradeo-Komponenten?
+- Ist die Hauptinformation sofort erkennbar?
+- Ist die visuelle Hierarchie eindeutig?
+- Ist die Anzahl der Farben minimal?
+- Ist die Typografie regelkonform?
+- Sind Abstände und Ausrichtungen konsistent?
+- Würde das Medium auch ohne Logo wie tradeo wirken?
+- Wirkt es technisch, reduziert, hochwertig, freundlich, minimalistisch und modern?
+
+Wenn eine Antwort **Nein** lautet, muss die Gestaltung überarbeitet werden.
+
+---
+
+# 20. Regel für KI / LLM-Systeme
+
+## Systemanweisung
+
+Bei der Erstellung visueller tradeo-Medien gilt:
+
+> Verwende ausschließlich die in diesem Corporate Design System beschriebenen bzw. als bestehend dokumentierten tradeo-Komponenten. Erfinde keine zusätzlichen Farben, Schriftarten, Gradients, Icons, Formen oder Stilrichtungen. Wenn eine benötigte Komponente nicht definiert ist, kennzeichne dies als offene Designentscheidung statt selbstständig eine neue Lösung einzuführen.
+
+## Prioritäten für KI-generierte Gestaltung
+
+1. CI-Konformität
+2. funktionale Verständlichkeit
+3. visuelle Hierarchie
+4. Lesbarkeit
+5. Konsistenz
+6. Ästhetik
+
+Ästhetische Originalität steht nicht über Konsistenz.
+
+---
+
+# 21. KI-Kurzprofil
+
+```yaml
+brand:
+ name: tradeo
+ character:
+ - technical
+ - reduced
+ - premium
+ - friendly
+ - minimalist
+ - modern
+ - professional
+
+principles:
+ - clarity_over_decoration
+ - function_over_playfulness
+ - calm_over_visual_noise
+ - consistency_over_individual_creativity
+ - reuse_existing_components_only
+
+colors:
+ primary:
+ name: tradeo_blue
+ hex: "#122E45"
+ rgb: [18, 46, 69]
+ white:
+ hex: "#FFFFFF"
+ rule: "Do not invent new brand colors. Use only documented existing tradeo colors."
+
+typography:
+ primary:
+ family: "Poppins"
+ roles:
+ - headlines
+ - labels
+ - signage
+ - key_messages
+ secondary:
+ family: "Inter"
+ status: "proposed"
+ roles:
+ - body
+ - ui
+ - tables
+ - data
+ - long_form_text
+
+layout:
+ default_alignment: left
+ whitespace: generous
+ visual_density: low
+ digital_spacing_base_px: 8
+
+style:
+ avoid:
+ - playful
+ - colorful
+ - childish
+ - unserious
+ - cartoon
+ - decorative_without_function
+ - excessive_shadows
+ - excessive_3d
+ - mixed_visual_languages
+
+generation_rule:
+ "Compose from existing components. Do not invent a new visual language."
+```
+
+---
+
+# 22. Medien-Matrix
+
+| Medium | Primärschrift | Sekundärschrift | Hauptziel |
+|---|---|---|---|
+| Beschilderung | Poppins | Inter optional | Orientierung |
+| Überschrift / Schriftzug | Poppins | — | Identifikation |
+| Präsentation | Poppins | Inter | Kommunikation |
+| Layout / Dokument | Poppins | Inter | Struktur |
+| Thumbnail | Poppins | Inter optional | schnelle Erfassung |
+| App / UI | Poppins | Inter | Bedienbarkeit |
+| Banner | Poppins | Inter optional | zentrale Aussage |
+| Tabelle / Dashboard | Poppins für Titel | Inter | Datenerfassung |
+
+---
+
+# 23. Noch zu definierende Design-Tokens
+
+Diese Punkte werden anhand bestehender tradeo-Materialien exakt ergänzt:
+
+- [ ] vollständige Farbpalette
+- [ ] Website-Gradients
+- [ ] Neutralfarben
+- [ ] exakte Typografiegrößen pro Medium
+- [ ] Zeilenhöhen
+- [ ] Letter Spacing
+- [ ] Corner Radii
+- [ ] Border Styles
+- [ ] Shadow Styles
+- [ ] Icon-Familie
+- [ ] Pfeil-System
+- [ ] Logo-Schutzraum
+- [ ] Mindestgröße Logo
+- [ ] Print-Farbwerte
+- [ ] RAL-Farben für physische Beschilderung
+- [ ] Standardformate für Schilder
+- [ ] Präsentationsmaster
+- [ ] UI-Komponenten
+- [ ] Thumbnail-Templates
+- [ ] Banner-Templates
+
+---
+
+# 24. Geplante Template-Bibliothek
+
+Langfristig sollte dieses Design-System durch konkrete Referenz-Templates ergänzt werden:
+
+1. Türschild
+2. Bereichsschild
+3. Regal-/Lagerplatzkennzeichnung
+4. Maschinen-/Arbeitsplatzkennzeichnung
+5. Lean-/Shopfloor-Board
+6. Prozesshinweis
+7. SOP-Titelblatt
+8. Präsentationsfolie
+9. Thumbnail
+10. Banner
+11. Dashboard
+12. interne Web-App
+13. Formulare
+14. Tabellen
+15. Informationskarte
+
+---
+
+# 25. Versionierung
+
+Änderungen an Farben, Typografie oder zentralen Design-Tokens werden dokumentiert.
+
+Empfohlenes Schema:
+
+- `0.x` — Aufbau / Entwicklung
+- `1.0` — erste freigegebene CI
+- `1.x` — Ergänzungen ohne grundlegenden Stilwechsel
+- `2.0` — grundlegende visuelle Änderung
+
+**Aktueller Stand:** `0.1`
diff --git a/public/app.js b/public/app.js
index ee9d0a3..7d5d0c3 100644
--- a/public/app.js
+++ b/public/app.js
@@ -23,6 +23,7 @@ function fmtDate(isoStr) {
function fmtLong(isoStr) {
return new Date(isoStr + 'T12:00:00').toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
}
+const LOCK_ICON = '';
const MONTHS = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
let toastTimer;
@@ -66,11 +67,6 @@ function personById(id) { return state.data.persons.find((p) => p.id === id); }
function fullName(p) { return p ? `${p.firstName} ${p.lastName}` : 'unbesetzt'; }
function shortName(p) { return p ? `${p.firstName} ${p.lastName.charAt(0)}.` : '?'; }
function initials(p) { return `${p.firstName.charAt(0)}${p.lastName.charAt(0)}`.toUpperCase(); }
-function colorFor(id) {
- let h = 0;
- for (const c of id) h = (h * 31 + c.charCodeAt(0)) >>> 0;
- return `hsl(${h % 360} 55% 45%)`;
-}
function isAbsent(personId, date) {
return state.data.absences.some((a) => a.personId === personId && a.from <= date && a.to >= date);
}
@@ -94,7 +90,6 @@ function avatarEl(p, cls = '') {
}
const e = document.createElement('span');
e.className = `avatar ${cls}`;
- e.style.background = colorFor(p.id);
e.textContent = initials(p);
e.setAttribute('role', 'img');
e.setAttribute('aria-label', fullName(p));
@@ -141,7 +136,9 @@ function renderCalendar() {
if (date < today) cell.classList.add('past');
const num = document.createElement('div');
num.className = 'num';
- num.textContent = cur.getDate();
+ const numText = document.createElement('span');
+ numText.textContent = cur.getDate();
+ num.appendChild(numText);
cell.appendChild(num);
if (outside) { grid.appendChild(cell); continue; }
@@ -162,7 +159,7 @@ function renderCalendar() {
cell.setAttribute('aria-label', `${fmtLong(date)}, kein Meeting`);
} else if (a) {
planned += 1;
- if (a.locked) { const lock = document.createElement('span'); lock.className = 'lock'; lock.textContent = '🔒'; lock.title = 'fixiert'; num.appendChild(lock); }
+ if (a.locked) { const lock = document.createElement('span'); lock.className = 'lock'; lock.innerHTML = LOCK_ICON; lock.title = 'fixiert'; num.appendChild(lock); }
const pair = document.createElement('div');
pair.className = 'pair';
const main = personById(a.main);
@@ -171,7 +168,7 @@ function renderCalendar() {
pair.appendChild(slotEl(main, 'main', date));
pair.appendChild(slotEl(co, 'co', date));
cell.appendChild(pair);
- const absentNote = (p) => (p && isAbsent(p.id, date) ? ' (abwesend!)' : '');
+ const absentNote = (p) => (p && isAbsent(p.id, date) ? ' (abwesend)' : '');
cell.setAttribute('aria-label', `${fmtLong(date)}: Haupt ${fullName(main)}${absentNote(main)}, Neben ${fullName(co)}${absentNote(co)}${a.locked ? ', fixiert' : ''}`);
} else {
cell.setAttribute('aria-label', `${fmtLong(date)}, noch nicht ausgelost`);
@@ -206,7 +203,7 @@ function slotEl(p, role, date) {
name.className = 'name';
name.textContent = shortName(p);
name.title = fullName(p);
- if (absent) { name.classList.add('absent'); name.title += ' – abwesend!'; }
+ if (absent) { name.classList.add('absent'); name.title += ' – abwesend'; }
slot.appendChild(name);
return slot;
}
@@ -734,16 +731,16 @@ function renderAbsences() {
const conflicts = Object.entries(state.data.assignments).filter(([d, x]) => d >= a.from && d <= a.to && !x.off && (x.main === a.personId || x.co === a.personId));
if (conflicts.length) {
const warn = document.createElement('span');
- warn.className = 'tag off';
- warn.textContent = `${conflicts.length}× eingeplant!`;
+ warn.className = 'tag conflict';
+ warn.textContent = `${conflicts.length}× eingeplant`;
warn.title = 'Diese Person ist an Tagen im Kalender eingeplant, an denen sie abwesend ist. Im Kalender neu auslosen.';
li.appendChild(warn);
}
const del = document.createElement('button');
del.type = 'button';
- del.className = 'ghost danger';
- del.textContent = 'Löschen';
- del.addEventListener('click', () => run(() => api(`api/absences/${a.id}`, { method: 'DELETE' }), 'Abwesenheit gelöscht.'));
+ del.className = 'ghost';
+ del.textContent = 'Entfernen';
+ del.addEventListener('click', () => run(() => api(`api/absences/${a.id}`, { method: 'DELETE' }), 'Abwesenheit entfernt.'));
li.appendChild(del);
list.appendChild(li);
}
@@ -797,7 +794,7 @@ function renderSettings() {
if (!h.auto) li.appendChild(tag('manuell'));
const del = document.createElement('button');
del.type = 'button';
- del.className = 'ghost danger';
+ del.className = 'ghost';
del.textContent = 'Entfernen';
del.addEventListener('click', () => run(() => api(`api/holidays/${h.date}`, { method: 'DELETE' }), 'Eintrag entfernt.'));
li.appendChild(del);
diff --git a/public/fonts/OFL-Inter.txt b/public/fonts/OFL-Inter.txt
new file mode 100644
index 0000000..21f6aff
--- /dev/null
+++ b/public/fonts/OFL-Inter.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/public/fonts/OFL-Poppins.txt b/public/fonts/OFL-Poppins.txt
new file mode 100644
index 0000000..76df3b5
--- /dev/null
+++ b/public/fonts/OFL-Poppins.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/public/fonts/fonts.css b/public/fonts/fonts.css
new file mode 100644
index 0000000..1bad8e2
--- /dev/null
+++ b/public/fonts/fonts.css
@@ -0,0 +1,7 @@
+/* Poppins und Inter, selbst gehostet (SIL Open Font License, siehe OFL-*.txt). Quelle: Google Fonts, Subsets latin + latin-ext. */
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('inter-variable-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('inter-variable-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('poppins-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('poppins-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('poppins-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('poppins-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
diff --git a/public/fonts/inter-variable-latin-ext.woff2 b/public/fonts/inter-variable-latin-ext.woff2
new file mode 100644
index 0000000..479d010
Binary files /dev/null and b/public/fonts/inter-variable-latin-ext.woff2 differ
diff --git a/public/fonts/inter-variable-latin.woff2 b/public/fonts/inter-variable-latin.woff2
new file mode 100644
index 0000000..d15208d
Binary files /dev/null and b/public/fonts/inter-variable-latin.woff2 differ
diff --git a/public/fonts/poppins-500-latin-ext.woff2 b/public/fonts/poppins-500-latin-ext.woff2
new file mode 100644
index 0000000..d59af06
Binary files /dev/null and b/public/fonts/poppins-500-latin-ext.woff2 differ
diff --git a/public/fonts/poppins-500-latin.woff2 b/public/fonts/poppins-500-latin.woff2
new file mode 100644
index 0000000..c660336
Binary files /dev/null and b/public/fonts/poppins-500-latin.woff2 differ
diff --git a/public/fonts/poppins-600-latin-ext.woff2 b/public/fonts/poppins-600-latin-ext.woff2
new file mode 100644
index 0000000..8ec78f5
Binary files /dev/null and b/public/fonts/poppins-600-latin-ext.woff2 differ
diff --git a/public/fonts/poppins-600-latin.woff2 b/public/fonts/poppins-600-latin.woff2
new file mode 100644
index 0000000..921e962
Binary files /dev/null and b/public/fonts/poppins-600-latin.woff2 differ
diff --git a/public/index.html b/public/index.html
index 0d19fc0..68f5672 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,14 +3,15 @@
-
+
Rotatory – Morning-Meeting-Moderation
+
-
+
-