Workspace: Zurueck-Knopf im Entwurf "Neon-Kante"

Der vorige Knopf war zu generisch -- eine dunkle Pille mit Rand, wie sie
in jedem Baukasten steckt. Statt weiter zu raten wurden drei Entwuerfe
gebaut und zur Auswahl gestellt (Glas-Kapsel, Neon-Kante, aufklappender
Kreis). Gewaehlt: Neon-Kante.

Der senkrechte Lichtstrich in Cyan-Violett ist dasselbe Motiv wie die
Kante der Anmelde-Tafel (.tafel__kante in gate.css). Dadurch wirkt der
Workspace wie ein Stueck und nicht wie zusammengesetzte Teile.

Details:
- links flache Kante (die gehoert dem Lichtstrich), rechts rund
- der Strich ruht etwas kuerzer als der Knopf und waechst beim
  Ueberfahren auf volle Hoehe -- die Bewegung ersetzt jedes Aufblitzen
- der Pfeil rueckt drei Pixel nach links und sagt so die Richtung
- bei prefers-reduced-motion faellt alle Bewegung weg
- eigener Fokusring fuer die Tastaturbedienung

Die drei Entwuerfe liegen als eigenstaendige Seite unter entwurf/ im
Arbeitsordner (nicht im Repo), falls spaeter nochmal verglichen werden
soll.

Nur CSS, kein Neustart noetig.

workspace/assets/css/start.css

@@ -42,53 +42,68 @@ body.start {
    Stelle wie im Browser. Auf der Startseite gibt es ihn gar nicht: Dort
    ist kein "davor", und ein Knopf, der nichts tut, ist schlimmer als
    keiner. Auf den übrigen Seiten entscheidet kopf.js, ob er erscheint. */
+/* Entwurf "Neon-Kante": Der senkrechte Lichtstrich links ist dasselbe
+   Motiv wie die Kante der Anmelde-Tafel (.tafel__kante in gate.css).
+   Dadurch wirkt der Workspace wie ein Stück und nicht wie zusammen-
+   gesetzte Teile. */
 .zurueck-knopf {
+  position: relative;
   flex: 0 0 auto;
-  display: inline-flex; align-items: center; gap: 7px;
-  padding: 8px 15px 8px 12px;
-  /* Verlaufsrahmen: Die Füllung ist DECKEND, dadurch bleibt vom unteren
-     Verlauf nur der 1px schmale Rand sichtbar. Wäre sie durchsichtig,
-     schiene der Rahmenverlauf durch die ganze Fläche und der Knopf sähe
-     aus wie eine Hauptaktion -- das soll er gerade nicht. */
-  background:
-    linear-gradient(180deg, #151c28, #10161f) padding-box,
-    linear-gradient(180deg, rgba(158, 196, 230, .40), rgba(158, 196, 230, .12)) border-box;
-  border: 1px solid transparent;
-  border-radius: 999px;
+  display: inline-flex; align-items: center; gap: 10px;
+  padding: 9px 18px 9px 17px;
+  border: 0;
+  /* Links flach, rechts rund: Die gerade Kante gehört dem Lichtstrich,
+     nach rechts läuft der Knopf weich aus. */
+  border-radius: 4px 999px 999px 4px;
+  background: linear-gradient(100deg,
+    rgba(63, 189, 245, .10), rgba(138, 118, 255, .05) 60%, transparent);
   color: var(--text-leise);
-  font: inherit; font-size: .82rem; font-weight: 500;
-  letter-spacing: .01em;
-  cursor: pointer;
-  white-space: nowrap;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
-  transition: color var(--tempo), box-shadow var(--tempo), background var(--tempo);
+  font: inherit; font-size: .84rem; font-weight: 600;
+  cursor: pointer; white-space: nowrap;
+  transition: color var(--tempo), background var(--tempo);
+}
+
+/* Der Lichtstrich. Ruht etwas kürzer als der Knopf und wächst beim
+   Überfahren auf volle Höhe -- die Bewegung ersetzt jedes Aufblitzen. */
+.zurueck-knopf::before {
+  content: "";
+  position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, var(--akzent), var(--violett));
+  box-shadow: 0 0 8px -1px rgba(63, 189, 245, .55);
+  transition: top var(--tempo), bottom var(--tempo), box-shadow var(--tempo);
 }
 
 .zurueck-knopf__pfeil {
   width: 15px; height: 15px; flex: 0 0 auto;
   fill: none; stroke: currentColor;
-  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
+  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
   transition: transform var(--tempo);
 }
 
 .zurueck-knopf:hover {
-  color: var(--text);
-  background:
-    linear-gradient(180deg, #1a2431, #131b25) padding-box,
-    linear-gradient(180deg, rgba(63, 189, 245, .62), rgba(138, 118, 255, .30)) border-box;
-  box-shadow: 0 2px 12px -4px rgba(63, 189, 245, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
+  color: #fff;
+  background: linear-gradient(100deg,
+    rgba(63, 189, 245, .18), rgba(138, 118, 255, .09) 60%, transparent);
 }
-/* Der Pfeil rückt beim Überfahren ein Stück nach links -- die Bewegung
-   sagt in welche Richtung es geht, ohne zusätzlichen Text. */
-.zurueck-knopf:hover .zurueck-knopf__pfeil { transform: translateX(-2px); }
+.zurueck-knopf:hover::before {
+  top: 0; bottom: 0;
+  box-shadow: 0 0 14px 0 rgba(63, 189, 245, .75);
+}
+/* Der Pfeil rückt nach links -- sagt die Richtung ohne zusätzlichen Text. */
+.zurueck-knopf:hover .zurueck-knopf__pfeil { transform: translateX(-3px); }
 
-.zurueck-knopf:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); }
-.zurueck-knopf:active .zurueck-knopf__pfeil { transform: translateX(-3px); }
+.zurueck-knopf:active { transform: translateY(1px); }
+
+.zurueck-knopf:focus-visible {
+  outline: 2px solid var(--akzent);
+  outline-offset: 3px;
+  border-radius: 4px 999px 999px 4px;
+}
 
 @media (prefers-reduced-motion: reduce) {
-  .zurueck-knopf__pfeil { transition: none; }
-  .zurueck-knopf:hover .zurueck-knopf__pfeil,
-  .zurueck-knopf:active .zurueck-knopf__pfeil { transform: none; }
+  .zurueck-knopf, .zurueck-knopf::before, .zurueck-knopf__pfeil { transition: none; }
+  .zurueck-knopf:hover .zurueck-knopf__pfeil { transform: none; }
 }
 
 .kopfleiste__rechts { display: flex; align-items: center; gap: 12px; }