P2: Typografie-Hierarchie — Seiten-/Karten-/Tabellen-Header

- h1: text-2xl font-bold text-slate-900
- Karten-h2: text-base font-semibold text-slate-800
- th: text-xs font-medium uppercase tracking-wider text-slate-500

plugins/archiv/templates/archiv/index.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block titel %}{{ titel }} — Spiele-Redaktion{% endblock %}
 {% block inhalt %}
-<h1 class="text-2xl font-bold mb-2">{{ titel }}</h1>
+<h1 class="text-2xl font-bold text-slate-900 mb-2">{{ titel }}</h1>
 <p class="text-slate-600 max-w-3xl mb-4">
   Sicherungsdatei der Redaktion: Titel, deren Erscheinungs- bzw. Eintragsdatum
   mehr als 12 Monate zur&uuml;ckliegt, werden t&auml;glich automatisch aus den
@@ -112,16 +112,16 @@
   <table class="w-full text-sm">
     <thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
       <tr>
-        <th class="px-4 py-3 font-medium">Cover</th>
-        <th class="px-4 py-3 font-medium">Spieltitel</th>
-        <th class="px-4 py-3 font-medium">Herkunft</th>
-        <th class="px-4 py-3 font-medium">Verlag</th>
-        <th class="px-4 py-3 font-medium">Jahr / Ausgabe</th>
-        <th class="px-4 py-3 font-medium">Status</th>
-        <th class="px-4 py-3 font-medium">Rezensent</th>
-        <th class="px-4 py-3 font-medium">Archiviert am</th>
-        <th class="px-4 py-3 font-medium">Grund</th>
-        <th class="px-4 py-3 font-medium">Aktionen</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Cover</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Spieltitel</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Herkunft</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Verlag</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Jahr / Ausgabe</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Status</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Rezensent</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Archiviert am</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Grund</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Aktionen</th>
       </tr>
     </thead>
     <tbody class="divide-y divide-slate-100">

plugins/audit-log/templates/audit-log/index.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block titel %}{{ titel }} — {{ app_name }}{% endblock %}
 {% block inhalt %}
-<h1 class="text-2xl font-bold mb-1">{{ titel }}</h1>
+<h1 class="text-2xl font-bold text-slate-900 mb-1">{{ titel }}</h1>
 <p class="text-slate-600 mb-4 text-sm">
   Protokoll aller relevanten Ereignisse — nur für Administratoren sichtbar.
 </p>
@@ -65,12 +65,12 @@
   <table class="w-full text-sm">
     <thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
       <tr>
-        <th class="px-4 py-2 font-medium whitespace-nowrap">Zeitpunkt</th>
-        <th class="px-4 py-2 font-medium">Benutzer</th>
-        <th class="px-4 py-2 font-medium">Aktion</th>
-        <th class="px-4 py-2 font-medium">Objekt</th>
-        <th class="px-4 py-2 font-medium">Änderung / Details</th>
-        <th class="px-4 py-2 font-medium">IP</th>
+        <th class="px-4 py-2 font-medium whitespace-nowrap text-xs uppercase tracking-wider">Zeitpunkt</th>
+        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">Benutzer</th>
+        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">Aktion</th>
+        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">Objekt</th>
+        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">Änderung / Details</th>
+        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">IP</th>
       </tr>
     </thead>
     <tbody class="divide-y divide-slate-100">

plugins/benachrichtigung/templates/benachrichtigung/einstellungen.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block titel %}{{ titel }} — {{ app_name }}{% endblock %}
 {% block inhalt %}
-<h1 class="text-2xl font-bold mb-1">Benachrichtigungen &mdash; Einstellungen</h1>
+<h1 class="text-2xl font-bold text-slate-900 mb-1">Benachrichtigungen &mdash; Einstellungen</h1>
 <p class="text-slate-600 mb-4">
   W&auml;hlen Sie, &uuml;ber welche Kan&auml;le Sie Benachrichtigungen erhalten.
   Mehrere Kan&auml;le sind gleichzeitig m&ouml;glich.

