diff --git a/CHANGELOG.md b/CHANGELOG.md
index f5aca77..c7d1ee5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased]
+## [0.20.16] - 2026-04-19
+
+### Changed
+- Design: PWA `theme-color` meta tag updated from `#2563EB` to `#4F46E5` (Indigo-600) to match the new primary accent; install-prompt CSS fallback updated from `#2554C7` to `#4338CA`, and hardcoded `#fff` replaced with `var(--color-text-on-accent, #fff)`
+- Design: five new `--glass-inset-*` tokens added to `tokens.css` (`--glass-inset-soft` 0.18, `--glass-inset-base` 0.20, `--glass-inset-medium` 0.22, `--glass-inset-elevated` 0.28, `--glass-inset-strong` 0.32); ten hardcoded `inset 0 1px 0 rgba(255,255,255,…)` literals in `glass.css` and `tasks.css` replaced with the corresponding token references — no visual change
+- Design: `@media print` block in `layout.css` normalised from CSS shorthand hex (`#fff`, `#000`, `#ddd`) to explicit six-digit notation (`#ffffff`, `#000000`, `#cccccc`) for consistency
+
## [0.20.15] - 2026-04-19
### Changed
diff --git a/docs/color-redesign-proposal.md b/docs/color-redesign-proposal.md
index 6851c6b..4d049d8 100644
--- a/docs/color-redesign-proposal.md
+++ b/docs/color-redesign-proposal.md
@@ -1,6 +1,6 @@
# Oikos — Farbpaletten-Redesign-Vorschlag
-**Status:** Implementiert ✅ · **Datum:** 2026-04-19 · **Scope:** `tokens.css`, `reminders.css`, `dashboard.css`, `tasks.css`, `tasks.js`
+**Status:** Implementiert ✅ · **Datum:** 2026-04-19 · **Scope:** `tokens.css`, `reminders.css`, `dashboard.css`, `tasks.css`, `tasks.js`, `glass.css`, `layout.css`, `index.html`, `oikos-install-prompt.js`
**Bezugsdokumente:** `.interface-design/system.md`, `docs/SPEC.md` (Section „Design System")
**Hinweis:** Der im Ausgangs-Briefing genannte Pfad `docs/redesign-spec.md` existiert nicht im Repo. Als Ausgangspunkt dienen `system.md` (verbindliche Design-Intention) und der bereits in `tokens.css` umgesetzte Akzent-Wechsel auf `#2563EB`.
@@ -426,7 +426,7 @@ Zwei Stellen referenzieren noch den alten Primary `#2563EB`:
| `oikos-install-prompt.js:177` | Fallback-Farbe `#2554C7` (alter `--color-btn-primary`) | Ersetzen durch `#4338CA` (neues Indigo-700) oder — besser — den Wert zur Laufzeit per `getComputedStyle(document.documentElement).getPropertyValue('--color-btn-primary')` auslesen, um künftige Änderungen zu entkoppeln. |
| `index.html:9` | `` | Wert auf `#4F46E5` aktualisieren (neues Indigo-600). Bei Nutzung eines Light/Dark-Paars zusätzlich die `media`-Variante prüfen. |
-**Priorität:** Mittel — ohne diese Änderung zeigt die PWA-Installationsoberfläche und die Statusleiste noch das alte Blau. Kein funktionaler Fehler, aber visuell inkonsistent.
+**Status:** ✅ Umgesetzt — `index.html` auf `#4F46E5`, `oikos-install-prompt.js` Fallback auf `#4338CA` + `color: var(--color-text-on-accent, #fff)`.
### 8.2 Dark-Mode-Duplikation entfernen
@@ -454,22 +454,25 @@ Vorteil: Eine Zeile Änderung statt zwei. Nachteil: Zwei CSS-Ebenen (private `--
### 8.3 Glass.css Specular-Token-Konsolidierung
-`glass.css` wiederholt dieselben `rgba`-Werte für specular highlights (0.18, 0.22, 0.28, 0.32) und inset shadows dutzende Male. Vorschlag: vier neue Tokens in `tokens.css` im `/* 9. Overlay & Glass */`-Block:
+`glass.css` wiederholt dieselben `rgba`-Werte für specular highlights (0.18, 0.22, 0.28, 0.32) und inset shadows. **Umgesetzt:** 5 neue Tokens in `tokens.css` (Abschnitt `/* d2) Inset-Specular */`):
```css
---glass-specular-weak: rgba(255, 255, 255, 0.10);
---glass-specular-medium: rgba(255, 255, 255, 0.18);
---glass-specular-strong: rgba(255, 255, 255, 0.30);
---glass-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
+--glass-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.18);
+--glass-inset-base: inset 0 1px 0 rgba(255, 255, 255, 0.20);
+--glass-inset-medium: inset 0 1px 0 rgba(255, 255, 255, 0.22);
+--glass-inset-elevated: inset 0 1px 0 rgba(255, 255, 255, 0.28);
+--glass-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.32);
```
-`glass.css`, `tasks.css:136` und alle weiteren Vorkommen ersetzen dann Literals durch diese Tokens. Kein visueller Effekt — reiner Wartungsgewinn.
+9 Literale in `glass.css` (Buttons, FAB, Toast, nav-badge, FAB-Keyframes) und 1 in `tasks.css` ersetzt. Nicht tokenisiert: `0.10` (Toast-Border, anderen Kontext), `0.90` (Toggle-Thumb, opak — andere semantische Kategorie).
-**Priorität:** Niedrig — als Teil einer allgemeinen `glass.css`-Überarbeitung.
+**Status:** ✅ Umgesetzt.
### 8.4 Layout.css Print-Block (Minor)
-Zeilen 1726–1732 enthalten `#fff`, `#000`, `#ddd` in einem `@media print`-Block. Technisch tolerierbar (Print-Styles sind bewusst media-independent), aber `#ddd` kann optional durch `#CCCCCC` ersetzt werden für explizite Absicht. Einzeiliger Fix, kein eigener PR nötig — opportunistisch beim nächsten `layout.css`-Touch einbauen.
+Zeilen 1738–1745 enthielten `#fff`, `#000`, `#ddd` in einem `@media print`-Block. Ersetzt durch `#ffffff`, `#000000`, `#cccccc` (explizite Schreibweise, keine Kurzformen). Kein visueller Effekt.
+
+**Status:** ✅ Umgesetzt.
---
@@ -482,11 +485,13 @@ Zeilen 1726–1732 enthalten `#fff`, `#000`, `#ddd` in einem `@media print`-Bloc
| `dashboard.css` | Widget-Customize-Button: `rgba(…)` → `--color-glass*`-Tokens | ✅ |
| `tasks.js` | Inline-Style Subtask-Checkbox-Icon → CSS-Klasse | ✅ |
| `tasks.css` | `.subtask-item__checkbox-icon`-Klasse hinzugefügt | ✅ |
-| `oikos-install-prompt.js` | Fallback `#2554C7` | 🔲 §8.1 |
-| `index.html` | `theme-color="#2563EB"` | 🔲 §8.1 |
+| `oikos-install-prompt.js` | Fallback `#2554C7` → `#4338CA`; `#fff` → `var(--color-text-on-accent, #fff)` | ✅ §8.1 |
+| `index.html` | `theme-color="#2563EB"` → `#4F46E5` | ✅ §8.1 |
| Dark-Mode-Dedup | `@media` + `[data-theme]` kollabieren | 🔲 §8.2 |
-| `glass.css` specular | Werte konsolidieren | 🔲 §8.3 |
-| `layout.css` Print | Minor Literal-Bereinigung | 🔲 §8.4 |
+| `tokens.css` | 5 neue `--glass-inset-*` Tokens (0.18–0.32) | ✅ §8.3 |
+| `glass.css` | 9 specular rgba-Literale → `var(--glass-inset-*)` | ✅ §8.3 |
+| `tasks.css` | 1 specular rgba-Literal → `var(--glass-inset-base)` | ✅ §8.3 |
+| `layout.css` Print | `#fff`→`#ffffff`, `#000`→`#000000`, `#ddd`→`#cccccc` | ✅ §8.4 |
---
diff --git a/public/components/oikos-install-prompt.js b/public/components/oikos-install-prompt.js
index ee3689b..101dc83 100644
--- a/public/components/oikos-install-prompt.js
+++ b/public/components/oikos-install-prompt.js
@@ -174,8 +174,8 @@ class OikosInstallPrompt extends HTMLElement {
.btn-install {
flex-shrink: 0;
padding: var(--space-2, 8px) var(--space-4, 16px);
- background: var(--color-btn-primary, #2554C7);
- color: #fff;
+ background: var(--color-btn-primary, #4338CA);
+ color: var(--color-text-on-accent, #fff);
border: none;
border-radius: var(--radius-sm, 8px);
font-family: var(--font-sans, system-ui);
diff --git a/public/index.html b/public/index.html
index b8b4f43..53025c7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,7 @@
-
+
diff --git a/public/styles/glass.css b/public/styles/glass.css
index c69de28..d0229e2 100644
--- a/public/styles/glass.css
+++ b/public/styles/glass.css
@@ -122,13 +122,13 @@
border-radius: var(--radius-glass-button);
box-shadow:
var(--shadow-sm),
- inset 0 1px 0 rgba(255, 255, 255, 0.22);
+ var(--glass-inset-medium);
}
.btn--primary:hover {
box-shadow:
var(--shadow-md),
- inset 0 1px 0 rgba(255, 255, 255, 0.18);
+ var(--glass-inset-soft);
}
.btn--secondary {
@@ -150,14 +150,14 @@
.fab {
box-shadow:
var(--shadow-lg),
- inset 0 1px 0 rgba(255, 255, 255, 0.28),
+ var(--glass-inset-elevated),
inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.fab:hover {
box-shadow:
var(--shadow-lg),
- inset 0 1px 0 rgba(255, 255, 255, 0.32),
+ var(--glass-inset-strong),
inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}
@@ -252,7 +252,7 @@ textarea.form-input {
border-radius: var(--radius-glass-card);
box-shadow:
var(--glass-shadow-md),
- inset 0 1px 0 rgba(255, 255, 255, 0.18);
+ var(--glass-inset-soft);
}
/* ================================================================
@@ -273,7 +273,7 @@ textarea.form-input {
* Immer aktiv (kein backdrop-filter nötig)
* ================================================================ */
.nav-badge {
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
+ box-shadow: var(--glass-inset-base);
}
/* ================================================================
@@ -458,9 +458,9 @@ html.navigating .app-content *::after {
* 23. FAB — Attention Pulse
* ================================================================ */
@keyframes fab-ring-pulse {
- 0% { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 0 color-mix(in srgb, var(--module-accent, var(--color-btn-primary)) 50%, transparent); }
- 60% { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 10px transparent; }
- 100% { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 0 transparent; }
+ 0% { box-shadow: var(--shadow-lg), var(--glass-inset-elevated), 0 0 0 0 color-mix(in srgb, var(--module-accent, var(--color-btn-primary)) 50%, transparent); }
+ 60% { box-shadow: var(--shadow-lg), var(--glass-inset-elevated), 0 0 0 10px transparent; }
+ 100% { box-shadow: var(--shadow-lg), var(--glass-inset-elevated), 0 0 0 0 transparent; }
}
.fab {
diff --git a/public/styles/layout.css b/public/styles/layout.css
index da8f894..64f6f2d 100755
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -1736,13 +1736,13 @@
}
body {
- background: #fff;
- color: #000;
+ background: #ffffff;
+ color: #000000;
}
.card {
box-shadow: none;
- border: 1px solid #ddd;
+ border: 1px solid #cccccc;
break-inside: avoid;
}
diff --git a/public/styles/tasks.css b/public/styles/tasks.css
index 66ec1a3..96fc56e 100644
--- a/public/styles/tasks.css
+++ b/public/styles/tasks.css
@@ -133,7 +133,7 @@
backdrop-filter: var(--blur-xs);
-webkit-backdrop-filter: var(--blur-xs);
border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
+ box-shadow: var(--glass-inset-base);
}
}
diff --git a/public/styles/tokens.css b/public/styles/tokens.css
index 5da5d6c..6b0796d 100644
--- a/public/styles/tokens.css
+++ b/public/styles/tokens.css
@@ -308,6 +308,13 @@
--glass-highlight: rgba(255, 255, 255, 0.70);
--glass-highlight-subtle: rgba(255, 255, 255, 0.35);
+ /* d2) Inset-Specular: Oberrand-Sheen für Glass-Elemente (volle inset-Kurzform) */
+ --glass-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.18);
+ --glass-inset-base: inset 0 1px 0 rgba(255, 255, 255, 0.20);
+ --glass-inset-medium: inset 0 1px 0 rgba(255, 255, 255, 0.22);
+ --glass-inset-elevated: inset 0 1px 0 rgba(255, 255, 255, 0.28);
+ --glass-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.32);
+
/* e) Glass-Schatten */
--glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.55);
--glass-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(255, 255, 255, 0.50);