diff --git a/server/pruef-buehne.png b/server/pruef-buehne.png
index 727ab207..4e2456ac 100644
Binary files a/server/pruef-buehne.png and b/server/pruef-buehne.png differ
diff --git a/server/pruef-handy.png b/server/pruef-handy.png
index 528e9602..663d9fad 100644
Binary files a/server/pruef-handy.png and b/server/pruef-handy.png differ
diff --git a/server/pruef-lesbarkeit-scouting.png b/server/pruef-lesbarkeit-scouting.png
index 446cb2f2..6ecd6f9e 100644
Binary files a/server/pruef-lesbarkeit-scouting.png and b/server/pruef-lesbarkeit-scouting.png differ
diff --git a/server/pruef-lesbarkeit-wissen.png b/server/pruef-lesbarkeit-wissen.png
index c97ee79f..98dae780 100644
Binary files a/server/pruef-lesbarkeit-wissen.png and b/server/pruef-lesbarkeit-wissen.png differ
diff --git a/server/pruef-rollen-admin.png b/server/pruef-rollen-admin.png
index 10390586..a449ba43 100644
Binary files a/server/pruef-rollen-admin.png and b/server/pruef-rollen-admin.png differ
diff --git a/server/pruef-rollen-creator.png b/server/pruef-rollen-creator.png
index 7cf8b56e..05f5603a 100644
Binary files a/server/pruef-rollen-creator.png and b/server/pruef-rollen-creator.png differ
diff --git a/server/pruef-rollen-manager.png b/server/pruef-rollen-manager.png
index cdf8651e..b338fb27 100644
Binary files a/server/pruef-rollen-manager.png and b/server/pruef-rollen-manager.png differ
diff --git a/server/pruef-rollen-scout.png b/server/pruef-rollen-scout.png
index 125fc1e7..989a29a7 100644
Binary files a/server/pruef-rollen-scout.png and b/server/pruef-rollen-scout.png differ
diff --git a/server/pruef-start-computer.png b/server/pruef-start-computer.png
index c50ae9a7..4830507e 100644
Binary files a/server/pruef-start-computer.png and b/server/pruef-start-computer.png differ
diff --git a/server/pruef-start-creator.png b/server/pruef-start-creator.png
index e5873409..2d833719 100644
Binary files a/server/pruef-start-creator.png and b/server/pruef-start-creator.png differ
diff --git a/server/pruef-start-handy.png b/server/pruef-start-handy.png
index e74af16f..f234359c 100644
Binary files a/server/pruef-start-handy.png and b/server/pruef-start-handy.png differ
diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css
index cec0be5a..7f3cd55a 100644
--- a/workspace/assets/css/start.css
+++ b/workspace/assets/css/start.css
@@ -842,12 +842,54 @@ body.start > main { position: relative; z-index: 1; }
filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--ton) 45%, transparent));
transition: transform var(--tempo), filter var(--tempo);
}
+/* ---------- Der Körper (03.09.2026, dritte Stufe) ------------------------
+
+ Die Zeichen sind keine Zeichnungen mehr, sondern KÖRPER. Aufbau von
+ hinten nach vorn:
+
+ tiefe3/2/1 dieselbe Silhouette, je einen halben Rasterpunkt
+ versetzt und heller werdend. Das Auge liest die drei
+ Kanten als EINE schräge Seitenwand -- so zeichnet man
+ einen Quader von Hand.
+ deck die Oberseite: oben fast weiss, unten im Farbton.
+ Die Fläche, auf die das Licht fällt.
+ glanz die Spiegelung darauf.
+ linie die Details -- Querstriche, Haken, Wellen. Sie liegen
+ AUF der Deckfläche und bekommen keine Tiefe: Ein
+ aufgedruckter Strich steht nicht hervor.
+
+ Drei Tiefenlagen sind gemessen: bei zwei sieht es aus wie ein
+ Druckfehler, ab fünf wie ein Schlagschatten. */
+.kachel__svg .zeichen__tiefe3,
+.kachel__svg .zeichen__tiefe2,
+.kachel__svg .zeichen__tiefe1 {
+ stroke: none;
+}
+.kachel__svg .zeichen__tiefe3 { fill: rgba(0, 0, 0, .55); }
+.kachel__svg .zeichen__tiefe2 { fill: url(#zeichen-wand); opacity: .85; }
+.kachel__svg .zeichen__tiefe1 { fill: url(#zeichen-wand); }
+
+.kachel__svg .zeichen__deck {
+ fill: url(#zeichen-deck);
+ stroke: none;
+}
+
+/* Der Saum: dunkel und breiter, liegt UNTER der hellen Linie. Auf der
+ hellen Deckfläche liest man beide zusammen als eingravierte Rille,
+ auf der dunklen Plakette verschwindet er und nur die helle Linie
+ bleibt. */
+.kachel__svg .zeichen__saum {
+ fill: none;
+ stroke: rgba(6, 10, 16, .78);
+ stroke-width: 3.4;
+ stroke-linecap: round; stroke-linejoin: round;
+}
.kachel__svg .zeichen__linie {
stroke: url(#zeichen-linie);
/* 2,05 statt 1,65: Die Zeichen sollen TRAGEN, nicht andeuten. Eine
dünne Linie wirkt neben kräftigem Text zaghaft -- und zaghaft war
genau das Problem. */
- stroke-width: 2.05;
+ stroke-width: 1.9;
paint-order: stroke fill;
}
/* DIE SCHEIN-LAGE IST WIEDER WEG (03.09.2026) -- und der Weg dorthin
@@ -2858,14 +2900,7 @@ body[data-fremde-sicht="ja"]::after {
Fleck und die Linie darin unsichtbar, darunter sieht man die Fläche
gar nicht mehr. Beim Überfahren geht sie auf 30 %, so als käme Licht
dazu. */
-.kachel__svg .zeichen__fuellung {
- /* Ein VERLAUF statt einer flachen Deckkraft: oben satt, unten fast
- weg. Eine gleichmässig gefüllte Form ist ein Aufkleber; eine, die
- nach unten ausläuft, ist ein Körper. */
- fill: url(#zeichen-flaeche);
- stroke: none;
- transition: opacity var(--tempo);
-}
+
/* Die Spiegelung liegt auf demselben Körper -- ein schmaler heller
Streifen quer über die obere Hälfte, wie Licht auf gewölbtem Glas. */
.kachel__svg .zeichen__glanz {
@@ -2881,7 +2916,7 @@ body[data-fremde-sicht="ja"]::after {
.kachel__wasserzeichen .zeichen__glanz { display: none; }
@media (prefers-reduced-motion: reduce) {
- .kachel__svg .zeichen__fuellung { transition: none; }
+
}
@media (forced-colors: active) {
/* Ohne Farben würde die Fläche zu einem massiven Block. */
@@ -2895,11 +2930,7 @@ body[data-fremde-sicht="ja"]::after {
von unten hereinkriecht. Zusammen mit dem Streulicht in der Kontur
ergibt das die Beleuchtung, die man aus der Wirklichkeit kennt --
Hauptlicht oben, Schatten unten, Aufheller an der Unterkante. */
-.kachel__svg .zeichen__eigenschatten {
- fill: url(#zeichen-schatten);
- stroke: none;
- mix-blend-mode: multiply;
-}
+
/* Der Schlagschatten AUF die Plakette. Er ist der eigentliche Grund,
warum das Zeichen über der Fläche zu schweben scheint statt darauf zu
diff --git a/workspace/assets/js/bereiche.js b/workspace/assets/js/bereiche.js
index 6ea8c0df..eb8b0042 100644
--- a/workspace/assets/js/bereiche.js
+++ b/workspace/assets/js/bereiche.js
@@ -40,6 +40,88 @@
Eigene Pfade statt einer Fremdbibliothek: siebzehn Zeichen sind
kleiner als jede Schriftart und kosten keine Lieferkette. */
+ /* ---------- Die Silhouetten -------------------------------------------
+
+ Der UMRISS jedes Gegenstands als geschlossene Form. Aus ihm entsteht
+ die Tiefe: Er wird dreimal übereinander gezeichnet, jedes Mal ein
+ Stück versetzt und dunkler -- unten die Grundfläche, darüber die
+ Seitenwand, oben die Deckfläche. Das ist dasselbe Verfahren, mit dem
+ man einen Körper von Hand zeichnet, und es ist der Grund, warum die
+ Zeichen jetzt eine Höhe haben statt nur einen Umriss.
+
+ Getrennt von den Linien gehalten: Die Linien sind die DETAILS auf der
+ Oberfläche (Querstriche, Haken, Wellen). Sie bekommen keine Tiefe --
+ ein aufgedruckter Strich steht nicht hervor. */
+ const KOERPER = {
+ dashboard: [
+ 'M4 4.5h6.4v6.4H4z',
+ 'M13.6 4.5h6.4v4.2h-6.4z',
+ 'M13.6 11.6h6.4v7.9h-6.4z',
+ 'M4 13.7h6.4v5.8H4z'
+ ],
+ aufgaben: [
+ 'M4.5 5h4v14h-4z',
+ 'M10 5h4v9h-4z',
+ 'M15.5 5h4v11.5h-4z'
+ ],
+ kalender: [
+ 'M3.5 7h17v12.5h-17z'
+ ],
+ calls: [
+ 'M3.5 7h11v10h-11z',
+ 'M14.5 11l6-3.5v9l-6-3.5z'
+ ],
+ dateien: [
+ 'M3.5 6.5h5.5l2 2h9.5v11h-17z'
+ ],
+ steckbrief: [
+ 'M3.5 5.5h17v13h-17z'
+ ],
+ profil: [
+ 'M12 7a3.2 3.2 0 1 0 0 6.4A3.2 3.2 0 0 0 12 7z',
+ 'M5.5 20c.7-3.3 3.3-5.3 6.5-5.3s5.8 2 6.5 5.3z'
+ ],
+ startcheck: [
+ 'M6 4.5h12v15H6z'
+ ],
+ live: [
+ 'M12 10.2a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z'
+ ],
+ content: [
+ 'M3.5 6h17v13h-17z'
+ ],
+ technik: [
+ 'M9 5.9a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z',
+ 'M15 10.4a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z',
+ 'M7.5 14.9a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z'
+ ],
+ community: [
+ 'M9 8.6a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4z',
+ 'M3.5 19.5c.6-2.8 2.8-4.5 5.5-4.5s4.9 1.7 5.5 4.5z'
+ ],
+ schutz: [
+ 'M12 3.6 5.6 6.3v5.1c0 3.8 2.6 7.2 6.4 8.4 3.8-1.2 6.4-4.6 6.4-8.4V6.3z'
+ ],
+ reports: [
+ 'M6.6 9.5h1.8v7h-1.8z',
+ 'M11.1 5.5h1.8v11h-1.8z',
+ 'M15.6 11.5h1.8v5h-1.8z'
+ ],
+ personen: [
+ 'M14.4 6.2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'
+ ],
+ scouting: [
+ 'M3.5 5.5h17l-6.6 7.6v6.4l-3.8-2.1v-4.3z'
+ ],
+ wissen: [
+ 'M4 5h6.4c.9 0 1.6.7 1.6 1.6V19c0-.9-.7-1.6-1.6-1.6H4z',
+ 'M20 5h-6.4c-.9 0-1.6.7-1.6 1.6V19c0-.9.7-1.6 1.6-1.6H20z'
+ ],
+ automation: [
+ 'M13.2 3.2 6 13.4h5.2l-.8 7.4 7.6-10.6h-5.2z'
+ ]
+ };
+
const ZEICHEN = {
dashboard: {
/* Zwei der vier Felder gefüllt, über Eck -- das gibt dem Zeichen
@@ -381,6 +463,20 @@
defs.append(lg);
};
+ /* Die Deckfläche: oben fast weiss, unten im Farbton. Das ist die
+ Seite, auf die das Licht fällt. */
+ bauen('zeichen-deck', [
+ ['0', '#ffffff', '0.92'],
+ ['0.4', 'currentColor', '0.95'],
+ ['1', 'currentColor', '0.72'],
+ ]);
+ /* Die Seitenwand: derselbe Ton, deutlich dunkler -- eine Wand, die
+ vom Licht abgewandt ist. */
+ bauen('zeichen-wand', [
+ ['0', 'currentColor', '0.5'],
+ ['1', 'currentColor', '0.28'],
+ ]);
+
/* Der Körper: oben satt, unten fast durchsichtig. */
bauen('zeichen-flaeche', [
['0', 'currentColor', '0.68'],
@@ -438,20 +534,60 @@
die Zeichnung oben. Ein Zeichen ohne Füllung (ältere Einträge,
die noch ein reines Feld sind) bekommt einfach keine. */
const eintrag = ZEICHEN[name] || {};
- /* Drei Lagen, von hinten nach vorn: Körper, Spiegelung auf dem
- Körper, dann die Kontur. Die Spiegelung benutzt dieselben Pfade
- wie der Körper -- sie liegt also GENAU auf ihm und nicht daneben. */
- const teile = Array.isArray(eintrag)
- ? [['zeichen__linie', eintrag]]
- : [['zeichen__fuellung', eintrag.fuellung || []],
- ['zeichen__eigenschatten', eintrag.fuellung || []],
- ['zeichen__glanz', eintrag.fuellung || []],
- ['zeichen__linie', eintrag.linien || []]];
+ const umriss = KOERPER[name] || eintrag.fuellung || [];
+ const linien = Array.isArray(eintrag) ? eintrag : (eintrag.linien || []);
- for (const [lage, pfade] of teile) {
+ /* ---- Die Tiefe ----------------------------------------------------
+
+ Dieselbe Silhouette, dreimal, jedes Mal um einen halben
+ Rasterpunkt nach rechts unten versetzt. Von hinten nach vorn wird
+ sie heller. Das Auge liest die drei versetzten Kanten als EINE
+ schräge Seitenwand -- genau so, wie man einen Quader zeichnet.
+
+ Drei Lagen sind gemessen: bei zwei wirkt es wie ein
+ Druckfehler, ab fünf wie ein Schlagschatten. */
+ const tiefen = [
+ ['zeichen__tiefe3', 'translate(1.5 1.5)'],
+ ['zeichen__tiefe2', 'translate(1 1)'],
+ ['zeichen__tiefe1', 'translate(0.5 0.5)'],
+ ];
+ for (const [klasse, versatz] of tiefen) {
+ if (!umriss.length) break;
+ const g = document.createElementNS(NS, 'g');
+ g.setAttribute('class', klasse);
+ g.setAttribute('transform', versatz);
+ for (const d of umriss) {
+ const pfad = document.createElementNS(NS, 'path');
+ pfad.setAttribute('d', d);
+ g.append(pfad);
+ }
+ svg.append(g);
+ }
+
+ /* ---- Die Deckfläche und was darauf liegt --------------------------- */
+ const lagen = [
+ ['zeichen__deck', umriss], // die Oberseite, hell
+ ['zeichen__glanz', umriss], // die Spiegelung darauf
+ /* Die Details ZWEIMAL: erst ein dunkler Saum, dann die helle
+ Linie darauf.
+
+ Der Grund ist, dass dieselbe Linie über ZWEI Untergründen
+ liegt. Ein Querstrich im Kalender liegt auf der hellen
+ Deckfläche, die Wellen der LIVE-Analyse dagegen frei auf der
+ dunklen Plakette. Eine dunkle Linie verschwindet dort, eine
+ helle auf dem Deck -- was immer man wählt, die Hälfte ist weg.
+
+ Dunkler Saum plus helle Linie löst beides auf einmal: Auf dem
+ hellen Deck sieht man den Saum und liest eine eingravierte
+ 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__linie', linien],
+ ];
+ for (const [klasse, pfade] of lagen) {
if (!pfade.length) continue;
const g = document.createElementNS(NS, 'g');
- g.setAttribute('class', lage);
+ g.setAttribute('class', klasse);
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 65494ce9..960370db 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -7,9 +7,9 @@
-
-
-
+
+
+
@@ -152,9 +152,9 @@
-
-
-
-
+
+
+
+