Design-System: Typo-Skala schließen, h4–h6 auf Abel, Icon-Größen tokenisieren

Zweiter Teil der Konsolidierung. Vorher standen 31 font-size-Werte außerhalb
der Skala — beim Durchgehen stellte sich heraus, dass 20 davon gar keine
Textgrößen sind: der icon()-Helper rendert 1em, also steuerte font-size dort
die Icon-Größe. Dafür gibt es jetzt eine eigene, kleine Skala (--icon-s/m/l/xl
in rem, --icon-inline-sm/--icon-inline/--icon-inline-lg in em für Icons, die im
Textfluss mitwachsen sollen). Elf Ad-hoc-Werte fallen damit auf sieben Stufen.

h4–h6 laufen nicht mehr über Coolvetica. Sie lagen mit 26px und 21px unter der
--fs-650-Grenze aus CLAUDE.md, ab der der Condensed-Schnitt in Uppercase
unleserlich wird — die Regel war also nur dokumentiert, nicht durchsetzbar.
Jetzt tragen h1–h3 Coolvetica (alle über der Grenze) und h4–h6 Abel mit
Sperrung. Bezeichnend: das einzige <h4> im Markup hatte sich genau dieses
Muster bereits von Hand gebaut. Die Basisregel liefert es jetzt, die Komponente
gibt ihre drei Duplikat-Deklarationen ab — sichtbar ändert sich dadurch nichts.

Neue Stufen schließen die Lücken: --fs-550 (fluider Lead), --fs-690 (Karten-
Überschrift) und --fs-1000 (Display-Hero). Vier fast deckungsgleiche clamp()-
Rampen für Karten-Überschriften (bento__heading, bento__stat-value,
group-card__name, team-card__name) laufen jetzt über --fs-690; team-card__name
wächst dabei am Desktop um ~5px, die anderen drei bleiben im 1px-Bereich.

Die Wappen-Initialen im Matchcenter hingen an zwei Mini-Schriftgrößen (10,4 und
11,2px) unterhalb der Skala. Sie sind in Wahrheit ~0,4 × Kreisdurchmesser,
folgen jetzt also --crest-size statt einer eigenen font-size. Nebenbei fallen
drei redundante Doppel-Selektoren weg: .crest--initials trägt immer auch .crest.

Ebenfalls tokenisiert: 27 letter-spacing-Werte mit elf verschiedenen Zahlen auf
vier Stufen (--ls-tight/caps/wide/wider), maximale Abweichung 0,02em.

Danach steht kein font-size- und kein letter-spacing-Wert mehr außerhalb von
tokens.css.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
This commit is contained in:
2026-07-27 10:17:13 +02:00
parent 87055bd14b
commit 3fa521eaf1
10 changed files with 365 additions and 114 deletions

View File

@@ -5,9 +5,10 @@ declare(strict_types=1);
/**
* Datenschutzerklärung — zugeschnitten auf den tatsächlichen Stack:
* komplett self-hosted, keine Tracker/Analyse/Werbe-Dienste, keine externen
* Fonts/Maps/Embeds. Einzige Verarbeitungen: Server-Logs (Hoster),
* Kontaktformular (Versand via Brevo SMTP), server-seitig gecachter
* Instagram-Feed (Bilder von unserer Domain). Vereinsdaten aus club.json.
* Fonts/Maps/Embeds. Einzige Verarbeitungen: Server-Logs (Hoster), die drei
* Formulare (Versand über den All-Inkl-Mailserver, also derselbe Auftrags-
* verarbeiter wie beim Hosting), server-seitig gecachter Instagram-Feed
* (Bilder von unserer Domain). Vereinsdaten aus club.json.
*/
$club = json_load('club');
$addr = $club['address'] ?? [];
@@ -125,11 +126,11 @@ $meta = [
</section>
<section>
<h2>Kontaktformular &amp; Kontaktaufnahme</h2>
<h2>Formulare &amp; Kontaktaufnahme</h2>
<p>
Wenn du uns über das Kontaktformular oder per E-Mail kontaktierst, verarbeiten
wir die von dir angegebenen Daten, um deine Anfrage zu bearbeiten. Über das
Formular sind das:
Wenn du uns über eines unserer Formulare oder per E-Mail kontaktierst,
verarbeiten wir die von dir angegebenen Daten, um deine Anfrage zu bearbeiten.
Über das <strong>Kontaktformular</strong> sind das:
</p>
<ul>
<li>Name (Pflichtangabe)</li>
@@ -137,6 +138,20 @@ $meta = [
<li>Telefonnummer (freiwillig)</li>
<li>dein Interessensgebiet, Betreff und deine Nachricht</li>
</ul>
<p>
Über den <strong>Mitgliedsantrag</strong> verarbeiten wir zusätzlich Vorname,
Nachname, Geburtsdatum, Anschrift und die gewählte Beitragsklasse. Diese Angaben
brauchen wir, um die Mitgliedschaft vorzubereiten; die Beitrittserklärung senden
wir dir anschließend per Post zu. Bankdaten erheben wir online bewusst nicht.
Rechtsgrundlage ist hier Art. 6 Abs. 1 lit. b DSGVO (Anbahnung und Durchführung
der Mitgliedschaft). An die von dir angegebene Adresse senden wir außerdem eine
Eingangsbestätigung.
</p>
<p>
Über das Formular <strong>Sportheimbuchung</strong> verarbeiten wir Name,
E-Mail-Adresse, optional die Telefonnummer sowie Art, Datum und Personenzahl
deiner Veranstaltung, um dir ein Angebot machen zu können.
</p>
<p>
Rechtsgrundlage ist deine Einwilligung (Art. 6 Abs. 1 lit. a DSGVO), die du
mit dem Absenden erteilst, sowie unser berechtigtes Interesse bzw. die
@@ -146,16 +161,19 @@ $meta = [
Aufbewahrungspflichten entgegenstehen.
</p>
<p>
Für den technischen Versand der Formular-Nachrichten als E-Mail nutzen wir den
Dienstleister Brevo (Sendinblue GmbH, Köln) als Auftragsverarbeiter. Dabei
werden die im Formular angegebenen Daten an die Mailserver von Brevo
übermittelt. Die Übertragung erfolgt verschlüsselt.
Der technische Versand der Formular-Nachrichten als E-Mail läuft über den
Mailserver unseres Webhosters ALL-INKL.COM (siehe oben) — die Daten bleiben
damit innerhalb der dort genannten Auftragsverarbeitung. Die Übertragung zum
Mailserver ist verschlüsselt (STARTTLS). Einen zusätzlichen
E-Mail-Dienstleister setzen wir nicht ein.
</p>
<p class="legal__muted">
Hinweis: Zum Schutz vor automatisiertem Spam verwenden wir ein verstecktes
Pflichtfeld sowie einen signierten Zeitstempel. Dabei werden keine
zusätzlichen personenbezogenen Daten erhoben und keine externen Dienste
(z.&nbsp;B. reCAPTCHA) eingebunden.
Pflichtfeld und einen signierten Zeitstempel. Außerdem begrenzen wir, wie oft
von einem Anschluss abgesendet werden kann. Dafür speichern wir deine
IP-Adresse nicht im Klartext, sondern nur als Hashwert, der mit einem
geheimen Schlüssel gebildet wird; die Zähler werden spätestens nach 24 Stunden
gelöscht. Externe Dienste (z.&nbsp;B. reCAPTCHA) binden wir nicht ein.
</p>
</section>