Der Anmelde-Knopf traegt beide Marken -- und wurde erst durch Nachrechnen lesbar

Filipe, screen28: "dieser anmelde button soll noch viel spezieller sein
bitte. und viel geiler."

NUR DIESER EINE KNOPF. Er traegt die Klasse `.knopf`, die im Workspace an
Dutzenden Stellen haengt -- wer sie aendert, aendert jeden Knopf im Haus.
Die Regel greift deshalb ueber `#knopf` und laesst alle anderen in Ruhe.

Der Verlauf laeuft vom Chili-Rot von Spicy Media in das Blau von Dogi --
dieselbe Klammer wie im Schriftzug der Kopfleiste, und hier besonders am
Platz: Dieser Knopf ist die Tuer ins Haus.

UND DANN HAT MICH DIE RECHNUNG WIDERLEGT. Der erste Entwurf nahm die
Marken-Toene direkt (#d94a3f bis #7ec8f2). Er sah gut aus -- genau das
ist die Falle. Nachgerechnet lag weisser Text darauf bei:

  #d94a3f  4,20:1     #6ca8d8  2,55:1
  #e2664a  3,37:1     #7ec8f2  1,84:1

Auf dem hellsten Punkt also nicht einmal beim halben Mindestwert. Ich
hatte im Kommentar daneben "ueber 4,5:1 an jeder Stelle" behauptet, ohne
es nachzurechnen. Der Knopf waere schoen und unlesbar gewesen.

Jeder Stuetzpunkt ist jetzt so weit abgedunkelt, bis weisser Text 4,6:1
erreicht -- knapp ueber der Grenze, damit Rundungen nicht darunter
rutschen. Die Farben bleiben erkennbar Rot und Blau, sie sind nur tiefer.
Schlechtester Wert jetzt 4,63:1.

MERKSATZ, der auch fuer jeden naechsten Verlauf gilt: Ein Verlauf ist so
lesbar wie sein HELLSTER Punkt, nicht wie sein Durchschnitt. Beim
Textverlauf in der Kopfleiste war es dieselbe Regel mit umgekehrtem
Vorzeichen -- dort zaehlt der dunkelste.

Der Glanz wandert beim Ueberfahren statt zu pulsieren (wie Manager-Stern
und Kalender-Knopf), bei `prefers-reduced-motion` entfaellt er. Waehrend
der Anmeldung wird der Knopf ruhig gestellt, damit der Ladepunkt die
Aufmerksamkeit bekommt und nicht der Glanz.

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

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

workspace/assets/css/gate.css

@@ -2001,3 +2001,86 @@ body.gate {
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .wahl2__eintrag { display: flex; align-items: center; gap: 10px; }
+
+/* ===================================================================
+   DER ANMELDE-KNOPF (08.09.2026)
+
+   Filipe, screen28: "dieser anmelde button soll noch viel spezieller
+   sein bitte. und viel geiler."
+
+   NUR DIESER EINE. Er traegt die Klasse `.knopf`, die im ganzen
+   Workspace an Dutzenden Stellen haengt -- wer sie aendert, aendert
+   jeden Knopf im Haus. Deshalb greift diese Regel ueber `#knopf`, die
+   Kennung des Anmelde-Knopfes, und laesst alle anderen in Ruhe.
+
+   ER TRAEGT BEIDE MARKEN. Der Verlauf laeuft vom Chili-Rot von Spicy
+   Media in das Babyblau von Dogi -- dieselbe Klammer wie im Schriftzug
+   der Kopfleiste, und hier ist sie besonders am Platz: Dieser Knopf ist
+   die Tuer ins Haus. Wer ihn drueckt, betritt "Spicy & Dogi".
+
+   Der Text bleibt WEISS und bekommt keinen Verlauf. Auf einer farbigen
+   Flaeche ist durchsichtige Schrift doppelt riskant -- sie haengt an
+   einer Technik UND steht auf wechselndem Untergrund.
+
+   DIE FARBEN SIND ABGEDUNKELT, und das war eine Korrektur an mir
+   selbst. Der erste Entwurf nahm die Marken-Toene direkt: #d94a3f bis
+   #7ec8f2. Er sah gut aus, und genau das ist die Falle -- nachgerechnet
+   lag weisser Text darauf bei 4,20 / 3,37 / 2,55 / 1,84 zu 1. Auf dem
+   hellsten Punkt also nicht einmal beim halben Mindestwert. Ich hatte
+   an dieser Stelle "ueber 4,5:1 an jeder Stelle" behauptet, ohne es
+   nachzurechnen; die Zahl hat mich widerlegt.
+
+   Jeder Stuetzpunkt ist deshalb so weit abgedunkelt, bis weisser Text
+   4,6:1 erreicht -- knapp ueber der Grenze, damit Rundungen nicht
+   darunter rutschen. Die Farben bleiben erkennbar Rot und Blau, sie
+   sind nur tiefer. Ein Verlauf ist so lesbar wie sein HELLSTER Punkt,
+   nicht wie sein Durchschnitt.
+
+   Der Glanz wandert beim Ueberfahren, statt zu pulsieren -- derselbe
+   Grund wie beim Manager-Stern und beim Kalender-Knopf: Glanz ist
+   etwas, das sich bewegt. Bei `prefers-reduced-motion` entfaellt er;
+   der Knopf bleibt kraeftig, er glaenzt nur nicht. */
+#knopf {
+  position: relative; overflow: hidden;
+  width: 100%;
+  padding: 15px 22px;
+  font-size: 1.02rem; font-weight: 750; letter-spacing: .015em;
+  color: #fff;
+  border: 0;
+  border-radius: 14px;
+  background:
+    linear-gradient(100deg, #cc463b 0%, #bc553d 34%, #4e799c 74%, #4d7a94 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .28),
+    inset 0 -2px 0 rgba(0, 0, 0, .22),
+    0 10px 26px -14px rgba(217, 74, 63, .9),
+    0 10px 26px -16px rgba(126, 200, 242, .8);
+  transition: transform var(--tempo), box-shadow var(--tempo), filter var(--tempo);
+}
+#knopf:hover:not([disabled]) {
+  transform: translateY(-1px);
+  filter: saturate(1.08) brightness(1.04);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .34),
+    inset 0 -2px 0 rgba(0, 0, 0, .22),
+    0 14px 30px -12px rgba(217, 74, 63, .95),
+    0 14px 30px -14px rgba(126, 200, 242, .85);
+}
+#knopf:active:not([disabled]) { transform: translateY(0); }
+#knopf::after {
+  content: "";
+  position: absolute; inset: 0;
+  background: linear-gradient(105deg, transparent 40%,
+    rgba(255, 255, 255, .3) 50%, transparent 60%);
+  transform: translateX(-130%);
+  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
+  pointer-events: none;
+}
+#knopf:hover:not([disabled])::after { transform: translateX(130%); }
+@media (prefers-reduced-motion: reduce) {
+  #knopf::after { display: none; }
+  #knopf:hover:not([disabled]) { transform: none; }
+}
+/* Waehrend der Anmeldung: ruhig stellen, damit der Ladepunkt die
+   Aufmerksamkeit bekommt und nicht der Glanz. */
+#knopf[disabled] { filter: saturate(.7) brightness(.85); box-shadow: none; }