Die Kachelzeichen komplett neu -- Plaketten statt getoenter Quadrate

Rueckmeldung: "ich will dass die viel krasser aussehen, du veraenderst
immer nur minimal." Berechtigt. Drei Durchgaenge lang habe ich an
Details gedreht (Verlauf, dann Fuellung) -- jeder fuer sich richtig, in
der Summe kaum sichtbar. Das hier ist der Umbau.

DIE PLAKETTE war ein leicht getoentes Quadrat mit duennem Rand. Sie ist
jetzt ein KOERPER:
  * 58 statt 52 px (gross: 70 statt 62)
  * Verlauf ueber die Diagonale statt flacher Toenung
  * Lichtkante oben INNEN, Schattenkante unten innen -- zusammen eine
    Woelbung, das Feld wirkt gepraegt statt gemalt
  * ein Hof in der eigenen Farbe darunter
  * ein Glanzbogen darueber, der von links oben einfaellt

DAS ZEICHEN war eine duenne Kontur. Es besteht jetzt aus DREI Lagen mit
je eigenem Verlauf:
  KOERPER   gefuellte Grundform, oben satt, unten fast weg -- eine
            gleichmaessig gefuellte Form ist ein Aufkleber, eine
            auslaufende ist ein Koerper
  GLANZ     schmaler heller Streifen quer ueber die obere Haelfte,
            genau auf dem Koerper. Die Spiegelung.
  KONTUR    oben fast WEISS, unten im Farbton. So sieht Metall aus, auf
            das Licht von oben faellt -- das ist der Grund, warum die
            Zeichen jetzt plastisch wirken statt gezeichnet.
Dazu 29 statt 25 px und Strichstaerke 2,05 statt 1,65: Die Zeichen
sollen TRAGEN, nicht andeuten. Zaghaft war genau das Problem.

Alle drei Verlaeufe stehen EINMAL im Dokument und arbeiten mit
currentColor -- sie nehmen den Ton jeder der siebzehn Kacheln an. Drei
Verlaeufe statt einundfuenfzig.

Alles bleibt gedeckt: Ein leuchtender Kasten waere in einer dunklen
Oberflaeche eine Lampe, und Lampen schaut man nicht stundenlang an.
Im Wasserzeichen hinter dem Kacheltext und im Kontrastmodus bleiben
Koerper und Glanz aus.

GEPRUEFT: Buehne 38 (Textkontrast an echten Bildpunkten -- die
kraeftigeren Plaketten duerfen die Lesbarkeit nicht antasten),
Startansicht 133, Rollen 97, Handy 50, Grosscheck 15, Lesbarkeit 14.
Alle gruen.

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

workspace/assets/css/start.css

@@ -736,25 +736,69 @@ body.start > main { position: relative; z-index: 1; }
 /* Das Zeichen sitzt in einem eigenen Feld -- dadurch bekommt der Ton
    eine Fläche, ohne dass die ganze Kachel farbig wird. Der Verlauf und
    der innere Lichtrand darin lassen es geprägt statt gemalt wirken. */
