Material statt Farbe -- Kacheln werden Gegenstaende, die Karte ein Bildschirm

Filipe: "ich will dass alle kacheln viel geiler und spezieller aussehen,
viel realistischer" und "so dass der komplette von der kachel vom
hintergrund bild komplett bedeckt ist. ueberrasch mich."

DIE BILDER: BEARBEITET STATT ABGEDUNKELT.
Bis hierher tat der Bildbauer zwei Dinge -- kleiner rechnen und einen
schwarzen Schleier darueberlegen. Abdunkeln macht ein Bild aber nicht
ruhiger, sondern TOT: Es zieht jede Farbe zur Mitte, und uebrig bleibt
ein grauer Schleier mit einer Ahnung von Motiv.

Drei Dinge, die ein Fotograf zuerst anfasst, und keines davon ist
"dunkler":
  * KONTRAST -- Verkleinern MITTELT Bildpunkte; deshalb wirkt jedes
    verkleinerte Bild flauer als das Original, und deshalb schaerft man
    danach nach.
  * SAETTIGUNG -- holt das Rot der Chili und das Gruen der Blaetter
    zurueck, die der Schleier herausgewaschen hatte.
  * VIGNETTE -- der eigentliche Unterschied zwischen "Screenshot" und
    "Aufnahme". Ein Objektiv verliert zu den Ecken hin Licht; das Auge
    liest das als Tiefe. Sie ersetzt ausserdem einen Teil des flachen
    Schleiers: Dunkel wird, wo ohnehin nichts steht.
Der flache Schleier sinkt dadurch von 0,42 auf 0,26 -- heller UND
lesbar, weil die Vignette genau dort arbeitet, wo die Kacheln liegen.

DIE KACHELN: VIER DINGE, DIE EIN DING VON EINEM RECHTECK TRENNEN.
Sie hatten Farbverlauf, Lichtkante und ein Licht, das dem Zeiger folgt --
und blieben Rechtecke mit Farbe darin. Es fehlten:
  1. GEWICHT. Ein Ding, das auf etwas liegt, wirft einen Schatten, auch
     wenn es niemand anfasst. Den gab es nur beim Ueberfahren.
  2. MATERIALSTAERKE. Ein Blech hat oben eine Licht- UND unten eine
     Schattenkante. Nur die obere ergibt einen aufgeklebten Strich.
  3. KOERNUNG. Perfekt glatte Verlaeufe kommen in der Natur nicht vor,
     und das Auge merkt das, ohne es benennen zu koennen. Drei Prozent
     Rauschen genuegen -- aus einem SVG-Filter als Adresse, also ohne
     Datei und ohne zusaetzliche Anfrage.
  4. DURCHSICHT. Hinter den Kacheln liegt jetzt ein aufwendiges Bild.
     Eine deckende Flaeche verdeckt es, eine mattierte nimmt seine Farbe
     auf -- erst dadurch gehoeren beide zusammen.
Beim Ueberfahren wird die Kachel nicht heller, sondern kommt NAEHER:
Sie steigt, ihr Schatten wird groesser und weicher (der Abstand zum
Untergrund waechst). So verhaelt sich ein angehobener Gegenstand.

DIE ANMELDEKARTE: EIN GERAET STATT EINES BILDES AN DER WAND.
Sie sass mit Abstand in der gemalten Tafel -- zwei Rahmen ineinander,
dazwischen schwarze Leere. Jetzt geht sie bis unter das Gluehen des
Neonrahmens: Der Rahmen ist das Gehaeuse, die Karte der eingeschaltete
Bildschirm. Sie leuchtet von den Kanten herein in den Farben des Rahmens
(rot oben links, blau unten rechts), traegt eine Glasscheibe als sehr
schwache Spiegelung und dieselbe Koernung. Die Rollen sind Tasten
geworden: Materialstaerke oben hell, unten dunkel, beim Druecken sinken
sie ein, und die gewaehlte ist beleuchtet statt eingefaerbt.
Alle Angaben bleiben -- vier Rollen mit Beschreibung, Codefeld, Auge,
Rollenhinweis, Fusszeile. "Hochwertiger" heisst nicht "weniger drin".