plugins/benachrichtigung/templates/benachrichtigung/index.html

@@ -2,7 +2,7 @@
 {% block titel %}{{ titel }} — {{ app_name }}{% endblock %}
 {% block inhalt %}
 <div class="flex flex-wrap items-center gap-3 mb-1">
-  <h1 class="text-2xl font-bold">{{ titel }}</h1>
+  <h1 class="text-2xl font-bold text-slate-900">{{ titel }}</h1>
   <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-medium
                {% if ungelesen %}bg-red-100 text-red-700{% else %}bg-slate-200 text-slate-500{% endif %}">
     {{ ungelesen }} ungelesen

plugins/dedup/templates/dedup/index.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block titel %}{{ titel }} — Spiele-Redaktion{% endblock %}
 {% block inhalt %}
-<h1 class="text-2xl font-bold mb-2">{{ titel }}</h1>
+<h1 class="text-2xl font-bold text-slate-900 mb-2">{{ titel }}</h1>
 <p class="text-slate-600 mb-4">
   Die Prüfung läuft automatisch bei jeder Eintragung in die Planungsliste.
   Hier kann sie auch von Hand für einen Titel ausgeführt werden.
@@ -27,7 +27,7 @@
 </div>
 
 <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 mb-6">
-  <h2 class="font-semibold mb-3">Titel pr&uuml;fen</h2>
+  <h2 class="text-base font-semibold text-slate-800 mb-3">Titel pr&uuml;fen</h2>
   <form method="post" action="/dedup/pruefen" class="flex flex-wrap items-end gap-3">
     <div>
       <label for="titel" class="block text-xs font-medium text-slate-500 mb-1">Spieltitel *</label>
@@ -83,16 +83,16 @@
 </div>
 
 <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-x-auto">
-  <h2 class="font-semibold px-4 pt-4 pb-2">Letzte Pr&uuml;fungen</h2>
+  <h2 class="text-base font-semibold text-slate-800 px-4 pt-4 pb-2">Letzte Pr&uuml;fungen</h2>
   <table class="w-full text-sm">
     <thead class="bg-slate-50 text-left text-slate-500">
       <tr>
-        <th class="px-4 py-2 font-medium">Zeitpunkt</th>
-        <th class="px-4 py-2 font-medium">Titel</th>
-        <th class="px-4 py-2 font-medium">Verlag</th>
-        <th class="px-4 py-2 font-medium">BGG-ID</th>
-        <th class="px-4 py-2 font-medium">Gepr&uuml;ft von</th>
-        <th class="px-4 py-2 font-medium">Befund</th>
+        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">Zeitpunkt</th>
+        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">Titel</th>
+        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">Verlag</th>
+        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">BGG-ID</th>
+        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">Gepr&uuml;ft von</th>
+        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">Befund</th>
       </tr>
     </thead>
     <tbody class="divide-y divide-slate-100">

plugins/erinnerung/templates/erinnerung/bearbeiten.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block titel %}{{ titel_headline }} — Spiele-Redaktion{% endblock %}
 {% block inhalt %}
-<h1 class="text-2xl font-bold mb-2">Ausgabe bearbeiten</h1>
+<h1 class="text-2xl font-bold text-slate-900 mb-2">Ausgabe bearbeiten</h1>
 <p class="text-slate-600 mb-4">&bdquo;{{ ausgabe.name }}&ldquo; &middot; Redaktionsschluss:
   {{ ausgabe.redaktionsschluss.strftime('%d.%m.%Y') }}
 </p>

plugins/erinnerung/templates/erinnerung/index.html

@@ -2,7 +2,7 @@
 {% block titel %}{{ titel }} — Spiele-Redaktion{% endblock %}
 {% block inhalt %}
 <div x-data="{ loeschFormular: null, loeschTitel: '' }">
