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/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/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));
-  -webkit-mask: url("../img/marke-husky.webp") center / contain no-repeat;
-  mask: url("../img/marke-husky.webp") center / contain no-repeat;
+  background: url("../img/marke-spicy.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;

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>