Release 0.5.7

docs/ACCEPTANCE.md

@@ -281,3 +281,28 @@
 - Produktionsbuild sowie vollständige Unit- und E2E-Matrix gemäß Auftrag nicht
   ausgeführt
 - `git diff --check`: erfolgreich
+
+## Materialkorrektur 0.5.7
+
+| Kriterium                                    | Nachweis                                                                                         | Stand                 |
+| -------------------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------- |
+| Hintergrundlicht im Arbeitsbereich sichtbar  | Fundus und Sendungsplanung ohne Popup in Dark/Light auf Desktop und Mobil visuell geprüft        | erfüllt am 23.10.2026 |
+| Popup erhält die Lichtstimmung               | Editor mit leichtem `46%`-Backdrop und `6px` Blur gegen Ansicht ohne Popup verglichen            | erfüllt am 23.10.2026 |
+| Verschachtelte Ablaufkarten werden dunkler   | berechnete RGBA-Werte von Außenglas, Abschnitt, Piece und Aktionsgruppe kontrolliert             | erfüllt am 23.10.2026 |
+| Graue Sonderflächen entfernt                 | aktive Tabs, private Recherche, Quellen-/Materialflächen und Aktionsgruppen visuell geprüft      | erfüllt am 23.10.2026 |
+| Schreibfelder bleiben ruhig und klar         | deckende Feldfüllung, feine Kontur und unveränderter Goldfokus in beiden Editorbereichen geprüft | erfüllt am 23.10.2026 |
+| Lightmode und Smartphone ohne Seitenüberlauf | Chromium-Messung bei 1440 × 1000 und 390 × 844 Pixeln in beiden Themes                           | erfüllt am 23.10.2026 |
+
+## Ausgeführte Prüfungen Materialkorrektur 0.5.7
+
+- `npm run check`: 0 Fehler und 0 Warnungen
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
+- berechnete Styles vor und nach der Korrektur für App-Hintergrund, Navigation,
+  Ablauf-Panel, Abschnitte, Pieces, Aktionsgruppen, Dialog, Backdrop, Tabs,
+  Rechercheflächen und Schreibfelder kontrolliert
+- gezielter Chromium-Lauf für Sendungsplanung sowie Piece-Editor mit
+  „Sendungstext“ und „Recherche & Quellen“ bei 1440 × 1000 und 390 × 844 Pixeln
+  in Light/Dark ohne Konsolenfehler oder horizontalen Seitenüberlauf
+- Desktop-/Mobilaufnahmen mit und ohne Popup visuell verglichen
+- vollständige Funktionstests gemäß Auftrag nicht ausgeführt
+- `git diff --check`: erfolgreich

docs/STATUS.md

@@ -7,6 +7,27 @@ Anmeldung, Rollen, persistente Inhaltsbearbeitung, Sendungsplanung,
 Live-Steuerung, Präsentationsausgabe und lokaler Betriebsweg sind dokumentiert.
 Etappe 6 wurde nicht begonnen.
 
