# Willkommen beim tbsch-Theme

> Ein Überblick über das tbsch-Theme: was es kann, wie diese Demo aufgebaut ist und wo du anfängst.

_Quelle: https://theme.docs.tbsch.de/de/post/2026-02-23-willkommen/ · Stand: 2026-02-23_


<div class="tb-lead"><strong>tbsch</strong> ist ein eigenständiges <em>Hugo</em>-Theme - schnell, datenschutzfreundlich
und ohne externe CDNs. Diese Seite zeigt jede Funktion an einem echten Beispiel.</div>


Schön, dass du da bist! Diese Demo ist gleichzeitig die Dokumentation des
Themes. Statt einer trockenen Referenz findest du hier **lebende Beispiele**:
Jeder Beitrag stellt einen Funktionsbereich vor und zeigt im Quelltext, wie er
gemacht ist.

## Was das Theme mitbringt

- **Solarflare-Design** - eine Verlaufsfarbe von Orange über Pink nach Violett,
  Hintergrund-Heroes und ein schwebender Pill-Header.
- **Automatischer Dark Mode** mit manuellem Schalter und ohne Aufblitzen beim
  Laden.
- **Token-basiertes Design-System** - Abstände, Typografie, Radien und Bewegung
  als CSS-Custom-Properties.
- **Bilder, die sich selbst sortieren** - jedes Markdown-Bild wird zu *WebP*
  umgerechnet, responsiv ausgeliefert und per Lightbox zoombar.
- **Shortcodes** für Lead-Absätze, Buttons, Tabs, Galerien, GitHub-Karten,
  *Mermaid*-Diagramme, *KaTeX*-Mathe und Inline-Icons.
- **GitHub-Style-Admonitions** (`> [!note]`, `> [!warning]`, ...), auch aufklappbar.
- **Suche** (*Pagefind*, clientseitig), drei **Feeds** (RSS, Atom, JSON Feed) und
  ein **IndieWeb**-Setup (microformats2, Webmentions).
- **Datenschutz**: alle Schriften und Bibliotheken liegen lokal, externe
  Einbettungen laufen über den Consent-Manager *Klaro*.

> [!tip] So liest du diese Demo
> Sieh dir jeden Beitrag **gerendert** an und wirf parallel einen Blick in seine
> `index.md`. Der Markdown-Quelltext ist die eigentliche Anleitung.

## Wo du anfängst

| Thema | Beitrag |
| --- | --- |
| Markdown & Typografie | [Markdown-Grundlagen](/de/post/2026-01-12-markdown-grundlagen-typografie/) |
| Hinweisboxen | [Admonitions](/de/post/2026-01-19-admonitions-hinweisboxen/) |
| Shortcodes | [Shortcodes im Überblick](/de/post/2026-01-26-shortcodes/) |
| Bilder & Galerien | [Bilder und Galerien](/de/post/2026-02-02-bilder-und-galerien/) |
| Diagramme & Mathe | [Diagramme und Mathe](/de/post/2026-02-09-diagramme-und-mathe/) |
| Front Matter & SEO | [Front Matter und SEO](/de/post/2026-02-16-front-matter-und-seo/) |

Am besten arbeitest du dich der Reihe nach durch - oder springst direkt zu
dem Thema, das dich gerade interessiert.