Die Kopfleiste glueht, die Knoepfe werden rot -- und DogFather sagt, was er tut

Drei Punkte aus der Nachtliste auf einmal, weil sie alle an derselben
Leiste haengen.

screen36: "hintergrund dieser leiste soll auch eine richtig geile
mischung von rot schwarz sein, wie wenn es brennen würde."

GLUT KOMMT VON UNTEN. Ein gleichmaessig roter Balken saehe aus wie eine
Fehlermeldung. Feuer ist unten heiss und oben dunkel -- also liegt das
Rot als flacher Schein an der Unterkante, wird nach oben schwarz und ist
an den Raendern schwaecher als in der Mitte. Zwei uebereinanderliegende
Verlaeufe machen das: einer fuer die Hoehe, einer fuer die Breite. Die
Trennlinie nach unten glueht mit, sonst endet das Feuer an einer grauen
Linie.

Kein Flackern, und das ist Absicht: Diese Leiste steht auf JEDER Seite
und liegt beim Lesen dauernd im Bild. Eine Animation waere ein
Stroboskop am oberen Bildrand. Das Rot bleibt deshalb unter 30 %
Deckkraft -- es glimmt, es leuchtet nicht.

screen5: "die buttons: teilen, suchen und abmelden sollen rot, alle
andere rot töne aber rot."

Vier Knoepfe, vier verschiedene Rottoene -- "alle andere rot töne"
heisst nicht viermal derselbe. Sie laufen von warm nach tief: Teilen im
Chili-Rot der Marke, Chat ruhiger, Suchen glutorange, Abmelden am
dunkelsten. Das ist auch die Reihenfolge, in der man sie braucht, und
Abmelden soll am wenigsten locken.

Gesetzt wird nur `--f`, die Knopffarbe aus gate.css -- sie faerbt
Rahmen, Schimmer und den Schein beim Ueberfahren gleich mit. Fuenf
Eigenschaften je Knopf zu setzen waere vier Gelegenheiten gewesen, eine
zu vergessen.

GERECHNET STATT GEMESSEN: Ein roter Text auf rotem Grund waere der
naheliegende Fehler. Der Text nimmt deshalb nur 22 % der Knopffarbe an
und bleibt sonst hell. Nachgerechnet gegen die HELLSTE Stelle der Glut
(dort ist der Kontrast am schlechtesten): 10,45:1 im schlechtesten Fall,
Grenze ist 4,5. Dafuer braucht es keinen 190-Sekunden-Lauf.

screen27: Unter DogFather steht jetzt "Manager & Technik" statt
"Gesamtuebersicht & Freigaben". Die alte Zeile beschrieb ein RECHT, die
neue eine AUFGABE -- und danach sucht jemand, der vor der Rollenwahl
steht: Er fragt sich nicht, was er duerfte, sondern was er hier tut.

pruef-start-ansicht EXIT=0 (140), pruef-css-klassen EXIT=0.

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

workspace/assets/css/start.css

