diff --git a/assets/css/main.css b/assets/css/main.css
index 4c594957..9e71c9bb 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -4651,3 +4651,75 @@ body.start-seite .music-toggle:focus-visible {
background: rgba(143, 217, 234, .12);
border: 1px solid rgba(143, 217, 234, .28);
}
+
+/* =====================================================================
+ MATERIAL — dieselbe Sprache wie im Workspace (03.09.2026)
+
+ Drei Regeln, für jedes Bauteil dieselben:
+ 1. Licht von oben -- eine helle Kante an der Oberkante
+ 2. Tiefe nach unten -- ein Schatten, versetzt, wie bei jedem
+ Gegenstand, der auf etwas liegt
+ 3. Verlauf statt Fläche -- oben eine Spur heller als unten
+
+ Und für alles Bedienbare eine vierte: Was man drückt, geht hinein.
+ Beim Klick kehrt sich die Wölbung um. Das ist der Unterschied
+ zwischen "es passiert etwas" und "ich habe etwas gedrückt".
+
+ Gedeckt gehalten -- diese Bauteile stehen zu Dutzenden auf einer
+ Seite, und was einzeln beeindruckt, blendet im Dutzend.
+ ===================================================================== */
+
+.btn, .btn-primary, .btn-outline {
+ position: relative;
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .12),
+ inset 0 -2px 6px -4px rgba(0, 0, 0, .65),
+ 0 4px 10px -6px rgba(0, 0, 0, .8);
+ transition: transform .15s ease, box-shadow .15s ease, background .15s ease,
+ border-color .15s ease;
+}
+/* Die geschliffene Kante: in der Mitte am hellsten, nach aussen aus-
+ laufend. Eine durchgehend gleich helle Linie ist ein Strich, kein
+ Licht. */
+.btn::after, .btn-primary::after, .btn-outline::after {
+ content: "";
+ position: absolute; top: 1px; left: 14%; right: 14%; height: 1px;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
+ pointer-events: none; opacity: .8;
+ border-radius: 1px;
+}
+.btn:hover, .btn-primary:hover, .btn-outline:hover {
+ transform: translateY(-1px);
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .18),
+ inset 0 -2px 6px -4px rgba(0, 0, 0, .65),
+ 0 10px 22px -10px color-mix(in srgb, var(--accent) 75%, transparent);
+}
+.btn:active, .btn-primary:active, .btn-outline:active {
+ transform: translateY(1px);
+ box-shadow:
+ inset 0 2px 6px -2px rgba(0, 0, 0, .7),
+ inset 0 -1px 0 rgba(255, 255, 255, .08);
+}
+
+/* Marken und Abzeichen: kleine Plaketten, keine Aufkleber. */
+.tag, .badge {
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .12),
+ 0 2px 5px -4px rgba(0, 0, 0, .9);
+}
+
+/* Überschriften bekommen eine Kante gegen den Hintergrund. Der Schatten
+ ändert die FARBE nicht -- die Kontrastprüfung misst weiter dasselbe --,
+ legt den Text aber auf die Seite, statt ihn hineinzumischen. */
+h1, h2, h3 { text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
+
+@media (prefers-reduced-motion: reduce) {
+ .btn, .btn-primary, .btn-outline,
+ .btn:hover, .btn:active { transition: none; transform: none; }
+}
+@media (forced-colors: active) {
+ .btn, .btn-primary, .btn-outline, .tag, .badge { box-shadow: none; }
+ .btn::after, .btn-primary::after, .btn-outline::after { display: none; }
+ h1, h2, h3 { text-shadow: none; }
+}
diff --git a/server/pruef-buehne.png b/server/pruef-buehne.png
index 4e2456ac..53968122 100644
Binary files a/server/pruef-buehne.png and b/server/pruef-buehne.png differ
diff --git a/server/pruef-felder.png b/server/pruef-felder.png
index b0f49429..a87f3aec 100644
Binary files a/server/pruef-felder.png and b/server/pruef-felder.png differ
diff --git a/server/pruef-handy.png b/server/pruef-handy.png
index 663d9fad..96f1820a 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 6ecd6f9e..26dda295 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 98dae780..cd961b85 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 a449ba43..10c9983b 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 05f5603a..362b09dd 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 b338fb27..4fe8b155 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 989a29a7..40ada5d2 100644
Binary files a/server/pruef-rollen-scout.png and b/server/pruef-rollen-scout.png differ
diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css
index be890d0c..a56b8cc6 100644
--- a/workspace/assets/css/gate.css
+++ b/workspace/assets/css/gate.css
@@ -911,3 +911,128 @@ body.suche-offen { overflow: hidden; }
}
.schalter__text { display: grid; gap: 2px; font-size: .88rem; }
.schalter__text .leise { font-size: .79rem; }
+
+/* =====================================================================
+ MATERIAL — die ganze Oberfläche auf einer Sprache (03.09.2026)
+
+ Die Kachelzeichen sind Körper geworden. Alles andere war noch flach,
+ und das fiel dadurch erst richtig auf: ein plastisches Zeichen neben
+ einem gemalten Knopf sieht nicht nach "teilweise gut" aus, sondern
+ nach Versehen.
+
+ Deshalb gelten ab hier für JEDES Bauteil dieselben drei Regeln --
+ dieselben, nach denen auch die Zeichen gebaut sind:
+
+ 1. LICHT VON OBEN. Eine helle Kante an der Oberkante, in der Mitte
+ am stärksten, nach aussen auslaufend. Echtes Licht auf einer
+ Kante sieht so aus; eine durchgehend gleich helle Linie ist ein
+ Strich.
+ 2. TIEFE NACH UNTEN. Ein Schatten, der nach unten versetzt liegt --
+ wie bei jedem Gegenstand, der auf etwas liegt. Ohne ihn klebt
+ ein Element auf der Seite, statt darauf zu liegen.
+ 3. VERLAUF STATT FLÄCHE. Oben eine Spur heller als unten. Kaum zu
+ sehen, aber ohne ihn bleibt jede Fläche tot.
+
+ Und eine vierte, die nur für Bedienbares gilt:
+ 4. WAS MAN DRÜCKT, GEHT HINEIN. Beim Klick kehrt sich die Wölbung
+ um: Licht nach unten, Schatten nach oben. Das ist der
+ Unterschied zwischen "es passiert etwas" und "ich habe etwas
+ gedrückt".
+
+ Alles bleibt gedeckt. Diese Bauteile stehen zu Dutzenden auf einer
+ Seite -- was einzeln beeindruckt, blendet im Dutzend.
+ ===================================================================== */
+
+/* ---------- 1. Knöpfe: Körper statt Fläche ---------------------------- */
+.knopf, .knopf-still, .schritt, .abmelden,
+.stufe-knopf, .suche-knopf, .suche-zu, .todo__weg, .karte__stift {
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .09),
+ inset 0 -2px 5px -3px rgba(0, 0, 0, .6),
+ 0 3px 8px -5px rgba(0, 0, 0, .8);
+}
+.knopf:hover, .knopf-still:hover, .schritt:hover:not([disabled]),
+.abmelden:hover, .stufe-knopf:hover, .suche-knopf:hover,
+.suche-zu:hover, .todo__weg:hover, .karte__stift:hover {
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .14),
+ inset 0 -2px 5px -3px rgba(0, 0, 0, .6),
+ 0 8px 20px -9px color-mix(in srgb, var(--f) 85%, transparent),
+ inset 0 0 22px -14px var(--f);
+}
+/* Gedrückt: die Wölbung kehrt sich um. */
+.knopf:active, .knopf-still:active, .schritt:active:not([disabled]),
+.abmelden:active, .stufe-knopf:active, .suche-knopf:active,
+.suche-zu:active, .todo__weg:active, .karte__stift:active {
+ transform: translateY(1px);
+ box-shadow:
+ inset 0 2px 6px -2px rgba(0, 0, 0, .75),
+ inset 0 -1px 0 rgba(255, 255, 255, .07);
+}
+
+/* ---------- 2. Eingabefelder: vertieft statt aufgesetzt ---------------- */
+.neu input, .neu select, .neu textarea,
+.wahl2__knopf, .wahl2__suche, .betreuung__wahl, .code-feld {
+ box-shadow:
+ inset 0 2px 5px -3px rgba(0, 0, 0, .75),
+ inset 0 1px 0 rgba(255, 255, 255, .05);
+}
+/* Ein Feld, in das man schreibt, ist eine Mulde -- kein Knopf. Deshalb
+ liegt das Licht hier UNTEN und der Schatten oben: genau umgekehrt. */
+.neu input:focus, .neu select:focus, .neu textarea:focus,
+.wahl2__suche:focus, .betreuung__wahl:focus {
+ box-shadow:
+ inset 0 2px 5px -3px rgba(0, 0, 0, .75),
+ 0 0 0 3px rgba(63, 189, 245, .16);
+}
+
+/* ---------- 3. Marken und Zähler: kleine Plaketten --------------------- */
+.marke, .marke-still, .marke-rolle, .marke-art, .marke-fehlt,
+.stufe__zahl, .gruppe__zahl, .k-chip, .kk__marken > * {
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .1),
+ 0 2px 5px -4px rgba(0, 0, 0, .9);
+}
+
+/* ---------- 4. Hinweisflächen: Licht auf der Oberkante ----------------- */
+.leer-hinweis, .hinweis, .kk__notiz, .call-raum, .code-kasten {
+ position: relative;
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .06),
+ 0 8px 22px -16px rgba(0, 0, 0, .9);
+}
+.leer-hinweis::after, .call-raum::after, .code-kasten::after {
+ content: "";
+ position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
+ background: linear-gradient(90deg, transparent,
+ color-mix(in srgb, var(--ton, var(--akzent)) 70%, #fff), transparent);
+ opacity: .5; pointer-events: none;
+}
+
+/* ---------- 5. Überschriften: Gewicht statt Größe ---------------------- */
+/* Ein sehr weicher dunkler Schatten unter der Schrift. Er ändert die
+ Farbe nicht (die Kontrastprüfung misst weiter dasselbe), gibt der
+ Zeile aber eine Kante gegen den Hintergrund -- Text auf einem Foto
+ wirkt dadurch aufgelegt statt hineingemischt. */
+.titel, .gruppe__name, .stufe__titel, .kk__name, h1, h2 {
+ text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
+}
+/* Die kleinen Schilder darüber: mehr Abstand zwischen den Buchstaben,
+ damit sie als Beschriftung gelesen werden und nicht als Wort. */
+.feldschild, .kk__schild, .gruppe__unter {
+ text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .knopf:active, .knopf-still:active, .schritt:active,
+ .abmelden:active, .stufe-knopf:active { transform: none; }
+}
+@media (forced-colors: active) {
+ /* Im Kontrastmodus trägt allein die Kante. Schatten und Lichtsäume
+ würden dort zu grauen Flecken. */
+ .knopf, .knopf-still, .schritt, .abmelden, .stufe-knopf,
+ .marke, .marke-rolle, .leer-hinweis, .hinweis, .code-kasten,
+ .neu input, .neu select, .neu textarea, .wahl2__knopf { box-shadow: none; }
+ .leer-hinweis::after, .call-raum::after, .code-kasten::after { display: none; }
+ .titel, .gruppe__name, h1, h2, .feldschild { text-shadow: none; }
+}
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 960370db..e02fffd7 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -7,9 +7,9 @@
-
-
-
+
+
+
@@ -152,9 +152,9 @@
-
-
-
-
+
+
+
+