+/* ---------- Die Plakette (neu gebaut 03.09.2026) -------------------------
+
+   Sie war ein leicht getöntes Quadrat. Jetzt ist sie ein KÖRPER:
+
+     * ein Verlauf über die Diagonale statt einer flachen Tönung
+     * eine Lichtkante oben INNEN und eine Schattenkante unten innen --
+       zusammen ergibt das eine Wölbung, das Feld wirkt geprägt
+     * ein Hof in der eigenen Farbe darunter, der die Plakette von der
+       Kachel abhebt
+     * darüber ein Glanzbogen (::before), der von links oben einfällt
+
+   Alles bleibt gedeckt. Ein leuchtender Kasten wäre in einer dunklen
+   Oberfläche eine Lampe -- und Lampen schaut man nicht stundenlang an. */
 .kachel__zeichen {
   position: relative; z-index: 1;
-  flex: none;
+  flex: none; overflow: hidden;
   display: grid; place-items: center;
-  width: 52px; height: 52px; border-radius: 15px;
+  width: 58px; height: 58px; border-radius: 17px;
   background:
-    linear-gradient(160deg,
-      color-mix(in srgb, var(--ton) 30%, transparent),
-      color-mix(in srgb, var(--ton) 10%, transparent));
-  border: 1px solid color-mix(in srgb, var(--ton) 32%, transparent);
-  /* Lichtkante innen oben, weicher Schein nach aussen -- dadurch wirkt
-     das Feld geprägt statt gemalt. Der Schein bleibt schwach; ein
-     leuchtender Kasten wäre in einer dunklen Oberfläche eine Lampe. */
+    radial-gradient(120% 100% at 22% 8%,
+      color-mix(in srgb, var(--ton) 46%, transparent) 0%,
+      color-mix(in srgb, var(--ton) 22%, transparent) 46%,
+      color-mix(in srgb, var(--ton) 8%, transparent) 100%);
+  border: 1px solid color-mix(in srgb, var(--ton) 40%, transparent);
   box-shadow:
-    inset 0 1px 0 color-mix(in srgb, var(--ton) 38%, transparent),
-    0 4px 14px -8px color-mix(in srgb, var(--ton) 60%, transparent);
+    /* Wölbung: Licht oben innen, Schatten unten innen. */
+    inset 0 1.5px 0 color-mix(in srgb, #fff 26%, transparent),
+    inset 0 -2px 6px -3px color-mix(in srgb, #000 55%, transparent),
+    /* Der Hof -- er trägt die Plakette, ohne zu leuchten. */
+    0 6px 18px -9px color-mix(in srgb, var(--ton) 85%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--ton) 10%, transparent);
   transition: background var(--tempo), border-color var(--tempo),
               transform var(--tempo), box-shadow var(--tempo);
 }
+/* Der Glanzbogen. Ein schmaler heller Streifen, der von links oben über
+   die Plakette läuft -- dasselbe Licht, das auch die Zeichen von oben
+   trifft. Er liegt UNTER dem Zeichen (z-index 0 gegen 1), damit er es
+   nicht überstrahlt. */
+.kachel__zeichen::before {
+  content: "";
+  position: absolute; inset: 0;
+  background: linear-gradient(150deg,
+    rgba(255, 255, 255, .22) 0%,
+    rgba(255, 255, 255, .07) 28%,
+    rgba(255, 255, 255, 0) 55%);
+  pointer-events: none;
+  transition: opacity var(--tempo);
+}
+.kachel:hover .kachel__zeichen {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--ton) 62%, transparent);
+  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) 18%, transparent);
+}
+@media (prefers-reduced-motion: reduce) {
+  .kachel__zeichen, .kachel:hover .kachel__zeichen { transition: none; transform: none; }
+}
+@media (forced-colors: active) {
+  .kachel__zeichen::before { display: none; }
+}
 .kachel:hover .kachel__zeichen {
   background:
     linear-gradient(160deg,
@@ -766,7 +810,7 @@ body.start > main { position: relative; z-index: 1; }
     inset 0 1px 0 color-mix(in srgb, var(--ton) 55%, transparent),
     0 6px 20px -8px color-mix(in srgb, var(--ton) 85%, transparent);
 }
-.kachel[data-gross="ja"] .kachel__zeichen { width: 62px; height: 62px; border-radius: 18px; }
+.kachel[data-gross="ja"] .kachel__zeichen { width: 70px; height: 70px; border-radius: 21px; }
 
 /* ---------- Die Zeichen (überarbeitet 03.09.2026) ------------------------
 
@@ -787,7 +831,9 @@ body.start > main { position: relative; z-index: 1; }
    SVG -- so nimmt derselbe eine Verlauf den Ton jeder der siebzehn
    Kacheln an. Siebzehn Farben, ein Verlauf. */
 .kachel__svg {
-  width: 25px; height: 25px;
+  /* 29 statt 25: Zusammen mit der kräftigeren Linie ist das der
+     sichtbarste Teil der Überarbeitung. */
+  width: 29px; height: 29px;
   color: var(--ton);
   fill: none;
   stroke-linecap: round; stroke-linejoin: round;
@@ -797,8 +843,12 @@ body.start > main { position: relative; z-index: 1; }
   transition: transform var(--tempo), filter var(--tempo);
 }
 .kachel__svg .zeichen__linie {
-  stroke: url(#zeichen-verlauf);
-  stroke-width: 1.65;
+  stroke: url(#zeichen-linie);
+  /* 2,05 statt 1,65: Die Zeichen sollen TRAGEN, nicht andeuten. Eine
+     dünne Linie wirkt neben kräftigem Text zaghaft -- und zaghaft war
+     genau das Problem. */
+  stroke-width: 2.05;
+  paint-order: stroke fill;
 }
 /* DIE SCHEIN-LAGE IST WIEDER WEG (03.09.2026) -- und der Weg dorthin
    gehört aufgeschrieben, damit sie niemand ein zweites Mal einbaut.
@@ -829,7 +879,7 @@ body.start > main { position: relative; z-index: 1; }
   filter: drop-shadow(0 2px 7px color-mix(in srgb, var(--ton) 62%, transparent));
 }
 
-.kachel[data-gross="ja"] .kachel__svg { width: 31px; height: 31px; }
+.kachel[data-gross="ja"] .kachel__svg { width: 36px; height: 36px; }
 
 @media (prefers-reduced-motion: reduce) {
   .kachel__svg, .kachel:hover .kachel__svg { transition: none; transform: none; }
@@ -2809,21 +2859,32 @@ body[data-fremde-sicht="ja"]::after {
    gar nicht mehr. Beim Überfahren geht sie auf 30 %, so als käme Licht
    dazu. */
 .kachel__svg .zeichen__fuellung {
-  fill: currentColor;
+  /* Ein VERLAUF statt einer flachen Deckkraft: oben satt, unten fast
+     weg. Eine gleichmässig gefüllte Form ist ein Aufkleber; eine, die
+     nach unten ausläuft, ist ein Körper. */
+  fill: url(#zeichen-flaeche);
   stroke: none;
-  opacity: .2;
   transition: opacity var(--tempo);
 }
-.kachel:hover .kachel__svg .zeichen__fuellung { opacity: .3; }
+/* Die Spiegelung liegt auf demselben Körper -- ein schmaler heller
+   Streifen quer über die obere Hälfte, wie Licht auf gewölbtem Glas. */
+.kachel__svg .zeichen__glanz {
+  fill: url(#zeichen-glanz);
+  stroke: none;
+  transition: opacity var(--tempo);
+}
+.kachel:hover .kachel__svg .zeichen__glanz { opacity: 1.35; }
 
 /* Im Wasserzeichen NICHT -- dort liegt das Zeichen riesig hinter dem
    Text der Kachel. Eine Fläche würde ihn hinterlegen. */
-.kachel__wasserzeichen .zeichen__fuellung { display: none; }
+.kachel__wasserzeichen .zeichen__fuellung,
+.kachel__wasserzeichen .zeichen__glanz { display: none; }
 
 @media (prefers-reduced-motion: reduce) {
   .kachel__svg .zeichen__fuellung { transition: none; }
 }
 @media (forced-colors: active) {
   /* Ohne Farben würde die Fläche zu einem massiven Block. */
-  .kachel__svg .zeichen__fuellung { display: none; }
+  .kachel__svg .zeichen__fuellung,
+  .kachel__svg .zeichen__glanz { display: none; }
 }