Das Erscheinungsbild wird schwarzweiß wie ein Gesetzblatt

Das Werkzeug stellt amtliche Rechtstexte dar, trat dabei aber in einem warmen
Braun auf, mit abgerundeten Kästen und einer rot-grünen Synopse. Fortan tritt es
in reinen Graustufen auf, hell wie dunkel. Die Schmuckfarbe entfällt ersatzlos;
weil sie es war, die die Verweise kenntlich machte, sind diese nunmehr
unterstrichen, und die drei Zustände der Meldung scheiden sich durch matten Text,
kräftigen Rahmen und doppelt starken Rahmen nebst Fettung statt durch Rot.

Die Umstellung der Synopse hat einen Mangel offengelegt, der schon vorher
bestand: Die Einfügung hob die ihr vom Browser zugedachte Unterstreichung
ausdrücklich auf (text-decoration: none). Damit war der grüne Grund das einzige
Merkmal, an dem eine Einfügung überhaupt zu erkennen war — wer Farben nicht oder
anders wahrnimmt oder die Synopse schwarzweiß ausdruckte, sah sie nicht. Solange
Grün danebenlag, fiel das nicht auf; ohne Grün wäre die Einfügung unsichtbar
geworden. Die Unterstreichung ist wiederhergestellt und tritt nun gegen die
Durchstreichung der Löschung, beide auf gemeinsamer Hinterlegung und in ihrer
je eigenen Spalte. Die Abzeichen scheiden sich ebenso durch die Form: gefüllt,
durchgestrichen, schlicht gerahmt.

Beiläufig erhält der Körper der Synopse ausdrückliche Schrift- und Grundfarbe.
Der klebende Spaltenkopf bezog seinen Grund bisher durch Vererbung und hatte
mithin keinen verlässlichen; für den Druck wird die Hinterlegung festgelegt,
damit sie nicht fortfällt.

Sämtliche dreihundertzwölf Testfälle bestehen unverändert; die Auszeichnung ist
dieselbe geblieben, geändert sind allein die Stilblätter. Die Synopse des
Gebäudeenergiegesetzes ergibt weiterhin achtundsechzig angewandte Befehle,
einundfünfzig zur manuellen Prüfung und siebenundvierzig geänderte Normen. Seiten
und Synopse sind in Hell- und Dunkelfassung in Augenschein genommen worden.

Das eingebettete Stilblatt steckt im Wasm-Erzeugnis; die öffentliche Fassung
zeigt die neue Synopse daher erst nach einem Lauf des Profils -Pwasm nebst
deploy/webpaket.sh.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Change-Id: Ib34164c7cbb77b71baba133c5244a1f52326ae87

2 files changed, 32 insertions, 31 deletions

diff --git a/src/main/resources/eu/mulk/aendggner/web/favicon.svg b/src/main/resources/eu/mulk/aendggner/web/favicon.svg
index 4f6a847..5b19c76 100644
--- a/src/main/resources/eu/mulk/aendggner/web/favicon.svg
+++ b/src/main/resources/eu/mulk/aendggner/web/favicon.svg
@@ -1,9 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="ÄndGgner">
-  <!-- Farben wie in style.css: heller Grund, brauner Akzent. Ein Favicon erbt keine
+  <!-- Farben wie in style.css: Papier, Haarlinie, schwarzes Zeichen. Ein Favicon erbt keine
        CSS-Variablen, deshalb stehen die Werte hier ausgeschrieben. -->
-  <rect width="32" height="32" rx="6" fill="#fdfdfb"/>
-  <rect x="0.75" y="0.75" width="30.5" height="30.5" rx="5.25" fill="none" stroke="#d8d3c4"
+  <rect width="32" height="32" fill="#fff"/>
+  <rect x="0.75" y="0.75" width="30.5" height="30.5" fill="none" stroke="#bbb"
         stroke-width="1.5"/>
-  <text x="16" y="17" fill="#6b4423" font-family="Georgia, 'Times New Roman', serif"
+  <text x="16" y="17" fill="#111" font-family="Georgia, 'Times New Roman', serif"
         font-size="22" text-anchor="middle" dominant-baseline="central">§</text>
 </svg>