EIN ECHTER FUND DABEI: --text-still lag ploetzlich bei genau 4,50:1
statt der noetigen 4,5. Der Ton war am 01.09. gegen die DAMALIGE,
dunklere Buehne gemessen. Wer den Hintergrund heller macht, muss die
leiseste Schrift nachziehen -- sonst haette man den Aufwand auch lassen
koennen. Erkannt daran, dass die Zahl sich bei zwei Schleier-Aenderungen
NICHT bewegte: Die Pruefung rechnet mit der CSS-Farbe.

Gemessen statt angesehen: Kontrast an echten Bildpunkten (pruef-buehne),
neun Bildschirmbreiten, drei Handygroessen, Ladezeit und Datenvolumen,
Klassen, Struktur, Startseite -- alles gruen. Die Seiten ueber dem
CLS-Zielwert sind nebenbei von sieben auf vier gesunken.

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

workspace/assets/css/start.css

@@ -172,9 +172,9 @@ body.start > .schleier {
        nachzurechnen, waere geraten. */
     linear-gradient(90deg,
       rgba(5, 7, 13, 0) 0,
-      rgba(5, 7, 13, .56) min(22%, 400px),
-      rgba(5, 7, 13, .62) 50%,
-      rgba(5, 7, 13, .56) max(78%, calc(100% - 400px)),
+      rgba(5, 7, 13, .62) min(22%, 400px),
+      rgba(5, 7, 13, .68) 50%,
+      rgba(5, 7, 13, .62) max(78%, calc(100% - 400px)),
       rgba(5, 7, 13, 0) 100%);
 }
 
@@ -3916,3 +3916,213 @@ body[data-fremde-sicht="ja"]::after {
   .chat-knopf[data-neu="ja"] { border-width: 2px; }
   .chat-knopf__zahl { border: 1px solid CanvasText; }
 }