-<h1 class="text-2xl font-bold mb-2">{{ titel }}</h1>
+<h1 class="text-2xl font-bold text-slate-900 mb-2">{{ titel }}</h1>
 <p class="text-slate-600 mb-4">
   Redaktionsschl&uuml;sse der kommenden Ausgaben. Vier Wochen vor jedem
   Redaktionsschluss erhalten alle Rezensenten eine Erinnerung, die noch offene
@@ -18,7 +18,7 @@
 
 {% if ist_admin %}
 <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 mb-6">
-  <h2 class="font-semibold mb-3">Neue Ausgabe anlegen</h2>
+  <h2 class="text-base font-semibold text-slate-800 mb-3">Neue Ausgabe anlegen</h2>
   <form method="post" action="/erinnerung/ausgaben" class="flex flex-wrap items-end gap-3">
     <div>
       <label for="name" class="block text-xs font-medium text-slate-500 mb-1">Name/Titel der Ausgabe *</label>
@@ -43,11 +43,11 @@
   <table class="w-full text-sm">
     <thead class="bg-slate-50 text-left text-slate-500">
       <tr>
-        <th class="px-4 py-3 font-medium">Ausgabe</th>
-        <th class="px-4 py-3 font-medium">Redaktionsschluss</th>
-        <th class="px-4 py-3 font-medium">Restzeit</th>
-        <th class="px-4 py-3 font-medium">Erinnerungen</th>
-        {% if ist_admin %}<th class="px-4 py-3 font-medium">Aktionen</th>{% endif %}
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Ausgabe</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Redaktionsschluss</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Restzeit</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Erinnerungen</th>
+        {% if ist_admin %}<th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Aktionen</th>{% endif %}
       </tr>
     </thead>
     <tbody class="divide-y divide-slate-100">
@@ -100,7 +100,7 @@
 {% if ist_admin %}
 <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 mb-6 flex flex-wrap items-center gap-3">
   <div class="mr-auto">
-    <h2 class="font-semibold">Sofort pr&uuml;fen</h2>
+    <h2 class="text-base font-semibold text-slate-800">Sofort pr&uuml;fen</h2>
     <p class="text-xs text-slate-500">F&uuml;hrt denselben Check aus wie der t&auml;gliche Hintergrund-Job ({{ fenster_tage }} Tage vor dem Redaktionsschluss). Doppelerinnerungen sind ausgeschlossen.</p>
   </div>
   <form method="post" action="/erinnerung/pruefen">
@@ -112,16 +112,16 @@
 </div>
 
 <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 mb-6">
-  <h2 class="font-semibold mb-3">Erinnerungsstatus</h2>
+  <h2 class="text-base font-semibold text-slate-800 mb-3">Erinnerungsstatus</h2>
   <p class="text-xs text-slate-500 mb-3">Wer wurde f&uuml;r welche Ausgabe wann erinnert? Pro Ausgabe und Benutzer wird h&ouml;chstens einmal erinnert.</p>
   <div class="overflow-x-auto">
     <table class="w-full text-sm">
       <thead class="bg-slate-50 text-left text-slate-500">
         <tr>
-          <th class="px-4 py-3 font-medium">Ausgabe</th>
-          <th class="px-4 py-3 font-medium">Rezensent</th>
-          <th class="px-4 py-3 font-medium">Kan&auml;le</th>
-          <th class="px-4 py-3 font-medium">Erinnert am</th>
+          <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Ausgabe</th>
+          <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Rezensent</th>
+          <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Kan&auml;le</th>
+          <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Erinnert am</th>
         </tr>
       </thead>
       <tbody class="divide-y divide-slate-100">

plugins/export/templates/export/index.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block titel %}{{ titel }} — Spiele-Redaktion{% endblock %}
 {% block inhalt %}
