Farbe kehrt dorthin zurück, wo sie eine Aussage trägt

Die schwarzweiße Fassung nahm der Synopse mehr, als sie ihr gab: Rot und Grün
sind am Bildschirm die schnellste Scheidung von Streichung und Einfügung, und die
Balken der Hinweiskästen finden das Auge, bevor es liest. Beides kehrt zurück.
Schwarzweiß bleibt das Grundgerüst — Schrift, Rahmen, Knopf, Verweise —, sodass
Farbe nurmehr dort auftritt, wo sie etwas bedeutet, und überall dasselbe meint:
Rot warnt, Grün bestätigt.

Was bleibt, ist die Erkenntnis aus der farblosen Fassung. Sie hat gezeigt, dass
die Farbe im Diff nicht bloß schmückte, sondern allein trug: Die Einfügung hob
die ihr vom Browser zugedachte Unterstreichung ausdrücklich auf, sodass der grüne
Grund ihr einziges Merkmal war. Die Unterstreichung bleibt daher wiederher-
gestellt und tritt nun neben das Grün, wie die Durchstreichung neben dem Rot
steht. Wer schwarzweiß ausdruckt oder Farben anders wahrnimmt, sieht die Änderung
seither auch dann.

Die Hinweiskästen der Startseite erhalten Balken nach derselben Regel: rot für
den noscript-Hinweis und die Fehlermeldung, grün für die Fertigmeldung, grau
während der Arbeit, weil noch nichts feststeht. Die Abzeichen behalten ihre
Farben, bleiben aber in Versalien gesetzt. Für den Druck werden die farbigen
Flächen von der Sparschaltung der Browser ausgenommen.

Dreihundertzwölf Testfälle bestehen unverändert; die Synopse des Gebäude-
energiegesetzes ergibt weiterhin achtundsechzig angewandte Befehle, einund-
fünfzig zur manuellen Prüfung und siebenundvierzig geänderte Normen. Seiten und
Synopse sind in Hell- und Dunkelfassung in Augenschein genommen worden.

Artikel 7 des Verzeichnisses der Fassungen wird auf den nunmehr geltenden Stand
gebracht; er beschrieb die farblose Zwischenfassung.

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

2 files changed, 47 insertions, 28 deletions

diff --git a/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java b/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java
index 84446c1..69ec7aa 100644
--- a/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java
+++ b/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java
@@ -206,16 +206,20 @@ public final class HtmlRenderer {
 
   private static final String CSS =
       """
-      /* Schwarz auf Papier wie ein Gesetzblatt. Streichung und Einfügung unterscheiden
-         sich deshalb nicht durch Farbe, sondern durch Form: durchgestrichen gegen
-         unterstrichen, dazu die Spalte, in der sie stehen. */
+      /* Grundgerüst schwarzweiß wie ein Gesetzblatt; Farbe trägt allein die Änderung:
+         rot heißt weg, grün heißt hinzu. Damit die Aussage auch im Schwarzweiß-Ausdruck
+         und bei Farbfehlsichtigkeit erhalten bleibt, tritt zur Farbe stets die Form —
+         durchgestrichen gegen unterstrichen — sowie die Spalte, in der sie steht. */
       :root {
         color-scheme: light dark;
         --fg: #111;
         --bg: #fff;
         --rand: #bbb;
         --dezent: #595959;
-        --hinterlegung: #ececec;
+        --del-bg: #ffd7d7;
+        --del-fg: #8b0000;
+        --ins-bg: #d7f5d7;
+        --ins-fg: #005f00;
       }
       @media (prefers-color-scheme: dark) {
         :root {
@@ -223,7 +227,10 @@ public final class HtmlRenderer {
           --bg: #141414;
           --rand: #4a4a4a;
           --dezent: #a0a0a0;
-          --hinterlegung: #333;
+          --del-bg: #5a1f1f;
+          --del-fg: #ffb3b3;
+          --ins-bg: #1f4a1f;
+          --ins-fg: #b3ffb3;
         }
       }
       body {
@@ -240,7 +247,7 @@ public final class HtmlRenderer {
       .quelle, .statistik, .gliederung, .ursachen { color: var(--dezent); font-size: 0.9rem; }
       .entwurfshinweis {
         border: 1px solid var(--rand);
-        border-left: 4px solid var(--fg);
+        border-left: 4px solid var(--del-fg);
         padding: 0.5rem 0.75rem;
         margin: 0.6rem 0;
         font-size: 0.95rem;
@@ -270,41 +277,43 @@ public final class HtmlRenderer {
         font-size: 0.95rem;
       }
       del, .alt del {
-        background: var(--hinterlegung);
-        color: inherit;
+        background: var(--del-bg);
+        color: var(--del-fg);
         text-decoration: line-through;
       }
       ins, .neu ins {
-        background: var(--hinterlegung);
-        color: inherit;
+        background: var(--ins-bg);
+        color: var(--ins-fg);
         text-decoration: underline;
       }
       .leer { color: var(--dezent); font-style: italic; }
-      /* Gerahmte Kästchen in Versalien; die drei Arten trennt die Form, nicht die Farbe.
-         Beschriftet sind sie ohnehin. */
+      /* Kästchen in Versalien; die Farbe folgt derselben Regel wie im Diff. Beschriftet
+         sind sie ohnehin, sodass die Farbe hier nur bestätigt, was dasteht. */
       .badge {
         font-family: system-ui, sans-serif;
         font-size: 0.7rem;
         font-weight: normal;
         text-transform: uppercase;
         letter-spacing: 0.06em;
-        border: 1px solid var(--rand);
-        color: var(--dezent);
+        border: 1px solid transparent;
         padding: 0.1rem 0.55rem;
         vertical-align: middle;
       }
-      .neu-badge { background: var(--fg); color: var(--bg); border-color: var(--fg); }
-      .aufgehoben-badge { text-decoration: line-through; }
-      /* .geaendert-badge trägt bereits den schlichten Rahmen aus .badge. */
+      .neu-badge { background: var(--ins-bg); color: var(--ins-fg); }
+      .aufgehoben-badge { background: var(--del-bg); color: var(--del-fg); }
+      .geaendert-badge { border-color: var(--rand); color: var(--dezent); }
       section.manuell { margin-top: 2rem; }
       section.manuell li { margin-bottom: 0.7rem; }
       .originaltext { color: var(--dezent); font-size: 0.85rem; }
       @media print {
         .vergleich { break-inside: avoid; }
-        /* Ohne diese Festlegung wirft der Druck die Hinterlegung weg; Durchstreichung
-           und Unterstreichung überstehen ihn ohnehin. */
-        :root { --hinterlegung: #e4e4e4; }
-        del, ins, .neu-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+        /* Ohne diese Festlegung wirft der Druck die Hinterlegung weg. Durchstreichung
+           und Unterstreichung überstehen ihn ohnehin und tragen die Aussage auch dort,
+           wo schwarzweiß gedruckt wird. */
+        del, ins, .badge, .entwurfshinweis {
+          -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+        }
       }
       """;
 }
