Stadionzeitung: Ergebnis- und Gegnerseite neu gestaltet

Ergebnisse laufen als Anzeigetafel (Wappen und Name je Seite, Ergebnis gross
in der Mitte) statt als Listenzeilen. Verworfen und im CSS begruendet: Tore
am rechten Blattrand, getoente Karten je Spiel, roter Strich unter der
Mannschaftszeile, graue Verlierer-Ziffern. Vereinsnamen einzeilig, sonst
ausgepunktet.

Die Gegnerseite bekommt ein symmetrisches Duell, eine aus den Tabellenwerten
abgeleitete Aufmacher-Zeile, den Vergleich als Balkenpaar aus der Mitte und
einen Tabellenausschnitt ueber die geteilte league-table-Komponente. Die
Balkenlaengen kommen aus Klassen in 5-Prozent-Stufen, nie aus einem
style-Attribut (die CSP verwirft inline styles stillschweigend).

Das Mitglied-werden-Poster sagt jetzt "Werde Teil unseres Vereins".

Alle geaenderten Seiten auf A5-Hoehe nachgemessen, kein Ueberstand.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Hv9SGDu3m3diiPrW9Fmj3v

public/assets/css/components.css

@@ -7261,74 +7261,136 @@ a.news-feature__link:hover .news-feature__more {
 }
 
 /* === stadionzeitung-ergebnisse (Live-Seite) === */
-/* Ergebnis-Rückblick: zwei Zeilen pro Spiel (Heim über Gast, wie das
-   „Nächste Spiele"-Band) — lange Vereinsnamen passen auf der schmalen
-   A5-Seite nie in eine Zeile. Eigene Mannschaft über Gewicht der Body-Schrift
-   markiert (Abel hat echte Schnitte — anders als Coolvetica erlaubt, siehe
-   CLAUDE.md „nie über font-weight" bei Coolvetica). */
+/* Ergebnis-Rückblick als Anzeigetafel: Wappen und Vereinsname je Seite, das
+   Ergebnis groß in der Mitte (Vorbild kicker/Sofascore). Vierter Entwurf,
+   19.09.2026 — die drei Vorgänger scheiterten alle an derselben Ursache:
+   sie waren Listenzeilen, und eine Zeile stellt Heim und Gast untereinander
+   statt gegenüber, obwohl eine Begegnung etwas Symmetrisches ist. Mit den
+   Toren rechts am Blattrand lag halbe Seitenbreite Leere zwischen Name und
+   Ziffer, eine getönte Karte dagegen sah „altbacken" aus, und mit den Toren
+   links fehlte der Seite die Hierarchie.
+
+   Die Mittelachse löst zusätzlich das Namensproblem: lange Namen wie
+   „(SG1) TSV Melkendorf III/ TSV 08 Kulmbach II" umbrechen in ihrer Spalte
+   über mehrere Zeilen, ohne dass irgendetwas verrutscht — deshalb steht der
+   Name UNTER dem Wappen und mittig, nicht daneben.
+
+   Flächen gibt es keine, nur Linien: Haarlinie zwischen den Begegnungen,
+   roter Strich unter der Mannschaftszeile, sonst weißes Blatt. */
+/* Trennung der Mannschaften: Haarlinie plus reichlich Abstand auf beiden
+   Seiten. Die Linie liegt am Abschnitt, nicht an der letzten Begegnung darin —
+   sonst wanderte sie bei mehreren Spielen pro Mannschaft mitten in den Block. */
 .stadionzeitung-ergebnisse__team {
-    margin-bottom: 4.2cqi;
-}
-
-.stadionzeitung-ergebnisse__team-name {
-    margin-bottom: 1.7cqi;
-    font-family: var(--ff-body);
-    font-weight: var(--fw-bold);
-    font-size: 2.7cqi;
-    text-transform: uppercase;
-    letter-spacing: var(--ls-caps);
-    color: var(--clr-text-muted);
-}
-
-.stadionzeitung-ergebnisse__match {
-    padding-bottom: 1.7cqi;
-    margin-bottom: 1.7cqi;
+    padding-bottom: 4.6cqi;
+    margin-bottom: 4.6cqi;
     border-bottom: 1px solid var(--clr-glass-border);
 }
 
