Begruessung, Schriftzug, hellerer Hintergrund - und "Wissen" fuer Creator

Vier Wuensche auf einmal, alle auf der Startseite und der Kopfleiste.

BEGRUESSUNG. Dort stand "Angemeldet" ueber dem Namen -- eine Zeile, die
nichts hinzufuegt, weil oben rechts ohnehin Name und Rolle stehen. Jetzt
beantwortet der Kopf die drei Fragen, die man beim Reinkommen hat:
WANN (Wochentag, Datum, Kalenderwoche nach ISO 8601, selbst gerechnet),
WER (Plakette mit dem Anfangsbuchstaben in der Farbe der Rolle -- der
einzige runde Koerper der Seite, dadurch sofort als Person lesbar) und
WIE es steht (ein Satz aus denselben Hinweisen, die darunter stehen --
keine zweite Zaehlung). An Tagen mit Charakter kommt ein Wort dazu:
Neue Woche, Endspurt, Wochenende. Der Gruss ist feiner gestuft und der
Name eigenstaendig ausgezeichnet: das Grusswort leise, der Name kraeftig.

SCHRIFTZUG oben links. Vorher alles gleich laut, der Trenner ein
Satzzeichen wie jedes andere. Jetzt hat er Rang: der Name vorn und
kraeftig, der Ort dahinter und leiser, dazwischen eine kleine Raute in
der Hausfarbe. Aufgeteilt zentral in kopf.js statt in sechzehn HTML-
Dateien, und nur die Textknoten -- Verweise bleiben unberuehrt.

HINTERGRUND heller, wie gewuenscht: Der Schleier liegt bei .86/.58/.44
statt .95/.72/.60, dazu zwei sehr weiche Farbschimmer, die dem Bild das
reine Schwarz nehmen. Der Kontrast wurde danach an echten Bildpunkten
nachgemessen und haelt ueberall (schlechtester Wert 4,78:1).

"WISSEN" statt "Team & System" -- aber nur fuer Creator. Von der Gruppe
bleibt fuer ihn genau eine Kachel uebrig; eine Ueberschrift, die Team
und System verspricht und nur die Bibliothek zeigt, verspricht etwas
Falsches.

DREI FUNDE DURCH DIE PRUEFUNGEN:

1. Die Kontrastmessung war kaputt, seit Text neben Text steht. Sie tastete
   stur 4 px rechts vom Text ab -- und traf dort den NACHBARTEXT statt den
   Untergrund (1,10:1 gemeldet, ohne dass etwas schlecht lesbar war). Jetzt
   werden sechs Stellen rings um den Text angeboten und jede zuerst
   gefragt, ob dort wirklich Untergrund liegt. Strenger, nicht lockerer.
   Texte ohne freie Stelle werden GEZAEHLT und ausgegeben, nicht still
   uebersprungen.
2. bereich.html hatte als einzige Seite kein span.marke__text. Damit
   griffen dort weder die Ueberlauf-Kuerzung noch der neue Rang. Stand seit
   Monaten so, aufgefallen erst, als die Seitenpruefung die Marke auf allen
   dreizehn Seiten nachgesehen hat.
3. Die Datumspruefung haette im Maerz stillschweigend versagt: \w kennt
   ohne Unicode-Schalter kein "ae". Ein Fehler, der sieben Monate wartet.

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

workspace/assets/css/start.css

@@ -60,12 +60,24 @@ body.start::before {
    den Inhalt, an den Rändern offen, damit die beiden sichtbar bleiben.
    Gemessen statt geschätzt: server/pruef-buehne.mjs rechnet den Kontrast
    an echten Bildpunkten nach, an bis zu 34 Stellen je Seite. */
+/* Der Schleier ist am 01.09.2026 spürbar durchlässiger geworden (Wunsch:
+   "den Hintergrund auch bisschen heller überall"). Er liegt jetzt bei
+   .86/.58/.44/.66 statt .95/.72/.60/.80 -- die Bühne kommt dadurch
+   deutlich durch, ohne dass sie den Text stört, weil die Inhalte auf
+   eigenen, kräftigeren Flächen liegen (siehe --glas in gate.css).
+
+   Ein zweiter, sehr weicher Farbschimmer in Blau-Violett legt sich
+   darüber. Er nimmt dem Bild das reine Schwarz und gibt der Seite
+   dieselbe Tiefe wie VanVans Hub -- ohne eine einzige Farbe zu
+   verfälschen, weil er nur 4-6 % beiträgt. */
 body.start > .schleier {
   position: fixed; inset: 0; z-index: 0; pointer-events: none;
   background:
-    linear-gradient(180deg, rgba(5, 7, 13, .95) 0%, rgba(5, 7, 13, .72) 13%,
-                            rgba(5, 7, 13, .6) 48%, rgba(5, 7, 13, .8) 100%),
-    radial-gradient(56% 68% at 50% 46%, rgba(5, 7, 13, .8), transparent 84%);
+    linear-gradient(180deg, rgba(5, 7, 13, .86) 0%, rgba(5, 7, 13, .58) 13%,
+                            rgba(5, 7, 13, .44) 48%, rgba(5, 7, 13, .66) 100%),
+    radial-gradient(70% 55% at 18% 8%, rgba(63, 189, 245, .06), transparent 70%),
+    radial-gradient(70% 60% at 88% 96%, rgba(138, 118, 255, .07), transparent 72%),
+    radial-gradient(56% 68% at 50% 46%, rgba(5, 7, 13, .66), transparent 84%);
 }
 
 /* Alles Bedienbare liegt über der Bühne. Ohne das läge der Inhalt zwar
@@ -83,8 +95,10 @@ body.start > main { position: relative; z-index: 1; }
   }
   body.start > .schleier {
     background:
-      linear-gradient(180deg, rgba(5, 7, 13, .97) 0%, rgba(5, 7, 13, .85) 15%,
-                              rgba(5, 7, 13, .82) 60%, rgba(5, 7, 13, .92) 100%);
+      linear-gradient(180deg, rgba(5, 7, 13, .92) 0%, rgba(5, 7, 13, .74) 15%,
+                              rgba(5, 7, 13, .7) 60%, rgba(5, 7, 13, .84) 100%),
+      radial-gradient(90% 40% at 20% 4%, rgba(63, 189, 245, .05), transparent 70%),
+      radial-gradient(90% 40% at 85% 98%, rgba(138, 118, 255, .06), transparent 72%);
   }
 }
 
@@ -819,6 +833,68 @@ body.start > main { position: relative; z-index: 1; }
   color: #a8dbfb;
   text-shadow: 0 0 14px rgba(63, 189, 245, .28);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  display: flex; align-items: center; gap: 9px;
+}
+
+/* Der Rang im Schriftzug (aufgeteilt von kopf.js).
+
+   Vorher war alles gleich laut. Jetzt trägt der vordere Teil den Namen
+   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. */
+.kopfleiste .marke__haupt {
+  color: #dcecfb;
+  font-weight: 700;
+  text-shadow: 0 0 16px rgba(63, 189, 245, .34);
+}
+.kopfleiste .marke__leise {
+  color: #86b4d6;
+  font-weight: 500;
+  text-shadow: none;
+}
+.kopfleiste a.marke__haupt { text-decoration: none; }
+.kopfleiste a.marke__haupt:hover { color: #fff; }
+
+/* Der Trenner ist kein Satzzeichen mehr, sondern eine kleine, auf die
+   Spitze gestellte Raute in der Hausfarbe -- dieselbe Form wie die
+   Ecken der Bühne. Ein Punkt zwischen zwei Wörtern liest sich wie ein
+   Tippfehler; eine Raute liest sich als Gestaltung. */
+.kopfleiste .marke__raute {
+  flex: none;
+  width: 5px; height: 5px;
+  transform: rotate(45deg);
+  border-radius: 1px;
+  background: var(--akzent);
+  box-shadow: 0 0 9px rgba(63, 189, 245, .65);
+  opacity: .85;
+}
+
+/* Das Zeichen davor bekommt einen eigenen Träger: runder Rahmen, ein
+   Hauch Fläche, weicher Schein. Aus einer aufgeklebten Form wird damit
+   ein Wappen. */
+.kopfleiste .marke::before {
+  padding: 0;
+  filter: drop-shadow(0 0 7px rgba(63, 189, 245, .45));
+}
+.kopfleiste .marke {
+  padding: 4px 12px 4px 4px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  transition: border-color var(--tempo), background var(--tempo);
+}
+.kopfleiste .marke:hover {
+  border-color: color-mix(in srgb, var(--akzent) 26%, transparent);
+  background: rgba(255, 255, 255, .035);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kopfleiste .marke { transition: none; }
+}
+/* Im Kontrastmodus gibt es keine Farbverläufe und keine Schatten -- dort
+   muss der Rang über die Schriftstärke allein tragen. */
+@media (forced-colors: active) {
+  .kopfleiste .marke__raute { background: CanvasText; }
+  .kopfleiste .marke__haupt, .kopfleiste .marke__leise { color: CanvasText; }
 }
 
 /* ---------- Wer angemeldet ist ------------------------------------------
@@ -921,6 +997,74 @@ body.start > main { position: relative; z-index: 1; }
 }
 .willkommen .unterzeile { margin-bottom: 0; }
 
+/* Datumszeile: Tag, Datum und Kalenderwoche. Die Ziffern in gleicher
+   Zeichenbreite, damit die Zeile über die Tage hinweg ruhig bleibt. */
+.willkommen__datum { font-variant-numeric: tabular-nums; }
+
+/* Das kleine Wort zum Tag ("Neue Woche", "Endspurt", "Wochenende").
+   Steht nur an Tagen, die wirklich einen Charakter haben -- ein Wort,
+   das jeden Tag dasteht, liest nach drei Tagen niemand mehr. */
+.willkommen__marker {
+  margin-left: 10px; padding: 3px 9px;
+  border: 1px solid color-mix(in srgb, var(--akzent) 32%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--akzent) 12%, transparent);
+  color: var(--akzent);
+  font-size: .68rem; letter-spacing: .1em;
+}
+.willkommen__marker[hidden] { display: none; }
+
+/* Der Gruß in zwei Stimmen: das Grußwort leiser, der Name kräftig.
+   Man liest den eigenen Namen, nicht die Höflichkeitsfloskel. */
+.gruss__wort { color: #c3d2e4; font-weight: 600; }
+.gruss__name { color: #f2f7fd; }
+
+/* Plakette und Text nebeneinander. Die Plakette ist der einzige runde
+   Körper auf der Seite -- dadurch ist sofort klar, dass sie zu einer
+   PERSON gehört und nicht zu einem Bereich. */
+.willkommen__reihe { display: flex; align-items: center; gap: 18px; }
+.willkommen__text { min-width: 0; }
+
+.willkommen__plakette {
+  --rolle-ton: var(--akzent);
+  flex: none;
+  display: grid; place-items: center;
+  width: 58px; height: 58px; border-radius: 50%;
+  font-size: 1.6rem; font-weight: 700; line-height: 1;
+  color: #f2f7fd;
+  border: 1px solid color-mix(in srgb, var(--rolle-ton) 42%, transparent);
+  background:
+    radial-gradient(120% 120% at 30% 20%,
+      color-mix(in srgb, var(--rolle-ton) 34%, transparent), transparent 70%),
+    rgba(255, 255, 255, .045);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .1),
+    0 10px 26px -12px color-mix(in srgb, var(--rolle-ton) 60%, transparent);
+}
+/* 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="manager"] { --rolle-ton: #8a76ff; }
+.willkommen__plakette[data-rolle="scout"]   { --rolle-ton: #12a69b; }
+.willkommen__plakette[data-rolle="creator"] { --rolle-ton: #3fbdf5; }
+
+/* Die Lage in einem Satz, abgesetzt hinter der Rolle. Auf dem Handy
+   rutscht sie in die zweite Zeile, statt den Text zu quetschen. */
+.willkommen .unterzeile { display: flex; flex-wrap: wrap; gap: 6px 12px; }
+.willkommen__lage { position: relative; padding-left: 14px; color: var(--text-leise); }
+.willkommen__lage::before {
+  content: ""; position: absolute; left: 0; top: 50%;
+  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
+  background: currentColor; opacity: .55;
+}
+.willkommen__lage[data-stufe="warnung"] { color: var(--warn); }
+.willkommen__lage[hidden] { display: none; }
+
+@media (max-width: 560px) {
+  .willkommen__plakette { width: 46px; height: 46px; font-size: 1.25rem; }
+  .willkommen__reihe { gap: 13px; }
+}
+
 /* Die Trennlinie unter der Begrüßung. Läuft nach rechts aus, statt hart
    abzubrechen -- eine durchgezogene Linie zerschneidet die Seite. */
 .willkommen {