feat: nach Medienart filtern -- und die Endung schlaegt das Achselzucken

FILTER. Eine Leiste ueber der Galerie: Alles, Bilder, Video, Ton, Dokumente,
Anderes -- mit der Anzahl AM KNOPF. Ein Knopf "Video", hinter dem nichts liegt,
kostet sonst einen Klick, um das herauszufinden; leere Arten sind deshalb
sichtbar, aber gesperrt.

Die Uebersetzung Art -> SQL steht an EINER Stelle (ARTEN), weil zwei Stellen
zwangslaeufig auseinanderlaufen: die Liste zeigte dann etwas anderes, als der
Zaehler daneben behauptet. "Anderes" ist bewusst die VERNEINUNG der uebrigen
und keine eigene Liste -- sonst faellt ein neuer Typ durch alle Filter und ist
nirgends zu finden. Nachgemessen: die Summe der fuenf Arten ergibt die
Gesamtzahl.

/media/ids nimmt denselben Filter. Ohne das waehlt "alle waehlen" mehr aus, als
zu sehen ist -- und geloescht wuerde Unsichtbares.

DER FUND BEIM MESSEN: clip.mp4, ton.mp3, handbuch.pdf und notiz.txt landeten
ALLE unter "Anderes". Ein Formularteil ohne erkannte Art traegt
"application/octet-stream", und mein Code hat das der Endungstabelle
vorgezogen. Was der Absender ueber die Art sagt, gilt weiterhin -- aber nicht
sein Achselzucken. Danach: mp4 -> video/mp4, mp3 -> audio/mpeg, pdf und txt ->
Dokumente, und .zip bleibt richtigerweise "Anderes".

POLITUR. Ein ruhiger Verlauf im Hintergrund statt einer flachen Flaeche (ein
einfarbiges Dunkel sieht auf einem grossen Monitor aus wie ein Ladefehler),
Bildlaufleisten im Ton der Oberflaeche, ein Balken unter der aktiven Seite,
Karten mit einem Hauch Tiefe, ein spuerbarer Druckpunkt an den Knoepfen, und
Kacheln, die sich beim Darueberfahren leicht heben. Der Seitenwechsel blendet
auf -- und wer prefers-reduced-motion gesetzt hat, bekommt nichts davon.

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

server/ui/src/components/Bausteine.tsx

@@ -33,8 +33,9 @@ export function Knopf({
             {...rest}
             disabled={disabled || wartet}
             className={`inline-flex items-center justify-center gap-2 rounded-md border px-3 py-1.5
-                        text-sm font-medium transition-colors disabled:cursor-not-allowed
-                        disabled:opacity-50 ${arten[art]} ${className}`}
+                        text-sm font-medium transition-all active:scale-[0.97]
+                        disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100
+                        ${arten[art]} ${className}`}
         >
             {wartet && <Loader2 size={15} className="animate-spin" />}
             {kind}
@@ -78,7 +79,7 @@ export function Karte({
     children: ReactNode
 }) {
     return (
-        <section className="rounded-lg border border-rand bg-flaeche">
+        <section className="rounded-lg border border-rand bg-flaeche shadow-sm shadow-black/20">
             {(titel || rechts) && (
                 <header className="flex items-center justify-between gap-3 border-b border-rand px-4 py-2.5">
                     <h2 className="text-sm font-semibold">{titel}</h2>