Niemand erfaehrt, was er nicht hat -- und die Kacheln tragen ihre Farbe

ZWEI WUENSCHE, DIE ZUSAMMENGEHOEREN: die Willkommensseite.

1. "KEINER SOLL WISSEN WAS ER NICHT SIEHT"

Filipe: "das geht keinen was an. sie sehen die sachen ja nicht weil es
sie nichts angeht und das muss auch nicht erwaehnt werden.
kontrollier das ueberall bitte."

Durchgesehen: Das Haus macht es ueberall sonst schon richtig -- der
Server antwortet mit 404 statt 403, damit ein "das darfst du nicht"
gar nicht erst verraet, dass es etwas gibt. GENAU ZWEI Stellen taten
das Gegenteil, beide auf der Willkommensseite:

  der Hinweis "Was du nicht siehst" (linke Hand),
  und in ihrer Einleitung "Was du NICHT hast: Personen anlegen,
  Rollen aendern und den vertraulichen Meldeweg".

Beide entfernt, der Hinweis mit einem Kommentar an seiner Stelle --
damit ihn niemand spaeter "nachtraegt", weil er ihn fuer vergessen
haelt. Im Kopf derselben Datei stand die Ueberlegung uebrigens schon:
"Eine Liste von Dingen, die man nicht darf, ist keine Orientierung,
sondern eine Kraenkung."

Die Pruefung verlangte bis heute das GEGENTEIL ("ihr wird gesagt, was
sie nicht hat"). Sie misst jetzt alle fuenf Rollen gegen acht Muster,
mit Gegenprobe -- das "ueberall" aus dem Auftrag.

2. DIE FARBEN DER STARTSEITE

Der Server reicht `ton` durch, die Kachel traegt `data-ton="N"`, und
start.css macht daraus `--ton`. Keine eigene Farbtabelle: Die waere
die, die beim naechsten Farbwechsel stehen bleibt -- genau das ist am
19.09. elf Seiten passiert.

Drei Stellen tragen die Farbe, keine davon eine Flaeche: das Zeichen,
eine schmale Kante links und ein leiser Schimmer in der oberen Ecke.
Eine eingefaerbte Kachelflaeche waere bunt und schlecht lesbar.

UND EIN FEHLER, DEN NUR DAS MESSEN GEZEIGT HAT: Mein erster Anlauf
setzte `--ton: var(--akzent)` als Vorgabe auf `.w-kachel`. Gleiche
Spezifitaet wie `[data-ton="N"]` in start.css -- und willkommen.css
laedt SPAETER. Ergebnis: 0 von 14 Kacheln trugen die richtige Farbe,
alle waren blau. Der Rueckfall gehoert an die Verwendung
(`var(--ton, …)`), nicht an die Deklaration. Danach: 14 von 14.

Geprueft: pruef-willkommen 67/0, pruef-css-klassen 30/0.

workspace/assets/css/willkommen.css

@@ -161,38 +161,95 @@
   .w-raster { grid-template-columns: 1fr 1fr; }
 }
 