diff --git a/src/main/resources/eu/mulk/aendggner/web/style.css b/src/main/resources/eu/mulk/aendggner/web/style.css
index c9d6db1..d770551 100644
--- a/src/main/resources/eu/mulk/aendggner/web/style.css
+++ b/src/main/resources/eu/mulk/aendggner/web/style.css
@@ -1,19 +1,18 @@
+/* Schwarz auf Papier wie ein Gesetzblatt: keine Buntheit, nur Graustufen. */
 :root {
   color-scheme: light dark;
-  --fg: #1b1b1b;
-  --bg: #fdfdfb;
-  --muted: #5a5a54;
-  --accent: #6b4423;
-  --border: #d8d3c4;
+  --fg: #111;
+  --bg: #fff;
+  --muted: #595959;
+  --border: #bbb;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --fg: #e8e6df;
-    --bg: #1c1b18;
-    --muted: #a6a296;
-    --accent: #c99a6c;
-    --border: #3a382f;
+    --fg: #e6e6e6;
+    --bg: #141414;
+    --muted: #a0a0a0;
+    --border: #4a4a4a;
   }
 }
 
@@ -62,8 +61,10 @@ address {
   margin: 0.5rem 0;
 }
 
+/* Ohne Schmuckfarbe trägt allein die Unterstreichung das Klick-Signal. */
 a {
-  color: var(--accent);
+  color: var(--fg);
+  text-decoration: underline;
 }
 
 .field {
@@ -93,7 +94,6 @@ input[type="file"] {
   width: 100%;
   padding: 0.4rem;
   border: 1px solid var(--border);
-  border-radius: 4px;
   background: transparent;
   color: inherit;
 }
@@ -102,22 +102,23 @@ button {
   font: inherit;
   font-weight: bold;
   padding: 0.6rem 1.5rem;
-  border: 1px solid var(--accent);
-  border-radius: 4px;
-  background: var(--accent);
+  border: 1px solid var(--fg);
+  background: var(--fg);
   color: var(--bg);
   cursor: pointer;
 }
 
+/* Umkehr statt brightness(): Ein schwarzer Knopf wird davon nicht heller. */
 button:hover {
-  filter: brightness(1.1);
+  background: var(--bg);
+  color: var(--fg);
 }
 
+/* Warnung ohne Rot: der doppelt starke Rahmen trägt das Gewicht. */
 .noscript {
   margin: 0 0 2rem;
   padding: 1rem;
-  border: 1px solid #a33;
-  border-radius: 6px;
+  border: 2px solid var(--fg);
   font-size: 0.875rem;
 }
 
@@ -127,13 +128,12 @@ button:hover {
   margin: 0 0 1.75rem;
   padding: 0.75rem 1rem;
   border: 1px solid var(--border);
-  border-radius: 6px;
   font-size: 0.875rem;
 }
 
 .einfuehrung summary {
   font-weight: bold;
-  color: var(--accent);
+  text-decoration: underline;
   cursor: pointer;
 }
 
@@ -164,7 +164,6 @@ button:hover {
   margin-top: 2rem;
   padding: 1rem;
   border: 1px solid var(--border);
-  border-radius: 6px;
   font-size: 0.875rem;
   color: var(--muted);
 }
@@ -178,18 +177,19 @@ footer {
 }
 
 footer a {
-  color: var(--accent);
+  color: var(--muted);
 }
 
 .nebenquelle {
   font-size: 0.8125rem;
 }
 
+/* Die drei Zustände unterscheiden sich ohne Farbe: matter Text, kräftiger Rahmen,
+   doppelt starker Rahmen mit Fettung. */
 .meldung {
   margin-top: 1.25rem;
   padding: 0.75rem 1rem;
   border: 1px solid var(--border);
-  border-radius: 6px;
   font-size: 0.9375rem;
 }
 
@@ -198,15 +198,16 @@ footer a {
 }
 
 .meldung.fertig {
-  border-color: var(--accent);
+  border-color: var(--fg);
 }
 
 .meldung.fehler {
-  border-color: #a33;
-  color: #a33;
+  border: 2px solid var(--fg);
+  font-weight: bold;
 }
 
+/* grayscale() ist an einem grauen Knopf wirkungslos. */
 button[disabled] {
-  filter: grayscale(0.6);
+  opacity: 0.5;
   cursor: progress;
 }