republik-style redesign: dark masthead, hero block, palette, pills

- Dark full-bleed masthead with serif wordmark and stacked nav
- Hero entry treatment: full-bleed image bg with gradient overlay
- Per-section color system (data-section) + per-post override (data-color)
- Japanese accent palette (ajisai, sakura, suna, ichigo, yuyake, sora,
  kusa, kori, amagumo, yuki) — set via `color:` in front matter
- Tag pills replace hashtag-style tags; rendered as sibling of card link
  to avoid invalid nested <a> elements
- Single article: clean Republik-style header, no section rubric,
  tags as pills at bottom
- Cover image support (`cover_image:` in front matter):
    - wide mode: full-card banner above text
    - icon mode: small thumbnail right of text with colored card bg
- Library subsection header redesigned with section-colored stripe
- Dates use Swiss DD.MM.YYYY display (ISO retained in datetime attr)
- Custom Tokyo metro photo as demo cover image

layouts/_default/single.html

@@ -1,20 +1,28 @@
 {{ define "main" }}
-  {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
+  {{ $section := "" }}
+  {{ with .Parent }}{{ $section = path.Base .RelPermalink }}{{ end }}
+  {{ $cover := .Params.cover_image }}
+  {{ $color := .Params.color }}
 
-  <article class="single">
+  {{/* Cover image first (full-bleed, directly under the masthead) */}}
+  {{ if $cover }}
+    <img class="single-hero-image" src="{{ $cover | relURL }}" alt="" loading="eager" />
+  {{ end }}
+
+  <article class="single" data-section="{{ $section }}"{{ with $color }} data-color="{{ . }}"{{ end }}>
     <header class="single-header">
       <h1>{{ .Title }}</h1>
+      {{ with .Params.summary }}
+        <p class="single-summary">{{ . }}</p>
+      {{ end }}
       {{ $author := .Params.author | default site.Params.author.name }}
       {{ if or $author .Date }}
         <p class="single-byline">
-          {{ with $author }}<span class="byline-author">von {{ . }}</span>{{ end }}
-          {{ if and $author .Date }} · {{ end }}
-          {{ if .Date }}<time class="byline-date" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</time>{{ end }}
+          {{- with $author -}}<span class="byline-author">{{ . }}</span>{{- end -}}
+          {{- if and $author .Date -}}, {{ end -}}
+          {{- if .Date -}}<time class="byline-date" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "02.01.2006" }}</time>{{- end -}}
         </p>
       {{ end }}
-      {{ with .Params.summary }}
-        <p class="single-summary text-muted">{{ . }}</p>
-      {{ end }}
     </header>
 
     {{/* Table of Contents */}}
@@ -31,13 +39,20 @@
       {{ .Content }}
     </div>
 
+    {{/* Tags as small pills at the bottom — Republik-style, no hash symbol */}}
+    {{- with .Params.tags }}
+      <ul class="tag-pills" aria-label="Tags">
+        {{- range . -}}<li><a href="/tags/{{ . | urlize }}/">{{ . }}</a></li>{{- end -}}
+      </ul>
+    {{- end }}
+
     {{ $showReadingTime := .Params.showreadingtime | default site.Params.showreadingtime | default true }}
     {{ $showLastMod := .Params.showlastmod | default site.Params.showlastmod | default false }}
     {{ $hasLastmod := and $showLastMod .Lastmod (ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02")) }}
     {{ if or (and $showReadingTime .ReadingTime) $hasLastmod }}
       <div class="time">
         {{ if and $showReadingTime .ReadingTime }}<span class="reading-time">{{ .ReadingTime }} min Lesezeit</span>{{ end }}
-        {{ if $hasLastmod }}{{ if and $showReadingTime .ReadingTime }} · {{ end }}<span class="lastmod">Zuletzt aktualisiert: {{ .Lastmod.Format "2006-01-02" }}</span>{{ end }}
+        {{ if $hasLastmod }}{{ if and $showReadingTime .ReadingTime }} · {{ end }}<span class="lastmod">Zuletzt aktualisiert: {{ .Lastmod.Format "02.01.2006" }}</span>{{ end }}
       </div>
     {{ end }}
   </article>