Umsortiert wird gezogen, nicht geklickt

Die Pfeile sind weg; eine Mediathek wird in der Seitenleiste an ihren
Platz gezogen. Mit Pointer Events statt HTML5-Drag: letzteres kennt kein
Telefon, zeichnet ein Geisterbild, das sich nicht gestalten lässt, und
liefert während des Ziehens keine brauchbaren Koordinaten.

Mit Schwelle von sechs Bildpunkten — sonst verschiebt jeder leicht
wackelige Klick die Reihenfolge, und ein Klick ohne Bewegung führt
weiterhin zur Mediathek, auch im Bearbeitungsmodus. Die weichenden
Zeilen gleiten, die gezogene folgt dem Zeiger ohne Verzögerung; bei
„Bewegung reduzieren" gleitet nichts.

Die Pfeiltasten bleiben auf der fokussierten Zeile, nur ohne sichtbare
Knöpfe. Ziehen ist mit der Tastatur nicht bedienbar, und eine Funktion,
die nur mit der Maus erreichbar ist, ist für den, der keine benutzt, gar
keine.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/src/style.css

@@ -181,16 +181,45 @@ svg { width: 20px; height: 20px; display: block; flex: none; }
 .nav-bearbeiten.an { color: var(--accent); }
 .nav-bearbeiten svg { width: 15px; height: 15px; display: block; }
 
-/* Im Bearbeitungsmodus trägt die Zeile zwei Pfeile statt der Zahl. */
-#chrome button.verschiebbar { cursor: default; }
-.nav-pfeil {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 20px; height: 20px; flex: none;
-  border-radius: var(--r-knopf); color: var(--text-muted);
+/* ---------- Umsortieren durch Ziehen ----------
+ *
+ * Der Behälter braucht keine eigene Form; er existiert, damit beim Ziehen
+ * gerechnet werden kann, die wievielte Zeile unter dem Zeiger liegt.
+ */
+.nav-liste { display: flex; flex-direction: column; }
+
+#chrome button.ziehbar {
+  cursor: grab;
+  /* Ohne das übernimmt der Browser die senkrechte Geste und scrollt, statt
+   * die Zeile zu bewegen — auf dem Telefon wäre Ziehen damit unmöglich. */
+  touch-action: none;
+  user-select: none;
+  position: relative;
+}
+#chrome button.ziehbar:active { cursor: grabbing; }
+
+.nav-griff {
+  display: inline-flex; color: var(--text-faint); flex: none; margin-right: -2px;
+}
+.nav-griff svg { width: 14px; height: 14px; }
+#chrome button.ziehbar:hover .nav-griff { color: var(--text-muted); }
+
+/* Die gezogene Zeile liegt über den anderen und wirft einen Schatten —
+ * sonst sieht man nicht, dass sie abgehoben ist. */
+#chrome button.wird-gezogen {
+  z-index: 3; cursor: grabbing;
+  background: var(--elevated); box-shadow: var(--schatten-dialog);
+  opacity: .95;
+}
+
+/* Die weichenden Zeilen gleiten, die gezogene folgt dem Zeiger ohne
+ * Verzögerung — eine Übergangszeit auf ihr machte sie zäh. */
+#chrome .nav-liste.zieht button:not(.wird-gezogen) {
+  transition: transform .14s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  #chrome .nav-liste.zieht button:not(.wird-gezogen) { transition: none; }
 }
-.nav-pfeil:hover { background: var(--raised); color: var(--text); }
-.nav-pfeil.gesperrt { opacity: .25; pointer-events: none; }
-.nav-pfeil svg { width: 14px; height: 14px; }
 
 #chrome button {
   display: flex; align-items: center; gap: var(--s-regular);