diff --git a/workspace/assets/css/module.css b/workspace/assets/css/module.css
index da446479..53241633 100644
--- a/workspace/assets/css/module.css
+++ b/workspace/assets/css/module.css
@@ -302,7 +302,13 @@
#b9c8da 360deg);
box-shadow:
0 6px 16px -8px rgba(0, 0, 0, .9),
- 0 0 0 1px rgba(6, 10, 18, .55);
+ 0 0 0 1px rgba(6, 10, 18, .55),
+ /* DAS LICHT DES SCHILDES FAELLT AUF DIE KACHEL. Ein beleuchteter
+ Gegenstand wirft Farbe auf seine Umgebung -- ohne diesen Abfall
+ sieht selbst ein gut gebautes Schild aufgeklebt aus. Sehr weit
+ gestreut und weit unter der Blendschwelle: Man soll ihn nicht
+ sehen, man soll ihn vermissen, wenn er fehlt. */
+ 0 10px 42px -14px color-mix(in srgb, var(--ton, var(--akzent)) 75%, transparent);
}
/* Das Schild IM Ring -- hier liegt die Farbe der Kategorie. */
.kachel__zeichen::before {
diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css
index 5670e8b6..9feb2f55 100644
--- a/workspace/assets/css/start.css
+++ b/workspace/assets/css/start.css
@@ -873,7 +873,7 @@ body.start > main { position: relative; z-index: 1; }
tragen, nicht ihr Zeichen. */
.kachel__wasserzeichen {
position: absolute; right: -14px; bottom: -26px;
- width: 132px; height: 132px;
+ width: 156px; height: 156px;
pointer-events: none; z-index: 0;
/* .07 WAR EIN WERT AUS DER ZEIT, ALS DAS ZEICHEN GRAU WAR
(07.09.2026). Ein graues Zeichen bei sieben Prozent auf dunklem
@@ -904,7 +904,7 @@ body.start > main { position: relative; z-index: 1; }
transform: rotate(-8deg) translate(-4px, -4px) scale(1.04);
}
.kachel[data-gross="ja"] .kachel__wasserzeichen {
- width: 168px; height: 168px; right: -18px; bottom: -34px;
+ width: 196px; height: 196px; right: -20px; bottom: -38px;
}
.kachel__link:focus-visible {
outline: 2px solid var(--ton); outline-offset: -4px; border-radius: 15px;
@@ -930,7 +930,10 @@ body.start > main { position: relative; z-index: 1; }
position: relative; z-index: 1;
flex: none; overflow: hidden;
display: grid; place-items: center;
- width: 58px; height: 58px; border-radius: 17px;
+ /* 64 statt 58 (07.09.2026, Wunsch Filipe: groesser). Die Plakette
+ ist das Erste, was man auf einer Kachel sieht -- sie darf den
+ Platz nehmen. */
+ width: 64px; height: 64px; border-radius: 17px;
background:
radial-gradient(120% 100% at 22% 8%,
color-mix(in srgb, var(--ton) 46%, transparent) 0%,
@@ -987,7 +990,7 @@ body.start > main { position: relative; z-index: 1; }
inset 0 1px 0 color-mix(in srgb, var(--ton) 55%, transparent),
0 6px 20px -8px color-mix(in srgb, var(--ton) 85%, transparent);
}
-.kachel[data-gross="ja"] .kachel__zeichen { width: 70px; height: 70px; border-radius: 21px; }
+.kachel[data-gross="ja"] .kachel__zeichen { width: 78px; height: 78px; border-radius: 21px; }
/* ---------- Die Zeichen (überarbeitet 03.09.2026) ------------------------
@@ -1010,7 +1013,7 @@ body.start > main { position: relative; z-index: 1; }
.kachel__svg {
/* 29 statt 25: Zusammen mit der kräftigeren Linie ist das der
sichtbarste Teil der Überarbeitung. */
- width: 29px; height: 29px;
+ width: 35px; height: 35px;
color: var(--ton);
fill: none;
stroke-linecap: round; stroke-linejoin: round;
@@ -1061,6 +1064,19 @@ body.start > main { position: relative; z-index: 1; }
stroke-width: 3.4;
stroke-linecap: round; stroke-linejoin: round;
}
+/* Die kuehle Lichtkante. Duenner als die Kontur und ohne Fuellung --
+ sie soll die Kante andeuten, nicht eine zweite Zeichnung sein. */
+.kachel__svg .zeichen__rand {
+ fill: none;
+ /* BREITER als die Kontur darueber (2,7 gegen 1,9) und um ein Drittel
+ Rasterpunkt versetzt -- nur so schaut die Lichtkante oben links
+ unter der Zeichnung hervor. Im ersten Anlauf war sie schmaler und
+ lag damit vollstaendig darunter: gebaut, gezeichnet, unsichtbar. */
+ stroke-width: 2.7;
+ stroke-linecap: round; stroke-linejoin: round;
+}
+.kachel__wasserzeichen .zeichen__rand { display: none; }
+
.kachel__svg .zeichen__linie {
stroke: url(#zeichen-linie);
/* 2,05 statt 1,65: Die Zeichen sollen TRAGEN, nicht andeuten. Eine
@@ -1112,15 +1128,15 @@ body.start > main { position: relative; z-index: 1; }
.kachel__text { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; }
.kachel__name {
- font-size: 1.06rem; font-weight: 650; letter-spacing: -.014em; line-height: 1.25;
+ font-size: 1.15rem; font-weight: 680; letter-spacing: -.016em; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
-.kachel[data-gross="ja"] .kachel__name { font-size: 1.24rem; }
+.kachel[data-gross="ja"] .kachel__name { font-size: 1.38rem; }
.kachel__unter {
- font-size: .78rem; color: var(--text-still); line-height: 1.3;
+ font-size: .845rem; color: var(--text-still); line-height: 1.32;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
-.kachel[data-gross="ja"] .kachel__unter { font-size: .83rem; }
+.kachel[data-gross="ja"] .kachel__unter { font-size: .9rem; }
/* Die Zahl auf der Kachel. Sie ersetzt den Pfeil, wenn dort Arbeit
liegt -- eine Kachel, die "3" sagt, ist zehnmal mehr wert als eine,
@@ -4293,7 +4309,7 @@ body[data-fremde-sicht="ja"]::after {
margin: 0 0 auto; /* schiebt den Text nach unten */
border-radius: 14px;
}
-.kachel__svg { width: 25px; height: 25px; }
+.kachel__svg { width: 30px; height: 30px; }
.kachel__text {
width: 100%;
@@ -4301,7 +4317,7 @@ body[data-fremde-sicht="ja"]::after {
gap: 2px;
}
.kachel__name {
- font-size: 1rem; font-weight: 700; letter-spacing: -.012em;
+ font-size: 1.09rem; font-weight: 700; letter-spacing: -.014em;
/* Zwei Zeilen erlaubt: "Calls & Protokolle" passt in einer Spalte von
214 px nicht in eine Zeile, und ein abgeschnittener Name ist auf
einer Übersichtsseite das Gegenteil von übersichtlich. */
@@ -4310,7 +4326,7 @@ body[data-fremde-sicht="ja"]::after {
overflow: hidden;
}
.kachel__unter {
- font-size: .765rem; line-height: 1.35;
+ font-size: .825rem; line-height: 1.35;
color: var(--text-leise);
white-space: normal;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
@@ -4367,9 +4383,9 @@ body[data-fremde-sicht="ja"]::after {
min-height: 152px;
}
.kachel[data-gross="ja"] .kachel__zeichen {
- width: 62px; height: 62px; margin: 0; border-radius: 18px;
+ width: 70px; height: 70px; margin: 0; border-radius: 18px;
}
-.kachel[data-gross="ja"] .kachel__svg { width: 32px; height: 32px; }
+.kachel[data-gross="ja"] .kachel__svg { width: 39px; height: 39px; }
.kachel[data-gross="ja"] .kachel__text { margin-top: 0; }
.kachel[data-gross="ja"] .kachel__name { font-size: 1.22rem; -webkit-line-clamp: 1; }
.kachel[data-gross="ja"] .kachel__unter { font-size: .84rem; -webkit-line-clamp: 1; }
diff --git a/workspace/assets/js/bereiche.js b/workspace/assets/js/bereiche.js
index e1cabb2a..f576fa83 100644
--- a/workspace/assets/js/bereiche.js
+++ b/workspace/assets/js/bereiche.js
@@ -575,10 +575,23 @@
function verlaufSicherstellen(ziel, endung) {
const defs = document.createElementNS(NS, 'defs');
- const bauen = (id, stops, x2 = '0', y1 = '2', y2 = '22') => {
+ /* AN DER FORM AUSGERICHTET, NICHT AM RASTER (07.09.2026).
+
+ Die Verlaeufe spannten ueber das ganze 24er-Raster (y von 2 bis
+ 22). Ein Zeichen fuellt das aber nie aus: Die Sprechblase des
+ Chats reicht von y 5,5 bis 20,5. Das warme Streulicht sass bei
+ y 22 -- also UNTER der Form, und war nie zu sehen. Bei hoher
+ Vergroesserung nachgemessen; von den drei Lichtern kam nur eines
+ an.
+
+ `objectBoundingBox` spannt den Verlauf ueber JEDES Teil einzeln:
+ Der Kalenderkorpus bekommt sein volles Licht, seine Fuesse
+ ebenfalls. Genau so verhaelt sich ein echter Aufbau -- jedes Teil
+ liegt im selben Licht, nicht im selben Ausschnitt. */
+ const bauen = (id, stops, x2 = '0', y1 = '0', y2 = '1', raum = 'objectBoundingBox') => {
const lg = document.createElementNS(NS, 'linearGradient');
lg.setAttribute('id', id + endung);
- lg.setAttribute('gradientUnits', 'userSpaceOnUse');
+ lg.setAttribute('gradientUnits', raum);
lg.setAttribute('x1', '0'); lg.setAttribute('y1', y1);
lg.setAttribute('x2', x2); lg.setAttribute('y2', y2);
for (const [pos, farbe, deck] of stops) {
@@ -610,17 +623,45 @@
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. */
+ /* =====================================================================
+ DREI LICHTER, DREI FARBEN (07.09.2026)
+
+ Filipe: "die symbole sollen auch 2-3 farben haben ... sollen mehr
+ leben haben, auch viel realistischere effekte."
+
+ Nicht drei ausgedachte Farben, sondern die drei, die ein
+ Gegenstand in einem echten Aufbau bekommt -- so wird jedes
+ Produktfoto ausgeleuchtet, und aus demselben Grund sieht es
+ plastisch aus:
+
+ 1 FUEHRUNGSLICHT, kalt, von oben links. Ein Spitzlicht ist nie
+ reinweiss; es traegt die Farbe der Lampe, und die ist kuehl.
+ Hier ein Hauch Babyblau darin.
+ 2 EIGENFARBE des Gegenstands -- der Ton seiner Kachel.
+ 3 STREULICHT, warm, von unten. Licht, das vom Untergrund
+ zurueckkommt, ist waermer als das Hauptlicht. Genau dieser
+ warme Saum unten ist der Grund, warum ein Gegenstand im Bild
+ "steht" statt zu schweben.
+
+ Und die Schatten sind KUEHL: Warmes Licht, kuehle Schatten -- das
+ ist die aelteste Regel der Malerei und der schnellste Weg von
+ "Farbflaeche" zu "Koerper". Sie steckt unten in `zeichen-wand`. */
bauen('zeichen-deck', [
- ['0', '#ffffff', '0.88'],
- ['0.14', 'currentColor', '1'],
- ['0.62', 'currentColor', '0.96'],
- ['1', 'currentColor', '0.78'],
+ ['0', '#eaf4ff', '0.95'],
+ ['0.12', 'currentColor', '1'],
+ ['0.55', 'currentColor', '0.97'],
+ ['0.82', '#ff9c5a', '0.42'],
+ ['1', '#ffb46a', '0.66'],
]);
/* Die Seitenwand: derselbe Ton, deutlich dunkler -- eine Wand, die
vom Licht abgewandt ist. */
+ /* Die Seitenwand -- kuehl und dunkel. Ein Schatten ist nicht
+ "dieselbe Farbe, nur dunkler": Ihm fehlt das warme Hauptlicht,
+ also kippt er ins Blaue. */
bauen('zeichen-wand', [
- ['0', 'currentColor', '0.5'],
- ['1', 'currentColor', '0.28'],
+ ['0', 'currentColor', '0.52'],
+ ['0.6', '#1b2b45', '0.62'],
+ ['1', '#0d1626', '0.72'],
]);
/* Der Körper: oben satt, unten fast durchsichtig. */
@@ -652,11 +693,23 @@
sieht aus wie gemalt; mit ihm bekommt sie unten eine Kante, und
das Auge liest sie als Koerper im Raum. */
bauen('zeichen-linie', [
- ['0', '#ffffff', '0.98'],
- ['0.11', '#ffffff', '0.62'],
+ ['0', '#f2f9ff', '0.99'],
+ ['0.1', '#bfe0ff', '0.78'],
['0.3', 'currentColor', '1'],
- ['0.82', 'currentColor', '1'],
- ['1', 'currentColor', '0.62'],
+ ['0.74', 'currentColor', '1'],
+ ['1', '#ffc389', '0.85'],
+ ]);
+
+ /* DAS RANDLICHT. Eine kuehle Kante auf der Lichtseite -- der
+ schmale Streifen, in dem das Fuehrungslicht die Kante des
+ Gegenstands streift. Er wird als zweite Lage der Kontur
+ gezeichnet, ein Drittel Rasterpunkt nach oben links versetzt.
+ Ein Gegenstand ohne diese Kante sieht immer ein wenig flach aus,
+ und man kann meist nicht sagen, warum. */
+ bauen('zeichen-rand', [
+ ['0', '#dff0ff', '0.85'],
+ ['0.5', '#9fd4ff', '0.45'],
+ ['1', '#9fd4ff', '0'],
]);
/* Die Spiegelung, diagonal von links oben nach rechts unten. */
@@ -670,7 +723,7 @@
['0', '#ffffff', '0.72'],
['0.16', '#ffffff', '0.3'],
['0.3', '#ffffff', '0'],
- ], '18', '0', '20');
+ ], '18', '0', '20', 'userSpaceOnUse');
ziel.append(defs);
}
@@ -751,17 +804,20 @@
Rille, auf der dunklen Plakette verschwindet er und die helle
Linie trägt. Ein Zeichen, zwei Untergründe, eine Lösung. */
['zeichen__saum', linien],
+ ['zeichen__rand', linien], // die kuehle Lichtkante darunter
['zeichen__linie', linien],
];
const verlaufZu = {
zeichen__deck: ['fill', 'zeichen-deck'],
zeichen__glanz: ['fill', 'zeichen-glanz'],
+ zeichen__rand: ['stroke', 'zeichen-rand'],
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 (klasse === 'zeichen__rand') g.setAttribute('transform', 'translate(-0.34 -0.34)');
if (verlaufZu[klasse]) verweis(g, verlaufZu[klasse][0], verlaufZu[klasse][1]);
for (const d of pfade) {
const pfad = document.createElementNS(NS, 'path');
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 177d1e4d..51b2cf9c 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -9,10 +9,10 @@
-
-
-
-
+
+
+
+
@@ -212,10 +212,10 @@
-
-
-
-
-
+
+
+
+
+