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/wissen.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311131" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311131" />
-<link rel="stylesheet" href="assets/css/wissen.css?v=202608311131" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311213" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311213" />
+<link rel="stylesheet" href="assets/css/wissen.css?v=202608311213" />
 </head>
 
 <body class="start">
@@ -79,10 +79,10 @@
       <input id="q" type="search" placeholder="Anleitung suchen – Titel, Beschreibung oder Tag" aria-label="Suchen" maxlength="80" />
     </div>
     <div class="suchleiste__filter">
-      <label class="feld-schild" for="f-stufe">Stufe</label>
-      <select id="f-stufe"><option value="">Alle</option></select>
-      <label class="feld-schild" for="f-geraet">Gerät</label>
-      <select id="f-geraet"><option value="">Alle</option></select>
+      <span class="feld-schild">Stufe</span>
+      <div class="filterreihe" id="f-stufe" role="radiogroup" aria-label="Stufe"></div>
+      <span class="feld-schild">Gerät</span>
+      <div class="filterreihe" id="f-geraet" role="radiogroup" aria-label="Gerät"></div>
       <label class="feld-schild" for="f-tag">Tag</label>
       <select id="f-tag"><option value="">Alle</option></select>
       <button type="button" class="knopf-still" id="f-weg" hidden>Filter zurücksetzen</button>
@@ -119,8 +119,13 @@
           <input id="n-beschreibung" maxlength="400" placeholder="In einem Satz: Was lernt man hier?" />
         </div>
         <div class="feld feld--breit">
-          <label class="feld-schild" for="n-kategorie">Hauptkategorie</label>
-          <select id="n-kategorie" required></select>
+          <span class="feld-schild">Hauptkategorie</span>
+          <!-- Kein Auswahlmenü: Zwanzig Einträge in einem aufgeklappten
+               Systemmenü sind unlesbar, und gestalten lässt es sich nicht
+               (weisses Windows-Menü in dunkler Oberfläche). Hier stehen
+               dieselben sechs Welten wie auf der Seite. -->
+          <div class="katwahl" id="n-kategorie" role="radiogroup" aria-label="Hauptkategorie"></div>
+          <p class="leise" id="n-kat-hinweis">Noch keine Kategorie gewählt.</p>
         </div>
         <div class="feld">
           <label class="feld-schild" for="n-stufe">Stufe</label>
@@ -165,7 +170,7 @@
 
 </main>
 
-<script src="assets/js/kopf.js?v=202608311131" defer></script>
-<script src="assets/js/wissen.js?v=202608311131" defer></script>
+<script src="assets/js/kopf.js?v=202608311213" defer></script>
+<script src="assets/js/wissen.js?v=202608311213" defer></script>
 </body>
 </html>