diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css
index 2272362a..5670e8b6 100644
--- a/workspace/assets/css/start.css
+++ b/workspace/assets/css/start.css
@@ -875,17 +875,32 @@ body.start > main { position: relative; z-index: 1; }
position: absolute; right: -14px; bottom: -26px;
width: 132px; height: 132px;
pointer-events: none; z-index: 0;
- opacity: .07;
+ /* .07 WAR EIN WERT AUS DER ZEIT, ALS DAS ZEICHEN GRAU WAR
+ (07.09.2026). Ein graues Zeichen bei sieben Prozent auf dunklem
+ Grund ist ein Hauch -- mehr ging nicht, ohne dass es schmutzig
+ aussah. Seit die Zeichen ihre eigene Farbe tragen (siehe
+ bereiche.js), ist das etwas anderes: Eine Farbe darf lauter sein
+ als ein Grau, weil sie zur Kachel GEHOERT statt sie zu
+ verschmutzen. Filipe hat genau dieses Wasserzeichen als zweites
+ Beispiel geschickt.
+
+ Auf .14 verdoppelt und mit einem leichten Schein darunter, damit
+ es Tiefe bekommt statt nur heller zu werden. */
+ opacity: .14;
+ filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--ton) 45%, transparent));
transform: rotate(-8deg);
transition: opacity var(--tempo), transform var(--tempo);
}
.kachel__wasserzeichen svg {
width: 100%; height: 100%;
fill: none; stroke: var(--ton);
- stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
+ /* 1,4 statt 1,1: Bei 132 px Kantenlaenge ist eine Linie von 1,1
+ Einheiten im 24er-Raster rund sechs Bildpunkte breit -- sie traegt,
+ wenn sie kraeftig ist, und franst aus, wenn sie es nicht ist. */
+ stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.kachel:hover .kachel__wasserzeichen {
- opacity: .13;
+ opacity: .22;
transform: rotate(-8deg) translate(-4px, -4px) scale(1.04);
}
.kachel[data-gross="ja"] .kachel__wasserzeichen {
diff --git a/workspace/assets/js/bereiche.js b/workspace/assets/js/bereiche.js
index 4092036b..e1cabb2a 100644
--- a/workspace/assets/js/bereiche.js
+++ b/workspace/assets/js/bereiche.js
@@ -539,19 +539,45 @@
und der Browser zeichnete den Pfad gar nicht. Genau daran sind am
03.09.2026 die Querlinie im Kalender, die Regler in Technik und die
Grundlinie der Berichte verschwunden. */
- function verlaufSicherstellen() {
- if (document.getElementById(VERLAUF_ID)) return;
- const svg = document.createElementNS(NS, 'svg');
- svg.setAttribute('id', VERLAUF_ID);
- svg.setAttribute('aria-hidden', 'true');
- svg.setAttribute('width', '0');
- svg.setAttribute('height', '0');
- svg.style.position = 'absolute';
+ /* =====================================================================
+ WARUM JEDES ZEICHEN SEINE VERLAEUFE SELBST TRAEGT (07.09.2026)
+
+ Sie lagen bis heute in EINEM versteckten SVG am Ende der Seite, und
+ alle Zeichen verwiesen darauf. Das ist die uebliche Bauart, spart
+ Platz -- und sie hat hier ein Jahr lang das Gegenteil von dem
+ bewirkt, was danebenstand.
+
+ Die Verlaeufe arbeiten mit `currentColor`, damit jedes Zeichen die
+ Farbe SEINER Kachel annimmt. `currentColor` in einem Verlaufsstopp
+ wird aber an dem Element aufgeloest, das den STOPP enthaelt -- also
+ im versteckten SVG am Seitenende, nicht an der Kachel. Dort ist die
+ Textfarbe das helle Grau der Seite. Jedes Zeichen im ganzen Haus war
+ deshalb grau, egal welche Farbe seine Kachel hatte.
+
+ GEMESSEN, NICHT VERMUTET: Faerbt man das versteckte SVG rot, werden
+ die Zeichen rot (hellster Bildpunkt 43/49/61 -> 46/29/40). Faerbt
+ man das ZEICHEN rot, passiert nichts. Damit war klar, wo die Farbe
+ wirklich herkam.
+
+ Das Tueckische: Es sah nie kaputt aus. Graue Zeichen auf dunklem
+ Grund wirken sauber und zurueckhaltend -- man haelt es fuer die
+ Gestaltung. Filipe hat es als Erster benannt: "ich will dass die
+ symbole viel krasser, realistischer, farbiger und spezieller sind."
+
+ Jetzt bekommt jedes Zeichen seine eigenen Verlaeufe MIT, in seinem
+ eigenen SVG und mit eigener Kennung. Damit steht `currentColor` dort,
+ wo es hingehoert -- im Zeichen selbst, das die Farbe seiner Kachel
+ erbt. Zwanzig Zeichen je Seite ergeben zwanzig kleine
+ Verlaufsbloecke; das ist nichts gegen ein Farbsystem, das nicht
+ wirkt. */
+ let zeichenZaehler = 0;
+
+ function verlaufSicherstellen(ziel, endung) {
const defs = document.createElementNS(NS, 'defs');
const bauen = (id, stops, x2 = '0', y1 = '2', y2 = '22') => {
const lg = document.createElementNS(NS, 'linearGradient');
- lg.setAttribute('id', id);
+ lg.setAttribute('id', id + endung);
lg.setAttribute('gradientUnits', 'userSpaceOnUse');
lg.setAttribute('x1', '0'); lg.setAttribute('y1', y1);
lg.setAttribute('x2', x2); lg.setAttribute('y2', y2);
@@ -567,10 +593,28 @@
/* Die Deckfläche: oben fast weiss, unten im Farbton. Das ist die
Seite, auf die das Licht fällt. */
+ /* AM 07.09.2026 AUF FARBE UMGESTELLT.
+
+ Filipe: "ich will dass die symbole viel krasser, realistischer,
+ farbiger und spezieller sind."
+
+ Der Farbton kam die ganze Zeit richtig an -- gemessen, das Zeichen
+ der Dashboard-Kachel bekam sauber rgb(62,149,231). Er war nur
+ nicht zu SEHEN, weil die Verlaeufe fast ueberall Weiss zeigten:
+ Die Deckflaeche begann mit 92 % Weiss, die Kontur war bis 38 %
+ weiss und bei 100 % wieder. Uebrig blieb ein graues Zeichen mit
+ einem Hauch Farbe in der Mitte.
+
+ Weiss ist jetzt nur noch da, wo bei einem echten Gegenstand das
+ SPITZLICHT sitzt: ein schmaler Streifen ganz oben. Darunter
+ traegt die Eigenfarbe, unten kommt Streulicht in einer HELLEREN
+ Tonung statt in Weiss -- Licht, das vom Untergrund zurueckkommt,
+ nimmt die Farbe des Gegenstands mit, es bleicht ihn nicht aus. */
bauen('zeichen-deck', [
- ['0', '#ffffff', '0.92'],
- ['0.4', 'currentColor', '0.95'],
- ['1', 'currentColor', '0.72'],
+ ['0', '#ffffff', '0.88'],
+ ['0.14', 'currentColor', '1'],
+ ['0.62', 'currentColor', '0.96'],
+ ['1', 'currentColor', '0.78'],
]);
/* Die Seitenwand: derselbe Ton, deutlich dunkler -- eine Wand, die
vom Licht abgewandt ist. */
@@ -609,28 +653,37 @@
das Auge liest sie als Koerper im Raum. */
bauen('zeichen-linie', [
['0', '#ffffff', '0.98'],
- ['0.38', '#ffffff', '0.78'],
- ['0.78', 'currentColor', '0.95'],
- ['1', '#ffffff', '0.42'],
+ ['0.11', '#ffffff', '0.62'],
+ ['0.3', 'currentColor', '1'],
+ ['0.82', 'currentColor', '1'],
+ ['1', 'currentColor', '0.62'],
]);
/* Die Spiegelung, diagonal von links oben nach rechts unten. */
+ /* DAS SPITZLICHT WIRD SCHMAL UND HART.
+
+ Vorher lief es ueber zwei Drittel der Flaeche aus -- das ist kein
+ Spitzlicht, sondern ein Schleier, und Schleier machen jede Farbe
+ blass. Ein Spitzlicht auf einer gewoelbten Flaeche ist KLEIN und
+ hat eine Kante; genau daran erkennt das Auge die Woelbung. */
bauen('zeichen-glanz', [
- ['0', '#ffffff', '0.55'],
- ['0.45', '#ffffff', '0.12'],
- ['0.7', '#ffffff', '0'],
+ ['0', '#ffffff', '0.72'],
+ ['0.16', '#ffffff', '0.3'],
+ ['0.3', '#ffffff', '0'],
], '18', '0', '20');
- svg.append(defs);
- document.body.append(svg);
+ ziel.append(defs);
}
function zeichenBauen(name, klasse = 'kachel__svg') {
- verlaufSicherstellen();
const svg = document.createElementNS(NS, 'svg');
svg.setAttribute('viewBox', '0 0 24 24');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('class', klasse);
+ /* Eine eigene Kennung je Zeichen -- zwei gleiche Kennungen in einem
+ Dokument sind ein Verweis ins Nichts fuer das zweite. */
+ const endung = '-' + (++zeichenZaehler);
+ verlaufSicherstellen(svg, endung);
/* Erst die Fläche, dann die Linie -- in dieser Reihenfolge liegt
die Zeichnung oben. Ein Zeichen ohne Füllung (ältere Einträge,
@@ -653,11 +706,25 @@
['zeichen__tiefe2', 'translate(1 1)'],
['zeichen__tiefe1', 'translate(0.5 0.5)'],
];
+ /* WOHIN DIE VERWEISE GEHOEREN: in den Inline-Stil.
+
+ Eine Klassenregel in start.css (`.zeichen__deck { fill: url(...) }`)
+ wuerde einen Praesentations-Attributwert schlagen, aber nicht den
+ Inline-Stil. Und sie kann die Kennung nicht kennen, weil die je
+ Zeichen anders ist. Die Farbe des Wasserzeichens setzt weiterhin
+ das CSS -- dort steht ausdruecklich `stroke: var(--ton)`, und
+ darum bekommt es hier keinen Verweis. */
+ const wasserzeichen = /wasserzeichen/.test(klasse);
+ const verweis = (el, eigenschaft, id) => {
+ if (!wasserzeichen) el.style.setProperty(eigenschaft, `url(#${id}${endung})`);
+ };
+
for (const [klasse, versatz] of tiefen) {
if (!umriss.length) break;
const g = document.createElementNS(NS, 'g');
g.setAttribute('class', klasse);
g.setAttribute('transform', versatz);
+ if (klasse !== 'zeichen__tiefe3') verweis(g, 'fill', 'zeichen-wand');
for (const d of umriss) {
const pfad = document.createElementNS(NS, 'path');
pfad.setAttribute('d', d);
@@ -686,10 +753,16 @@
['zeichen__saum', linien],
['zeichen__linie', linien],
];
+ const verlaufZu = {
+ zeichen__deck: ['fill', 'zeichen-deck'],
+ zeichen__glanz: ['fill', 'zeichen-glanz'],
+ zeichen__linie: ['stroke', 'zeichen-linie'],
+ };
for (const [klasse, pfade] of lagen) {
if (!pfade.length) continue;
const g = document.createElementNS(NS, 'g');
g.setAttribute('class', klasse);
+ if (verlaufZu[klasse]) verweis(g, verlaufZu[klasse][0], verlaufZu[klasse][1]);
for (const d of pfade) {
const pfad = document.createElementNS(NS, 'path');
pfad.setAttribute('d', d);
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 62acc03f..c86b393d 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -9,10 +9,10 @@
-
-
-
-
+
+
+
+
@@ -212,10 +212,10 @@
-
-
-
-
-
+
+
+
+
+