ui(archiv+library): Section-Header, mehr Spalten, Kategorie-Pills

Archiv-Unterseiten (Büroführung etc.): .collection-Wrapper mit
--palette-kusa, .collection-title statt .section-header — gleiche
Optik wie Archiv/Library-Übersichten. Artikel-Grid: auto-fill
minmax(220px) → 3+ Spalten. Datum unter Titel (card-layout).

Archiv-Toggle-Pills: font-family-display (wie Dialog-Pill), margin
von spacing-md → 0.5em.

Library-Übersicht: A-Z-Index → Kategorie-Pills (Gruppe ausgeschrieben,
aktiv = ichigo), Atlas als 2-Spalten-Grid (.atlas--grid2), Suche
kombiniert mit Gruppe-Filter.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

layouts/library/list.html

@@ -7,37 +7,30 @@
       {{ $pages := where site.RegularPages "Section" "library" }}
 
       {{ if $pages }}
-        {{/* A-Z Buchstaben aus vorhandenen Titeln */}}
-        {{ $letters := slice }}
-        {{ range $pages }}
-          {{ $first := substr (upper .Title) 0 1 }}
-          {{ $first = replace $first "Ä" "A" }}
-          {{ $first = replace $first "Ö" "O" }}
-          {{ $first = replace $first "Ü" "U" }}
-          {{ if not (in $letters $first) }}{{ $letters = $letters | append $first }}{{ end }}
-        {{ end }}
-        {{ $letters = sort $letters }}
-
-        <div class="lib-filter">
-          <input id="lib-search" class="lib-search" type="search" placeholder="Suchen …" autocomplete="off" spellcheck="false">
-          <div class="lib-az">
-            <button class="lib-az-all active" data-letter="">Alle</button>
-            {{ range $letters }}<button data-letter="{{ lower . }}">{{ . }}</button>{{ end }}
-          </div>
-        </div>
-
-        {{/* Gruppen aufbauen */}}
+        {{/* Gruppen sammeln + sortieren */}}
         {{ $groups := dict }}
         {{ range $pages }}
           {{ $g := .Params.group | default "Allgemein" }}
           {{ $existing := index $groups $g | default slice }}
           {{ $groups = merge $groups (dict $g ($existing | append .)) }}
         {{ end }}
+        {{ $groupNames := slice }}
+        {{ range $g, $_ := $groups }}{{ $groupNames = $groupNames | append $g }}{{ end }}
+        {{ $groupNames = sort $groupNames }}
 
-        <section class="atlas">
-          {{ range $g, $ps := $groups }}
-            <article class="atlas-section">
-              <h2>{{ $g }}</h2>
+        <div class="lib-filter">
+          <input id="lib-search" class="lib-search" type="search" placeholder="Suchen …" autocomplete="off" spellcheck="false">
+          <div class="lib-pills">
+            <button class="lib-pill active" data-group="">Alle</button>
+            {{ range $groupNames }}<button class="lib-pill" data-group="{{ . }}">{{ . }}</button>{{ end }}
+          </div>
+        </div>
+
+        <section class="atlas atlas--grid2">
+          {{ range $groupNames }}
+            {{ $ps := index $groups . }}
+            <article class="atlas-section" data-group="{{ . }}">
+              <h2>{{ . }}</h2>
               <ul class="atlas-list">
                 {{ range sort $ps "Title" }}
                   {{ $norm := lower .Title }}
@@ -58,31 +51,31 @@
         <script>
         (function(){
           var input = document.getElementById('lib-search');
-          var azBtns = document.querySelectorAll('.lib-az button');
-          var activeLetter = '';
+          var pills = document.querySelectorAll('.lib-pill');
+          var activeGroup = '';
 
           function filter() {
             var q = input.value.trim().toLowerCase()
               .replace(/ä/g,'a').replace(/ö/g,'o').replace(/ü/g,'u').replace(/ß/g,'ss');
             document.querySelectorAll('.atlas-section').forEach(function(sec) {
+              var groupMatch = !activeGroup || sec.dataset.group === activeGroup;
+              if (!groupMatch) { sec.style.display = 'none'; return; }
               var visible = 0;
               sec.querySelectorAll('li[data-title]').forEach(function(li) {
-                var t = li.dataset.title;
-                var matchQ = !q || t.indexOf(q) !== -1;
-                var matchL = !activeLetter || t.charAt(0) === activeLetter;
-                if (matchQ && matchL) { li.style.display = ''; visible++; }
-                else li.style.display = 'none';
+                var matchQ = !q || li.dataset.title.indexOf(q) !== -1;
+                li.style.display = matchQ ? '' : 'none';
+                if (matchQ) visible++;
               });
               sec.style.display = visible ? '' : 'none';
             });
           }
 
           input.addEventListener('input', filter);
-          azBtns.forEach(function(btn) {
+          pills.forEach(function(btn) {
             btn.addEventListener('click', function() {
-              azBtns.forEach(function(b){ b.classList.remove('active'); });
+              pills.forEach(function(b){ b.classList.remove('active'); });
               this.classList.add('active');
-              activeLetter = this.dataset.letter || '';
+              activeGroup = this.dataset.group || '';
               filter();
             });
           });