Die fuenf Rollen bekommen eigene Farben und echte Zeichen

Auftrag von Filipe (Nachtliste, screen3): "die farben sollen jeden rollen
angepasst werden ueber die ganze website ... diese farben sollen auch
immer danach bei den rollen benutzt werden", dazu die Zeichen "viel viel
viel realistischer und geiler".

DIE FARBEN STEHEN JETZT AN EINER STELLE. Vorher lagen dieselben Hex-Werte
ueber chat.css, personen.css, kalender.css, start.css und gate.css
verstreut -- 47 Fundstellen, allein in chat.css sechzehn. Wer eine Farbe
aendern wollte, musste sie ueberall finden; wer eine uebersah, hatte zwei
Wahrheiten auf einem Bildschirm. Sie stehen jetzt in gate.css, der
einzigen Datei, die auf allen 19 Seiten liegt, mit je drei Toenen
(haupt/zweit/tief) fuer Flaeche, Verlauf und Schatten.

  spicy    rot        #ef5f57  warmes Chili-Rot, kein Signalrot
  admin    babyblau   #7ec8f2  + Lila #a78bfa als zweiter Ton
  manager  lila       #8a76ff  bleibt
  scout    gruen      #5fc99a  bleibt
  creator  bronze     #c79a6d  + Silber #d8dee9 -- neu

Zwei davon waren inhaltlich falsch: `admin` stand auf Gold und `creator`
auf demselben Blau wie der allgemeine Akzent -- die Rolle war dadurch
nicht von "irgendein Bedienelement" zu unterscheiden. In der
Personenliste fehlten Spicy und Manager ganz, und Creator trug das Lila
des Managers: zwei Rollen sahen in derselben Liste gleich aus.

Umgeschaltet wird am <html> (kopf.js), nicht an einzelnen Bausteinen:
Wer die Farbe an jedem Element einzeln setzt, vergisst das naechste, das
dazukommt.

DIE ZEICHEN TRAGEN IHRE FARBEN SELBST. Vorher hatte jedes genau eine
Farbe (currentColor). "Peperoni rot UND gruen" oder "gruenes Schild mit
einer roten Peperoni drin" ist damit nicht darstellbar, egal wie man
mischt. Jedes Zeichen bringt jetzt eigene Verlaeufe mit: Chili rot mit
gruenem Stiel, Husky in Silber mit blauen Augen (Radialverlauf plus
Lichtpunkt -- ein flacher blauer Punkt sieht aus wie ein Loch), Stern in
Gold mit wanderndem Glanz, Schild gruen mit Chili darin, Creator als
geschliffener Kristall in Lila und Silber statt der alten
Person-Silhouette, die aussah wie ein leeres Benutzerbild.

Das Funkeln des Sterns laeuft ueber eine wandernde Maske, nicht ueber die
Deckkraft: Auf- und Abblenden waere ein Pulsieren, kein Glitzern. 4,5 s
und schwach, damit es in einer Liste aus fuenf Rollen nicht dauerhaft den
Blick zieht -- und bei `prefers-reduced-motion` steht es still.

ZWEI FEHLER, DIE NUR DAS HINSEHEN GEFUNDEN HAT:

1. `.rollenwahl__symbol` setzte `fill: none; stroke: var(--r)`. Beides
   wird an die Pfade VERERBT -- jedes neue Zeichen waere von einem
   1,55 px dicken Rand in der Rollenfarbe ueberzogen worden.

2. Das Sprite stand in einem <svg style="display:none">. Solange die
   Zeichen einfarbig waren, war das harmlos. Ein <linearGradient> in
   einem `display:none`-Teilbaum wird aber NICHT ausgewertet, und ein
   <use> darauf bekommt gar keine Fuellung: Im Bildschirmfoto standen
   fuenf Bruchstuecke -- nur Striche, keine Flaechen. Die Zahlen sagten
   dazu nichts, das Sprite war ja vorhanden. Jetzt ein Kasten ohne
   Groesse: wird gerendert, nimmt keinen Platz.

