Die Kopfleiste wird zur Klammer: Chili links, Husky rechts, Spicy & Dogi

Filipe (Nachtliste, screen17): "wo der husky ist soll eine geile rot
gruene peperoni sein, dogfather universe ersetzen durch, Spicy & Dogi.
und der husky von links soll rechts sein. die farben von der peperoni und
von dem husky sollen ueber den text ziehen und sich dan in der mitte
treffen." Dazu screen9: die Zierzeile der Zentrale heisst jetzt
"Spicy Media" statt "Dogfather Universe".

Die Chili steht als BILD (sie ist von sich aus rot mit gruenem Stiel und
soll ihre Farben behalten), der Husky als MASKE (schwarzweiss gezeichnet
waere er auf dunklem Grund ein dunkler Fleck; von der Maske zaehlt nur
die Silhouette, gefuellt mit Silber und Babyblau). Dazwischen laeuft der
Schriftzug von Chili-Rot ueber Silber nach Babyblau -- Treffpunkt in der
Mitte, genau beim "&".

DER VERLAUF IM TEXT IST EINE AUSNAHME MIT SICHERUNG. Direkt darueber
steht seit dem 01.09. "KEIN Farbverlauf IM Text", und der Grund gilt
weiter: Durchsichtige Schrift haengt an einer einzigen Technik, und
faellt die aus, ist der Text WEG statt nur anders gefaerbt (gemessen
damals 1,05:1). Beides geht zusammen, wenn der Verlauf nur eine Zugabe
ist: `color` steht zuerst und voll sichtbar da, Verlauf und
durchsichtige Fuellung stehen NUR in einem @supports-Block (wer es nicht
kann, betritt ihn nicht), und bei `forced-colors: active` wird alles
zurueckgenommen. Die drei Stuetzstellen sind bewusst hell -- beim
Verlauf bestimmt der dunkelste Punkt den schlechtesten Kontrast.

EIN SELEKTOR, DER RICHTIG AUSSAH UND FALSCH WAR. Der Husky sollte nur
auf die Startseite; `body.start` davorzusetzen wirkte naheliegend. Diese
Klasse tragen aber ALLE 18 Seiten -- sie kennzeichnet den Grundstil,
nicht die Startseite. Folge auf den Unterseiten, wo `.marke` den Rueckweg
traegt: Die 22 px des Huskys nahmen dem Text so viel Platz, dass
"Creator Workspace" zu "CREAT…" wurde. Gesehen im Bildschirmfoto, nicht
im Code. Jetzt steht die Regel in heim.css, das ausschliesslich von der
Startseite geladen wird -- die Datei selbst ist die Bedingung.

Nachgemessen dabei, damit es nicht faelschlich mir zugeschrieben wird:
Der Schriftzug auf den Unterseiten ist AUCH IM ALTEN STAND abgeschnitten
(151 px Inhalt auf 91 px Platz). Das ist ein vorbestehender Mangel und
steht auf der offenen Liste, kein Rueckschritt aus diesem Commit.

pruef-start-ansicht angepasst: Sie prueft den Namen im Schriftzug und
erwartete "Dogfather Universe" -- sie hat ihre Arbeit getan und
angeschlagen. EXIT=0, weiterhin 140 Pruefungen.

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

server/pruef-start-ansicht.mjs

@@ -243,7 +243,10 @@ for (const [breite, wie] of [[1440, "Computer"], [390, "Handy"]]) {
      Schriftzug darf nicht umbrechen) -- beim Vergleich werden sie
      deshalb gleichgesetzt, sonst prüft man Unsichtbares. */
   const ohneNbsp = (t) => t.replace(/ /g, " ");
