diff --git a/server/pruef-buehne.png b/server/pruef-buehne.png
new file mode 100644
index 00000000..ee94dc3b
Binary files /dev/null and b/server/pruef-buehne.png differ
diff --git a/server/pruef-handy.png b/server/pruef-handy.png
index 9fed8350..d3cd3e0a 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 ab4ab271..47260fd7 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 21940952..0344a31e 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 712749e4..f434ccaf 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 c1550dca..a075e4c0 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 e1f4128f..09b51fd2 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 741b6a35..0bae17e7 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 5ad2610f..7bd15d75 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 065afb63..eceeb458 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 e1e92b4a..e0d7aec8 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 59fdabac..6dd86579 100644
--- a/workspace/assets/css/start.css
+++ b/workspace/assets/css/start.css
@@ -63,7 +63,7 @@ body.start::before {
background-position: 50% 42%;
background-size: cover;
/* Rueckfall, falls eine Seite keine eigene Szene hat. */
- background-image: url("../img/buehne-studio-breit.webp");
+ background-image: url("../img/buehne-dogfather-breit.webp");
}
/* ---------- Neun Buehnen, nicht eine ------------------------------------
@@ -80,15 +80,15 @@ body.start::before {
Alle sind gleich abgedunkelt und tragen dieselbe Vignette -- sie sehen
verschieden aus und verhalten sich gleich. Eine Buehne, die je Seite
anders hell waere, waere Unruhe statt Vielfalt. */
-body.start[data-buehne="studio"]::before { background-image: url("../img/buehne-studio-breit.webp"); }
-body.start[data-buehne="showbuehne"]::before { background-image: url("../img/buehne-showbuehne-breit.webp"); }
-body.start[data-buehne="garage"]::before { background-image: url("../img/buehne-garage-breit.webp"); }
-body.start[data-buehne="skyline"]::before { background-image: url("../img/buehne-skyline-breit.webp"); }
-body.start[data-buehne="lounge"]::before { background-image: url("../img/buehne-lounge-breit.webp"); }
-body.start[data-buehne="arena"]::before { background-image: url("../img/buehne-arena-breit.webp"); }
-body.start[data-buehne="halle"]::before { background-image: url("../img/buehne-halle-breit.webp"); }
-body.start[data-buehne="wald"]::before { background-image: url("../img/buehne-wald-breit.webp"); }
-body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-portal-breit.webp"); }
+body.start[data-buehne="studio"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
+body.start[data-buehne="showbuehne"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
+body.start[data-buehne="garage"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
+body.start[data-buehne="skyline"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
+body.start[data-buehne="lounge"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
+body.start[data-buehne="arena"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
+body.start[data-buehne="halle"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
+body.start[data-buehne="wald"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
+body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
/* Der Schleier. Er ist der Grund, warum Text über einem Foto unverändert
@@ -162,19 +162,19 @@ body.start > main { position: relative; z-index: 1; }
auf 9:16 gequetschtes Breitbild zeigt nur noch Wand. */
@media (max-width: 760px) {
body.start::before {
- background-image: url("../img/buehne-studio-schmal.webp");
+ background-image: url("../img/buehne-dogfather-schmal.webp");
background-size: cover;
background-position: 50% 38%;
}
- body.start[data-buehne="studio"]::before { background-image: url("../img/buehne-studio-schmal.webp"); }
- body.start[data-buehne="showbuehne"]::before { background-image: url("../img/buehne-showbuehne-schmal.webp"); }
- body.start[data-buehne="garage"]::before { background-image: url("../img/buehne-garage-schmal.webp"); }
- body.start[data-buehne="skyline"]::before { background-image: url("../img/buehne-skyline-schmal.webp"); }
- body.start[data-buehne="lounge"]::before { background-image: url("../img/buehne-lounge-schmal.webp"); }
- body.start[data-buehne="arena"]::before { background-image: url("../img/buehne-arena-schmal.webp"); }
- body.start[data-buehne="halle"]::before { background-image: url("../img/buehne-halle-schmal.webp"); }
- body.start[data-buehne="wald"]::before { background-image: url("../img/buehne-wald-schmal.webp"); }
- body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-portal-schmal.webp"); }
+ body.start[data-buehne="studio"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
+ body.start[data-buehne="showbuehne"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
+ body.start[data-buehne="garage"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
+ body.start[data-buehne="skyline"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
+ body.start[data-buehne="lounge"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
+ body.start[data-buehne="arena"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
+ body.start[data-buehne="halle"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
+ body.start[data-buehne="wald"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
+ body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
body.start > .schleier {
background:
linear-gradient(180deg, rgba(5, 7, 13, .86) 0%, rgba(5, 7, 13, .48) 14%,
@@ -768,13 +768,79 @@ body.start > main { position: relative; z-index: 1; }
}
.kachel[data-gross="ja"] .kachel__zeichen { width: 62px; height: 62px; border-radius: 18px; }
+/* ---------- Die Zeichen (überarbeitet 03.09.2026) ------------------------
+
+ Vorher: eine flache Linie in einer Farbe, siebzehnmal nebeneinander.
+ Sauber, aber leblos.
+
+ Jetzt zweierlei, und beides berührt die Zwischenräume nicht:
+
+ VERLAUF Die Linie ist oben hell und wird nach unten gedämpft
+ -- eine Lichtquelle über dem Zeichen, wie in der
+ echten Welt. Genau das lässt eine Linie geprägt statt
+ gemalt wirken.
+ SCHLAGSCHATTEN Ein weicher Schein um das GANZE Zeichen, in seiner
+ eigenen Farbe. Er hebt es von der Kachelfläche ab.
+
+ Der Verlauf ist EINMAL im Dokument definiert (bereiche.js) und
+ arbeitet mit currentColor. `color: var(--ton)` steht deshalb hier am
+ SVG -- so nimmt derselbe eine Verlauf den Ton jeder der siebzehn
+ Kacheln an. Siebzehn Farben, ein Verlauf. */
.kachel__svg {
width: 25px; height: 25px;
- fill: none; stroke: var(--ton);
- stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
+ color: var(--ton);
+ fill: none;
+ stroke-linecap: round; stroke-linejoin: round;
+ /* Ein sehr weicher Schein um das ganze Zeichen. Gedeckt gehalten:
+ Er soll Tiefe geben, nicht leuchten. */
+ filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--ton) 45%, transparent));
+ transition: transform var(--tempo), filter var(--tempo);
}
+.kachel__svg .zeichen__linie {
+ stroke: url(#zeichen-verlauf);
+ stroke-width: 1.65;
+}
+/* DIE SCHEIN-LAGE IST WIEDER WEG (03.09.2026) -- und der Weg dorthin
+ gehört aufgeschrieben, damit sie niemand ein zweites Mal einbaut.
+
+ Die Idee war gut: eine dicke, weiche Kopie unter der Linie, damit das
+ Zeichen schwebt statt flach aufzuliegen. Bei einem grossen Symbol
+ funktioniert das. Hier nicht.
+
+ Ein Zeichen ist 24 Einheiten breit und 25 px gross -- eine Einheit ist
+ also ein Pixel. Die Querlinie im Kalender sitzt vier Einheiten unter
+ der Oberkante, die Striche im Technik-Zeichen 4,5 auseinander. Eine
+ Linie von 1,65 plus ein Schein von 2,5 füllt davon so viel, dass die
+ Lücke verschwindet: Aus dem Kalender wurde ein leerer Kasten, aus den
+ Reglern drei Punkte ohne Striche.
+
+ Gesehen habe ich das erst bei dreifacher Vergrösserung -- auf dem
+ normalen Schirm sah es nur "etwas satter" aus. Wer kleine Zeichen
+ nach dem Gesamteindruck beurteilt, übersieht genau das.
+
+ Was bleibt, wirkt ohne die Lücken zu fressen: der VERLAUF in der
+ Linie (Licht von oben) und ein weicher Schlagschatten um das ganze
+ Zeichen. Beides berührt die Zwischenräume nicht. */
+/* Beim Überfahren rückt das Zeichen einen Hauch nach vorn und der
+ Schein wird kräftiger -- als käme die Lichtquelle näher. Ein Hauch:
+ Zwei Pixel sind zu sehen, acht wären Zappeln. */
+.kachel:hover .kachel__svg {
+ transform: translateY(-1px) scale(1.04);
+ filter: drop-shadow(0 2px 7px color-mix(in srgb, var(--ton) 62%, transparent));
+}
+
.kachel[data-gross="ja"] .kachel__svg { width: 31px; height: 31px; }
+@media (prefers-reduced-motion: reduce) {
+ .kachel__svg, .kachel:hover .kachel__svg { transition: none; transform: none; }
+}
+@media (forced-colors: active) {
+ /* Ohne Farben trägt allein die Linie. Der Schein wäre dort ein
+ grauer Klecks über der Zeichnung. */
+ .kachel__svg { filter: none; }
+ .kachel__svg .zeichen__linie { stroke: CanvasText; }
+}
+
.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;
@@ -2724,3 +2790,10 @@ body[data-fremde-sicht="ja"]::after {
@media (forced-colors: active) {
body[data-fremde-sicht="ja"]::after { border-color: Highlight; }
}
+
+/* Das Wasserzeichen in der Ecke bekommt die neue Behandlung NICHT.
+ Es ist bewusst eine ganz dünne, fast unsichtbare Kontur; ein Schein
+ darunter würde daraus einen grauen Fleck machen -- und zwar genau
+ dort, wo er den Text der Kachel hinterlegt. (03.09.2026) */
+.kachel__wasserzeichen .kachel__svg { filter: none; }
+.kachel__wasserzeichen .zeichen__linie { stroke: var(--ton); stroke-width: 1.1; }
diff --git a/workspace/assets/img/buehne-dogfather-breit.webp b/workspace/assets/img/buehne-dogfather-breit.webp
new file mode 100644
index 00000000..3409cd7f
Binary files /dev/null and b/workspace/assets/img/buehne-dogfather-breit.webp differ
diff --git a/workspace/assets/img/buehne-dogfather-schmal.webp b/workspace/assets/img/buehne-dogfather-schmal.webp
new file mode 100644
index 00000000..07d35076
Binary files /dev/null and b/workspace/assets/img/buehne-dogfather-schmal.webp differ
diff --git a/workspace/assets/js/bereiche.js b/workspace/assets/js/bereiche.js
index 6e1254bd..6a718846 100644
--- a/workspace/assets/js/bereiche.js
+++ b/workspace/assets/js/bereiche.js
@@ -22,9 +22,18 @@
zusätzliche Lieferkette. */
const ZEICHEN = {
- dashboard: ['M4.5 4.5h6v6h-6z', 'M13.5 4.5h6v4h-6z', 'M13.5 11.5h6v8h-6z', 'M4.5 13.5h6v6h-6z'],
+ /* Vier Felder mit deutlicher Fuge. Die Fuge ist die eigentliche
+ Aussage des Zeichens ("mehrere Bereiche nebeneinander") -- ist sie
+ zu schmal, sieht man nur einen Kasten. */
+ 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: ['M4 6.5h16v13H4z', 'M4 10.5h16', 'M8.5 3.5v4', 'M15.5 3.5v4'],
+ /* Der Kasten beginnt tiefer, die Querlinie sitzt weiter unten und
+ die beiden Beine stehen weiter aussen. Bei 25 px Groesse
+ verschmelzen Linien, die naeher als vier Einheiten beieinander
+ liegen, zu einer Flaeche -- vorher sah der Kalender deshalb aus
+ wie ein leerer Kasten. */
+ kalender: ['M3.5 7h17v12.5h-17z', 'M3.5 11.5h17', 'M7.5 4v4.6', 'M16.5 4v4.6'],
calls: ['M3.5 7h11v10h-11z', 'M14.5 11l6-3.5v9l-6-3.5z'],
dateien: ['M3.5 6.5h5.5l2 2h9.5v11h-17z'],
/* Der Steckbrief: eine Person IN einer Karte -- unterscheidbar vom
@@ -39,9 +48,15 @@
'M8.2 8.2a5.4 5.4 0 0 0 0 7.6', 'M15.8 15.8a5.4 5.4 0 0 0 0-7.6',
'M5.4 5.4a9.4 9.4 0 0 0 0 13.2', 'M18.6 18.6a9.4 9.4 0 0 0 0-13.2'],
content: ['M3.5 6h17v13h-17z', 'M3.5 10h17', 'M8 6l-1.4 4', 'M13 6l-1.4 4', 'M18 6l-1.4 4'],
+ /* Drei Regler mit ihren Griffen. Die Griffe waren bis zum
+ 03.09.2026 unbrauchbare Pfade ("a1.4 1.4 0 1 0 0-.02z" -- ein
+ Bogen der Laenge null): Sie wurden schlicht nicht gezeichnet, und
+ uebrig blieben drei nackte Striche, die aussahen wie ein
+ Menue-Symbol. Jetzt sind es echte Kreise. */
technik: ['M4 7.5h16', 'M4 12h16', 'M4 16.5h16',
- 'M9 7.5a1.4 1.4 0 1 0 0-.02z', 'M15 12a1.4 1.4 0 1 0 0-.02z',
- 'M7.5 16.5a1.4 1.4 0 1 0 0-.02z'],
+ '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.5',
'M16 8.8a2.4 2.4 0 1 1 1.6 4.3', 'M17 15.2c2 .5 3.3 2 3.7 4.3'],
@@ -196,16 +211,102 @@
/* Ein SVG mit dem Zeichen eines Bereichs. Klasse frei wählbar, damit
Kachel, Hinweiszeile und Seitenkopf dieselbe Form in
unterschiedlicher Größe benutzen können. */
+ /* ---------- Die Zeichen (überarbeitet 03.09.2026) ------------------------
+
+ Wunsch: "ich will dass du die symbole perfektionnierst, ich will
+ wirklich dass jeder sich denkt woooow."
+
+ Vorher war jedes Zeichen eine flache Linie in einer Farbe. Sauber,
+ aber leblos -- siebzehn gleich starke Striche nebeneinander.
+
+ Jetzt besteht jedes Zeichen aus ZWEI übereinanderliegenden Lagen
+ derselben Form:
+
+ SCHEIN dick, weich, halbdurchsichtig -- das Licht, das die
+ Linie wirft. Sie liegt darunter und wird nie gelesen,
+ aber ohne sie sitzt das Zeichen flach auf der Fläche
+ statt darüber zu schweben.
+ LINIE die eigentliche Zeichnung, mit einem VERLAUF von oben
+ hell nach unten gedämpft.
+
+ Der Verlauf ist der eigentliche Kniff. Er ist EINMAL im Dokument
+ definiert und benutzt `currentColor` -- dadurch passt er sich jeder
+ der siebzehn Kachelfarben von selbst an, ohne siebzehn Verläufe.
+ Eine Lichtquelle oben, wie in der echten Welt: Genau das lässt eine
+ Linie geprägt statt gemalt wirken.
+
+ Kein zusätzliches Bild, keine Schriftart, kein Nachladen -- alles
+ entsteht aus den Pfaden, die ohnehin schon da waren. */
+
+ const NS = 'http://www.w3.org/2000/svg';
+ const VERLAUF_ID = 'zeichen-verlauf';
+
+ /** Legt den gemeinsamen Verlauf einmal ins Dokument. Alle Zeichen
+ * verweisen darauf; ein zweiter Aufruf tut nichts. */
+ function verlaufSicherstellen() {
+ if (document.getElementById(VERLAUF_ID)) return;
+ const svg = document.createElementNS(NS, 'svg');
+ svg.setAttribute('aria-hidden', 'true');
+ svg.setAttribute('width', '0');
+ svg.setAttribute('height', '0');
+ svg.style.position = 'absolute';
+ const defs = document.createElementNS(NS, 'defs');
+ const lg = document.createElementNS(NS, 'linearGradient');
+ lg.setAttribute('id', VERLAUF_ID);
+ /* userSpaceOnUse, NICHT die Vorgabe objectBoundingBox -- und das ist
+ kein Detail, sondern der Unterschied zwischen "sieht toll aus" und
+ "die Hälfte des Zeichens fehlt".
+
+ Ein Verlauf in Objektkoordinaten wird auf den Umriss JEDES
+ einzelnen Pfades gerechnet. Eine waagerechte Linie (M4 12h16) hat
+ aber eine Höhe von null: Der Verlauf ist damit entartet, und der
+ Browser zeichnet den Pfad einfach GAR NICHT.
+
+ Genau das ist passiert: Beim Kalender verschwand die Querlinie,
+ beim Technik-Zeichen alle drei Regler-Striche, bei den Berichten
+ die Grundlinie. Zurück blieb ein leerer Kasten und drei Punkte --
+ und es sah aus, als sei die Idee mit dem Verlauf schuld.
+
+ In Benutzerkoordinaten läuft der Verlauf über die festen 24
+ Einheiten des Rasters, unabhängig davon, wie hoch oder flach der
+ einzelne Pfad ist. Damit bekommt jede Linie den Farbwert, der
+ ihrer Höhe im Zeichen entspricht -- was ohnehin richtiger ist:
+ Das Licht kommt von oben, nicht von jedem Strich einzeln. */
+ lg.setAttribute('gradientUnits', 'userSpaceOnUse');
+ lg.setAttribute('x1', '0'); lg.setAttribute('y1', '2');
+ lg.setAttribute('x2', '0'); lg.setAttribute('y2', '22');
+ /* currentColor statt einer festen Farbe: Der Verlauf erbt damit den
+ Ton der Kachel, auf der er gerade liegt. */
+ for (const [pos, deck] of [['0', '1'], ['0.55', '0.92'], ['1', '0.6']]) {
+ const s = document.createElementNS(NS, 'stop');
+ s.setAttribute('offset', pos);
+ s.setAttribute('stop-color', 'currentColor');
+ s.setAttribute('stop-opacity', deck);
+ lg.append(s);
+ }
+ defs.append(lg);
+ svg.append(defs);
+ document.body.append(svg);
+ }
+
function zeichenBauen(name, klasse = 'kachel__svg') {
- const svg = document.createElementNS('http://www.w3.org/2000/svg', '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 Lage. Ein zweiter, weichgezeichneter Unterbau stand hier
+ kurzzeitig und hat die feinen Lücken zugeschmiert -- siehe die
+ ausführliche Begründung in start.css. */
+ const g = document.createElementNS(NS, 'g');
+ g.setAttribute('class', 'zeichen__linie');
for (const d of (ZEICHEN[name] || [])) {
- const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
- p.setAttribute('d', d);
- svg.append(p);
+ const pfad = document.createElementNS(NS, 'path');
+ pfad.setAttribute('d', d);
+ g.append(pfad);
}
+ svg.append(g);
return svg;
}
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index da2e0fe5..8f3e9c6d 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -7,9 +7,9 @@
-
-
-
+
+
+
@@ -152,9 +152,9 @@
-
-
-
-
+
+
+
+