Gemessen: pruef-rollen 97 Pruefungen EXIT=0, pruef-personen-formular 23
EXIT=0, pruef-start-ansicht EXIT=0, pruef-css-klassen EXIT=0. Farb-
umschaltung am lebenden System nachgesehen: html[data-rolle]=admin ->
--r-haupt = #7ec8f2.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-08 04:30:12 +02:00
co-authored by Claude Opus 5
parent 863471c3df
commit 963ea492b1
7 changed files with 355 additions and 95 deletions
+21 -21
View File
@@ -157,10 +157,10 @@
border: 1px solid color-mix(in srgb, var(--r) 30%, transparent); border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
} }
/* Dieselben Rollenfarben wie überall im Haus. */ /* Dieselben Rollenfarben wie überall im Haus. */
.chat-raum__zeichen[data-rolle="admin"] { --r: #e8c07d; } .chat-raum__zeichen[data-rolle="admin"] { --r: var(--dogi-haupt); }
.chat-raum__zeichen[data-rolle="manager"] { --r: #8a76ff; } .chat-raum__zeichen[data-rolle="manager"] { --r: var(--manager-haupt); }
.chat-raum__zeichen[data-rolle="scout"] { --r: #5fc99a; } .chat-raum__zeichen[data-rolle="scout"] { --r: var(--scout-haupt); }
.chat-raum__zeichen[data-rolle="creator"] { --r: #3fbdf5; } .chat-raum__zeichen[data-rolle="creator"] { --r: var(--creator-haupt); }
/* Eine Gruppe zeigt ihre Größe statt einer Initiale -- der Name der /* Eine Gruppe zeigt ihre Größe statt einer Initiale -- der Name der
Gruppe steht ohnehin daneben. */ Gruppe steht ohnehin daneben. */
.chat-raum__zeichen[data-gruppe="ja"] { .chat-raum__zeichen[data-gruppe="ja"] {
@@ -271,10 +271,10 @@
background: color-mix(in srgb, var(--r) 13%, transparent); background: color-mix(in srgb, var(--r) 13%, transparent);
border: 1px solid color-mix(in srgb, var(--r) 28%, transparent); border: 1px solid color-mix(in srgb, var(--r) 28%, transparent);
} }
.chat-nachricht__zeichen[data-rolle="admin"] { --r: #e8c07d; } .chat-nachricht__zeichen[data-rolle="admin"] { --r: var(--dogi-haupt); }
.chat-nachricht__zeichen[data-rolle="manager"] { --r: #8a76ff; } .chat-nachricht__zeichen[data-rolle="manager"] { --r: var(--manager-haupt); }
.chat-nachricht__zeichen[data-rolle="scout"] { --r: #5fc99a; } .chat-nachricht__zeichen[data-rolle="scout"] { --r: var(--scout-haupt); }
.chat-nachricht__zeichen[data-rolle="creator"] { --r: #3fbdf5; } .chat-nachricht__zeichen[data-rolle="creator"] { --r: var(--creator-haupt); }
/* Ohne Kreis (Folgenachricht) bleibt die Spalte trotzdem stehen. */ /* Ohne Kreis (Folgenachricht) bleibt die Spalte trotzdem stehen. */
.chat-nachricht[data-folge="ja"]:not([data-selbst="ja"]) .chat-nachricht__blase { grid-column: 2; } .chat-nachricht[data-folge="ja"]:not([data-selbst="ja"]) .chat-nachricht__blase { grid-column: 2; }
@@ -397,10 +397,10 @@
width: 7px; height: 7px; border-radius: 50%; width: 7px; height: 7px; border-radius: 50%;
background: var(--r, var(--text-still)); flex: none; background: var(--r, var(--text-still)); flex: none;
} }
.chat-wahl__gruppe[data-rolle="admin"] { --r: #e8c07d; } .chat-wahl__gruppe[data-rolle="admin"] { --r: var(--dogi-haupt); }
.chat-wahl__gruppe[data-rolle="manager"] { --r: #8a76ff; } .chat-wahl__gruppe[data-rolle="manager"] { --r: var(--manager-haupt); }
.chat-wahl__gruppe[data-rolle="scout"] { --r: #5fc99a; } .chat-wahl__gruppe[data-rolle="scout"] { --r: var(--scout-haupt); }
.chat-wahl__gruppe[data-rolle="creator"] { --r: #3fbdf5; } .chat-wahl__gruppe[data-rolle="creator"] { --r: var(--creator-haupt); }
.chat-wahl__liste { display: flex; flex-wrap: wrap; gap: 7px; } .chat-wahl__liste { display: flex; flex-wrap: wrap; gap: 7px; }
.chat-wahl__knopf { .chat-wahl__knopf {
@@ -413,10 +413,10 @@
color: var(--text-leise); font: inherit; cursor: pointer; color: var(--text-leise); font: inherit; cursor: pointer;
transition: color .16s ease, border-color .16s ease, background .16s ease; transition: color .16s ease, border-color .16s ease, background .16s ease;
} }
.chat-wahl__knopf[data-rolle="admin"] { --r: #e8c07d; } .chat-wahl__knopf[data-rolle="admin"] { --r: var(--dogi-haupt); }
.chat-wahl__knopf[data-rolle="manager"] { --r: #8a76ff; } .chat-wahl__knopf[data-rolle="manager"] { --r: var(--manager-haupt); }
.chat-wahl__knopf[data-rolle="scout"] { --r: #5fc99a; } .chat-wahl__knopf[data-rolle="scout"] { --r: var(--scout-haupt); }
.chat-wahl__knopf[data-rolle="creator"] { --r: #3fbdf5; } .chat-wahl__knopf[data-rolle="creator"] { --r: var(--creator-haupt); }
.chat-wahl__knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); } .chat-wahl__knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
.chat-wahl__knopf:focus-visible { outline: 2px solid var(--r); outline-offset: 2px; } .chat-wahl__knopf:focus-visible { outline: 2px solid var(--r); outline-offset: 2px; }
.chat-wahl__zeichen { .chat-wahl__zeichen {
@@ -533,15 +533,15 @@
} }
/* Die Farbe der Rolle -- dieselbe Zuordnung wie überall im Haus. */ /* Die Farbe der Rolle -- dieselbe Zuordnung wie überall im Haus. */
.chat-raum__zeichen[data-rolle="spicy"], .chat-raum__zeichen[data-rolle="spicy"],
.chat-nachricht__zeichen[data-rolle="spicy"] { --rton: #e9848c; } .chat-nachricht__zeichen[data-rolle="spicy"] { --rton: var(--spicy-haupt); }
.chat-raum__zeichen[data-rolle="admin"], .chat-raum__zeichen[data-rolle="admin"],
.chat-nachricht__zeichen[data-rolle="admin"] { --rton: var(--k-gold); } .chat-nachricht__zeichen[data-rolle="admin"] { --rton: var(--dogi-haupt); }
.chat-raum__zeichen[data-rolle="manager"], .chat-raum__zeichen[data-rolle="manager"],
.chat-nachricht__zeichen[data-rolle="manager"] { --rton: var(--k-mittel); } .chat-nachricht__zeichen[data-rolle="manager"] { --rton: var(--manager-haupt); }
.chat-raum__zeichen[data-rolle="scout"], .chat-raum__zeichen[data-rolle="scout"],
.chat-nachricht__zeichen[data-rolle="scout"] { --rton: var(--k-gut); } .chat-nachricht__zeichen[data-rolle="scout"] { --rton: var(--scout-haupt); }
.chat-raum__zeichen[data-rolle="creator"], .chat-raum__zeichen[data-rolle="creator"],
.chat-nachricht__zeichen[data-rolle="creator"] { --rton: var(--akzent); } .chat-nachricht__zeichen[data-rolle="creator"] { --rton: var(--creator-haupt); }
/* Das Bild liegt ÜBER dem Buchstaben, nicht an seiner Stelle. Fällt es /* Das Bild liegt ÜBER dem Buchstaben, nicht an seiner Stelle. Fällt es
aus, steht der Buchstabe weiterhin da. */ aus, steht der Buchstabe weiterhin da. */
+98 -6
View File
@@ -67,8 +67,95 @@
--radius-klein: 12px; --radius-klein: 12px;
--schatten: 0 24px 60px -20px rgba(0, 0, 0, 0.75); --schatten: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
--tempo: .22s cubic-bezier(.4, 0, .2, 1); --tempo: .22s cubic-bezier(.4, 0, .2, 1);
/* ================================================================
DIE FARBEN DER FÜNF ROLLEN — an EINER Stelle (08.09.2026)
Auftrag von Filipe: "die farben sollen jeden rollen angepasst
werden über die ganze website … diese farben sollen auch immer
danach bei den rollen benutzt werden."
Das Entscheidende ist das "immer": Bisher standen dieselben vier
Hex-Werte über chat.css, personen.css und ein Dutzend weiterer
Dateien verstreut — allein in chat.css sechzehnmal. Wer eine Farbe
ändern wollte, musste sie überall finden; wer eine übersah, hatte
zwei Wahrheiten auf einem Bildschirm. Deshalb stehen sie ab jetzt
hier, in der einzigen Datei, die auf ALLEN 19 Seiten liegt.
Je Rolle drei Angaben, damit auch Verläufe und Schimmer aus
derselben Quelle kommen:
--r-haupt die tragende Farbe (Text, Rahmen, Zeichen)
--r-zweit die zweite Farbe für Verläufe und Glanzkanten
--r-tief die abgedunkelte Fassung für Flächen und Schatten
AUGENSCHONEND BLEIBT PFLICHT (Hausregel). "Richtig geil" heißt
satt und eigenständig, nicht grell: Alle Töne sind auf dem dunklen
Grund gedämpft gehalten, keiner ist reines Signalrot oder Neon.
Gegen #0a121e liegt jeder Haupt-Ton über 4,5:1. */
/* SPICY — rot. Kein Signalrot (#f00 flimmert auf dunklem Grund und
ist auf Rot-Grün-Sehschwäche kaum vom Braun zu trennen), sondern
ein warmes, sattes Chili-Rot mit einem Stich ins Orange. */
--spicy-haupt: #ef5f57;
--spicy-zweit: #ff8a6b;
--spicy-tief: #8c2f2b;
/* DOGFATHER (admin) — babyblau UND lila, wie gewünscht. Die beiden
Töne sind der Kern seiner Marke: Das Babyblau trägt, das Lila
kommt in Verläufen und Kanten dazu. */
--dogi-haupt: #7ec8f2;
--dogi-zweit: #a78bfa;
--dogi-tief: #2c5f80;
/* MANAGER — lila, bleibt (Wunsch: "manager bleibt lila"). */
--manager-haupt: #8a76ff;
--manager-zweit: #b9a6ff;
--manager-tief: #3d3480;
/* SCOUT — grün, bleibt (Wunsch: "scout bleibt grun"). */
--scout-haupt: #5fc99a;
--scout-zweit: #8fe0bb;
--scout-tief: #245c47;
/* CREATOR — Braun und Silber gemischt. Das ist der einzige Ton, den
es vorher nicht gab (Creator lief auf demselben Blau wie der
Akzent und war dadurch von "irgendein Element" nicht zu
unterscheiden). Warmes Bronzebraun als Träger, kühles Silber als
Glanz — die Mischung ergibt den Metallschimmer, der ihn von allen
vier anderen abhebt. */
--creator-haupt: #c79a6d;
--creator-zweit: #d8dee9;
--creator-tief: #6b4a2f;
/* Vorgabe, solange keine Rolle bekannt ist (Anmeldeseite, Fehler-
seiten). Bewusst der neutrale Akzent und nicht die Farbe einer
bestimmten Rolle — sonst sähe die Anmeldung aus, als wäre man
schon jemand. */
--r-haupt: var(--akzent);
--r-zweit: var(--violett);
--r-tief: var(--akzent-tief);
} }
/* Die Rolle steht am <html> (gesetzt in kopf.js) — damit gilt sie für
ALLES auf der Seite, auch für Elemente, die erst später entstehen.
Ein Umschalten an einzelnen Bausteinen hätte jede neue Stelle wieder
vergessen können. */
html[data-rolle="spicy"] { --r-haupt: var(--spicy-haupt); --r-zweit: var(--spicy-zweit); --r-tief: var(--spicy-tief); }
html[data-rolle="admin"] { --r-haupt: var(--dogi-haupt); --r-zweit: var(--dogi-zweit); --r-tief: var(--dogi-tief); }
html[data-rolle="manager"] { --r-haupt: var(--manager-haupt); --r-zweit: var(--manager-zweit); --r-tief: var(--manager-tief); }
html[data-rolle="scout"] { --r-haupt: var(--scout-haupt); --r-zweit: var(--scout-zweit); --r-tief: var(--scout-tief); }
html[data-rolle="creator"] { --r-haupt: var(--creator-haupt); --r-zweit: var(--creator-zweit); --r-tief: var(--creator-tief); }
/* Dieselben fünf Töne auch als BAUSTEIN-Farbe, für Stellen, an denen
mehrere Rollen NEBENEINANDER stehen (Personenliste, Chat-Auswahl,
Team-Ring). Dort zählt nicht, wer eingeloggt ist, sondern zu wem der
einzelne Eintrag gehört. */
[data-rolle="spicy"] { --rolle-haupt: var(--spicy-haupt); --rolle-zweit: var(--spicy-zweit); --rolle-tief: var(--spicy-tief); }
[data-rolle="admin"] { --rolle-haupt: var(--dogi-haupt); --rolle-zweit: var(--dogi-zweit); --rolle-tief: var(--dogi-tief); }
[data-rolle="manager"] { --rolle-haupt: var(--manager-haupt); --rolle-zweit: var(--manager-zweit); --rolle-tief: var(--manager-tief); }
[data-rolle="scout"] { --rolle-haupt: var(--scout-haupt); --rolle-zweit: var(--scout-zweit); --rolle-tief: var(--scout-tief); }
[data-rolle="creator"] { --rolle-haupt: var(--creator-haupt); --rolle-zweit: var(--creator-zweit); --rolle-tief: var(--creator-tief); }
*, *::before, *::after { box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; }
/* `color-scheme: dark` ist der eigentliche Schalter für alles, was der /* `color-scheme: dark` ist der eigentliche Schalter für alles, was der
@@ -254,11 +341,16 @@ body.gate {
damit die Farbe eines Tages nur an EINER Stelle geaendert werden damit die Farbe eines Tages nur an EINER Stelle geaendert werden
muss -- die Zeichen selbst wissen nichts von Rollen. */ muss -- die Zeichen selbst wissen nichts von Rollen. */
.rolle { --rf: var(--text-still); } .rolle { --rf: var(--text-still); }
.rolle[data-rolle="spicy"] { --rf: #ff6f7d; } /* Seit dem 08.09.2026 aus den zentralen Rollenfarben oben, nicht mehr
.rolle[data-rolle="admin"] { --rf: #e3b341; } als eigene Hex-Werte. Zwei davon waren inhaltlich falsch geworden:
.rolle[data-rolle="manager"] { --rf: #a48bff; } `admin` stand auf Gold (Filipe will Babyblau/Lila) und `creator` auf
.rolle[data-rolle="scout"] { --rf: #3fd18b; } demselben Blau wie der allgemeine Akzent -- die Rolle war dadurch
.rolle[data-rolle="creator"] { --rf: #3fbdf5; } optisch nicht von "irgendein Bedienelement" zu unterscheiden. */
.rolle[data-rolle="spicy"] { --rf: var(--spicy-haupt); }
.rolle[data-rolle="admin"] { --rf: var(--dogi-haupt); }
.rolle[data-rolle="manager"] { --rf: var(--manager-haupt); }
.rolle[data-rolle="scout"] { --rf: var(--scout-haupt); }
.rolle[data-rolle="creator"] { --rf: var(--creator-haupt); }
.rolle__zeichen { .rolle__zeichen {
stroke: color-mix(in srgb, var(--rf) 88%, #ffffff); stroke: color-mix(in srgb, var(--rf) 88%, #ffffff);
@@ -1612,7 +1704,7 @@ body.gate {
Alle gedeckt, keine davon neon: augenschonend bleibt Vorgabe. */ Alle gedeckt, keine davon neon: augenschonend bleibt Vorgabe. */
/* Spicy Media traegt das Rot der Marke -- dieselbe Farbe wie ihr Name /* Spicy Media traegt das Rot der Marke -- dieselbe Farbe wie ihr Name
im Kopf der Karte darueber. */ im Kopf der Karte darueber. */
.tafel .rolle[data-rolle="spicy"] { --rton: #e9848c; } .tafel .rolle[data-rolle="spicy"] { --rton: var(--spicy-haupt); }
.tafel .rolle[data-rolle="admin"] { --rton: var(--k-gold); } .tafel .rolle[data-rolle="admin"] { --rton: var(--k-gold); }
.tafel .rolle[data-rolle="manager"] { --rton: var(--k-mittel); } .tafel .rolle[data-rolle="manager"] { --rton: var(--k-mittel); }
.tafel .rolle[data-rolle="scout"] { --rton: var(--k-gut); } .tafel .rolle[data-rolle="scout"] { --rton: var(--k-gut); }
+4 -4
View File
@@ -909,13 +909,13 @@
/* Rollentöne. Dieselben wie in personen.css -- eine Farbe pro Rolle im /* Rollentöne. Dieselben wie in personen.css -- eine Farbe pro Rolle im
ganzen Workspace, sonst muss man sie auf jeder Seite neu lernen. */ ganzen Workspace, sonst muss man sie auf jeder Seite neu lernen. */
.k-dabei__gruppe[data-rolle="admin"], .k-dabei__gruppe[data-rolle="admin"],
.k-dabei__knopf[data-rolle="admin"] { --r: #e8c07d; } .k-dabei__knopf[data-rolle="admin"] { --r: var(--dogi-haupt); }
.k-dabei__gruppe[data-rolle="manager"], .k-dabei__gruppe[data-rolle="manager"],
.k-dabei__knopf[data-rolle="manager"] { --r: #8a76ff; } .k-dabei__knopf[data-rolle="manager"] { --r: var(--manager-haupt); }
.k-dabei__gruppe[data-rolle="scout"], .k-dabei__gruppe[data-rolle="scout"],
.k-dabei__knopf[data-rolle="scout"] { --r: #5fc99a; } .k-dabei__knopf[data-rolle="scout"] { --r: var(--scout-haupt); }
.k-dabei__gruppe[data-rolle="creator"], .k-dabei__gruppe[data-rolle="creator"],
.k-dabei__knopf[data-rolle="creator"] { --r: #3fbdf5; } .k-dabei__knopf[data-rolle="creator"] { --r: var(--creator-haupt); }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.k-dabei__knopf, .k-dabei__haken { transition: none; } .k-dabei__knopf, .k-dabei__haken { transition: none; }
+62 -25
View File
@@ -23,9 +23,21 @@
padding: 1px 9px; border-radius: 999px; padding: 1px 9px; border-radius: 999px;
font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
} }
.marke-rolle[data-rolle="admin"] { background: rgba(63, 189, 245, .16); color: #7fd2fb; } /* Alle FUENF Rollen, aus den zentralen Farben (08.09.2026).
.marke-rolle[data-rolle="creator"] { background: rgba(138, 118, 255, .16); color: #b3a6ff; }
.marke-rolle[data-rolle="scout"] { background: rgba(77, 171, 119, .16); color: #79d1a2; } Vorher standen hier nur drei -- Spicy und Manager fehlten ganz und
liefen ohne Marke, also farblos, durch die Liste. Ausserdem trug
`creator` das Lila des Managers: Zwei verschiedene Rollen sahen in
derselben Liste gleich aus.
`color-mix` statt fester rgba-Werte, damit Flaeche und Schrift
automatisch aus derselben Rollenfarbe kommen -- wer die Farbe oben
aendert, muss hier nichts nachziehen. */
.marke-rolle[data-rolle="spicy"] { background: color-mix(in srgb, var(--spicy-haupt) 16%, transparent); color: var(--spicy-haupt); }
.marke-rolle[data-rolle="admin"] { background: color-mix(in srgb, var(--dogi-haupt) 16%, transparent); color: var(--dogi-haupt); }
.marke-rolle[data-rolle="manager"] { background: color-mix(in srgb, var(--manager-haupt) 16%, transparent); color: var(--manager-haupt); }
.marke-rolle[data-rolle="scout"] { background: color-mix(in srgb, var(--scout-haupt) 16%, transparent); color: var(--scout-haupt); }
.marke-rolle[data-rolle="creator"] { background: color-mix(in srgb, var(--creator-haupt) 16%, transparent); color: var(--creator-haupt); }
.person__knoepfe { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; } .person__knoepfe { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
@@ -192,10 +204,10 @@
} }
/* Eine Farbe je Rolle -- dieselbe Sprache wie überall sonst. */ /* Eine Farbe je Rolle -- dieselbe Sprache wie überall sonst. */
.rollenwahl__knopf[data-rolle="admin"] { --r: #e8c07d; } .rollenwahl__knopf[data-rolle="admin"] { --r: var(--dogi-haupt); }
.rollenwahl__knopf[data-rolle="manager"] { --r: #8a76ff; } .rollenwahl__knopf[data-rolle="manager"] { --r: var(--manager-haupt); }
.rollenwahl__knopf[data-rolle="scout"] { --r: #5fc99a; } .rollenwahl__knopf[data-rolle="scout"] { --r: var(--scout-haupt); }
.rollenwahl__knopf[data-rolle="creator"] { --r: #3fbdf5; } .rollenwahl__knopf[data-rolle="creator"] { --r: var(--creator-haupt); }
.rollenwahl__knopf[data-an="ja"] { .rollenwahl__knopf[data-an="ja"] {
color: #fff; color: #fff;
@@ -225,31 +237,56 @@
AUGEN hell gefuellt, damit ein Gesicht auch ein Gesicht ist. AUGEN hell gefuellt, damit ein Gesicht auch ein Gesicht ist.
`--r` ist die Farbe der Rolle und kommt aus der Liste darueber. */ `--r` ist die Farbe der Rolle und kommt aus der Liste darueber. */
/* NACHTRAG 08.09.2026: DIE ZEICHEN TRAGEN IHRE FARBEN JETZT SELBST.
Die Regeln darunter faerbten jedes Zeichen in der Farbe SEINER ROLLE
ein -- eine Farbe pro Zeichen. Filipe will es zweifarbig: "peperoni:
rot und grün", "husky: silber und blaue augen", "scout: grünes schild
mit einer roten peperoni drin". Das ist mit einer einzigen `--r`
nicht darstellbar, egal wie man mischt.
Die Zeichen bringen ihre Verlaeufe deshalb selbst mit (siehe das
<defs>-Sprite in personen.html). Hier bleibt nur noch, was VON AUSSEN
kommen muss: Groesse und der Schlagschatten, der sie von der Flaeche
abhebt.
`fill: none; stroke: var(--r)` MUSSTE WEG, und das ist der Kern:
Beides wird an die Pfade VERERBT. Ein Pfad, der nur ein `fill`-Attribut
traegt, haette den Rollen-Strich in 1,55 px geerbt -- jedes Zeichen
waere von einem dicken farbigen Rand ueberzogen worden. Jetzt steht
hier `stroke: none`, und jeder Pfad, der eine Linie haben will, sagt
das selbst. */
.rollenwahl__symbol { .rollenwahl__symbol {
width: 24px; height: 24px; flex: none; margin-top: 1px; width: 24px; height: 24px; flex: none; margin-top: 1px;
fill: none; stroke: var(--r); stroke-width: 1.55; fill: none; stroke: none;
stroke-linecap: round; stroke-linejoin: round; stroke-linecap: round; stroke-linejoin: round;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
} }
.rollenwahl__symbol .fuell {
stroke: none; /* DAS FUNKELN DES MANAGER-STERNS.
fill: color-mix(in srgb, var(--r) 58%, transparent);
Ein heller Streifen wandert einmal quer ueber den Stern. Bewusst
langsam (4,5 s) und mit langer Pause: Ein schnelles Blinken waere
genau die aggressive Optik, die hier nicht sein soll -- und in einer
Liste mit fuenf Rollen zoege ein zappelndes Zeichen den Blick
dauerhaft von allem anderen ab.
Gemacht ueber eine wandernde Maske, nicht ueber die Deckkraft: Ein
Auf- und Abblenden des ganzen Sterns waere ein Pulsieren, kein
Glitzern. Glanz ist etwas, das sich BEWEGT. */
.rs-funkel {
-webkit-mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat;
mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat;
animation: rs-glitzer 4.5s cubic-bezier(.5, 0, .5, 1) infinite;
} }
.rollenwahl__symbol .linie { stroke: color-mix(in srgb, var(--r) 92%, #ffffff); } @keyframes rs-glitzer {
.rollenwahl__symbol .auge { 0%, 62% { -webkit-mask-position: 145% 0; mask-position: 145% 0; }
stroke: none; 100% { -webkit-mask-position: -45% 0; mask-position: -45% 0; }
fill: color-mix(in srgb, var(--r) 30%, #ffffff);
} }
/* Der Haken im Schutzschild ist die AUSSAGE des Zeichens -- er bleibt /* Hausregel: Wer weniger Bewegung eingestellt hat, bekommt keine.
hell und duenn, damit er auf der gefuellten Flaeche steht statt in Uebrig bleibt ein ruhiger goldener Stern -- nicht ein unsichtbarer. */
ihr zu verschwinden. */ @media (prefers-reduced-motion: reduce) {
.rollenwahl__symbol .hell { .rs-funkel { animation: none; -webkit-mask: none; mask: none; opacity: .25; }
stroke: color-mix(in srgb, var(--r) 18%, #ffffff);
stroke-width: 1.9;
}
.rollenwahl__symbol .nase {
stroke: none;
fill: color-mix(in srgb, var(--r) 45%, #06090f);
} }
/* Beim gewaehlten Knopf leuchtet die Flaeche etwas staerker -- das ist /* Beim gewaehlten Knopf leuchtet die Flaeche etwas staerker -- das ist
der einzige Unterschied, den es braucht: mehr Licht auf demselben der einzige Unterschied, den es braucht: mehr Licht auf demselben
+12 -12
View File
@@ -1713,10 +1713,10 @@ body.start > main { position: relative; z-index: 1; }
border: 1px solid color-mix(in srgb, var(--rollen-ton) 38%, transparent); border: 1px solid color-mix(in srgb, var(--rollen-ton) 38%, transparent);
} }
/* Eine Farbe je Rolle -- dieselbe Sprache wie in der Personenliste. */ /* Eine Farbe je Rolle -- dieselbe Sprache wie in der Personenliste. */
.wer[data-rolle="admin"] { --rollen-ton: #e8c07d; } .wer[data-rolle="admin"] { --rollen-ton: var(--dogi-haupt); }
.wer[data-rolle="manager"] { --rollen-ton: #9085e9; } .wer[data-rolle="manager"] { --rollen-ton: var(--manager-haupt); }
.wer[data-rolle="scout"] { --rollen-ton: #4fc38f; } .wer[data-rolle="scout"] { --rollen-ton: var(--scout-haupt); }
.wer[data-rolle="creator"] { --rollen-ton: #3fbdf5; } .wer[data-rolle="creator"] { --rollen-ton: var(--creator-haupt); }
/* Auf dem Handy faellt die Rollen-Marke weg und der Name darf schrumpfen. /* Auf dem Handy faellt die Rollen-Marke weg und der Name darf schrumpfen.
Ohne das schob die neue Kennung die Kopfleiste um 8 px aus dem Bild -- Ohne das schob die neue Kennung die Kopfleiste um 8 px aus dem Bild --
@@ -1851,10 +1851,10 @@ body.start > main { position: relative; z-index: 1; }
/* Dieselben vier Rollentöne wie im Kopf der Seite und auf der /* Dieselben vier Rollentöne wie im Kopf der Seite und auf der
Zugangsseite -- eine Rolle hat überall dieselbe Farbe. */ Zugangsseite -- eine Rolle hat überall dieselbe Farbe. */
.willkommen__plakette[data-rolle="admin"] { --rolle-ton: #d8a13a; } .willkommen__plakette[data-rolle="admin"] { --rolle-ton: var(--dogi-haupt); }
.willkommen__plakette[data-rolle="manager"] { --rolle-ton: #8a76ff; } .willkommen__plakette[data-rolle="manager"] { --rolle-ton: var(--manager-haupt); }
.willkommen__plakette[data-rolle="scout"] { --rolle-ton: #12a69b; } .willkommen__plakette[data-rolle="scout"] { --rolle-ton: var(--scout-haupt); }
.willkommen__plakette[data-rolle="creator"] { --rolle-ton: #3fbdf5; } .willkommen__plakette[data-rolle="creator"] { --rolle-ton: var(--creator-haupt); }
/* Die Lage in einem Satz, abgesetzt hinter der Rolle. Auf dem Handy /* Die Lage in einem Satz, abgesetzt hinter der Rolle. Auf dem Handy
rutscht sie in die zweite Zeile, statt den Text zu quetschen. */ rutscht sie in die zweite Zeile, statt den Text zu quetschen. */
@@ -2852,10 +2852,10 @@ body.start #protokoll {
/* Dieselben vier Rollentöne wie in der Begrüßung, im Seitenkopf und auf /* Dieselben vier Rollentöne wie in der Begrüßung, im Seitenkopf und auf
der Zugangsseite. Eine Rolle hat überall dieselbe Farbe -- sonst muss der Zugangsseite. Eine Rolle hat überall dieselbe Farbe -- sonst muss
man jede Ansicht neu lernen. */ man jede Ansicht neu lernen. */
.team-karte[data-rolle="admin"] { --k-ton: #d8a13a; } .team-karte[data-rolle="admin"] { --k-ton: var(--dogi-haupt); }
.team-karte[data-rolle="manager"] { --k-ton: #8a76ff; } .team-karte[data-rolle="manager"] { --k-ton: var(--manager-haupt); }
.team-karte[data-rolle="scout"] { --k-ton: #12a69b; } .team-karte[data-rolle="scout"] { --k-ton: var(--scout-haupt); }
.team-karte[data-rolle="creator"] { --k-ton: #3fbdf5; } .team-karte[data-rolle="creator"] { --k-ton: var(--creator-haupt); }
/* Die eigene Karte: ein Rand in der eigenen Rollenfarbe. Ohne das sucht /* Die eigene Karte: ein Rand in der eigenen Rollenfarbe. Ohne das sucht
man sich zwischen zwanzig Gesichtern selbst. */ man sich zwischen zwanzig Gesichtern selbst. */
.team-karte[data-ich="ja"] { .team-karte[data-ich="ja"] {
+13
View File
@@ -25,6 +25,19 @@
ziel.textContent = ''; ziel.textContent = '';
ziel.dataset.rolle = ich.rolle || ''; ziel.dataset.rolle = ich.rolle || '';
/* DIE ROLLE AUCH ANS <html> (08.09.2026).
Damit gilt die Farbe der angemeldeten Rolle fuer die GANZE Seite
und nicht nur fuer dieses eine Zeichen -- die Umschaltung steht in
gate.css bei `html[data-rolle=...]`.
Warum am <html> und nicht am <body>: Das <html> steht schon, bevor
irgendetwas geladen ist. Und warum ueberhaupt an einem so weit
oben liegenden Element: Wer die Farbe an jedem einzelnen Baustein
umschaltet, vergisst den naechsten, der dazukommt. Hier erbt alles
mit, auch was es heute noch gar nicht gibt. */
if (ich.rolle) document.documentElement.dataset.rolle = ich.rolle;
/* Das eigene Bild, wenn es eines gibt -- sonst der Anfangsbuchstabe. /* Das eigene Bild, wenn es eines gibt -- sonst der Anfangsbuchstabe.
Der Buchstabe bleibt als Unterlage LIEGEN und wird nicht ersetzt: Der Buchstabe bleibt als Unterlage LIEGEN und wird nicht ersetzt:
Laedt das Bild nicht (Verbindung weg, Datei geloescht), steht dort Laedt das Bild nicht (Verbindung weg, Datei geloescht), steht dort
+145 -27
View File
@@ -37,36 +37,154 @@
</div> </div>
</header> </header>
<svg style="display:none" aria-hidden="true"><defs> <!-- ====================================================================
<!-- Chili fuer Spicy Media -- dasselbe Zeichen wie auf der DIE FÜNF ROLLENZEICHEN, plastisch (08.09.2026)
Anmeldeseite. Zwei Rollen mit derselben Krone waeren genau der
Fehler, den die Kacheln schon einmal hatten: Man klickt zweimal
falsch, bevor man merkt, dass es zwei verschiedene sind. -->
<g id="r-chili"><path class="fuell" d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/><path class="linie" d="M13.4 4.6c1.5-.6 2.8.1 3 1.4"/><path class="linie" d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/></g>
<!-- DER HUSKY FUER DOGFATHER (07.09.2026). Filipe: "die krone bei
dogfather durch einen husky ersetzen, wie mein logo."
Bei 22 Pixeln entscheidet die SILHOUETTE, nicht das Detail. Ein Filipe: "die symbole sollen auch noch viel viel viel realistischer
Husky erkennt man an dreierlei, und mehr passt auch nicht hinein: und geiler sein", mit genauen Vorgaben je Rolle:
den spitzen, aufrecht stehenden Ohren, dem breiten Kopf, der peperoni rot und grün
nach unten schmal zulaeuft, und der Gesichtsmaske. Fell, Zunge husky silber und blaue Augen
oder ein zweiter Ton wuerden bei dieser Groesse zu Matsch -- manager gelber Stern, der glitzert
genau deshalb hat die Krone davor auch funktioniert. scout grünes Schild mit einer roten Peperoni darin
creator lila und silber, "was richtig geiles"
`fuell` traegt die Flaeche, `linie` die Zeichnung darauf; beides WAS SICH GRUNDSÄTZLICH ÄNDERT: Vorher trug jedes Zeichen genau EINE
getrennt, damit die Farbe im CSS unabhaengig vom Umriss gesetzt Farbe (`currentColor` über `.fuell`/`.linie`). Damit lässt sich
werden kann. --> "rot UND grün" nicht darstellen. Jedes Zeichen bekommt deshalb
<g id="r-husky"> eigene Verläufe — dieselbe Technik, mit der auch die Kacheln
<path class="fuell" d="M6.3 4.2 9.6 8.9h4.8l3.3-4.7 1.1 6.2c.5 2.6-.4 5.1-2.4 6.8L12 21.2l-4.4-4c-2-1.7-2.9-4.2-2.4-6.8z"/> plastisch wirken: ein heller Rand oben, die Sättigung in der Mitte,
<path class="linie" d="M6.3 4.2 9.6 8.9h4.8l3.3-4.7 1.1 6.2c.5 2.6-.4 5.1-2.4 6.8L12 21.2l-4.4-4c-2-1.7-2.9-4.2-2.4-6.8z"/> Abdunklung unten. Das ergibt Volumen statt einer flachen Fläche.
<path class="linie" d="M9.6 8.9c-.9 1.4-1.4 2.6-1.5 4.1M14.4 8.9c.9 1.4 1.4 2.6 1.5 4.1"/>
<circle class="auge" cx="9.5" cy="13.1" r="1.05"/> WARUM VERLÄUFE UND KEIN DETAIL: Diese Zeichen stehen bei 22 px.
<circle class="auge" cx="14.5" cy="13.1" r="1.05"/> Mehr Linien werden dort zu Matsch — das stand schon beim Husky hier,
<path class="nase" d="M12 15.4l1.5 1.1-1.5 1.4-1.5-1.4z"/> und es gilt weiter. "Realistischer" heißt bei dieser Größe also
nicht "mehr Striche", sondern LICHT: eine Form, auf die Licht fällt,
wirkt körperlich; dieselbe Form flach gefüllt wirkt wie ein
Aufkleber. Alle Verläufe laufen deshalb von oben nach unten, als
stünde das Licht über der Seite — so wie bei allem anderen hier auch.
Die Verlaufs-IDs sind mit `rs-` vorangestellt (RollenSymbol), damit
sie mit nichts kollidieren, was später dazukommt.
==================================================================== -->
<!-- NICHT `display:none` VERSTECKEN -- das war ein echter Fehler, und man
sieht ihn erst im Bild (08.09.2026).
Solange die Zeichen einfarbig waren (`currentColor` ueber CSS), war
`display:none` harmlos. Sobald sie ihre Farbe aus einem <linearGradient>
im selben <defs> holen, ist es das nicht mehr: Ein Verlauf in einem
Teilbaum, der `display:none` traegt, wird nicht ausgewertet, und ein
`<use>` darauf bekommt schlicht KEINE Fuellung. Im Bildschirmfoto
standen daraufhin fuenf Bruchstuecke -- nur die Strichlinien, keine
Flaechen. Die Zahlen sagten dazu nichts, das Sprite war ja da.
Richtig ist ein Kasten ohne Groesse: Er wird gerendert (Verlaeufe
werden also aufgeloest), nimmt aber keinen Platz ein. -->
<svg width="0" height="0" style="position:absolute;overflow:hidden" aria-hidden="true"><defs>
<linearGradient id="rs-chili-rot" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ff8a6b"/>
<stop offset=".55" stop-color="#ef4136"/>
<stop offset="1" stop-color="#a8221c"/>
</linearGradient>
<linearGradient id="rs-chili-gruen" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#8fd66a"/>
<stop offset="1" stop-color="#3f7d33"/>
</linearGradient>
<linearGradient id="rs-silber" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset=".42" stop-color="#cfd8e3"/>
<stop offset=".72" stop-color="#93a1b3"/>
<stop offset="1" stop-color="#5d6b7d"/>
</linearGradient>
<linearGradient id="rs-gold" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff3b0"/>
<stop offset=".45" stop-color="#ffd24a"/>
<stop offset="1" stop-color="#c88a12"/>
</linearGradient>
<linearGradient id="rs-schild" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#7fe0ae"/>
<stop offset=".5" stop-color="#3faa78"/>
<stop offset="1" stop-color="#1c5e42"/>
</linearGradient>
<linearGradient id="rs-lila" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#d9c9ff"/>
<stop offset=".38" stop-color="#a78bfa"/>
<stop offset="1" stop-color="#5b3fa8"/>
</linearGradient>
<linearGradient id="rs-lila-silber" x1="0" y1="1" x2="1" y2="0">
<stop offset="0" stop-color="#6d4fc4"/>
<stop offset=".5" stop-color="#cbd5e1"/>
<stop offset="1" stop-color="#a78bfa"/>
</linearGradient>
<radialGradient id="rs-auge" cx=".38" cy=".32" r=".85">
<stop offset="0" stop-color="#bfe9ff"/>
<stop offset=".45" stop-color="#3fa9f5"/>
<stop offset="1" stop-color="#0f4c75"/>
</radialGradient>
<!-- SPICY MEDIA — die Peperoni, rot mit grünem Stiel.
Der Stiel liegt ÜBER der Frucht und ist eine eigene Form: Als
Teil desselben Pfades hätte er die Farbe der Frucht erben müssen,
und genau das wollte Filipe nicht. -->
<g id="r-chili">
<path fill="url(#rs-chili-rot)" d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/>
<path fill="none" stroke="rgba(255,255,255,.5)" stroke-width=".9" stroke-linecap="round" d="M6.2 13.9c2.4 1.9 5 2.6 7.4 2"/>
<path fill="none" stroke="url(#rs-chili-gruen)" stroke-width="1.9" stroke-linecap="round" d="M13.4 4.6c1.5-.6 2.8.1 3 1.4"/>
<path fill="none" stroke="url(#rs-chili-gruen)" stroke-width="1.7" stroke-linecap="round" d="M13.4 4.6c-.5 1.2-.3 2.3.5 3.2"/>
</g>
<!-- DOGFATHER — der Husky in Silber, mit blauen Augen.
Silhouette unverändert (sie war richtig): spitze Ohren, breiter
Kopf, schmal zulaufend. Neu ist das Licht darauf und die Augen,
die jetzt aus einem eigenen Radialverlauf kommen — ein blauer
Punkt allein sähe aus wie ein Loch, mit Lichtpunkt wirkt er nass. -->
<g id="r-husky">
<path fill="url(#rs-silber)" d="M6.3 4.2 9.6 8.9h4.8l3.3-4.7 1.1 6.2c.5 2.6-.4 5.1-2.4 6.8L12 21.2l-4.4-4c-2-1.7-2.9-4.2-2.4-6.8z"/>
<path fill="rgba(255,255,255,.34)" d="M6.3 4.2 9.6 8.9h2.4V4.9z"/>
<path fill="none" stroke="rgba(40,58,78,.55)" stroke-width=".85" stroke-linecap="round" d="M9.6 8.9c-.9 1.4-1.4 2.6-1.5 4.1M14.4 8.9c.9 1.4 1.4 2.6 1.5 4.1"/>
<circle fill="url(#rs-auge)" cx="9.5" cy="13.1" r="1.15"/>
<circle fill="url(#rs-auge)" cx="14.5" cy="13.1" r="1.15"/>
<circle fill="#fff" opacity=".9" cx="9.15" cy="12.75" r=".33"/>
<circle fill="#fff" opacity=".9" cx="14.15" cy="12.75" r=".33"/>
<path fill="#2b3746" d="M12 15.4l1.5 1.1-1.5 1.4-1.5-1.4z"/>
</g>
<!-- MANAGER — der goldene Stern, der glitzert.
Das Funkeln ist ein schmaler heller Streifen, der einmal quer
über den Stern wandert. Es ist BEWUSST langsam (4,5 s) und
schwach: Ein schnelles Blinken wäre genau die aggressive Optik,
die hier nicht sein soll. Bei "weniger Bewegung" steht es still
(siehe personen.css) -- dann bleibt ein ruhiger goldener Stern. -->
<g id="r-stern">
<path fill="url(#rs-gold)" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/>
<path fill="rgba(255,255,255,.45)" d="m12 3.4 2.6 5.6-2.6.7z"/>
<path class="rs-funkel" fill="rgba(255,255,255,.75)" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/>
</g>
<!-- SCOUT — grünes Schild mit einer roten Peperoni darin.
Der Haken von früher ist weg: Filipe hat die Peperoni ausdrücklich
verlangt, und beides nebeneinander wäre bei 22 px Matsch. Die
Chili ist stark vereinfacht — bei dieser Größe zählt nur, dass
eine rote, gebogene Form mit grünem Stiel im Schild steht. -->
<g id="r-schutz">
<path fill="url(#rs-schild)" d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/>
<path fill="rgba(255,255,255,.28)" d="M12 3.4 5.8 5.9v5c0 1.4.4 2.7 1.1 3.9L12 3.4z"/>
<path fill="url(#rs-chili-rot)" d="M13.6 8.1c-.4.9-.2 1.7.4 2.2 1.9.2 3.2 1.7 3.2 3.4 0 2.1-1.9 3.8-4.3 3.8-2.9 0-5.2-1.8-6.1-4.2 2.3.6 4.2-.3 5-2 .4-.8.3-1.5-.2-2z" transform="translate(-.6 -.9) scale(.92) translate(1 1)"/>
<path fill="none" stroke="#8fd66a" stroke-width="1.3" stroke-linecap="round" d="M12.9 7.6c.9-.4 1.7 0 1.8.8"/>
</g>
<!-- CREATOR — Lila und Silber.
Statt der alten Person-Silhouette (die aussah wie ein leeres
Benutzerbild und damit wie "niemand") jetzt ein geschliffener
Kristall: lila Kern, silberne Facetten. Er hat als einziges der
fünf Zeichen eine Innenzeichnung, und die trägt auch klein --
weil es gerade Kanten sind, keine Rundungen. -->
<g id="r-person">
<path fill="url(#rs-lila)" d="M12 2.6 20 9l-3 11.4H7L4 9z"/>
<path fill="url(#rs-lila-silber)" opacity=".85" d="M12 2.6 20 9h-5.6zM12 2.6 4 9h5.6z"/>
<path fill="rgba(255,255,255,.4)" d="M12 2.6 14.4 9H9.6z"/>
<path fill="none" stroke="rgba(216,222,233,.75)" stroke-width=".8" stroke-linejoin="round" d="M12 2.6 20 9l-3 11.4H7L4 9zM4 9h16M9.6 9 12 20.4 14.4 9"/>
</g> </g>
<g id="r-stern"><path class="fuell" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/><path class="linie" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/></g>
<g id="r-schutz"><path class="fuell" d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/><path class="linie" d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/><path class="linie hell" d="m9.5 11.8 1.8 1.8 3.3-3.5"/></g>
<g id="r-person"><circle class="fuell" cx="12" cy="8.4" r="3.6"/><path class="fuell" d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7z"/><circle class="linie" cx="12" cy="8.4" r="3.6"/><path class="linie" d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/></g>
</defs></svg> </defs></svg>
<main class="inhalt inhalt--breit"> <main class="inhalt inhalt--breit">