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
diff --git a/FASSUNGEN.txt b/FASSUNGEN.txt
index 24baaf6..6803806 100644
--- a/FASSUNGEN.txt
+++ b/FASSUNGEN.txt
@@ -39,6 +39,11 @@
ausgibt; ohne dessen Auspacken bliebe die Einführung eine Anleitung zum
Zwischenschritt von Hand.
+Endlich wird das Erscheinungsbild demjenigen angeglichen, was das Erzeugnis
+darstellt: Es tritt fortan schwarzweiß auf wie ein Gesetzblatt. Dabei hat sich
+ergeben, dass die Farbe in der Synopse nicht bloß schmückte, sondern trug; ihre
+Abschaffung hat deshalb einen Mangel der Auszeichnung offengelegt und behoben.
+
Artikel 1
Anbieterkennzeichnung und Datenschutzerklärung
@@ -182,6 +187,50 @@
nicht hinzu, sodass Hell- und Dunkelfassung ohne Zutun stimmen.
+Artikel 7
+Gestaltung in Schwarzweiß
+
+(1) Das Stilblatt der Seiten (style.css) wird auf reine Graustufen umgestellt. Die
+ bisherige Schmuckfarbe — ein warmes Braun — entfällt ersatzlos; an ihre Stelle
+ tritt die Textfarbe. Die Abrundung der Kästen, Felder und Knöpfe entfällt
+ gleichfalls; gedrucktes Papier trägt keine runden Ecken.
+
+(2) Weil die Schmuckfarbe bislang kenntlich machte, was anklickbar ist, werden die
+ Verweise fortan unterstrichen. Der Knopf kehrt beim Überfahren Grund und
+ Schrift um; die bisherige Aufhellung wäre an einem schwarzen Knopf ohne
+ Wirkung geblieben.
+
+(3) Die beiden allein stehenden Rotwerte entfallen. Die drei Zustände der Meldung
+ unterscheiden sich nunmehr durch matten Text (Arbeit), kräftigen Rahmen
+ (Fertigstellung) und doppelt starken Rahmen nebst Fettung (Fehler); der
+ Hinweis bei abgeschaltetem JavaScript trägt denselben starken Rahmen. Die
+ Beschriftungen bleiben, wie sie waren, und benennen den Zustand ohnehin.
+
+(4) Das eingebettete Stilblatt der Synopse (HtmlRenderer) wird ebenso umgestellt.
+ Streichung und Einfügung werden nicht mehr durch Rot und Grün geschieden,
+ sondern durch Durchstreichung und Unterstreichung, jeweils auf gemeinsamer
+ Hinterlegung, sowie durch die Spalte, in der sie stehen.
+
+(5) Dabei wird ein Mangel behoben: Die Einfügung hob die ihr vom Browser
+ zugedachte Unterstreichung bisher ausdrücklich auf. Damit war der grüne Grund
+ das einzige Merkmal, an dem sie zu erkennen war; wer Farben nicht oder anders
+ wahrnimmt oder die Synopse schwarzweiß ausdruckte, sah eine Einfügung
+ überhaupt nicht. Die Unterstreichung wird wiederhergestellt.
+
+(6) Die Abzeichen an den Normköpfen werden gleichfalls durch die Form geschieden:
+ „neu“ gefüllt, „aufgehoben“ gerahmt und durchgestrichen, „geändert“ schlicht
+ gerahmt, sämtlich in Versalien mit Sperrung. Sie sind ohnehin beschriftet; die
+ Farbe war dort von jeher bloße Verdopplung.
+
+(7) Dem Körper der Synopse werden Schrift- und Grundfarbe ausdrücklich zugewiesen.
+ Der klebende Spaltenkopf übernahm seinen Grund bisher durch Vererbung und
+ hatte mithin keinen verlässlichen. Für den Druck wird die Hinterlegung
+ festgelegt, damit sie nicht fortfällt.
+
+(8) Das Tabellenzeichen (favicon.svg) wird nachgezogen. Es führt die Werte
+ ausgeschrieben, weil ein Tabellenzeichen keine Stilblattgrößen erbt.
+
+
Schlussbestimmung
Die vorstehenden Änderungen sind durch die Prüfung sämtlicher Testfälle
@@ -198,6 +247,14 @@
Freigabe für eingebettete Stile ist dadurch belegt, dass die Synopse ohne sie
unformatiert erscheint.
+Die Umstellung des Erscheinungsbildes ist in Augenschein genommen worden, und
+zwar in Hell- und in Dunkelfassung: die Startseite nebst den drei Zuständen der
+Meldung, die Anbieterkennzeichnung sowie eine über die Befehlszeile erzeugte
+Synopse des Gebäudeenergiegesetzes (achtundsechzig angewandte Befehle,
+einundfünfzig zur manuellen Prüfung, siebenundvierzig geänderte Normen, mithin
+dasselbe wie zuvor). Streichung, Einfügung und die drei Abzeichen sind dabei
+ohne Farbe auseinanderzuhalten.
+
════════════════════════════════════════════════════════════════════════════════
Fassung vom 15. August 2026,
diff --git a/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java b/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java
index 834423a..84446c1 100644
--- a/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java
+++ b/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java
@@ -206,23 +206,24 @@
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. */
:root {
color-scheme: light dark;
- --del-bg: #ffd7d7;
- --del-fg: #8b0000;
- --ins-bg: #d7f5d7;
- --ins-fg: #005f00;
- --rand: #ccc;
- --dezent: #666;
+ --fg: #111;
+ --bg: #fff;
+ --rand: #bbb;
+ --dezent: #595959;
+ --hinterlegung: #ececec;
}
@media (prefers-color-scheme: dark) {
:root {
- --del-bg: #5a1f1f;
- --del-fg: #ffb3b3;
- --ins-bg: #1f4a1f;
- --ins-fg: #b3ffb3;
- --rand: #555;
- --dezent: #aaa;
+ --fg: #e6e6e6;
+ --bg: #141414;
+ --rand: #4a4a4a;
+ --dezent: #a0a0a0;
+ --hinterlegung: #333;
}
}
body {
@@ -231,13 +232,15 @@
max-width: 90rem;
margin: 0 auto;
padding: 1rem 2rem;
+ color: var(--fg);
+ background: var(--bg);
}
header h1 { margin-bottom: 0.2rem; }
.langue { font-style: italic; margin-top: 0; }
.quelle, .statistik, .gliederung, .ursachen { color: var(--dezent); font-size: 0.9rem; }
.entwurfshinweis {
border: 1px solid var(--rand);
- border-left: 4px solid var(--del-fg);
+ border-left: 4px solid var(--fg);
padding: 0.5rem 0.75rem;
margin: 0.6rem 0;
font-size: 0.95rem;
@@ -267,32 +270,41 @@
font-size: 0.95rem;
}
del, .alt del {
- background: var(--del-bg);
- color: var(--del-fg);
+ background: var(--hinterlegung);
+ color: inherit;
text-decoration: line-through;
}
ins, .neu ins {
- background: var(--ins-bg);
- color: var(--ins-fg);
- text-decoration: none;
+ background: var(--hinterlegung);
+ color: inherit;
+ 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. */
.badge {
font-family: system-ui, sans-serif;
font-size: 0.7rem;
font-weight: normal;
- border-radius: 0.6rem;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ border: 1px solid var(--rand);
+ color: var(--dezent);
padding: 0.1rem 0.55rem;
vertical-align: middle;
}
- .neu-badge { background: var(--ins-bg); color: var(--ins-fg); }
- .aufgehoben-badge { background: var(--del-bg); color: var(--del-fg); }
- .geaendert-badge { border: 1px solid var(--rand); color: var(--dezent); }
+ .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. */
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; }
}
""";
}
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 @@
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 @@
width: 100%;
padding: 0.4rem;
border: 1px solid var(--border);
- border-radius: 4px;
background: transparent;
color: inherit;
}
@@ -102,22 +102,23 @@
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 @@
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 @@
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 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 @@
}
.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;
}