-.stadionzeitung-ergebnisse__match:last-child {
+.stadionzeitung-ergebnisse__team:last-of-type {
+    padding-bottom: 0;
     margin-bottom: 0;
     border-bottom: 0;
 }
 
-.stadionzeitung-ergebnisse__meta {
-    font-size: 2.5cqi;
+/* Mannschaftszeile bewusst leise: die Gliederung macht der Abstand zwischen
+   den Mannschaften, keine Linie (ein roter Strich darunter war gebaut und am
+   19.09.2026 wieder entfernt — er zog mehr Aufmerksamkeit als die Ergebnisse
+   darunter). */
+.stadionzeitung-ergebnisse__team-name {
+    margin-bottom: 1.6cqi;
+    font-family: var(--ff-body);
+    font-size: 2.4cqi;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: var(--ls-caps);
     color: var(--clr-text-faint);
 }
 
-/* Das Zeilen-Layout gehört auf die ZEILE, nicht auf das Wappen darin (stand
-   hier mal als `.stadionzeitung-ergebnisse__row .crest` — dann wurde das Wappen
-   selbst zum Grid, lag als Block-Element auf eigener Zeile, und Vereinsname und
-   Tore rutschten als Inline-Spans darunter zusammen). `--crest-size` bleibt
-   trotzdem hier: Custom Properties erben, das Wappen bleibt eine dumme
-   Komponente und der Kontext gibt ihm seine Größe — so machen es alle anderen
-   Wappen-Kontexte im Projekt auch. */
-.stadionzeitung-ergebnisse__row {
-    --crest-size: 5.8cqi;
+.stadionzeitung-ergebnisse__match {
     display: grid;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
     align-items: center;
-    gap: 1.7cqi;
-    padding-block: 0.6cqi;
+    gap: 2.1cqi;
+    padding-block: 1.4cqi;
+    border-bottom: 1px solid var(--clr-glass-border);
 }
 
+.stadionzeitung-ergebnisse__match:last-child {
+    padding-bottom: 0;
+    border-bottom: 0;
+}
+
+/* Beide Seiten sind gleich gebaut und gleich breit (1fr), damit die Mittelachse
+   wirklich in der Mitte liegt — auch wenn eine Spielgemeinschaft drei Zeilen
+   Namen mitbringt und der Gegner eine. `--crest-size` setzt der Kontext, die
+   crest-Komponente bleibt dumm (gleiches Muster wie in allen anderen
+   Wappen-Kontexten). */
+.stadionzeitung-ergebnisse__side {
+    --crest-size: 8.5cqi;
+    display: grid;
+    justify-items: center;
+    gap: 1.2cqi;
+    text-align: center;
+}
+
+/* Einzeilig, notfalls ausgepunktet: ein umbrechender Name schiebt die
+   Anzeigetafel auseinander und die Zeilenpaare stehen dann ungleich hoch
+   nebeneinander. Die volle Schreibweise steht ohnehin im Matchcenter. */
 .stadionzeitung-ergebnisse__club {
-    min-width: 0;
-    font-size: 3.75cqi;
-    line-height: 1.2;
+    max-width: 100%;
+    overflow: hidden;
+    font-size: 3.2cqi;
+    line-height: 1.15;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-.stadionzeitung-ergebnisse__row--own .stadionzeitung-ergebnisse__club {
+.stadionzeitung-ergebnisse__side--own .stadionzeitung-ergebnisse__club {
     font-weight: var(--fw-bold);
 }
 
-.stadionzeitung-ergebnisse__goals {
+.stadionzeitung-ergebnisse__score {
+    display: grid;
+    justify-items: center;
+    gap: 0.8cqi;
+}
+
+.stadionzeitung-ergebnisse__result {
+    display: flex;
+    align-items: baseline;
+    gap: 0.8cqi;
     font-family: var(--ff-heading);
-    font-size: 5.8cqi;
+    font-size: 7.4cqi;
     line-height: 1;
 }
 
+/* Das Ergebnis läuft durchgehend in voller Textfarbe: eine zurückgenommene
+   Verlierer-Ziffer war gebaut und am 19.09.2026 verworfen (Felix) — auf dem
+   gedruckten Blatt ist eine graue Ziffer schlechter lesbar, und wer gewonnen
+   hat, sagt die Zahl selbst. */
+.stadionzeitung-ergebnisse__meta {
+    font-size: 2.5cqi;
+    text-transform: uppercase;
+    letter-spacing: var(--ls-caps);
+    color: var(--clr-text-faint);
+    white-space: nowrap;
+}
+
 /* === stadionzeitung-gegner (Live-Seite) === */
+/* Gegnerseite als Duell-Aufmacher plus Balkenvergleich (19.09.2026). Vorher
+   war das eine rosa getönte Karte mit der Begegnung und darunter eine
+   Zahlenkolonne aus sieben Zeilen: inhaltlich richtig, gestalterisch ohne
+   Blickfang, und die untere Blatthälfte blieb leer.
+
+   Drei Entscheidungen tragen den Aufbau:
+   - Das GEGNERWAPPEN ist der Bildanker (deutlich größer als unseres). Die
+     Seite handelt von ihm, nicht von der Begegnung.
+   - Der Tabellenplatz steht oben bei den Wappen, NICHT als Balken: dort ist
+     klein besser, ein Balken läge genau falsch herum.
+   - Der Vergleich läuft als Balkenpaar aus der Mitte (Vorbild Sofascore).
+     Die Länge kommt aus einer KLASSE in 5-Prozent-Stufen, nie aus einem
+     style-Attribut: die CSP verwirft inline styles stillschweigend, der
+     Balken wäre in Produktion unsichtbar (siehe CLAUDE.md). */
 .stadionzeitung-gegner {
     min-height: 100%;
 }
@@ -7336,90 +7398,204 @@ a.news-feature__link:hover .news-feature__more {
 .stadionzeitung-gegner__duell {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-    align-items: center;
+    align-items: start;
     gap: 2.5cqi;
-    margin-bottom: 5cqi;
-    padding: 3.3cqi;
-    border: 1px solid var(--clr-glass-border);
-    border-radius: var(--radius-btn);
-    background: color-mix(in srgb, var(--clr-accent) 5%, #fff);
+    margin-top: 2.5cqi;
 }
 
+/* Beide Seiten sind gleich gebaut und gleich groß. Der Gegner war hier kurz
+   mit doppelt so großem Wappen und seinem Namen in Coolvetica gesetzt — damit
+   stand er zweimal laut auf derselben Seite (Überschrift und Duell) und das
+   Blatt wirkte unruhig (Felix, 19.09.2026). Die Überschrift nennt ihn, das
+   Duell zeigt nur noch, wer gegen wen und auf welchem Platz. */
 .stadionzeitung-gegner__club {
-    --crest-size: 12cqi;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1.7cqi;
+    --crest-size: 11cqi;
+    display: grid;
+    grid-template-rows: auto minmax(7.4cqi, auto);
+    justify-items: center;
+    gap: 1.2cqi;
     min-width: 0;
     text-align: center;
 }
 
-.stadionzeitung-gegner__club strong {
+.stadionzeitung-gegner__club-name {
     font-size: 3.2cqi;
     line-height: 1.15;
 }
 
-.stadionzeitung-gegner__club--own strong {
-    color: var(--clr-accent);
-}
-
-.stadionzeitung-gegner__match {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5cqi;
-    font-size: 2.5cqi;
-    color: var(--clr-text-muted);
+/* Mittelspalte: „gegen" und der Anstoß stehen zusammen, damit im Duell nur
+   noch drei Dinge auf einer Höhe liegen (wir, wann, sie). Zwei lose
+   Platz-Ziffern und eine freistehende Datumszeile standen hier kurz und
+   machten den Kopf unruhig (Felix, 19.09.2026) — der Tabellenplatz steht
+   jetzt im Ausschnitt unter den Balken. */
+.stadionzeitung-gegner__vs {
+    display: grid;
+    justify-items: center;
+    gap: 1.2cqi;
+    padding-top: 3.3cqi;
+    text-align: center;
     white-space: nowrap;
 }
 
-.stadionzeitung-gegner__match strong {
-    font-size: 2.9cqi;
-    color: var(--clr-text);
+.stadionzeitung-gegner__vs-wort {
+    font-size: 2.7cqi;
+    text-transform: uppercase;
+    letter-spacing: var(--ls-caps);
+    color: var(--clr-text-faint);
+}
+
+.stadionzeitung-gegner__anstoss {
+    font-size: 2.7cqi;
+    line-height: 1.4;
+    color: var(--clr-text-muted);
+}
+
+/* Im Ausschnitt entfällt die Zonen-Legende: sie erklärt Auf- und Abstieg,
+   und das ist die Aufgabe der vollständigen Tabellenseite weiter hinten im
+   Heft. Hier geht es nur um die Nachbarschaft der beiden Mannschaften. */
+.stadionzeitung-gegner__ausschnitt {
+    margin-top: 3.3cqi;
+}
+
+.stadionzeitung-gegner__ausschnitt .league-table__legend {
+    display: none;
+}
+
+/* Der Ausschnitt läuft eine Spur enger als die vollständige Tabellenseite:
+   er teilt sich das Blatt mit Duell, Aufmacher und Balken. Gemessen: mit den
+   Maßen der Tabellenseite stand die Seite 16px über der A5-Kante. */
+.stadionzeitung-gegner__ausschnitt .league-table th,
+.stadionzeitung-gegner__ausschnitt .league-table td {
+    padding: 0.7cqi 0.9cqi;
+}
+
+.stadionzeitung-gegner__ausschnitt .league-table tbody .crest {
+    --crest-size: 4cqi;
+}
+
+.stadionzeitung-gegner__ausschnitt-titel {
+    margin-bottom: 1.4cqi;
+    font-size: 2.4cqi;
+    text-transform: uppercase;
+    letter-spacing: var(--ls-caps);
+    color: var(--clr-text-faint);
+}
+
+/* Zwei Blöcke (wenn die Mannschaften weit auseinanderliegen) bekommen Luft
+   dazwischen, sonst sähe es aus wie eine durchgehende Tabelle mit Sprung. */
+.stadionzeitung-gegner__ausschnitt .table-scroll-frame + .table-scroll-frame {
+    margin-top: 2.1cqi;
+}
+
+/* Die Tabelle in einem Satz: derselbe Bestand, nur in Sprache. Coolvetica
+   trägt hier, weil die Zeile kurz ist und nie umbricht. */
+.stadionzeitung-gegner__aufmacher {
+    margin-top: 3.3cqi;
+    padding-top: 2.5cqi;
+    border-top: 0.5cqi solid var(--clr-accent);
+    font-family: var(--ff-heading);
+    font-size: 5.8cqi;
+    line-height: 1;
+    letter-spacing: var(--ls-heading);
+    text-transform: uppercase;
 }
 
 .stadionzeitung-gegner__vergleich {
-    border-block: 1px solid var(--clr-glass-border);
+    margin-top: 2.5cqi;
 }
 
 .stadionzeitung-gegner__vergleich-head,
 .stadionzeitung-gegner__vergleich-row {
     display: grid;
-    grid-template-columns: 1fr 2fr 1fr;
+    grid-template-columns: 6cqi minmax(0, 1fr) 24cqi minmax(0, 1fr) 6cqi;
     align-items: center;
+    gap: 1.7cqi;
     text-align: center;
 }
 
 .stadionzeitung-gegner__vergleich-head {
-    padding-block: 1.7cqi;
-    font-size: 2.5cqi;
-    font-weight: var(--fw-bold);
+    padding-bottom: 1.4cqi;
+    margin-bottom: 1.4cqi;
+    border-bottom: 1px solid var(--clr-glass-border);
+    font-size: 2.4cqi;
     text-transform: uppercase;
     letter-spacing: var(--ls-caps);
-    color: var(--clr-text-muted);
+    color: var(--clr-text-faint);
+}
+
+/* Die beiden äußeren Spaltenköpfe sitzen über den Zahlen, der mittlere über
+   dem Label — deshalb spannt er über die drei inneren Spalten. */
+.stadionzeitung-gegner__vergleich-head span:nth-child(2) {
+    grid-column: 2 / 5;
 }
 
 .stadionzeitung-gegner__vergleich-row {
-    min-height: 6.5cqi;
-    border-top: 1px solid var(--clr-glass-border);
+    min-height: 5.8cqi;
 }
 
-.stadionzeitung-gegner__vergleich-row span {
+.stadionzeitung-gegner__wert {
+    font-family: var(--ff-heading);
+    font-size: 4.4cqi;
+    line-height: 1;
+}
+
+.stadionzeitung-gegner__label {
     font-size: 2.8cqi;
     color: var(--clr-text-muted);
 }
 
-.stadionzeitung-gegner__vergleich-row strong {
-    font-family: var(--ff-heading);
-    font-size: 4.8cqi;
-    line-height: 1;
+/* Balkenpaar: der linke wächst aus der Mitte nach links, der rechte nach
+   rechts. Die Spur bleibt sichtbar (helle Fläche), damit auch ein Wert von
+   null als Zeile lesbar ist. */
+.stadionzeitung-gegner__balken {
+    display: flex;
+    justify-content: flex-start;
+    block-size: 2.2cqi;
+    border-radius: 1.1cqi;
+    background: var(--clr-glass-border);
+    overflow: hidden;
 }
 
-.stadionzeitung-gegner__vergleich-row strong:first-child {
-    color: var(--clr-accent);
+.stadionzeitung-gegner__balken--own {
+    justify-content: flex-end;
 }
 
+.stadionzeitung-gegner__balken-fuellung {
+    display: block;
+    block-size: 100%;
+    border-radius: 1.1cqi;
+    background: var(--clr-text);
+}
+
+/* Unsere Seite rot, die des Gegners schwarz: die einzige Farbe der Seite
+   steht damit bei uns, ohne dass Rot Fließtext tragen müsste. */
+.stadionzeitung-gegner__balken--own .stadionzeitung-gegner__balken-fuellung {
+    background: var(--clr-accent);
+}
+
+/* 5-Prozent-Stufen, siehe Kommentar oben (kein style-Attribut). */
+.stadionzeitung-gegner__balken-fuellung--s0 { inline-size: 0%; }
+.stadionzeitung-gegner__balken-fuellung--s1 { inline-size: 5%; }
+.stadionzeitung-gegner__balken-fuellung--s2 { inline-size: 10%; }
+.stadionzeitung-gegner__balken-fuellung--s3 { inline-size: 15%; }
+.stadionzeitung-gegner__balken-fuellung--s4 { inline-size: 20%; }
+.stadionzeitung-gegner__balken-fuellung--s5 { inline-size: 25%; }
+.stadionzeitung-gegner__balken-fuellung--s6 { inline-size: 30%; }
+.stadionzeitung-gegner__balken-fuellung--s7 { inline-size: 35%; }
+.stadionzeitung-gegner__balken-fuellung--s8 { inline-size: 40%; }
+.stadionzeitung-gegner__balken-fuellung--s9 { inline-size: 45%; }
+.stadionzeitung-gegner__balken-fuellung--s10 { inline-size: 50%; }
+.stadionzeitung-gegner__balken-fuellung--s11 { inline-size: 55%; }
+.stadionzeitung-gegner__balken-fuellung--s12 { inline-size: 60%; }
+.stadionzeitung-gegner__balken-fuellung--s13 { inline-size: 65%; }
+.stadionzeitung-gegner__balken-fuellung--s14 { inline-size: 70%; }
+.stadionzeitung-gegner__balken-fuellung--s15 { inline-size: 75%; }
+.stadionzeitung-gegner__balken-fuellung--s16 { inline-size: 80%; }
+.stadionzeitung-gegner__balken-fuellung--s17 { inline-size: 85%; }
+.stadionzeitung-gegner__balken-fuellung--s18 { inline-size: 90%; }
+.stadionzeitung-gegner__balken-fuellung--s19 { inline-size: 95%; }
+.stadionzeitung-gegner__balken-fuellung--s20 { inline-size: 100%; }
+
 .stadionzeitung-gegner__empty {
     padding: 4.2cqi;
     border: 1px solid var(--clr-glass-border);