feat: Das Logo laesst sich zuschneiden

Ein Screenshot von einer Website ist selten schon das Logo – da ist Rand
drumherum oder drei Marken nebeneinander. Nach dem Waehlen kommt deshalb ein
Rahmen: ziehen zum Verschieben, Regler zum Zoomen.

Der Rahmen IST der Ausschnitt. Deshalb nichts abgedunkelt und keine
Hilfslinien darin – man soll das Ergebnis sehen und nicht eine Vorschau
davon, die man erst uebersetzen muss.

Zu Beginn steht das GANZE Bild im Rahmen. Wer nicht zuschneiden will, drueckt
Uebernehmen und bekommt, was er hochgeladen hat; Zuschneiden ist ein Zoom,
kein Zwang. Verschieben geht nur, solange das Bild den Rahmen ueberragt –
sonst schoebe man ein kleines Bild aus seinem eigenen Ausschnitt heraus.

Geschnitten wird im Browser, hochgeladen nur noch der Ausschnitt: Der Server
bekommt kein Bild, das er gar nicht behalten soll.

Der durchsichtige Grund bleibt durchsichtig – ein weisser Kasten fiele auf
dunklem Hintergrund sofort auf.

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

web/src/finance.css

@@ -1771,3 +1771,41 @@ tr.row-dup {
 /* Das Dateifeld steckt in einem <label>, das wie ein Knopf aussieht. */
 .abo-logo-knoepfe label.btn { cursor: pointer; margin: 0; }
 .abo-logo-knoepfe label.btn.deaktiviert { opacity: 0.5; cursor: not-allowed; }
+
+/* --- Logo zuschneiden ---------------------------------------------------- */
+
+/* Der Rahmen IST der Ausschnitt: Was hier steht, wird gespeichert. Deshalb
+   nichts abdunkeln und keine Hilfslinien – man soll das Ergebnis sehen, nicht
+   eine Vorschau davon. */
+.zuschnitt-rahmen {
+  position: relative;
+  overflow: hidden;
+  margin: 0 auto var(--sp-3);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  background:
+    repeating-conic-gradient(var(--border) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
+  touch-action: none;
+  user-select: none;
+}
+.zuschnitt-rahmen.beweglich { cursor: grab; }
+.zuschnitt-rahmen.beweglich:active { cursor: grabbing; }
+.zuschnitt-rahmen img {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -50%;
+  margin-top: 0;
+  translate: 0 -50%;
+  max-width: none;
+  pointer-events: none;
+}
+
+.zuschnitt-regler {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  margin-bottom: var(--sp-2);
+}
+.zuschnitt-regler input[type="range"] { flex: 1; width: auto; }
+.zuschnitt-regler .icon { color: var(--muted); flex: none; }