Aus Zeichnungen werden Gegenstaende -- Kacheln der GANZEN Seite

"ich will dass die krank realistisch sind, und alle kacheln durch die
ganze website perfektionieren."

DIE ZEICHEN bekommen die Beleuchtung, die man aus der Wirklichkeit
kennt -- vier Lagen statt einer:

  KOERPER        gefuellte Grundform, oben satt, unten auslaufend
  EIGENSCHATTEN  eine dunkle Lage, die von unten hereinkriecht. Ein
                 Koerper ist unten dunkler als oben; ohne das bleibt
                 jede Flaeche eine Farbflaeche
  GLANZ          die Spiegelung, schmal ueber die obere Haelfte
  KONTUR         mit ZWEI Lichtquellen: oben das Hauptlicht (fast weiss),
                 in der Mitte der Eigenton, unten STREULICHT vom
                 Untergrund. Der letzte Stopp ist der Unterschied
                 zwischen "Zeichnung" und "Ding" -- ohne ihn laeuft jede
                 Form nach unten ins Dunkle aus.

Dazu ein SCHLAGSCHATTEN auf die Plakette, versetzt nach unten statt
mittig. Er ist der Grund, warum das Zeichen ueber der Flaeche schwebt
statt darauf zu liegen.

DIE PLAKETTE bekommt eine KOERNUNG -- eine sehr feine, unregelmaessige
Struktur. Das ist der Unterschied zwischen "am Rechner gemacht" und
"Gegenstand": Eine makellos glatte Farbflaeche gibt es in der
Wirklichkeit nicht, und das Auge erkennt das sofort, auch wenn niemand
sagen koennte woran. Eingebettetes Rauschen, keine Bilddatei -- kostet
nichts zu laden und kann nicht fehlen.

DIE KACHELN, und zwar BEIDE Systeme:

  workspace  .kachel  -- bekam Tiefe nach unten (fehlte ganz: die Kachel
             klebte auf dem Hintergrund statt darauf zu liegen) und eine
             Lichtkante, die in der Mitte am hellsten ist und nach
             aussen auslaeuft. Echtes Licht auf einer Kante sieht so
             aus; eine durchgehend gleich helle Linie ist ein Strich.

  oeffentlich .card (133 Vorkommen auf der Website) -- war eine Flaeche
             mit einem Rand. Jetzt: Verlauf statt Flaeche, Lichtkante
             oben, Schatten nach unten. Beim Ueberfahren hebt sie sich,
             der Schatten wird laenger, die Kante heller.

Alles bleibt gedeckt. Diese Kacheln stehen zu Dutzenden auf einer Seite
-- was einzeln beeindruckt, blendet im Dutzend.

GEPRUEFT: Buehne 38 (Textkontrast an echten Bildpunkten), Startansicht
133, Rollen 97, Handy 50, Grosscheck 15, Lesbarkeit 14, dazu die drei
Laeufe der oeffentlichen Seite (Startseite, Design, Barrierefreiheit).
Alle gruen.

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

assets/css/main.css

@@ -2144,16 +2144,71 @@ body.modal-offen { overflow: hidden; }
 .jahres-event-modal-link[hidden] { display: none; }
 
 /* ---------- Cards ---------- */
+/* ---------- Die Kachel (überarbeitet 03.09.2026) -------------------------
+
+   Sie war eine Fläche mit einem Rand. Jetzt ist sie ein Gegenstand mit
+   einer Oberkante -- und das ist der ganze Unterschied.
+
+   Drei Dinge, die zusammen wirken:
+
+     1. LICHTKANTE OBEN. Ein einzelner heller Strich an der oberen
+        Kante, so wie Licht auf die Kante einer Glasplatte fällt. Es ist
+        die billigste und wirksamste Art, aus einem Rechteck einen
+        Körper zu machen -- eine Kachel ohne sie wirkt wie ein Loch in
+        der Seite, eine mit ihr wie ein Ding darauf.
+
+     2. VERLAUF STATT FLÄCHE. Oben eine Spur heller als unten. Kaum zu
+        sehen, aber ohne ihn bleibt die Fläche tot.
+
+     3. TIEFE. Ein Schatten nach unten -- nicht mittig, sondern versetzt,
+        so wie ein Gegenstand seinen Schatten wirft.
+
+   Beim Überfahren hebt sie sich, der Schatten wird länger und die
+   Lichtkante heller: als käme sie einem entgegen. Alles gedeckt, nichts
+   leuchtet -- diese Kacheln stehen zu Dutzenden auf einer Seite. */
 .card {
-  background: var(--card-bg);
+  position: relative;
+  background:
+    linear-gradient(180deg,
+      color-mix(in srgb, #fff 3.5%, var(--card-bg)),
+      var(--card-bg) 46%);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1.6rem;
-  box-shadow: var(--shadow);
+  box-shadow:
+    var(--shadow),
+    inset 0 1px 0 rgba(255, 255, 255, .07);
   height: 100%;
-  transition: border-color .15s ease, transform .15s ease;
+  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
+}
+/* Die Lichtkante. Als eigenes Element, damit sie den runden Ecken folgt
+   und in der Mitte am hellsten ist -- eine durchgehend gleich helle
+   Linie sieht aus wie ein Strich, nicht wie Licht. */
+.card::before {
+  content: "";
+  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
+  background: linear-gradient(90deg,
+    transparent, rgba(255, 255, 255, .5), transparent);
+  pointer-events: none;
+  opacity: .85;
+  transition: opacity .15s ease;
+}
+.card:hover {
+  border-color: var(--accent);
+  transform: translateY(-3px);
+  box-shadow:
+    var(--shadow),
+    inset 0 1px 0 rgba(255, 255, 255, .1),
+    0 16px 34px -20px color-mix(in srgb, var(--accent) 70%, transparent);
+}
+.card:hover::before { opacity: 1; }
+
+@media (prefers-reduced-motion: reduce) {
+  .card, .card:hover { transition: none; transform: none; }
+}
+@media (forced-colors: active) {
+  .card::before { display: none; }
 }
-.card:hover { border-color: var(--accent); transform: translateY(-3px); }
 /* Kachel-Überschriften: gleiche Optik für h2 UND h3. Manche Kacheln
    sind semantisch <h2> (eigenständige Abschnitte direkt unter der
    Seiten-h1, z.B. die Werte auf werte.html), sollen aber so kompakt