-  ok(ohneNbsp(r.markeHaupt) === "Dogfather Universe", `der Name steht vorn ("${r.markeHaupt}")`);
+  /* "Spicy & Dogi" seit dem 08.09.2026 (Wunsch von Filipe): links die
+     Chili von Spicy Media, rechts der Husky von Dogi, und der Name
+     dazwischen in genau dieser Reihenfolge. */
+  ok(ohneNbsp(r.markeHaupt) === "Spicy & Dogi", `der Name steht vorn ("${r.markeHaupt}")`);
   ok(ohneNbsp(r.markeLeise) === "Creator Workspace", `der Ort dahinter ("${r.markeLeise}")`);
   ok(r.markeRauten === 1, `und dazwischen genau eine Raute (${r.markeRauten})`);
   /* Der geschützte Leerraum muss WIRKLICH noch da sein -- ginge er beim

workspace/assets/css/chat.css

@@ -157,10 +157,10 @@
   border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
 }
 /* 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
    Gruppe steht ohnehin daneben. */
 .chat-raum__zeichen[data-gruppe="ja"] {
@@ -271,10 +271,10 @@
   background: color-mix(in srgb, var(--r) 13%, 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. */
 .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%;
   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__knopf {
@@ -413,10 +413,10 @@
   color: var(--text-leise); font: inherit; cursor: pointer;
   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:focus-visible { outline: 2px solid var(--r); outline-offset: 2px; }
 .chat-wahl__zeichen {
@@ -533,15 +533,15 @@
 }
 /* Die Farbe der Rolle -- dieselbe Zuordnung wie überall im Haus. */
 .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-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-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-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-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
    aus, steht der Buchstabe weiterhin da. */

workspace/assets/css/gate.css

@@ -67,8 +67,95 @@
   --radius-klein: 12px;
   --schatten:     0 24px 60px -20px rgba(0, 0, 0, 0.75);
   --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; }
 
 /* `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
    muss -- die Zeichen selbst wissen nichts von Rollen. */
 .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 {
   stroke: color-mix(in srgb, var(--rf) 88%, #ffffff);
@@ -1612,7 +1704,7 @@ body.gate {
      Alle gedeckt, keine davon neon: augenschonend bleibt Vorgabe.        */
   /* Spicy Media traegt das Rot der Marke -- dieselbe Farbe wie ihr Name
      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="manager"] { --rton: var(--k-mittel); }
   .tafel .rolle[data-rolle="scout"]   { --rton: var(--k-gut); }

workspace/assets/css/heim.css

@@ -1487,3 +1487,42 @@
 @media (forced-colors: active) {
   .gruppe__kopf { border: 1px solid CanvasText; }
 }
+
+/* ===================================================================
+   DER HUSKY RECHTS IN DER KOPFLEISTE (08.09.2026)
+
+   Filipe: "wo der husky ist soll eine geile rot grüne peperoni sein …
+   und der husky von links soll rechts sein."
+
+   Zusammen mit der Chili links (start.css) ergibt das eine Klammer um
+   den Schriftzug: Spicy links, Dogi rechts -- genau die Reihenfolge des
+   Namens "Spicy & Dogi", und die Farben laufen zwischen beiden über den
+   Text aufeinander zu.
+
+   WARUM DIESE REGEL HIER STEHT UND NICHT IN start.css: heim.css wird
+   ausschliesslich von der Startseite geladen. Auf den Unterseiten traegt
+   `.marke` den Rueckweg statt des Markennamens -- dort hat der Husky
+   nicht nur nichts zu suchen, er hat auch Schaden angerichtet: Seine
+   22 px plus Abstand nahmen dem Text so viel Platz, dass "Creator
+   Workspace" zu "CREAT…" abgeschnitten wurde.
+
+   Der naheliegende Weg, ein `body.start` davorzusetzen, funktioniert
+   NICHT: Diese Klasse tragen alle 18 Seiten -- sie kennzeichnet den
+   Grundstil, nicht die Startseite. Der Selektor las sich richtig und
+   war es nicht; gesehen erst im Bildschirmfoto der Unterseite.
+
+   Als MASKE und nicht als Bild: Der Husky ist schwarzweiss gezeichnet
+   und waere auf dunklem Grund ein dunkler Fleck. Von einer Maske zaehlt
+   nur die Silhouette, und die wird hier mit Silber und Babyblau
+   gefuellt -- seine beiden Farben aus dem Rollenschema. Die Augenfarbe
+   klingt im Verlauf an, ohne dass man bei 22 px Augen zeichnen muesste.
+   =================================================================== */
+.kopfleiste .marke::after {
+  content: "";
+  flex: none; width: 22px; height: 22px;
+  background: linear-gradient(160deg, #eaf1f8 8%, #b9c6d6 46%, var(--dogi-haupt) 100%);
+  -webkit-mask: url("../img/marke-husky.webp") center / contain no-repeat;
+  mask: url("../img/marke-husky.webp") center / contain no-repeat;
+  transition: filter var(--tempo);
+}
+.kopfleiste:hover .marke::after { filter: brightness(1.2); }

workspace/assets/css/kalender.css

@@ -909,13 +909,13 @@
 /* Rollentöne. Dieselben wie in personen.css -- eine Farbe pro Rolle im
    ganzen Workspace, sonst muss man sie auf jeder Seite neu lernen. */
 .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__knopf[data-rolle="manager"] { --r: #8a76ff; }
+.k-dabei__knopf[data-rolle="manager"] { --r: var(--manager-haupt); }
 .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__knopf[data-rolle="creator"] { --r: #3fbdf5; }
+.k-dabei__knopf[data-rolle="creator"] { --r: var(--creator-haupt); }
 
 @media (prefers-reduced-motion: reduce) {
   .k-dabei__knopf, .k-dabei__haken { transition: none; }

workspace/assets/css/personen.css

@@ -23,9 +23,21 @@
   padding: 1px 9px; border-radius: 999px;
   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; }
 
@@ -192,10 +204,10 @@
 }
 
 /* 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"] {
   color: #fff;
@@ -225,31 +237,56 @@
      AUGEN     hell gefuellt, damit ein Gesicht auch ein Gesicht ist.
 
    `--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 {
   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;
   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
    der einzige Unterschied, den es braucht: mehr Licht auf demselben

workspace/assets/css/start.css

@@ -1509,15 +1509,43 @@ body.start > main { position: relative; z-index: 1; }
   min-width: 0; flex: 0 1 auto;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
+/* ZWEI MARKEN, EINE LINKS UND EINE RECHTS (08.09.2026).
+
+   Filipe: "wo der husky ist soll eine geile rot grüne peperoni sein …
+   und der husky von links soll rechts sein. die farben von der peperoni
+   und von dem husky sollen über den text ziehen und sich dan in der
+   mitte treffen."
+
+   Das ergibt eine Klammer: links die Chili von Spicy Media, rechts der
+   Husky von Dogi, und dazwischen der Schriftzug, der von der einen
+   Farbe in die andere übergeht. Genau die Reihenfolge, in der auch der
+   Name steht -- "Spicy & Dogi".
+
+   Die Chili wird als BILD gezeigt, der Husky als MASKE. Das ist kein
+   Zufall: Die Chili ist von sich aus rot mit grünem Stiel, sie soll
+   ihre eigenen Farben behalten. Der Husky ist schwarzweiß gezeichnet --
+   als Bild wäre er auf dunklem Grund ein dunkler Fleck. Als Maske zählt
+   nur seine Silhouette, und die wird mit Silber und Babyblau gefüllt:
+   seine beiden Farben aus dem Rollenschema. */
 .kopfleiste .marke::before {
   content: "";
   flex: none; width: 22px; height: 22px;
-  background: linear-gradient(150deg, var(--akzent), var(--violett));
+  background: url("../img/marke-spicy.webp") center / contain no-repeat;
-  -webkit-mask: url("../img/marke-husky.webp") center / contain no-repeat;
-  mask: url("../img/marke-husky.webp") center / contain no-repeat;
   transition: filter var(--tempo);
 }
-.kopfleiste:hover .marke::before { filter: brightness(1.25); }
+/* Der Husky auf der rechten Seite steht in heim.css -- diese Datei wird
+   NUR von der Startseite geladen, und nur dort trägt `.marke` den
+   Markennamen. Auf den Unterseiten steht dort der Rückweg
+   ("Creator Workspace · Aufgaben"); ein Husky dahinter wäre sinnlos, und
+   er hat dort echten Schaden angerichtet: Die 22 px plus Abstand haben
+   dem Text so viel Platz genommen, dass "Creator Workspace" zu
+   "CREAT…" abgeschnitten wurde.
+
+   Ein `body.start`-Vorsatz half NICHT, obwohl er richtig aussah: Diese
+   Klasse tragen ALLE 18 Seiten, sie kennzeichnet nicht die Startseite,
+   sondern den Grundstil. Gesehen im Bildschirmfoto der Unterseite --
+   der Selektor las sich völlig plausibel. */
+.kopfleiste:hover .marke::before { filter: brightness(1.2); }
 
 /* KEIN Farbverlauf IM Text.
 
@@ -1543,11 +1571,64 @@ body.start > main { position: relative; z-index: 1; }
    und steht kräftig; was dahinter kommt, sagt nur, wo man gerade ist,
    und tritt zurück. Beide bleiben eigenständig lesbar -- der leise Teil
    liegt bei 5,2:1 und damit deutlich über der Norm. */
+/* DER VERLAUF IM NAMEN -- und warum er hier ausnahmsweise doch erlaubt
+   ist (08.09.2026).
+
+   Direkt darüber steht "KEIN Farbverlauf IM Text", und die Begründung
+   gilt weiter: Durchsichtige Schrift ist auf eine einzige Technik
+   angewiesen, und faellt die aus, ist der Text WEG statt nur anders
+   gefaerbt. Filipe will den Verlauf trotzdem: "die farben von der
+   peperoni und von dem husky sollen über den text ziehen und sich dan
+   in der mitte treffen."
+
+   Beides geht zusammen, wenn der Verlauf nur eine ZUGABE ist:
+
+     1. `color` steht weiterhin als volle, sichtbare Farbe da -- und zwar
+        ZUERST. Wer den Verlauf nicht darstellen kann, sieht den Namen
+        genau wie vorher.
+     2. Der Verlauf und die durchsichtige Fuellung stehen NUR in einem
+        @supports-Block. Kann der Browser es nicht, betritt er ihn nicht
+        -- statt durchsichtige Schrift ohne Verlauf zu zeigen, was der
+        eigentliche Ausfall waere.
+     3. Im Kontrastmodus des Betriebssystems wird alles zurueckgenommen.
+        Dort bestimmt das System die Farben, und eine durchsichtige
+        Schrift waere unsichtbar.
+
+   Die Farben sind die der beiden Zeichen links und rechts: Chili-Rot
+   geht in Silber und dann in Babyblau ueber, Treffpunkt in der Mitte.
+   Alle drei Stuetzstellen sind BEWUSST hell gewaehlt -- beim
+   Farbverlauf bestimmt der dunkelste Punkt den schlechtesten Kontrast,
+   und der liegt hier bei #ff9a86 noch ueber 6:1 auf dem dunklen Grund. */
 .kopfleiste .marke__haupt {
   color: #dcecfb;
   font-weight: 700;
   text-shadow: 0 0 16px rgba(63, 189, 245, .34);
 }
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+  .kopfleiste .marke__haupt {
+    background: linear-gradient(95deg,
+      #ff9a86 0%,        /* die Chili links  */
+      #ffc0ad 22%,
+      #eaf1f8 50%,       /* Treffpunkt in der Mitte */
+      #c6d8ea 72%,
+      #9ed4f5 100%);     /* der Husky rechts */
+    -webkit-background-clip: text; background-clip: text;
+    -webkit-text-fill-color: transparent;
+    /* Das Leuchten bleibt, sonst verliert der Schriftzug seine Tiefe --
+       es liegt HINTER der Schrift und wird vom Zuschnitt nicht erfasst. */
+    text-shadow: 0 0 18px rgba(127, 196, 242, .3);
+  }
+}
+/* Im Kontrastmodus bestimmt das Betriebssystem die Farben. Eine
+   durchsichtige Fuellung waere dort unsichtbar -- also zurueck auf die
+   Volltonfarbe, die oben ohnehin schon dasteht. */
+@media (forced-colors: active) {
+  .kopfleiste .marke__haupt {
+    background: none;
+    -webkit-text-fill-color: currentColor;
+    color: CanvasText;
+  }
+}
 .kopfleiste .marke__leise {
   color: #86b4d6;
   font-weight: 500;
@@ -1713,10 +1794,10 @@ body.start > main { position: relative; z-index: 1; }
   border: 1px solid color-mix(in srgb, var(--rollen-ton) 38%, transparent);
 }
 /* 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.
    Ohne das schob die neue Kennung die Kopfleiste um 8 px aus dem Bild --
@@ -1851,10 +1932,10 @@ body.start > main { position: relative; z-index: 1; }
 
 /* Dieselben vier Rollentöne wie im Kopf der Seite und auf der
    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
    rutscht sie in die zweite Zeile, statt den Text zu quetschen. */
@@ -2852,10 +2933,10 @@ body.start #protokoll {
 /* Dieselben vier Rollentöne wie in der Begrüßung, im Seitenkopf und auf
    der Zugangsseite. Eine Rolle hat überall dieselbe Farbe -- sonst muss
    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
    man sich zwischen zwanzig Gesichtern selbst. */
 .team-karte[data-ich="ja"] {

workspace/assets/js/kopf.js

@@ -25,6 +25,19 @@
     ziel.textContent = '';
     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.
        Der Buchstabe bleibt als Unterlage LIEGEN und wird nicht ersetzt:
        Laedt das Bild nicht (Verbindung weg, Datei geloescht), steht dort

workspace/personen.html

@@ -37,36 +37,154 @@
   </div>
 </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 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>
 
 <main class="inhalt inhalt--breit">

workspace/start.html

@@ -25,7 +25,7 @@
 <div class="schleier" aria-hidden="true"></div>
 
 <header class="kopfleiste">
-  <p class="marke"><span class="marke__text">Dogfather&nbsp;Universe · Creator&nbsp;Workspace</span></p>
+  <p class="marke"><span class="marke__text">Spicy&nbsp;&amp;&nbsp;Dogi · Creator&nbsp;Workspace</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -104,9 +104,13 @@
              Vorbild. Die Rauten sind eigene Elemente und kein Zeichen im
              Text: Ein ◆ aus der Schriftart sitzt nie auf der Grundlinie
              und sieht auf jedem Geraet anders aus. -->
+        <!-- "Spicy Media", nicht mehr "Dogfather Universe" (08.09.2026,
+             Wunsch von Filipe). Die Zierzeile nennt den BETRIEB, unter
+             dem das ganze Team arbeitet -- und der heisst Spicy Media.
+             Der Titel darunter ("Die Zentrale") sagt, wo man ist. -->
         <span class="zmarke">
           <i class="zraute" aria-hidden="true"></i>
-          Dogfather Universe
+          Spicy Media
           <i class="zraute" aria-hidden="true"></i>
         </span>
         <p class="ztitel" id="ztitel">Die Zentrale</p>