Die Turnabteilung (Maxi) beantwortet laufend Anfragen nach einem Wartelistenplatz
für „Tiger" und „Hühner", den es nicht gibt. Auf der alten Seite stand der Hinweis
direkt über dem Anfrageformular, hier fehlte er.
Schlimmer: an der Stelle stand das GEGENTEIL. Der bisherige Hinweis lautete
"Aktuell sind alle Kinderturngruppen belegt. Bei Interesse setzen wir sie gerne
auf die Warteliste." — für alle Kindergruppen, also auch für die beiden, die
keine Liste führen. Der Satz hat einen Teil der Anfragen vermutlich erst erzeugt.
Er ist nicht gelöscht, sondern auf die übrigen Gruppen eingegrenzt und aufs Du
umgestellt (Haus-Stil; vorher stand dort klein "sie").
Der Text steht genau EINMAL, in data/turnen.json unter
disciplines.eltern-kind-turnen.notice + notice_title. Zwei Stellen lesen ihn:
die rote Kachel auf /turnen/eltern-kind-turnen (gab es schon) und neu ein Block
direkt über dem Formular auf /turnen. Ändert die Abteilung die Lage, ist das eine
Zeile in einer Datei.
Umsetzung:
- notice_title ist neu, weil eine rote Fläche ohne Überschrift wie eine
Fehlermeldung liest. Abel statt Coolvetica, der Schnitt ist bei ~19px in
Versalien unleserlich (CLAUDE.md, Design).
- Der Block steht AUSSERHALB des <form> und damit außerhalb der
role="status"-Region: ein dauerhafter Hinweis, keine Rückmeldung zum Absenden.
In der Live-Region läse ihn ein Screenreader bei jeder Formularmeldung erneut
vor. Kein role="alert", er steht schon beim Laden da.
- Überschrift als h3 unter der h2 des Intro-Blocks, damit die Folge nicht springt.
- .contact__notice übernimmt bewusst die Optik von .turnen-dash__notice, damit
beide Stellen als derselbe Hinweis erkennbar sind. Weiß auf --clr-accent
erreicht 4,92:1 und trägt damit Fließtext (WCAG 1.4.3). Kommt ein dritter Ort
dazu, gehören die gemeinsamen Eigenschaften in eine geteilte .notice-Klasse;
für zwei wäre das verfrüht.
Gemessen: Hinweisbreite gleich Formularbreite (720px bei 1280, 347px bei 390),
kein Überlauf. preflight ohne neue Meldungen.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Auf schmalen Bildschirmen stapeln sich Container- und Kartenabstand so, dass für
den Inhalt kaum Breite bleibt. Gemessen bei 309px: Container 11,5 + Karte 32 je
Seite, das Eingabefeld hatte 220px, also 71% der Bildschirmbreite.
Kein harter Breakpoint ("ab 310px vollflächig"), sondern fluide Abstände — ein
Umbruch bei 310px sähe bei 311px wieder falsch aus. Das Muster gab es im Projekt
schon: fee-table, membership-card, legal__card und matchcenter-empty nutzen
clamp()-Abstände. Fest waren genau die drei, über die es stolperte: .form (32px),
.group-card (32px) und .group-tabs__panel (40px).
Zwei neue Token in tokens.css als einzige Quelle, --pad-card (20…32px) und
--pad-card-lg (24…40px). Die OBERGRENZEN sind die bisherigen festen Werte, am
Desktop ändert sich also nichts — nachgemessen: 32px bei 1269px Viewport, wie
vorher. Es wird nur nach unten schmaler.
Ergebnis: Feldbreite bei 309px von 71% auf 76%, bei 379px von 74% auf 80%.
Kein Überlauf auf /turnen, den Disziplinseiten und /kontakt bei 320px und 1280px.
Die vier bereits fluiden Karten behalten ihre eigenen clamp()-Werte, damit ihr
Desktop-Bild unangetastet bleibt; sie in die Token einzusammeln ist eine
Aufräumung für später.
VORBESTEHEND und nicht von dieser Änderung verursacht (per git stash gegengeprüft,
mit und ohne Änderung identisch): /mitglied-werden läuft bei 320px um 12px über,
/turnen bei 300px um 13px. Die 320px sind eine echte Gerätebreite (iPhone SE),
das gehört als Nächstes angeschaut.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Bei sehr schmalen Breiten stand der Text über den Kartenrand hinaus. Gemessen bei
300px Viewport (clientWidth 289): Dokument 317px, also 28px Überlauf; die einzelne
Grid-Spur des Panels rechnete sich auf 267,7px aus, obwohl die Karte nur 193px
Inhaltsfläche hat.
Ursache: `grid-template-columns: 1.6fr 1fr` bzw. `1fr` — eine fr-Spur hat als
automatisches Minimum min-content und kann deshalb nicht schmaler werden als das
längste Wort darin. Bei deutschen Komposita ("sportartenübergreifende",
"Grundlagenausbildung") sprengt das die Karte. Jetzt minmax(0, …) in beiden
Spurdefinitionen von .group-tabs__panel, und dieselbe Korrektur bei
.group-list--stacked, wo das Muster latent drinsteckte.
Zwei Umwege, die ich mir hätte sparen können: min-width: 0 am Grid-KIND reicht
nicht, die SPUR muss das Schrumpfen erlauben. Und overflow-wrap: break-word
verkleinert die min-content-Breite nicht (nur `anywhere` täte das) — beides bleibt
trotzdem drin, zusammen mit hyphens: auto, weil die Seite lang="de" ist und der
Browser die Komposita dann sauber trennt statt hart umzubrechen.
Geprüft: alle sechs Turn-Seiten bei 300px, 320px und 390px ohne Überlauf. Desktop
unverändert zweispaltig (648,6 / 405,4 px, Verhältnis 1,6:1).
OFFEN und bewusst nicht mitgefixt: /turnen läuft bei 300px noch um 13px über, ab
320px nicht mehr. Es kommt aus dem Kontaktformular, nicht aus den Beitragskarten
oder Gruppenkarten — die min-content-Breite des Formulars in der Grid-Spur von
.container. .container global anzufassen ist mir für 13px auf einer Breite, die
kein Gerät hat, zu riskant (das schmalste verbreitete Display ist 320px).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Rückmeldung der Turnabteilung mit Screenshot: auf dem iPhone war im
Flamingos-Panel der Fließtext rechts abgeschnitten.
Gemessen bei 390px mit aktivem Flamingos-Tab (die anderen Panels sind
ausgeblendet, ihre Chips haben Breite 0 — deshalb fiel es beim Prüfen der Seite
nicht auf): Dokument 442px bei 379px Bildschirm, also 63px Überlauf; der Chip
393px breit in einer 345px-Karte.
Ursache war nicht die Textlänge allein, sondern .group-card__level mit
`white-space: nowrap` UND `flex-shrink: 0`: der Chip konnte seinen Text nicht
brechen und auch nicht schrumpfen, seine Mindestbreite spannte die ganze Karte
auf. Von vier level-Chips war nur dieser betroffen (47 Zeichen gegen 17 bis 25).
Zwei Änderungen:
- Inhalt wie gewünscht gekürzt: "Turnen · fortgeschritten · Alter nach Absprache"
→ "Turnen · fortgeschritten".
- Sicherheitsnetz im CSS: nowrap raus, max-width: 100% rein. Ein Chip trägt
Information, deshalb umbrechen statt mit … kürzen. flex-shrink: 0 bleibt, es
hält den Chip neben einem kurzen Gruppennamen in Form.
Gegenprobe, damit der Fix nicht nur am kürzeren Text hängt: mit dem LANGEN Text
und dem CSS-Fix bleibt das Dokument bei 379px, der Chip bricht auf zwei Zeilen.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
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
Rückmeldung der Turnabteilung: Step Aerobic findet nicht mehr statt.
Wichtig war der Befund vor der Änderung: die Seite bündelt DREI Angebote —
Pilates, Fitness & Stretching und Step-Aerobic. Ein pauschales "die Card raus"
hätte Pilates und Fitness mitgenommen. Entfernt ist deshalb nur die eine Gruppe
(Donnerstag 19:30, Heike Wahler); Pilates und Fitness & Stretching bei Karola
Lorz laufen unverändert weiter. Heike Wahler stand nur in dieser Gruppe und
erscheint damit nicht mehr auf der Website — das ist die einzige Nebenwirkung,
die jemandem auffallen könnte.
Umbenannt in "Fitness & Pilates" an allen zehn Fundstellen: navigation.json,
turnen.json (Disziplin-Schlüssel, Hero-Titel, drei Übersichtstexte),
ansprechpartner.json, news.json, turnen.php (Karte, Alt-Text, Meta) und die
Seiten-Datei selbst.
URL mitgezogen wie besprochen: turnen/step-aerobic-fitness-pilates →
turnen/fitness-pilates, samt Seiten-Datei und den drei Bilddateien (git mv,
Historie bleibt). Der alte Slug war in der Sitemap und ist indexiert, deshalb
eine 301 in public/.htaccess — VOR dem Front Controller, sonst würde index.php
den Pfad als unbekannten Slug abfangen und 404 rendern.
Geprüft: /turnen/fitness-pilates liefert 200 mit nur noch zwei Gruppen,
Sitemap führt ausschließlich den neuen Slug, Navigation, Übersichtskarte und der
News-Artikel verweisen darauf, keine Referenz auf die alten Bildnamen mehr.
Der alte Slug gibt lokal 404, weil php -S keine .htaccess liest; die 301 greift
auf Apache.
Nicht geändert: das Wort "Step-Aerobic" in der CLAUDE.md-Sprachregel. Dort ist
es ein Beispiel für orthografisch nötige Bindestriche und bleibt als solches
richtig, auch ohne den Kurs.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
--ls-caps (0.08em) war zu viel: bei 34px sind das 2,7px und die Überschriften
wirkten auseinandergezogen. Gewollt war ein Hauch Luft, etwa 0,4px (Felix).
Dafür gibt es keinen Token, und rohe Werte verbietet die Token-Disziplin — also
--ls-heading: 0.012em, was bei 34px genau 0,408px ergibt (nachgemessen). Der Fall
trifft jede Coolvetica-Überschrift in h3-Größe, nicht nur diese Karten: der
Schnitt ist condensed, bei 60px trägt er ohne Sperrung, bei 34px kleben die
Versalien. --ls-caps bleibt für kleine Labels, wofür es gedacht ist.
Klarstellung zum vorigen Commit: die Titel waren und bleiben Coolvetica. Der
Verweis auf Abel in meiner Begründung war ein Zitat der CLAUDE.md-Regel für
kleine Auszeichnungen, keine Änderung an der Schriftart.
CLAUDE.md entsprechend berichtigt, inklusive der Warnung, hier nicht --ls-caps
zu nehmen.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Zwei Punkte aus dem Gegenlesen, beide gemessen statt geschätzt.
1) Die Kartentitel waren schwer lesbar. Gemessen war letter-spacing "normal",
also gar keins gesetzt — nicht zu eng eingestellt. Coolvetica ist ein
Condensed-Schnitt: bei 60px (Abschnitts-h2) trägt das, bei 34px in einer
schmalen Kartenspalte kleben die Versalien. Jetzt var(--ls-caps), der
dokumentierte Token für gesperrte Uppercase-Auszeichnungen.
2) Die Preise standen in Akzentrot. Das ist kein Geschmacksfehler, sondern ein
Kontrastfehler: #e20612 auf dem Kartengrund (rgba(0 0 0 / 0.22) über #222)
erreicht 3,50:1 und verfehlt die 4,5:1 für Fließtext. Weiß liegt bei 17,22:1.
CLAUDE.md verbietet Rot für Fließtext auf dunklem Grund ohnehin. Hervorgehoben
bleibt der Preis durch Coolvetica und 28px gegen 21px Fließtext.
Die Preisfarbe wirkt auch auf /mitglied-werden, wo dieselbe Komponente steht —
dort ist der Grund dasselbe dunkle Glas (geprüft), die Änderung verbessert also
beide Seiten.
Beide Erkenntnisse als Regel in CLAUDE.md, mit den gemessenen Zahlen.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Die Turnabteilung verlinkt die Beiträge in Einladungen für neue Familien und
nimmt zum September auf — die Angaben waren aber auf der ganzen Website nicht
zu finden. Nachgeprüft: 0 Treffer auf /turnen und allen fünf Disziplin-Seiten,
/mitglied-werden führt nur die Fußball-Beiträge.
Es war keine verlorene Seite, sondern eine Lücke im Code: app/pages/turnen.php
rendert nur Hero, Karten und Formular. In data/turnen.json lagen ungenutzt
cards_intro, fees (drei Tabellen), austritt und faq (fünf Fragen). Der Docblock
behauptete, die Beiträge lägen auf den Unterseiten — sie lagen dort nicht, und
in der Git-Historie wurden sie nie gerendert.
Inhalte 1:1 wie auf der alten Seite (gegengeprüft an 2024.tsv08kulmbach.de,
Tab "Allgemeines"): Zusatzbeitrag 24/48 €, Neumitglieder 84/94/184 €,
Förderstufen 120/180/240 €, Austritt zum 30. September. Nichts umformuliert,
die Abteilung entscheidet über Änderungen.
Struktur jetzt Hero → Karten → Beiträge (#beitraege) → FAQ → Formular. Der
Anker ist die Adresse für die Einladungen. Nur bestehende Komponenten benutzt
(fee-table wie auf /mitglied-werden, faq, team-cards mit intro); neu ist allein
der Wrapper .fee-tables. Die FAQ füllt zusätzlich das FAQPage-Schema, weil
page_schema() sie als zweiten Parameter bekommt.
Feinschliff nach Sichtprüfung: Kartentitel von --fs-650 auf --fs-675, weil 28px
Coolvetica neben 21px Fließtext zu klein wirkten; Karten gleich hoch (der
Grid-Default stretch statt align-items: start, gemessen vorher 252/377/471px)
mit dem Hinweis am Kartenfuß; und minmax(min(22rem, 100%), 1fr) statt
minmax(22rem, 1fr), weil die Karten am Handy 352px breit in einem 347px-Raster
standen und überliefen.
NOCH offen: overview.cta ist weiter unbenutzt. Der Block verlinkt "Zur
Turn-Übersicht" und gehört auf die Disziplin-Unterseiten, nicht auf die
Übersicht — dort wäre es ein Selbstlink.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Am Handy waren die Seitenhöhen beim Durchwischen unterschiedlich: 350 bis 559px
je Inhalt, statt einheitlich 515. Nur Cover, Vorwort, Termine und Sportheim
trafen A5 — die vier haben eine eigene aspect-ratio.
Ursache war ein Fehler von mir aus dem vorigen Commit: der ergänzte Kommentar
landete HINTER dem schließenden */ des bestehenden. Damit stand roher Text vor
der Regel, und der CSS-Parser verwarf den kompletten Block
".stadionzeitung-viewer.is-enhanced .stadionzeitung-page, … { aspect-ratio }".
Der Browser meldete aspect-ratio: auto, obwohl die Regel im ausgelieferten CSS
stand und der Selektor per matches() passte — genau das Bild, das ein
verworfener Block erzeugt. Ein Testlauf mit aspect-ratio: 1/3 änderte nichts,
was den Verdacht bestätigte. php -l prüft CSS nicht, es gab also keinen
Hinweis.
Dass es vor der align-items-Änderung einheitlich aussah, war Zufall: der
Flex-Default stretch streckte alle Seiten auf dieselbe Zeilenhöhe (559) und
verdeckte damit, dass die A5-Regel nie griff.
Zusätzlich sind die Bild-Seiten (Anzeigen) jetzt in derselben A5-Regel. Sie
leiteten ihre Höhe aus dem eigenen Bildverhältnis ab; drei Motive sind
1440x2037 statt 1440x2043 und waren dadurch 513 statt 515px hoch, was beim
Wischen als Sprung auffiel. object-fit: cover fängt die 0,4% Abweichung ab,
wie die Druckfassung es ohnehin tut.
Gemessen: 40 von 40 Seiten 363x515 bei 390px Viewport. Zwei Seiten brauchen
dort internen Scroll (Ergebnisse +44px, Vorschau +11px), weil lange
Vereinsnamen umbrechen — Textumbruch skaliert nicht mit den cqi-Maßen. Im
Druck ist beides unauffällig, per PDF-Sichtprüfung an der Ergebnisse-Seite
bestätigt: Überschrift, drei Ergebnisblöcke und CTA-Kasten vollständig.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Titel lautet jetzt "Stadionzeitung zum Heimspiel gegen <Gegner>" statt nur
"Gegen <Gegner>". Damit ist die Zeile für sich verständlich, auch als Link-Text
für Screenreader. Das "zum" ist eingefügt, damit der Satz grammatisch trägt.
Größe von --fs-650 auf --fs-690, den Token für Karten-Überschriften (28px auf
32 bis 44px). Die alte Begründung für die kleinere Stufe war, dass lange
Gegner-Bezeichnungen in die 280px-Karte passen mussten — die Karte ist jetzt
eine Zeile über die volle Breite, der Grund ist weg. Nach unten bleibt
--fs-650 die harte Grenze für Coolvetica in Versalien.
Geprüft bei 1280px (Titel auf einer Zeile, füllt die Zeile) und bei echten
390px (bricht auf zwei Zeilen, liest sich sauber).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Cover links, Angaben rechts daneben — dasselbe Muster wie .veranstaltung-card,
und aus demselben Grund: der Bestand ist klein.
Vorher war es ein horizontales Regal (grid-auto-flow: column, 280px-Spalten,
Scroll-Snap). Der Kommentar dort nannte genau die richtige Gefahr, "bei 1-3
Karten wie eine leere Fläche mit einer verlorenen Karte", löste sie aber nicht:
mit einer veröffentlichten Ausgabe stand eine 280px-Karte allein links auf einer
1280px breiten Seite. Eine Zeile über die volle Breite füllt die Fläche bei jeder
Anzahl.
Zwei Dinge sind dabei anders als bei den Veranstaltungen, beide begründet:
- Die Medienspalte ist schmaler (clamp bis 230px statt 26%), weil das Medium
hier die live gerenderte Cover-Seite mit festem A5-Verhältnis ist. Ein <img>
liesse sich per object-fit beschneiden, das Cover nicht — es bestimmt die
Zeilenhöhe. 230px Cover ergeben 326px Zeile.
- Das margin-top: auto am CTA ist weg. Es stammte aus der hochformatigen Karte,
wo der Link an den Kartenfuss gehörte; in der breiten Zeile riss es die drei
kurzen Zeilen auf 150px auseinander.
Neu in der Zeile: die Coverzeile des Interviews als Teaser (interview.teaser,
dieselbe Quelle wie "Im Heft" auf dem Cover). Sie füllt die Breite mit echtem
Inhalt statt Leerfläche und sagt, warum man die Ausgabe öffnen sollte; ohne
Interview entfällt sie, wie .veranstaltung-card__text.
Geprüft per Screenshot bei 1280px und bei echten 390px (iframe-Wrapper, weil
headless Chrome sonst eine Mindestbreite erzwingt): mobil steht das Cover über
den Angaben.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Zwei Befunde aus dem Gegenlesen des Hefts, beide gemessen.
1) Die Seiten waren unterschiedlich breit: Umschlagbogen 448,5px,
Innenblätter 441px. Ursache war ein Falz-Steg von 2%, den nur die
Innenbögen hatten (:nth-child(n+3)). Der Gedanke war richtig — randabfallende
Anzeigen stoßen sonst mit 0mm an die Blattmitte — die Umsetzung aber
uneinheitlich, und das fiel als "das Programm ist schmaler als das Vorwort
drüber" auf. Entfernt zugunsten von "alle Bögen gleich"; die 9,9mm
Innenabstand der Seiten halten den Inhalt aus dem Knick. Soll er zurück,
dann für alle Bögen.
2) Unter dem Foto der Sportheim-Seite blieb ein weißer Streifen: die Seite war
625,7px hoch in einer 636,4px hohen Fläche. Sie hat wie Vorwort und Termine
eine eigene aspect-ratio plus negativen Margin, aber die min-height-
Absicherung hatte nur das Vorwort bekommen. Die drei stehen jetzt in EINER
Regel, damit eine vierte nicht wieder abdriftet.
Nachgemessen: Sportheim 448,5 x 636,4 statt 441 x 625,7, Foto bündig 0/0/0,
alle Slots ohne Padding, im gedruckten PDF Bogen 11 unten 0,0mm. Sichtprüfung
an Bogen 11: Foto läuft bis an linke und untere Kante.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Im Druck war oben fast kein Rand und unten viel — im Chrome-Export etwa 3 zu
8 mm. Der Rand war nicht die Ursache: der Blatt-Inhalt war über eine
aspect-ratio bemaßt und nur 199,1 mm hoch statt 210 mm. Die fehlenden 10,9 mm
sammelten sich immer unten, weil der Inhalt oben ausgerichtet ist. Gemessen an
Blatt 4 des erzeugten PDF:
margin 5mm -> oben 4,8 / unten 5,8 mm (Rest 0,6 fiel kaum auf)
margin 0 -> oben 0,0 / unten 10,9 mm (der ganze Rest unten)
Ein Rand hätte den Fehler also nur kaschiert. Randabfallend ist die
geometrisch saubere Lösung, weil zwei A5 exakt ein A4 quer sind
(2 x 148,5 = 297 mm, Überschuss null) — es bleibt nichts zu verteilen.
Umgesetzt durch Auflösen einer Ausnahme statt neuer Sonderregeln: die zwei
Umschlagbögen liefen längst randabfallend (@page umschlag, Fläche 210mm), das
gilt jetzt für alle Bögen. Damit fällt auch der Bruch weg, dass der Umschlag
anders gedruckt wurde als die Innenblätter.
Nachgemessen: oben und unten je 0,0 mm auf Blatt 1, 4 und 6. Verbleibendes Weiß
steckt in den Anzeigenmotiven selbst (viele Sponsoren gestalten auf weißem
Grund, 100% weiße Randpixel) und ist nicht unser Layout. Sichtprüfung an
Blatt 4: Sportfest-Plakat läuft bis an alle vier Kanten, nichts beschnitten.
Bewusst in Kauf genommen (Felix): der Bürodrucker beschneidet auf sein
Hardware-Minimum von 4 bis 5 mm und liefert den Rand selbst. Unser Fließtext
verliert dabei nichts, die Live-Seiten haben 9,9 mm Innenabstand. Ein
Falz-Abstand entfällt, die Seiten stoßen mittig aneinander.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Unter dem einblendenden Rasenbild blieb ein weißer Streifen, responsiv wurde er
größer. Gemessen bei 390px Viewport: Seite 559px hoch, Vorwort 515px — 44px
Lücke.
Ursache lag nicht am Vorwort, sondern an der Seite: .stadionzeitung-viewer__page
ist display:flex, und der Flex-Default align-items:stretch streckt die Seite auf
die Höhe der Flex-Zeile und übersteuert ihre aspect-ratio. Die Seite war damit
gar kein A5 mehr (559/363 statt 210/148) — das betraf ALLE Seiten, sichtbar wurde
es nur beim Vorwort, weil dort ein Bild die Blattkante erreichen muss.
align-items: center behebt es an der Wurzel: alle Seiten sind wieder exakt A5,
Lücke 0px. Zusätzlich bekommt das Vorwort min-height: calc(100% + 2x Padding) als
Absicherung — die aspect-ratio trägt weiter, wenn die Seite keine definite Höhe
hat (No-JS-Stapel, Druck), die min-height füllt sie, wenn sie eine hat.
Gemessen vorher/nachher, Desktop-Viewer per Screenshot gegengeprüft.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Die Druckfassung ist Werkzeug für die Heft-Produktion, kein Besucher-Angebot.
Als sichtbarer Knopf neben Blättern und Vollbild wurde er versehentlich geklickt
und riss Leute aus dem Lesen (Felix, 31.07.2026). Die Route bleibt unverändert
erreichbar, nur über die URL: ?druck=1 an die Ausgabe hängen.
Mit dem Knopf fallen drei CSS-Stellen weg, die es ohne ihn nicht mehr braucht:
die Basisregel, die Mobil-Ausblendung (dort wäre er eine Sackgasse gewesen) und
der Eintrag in der Ausblend-Liste der Druckansicht. In CLAUDE.md vermerkt,
inklusive der Bitte, ihn nicht als Link wieder einzubauen.
Geprüft: Viewer enthält kein druck=1 und kein viewer__print mehr, Vollbild und
Blättern intakt, ?druck=1 antwortet weiter mit 200 und montiert die Blätter.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Das Cover fehlte am iPhone, Chrome am Desktop zeigte es. Es hatte im Viewer eine
eigene Regel mit "max-height: 72vh; width: auto" — und width:auto ist bei
inline-size-Containment genau die Falle, die für .stadionzeitung-page schon
behoben war: der Inhalt zählt für die eigene Breite per Definition nicht mit.
Sichtbar wird der Unterschied, weil .stadionzeitung-viewer__page display:flex ist:
auf einem Flex-Kind heißt width:auto "richte dich nach dem Inhalt". Chrome
rettet sich über aspect-ratio plus gestreckte Höhe, Safari nicht.
Cover und Seite stehen jetzt in EINER Regel mit derselben definiten Breite, damit
sie nicht wieder auseinanderlaufen; nur overflow-y bleibt den Seiten vorbehalten.
Gemessen bei 390px Viewport: Cover 363x559, identisch zu den Folgeseiten.
EHRLICHE GRENZE: Chrome zeigt vor und nach der Änderung dieselben Maße, der
Fehler ist im Desktop-Browser nicht reproduzierbar. Die Ursache ist damit
begründet, aber nicht bewiesen — Gegenprobe nur am echten Gerät. In CLAUDE.md
vermerkt, damit das nächste Mal niemand im Desktop-Browser "verifiziert".
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Das Cover blieb am iPhone leer, während Chrome am Desktop es zeigte. Ursache
war kein fehlendes Bild: das freigestellte Spielerfoto hatte 2584x5093 Pixel und
12,3 MB. iOS Safari verwirft Bilder, deren dekodierte Größe sein Budget
übersteigt — hier gut 53 MB, und auf einer Ausgabe liegen 86 Bilder.
Dargestellt wird das Foto mit 98cqi Höhe, bei 480px Seitenbreite also etwa
238x470 CSS-Pixel. Es gibt jetzt 320/640/1000 als PNG mit erhaltener
Transparenz (0,2 / 0,8 / 1,9 MB); sizes nennt die echte Breite, sonst zöge ein
Handy mit DPR 3 die größte Variante. Das Original ist gelöscht.
Dafür kann resize_image_variants() nun Alpha erhalten ($alpha = true schreibt
PNG statt JPG) und die img-Komponente eine Endung ($image['ext']). Der Default
bleibt JPG, weil bestehende Aufrufer PNG-Quellen absichtlich zu JPG verkleinern.
bin/stadionzeitung-add.php erzeugt die Varianten künftig selbst. Dort stand
"unverändert kopieren, Felix liefert bereits ein web-taugliches Foto" — genau
diese Annahme ist gerissen.
Außerdem: smtp.password stand in der Produktiv-Config noch auf dem Platzhalter
POSTFACH_PASSWORT (von preflight auf dem Server gefunden, einziger harter
Fehler). Übernommen wurde das Passwort aus der Dev-Config, mit dem der Versand
am 27.07.2026 verifiziert wurde; Host, Postfach und Empfänger sind identisch.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Beim ersten Deploy blieben die Slides des Banner-Sliders schwarz. Ursache war
kein fehlendes Bild, sondern die CSP: public/.htaccess setzt
default-src 'self' ohne style-src, der Browser verwirft damit jedes
style-Attribut — und die Komponente lieferte Bild und Akzentfarbe genau so
(style="--banner-bg: url(…); --banner-accent: #6cbbbc"). Lokal war das
unsichtbar, weil php -S keine .htaccess liest.
Der Hintergrund ist jetzt ein <img class="ad-banner__bg"> über die bestehende
img-Komponente (CSP erlaubt img-src) und bringt srcset mit: das Handy lädt die
640er statt der 1600er, die erste Slide lädt eager mit fetchpriority. Der
dunkle Leseverlauf liegt auf ::before statt im background-image.
Die Akzentfarbe kann als beliebiger Hex-Wert nicht ohne Inline-Style in die
Seite. Sie steht deshalb als Token in tokens.css (wo Farben laut CLAUDE.md
hingehören), components.css bildet den Namen darauf ab, und banners.json nennt
nur noch "accent": "breadcrumb".
bin/preflight.php bricht ab, wenn unter app/ wieder ein style-Attribut
auftaucht — der Fehler wäre sonst erneut erst in Produktion sichtbar. Beim
Bauen dieser Wache zweimal selbst hineingetappt: ein Muster mit [^>]* bricht an
jedem schließenden PHP-Tag ab, und die Zeichenfolge dieses Tags beendet den
PHP-Modus auch in einem //-Kommentar (preflight gab ab dort seinen eigenen
Quelltext aus, php -l meldete nichts).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Eine veröffentlichte Stadionzeitung friert Verweise auf genau diese Dateien
dauerhaft ein: 37 der 86 Bilder im Hutschdorf-Heft lagen in gitignorierten
Ordnern (33 Wappen, 4 Instagram-Fotos). Auf einem frischen Klon wären sie
kaputt, und der Instagram-Sync räumt alte Posts irgendwann weg, womit eine
archivierte Ausgabe nachträglich zerfiele.
Die JSON-Caches bleiben draußen, die baut der Sync neu. Maschinenverwaltet und
flüchtig ist nicht dasselbe wie maschinenverwaltet und für immer referenziert.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
QR-Codes und Adresszeilen trugen `http://localhost:8000` ins Druckmaterial, weil
sie über abs_url() liefen. Nach dem Produktivgang hätten alle zehn Codes neu
erzeugt werden müssen — und ein gedruckter Code mit localhost darin ist Altpapier.
Die öffentliche Domain ist Vereinsidentität, keine Umgebungseinstellung: neues
Feld `club.website` in data/club.json plus club_url()/club_domain(). base_url
bleibt umgebungsabhängig, weil Canonical, OG, Sitemap und JSON-LD zur
ausliefernden Adresse passen müssen.
Umgestellt: Cover-QR und die acht geteilten CTA-QRs, die Internet-Zeile im
Heft-Impressum, die Cover-Zeile neben dem QR, die acht Linkzeilen unter den
CTA-QRs der Live-Seiten (die hatte ich beim ersten Durchgang übersehen), das
Web-Feld im Website-Impressum und bin/qr.php.
Nebenbei: club_domain() ohne Pfad hängte einen Wurzel-Slash an
(„tsv08kulmbach.de/"), und der Kopf-Kommentar von stadionzeitung-add.php
beschrieb noch die alten vier Anzeigen-Gruppen.
Nicht verifizierbar und deshalb dokumentiert: die vendorte QR-Bibliothek
arbeitet nicht reproduzierbar (gleiche URL, andere Pixel — anderes Maskenmuster,
beides gültig). Ein PNG-Vergleich beweist nichts, nachweisbar ist nur der
Code-Pfad. Jeden Druck-QR einmal scannen.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Stadionzeitung: Live-Seiten (Tabellen, Ergebnisse, Vorschau, Termine, News,
Kontakt, Historie, Sportheim, Partner, Momente, Impressum), automatisches Cover,
Swipe-Viewer mit Vollbildmodus und die Druckfassung als Falt-Heft. Anzeigen
kommen jetzt aus dem Bestand und werden gleichmäßig verteilt, nie mehr als zwei
hintereinander (vorher vier Blöcke à fünf). Die Doppelseiten-Regel rechnet das
Skript selbst, statt sie von Hand zu prüfen.
Veranstaltungen: Bereich /veranstaltungen mit Detailseite pro Fest, Lebenszyklus
über das Datum (Ankündigung vor dem Fest, Rückblick danach), Galerie mit
Lightbox. veranstaltungen.json ist dritte Termin-Quelle, damit ein Fest nie
doppelt gepflegt wird.
News-Artikel als dritte dynamische Prefix-Route, gemeinsamer detail-head.
Behobene Fehler:
- Wappen-Kontexte setzten Zeilen-Layout auf .crest statt auf die Zeile; das
Wappen wurde zum Grid, Vereinsname und Tore rutschten darunter zusammen
(Ergebnis-Rückblick, Vorschau, Cover).
- --header-h (60px) unterschätzt die Kopfleiste um 32px (Logo 72px + 20px
Versatz): neues abgeleitetes --header-space, sonst klebten Zurück-Links
unter dem Logo.
- base_url in der Produktions-Config ohne www, während .htaccess auf www
umleitet; preflight prüft das jetzt.
- .lightbox brauchte display:none mit (0,2,0), sonst lag das Overlay offen.
Neue Werkzeuge: bin/anzeige-add.php (Anzeigen-Bestand), bin/veranstaltung-bilder.php
(Plakate und Galerien, Alt-Texte folgen der Quelldatei), bin/qr.php (Druck-QR mit
Warnung, wenn base_url nicht auf die echte Domain zeigt).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Neue Datenquellen:
- data/veranstaltungen.json Feste mit eigener Detailseite (dritte Termin-Quelle)
- data/anzeigen.json Sponsoren-Anzeigen als dauerhafter Bestand statt
pro Ausgabe abgeliefert
- data/stadionzeitung.json Ausgaben-Archiv (maschinenverwaltet)
- data/news.json redaktionelle Meldungen mit Artikelseiten
Bilder einmal statt pro Ausgabe: public/assets/img/anzeigen/ hält die 19
Sponsorenmotive plus drei Eigenanzeigen; vorher lag jede Anzeige als Kopie
unter jeder Stadionzeitungs-Ausgabe.
Zuerst die Inhalte, dann der Code: so ist der Baum in jedem Schritt gültig.
Daten ohne die zugehörigen Seiten sind harmlos, Seiten ohne Daten nicht.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
Letzter Teil. base.css hatte längst eine globale :focus-visible-Regel, trotzdem
existierten 15 Fokus-Regeln — die meisten davon Ballast.
Fünf Overrides wiederholten die Basisregel praktisch wortgleich (.back-to-top,
.ad-banner__dot, .faq__q, .table-scroll, .btn) und sind ersatzlos entfallen; sie
unterschieden sich höchstens um 1px Offset. Die Basisregel selbst läuft jetzt
über --focus-ring/--focus-offset, .position-card__head wechselt von Akzentrot
auf Weiß. Übrig bleiben zehn Regeln, davon deklarieren nur noch vier überhaupt
eine outline — jede mit Grund (inset-Offset bei .tab und .position-card__head,
geschichteter Ring beim Formularfeld). Die anderen sechs sind reine Zusatz-
effekte (transform, Farbe, Fläche) und lassen den Basis-Ring durch.
Der eigentliche Fund steckte im Formularfeld: es setzte outline: none und
ersetzte den Ring durch einen roten Rahmen mit 30%-Glow. Akzentrot erreicht auf
der Feldfläche aber nur 2,8:1 und verfehlt damit WCAG 1.4.11 (>=3:1) für
Fokus-Indikatoren — Tastaturnutzer hatten dort also den schwächsten Fokus der
ganzen Seite. Roter Rahmen und Glow bleiben als Marken-Signal, der weiße
Standard-Ring kommt zurück; outline-offset entspricht der Glow-Breite, beide
Ringe liegen bündig nebeneinander statt übereinander.
CLAUDE.md dokumentiert die neuen Regeln: Token-Disziplin mit Tabelle (Spacing,
Typo, Icons, Sperrung, Fokus, Trefferfläche) samt der bewussten em-Ausnahme,
das Button- und Tab-System inklusive der (0,2,0)-Falle durch die
CSS-Ladereihenfolge, und die Fokus-Regel. Dazu ein Punkt in der Checkliste.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
Dritter Teil. .btn hatte nur primary + outline + sm/lg, daneben lebten mehrere
Controls als Eigenbau — teils zeichengleich dupliziert.
Tabs: .group-tabs__tab und .filter-bar__tab waren bis auf flex-shrink und 4px
Innenabstand identisch. Beide laufen jetzt über eine gemeinsame .tab-Basis, die
aria-pressed (Filter) und aria-selected (Tabs) gleich behandelt; von den
BEM-Klassen bleibt nur das jeweilige Delta. Innenabstand vereinheitlicht auf
--space-m, die Gruppen-Tabs verlieren dadurch 4px pro Seite.
Icon-Buttons: .ad-banner__nav-btn und .ad-banner__toggle waren vollständige
Duplikate voneinander. Sie tragen jetzt .btn .btn--icon und behalten nur die
Glas-Optik als Delta. Der Selektor schreibt .btn mit — utilities.css lädt nach
components.css, bei gleicher Spezifität gewänne sonst die rote .btn-Fläche.
Trefferflächen auf 44px (WCAG 2.5.5): .btn bekommt min-height und wird
inline-flex, damit Icon und Label ohne Zusatz-Markup zentriert liegen.
Bezeichnend auch hier — .department-choice__btn hatte inline-flex, align-items
und exakt denselben gap bereits selbst deklariert und gibt sie jetzt ab.
Controls, die optisch klein bleiben sollen, strecken die Fläche stattdessen
unsichtbar per Pseudo-Element (.tap-target, automatisch auch für .btn--sm) —
gewertet wird die Trefferfläche, nicht die gezeichnete.
Der Banner-Indikator brauchte einen anderen Weg: er trug overflow: hidden, um
den Fortschrittsbalken zu beschneiden, was jede Erweiterung wieder abgeschnitten
hätte. Der sichtbare 6px-Balken liegt jetzt im ::before, der Fortschritt ist
selbst rund — overflow entfällt, der Button ist 48x44px.
Haupt-Nav-Links, Dropdown-Trigger und Footer-Social-Links bekommen min-height
statt einer Pseudo-Erweiterung: sie stehen in Reihen, wo überlappende
Trefferflächen den Nachbarn verdecken würden. In der 60px hohen Kopfleiste ist
die Höhe ohnehin nicht sichtbar.
Bewusst unverändert: die Formular-Checkbox bleibt bei 24px (WCAG 2.5.8).
<input> ist ein Replaced Element, dort greift ::after nicht zuverlässig — und
das zugehörige <label> ist klickbar und liefert die große Fläche.
.btn--ghost ist angelegt, hat aber aktuell keinen Abnehmer: die vermuteten
nackten Links sind bei näherem Hinsehen Bildkarten (.instagram__link),
Wrapper (.split__cta) oder eigenständige Karten-Affordanzen (.team-card__cta),
keine tertiären Buttons.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
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
Alle padding/margin/gap-Deklarationen in components.css, layout.css und
base.css nutzen jetzt die Spacing-Skala — 414 Token-Verwendungen, kein roher
rem-Wert mehr in einer Abstands-Deklaration.
Die Substitution lief mechanisch (nächste Rasterstufe, Gleichstand aufgerundet),
damit sie deterministisch und nachvollziehbar ist statt 450-mal von Hand
geraten. Rund 325 Werte lagen bereits exakt auf einer Stufe und sind
verlustfrei übernommen. 125 Werte verschieben sich:
±0,4–2,0px 106 Werte (0.1/0.15/0.3/0.35/0.4/0.6/0.85/0.9/1.1/1.6rem …)
±4px 12 Werte (2.25 -> 2.5, 2.75 -> 3rem)
±8px 8 Werte (3.5 -> 4, 4.5 -> 5, 7.5 -> 7rem)
Die 8px-Sprünge treffen ausschließlich Sektionsabstände (padding-block großer
Bänder, margin-top von Blöcken), wo sie optisch nicht ins Gewicht fallen. Die
±4px-Gruppe ist 2.25rem, das exakt zwischen zwei Stufen lag.
em-Werte bleiben bewusst roh: sie skalieren mit der font-size (Button-Padding,
Badge-Innenabstände) und gehören damit nicht auf ein festes px-Raster. Nullen,
auto und Prozentwerte sind unangetastet, calc() wurde korrekt mitgezogen
(calc(var(--header-h) + var(--space-5xl))).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
Vorbereitung für die Konsolidierung. tokens.css war für Farben und Typo schon
die Single Source of Truth, für Abstände aber nur mit --space-section und
--container-pad besetzt — dem standen ~450 Spacing-Deklarationen mit 39
verschiedenen rem-Werten gegenüber.
Neu: 14-stufige Spacing-Skala auf 4px-Raster, aus dem Ist-Bestand geclustert
statt frei erfunden. Die neun häufigsten Werte der Codebase (1, 1.5, 1.25, 2.5,
0.75, 0.5, 1.75, 2, 3rem — zusammen ~60% aller Deklarationen) liegen bereits
exakt auf Stufen, die Migration ist dort verlustfrei. Nach oben wird das Raster
gröber (3 → 4 → 5 → 7rem), weil große Abstände das vertragen. --space-4xs (2px)
ist ausdrücklich nur für optische Korrekturen an Icon-/Baseline-Nudges.
Dazu --tap-min (44px, WCAG 2.5.5) und --focus-ring/--focus-offset. Der Fokus
wird auf Weiß festgeschrieben: 15,9:1 auf --clr-bg gegenüber 3,2:1 für Rot,
das WCAG 1.4.11 nur knapp schafft und als einziger Indikator zu schwach ist.
--container-pad und --space-section verweisen jetzt auf die Skala statt eigene
Werte zu führen. Entfernt: --clr-bg-light und --clr-surface-raised, beide
projektweit 0× verwendet.
Consumer folgen in den nächsten Commits — dieser Schritt ändert die Darstellung
noch nicht.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
Das Overlay war vertikal zentriert. Beim Aufklappen eines Dropdowns wuchs die
Liste und rezentrierte sich — der gerade angetippte Punkt sprang unter dem
Finger weg, bei langen Menüs lief der Inhalt aus dem Screen (nicht scrollbar).
Jetzt ist die Liste oben verankert (justify-content: flex-start, padding unter
Header + Logo-Überhang) und scrollbar mit overscroll-behavior: contain. Punkte
sind volle Tap-Breite mit Hairline-Trennern, Chevron rechtsbündig, aktive Seite
mit rotem Balken links. Untermenüs animieren über die 0fr/1fr-Zeile des
li-Grids statt display: none — weiches Auf-/Zuklappen ohne Layout-Sprung.
Unterpunkte in Abel statt Coolvetica (unter 28px unleserlich, siehe CLAUDE.md),
linksbündig, Desktop-Panel-Optik im Overlay komplett zurückgesetzt (inkl.
backdrop-filter/radius/translateX, die sonst durchschlugen).
nav.js setzt .site-nav--js auf die Nav: nur ohne JS öffnet :focus-within die
Untermenüs. Mit JS wäre das ein Bug — der Button behält nach dem Tipp den
Fokus, das Menü ließe sich nie wieder zuklappen.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
Die Tabelle der Frauenmannschaft sah kaputt aus (zehn Mannschaften auf Platz 1,
alle grün als Aufstiegszone, überall 0), obwohl sie korrekt war: die Liga
startet erst am 06.09., und das einzige Ergebnis war ein Freundschaftsspiel.
Beides kommt so vom BFV — vor dem ersten Spieltag liefert die API jeder
Mannschaft Rang 1 und dieselbe Zone.
league-table erkennt das jetzt an der Summe der gespielten Spiele: Rangspalte
zeigt „–", Zonenfarben und Legende entfallen, darüber steht der Hinweis, dass
ab dem 1. Spieltag gewertet wird. Tabellen mit laufender Saison (Kreisklasse)
bleiben unverändert.
Spielzeilen tragen zusätzlich „Freundschaftsspiel" (match_competition_label),
damit sichtbar ist, warum ein Testspiel-Ergebnis nicht in der Tabelle steht.
Ligaspiele bleiben unbeschriftet — die Sektion nennt die Liga schon.
Enthält außerdem den Rahmen um den Tabellen-Scroller (table-scroll-frame),
der im Arbeitsstand lag.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Der Bereich wirkte deplatziert: der Track war auf 620px begrenzt und zeigte
eine Folie, wodurch die Karte auf breiten Fenstern in ~840px Totraum schwebte;
dazu derselbe Hintergrund wie der Hero direkt darüber, kein Akzent, und ein
einsames „:" zwischen den Wappen, das wie ein fehlendes Ergebnis aussah.
Neu als abgesetztes Band (.section--sunken, nutzt endlich das dafür
vorgesehene, bisher unbenutzte Token --clr-bg-deep) mit roter Oberkante:
links der Aufmacher (match-feature), rechts die folgenden Termine als
verlinkte match-row-Zeilen ohne Kartenfläche.
Der Aufmacher ist die große Variante der Terminzeile — Heim über Gast,
linksbündig, gleiche Struktur wie die Zeilen daneben. Bewusst nur drei
typografische Rollen (Meta-Zeile · Vereinsnamen in Coolvetica · Anstoßzeile
mit Countdown) statt der acht der ersten Fassung, ohne Badges, Icons oder
Button. Die eigene Mannschaft wird über Helligkeit markiert, nicht über
font-weight — Coolvetica hat nur einen Schnitt, bold wäre synthetisch.
match-row bekommt optionale $href/$meta-Props; Raster und Innenabstand liegen
jetzt im __link-Wrapper, damit als Link die ganze Zeilenfläche klickbar ist.
Neue Helper match_when() (ISO + deutscher Countdown, explizit Europe/Berlin,
weil PHP global auf UTC läuft) und match_competition_label().
match-slider.php und match-card.php entfallen — Letztere wurde
ausschließlich vom Slider genutzt. carousel.js treibt damit nur noch den
Banner-Slider der Startseite und wird im Matchcenter nicht mehr geladen.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- Sync schreibt Cache jetzt fehlersicher: json_encode mit JSON_THROW_ON_ERROR
+ Rückgabeprüfung von file_put_contents/rename → ein defektes UTF-8-Zeichen
aus der BFV-API kann den guten Cache nicht mehr leerschreiben (alter Cache
bleibt via $fail unangetastet)
- Vorsaison wird bei erkanntem compoundId-Wechsel einmalig archiviert (previous),
pro Team compound_id + abgeleitetes season-Label + stale-Flag persistiert
- Aktuelle Saison ist immer sichtbar (auch leer), Wechsel zur Vorsaison über
wiederverwendete Stripe-Tabbar (group-tabs); neue Komponente matchcenter-season
- Leere aktuelle Saison zeigt Hinweis statt leerer Fläche
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Formulare (form-field.php, 3 Form-Wrapper, components.css, form.js):
- Floating Labels (Label im Feld, wandert bei Fokus/Inhalt hoch; select/date
dauerhaft oben) via :has() + placeholder=" "-Trick. Echtes <label> bleibt
im DOM (kein Placeholder-als-Label).
- Globale "Pflichtfelder mit *"-Hinweiszeile entfernt; Stern bleibt am Feld,
pro Feld als visually-hidden "(Pflichtfeld)" für Screenreader erklärt.
- Markenroter Fokus-Ring statt Weiß.
- Felder als sanfter Füll-Look: weichere Ränder (eigene --clr-field-*-Tokens),
Erkennbarkeit über Fläche + Rand (WCAG 1.4.11 erfüllt).
- form.js: Submit-Button-Text wird je Formular korrekt wiederhergestellt.
Glas-Look global (tokens.css, components.css):
- Frosted Glass zentral: --glass-blur + --glass-shadow (Glow + Top-Sheen),
eine Regel statt 28× wiederholt; Leaf-Karten mit Blur, Container nur Glow
(kein Doppel-Frost). @supports-Fallback.
- Dunkleres Glas (--clr-glass-bg auf Schwarz-Tint), dezenter Card-Rand.
Hero-Fade (components.css):
- Unterer Auslauf nicht mehr mit grauem --clr-bg zugedeckt, sondern .hero__media
per mask-image ausgeblendet → echter dunkler, texturierter Hintergrund scheint
durch (schwärzer, durchsichtig, kein graues Band). Abdunklung auf reines
Schwarz. Gilt für alle drei Hero-Varianten.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
Neue /kontakt-Seite (Hero + wiederverwendete contact-form-Komponente, ohne
Intro-Block). Behebt die bisher ins 404 laufenden "Kontakt aufnehmen"-CTAs.
- contact-form: optionales $intro + Rücksprung-Slug $return (Hidden-Feld)
- contact-submit: PRG-Redirect zur absendenden Seite, whitelist-validiert
gegen routes.php (kein Open-Redirect)
- Verlinkt im Footer-Rechtsbereich und im Menü "Der Verein"
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
Das Submenu-Padding wurde stillschweigend vom globalen reset.css-Selektor
`ul[class] { padding: 0 }` (Spezifität 0,1,1) überschrieben, da
`.site-nav__submenu` nur (0,1,0) hat — die Hover-/Active-Pillen klebten
dadurch links/rechts am Panel-Rand. Selektoren auf
`.site-nav__list .site-nav__submenu` (0,2,0) gehoben (Haupt-Regel,
@supports-Glas, Mobile-Override), sodass das Padding ohne !important greift.
Innenabstand auf gleichmäßige 0.55rem rundum gesetzt — Pillen stehen
oben/unten/seitlich gleich dezent frei.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Prev/Next-Navigationsbuttons für den Banner-Slider (carousel.js, generisch über
[data-carousel-prev/next]), zugehörige ad-banner-Steuerungs-Styles und Chevron-
Icons. Ohne JS bleiben die Controls ausgeblendet (progressive enhancement).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
group-schedule um eine Tab-Leiste (group-tabs) erweitert: bei Disziplinen mit
vielen Gruppen (z. B. Eltern-Kind-Turnen) werden die Gruppen als Tabs gruppiert
statt endlos gestapelt. JS (group-tabs.js) als progressive enhancement — ohne JS
bleiben alle Panels sichtbar. Begleitend Feinschliff an group-card/-list/schedule-row.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
Überarbeitete Seite /partner-werden mit Argument-Karten (sponsor-arguments)
und einer Übersicht der Werbekanäle (sponsor-channels) aus
data/partner-werden.json, inkl. zugehöriger Icons.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
Neue Seite /mitmachen, die offene Ehrenamtsstellen aus data/mitmachen.json als
position-card-Komponente listet, mit clientseitigem Bereichsfilter
(position-filter.js, progressive enhancement) und JobPosting-Schema
(job_posting_schema(), employmentType VOLUNTEER). Route ergänzt.
Enthält zudem kleine person-card__contact-Stilanpassungen (gleiche CSS-Sektion).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
Neue Seite /sportheimbuchung mit Bento-Layout (Fotos, Lage, Ausstattung) und
einem Buchungsanfrage-Formular nach Projektkonvention (form-field-Komponente,
Status-Region, Honeypot + ft-Token, Whitelist-Validierung, Rate-Limiting, PRG).
Versand via Brevo SMTP über app/actions/sportheimbuchung-senden.php, POST-Route
in index.php. form-field um min/max-Attribute erweitert (Personenzahl-Feld).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
Mitglied werden: Hub-Seite mit Online-Anmeldung (membership-form +
membership-submit-Action, Honeypot + Time-Trap), Abteilungswahl
(department-choice), Beitragstabelle (fee-table) und Turn-Aufnahmeantrag
als PDF-Download. Daten in data/mitglied-werden.json.
Partner werden & Sportheimbuchung: neue Seiten samt Routing und Navigation.
Ansprechpartner: echter Hero (Vereinsgelände), Bereiche aus dem group-Feld
der Single Source (Fußball / Turnen) zu zwei Sektionen gebündelt, Disziplin
als Karten-Überschrift. Fehlende Turn-Disziplin-Leads (Frisque, Lorz,
Kornatz, Trotzke) aus den Turnen-Unterseiten extrahiert und in
data/ansprechpartner.json ergänzt (allgemeine Turnabteilungs-Mail als
Kontakt). WhatsApp für alle Personen mit Telefonnummer. person-grid:
kompaktere Karten, Hairline unter der Bereichsüberschrift, 5 Spalten am
Desktop. Startseite auf die Haupt-Ansprechpartner je Bereich begrenzt.
Dazu: neue Icons (check-circle, download, file-earmark-text, whatsapp),
Anpassungen an Header/Footer/CTA/age-groups sowie tokens/layout/utilities.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RZsKTL5kRSG4KkK8w2LKkE
Neue Unterseite /matchcenter ersetzt die alten BFV-Widget-Embeds (verstoßen
gegen CSP) durch eine self-hostete Lösung: Cron-Scraper holt die Daten aus der
öffentlichen BFV-Widget-JSON-API, schreibt data/matchcenter.json und lädt die
Vereinswappen lokal — Besucher kontaktieren nur unsere Domain.
- bin/matchcenter-sync.php: CLI/Cron-Scraper (Muster wie instagram-sync), JSON-API
team/{id}/matches + competition/{compoundId}/table, Wappen via getLogo lokal,
atomarer Write, Fail-safe. Auto-Saison: Tabellen-compoundId wird aus der
Matches-API abgeleitet (team_id ist saison-stabil). Per-Team-Cache-Fallback bei
Fetch-Fehlern, damit Sektionen nie leeren.
- Seite app/pages/matchcenter.php + Route + Nav-Eintrag (unter Fußball).
- Komponenten: match-slider (nächste Spiele), match-card, match-row, league-table
(mit Auf-/Abstiegszonen), matchcenter-section (kicker-Layout: Tabelle 2/3 +
Spiele 1/3), matchcenter-empty, crest (weißes Chip + Initialen-Fallback).
- carousel.js: banner.js zum generischen [data-carousel]-Antrieb verallgemeinert
(Banner- und Match-Slider teilen ihn); crest.js: Logo-Fallback im Browser.
- helpers.php: sportsevent_nodes() für SportsEvent-JSON-LD.
- Icons calendar-event; config.example + .gitignore + CLAUDE.md ergänzt.
- Responsive geprüft (kein Seiten-Overflow 360–1280, Tabelle scrollt in der Karte).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0192vTfGmGpoWeyUse4TuQFj
- Neue Übersichtsseite (Hub: Hero + Disziplin-Kacheln) sowie Unterseiten für
Erwachsenenturnen, Eltern-Kind-/Kinderturnen, Step Aerobic/Fitness/Pilates,
Trampolin und Wettkampfturnen. Inhalte 1:1 von der alten Seite, gepflegt in
der neuen Single-Source data/turnen.json.
- Neue Komponente group-schedule im einheitlichen Bento-Look wie die
Mannschaftsseiten: Dashboard mit Trainingszeiten, Kontakt-Kachel (mailto an die
Turnabteilung) und Trainingsort; gestapelte/gerasterte Gruppen-Karten für
Mehr-Gruppen-Disziplinen, rote Hinweis-Kachel (z. B. Warteliste).
- Routing (app/routes.php) und Navigations-Dropdown (data/navigation.json) für
Turnen; zugehörige Styles in components.css.
- Themenbezogene, self-hostete Unsplash-Platzhalterbilder für die Kacheln.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv
Logo führt die Slide oben links an (statt großer Logo-Platte rechts); Inhalt
einspaltig, „Anzeige"/Status-Label als Pille unten rechts in der Fußzeile.
Damit gibt die rechte Hälfte das Hintergrundfoto frei — Motivwahl wird viel
einfacher. Logo nur rendern, wenn vorhanden; Wappen (Eigenwerbung) etwas größer.
Breadcrumb-Slide auf einen CTA reduziert: „Neue Website entdecken" → Startseite.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv
background-clip: padding-box auf den Foto-Varianten (--bg und house+bg),
damit das Hintergrundbild nicht unter den 1px-Rahmen (border-color:
transparent) gemalt wird und an der Kante durchschimmert.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv
