Buehne aus den echten Marken-Bildern, Kopfleiste und Begruessung neu

Filipe hatte recht, und zwar zweifach: Der Husky war der FALSCHE (ein
fremder Neon-Husky aus dem alten Bilderordner statt DogFather), und zwei
in die Ecken geklebte Bilder ergeben noch kein Bild.

DIE BUEHNE, zweiter Anlauf. Aus den zehn geschickten Bildern das Studio
gewaehlt, in dem HasiDog und DogFather stehen -- nicht aus Geschmack,
sondern wegen der ANORDNUNG: Die beiden stehen weit aussen, die Mitte ist
dunkel. Genau dort steht der Inhalt. Bei den Bildern mit den Figuren in
der Mitte waeren sie hinter dem Text gelandet.

Ueber die ganze Flaeche, fest an der Scheibe, 138 % breit: Bei 100 %
staenden die beiden bei 20 % und 78 % der Breite -- mitten unter der
Textspalte. Vergroessert man das Bild ueber die Scheibe hinaus, wandern
sie nach aussen (rund 9 % und 88 %) und der leere Hallenboden liegt dort,
wo gelesen wird. Ein Bild groesser zu machen, damit WENIGER davon im Weg
ist, klingt verkehrt und ist genau richtig.

Fuer schmale Schirme ein eigener Hochkant-Ausschnitt derselben Szene --
ein auf 9:16 gequetschtes Breitbild zeigt nur noch Wand.
1,9 MB PNG -> 28 KB WebP.

DIE VIER STELLEN aus den Bildschirmfotos:

* Kopfleiste: der DogFather-Kopf davor. Als MASKE aus dem Logo gerechnet
  (Dunkelheit wird Deckkraft), nicht als Bild -- so laesst er sich im
  Stil einfaerben; ein fertig eingefaerbtes Bild muesste man fuer jede
  Farbe neu bauen. 114 KB -> 3 KB.

* "Dogfather · DogFather" war der peinlichste Punkt: Name und Rolle lasen
  sich gleich, es sah nach einem Fehler aus. Jetzt drei unterscheidbare
  Dinge -- Zeichen mit dem Anfangsbuchstaben, Name, Rolle als Marke in
  ihrer Farbe. Gebaut in kopf.js, EINMAL statt vierzehnmal: Jede
  Seitendatei setzte diese Zeile bisher selbst zusammen.

* Begruessung: leuchtender Strich, groesserer Gruss, auslaufende
  Trennlinie. Dieselben Striche vor "WAS IST DRAN" und "DEINE AUFGABEN" --
  so gehoert sichtbar zusammen, was zusammengehoert.

ZWEI EIGENE FEHLER, die die Pruefungen gefunden haben:

1. Ich hatte Verlaeufe IM TEXT gebaut (background-clip mit durchsichtiger
   Schrift). Sah gut aus, und der Kontrasttest meldete 1,05:1 -- zu Recht.
   Durchsichtige Schrift haengt an einer einzigen Technik; faellt sie aus
   (Kontrastmodus, Druck, aeltere Browser), ist der Text UNSICHTBAR statt
   nur anders gefaerbt. Das ist kein Schoenheitsfehler, das ist ein
   Ausfall. Jetzt feste Farbe mit einem Hauch Leuchten.

2. Auf dem Handy stand der Abmelden-Knopf 9 px aus dem Bild. Die Suche
   nach der Ursache ging zuerst in die Irre -- der Test nannte das
   Wasserzeichen, das aber von seiner Kachel sauber abgeschnitten wird
   und nur seine Masse meldet. Gemessen war es die Marke: 209 px + 139 px
   rechte Gruppe passten nicht in 390 px. Auf dem Handy bleibt jetzt nur
   der Kopf stehen; der Markenzug steht zwei Zeilen tiefer ohnehin als
   Ueberschrift. Fuer Vorleseprogramme bleibt er im Dokument.

Und einmal habe ich mir beim Ersetzen eines CSS-Blocks das halbe
Stylesheet geloescht (die Kachel-Regeln lagen zwischen den beiden
Suchmarken). Aufgefallen sofort am Bildschirmfoto, zurueckgeholt aus Git,
danach zeilengenau ersetzt.

118 Pruefungen, alle gruen. Der Kontrast wird weiterhin an echten
Bildpunkten gemessen, jetzt an bis zu 35 Stellen je Seite.

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

server/pruef-buehne.mjs

@@ -82,14 +82,12 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
     await seite.waitForTimeout(800);
 
     const da = await seite.evaluate(() => ({
-      husky: /buehne-husky/.test(getComputedStyle(document.body, "::before").backgroundImage),
-      hasi: /buehne-hasi/.test(getComputedStyle(document.body, "::after").backgroundImage),
+      buehne: /buehne-(breit|schmal)/.test(getComputedStyle(document.body, "::before").backgroundImage),
       schleier: !!document.querySelector(".schleier"),
       durchlaessig: getComputedStyle(document.querySelector(".schleier") || document.body).pointerEvents,
     }));
     if (s === "start.html") {
-      ok(da.husky, "Casper liegt im Hintergrund");
-      ok(da.hasi, "HasiDog liegt im Hintergrund");
+      ok(da.buehne, "die Bühne liegt im Hintergrund");
     }
     ok(da.schleier && da.durchlaessig === "none",
        `${s}: Schleier da und durchlässig für Klicks (${da.durchlaessig})`);

tools/buehne-bauen.mjs

@@ -1,25 +1,32 @@
 /* ===================================================================
-   Baut die beiden Hintergrundbilder für den Workspace.
+   Baut den Hintergrund des Workspace aus den Marken-Bildern.
 
-   Filipe: "der hintergrund soll genau so krass und speziell sein,
-   benutz den hasen und husky."
+   ZWEITER ANLAUF (01.09.2026). Der erste war schlecht, und Filipe hatte
+   recht: Ich hatte einen fremden Neon-Husky aus dem alten Bilderordner
+   genommen -- nicht DogFather. Ausserdem klebten zwei Bilder in den
+   Ecken, ohne dass daraus ein Bild geworden waere.
 
-   Warum die Bilder AUFBEREITET werden, statt sie einfach einzubinden:
+   Jetzt richtig, aus den echten Marken-Bildern:
 
-   1. Ein Foto hinter einem Arbeitswerkzeug macht Text unlesbar. Die
-      Bilder werden deshalb stark abgedunkelt und leicht entsättigt --
-      sie sollen eine Stimmung sein, kein Motiv.
+   1. Eine BUEHNE ueber die ganze Flaeche: das Studio, in dem HasiDog
+      und DogFather stehen. Warum genau dieses von den fuenf: Die beiden
+      stehen weit aussen, die MITTE ist dunkel -- und dort steht der
+      Inhalt. Ein Bild mit Figuren in der Mitte waere hinter dem Text
+      gelandet.
 
-   2. Sie bekommen einen weichen Rand. Ein hartes Rechteck sieht nach
-      aufgeklebtem Bild aus; ein auslaufender Rand sieht nach Bühne aus.
-      Der Verlauf wird HIER eingerechnet und nicht im Browser: Eine
-      Maske über ein 900-Pixel-Bild kostet bei jedem Bildaufbau Rechenzeit.
+   2. Die beiden Figuren zusaetzlich freigestellt in den unteren Ecken,
+      aus den Einzelbildern. Sie stehen VOR der Buehne und sind das,
+      was man wiedererkennt.
 
-   3. Aus 290 KB PNG werden rund 40 KB WebP. Die Seite laedt auf jedem
-      Aufruf schneller, und das Bild liegt im Zwischenspeicher.
+   Behandlung in beiden Faellen:
+     * stark abgedunkelt -- eine Buehne, kein Poster
+     * Mitte zusaetzlich verdunkelt (Vignette), dort steht der Text
+     * weiche Raender eingerechnet statt als Maske im Browser: eine
+       Maske ueber ein grosses Bild kostet bei jedem Bildaufbau Zeit
+     * WebP statt PNG -- aus 1,9 MB werden rund 60 KB
 
-   Gerechnet wird mit dem Browser, der ohnehin fuer die Pruefungen da ist
-   -- kein zusaetzliches Bildprogramm, keine neue Abhaengigkeit, 0 EUR.
+   Gerechnet mit dem Browser, der ohnehin fuer die Pruefungen da ist.
+   Kein Bildprogramm, keine neue Abhaengigkeit, 0 EUR.
 
    Aufrufen mit:  node tools/buehne-bauen.mjs
    =================================================================== */
@@ -29,41 +36,79 @@ import { join, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
 const WURZEL = join(dirname(fileURLToPath(import.meta.url)), "..");
-const QUELLE = join(WURZEL, "assets", "img");
+const QUELLE = join(WURZEL, "assets", "img", "marke");
 const ZIEL = join(WURZEL, "workspace", "assets", "img");
 if (!existsSync(ZIEL)) mkdirSync(ZIEL, { recursive: true });
 
 const AUFTRAEGE = [
   {
-    /* Casper, der Husky. Neonblau auf Dunkel -- er passt farblich genau
-       zur Oberfläche, anders als die warmen Fotomontagen. Sitzt unten
-       links und schaut nach rechts in die Seite hinein. */
-    quelle: "hero-husky.png",
-    ziel: "buehne-husky.webp",
-    breite: 900, hoehe: 900,
+    /* Die Buehne fuer breite Schirme. Studio, beide Figuren aussen,
+       dunkle Mitte. */
+    quelle: "studio.png",
+    ziel: "buehne-breit.webp",
+    breite: 1800, hoehe: 1013,
     ausschnitt: [0, 0, 1, 1],
-    spiegeln: false,
-    /* Weich ausblenden nach rechts und nach oben -- dorthin, wo der
-       Inhalt steht. */
-    verlauf: [
-      { art: "linear", von: [0.55, 0], nach: [1, 0], stopps: [[0, 0], [1, 1]] },
-      { art: "linear", von: [0, 0], nach: [0, 0.55], stopps: [[0, 1], [1, 0]] },
-    ],
-    helligkeit: 0.62, saettigung: 1.0,
+    helligkeit: 0.42, saettigung: 0.95, kontrast: 1.02,
+    /* Die Vignette macht genau den Streifen dunkel, in dem der Inhalt
+       steht -- ohne sie waere Text ueber dem Logo unlesbar. */
+    vignette: { x: 0.5, y: 0.42, rx: 0.46, ry: 0.62, staerke: 0.72 },
+    /* Oben ausblenden: dort sitzt die Kopfleiste. */
+    verlauf: [{ von: [0, 0], nach: [0, 0.14], stopps: [[0, 0.55], [1, 0]] }],
+    guete: 0.72,
   },
   {
-    /* HasiDog. Das Ganzkoerperbild wird auf Kopf und Oberkoerper
-       beschnitten -- die Fuesse traegt am unteren Bildrand niemand. */
-    quelle: "char-hasidog.jpg",
-    ziel: "buehne-hasi.webp",
-    breite: 760, hoehe: 900,
-    ausschnitt: [0.02, 0.02, 0.96, 0.78],
-    spiegeln: true,
+    /* Fuer schmale Schirme ein hochkant-Ausschnitt aus derselben Szene --
+       ein auf 9:16 gequetschtes Breitbild zeigt nur noch Wand. */
+    quelle: "studio.png",
+    ziel: "buehne-schmal.webp",
+    breite: 800, hoehe: 1400,
+    ausschnitt: [0.17, 0, 0.66, 1],
+    helligkeit: 0.34, saettigung: 0.9, kontrast: 1.02,
+    vignette: { x: 0.5, y: 0.45, rx: 0.7, ry: 0.6, staerke: 0.78 },
+    verlauf: [{ von: [0, 0], nach: [0, 0.12], stopps: [[0, 0.55], [1, 0]] }],
+    guete: 0.68,
+  },
+  {
+    /* DogFather selbst -- der RICHTIGE Husky, im blauen Hoodie. Steht
+       unten rechts. */
+    quelle: "dogfather-husky.png",
+    ziel: "figur-dogfather.webp",
+    breite: 620, hoehe: 1120,
+    ausschnitt: [0.04, 0.06, 0.92, 0.92],
+    helligkeit: 0.72, saettigung: 1.0, kontrast: 1.03,
+    /* Nach unten und zur Seite offen lassen, oben und innen ausblenden --
+       so waechst er aus der Ecke heraus, statt als Ausschnitt zu kleben. */
     verlauf: [
-      { art: "linear", von: [0.45, 0], nach: [0, 0], stopps: [[0, 0], [1, 1]] },
-      { art: "linear", von: [0, 0], nach: [0, 0.5], stopps: [[0, 1], [1, 0]] },
+      { von: [0, 0], nach: [0, 0.3], stopps: [[0, 1], [1, 0]] },
+      { von: [0.55, 0], nach: [0, 0], stopps: [[0, 0], [1, 0.9]] },
     ],
-    helligkeit: 0.5, saettigung: 0.9,
+    guete: 0.78,
+  },
+  {
+    /* HasiDog. Unten links. */
+    quelle: "hasidog-hase.png",
+    ziel: "figur-hasidog.webp",
+    breite: 560, hoehe: 1120,
+    ausschnitt: [0.05, 0.05, 0.9, 0.93],
+    helligkeit: 0.66, saettigung: 0.95, kontrast: 1.03,
+    verlauf: [
+      { von: [0, 0], nach: [0, 0.3], stopps: [[0, 1], [1, 0]] },
+      { von: [0.45, 0], nach: [1, 0], stopps: [[0, 0], [1, 0.9]] },
+    ],
+    guete: 0.78,
+  },
+  {
+    /* Der Kopf aus dem DogFather-Logo -- als MASKE, nicht als Bild.
+       Die Vorlage liegt schwarz auf weiss; hier wird die Dunkelheit zur
+       Deckkraft. Ergebnis: eine Form, die sich im Stil beliebig
+       einfaerben laesst (mask-image + background). Ein fertig
+       eingefaerbtes Bild muesste man fuer jede Farbe neu bauen. */
+    quelle: "logo.png",
+    ziel: "marke-husky.webp",
+    breite: 96, hoehe: 96,
+    ausschnitt: [0.14, 0.03, 0.72, 0.68],
+    alsMaske: true,
+    guete: 0.9,
   },
 ];
 
@@ -75,8 +120,7 @@ await seite.setContent("<html><body></body></html>");
 
 for (const a of AUFTRAEGE) {
   const roh = readFileSync(join(QUELLE, a.quelle));
-  const art = a.quelle.endsWith(".png") ? "image/png" : "image/jpeg";
-  const daten = `data:${art};base64,${roh.toString("base64")}`;
+  const daten = `data:image/png;base64,${roh.toString("base64")}`;
 
   const webp = await seite.evaluate(async ({ daten, a }) => {
     const bild = new Image();
@@ -88,38 +132,68 @@ for (const a of AUFTRAEGE) {
     const g = c.getContext("2d");
 
     const [ax, ay, aw, ah] = a.ausschnitt;
-    g.filter = `brightness(${a.helligkeit}) saturate(${a.saettigung}) contrast(1.04)`;
-    if (a.spiegeln) { g.translate(a.breite, 0); g.scale(-1, 1); }
+
+    /* Als Maske: schwarz auf weiss wird zu Form auf durchsichtig. Fuer
+       jeden Bildpunkt wird die Helligkeit zur Durchsichtigkeit -- weiss
+       verschwindet, schwarz bleibt stehen. */
+    if (a.alsMaske) {
+      g.drawImage(bild,
+        bild.naturalWidth * ax, bild.naturalHeight * ay,
+        bild.naturalWidth * aw, bild.naturalHeight * ah,
+        0, 0, a.breite, a.hoehe);
+      const d2 = g.getImageData(0, 0, a.breite, a.hoehe);
+      for (let i = 0; i < d2.data.length; i += 4) {
+        const hell = (d2.data[i] * 0.299 + d2.data[i + 1] * 0.587 + d2.data[i + 2] * 0.114) / 255;
+        d2.data[i] = d2.data[i + 1] = d2.data[i + 2] = 255;
+        d2.data[i + 3] = Math.round((1 - hell) * 255);
+      }
+      g.putImageData(d2, 0, 0);
+      return c.toDataURL("image/webp", a.guete);
+    }
+
+    g.filter = `brightness(${a.helligkeit}) saturate(${a.saettigung}) contrast(${a.kontrast})`;
     g.drawImage(bild,
       bild.naturalWidth * ax, bild.naturalHeight * ay,
       bild.naturalWidth * aw, bild.naturalHeight * ah,
       0, 0, a.breite, a.hoehe);
-    g.setTransform(1, 0, 0, 1, 0, 0);
     g.filter = "none";
 
-    /* Die weichen Raender. destination-out radiert dort, wo der Verlauf
-       deckend ist -- so bleibt das Bild in der Ecke stehen und loest
-       sich zur Seite hin auf. */
+    /* Vignette: dunkler Fleck in der Mitte. Er wird DRAUFGEMALT (nicht
+       ausradiert), damit dort, wo der Text steht, wirklich Ruhe ist. */
+    if (a.vignette) {
+      const v = a.vignette;
+      g.save();
+      g.translate(v.x * a.breite, v.y * a.hoehe);
+      g.scale(v.rx * a.breite, v.ry * a.hoehe);
+      const gr = g.createRadialGradient(0, 0, 0, 0, 0, 1);
+      gr.addColorStop(0, `rgba(5,7,13,${v.staerke})`);
+      gr.addColorStop(0.62, `rgba(5,7,13,${v.staerke * 0.72})`);
+      gr.addColorStop(1, "rgba(5,7,13,0)");
+      g.fillStyle = gr;
+      g.fillRect(-1.6, -1.6, 3.2, 3.2);
+      g.restore();
+    }
+
+    /* Weiche Raender: destination-out radiert dort, wo der Verlauf
+       deckend ist. */
     g.globalCompositeOperation = "destination-out";
-    for (const v of a.verlauf) {
+    for (const v of (a.verlauf || [])) {
       const gr = g.createLinearGradient(
         v.von[0] * a.breite, v.von[1] * a.hoehe,
         v.nach[0] * a.breite, v.nach[1] * a.hoehe);
-      for (const [pos, deckung] of v.stopps) {
-        gr.addColorStop(pos, `rgba(0,0,0,${deckung})`);
-      }
+      for (const [pos, deckung] of v.stopps) gr.addColorStop(pos, `rgba(0,0,0,${deckung})`);
       g.fillStyle = gr;
       g.fillRect(0, 0, a.breite, a.hoehe);
     }
     g.globalCompositeOperation = "source-over";
 
-    return c.toDataURL("image/webp", 0.74);
+    return c.toDataURL("image/webp", a.guete);
   }, { daten, a });
 
   const puffer = Buffer.from(webp.split(",")[1], "base64");
   writeFileSync(join(ZIEL, a.ziel), puffer);
-  console.log(`${a.ziel.padEnd(20)} ${String(Math.round(roh.length / 1024)).padStart(4)} KB`
-    + ` -> ${String(Math.round(puffer.length / 1024)).padStart(3)} KB`);
+  console.log(`${a.ziel.padEnd(24)} ${String(Math.round(roh.length / 1024)).padStart(5)} KB`
+    + ` -> ${String(Math.round(puffer.length / 1024)).padStart(4)} KB`);
 }
 
 await browser.close();

workspace/assets/css/start.css

@@ -26,67 +26,46 @@ body.start {
 
 /* ---------- Die Bühne ----------------------------------------------------
 
-   Casper unten links, HasiDog unten rechts. Beide FEST an der Scheibe,
-   nicht am Inhalt: Sie scrollen nicht mit, sondern stehen da wie ein
+   HasiDog und DogFather im Studio -- das echte Marken-Bild, nicht
+   irgendein Husky aus dem alten Bilderordner. Über die ganze Fläche und
+   FEST an der Scheibe: Es scrollt nicht mit, sondern steht da wie ein
    Bühnenbild, vor dem gearbeitet wird.
 
-   Drei Regeln, damit daraus kein Poster wird, auf dem man nichts lesen
-   kann:
+   Warum genau dieses von den fünf: Die beiden stehen weit AUSSEN, die
+   Mitte ist dunkel -- und dort steht der Inhalt. Ein Bild mit Figuren in
+   der Mitte wäre hinter dem Text gelandet.
 
-   1. Sie sitzen in den unteren ECKEN und lassen die Mitte frei -- genau
-      dort steht der Inhalt.
-   2. Die weichen Ränder sind ins Bild eingerechnet (tools/buehne-bauen.mjs),
-      nicht als Maske im Browser. Ein hartes Rechteck sähe nach
-      aufgeklebtem Foto aus; und eine Maske über ein 900-Pixel-Bild
-      kostete bei jedem Bildaufbau Rechenzeit.
-   3. Darüber liegt ein dunkler Schleier. Er ist der Grund, warum der
-      Text unverändert lesbar bleibt -- gemessen, nicht geschätzt.
+   Aufbereitet in tools/buehne-bauen.mjs: abgedunkelt, Mitte zusätzlich
+   verdunkelt, weiche Kante oben. 1,9 MB PNG -> 28 KB WebP.
 
-   Warum überhaupt zwei Bilder statt eines großen: Ein Vollbild hinter
-   einem Arbeitswerkzeug ist immer im Weg. Zwei Ecken lassen den Blick
-   in Ruhe und sind trotzdem sofort da. */
+   138 % breit und nach unten ausgerichtet: Bei 100 % ständen die beiden
+   bei 20 % und 78 % der Breite -- also mitten unter der Textspalte.
+   Vergrößert man das Bild über die Scheibe hinaus, wandern sie nach
+   außen (auf rund 9 % und 88 %) und der leere Hallenboden liegt dort,
+   wo gelesen wird. Ein Bild größer zu machen, damit WENIGER davon im
+   Weg ist, klingt verkehrt und ist genau richtig. */
 
-body.start::before,
-body.start::after {
-  content: "";
-  position: fixed; bottom: 0; z-index: 0;
-  pointer-events: none;
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: bottom;
-}
-
-/* Casper. Links, blickt nach rechts in die Seite hinein. */
 body.start::before {
-  left: -3vw;
-  width: min(34vw, 480px); height: min(34vw, 480px);
-  background-image: url("../img/buehne-husky.webp");
-  background-position: left bottom;
-  opacity: .46;
+  content: "";
+  position: fixed; inset: 0; z-index: 0;
+  pointer-events: none;
+  background-image: url("../img/buehne-breit.webp");
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-size: 138% auto;
 }
 
-/* HasiDog. Rechts, gespiegelt, blickt zurück. Etwas schwächer -- er ist
-   heller als Casper und würde sonst mehr ziehen. */
-/* Weiter nach aussen und nach unten geschoben als Casper: HasiDog ist
-   heller, sein Gesicht zieht den Blick staerker -- direkt neben einer
-   Kachel wuerde man es ansehen statt der Kachel. So schaut er von unten
-   rechts herein, ohne sich dazwischenzustellen. */
-body.start::after {
-  right: -2vw;
-  width: min(24vw, 330px); height: min(36vw, 480px);
-  background-image: url("../img/buehne-hasi.webp");
-  background-position: right bottom;
-  opacity: .3;
-}
-
-/* Der Schleier. Liegt über den beiden und unter dem Inhalt -- er nimmt
-   ihnen genau so viel Kraft, dass Text darüber unverändert lesbar
-   bleibt. Nach unten dichter, weil die Bilder dort stehen. */
+/* Der Schleier. Er ist der Grund, warum Text über einem Foto unverändert
+   lesbar bleibt -- oben dicht für die Kopfleiste, in der Mitte dicht für
+   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. */
 body.start > .schleier {
   position: fixed; inset: 0; z-index: 0; pointer-events: none;
   background:
-    linear-gradient(180deg, transparent 0%, rgba(5, 7, 13, .55) 62%, rgba(5, 7, 13, .8) 100%),
-    radial-gradient(75% 55% at 50% 62%, rgba(5, 7, 13, .82), transparent 78%);
+    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%);
 }
 
 /* Alles Bedienbare liegt über der Bühne. Ohne das läge der Inhalt zwar
@@ -95,13 +74,20 @@ body.start > .kopfleiste,
 body.start > .inhalt,
 body.start > main { position: relative; z-index: 1; }
 
+/* Auf schmalen Schirmen ein hochkant-Ausschnitt derselben Szene -- ein
+   auf 9:16 gequetschtes Breitbild zeigt nur noch Wand. */
 @media (max-width: 760px) {
-  /* Auf dem Handy nimmt der Inhalt die ganze Breite ein -- dort wäre die
-     Bühne nur ein Schatten hinter dem Text. Bleibt, aber deutlich
-     zurückgenommen und kleiner. */
-  body.start::before { left: -8vw; width: 60vw; height: 60vw; opacity: .28; }
-  body.start::after  { right: -6vw; width: 42vw; height: 60vw; opacity: .2; }
+  body.start::before {
+    background-image: url("../img/buehne-schmal.webp");
+    background-size: cover;
   }
+  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%);
+  }
+}
+
 
 /* ---------- Kopfleiste ------------------------------------------------ */
 
@@ -687,3 +673,179 @@ body.start > main { position: relative; z-index: 1; }
   .dran__punkt, .dran__pfeil { transition: none; }
   .dran__link:hover .dran__pfeil { transform: none; }
 }
+
+/* =====================================================================
+   Kopfleiste, Begrüßung, Hinweise -- der Feinschliff vom 01.09.2026.
+
+   Vorher waren das vier Stellen mit reinem Systemtext: eine Marke in
+   Großbuchstaben, eine Überschrift, ein Name, eine Liste. Alles
+   funktionierte, nichts sagte etwas über den Ort, an dem man ist.
+   ===================================================================== */
+
+/* ---------- Die Marke oben links ----------------------------------------
+
+   Der DogFather-Kopf davor. Als MASKE, nicht als Bild: Die Form wird im
+   Stil eingefärbt (siehe tools/buehne-bauen.mjs). Ein fertig
+   eingefärbtes Bild müsste man für jede Farbe neu bauen -- und beim
+   Überfahren wechselt die Farbe. */
+.kopfleiste .marke {
+  display: flex; align-items: center; gap: 9px;
+  letter-spacing: .14em;
+  /* min-width: 0 muss auch INNEN gelten. Die Marke ist jetzt selbst eine
+     Flex-Zeile (Zeichen + Text); ohne diese Angabe behaelt ihr Text seine
+     volle Wunschbreite und die Marke schrumpft nicht mehr -- der
+     Abmelden-Knopf stand dadurch auf dem Handy 9 px aus dem Bild.
+     Derselbe Fehler wie im August, eine Ebene tiefer. */
+  min-width: 0;
+}
+.kopfleiste .marke__text { min-width: 0; flex: 1 1 auto; }
+.kopfleiste .marke::before {
+  content: "";
+  flex: none; width: 22px; height: 22px;
+  background: linear-gradient(150deg, var(--akzent), var(--violett));
+  -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); }
+
+/* KEIN Farbverlauf IM Text.
+
+   Ich hatte das zuerst gebaut (background-clip: text mit durchsichtiger
+   Schrift) -- es sah gut aus, und der eigene Kontrasttest schlug sofort
+   Alarm: 1,05:1. Zu Recht. Durchsichtige Schrift ist auf eine einzige
+   Technik angewiesen; faellt sie aus (Kontrastmodus des Betriebssystems,
+   Druck, aeltere Browser), ist der Text UNSICHTBAR statt nur anders
+   gefaerbt. Das ist kein Schoenheitsfehler, das ist ein Ausfall.
+
+   Stattdessen: feste Farbe, ein Hauch Leuchten. Sieht fast gleich aus
+   und kann nicht verschwinden. */
+.kopfleiste .marke__text {
+  color: #a8dbfb;
+  text-shadow: 0 0 14px rgba(63, 189, 245, .28);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+/* ---------- Wer angemeldet ist ------------------------------------------
+
+   Vorher stand da "Dogfather · DogFather" -- Name und Rolle lasen sich
+   gleich und es sah nach einem Fehler aus. Jetzt: ein Zeichen mit dem
+   Anfangsbuchstaben, der Name, und die Rolle als eigene Marke in ihrer
+   Farbe. Drei verschiedene Dinge sehen jetzt auch verschieden aus. */
+.wer {
+  display: flex; align-items: center; gap: 9px;
+  max-width: none; overflow: visible;
+}
+.wer__zeichen {
+  flex: none;
+  display: grid; place-items: center;
+  width: 28px; height: 28px; border-radius: 9px;
+  font-size: .8rem; font-weight: 700; color: #eaf3ff;
+  background: linear-gradient(150deg,
+    color-mix(in srgb, var(--rollen-ton) 62%, transparent),
+    color-mix(in srgb, var(--rollen-ton) 24%, transparent));
+  border: 1px solid color-mix(in srgb, var(--rollen-ton) 55%, transparent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
+}
+.wer__name {
+  font-size: .88rem; font-weight: 600; color: var(--text);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  min-width: 0;
+}
+.wer__rolle {
+  flex: none;
+  padding: 2px 9px; border-radius: 999px;
+  font-size: .66rem; font-weight: 700;
+  letter-spacing: .08em; text-transform: uppercase;
+  color: color-mix(in srgb, var(--rollen-ton) 75%, #ffffff);
+  background: color-mix(in srgb, var(--rollen-ton) 15%, transparent);
+  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="manager"] { --rollen-ton: #9085e9; }
+.wer[data-rolle="scout"]   { --rollen-ton: #4fc38f; }
+.wer[data-rolle="creator"] { --rollen-ton: #3fbdf5; }
+
+/* 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 --
+   gemessen, nicht vermutet: Der Pruefflauf zaehlt den waagerechten
+   Ueberstand auf jeder Seite mit.
+
+   Die Rolle wegzulassen kostet hier nichts: Wer angemeldet ist, weiss,
+   welche Rolle er hat -- und auf der Startseite steht sie zwei Zeilen
+   tiefer noch einmal ausgeschrieben. */
+@media (max-width: 620px) {
+  .wer__rolle { display: none; }
+  .wer { min-width: 0; gap: 7px; }
+  .wer__name { max-width: 34vw; }
+
+  /* Auf dem Handy bleibt vom Markenzug nur der Kopf stehen. Gemessen:
+     Marke 209 px + rechte Gruppe 139 px + Polsterung passten nicht in
+     390 px, der Abmelden-Knopf stand 9 px aus dem Bild. Schrumpfen
+     allein reichte nicht.
+
+     Der Text kostet hier nichts: Er steht auf jeder Seite zwei Zeilen
+     tiefer noch einmal als Ueberschrift. Der Kopf dagegen sagt in 22 px,
+     wo man ist -- und bleibt.
+
+     Vorlesende Programme verlieren nichts: Der Text bleibt im Dokument
+     und wird nur unsichtbar gerechnet. */
+  .kopfleiste .marke__text {
+    position: absolute; width: 1px; height: 1px;
+    margin: -1px; padding: 0; overflow: hidden;
+    clip-path: inset(50%); white-space: nowrap;
+  }
+  .kopfleiste .marke { flex: none; }
+}
+
+/* ---------- Die Begrüßung ------------------------------------------------
+
+   Aus drei gestapelten Zeilen wird ein Kopf: ein leuchtender Strich, die
+   Zeile "ANGEMELDET" daneben, darunter der Gruß mit einem sehr sanften
+   Verlauf. Kein zusätzliches Element -- der Strich ist ein
+   Pseudo-Element der Marke. */
+.willkommen .marke {
+  display: flex; align-items: center; gap: 10px;
+  margin-bottom: 10px;
+}
+.willkommen .marke::before {
+  content: "";
+  width: 26px; height: 2px; border-radius: 2px;
+  background: linear-gradient(90deg, var(--akzent), transparent);
+}
+.willkommen .titel {
+  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
+  letter-spacing: -.025em;
+  /* Auch hier bewusst eine feste Farbe statt eines Verlaufs im Text --
+     siehe die Begruendung bei .marke__text. Die Wirkung kommt aus
+     Groesse, engerem Satz und dem Leuchten, nicht aus einem Kniff, der
+     im Kontrastmodus zu unsichtbarer Schrift wird. */
+  color: #f2f7fd;
+  text-shadow: 0 2px 26px rgba(63, 189, 245, .18);
+}
+.willkommen .unterzeile { margin-bottom: 0; }
+
+/* Die Trennlinie unter der Begrüßung. Läuft nach rechts aus, statt hart
+   abzubrechen -- eine durchgezogene Linie zerschneidet die Seite. */
+.willkommen {
+  padding-bottom: 22px; margin-bottom: 30px;
+  border-bottom: 1px solid transparent;
+  border-image: linear-gradient(90deg, var(--rand-hell), transparent 62%) 1;
+}
+
+/* ---------- Abschnittsschilder ------------------------------------------
+   "WAS IST DRAN" und "DEINE AUFGABEN" bekommen denselben leuchtenden
+   Strich wie die Begrüßung -- so gehört sichtbar zusammen, was
+   zusammengehört. */
+.dran .feldschild,
+.zahlen-block .feldschild {
+  display: flex; align-items: center; gap: 9px;
+}
+.dran .feldschild::before,
+.zahlen-block .feldschild::before {
+  content: "";
+  width: 18px; height: 2px; border-radius: 2px;
+  background: linear-gradient(90deg, var(--akzent), transparent);
+  opacity: .8;
+}

workspace/assets/js/aufgaben.js

@@ -368,7 +368,7 @@ Das laesst sich nicht rueckgaengig machen. Erledigte Aufgaben sollten normalerwe
       ich = await antwort.json();
     } catch { return; }
 
-    $('wer').textContent = `${ich.name} · ${ich.rolle_name || ich.rolle}`;
+    window.werZeigen?.(ich);
 
     if (LEITUNG.has(ich.rolle)) {
       $('feld-creator').hidden = false;

workspace/assets/js/automation.js

@@ -343,7 +343,7 @@
       if (!a.ok) { location.assign('/workspace/'); return; }
       ich = await a.json();
     } catch { return; }
-    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
+    window.werZeigen?.(ich);
     await Promise.all([kiZustand(), zustand(), hinweise(), verlauf()]);
   })();
 })();

workspace/assets/js/bereich.js

@@ -219,7 +219,7 @@
       if (!a.ok) { location.assign('/workspace/'); return; }
       ich = await a.json();
     } catch { return; }
-    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
+    window.werZeigen?.(ich);
 
     let daten;
     try {

workspace/assets/js/calls.js

@@ -358,7 +358,7 @@
       if (!a.ok) { location.assign('/workspace/'); return; }
       ich = await a.json();
     } catch { return; }
-    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
+    window.werZeigen?.(ich);
     kiDa = await window.KI.verfuegbar();
     await laden();
   })();

workspace/assets/js/content.js

@@ -536,7 +536,7 @@
       if (!a.ok) { location.assign('/workspace/'); return; }
       ich = await a.json();
     } catch { return; }
-    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
+    window.werZeigen?.(ich);
 
     if (!darfEintragen()) {
       $('neu-oeffnen').hidden = true;

workspace/assets/js/dateien.js

@@ -337,7 +337,7 @@
       if (!a.ok) { location.assign('/workspace/'); return; }
       ich = await a.json();
     } catch { return; }
-    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
+    window.werZeigen?.(ich);
 
     /* Creator laden nichts hoch (Wunsch 28.08.2026). Das Ablegefeld
        verschwindet, stattdessen steht dort, warum -- ein einfach

workspace/assets/js/kalender.js

@@ -246,7 +246,7 @@
       if (!a.ok) { location.assign('/workspace/'); return; }
       ich = await a.json();
     } catch { return; }
-    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
+    window.werZeigen?.(ich);
 
     if (LEITUNG.has(ich.rolle)) {
       $('feld-teilnehmer').hidden = false;

workspace/assets/js/kopf.js

@@ -10,6 +10,40 @@
 
   const START = '/workspace/start.html';
 
+  /* ---------- Wer angemeldet ist -------------------------------------------
+
+     Vorher stand in der Kopfleiste "Dogfather · DogFather". Name und
+     Rolle lasen sich gleich, und es sah nach einem Fehler aus. Jetzt drei
+     unterscheidbare Dinge: ein Zeichen mit dem Anfangsbuchstaben, der
+     Name, und die Rolle als eigene Marke in ihrer Farbe.
+
+     Steht hier und nicht in jeder Seitendatei -- jede von ihnen setzte
+     bisher dieselbe Zeile selbst zusammen, vierzehnmal. */
+  window.werZeigen = function (ich) {
+    const ziel = document.getElementById('wer');
+    if (!ziel || !ich) return;
+    ziel.textContent = '';
+    ziel.dataset.rolle = ich.rolle || '';
+
+    const zeichen = document.createElement('span');
+    zeichen.className = 'wer__zeichen';
+    zeichen.setAttribute('aria-hidden', 'true');
+    zeichen.textContent = (ich.name || '?').trim().charAt(0).toUpperCase();
+
+    const name = document.createElement('span');
+    name.className = 'wer__name';
+    name.textContent = ich.name || '';
+
+    const rolle = document.createElement('span');
+    rolle.className = 'wer__rolle';
+    rolle.textContent = ich.rolle_name || ich.rolle || '';
+
+    ziel.append(zeichen, name, rolle);
+    /* Vorleseprogramme bekommen einen Satz statt drei Bruchstücke. */
+    ziel.setAttribute('aria-label',
+      `Angemeldet als ${ich.name} in der Rolle ${ich.rolle_name || ich.rolle}`);
+  };
+
   /* ---------- Auf- und Zuklappen langer Listen -------------------------
 
      Lange Protokoll-Listen sind Nachschlagewerk, kein Startbild: Sie

workspace/assets/js/personen.js

@@ -527,7 +527,7 @@
       ich = await a.json();
     } catch { return; }
     if (!LEITUNG.has(ich.rolle)) { location.assign('/workspace/start.html'); return; }
-    $('wer').textContent = `${ich.name} · ${ich.rolle_name || ich.rolle}`;
+    window.werZeigen?.(ich);
     baueRollenwahl();
     await laden();
   })();

workspace/assets/js/profil.js

@@ -103,7 +103,7 @@
     } catch { return; }
     /* Scouts betreuen ihre zugeteilten Creator wie DogFather --
        sie sehen aber nur die management-internen Felder nicht. */
-    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
+    window.werZeigen?.(ich);
 
     let liste;
     try { liste = await (await hole('/workspace/api/profil')).json(); } catch { return; }

workspace/assets/js/report.js

@@ -226,7 +226,7 @@
       if (!a.ok) { location.assign('/workspace/'); return; }
       ich = await a.json();
     } catch { return; }
-    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
+    window.werZeigen?.(ich);
     kiDa = await window.KI.verfuegbar();
 
     try {

workspace/assets/js/scouting.js

@@ -344,7 +344,7 @@
       ich = await a.json();
     } catch { return; }
     if (ich.rolle === 'creator') { location.assign('/workspace/start.html'); return; }
-    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
+    window.werZeigen?.(ich);
 
     if (LEITUNG.has(ich.rolle)) {
       $('unterzeile').textContent = 'Gesamtübersicht über alle Scouts.';

workspace/assets/js/start.js

@@ -338,7 +338,7 @@
       return;
     }
 
-    $('wer').textContent = `${ich.name} · ${ich.rolle_name || ich.rolle}`;
+    window.werZeigen?.(ich);
     /* Tageszeit statt immer "Willkommen". Kostet nichts und macht aus
        einer Maske eine Begrüßung. */
     const stunde = new Date().getHours();

workspace/assets/js/startcheck.js

@@ -267,7 +267,7 @@
       if (!a.ok) { location.assign('/workspace/'); return; }
       ich = await a.json();
     } catch { return; }
-    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
+    window.werZeigen?.(ich);
     kiDa = await window.KI.verfuegbar();
 
     let liste;

workspace/assets/js/uebersicht.js

@@ -180,7 +180,7 @@
       if (!a.ok) { location.assign('/workspace/'); return; }
       ich = await a.json();
     } catch { return; }
-    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
+    window.werZeigen?.(ich);
 
     let d;
     try {

workspace/assets/js/wissen.js

@@ -568,7 +568,7 @@
       if (!a.ok) { location.assign('/workspace/'); return; }
       ich = await a.json();
     } catch { return; }
-    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
+    window.werZeigen?.(ich);
 
     await laden_();
     if (aufbau) {

workspace/aufgaben.html

@@ -7,9 +7,9 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -26,7 +26,7 @@
     </svg>
     <span class="zurueck-knopf__text">Zurück</span>
   </button>
-  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Aufgaben</p>
+  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Aufgaben</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -139,8 +139,8 @@
   </form>
 </dialog>
 
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/aufgaben.js?v=202609010009" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/aufgaben.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/automation.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/automation.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/automation.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -27,7 +27,7 @@
     </svg>
     <span class="zurueck-knopf__text">Zurück</span>
   </button>
-  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Automationen</p>
+  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Automationen</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -132,8 +132,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/automation.js?v=202609010009" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/automation.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/bereich.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/bereich.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/bereich.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -103,8 +103,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/bereich.js?v=202609010009" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/bereich.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/calls.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/calls.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/calls.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -27,7 +27,7 @@
     </svg>
     <span class="zurueck-knopf__text">Zurück</span>
   </button>
-  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Calls</p>
+  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Calls</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -54,9 +54,9 @@
 
 </main>
 
-<script src="assets/js/ki.js?v=202609010009" defer></script>
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/calls.js?v=202609010009" defer></script>
+<script src="assets/js/ki.js?v=202609010545" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/calls.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/content.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/content.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/content.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -27,7 +27,7 @@
     </svg>
     <span class="zurueck-knopf__text">Zurück</span>
   </button>
-  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Content</p>
+  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Content</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -158,8 +158,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/content.js?v=202609010009" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/content.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/dateien.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/dateien.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/dateien.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -27,7 +27,7 @@
     </svg>
     <span class="zurueck-knopf__text">Zurück</span>
   </button>
-  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Dateien</p>
+  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Dateien</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -93,8 +93,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/dateien.js?v=202609010009" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/dateien.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/index.html

@@ -25,7 +25,7 @@
       type="image/webp" media="(max-width: 899px)" />
 
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
 </head>
 
 <body class="gate">
@@ -143,6 +143,6 @@
   </p>
 </main>
 
-<script src="assets/js/gate.js?v=202609010009" defer></script>
+<script src="assets/js/gate.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/kalender.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/kalender.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/kalender.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -27,7 +27,7 @@
     </svg>
     <span class="zurueck-knopf__text">Zurück</span>
   </button>
-  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Kalender</p>
+  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Kalender</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -99,8 +99,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/kalender.js?v=202609010009" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/kalender.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/personen.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/personen.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/personen.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -27,7 +27,7 @@
     </svg>
     <span class="zurueck-knopf__text">Zurück</span>
   </button>
-  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Personen</p>
+  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Personen</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -121,8 +121,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/personen.js?v=202609010009" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/personen.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/profil.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/profil.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/profil.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -27,7 +27,7 @@
     </svg>
     <span class="zurueck-knopf__text">Zurück</span>
   </button>
-  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Profil</p>
+  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Profil</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -132,8 +132,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/profil.js?v=202609010009" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/profil.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/report.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/report.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/report.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -27,7 +27,7 @@
     </svg>
     <span class="zurueck-knopf__text">Zurück</span>
   </button>
-  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Review</p>
+  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Review</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -91,9 +91,9 @@
 
 </main>
 
-<script src="assets/js/ki.js?v=202609010009" defer></script>
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/report.js?v=202609010009" defer></script>
+<script src="assets/js/ki.js?v=202609010545" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/report.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/scouting.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/scouting.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/scouting.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -22,7 +22,7 @@
     </svg>
     <span class="zurueck-knopf__text">Zurück</span>
   </button>
-  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Scouting</p>
+  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Scouting</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -124,8 +124,8 @@
   </div>
 </div>
 
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/scouting.js?v=202609010009" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/scouting.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/start.html

@@ -7,8 +7,8 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -19,7 +19,7 @@
 <div class="schleier" aria-hidden="true"></div>
 
 <header class="kopfleiste">
-  <p class="marke">Dogfather&nbsp;Universe · Creator&nbsp;Workspace</p>
+  <p class="marke"><span class="marke__text">Dogfather&nbsp;Universe · Creator&nbsp;Workspace</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -73,8 +73,8 @@
   </p>
 </main>
 
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/start.js?v=202609010009" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/start.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/startcheck.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/startcheck.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/startcheck.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -27,7 +27,7 @@
     </svg>
     <span class="zurueck-knopf__text">Zurück</span>
   </button>
-  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Start-Check</p>
+  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Start-Check</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -70,9 +70,9 @@
 
 </main>
 
-<script src="assets/js/ki.js?v=202609010009" defer></script>
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/startcheck.js?v=202609010009" defer></script>
+<script src="assets/js/ki.js?v=202609010545" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/startcheck.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/uebersicht.html

@@ -7,9 +7,9 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -26,7 +26,7 @@
     </svg>
     <span class="zurueck-knopf__text">Zurück</span>
   </button>
-  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Dashboard</p>
+  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Dashboard</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -57,7 +57,7 @@
 
 </main>
 
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/uebersicht.js?v=202609010009" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/uebersicht.js?v=202609010545" defer></script>
 </body>
 </html>

workspace/wissen.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010009" />
-<link rel="stylesheet" href="assets/css/wissen.css?v=202609010009" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
+<link rel="stylesheet" href="assets/css/wissen.css?v=202609010545" />
 </head>
 
 <body class="start">
@@ -27,7 +27,7 @@
     </svg>
     <span class="zurueck-knopf__text">Zurück</span>
   </button>
-  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Wissen</p>
+  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Wissen</span></p>
   <div class="kopfleiste__rechts">
     <span class="wer" id="wer">…</span>
     <button type="button" class="abmelden" id="abmelden">Abmelden</button>
@@ -175,8 +175,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609010009" defer></script>
-<script src="assets/js/kopf.js?v=202609010009" defer></script>
-<script src="assets/js/wissen.js?v=202609010009" defer></script>
+<script src="assets/js/wahl.js?v=202609010545" defer></script>
+<script src="assets/js/kopf.js?v=202609010545" defer></script>
+<script src="assets/js/wissen.js?v=202609010545" defer></script>
 </body>
 </html>