feature(archiv): Umschalter Kategorie ↔ Jahr

Übersicht /archiv umschaltbar: nach Kategorie (Jahr hinter dem Beitrag, je
Rubrik die letzten 10 + 'alle →') oder nach Jahr (Kategorie hinter dem Beitrag,
alle). Clientseitig, merkt die Wahl in localStorage.

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

assets/css/custom.css

@@ -1135,6 +1135,21 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
   margin: 0 0 var(--spacing-md);
 }
 
+/* Archiv-Umschalter (Kategorie ↔ Jahr) */
+.archiv-toggle { display: inline-flex; gap: 0.3em; margin: 0 0 var(--spacing-md); }
+.archiv-toggle button {
+  font: inherit; font-size: var(--font-size-small); cursor: pointer;
+  padding: 0.3em 0.95em; border-radius: 999px;
+  background: none; border: 1px solid var(--color-border); color: var(--color-text-muted);
+}
+.archiv-toggle button:hover { border-color: var(--section-color, var(--accent)); color: var(--color-text-primary); }
+.archiv-toggle button.is-active {
+  background: var(--section-color, var(--accent));
+  border-color: var(--section-color, var(--accent));
+  color: var(--color-text-primary); font-weight: 600;
+}
+.archiv-view[hidden] { display: none; }
+
 .time-list ul {
   list-style: none;
   margin-left: 0;

layouts/archiv/list.html

@@ -1,10 +1,18 @@
 {{ define "main" }}
   {{ if eq .Path "/archiv" }}
-      {{/* Archiv root: Titel + Intro + Atlas (je Kategorie die letzten 10) */}}
+      {{/* Archiv-Übersicht: Umschalter Kategorie ↔ Jahr */}}
       <div class="collection" style="--section-color: var(--palette-kusa)">
       <h1 class="collection-title">{{ .Title }}</h1>
       <div class="collection-inner">
       {{ .Content }}
+
+      <div class="archiv-toggle" role="group" aria-label="Sortierung">
+        <button type="button" data-mode="cat" class="is-active">nach Kategorie</button>
+        <button type="button" data-mode="year">nach Jahr</button>
+      </div>
+
+      {{/* Ansicht nach Kategorie — Jahr hinter dem Beitrag, je Rubrik die letzten 10 */}}
+      <div class="archiv-view" data-view="cat">
         <section class="atlas">
           {{ range .Sections.ByWeight }}
             {{ $section := path.Base .RelPermalink }}
@@ -15,7 +23,7 @@
                 {{ range first 10 .RegularPages.ByDate.Reverse }}
                   <li>
                     <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-                  <span class="list-meta text-muted"> · {{ partial "date.html" .Date }}</span>
+                    <span class="list-meta text-muted"> · {{ .Date.Format "2006" }}</span>
                   </li>
                 {{ end }}
               </ul>
@@ -25,7 +33,6 @@
             </article>
           {{ end }}
 
-        {{/* Tag-Cloud */}}
           {{ with site.Taxonomies.tags }}
             <article class="atlas-tags">
               <h2>Tags</h2>
@@ -38,7 +45,42 @@
           {{ end }}
         </section>
       </div>
+
+      {{/* Ansicht nach Jahr — Kategorie hinter dem Beitrag, alle Beiträge */}}
+      <div class="archiv-view" data-view="year" hidden>
+        {{ $all := where site.RegularPages "Section" "archiv" }}
+        {{ range $all.GroupByDate "2006" }}
+          <article class="atlas-section">
+            <h2>{{ .Key }}</h2>
+            <ul class="atlas-list">
+              {{ range .Pages }}
+                <li>
+                  <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+                  {{ with .CurrentSection }}<span class="list-meta text-muted"> · {{ .LinkTitle }}</span>{{ end }}
+                </li>
+              {{ end }}
+            </ul>
+          </article>
+        {{ end }}
       </div>
+
+      <script>
+        (function () {
+          var bar = document.querySelector('.archiv-toggle'); if (!bar) return;
+          var views = document.querySelectorAll('.archiv-view');
+          function set(mode) {
+            bar.querySelectorAll('button').forEach(function (b) { b.classList.toggle('is-active', b.dataset.mode === mode); });
+            views.forEach(function (v) { v.hidden = v.dataset.view !== mode; });
+            try { localStorage.setItem('ob_archiv_mode', mode); } catch (e) {}
+          }
+          bar.addEventListener('click', function (e) { var b = e.target.closest('button'); if (b) set(b.dataset.mode); });
+          var saved; try { saved = localStorage.getItem('ob_archiv_mode'); } catch (e) {}
+          if (saved === 'year') set('year');
+        })();
+      </script>
+      </div>
+      </div>
+
     {{ else if eq .Path "/archiv/software" }}
       {{/* Software: kuratierte Landing — Werkzeuge (mit externem Link) getrennt
            von Texten & Anleitungen. */}}
@@ -88,8 +130,9 @@
           </ul>
         </div>
       </section>
+
     {{ else }}
-      {{/* Library subsection: chronologisch */}}
+      {{/* Archiv-Unterseite (Rubrik): chronologisch */}}
       {{ $section := path.Base .RelPermalink }}
       <header class="section-header" data-section="{{ $section }}">
         <p class="section-rubric">Archiv</p>