-<h1 class="text-2xl font-bold mb-2">{{ titel }}</h1>
+<h1 class="text-2xl font-bold text-slate-900 mb-2">{{ titel }}</h1>
 <p class="text-slate-600 mb-4 max-w-3xl">
   Redaktionslisten als Datei herunterladen:
   <strong>CSV</strong> (Semikolon-getrennt, UTF-8 mit BOM &mdash; direkt in Excel

plugins/neuheiten/templates/neuheiten/_liste.html

@@ -55,10 +55,10 @@
   <table class="w-full text-sm">
     <thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
       <tr>
-        <th class="px-4 py-3 font-medium">Cover</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Cover</th>
         {% set basis = '/neuheiten?q=' ~ (q | urlencode) ~ '&status=' ~ (status_filter | urlencode) %}
         {% for key, label in [('titel', 'Spieltitel'), ('verlag', 'Verlag'), ('autor', 'Autor'), ('jahr', 'Erscheinungsjahr'), ('status', 'Status'), ('aktualisiert', 'Aktualisiert')] %}
-        <th class="px-4 py-3 font-medium whitespace-nowrap">
+        <th class="px-4 py-3 font-medium whitespace-nowrap text-xs uppercase tracking-wider">
           {% if sort == key %}
             <a href="{{ basis }}&sort={{ key }}&richtung={{ 'auf' if richtung == 'ab' else 'ab' }}"
                class="inline-flex items-center gap-1 hover:text-emerald-700">{{ label }}
@@ -71,7 +71,7 @@
           {% endif %}
         </th>
         {% endfor %}
-        <th class="px-4 py-3 font-medium">Aktion</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Aktion</th>
       </tr>
     </thead>
     <tbody class="divide-y divide-slate-100">

plugins/neuheiten/templates/neuheiten/index.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block titel %}{{ titel }} — Spiele-Redaktion{% endblock %}
 {% block inhalt %}
-<h1 class="text-2xl font-bold mb-2">{{ titel }}</h1>
+<h1 class="text-2xl font-bold text-slate-900 mb-2">{{ titel }}</h1>
 <p class="text-slate-600 mb-4">
   Neuheitenliste aus der <a href="https://boardgamegeek.com" class="text-emerald-700 underline">BoardGameGeek</a>-Datenbank.
   Erweiterungen und Prototypen werden beim Sync automatisch gefiltert.
@@ -57,13 +57,13 @@
     <table class="w-full text-xs">
       <thead class="text-left text-slate-400">
         <tr>
-          <th class="px-2 py-1.5 font-medium">Quelle</th>
-          <th class="px-2 py-1.5 font-medium">Status</th>
-          <th class="px-2 py-1.5 font-medium">Letzter Lauf</th>
-          <th class="px-2 py-1.5 font-medium text-right">Neu</th>
-          <th class="px-2 py-1.5 font-medium text-right">Aktualisiert</th>
-          <th class="px-2 py-1.5 font-medium text-right">Gefiltert</th>
-          <th class="px-2 py-1.5 font-medium">Hinweis</th>
+          <th class="px-2 py-1.5 font-medium text-xs uppercase tracking-wider">Quelle</th>
+          <th class="px-2 py-1.5 font-medium text-xs uppercase tracking-wider">Status</th>
+          <th class="px-2 py-1.5 font-medium text-xs uppercase tracking-wider">Letzter Lauf</th>
+          <th class="px-2 py-1.5 font-medium text-right text-xs uppercase tracking-wider">Neu</th>
+          <th class="px-2 py-1.5 font-medium text-right text-xs uppercase tracking-wider">Aktualisiert</th>
+          <th class="px-2 py-1.5 font-medium text-right text-xs uppercase tracking-wider">Gefiltert</th>
+          <th class="px-2 py-1.5 font-medium text-xs uppercase tracking-wider">Hinweis</th>
         </tr>
       </thead>
       <tbody class="divide-y divide-slate-100">

