Die ganze Oberflaeche spricht jetzt dieselbe Sprache wie die Zeichen

"bring alles auf dieses niveau -- texte, kacheln, hinweise, titel,
buttons, einfach alles."

Berechtigt, und der Fehler war meiner: Die Kachelzeichen sind Koerper
geworden, alles andere blieb flach. Ein plastisches Zeichen neben einem
gemalten Knopf sieht nicht nach "teilweise gut" aus, sondern nach
Versehen.

Ab jetzt gelten fuer 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
     staerksten, nach aussen auslaufend. Echtes Licht auf einer Kante
     sieht so aus; eine durchgehend gleich helle Linie ist ein Strich.
  2. TIEFE NACH UNTEN. Ein versetzter Schatten -- wie bei jedem
     Gegenstand, der auf etwas liegt. Ohne ihn klebt ein Element auf der
     Seite, statt darauf zu liegen.
  3. VERLAUF STATT FLAECHE. Oben eine Spur heller als unten. Kaum zu
     sehen, aber ohne ihn bleibt jede Flaeche tot.

Und eine vierte, nur fuer Bedienbares:
  4. WAS MAN DRUECKT, GEHT HINEIN. Beim Klick kehrt sich die Woelbung um:
     Licht nach unten, Schatten nach oben. Das ist der Unterschied
     zwischen "es passiert etwas" und "ich habe etwas gedrueckt".

ANGEFASST -- beide Seiten, nicht nur eine:

  Workspace (gate.css, gilt auf jeder Seite)
    Knoepfe, Schritte, Abmelden, Stufenknoepfe, Suchknopf
    Eingabefelder, Auswahlfelder, Suchfeld -- die bekommen die Woelbung
      ABSICHTLICH ANDERSHERUM: Ein Feld, in das man schreibt, ist eine
      Mulde, kein Knopf. Licht unten, Schatten oben.
    Marken, Rollenabzeichen, Zaehler, Filterchips
    Hinweisflaechen, Notizen, Call-Raum, Codekasten
    Ueberschriften und Schilder

  Oeffentliche Seite (main.css)
    Knoepfe (btn, btn-primary, btn-outline) samt geschliffener Kante
    Marken und Abzeichen
    Ueberschriften

Der Textschatten aendert die FARBE nicht -- die Kontrastpruefung misst
weiter denselben Wert --, legt den Text aber auf die Seite, statt ihn in
den Hintergrund zu mischen.

Alles gedeckt. Diese Bauteile stehen zu Dutzenden auf einer Seite, und
was einzeln beeindruckt, blendet im Dutzend.

GEPRUEFT, zehn Laeufe, alle gruen: Buehne 38 (Textkontrast an echten
Bildpunkten), Rollen 97, Handy 50, Formulare 19, Grosscheck 15,
Lesbarkeit 14 -- dazu die vier Laeufe der oeffentlichen Seite
(Startseite, Design, Barrierefreiheit, Tastaturbedienung).

Co-Authored-By: Claude Opus 5 <[email protected]>

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; }
+}