feat: Code mit Farbe, Anleitung im Repo, Galerie mit Seitengroesse

CODE MIT FARBE, ohne Bibliothek. Ein Hervorheber wie highlight.js wiegt mehr
als diese ganze Oberflaeche und kann fuenfzig Sprachen, von denen hier drei
vorkommen. Was Code lesbar macht, sind drei Unterscheidungen -- Kommentar,
Zeichenkette, Schluesselwort. Der Rest ist Zierde. Also ein Tokenizer in einem
Ausdruck, der seine Grenzen kennt: verschachtelte Sonderfaelle faerbt er
falsch, und bei zehn Zeilen Beispiel ist das der richtige Tausch.

DIE ANLEITUNG liegt als docs/API.md IM REPO und damit unter Versionskontrolle,
statt nur im Wiki zu stehen, wo niemand sieht, wann sie zuletzt stimmte. Sie
nennt nicht nur die Endpunkte, sondern was schiefgehen kann und wie die Antwort
dann aussieht -- samt der beiden Proxy-Fallen, die uns heute begegnet sind.

Das Gitea-Wiki gibt es noch NICHT: Gitea legt das Wiki-Repo erst an, wenn die
erste Seite ueber die Oberflaeche erstellt wird (davor antwortet der Klon mit
500). Die API-Seite verlinkt es trotzdem schon -- und sobald es existiert,
schiebt ein Befehl docs/API.md hinein.

GALERIE: die Seitengroesse ist waehlbar (30/60/120/200 statt fester 60), und
die Ordnerspalte rueckt ab 1536 px nach LINKS AUS dem Hauptbereich heraus --
15rem Spalte plus 1rem Abstand sind genau die 16rem, um die dort nach links
gezogen wird. Damit steht das Raster auf derselben Breite wie jede andere
Seite, statt um die Spaltenbreite schmaler zu sein. Darunter stapelt es wie
bisher; auf einem 1280er Schirm gaebe es keinen Rand, in den etwas ruecken
koennte.

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

server/ui/src/pages/Galerie.tsx

@@ -39,7 +39,7 @@ import { Ansehen } from '../components/Ansehen'
 import { Verschieben } from '../components/Verschieben'
 import { useAuffrischen } from '../auffrischen'
 
-const PRO_SEITE = 60
+const SEITENGROESSEN = [30, 60, 120, 200] as const
 
 export function Galerie() {
     const note = useStore((s) => s.note)
@@ -49,6 +49,7 @@ export function Galerie() {
     const [seite, setSeite] = useState(0)
     const [art, setArt] = useState<Art>('')
     const [arten, setArten] = useState<Arten | null>(null)
+    const [proSeite, setProSeite] = useState(60)
     const [sortierung, setSortierung] = useState<Sortierung>('geaendert')
     const [richtung, setRichtung] = useState<Richtung>('ab')
     const [daten, setDaten] = useState<MediaPage | null>(null)
@@ -87,8 +88,8 @@ export function Galerie() {
                 sucheAktiv,
                 ordner,
                 art,
-                PRO_SEITE,
-                seite * PRO_SEITE,
+                proSeite,
+                seite * proSeite,
                 sortierung,
                 richtung,
             )
@@ -100,7 +101,7 @@ export function Galerie() {
         } finally {
             if (meine === lauf.current) setLaedt(false)
         }
-    }, [sucheAktiv, ordner, art, seite, sortierung, richtung, note])
+    }, [sucheAktiv, ordner, art, seite, proSeite, sortierung, richtung, note])
 
     useEffect(() => {
         void laden()
@@ -153,7 +154,7 @@ export function Galerie() {
 
     const items = daten?.items ?? []
     const gesamt = daten?.total ?? 0
-    const seiten = Math.max(1, Math.ceil(gesamt / PRO_SEITE))
+    const seiten = Math.max(1, Math.ceil(gesamt / proSeite))
 
     function umschalten(id: number) {
         setGewaehlt((alt) => {
@@ -223,7 +224,14 @@ export function Galerie() {
     }
 
     return (
-        <div className="flex flex-col gap-4 lg:flex-row">
+        // Ab 2xl (1536 px) rueckt die Ordnerspalte nach LINKS AUS dem
+        // Hauptbereich heraus: 15rem Spalte + 1rem Abstand = die 16rem, um die
+        // hier nach links gezogen wird. Damit steht das Raster auf genau
+        // derselben Breite wie jede andere Seite.
+        //
+        // Darunter stapelt es wie bisher — auf einem 1280er Schirm waere kein
+        // Rand da, in den etwas ruecken koennte.
+        <div className="flex flex-col gap-4 lg:flex-row 2xl:-ml-64">
             <Ordner
                 daten={ordnerDaten}
                 gewaehlt={ordner}
@@ -358,6 +366,22 @@ export function Galerie() {
                         <option value="pfad">Pfad</option>
                         <option value="groesse">Größe</option>
                     </select>
+                    <select
+                        value={proSeite}
+                        onChange={(e) => {
+                            setProSeite(Number(e.target.value))
+                            setSeite(0)
+                        }}
+                        title="wie viele Kacheln je Seite"
+                        className="rounded-md border border-rand bg-flaeche px-2 py-1.5 text-sm
+                                   text-schrift focus:border-akzent focus:outline-none"
+                    >
+                        {SEITENGROESSEN.map((n) => (
+                            <option key={n} value={n}>
+                                {n} / Seite
+                            </option>
+                        ))}
+                    </select>
                     <button
                         onClick={() => {
                             setRichtung(richtung === 'ab' ? 'auf' : 'ab')