plugins/planung/templates/planung/bearbeiten.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block titel %}{{ titel_headline }} — Spiele-Redaktion{% endblock %}
 {% block inhalt %}
-<h1 class="text-2xl font-bold mb-2">Eintrag bearbeiten</h1>
+<h1 class="text-2xl font-bold text-slate-900 mb-2">Eintrag bearbeiten</h1>
 <p class="text-slate-600 mb-4">„{{ eintrag.titel }}“ &middot; Rezensent:
   {% if user.id == eintrag.rezensent_id %}du{% else %}{{ user.display_name }}{% endif %}
 </p>

plugins/planung/templates/planung/index.html

@@ -2,7 +2,7 @@
 {% block titel %}{{ titel }} — Spiele-Redaktion{% endblock %}
 {% block inhalt %}
 <div x-data="{ loeschFormular: null, loeschTitel: '' }">
-<h1 class="text-2xl font-bold mb-2">{{ titel }}</h1>
+<h1 class="text-2xl font-bold text-slate-900 mb-2">{{ titel }}</h1>
 <p class="text-slate-600 mb-4">
   Planungsliste der Redaktion: wer reviewt welches Spiel f&uuml;r welche Ausgabe.
   Jede Eintragung &mdash; aus den Neuheiten verschoben oder h&auml;ndisch nachgetragen &mdash;
@@ -17,7 +17,7 @@
 {% endif %}
 
 <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 mb-6">
-  <h2 class="font-semibold mb-3">Titel h&auml;ndisch nachtragen</h2>
+  <h2 class="text-base font-semibold text-slate-800 mb-3">Titel h&auml;ndisch nachtragen</h2>
   <!-- Mobil: Felder untereinander vollbreit; ab sm: flexibel nebeneinander -->
   <form method="post" action="/planung/neu" class="grid grid-cols-1 gap-3 sm:flex sm:flex-wrap sm:items-end">
     <div class="sm:w-64 lg:w-72">
@@ -137,14 +137,14 @@
   <table class="w-full text-sm">
     <thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
       <tr>
-        <th class="px-4 py-3 font-medium">Cover</th>
-        <th class="px-4 py-3 font-medium">Spieltitel</th>
-        <th class="px-4 py-3 font-medium">Verlag</th>
-        <th class="px-4 py-3 font-medium">Ausgabe</th>
-        <th class="px-4 py-3 font-medium">Rezensent</th>
-        <th class="px-4 py-3 font-medium">Status</th>
-        <th class="px-4 py-3 font-medium">Aktualisiert</th>
-        <th class="px-4 py-3 font-medium">Aktionen</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Cover</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Spieltitel</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Verlag</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Ausgabe</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Rezensent</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Status</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Aktualisiert</th>
+        <th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Aktionen</th>
       </tr>
     </thead>
     <tbody class="divide-y divide-slate-100">

plugins/planung/templates/planung/pruefung.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block titel %}{{ titel_headline }} — Spiele-Redaktion{% endblock %}
 {% block inhalt %}
-<h1 class="text-2xl font-bold mb-2">{{ titel_headline }}</h1>
+<h1 class="text-2xl font-bold text-slate-900 mb-2">{{ titel_headline }}</h1>
 <p class="text-slate-600 mb-4">
   Die automatische Dedup-Pr&uuml;fung hat Treffer ergeben. Bitte pr&uuml;fen, bevor
   der Eintrag angelegt wird.
@@ -41,7 +41,7 @@
   <input type="hidden" name="{{ name }}" value="{{ wert }}">
   {% endfor %}
 
-  <h2 class="font-semibold mb-3">Welcher Verlag soll gef&uuml;hrt werden?</h2>
+  <h2 class="text-base font-semibold text-slate-800 mb-3">Welcher Verlag soll gef&uuml;hrt werden?</h2>
   <div class="space-y-2 mb-4 text-sm">
     {% for option in verlags_optionen %}
     <label class="flex items-center gap-2 cursor-pointer">