Beitragsblock: Sektions-Kopf nach Hausmuster, Preise größer

Drei Dinge, zwei aus deinem Feedback und eines von mir.

1) Der Einleitungstext klebte ohne Abstand an der Überschrift und lief über die
   volle Breite, über 120 Zeichen je Zeile ("schaut weird aus"). Ursache: ich
   hatte <p class="lead"> geschrieben — eine Klasse, die es im Projekt gar nicht
   gibt, der Absatz war also völlig unformatiert. Jetzt das etablierte Muster
   (.membership-signup__head, instagram, partners): zentrierter Kopf, 60ch breit,
   Luft nach unten. Anmerkung im Code: dasselbe Kopf-Muster steht damit zum
   vierten Mal fast gleich in components.css — ein gemeinsames .section__head
   wäre die Aufräumung, aber ein eigener Umbau.

2) Preise von 28px auf 34px. Sie tragen die Hervorhebung allein, seit die Farbe
   weg ist, und sind die Information, auf die man in einer Beitragstabelle sieht.

3) Selbst aufgefallen: die Überschrift "Austritt" lag in .prose und rendert dort
   mit 21px Abel — exakt Fließtextgröße, also gar keine Auszeichnung. In
   Impressum und Artikeln ist das richtig, deshalb .prose nicht angetastet,
   sondern eigene Klassen für den Hinweis: 28px Coolvetica (die Untergrenze für
   Versalien) mit derselben dezenten Sperrung wie die Kartentitel.

Außerdem: data/turnen.json ist wieder in seiner ursprünglichen Formatierung.
Mein JSON-Schreiber hatte im vorigen Commit die kompakten Arrays aufgeklappt
("widths": [640, 1000, 1600] wurde vierzeilig) — inhaltlich identisch, aber 371
Diff-Zeilen für eine Umbenennung. Jetzt textuell ersetzt statt neu geschrieben:
17 Diff-Zeilen, Inhalt per Vergleich identisch.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
This commit is contained in:
2026-07-31 20:55:48 +02:00
parent 6bc6b0d599
commit 75c06dbd04
3 changed files with 109 additions and 305 deletions

View File

@@ -4140,6 +4140,41 @@
}
/* === fee-table (Beitragstabellen) === */
/* Sektions-Kopf der Beitragsseite. Dieselben Werte wie .membership-signup__head
(und damit wie instagram/partners): zentriert, auf 60 Zeichen begrenzt, mit Luft
nach unten. Hier stand zuerst ein linksbündiger h2 mit einem <p class="lead">
darunter — eine Klasse, die es im Projekt gar nicht gibt. Der Absatz hatte
dadurch keinen Abstand zur Überschrift und lief über die volle Breite, also über
120 Zeichen je Zeile (Felix: „schaut weird aus", 31.07.2026).
Anmerkung fürs nächste Mal: dieses Kopf-Muster steht jetzt zum vierten Mal
fast gleich in dieser Datei. Ein gemeinsames .section__head wäre die Aufräumung,
das ist aber ein eigener Umbau über mehrere Komponenten. */
.fees__head {
max-width: 60ch;
margin: 0 auto var(--space-3xl);
text-align: center;
}
.fees__intro {
margin-top: var(--space-s);
color: var(--clr-text-muted);
}
/* Austritts-Hinweis unter den Tabellen: Lesespalte, aber mit eigener Überschrift.
--fs-650 ist die Untergrenze für Coolvetica in Versalien (CLAUDE.md), plus die
dezente Sperrung aus demselben Grund wie bei den Kartentiteln. */
.fees__note {
max-width: 72ch;
margin-top: var(--space-3xl);
}
.fees__note-title {
font-size: var(--fs-650);
letter-spacing: var(--ls-heading);
line-height: var(--lh-heading);
margin-bottom: var(--space-s);
}
/* Mehrere Tabellen nebeneinander (Turnen hat drei: Zusatzbeitrag, Neumitglieder,
Förderstufen). auto-fit mit 22rem Mindestbreite statt einer festen Spaltenzahl:
bei drei Tabellen ergibt das auf Desktop eine Reihe, am Handy eine Spalte, und
@@ -4212,7 +4247,11 @@
margin: 0;
flex: none;
font-family: var(--ff-heading);
font-size: var(--fs-650);
/* --fs-675 (34px) statt --fs-650: der Preis ist die Information, auf die man in
einer Beitragstabelle schaut, und trägt hier allein die Hervorhebung, seit die
Farbe weg ist. Gleiche Stufe wie der Kartentitel, aber an anderer Position —
sie konkurrieren nicht. */
font-size: var(--fs-675);
line-height: 1;
/* WEISS, nicht Akzentrot. Rot auf dem Kartengrund erreicht nur 3,50:1 und
verfehlt damit die 4,5:1 für Fließtext — und ein Beitrag ist Information, die