Wissen: Kategoriewahl und Filter ohne Systemmenue

Filipe: "wieso sieht das so scheisse aus?" -- zum aufgeklappten
Auswahlmenue der Kategorie. Er hat recht, und die Ursache ist dieselbe
wie bei der Rollenwahl: Ein AUFGEKLAPPTES <select> laesst sich nicht
gestalten. Es kommt vom Betriebssystem, in Windows-Weiss, mitten in
einer dunklen Oberflaeche. Bei zwanzig Eintraegen kam dazu, dass man in
so einer Liste nichts findet.

KATEGORIEWAHL: jetzt dieselben sechs Welten, dieselben Farben und
dieselben Symbole wie die Kacheln auf der Seite. Man waehlt aus
demselben Regal, in dem man sonst stoebert. Unter der Wahl steht die
Beschreibung der gewaehlten Kategorie -- die Zeile, die beim
Einsortieren die eigentliche Frage beantwortet.

Nichts ist vorausgewaehlt (ausser man laedt aus einer Kategorie heraus
hoch). Die stille Vorbelegung war der Grund, warum eine PDF ueber
TikTok LIVE Studio unter "TikTok - Grundlagen" landete.

FILTER Stufe und Geraet: ebenfalls Schalter statt Menue. Zwei bis vier
Werte, die sich nie aendern -- dafuer ein Menue zu oeffnen ist ein Klick
zu viel.

Der Tag-Filter bleibt bewusst ein Auswahlfeld: Tags wachsen mit dem
Bestand, eine Schalterreihe waere irgendwann zwei Zeilen lang.

Geprueft: 20 Kategorien in 6 Welten, nichts vorausgewaehlt, Filter
setzen die Adresse (?stufe=einsteiger), Handy ohne Ueberlauf, 0
Konsolenfehler. Testeintrag landete unter der gewaehlten Kategorie.

workspace/assets/css/wissen.css

@@ -324,3 +324,88 @@
   border: 1px solid rgba(95, 201, 154, .3);
   border-radius: var(--radius-klein);
 }
+
+/* ===================================================================
+   Kategoriewahl und Filterschalter (31.08.2026).
+
+   Beides ersetzt ein <select>. Der Grund ist derselbe wie bei der
+   Rollenwahl: Ein AUFGEKLAPPTES Systemmenue laesst sich nicht
+   gestalten -- es kam als weisses Windows-Menue mitten in der dunklen
+   Oberflaeche. Bei zwanzig Kategorien kam dazu, dass man in so einer
+   Liste nichts findet.
+
+   Hier stehen dieselben sechs Welten und dieselben Farben wie auf den
+   Kacheln der Seite: Man waehlt aus demselben Regal, in dem man sonst
+   stoebert.
+   =================================================================== */
+
+.katwahl { display: grid; gap: 14px; margin-top: 4px; }
+
+.katwahl__welt { --w: var(--akzent); }
+.katwahl__welt[data-welt="tiktok"]  { --w: #3fbdf5; }
+.katwahl__welt[data-welt="aufbau"]  { --w: #8a76ff; }
+.katwahl__welt[data-welt="bildton"] { --w: #5fc99a; }
+.katwahl__welt[data-welt="technik"] { --w: #e8b877; }
+.katwahl__welt[data-welt="inhalt"]  { --w: #e88fb4; }
+.katwahl__welt[data-welt="hilfe"]   { --w: #8e9cb0; }
+
+.katwahl__weltname {
+  margin: 0 0 6px; font-size: .7rem; font-weight: 700;
+  letter-spacing: .08em; text-transform: uppercase;
+  color: color-mix(in srgb, var(--w) 55%, #ffffff);
+}
+.katwahl__reihe { display: flex; gap: 6px; flex-wrap: wrap; }
+
+.katwahl__knopf {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 8px 13px; cursor: pointer; text-align: left;
+  background: linear-gradient(#1a2230, #151c28);
+  border: 1px solid var(--rand); border-radius: 10px;
+  color: var(--text-leise); font: inherit; font-size: .83rem;
+  transition: border-color .16s ease, background .16s ease, color .16s ease;
+}
+.katwahl__knopf:hover { color: var(--text); border-color: color-mix(in srgb, var(--w) 45%, transparent); }
+.katwahl__knopf:focus-visible {
+  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--w) 32%, transparent);
+}
+.katwahl__knopf[data-an="ja"] {
+  color: #fff; font-weight: 600;
+  border-color: color-mix(in srgb, var(--w) 65%, transparent);
+  background: linear-gradient(color-mix(in srgb, var(--w) 20%, #1a2230),
+                              color-mix(in srgb, var(--w) 11%, #151c28));
+  box-shadow: 0 4px 14px -9px var(--w);
+}
+.katwahl__symbol {
+  width: 17px; height: 17px; flex: none;
+  fill: none; stroke: var(--w); stroke-width: 1.7;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+.katwahl__name { white-space: nowrap; }
+
+/* ---------- Filterschalter ------------------------------------------------ */
+
+.filterreihe { display: inline-flex; gap: 4px; }
+.filterreihe__knopf {
+  padding: 7px 12px; cursor: pointer;
+  background: rgba(255, 255, 255, .04);
+  border: 1px solid var(--rand); border-radius: 8px;
+  color: var(--text-still); font: inherit; font-size: .82rem;
+  transition: color .16s ease, border-color .16s ease, background .16s ease;
+}
+.filterreihe__knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .22); }
+.filterreihe__knopf[data-an="ja"] {
+  color: #fff; font-weight: 600;
+  border-color: rgba(63, 189, 245, .55);
+  background: rgba(63, 189, 245, .16);
+}
+.filterreihe__knopf:focus-visible {
+  outline: none; box-shadow: 0 0 0 3px rgba(63, 189, 245, .3);
+}
+
+@media (max-width: 620px) {
+  .katwahl__knopf { flex: 1 1 100%; }
+  .filterreihe { flex-wrap: wrap; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .katwahl__knopf, .filterreihe__knopf { transition: none; }
+}