+## Materialkorrektur 0.5.7
+
+- statische Gold-/Blauviolettlichter so positioniert und verstärkt, dass sie im
+  eigentlichen Arbeitsbereich statt fast ausschließlich hinter der Navigation
+  sichtbar werden
+- gemeinsame Materialtokens auf Außenglas, dunkle Innenfläche und tiefe
+  Ablaufkarte reduziert; verschachtelte Abschnitte, Pieces und Aktionsgruppen
+  werden nach innen dunkler statt heller und blaugrau
+- aktive Editortabs transparent goldgetönt und private Recherche sowie
+  Quellen-/Materialbereiche auf transparente Nachtblauflächen zurückgeführt
+- Dialog-Backdrop von starker Abdunklung und Unschärfe auf eine leichtere
+  Trennung reduziert, sodass die Lichtstimmung bei geöffnetem Editor erhalten
+  bleibt
+- deckende Schreibfelder, Goldfokus, Lightmode, Mobilansicht und lesbare
+  Komponentenfüllungen ohne verfügbaren Blur bleiben erhalten
+
+Die berechneten Hintergründe, Transparenzen, Filter und Begrenzungseigenschaften
+wurden vor und nach der Korrektur in Chromium kontrolliert. Sendungsplanung,
+Sendungstext und Recherche wurden bei 1440 × 1000 und 390 × 844 Pixeln in beiden
+Themes visuell geprüft.
+
 ## Oberflächenkorrektur 0.5.6
 
 - sichtbare statische Gold- und Blauviolettlichter hinter den halbtransparenten

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "sendewerk",
-	"version": "0.5.6",
+	"version": "0.5.7",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "sendewerk",
-			"version": "0.5.6",
+			"version": "0.5.7",
 			"dependencies": {
 				"@node-rs/argon2": "^2.2.2",
 				"better-sqlite3": "^13.0.3",

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sendewerk",
 	"private": true,
-	"version": "0.5.6",
+	"version": "0.5.7",
 	"type": "module",
 	"engines": {
 		"node": ">=22.17 <25"

src/app.css

@@ -17,6 +17,10 @@
 	--glass: rgb(252 254 255 / 68%);
 	--glass-strong: rgb(250 252 255 / 84%);
 	--glass-chrome: rgb(252 254 255 / 74%);
+	--material-inset: rgb(235 241 248 / 82%);
+	--material-deep: rgb(225 233 243 / 90%);
+	--ambient-gold: rgb(231 185 87 / 20%);
+	--ambient-violet: rgb(102 89 184 / 15%);
 	--field: #f8fbfe;
 	--text: #172033;
 	--text-muted: #5d6a7d;
@@ -47,12 +51,16 @@
 	color-scheme: dark;
 	--bg: #0b1220;
 	--bg-elevated: rgb(11 18 32 / 68%);
-	--panel: rgb(18 31 52 / 72%);
+	--panel: rgb(12 24 42 / 72%);
 	--panel-strong: #111d30;
-	--panel-soft: rgb(28 43 65 / 62%);
+	--panel-soft: rgb(7 16 30 / 76%);
-	--glass: rgb(15 27 46 / 62%);
+	--glass: rgb(10 22 39 / 64%);
-	--glass-strong: rgb(17 30 51 / 78%);
+	--glass-strong: rgb(10 22 39 / 84%);
-	--glass-chrome: rgb(15 27 46 / 68%);
+	--glass-chrome: rgb(9 20 36 / 72%);
+	--material-inset: rgb(6 15 28 / 72%);
+	--material-deep: rgb(4 11 22 / 82%);
+	--ambient-gold: rgb(231 185 87 / 32%);
+	--ambient-violet: rgb(102 89 184 / 24%);
 	--field: #101a2b;
 	--text: #fff7e8;
 	--text-muted: #a9b6c8;
@@ -90,16 +98,8 @@ body {
 	min-width: 20rem;
 	min-height: 100vh;
 	background:
-		radial-gradient(
+		radial-gradient(ellipse 52rem 36rem at 14% -6%, var(--ambient-gold), transparent 66%),
-			ellipse 58rem 42rem at 2% -8%,
+		radial-gradient(ellipse 58rem 44rem at 94% 18%, var(--ambient-violet), transparent 68%),
-			color-mix(in srgb, var(--gold) 18%, transparent),
-			transparent 68%
-		),
-		radial-gradient(
-			ellipse 54rem 44rem at 96% 24%,
-			color-mix(in srgb, #6659b8 14%, transparent),
-			transparent 70%
-		),
 		var(--bg);
 	background-attachment: fixed;
 	color: var(--text);
@@ -764,11 +764,14 @@ textarea:focus {
 .builder-pane {
 	min-width: 0;
 	padding: 0.9rem;
-	border: 1px solid var(--line);
+	border: 1px solid color-mix(in srgb, var(--gold) 12%, var(--line));
 	border-radius: var(--radius-medium);
 	background: var(--glass);
-	box-shadow: var(--shadow-soft);
+	box-shadow:
-	backdrop-filter: blur(18px) saturate(1.08);
+		inset 0 1px rgb(255 255 255 / 7%),
+		var(--shadow-soft);
+	-webkit-backdrop-filter: blur(20px) saturate(1.16);
+	backdrop-filter: blur(20px) saturate(1.16);
 }
 
 .pane-heading {
@@ -787,7 +790,7 @@ textarea:focus {
 .pane-heading > span {
 	padding: 0.3rem 0.55rem;
 	border-radius: 2rem;
-	background: var(--panel-soft);
+	background: var(--material-deep);
 	color: var(--text-muted);
 	font-size: 0.7rem;
 	font-weight: 680;
@@ -855,13 +858,14 @@ textarea:focus {
 
 .run-list {
 	display: grid;
-	gap: 0;
+	gap: 0.5rem;
-	border-top: 1px solid var(--line);
 }
 
 .run-section {
-	padding: 0.78rem 0.2rem;
+	padding: 0.78rem;
-	border-bottom: 1px solid var(--line);
+	border: 1px solid var(--line);
+	border-radius: var(--radius-medium);
+	background: var(--material-inset);
 }
 
 .run-section > header {
@@ -888,7 +892,7 @@ textarea:focus {
 	height: 2rem;
 	place-items: center;
 	border-radius: 0.65rem;
-	background: color-mix(in srgb, var(--category) 16%, var(--panel-soft));
+	background: color-mix(in srgb, var(--category) 18%, var(--material-deep));
 	color: var(--text-muted);
 	font-size: 0.67rem;
 	font-weight: 750;
@@ -908,7 +912,7 @@ textarea:focus {
 	padding: 0.55rem 0.65rem;
 	border-radius: 0.72rem;
 	border: 1px solid transparent;
-	background: color-mix(in srgb, var(--panel-soft) 68%, transparent);
+	background: var(--material-deep);
 	transition:
 		background-color 140ms ease,
 		border-color 140ms ease;
@@ -916,8 +920,8 @@ textarea:focus {
 
 .usage-row:hover,
 .usage-row:focus-within {
-	border-color: var(--line-strong);
+	border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
-	background: var(--glass-strong);
+	background: color-mix(in srgb, var(--gold) 4%, var(--material-deep));
 }
 
 .section-drag-handle,
@@ -3527,7 +3531,7 @@ textarea:focus {
 	padding: 0.16rem;
 	border: 1px solid var(--line);
 	border-radius: 0.7rem;
-	background: var(--glass-strong);
+	background: color-mix(in srgb, var(--gold) 3%, var(--material-deep));
 }
 
 .row-actions > form > button,
@@ -3576,7 +3580,7 @@ textarea:focus {
 	overflow: hidden;
 	border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line-strong));
 	border-radius: var(--radius-large);
-	background: var(--glass-strong);
+	background: var(--glass);
 	box-shadow: var(--shadow-large);
 	color: var(--text);
 	-webkit-backdrop-filter: blur(28px) saturate(1.12);
@@ -3588,8 +3592,9 @@ textarea:focus {
 }
 
 .piece-editor-dialog::backdrop {
-	background: color-mix(in srgb, var(--bg) 76%, transparent);
+	background: color-mix(in srgb, var(--bg) 46%, transparent);
-	backdrop-filter: blur(12px);
+	-webkit-backdrop-filter: blur(6px) saturate(0.95);
+	backdrop-filter: blur(6px) saturate(0.95);
 }
 
 .piece-dialog-header {
@@ -3667,8 +3672,8 @@ textarea:focus {
 }
 
 .piece-dialog-tabs button.active {
-	background: color-mix(in srgb, var(--gold) 13%, var(--panel));
+	background: color-mix(in srgb, var(--gold) 15%, transparent);
-	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 36%, transparent);
+	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 48%, transparent);
 	color: var(--text);
 }
 
@@ -3678,7 +3683,7 @@ textarea:focus {
 	padding: clamp(0.85rem, 2vw, 1.4rem);
 	overflow: auto;
 	overscroll-behavior: contain;
-	background: color-mix(in srgb, var(--bg) 88%, transparent);
+	background: var(--material-deep);
 }
 
 .piece-dialog-form {
@@ -3741,7 +3746,7 @@ textarea:focus {
 	padding: 0.85rem;
 	border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
 	border-radius: var(--radius-medium);
-	background: color-mix(in srgb, var(--gold) 5%, var(--glass));
+	background: var(--material-inset);
 }
 
 .markdown-editor-heading {
@@ -3776,7 +3781,7 @@ textarea:focus {
 	padding: 0.22rem 0.4rem;
 	border: 1px solid var(--line);
 	border-radius: 0.45rem;
-	background: color-mix(in srgb, var(--panel-soft) 72%, transparent);
+	background: var(--material-inset);
 	color: var(--text-muted);
 	font-size: 0.65rem;
 	cursor: pointer;
@@ -3805,7 +3810,7 @@ textarea:focus {
 	padding: 0.85rem;
 	border: 1px solid var(--line);
 	border-radius: var(--radius-medium);
-	background: color-mix(in srgb, var(--glass) 78%, transparent);
+	background: var(--material-inset);
 }
 
 .piece-meta-details summary {