@@ -4752,3 +4752,81 @@ body[data-fremde-sicht="ja"]::after {
 
    module.css wird von JEDER Seite geladen (anders als heim.css, das nur
    die Startseite braucht). */
+
+/* ===================================================================
+   DIE KOPFLEISTE BRENNT (08.09.2026)
+
+   Filipe, screen36: "hintergrund dieser leiste soll auch eine richtig
+   geile mischung von rot schwarz sein, wie wenn es brennen würde."
+   Und screen5: "die buttons: teilen, suchen und abmelden sollen rot,
+   alle andere rot töne aber rot. mach was geiles draus."
+
+   GLUT KOMMT VON UNTEN, NICHT VON ÜBERALL. Ein gleichmäßig roter
+   Balken sieht aus wie eine Fehlermeldung. Feuer ist unten heiß und
+   oben dunkel -- deshalb liegt das Rot als flacher Schein an der
+   Unterkante, wird nach oben hin schwarz und ist an den Rändern
+   schwächer als in der Mitte. Zwei übereinanderliegende Verläufe
+   ergeben das: einer für die Höhe, einer für die Breite.
+
+   AUGENSCHONEND BLEIBT PFLICHT (Hausregel). Die Leiste steht auf JEDER
+   Seite und liegt beim Lesen immer im Bild -- sie darf nicht leuchten,
+   sondern nur glimmen. Das Rot bleibt deshalb unter 30 % Deckkraft und
+   wird nie heller als der Text darauf. Kein Flackern: Eine Animation
+   hier wäre ein Stroboskop am oberen Bildrand.
+
+   Der dunkle Grundton bleibt darunter liegen -- er trägt die Lesbarkeit
+   der Schrift, die Glut liegt nur darüber. */
+.kopfleiste {
+  background:
+    /* die Glut an der Unterkante */
+    linear-gradient(180deg,
+      transparent 34%,
+      rgba(150, 30, 22, .13) 72%,
+      rgba(214, 58, 40, .26) 100%),
+    /* in der Mitte heißer als an den Rändern */
+    radial-gradient(120% 190% at 50% 118%,
+      rgba(255, 106, 66, .30) 0%,
+      rgba(168, 38, 26, .17) 38%,
+      transparent 72%),
+    rgba(6, 9, 16, .88);
+}
+/* Die Kante unten ist die Naht zum Inhalt -- sie glüht mit, sonst
+   endet das Feuer an einer grauen Linie. */
+.kopfleiste::after {
+  content: "";
+  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
+  background: linear-gradient(90deg,
+    transparent, rgba(255, 122, 78, .55) 22%, rgba(255, 150, 96, .75) 50%,
+    rgba(255, 122, 78, .55) 78%, transparent);
+  pointer-events: none;
+}
+
+/* ---- Die Knöpfe: alle rot, aber jeder ein anderes Rot -------------
+
+   "alle andere rot töne aber rot" -- also nicht viermal derselbe Ton.
+   Die vier laufen von warm nach tief: Teilen ist das hellste
+   (Chili-Rot der Marke), Chat etwas ruhiger, Suchen glutorange,
+   Abmelden am dunkelsten. Das ist auch die Reihenfolge, in der man sie
+   braucht -- und Abmelden soll am wenigsten locken.
+
+   `--f` ist die Knopffarbe aus gate.css; sie färbt Rahmen, Schimmer
+   und den Schein beim Überfahren gleich mit. Deshalb wird hier nur
+   diese eine Variable gesetzt statt fünf Eigenschaften je Knopf. */
+.kopfleiste .teilen      { --f: #ff7a5e; }
+.kopfleiste .chat-knopf  { --f: #f26a5a; }
+.kopfleiste .suche-knopf { --f: #e8734f; }
+.kopfleiste .abmelden    { --f: #d2564a; }
+
+/* Die Schrift muss auf dem dunklen Knopf lesbar bleiben: Ein Rot als
+   Rahmen ist etwas anderes als ein Rot als Schrift. Deshalb steht der
+   Text weiterhin hell und nimmt nur einen Hauch der Knopffarbe an. */
+.kopfleiste .teilen,
+.kopfleiste .chat-knopf,
+.kopfleiste .suche-knopf,
+.kopfleiste .abmelden {
+  color: color-mix(in srgb, var(--f) 22%, #f4e6e2);
+  border-color: color-mix(in srgb, var(--f) 42%, transparent);
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--f) 9%, transparent),
+    color-mix(in srgb, var(--f) 4%, transparent));
+}

workspace/index.html

@@ -141,7 +141,12 @@
       </svg>
       <span class="rolle__text">
         <span class="rolle__name">DogFather</span>
-        <span class="rolle__zusatz">Gesamtübersicht &amp; Freigaben</span>
+        <!-- "Manager & Technik" statt "Gesamtübersicht & Freigaben"
+             (08.09.2026, screen27). Die alte Zeile beschrieb ein RECHT
+             ("darf alles sehen und freigeben"), die neue eine AUFGABE --
+             und danach sucht jemand, der vor der Rollenwahl steht: Er
+             fragt sich nicht, was er dürfte, sondern was er hier tut. -->
+        <span class="rolle__zusatz">Manager &amp; Technik</span>
       </span>
     </button>