Der Husky jetzt auch auf der Zugangsseite -- und fuenf Zeichen in fuenf Farben

Filipe: "bei dogfather ist immer noch die krone und da soll ja ein husky
sein. und die symbole sollen doch alle viel krasser, geiler und
spezieller sein."

Er hat recht, und der Grund ist eine Haelfte, die ich uebersehen habe:
Die Rollenzeichen gibt es ZWEIMAL im Haus -- als <use>-Bausteine in
personen.html (dort war der Husky schon) und noch einmal ausgeschrieben
in index.html, der Anmeldeseite. Getauscht hatte ich nur die erste.

DER HUSKY, zweite Ausfertigung. Bei 21 Pixeln entscheidet die
Silhouette, nicht das Detail: spitze aufrechte Ohren, breiter Kopf, der
nach unten schmal zulaeuft, Gesichtsmaske. Mehr passt nicht hinein --
und mehr braucht es nicht.

UND ALLE FUENF ZEICHEN TRAGEN JETZT IHRE EIGENE FARBE

Sie waren feine Konturen in einer Farbe, und zwar in DERSELBEN fuer
alle fuenf. Jetzt: eine gefuellte Flaeche in der Farbe ihrer Rolle, die
Zeichnung hell darauf, ein leichter Schatten darunter. Chili rot,
Husky gold, Stern violett, Schild gruen, Person blau -- dieselben
Farben wie auf der Personenseite; wer die eine Seite kennt, erkennt die
andere wieder.

Die Farbe steht am ROLLENKNOPF (`--rf`), nicht im Zeichen. Die Zeichen
wissen damit nichts von Rollen, und eine Farbaenderung passiert an
einer Stelle statt an fuenf. Gewaehlt heisst: mehr Licht auf demselben
Gegenstand -- kein anderer Gegenstand.

Zehn Pruefungen gelaufen, alle gruen, darunter Kontrast und Handy fuer
die Anmeldeseite.

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

workspace/assets/css/gate.css

@@ -237,7 +237,57 @@ body.gate {
   transition: stroke var(--tempo);
 }
 .rolle__zeichen .strich { fill: none; }
-.rolle[aria-checked="true"] .rolle__zeichen { stroke: var(--akzent); }
+
+/* =====================================================================
+   DIE ROLLENZEICHEN SIND KOERPER, KEINE UMRISSE (07.09.2026)
+
+   Filipe: "die symbole sollen doch alle viel krasser, geiler und
+   spezieller sein."
+
+   Sie waren feine Konturen in EINER Farbe -- und zwar in derselben fuer
+   alle fuenf. Jetzt tragen sie eine gefuellte Flaeche in der Farbe
+   IHRER Rolle, die Zeichnung hell darauf und einen leichten Schatten
+   darunter. Dieselbe Sprache wie die Rollenknoepfe auf der
+   Personenseite; wer die eine Seite kennt, erkennt die andere wieder.
+
+   `--rf` ist die Rollenfarbe. Sie steht hier und nicht im Zeichen,
+   damit die Farbe eines Tages nur an EINER Stelle geaendert werden
+   muss -- die Zeichen selbst wissen nichts von Rollen. */
+.rolle { --rf: var(--text-still); }
+.rolle[data-rolle="spicy"]   { --rf: #ff6f7d; }
+.rolle[data-rolle="admin"]   { --rf: #e3b341; }
+.rolle[data-rolle="manager"] { --rf: #a48bff; }
+.rolle[data-rolle="scout"]   { --rf: #3fd18b; }
+.rolle[data-rolle="creator"] { --rf: #3fbdf5; }
+
+.rolle__zeichen {
+  stroke: color-mix(in srgb, var(--rf) 88%, #ffffff);
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .65));
+}
+.rolle__zeichen .fuell {
+  stroke: none;
+  fill: color-mix(in srgb, var(--rf) 52%, transparent);
+}
+.rolle__zeichen .auge {
+  stroke: none;
+  fill: color-mix(in srgb, var(--rf) 26%, #ffffff);
+}
+.rolle__zeichen .nase {
+  stroke: none;
+  fill: color-mix(in srgb, var(--rf) 45%, #06090f);
+}
+.rolle__zeichen .hell {
+  stroke: color-mix(in srgb, var(--rf) 16%, #ffffff);
+  stroke-width: 2;
+}
+/* Gewaehlt: mehr Licht auf demselben Gegenstand -- kein anderer
+   Gegenstand. */
+.rolle[aria-checked="true"] .rolle__zeichen {
+  stroke: color-mix(in srgb, var(--rf) 40%, #ffffff);
+}
+.rolle[aria-checked="true"] .rolle__zeichen .fuell {
+  fill: color-mix(in srgb, var(--rf) 78%, transparent);
+}
 
 .rolle__text { display: flex; flex-direction: column; min-width: 0; }
 .rolle__name { font-weight: 600; font-size: .95rem; }