+
+/* =====================================================================
+   MATERIAL — die Kacheln werden Gegenstände (07.09.2026)
+
+   Wunsch Filipe: "ich will dass alle kacheln viel geiler und spezieller
+   aussehen, viel realistischer. mach da was hoch profissionelles und
+   hochwertiges."
+
+   ---------------------------------------------------------------------
+   WAS EINE FLÄCHE ZU EINEM GEGENSTAND MACHT
+
+   Die Kacheln hatten schon einen Farbverlauf, eine Lichtkante oben und
+   ein Licht, das dem Zeiger folgt. Trotzdem blieben es Rechtecke mit
+   Farbe darin. Es fehlten genau die vier Dinge, an denen das Auge einen
+   echten Gegenstand erkennt -- und keines davon ist "mehr Farbe":
+
+     1. GEWICHT.  Ein Ding, das auf etwas liegt, wirft einen Schatten,
+        auch wenn es niemand anfasst. Bisher gab es den nur beim
+        Überfahren; im Ruhezustand schwebte die Kachel im Nichts.
+
+     2. EINE KANTE, DIE DICK IST.  Ein Blech hat oben eine Lichtkante
+        UND unten eine Schattenkante. Nur die obere zu setzen ergibt
+        einen aufgeklebten Strich; erst beide zusammen ergeben eine
+        Materialstärke.
+
+     3. KÖRNUNG.  Der eigentliche Unterschied zwischen "am Rechner
+        gezeichnet" und "fotografiert". Jede echte Oberfläche hat eine
+        Struktur; perfekt glatte Farbverläufe kommen in der Natur nicht
+        vor, und das Auge merkt das, ohne es benennen zu können. Drei
+        Prozent Rauschen genügen.
+
+     4. DURCHSICHT.  Hinter den Kacheln liegt jetzt ein aufwendiges Bild.
+        Eine deckende Fläche darüber verdeckt es; eine mattierte lässt
+        es durch und nimmt seine Farbe auf. Erst dadurch gehören Kachel
+        und Hintergrund zusammen, statt übereinanderzuliegen.
+
+   ---------------------------------------------------------------------
+   DAS RAUSCHEN KOSTET KEINE DATEI
+
+   Es entsteht aus einem SVG-Filter, der als Adresse im Stil steht --
+   kein Bild, keine zusätzliche Anfrage, keine Lieferkette. Der Browser
+   rechnet es einmal und legt es über die Fläche.
+
+   `mix-blend-mode: overlay` sorgt dafür, dass es hell macht, wo es hell
+   ist, und dunkel, wo es dunkel ist -- ein aufgelegter grauer Schleier
+   würde die Farben stattdessen ausbleichen.
+
+   ---------------------------------------------------------------------
+   WAS DABEI NICHT PASSIEREN DARF
+
+   Der Text muss lesbar bleiben. Mattglas macht ihn nicht automatisch
+   schlechter (der Weichzeichner nimmt dem Untergrund die Struktur, an
+   der das Auge hängenbleibt), aber es macht ihn auch nicht automatisch
+   besser. Deshalb ist jede Zahl hier gegen pruef-buehne gemessen, das
+   den Kontrast an echten Bildpunkten nachrechnet -- nicht an der
+   Farbangabe im Stil, die über einem Foto nichts aussagt.
+   ===================================================================== */
+
+/* Das Rauschen. Einmal definiert, von allen Flächen benutzt. */
+:root {
+  --koernung:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.55'/%3E%3C/svg%3E");
+}
+
+.kachel {
+  /* MATTGLAS. Der Anteil des Untergrunds ist mit Absicht hoch: Das Bild
+     dahinter ist der Grund, warum die Seite gut aussieht. 16 px
+     Weichzeichner sind gemessen -- darunter sieht man die Struktur des
+     Bildes durch und der Text flimmert, darüber wird es Milchglas und
+     das Motiv ist wieder weg. */
+  background:
+    linear-gradient(158deg,
+      color-mix(in srgb, var(--ton) 24%, rgba(9, 13, 22, .70)),
+      rgba(8, 11, 19, .80) 64%);
+  backdrop-filter: blur(16px) saturate(135%);
+  -webkit-backdrop-filter: blur(16px) saturate(135%);
+
+  /* MATERIALSTÄRKE: Licht oben, Schatten unten -- beide innen.
+     GEWICHT: zwei Schatten, ein enger dunkler direkt darunter und ein
+     weiter weicher. Ein einzelner Schatten sieht immer nach Aufkleber
+     aus; erst die Kombination liest sich als "liegt auf etwas". */
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .10),
+    inset 0 -1px 0 rgba(0, 0, 0, .45),
+    0 2px 5px -2px rgba(0, 0, 0, .55),
+    0 14px 30px -18px rgba(0, 0, 0, .85);
+
+  border-color: color-mix(in srgb, var(--ton) 16%, rgba(150, 186, 220, .14));
+}
+
+/* Die Körnung. Sie liegt über der Fläche, aber UNTER dem Inhalt --
+   Schrift durch ein Rauschen zu lesen wäre anstrengend. */
+.kachel > .kachel__link::before {
+  content: ""; position: absolute; inset: 0; z-index: -1;
+  background-image: var(--koernung);
+  background-size: 140px 140px;
+  opacity: .035;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+/* DER GLANZ. Ein schmaler, sehr weicher Streifen quer über die obere
+   linke Ecke -- die Spiegelung einer Lichtquelle, die außerhalb des
+   Bildes liegt. Das ist der Unterschied zwischen einer matten und einer
+   lackierten Oberfläche, und er ist bewusst so schwach, dass man ihn
+   nicht als Streifen sieht, sondern nur als "die glänzt". */
+.kachel::after {
+  background:
+    linear-gradient(128deg,
+      rgba(255, 255, 255, .085) 0%,
+      rgba(255, 255, 255, .022) 16%,
+      rgba(255, 255, 255, 0) 34%),
+    radial-gradient(130% 150% at var(--mx) var(--my),
+      color-mix(in srgb, var(--ton) 22%, transparent), transparent 60%);
+  opacity: .46;
+}
+
+/* Die farbige Kante bekommt Tiefe: oben satt, unten auslaufend, und
+   ein Hauch Leuchten nach innen. */
+.kachel::before {
+  width: 3px;
+  background:
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--ton) 100%, transparent) 0%,
+      color-mix(in srgb, var(--ton) 72%, transparent) 42%,
+      transparent 94%);
+  box-shadow: 1px 0 8px -2px color-mix(in srgb, var(--ton) 55%, transparent);
+  opacity: .62;
+}
+
+/* ANHEBEN STATT AUFLEUCHTEN. Beim Überfahren wird die Kachel nicht
+   heller, sondern sie kommt näher: Sie steigt zwei Pixel, ihr Schatten
+   wird größer und weicher (weil der Abstand zum Untergrund wächst) und
+   die Kante wird kräftiger. Genau so verhält sich ein Gegenstand, den
+   man anhebt -- und deshalb wirkt es echt, ohne dass etwas blinkt. */
+.kachel:hover {
+  transform: translateY(-3px);
+  border-color: color-mix(in srgb, var(--ton) 42%, rgba(150, 186, 220, .18));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .14),
+    inset 0 -1px 0 rgba(0, 0, 0, .45),
+    0 4px 10px -4px rgba(0, 0, 0, .6),
+    0 22px 44px -22px rgba(0, 0, 0, .9),
+    0 0 26px -12px color-mix(in srgb, var(--ton) 60%, transparent);
+}
+.kachel:hover::before { opacity: 1; width: 3px; }
+
+/* Beim Drücken sinkt sie zurück -- ohne diesen Gegenweg fühlt sich ein
+   Knopf an wie ein Bild von einem Knopf. */
+.kachel:active {
+  transform: translateY(-1px);
+  transition-duration: .07s;
+}
+
+/* Die Plakette bekommt dieselbe Behandlung: Körnung und ein tieferer
+   Schatten, damit sie auf der Kachel LIEGT statt in sie gemalt zu sein. */
+.kachel__zeichen::after {
+  content: ""; position: absolute; inset: 0;
+  background-image: var(--koernung);
+  background-size: 140px 140px;
+  opacity: .05;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}
+.kachel:hover .kachel__zeichen {
+  transform: translateY(-1px) scale(1.03);
+  box-shadow:
+    inset 0 1.5px 0 color-mix(in srgb, #fff 34%, transparent),
+    inset 0 -2px 6px -3px color-mix(in srgb, #000 55%, transparent),
+    0 10px 24px -10px color-mix(in srgb, var(--ton) 95%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--ton) 16%, transparent);
+}
+
+/* Auch die übrigen Flächen der Seite bekommen Mattglas und Körnung --
+   sonst sähen die Kacheln aus wie aus einer anderen Anwendung als der
+   Kasten daneben. Eine Oberfläche, in der zwei Materialien nebeneinander
+   liegen, wirkt zusammengesucht. */
+.tagesblick,
+.zahlkarte,
+.zielbalken__zeile,
+.tagzeile,
+.creator,
+.warnkarte,
+.summe {
+  backdrop-filter: blur(13px) saturate(125%);
+  -webkit-backdrop-filter: blur(13px) saturate(125%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .07),
+    inset 0 -1px 0 rgba(0, 0, 0, .35),
+    0 2px 4px -2px rgba(0, 0, 0, .45),
+    0 12px 26px -18px rgba(0, 0, 0, .8);
+}
+
+/* WENIGER BEWEGUNG HEISST: KEINE BEWEGUNG.
+   Der Glanz, die Körnung und die Schatten bleiben -- die sind Aussehen,
+   nicht Bewegung. Was wegfällt, ist das Anheben. */
+@media (prefers-reduced-motion: reduce) {
+  .kachel, .kachel:hover, .kachel:active { transform: none; }
+  .kachel:hover .kachel__zeichen { transform: none; }
+}
+
+/* Bei erzwungenen Farben (Windows-Kontrastmodus) sind Mattglas und
+   Körnung nicht nur wirkungslos, sondern schädlich -- dort zählt
+   ausschliesslich die Kante. */
+@media (forced-colors: active) {
+  .kachel { backdrop-filter: none; box-shadow: none; border: 1px solid CanvasText; }
+  .kachel > .kachel__link::before,
+  .kachel__zeichen::after { display: none; }
+}