diff --git a/src/main/resources/eu/mulk/aendggner/web/style.css b/src/main/resources/eu/mulk/aendggner/web/style.css
index d770551..c872cbe 100644
--- a/src/main/resources/eu/mulk/aendggner/web/style.css
+++ b/src/main/resources/eu/mulk/aendggner/web/style.css
@@ -1,10 +1,15 @@
-/* Schwarz auf Papier wie ein Gesetzblatt: keine Buntheit, nur Graustufen. */
+/* Schwarz auf Papier wie ein Gesetzblatt. Farbe tritt allein an den Balken der
+   Hinweiskästen auf und meint dort dasselbe wie in der Synopse: rot warnt, grün
+   bestätigt. Die Kästen bleiben auch ohne den Balken lesbar; er hebt sie hervor,
+   er trägt nicht allein. */
 :root {
   color-scheme: light dark;
   --fg: #111;
   --bg: #fff;
   --muted: #595959;
   --border: #bbb;
+  --warnung: #8b0000;
+  --bestaetigung: #005f00;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -13,6 +18,8 @@
     --bg: #141414;
     --muted: #a0a0a0;
     --border: #4a4a4a;
+    --warnung: #ffb3b3;
+    --bestaetigung: #b3ffb3;
   }
 }
 
@@ -114,11 +121,11 @@ button:hover {
   color: var(--fg);
 }
 
-/* Warnung ohne Rot: der doppelt starke Rahmen trägt das Gewicht. */
 .noscript {
   margin: 0 0 2rem;
   padding: 1rem;
-  border: 2px solid var(--fg);
+  border: 1px solid var(--border);
+  border-left: 4px solid var(--warnung);
   font-size: 0.875rem;
 }
 
@@ -184,12 +191,15 @@ footer a {
   font-size: 0.8125rem;
 }
 
-/* Die drei Zustände unterscheiden sich ohne Farbe: matter Text, kräftiger Rahmen,
-   doppelt starker Rahmen mit Fettung. */
+/* Der Balken links zeigt den Zustand an; der Text benennt ihn ohnehin, sodass die
+   Meldung auch ohne Farbe verständlich bleibt. Während der Arbeit steht kein Balken,
+   weil noch nichts feststeht. */
 .meldung {
   margin-top: 1.25rem;
   padding: 0.75rem 1rem;
   border: 1px solid var(--border);
+  border-left-width: 4px;
+  border-left-color: var(--border);
   font-size: 0.9375rem;
 }
 
@@ -198,11 +208,11 @@ footer a {
 }
 
 .meldung.fertig {
-  border-color: var(--fg);
+  border-left-color: var(--bestaetigung);
 }
 
 .meldung.fehler {
-  border: 2px solid var(--fg);
+  border-left-color: var(--warnung);
   font-weight: bold;
 }