+/* ---------------------------------------------------------------------
+   DIE KACHELN -- IN DEN FARBEN DER STARTSEITE (22.09.2026)
+   ---------------------------------------------------------------------
+
+   Filipe: "die kacheln in der willkommens seite sollen die selben
+   farben haben wie in der startseite. mach das richtig ultra geil
+   bitte. die seite soll mega aussehen."
+
+   DIE FARBE WIRD NICHT NEU VERGEBEN, SONDERN GEERBT. Der Server
+   schickt `ton`, die Kachel traegt `data-ton="N"`, und `start.css`
+   macht daraus `--ton` -- dieselbe Zeile, aus der die Startseite ihre
+   Farbe nimmt. Eine eigene Tabelle hier waere die, die beim naechsten
+   Farbwechsel stehen bleibt; genau das ist am 19.09. elf Seiten
+   passiert.
+
+   DREI STELLEN TRAGEN DIE FARBE, und keine davon ist eine Flaeche:
+   das Zeichen, eine schmale Kante links, und ein ganz leiser Schimmer
+   in der oberen Ecke. Eine eingefaerbte Kachelflaeche waere bunt und
+   schlecht lesbar -- die Startseite macht es genauso.
+   --------------------------------------------------------------------- */
+/* HIER STAND `--ton: var(--akzent)` ALS VORGABE -- und hat alles
+   kaputtgemacht (berichtigt 22.09.2026).
+
+   `[data-ton="N"] { --ton: … }` steht in start.css und hat dieselbe
+   Spezifitaet (0,1,0) wie diese Regel. willkommen.css laedt SPAETER,
+   also gewann die Vorgabe, und jede Kachel war blau. Gemessen: 0 von
+   14 Kacheln trugen die Farbe der Startseite.
+
+   Der Rueckfall gehoert deshalb an die VERWENDUNG (`var(--ton, …)`)
+   und nicht an die Deklaration -- dort greift er nur, wenn wirklich
+   nichts gesetzt ist. */
 .w-kachel {
+  position: relative;
   display: flex;
   gap: 13px;
   align-items: flex-start;
   min-height: 44px;
-  padding: 14px 15px;
+  padding: 15px 16px 15px 18px;
   border: 1px solid var(--rand);
   border-radius: var(--radius-klein, 12px);
-  background: color-mix(in srgb, var(--flaeche) 88%, transparent);
+  overflow: hidden;
+  background:
+    /* Der Schimmer sitzt oben links, dort, wo auch das Zeichen steht --
+       so wirkt er wie Licht auf dem Zeichen und nicht wie ein Fleck. */
+    radial-gradient(70% 90% at 0% 0%,
+      color-mix(in srgb, var(--ton, var(--akzent)) 13%, transparent), transparent 70%),
+    color-mix(in srgb, var(--flaeche) 90%, transparent);
   color: inherit;
   text-decoration: none;
   transition: border-color var(--tempo, .18s) ease,
               background-color var(--tempo, .18s) ease,
-              transform var(--tempo, .18s) ease;
+              transform var(--tempo, .18s) ease,
+              box-shadow var(--tempo, .18s) ease;
+}
+
+/* DIE KANTE LINKS -- als eigenes Element, nicht als `border-left`.
+   Ein farbiger Rahmenrand haette die Ecken mitgefaerbt und dabei
+   getreppt ausgesehen; so laeuft sie sauber durch. */
+.w-kachel::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  background: linear-gradient(180deg,
+    var(--ton, var(--akzent)),
+    color-mix(in srgb, var(--ton, var(--akzent)) 35%, transparent));
 }
 
 .w-kachel:hover,
 .w-kachel:focus-visible {
-  border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand));
-  background: color-mix(in srgb, var(--flaeche) 100%, transparent);
+  border-color: color-mix(in srgb, var(--ton, var(--akzent)) 55%, var(--rand));
+  background:
+    radial-gradient(70% 90% at 0% 0%,
+      color-mix(in srgb, var(--ton, var(--akzent)) 20%, transparent), transparent 72%),
+    color-mix(in srgb, var(--flaeche) 100%, transparent);
   transform: translateY(-1px);
+  box-shadow: 0 8px 22px -16px color-mix(in srgb, var(--ton, var(--akzent)) 70%, transparent);
 }
 
 .w-kachel__zeichen {
   flex: 0 0 auto;
   display: grid;
   place-items: center;
-  width: 34px;
-  height: 34px;
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--akzent) 14%, transparent);
-  color: var(--akzent);
+  width: 36px;
+  height: 36px;
+  border-radius: 11px;
+  border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 30%, transparent);
+  background: color-mix(in srgb, var(--ton, var(--akzent)) 16%, transparent);
+  color: var(--ton, var(--akzent));
 }
 
 .w-kachel__zeichen svg {
@@ -224,12 +281,21 @@
 /* Der lange Satz ist bewusst etwas kleiner und ruhiger: Er ist die
    Vertiefung, nicht die Ueberschrift. */
 .w-kachel__lang {
-  margin-top: 5px;
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
   font-size: .85rem;
   line-height: 1.56;
   color: var(--text-still);
 }
 
+/* DIE BREITE KACHEL bleibt auch hier breit -- sie ist auf der
+   Startseite doppelt so gross, und wer von dort kommt, sucht sie an
+   derselben Stelle. */
+@media (min-width: 900px) {
+  .w-kachel[data-gross="ja"] { grid-column: span 2; }
+}
+
 /* ---------------------------------------------------------------------
    DIE ZUSTAENDE
    --------------------------------------------------------------------- */

workspace/assets/js/willkommen.js

@@ -33,6 +33,12 @@
   function kachelBauen(k) {
     const a = el('a', 'w-kachel');
     a.href = k.ziel;
+    /* Der Farbton kommt vom Server und wird hier nur gesetzt --
+       `[data-ton="N"]` in start.css macht daraus `--ton`. Damit traegt
+       jede Kachel hier genau die Farbe, die sie auf der Startseite
+       auch hat, ohne dass diese Datei eine einzige Farbe kennt. */
+    if (k.ton !== null && k.ton !== undefined) a.dataset.ton = String(k.ton);
+    if (k.gross) a.dataset.gross = 'ja';
     const z = zeichen(k.zeichen);
     if (z) {
       const huelle = el('span', 'w-kachel__zeichen');