/*
Theme Name: FC Herrliberg
Theme URI: https://fcherrliberg.ch
Author: FC Herrliberg
Description: Das Theme des FC Herrliberg. Das CSS ist unveraendert aus dem
  Prototyp uebernommen — fch.css ist die Quelle, nicht der Style-Block im
  Prototyp. Der Style-Block ist fch.css plus drei Prototyp-Beigaben.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: fch
*/

/* ── ⚠ VERWEISE OHNE ZEILENNUMMERN — 25.09.2026 ─────────────────

   **Didi: «Keine Zeilennummern in Kommentaren.»** Ein Verweis der alten
   Form ~~«:13013»~~ stimmt genau so lange, bis jemand weiter oben eine
   Zeile einfuegt — und ab dann zeigt er falsch, ohne es zu verraten. Ein Name
   veraltet auch, aber er faellt auf: Wer `.lb-knopf` sucht und nichts
   findet, weiss wenigstens, dass er suchen muss.

   **Nachgeschlagen und nicht uebersetzt.** Jeder Verweis ist an seiner Zahl
   aufgeschlagen worden, bevor er ersetzt wurde. **19 von 97 zeigten noch
   aufs Ziel, 78 nicht** — wer eine solche Zahl blind in den Waehler
   uebersetzt, der heute dort steht, schreibt den FALSCHEN Namen fest, und
   zwar dauerhaft: Einem Namen sieht man nicht an, dass er veraltet ist.
   Darum steht hier jeweils der Waehler, den der SATZ meint, und nicht der,
   den die ZAHL traf.

   ⚠⚠ **In ~~durchgestrichenen~~ Zitaten bleiben die Zahlen stehen.** Ein
   solches Zitat ist die woertliche Aufzeichnung eines abgeloesten Standes.
   Wer darin eine Zahl richtigstellt, faelscht die Aufzeichnung und macht aus
   einem Beleg eine Behauptung. Die veraltete Zahl ist dort kein Mangel,
   sondern Teil dessen, was damals dastand. Dasselbe gilt fuer woertlich
   zitierte Saetze aus anderen Dateien.

   **Wo das Ziel nicht mehr zu ermitteln war**, ist der Verweis
   durchgestrichen und der Satz daneben stehengeblieben: Die Aussage kann
   weiter stimmen, auch wenn der Zeigefinger nicht mehr weiss, wohin. Das
   betrifft sechs Verweise.

   **In diesem Zug ist keine Regel angefasst worden.** Belegt und nicht
   behauptet: Nimmt man dem Blatt seine Kommentare und seinen Leerraum,
   bleiben **131'437 Zeichen** — zeichengleich mit dem Stand davor,
   sha256 `6390bf61c5dff2ab` beidseits. Die einzige Spur ausserhalb der
   Kommentare sind die zwei Zeilenumbrueche, mit denen dieser Kommentar
   hier abgesetzt steht. */

/*
  UEBERTRAGEN am 30.08.2026, unveraendert.

  Wer uebertraegt und gleichzeitig aendert, kann hinterher nicht sagen, wovon
  ein Unterschied kommt. Darum steht hier Zeichen fuer Zeichen, was in
  fch.css steht — die Umkehrung hell/dunkel, Roadmap 25 und Roadmap 26 sind
  eigene Zuege mit eigener Messung.

  DER BELEG, AM 30.08.2026 GEFUEHRT UND HIER FESTGESCHRIEBEN.

  `pruef/uebertragung.py` wurde als bd85e0d eingecheckt, BEVOR es diese Datei
  gab, und schlug damals mit «gibt es noch nicht» fehl. Nach der Uebertragung
  meldete sie:

      1 Inhalt      GLEICH   7c44f5d4de061fd3 beidseits
      2 Zeilen      GLEICH   7375
      3 Selektoren  GLEICH   1475
      4 Klammern    GLEICH   1511/1511 · Kommentare 678/678

  **Das Werkzeug ist danach aus dem Lauf genommen worden**, und zwar vor dem
  ersten Eingriff in diese Datei — nicht nachdem es fehlgeschlagen waere.
  Seit Schritt 5b/3a weicht `style.css` von `fch.css` ab; eine Pruefung, die
  ab jetzt IMMER meldet, ist keine Pruefung mehr, sondern eine Zeile, die man
  wegklickt.

  > **Ein Werkzeug, dessen Frage beantwortet ist, wird abgeraeumt und seine
  > Antwort aufgeschrieben. Eines, das man laufen laesst, bis es stoert,
  > erzieht dazu, seine Meldungen zu uebersehen.**

  Der Wortlaut des Werkzeugs steht in bd85e0d, falls jemand die vier Zahlen
  nachrechnen will.

  Drei Stellen unterschieden fch.css vom Style-Block des Prototyps; jede hat
  ihren Entscheid, und keine davon aendert eine Regel:

    Leerzeile     Der Style-Block beginnt mit einer und endet mit zwei
                  Leerzeilen. Das ist die Form, in der ein <style>-Block im
                  HTML steht, und kein CSS — sie faellt weg.

    Wappen        fch.css verweist auf assets/logo-fch.png, der Style-Block
                  traegt dieselben zwei Bilder als base64. Uebernommen sind
                  die Pfade: Der Prototyp ist EINE Datei und muss ohne
                  Nachbarn laufen, ein Theme hat Nachbarn — und ein
                  Datenblock in einer Zeile ist nicht zwischenspeicherbar,
                  nicht austauschbar und nicht lesbar.

    Bildblock     83 Zeilen Farbverlaeufe, die die Bildattrappen fuellen.
                  Sie stehen nur im Style-Block und darum nicht hier. Der
                  Kommentar "Bildattrappen, nur im Prototyp" ist die letzte
                  Zeile von fch.css und bleibt als Marke stehen, wo sie
                  ansetzten.

  DIE FOLGE, und sie gehoert hierher: Ohne die Attrappen sind die Bildfelder
  leer, bis ein echtes Bild darin steht. Hoehenmessungen im Theme sind darum
  NICHT mit denen des Prototyps vergleichbar, solange keine Bilder da sind.
  Der Datenstand liefert drei — 3:1, 4:3, 1:1.
*/

/*
  3a AM 30.08.2026 — UND WIE HIER GEZAEHLT WIRD.

  **Ohne Definition ist die Zahl zwei Zahlen.** «77 reine Farbregeln» und
  «78» sind derselbe Bestand, verschieden gezaehlt. Es gilt:

    Regel            ein Selektorblock, auch wenn sein Selektor Kommas hat.
                     `.papier a, .papier b { }` ist EINE Regel.
    Farbeigenschaft  color · background-color · border-*-color · fill ·
                     stroke · outline-color · text-decoration-color
    Kurzform         background · border · border-top/right/bottom/left ·
                     outline · box-shadow — sie TRAGEN Farbe, sind aber
                     keine. Wer sie als Farbe zaehlt, kommt auf 78; wer sie
                     als gemischt zaehlt, auf 61.
    Zwilling         eine Regel der obersten Ebene mit demselben nackten
                     Selektor und derselben Eigenschaft, ohne `.papier`.

  Gemessen auf oberster Ebene — alle 117 `.papier`-Regeln stehen dort,
  keine in einem `@media`.

    117   Regeln mit `.papier` im Selektor
     61   nur Farbeigenschaften
     28   Kurzform, die Farbe traegt
     26   setzt wirklich etwas anderes (max-width, padding, grid, position)
      2   nur Tokens oder leer

  UND DIE ZAHL, DIE DEN ZUG GESTOPPT HAT:

    188   Farbdeklarationen unter `.papier` (Eigenschaft × Selektorteil)
     53   mit dunklem Zwilling
    135   ohne

  **`.papier` ist zu drei Vierteln nicht die Uebersteuerung einer dunklen
  Fassung, sondern die einzige Stelle, an der diese Farben ueberhaupt gesetzt
  werden.** Hell zur Grundfassung zu machen merzt die Regeln darum nicht aus —
  es verschiebt sie und verlangt 135 neue Regeln im dunklen Bereich, damit
  dort weiter geerbt wird, was heute geerbt wird.

  ── DER ZURUECKGENOMMENE ENTSCHEID ────────────────────────────────────

  **Am 29.08.2026 war die Umkehrung hell/dunkel beschlossen: hell wird
  Grundfassung, dunkel die Ausnahme.** Am 30.08. ist sie an einer Messung
  gescheitert, und der Entscheid steht hier, damit er nicht stillschweigend
  verschwindet.

    188   Farbdeklarationen unter `.papier`
     53   mit dunklem Zwilling
    135   OHNE

  **Hell zur Grundfassung zu machen merzt die Regeln nicht aus — es verschiebt
  sie.** Aus `.papier X{color:…}` wuerde `X{color:…}`, und der dunkle Bereich
  braeuchte 135 NEUE Regeln, damit dort weiter geerbt wird, was heute geerbt
  wird. Die Regelzahl stiege, statt zu fallen.

  > **Ein Entscheid, der stillschweigend verschwindet, wird in einem Jahr neu
  > getroffen.**

  Gebaut ist stattdessen Weg 1: die sechs Rollentoken, `.papier` bleibt
  Geltungsbereich. Die Umkehrung ist damit nicht verworfen, sondern vertagt —
  und wer sie aufnimmt, faengt bei den 135 an und nicht bei den 53.

  ── WAS ABSICHTLICH STEHEN BLEIBT ─────────────────────────────────────

  **Die 135 Deklarationen ohne dunklen Zwilling sind nicht angetastet, und das
  ist kein Versehen.** Sie setzen Farben, die es im dunklen Bereich gar nicht
  gibt: Dort erbt das Element, hier steht ein Wert. Ein Rollentoken dafuer
  haette auf beiden Seiten einen Wert — und auf der dunklen einen, den heute
  niemand setzt.

  > **Ein Token, das eine Seite erfindet, um symmetrisch auszusehen, ist eine
  > Aenderung mit dem Gesicht einer Aufraeumung.**

  Wer sie doch anfassen will, braucht zuerst eine Antwort auf «was soll im
  Dunkeln dort stehen» — und das ist eine Gestaltungsfrage und keine
  Umbaufrage.

  ── GEBAUT ────────────────────────────────────────────────────────────

    117 → 115   zwei Regeln, die mit DEMSELBEN Wert uebersteuerten
    115 →  82   43 Deklarationen auf sechs Rollentoken

  Beides belegt durch die Referenz: 0 Abweichungen an 5450 Messpunkten,
  38 Adressen, zehn Breiten.
*/

/* ===== ab hier aus fch.css, seit 3a mit Abweichungen ===== */
/* ═══════════════════════════════════════════════════════════
   FC Herrliberg — Stylesheet
   Aufbau: 00 Basis · 10 Typografie · 20 Kopf · 30 Hinweis
           40 Hero · 50 Matchday · 60 Bausteine · 70 Seitenköpfe
           80 Startseite · 90 Teams · 100 Teamseite · 110 Spiele
           120 Partner & Shop · 130 Formulare · 140 Fuss · 150 Prototyp
   Regel: jeder Selektor genau einmal. Medienabfragen stehen beim Baustein.
   ═══════════════════════════════════════════════════════════ */

/* ── 00 Basis ─────────────────────────────────────────────── */

/* ── Die Schriften ────────────────────────────────────────────
   **Seit dem 27.08.2026 vom eigenen Server.** Vorher holte der Kopf des
   Dokuments sie bei `fonts.googleapis.com` — zwei Vorverbindungen und ein
   Stylesheet, das seinerseits `fonts.gstatic.com` anfragte. Damit faellt der
   einzige der fuenf Drittanbieter weg, den eine einmalige Handlung erledigt.

   **Herkunft: Google Fonts, OFL-Lizenz, umgewandelt am 26.08.2026.**
   Archivo Version 2.001, Public Sans Version 2.001. Wer sie je tauscht, holt
   dort dieselben Familien, schneidet auf Latein plus Pfeile zu und wandelt
   nach woff2. Das kommt selten vor und faellt niemandem auf, wenn es
   unterbleibt — darum steht es hier und nicht nur im Plan.

   **Variabel und nicht statisch — und der Grund ist groesser als gedacht.**
   Nachgezaehlt am 27.08.2026, Kommentare ausgenommen: `wdth` steht an **46
   Stellen** mit **zehn** verschiedenen Werten — 100, 102, 104, 106, 108, 110,
   112, 114, 116, 118 — und alle 46 auf `var(--d)`. Der Auftrag sprach von
   drei Stellen (106, 110, 112); das war um das Fuenfzehnfache zu wenig und
   spricht noch staerker fuer die variable Fassung. Mit statischen Schnitten
   waere je Kombination aus Breite und Staerke eine eigene Datei noetig.

   **Und ein Unterschied, den der Wechsel mitbringt.** Google lieferte Public
   Sans NICHT variabel, sondern als drei statische Schnitte — der Aufruf
   lautete `ital,wght@0,400;0,500;0,600;1,400`. Die Website verlangt an **24
   Stellen** Public Sans in **700**: `.eye`, `.kat`, `.grp`, `.mini`, `.btn`,
   `.mehr`, `th`, `.spt`, `.rz-tag`, `.fuss h4` und vierzehn weitere. Die
   bekamen bisher den naechstliegenden Schnitt; jetzt bekommen sie die echte
   700. **Gemessen an vier Stellen: 1,2 bis 1,8px breiter, rund 0,8 Prozent.**
   (⚠ `.fuss h4` ist am 24.09.2026 entfallen — die Regel traf keinen
   `<h4>`; siehe Abschnitt 140. Die Zählung vom 27.08.2026 bleibt stehen,
   wie sie gemessen wurde — es sind seither 23 Stellen.)
   Archivo misst ueberall auf das Pixel gleich — dort war schon vorher die
   Achse geladen (`wdth,wght@75..125,400..900`).

   **Das heisst: «genau gleich wie vorher» stimmt fuer Archivo und nicht fuer
   Public Sans in 700.** Der Unterschied ist eine Verbesserung — echte statt
   angenaeherter Fettung — aber er ist da, und er ist gemessen.

   **Kein kursives Archivo.** Ausgezaehlt: keine Regel verbindet `var(--d)`
   mit `font-style:italic`. Beide Kursivstellen sind Public Sans — `.fc` und
   `.ts .leer`. Das spart 162 kB, mehr als die drei geladenen Dateien
   zusammen.

   **`font-weight` und `font-stretch` nennen die ganze Achse, nicht einen
   Punkt darauf.** Die Dateien tragen als Voreinstellung wght 600 (Archivo)
   und wght 100 (Public Sans) — ohne die Bereichsangabe haelt der Browser die
   Datei fuer genau diesen einen Schnitt und rechnet die uebrigen Staerken
   selbst aus, statt die Achse zu benutzen. Gemessen aus den Dateien: Archivo
   wght 100–900 und wdth 62–125, Public Sans wght 100–900. */
@font-face{
  font-family:'Archivo';
  src:url('assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Public Sans';
  src:url('assets/fonts/publicsans-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Public Sans';
  src:url('assets/fonts/publicsans-var-italic.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

/* **Die Pfeile kommen aus Archivo — ohne ein einziges neues Markup.**
   Gemessen am 27.08.2026: Die Website zeichnet an **208 Stellen** einen Pfeil,
   verteilt auf **sieben Traeger** — `a.mehr` (106), `a.jahrzeile::after` (50),
   `.tz-p` (32), `a.tor::after` (6), `.sp-raus` (6), `.sp-rein` (6) und zwei
   blanke `a` in der Anzeigetafel. **Alle 208 verlangen Public Sans, und Public
   Sans kennt keinen der vier Pfeile** — nicht der Zuschnitt hat sie verloren,
   die Schrift hat sie nie gehabt. Archivo hat alle vier.

   **Der naheliegende Weg waere `font-family:var(--d)` an den sieben Traegern
   gewesen. Er traegt nicht:** Bei `a.mehr` und den zwei blanken `a` steht der
   Pfeil INNERHALB des Linktexts — «Matchbericht →». Eine Familienangabe dort
   stellte 108 ganze Verweise auf Archivo um, nicht ihre Pfeile. Nur ein
   eigenes Element je Pfeil haette es geloest, also 108 Markup-Aenderungen.

   **`unicode-range` loest es an einer Stelle.** Die Regel gibt der Familie
   «Public Sans» fuer genau vier Zeichen eine andere Datei. Der Browser holt
   sie ohnehin schon — es ist dieselbe Archivo-Datei, die jede Ueberschrift
   traegt —, also kostet es keine zusaetzliche Anfrage.

   **Vorher zeichnete sie Segoe UI**, gemessen ueber
   `CSS.getPlatformFontsForNode`: ein Glyph Ersatz an jeder Stelle. Nicht
   falsch, aber eine Systemschrift mitten im Satz. */
@font-face{
  font-family:'Public Sans';
  src:url('assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+2190-2193;
}

:root{
  --gelb:#FCDE00;
  --dun:#0B0B0A;
  --nacht:#0B0B0A;
  --stein:#151513;
  --stein-hell:#1F1F1C;
  --tafel:#22221F;
  --tafel-hell:#2A2A26;
  --kalk:#FFFFFF;
  --halb:#9C9C95;
  --linie:rgba(255,255,255,.13);

  --papier:#FFFFFF;
  --papier-flaeche:#F2F0EA;
  /* Seit dem 21.08.2026 ohne Leser: die fuenf anfassbaren Zeilen und
     Karten auf Papierseiten tragen alle --nav-beruehrt. Nicht geloescht,
     sondern hier stehengelassen — eine Variable, die verschwindet, ohne
     dass jemand die Entscheidung findet, kommt als neue Farbe zurueck. */
  --papier-flaeche-hover:#E9E6DE;
  --papier-text:#0B0B0A;
  --papier-halb:#5A5A55;
  --papier-linie:rgba(11,11,10,.14);

  /* **Die Rolle haengt an der Flaeche, nicht an der Seite.**
     Augenzeile, Kategorie und Gruppentitel sind Akzentschrift: Gelb auf
     dunklem Grund, Textfarbe auf hellem. Bis zum 29.08.2026 stand das als
     `.papier .eye,.papier .kat,.papier .grp{color:var(--papier-text)}` —
     also an der SEITE. Eine dunkle Flaeche auf einer hellen Seite bekam
     damit die helle Schrift, und die Augenzeile auf `suche` stand dunkel
     auf dunkel: Kontrast 1,00, im Bild nichts.
     Wer den Wert an die Flaeche haengt, braucht keine Ausnahme mehr —
     und die vergessene Ausnahme ist der Fall, der nicht auffaellt, weil
     er keinen Fehler erzeugt, sondern Nichts. */
  --akzent:var(--gelb);
  /* **Die Breite, ab der eine Zeile als Balken wirkt.** Sie stand dreimal als
     Zahl im Stylesheet — bei `.form`, `.anfrageblock` und
     `.einbettung.schmal` —, jedes Mal mit derselben Begruendung: «wie breit
     darf ein Eingabefeld werden, bevor es als Balken wirkt». Seit dem
     24.08.2026 hat sie einen Namen, weil die Kontaktseite sie als vierte
     Stelle braucht und dort eine KANTE bildet: Anschrift und Formular
     beginnen und enden an derselben Stelle. Drei Zahlen sind eine
     Wiederholung, vier waeren ein Zufall.

     560 ist zugleich der Umbruchpunkt, den das Projekt fuer Eingabefelder und
     Kachelraster fuehrt — dieselbe Zahl, dieselbe Frage. */
  --feldbreite:560px;
  --gold:#7A6E3A;
  /* Textleiter — fuenf Werte tragen alle Textrollen. Schritte 1.24 / 1.21 /
     1.08 / 1.18; ganze Zahlen, weil halbe Pixel hier nichts bewirken und ein
     System lesbar bleiben soll. Wer die Leiter verschieben will, aendert
     diese fuenf Zeilen statt neunzig Deklarationen.

     ── ⚠ AUS VIER WERTEN WURDEN FUENF — 24.09.2026 ──────────────────────
     > ~~«Textleiter — vier Werte tragen alle Textrollen. Schritte 1.24 /
     > 1.21 / 1.27 … Wer die Leiter verschieben will, aendert diese vier
     > Zeilen statt neunzig Deklarationen.»~~
     > — Stand bis 24.09.2026.

     `--tx-kleiner:13px` ist dazugekommen; die Begruendung steht bei der
     Zeile selbst. **Der Schritt 14 auf 13 ist 1.08 und faellt aus dem
     Rhythmus der uebrigen** — das ist kein Versehen, sondern der Grund,
     warum diese Stufe genau eine Rolle traegt. Aus dem einen Schritt 1.27
     zwischen klein und etikett sind zwei geworden: 1.08 und 1.18. */
  /* Nur für .lead, den Einstieg einer Seite — einmal je Seite.
     Abschnittseinleitungen (.intro) tragen --tx: sie kommen bis zu
     zehnmal vor, und zehn Einstiege sind keiner.

     **Stufe E ist am 29.08.2026 in C aufgegangen; dies ist keine Stufe mehr,
     sondern der Name einer Rolle.** Der Wert ist zeichengleich die C-Kurve.

     Gezählt trugen die zwei Stufen 130 Elemente (C) gegen 31 (E), und sie
     unterschieden sich auf vier Wegen gleichzeitig: Schnitt 700/800 gegen
     400, Familie Archivo gegen Public Sans, Laufweite negativ gegen normal,
     Farbe voll gegen gedämpft. Dazu die Länge — C hat im Median drei Wörter,
     E siebzehn. **C sind Beschriftungen, E sind Sätze.**

     Nur in der Grösse stimmten sie überein: bei 320, 360, 390 und 1440 auf
     den Pixel gleich, und bei 768 und 1024 verkehrt herum — dort war der
     Lead 6 % LAUTER als der Titel darüber, den er fortsetzt.

     > **Eine Rolle, die sich auf vier Wegen zu erkennen gibt, braucht die
     > Grösse nicht als fünften.**

     Gemessen kostet der Zusammenzug nichts: null Zeilenumbrüche bei 320,
     19 px auf 31 Elemente bei 1440. Was verschwindet, ist die Umkehrung.

     **E darf nicht wiederverwendet werden.** Der Buchstabe bleibt frei, mit
     einer Lücke in der Reihe — S · A · B · C · (E) · F · G · I. Stünde in
     einem Jahr eine neue Stufe unter dem alten Namen, läse sich jeder
     ältere Bericht falsch, ohne dass es jemand merkt.

     **Dieser Wert muss zeichengleich mit der C-Kurve bleiben.** Sie steht an
     neun weiteren Stellen; wer C verschiebt, verschiebt auch diese Zeile. */
  --tx-lead:clamp(19px,1.04rem + 0.30vw,21px);
  --tx:17px;
  --tx-klein:14px;
  /* ── ⚠⚠ DIE HALBE STUFE ZWISCHEN KLEIN UND ETIKETT — 24.09.2026 ───────
     Didi: «Auf dem Handy (unter 640 px) trotzdem kleiner: 13 px statt 14.
     Gibt es in der Leiter eine Stufe zwischen `--tx-etikett` (11) und
     `--tx-klein` (14), diese nehmen; sonst eine Stufe 13 px anlegen.»

     **Es gab keine — nachgesehen und nicht vermutet:** zwischen 11 und 14
     stand nichts. Also diese hier, und als benannte Stufe im `:root` statt
     als lose Zahl an der Regel. Didis Bedingung; wer die Leiter verschiebt,
     verschiebt damit auch sie.

     ⚠⚠ **Sie eroeffnet die zwoelf Zahlen weiter unten NICHT wieder.** Die
     zwoelf sind von 13 und 15 auf 14 gekommen, weil sie ohne eigenen Grund
     neben der Skala standen — nicht, weil 13 gefehlt haette. Hier ist der
     Grund aufgeschrieben und gemessen, und es gibt genau einen Leser.

     > **Eine Stufe entsteht aus einem Grund, nicht aus einer Zahl, die
     > wieder verfuegbar ist.**

     Der eine Leser: `.ts`, die Torliste im Kasten «Letztes Resultat», unter
     620 — ~~«unter 640»~~ bis 24.09.2026 abends, dann Didis Zug auf die
     Hausgrenze. Ballsymbol (Hausregel `.ic`, `1em`) und Marke `(P)`
     (`abbr.ts-zus`, `.86em`) haengen dort relativ daran und gehen von
     selbst mit — gemessen 13px, 13x13px, 11.18px. */
  --tx-kleiner:13px;
  --tx-etikett:11px;

  /* ── Zwoelf Zahlen, die der Prototyp anders schreibt ───────────────────
     **Damit der naechste Abgleich sie nicht als Fehler meldet.** Der
     Regelvergleich stellt Prototyp und Theme Zeile fuer Zeile
     gegenueber; zwoelf `font-size` lauten dort verschieden, und alle zwoelf
     sind dieselbe Entscheidung: **Sie standen neben der Skala und
     stehen jetzt darauf.**

         13px -> 14px   .sk-zahl · .sp-raus · .sp-rein
                        .sp-eins tr.saisonkopf th
                        (entfallen 12.09.2026: .sp-tab tr.saisonkopf th)
                        .klub b (untere Klammer des clamp)
         15px -> 14px   .ez-ziel · .jahrzeile::after · .rang-raster b
                        .rz-pfeil · .sp-eins td.tw b (unter 640)
         10px -> 11px   .rz-bericht

     15 liegt zwischen `--tx-klein` und `--tx`, 10 unter `--tx-etikett`.
     **Keine der beiden ist eine Stufe**, und wer sie zurueckschreibt, haengt
     der Leiter zwei Sprossen an, die niemand gesetzt hat.

     > **Eine Zahl, die auf keiner Stufe steht, ist keine kleinere
     > Stufe — sie ist gar keine.**

     Wer eine davon wieder auf 15 oder 10 setzen will, aendert die
     Skala und nicht die Zeile.

     ── ⚠⚠ 13 IST SEIT DEM 24.09.2026 EINE STUFE — UND AENDERT HIER NICHTS ──
     > ~~«13 und 15 liegen zwischen `--tx-klein` und `--tx`, 10 unter
     > `--tx-etikett`. **Keine der drei ist eine Stufe** … Wer eine davon
     > wieder auf 13 oder 15 setzen will, aendert die Skala und nicht die
     > Zeile.»~~
     > — Stand bis 24.09.2026.

     Die Skala ist genau so geaendert worden, wie der Satz es verlangte:
     `--tx-kleiner:13px` steht oben, mit Namen und mit Grund. **Die zwoelf
     Stellen hier bleiben trotzdem auf 14** — sie hatten nie einen eigenen
     Grund fuer 13, und «die Zahl gibt es wieder» ist keiner. */

  /* Auf der grauen Fläche (#F2F0EA) liegt --gold bei 4.47 — knapp unter der
     Schwelle von 4.5. Diese Abstufung ergibt 5.14 und sieht gleich aus. */
  --gold-flaeche:#6F6534;
  --rot:#C81E1E;

  --d:'Archivo',system-ui,sans-serif;
  --b:'Public Sans',system-ui,sans-serif;
  --rand:18px;

  /* Behälterbreiten. Hintergründe laufen über die volle Breite,
     der Inhalt darin sitzt in einem dieser Behälter. */
  --content-sm:820px;    /* Fliesstext */
  --content-md:1100px;   /* Formulare, schmale Inhalte */
  --content-lg:1400px;   /* Standardinhalt */
  --content-xl:1680px;   /* ab 1800px, siehe Abschnitt 145 */
  --content-xl-uw:1880px; /* ab 3000px, echtes Ultrabreitbild */
  --content-kopf:2400px; /* Kopf und Schnellzugriffe, bewusst breiter als der Inhalt */

  /* Höhe des klebenden Kopfes und Höhe der zweiten Matchzelle. Beide braucht
     der erste Bildschirm, damit die Matchtafel an der Fensterkante abschliesst
     — siehe Abschnitt 80. Im Browser gemessen, nicht geschätzt. */
  --kopfhoehe:56px;
  --zelle2:274px;

  /* Navigation: die Untermenü-Ebene spricht auf allen Geräten dieselbe Sprache.
     Gelb = Hauptnavigation · Schwarz = geöffneter Hauptpunkt · Off-White = Unterebene
     · sehr helles Gelb = Berührung · gelber Balken links = aktuelle Unterseite.
     #F8F8F5 statt reinem Weiss, weil es neben dem warmen Gelb ruhiger wirkt. */
  --nav-flaeche:#F8F8F5;
  --nav-linie:#E5E5DF;
  --nav-beruehrt:#FFF4B8;
  --nav-aktiv:#FFF8D6;

  /* Schriftgewichte. Archivo trägt Titel, Zahlen und die Hauptnavigation —
     sie gehört zum sportlichen Charakter. Public Sans trägt alles Funktionale.
     Starke Gewichte wirken nur, wenn sie die Ausnahme bleiben. */
  --fw-body:400;
  --fw-med:500;
  --fw-semi:600;
  --fw-bold:700;
  --fw-xbold:800;
  --fw-black:900;

  /* Zeilenhöhen */
  --lh-display:.9;
  --lh-head:1.1;
  --lh-card:1.15;
  --lh-nav:1.2;
  --lh-body:1.55;
  --lh-meta:1.35;
  /* Im Theme: Pfade zu den Logodateien eintragen */
  --wappen:url("assets/logo-fch-gelber-rand.png");   /* aus dem Balken herausragend */
  --wappen-schlicht:url("assets/logo-fch.png");      /* im Balken, mobil */

  /* ── Rollentoken, 30.08.2026 ──────────────────────────────────
     Die Namen sagen die ROLLE und nicht die Farbe. `--papier-halb`
     heisst nach seinem Ort; `--tx-leise` sagt, wofuer es da ist.
     Dieselbe Ueberlegung wie bei `erste_mannschaft` gegen
     `hauptsponsor_zulaessig`: Ein Feld, das eine Regel im Namen
     traegt, luegt, sobald die Regel sich aendert.

     Hier stehen die DUNKLEN Werte; `.papier` setzt dieselben sechs
     Namen auf die hellen. Damit steht jede Farbe einmal statt
     zweimal — und die Regel, die sie benutzt, auch. */
  --tx-leise:var(--halb);
  --tx-haupt:#fff;
  --tx-hervor:var(--gelb);
  --akz-lesbar:var(--gelb);
  --fl-karte:var(--stein);
  /* Zwei Flaechen mehr als Rolle — 11.09.2026. Sie standen hart auf
     `--tafel` und `--stein`, ihr helles Gegenstueck nur unter `.papier`.
     Im Blockeditor gibt es kein `.papier`: Die Schrift wurde dunkel
     gesetzt, die Flaeche blieb es — schwarz auf schwarz.
     ⚠ Wer eine Flaeche hart faerbt, faerbt sie nur fuers Frontend. */
  --fl-tafel:var(--tafel);
  --fl-kasten:var(--stein);
  --li-fein:var(--linie);}
@media(min-width:800px){:root{--rand:36px}}
@media(min-width:1000px){:root{--kopfhoehe:100px}}
@media(min-width:1400px){:root{--rand:60px}}

*{box-sizing:border-box;margin:0;padding:0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* **Die 17px sind kein Geschmack, sondern der Rueckfallwert.**
   Wer sie anfasst, verschiebt jedes Textelement, dem nie eine Groesse gegeben
   wurde — am 29.08.2026 waren das **48 Elemente** ueber alle 32 Ansichten,
   und keines davon ist irgendwo einzeln genannt. **Das ist die gefaehrlichste
   Zahl im Blatt: Sie wirkt an Stellen, die man nicht findet, wenn man nach ihr
   sucht.**

   Bis zum 29.08.2026 stand hier 16px. Damit lagen die 48 auf einer Stufe, die
   in keiner der beiden Leitern vorkommt und 1,06x von F entfernt liegt — unter
   der eigenen Untergrenze von 1,20x. Sie stehen jetzt auf F (17px), wo sie als
   Fliesstext hingehoeren.

   **Die Zahl gehoert hierher und nicht in ein Dokument**: Sie wird bei jedem
   Lauf gemessen, nicht abgeschrieben. Wer sie prueft, zaehlt die Textelemente,
   deren Groesse weder aus einem Token noch aus einer benannten Kurve stammt. */
body{
  background:var(--nacht);color:var(--kalk);
  font-family:var(--b);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* ⚠ **Am 12.09.2026 hierher zusammengelegt.** Diese drei standen 8300
     Zeilen weiter unten in einem zweiten `body{}` -- die Hausregel sagt
     «jeder Selektor genau einmal». Sie ueberschrieben nichts von oben,
     also aendert das Zusammenlegen nichts; die Begruendung fuer `100dvh`
     bleibt an ihrer Stelle stehen. */
  min-height:100dvh;display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* ── Tastaturfuehrung ──────────────────
   ⚠⚠ **EIN RING STATT ZWEI — Didi, 25.09.2026.** «Der schwarz-gelbe
   Doppelring entfaellt ueberall.»

   Bis dahin stand hier ein Band aus zwei Farben:

   > ~~`:focus-visible{outline:2px solid var(--dun);outline-offset:2px;`~~
   > ~~`  box-shadow:0 0 0 5px var(--gelb)}`~~

   samt seiner Begruendung vom 25.08.2026:

   > ~~«Ein Band aus zwei Farben, damit es auf jedem Grund traegt. Der gelbe
   > Umriss allein war auf hellem Grund 1,35:1 und auf dem gelben Balken
   > 1,00 — also unsichtbar, und zwar an 501 von rund 700 Bedienzielen.»~~
   > ~~«Eine einzige Farbe reicht nicht. Der Grund ist auf dieser Website
   > weiss, `--papier-flaeche`, `--dun`/`--stein`/`--tafel` oder `--gelb`.
   > Eine Farbe, die gegen alle vier mindestens 3:1 schafft, muss ein
   > mittleres Grau sein — gemessen 3,37 bis 4,54. Das ist eine Fremdfarbe
   > in einer Palette, die keine hat.»~~
   > ~~«Zwei Farben schaffen mindestens 14,62 auf jedem Grund. Der Aufbau von
   > innen nach aussen: 2px gelb, 2px schwarz, 1px gelb. Der schwarze
   > Streifen ist der Umriss, der gelbe der Schatten — und nicht
   > umgekehrt.»~~

   **Die Beobachtung von damals stimmt, die Antwort war die teurere.** Eine
   EINZELNE Farbe, die jeden Grund trifft, gibt es in dieser Palette nicht —
   darum standen damals zwei. Der Ausweg ist aber nicht eine zweite Farbe,
   sondern eine Farbe, die weiss, worauf sie liegt: **`--akzent` ist genau die
   Rolle «Gelb auf dunklem Grund, Textfarbe auf hellem»** und wird seit dem
   29.08.2026 an der FLAECHE gesetzt (`:root`, `.papier` und
   `.papier .ph,.papier .tafel`). Der Ring nimmt sie, statt eine eigene
   Zahl zu fuehren; Didis «auf hellem Grund #0B0B0A» ist zeichengleich
   `--papier-text` und steht darum nicht als Zahl hier.

   ⚠ **Damit haengt die Richtigkeit des Rings an der Vollstaendigkeit von
   `--akzent`, und vorher hing sie an nichts.** Der Doppelring trug immer beide
   Farben und war auf jeder Flaeche richtig — auch auf einer, die niemand
   angemeldet hatte. Eine helle Flaeche, die `--akzent` nicht setzt, bekommt
   jetzt einen gelben Ring auf hellem Grund. Die Zeile unter der Regel meldet
   die fuenf an, die Bedienelemente tragen und nicht `.papier` heissen.

   **Und der Ring ist EINER.** `outline` und `box-shadow` am selben Element
   waren die zwei Quellen des Doppelrings — nicht eine. Der `box-shadow`
   faellt hier ganz weg. Wo er im Blatt stehenbleibt, ist er keine
   Ringhaelfte, sondern eine Fuellung in der Farbe des Grundes darunter
   (`.hw-btn:focus-visible`) oder eine gesetzte Ersatzanzeige
   (`.such-in input:focus-visible`). */
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
/* **Die fuenf hellen Flaechen, die nicht `.papier` heissen.** Der Kopfbalken
   und der Sprunglink sind gelb, der Hinweisbalken ist `--papier-flaeche`,
   Aufklappmenue und Untermenue im Handymenue sind `--nav-flaeche`. Alle liegen
   auf einer dunklen Seite, und keine davon steht in `.papier`.

   **Die Rolle haengt an der Flaeche, nicht an der Seite** — derselbe Satz, mit
   dem `--akzent` im `:root` begruendet ist. Diese Zeile ist keine Fokusregel,
   sondern die fehlende Haelfte einer Flaechenanmeldung: Sie wirkt auf jede
   Rolle, die `--akzent` liest, und trifft heute nur den Ring, weil `.eye`,
   `.kat`, `.grp` und `.anl-marke` auf keiner der fuenf vorkommen.

   ⚠ `.drop` und `#mob a.sub` nehmen den Ring bei ihren eigenen Regeln wieder
   zurueck — jeder ihrer Eintraege hat eine Zeigerflaeche. Sie stehen hier
   fuer das naechste Bedienelement, das jemand auf diese beiden Flaechen
   setzt, nicht fuer die heutigen. */
.gelbbalken,.hinweis,.drop,.skip,#mob a.sub{--akzent:var(--papier-text)}
[hidden]{display:none !important}

.wrap{max-width:var(--content-lg);margin:0 auto;padding:0 var(--rand)}

/* ── Seitenlogo neben der Einleitung — 14.09.2026 ──────────────────────
   Traeger: `.wrap.mit-logo`, gesetzt von `fch_theme_abschnitte()`, und NUR
   am ersten Abschnitt einer Seite, die im Feld `seitenlogo` ein Bild hat.

   ⚠ **Raster und nicht Flex.** Bei Flex wuerde jedes Kind eine eigene
   Spalte — Augenzeile, Titel und Einleitung stuenden nebeneinander. Das
   Raster legt ALLE uebrigen Kinder in Spalte 2, wo sie wie zuvor
   untereinander stehen; nur das Bild sitzt in Spalte 1.

   ⚠ `align-items:start`, sonst zieht sich das Bild ueber die ganze Hoehe.
   ⚠ Schmal EINE Spalte und das Bild mittig darueber — es steht dann im
   Fluss vor der Augenzeile, also genau dort, wo es hingehoert. */
/* ⚠ **Neu angeordnet — 22.09.2026, Entscheid Didi.**

   Bis dahin stand das Wappen NEBEN dem ganzen Kopfteil (Augenzeile,
   Ueberschrift, Einleitung) und auf schmalen Schirmen mittig DARUEBER:

       ~~`.wrap.mit-logo{grid-template-columns:minmax(0,1fr)}`~~
       ~~`.seitenlogo{margin:0 auto 18px;width:100px}`~~
       ~~`@media(min-width:700px){… 130px … grid-row:1 / span 3}`~~

   Neu stehen Augenzeile und Ueberschrift ueber die volle Breite, und das
   Wappen steht nur neben dem Einleitungssatz. **Auf jeder Breite gleich**
   — die Schmal-Regel mit dem mittigen Wappen entfaellt.

   `column-gap:34px` ist der Spaltenabstand des Themes (`.zwei`), keine
   eigene Zahl.

   ⚠ **Nur das Paar traegt eine feste Zeile.** Augenzeile und Ueberschrift
   setzen sich selbst; fehlt eine von beiden, bleibt ihre Zeile 0 px hoch
   und stoert nicht. Das Wappen findet seinen Platz trotzdem. */
/* ⚠ **Zweite Anordnung am 22.09.2026 — sie ersetzt die erste desselben
   Tages.** Hier stand:

       ~~`grid-template-columns:64px minmax(0,1fr)`, Wappen LINKS in~~
       ~~Spalte 1, Einleitung rechts, auf jeder Breite gleich.~~

   **Schmal bleibt es bei einer Zeile aus Wappen und Einleitung — nur
   seitenverkehrt:** Der Text steht links, das Wappen rechts.

   ⚠ **Breit wandert das Wappen in die RECHTE Spalte, ueber den Kasten
   «Mitglied werden».** Das geht ohne Markupaenderung, weil `.wrap.mit-logo`
   dieselbe Spaltenteilung bekommt wie `.zwei` darin (`1.5fr 1fr`, 34 px):
   Das Wappen sitzt in Spalte 2, Zeile 1, und `.zwei` spannt darunter ueber
   beide — **damit steht seine rechte Spalte genau unter dem Wappen.** */
/* ⚠ **`row-gap:0` — 22.09.2026.** Hier stand `~~row-gap:34px~~`. Die Zeilen
   dieses Rasters sind Augenzeile, Ueberschrift und Einleitungssatz; ein
   Zeilenabstand darauf zog den Kopfteil auseinander. Gemessen: Auge→H 46 px
   statt 6, H→Intro 43 statt 12. **Die Elemente bringen ihre Abstaende
   selbst mit** — das Raster soll sie nur nebeneinander stellen. */
.wrap.mit-logo{display:grid;grid-template-columns:minmax(0,1fr) 64px;column-gap:34px;row-gap:0;align-items:start;align-content:start}
.wrap.mit-logo>*{grid-column:1 / -1}
.wrap.mit-logo>.intro{grid-column:1;grid-row:3;margin-top:0}
.wrap.mit-logo>.seitenlogo{grid-column:2;grid-row:3;width:64px;margin:0;align-self:start}
.seitenlogo{margin:0;width:64px;max-width:100%}

/* ⚠ **Ab 900 px, und nur mit rechter Spalte.**

   900 ist die Breite, ab der `.zwei` zweispaltig wird — dieselbe Schwelle,
   keine eigene. **`:has(.mitlauf)`**: Eine Seite ohne rechte Spalte behaelt
   die schmale Anordnung auch breit; dort gaebe es keine Spalte, in die das
   Wappen wandern koennte.

   `row-gap:34px` ist der Abstand, den `.zwei` zwischen seinen Spalten und
   `.mitlauf` zwischen seinen Kaesten fuehrt — das Wappen haelt ihn zum
   Kasten darunter. */
/* ⚠ **Ab 900 px steht das Wappen in der rechten Spalte — und zwar im
   Markup, nicht durch ein Raster.**

   Hier stand bis zum 22.09.2026 ein Raster ueber beide Spalten
   (`~~:has(.mitlauf){grid-template-columns:1.5fr 1fr}~~`, Wappen in Spalte 2
   ueber drei Zeilen gespannt). **Es zog die linke Spalte auseinander:**
   Augenzeile, Ueberschrift und Einleitungssatz waren Zeilen desselben
   Rasters und bekamen dessen Zeilenabstand, und der Kasten «Mitglied
   werden» begann erst unter dem ganzen Kopftext — gemessen 149 bis 159 px
   unter dem Wappen statt der 34 dieser Spalte.

   `seiteninhalt.php` setzt das Wappen jetzt in die Mitlaufspalte selbst.
   **Damit gibt es links gar kein Raster mehr**, die Abstaende sind die
   einer Seite ohne Wappen, und der Abstand zum Kasten ist der, den die
   Spalte ohnehin fuehrt.

   Ausgegeben sind zwei Fassungen, sichtbar ist eine — die andere hat kein
   Elternteil, in das sie passen wuerde. */
.seitenlogo-spalte{display:none}

@media(min-width:900px){
  .wrap.mit-logo:has(.seitenlogo-spalte){display:block}
  .wrap.mit-logo:has(.seitenlogo-spalte)>.seitenlogo-neben{display:none}
  .mitlauf>.seitenlogo-spalte{display:block;width:140px;margin:0 0 34px}
}
.seitenlogo-bild{display:block;width:100%;height:auto}

@media(min-width:700px){
  /* ⚠ Hier stand bis zum 22.09.2026 eine eigene Breit-Regel fuer das
     Wappen (`~~88px~~`, davor `~~130px~~`). Sie ist in den `:has(.mitlauf)`-
     Block weiter oben gewandert, weil die Schwelle nicht 700 ist, sondern
     900 — dort wird `.zwei` zweispaltig. */
  /* ⚠⚠ **`grid-row: 1 / span 99` statt `grid-row: 1` — 14.09.2026.**

     Mit `grid-row:1` sass das Wappen in ZEILE EINS, und die Zeile wird so
     hoch wie ihr hoechster Bewohner. Neben dem Wappen steht aber nur die
     Augenzeile (17.6px gegen 163.2px) — der Ueberschuss von 145.6px stand
     als Leere zwischen Augenzeile und Ueberschrift.

     > **Ein Kind, das nur in der ersten Zeile sitzt, macht die erste Zeile
     > so hoch wie sich selbst** — und schiebt alles Weitere darunter.

     Gemessen: Wappen-Oberkante 321.2 · Augenzeile 321.2 (buendig, richtig)
     · Ueberschrift **490.4** statt direkt darunter.

     ⚠⚠ **`span 99` und NICHT `1 / -1`.** `-1` zeigt auf das Ende des
     EXPLIZITEN Rasters — und das hat hier nur eine Zeile, weil
     `grid-template-rows` nicht gesetzt ist. Die Zeilen 2 bis 4 entstehen
     erst durch den Inhalt. `1 / -1` bedeutet dort also `1 / 1`, und die
     Spannung greift nicht.

     > **`-1` ist das Ende des expliziten Rasters, nicht des sichtbaren.**
     > Wo die Zeilen implizit entstehen, zeigt es auf die erste Linie
     > zurueck — und die Regel sieht richtig aus und tut nichts.

     Gemessen nach dem ersten Versuch: Ueberschrift bei 469 statt 345 —
     148px Luecke statt 151.6, also **fast unveraendert**.

     `span 99` spannt ueber alle Zeilen, die es je geben wird. Keine Zeile
     traegt dann die Hoehe des Wappens, und `align-self:start` haelt es
     oben.

     ⚠ **Das Raster waechst dadurch auf 99 Zeilen** — gemessen, und heute
     folgenlos: `row-gap` ist `normal` (0), die 95 leeren Zeilen sind je
     0px hoch. **Wer hier je einen Zeilenabstand setzt, bekommt 98
     Luecken statt der drei echten.** Die Regel haelt also nur, solange
     kein `row-gap` an `.wrap.mit-logo` steht. */
  /* ⚠⚠ **`span 3` statt `span 99` — 14.09.2026, vierter Versuch.**

     `span 99` liess das Wappen ueber ALLE Zeilen stehen — und damit blieb
     Spalte 1 ueber die ganze Abschnittshoehe leer, waehrend rechts daneben
     auch «Wofuer das Geld verwendet wird» und alles Weitere eingerueckt
     stand. Gemessen: Abschnitt 1 begann bei **300**, Abschnitt 2 bei
     **144** — ein Sprung von 156px mitten auf der Seite.

     > **Ein Wappen, das neben allem steht, steht neben nichts.** Es
     > gehoert neben den Kopfteil, und darunter gehoert die Seite zurueck
     > auf ihre Kante.

     **Drei Zeilen**, weil der Kopfteil aus genau drei Teilen besteht:
     Augenzeile, Ueberschrift, Einleitungssatz. Das ist Didis Vorgabe vom
     14.09.2026, keine Beobachtung am Zufallsbestand.

     ⚠ Sind es weniger, spannt das Wappen in eine leere Zeile — die ist
     0px hoch und stoert nicht. Sind es mehr, endet das Wappen frueher und
     der Rest steht darunter; auch das faellt nicht auseinander. */


  /* ⚠⚠ **Ab dem ersten Geschwister NACH der Einleitung: volle Breite.**

     `.intro ~ *` trifft jedes folgende Geschwister — nicht nur das
     naechste. Damit kehrt die Seite unterhalb des Kopfteils auf dieselbe
     Kante zurueck wie jeder andere Abschnitt.

     ⚠ **Ohne `.intro` greift die Regel nicht**, und dann bleibt alles in
     Spalte 2 wie zuvor. Das ist der richtige Rueckfall: Eine Seite ohne
     Einleitungssatz hat keinen Kopfteil, von dem sich etwas abheben
     koennte.

     ⚠ **3c, die Frage nach dem kurzen Einleitungssatz:** Ist der Kopfteil
     niedriger als das Wappen, **waechst die Rasterzeile mit** — das
     Wappen spannt sie ja. Der naechste Abschnitt beginnt also UNTER dem
     Wappen, nicht daneben, und rechts vom Wappen bleibt Leere stehen.

     > **Das ist Absicht.** Text um ein Bild fliessen zu lassen braucht
     > `float`, und ein `float` kennt die Spalten nicht — er liefe unter
     > die Textspalte und riss die Kante ein, um die es hier geht. */
  .wrap.mit-logo>.intro ~ *{grid-column:1 / -1}
}
section{padding:clamp(46px,6vw,84px) 0}
.mono{font-variant-numeric:tabular-nums}

/* ── 10 Typografie ────────────────────────────────────────── */

/* Wörter wie „Professionalisierung“ passen bei 320px in keine Zeile.
   hyphens:auto trennt korrekt, wo ein Wörterbuch vorliegt; sonst greift der Umbruch.
   Wirkt nur, wo ein Wort nicht passt — ab 390px im Browser nachweislich unverändert. */
h1.big{
  hyphens:auto;overflow-wrap:break-word;
  font-family:var(--d);font-variation-settings:'wdth' 112;font-weight:800;
  /* Die Grösse des Seitentitels steht hier, einmal. Die Kopfregeln setzen
     nur noch die Farbe. Der frühere Wert 84px war wirkungslos: kein
     einziges h1.big steht ausserhalb eines Seitenkopfs. */
  font-size:clamp(30px,1.54rem + 1.49vw,46px);line-height:.94;letter-spacing:-.035em;text-transform:uppercase;
}
/* ⚠ **Die zwei Kernbloecke stehen seit dem 22.09.2026 mit in der Liste** —
   `core/details` traegt seinen Titel im `<summary>` selbst, `core/accordion`
   in der Titelspanne des Knopfs. Beide haben also kein Element, dem sich die
   Klasse `sec` anhaengen liesse: Das Markup kommt aus dem Kernblock, und der
   Redaktor schreibt dort nur Text hinein.

   > **Dieselbe Entscheidung wie bei `.fliess h3,.fliess-titel`: Eine
   > Bauform gehoert an die Rolle.** Eine zweite Regel mit denselben Zahlen
   > waere der Anfang zweier Wahrheiten ueber eine Schriftstufe.

   Die Stufe ist B und nicht A — `.sec.sec-mittel` weiter unten fuehrt beide
   noch einmal. Das ist die Stufe, die der Ressortkopf traegt
   (`page-vorstand.php`: `h3.sec.sec-mittel`). */
.sec,
.wp-block-details > summary,
.wp-block-accordion-heading__toggle-title{
  hyphens:auto;overflow-wrap:break-word;
  font-family:var(--d);font-variation-settings:'wdth' 110;font-weight:800;
  font-size:clamp(26px,1.38rem + 0.89vw,35px);line-height:.98;letter-spacing:-.03em;text-transform:uppercase;
  /* Abstand nach unten als Anteil der Titelgrösse: .48em vor Inhalt,
     .35em vor Text (Regel weiter unten). Beides sind genau die bisherigen
     22px und 16px bei 46px — nur gilt es jetzt für alle drei Stufen, und
     die neue bekommt ihren Abstand von selbst. */
  margin-bottom:.48em;
}
.card{
  /* Der Abstand gehoert an die Klasse, nicht an den Behaelter: 26 dieser
     Titel standen in einem a.nk und waren ueber .nk .card versorgt, fuenf
     auf der Startseite in einem klassenlosen div — dieselbe Entscheidung
     ausserhalb der Reichweite einer zu engen Regel. **.card trifft so viele
     Elemente, wie es Fundstellen gibt** — das ist die Aussage, nicht die
     Zahl daneben.

     **Die Zahl selbst ist zweimal gewandert, ohne dass jemand sie
     nachgetragen hat.** Hier stand «genau 31 Elemente»; das galt am
     20.08.2026. An den Sicherungen nachgezaehlt fiel sie am 23.08. von 33
     auf 25 und am 24.08. von 25 auf 22. **Eine Zahl im Kommentar altert,
     eine Zahl im Werkzeug nicht.**

     **Am 29.08.2026 sind neun Kartentitel dazugekommen: 22 + 9 = 31.** Sie
     trugen `.info-titel` und standen in `.karte`, also ausserhalb jedes
     `.info` — die Klasse war dort nur hingeschrieben, nicht zustaendig. Die
     Grundregel `.info-titel{font-size:C}` hatte ihnen am selben Tag eine
     GROESSE gegeben, damit sie nicht auf die Browservorgabe von 18,72px
     fallen, aber keine BAUFORM: 21px in der Grundschrift statt der
     Anzeigeschrift, Schnitt 700 ohne Laufweite, Kastenhoehe 34 statt 24.

     > **Eine Reparatur, die einen Fehler abfaengt, ohne den Zielzustand zu
     > bestimmen, erzeugt einen neuen, der wie Absicht aussieht.**

     **Dass es wieder 31 sind, ist ein Zufall und kein Beleg.** Die neun
     waren nie `.card`: Die Sicherungen zeigen die Verluste als -8 und -3 an
     zwei verschiedenen Tagen, nicht als -9 an einem. */
  margin:6px 0 5px;
  hyphens:auto;overflow-wrap:break-word;
  font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:700;
  font-size:clamp(19px,1.04rem + 0.30vw,21px);line-height:1.15;letter-spacing:-.015em;
}
.eye{
  display:block;font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);
  letter-spacing:.24em;text-transform:uppercase;color:var(--akzent);margin-bottom:10px;
}
.kat{
  font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);
  letter-spacing:.19em;text-transform:uppercase;color:var(--akzent);
}
/* ── ⚠⚠ RESSORT BEHAELT DIE FARBE, DATUM WIRD GEDAEMPFT — Didi, 24.09.2026

   «Metazeile der News, **ueberall, wo sie steht**: Das Ressort behaelt seine
   Farbe, Trennpunkt und Datum werden gedaempft. Auf dunklem Grund Ressort
   gelb, Datum in der gedaempften Farbe, in der heute die Metaangaben der
   Spielkaesten stehen. Auf hellem Grund Ressort wie heute, Datum in
   `--papier-halb`. Ohne Ressort steht das Datum allein, ebenfalls gedaempft.»

   > ~~`.art-kopf .kat-dat{color:var(--tx-leise)}`~~ — Stand 24.09.2026,
   > nachmittags, weiter unten bei `.art-kopf`. **Eng gefasst und richtig so:**
   > Verlangt war damals nur die Artikelansicht, und eine Regel an `.kat-dat`
   > allein haette vier weitere Orte mitgefaerbt, nach denen niemand gefragt
   > hatte. Jetzt hat jemand gefragt — die enge Fassung ist damit abgeloest
   > und nicht danebengelassen.

   ── ⚠⚠ EIN TOKEN TRIFFT BEIDE SAETZE, UND DAS IST GEMESSEN ──────

   Didi nennt die helle Seite beim Namen (`--papier-halb`) und die dunkle
   ueber einen ORT: «die Farbe, in der heute die Metaangaben der Spielkaesten
   stehen». **Das Stylesheet beantwortet das nicht, der Rahmen schon** — die
   Kaesten setzen `color:#fff`, und `.meta-z` traegt gar keine eigene Farbe.
   Gemessen am 24.09.2026 im Rahmen von 1200px auf der Startseite, beide
   Kaesten («Letztes Resultat» und «Naechstes Spiel»):

     .tafel                 rgb(255, 255, 255)   — der Kasten selbst
     .tafel .meta           rgb(156, 156, 149)   = #9C9C95
     .tafel .meta-z (4 x)   rgb(156, 156, 149)   = #9C9C95

   Die Daempfung kommt also weder aus Vererbung noch aus einer versteckten
   Regel, sondern aus `.meta{…;color:var(--halb)}` — **#9C9C95 ist `--halb`.**

   **`--tx-leise` traegt genau diese beiden Werte** und darum steht es hier:

     dunkler Grund   --tx-leise → var(--halb)         #9C9C95   Didis Kastenfarbe
     .papier         --tx-leise → var(--papier-halb)  #5A5A55   Didis `--papier-halb`

   > **Das Token und nicht der rohe Wert.** `#9C9C95` hier hineingeschrieben
   > stuende auf Papier auf Papier — die Rolle haengt an der Flaeche, nicht an
   > der Seite. Dieselbe Lehre wie bei `.papier .eye`.

   ── ⚠⚠ DAS RESSORT BRAUCHT KEINE ZEILE, UND DAS IST EIN BEFUND ───

   «Ressort gelb auf dunklem Grund» las sich wie eine Aenderung. Gemessen ist
   es keine: `:root` setzt `--akzent:var(--gelb)`, und `.kat` laeuft ueber
   `--akzent`. Auf der Startseite steht das Ressort damit **schon heute auf
   `rgb(252, 222, 0)` = #FCDE00**, auf `.papier` auf `rgb(11, 11, 10)` =
   `--papier-text`. **«Behaelt seine Farbe» heisst hier woertlich: nichts
   tun** — `.kat-ress` erbt von `.kat` und zieht bei jeder kuenftigen
   Aenderung der Akzentfarbe mit.

   > Eine Zeile `.kat-ress{color:var(--gelb)}` waere auf dunklem Grund
   > wirkungslos und auf Papier ein **Verstoss** gegen «Ressort wie heute»:
   > Sie faerbte das Ressort dort gelb, wo Didi es unveraendert will.

   ⚠ **`--akzent` bleibt unangetastet.** Das Token traegt weit mehr als diese
   Zeile (`.eye`, `.grp`, Verweise); gedaempft wird die Haelfte, die gedaempft
   werden soll, und nicht die Rolle darunter.

   ── ⚠ AN `.kat-dat` UND NICHT AN `.kat-ress + .kat-dat` ─────────

   Didis «ohne Ressort steht das Datum allein, ebenfalls gedaempft» schliesst
   den Nachbarwaehler aus: Ohne Ressort trifft er nicht, und das Datum stuende
   ungedaempft da. **Der Bestand fuehrt heute keine solche Kachel** (0 von 17
   Metazeilen auf 51 gelesenen Adressen) — gemessen wurde darum mit einer
   Sonde, die das `.kat-ress` aus der ersten Kachel entfernt:

     dunkel, mit Ressort    Datum #9C9C95   Punkt « · » #9C9C95
     dunkel, ohne Ressort   Datum #9C9C95   Punkt `content: none`
     papier, mit Ressort    Datum #5A5A55   Punkt « · » #5A5A55
     papier, ohne Ressort   Datum #5A5A55   Punkt `content: none`

   ⚠ **Der Trennpunkt braucht ebenfalls keine Zeile — gepruefte Aussage, keine
   Auslassung.** Er haengt als `.kat-ress + .kat-dat::before` am DATUM und erbt
   dessen Farbe; die vier Zeilen oben zeigen ihn zeichengleich mit dem Datum
   daneben. Eine zweite Regel dafuer wiederholte nur, was schon gilt — und
   liefe beim naechsten Wunsch davon.

   ── Gemessen am 24.09.2026 im Rahmen von 1200px, vorher → nachher ──

     Ort                       Grund    Ressort   Punkt              Datum
     Startseite   4 Kacheln    dunkel   #FCDE00   #FCDE00 → #9C9C95  #FCDE00 → #9C9C95
     /news/       6 Kacheln    papier   #0B0B0A   #0B0B0A → #5A5A55  #0B0B0A → #5A5A55
     Teamseite    1 Kachel     papier   #0B0B0A   #0B0B0A → #5A5A55  #0B0B0A → #5A5A55
     Artikelkopf  6 Beitraege  papier   #0B0B0A   #5A5A55 unveraendert (war eng gebaut)

   Das Ressort steht in allen vier Zeilen vorher wie nachher gleich — die
   Spalte hat darum nur einen Wert.

   ⚠⚠ **Die dunkle Fassung hat einen Wirt, und der ist nachgezaehlt.** Von 17
   Metazeilen auf 9 von 51 gelesenen Adressen stehen **4 NICHT auf `.papier`**:
   die vier Kacheln im Abschnitt «Aktuell» der Startseite. Dort greifen die
   Wurzelfassungen der Token, und genau dort wird das Datum jetzt #9C9C95 —
   **Didis Kastenfarbe steht damit im selben Fenster wie die Kaesten, aus denen
   sie abgelesen ist.**

   ⚠ **Die Zahl 17 ist ein Stand und keine Konstante:** Beim ersten Messen
   waren es 18 — die Teamseite fuehrte zwei Kacheln und beim Gegenlesen eine
   Stunde spaeter nur noch eine. Die Vorlage wurde im selben Zeitraum von
   anderer Hand bearbeitet. **Die Farben sind davon unberuehrt** (dreimal
   nacheinander gemessen, jedes Mal gleich); nur die Bezugsgroesse hat sich
   bewegt. Wer hier eine andere Zahl misst, hat nicht zwingend einen Fehler
   gefunden.

   ⚠ **Der Baukasten (`Bloecke/ausgabe.php`) ist der fuenfte Rufer und im
   Bestand nicht belegt** — er kam in keiner der 51 Adressen vor. Er faellt je
   nach Seite auf die eine oder andere Fassung; beide sind gebaut. */
.kat-dat{color:var(--tx-leise)}
/* ⚠⚠ **RESSORT UND DATUM IN EINER ZEILE — Didi, 24.09.2026 ──────

   «Ressort und Datum in eine Zeile ueber dem Titel: «Matchbericht ·
   19. September 2026». Ohne anderes Ressort steht nur das Datum.»

   **Der Trennpunkt haengt am Nachbarn und nicht am Datum.** Stuende er als
   `.kat-dat::before` ohne Bedingung da, begaenne jede Zeile ohne Ressort mit
   «· » — und das ist kein Randfall: Ein Beitrag, dessen einzige Kategorie
   der Jahrgang ist, hat kein Ressort. Dieselbe Bauform wie
   `.sp-pos + .sp-team::before` am Spielerkopf, gebaut am selben Tag aus
   demselben Grund.

   ⚠ **Darum braucht das Ressort ein eigenes Element:** Ein Waehler kann
   keinen Textknoten befragen. `:empty` haette ein leeres `<span>` gebraucht,
   `:has()` einen Behaelter — der Nachbarwaehler braucht nur den Nachbarn.

   ⚠ **Beide Teile bleiben `inline`**, denn die Leerzeichen im `content`
   SIND die Abstaende. In einem Flexbehaelter waeren sie keine; darum steht
   das Paar in einem eigenen `<span>` und ist als Ganzes ein Flexkind —
   dieselbe Schachtelung wie `.sn` in der Kaderzeile. */
.kat-ress + .kat-dat::before{content:' · '}
/* ── ⚠ ZWEI DATUMSFORMEN, UND DIE BREITE WAEHLT — Didi, 24.09.2026 ──

   «Metazeile der News, unter 640px: Datum in Kurzform «22.09.2026» statt
   «22. September 2026». Ab 640px bleibt das ausgeschriebene Datum. Gilt mit
   und ohne Ressort.»

   **Beide Formen stehen im Markup, die Breite waehlt** — dieselbe Bauform wie
   `.tn-voll`/`.tn-kurz`, `.seg-kurz`/`.seg-wort` und `.rz-zt-voll`/`.rz-zt-kurz`,
   und aus demselben Grund: Javascript oder zwei Serverausgaben waeren zwei
   Wahrheiten fuer dasselbe Datum.

   ⚠ **`display:none` und nicht `.vh`.** Die ungenutzte Form faellt damit auch
   aus dem Vorlesebaum — sonst stuende dasselbe Datum zweimal in derselben
   Zeile.

   ⚠ **Beide Formen stehen IN `.kat-dat`, nicht daneben.** Der Trennpunkt oben
   haengt am Nachbarn; eine zweite `.kat-dat` daneben setzte ihn zweimal oder
   keinmal. Ein zweites Kind im selben `<span>` aendert am Nachbarn nichts —
   der Punkt steht in allen vier Faellen (breit/schmal × mit/ohne Ressort)
   genau so oft wie ein Ressort davor.

   ⚠ **Kein `title` am `<time>`.** Das vollstaendige Datum steht schon im
   `datetime` als ISO. Ein `title` erreicht den Zeiger — also genau das Geraet,
   auf dem das ausgeschriebene Datum ohnehin sichtbar ist; auf dem Handy, wo
   die Kurzform steht, gibt es keinen.

   ⚠⚠ **619 SEIT DEM 24.09.2026 ABENDS — die Hausgrenze.** Hier stand:

   > ~~«⚠ **639 ist die bestehende Schwelle** und steht im Stylesheet
   > mehrfach; eine eigene Zahl daneben waere eine zweite Grenze fuer
   > dieselbe Umstellung.»~~

   Didi: «Alle Regeln, die in den letzten Auftraegen mit 640 px bestellt
   wurden … auf die Hausgrenze 620 px ziehen. Die globale Regel bleibt 620.»
   **Die 639 war die Schwelle der Nachbarschaft von heute, nicht die des
   Hauses.** Das Haus schaltet sein Raster bei `@media(min-width:620px)`
   (`.g2,.g3,.g4`) und seine Gegenstuecke bei `@media(max-width:619px)`.
   **Beide Schreibweisen stehen schon im Blatt** — hier steht die
   zweite und keine dritte.

   ⚠ Beide Regeln stehen zusammen, weil eine ohne die andere zwei Daten
   nebeneinander stellt. */
.kd-kurz{display:none}
@media(max-width:619px){
  .kd-voll{display:none}
  .kd-kurz{display:inline}
}
.grp{
  font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);
  letter-spacing:.22em;text-transform:uppercase;color:var(--akzent);margin:0 0 14px;
}
.dat{font-size:var(--tx-etikett);letter-spacing:.09em;text-transform:uppercase;color:var(--tx-leise)}
/* Zweite Rolle von .dat: die Fussnote unter einem Block — unter einer
   Tabelle, einer Einbettung, einer Liste. Sie braucht einen Abstand
   nach oben, das Etikett am Objekt nicht. Der Abstand stand vorher
   achtmal als Inline-Wert und achtmal in einer Regel, die am DOM hing
   (.tabelle-scroll + .dat) und brach, sobald ein Knopf dazwischentrat. */
.dat.fussnote{margin-top:14px}
/* Ein Verweis in einer Fussnote ist ein Verweis im Fliesstext, nur kleiner —
   er bekommt dieselbe gelbe Unterlinie und die Textfarbe der Seite.
   Bis zum 21.08.2026 hing seine Erkennbarkeit am BEHAELTER: `.einbett-platz a`
   gab ihm Farbe und Linie. Als der Absatz mit den erhobenen Daten aus der
   Platzhalterflaeche herauswanderte — die Anmeldung wird verlinkt statt
   eingebettet —, verlor er beides lautlos. Gemeldet hat es die Systempruefung
   mit «Verweis ohne Auszeichnung», nicht das Auge.
   Dieselbe Familie wie der Standort einer Regel: eine Eigenschaft, die an
   einem Umstand haengt statt an der Sache. */
/* Dieselbe Auszeichnung wie der Verweis im Satz, also dieselbe Technik. */
.fussnote a{text-decoration:underline;text-decoration-color:var(--gelb);
  text-decoration-thickness:2px;text-underline-offset:.18em}
.papier .fussnote a{color:var(--papier-text)}
.tsr{color:var(--tx-leise);font-size:17px;max-width:58ch}
/* Vier Rollen, vier Grössen — mehr soll es nicht geben:
   .lead 20px  · Einstieg in die Seite, einmal pro Seite, direkt nach dem Titel
   .intro 16.5 · Einleitung in einen Abschnitt, nach einer Abschnittsüberschrift
   .fliess 16.5· Fliesstext
   .info 14.5  · Text in Kästen und Kacheln
   Zuvor trugen Abschnittseinleitungen ebenfalls .lead. Drei Absätze in
   Einstiegsgrösse auf einer Seite nehmen dem eigentlichen Einstieg das Gewicht. */
/* Der Eröffnungsabsatz trägt seinen Abstand selbst, als Anteil. Zuvor
   stand er dreiunddreissigmal einzeln im Markup, mit acht verschiedenen
   Werten für dieselbe Aufgabe. Der Grundwert ist abgelesen: 30px war die
   grösste Gruppe. */
.lead{font-size:var(--tx-lead);line-height:var(--lh-body);max-width:54ch;color:var(--tx-leise);margin:0 0 1.4em}
.lead em{color:#fff;font-style:normal}
.intro{font-size:var(--tx);line-height:var(--lh-body);max-width:66ch;color:var(--tx-leise);margin:0 0 1.2em}
/* Folgt nichts mehr, braucht es keinen Abstand. */
.lead:last-child,.intro:last-child{margin-bottom:0}
/* Folgt ein Kachelraster statt Text, braucht der Absatz mehr Luft: eine
   Kachel beginnt mit harter Kante, ein Absatz nicht. Vier Ressortvorspänne
   auf der Organisationsseite standen dafür schon auf 30px. */
.lead:has(+ .g2,+ .g3,+ .g4,+ .ehrenliste),
.intro:has(+ .g2,+ .g3,+ .g4,+ .ehrenliste){margin-bottom:1.75em}
/* **Ein Rasterfeld bringt seinen Abstand schon mit.** `.zwei` ist ein Raster
   mit `gap:34px`. Der Eigenabstand des Einstiegsabsatzes tritt dort nicht an
   die Stelle des Rasterabstands, sondern obendrauf — und das nur in einer
   Richtung: Gemessen am 20.09.2026 auf /vorstand/ standen unter 900px
   34 + 26.6 = 60.6px zwischen Einstieg und Kasten, ab 900px stehen die beiden
   nebeneinander und derselbe Wert verpufft folgenlos. **Ein Abstand, der
   einmal doppelt zaehlt und einmal gar nicht, ist keiner.**
   Der Prototyp loest dieselbe Stelle mit `style="margin:0"`. Hier als Regel,
   und an der Bauform statt an der Seite: Der Grund gilt fuer jedes `.lead`,
   das direktes Kind eines `.zwei` ist — auch fuer eines, das spaeter aus dem
   Block «zwei-spalten» kommt. **Heute ist es genau eines**, gezaehlt ueber
   alle 92 ausgelieferten Seiten. Ein `#v-vorstand`-Vorsatz waere darum heute
   wirkungsgleich und dort falsch, wo der Block morgen steht. */
.zwei > .lead{margin-bottom:0}
/* Die Gegenrichtung, und sie fehlte: ein .intro NACH einem Raster hatte
   keinen Abstand nach oben und klebte am Block darueber. Der einzige Fall bis
   zum 21.08.2026 stand auf «Bus» und trug den Wert als Inline-Stil, mit der
   Begruendung «Einziger .intro im Prototyp, der Luft nach oben braucht». Mit
   Fanion500 sind es zwei, und damit ist es eine Regel — der Inline-Stil auf
   «Bus» faellt weg, die Ausnahmeliste sinkt von 32 auf 31.
   Derselbe clamp wie dort: der Abstand waechst mit der Breite, wie der ganze
   uebrige Rhythmus. */
.g2 + .intro,.g3 + .intro,.g4 + .intro,.ehrenliste + .intro{
  margin-top:clamp(24px,3vw,32px)}
/* **66ch — und der Grund stand bis zum 31.08.2026 nirgends.**

   Die gaengige Spanne fuer Lesbarkeit lautet 45 bis 75 Zeichen. **Sie stammt
   aus dem Englischen.** Deutsche Woerter sind laenger, und es sind nicht die
   haeufigen, die brechen, sondern die langen:

       Infrastrukturverantwortlichen    29 Zeichen
       Schiedsrichterwesen              19
       Beitragskategorien               18

   **Darum das obere Ende des Bereichs und nicht die Mitte.** Eine Spalte mit
   55 Zeichen bricht «Infrastrukturverantwortlichen» in eine eigene Zeile und
   laesst die vorige halb leer; bei 66 steht es im Satz.

   Dasselbe Mass tragen `.intro` und `.nachsatz`. `.lead` steht auf 54, weil
   es groesser gesetzt ist — dieselbe Zeilenlaenge in einer groesseren Schrift
   braucht weniger Zeichen.

   **Das ist keine Frage, die offen waere.** Sie war es nie; es fehlte nur der
   geschriebene Grund. */
.fliess{max-width:66ch;font-size:var(--tx)}

/* ⚠⚠ **DER ARTIKELTEXT STEHT AUF DER HAUPTFARBE — Didi, 24.09.2026 ──

   «Artikelansicht der News: Fliesstext in `--papier-text`, falls er heute
   heller steht. Die Zeile «Samstag, 05.09.2026 …» und alle fetten Stellen
   im Text ziehen mit.»

   > ~~`.fliess p{margin-bottom:17px;color:var(--tx-leise)}`~~ — bis zum
   > 24.09.2026. Die Bedingung war erfuellt: im Rahmen gemessen stand der
   > Absatz auf #5A5A55, die Seite darunter auf #0B0B0A.

   ⚠⚠ **`--tx-haupt` und nicht `--papier-text`, obwohl der Auftrag die Farbe
   beim Namen nennt.** Auf Papier sind die beiden dasselbe — `.papier` setzt
   `--tx-haupt:var(--papier-text)`. Sie gehen dort auseinander, wo kein
   `.papier` steht, und das ist kein gedachter Ort:

     /2026/09/  Datumsarchiv, `index.php`, 4 x `.fliess`, kein `.papier`
       Grund             #0B0B0A
       --tx-haupt        #fff
       --papier-text     #0B0B0A   ← Zeichen fuer Zeichen der Grund

   **`--papier-text` waere dort nicht dunkel, sondern unsichtbar.** Gemessen
   am 24.09.2026 im Rahmen und nicht aus der Regel gelesen.

   > **Ein Token, das eine Farbe nennt, luegt an jedem Ort, an dem die Farbe
   > eine andere sein muss.** `--tx-haupt` sagt «die Hauptschrift hier» —
   > und das ist gemeint, wenn der Artikeltext dunkler stehen soll.

   Der Blockeditor faellt damit ebenfalls richtig: `assets/editor.css` fuehrt
   die Tokenzeilen von `.papier` mit, `--tx-haupt` darunter.

   ⚠ **Die fetten Stellen brauchen keine Zeile — das ist der Befund und
   keine Auslassung.** **Kein Waehler in diesem Blatt nennt `strong`**, und
   jedes `b` steht an einem Bauteil (`.klub b`, `.ts b`, `.fakt b` …), keines
   an `.fliess`. Sie erben damit die Absatzfarbe und ziehen von selbst mit.

   Der Bestand fuehrt heute keine einzige fette Stelle (0 von 6 Beitraegen);
   gemessen wurde darum mit einer eingesetzten Sonde im Absatz — sie stand
   vorher auf #5A5A55 und nachher auf #0B0B0A, beide Male genau auf der
   Absatzfarbe.

   ⚠ **Die Datumszeile ebenfalls nicht.** Sie heisst seit dem 24.09.2026
   `.kat` statt `.dat` und laeuft damit ueber `--akzent`, das `.papier` schon
   auf `--papier-text` stellt — gemessen #0B0B0A, schon vor dieser Aenderung.
   Waere sie `.dat` geblieben, stuende sie auf `--tx-leise` und haette eine
   eigene Zeile gebraucht.

   > ~~«⚠ **`.fliess li` bleibt auf `--tx-leise`** und steht damit heller als
   > der Absatz daneben. … Der Auftrag nennt sie aber nicht … **Das ist ein
   > Entscheid und kein Nebenprodukt einer Farbaenderung.**»~~ — Stand
   > 24.09.2026, nachmittags.

   **Der Satz war richtig und hat genau das bewirkt, wofuer er da war:** Er
   hat den Unterschied sichtbar stehenlassen, statt ihn stillschweigend
   mitzunehmen — und Didi hat ihn am selben Abend nachgezogen. `.fliess li`
   steht seither ebenfalls auf `--tx-haupt`; Wortlaut, Messung und der Befund
   zu den Aufzaehlungsmarken stehen unten an der Regel selbst. */
.fliess p{margin-bottom:17px;color:var(--tx-haupt)}
/* Der Nachsatz: eine kurze Zeile, die zum Absatz darueber gehoert — eine
   Mailadresse, eine Nummer, ein Zusatz von einem Satz. Enger als der Abstand
   zwischen zwei Absaetzen, damit die Zugehoerigkeit sichtbar bleibt. */
.nachsatz{margin-top:9px}
.fliess ul{list-style:none;display:grid;gap:10px;margin-bottom:17px}
/* ── ⚠⚠ DIE AUFZAEHLUNG STEHT WIE DER ABSATZ — Didi, 24.09.2026 ──

   «Aufzaehlungen wie der Absatz: `.fliess li` auf `--tx-haupt`, wie der Absatz
   daneben. Die Aufzaehlungsmarken ziehen mit. **Global, keine Verengung auf
   `#v-artikel`.**»

   > ~~`.fliess li{position:relative;padding-left:21px;color:var(--tx-leise)}`~~
   > — Stand 24.09.2026, nachmittags.

   **Der Absatz ist am selben Tag auf `--tx-haupt` gezogen, die Aufzaehlung
   blieb zurueck** — und stand seither heller als der Satz daneben. Gemessen
   im Rahmen von 1200px auf sieben Adressen: `li` #5A5A55 gegen `p` #0B0B0A,
   55 Aufzaehlungspunkte, alle sieben auf `.papier`.

   > **Eine Aufzaehlung im Fliesstext ist Fliesstext.** Der Unterschied war
   > kein Entscheid, sondern der Rest einer halben Umstellung.

   ⚠ **`--tx-haupt` und nicht `--papier-text`, aus demselben Grund wie beim
   Absatz:** `.fliess` steht auch ohne `.papier` — das Datumsarchiv `/2026/09/`
   rendert vier davon auf dunklem Grund, und dort ist `--papier-text` Zeichen
   fuer Zeichen der Hintergrund. Die lange Begruendung steht oben bei
   `.fliess p` und wird hier nicht zweimal geschrieben.

   ── ⚠⚠ «DIE MARKEN ZIEHEN MIT» IST EIN DOPPELTER BEFUND ───────

   Didi verlangt es ausdruecklich — gemessen ist es keine Arbeit, und zwar aus
   zwei verschiedenen Gruenden gleichzeitig:

     `::marker`   **Das Blatt fuehrt keine einzige `::marker`-REGEL** —
                  nachgesehen am 24.09.2026, vor diesem Kommentar. ⚠⚠ **Eine
                  Suche nach `::marker` findet heute trotzdem Treffer, und
                  alle stehen in DIESEM Absatz** — wer nachzaehlt, zaehlt den
                  Befund mit und haelt ihn fuer widerlegt. Gepruefte Aussage
                  ist: keine Zeile ausserhalb eines Kommentars nennt sie.
                  Die Marke nimmt darum die Textfarbe ihres `li` und zieht
                  von selbst mit — gemessen #5A5A55 vorher, #0B0B0A nachher.
     sichtbar     **Gezeichnet wird sie hier gar nicht:** `.fliess ul` setzt
                  `list-style:none`. Was man sieht, ist der gelbe Balken aus
                  `.fliess li::before` mit eigenem `background:var(--gelb)`.
                  **Er folgt der Textfarbe nicht und soll es auch nicht** —
                  gemessen rgb(252, 222, 0) vorher wie nachher.

   > Beides zusammen heisst: Die Marke, die der Browser faerben wuerde, ist
   > unsichtbar; die sichtbare Marke ist gelb und bleibt es. **«Zieht mit» ist
   > erfuellt, ohne dass eine Zeile dafuer noetig waere.**

   ⚠ **Die Zahl der `ul.leitsatz` bleibt ebenfalls, wie sie ist.** Sie steht
   als `content:counter(satz)` mit eigenem `color:var(--tx-hervor)` und haengt
   nicht an der Textfarbe des `li` — eine Nummerierung ist eine Auszeichnung
   und kein Fliesstext.

   ⚠ **Kein `<ol>` im Bestand:** ueber alle 51 gelesenen Adressen steht in
   keinem `.fliess` eine nummerierte Liste. Die `::marker`-Zeile oben ist
   darum Vorsorge und an einer eingesetzten Sonde gemessen, nicht an einem
   Vorkommen.

   ── Gemessen, vorher → nachher ────────────────────────

     /datenschutzerklaerung/  12 li   #5A5A55 → #0B0B0A
     /sponsor-werden/         26 li   #5A5A55 → #0B0B0A
     /sportanlage/             4 li   #5A5A55 → #0B0B0A
     /vereinsbus/              5 li   #5A5A55 → #0B0B0A
     /schiri/                  3 li   #5A5A55 → #0B0B0A
     /fanion500/               3 li   #5A5A55 → #0B0B0A
     /impressum/               2 li   #5A5A55 → #0B0B0A

   Der Absatz daneben steht auf allen sieben auf #0B0B0A — **das ist der
   Vergleich, den Didi verlangt hat, und nicht ein Wert fuer sich.** */
.fliess li{position:relative;padding-left:21px;color:var(--tx-haupt)}
.fliess li::before{content:'';position:absolute;left:0;top:10px;width:9px;height:2px;background:var(--gelb)}
/* Verweise mitten im Satz waren bisher nicht als solche erkennbar: sie erbten
   die gedämpfte Textfarbe und hatten keine Linie. Dieselbe Auszeichnung wie in
   den Infokästen — Textfarbe plus gelbe Unterstreichung. Ausgenommen sind .mehr
   und .btn, die ihre eigene Gestaltung mitbringen.

   **Wofuer die weisse Fassung die Vorlage ist.** Sie hat heute keinen Traeger:
   alle 26 `.fliess` und alle 34 `.info` stehen auf Papierseiten, und die
   Papierfassung ueberschreibt sie restlos. Sie bleibt stehen, weil `.info` im
   Kern ein dunkler Kasten auf `--stein` ist und weil es dunkle Orte gibt -
   die Startseite als einzige dunkle Ansicht, dazu Seitenkopf, Partnerband und
   Fussbereich, die auf allen 28 hellen Seiten dunkel stehen. Sie ist die
   Vorlage fuer den Tag, an dem ein Infokasten oder ein Fliesstextabsatz an
   einen dieser Orte kommt. */
/* ── Der Unterstrich ist eine Textauszeichnung, kein Rahmen ──────────────
   **`.mehr` ist ueberall ausgenommen, auch im Infokasten.** Vorher setzten
   beide Fassungen dieselbe Eigenschaft `border-bottom`, und eine gewann;
   seit der Verweis im Satz `text-decoration` benutzt, sind es zwei
   verschiedene, und «Flyer als PDF» trug zwei Striche uebereinander.
   **Zwei Regeln, die sich dieselbe Eigenschaft teilen, sehen aus wie eine —
   bis eine davon die Eigenschaft wechselt.**

   **Umgestellt am 28.08.2026 von `border-bottom` auf `text-decoration`.**
   Ein Rahmen sitzt an der Kastenkante: Er kennt die Unterlaengen nicht, laesst
   sich nicht vom Text abruecken und braucht ein Polster, damit er nicht
   klebt. `text-decoration` kennt drei Werte, die genau das koennen —
   `-thickness`, `-color` und `text-underline-offset` — und `-skip-ink` laesst
   die Linie um p, g und j herum aussetzen.

   **Die Werte folgen dem GOV.UK Design System**, der meistkopierten Fassung
   dieser Frage: duenner Strich in Ruhe, ein deutlich dickerer beim Zeigen,
   und dort `skip-ink` abgeschaltet, damit die Linie durchgeht. Uebernommen
   ist die Bauart, nicht die Zahl: Der Strich bleibt bei 2 und 4 Bildpunkten,
   weil er hier gelb ist und nicht die Schriftfarbe traegt.

   **Der Zeigerzustand aendert nur noch die Dicke.** Die zwei Polsterregeln,
   die den Sprung ausglichen, sind damit weg — es gibt keinen mehr. */
.fliess p a:not(.mehr):not(.btn),.fliess li a:not(.mehr):not(.btn),
.info a:not(.btn):not(.mehr){
  color:var(--tx-haupt);
  text-decoration:underline;text-decoration-color:var(--gelb);
  text-decoration-thickness:2px;text-underline-offset:.18em;
}
/* **Der Zeigerzustand macht den Strich dicker, statt die Schrift zu faerben.**
   Vorher wurde der Verweis gelb - auf dunklem Grund tragbar, auf Papier ein
   Abfall von 19,69 auf 5,10. Ein dickerer Strich wirkt auf beiden Gruenden
   gleich und nimmt dem Text nichts weg. Das Polster gleicht die zwei
   zusaetzlichen Bildpunkte aus, damit die Zeile nicht springt. */
@media(hover:hover){.fliess p a:not(.mehr):not(.btn):hover,.fliess li a:not(.mehr):not(.btn):hover,
.info a:not(.btn):not(.mehr):hover{text-decoration-thickness:4px;
  -webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}}
/* Setzt den Schlussblock einer Seite vom Fliesstext ab */
.abschluss{margin-top:40px;padding-top:30px;border-top:1px solid var(--linie)}
/* Schlussblöcke stehen mal innerhalb, mal ausserhalb von .fliess — ohne diese
   Zeile fiel ihr Text dort auf die Grundgrösse 16px zurück statt 16.5. */
.abschluss p{font-size:var(--tx)}
.abschluss h3,.abschluss .tit-schlicht{margin-top:0}
/* **Eine Leiter ohne Regel gegen das Erbe ist eine Empfehlung.**

   Hier stand bis zum 29.08.2026 `font-size:1.17em` — die Vorgabe des Browsers
   fuer `h3`, festgehalten, damit das Anheben auf `h2` sie nicht auf 1.5em
   verschiebt. Das hielt die Darstellung fest und liess sie zugleich am
   Dokumentgrund haengen: 1,17 x 16 = **18,72px**, eine Groesse, die auf keiner
   der beiden Leitern steht. Als `body` auf 17 stieg, waeren daraus 19,89
   geworden — **ein Problem gegen ein anderes getauscht.**

   Jetzt Stufe C, dieselbe wie `h2.fliess-titel` und `h3.info-titel`:
   **gleiche Rolle, gleiche Stufe.** Ein Abschnittstitel auf `ticker` oder
   `bus` hat keinen Anlass, lauter zu sein als einer im Fliesstext.

   `.abschluss h3` steht mit in der Regel: die zwei klassenlosen `h3` in den
   Schlussbloecken von `geschichte` und `statistik` waren derselbe Fall, nur
   ohne Klasse — sie trugen ueberhaupt keine Regel. */
.tit-schlicht,.abschluss h3{font-size:clamp(19px,1.04rem + 0.30vw,21px);font-weight:700}
/* Eröffnet der Schlussblock einen eigenen Abschnitt, trägt dieser den Abstand schon —
   sonst stapeln sich Abschnittspolster und Aussenabstand zu einer Lücke */
.wrap > .abschluss:first-child{margin-top:0}
/* Grundsätze: nummeriert, mit Luft zwischen den Sätzen */
.fliess ul.leitsatz{counter-reset:satz;gap:0}
.fliess ul.leitsatz li{padding:20px 0 20px 52px;border-bottom:1px solid var(--linie)}
.fliess ul.leitsatz li:last-child{border-bottom:0}
.fliess ul.leitsatz li::before{
  counter-increment:satz;content:counter(satz);
  top:20px;left:0;width:auto;height:auto;background:none;
  font-family:var(--d);font-variation-settings:'wdth' 112;font-weight:900;font-size:21px;color:var(--tx-hervor);
}
/* Zweite Abschnittsgrösse. Sie stand bisher elfmal als Inline-Wert im Markup
   — dieselbe Zahl an elf Stellen gepflegt. Als Klasse ist sie einmal definiert
   und lässt sich ändern, ohne elf Fundstellen zu suchen. */
/* B — Thema: wiederkehrende gleichrangige Abschnitte, die sieben Angebote auf
   „Sponsor werden", die acht Blöcke der Teamseite. Sie standen bisher auf
   derselben Stufe wie Untergeordnetes — gleiche Ränge sahen verschieden aus,
   verschiedene gleich. */
/* Die zwei Kernbloecke stehen hier mit, weil sie oben bei `.sec` mitstehen:
   Dort holen sie Schrift, Schnitt und Laufweite, hier die Stufe. Ohne diese
   Zeile stuenden sie auf A (26–35px) statt auf B wie jeder Ressortkopf. */
.sec.sec-mittel,
.wp-block-details > summary,
.wp-block-accordion-heading__toggle-title{font-size:clamp(22px,1.29rem + 0.45vw,27px)}
/* C — Unterpunkt innerhalb eines Abschnitts. Weicht von 23px nach unten aus,
   damit B dazwischen Platz hat, und wird beweglich: der feste Wert neben
   einem clamp() war der Grund, warum die Hierarchie auf dem Handy
   verschwand (dort standen 26px gegen 23px). */
.sec.sec-klein{font-size:clamp(19px,1.04rem + 0.30vw,21px)}
/* Die frühere Sonderregel für den kleinen Titel (11px) ist entfallen: als
   Anteil geschrieben, ergibt .35em bei 22px genau diese 11px — dieselbe
   Regel trägt jetzt alle drei Stufen. */
.fliess .sec-klein,.fliess .sec-mittel{margin:1.4em 0 .48em}
/* Ausnahme von der Leiter, und sie steht bewusst hier: Wenn ueber einem
   Zwischentitel eine kleine Zeile steht — die Augenzeile oder die Jahreszeile
   eines Geschichtskapitels —, gehoert der Titel zu ihr und nicht zum Block
   davor. Gleiches Gewicht wie die Zeile darueber; weiter oben im Stylesheet
   wuerde sie verlieren.

   ⚠ **Beide Ausnahmen tragen — 20.09.2026.** Ein Befund vom selben Tag hielt
   `:not(.ressort-kopf *)` fuer einen Rest aus dem Prototyp und schlug vor, sie
   zu streichen. Er hatte nur /vorstand/ angesehen, und dort traegt kein
   Klappkopf eine Augenzeile. Ueber alle 88 abgerufenen Adressen stehen 17
   Paare aus `.eye` und `.sec` in einem `.ressort-kopf` — /archiv/,
   /sponsor-werden/, /schiri/, /blockprobe/, /vereinsbus/ — und 4 Paare in
   einem `.sk` auf Startseite und Teamseite.

   **Die Ausnahme entscheidet, nicht die Regel daneben.** Ohne sie faellt
   dieser Waehler von (0,4,0) auf (0,3,0) und schlaegt damit weiterhin
   `.ressort-kopf .sec{margin:0}` mit (0,2,0): gemessen sprangen 32 von 78
   Messpunkten von 0 auf 6px. Ruhig bliebe nur, was in `.fliess` steht, weil
   `.fliess .ressort-kopf .sec` gleich schwer ist und spaeter folgt. Dasselbe
   gilt fuer `:not(.sk *)` gegen `.sk .sec{margin-top:10px}`: dort sprangen
   8 von 60 Messpunkten von 10 auf 6px. */
.eye + .sec:not(.sk *):not(.ressort-kopf *),
.fliess .kapitel-jahre + .sec{margin-top:6px}
/* Abstand unter Abschnittstiteln: zwei Werte statt acht Inline-Zahlen.
   Folgt eine Einleitung, gehört sie eng zum Titel — folgt Inhalt, braucht es
   Luft. Vorher stand das an rund dreissig Stellen einzeln im Markup. */
.sec:has(+ p){margin-bottom:.35em}
/* Das Etikett ist eine Überzeile und gehört zum Titel — es rückt näher heran,
   sobald direkt eine Überschrift folgt. Steht es allein, bleibt sein Abstand
   wie bisher. Zusammen mit den 16px darunter liest sich Etikett plus Titel als
   eine Einheit, der Text als das, was folgt. */
.eye:has(+ h2),.eye:has(+ h1),.eye:has(+ h3){margin-bottom:6px}
/* Im Fliesstext braucht ein Abschnittstitel denselben Rhythmus wie zuvor die
   Zwischentitel: Luft nach oben, wenig nach unten. Ohne das kleben Titel und
   Text aneinander — die Ebene ändert sich, die Typografie soll es nicht. */
/* Nur der erste Titel im Fliesstext startet bündig — im Schlussblock trägt
   .abschluss bereits Abstand und Linie, dort kämen sonst 102px zusammen. */
.fliess > .sec-klein:first-child,.fliess > .sec-mittel:first-child,
.abschluss > .sec-klein:first-child{margin-top:0}

/* Derselbe Fall eine Stufe tiefer -- 05.09.2026, mit der Schiedsrichterseite.
   `.ressort-inh > .zahlen + .zwei` setzt den Abstand nach dem Zahlenband
   bereits; die 1.4em des `h3` kaemen darueber, und der erste Zwischentitel
   stuende 25px zu tief.

   **Der Prototyp loest es mit einem Inline-Stil** (`fch-prototyp.html`).
   Als Regel gilt es fuer jeden Weg -- nicht nur fuer den, an dem jemand
   daran gedacht hat.

   > **Ein Inline-Stil ist eine Regel, die genau einmal gilt.** */
.fliess > h3:first-child{margin-top:0}

/* **Und dasselbe am anderen Ende des Textflusses -- 22.09.2026.**

   Der Anfang war seit je geregelt (die zwei Zeilen darueber: der erste Titel
   im Fliesstext startet buendig). **Das Ende war es nicht.** `.fliess
   p{margin-bottom:17px}` ist der Abstand ZWISCHEN zwei Absaetzen; hinter dem
   letzten steht kein Absatz mehr, und die 17px fallen aus `.fliess` heraus
   und landen im Abschnittspolster.

   **Gemessen am 22.09.2026, 1440px, Unterkante des letzten Absatzkastens bis
   Oberkante des naechsten Abschnitts -- auf beiden Seiten dieselbe Kante:**

   ```
                            Kastenkante   sichtbare Luecke
     Anlassseite (dev)         97.00px         97.00px
     /fanion500/ (lokal)       80.00px         97.00px
     nachher, beide            80.00px         80.00px
   ```

   ⚠ **Die zweite Spalte machte nur die Kastenkante schoener, nicht die
   Luecke.** Auf `/fanion500/` steht `.fliess` als Rasterzelle in `.zwei`, und
   eine Rasterzelle ist ein eigener Formatierungskontext: Der Schlussrand
   faellt dort nicht heraus, er bleibt INNEN. Die Kastenkante misst darum
   sauber 80 -- **und der Leser sieht trotzdem 97, weil die 17px leerer Raum
   unter der letzten Zeile sind, egal auf welcher Seite der Kastenkante sie
   liegen.** Die Anlassseite hat sie vor dem Polster, `/fanion500/` dahinter.

   > **Zwei Seiten, die verschieden gebaut sind und gleich aussehen, haben
   > denselben Fehler an zwei Stellen -- nicht eine davon richtig.**

   Darum greift die Regel an beiden Orten. `/fanion500/` ist die Vorlage fuer
   die Anlassseite und rueckt mit ihr zusammen: 97 -> 80. **Wer nur die
   Anlassseite anfasste, machte sie 17px enger als ihr eigenes Vorbild.**

   **Die zwei Waehler decken genau die Faelle, in denen nichts mehr folgt**,
   und nur die: `.fliess:last-child` (nichts danach im selben Fluss) und
   `.zwei > .fliess` (die Spalte selbst; was folgt, ist die NEBEN-Spalte).
   Gemessen am 22.09.2026 im lokalen Stapel ueber alle 52 Adressen: 38
   `.fliess` auf 20 Seiten, davon 27 mit einem Folgegeschwister. **Fuenf
   dieser 27 haengen ihren Abstand wirklich an diesen 17px** -- dreimal
   `.ressort-inh > .fliess` vor `p.dat.fussnote`, einmal vor
   `.tabelle-scroll`, einmal `.wrap > .fliess` vor `.zwei`; alle fuenf messen
   exakt 17.00px zwischen den Kaesten. Eine Regel ohne `:last-child` haette
   sie auf 0 gezogen. Die uebrigen 22 stehen in Rastern nebeneinander oder
   haben einen eigenen `margin-top` von 18 bis 20px, der ohnehin gewinnt.

   > **Ein Rand am Ende einer Aufzaehlung ist ueberfluessig; ein Rand
   > ZWISCHEN zwei Dingen ist die Aufzaehlung.** Darum wird hier nicht die
   > Quelle geaendert, sondern nur der Fall ohne Nachfolger.

   **Was sich mitaendert, gegengemessen am 22.09.2026** -- lokaler Stapel,
   1440px, alle 52 Adressen zweimal geladen, einmal mit dem Stylesheet aus
   HEAD untergeschoben, einmal mit dieser Fassung (Beleg, dass die Messung
   die Stoerung anzeigen wuerde: die neue Regel war im alten Stand auf 0 von
   52 Adressen im Blatt, im neuen auf 52 von 52):

   ```
     ZWISCHEN zwei Abschnitten
       5 von 78 sichtbaren Fugen, je -17.00px, auf 4 von 52 Adressen:
         /fanion500/          .zwei                 97 -> 80
         /schiri/             details.ressort       97 -> 80
         /sponsor-werden/     details.ressort       97 -> 80   (zweimal)
         /geschichte/1976/    .zwei                 97 -> 80
       0 Fugen werden groesser.
       8 von 8 Stellen, an denen die 17px wirklich trennen: unveraendert.

     AM SEITENENDE, vor dem Fussbereich
       13 von 52 Adressen werden kuerzer, -17.00px (bei zwei betroffenen
       Textspalten -34.00px, einmal -10.05px, wo ein `h3` den Schluss macht):
         6 von 6 Newsbeitraegen      -17.00
         /sportanlage/               -17.00
         /fanion500/ /geschichte/1976/               -17.00
         /impressum/ /schiri/ /vereinsbus/ /sponsor-werden/  -34.00
   ```

   ⚠ **Die News aendern sich mit, und zwar alle sechs** -- nicht an einer
   Fuge, sondern am Seitenschluss: Der Artikeltext ist das letzte `.fliess`
   der letzten Sektion, und deren `padding-bottom` von 96px trug bisher die
   17px huckepack. **Jetzt misst der Abstand zum Fussbereich die 96, die in
   der Regel stehen.** Dasselbe auf `/sportanlage/`. Die anderen sind
   dieselben Seiten wie oben. */
.fliess:last-child > :last-child,
.zwei > .fliess > :last-child{margin-bottom:0}

/* ⚠⚠ **`.fliess-titel` haengt seit dem 13.09.2026 an der KLASSE, nicht am
   Behaelter.**

   Der Waehler lautete `.fliess h3,.fliess .fliess-titel` — beide im Behaelter
   verankert. **Drei Titel stehen aber ausserhalb eines `.fliess`:** die «Gut
   zu wissen» der drei Anlassseiten. Folge, gemessen auf beiden Breiten:

   ```
   in  .fliess    Archivo 20.48px 800 · margin-top 28.7px
   ohne .fliess   Public Sans 25.5px 700 · margin-top 0
   ```

   **Kein Abstand UND die falsche Schrift** — und niemand hat etwas falsch
   gemacht: Die Anlassseite verzichtet ABSICHTLICH auf `.fliess`
   (`single-fch_anlass.php`, `fch_theme_abschnitte()`), weil ihre vier Abschnitte sonst eine einzige
   Textspalte waeren.

   ── ⚠ DER ABGELOESTE EINWAND, und warum er nicht mehr traegt ─────────

   Zwei Stellen im Blockcode haben genau das entschieden und begruendet:

   > «Die Alternative waere eine zweite CSS-Regel gewesen, die dieselbe
   > Schrift ausserhalb noch einmal setzt. **Das ist der Anfang zweier
   > Wahrheiten ueber eine Schriftstufe.**»
   > (`Bloecke/ausgabe.php`, `fch_core_block_ausgeben()`, Fall `fliesstext`;
   > gleichlautend `Bloecke/vorlagen.php`, `fch_core_vorlagen()`, bei
   > `klappbereich-drei-fragen`)

   **Der Einwand galt der zweiten Regel, nicht der Klasse.** Eine zweite Regel
   waeren zwei Wahrheiten; **die Klasse ist EINE Wahrheit an EINER Stelle** —
   dieselbe, die bisher galt, nur ohne die Bedingung, wo sie steht.

   > **Eine Bauform gehoert an die Rolle, nicht an den Ort. Wer sie am Ort
   > festmacht, hat sie nur dort — und niemand sieht, wo sie fehlt.**

   ⚠ **Dasselbe Prinzip wie am selben Tag auf der Organisationsseite** (der
   fuenfte Nachbarwaehler-Fall). ~~Und wie der Vermerk in Zeile 3645~~ — der
   zweite Verweis ist am 25.09.2026 gestrichen: An der genannten Zeile steht
   ein Vermerk zu etwas anderem, und welcher gemeint war, ist nicht mehr zu
   ermitteln.

   ⚠ `.fliess h3` bleibt am Behaelter: Ein `h3` IM Fliesstext ist eine Rolle
   durch seine Lage — ausserhalb kann dasselbe Element etwas anderes sein.
   Die Klasse dagegen sagt selbst, was sie ist. */
.fliess h3,.fliess-titel{
  /* Wie bei h1.big und h2.sec: lange Wörter müssen trennen dürfen. Ohne das
     zieht ein Wort wie „Vertretungsberechtigte" bei 320px die ganze Textspalte
     auf 366px auf und die Seite läuft seitlich über. */
  hyphens:auto;overflow-wrap:break-word;
  font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:800;
  /* Dieselbe Stufe C wie h2.sec-klein: ein Zwischentitel im Text und ein
     kleiner eigener Block sind derselbe Rang, der Unterschied ist
     grammatisch. Zwei Werte dafür wären die Doppelspurigkeit, die diese
     Skala gerade auflöst. */
  font-size:clamp(19px,1.04rem + 0.30vw,21px);
  margin:1.4em 0 .48em;letter-spacing:-.025em;text-transform:uppercase;color:var(--tx-haupt);
}
.sk{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:28px}
.sk .sec{margin-top:10px}
/* **Der Abschnittskopf, der die Filterleiste traegt — Didi, 24.09.2026.**

   > «Die Leiste steht rechtsbuendig auf der Hoehe der Ueberschrift, ihre
   > rechte Kante auf der rechten Kante der Spielliste. Unterkante der Leiste
   > auf der Unterkante der Ueberschrift — wie <<Alle News →>> bei
   > <<Aktuell>>.»

   **<<Wie bei Aktuell>> ist `.sk` eine Zeile weiter oben**, und darum steht
   hier keine zweite Fassung davon: `align-items:flex-end` IST die Unterkante
   auf der Unterkante, `justify-content:space-between` das Rechtsbuendige.
   Getragen wird das von `single-fch_team.php`, wo der Kopf seit heute
   `class="sk sk-ha"` heisst. `.sk-ha` traegt allein, was eine LEISTE von
   einem `a.mehr` unterscheidet — zwei Dinge, mehr nicht.

   ⚠ **Erstens: die Marge muss weg, und das ist kein Schoenheitsgriff.**
   `.filt` bringt `margin-bottom:28px` mit. Bei `align-items:flex-end`
   richtet sich die MARGIN-Box aus, nicht der Rahmen — die Leiste stuende
   damit 28px ueber der Unterkante der Ueberschrift statt auf ihr. Den
   Abstand zur Liste traegt jetzt `.sk` mit denselben 28px: **dieselbe Zahl
   in derselben Rolle**, nur eine Ebene hoeher. Dieselbe Entscheidung steht
   schon bei `.spielfilter > .filt` und bei `.newsfilter > .filt` — der
   Umschlag nullt, was das Kind allein mitbrachte. */
/* ── ⚠⚠ DRITTENS: DIE UEBERSCHRIFT MUSS IHRE MARGE EBENSO ABGEBEN ────
   Didi, 24.09.2026: «Saison-Leiste: Unterkante auf der Unterkante der
   Ueberschrift.»

   > ~~«`align-items:flex-end` IST die Unterkante auf der Unterkante»~~ —
   > Stand bis 24.09.2026, zwei Absaetze weiter oben. **Der Satz war halb
   > wahr und darum unbrauchbar:** `flex-end` richtet MARGIN-Boxen aus, und
   > die Ueberschrift bringt `margin-bottom:.48em` aus `.sec` mit.
   > Die Leiste steht damit genau um diese Marge TIEFER als die Unterkante
   > der Schrift — gemessen 16px auf `/anlaesse/` (`h2.sec`, 33px) und
   > 12.7px auf der Teamseite (`h2.sec.sec-mittel`, 26px).

   **Das ist derselbe Griff wie eine Zeile hoeher, nur am anderen Kind.**
   Dort nullt der Umschlag die 28px, die `.filt` allein mitbrachte; hier
   nullt er die `.48em`, die die Ueberschrift allein mitbringt. **Wer bei
   `flex-end` nur EIN Kind entmargt, hat die Kante nicht ausgerichtet,
   sondern verschoben.**

   ⚠⚠ **GEMEINSAM ENTSCHIEDEN — die Teamseite aendert sich mit.** `.sk-ha`
   traegt genau drei Koepfe im Haus: `div.sk.sk-ha` in
   `page-anlaesse.php` und zweimal in `single-fch_team.php`. Die Leiste steht dort aus DEMSELBEN
   Satz Didis vom 24.09.2026 («Unterkante der Leiste auf der Unterkante der
   Ueberschrift — wie <<Alle News →>> bei <<Aktuell>>») und hat denselben
   Fehlbetrag. **Eine Loesung nur fuer `/anlaesse/` haette aus einer Regel
   zwei gemacht und die Teamseite gegen ihren eigenen Kommentar stehen
   lassen.**

   ⚠ **`.sk` ohne `-ha` bleibt unberuehrt**, obwohl dort dieselbe Geometrie
   gilt: Didi nennt «Alle News →» bei «Aktuell» als das VORBILD. Ein
   Vorbild korrigiert man nicht, solange niemand es beanstandet hat —
   gemeldet, nicht stillschweigend mitgenommen.

   ⚠ **Nicht `>` wie bei `.filt`, sondern der Nachfahrenwaehler.** Auf
   `/anlaesse/` ist die Ueberschrift ein direktes Kind; auf der Teamseite
   liegt sie mit ihrem `.eye` zusammen in einem `div` (`single-fch_team.php`, `div.sk.sk-ha`). Ein
   Flexkind bildet einen eigenen Blockformatierungskontext, die Marge faellt
   dort also nicht heraus, sondern macht den `div` hoeher — **gleiche
   Wirkung, anderer Traeger.** `>` haette genau die Haelfte der Faelle
   getroffen.

   ⚠ **Nur ab 620px, wie die Zeile darunter.** Unter 620px steht der Kopf
   gestapelt (`display:block`), und dort IST die `.48em` der Abstand
   zwischen Ueberschrift und Leiste. Wer sie auch dort nullt, klebt die
   beiden aneinander.

   ⚠ **Folge, die dazugehoert: die Liste rueckt um dieselbe Marge auf.** Der
   Abstand vom Kopf zur Liste ist seit dem 24.09.2026 `.sk{margin-bottom:28px}`
   und war faktisch 28 + 16 = 44px, weil die Marge der Ueberschrift im
   Kasten mitlief. Jetzt sind es die 28px, die dort stehen. **Eine Zahl, die
   nur zusammen mit einer zweiten stimmt, ist keine Zahl.** */
@media(min-width:620px){.sk-ha > .filt{margin-bottom:0}.sk-ha .sec{margin-bottom:0}}
/* ⚠ **Zweitens: unter 620px steht der Kopf wieder gestapelt.** Didi: «Handy
   (unter 620 px): Leiste wie heute unter der Ueberschrift.»

   **`flex-wrap:wrap` allein haette das nicht entschieden.** Es bricht um,
   wenn es zu eng wird, und nicht, wenn Didi es will. Gemessen am 24.09.2026
   ueber 441 Breiten (320…760px, je 1px) bleibt «Spielplan» bis hinunter zu
   402px einzeilig und «Letzte Spiele» bis 570px. **Oberhalb von 620px
   bricht nichts um** — die Leiste stuende ohne Abfrage also bis 402px
   hinunter rechts neben der Ueberschrift, und genau das ist die
   Handyansicht, die Didi nicht will. Die Schwelle ist die des Hauses
   (`.g2,.g3,.g4`).

   ⚠⚠ **Der Umbruch ist ausserdem nicht einmalig.** «Letzte Spiele» bricht
   zwischen 560 und 569px um, faellt bei 559px in EINE Zeile zurueck — dort
   kuerzt die Segmentleiste auf «H»/«A» und misst 194 statt 307px — und
   bricht ab 451px endgueltig. **Ein Kopf, der sich auf dem Weg nach unten
   zweimal umentscheidet**, waere die Ansicht gewesen, die `wrap` ohne
   Abfrage geliefert haette. Sie ist kein Fehler von `wrap`; sie ist der
   Grund, warum eine Schwelle hier eine Entscheidung ist und keine Zierde.

   **`display:block` nimmt jede Wirkung von `.sk` zurueck** — und weil die
   Regel darueber in `min-width` steht, bekommt die Leiste hier ihre eigenen
   28px wieder. `.sk` gibt seine dafuer ab; sonst stuenden 28 und 28
   uebereinander. **`margin-top:6px` ist kein neuer Wert**, sondern der, der
   vor dem Umbau an dieser Ueberschrift stand: `.eye + .sec:not(.sk *)`
   traf sie, solange kein `.sk` darum lag. Ohne diese Zeile spraenge
   der Abstand still auf die 10px von `.sk .sec` — eine Handyansicht, die
   Didi nicht bestellt hat. */
@media(max-width:619px){
  .sk-ha{display:block;margin-bottom:0}
  .sk-ha .sec{margin-top:6px}
}

/* **Der Behaelter fehlte, und das war keine Absicht.** `a:hover .card` traf
   JEDEN Verweis, in dem irgendwo ein `.card` steht - eine Auswahl ohne Ort.
   Gezaehlt am 26.08.2026: alle 22 `.card` stehen in einer Newskachel oder
   einer kleinen Schlagzeile, also in `.nk`, `.gross` oder `.klein`. Die Regel
   tat bisher das Richtige, weil es nichts anderes gab - nicht, weil sie es
   sagte. Wer morgen ein `.card` woandershin setzt, bekommt den Zeigerzustand
   einer Newskachel geschenkt, ohne ihn bestellt zu haben. */
@media(hover:hover){.nk:hover .card,.gross a:hover .card,.klein a:hover .card{color:var(--gelb)}}

/* ── 20 Kopf und Navigation ───────────────────────────────── */

.kopf{position:sticky;top:0;z-index:90;width:100%}
/* Der Kopf klebt oben — Sprungziele halten Abstand, sonst liegen sie dahinter.
   **Jeder Abschnitt mit einer Id ist ein Sprungziel**, und umgekehrt: gemessen
   sind es 27 von 27. Bis zum 22.08.2026 stand hier `[id^="s-"]`, also ein
   NAMENSPRAEFIX statt einer Bauform — es meinte die Statistikbereiche und traf
   nur sie. Die sechs Gruppen der Partnerseite fielen darum durch und landeten
   beim Sprung hinter dem Kopf, 56px zu hoch. Dieselbe Familie wie ein Wert,
   der an einem Umstand haengt: hier hing eine Eigenschaft an einer
   Schreibweise.
   Die Ressortabschnitte behalten ihre engeren 74/118 —
   `section:has(> .wrap > .ressort)` wiegt (0,2,1) gegen die (0,1,1) hier.
   `#schnuppern` ist kein Abschnitt, sondern die Formularspalte auf «Mitglied
   werden», und steht darum weiter einzeln daneben.
   Gemessen ist der klebende Kopf 56px hoch bis 768, 100px ab 1024 und 106px ab
   1916; der clamp gibt 96 / 123 / 132 und laesst ueberall 23 bis 40px Luft. */
section[id],#schnuppern{scroll-margin-top:clamp(96px,12vw,132px)}

/* Der Kopf bekommt einen eigenen, breiteren Behälter als der Inhalt: 2400 gegen 1680.
   So bleibt das Logo aussen, ohne dass die Schnellzugriffe am Bildschirmrand kleben.
   Unter 2400px greift die Begrenzung nicht — dort ändert sich nichts. */
.gelbbalken{background:var(--gelb);position:relative;z-index:2}
.kopf-in{display:flex;align-items:stretch;min-height:56px;max-width:var(--content-kopf);margin:0 auto;padding:0 var(--rand)}
.logo{flex:none;position:relative;display:flex;align-items:center;gap:11px;z-index:5}
.logo-txt{
  font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:800;
  font-size:16px;letter-spacing:-.02em;text-transform:uppercase;color:var(--dun);white-space:nowrap;
}
.crest{
  width:46px;height:46px;display:block;background:no-repeat center/contain;
  background-image:var(--wappen);
}
/* Mobile: Wappen sitzt im Balken, schlichte Fassung ohne gelben Rand */
.logo .crest{
  position:relative;width:42px;height:42px;border-radius:50%;overflow:hidden;
  background-image:var(--wappen-schlicht);
}
/* Erst mit der Desktopnavigation wächst das Wappen aus dem gelben Balken heraus.
   Die Schwelle muss dieselbe sein wie bei .hnav und .burg — sonst ragt das Wappen
   in den Bereich darunter, während noch das Burgermenü gilt. */
/* Lichtstreif beim Darüberfahren */
.logo .crest::after{
  content:'';position:absolute;top:-40%;left:-140%;width:60%;height:180%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:rotate(18deg);transition:left .65s cubic-bezier(.2,.7,.3,1);
}
@media(hover:hover){.logo:hover .crest::after{left:150%}}
@media(min-width:1000px){
  .logo{width:116px;display:grid;place-content:center}
  .logo-txt{display:none}
  .logo .crest{
    position:absolute;left:50%;top:5px;transform:translateX(-50%);
    width:104px;height:104px;background-image:var(--wappen);
    filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
  }
}
.hnav{display:none;align-items:stretch;gap:0;flex:1;padding-left:20px}
.hi{position:relative;display:flex}
/* Senkrechte Trennstriche geben dem Balken einen Takt */
.hi+.hi::before{content:'';position:absolute;left:0;top:26%;bottom:26%;width:1px;background:rgba(11,11,10,.28);transition:opacity .16s}
@media(hover:hover){.hi:hover::before,.hi:hover+.hi::before{opacity:0}}
.hi:has([aria-expanded="true"])::before,.hi:has([aria-expanded="true"])+.hi::before{opacity:0}
.hnav a,.hnav button{
  /* Versal wie die Unterebene und wie das Handymenü, das schon immer so gesetzt
     war. Die negative Laufweite passt nur zu Gemischtsatz — bei Versalien
     drängen sich die Buchstaben sonst; deshalb hier leicht positiv.
     Platzprobe: bei 1000px, der schmalsten Breite mit Balkennavigation, bleiben
     zwischen dem letzten Punkt und der Lupe noch 35px. */
  font-family:var(--d);font-variation-settings:'wdth' 104;font-weight:var(--fw-bold);font-size:19px;
  line-height:var(--lh-nav);letter-spacing:.01em;text-transform:uppercase;color:var(--dun);background:none;border:0;padding:16px 18px;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .14s,color .14s;
}
/* Der angesteuerte Punkt kippt ganz, statt abgedunkelt zu werden */
/* **Zeiger und Offen-Zustand getrennt am 26.08.2026.** Sie standen in einer
   Liste: `:hover` ist der Zeiger, `[aria-expanded="true"]` der geoeffnete
   Klapppunkt, den das Skript setzt. Ein gemeinsamer `(hover:hover)`-Schutz
   haette den geoeffneten Menuepunkt auf jedem Tastgeraet ab 1000px seine
   Farbe verlieren lassen - er saehe aus wie jeder geschlossene, waehrend die
   Unterebene sichtbar darunter steht.

   **Beide Regeln bleiben an Ort.** Wandert die geschuetzte hinter
   `.drop a[aria-current="page"]` (gleiche Spezifitaet, spaeter), kehrt sich
   das Verhaeltnis zur aktuellen Unterseite still um. */
@media(hover:hover){
  .hnav a:hover,.hnav button:hover{background:var(--dun);color:var(--gelb)}
}
.hnav button[aria-expanded="true"]{background:var(--dun);color:var(--gelb)}
.pf{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.75;transition:transform .2s}
.hnav button[aria-expanded="true"] .pf{transform:rotate(180deg)}
/* **`.aktuell` bekommt einen zweiten Traeger: `current-menu-item`.**

   Die Klasse setzte im Prototyp ein Skript. **Im Theme setzt sie WordPress —
   unter anderem Namen.** Gemessen am 31.08.2026: Sobald ein Menue zugewiesen
   ist, liefert `wp_nav_menu` `current-menu-item`, `current_page_item`,
   `menu-item-object-page` und sieben weitere.

   > **Der erste Fall, in dem der Traeger schon da war und nur anders hiess.**

   Umgehaengt und nicht neu gebaut: Die vier Regeln nennen jetzt beide Namen.
   `.aktuell` bleibt stehen, weil der Prototyp sie weiter traegt und die
   Paritaet sonst bricht.

   ── Berichtigt am 03.09.2026: der falsche Traeger, zweimal ────────────

   **Gemessen auf `/teams/`:** `current-menu-item` sitzt nicht am Knopf der
   obersten Ebene, sondern am Verweis IM Aufklappmenue -- `a.menu-item <
   div.drop < div.hi`. Solange das Menue zu ist, misst er 0x0.

     Prototyp   .aktuell am Knopf      107 x 56, Balken l18 r18 b9
     Theme      .current-menu-item       0 x 0,  Balken l0  r18 b6

   **Der Balken hing an einer Flaeche ohne Groesse.** Und der Knopf selbst
   traegt `current-menu-ancestor` und `current-menu-parent` -- **Namen, fuer
   die es hier keine Regel gab.** Der aktive Hauptpunkt hatte also gar keinen
   Balken, und der falsche lag unsichtbar im geschlossenen Aufklappmenue.

   > **Zwei Fehler mit einer Ursache: WordPress benennt die Ebene mit, der
   > Prototyp nur den Zustand.** Wer nur den Namen umhaengt, uebernimmt die
   > Ebene nicht mit.

   Die Regel gilt jetzt fuer die direkten Kinder von `.hi`, also die oberste
   Ebene, und nennt alle drei Namen. **Der Eintrag im Aufklappmenue behaelt
   seine eigene Auszeichnung** -- `.drop a[aria-current="page"]` setzt dort
   den hellen Grund, wie im Prototyp. */
.hnav .aktuell,
.hnav .hi > .current-menu-item,
.hnav .hi > .current-menu-ancestor,
.hnav .hi > .current-menu-parent{position:relative}
.hnav .aktuell::after,
.hnav .hi > .current-menu-item::after,
.hnav .hi > .current-menu-ancestor::after,
.hnav .hi > .current-menu-parent::after{content:'';position:absolute;left:18px;right:18px;bottom:9px;height:3px;background:var(--dun)}
/* Getrennt wie oben. Der gelbe Balken unter der aktuellen Rubrik hebt sich
   vom schwarzen Grund ab, den der offene Zustand setzt - ohne diese Regel
   waere er schwarz auf schwarz. Auf dem Tastgeraet erscheint er jetzt nur
   noch, solange das Menue wirklich offen ist. */
@media(hover:hover){.hnav .aktuell:hover::after,
  .hnav .hi > .current-menu-item:hover::after,
  .hnav .hi > .current-menu-ancestor:hover::after,
  .hnav .hi > .current-menu-parent:hover::after{background:var(--gelb)}}
.hnav .aktuell[aria-expanded="true"]::after,
.hnav .hi > .current-menu-item[aria-expanded="true"]::after,
.hnav .hi > .current-menu-ancestor[aria-expanded="true"]::after,
.hnav .hi > .current-menu-parent[aria-expanded="true"]::after{background:var(--gelb)}
.gb-r{display:flex;align-items:center;gap:8px;margin-left:auto}
/* 44 statt 40: hier steht eine gesetzte Hoehe und kein Polster, also ist es
   eine Zahl und keine Regel. Damit sind die drei Knoepfe im gelben Balken
   gleich gross — Burger 44, Lupe 44, Personensymbol 44 —, und die Lupe faellt
   nicht mehr unter die Beruehrflaeche. Der Balken ist 56px hoch, 44 passen.

   Vorher standen drei Knoepfe mit derselben Aufgabe nebeneinander und hatten
   drei Groessen: 44, 40, 40. Niemand hat es gemeldet, weil niemand es
   gemessen hat — die Pruefung sah bis zum 20.08.2026 nichts ausserhalb der
   Ansichten. */
.suche,.konto{
  width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--dun);
  display:grid;place-content:center;cursor:pointer;transition:background .16s,color .16s;
}
.suche .ic,.konto .ic{width:21px;height:21px;margin:0}
/* Offen ist ein Zustand, kein Zeigerzustand — sonst bleibt die Lupe nach dem
   Antippen auf dem Touchscreen dunkel stehen. */
.suche[aria-expanded="true"]{background:var(--dun);color:var(--gelb)}
@media(hover:hover){/* **Zwei Rollen in einer Regel, getrennt am 25.08.2026.** `.suche` ist ein
   `<button>`, der das Suchband auf- und zuklappt; `.konto` ist ein `<a>` zum
   Mitgliederbereich. Dass beide gleich AUSSEHEN, ist im Kopfbalken richtig -
   sie stehen nebeneinander und sind gleich wichtig. **Getrennt ist die
   Auswahl, nicht das Aussehen:** Der Selektor sagt jetzt, dass es zwei Sachen
   sind, und wer eine davon aendert, aendert nicht versehentlich die andere. */
.suche:hover{background:var(--dun);color:var(--gelb)}
.konto:hover{background:var(--dun);color:var(--gelb)}}
/* ⚠ **`outline:0` am 25.09.2026 dazu.** Lupe und Personensymbol sind
   Bedienelemente mit Zeigerflaeche; Didi: «Fokus = derselbe Zustand wie
   Hover. Kein Ring.» Die Fuellung IST die Anzeige — ein Ring daneben waere
   die zweite Aussage ueber denselben Zustand.
   ⚠ Die Zwillingsregel bleibt ausserhalb der `(hover:hover)`-Klammer stehen,
   wo sie seit dem 25.08.2026 steht: Ohne Zeiger gibt es keinen Zeigerzustand,
   eine Tastatur aber sehr wohl. */
.suche:focus-visible,.konto:focus-visible{background:var(--dun);color:var(--gelb);outline:0}
.mini{
  font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);letter-spacing:.12em;text-transform:uppercase;
  padding:10px 16px;border:0;border-radius:0;background:var(--dun);color:var(--gelb);cursor:pointer;
  line-height:normal;
}
/* ⚠ **`:focus-visible` steht IN der Zeigerregel und nicht daneben —
   25.09.2026.** «Fokus = derselbe Zustand wie Hover» heisst dieselbe Regel;
   eine zweite mit denselben zwei Deklarationen waere eine Kopie, die beim
   naechsten Farbwechsel zurueckbleibt.
   ⚠ **Und `outline:0` gehoert darum ebenfalls hierher.** Innerhalb der
   Klammer heisst es «hier gibt es einen Zeigerzustand, der die Anzeige
   traegt». Auf einem Geraet ohne Zeiger greift die Klammer nicht — dort
   bleibt der einzelne Ring aus der Grundregel stehen, statt dass die
   Tastatur gar nichts bekaeme. Diese Form gilt ab hier fuer jedes
   Bedienelement mit Zeigerflaeche. */
@media(hover:hover){.mini:hover,.mini:focus-visible{background:#fff;color:var(--dun);outline:0}}
/* Die Balken sind so breit und so stark wie Lupe und Personensymbol daneben
   (21px, runde Enden) — sonst spricht der Burger eine andere Sprache als die
   beiden SVG-Symbole. Die Klickfläche bleibt 44px, nur die Zeichnung ist kleiner.
   Die Verschiebung fürs Kreuz ist Balkenhöhe plus Abstand: 2 + 5 = 7. */
.burg{
  width:44px;height:44px;border:0;background:none;
  display:grid;place-content:center;gap:5px;cursor:pointer;
}
.burg i{display:block;width:21px;height:2px;border-radius:1px;background:var(--dun);transition:transform .22s,opacity .18s}
.burg[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burg[aria-expanded="true"] i:nth-child(2){opacity:0}
.burg[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* **Der Sprunglink — die einzige Kopfregel, die NICHT aus dem Prototyp
   kommen kann.**

   Der Prototyp ist eine einzige Seite mit zweiunddreissig Ansichten. Er hat
   keinen Sprunglink, weil es nichts gibt, worueber man springen muesste. Das
   Theme hat auf jeder Seite denselben Kopf und braucht ihn — und darum fehlte
   die Regel: **sie hatte keine Vorlage, aus der man sie haette abschreiben
   koennen.**

   Gemessen am 01.09.2026 auf `/vorstand/` bei 2560: `a.skip` stand mit
   `position:static` als 158x20-Kasten sichtbar ueber der ganzen Seite.

   > **Nicht `display:none`.** Das nimmt ihn auch der Tastatur weg und macht
   ihn wertlos — ein Sprunglink, den niemand erreichen kann, ist schlimmer als
   keiner, weil er im Markup steht und Erfuellung vortaeuscht.

   Stattdessen aus dem Bild geschoben und beim Fokus zurueckgeholt. `top:-60px`
   statt `left:-9999px`: Wer die Tabulatortaste haelt, sieht ihn von oben
   hereinkommen statt von der Seite zu springen.

   ⚠⚠ **`:focus` bleibt hier stehen — 25.09.2026, gegen den Wortlaut des
   Auftrags.** Didi: «Alle Fokusregeln von `:focus` auf `:focus-visible`
   umstellen.» Diese eine nicht, und der Grund ist die Aufgabe der Regel:
   **Sie steuert nicht, wie der Sprunglink aussieht, sondern OB er da ist.**
   `top:0` holt ihn ins Bild; ohne Treffer bleibt er bei `top:-60px` und
   damit unsichtbar.

   `:focus-visible` entscheidet der Browser nach der Eingabeart, und er
   entscheidet nicht immer so, wie man es sich denkt — ein programmatisches
   `focus()`, ein Tabulatorsprung aus der Adresszeile, ein Wechsel zurueck
   ins Fenster. **Wo eine Fehlentscheidung nur eine Markierung kostet, ist
   sie harmlos; hier kostet sie das Bedienelement selbst.** Darum stehen
   beide Waehler nebeneinander: `:focus-visible` ist eine Teilmenge von
   `:focus` und aendert am Ergebnis nichts — er steht da, damit niemand die
   Regel fuer uebersehen haelt und sie beim naechsten Durchgang «nachzieht».

   Der Umriss nimmt `--akzent`; der Sprunglink meldet seine gelbe Flaeche
   oben bei der Grundregel an, damit die Farbe stimmt statt zu raten. */
.skip{
  position:absolute;top:-60px;left:0;z-index:200;
  background:var(--gelb);color:var(--dun);
  font-family:var(--b);font-weight:700;font-size:var(--tx-klein);
  letter-spacing:.04em;padding:12px 20px;
  transition:top .14s ease-out;
}
.skip:focus,.skip:focus-visible{top:0;outline:2px solid var(--akzent);outline-offset:-4px}
.schwarzbalken{background:var(--dun);display:none}
.qlinks{display:flex;justify-content:flex-end;gap:26px;max-width:var(--content-kopf);margin:0 auto;padding:11px var(--rand);flex-wrap:wrap}
.qlinks a{font-family:var(--b);font-weight:var(--fw-semi);font-size:14px;letter-spacing:.01em;color:#fff}
.qlinks a:hover{color:var(--gelb)}

/* Die Unterebene ist hell — der geöffnete Hauptpunkt bleibt schwarz mit gelber
   Schrift und trägt die Hierarchie. Overlay: legt sich über Hero und schwarze
   Leiste, verändert aber weder Kopfhöhe noch Fluss. */
.drop{
  position:absolute;top:100%;left:0;min-width:238px;max-width:300px;background:var(--nav-flaeche);
  border:0;padding:0;margin:0;display:none;flex-direction:column;z-index:60;
  box-shadow:0 14px 32px rgba(0,0,0,.16);
}
.drop.open{display:flex}
/* Eine Zeilenhöhe für das ganze Menü — erste Ebene, Gruppen und Mannschaften */
.hnav .drop a{
  position:relative;
  font-family:var(--d);font-variation-settings:'wdth' 102;font-weight:var(--fw-bold);font-size:13.5px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--papier-text);padding:14px 20px;line-height:1.3;
}
/* Trenner sitzen zwischen den Einträgen und laufen nicht bis an den Rand.
   Als Pseudoelement statt als Rahmen, damit der erste Eintrag keinen bekommt. */
.drop > *+*::before{
  content:'';position:absolute;left:18px;right:18px;top:0;height:1px;background:var(--nav-linie);
}
/* Zweite Ebene im Teams-Menü: Gruppe links, Mannschaften klappen seitlich auf */
.dg{position:relative}
/* Mit .drop davor, sonst gewinnt `.hnav button` und färbt die Gruppen dunkel */
.drop .dg-k{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  font-family:var(--d);font-variation-settings:'wdth' 102;font-weight:var(--fw-bold);font-size:13.5px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--papier-text);padding:14px 20px;line-height:1.3;
  background:none;border:0;cursor:pointer;text-align:left;
}
.drop .dg-k .pf{transform:rotate(-90deg)}
.dg-u{
  position:absolute;left:100%;top:0;min-width:238px;max-width:300px;background:var(--nav-flaeche);
  display:none;flex-direction:column;z-index:70;box-shadow:0 14px 32px rgba(0,0,0,.16);
}
/* **Geteilt am 26.08.2026, nachdem die Prueffrage beantwortet war.** Der
   Zeigerweg und der Klickweg standen in einer Liste; ein gemeinsamer Schutz
   haette auf breiten Tastgeraeten die dritte Menueebene dauerhaft
   `display:none` gelassen - 33 Mannschaftsverweise unerreichbar, waehrend der
   Knopf weiter `aria-expanded="true"` meldet.

   **Die Teilung ist sicher, weil das Skript `.open` per KLICK setzt** und ein
   Klick auf jedem Geraet ankommt: `k.addEventListener('click', …)` bei den
   `.dg-k`, mit `u.classList.toggle('open',!offen)`. Der Kommentar dort sagt
   es selbst - «auf dem Desktop reicht der Zeiger, fuer Tastatur und Geraete
   ohne Hover braucht es den Klick». */
@media(hover:hover){.dg:hover .dg-u{display:flex}}
.dg-u.open{display:flex}
.drop .dg-u a{
  position:relative;
  font-family:var(--d);font-variation-settings:'wdth' 102;font-weight:var(--fw-bold);font-size:13.5px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--papier-text);padding:14px 20px;line-height:1.3;
}
.dg-u > *+*::before{
  content:'';position:absolute;left:18px;right:18px;top:0;height:1px;background:var(--nav-linie);
}
/* Berührung nur, wo es einen Zeiger gibt — sonst bleibt der Zustand auf dem
   Touchscreen nach dem Antippen kleben. */
@media(hover:hover){
  .hnav .drop a:hover,.drop .dg-u a:hover{background:var(--nav-beruehrt);color:var(--papier-text)}
  .dg:hover .dg-k{background:var(--nav-beruehrt);color:var(--papier-text)}
}
/* Mit .drop davor, sonst gewinnt `.hnav button[aria-expanded]` und färbt
   die geöffnete Gruppe schwarz — mitten in der hellen Fläche. */
.drop .dg-k[aria-expanded="true"]{background:var(--nav-beruehrt);color:var(--papier-text)}
/* Tastatur: eigener Zustand, nicht nur die Zeigerfarbe */
/* ⚠ **Der Umriss ist am 25.09.2026 entfallen.** Hier stand
   ~~`outline:2px solid var(--dun);outline-offset:-2px`~~ — ein Ring INNEN im
   Menueeintrag, zusaetzlich zur Flaeche. Didi: Bedienelemente mit
   Zeigerflaeche tragen den Zeigerzustand und keinen Ring.
   **`outline:0` und nicht «nichts hinschreiben»:** Die Grundregel setzt einen
   Ring an jedes fokussierte Element, sie muss hier ausdruecklich
   zurueckgenommen werden. Eine weggelassene Zeile naehme ihn nicht weg.
   ⚠ Die Regel bleibt ausserhalb der `(hover:hover)`-Klammer darueber — ohne
   Zeiger gibt es keinen Zeigerzustand, die Tastatur aber braucht ihn. */
.hnav .drop a:focus-visible,.drop .dg-k:focus-visible,.drop .dg-u a:focus-visible{
  background:var(--nav-beruehrt);color:var(--papier-text);
  outline:0;
}
/* Aktuelle Unterseite: heller Grund und gelber Balken links.
   Der Balken bleibt auch bei Berührung stehen. */
.drop a[aria-current="page"],.dg-u a[aria-current="page"]{background:var(--nav-aktiv)}
.drop a[aria-current="page"]::after{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:4px;background:var(--gelb);
}
@media(hover:hover){
  .drop a[aria-current="page"]:hover{background:var(--nav-beruehrt)}
}

#mob{display:none;position:fixed;inset:56px 0 0;background:var(--nacht);z-index:85;overflow-y:auto;padding:6px var(--rand) 60px}
#mob.open{display:block}
/* 23px ist die Groesse des Hauptinhalts dieses Bildschirms: das Mobilmenue
   deckt die Seite ganz ab, seine Punkte sind dort nicht Beiwerk, sondern das
   Einzige. Deshalb groesser als jeder Fliesstext und auf keiner Textleiter.
   Darunter zwei eigene Stufen: .sub 14px fuer die Unterpunkte, .mob-login
   14px fuer den Zugang. Drei Stufen, die sich unterscheiden sollen. */
#mob a{
  display:block;font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:700;
  font-size:23px;text-transform:uppercase;letter-spacing:-.02em;padding:15px 0;
  border-bottom:1px solid var(--linie);color:#fff;
}
/* Der Login ist ausgenommen: er bringt seinen eigenen Zustand mit. Sonst gewinnt
   diese Regel durch das `a` und färbt seine Schrift gelb — auf gelbem Grund. */
@media(hover:hover){#mob a:not(.sub):not(.mob-login):hover{color:var(--gelb)}}
/* Suchband: die Lupe im Balken öffnet es, auf Desktop wie auf dem Handy.
   Balken für Werkzeuge, Menü für Navigation — die Suche gehört nicht ins Menü.
   Als Überlagerung unter dem Kopf, damit sich beim Öffnen nichts verschiebt. */
.suchband{
  position:absolute;top:100%;left:0;right:0;z-index:70;
  background:var(--stein);border-bottom:3px solid var(--gelb);
  box-shadow:0 14px 32px rgba(0,0,0,.35);
}
.suchband[hidden]{display:none}
.such-in{
  max-width:var(--content-kopf);margin:0 auto;padding:14px var(--rand);
  display:flex;align-items:center;gap:12px;
}
.such-in .ic{width:20px;height:20px;color:var(--gelb);margin:0;flex:none}
/* **`outline:none` ist hier gefallen.** Es stand, weil das Feld randlos im
   dunklen Band sitzt und der Browserumriss ihm einen Kasten gegeben hätte,
   den die Bauform nicht will. Der Nebeneffekt war, dass das Feld bei
   Tastaturbedienung GAR NICHTS anzeigte — und die Grundregel
   `:focus-visible` konnte es nicht heilen, weil `.such-in input` mit (0,1,1)
   schwerer wiegt als `:focus-visible` mit (0,1,0). Eine Regel, die einen
   Zustand abschaltet, muss stärker sein als die, die ihn setzt; darum fiel
   das hier nicht auf. */
.such-in input{
  flex:1;min-width:0;background:none;border:0;color:#fff;
  font-family:var(--b);font-size:17px;padding:8px 0;
}
.such-in input::placeholder{color:var(--halb)}
/* **Der Kasten wird ersetzt, nicht entfernt.** `outline:none` steht hier
   wieder — aber der Ersatz steht in derselben Regel, nicht irgendwo.

   Warum ueberhaupt: Das Feld ist randlos und laeuft ueber die ganze Bandbreite.
   Ein Umriss zeichnet ihm einen Rahmen, den die Bauform nicht hat — er sah aus
   wie ein Drahtkasten um nichts. Der gelbe Strich ist im Projekt ohnehin das
   Zeichen dafuer, dass hier etwas anfaengt.

   **Nachgemessen am 28.08.2026 — und der Satz, der hier stand, war dreifach
   falsch.** Er lautete: «Gelb auf --nacht ergibt 14,62 … die Flaeche des
   Strichs ist 2px ueber die volle Feldbreite, also mehr als ein Umriss von
   2px um dieselbe Flaeche.»

   Der Grund ist nicht `--nacht`, sondern `--stein` — das Suchband setzt
   `background:var(--stein)`. Damit ist der Kontrast **13,57**, nicht 14,62.
   Beide liegen weit ueber der Schwelle von 3; die Zahl war trotzdem falsch,
   und eine falsche Zahl in einem Kommentar ueberlebt laenger als ein
   falscher Satz.

   **Und die Flaechenrechnung stand auf dem Kopf.** Gemessen bei 1440: Der
   Strich ist 2px hoch und 1242px breit, also 2484px². Ein Umriss von 2px um
   dasselbe Feld waere 5112px² — mehr als das Doppelte. Der Strich ist die
   SCHMALERE Anzeige, nicht die groessere. Er traegt trotzdem, weil er
   durchgehend und in voller Breite steht; aber der Satz behauptete das
   Gegenteil dessen, was zu messen war.

   **Offen und gemeldet:** 2px sind knapp. Das Feld steht heute nur im dunklen
   Band; kaeme dieselbe Bauform je auf hellen Grund, waere eine 2px-Linie
   unter einem randlosen Feld leicht zu uebersehen.

   **Warnung fuer den naechsten, der hier aufraeumt:** Wer den `box-shadow`
   wegnimmt, nimmt die einzige Anzeige mit — dann zeigt das Feld bei
   Tastaturbedienung wieder gar nichts. Das war der Zustand bis zum
   26.08.2026, und er fiel neun Monate lang niemandem auf. Die zwei Zeilen
   gehoeren zusammen. */
.such-in input:focus-visible{outline:none;box-shadow:0 2px 0 0 var(--gelb)}
/* 24px wie das Schliesskreuz im Hinweisbalken: dasselbe Zeichen, dieselbe
   Aufgabe. Vorher standen 26 und 24 nebeneinander — zwei Werte fuer eine
   Rolle, und die 26 war die groessere von zwei willkuerlichen Zahlen.

   **Das Kreuz ist seit dem 25.09.2026 ein Quadrat: 44x44 wie `.lb-knopf`
   samt dessen `inline-flex`-Mitte.**

   > ~~Die Beruehrflaeche haengt nicht mehr daran, sie steht seit dem
   > 20.08.2026 auf min-height.~~

   Der Satz galt, solange der Zustand ein blosser Farbwechsel war: Dann
   brauchte das Kreuz nur Hoehe, und die Breite durfte das Zeichen bestimmen.
   **Mit einer Flaeche darunter wird die Breite sichtbar** — 44 hoch und
   rund 33 breit ist ein Rechteck. Darum stehen Breite und Hoehe jetzt beide
   da, und das Polster ist weg: Es sass im Fluss und haette die Hoehe ein
   zweites Mal bestimmt.

   **44 ist keine ausgedachte Zahl, sondern die Beruehrflaeche des Hauses**,
   und das Kreuz trug sie unter 768px laengst (`min-height:44px`
   in der Sammelliste unter 768px). Neu ist nur, dass sie auf jeder Breite gilt — der Boden
   dort ist damit wertgleich und macht die Hoehe nicht mehr.

   ⚠ **Das Band wird auf dem Rechner rund 8px hoeher**: Die Zeile richtete
   sich bisher nach dem Feld (~36px), jetzt nach dem Kreuz. Auf der Seite
   verschiebt sich dadurch nichts — das Band liegt absolut unter dem Kopf.
   Das Feld gibt als `flex:1` die Breite ab, die das Kreuz gewinnt; seine
   eigenen Zeilen sind unangetastet. */
.such-zu{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:none;border:0;color:var(--halb);font-size:24px;line-height:1;
  cursor:pointer;
}
/* `outline:0` seit dem 25.09.2026: Das Kreuz hat einen Zeigerzustand, und der
   ist ab heute auch der Tastaturzustand. **Hier steht die gefaltete Form
   ohne Klammer**, weil der Zeigerzustand des Kreuzes nie eine hatte — er
   bleibt auf dem Touchscreen nicht kleben, weil das Band beim Antippen
   zugeht.

   **Die Flaeche ist am selben Tag dazugekommen, ein paar Stunden spaeter.**

   > ~~⚠ Gemeldet, nicht stillschweigend gebaut: Der Zustand ist ein
   > Farbwechsel von `--halb` auf Weiss und keine Flaeche. Ohne Ring ist die
   > Fokusanzeige hier schwaecher als ueberall sonst.~~

   Die Meldung ist beantwortet, und zwar mit der Bauform, die schon da war:
   Die drei Deklarationen sind **wortgleich `.filt-weg:hover`**
   — dem anderen gelben Kreuz des Hauses. Sie stehen nicht als
   zweite Regel daneben, sondern in der Regel, die es hier schon gab — es
   ist ein Zustand mehr am selben Waehlerpaar und keine Zeile Farbe mehr im
   Blatt. `.lb-knopf` fuehrt dieselben drei und `border-color`
   dazu; die faellt hier weg, weil das Kreuz `border:0` traegt und es keine
   Kante zu faerben gibt.

   > ~~⚠ **`.hw-zu` (:2360) macht es anders, und das bleibt so.** Kein Gelb,
   > nur `--papier-halb` auf `--papier-text`: Es sitzt auf hellem Papier, wo
   > eine gelbe Flaeche ein Angebot verspraeche. Hier ist der Grund `--stein`.
   > «Wie die uebrigen» meint darum die beiden auf dunklem Grund, nicht alle
   > drei — die Kreuze des Hauses teilen sich keine Regel und sind unter
   > sich nicht gleich.~~

   **Galt bis zum 25.09.2026; Didi hat es umgedreht: eine Form fuer alle.**
   `.hw-zu` steht seit heute **im Waehler dieser Regel** und nicht als vierte
   Abschrift daneben — zwei Kreuze, ein Zustand, eine Deklarationsliste.

   **Der Grund unter dem Balken entscheidet nicht mit.** Die gelbe Flaeche ist
   dieselbe, ob sie auf `--stein` liegt oder auf `--papier-flaeche`; was auf
   ihr steht, richtet sich nach IHR. Darum `--dun` und nicht `--papier-text`
   — dasselbe Token, das im Hinweisbalken das gelbe Etikett `.hw-tag` traegt.
   (Die beiden Werte sind heute gleich, `#0B0B0A`. **Gleicher Wert ist kein
   Grund, den falschen Namen zu nehmen**: `--papier-text` ist die Schrift auf
   Papier, und Papier ist hier nicht mehr der Grund.)

   ⚠ **Zwei von vier, und die beiden anderen bleiben draussen — nicht aus
   Bequemlichkeit.** `.filt-weg` und `.lb-knopf` fuehren ihren Zustand in
   `@media(hover:hover)`; **eine Regel kann nicht gleichzeitig in der Klammer
   und ausserhalb stehen.** Sie herauszuholen waere ein Entscheid ueber zwei
   Ansichten, nach denen niemand gefragt hat, und `.lb-knopf` fuehrt
   ausserdem `border-color:var(--gelb)`, weil es als einziges eine Kante hat.
   Was Didi bestellt hat — gleiches Aussehen —, steht damit an vier Waehlern
   in drei Regeln; was sich zusammenlegen liess, ist zusammengelegt.

   ⚠⚠ **Die Klammer fehlt weiterhin mit Absicht, und hier ist ihr
   Fehlen das Bessere.** Bei `.filt-weg` und `.lb-knopf` steht der Zustand in
   `@media(hover:hover)`; auf einem Geraet ohne Zeiger greift sie nicht, und
   die Tastatur bekommt dort den Ring der Grundregel (`:focus-visible`) statt der
   Flaeche. Ohne Klammer bekommt sie die Flaeche auf jedem Geraet.
   **Wogegen die Klammer sonst schuetzt, droht hier nicht:** Sie schuetzt
   davor, dass `outline:0` den Ring wegnimmt, ohne dass etwas an seine Stelle
   tritt — und an seine Stelle tritt eine Flaeche, die keinen Zeiger
   braucht. Wer die Klammer nachtraegt, nimmt sie genau den Geraeten weg, die
   sonst nichts haben. **Das gilt seit dem 25.09.2026 fuer beide Kreuze
   dieser Regel.** */
.such-zu:hover,.such-zu:focus-visible,
.hw-zu:hover,.hw-zu:focus-visible{background:var(--gelb);color:var(--dun);outline:0}
/* Das eingebaute Löschkreuz von input[type=search] entfällt: es ist
   nicht gestaltbar, Firefox zeigt es gar nicht, und neben unserem
   Schliesskreuz standen zwei gleich aussehende Zeichen mit zwei
   Bedeutungen. Unseres leert das Feld beim Schliessen mit. */
.such-in input::-webkit-search-cancel-button{display:none}
/* Login steht am Menüende, nicht über der Navigation — es ist eine seltene
   Handlung, die Rubriken sind der Zweck des Menüs. Als Umriss statt Vollfläche,
   damit die gelbe Fläche der Marke vorbehalten bleibt.
   Der #mob-Vorsatz ist nötig: sonst gewinnt `#mob a` und setzt 23px Schrift. */
#mob .mob-login{
  display:block;text-align:center;background:none;color:var(--gelb);
  border:1.5px solid rgba(252,222,0,.55);
  font-family:var(--b);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.2;padding:14px;margin-top:26px;
}
#mob .mob-login:active,#mob .mob-login:focus-visible{background:var(--gelb);color:var(--dun);outline:0}
@media(hover:hover){#mob .mob-login:hover{background:var(--gelb);color:var(--dun)}}
/* Auf Mobile bleibt im Balken nur das Menü */
/* Nur das Personensymbol wandert ins Menü — die Lupe bleibt im Balken */
@media(max-width:759px){.gb-r .konto{display:none}}
/* Die Unterebene im Handymenü: dieselbe Sprache wie das Aufklappmenü am Desktop,
   aber als durchgehendes Band in der Menüstruktur — keine schwebende Karte.
   Etwas leichter gesetzt als die Hauptpunkte, damit die Hierarchie trägt. */
#mob a.sub{
  position:relative;background:var(--nav-flaeche);color:var(--papier-text);
  font-family:var(--d);font-variation-settings:'wdth' 102;font-weight:var(--fw-semi);font-size:14px;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.3;
  padding:15px 18px 15px 22px;border-bottom:0;
}
/* Trenner nur zwischen zwei Untereinträgen — der erste einer Gruppe bekommt keinen,
   der letzte auch nicht, weil danach wieder ein Hauptpunkt folgt. */
#mob a.sub+a.sub::before{
  content:'';position:absolute;left:18px;right:18px;top:0;height:1px;background:var(--nav-linie);
}
/* Aktuelle Unterseite: heller Grund und gelber Balken links — wie am Desktop */
#mob a.sub[aria-current="page"]{background:var(--nav-aktiv)}
#mob a.sub[aria-current="page"]::after{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:4px;background:var(--gelb);
}
/* Auf dem Touchscreen gibt es keinen Zeiger — die Rückmeldung kommt beim Antippen
   und bleibt nicht kleben. Tastatur bekommt einen eigenen Zustand. */
#mob a.sub:active{background:var(--nav-beruehrt)}
/* ~~`outline:2px solid var(--dun);outline-offset:-2px`~~ ist am 25.09.2026
   entfallen — dieselbe Entscheidung wie beim Aufklappmenue am Computer. */
#mob a.sub:focus-visible{
  background:var(--nav-beruehrt);outline:0;
}
@media(hover:hover){#mob a.sub:hover{background:var(--nav-beruehrt);color:var(--papier-text)}}
@media(min-width:1000px){.hnav{display:flex}.schwarzbalken{display:block}.burg{display:none}}

/* ── 30 Hinweisbalken ─────────────────────────────────────── */

.hinweis{background:var(--papier-flaeche);color:var(--papier-text);position:relative;overflow:hidden}
/* Ein Etikett pro Stufe. Mehrere Meldungen derselben Stufe stehen rechts
   davon untereinander, höchstens zwei. Verschiedene Stufen ergeben zwei Blöcke. */
.hw-zeile+.hw-zeile{border-top:1px solid var(--papier-linie)}
.hw-in{
  position:relative;max-width:var(--content-lg);margin:0 auto;padding:0 var(--rand) 0 0;
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
}
.hw-mld{flex:1;min-width:0;display:grid}
/* `position:relative` ist der Bezugspunkt fuer den roten Balken links.
   Im Handyblock stand er schon; seit dem 24.08.2026 gilt der Balken auf allen
   Breiten, also braucht ihn auch die Grundfassung. Das Polster von 20px links
   war von Anfang an fuer ihn da — 4px Balken und 16 Abstand. */
.hw-eintrag{display:flex;align-items:center;gap:20px;padding:12px 0 12px 20px;
  position:relative}
/* **Der Trennstrich beginnt an der rechten Kante des roten Blocks.**
   Entschieden am 31.08.2026, und das Theme ist hier bewusst genauer als der
   Prototyp -- **nicht weil der Prototyp einen Fehler hat, sondern weil diese
   Stelle dort nie entschieden wurde.** Wer beim naechsten Abgleich die
   Abweichung findet, soll sie hier begruendet finden und nicht zurueckziehen.

   **Der Grund:** Der Strich trennt zwei Meldungen, also gehoert er ueber die
   Breite, die die Meldungen einnehmen. Der 4px-Balken links gehoert nicht
   dazu -- er markiert die Dringlichkeit der ganzen Zeile, nicht die Grenze
   zwischen zweien. Und das Kreuz rechts gehoert erst recht nicht dazu: Es
   schliesst den ganzen Balken, nicht eine Meldung.

   **Gemessen am 31.08.2026 bei 2560**, bevor etwas geaendert wurde:

     Etikett endet          704
     dringend-Balken        704 – 708
     Trennstrich beginnt    704      <- 4px im Rot
     Trennstrich endet     1982
     Kreuz beginnt         2002      <- 20px Luft, das Ende stimmte schon

   **Der Ueberstand ist ein fester Wert und kein Anteil.** Der Balken ist 4px
   breit, unabhaengig vom Fenster; die Korrektur ist darum ein fester Versatz
   und wandert nicht mit der Breite. Waere es eine Prozentbreite gewesen,
   haette der Fehler bei jedem Fenster anders ausgesehen -- und die Korrektur
   muesste am Behaelter ansetzen statt am Strich.

   **Als `::after` und nicht als `border-top`:** Ein Rand folgt immer der
   ganzen Kante. Nur ein eigenes Element kann an einer anderen Stelle
   beginnen als die Box, an der es haengt. `::before` ist der Dringend-Balken;
   `::after` war frei. */
/* **Dieser durchsichtige Rand ist kein Rest. Wer ihn entfernt, macht den
   Balken 1px flacher.**

   Er haelt den Platz, den frueher der sichtbare Rand hielt; gezeichnet wird
   der Strich seit dem 31.08.2026 vom `::after` darunter, weil nur ein eigenes
   Element an einer anderen Stelle beginnen kann als seine Box. **Ein absolut
   gesetztes Element nimmt aber keinen Platz ein** -- der erste Versuch
   ersetzte den Rand ganz, und der Balken schrumpfte:

     mit Rand      167 / 94 / 94     bei 390 / 1440 / 2560
     ohne Rand     166 / 93 / 93

   > **Eine Korrektur, die die Hoehe aendert, hat mehr getan als sie sollte.**

   Beide Teile gehoeren zusammen: der Rand fuer den Platz, das `::after` fuer
   die Farbe und den Versatz. Wer einen davon streicht, bekommt entweder eine
   flachere Zeile oder einen Strich, der wieder durchs Rot laeuft. */
.hw-eintrag+.hw-eintrag{position:relative;border-top:1px solid transparent}
.hw-eintrag+.hw-eintrag::after{content:'';position:absolute;left:0;right:0;top:-1px;
  height:1px;background:var(--papier-linie)}
/* Nur wenn der Balken da ist, ruecken wir ein: Ohne ihn ist die rechte Kante
   des Roten das Etikett, und dort beginnt der Strich ohnehin. */
.hw-zeile.dringend .hw-eintrag+.hw-eintrag::after{left:4px}
.hw-tag{
  display:inline-flex;align-items:center;gap:8px;background:var(--gelb);color:var(--dun);
  font-family:var(--d);font-variation-settings:'wdth' 100;font-weight:800;font-size:var(--tx-etikett);
  letter-spacing:.18em;text-transform:uppercase;padding:13px 18px 13px var(--rand);flex:none;
  position:relative;
  /* Feste Breite, damit gelbe und rote Felder gleich enden */
  box-sizing:content-box;width:150px;
}
/* Die Fläche läuft über das Raster hinaus bis an den Bildschirmrand,
   das Etikett bleibt auf der Rasterlinie und fluchtet mit der Navigation */
.hw-tag::before{content:'';position:absolute;top:0;bottom:0;right:100%;width:100vw;background:inherit}
.puls{width:8px;height:8px;border-radius:50%;background:var(--dun);display:block;animation:puls 1.6s ease-in-out infinite;flex:none}
@keyframes puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.hw-txt{font-size:var(--tx-klein);line-height:1.4;flex:1;min-width:220px;align-self:center}
/* Titel, freiwilliger Kurztext und Volltext stehen getrennt, damit der
   Handybildschirm nur den Titel zeigen kann. Ab Tablet fliessen sie wieder zu
   einem Satz zusammen: der Knopf ist dort kein Bedienelement, sondern nur der
   fette Anfang der Zeile. Deshalb display:inline und keine eigene Fläche. */
/* **`font:inherit` und sonst nichts — die eigene Groesse ist weg.**

   Sie stand hier vom 31.08. bis zum 01.09.2026 als `font-size:var(--tx-klein)`
   und war eine Zutat fuer das `<summary>`: Das stand neben `.hw-txt` statt
   darin und erbte darum die falsche Groesse.

   **Seit der Rueckbau zum `<button>` IM Absatz erfolgt ist, erbt er wieder
   richtig** -- und die Zutat wurde zum Fehler. Gemessen am 01.09. gegen den
   Prototyp: bei 390 traegt der Kopf dort 17px, hier 14. Unter 767 setzt
   `.hw-txt{font-size:inherit}` die Groesse auf 17 zurueck, und die feste
   Angabe hier hielt dagegen.

   > **Eine Korrektur, deren Anlass verschwunden ist, wird zur Abweichung.**
   > Sie faellt niemandem auf, weil sie einmal richtig war. */
.hw-kopf{display:inline;font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:left}
.hw-kopf b{font-weight:700}
/* Der Gedankenstrich verbindet Titel und Text nur, solange beide eine Zeile
   bilden — auf dem Handy stehen sie untereinander und er entfällt. */
.hw-rest::before{content:' — '}
.hw-txt b{font-weight:700}
/* Die gelbe Linie ist eine Unterstreichung, kein Rahmen: als Rahmen sitzt sie am
   unteren Kastenrand und rutscht mit jedem Polster weiter vom Text weg — auf dem
   Handy waren es 17px. Als Unterstreichung folgt sie den Buchstaben.
   Der Zeigerzustand wächst über box-shadow statt über Polster, sonst springt
   die Geometrie beim Darüberfahren. */
.hw-btn{
  font-family:var(--d);font-variation-settings:'wdth' 102;font-weight:800;font-size:var(--tx-klein);
  letter-spacing:.04em;color:var(--gold-flaeche);
  text-decoration:underline;text-decoration-color:var(--gelb);
  text-decoration-thickness:2px;text-underline-offset:4px;
  flex:none;align-self:center;
}
/* Nur wo es einen Zeiger gibt — sonst bleibt die Füllung auf dem Touchscreen
   nach dem Antippen stehen. */
@media(hover:hover){
  .hw-btn:hover{background:var(--gelb);color:var(--dun);box-shadow:0 0 0 5px var(--gelb)}
}
/* ⚠⚠ **Der `box-shadow` bleibt und ist keine Ringhaelfte — 25.09.2026.**
   Er traegt dieselbe Farbe wie `background` und ist die um 5px verbreiterte
   FUELLUNG; der Kommentar oben sagt, warum sie nicht aus Polster kommt. Wer
   beim Aufraeumen des Doppelrings alle `box-shadow` im Fokuszustand
   wegstreicht, nimmt hier die Fuellung mit und laesst anderswo den halben
   Ring stehen. **Zwei Quellen heisst nicht: jede Quelle.**
   `outline:0` nimmt den Ring der Grundregel zurueck — die Fuellung ist die
   Anzeige. */
.hw-btn:focus-visible{background:var(--gelb);color:var(--dun);box-shadow:0 0 0 5px var(--gelb);outline:0}
/* **44x44 wie `.such-zu` und `.lb-knopf` — 25.09.2026.** Didi hat entschieden:
   eine Form fuer alle Kreuze des Hauses. Was beim Darueberfahren und beim
   Tastaturfokus erscheint, ist eine QUADRATISCHE Flaeche — also muss der
   Kasten quadratisch sein, und zwar im Ruhezustand schon. Breite und Hoehe
   stehen darum beide da, die Mitte kommt aus `inline-flex`.

   > ~~`.hw-zu{background:none;border:0;color:var(--papier-halb);font-size:24px;line-height:1;cursor:pointer;padding:0 4px;flex:none;align-self:center;margin-left:20px}`~~
   > ~~`@media(hover:hover){.hw-zu:hover,.hw-zu:focus-visible{color:var(--papier-text);outline:0}}`~~

   **Das Polster ist weg**, aus demselben Grund wie bei `.such-zu`: Neben einer
   gesetzten Breite bestimmt es nichts mehr, und eine Angabe, die nichts
   bestimmt, liest sich spaeter wie eine, die etwas bestimmt.

   **44 ist keine ausgedachte Zahl, sondern die Beruehrflaeche des Hauses.**
   Das Kreuz trug sie unter 768px laengst als `min-height`; neu ist, dass sie
   auf jeder Breite gilt — und dass sie auch fuer die Breite gilt.

   ⚠ **Der gelbe Zustand steht nicht hier**, sondern oben bei
   `.such-zu:hover,.such-zu:focus-visible`: eine Regel, zwei Kreuze. Dort steht
   auch, warum sie ausserhalb von `@media(hover:hover)` liegt und warum die
   beiden Kreuze auf dunklem Grund nicht mitkonnten. */
.hw-zu{
  flex:none;align-self:center;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:none;border:0;color:var(--papier-halb);font-size:24px;line-height:1;
  cursor:pointer;margin-left:20px;
}

/* Zweiter Status: nur das Feld wechselt die Farbe, Breite und Text bleiben */
.hw-zeile.dringend .hw-tag{background:var(--rot);color:#fff}
.hw-zeile.dringend .puls{background:#fff}
.hw-zeile.dringend .hw-btn{color:var(--rot);text-decoration-color:var(--rot)}
/* **Der rote Balken links gilt seit dem 24.08.2026 auf allen Breiten.** Er
   stand bis dahin nur im Block unter 768px — auf dem Desktop trug die
   dringende Meldung also drei der vier Farbmerkmale und das vierte nicht.
   Ein Merkmal, das die Haelfte der Besucher nie sieht, ist kein Merkmal. */
.hw-zeile.dringend .hw-eintrag::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rot)}
@media(hover:hover){
  .hw-zeile.dringend .hw-btn:hover{background:var(--rot);color:#fff;box-shadow:0 0 0 5px var(--rot)}
}
/* **Der Traeger ist `.hw-zeile`, nicht `.hinweis` - gemessen am 26.08.2026.**
   Die Regel stand nur auf `.hinweis.dringend` und feuerte darum nie: Das
   Skript setzt `dringend` eine Ebene tiefer,
   `hb.querySelector('.hw-zeile').classList.toggle('dringend', …)`.

   **Was stattdessen geschah, ist gemessen und nicht gerechnet.** Im dringenden
   Zustand bekam der Knopf beim Tastaturfokus die GELBE Fuellung aus der
   Grundfassung und behielt die ROTE Schrift aus `.hw-zeile.dringend .hw-btn`
   - rot auf gelb, **Kontrast 4,26 und damit unter 4,5.** Der Fokusumriss
   selbst trug mit 17,28; die Luecke war nicht die Sichtbarkeit des Fokus,
   sondern die Lesbarkeit der Schrift darin.

   **Nachher gemessen, nicht gerechnet: 5,74.** Die Regel feuert, der Knopf
   traegt weisse Schrift auf seiner roten Fuellung. Unter 768px gilt die
   flache Fassung — rote Schrift auf `--papier-flaeche`, **5,03**. Beide
   ueber 4,5; der Bau ist damit fertig.

   ~~«Der schwarze Umriss auf rotem Grund misst 3,43 - er traegt ueber der
   Schwelle von 3, ist aber der schwaechste Wert der ganzen
   Tastaturfuehrung.»~~ — galt bis zum 25.09.2026. **Der Umriss ist weg**, und
   damit ist der schwaechste Wert der Tastaturfuehrung kein Thema mehr: Was
   den Fokus hier anzeigt, ist die rote Fuellung selbst.

   Der rote Ring nach aussen misst 5,03 gegen den Grund dahinter — er ist
   nicht der Ring, sondern die verbreiterte Fuellung, und bleibt. Rot ist die
   einzige Flaeche der Website, die es im Ruhezustand gar nicht gibt: Sie
   entsteht erst durch den Fokus. Darum kannte die Farbenreihe von B1 sie
   nicht — sie ist auf keiner Ansicht abzaehlbar, solange niemand tabbt. */
.hw-zeile.dringend .hw-btn:focus-visible{background:var(--rot);color:#fff;box-shadow:0 0 0 5px var(--rot);outline:0}

/* Ohne den schwarzen Streifen über dem Balken verschmilzt Gelb an Gelb.
   Eine schwarze Kante setzt den Hinweis ab, die Statusfarbe wandert ins Etikett.
   Die Schwelle ist dieselbe wie bei der Navigation — darunter gibt es den
   Streifen nicht, und das Wappen ragt in den Bereich des Etiketts. */
@media(max-width:999px){
  .hinweis{border-top:4px solid var(--dun)}
  /* Rechts Platz für das Schliesskreuz — es sitzt absolut und überlagerte
     sonst die erste Textzeile.

     > ~~Kreuz 22px plus 18px Rand plus etwas Luft.~~

     Galt bis zum 25.09.2026, solange das Kreuz so breit war wie sein Zeichen.
     **Es ist jetzt 44px breit**, und der Vorrat muss mitwachsen: Sonst laege
     die gelbe Flaeche des Zeigerzustands auf der ersten Textzeile.

     ⚠ **Der Vorrat ist gerechnet und nicht gesetzt.** Das Kreuz steht an
     `--rand`, und `--rand` springt bei 800px von 18 auf 36. Eine feste 44
     stimmte darum nur unterhalb von 800; `calc()` stimmt auf beiden Stufen
     und bleibt richtig, wenn die Zahl dort je wieder wandert. */
  .hw-in{padding:0 calc(var(--rand) + 44px) 0 0;gap:0}
  .hw-tag{background:none;color:var(--gold-flaeche);flex:1 1 100%;padding:12px var(--rand) 0;width:auto}
  .hw-eintrag{flex-wrap:wrap;gap:0;padding:0}
  .hw-eintrag+.hw-eintrag{margin-top:12px;padding-top:12px}
  /* **Die rote Oberkante gab es neun Monate lang nicht — gemessen am
     26.08.2026.** Die Regel stand auf `.hinweis.dringend`, aber `dringend`
     sitzt am Kind: `hb.querySelector('.hw-zeile').classList.toggle(…)`.
     Gemessen bei 360 und 900: Oberkante 4px `rgb(11,11,10)` — schwarz, im
     dringenden Zustand wie im ruhigen. Es gab keine Ersatzregel; das vierte
     Farbmerkmal fehlte schlicht.

     **Der Zustand haengt am Kind, die Kante am Elternteil** — darum `:has()`
     und nicht die Klasse selbst. Dieselbe Bauart wie `.hi:has([aria-expanded
     ="true"])::before`. */
  .hinweis:has(.hw-zeile.dringend){border-top-color:var(--rot)}
  .hw-zeile.dringend .hw-tag{background:none;color:var(--rot)}
  .hw-tag::before{display:none}
  .puls{background:var(--papier-text)}
  .hw-zeile.dringend .puls{background:var(--rot)}
  .hw-txt{flex:1 1 auto;min-width:0;font-size:var(--tx-klein);padding:8px 0 0 var(--rand)}
  /* Fluchtet mit der Meldung darüber, die dasselbe Polster hat */
  .hw-btn{flex:none;align-self:center;margin:0 var(--rand) 0 var(--rand)}
  /* Das Schliesskreuz behaelt seine Farbe auch im dringenden Zustand — es
     schliesst, es meldet nicht. Bis zum 26.08.2026 stand das als eigene
     Regel `.hinweis.dringend .hw-zu` daneben. Die war **doppelt folgenlos**:
     am falschen Traeger, und wertgleich mit der Zeile darueber. Eine Regel,
     die nichts aendert, laesst sich nicht als kaputt erkennen. */
  .hw-zu{position:absolute;right:var(--rand);top:20px;margin:0;color:var(--papier-halb)}
}

/* Bis 767px wird jede Meldung zu einer Zeile: Titel, darunter der freiwillige
   Kurztext. Nichts wird abgeschnitten — der Kurztext ist ein eigenes Feld, kein
   gekürzter Volltext; fehlt er, steht nur der Titel. Antippen zeigt den ganzen
   Text und den Verweis. Zwei Meldungen brauchen so 168 statt 264 Pixel.
   Auch eine dringende Meldung wird gefaltet — sie unterscheidet sich in der
   Farbe, nicht in der Bauform. */
@media(max-width:767px){
  .hw-eintrag{display:block;position:relative;padding:0}
  .hw-txt{font-size:inherit;line-height:inherit;min-width:0;padding:0}
  /* Der Boden gehoert der Schaltflaeche, das Wachstum dem Text.
     Vorher war die Hoehe vollstaendig aus dem Text gerechnet: Zeilenhoehe mal
     Zeilen plus 12 oben und 12 unten — eine Zeile ergab 42,2 px, zwei ergaben
     64,1. Der Fehler ist nicht, dass 42,2 knapp danebenliegt; der Fehler ist,
     dass es ueberhaupt eine Funktion des Textes ist. Eine Beruehrflaeche, die
     sich beim Aendern einer Meldung verstellt, ist keine Flaeche, sondern ein
     Nebenprodukt.
     min-height gibt den Boden, der Text darf darueber hinauswachsen — dass
     eine laengere Meldung hoeher wird, ist richtig und schadet nie. */
  .hw-kopf{display:block;width:100%;cursor:pointer;padding:12px 36px 12px var(--rand);
    min-height:44px;box-sizing:border-box}
  /* Schmal steht im geschlossenen Zustand der Titel allein — der Kurztext
     darunter ist am 05.09.2026 weggefallen. */
  .hw-kopf b{display:block;font-family:var(--b);font-size:var(--tx-klein);line-height:1.3;color:var(--papier-text)}
  /* Winkel aus zwei Kanten eines gedrehten Quadrats, keine Symbolschrift */
  .hw-kopf::after{
    content:'';position:absolute;right:calc(var(--rand) - 4px);top:22px;width:8px;height:8px;
    border-right:2px solid var(--papier-halb);border-bottom:2px solid var(--papier-halb);
    transform:rotate(-45deg);transition:transform 180ms ease;
  }
  .hw-kopf[aria-expanded="true"]::after{transform:rotate(45deg);top:20px}
  /* ⚠ **Dieser Klappkopf BEHAELT seinen Ring — 25.09.2026.** Didi zaehlt
     Klappzeilen zu den Elementen mit Zeigerflaeche, deren Fokus der
     Zeigerzustand ist. Dieser hier hat keinen: Es gibt kein `.hw-kopf:hover`
     im Blatt. **Ohne Ring haette er gar keine Anzeige** — und «derselbe
     Zustand wie Hover» ist keine Anweisung, wenn es keinen gibt.
     Der Umriss liegt innen (`-2px`) und nicht aussen wie in der Grundregel:
     Der Kopf laeuft ueber die volle Balkenbreite, aussen wuerde er
     abgeschnitten. Die Farbe kommt jetzt aus `--akzent`, das der
     Hinweisbalken oben bei der Grundregel als helle Flaeche anmeldet. */
  .hw-kopf:focus-visible{outline:2px solid var(--akzent);outline-offset:-2px}
  .hw-rest,.hw-btn{display:none}
  .hw-rest::before{content:none}
  /* Der Kopf wird ueberflogen, der Rest wird gelesen — wer aufklappt, hat
     sich fuers Lesen entschieden und bekommt die Lesegroesse des Projekts.
     Der Titel bleibt bei --tx-klein und damit einzeilig; auf 17px stiege er
     auf zwei Zeilen und der Balken von 247 auf 286px. So kostet es 9px:
     247 auf 256. */
  /* **`.offen` bleibt `.offen` — und der Balken bleibt ein `<div>` mit Knopf.**

   Vom 31.08. bis 01.09.2026 stand hier `<details>` und `[open]`. Der Umbau
   hatte eine Begruendung, die fuer sich stimmte -- Tastatur und
   Vorleseprogramm kommen mitgeliefert, und 43 Klappbloecke des Prototyps
   sind `<details class="ressort">`.

   **Nur ist dieser Block keiner von den 43.** Ein `<details>` ist auf JEDER
   Breite zu; diese Meldung klappt nur unter 767 px. Bei 2560 stand der Text
   damit hinter einem Klick, den der Prototyp dort nicht kennt -- gemeldet
   von Didi, gesehen an seinem Bildschirm, nicht von einem Werkzeug.

   > **Ein Bauteil, das anderswo richtig ist, wird dadurch hier nicht
   > richtig. Der Prototyp entscheidet, nicht die Hausform.**

   Vier Regeln stehen wieder auf `.offen` und `aria-expanded`. Der Pfeil
   dreht ueber `aria-expanded`, weil ein `<button>` es traegt -- ein
   `<summary>` konnte das nicht, und genau daran war beim ersten Umbau die
   vierte Regel aufgefallen. */
  .hw-eintrag.offen .hw-rest{display:block;padding:0 var(--rand) 6px;font-size:var(--tx);line-height:1.45}
  .hw-eintrag.offen .hw-btn{display:inline-flex;margin:0 var(--rand) 13px;padding-block:11px}
  /* **Dringend faltet sich wie jede Meldung — nur die Farbe unterscheidet.**
     Bis zum 24.08.2026 stand eine dringende Meldung offen, ohne Pfeil und mit
     `cursor:default`. Eine dringende Meldung ist nicht wichtiger, weil sie mehr
     Platz braucht, sondern weil sie anders aussieht. Wer sie oeffnet, bekommt
     dasselbe wie beim Hinweis.

     **Verworfen, mit Grund — damit es spaeter nicht als Versehen gelesen
     wird:** Es gab ein Argument fuer die Ausnahme. Bei einer Spielabsage soll
     niemand erst tippen muessen, um zu erfahren, dass der Platz gesperrt ist.
     Der Kurztext traegt das — «Platz wegen Regen gesperrt» passt in eine Zeile.
     **Truege er es nicht mehr, waere die Ausnahme wieder berechtigt.**

     Was bleibt: rotes Etikett, roter Punkt, roter Titel, roter Balken links.
     Genau das, was der Grundsatz oben sagt — nur das Feld wechselt die Farbe,
     Breite und Text bleiben.

     Die Stufe kann am ganzen Balken oder an einer einzelnen Zeile hängen —
     zwei Stufen ergeben zwei Zeilen. Beide Formen wie im Rest des Abschnitts. */
  .hw-zeile.dringend .hw-kopf b{color:var(--rot)}
}
@media(prefers-reduced-motion:reduce){.hw-kopf::after{transition:none}}

/* Das Minimum von 440px ist höher als ein quer gehaltenes Handy (390px) —
   der Slogan wurde dort angeschnitten. min() deckelt gegen die Fensterhöhe;
   ab 565px Fensterhöhe ist 78vh grösser als der geltende Wert, dort ändert
   sich also nichts. */
.hero{position:relative;min-height:min(clamp(440px,72vh,700px),78vh);display:flex;align-items:flex-end;overflow:hidden}
.hero .f{position:absolute;inset:0}
.hero::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  /* Drei Lagen: eine gleichmässige Abdunklung von 20 Prozent über den beiden
     gerichteten Verläufen. Die Reihenfolge ist wichtig — die flache Lage liegt
     obenauf, links unten bleibt dadurch die dunkelste Stelle. Nicht wegen der
     Lesbarkeit (der Slogan liegt ohnehin bei 14 bis 18:1), sondern damit das
     Gelb der Trikots das Bild nicht überstrahlt. */
  background:
    linear-gradient(rgba(11,11,10,.20),rgba(11,11,10,.20)),
    linear-gradient(to right,rgba(11,11,10,.82) 0%,rgba(11,11,10,.5) 38%,rgba(11,11,10,.05) 68%,transparent 100%),
    linear-gradient(to top,rgba(11,11,10,.92) 0%,rgba(11,11,10,.5) 32%,rgba(11,11,10,.12) 68%,rgba(11,11,10,.35) 100%);
}

.h-inh{position:relative;z-index:4;width:100%;max-width:var(--content-lg);margin:0 auto;padding:0 var(--rand) clamp(48px,7vw,86px)}
.h-eye{font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);letter-spacing:.28em;text-transform:uppercase;color:#fff;margin-bottom:20px}
.h-slogan{
  font-family:var(--d);font-variation-settings:'wdth' 108;font-weight:900;
  /* Dreimal zurückgenommen: zehn, fünf und nochmals fünf Prozent — aus
     44/9.4/124 wurde 35.7/7.64/100.7, zusammen 18.8 Prozent weniger. Weil alle
     drei Werte im selben Verhältnis sinken, wechselt die Regel weiterhin bei
     rund 1319px Fensterbreite vom Wachsen auf den Höchstwert. */
  font-size:clamp(35.7px,7.64vw,100.7px);line-height:.9;letter-spacing:-.04em;color:#fff;
}
.mark{position:relative;display:inline-block;color:var(--dun);padding:0 .1em}
.mark::before{content:'';position:absolute;left:0;right:0;top:.1em;bottom:.08em;background:var(--gelb);z-index:-1;transform:skewX(-4deg)}
@media(max-width:700px){
  .hero{min-height:clamp(400px,64vh,560px)}
  .hero::after{background:linear-gradient(to top,rgba(11,11,10,.97) 0%,rgba(11,11,10,.86) 22%,rgba(11,11,10,.4) 58%,rgba(11,11,10,.4) 100%)}
  .h-inh{padding-bottom:38px}
}

/* ── 50 Matchday ──────────────────────────────────────────── */

.tafel{background:var(--tafel);color:#fff;border-top:3px solid var(--gelb);border-bottom:3px solid var(--gelb)}
.tafel-in{max-width:var(--content-lg);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr)}
.zelle{padding:24px var(--rand)}
.zelle+.zelle{border-top:3px solid var(--gelb)}
/* `.tafel .eye{color:var(--gelb)}` stand hier bis zum 29.08.2026 und hat
   nie etwas geaendert: auf dunklen Seiten gibt die Grundregel ohnehin
   Gelb, auf hellen verlor sie gegen `.papier .eye` bei gleichem Gewicht
   und spaeterem Standort. Der Fall, den sie meinte, wird jetzt von
   `.papier .tafel{--akzent:var(--gelb)}` getragen. */
.zk{display:flex;align-items:center;gap:13px;margin-top:15px}
/* **Das Wappen steht vor dem Namen, nicht statt seiner.** Ein Logo allein
   ist auf einer Anzeigetafel unlesbar — wer den Gegner nicht auswendig kennt,
   sieht ein Bild und keine Auskunft. Der Name traegt, das Wappen hilft.

   **Wohin es gehoert, ist eine Grenze und keine Vorliebe: dorthin, wo eine
   Begegnung im Mittelpunkt steht.** Das ist im Telegrammkopf der Fall und auf
   der Spielseite; auf der Startseite nicht — dort ist die Anzeigetafel eines
   von acht Bauteilen, und ihre Kachel traegt schon Augenzeile, Teamnamen,
   Rollen, Resultat, Torschuetzen, Faktenzeile und einen Verweis.

   **Nicht im Spielplan und nicht in der Resultatliste** — dort stuenden 24
   Wappen untereinander, und eine Liste, in der jede Zeile ein Bild fuehrt,
   ist ein Bilderband und keine Liste mehr. **Vier Schilde in zwei Kacheln
   sind dasselbe im Kleinen** — darum sind sie am 26.08.2026 wieder gefallen.

   **Die alte Zahl war doppelt falsch.** Hier stand «sechs Stellen: vier auf
   der Anzeigetafel, zwei im Telegrammkopf». Gebaut waren aber **drei** auf
   der Anzeigetafel, nicht vier — die Kachel «Naechstes Spiel» liess das
   zweite bewusst weg, weil «Gegner offen» kein Klub ist. Der Kommentar hat
   die eigene Ausnahme mitgezaehlt und ist damit ueber Monate an einer Zahl
   erkennbar geblieben, die nie stimmte. **Wer eine Zahl in einen Kommentar
   schreibt, muss sie zaehlen und nicht ableiten.**

   **Gemessen beim Wegfall, bei 390 und 1440:** Die Kachel wird 33 bzw. 24px
   niedriger, die `.zk`-Zeile 33px. Und der Versatz zwischen «FC Herrliberg 1»
   und «Gegner offen» — 17px, weil das eine Feld einen 26px-Block plus 7px
   Abstand trug und das andere nicht — **geht auf 0.** Der Wegfall raeumt
   eine Schieflage mit weg, die die Ausnahme erzeugt hatte.

   **Der Platzhalter ist der Normalfall, nicht die Ausnahme.** Der FVRZ fuehrt
   Klubs, von denen der Verein kein Logo hat, und die Wappen kommen aus der
   eigenen Mediathek (`verband_{kuerzel}`), nicht vom Server des Verbandes —
   ein Logo, das bei jedem Aufruf von fremd nachgeladen wird, meldet dorthin,
   wer die Seite liest. Also muss der leere Zustand aussehen, als waere er
   gemeint: ein Schild in der Linienfarbe, gleich gross wie ein echtes Logo,
   damit die Zeile nicht springt, sobald eines dazukommt. */
/* ── ⚠⚠ DAS ETIKETT HAENGT AN DER ZELLE, NICHT AM NAMEN — 23.09.2026 ──

   Didis Befund: «Bei einem zweizeiligen Namen rutscht HEIM/GAST eine
   Zeilenhoehe tiefer als auf der anderen Seite.» Gemessen bei 1440 mit
   «FC Bruettisellen-Dietlikon 1» gegen «FC Uster 1»: Namenshoehen 39 gegen
   19, Etikettversatz **19,38px** — genau eine Zeile.

   ⚠ **Zelle und Wappen waren dabei laengst auf 0,00.** `align-items:stretch`
   an `.zk` bindet die OBERkante; die Unterkante bleibt frei, und das Etikett
   folgte dem Namen. **Eine halb geloeste Ausrichtung sieht im Schnappschuss
   aus wie eine ganze** — man sieht zwei gleich hohe Zellen und uebersieht,
   dass darin etwas verschieden tief haengt.

   ⚠ Sichtbar ist es nur auf dem COMPUTER: schmal zieht das Schrumpfen aus
   `inc/teamname.php` den Namen auf eine Zeile, dort steht das Etikett auf
   0,00. Breit ist der volle Name Pflicht und darf umbrechen.

   Die Zelle wird darum eine Spalte, und das Etikett nimmt den Rest:
   `margin-top:auto` schiebt es an die Unterkante. Der Name dazwischen
   waechst nach unten, das Etikett bleibt liegen.

   ⚠⚠ **`:not(.wappen)` ist tragend.** Das Wappen ist ebenfalls ein direktes
   `span`-Kind von `.klub`. Ein `margin-top:auto` ohne diese Bedingung
   schoebe das WAPPEN an die Unterkante — und der Kasten stuende kopfueber.

   ⚠ **Die waagrechte Lage bleibt unberuehrt, und das war die Sorge.** In
   einer Spalte ist die Querachse waagrecht; `align-items` steht auf
   `stretch`, ein Kind mit fester Breite bleibt damit an der Startkante. Die
   zwei bestehenden Mittel wirken unveraendert weiter: `.klub.re .wappen
   {margin-left:auto}` schiebt das Wappen der Gastseite an die Aussenkante
   (Startseite), `margin:0 auto` zentriert es im Spielseitenkopf. Gemessen
   vorher: Startseite 0,00/0,00 zur Aussenkante, Spielseite 212,3/212,3. */
.klub{flex:1;min-width:0;display:flex;flex-direction:column}
/* **Die Fassung: ein weisser Kreis mit duennem Rand — 23.09.2026.**

   Didis Befund: «Heute sind manche eckig, manche rund, manche mit farbigem
   Grund — die Zeilen wirken unruhig.» Die Unruhe kam nicht aus dem Theme,
   sondern aus den Bildern: Jedes Wappen bringt seinen eigenen Umriss und
   seinen eigenen Grund mit, und die Huelle war durchsichtig. **Die Fassung
   sitzt darum an der Huelle und nicht am Bild** — sie ist die einzige
   Stelle, die allen fuenf Groessen und beiden Inhalten (Bild und leeres
   Schild) gemeinsam ist. Eine zweite Fassung je Ansicht waere genau das,
   was Didi mit «ueber die bestehende gemeinsame Ausgabe» ausschliesst.

   ⚠ **Der Kreis IST das Aussenmass, er kommt nicht dazu.** `*{box-sizing:
   border-box}` gilt ganz oben im Theme fuer alles; Rand und Innenabstand
   wachsen damit nach innen. Die fuenf Zahlen weiter unten bleiben Zeichen
   fuer Zeichen, wo sie waren — nachgemessen am Rechteck und nicht am
   berechneten Stil.

   ⚠⚠ **DER RAND STEHT NICHT IN DER FARBE, DIE DIDI GENANNT HAT.** Sein
   Wortlaut: «duenner Rand in der hellen Linienfarbe des Themes». Die helle
   Linienfarbe ist `--linie` (rgba(255,255,255,.13)) — und die liegt hier auf
   einer WEISSEN Flaeche, nicht auf der dunklen Seite: Kontrast **1,00**, im
   Bild nichts. Der Rand gehoert der Flaeche, auf der er liegt, also der
   Linienfarbe fuer HELLE Flaechen: `--papier-linie` (rgba(11,11,10,.14)),
   Kontrast **1,36** gegen Weiss. Kein neuer Farbwert — der bestehende Token
   der anderen Seite. **Ist das zu leise, waere `--halb` (2,76) der naechste
   Schritt; das ist ein Gestaltungsentscheid und kein Nachtrag.**

   ⚠ **Nicht `--li-fein`.** Das ist die seitenabhaengige Rolle (`:root` und
   `.papier`); auf dunklen Seiten faellt sie auf `--linie` zurueck und waere
   dort wieder unsichtbar. Die Flaeche unter dem Rand ist auf JEDER Seite
   weiss, darum der feste Token und nicht die Rolle. Aus demselben Grund ist
   der Kreis `--papier` — der Token der weissen FLAECHE — und nicht `--kalk`,
   der Token der weissen SCHRIFT auf dunklem Grund.

   ⚠ **`flex` statt `block`, und zwar nur fuer die Mitte.** Sobald der Inhalt
   kleiner ist als die Huelle, haengt er im Zeilenfluss an der Grundlinie:
   `.ic` traegt unter «Symbole» `vertical-align:-.13em` und `margin-right:.4em`.
   Beides ist im Flexkasten wirkungslos. `inline-block` wird unten zu
   `inline-flex`, damit `vertical-align:middle` weiter am Kasten selbst greift.

   ── ⚠⚠ UMGEKEHRT AM ABEND DES 23.09.2026 ────────────────────

   > ~~«⚠ **Kein `overflow:hidden`, kein `clip-path`, kein `cover`.** Didi:
   > «Das Bild sitzt mit etwas Luft darin und wird NICHT beschnitten — ein
   > breites Logo wird schmaler, nicht angeschnitten.» **Der Kreis ist die
   > FASSUNG und nicht die Maske.** Ein Kreis, der zuschneidet, waere genau
   > der Fehler, den dieser Satz ausschliesst.»~~ — Stand 23.09.2026
   > nachmittags.

   **Der Satz stand keine acht Stunden.** Didi hat am selben Abend
   `overflow:hidden` und `cover` ausdruecklich bestellt, und zwar mit
   Grund: Viele Dateien sind quadratisch mit rundem Logo und **deckend
   weissen Ecken**. Ohne Maske lagen diese Ecken im weissen Kreis und
   zeichneten darin einen zweiten Ring.

   ⚠ **Der alte Satz war nicht falsch, er hatte einen anderen Fall vor
   Augen** — das breite Logo. Fuer das gilt er weiter, und der Preis steht
   unten bei `.wappen img.ic` ausgeschrieben. Wer ihn hier liest und den
   Beschnitt fuer ein Versehen haelt, macht den zweiten Ring wieder auf.

   ⚠ **Der Kreis ist seither die Maske UND die Fassung**: Die weisse
   Flaeche bleibt darunter liegen, damit ein Logo mit durchsichtigem Grund
   etwas hat, worauf es steht. Beschnitten wird nur, was ueber den Rand
   hinausragt. */
/* ⚠ **`overflow:hidden` kam am 23.09.2026 abends dazu** — ohne das
   waere der Kreis nur gemalt und nicht wirksam: Ein Bild, das ihn
   ausfuellt, staende mit seinen vier Ecken darueber hinaus, und der
   Kasten saehe wieder quadratisch aus. **Der Kreis ist ab hier die
   Maske und nicht mehr bloss die Fassung.** */
.wappen{display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-bottom:7px;overflow:hidden;
  background:var(--papier);border:1px solid var(--papier-linie);
  border-radius:50%}
/* **Die Luft im Kreis — 23.09.2026.**

   > ~~«`--halb` ist die Fassung fuer dunklen Grund, und den gibt es hier
   > seit dem 26.08.2026 nicht mehr. … Die Grundregel bleibt trotzdem
   > stehen: Sie trifft ihr Element, sie wird nur ueberschrieben.»~~
   > — Stand bis zum 23.09.2026, samt `width:100%;height:100%`.

   **Den dunklen Grund gibt es jetzt nirgends mehr — auch nicht auf der
   dunklen Startseite.** Der Inhalt sitzt in allen sechs Ansichten auf dem
   weissen Kreis. `--halb` war damit nicht mehr «ueberschrieben», sondern
   ohne Fall: Es gibt keine Flaeche mehr, fuer die es gemacht war. An seine
   Stelle tritt derselbe Wert, der das Schild auf `/spiele/` schon heute
   zeichnet — die Papierfassung wird zur einzigen (Begruendung unten bei der
   Fuellung).

   ⚠ **80 % und nicht 100 %, und das ist Didis «etwas Luft».** Bei 100 % lag
   das Bild Kante an Kante an der Huelle. Der Anteil steht am INHALT und
   nicht als Innenabstand an der Huelle, weil er so mit jeder der fuenf
   Groessen mitwaechst — ein fester Innenabstand waere bei 24px ein Achtel
   und bei 56px ein Zwanzigstel.

   **Gemessen am 23.09.2026** — Testbilder im Browser in die Huelle gesetzt,
   kein Datensatz angefasst, weil lokal ohnehin kein Wappen hinterlegt ist.
   Kreis 32px, innerer Radius 15,0:

   ```
   Logo 3:1    Feld 24 x 24   gemalt 24 x 8     halbe Diagonale 12,65   -2,35
   Logo 1:1    Feld 24 x 24   gemalt 24 x 24    halbe Diagonale 16,97   +1,97
   ```

   **Die erste Zeile ist Didis Satz, nachgerechnet:** Das breite Logo wird
   schmaler (24 x 8 statt 24 x 24) und liegt mit 2,35px Abstand INNERHALB des
   Rings. Nichts wird angeschnitten.

   > **Die zweite Zeile ist der Preis, und er ist bewusst bezahlt:** Ein
   > randloses Quadrat stuende mit den Ecken 1,97px ueber dem Ring. Ganz
   > innen laege erst das einbeschriebene Quadrat bei 70,7 % — das schnuerte
   > jedes echte Wappen um ein Drittel ein, um einen Fall abzuwehren, den es
   > nicht gibt: Vereinswappen sind Schilde und Kreise mit durchsichtigen
   > Ecken. Und weil hier nichts beschnitten wird, waere so ein Fall
   > **sichtbar und nicht still** — und damit zu beheben, statt unbemerkt.

   ⚠ `margin:0` hebt `margin-right:.4em` aus `.ic` auf. Im Blockfluss lief
   der Abstand bisher nur ins Leere; im Flexkasten verschoebe er das Bild um
   seine Haelfte nach links — gemessen war der Versatz vorher 0, und er muss
   es bleiben. */
/* ── ⚠⚠ DIE 80 % GELTEN SEIT DEM 23.09.2026 ABENDS NUR NOCH FUER DAS
      SCHILD ─────────────────────────────────────────────────

   Der Kommentarblock darueber rechnet die Luft fuer das BILD vor. Er
   bleibt stehen, weil er die Masse belegt — aber er beschreibt seit
   Didis Entscheid von heute abend nur noch den Platzhalter.

   ⚠ **Das Schild behaelt seine Luft, und zwar nicht aus Trotz.** Es ist
   eine Umrisszeichnung mit quadratischem Feld; auf 100 % gebracht,
   schnitte ihm der Kreis seine vier Ecken ab — und anders als bei einem
   Logo waere das kein gewollter Beschnitt, sondern eine angeknabberte
   Zeichnung. Das Bild wird beschnitten, WEIL seine Ecken leer sind; beim
   Schild sind sie es nicht. */
.wappen .ic{width:80%;height:80%;margin:0;color:var(--papier-linie)}
/* ── ⚠⚠ `contain` IST ZU `cover` GEWORDEN — 23.09.2026 abends ──────

   > ~~«**Ein Wappen ist nicht quadratisch — 23.09.2026.** Der Kasten ist
   > 26 x 26 und bleibt es (Didis Bedingung: die Zeilen duerfen nicht
   > springen). Ein breiteres Bild wuerde darin gestaucht, `contain` passt
   > es stattdessen ein und laesst den Rest frei.
   >
   > ⚠ **Diese Regel IST Didis «ein breites Logo wird schmaler, nicht
   > angeschnitten» — sie bleibt darum Wort fuer Wort stehen.** Der Kreis
   > darueber aendert daran nichts: Er verkleinert das Feld auf 80 %, er
   > beschneidet es nicht. `cover` waere hier der Fehler und nicht die
   > Verbesserung.»~~ — Stand 23.09.2026 nachmittags.

   **Didi hat am selben Abend das Gegenteil entschieden, und der Anlass
   steht in seinem Auftrag:** Viele Dateien sind quadratisch mit rundem
   Logo und **deckend weissen Ecken**. Die lagen mit `contain` samt ihren
   Ecken im weissen Kreis und zeichneten darin einen zweiten Ring — ein
   Bildfehler, den die Fassung selbst erzeugte.

   `cover` schneidet genau diese Ecken am Kreisrand weg. Bei einem runden
   Logo geht dabei nichts verloren, was etwas waere: Es verschwindet der
   Teil, der ohnehin nur Papier war.

   ── ⚠⚠ WAS DER PREIS IST, UND ER IST BEWUSST BEZAHLT ──────────

   **Ein wirklich breites Logo — ein Schriftzug etwa — wird jetzt links
   und rechts angeschnitten.** Der alte Satz oben war an dieser Stelle
   nicht falsch, er hatte nur einen anderen Fall vor Augen. Wer ihn
   spaeter liest und `cover` fuer ein Versehen haelt, macht damit den
   zweiten Ring wieder auf.

   ⚠ **Der Beschnitt beim ANNEHMEN bleibt davon unberuehrt** und schneidet
   weiterhin nie in den Inhalt (`cc_wappen_beschnitt()`, Empfaenger
   0.9.36). Die zwei Orte tun Verschiedenes: Die Route raeumt den leeren
   Rand aus der DATEI, die Anzeige passt das Ergebnis in ihren Kreis.
   Didis «nicht angeschnitten» galt der Datei und gilt dort weiter.

   ⚠ Die Regel trifft nur das `img`, nicht das `svg` des Platzhalters —
   siehe den Block darueber, warum das Schild seine Luft behaelt. */
.wappen img.ic{width:100%;height:100%;object-fit:cover}
/* **Die fuenf Wappengroessen — als EIN Block, 23.09.2026.**

   Didis Auftrag verteilt sie auf vier Ansichten (Spielplan 32, Handy 24,
   Rangliste 28, Startseite 56 und 34, Spielseite bleibt 26). **Sie stehen
   trotzdem hier zusammen und nicht bei ihren Verwendungen.**

   > **Ein Mass, das an sechs Stellen definiert ist, ist nach dem zweiten
   > Umbau an zwei Orten gleich und an vier verschieden.**

   Die Vorlagen setzen nur die Klasse; `fch_wappen_feld()` baut sie. Wer
   eine Groesse aendert, aendert sie hier — und sieht die anderen vier
   daneben.

   ⚠ **Die Grundform steht auf `display:block` mit `margin-bottom:7px`** —
   richtig fuer Spielseite und Telegrammkopf, wo das Wappen UEBER dem
   Klubnamen sitzt. Drei der vier neuen Orte setzen es DANEBEN; dort
   waere der Abstand eine Luecke mitten in der Zeile, und `block` brach
   die Zeile. Darum `inline-block` und kein Abstand nach unten.
   `wappen-gross` behaelt ihn: Dort steht der Name wieder darunter. */
.wappen-plan,.wappen-rang,.wappen-naechste{display:inline-flex;
  vertical-align:middle;margin-bottom:0}
.wappen-plan{width:32px;height:32px}
.wappen-rang{width:28px;height:28px}
.wappen-naechste{width:34px;height:34px}
.wappen-gross{width:56px;height:56px;margin-bottom:10px}
/* ⚠ **24px unter 760, Didis Vorgabe** — dieselbe Schwelle, an der der
   Verlauf einspaltig wird und `.tg-unten` umschaltet. Eine eigene
   Schwelle fuer die Wappen waere eine dritte Zahl im Kopf des Lesers. */
@media(max-width:759px){.wappen-plan{width:24px;height:24px}}
/* **Das leere Schild als helle Flaeche — und zweimal, weil es zwei
   Gruende gibt.**

   Didis Wortlaut: «ein leeres Schild in der hellen Flaeche des Themes».
   `#i-schild` ist eine Umrisszeichnung (`fill="none"`), bisher nur eine
   duenne Linie. Bei 56px ist eine Linie allein zu wenig, damit der Platz
   besetzt aussieht — die Fuellung macht aus dem Umriss eine Flaeche.

   > ~~«⚠⚠ ZWEI FASSUNGEN, WEIL DIE STARTSEITE DUNKEL IST. `/spiele/`
   > traegt `view papier on`, die Startseite ausdruecklich NICHT (Entscheid
   > vom 31.08.2026: «Die Startseite ist dunkel»). Ein `--papier-flaeche`
   > (#F2F0EA) waere dort ein weisser Fleck auf dunklem Grund.»~~
   > — Stand bis zum 23.09.2026. Dazu gehoerten die zwei Regeln
   > `.papier .wappen svg.ic{fill:var(--papier-flaeche)}` und
   > `.papier .wappen .ic{color:var(--papier-linie)}`, die hier standen.

   **Die Ausnahme ist mit dem Kreis WEGGEFALLEN, nicht abgeschafft worden.**
   Sie stand da, weil die Flaeche hinter dem Schild auf der Startseite dunkel
   war. Sie ist es nicht mehr: Der Kreis ist auf jeder Seite weiss, also ist
   die Flaeche hinter dem Schild ueberall dieselbe.

   > **Die Rolle haengt an der Flaeche, nicht an der Seite** — derselbe Satz
   > steht bei den Farbtoken oben. Er war der Grund fuer die zwei Regeln, und
   > er ist jetzt der Grund, dass eine reicht.

   Genommen ist die Papierfassung und nicht die dunkle: `--tafel-hell`
   (#2A2A26) im weissen Kreis waere ein schwarzer Fleck. Beide Werte standen
   schon hier; die eine Fassung uebernimmt nur die Flaeche der anderen mit.
   Kein neuer Farbwert.

   ⚠ **Auf `/spiele/`, in der Rangliste und auf der Spielseite aendert das
   nichts** — dort galt die Papierfassung schon. Es aendert sich allein auf
   der Startseite, und dort MUSS es sich aendern.

   ⚠ Die Fuellung trifft nur das Schild, nicht das Bild — ein `<img>`
   kennt kein `fill`. */
.wappen svg.ic{fill:var(--papier-flaeche)}
.klub.re .wappen{margin-left:auto}
/* ── ⚠⚠ BEIDE KAESTEN GLEICH GEBAUT — 23.09.2026 abends ───────────

   Didis Punkt 2: «Je Mannschaft: Wappen oben, darunter der Teamname,
   darunter klein «HEIM» bzw. «GAST».» Und: «Wappen in beiden Kaesten gleich
   gross — die im Kasten «Naechstes Spiel» sind heute kleiner und werden
   angeglichen. Computer etwa 48 px, Handy etwa 44 px.»

   Hier standen bis heute nachmittag zwei Begruendungen und fuenf Regeln, die
   «Naechstes Spiel» zu einer REIHE machten:

   > ~~«**«Naechstes Spiel»: das Wappen NEBEN dem Namen — 23.09.2026.**
   > Gemessen und nicht vermutet: Das 34px-Wappen sass UEBER dem Namen statt
   > davor, weil `.klub b` `display:block` ist … Darum traegt die Zelle in
   > diesem einen Fall eine Reihe. Das Etikett («Heim»/«Gast») behaelt seine
   > eigene Zeile ueber `flex:1 0 100%`, der Name teilt die Reihe mit dem
   > Wappen.»~~
   > ~~«**Rechts gehoert das Wappen an die AUSSENKANTE — 23.09.2026.**
   > Gespiegelt wird ueber die Reihenfolge im Flexkasten und nicht ueber eine
   > zweite Markupfassung»~~ — `order:1` am Wappen, `order:2` am Etikett.
   > — Stand 23.09.2026, nachmittags.

   **Beide sind ersatzlos weg, weil ihr Gegenstand weg ist.** Sie loesten
   Aufgaben, die allein die Reihe stellte: `order` spiegelte die Folge
   INNERHALB einer Zeile, `flex:1 0 100%` holte das Etikett wieder aus ihr
   heraus. Steht das Wappen ueber dem Namen, gibt es keine Zeile mehr zu
   spiegeln — `.klub` ist dort wieder gewoehnlicher Blockfluss wie in
   «Letztes Resultat», und `.re{text-align:right}` samt
   `.klub.re .wappen{margin-left:auto}` darueber tragen die Spiegelung
   allein. **Dieselben zwei Regeln, die den ersten Kasten seit je
   spiegeln** — und das ist der Punkt an Didis «beide gleich»: nicht zwei
   Wege zum selben Bild, sondern EIN Weg.

   ⚠ **Die zwei Klassennamen bleiben verschieden, die ANZEIGE nicht.**
   `wappen-gross` (56) und `wappen-naechste` (34) stehen unveraendert im
   gemeinsamen Groessenblock weiter oben: Das sind die Groessen ihrer
   ANSICHT, und `pruef/wappen.py --statisch` misst sie dort Zeichen fuer
   Zeichen. Was hier steht, ist die Ueberschreibung fuer DIESEN ORT, und sie
   gilt beiden Kaesten gleich. **Didis «gleich gross» ist eine Aussage ueber
   die Tafel und nicht ueber die Klassen.**

   > **Eine Zahl, die nur unter einem Selektor gilt, gehoert unter diesen
   > Selektor und nicht ins Verzeichnis der Regelfaelle** — derselbe Grund,
   > aus dem die 44 nie im Groessenblock stand.

   ⚠ **`display:flex` muss mit.** Der Groessenblock setzt `.wappen-naechste`
   auf `inline-flex` mit `margin-bottom:0` — richtig, solange es neben dem
   Namen sass. Ohne die Ruecknahme stuende es hier zwar oben (`.klub b` ist
   ein Block und schiebt auch ein `inline-block` auf eine eigene Zeile),
   aber ohne Abstand nach unten: Das Wappen klebte am Namen.

   ⚠ **Die Handyzahl unter 521 und nicht unter 640.** 520 ist die Schwelle,
   die dieser Abschnitt fuer diesen Kasten schon fuehrte — bis heute
   nachmittag der Umbruch in die Spalte — und die auch `.tore-liste` weiter
   unten fuehrt. Eine eigene waere eine dritte Zahl im Kopf des Lesers.

   ⚠ **Der Abstand steht in derselben Regel wie die Groesse.** Die 10px sind
   der Weg zwischen Wappen und Name; sie gehoeren zu der Zeile, die auch das
   Mass setzt — sonst steht der Abstand an einer Stelle und sein Anlass an
   einer anderen. */
.tafel .wappen-gross,.tafel .wappen-naechste{display:flex;width:48px;height:48px;margin-bottom:10px}
@media(max-width:520px){
  .tafel .wappen-gross,.tafel .wappen-naechste{width:44px;height:44px}
}
.klub b{
  display:block;font-family:var(--d);font-variation-settings:'wdth' 104;font-weight:700;
  font-size:clamp(14px,1.7vw,17px);text-transform:uppercase;line-height:1.14;letter-spacing:-.01em;
  /* Namen wie "Spielgemeinschaft Zürisee-Herrliberg" haben ein Wort, das in die
     schmale Zelle nicht passt — bei 1024px ist sie nur 181px breit. Erst die
     Silbentrennung (die Seite ist lang="de-CH"), dann als Auffangnetz ein Bruch
     an beliebiger Stelle. Kein word-break, das würde auch kurze Namen zerlegen. */
  hyphens:auto;overflow-wrap:anywhere;
}
/* ⚠⚠ **`> span` und nicht mehr `span` — 23.09.2026.** Hier stand:

   > ~~`.klub span{font-size:var(--tx-etikett);…}`~~

   Gemeint waren immer die zwei direkten Kinder: das Etikett «Heim»/«Gast»
   und das Wappen. **Der Nachfahrenselektor nahm jedes `span` in beliebiger
   Tiefe mit** — und seit `fch_theme_teamname()` stehen zwei davon IM Namen
   (`.tn-voll` · `.tn-kurz`). Ohne die Einengung stuende der
   Mannschaftsname in 11px, gesperrt und halbgrau: in der Schrift seines
   eigenen Etiketts.

   **Heute aendert die Einengung nichts.** `.klub` fuehrt genau drei Kinder
   — Wappen, Name, Etikett —, und die zwei `span` darunter sind beide
   direkte Kinder. Nachgemessen vor und nach der Aenderung. Das Gewicht
   bleibt ebenfalls gleich (0,1,1), die Kaskade also auch.

   > **Eine Regel, die mehr trifft als sie meint, faellt erst auf, wenn
   > jemand das erste verschachtelte Element einsetzt.** */
.klub>span{font-size:var(--tx-etikett);letter-spacing:.15em;text-transform:uppercase;color:var(--halb)}
.klub>span:not(.wappen){margin-top:auto}
/* ── ⚠⚠ LUFT VOR «HEIM» UND «GAST» — 23.09.2026 ───────────────

   Gemessen am Rechteck (Unterkante Name gegen Oberkante Etikett):

                            vorher    nachher
     Letztes Resultat      9,00 px   16,00 px
     Naechstes Spiel       7,31 px   14,31 px

   Die Luecke war reine Zeilenhoehe — `.klub span` trug gar keinen Abstand.
   7px ist eine bestehende Stufe des Themes (`.wappen{margin-bottom:7px}`)
   und keine neue Zahl. Beide Seiten je Kasten sind gleich.

   ── ⚠⚠ ZWEI KAESTEN, ZWEI LAYOUTARTEN, ZWEI MITTEL ────────────
          ~~gegolten vom 23.09.2026 vormittags bis nachmittags~~

   > ~~«**Eine einzige Regel traegt hier nicht, und das ist gemessen und
   > nicht vermutet.** Die zwei Kaesten stehen in verschiedenen Layoutarten:
   > «Naechstes Spiel» ist seit dem Wappenumbau ein FLEXKASTEN, «Letztes
   > Resultat» gewoehnlicher BLOCKFLUSS. … Darum bekommt jede Layoutart ihr
   > eigenes Mittel, und jedes ist das idiomatische: Aussenabstand am Namen
   > im Blockfluss, Reihenabstand (`row-gap`) im Flexkasten. Die zwei
   > schliessen einander ueber `:not(:has(.wappen-naechste))` aus — saessen
   > beide am selben Kasten, addierten sie sich.»~~
   > — Stand 23.09.2026, nachmittags.

   **Die Voraussetzung ist mit Didis Punkt 2 gefallen: Es gibt nur noch EINE
   Layoutart.** «Naechstes Spiel» ist kein Flexkasten mehr (Begruendung
   oben), also gibt es kein zweites Mittel und nichts auszuschliessen. Der
   `row-gap` ist mit dem Flexkasten gegangen; geblieben ist der
   Aussenabstand am Namen — und der gilt jetzt beiden Kaesten, weil beide
   Blockfluss sind.

   > **Eine Ausnahme ueberlebt ihren Anlass nicht.** `:not(…)` blieb
   > wirksam und traefe weiter — es truege nur keinen Sinn mehr, und ein
   > Selektor ohne Sinn ist der, der beim naechsten Umbau falsch gelesen
   > wird.

   **Die Messtabelle von damals bleibt stehen, weil sie weiter begruendet,
   warum der Abstand am NAMEN haengt und nicht am Etikett:**

     `span{margin-top:7px}`             Flex 14,31 · Block  9,00 (nichts)
     `span{display:block;margin-top}`   Flex 14,31 · Block  7,00 (weniger!)
     `b{margin-bottom:7px}`             Flex 10,81 · Block 16,00

   An einem INLINE-Element tut `margin-top` nichts — im Blockfluss ist das
   Etikett inline —, und `display:block` nahm die halbe Zeilenhoehe weg, aus
   der die 9,00 ueberhaupt bestand.

   ⚠ **Auf `.tafel` eingegrenzt.** `.klub` steht auch im Telegrammkopf der
   Spielseite (`.tg-kopf .klub`). Didis Auftrag nennt die zwei
   Startseitenkaesten; den Kopf der Spielseite mitzuziehen waere eine
   Aenderung, die niemand bestellt hat. */
.tafel .klub b{margin-bottom:7px}

/* ── ⚠⚠ LANGE MANNSCHAFTSNAMEN — DIE GEMEINSAME AUSGABE ────────────
       23.09.2026, Didis Auftrag

   > «Ist am Team ein Kurzname gesetzt, wird auf dem Handy dieser gezeigt.
   > Sonst schrumpft die Schrift, bis der Name in hoechstens zwei Zeilen
   > passt; darunter eine Untergrenze, ab der er umbricht statt weiter zu
   > schrumpfen. Beide Seiten bleiben gleich hoch, die Wappen auf derselben
   > Hoehe, auch wenn eine Seite zweizeilig ist. Auf dem Computer immer der
   > volle Name.»

   Das Markup kommt aus `inc/teamname.php`: zwei `<span>` im Namenselement,
   immer nur eines sichtbar. **Der Grund fuer zwei steht dort** — PHP kennt
   die Bildschirmbreite nicht, und der Zwischenspeicher machte eine
   serverseitige Entscheidung endgueltig. Dieselbe Hausform wie bei
   `.rz-uhr` und beim Team der Einzelspielliste.

   ── ⚠⚠ DER BEFUND, GEMESSEN ──────────────────────────────────────

   Der Bestand fuehrt nur kurze Klubnamen; eine Messung an ihnen saehe
   ueberall gruen aus. Die langen Namen sind darum im Browser eingesetzt
   (`textContent`), der Bestand blieb unberuehrt. Zeilenzahl von
   «Spielgemeinschaft Zürisee-Herrliberg», vor dieser Aenderung:

        Fenster            360  390  520  560  600  639 | 640  768  1024
        «Letztes Resultat»   4    3    2    2    2    2 |   2    2     3
        «Nächstes Spiel»     4    4    2    2    2    2 |   2    2     4
        Spielseitenkopf      6    4    3    3    2    2 |   2    2     2

   Und die Folge, im Spielseitenkopf bei 390, «Spielgemeinschaft
   Zürisee-Herrliberg» gegen «Juniorinnen G + F»:

        Zellenhoehe links 137,69 gegen rechts 98,94   Differenz 38,75px
        Oberkanten der zwei Wappen                    Differenz 19,37px

   ⚠ **Derselbe Befund wie am Startseitenkasten** (Vermerk beim Handyblock
   von «Naechstes Spiel», 23.09.2026 nachmittags): `align-items:center` an
   `.zk` setzt die kuerzere Zelle mittig, und die Wappen wandern um die
   halbe Hoehendifferenz auseinander. **Die Ursache ist die Hoehe und nicht
   das Wappen.**

   ── Drei Regeln, und jede kann etwas anderes ─────────────────────

   **1. Der Kurzname kann die Enge nur auf UNSERER Seite umgehen.** In
   einer Begegnung hat nur unsere Mannschaft einen `fch_team`-Beitrag; der
   Gegner kommt als blosse Zeichenkette vom Spiel. Eine Regel, die daran
   haengt, feuert grundsaetzlich nur auf einer Seite — und das faellt nicht
   auf, weil unsere Seite die ist, die man zuerst anschaut.

   **2. Das Schrumpfen traegt beide Seiten.** Es braucht eine Messung, und
   CSS kann nicht messen; `namenEinpassen()` in `assets/fch.js` tut es.
   **Die zwei Zahlen stehen trotzdem hier und nicht im Skript:** Schwelle
   und Untergrenze gehoeren zum Satz, und eine Zahl an zwei Orten ist an
   einem davon bald anders. Das Skript liest `--tn-min` und fuehrt selbst
   keine Zahl.

   **3. `align-items:stretch` macht «gleich hoch».** Keine feste Hoehe an
   `.klub` — die braeche beim ersten dreizeiligen Namen. Gestreckt sind
   beide Zellen so hoch wie die Reihe; weil ihr Inhalt oben anfaengt,
   stehen die zwei Wappen damit von selbst auf derselben Linie.

   ⚠ **`stretch` steht OHNE Medienabfrage, anders als sein Vorbild bei
   520.** Der Versatz ist keine Handyfrage — er entsteht auf jeder Breite,
   auf der die zwei Seiten verschieden viele Zeilen brauchen; die Tabelle
   oben zeigt dieselben vier Zeilen bei 1024. Gemessen im
   Spielseitenkopf, fuenf Namenspaare ueber sieben Breiten von 360 bis
   1440: Hoehendifferenz 0,00 und Wappendifferenz 0,00 in allen 35
   Faellen. Wo beide Seiten ohnehin gleich hoch sind, kostet die Regel
   nichts.

   ⚠⚠ **«Nächstes Spiel» war ausgenommen, und die Ausnahme ist seit dem
   23.09.2026 abends falsch.** Sie stand hier so:

   > ~~«Dieser eine Kasten stellt das Wappen NEBEN den Namen … Ueber 520 ist
   > `.klub` dort ein UMBRECHENDER Flexkasten — und ein gestreckter
   > Flexkasten verteilt die zusaetzliche Hoehe auf seine Zeilen
   > (`align-content` steht auf `stretch`). Die Wappen gehen dadurch weiter
   > auseinander statt zusammen:
   >
   >      Fenster                      521     600     639    1440
   >      heute (center)             19,45   11,49   11,48   22,88
   >      mit stretch                29,19   17,22   17,21   34,32
   >
   > **Eine Regel, die an vier von fuenf Stellen hilft, ist an der fuenften
   > trotzdem ein Rueckschritt.** `:not(:has(.wappen-naechste))` nimmt genau
   > den Kasten heraus, der seine eigene Loesung schon hat.»~~
   > — Stand 23.09.2026, nachmittags.

   **Die Messung war richtig, ihre Voraussetzung ist weg.** Sie galt dem
   Kasten als REIHE — «das Wappen NEBEN den Namen» ist der erste Halbsatz
   und die ganze Begruendung. Didis Punkt 2 stellt das Wappen auch dort
   UEBER den Namen; damit ist `.klub` in beiden Kaesten Blockfluss, es gibt
   keine Zeilen mehr, auf die ein gestreckter Flexkasten Hoehe verteilen
   koennte, und die Ausnahme nimmt nur noch den Kasten heraus, der sie am
   noetigsten braucht.

   > **Eine Ausnahme, die ihre Begruendung ueberlebt, kehrt sich um.** Sie
   > hiess «hier hilft `stretch` nicht» und hiesse ab heute «hier fehlt
   > `stretch`» — dieselbe Zeile, das Gegenteil an Wirkung.

   **Gegengemessen nach dem Umbau**, «Spielgemeinschaft Zürisee-Herrliberg»
   gegen «FC Uster 1», acht Fensterbreiten (360 · 390 · 480 · 520 · 521 ·
   768 · 1024 · 1440), beide Kaesten, und den langen Namen einmal links und
   einmal rechts: **Hoehendifferenz 0,00 und Wappenversatz 0,00 in allen 32
   Faellen.** Vorher, an denselben Namen gemessen:

        Fenster                        360     390     768    1024    1440
        «Letztes Resultat»   Hoehe   47,86   31,91   15,95   38,75   19,38
                             Wappen  23,92   15,95    7,97   19,38    9,68
        «Naechstes Spiel»    Hoehe    0,00    0,00   38,91   84,50   45,75
                             Wappen   0,00    0,00   19,46   42,25   22,87

   ⚠ **Die linke Spalte ist der Beleg dafuer, dass hier zwei Dinge fehlten
   und nicht eines.** «Letztes Resultat» stand auch auf dem Handy schief,
   obwohl `stretch` es nie ausnahm — die Regel feuerte dort gar nicht, weil
   `front-page.php` bis heute abend kein `.tn-voll` ausgab. **Ein
   `:has()`-Waechter ohne Traeger meldet nichts und sieht vollstaendig aus.**

   ⚠ **Das Resultat UND die Uhr holen sich `center` zurueck.** Sie sind die
   zwei Kinder, die von `stretch` nichts haben: gestreckt haengen sie oben
   in einem hohen Kasten, statt zwischen den Mannschaften zu stehen. Hier
   stand: «dort fuer die Uhr, die es nur in «Nächstes Spiel» gibt und die
   hier darum nicht zu nennen ist» — **seit der Kasten in derselben Regel
   steht, ist sie zu nennen.**

   ⚠⚠ **Und damit gilt sie auch im Telegrammkopf der Spielseite.** Der
   traegt `class="zk tg-kopf"` und darin ebenfalls eine `.uhr`
   (`inc/spielkopf.php`); sie war bis heute abend die einzige gestreckte
   Mitte des Hauses, weil die Ausnahme nur `.score` nannte. **Das ist
   gewollt und keine Nebenwirkung:** Zwei Mitten in derselben Bauform, von
   denen eine mittig steht und die andere oben klebt, waeren ein
   Unterschied ohne Grund.

   ⚠⚠ **Der Aufrufer muss KEINE Klasse setzen.** Die Ausgabe bringt
   `.tn-voll` und `.tn-kurz` selbst mit; Stylesheet und Skript finden daran
   alles. **Eine Klasse, die man vergessen kann, ist eine Regel, die stumm
   ausfaellt** — und zwar an genau der Seite, die man nicht anschaut. */
:root{
  /* ⚠ **Steht mit Absicht NICHT im Satzblock oben bei `--tx-klein`.** Das
     ist keine Stufe der Skala, sondern der Schalter fuer die Regeln
     darunter; dort oben saehe sie aus wie eine fuenfte Schriftgroesse.
     `0` heisst «nicht schrumpfen» und ist der Zustand am Computer. */
  --tn-min:0;
}
/* ── ⚠⚠ `.tn-kurz` IST AM 23.09.2026 ABENDS ENTFALLEN ────────────────

   > ~~`.tn-kurz{display:none}`~~ und im Handyblock darunter
   > ~~`.tn-kurz{display:inline}` · `.tn-voll:has(+ .tn-kurz){display:none}`~~

   **Didis Befund:** Den Kurznamen gibt es nur bei UNSEREN Teams. Auf dem
   Handy stand darum links «FCH 1» und rechts «FC Bruettisellen-Dietlikon 1»
   — die Gegenueberstellung wurde ungleich, und zwar dort, wo sie eine
   Gegenueberstellung sein soll.

   ⚠ **Die Geschwisterpruefung war richtig und ist trotzdem weg.** Sie stand
   da, damit ein blosses `.tn-voll{display:none}` nicht jede Gegnerseite
   leerte; der Grund bleibt wahr. Es gibt nur nichts mehr auszublenden:
   `fch_theme_teamname()` gibt seit heute abend ausschliesslich `.tn-voll`
   aus. **Eine Regel ohne Gegenstand ist keine Vorsorge, sondern ein
   Hinweis auf etwas, das es nicht gibt.**

   ⚠ Der Kurzname selbst lebt weiter — in `fch_theme_teamzeichen()`
   (`inc/rangtabelle.php`), `page-teams.php` und `single-fch_person.php`.
   Dort ist die Spalte wirklich schmal und niemand wird gegenuebergestellt.

   ⚠ `.tn-voll` bleibt und traegt jetzt allein: Daran findet `assets/fch.js`
   das Einpassen, und `.zk:has(.tn-voll)` haelt die zwei Seiten gleich hoch. */
.zk:has(.tn-voll){align-items:stretch}
.zk:has(.tn-voll)>.score,.zk:has(.tn-voll)>.uhr{align-self:center}
@media(max-width:639px){
  /* ⚠⚠ **11px ist gemessen, nicht gesetzt.** Drei Gruende, der dritte
     entscheidet.

     Versalhoehe im Satz der Kopfzeile (Archivo, wdth 104, 700), gemessen
     ueber `actualBoundingBox`:

         Groesse   17  14  13  12  11  10   9
         Versal    12  10   9   9   8   7   7

     **Von 10 auf 9 bewegt sich die Versalhoehe nicht mehr** — dort kostet
     das Schrumpfen Lesbarkeit, ohne noch welche einzubringen.

     11px ist `--tx-etikett`, die kleinste Stufe, die das Haus fuehrt. Der
     Satzblock oben sagt dazu: «Eine Zahl, die auf keiner Stufe steht, ist
     keine kleinere Stufe — sie ist gar keine.»

     ⚠ **Und 11px ist die Groesse von «Heim» und «Gast» direkt darunter**
     (`.klub>span`). Unter 11 stuende der Mannschaftsname kleiner als sein
     eigenes Etikett — das ist keine kleine Schrift mehr, das ist eine
     umgedrehte Rangfolge.

     Was bei 11px noch nicht passt, bricht um. **Das ist der richtige
     Rueckfall und kein Rest:** «Spielgemeinschaft Zürisee-Herrliberg»
     passt im Spielseitenkopf bei 390 erst bei 9px in zwei Zeilen; bei 11px
     bleiben es drei — und drei lesbare Zeilen sind besser als zwei
     unlesbare.

     ⚠ **Die Schwelle 639 ist keine neue Zahl**, es ist die Handyschwelle,
     die diese Datei schon fuehrt (`#v-team #fakt-naechstes`). Gemessen
     beginnt die Enge bei 600 (Spielseitenkopf) und bei 390 (beide
     Startseitenkaesten); bei 640 stehen alle drei langen Namen an allen
     drei Orten auf hoechstens zwei Zeilen. **Die Reserve dazwischen ist
     noetig, weil nicht die Fensterbreite entscheidet, sondern die
     Namenslaenge** — derselbe Satz steht beim Handyblock von «Nächstes
     Spiel». Ueber der Schwelle schrumpft nichts: `--tn-min` ist dort `0`,
     und das Skript nimmt jede gesetzte Groesse zurueck. */
  :root{--tn-min:11px}
  /* ⚠ Hier standen `.tn-kurz{display:inline}` und
     `.tn-voll:has(+ .tn-kurz){display:none}` — der Umschalter auf den
     Kurznamen. Beide sind am 23.09.2026 abends entfallen; die Begruendung
     steht oben bei `.zk:has(.tn-voll)`. **Uebrig bleibt genau das, was
     wirklich trug: das Schrumpfen.** Es traegt beide Seiten, der Kurzname
     hat nur eine getragen. */
}
.re{text-align:right}
/* Resultat und Anstosszeit waren zwischenzeitlich gleich gross; das Resultat
   liegt jetzt bewusst zehn Prozent darüber — 26.4/4.4/39.6 gegen 24/4/36.
   Zusammen mit Schnitt (wdth 118 gegen 112), Stärke (900 gegen 800) und der
   gelben Farbe ist es damit wieder die stärkste Zahl der Tafel. */
.score{
  font-family:var(--d);font-variation-settings:'wdth' 118;font-weight:900;
  font-size:clamp(26.4px,4.4vw,39.6px);line-height:.88;letter-spacing:-.045em;white-space:nowrap;color:var(--gelb);
}
.uhr{
  font-family:var(--d);font-variation-settings:'wdth' 112;font-weight:800;
  font-size:clamp(24px,4vw,36px);line-height:1;letter-spacing:-.03em;text-align:center;white-space:nowrap;
}
.uhr small{display:block;font-family:var(--b);font-size:var(--tx-etikett);font-weight:500;letter-spacing:.15em;color:var(--halb);margin-top:6px}
/* ── ⚠⚠ DIE FUSSZEILE: DREI PAARE, DREI ZEILEN — 23.09.2026 abends ──

   Didis Punkt 3: «Datum und Wettbewerb auf einer Zeile. Ort und Platz auf
   einer Zeile. «Zum Spiel» und «Alle Spiele» auf einer Zeile. Passt eine
   Zeile nicht, bricht sie um — aber nicht von vornherein gestapelt.»

   > ~~`.meta{display:flex;flex-wrap:wrap;gap:5px 15px;…}`~~
   > — Stand bis zum 23.09.2026, nachmittags: EIN umbrechender Flexkasten
   > mit sechs gleichrangigen Kindern.

   **Ein einziger umbrechender Kasten kann die drei Paare nicht halten, und
   das ist gemessen.** Was auf einer Zeile landete, entschied die
   Restbreite:

     1440   Datum · Wettbewerb · Ort  |  Zum Spiel · Matchbericht
     1024   Datum · Wettbewerb  |  Ort · Zum Spiel · Matchbericht
      390   jede Angabe auf einer eigenen Zeile

   > **Der Umbruch ordnete nach Platz, nicht nach Bedeutung** — und bei 1024
   > stand die Adresse in derselben Zeile wie der Verweis.

   Die Gruppierung steht darum als drei `.meta-z` im Markup
   (`front-page.php`) und nicht in einer Regel, die aus Breiten raet. **Das
   Raster setzt die drei untereinander, jede Zeile bricht fuer sich um** —
   Didis «nicht von vornherein gestapelt» ist damit woertlich erfuellt: Es
   ist nichts gestapelt ausser den drei Paaren selbst.

   ⚠ **Die Handyregel ist mit weggefallen.** Sie stand am Ende dieses
   Abschnitts:

   > ~~«`.tafel .meta{flex-direction:column}` · `.tafel .meta a{margin-left:0}`
   > — Didi: «Darunter Datum, Wettbewerb, Ort und die Verweise,
   > untereinander.»»~~ — Stand 23.09.2026, nachmittags.

   Sie war die Antwort auf denselben Befund und die Antwort von gestern:
   **stapeln, weil die Gruppierung fehlte.** Mit den drei Zeilen stapelt
   nichts mehr von vornherein, und `flex-direction:column` truege das
   Gegenteil von Punkt 3 in dieselbe Datei.

   ⚠ **`margin-left:auto` am Verweis ist ebenfalls weg.** Es schob den
   ERSTEN Verweis nach rechts, solange er in der Reihe der Angaben stand;
   an zwei Verweisen in einer eigenen Zeile zoege es sie auseinander — zwei
   automatische Aussenabstaende teilen sich den freien Platz. Die Zeile
   selbst richtet sich jetzt aus (`.meta-weg`), und die zwei Verweise
   bleiben mit dem gemeinsamen Abstand beieinander.

   ⚠ **Rechtsbuendig auf JEDER Breite, auch auf dem Handy.** Bis heute
   waren die Verweise breit rechts und schmal links — der Unterschied kam
   aus der Handyregel oben, nicht aus einem Entscheid. Eine Zeile, die je
   nach Fensterbreite an einer anderen Kante steht, liest sich als zwei
   verschiedene Fusszeilen.

   ── Gegengemessen am 23.09.2026 abends ─────────────────────────

   Acht Fensterbreiten von 360 bis 1440, beide Kaesten, je drei `.meta-z`
   — 48 Zeilen. Sechzehn davon tragen ein einziges Glied (der Ort), 32
   tragen zwei: **31 von 32 stehen zu zweit auf EINER Zeile.** Die eine,
   die umbricht, ist «Letztes Resultat» bei 360: `So. 02.08.` (76,16) + Abstand
   (15) + `Meisterschaft 2. Liga · Gruppe 1` (234,02) sind 325,18 in einer
   324 breiten Zelle.

   > **1,18px, und daran entscheidet sich der Umbruch** — im Kasten
   > daneben steht dieselbe Zeile bei 360 einzeilig, weil «Sa. 15.08.»
   > 1,60px schmaler ist als «So. 02.08.».

   **Das ist genau Didis zweiter Satz und kein Rest:** «Passt eine Zeile
   nicht, bricht sie um.» Die Zeile bricht, nachdem sie es versucht hat —
   und nicht, weil eine Regel es ihr vorher verboten hat. */
.meta{
  display:grid;gap:5px;margin-top:15px;padding-top:13px;
  border-top:1px solid var(--linie);
  font-size:var(--tx-etikett);letter-spacing:.08em;text-transform:uppercase;color:var(--halb);
}
.meta-z{display:flex;flex-wrap:wrap;align-items:center;gap:5px 15px}
/* ── ⚠⚠ AUF DEM HANDY ZWEI ZEILEN, NICHT DREI — 23.09.2026 ───────────

   > ~~«Auf dem Handy untereinander … drei Angaben, die halbzeilig
   > umbrechen, lesen sich schlechter als drei eigene Zeilen.»
   > `@media(max-width:520px){ .tafel .meta-z:not(.meta-weg)
   > {flex-direction:column;align-items:flex-start} }`~~
   > — Stand vom selben Tag, Stunden alt.

   **Didi hat die Aufteilung genauer bestellt:** Datum und Wettbewerb
   gehoeren auf EINE Zeile, der Ort auf die zweite. Eine Spalte machte aus
   dem Paar drei Einzelne — und trennte damit zwei Angaben, die zusammen
   gelesen werden («SA. 15.08.» und «MEISTERSCHAFT 2. LIGA»), waehrend die
   dritte ohnehin fuer sich steht.

   Die Zeile bleibt darum eine Reihe; nur der Ort bekommt eine eigene
   Zeile, indem er die volle Breite nimmt. Der Umbruch ist damit derselbe
   Mechanismus wie breit, nur erzwungen statt abgewartet.

   ⚠⚠ **Ueber die KLASSE und nicht ueber die Position.** `:last-child`
   oder `:nth-child(3)` traefen den Falschen, sobald eine der drei Angaben
   fehlt — ohne Datum waere der Wettbewerb der zweite, ohne Wettbewerb der
   Ort. **Ein Waehler, der von der Vollzaehligkeit abhaengt, ist genau
   dort falsch, wo ein Spiel unvollstaendig erfasst ist.**

   ⚠ 520 ist die Schwelle, die dieser Kasten ohnehin fuehrt (die Wappen
   gehen dort auf 44px) — keine neue Zahl.

   ⚠ `:not(.meta-weg)` laesst die Verweiszeile in Ruhe: Ihre zwei bis drei
   Verweise sollen nebeneinander stehen und nur umbrechen, wenn sie
   muessen — gemessen bei 360 mit drei Verweisen, dort bricht sie. */
@media(max-width:520px){
  /* ⚠⚠ **Der Spaltenabstand geht auf 10px, und das rettet genau 360.**
     Gemessen im Kasten «Letztes Resultat» bei 360: Datum 76,2 + Wettbewerb
     234,0 + Abstand 15,0 = 325,2 in 324,0 Platz — **es fehlten 1,2px**, und
     der Wettbewerb fiel auf eine dritte Zeile. Im Nachbarkasten passte
     dieselbe Zeile, weil «SA. 15.08.» 1,6px schmaler ist als «SO. 02.08.».

     > **Eine Zeile, die an anderthalb Pixeln scheitert, scheitert am
     > Wochentag.** Das ist keine Gestaltungsfrage, das ist ein Abstand,
     > der eine Stufe zu gross ist.

     10px ist eine bestehende Stufe des Themes (`.rz` und `.tafel .klub`
     fuehren sie). Die 5px Zeilenabstand bleiben.

     ⚠ **Bei 320 fehlen 41px, und dort bricht es weiter um.** Das ist
     richtig: Didis «passt es nicht, bricht es um» gilt auch hier, und
     kein Abstand der Welt holt 41px herein. */
  .tafel .meta-z:not(.meta-weg){column-gap:10px}
  .tafel .meta-z:not(.meta-weg) > .meta-ort{flex:1 0 100%}
}
.meta-weg{justify-content:flex-end}
/* ── ⚠ MEHR LUFT UEBER DEN VERWEISEN — Didi, 24.09.2026 abends ──────

   «Startseite, Kaesten «Letztes Resultat» und «Naechstes Spiel», am
   Computer: Die Verweiszeile klebt unter der Angabenzeile. Mehr Abstand
   nach oben — etwa doppelt so viel wie heute, in einer bestehenden Stufe
   des Themes. In beiden Kaesten gleich. Handy bleibt wie heute.»

   **Der Abstand IST der Zeilenabstand von `.meta` und nichts sonst.** Die
   `gap:5px` aus der Grundregel `.meta` sind die ganze Erklaerung: gemessen im
   lokalen Stapel, beide Kaesten, vier Breiten von 390 bis 1440 — durchgehend
   **5,00px** zwischen der Unterkante der Angabenzeile und der Oberkante der
   Verweiszeile. Verdoppelt sind das 10.

   ⚠ **10px ist eine Stufe, die das Haus fuehrt, und keine neue Zahl.** Das
   Blatt fuehrt keine Abstandstoken; «Stufe» heisst hier: dieselbe Zahl in
   derselben Rolle. `gap:10px` steht achtzehnmal im Blatt, darunter im
   SELBEN Kasten bei `.cd` (dem Countdown unter «Naechstes Spiel»), und
   `column-gap:10px` einmal — in der Handyregel darueber, an
   `.tafel .meta-z:not(.meta-weg)`, also an genau diesen Zeilen.

   ⚠ **Der Beleg im Absatz darueber traegt nicht mehr:** «10px ist eine
   bestehende Stufe des Themes (`.rz` und `.tafel .klub` fuehren sie)» —
   nachgezaehlt am 24.09.2026 abends fuehrt `.rz` in allen fuenf Regeln
   `gap:0 16px`, und keine der sieben `.klub`-Regeln kennt eine 10. **Die
   Aussage stimmt, die zwei Zeugen sind gewandert** — darum steht hier eine
   gezaehlte Menge und keine Liste von Fundstellen.

   ⚠ **`row-gap` und nicht `gap`:** `.meta` ist einspaltig, ein
   Spaltenabstand haette dort nichts zu tun. So bleibt die 5 in der
   Grundregel als die eine Zahl stehen, die schmal gilt — wer sie dort
   aendert, aendert weiter beides.

   ⚠ **980 ist die Schwelle dieses Kastens und keine neue.** Es ist die
   Breite, an der `.tafel-in` auf zwei Spalten geht; darunter steht der
   Kasten gestapelt und bleibt bei 5px. Damit ist «Handy bleibt wie heute»
   erfuellt, und der Bereich dazwischen gleich mit. */
@media(min-width:980px){
  .tafel .meta{row-gap:10px}
}
.meta span{display:inline-flex;align-items:center}
.meta a{display:inline-flex;align-items:center;color:var(--gelb);font-weight:700;border-bottom:2px solid transparent}
@media(hover:hover){.meta a:hover{border-bottom-color:var(--gelb)}}

/* ── ⚠⚠ EINE SPALTE UEBER DIE GANZE BREITE — 24.09.2026 ─────────────────
   Hier stand:

     > ~~`grid-template-columns:1fr 1fr`~~ — eine Spalte je Mannschaft.

   **Seit dem 23.09.2026 gibt `front-page.php` nur noch EINE Liste aus**
   (`array( $fch_unsere => 'links' )`, nur unsere Schuetzen). Die zweite
   Spalte blieb als Loch stehen. Gemessen vorher, im lokalen Stapel:

       Sicht 392   Kasten 341   Raster `164.5px 164.5px`   Liste 164.5
       Sicht 1440  Kasten 580   Raster `280px 280px`       Liste 280

   Die Liste bekam ueberall die Haelfte, der Rest stand leer.

   > **Ein Raster, das eine Spalte mehr fuehrt als es Inhalte gibt, macht
   > aus der halben Breite eine Gestaltung.** Sie war keine.

   Didis Entscheid vom 24.09.2026: die ganze Breite, und zwar auf allen
   Breiten — also auch am Computer.

   ⚠ **Der Spaltenabstand bleibt in `gap` stehen und wirkt heute nicht.**
   Bei einer Spalte gibt es keinen Spalt (20px breit, 12px unter 521). Er
   bleibt, weil er mit dem Zeilenabstand in derselben Kurzschreibung sitzt
   und beide zusammen gelesen werden; wer ihn streicht, muss ihn beim
   naechsten Zweispalter neu erfinden. */
.tore-liste{display:grid;grid-template-columns:1fr;gap:10px 20px;margin-top:16px;padding-top:14px;border-top:1px solid var(--linie)}
.ts{list-style:none;display:grid;gap:5px;font-size:var(--tx-klein);color:#E6E6E0}
.ts li{display:flex;align-items:center}
.ts b{font-weight:700;margin-left:6px;font-variant-numeric:tabular-nums}
/* ⚠ 14.09.2026: `margin-right` dazu. Den Abstand zum Namen lieferte bisher
   NUR die gespiegelte Fassung der rechten Spalte; links klebte das Symbol am
   Namen. Es fiel nicht auf, weil die linke Spalte meistens «keine Tore»
   zeigt — **ein Fehler, den nur der Normalfall sichtbar macht, wartet auf
   den Tag, an dem der Normalfall eintritt.** */
/* ── ⚠⚠ DIE FESTEN 14px SIND AM 24.09.2026 ENTFALLEN ────────────────────
   Hier stand:

     > ~~`.ts .ic{width:14px;height:14px;color:var(--gelb);margin-right:.4em}`~~
     > — Stand bis 24.09.2026.

   Das sah nach einer Regel aus und war ein Zufall gleicher Zahlen: `.ts`
   trug `--tx-klein` (14), das Symbol feste 14px, Verhaeltnis 1.000. **Wer
   die Schrift auf 13 stellte, bekam ein Symbol, das bei 14 stehen blieb** —
   und gemerkt haette man es erst am Bild, nicht am Stylesheet.

   ⚠⚠ **Es brauchte dafuer keinen Ersatz, sondern nur die Loeschung.** Die
   Hausregel `.ic` im Abschnitt «Bausteine» traegt `width:1em;height:1em`:
   Das Symbol haengt im ganzen Theme an seiner Schrift, und diese Liste war
   die eine Stelle, die sich davon abgemeldet hatte. Didis «verkleinert sich
   im gleichen Verhaeltnis» ist damit keine neue Regel, sondern die Rueckkehr
   zur alten.

   > **Wer einen festen Wert durch den beweglichen ersetzt, den es schon
   > gibt, schreibt ihn nicht hin — er streicht die Ausnahme.**

   ⚠ `margin-right:.4em` wiederholt die Hausregel ebenfalls, bleibt aber
   stehen: Es ist am 14.09.2026 mit eigener Begruendung dazugekommen (siehe
   oben), und ob die noch traegt, ist eine andere Frage als diese hier. */
.ts .ic{color:var(--gelb);margin-right:.4em}

/* ── ⚠⚠ 13px AUF DEM HANDY — 24.09.2026 ────────────────────────────────
   Didi: «Auf dem Handy (unter 640 px) trotzdem kleiner: 13 px statt 14.
   Computer bleibt bei 14 px.»

   `--tx-kleiner` ist die Stufe, die dafuer angelegt wurde (`:root`, siehe
   dort). **Keine lose 13 an dieser Regel** — Didis Bedingung.

   ⚠⚠ **619 UND NICHT 639 — seit dem 24.09.2026 abends.** Hier stand:

   > ~~«**639 und nicht 520 — und das ist in diesem Kasten eine ZWEITE
   > Zahl.** … die Groesse geht bei 639. … der Satz gilt, und Didi hat die
   > 640 trotzdem genannt.»~~

   Didi jetzt: «Alle Regeln, die in den letzten Auftraegen mit 640 px
   bestellt wurden … auf die Hausgrenze 620 px ziehen.» **Die zweite Zahl
   bleibt eine zweite, sie heisst nur anders:** Der Zeilenabstand verdichtet
   sich weiterhin bei 520 (`line-height:1.3`, `gap:6px`; gemessen 24.19px
   unter 521 gegen 27.39px darueber) und bleibt dort; die Groesse geht jetzt
   bei 619. Der Wappenabschnitt weiter oben sagt «Eine eigene waere eine
   dritte Zahl im Kopf des Lesers» — **und eine dritte ist es gerade nicht
   mehr**: 619/620 traegt das ganze Haus. **Wer die beiden zusammenlegen
   will, fragt Didi und schiebt nicht die eine still auf die andere.**

   ⚠ Ballsymbol und Marke `(P)` kommen von selbst mit, weil beide relativ
   gebunden sind — die Hausregel `.ic` traegt `1em`, `abbr.ts-zus` traegt
   `.86em`. Nachgemessen im lokalen Stapel, Sicht 619 gegen 620:

       619   Schrift 13   Symbol 13x13   Minute 13/700   Marke 11.18/400
       620   Schrift 14   Symbol 14x14   Minute 14/700   Marke 12.04/400

   > ~~`639   Schrift 13 …` / `640   Schrift 14 …`~~ — dieselben Werte an
   > der alten Kante, gemessen am 24.09.2026 mittags. **Nur die Kante ist
   > gewandert, kein einziger Wert.**

   Der dreifache Unterschied Minute gegen Marke bleibt damit auf beiden
   Seiten der Schwelle stehen: Gewicht 700 gegen 400, Farbe
   `rgb(230,230,224)` gegen `var(--halb)` = `rgb(156,156,149)`, Groesse
   voll gegen `.86em`.

   ⚠⚠ **Der Zeilenabstand geht mit, ohne dass ihn jemand angefasst haette:**
   22.89px unter 521 (vorher 24.19), 25.80px zwischen 521 und 619 (vorher
   27.39). `line-height:1.3` haengt an der Schrift, und 1.3 mal 13 ist
   weniger als 1.3 mal 14. **Die SCHWELLE ist unveraendert 520** — nur der
   Wert darunter ist kleiner geworden. Didi hat zum Abstand nichts gesagt;
   wirkt er zu eng, ist das eine eigene Frage und keine Nachbesserung an
   dieser hier. */
@media(max-width:619px){
  .ts{font-size:var(--tx-kleiner)}
}

/* ── ⚠⚠ DIE SPIEGELUNG IST AM 14.09.2026 ENTFALLEN ──────────────────────
   Hier stand:

     > ~~«Gespiegelte Fassung fuer die Gastspalte der Matchuhr: Liste rechts
     > buendig, Symbol hinter dem Namen.»~~
     > `.ts.rechts li{flex-direction:row-reverse}`
     > `.ts.rechts .ic{margin:0 0 0 .4em}`
     > `.ts.rechts b{margin:0 6px 0 0}`

   Das war stimmig, solange eine Zeile DREI Teile hatte: Symbol, Name,
   Minute. Gespiegelt las sich das als «3. Enea Scot ⚽» — eine Ausrichtung.

   Seit dem Mehrfachtorschuetzen hat die Zeile FUENF Teile: Symbol, Name,
   «3.», das lose Komma, «28.». Gespiegelt wurde daraus:

       28. ,3. Enea Scot ⚽

   > **`row-reverse` dreht die Reihenfolge der Kinder, nicht die Bedeutung
   > der Zeile.** Bei zwei Teilen sieht das wie eine Ausrichtung aus, bei
   > einer Aufzaehlung wird daraus eine falsche Aussage.

   ⚠ Und das Komma ist kein eigenes Element, sondern loser Text zwischen
   zwei `<b>`. Es wandert als drittes Flex-Kind mit und landet vor der
   zweiten Zahl — daher «,3.».

   **Die rechte Spalte bleibt rechtsbuendig** (`justify-items:end`), die
   Zeile selbst liest sich in beiden Spalten gleich: Symbol, Name, Minuten.
   Didis Entscheid vom 14.09.2026. */
.ts.rechts{justify-items:end}
.ts .leer{color:var(--halb);font-style:italic}
/* ⚠ 14.09.2026: Eigentor und Penalty werden angeschrieben — sie aendern,
   WEM das Tor zaehlt, und ohne die Marke steht ein Name in der Spalte des
   Gegners und sieht aus wie ein Fehler. Halbton, damit der Name fuehrt. */
/* ⚠ `abbr` traegt in den meisten Browsern eine gepunktete Unterlinie und
   `cursor:help`. Beides gehoert hier weg — die Marke steht mitten in
   einer Torliste und ist kein Fachbegriff, den man nachschlagen muss. */
abbr.ts-zus{color:var(--halb);font-size:.86em;text-decoration:none;cursor:inherit}
/* ── ⚠⚠ LUFT VOR DER MARKE — UND WARUM SIE NUR HIER NOETIG IST ─────

   «11.(P)» klebte zusammen, obwohl `front-page.php` ein Leerzeichen vor das
   `<abbr>` schreibt (`echo ' <abbr class="ts-zus"…`). **Der Grund ist
   gemessen und nicht geraten: `.ts li` ist ein Flexkasten**, und ein
   Flexkasten verwirft die Zwischenraeume zwischen seinen Kindern. Das
   Leerzeichen steht im Quelltext und kommt nie an.

   `.25em` ist der Zwischenraum zwischen Wort und Wort — Didis Mass. NICHT
   die 6px von `.ts b`: die trennen Name und Minute und sind absichtlich
   weiter; die Marke gehoert zur Minute und nicht neben sie.

   ⚠⚠ **Die Regel ist auf `.ts` eingegrenzt, und das ist kein
   Halbmass.** Der zweite Ort derselben Marke ist `inc/verlauf.php`, und
   dort steht sie in `.ve-tx` — einem INLINE-Kasten. Der behaelt den
   Zeilenumbruch des Markups als echtes Leerzeichen, die Luft ist also
   schon da. Ein unbegrenztes `abbr.ts-zus{margin-left}` gaebe dort
   Leerzeichen UND Rand, also den doppelten Abstand.

   ⚠ **Wer `.ve-tx` je auf `display:flex` stellt, nimmt dort die Luft
   weg**, und zwar lautlos — dann gehoert diese Regel entgrenzt und das
   Leerzeichen im Markup entfernt. */
.ts abbr.ts-zus{margin-left:.25em}

.cd{display:flex;gap:10px;margin-top:16px}
.cdz{background:var(--gelb);color:var(--dun);padding:9px 4px;min-width:60px;text-align:center;flex:1}
.cdz b{
  display:block;font-family:var(--d);font-variation-settings:'wdth' 116;font-weight:900;
  font-size:clamp(21px,3.4vw,30px);line-height:1;font-variant-numeric:tabular-nums;
}
.cdz span{display:block;font-size:var(--tx-etikett);letter-spacing:.16em;text-transform:uppercase;color:rgba(11,11,10,.62);margin-top:4px}

/* Zwei Spalten erst ab 980px. Darunter brechen die Mannschaftsnamen auf drei
   bis vier Zeilen — im Browser gemessen, mit echten und mit langen Namen.
   Unterhalb greift die bestehende Stapelung, kein eigenes Layout. */
@media(min-width:980px){
  .tafel-in{grid-template-columns:1fr 1fr}
  .zelle{padding:30px var(--rand)}
  .zelle+.zelle{border-top:0;border-left:3px solid var(--gelb)}
}
/* ── ⚠⚠ DER HANDYBLOCK VON «NAECHSTES SPIEL» IST WEG — 23.09.2026 abends ──

   Hier stand ein `@media(max-width:520px)` mit elf Regeln. Sein Kopfsatz:

   > ~~«**«NAECHSTES SPIEL» AUF DEM HANDY: DIE REIHE WIRD ZUR SPALTE.**
   > Didis Befund: «Die drei Bloecke stehen nebeneinander, obwohl kein Platz
   > ist — Teamnamen brechen um, Wappen und Beschriftungen sitzen auf
   > verschiedenen Hoehen.» … Darum kippt die Zelle unter 521 von der Reihe
   > in die SPALTE: Wappen oben, Name darunter, Etikett zuunterst.»~~
   > — Stand 23.09.2026, nachmittags.

   **Didis Punkt 2 macht daraus die Regel fuer jede Breite.** «Wappen oben,
   Name darunter, Etikett zuunterst» IST die Spalte — und sie gilt jetzt
   nicht mehr unter 521, sondern immer und in beiden Kaesten. Der Block war
   damit auf ganzer Laenge eine zweite Fassung dessen, was oben ohnehin
   steht:

     Reihe zurueckgenommen   `.klub` ist ueberall wieder Blockfluss
     `order` zurueckgenommen die Spiegelung macht `.re` + `margin-left:auto`
     `stretch` an `.zk`      steht ohne Medienabfrage bei `.tn-voll`
     `.uhr` mittig           steht in derselben Zeile daneben
     44px Wappen            steht bei der Groessenueberschreibung oben
     `.meta` als Spalte      widerspricht Punkt 3, siehe dort

   > **Eine Regel, die dasselbe noch einmal sagt, ist nicht doppelt
   > sicher.** Sie ist die Stelle, an der beim naechsten Umbau nur die eine
   > von zwei Fassungen nachgezogen wird.

   ⚠ **Die Gegenmessung von damals bleibt gueltig und wird nur woanders
   erzeugt:** «Hoehendifferenz 0,00, Differenz der Wappen-Oberkanten 0,00 —
   auch dann, wenn die eine Seite vierzeilig und die andere einzeilig ist.»
   Das leistet seit heute abend `.zk:has(.tn-voll){align-items:stretch}`,
   und zwar auf jeder Breite statt nur unter 521. */
@media(max-width:520px){
  .tore-liste{gap:8px 12px}
  /* ⚠⚠ 24.09.2026: `font-size:var(--tx-klein)` ist aus dieser Zeile weg.
     > ~~`.ts{font-size:var(--tx-klein);gap:6px}`~~ — Stand bis 24.09.2026.

     Sie wiederholte nur, was `.ts` oben ohnehin sagt, und bewirkte nichts —
     **bis heute.** Seit die Groesse bei 639 auf `--tx-kleiner` geht, haette
     diese spaetere Regel sie unter 521 wieder auf 14 hochgeholt: genau dort,
     wo die 13 am noetigsten ist.

     > **Eine Wiederholung tut nichts, bis sich der Wert ueber ihr
     > aendert.** Dann tut sie es lautlos.

     Der Zeilenabstand bleibt; er ist der Grund, warum diese Zeile ueberhaupt
     hier steht. */
  .ts{gap:6px}
  .ts li{align-items:flex-start;line-height:1.3}
  .ts b{margin-left:4px}
  .ts.rechts b{margin-right:4px}
  .ts .ic{margin-top:2px}
}

/* ── 60 Bausteine ─────────────────────────────────────────── */

/* Knöpfe */
.btn{
  display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 25px;
  font-family:var(--b);font-weight:700;font-size:var(--tx-klein);letter-spacing:.04em;
  background:var(--gelb);color:var(--dun);border:2px solid var(--gelb);border-radius:0;cursor:pointer;
  transition:background .16s,color .16s;
}
/* Eine Regel für alle Knöpfe: beim Darüberfahren füllt sich der Knopf, nie umgekehrt */
/* ⚠ Gefaltet am 25.09.2026 — «Fokus = derselbe Zustand wie Hover» ist
   dieselbe Regel und keine zweite mit denselben Werten; `outline:0` steht
   mit in der Klammer, siehe `.mini`. */
@media(hover:hover){.btn:hover,.btn:focus-visible{background:var(--dun);color:var(--gelb);border-color:var(--gelb);outline:0}}
/* **Wofuer die weisse Fassung die Vorlage ist.** Weiss auf durchsichtig hat
   heute keinen Traeger: alle sieben `.btn-k` stehen auf Papierseiten. Sie
   bleibt stehen, weil `.btn-k` der ZURUECKGENOMMENE Knopf ist und die dunklen
   Orte dieser Website genau die zurueckgenommenen sind - der Hinweisbalken,
   die Tafel der Startseite und das Partnerband, wo «Sponsor werden» als
   leiser Knopf neben den Logos stuende. Sie ist die Vorlage fuer den Tag, an
   dem dort einer gebraucht wird. */
/* ⚠ **Die leise Knopfart bleibt, wo sie ist — Entscheid Didi, 24.09.2026.**

   Am selben Tag hat «Mehr laden» auf `/news/` diese Klasse VERLOREN und
   traegt seither den gelben Hausknopf: Er fordert zum Weiterlesen auf, und
   dafuer war die zurueckgenommene Fassung zu still. **Der Filterknopf
   «Anzeigen» daneben behaelt sie**, und zwar aus demselben Grund, nur
   andersherum gelesen: Er steht zwischen Auswahlfeldern und bedient sie,
   er ruft nicht.

   > **Zwei Knoepfe auf derselben Seite, zwei Knopfarten — das ist kein
   > Versehen, sondern der Unterschied zwischen Aufforderung und Werkzeug.**

   Wer sie angleicht, aendert einen Entscheid und behebt kein Versehen. */
.btn-k{background:transparent;color:var(--tx-haupt);border-color:rgba(255,255,255,.4)}
@media(hover:hover){.btn-k:hover,.btn-k:focus-visible{background:#fff;color:var(--dun);border-color:#fff;outline:0}}

/* -- Handlung und Verweis ------------------
   **`.btn` trug beides: neun Verweise und drei Knoepfe.** «Anfrage senden»
   sah aus wie «Was das kostet» - das eine schickt ein Formular ab, das andere
   wechselt die Seite. Fuer den Besucher war kein Unterschied zu sehen. Von den
   vier Faellen «gleiche Auszeichnung, verschiedene Rolle» ist das der einzige,
   bei dem jemand etwas ausloesen kann, was er nur lesen wollte.

   **Die Trennung braucht keine neue Klasse und keinen Eingriff ins Markup.**
   Die Rolle steht schon im Element: Ein `<button>` tut etwas, ein `<a href>`
   fuehrt woandershin. `button.btn` ist damit eine Auswahl nach der ROLLE und
   nicht nach einem Namen - genau das, was den anderen Selektoren dieses
   Stylesheets fehlt. Sie kann auch nie auseinanderlaufen: Wer einen Verweis
   zum Knopf macht, aendert das Element und bekommt die andere Fassung von
   selbst.

   **Der Knopf sieht aus wie der Verweisknopf — umgekehrt am 28.08.2026.**
   Bis dahin stand hier: «Die Handlung ist dunkel, der Verweis gelb.»
   `button.btn` trug die dunkle Flaeche im Ruhezustand und drehte beim
   Zeigen auf Gelb; `a.btn` machte es umgekehrt. Der Unterschied trennte
   nach dem ELEMENT und war damit nie auseinanderzubringen — aber er
   trennte nach etwas, das ein Besucher vor dem Klick nicht wissen muss.

   **Damit entfaellt die Fassung ganz und nicht nur ihre Farbe.** Gelb in
   Ruhe, dunkel beim Zeigen ist genau das, was `.btn` schon tut — die
   vier Regeln waren nach dem Umdrehen wortgleich mit der Grundfassung.
   **Eine Regel, die nach dem Aendern dasselbe sagt wie die darueber,
   gehoert nicht angepasst, sondern geloescht.**

   Was verlorengeht, ist benannt: Ein Knopf, der etwas ausloest, und
   einer, der weiterfuehrt, sehen jetzt gleich aus. */
/* Zeigt an, dass der Weg aus der Website hinausführt */
.ic-extern{width:15px;height:15px;opacity:.8}
.mehr{font-family:var(--b);font-weight:700;font-size:var(--tx-klein);color:var(--tx-hervor);border-bottom:2px solid transparent;padding-bottom:3px}
@media(hover:hover){.mehr:hover{border-bottom-color:var(--gelb)}}
/* Das Blockende: ein Absatz, der nichts enthaelt ausser dem weiterfuehrenden
   Verweis. Vorher stand derselbe Abstand mit fuenf verschiedenen Zahlen im
   Markup — 12, 14, 20, 22, 26. Der Selektor benennt die Rolle, nicht den
   Wert, und trifft 30 Absaetze. */
p:has(> .mehr:only-child){margin-top:20px}

/* Filter */
.filt{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:28px}
/* Umschalter statt Filter: er wechselt, was die Seite zeigt, statt eine
   bestehende Liste einzugrenzen. Darum eine andere Form und nicht nur ein
   anderer Zustand — flache Reiter mit Unterlinie statt Chips. Die gelbe
   Unterlinie sagt in der Hauptnavigation schon «du bist hier»; hier steht
   sie eine Ebene tiefer.
   Der Chip verspricht durch seine Form Kombinierbarkeit, die ein Umschalter
   nicht hat: es ist immer genau einer aktiv, und ein «Alle» gibt es nicht.
   Kein .filt daneben im Markup — stünde es dort, hiesse die Rolle weiterhin
   Filter, und die Trennung stünde nur im Kommentar.
   Abstand 7px wie bei .filt: ein Wert für Bedienreihen, nicht zwei. Die
   Trennung tragen Unterlinie und gesperrte Versalien. */
.umschalter{display:flex;flex-wrap:nowrap;gap:7px;margin-bottom:28px;
  border-bottom:1px solid var(--linie)}
.umschalter .mini{flex:none;background:none;border:0;border-radius:0;
  padding:9px 6px 11px;margin-bottom:-1px;border-bottom:2px solid transparent;
  color:var(--tx-leise);letter-spacing:.06em}
@media(hover:hover){.umschalter .mini:hover,.umschalter .mini:focus-visible{background:none;color:#fff;outline:0}}
.umschalter .mini[aria-current="true"]{
  background:none;color:var(--tx-haupt);border-bottom-color:var(--gelb)}
/* Behälter des erzeugten Auswahlfelds. Es trägt .fe mit: es ist wirklich ein
   Formularfeld und teilt die Bauform. */
/* [hidden]{display:none} ist eine Browserregel mit der Staerke eines
   Attributselektors — .filt{display:flex} und .umschalter{display:flex} sind
   staerker und setzen sie ausser Kraft. Ohne diese Zeile bleibt die
   Knopfreihe stehen, obwohl sie hidden traegt, und laeuft seitlich ueber:
   auf der Statistik bei 320px um 317px. */
.filt[hidden],.umschalter[hidden]{display:none}
.wahlfeld{max-width:340px}
/* In .filterzeile, einer Flexzeile mit space-between, naehme das Feld sonst
   nur seine Inhaltsbreite — waehrend das Suchfeld darunter die volle nimmt. */
.filterzeile .wahlfeld{flex:1 1 100%}
/* In der Filterzeile traegt die Zeile den Abstand, nicht die Leiste darin. */
.filterzeile .filt{margin:0}
/* **Achtzehn zwischen zwei Filtern.** Gemessen am 26.08.2026 lauteten die vier
   senkrechten Abstaende der Leiste auf allen vier Breiten 28 - 6 - 0 - 28: 28
   zwischen den Bloecken, 6 innerhalb einer Einheit (Etikett zu Feld), und
   **null zwischen dem Auswahlfeld und der Knopfreihe** - die Knoepfe klebten
   nicht, sie beruehrten.

   18 ist mehr als die 6 innerhalb einer Einheit und weniger als die 28
   zwischen den Bloecken. Sie sagt, was der Fall ist: zwei Filter, die
   zusammengehoeren, aber zwei sind.

   **Es ist eine dritte Zahl in einer Leiste mit zweien**, und sie gehoert
   darum in die Sammlung fuer die Abstandsskala - nicht als Ausnahme, sondern
   als Fall, den eine kuenftige Skala abbilden muss. */
.fe.wahlfeld + .filt,.fe.wahlfeld + .filt-name{margin-top:18px}
/* **Beide Filter tragen jetzt ein Etikett.** Das Auswahlfeld hatte eines, die
   Knopfreihe nicht - und der unbeschriftete war der, dessen Bedeutung sich
   nicht von selbst erklaert: «Alle · Heim · Auswaerts» koennte auch eine
   Ansichtswahl sein. «Ort» waere kuerzer und falsch: Wer «Ort» liest,
   erwartet Langacker oder Embrach. */
.filt-name{display:block;margin-bottom:6px;
  font-family:var(--b);font-weight:700;font-size:var(--tx-klein);
  letter-spacing:.15em;text-transform:uppercase;color:var(--tx-leise)}
.filt .mini{
  background:transparent;color:var(--tx-haupt);border:1.5px solid rgba(255,255,255,.28);border-radius:100px;
  padding:9px 17px;font-weight:600;font-size:var(--tx-klein);letter-spacing:.04em;text-transform:none;
}
/* ⚠ **Die Zeigerregel der Chips steht weiter unten**, hinter der
   Gewaehlt-Regel — siehe dort (24.09.2026).

   > ~~`@media(hover:hover){.filt .mini:hover{border-color:#fff;
   > background:transparent;color:#fff}}`~~ — stand hier, bis der Zeiger
   > gelb wurde. */
/* **Nur `<button>`, nie `<a>`.** Bis zum 26.08.2026 stand hier `.filt a.mini`
   mit der Begruendung «Sprungleisten nutzen dieselbe Form; Knopf und Verweis
   sollen gleich hoch sein». Die Begruendung ist im Markup ausdruecklich
   zurueckgenommen: Die Sprungleiste auf der Partnerseite ist `.tsr.sprungzeile`
   mit `.mehr`-Verweisen, «eine Verweiszeile und keine Knopfreihe». Ein
   Sprungziel hat weder Zustand noch Auswahl, `formBewerten()` sucht `button`
   und faende in einer Verweisreihe nichts - sie liefe unbemerkt ueber, und
   `data-wahl` behauptete eine Wahl, die es nicht gibt.
   Gezaehlt am 26.08.2026: 61 `.mini` im Markup, alle 61 `<button>`, kein
   einziges `<a>`.

   ── UND SEIT DEM 01.09.2026 GIBT ES EINEN ZWEITEN FALL ─────────────────

   **Die Suchergebnisseite filtert durch Navigieren, nicht durch Schalten.**
   Sie hat kein Skript; ihre Chips sind `<a>` auf `?s=…&post_type=…`, und
   das ist richtig -- ein Knopf, der nichts tut, waere schlechter.

   **Aber `aria-pressed` gehoert an einen Knopf mit Zustand, nicht an einen
   Verweis.** Ein Verweis, der auf die gerade gezeigte Auswahl zeigt, sagt
   das mit `aria-current`. Die Regel deckt darum beide Faelle ab, statt
   dass die eine Seite ihre Hervorhebung verliert -- gemessen am
   01.09.2026: kein gelber Grund, `font-weight` 600 statt 700.

   `line-height:normal` steht jetzt in `.mini` selbst. Ein `<button>` hat
   ihn vom Browser, ein `<a>` erbt statt dessen die 1,6 des Fliesstexts --
   **65x42 statt 85x36 Bildpunkte, und die ganze Zeile 42 statt 36 hoch.**
   Der Wert aendert an den 61 Knoepfen nichts; er macht die Regel
   unabhaengig davon, welches Element sie traegt. */
/* ── ⚠⚠ GRAU STATT GELB — Didi, 24.09.2026 ───────────────────

   > ~~`background:var(--gelb);border-color:var(--gelb)`~~

   **Dieselbe Verwechslung wie bei der Segmentleiste, nur eine Bauform
   aelter.** Das Gelb steht in den Spielzeilen fuer die Marke H/A und
   bedeutet dort etwas voellig anderes; ein gewaehlter Filter ist keine
   Heimspielmarke. Die Leiste ist am 23.09.2026 umgestellt worden, die
   Chips auf `/teams/` und `/suche/` blieben zurueck — und eine halb
   umgestellte Farbe ist schlimmer als eine ganz alte.

   `--halb` ist derselbe Wert wie dort, aus demselben Grund: hell genug
   fuer dunkle Schrift, dunkel genug, dass die Flaeche auf weissem Papier
   ueberhaupt eine Flaeche ist. Die Begruendung mit den Kontrastzahlen
   steht bei `.filt.segleiste .mini[aria-pressed]`.

   ⚠ **Der Rand geht mit.** Er trug bisher dieselbe Farbe wie die
   Fuellung; bliebe er gelb, saehe der Chip aus wie ein gelber Ring um
   eine graue Scheibe. Anders als in der Leiste ist der Rand hier kein
   Trennstrich zum Nachbarn, sondern die Kontur der Kapsel. */
/* ⚠⚠ **HELLGRAU STATT MITTELGRAU — Didi, 24.09.2026 ──────────────

   > ~~`background:var(--halb)`~~ (#9C9C95) — galt einen halben Tag.

   Didi: «Das gewaehlte Feld ist zu dunkelgrau. Stattdessen den hellen
   Grauwert nehmen, den das Theme schon fuehrt (die helle Flaeche, die auch
   die Kalenderblaetter und Kaesten tragen).»

   Das ist `--papier-flaeche` (#F2F0EA) — dieselbe Flaeche wie `.karte`,
   `.hinweis`, `.sp-block` und `.sp-kopfkarte`.

   ⚠ **Der Einwand von heute mittag ist nicht widerlegt, sondern
   ueberstimmt, und das gehoert hierhin:** Gegen den weissen Papiergrund
   (`--papier:#FFFFFF`) traegt #F2F0EA nur **1.14** Kontrast. Als Flaeche
   ist das ein zarter Ton und kein Block. Didi kennt die Zahl und will den
   ruhigen Ton; das Gewaehlte traegt ausserdem Fettschrift, und unter dem
   Zeiger wird es gelb. **Wer hier spaeter «mehr Kontrast» einbaut, aendert
   einen Entscheid und behebt kein Versehen.** */
/* ⚠ **Der Rand faellt aus der Regel, und das ist der Unterschied zur
   Leiste.** Er trug bisher die Farbe der Fuellung — bei #9C9C95 ergab das
   eine geschlossene graue Kapsel. Mit einer fast weissen Fuellung waere
   auch der Rand fast weiss, und **der gewaehlte Chip haette auf weissem
   Grund weniger Kontur als die ungewaehlten daneben** — die Auswahl saehe
   schwaecher aus als das Uebrige. Ohne die Ueberschreibung erbt er die
   Kontur der Grundregel und steht wie seine Nachbarn; unterschieden wird
   er durch Fuellung und Fettschrift.

   In der Leiste stellt sich die Frage nicht: Dort ist der Rand ein
   Trennstrich (`--seg-linie`) und war nie an die Fuellung gebunden. */
.filt .mini[aria-pressed="true"],
.filt .mini[aria-current]{background:var(--papier-flaeche);color:var(--dun);font-weight:700}
/* ⚠⚠ **Der Zeiger faerbt JEDES Feld gelb — Didi, 24.09.2026 ───────

   > ~~«Der Zeiger faerbt gelb — und NUR am gewaehlten Chip. Didis dritter
   > Satz begrenzt den zweiten: ‚Ungewaehlte Chips bleiben, wie sie sind‘,
   > also behaelt der ungewaehlte seinen bisherigen Zeigerzustand. Das
   > unterscheidet die Chips von der Segmentleiste.»~~ — meine Lesart von
   > heute mittag, und sie war zu eng.

   Didi: «Gleich wie bei der Segmentleiste — jedes Feld wird unter dem
   Zeiger gelb, gewaehlt wie ungewaehlt.» **«Bleiben, wie sie sind» hat
   den Ruhezustand gemeint**, genau wie «bleiben weiss» bei der Leiste.
   Damit gibt es nur noch EINE Regel fuer beide Bauformen, und der
   Unterschied, den ich hier begruendet hatte, gibt es nicht mehr.

   ⚠ **`:not(.segleiste)` bleibt, obwohl beide jetzt dasselbe tun.** Die
   Leiste faerbt zwar auch gelb, aber sie laesst ihren Rand auf
   `--seg-linie` — er ist dort Trennstrich zum Nachbarn und nicht Kontur.
   Ohne den Ausschluss koennte diese Regel (b=4) die Leistenregel (b=4)
   je nach Reihenfolge schlagen und den Strich gelb mitfaerben. **Mit dem
   Ausschluss ist das unmoeglich statt bloss unwahrscheinlich.**

   ⚠ Und sie steht mit b=4 ueber der Gewaehlt-Regel (b=3), darum faerbt
   der Zeiger auch das gewaehlte Feld — ohne dass es auf die Reihenfolge
   ankaeme.

   ⚠ **`:not(.segleiste)` ist noetig und nicht Zierde.** Ohne den
   Ausschluss traefe diese Regel (b=4) auch die Leiste und schluege dort
   `.filt.segleiste .mini:hover` (b=3) — samt `border-color`, und damit
   faerbte sie den Trennstrich zum Nachbarn gelb mit. Genau das ist dort
   ausdruecklich vermieden worden. */
@media(hover:hover){
  /* ⚠ Gefaltet am 25.09.2026 — «Fokus = derselbe Zustand wie Hover» ist
   dieselbe Regel und keine zweite mit denselben Werten; `outline:0` steht
   mit in der Klammer, siehe `.mini`. */
  .filt:not(.segleiste) .mini:hover,.filt:not(.segleiste) .mini:focus-visible{
    background:var(--gelb);border-color:var(--gelb);color:var(--dun);outline:0}
}

/* ══ DIE SEGMENTLEISTE — EINE BAUFORM FUER DREI BIS FUENF FELDER, 23.09.2026 ══

   Didi: «als zusammenhaengende Segmentleiste mit gemeinsamem Rahmen und
   duenner Trennlinie, gleiche Hoehe wie das Auswahlfeld. Das gewaehlte Feld
   gelb hinterlegt.»

   ⚠⚠ **Ein Chip und ein Segment sagen nicht dasselbe.** Der Chip steht frei
   und verspricht durch seine Form Kombinierbarkeit — dieselbe Begruendung,
   mit der oben der Umschalter vom Filter getrennt ist. Ein Segment ist von
   seinen Nachbarn nur durch einen Strich getrennt: **Es sagt «genau eines
   von diesen»**, und das trifft auf «Alle · Heim · Auswaerts» wie auf
   «Alle · 2026/27 · 2027/28» zu.

   > **Die Bauform kommt zur `.filt` dazu, sie ersetzt sie nicht.** Alles,
   > was `assets/fch.js` sucht — `.filt[data-wahl="…"]`, `.mini`,
   > `aria-pressed` —, findet es unveraendert. Eine eigene Klasse statt
   > `.filt` haette jede dieser Suchen verdoppelt.

   ── Wie man sie benutzt ───────────────────────────────────────────────

     <div class="filt segleiste" data-wahl="Name" data-kein-feld>
       <button class="mini" aria-pressed="true"  data-x="alle">Alle</button>
       <button class="mini" aria-pressed="false" data-x="heim" title="Heim">
         <span class="seg-kurz" aria-hidden="true">H</span>
         <span class="seg-wort">Heim</span>
       </button>
     </div>

     data-kein-feld   sonst baut `leisteAufbauen()` ein `select` daraus
     .seg-kurz        die Kurzform, erst unter 560px sichtbar, `aria-hidden`
     .seg-wort        das Wort; unter 560px `.vh`-behandelt, nie weg
     ohne beide Spans der Knopf zeigt seinen Text auf jeder Breite

   ⚠ **Die Hoehe von 44px stammt vom Auswahlfeld** (`.fe select` fuehrt
   `min-height:44px`). Didis «gleiche Hoehe wie das Auswahlfeld» ist damit
   keine Zahl, die an zwei Orten gepflegt wird — es ist dieselbe Zahl.

   > ~~«Die Hoehe von 48px stammt vom Auswahlfeld»~~ — stimmte bis zum
   > 23.09.2026 abends; **der Satz gilt unveraendert weiter, nur die Zahl
   > ist eine andere.** Genau darum musste hier nichts umgebaut werden.

   ⚠ **Sie rollt, statt umzubrechen.** Drei Felder passen auf jeder Breite,
   fuenf nicht mehr; ein Umbruch machte aus einem gemeinsamen Rahmen zwei
   halbe. `overflow-x:auto` haelt sie einzeilig. Der Rollbalken ist
   ausgeblendet — bei 44px Hoehe naehme er ein Sechstel der Leiste.

   ⚠ **Der Strich steht LINKS am Knopf, nicht rechts.** Rechts stuende er
   auch am letzten und doppelte dort den Aussenrand.

   ⚠ **Farbe und Staerke stehen als `--seg-linie` an der Leiste**, nicht an
   jeder der vier Regeln. Die Papierfassung setzt das Token einmal um; ohne
   es waeren es dort vier Ueberschreibungen. */
/* ⚠⚠ **Eckig, nicht mit runden Enden — Didi, 23.09.2026 abends.**

   > ~~`border-radius:100px`~~ — die Leiste stand als Kapsel neben einem
   > Auswahlfeld mit scharfen Ecken.

   Didi: «Eckig statt mit runden Enden, wie das Auswahlfeld daneben —
   ueberall, wo sie vorkommt.»

   **Die Null ist nicht gegriffen, sie ist abgelesen:** `.fe select` fuehrt
   `border-radius:0` (bei 10927). Die Leiste steht in allen drei Faellen
   direkt neben so einem Feld — auf `/spiele/`, in der Anlassliste und auf
   `/news/` —, und zwei Nachbarn mit verschiedenen Ecken lesen sich als
   zwei Bauteile statt als eine Zeile.

   ⚠ **Eine Regel genuegt fuer alle drei Orte.** Genau dafuer ist die
   gemeinsame Bauform da; wer hier aendert, aendert ueberall. */
/* ⚠⚠ **GLEICH BREITE FELDER — Didi, 24.09.2026 ─────────────────

   > ~~`display:inline-flex;flex-wrap:nowrap`~~

   «Alle Felder gleich breit: so breit wie das breiteste, mit einer
   Mindestbreite von etwa 64 px. Die Leiste bleibt so breit, wie ihre
   Felder es ergeben — nicht ueber die ganze Bildschirmbreite strecken.»

   ⚠⚠ **Mit Flex geht das nicht, und zwar grundsaetzlich.** `flex:1`
   verteilt UEBRIGEN Platz — den gibt es nur, wenn der Behaelter eine
   feste Breite hat. Diese Leiste soll aber so breit sein wie ihr Inhalt.
   In einem inhaltsbreiten Flexkasten ist nichts uebrig, also waechst
   nichts, und «H» bleibt schmaler als «Alle».

   **Ein Raster kann beides zugleich.** `grid-auto-columns:minmax(64px,1fr)`
   bei inhaltsbreitem Behaelter: Die `1fr`-Spuren nehmen alle die Groesse
   der GROESSTEN Spur an — das ist genau «so breit wie das breiteste» —,
   und `minmax()` zieht den Boden bei 64px ein. Kein Strecken auf die
   Bildschirmbreite, weil `inline-grid` sich weiterhin nach dem Inhalt
   richtet.

   ⚠ **`grid-auto-flow:column` ist Pflicht.** Ohne sie stapelt das Raster
   die Felder untereinander — aus der Leiste wuerde eine Spalte.

   ⚠ Das seitliche Rollen bleibt: `overflow-x:auto` wirkt am Raster wie am
   Flexkasten, und bei vier oder fuenf Feldern laeuft es weiterhin ueber
   statt umzubrechen. `flex:0 0 auto` an `.mini` ist damit wirkungslos
   geworden; es steht noch da, weil es nichts kostet und die Regel auch
   ausserhalb eines Rasters gebraucht wird. */
/* ⚠⚠ **Der zweite Griff gehoert den Seitenzahlen — 24.09.2026.** Didi:
   «Gestaltung: die bestehende Segmentleiste … **Keine neue Knopfart.**» Von
   hier bis zur Zeigerregel traegt jede Regel der Leiste darum einen Selektor
   mehr; **keine einzige Deklaration steht deswegen zweimal.** Wer die Leiste
   aendert, aendert die Blaetterleiste mit — genau das ist gemeint. Die drei
   Zahlen, die die Blaetterleiste NICHT von hier nimmt, stehen bei
   `.seitenzahlen`. */
.seitenzahlen .nav-links,
.filt.segleiste{--seg-linie:rgba(255,255,255,.28);
  display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(64px,1fr);
  gap:0;max-width:100%;min-height:44px;
  border:1px solid var(--seg-linie);border-radius:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.seitenzahlen .nav-links::-webkit-scrollbar,
.filt.segleiste::-webkit-scrollbar{display:none}
/* `display:inline-flex` schlaegt `.filt[hidden]{display:none}` weiter oben —
   gleiches Gewicht, spaetere Zeile. Diese Zeile holt es zurueck. Sie ist
   Vorsorge: Heute setzt niemand `hidden` an eine Segmentleiste, weil
   `data-kein-feld` `leisteAufbauen()` fernhaelt. Die Regel oben bei `.filt`
   steht aus genau demselben Grund und hat schon einmal 317px Ueberlauf
   gekostet. */
.filt.segleiste[hidden]{display:none}
/* ⚠⚠ **`position:relative` am Knopf, und es ist keine Vorsorge.** Gemessen
   am 23.09.2026 bei 320px: Die Seite war 334px breit statt 320 — der
   Ueberlauf kam aus dem versteckten `.seg-wort`. Es ist `position:absolute`
   wie jedes `.vh`, und ein absolut gesetztes Element ohne gesetzten Vorfahren
   nimmt seine Stelle im SEITENraster ein. In einer rollenden Leiste liegt
   diese Stelle ausserhalb des Bildschirms, und ein einziges Pixel dort zieht
   die ganze Seite in die Breite.

   > **Ein `.vh` ist nur so unsichtbar wie sein Vater es zulaesst.** Es
   > verschwindet fuers Auge, aber es bleibt ein Kasten mit einer Stelle.

   Der Knopf haelt es jetzt fest; die rollende Leiste kann es nicht mehr
   hinausschieben. **Das gilt fuer jede kuenftige Leiste mit Kurzform**, auch
   fuer eine mit fuenf Feldern, die wirklich rollt. */
.seitenzahlen .page-numbers,
.filt.segleiste .mini{position:relative;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-left:1px solid var(--seg-linie);border-radius:0;
  background:transparent;color:var(--tx-haupt);padding:0 17px;
  font-weight:600;font-size:var(--tx-klein);letter-spacing:.04em;text-transform:none}
.seitenzahlen .page-numbers:first-child,
.filt.segleiste .mini:first-child{border-left:0}
/* ⚠⚠ **Das Gelb ist vom Gewaehlten auf den Zeiger gewandert — Didi,
   24.09.2026.**

   > ~~`.filt.segleiste .mini:hover{background:rgba(255,255,255,.09);color:#fff}`~~
   > ~~`.filt.segleiste .mini[aria-pressed="true"],`~~
   > ~~`.filt.segleiste .mini[aria-current]{background:var(--gelb);color:var(--dun)}`~~

   Didi: «Das gewaehlte Feld ist heute gelb und sieht damit aus wie die
   Marken H/A in der Liste, die etwas anderes bedeuten.»

   **Zwei Zeichen, eine Farbe, zwei Bedeutungen.**
   `.rz-tag:not(.ausw) .rz-tag-kurz` traegt `background:var(--gelb)`
   und sagt «Heimspiel»; dieselbe Flaeche in der Leiste sagte «hier stehst
   du». Solange beide dauerhaft stehen, muss der Leser sie auseinanderhalten
   — und die Leiste ist die juengere von beiden.

   **`--halb` ist der Grauwert des Themes, keine neue Zahl.** Er ist der
   einzige aus der Palette, der ZWEI Bedingungen zugleich erfuellt: hell
   genug, dass die dunkle Schrift darauf liest (7,13 gegen `--dun`), und
   dunkel genug, dass die Flaeche auf weissem Papier ueberhaupt eine Flaeche
   ist (2,76 gegen Weiss). Die uebrigen scheitern an je einer:
   `--tafel-hell` traegt keine dunkle Schrift (1,37), `--papier-flaeche`
   ist auf Papier kaum von Weiss zu unterscheiden (1,14).
   **Darum steht auf beiden Gruenden derselbe Wert** — die zwei Fassungen
   brauchten keine zwei Grauwerte, sie brauchten einen, der beides kann.

   ⚠ **Die Reihenfolge ist umgedreht, und das ist die halbe Aenderung.**
   Bis heute stand die Zeigerregel VOR der Gewaehlt-Regel, damit das
   Gewaehlte sein Gelb beim Ueberfahren behielt. Der Grund ist entfallen:
   Damals haette der Zeiger dem Gewaehlten etwas WEGgenommen, heute gibt er
   ihm etwas. Beide Regeln wiegen (0,4,0); die spaetere gewinnt. **Dieselbe
   Ordnung fuehrt das Menue schon** (`.drop a[aria-current="page"]:hover`)
   — der Zeiger antwortet auf jedem Feld, auch auf dem gewaehlten.

   Der Zeiger baut wie die uebrigen: `background:var(--gelb);color:var(--dun)`
   in einer `@media(hover:hover)`-Klammer, wortgleich `.lb-knopf:hover`
   und `.ww:hover`. Nur die Randfarbe bleibt `--seg-linie`
   statt Gelb, sonst faerbte der Zeiger den Trennstrich zum Nachbarn mit —
   der Trennstrich gehoert der Leiste, nicht dem Feld. */
/* ⚠ **Die Seitenzahl sagt ihren Zustand mit `aria-current`**, und zwar ohne
   Zutun: `paginate_links()` setzt `aria-current="page"` an die laufende Seite.
   Es ist dieselbe Unterscheidung wie eine Zeile hoeher — ein Verweis hat eine
   Adresse und keinen gedrueckten Zustand. */
.seitenzahlen .page-numbers[aria-current],
.filt.segleiste .mini[aria-pressed="true"],
.filt.segleiste .mini[aria-current]{
  background:var(--papier-flaeche);color:var(--dun);font-weight:700;border-color:var(--seg-linie)}
/* ⚠ **Beim Blaettern antwortet nur `a`.** In der Leiste ist jedes Feld ein
   Ziel; in der Blaetterleiste sind zwei Felder `<span>` — das «…» und die
   laufende Seite. **Eine gelbe Flaeche verspricht ein Ziel**, und hinter dem
   «…» steht keines. */
@media(hover:hover){.seitenzahlen a.page-numbers:focus-visible,
.seitenzahlen a.page-numbers:hover,
.filt.segleiste .mini:focus-visible,
.filt.segleiste .mini:hover{
  background:var(--gelb);color:var(--dun);border-color:var(--seg-linie);outline:0}}
/* Die Kurzform ist die Ausnahme und steht darum aus: Ueber 560px zeigt die
   Leiste das Wort, wie Didi es fuer den Computer verlangt. */
.seg-kurz{display:none}

/* ── UNTER 560px: DIE KURZFORM ─────────────────────────────────────────
   Didi: «Handy: verkuerzt zu «Alle | H | A» … «H» und «A» tragen «Heim» und
   «Auswaerts» als title.»

   ⚠⚠ **Der `title` steht da, aber er traegt nicht.** Er erscheint beim
   Verweilen mit dem Zeiger — auf dem Handy also nie —, und ein
   Vorleseprogramm liest ihn nur, wenn das Element sonst namenlos ist.
   **Namenlos ist der Knopf hier nicht:** `.seg-wort` bleibt in ihm stehen
   und traegt den Namen, der `title` ist die Zugabe fuer den Zeiger. Wer das
   Wort aus dem Markup nimmt und sich auf `title` verlaesst, hat auf dem
   Handy einen Knopf, der «H» heisst.

   **Die Schwelle ist 560 und nicht 640.** Ausgeschrieben misst die Leiste
   rund 250px; daneben braucht das Auswahlfeld den Boden, den die
   Filterzeile ohnehin fuehrt (`.filterzeile .fe{min-width:150px}`). 250 +
   10 + 150 ergibt 410 Inhaltsbreite, also rund 450px Fenster. 560 laesst
   Luft, 640 waere eine Kuerzung ohne Not.

   **Dieselbe Behandlung wie `.rz-tag-kurz + .rz-tag-wort`** — das Wort
   verschwindet fuers Auge und bleibt im Zugangsbaum. Der Nachbarschafts-
   waehler ist der Grund, warum ein Knopf OHNE Kurzform sein Wort behaelt:
   Die Regel trifft nur, wo eine Kurzform davorsteht. */
@media(max-width:559px){
  .seg-kurz{display:inline}
  .seg-kurz + .seg-wort{position:absolute;width:1px;height:1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  /* ⚠⚠ **Eine Stufe kleiner auf dem Handy — Didi, 23.09.2026 abends.**
     > ~~`padding-inline:14px`~~ allein, in der Schrift des Computers.

     Didi: «Auf dem Handy etwas kleiner: weniger Innenabstand und eine
     Stufe kleinere Schrift. Auf dem Computer bleibt die Groesse, wie sie
     ist.»

     **`--tx-etikett` ist die naechste Stufe der Hausskala**, nicht eine
     neue Zahl: 17 / 14 / 11 (Zeilen 350-352). Die Leiste stand auf
     `--tx-klein`; eine Stufe tiefer ist 11.

     > ~~⚠⚠ **Die Hoehe bleibt bei 48px, und das ist Absicht.** Didi hat
     > zwei Dinge genannt — Innenabstand und Schrift — und die Hoehe ist
     > keines davon … eine niedrigere Leiste risse die Zeile wieder
     > auseinander.~~ — eine halbe Stunde alt und schon ueberholt.

     ⚠⚠ **Die Hoehe ist 44px, und die Begruendung von vorhin traegt sie
     mit.** Der Einwand war nie «48 muss sein», sondern «die Leiste darf
     nicht allein schrumpfen». Didi hat daraufhin beide bestellt — Feld
     UND Leiste —, und damit ist die Bedingung erfuellt statt umgangen.
     Die Zeile bleibt eine Zeile. */
  .filt.segleiste .mini{padding-inline:10px;font-size:var(--tx-etikett)}
}

/* Symbole */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.13em;margin-right:.4em;flex:none}

/* Bildflächen (im Theme durch echte Bilder ersetzt) */
/* **Der Prototyp zeichnet jede Bildfläche als `<div>` mit Hintergrund;
   WordPress liefert ein `<img>`.** Für ein ersetztes Element bedeutet das
   einen Unterschied, den keine der übernommenen Regeln vorsieht: `width:auto`
   löst auf die Eigenbreite der Datei auf, nicht auf den Behälter.

   Gemessen am 31.08.2026 im Hero: `.hero .f{position:absolute;inset:0}` setzt
   alle vier Kanten, und trotzdem blieb das Bild bei **1200×900** stehen — bei
   1440px Fenster 240 Pixel Herofläche ohne Bild, bei 2560px **1360**. Sichtbar
   war dort das nackte `--f`-Grün.

   > **Vier gesetzte Kanten reichen einem `<img>` nicht.** Ein `<div>` dehnt
   > sich hinein, ein Bild legt sich in die Ecke und behält seine Grösse. */
.f{position:relative;overflow:hidden;background:#243a29}
/* **`object-position` gehört dazu, seit die Bilder `<img>` sind — 02.09.2026.**

   Der Prototyp hat ausser beim Hero kein `background-position`: Dort sind
   Bilder Hintergründe, und die stehen mittig, weil das die Vorgabe ist. Ein
   `<img>` mit `object-fit:cover` hat dieselbe Vorgabe — **nur steht sie
   nirgends geschrieben, und was nirgends steht, verschiebt der nächste
   Abgleich versehentlich.**

   > **Ein Bild, das im richtigen Verhältnis vorliegt, wird nicht mehr
   > beschnitten.** Der Grundwert ist die Absicherung für Bilder, die nicht
   > durchs Bildwerkzeug gingen.

   Kein Fokuspunkt, keine Verschiebung nach oben: Didi schneidet vor dem
   Hochladen auf das Verhältnis zu, das die Stelle erwartet — Teamfotos 16:9,
   Porträts 3:4, Bildbänder 3:1. Wo das eingehalten ist, schneidet `cover`
   nichts weg und die Angabe ändert nichts. Wo es nicht eingehalten ist,
   schneidet der Browser aus der Mitte statt aus einer Ecke. */
/* **`img.f` traf am 02.09.2026 kein Element mehr — und bleibt trotzdem.**

   Neun Vorlagen gaben ihr Bild als `<img class="f">` aus. **`.f` hat zwei
   Rollen:** `.nk .f{aspect-ratio}` ist der Rahmen, `height:100%` der
   Fueller. Traegt ein Element beide, bekommt der Rahmen keine Hoehe -- er
   IST das Bild, und `aspect-ratio` greift ins Leere.

   > **Ein Element in beiden Rollen: Der Rahmen bekommt keine Hoehe, weil er
   > selbst das Bild ist.**

   Alle neun bauen jetzt `fch_core_bildrahmen()`, also `<div class="f">` mit
   dem Bild darin -- die Form, die der Prototyp an 147 Stellen fuehrt und die
   `.f > img` bedient.

   Diese Regel ist die Sicherung fuer den Tag, an dem jemand wieder ein
   `class="f"` an ein `<img>` schreibt: Dann sieht es wenigstens nicht kaputt
   aus. **`pruef/bildrahmen.py` meldet es seither als Befund**, damit es nicht
   bei «sieht nicht kaputt aus» bleibt. */
img.f{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* **Der Hero ist die eine Ausnahme, und der Prototyp hat sie gemessen.**

   `.f-hero::before{background-position:50% 34%}`, unter 700px `44% 30%`.
   Das Bild ist 1400×1519 hoch und steht in einem Feld von 1440×445: `cover`
   schneidet fast zwei Drittel der Höhe weg. **Mittig sind das die Beine, bei
   34 Prozent die Gesichter.**

   Die zweite Zahl ist keine Verdopplung derselben Absicht: Auf einem schmalen
   Feld ist der Ausschnitt hochkant, und dann liegt die Gruppe weiter links. */
/* **`.f-hero > img` und nicht `img.f-hero` — berichtigt am 03.09.2026.**

   Am 02.09. stand die Regel auf `img.f-hero`, weil das Bild damals die
   Klasse selbst trug. **Im selben Zug ist sie an den Rahmen gewandert**:
   `fch_core_bildrahmen()` baut `<div class="f f-hero"><img></div>`, und das
   Bild darin traegt keine Klasse mehr. Die Regel traf danach null Elemente,
   und das Hero stand wieder auf dem Vorgabewert `50% 50%` -- mittig, also
   auf den Beinen.

   > **Wer den Traeger verschiebt, verschiebt jede Regel mit, die auf ihn
   > zeigte.** Beides stand in derselben Aenderung, und die eine Haelfte
   > wusste nichts von der anderen.

   **Keine Messung hat es gemeldet, und das hat einen Grund:** `img.f-hero`
   ist eine Regel, die nur das Theme fuehrt -- der Prototyp loest dasselbe
   mit `.f-hero::before{background-position}`. `selektoren.py` vergleicht
   Selektoren des Prototyps; eine eigene Regel des Themes ohne Traeger faellt
   dort nicht auf. **Das ist die blinde Stelle bei allem, was nur hier
   steht.** */

/* **Die einzige Regel, die dieses Theme dem Prototyp voraushat — und sie
   ist der Preis für echte Bilder.**

   Der Prototyp zeigt seine 147 Bilder als `background-image` an einem
   leeren `div.f`. Ein Hintergrundbild hat keinen Alt-Text; ein Vorleser
   geht darüber hinweg. Das Theme setzt darum ein `<img>` in denselben
   Rahmen.

   Damit gibt es eine Verschachtelung, die der Prototyp nicht kennt:
   `.f > img`. Ohne eine eigene Regel erbt das innere Bild die Regeln des
   Rahmens — bei `.jahrzehnt .f{margin:16px 0 14px}` sind das sechzehn
   Pixel Versatz nach unten, gemessen am 02.09.2026.

   **Sie ändert keine bestehende Deklaration.** `.f > img` trifft im
   Prototyp nichts, weil es dort kein Bild in einem Rahmen gibt. */

.f > img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;margin:0;aspect-ratio:auto}
/* **Und diese zwei Zeilen stehen HINTER `.f > img` — 03.09.2026.**

   Beide wiegen (0,1,1). Sie standen zwanzig Zeilen davor, und damit gewann
   die allgemeine Regel: das Hero stand auf `center center`.

   > **Bei gleichem Gewicht entscheidet die Reihenfolge, und die allgemeine
   > Regel gehoert nach vorn.** Sie ist der Rueckfall; was danach kommt,
   > nimmt sich heraus, was es braucht. */
.f-hero > img{object-position:center 34%}
@media(max-width:700px){.f-hero > img{object-position:44% 30%}}
/* Das Bildverhaeltnis haengt am Behaelter, wie bei .nk .f, .person .f
   und .gal .f. Die Reichweite jedes Selektors ist nachgemessen; keiner
   trifft ein Bildfeld, das nicht gemeint ist. Der Kindselektor bei .g2
   und .g3 ist noetig, weil dieselben Rasterklassen auch Kartenkacheln
   enthalten — .g3 .f traefe 21 statt 3. */
.zwei .f{aspect-ratio:16/9}
/* Fanion500: das Mannschaftsbild steht ueber die ganze Spaltenbreite
   zwischen Einstieg und zweispaltigem Satz. Das Verhaeltnis haengt am
   Behaelter, wie beim Clubhaus entschieden.

   3:1, und der Grund ist zweimal derselbe. Erstens die Hoehe: bei 2:1 mass
   das Feld 1280x640 bei 1440px und 1536x768 bei 1916 — 71 bis 85 Prozent
   eines 900px hohen Fensters. Man sah nur noch Bild, der naechste Abschnitt
   begann ausserhalb des Sichtfelds. Bei 3:1 sind es 1280x427 und damit 47
   Prozent: das Bild wird ein Aufmacher statt einer Wand.
   Zweitens das Motiv: vier Spieler nebeneinander sind breit, und auf der
   alten Website steht die Aufnahme als Band ueber die Textbreite. Ein
   2:1-Kasten muesste oben und unten Luft dazuerfinden, die auf dem Foto
   nicht ist.

   Der Kindselektor `>` ist noetig und nicht Zierde: `#v-fanion .f` traefe
   drei Felder statt einem — das Mannschaftsbild und die zwei Logofelder der
   Sponsorenkarten, die ihre 16/9 aus `.nk .f` beziehen. Gemessen trifft
   `.wrap > .f` im ganzen Prototyp genau ein Element, und `#v-fanion
   .fliess .f` traefe null: im Fliesstext dieser Ansicht steht kein Bild.

   Der Rand ist der Wert von `.fliess .f` und keine eigene Zahl: die Frage
   «wieviel Luft braucht ein Bild im Textfluss» ist dieselbe, ob das Bild in
   einer Spalte steht oder ueber beiden. */
#v-fanion .wrap > .f{aspect-ratio:3/1;margin:22px 0}
/* ⚠ **Dieselbe Regel, wenn die Unterschrift-Huelle dazwischensteht** —
   22.09.2026, siehe `.bu` weiter unten. Der Rand wandert dabei an die Huelle
   und nicht an den Rahmen: Steht er am Rahmen, liegen 22 px zwischen Bild und
   seiner eigenen Unterschrift, und die Zeile gehoert zum Bild. */
#v-fanion .wrap > .bu{margin:22px 0}
#v-fanion .wrap > .bu > .f{aspect-ratio:3/1}
/* Die Sportanlage-Seite trägt in dieser Spalte zwei Bildfelder: das Luftbild
   des Langacker und eine Collage aus vier Innenaufnahmen des Vereinslokals.
   Die Collage ist 2:1 gebaut. Bei 16/9 schnitte `cover` je 66 von 1200 px an
   den Seiten weg — bei einer Aufnahme wäre das Beschnitt, bei einem gebauten
   Bild wirken zwei der vier Felder danach zufällig gerahmt.
   Beide Felder gehen darum auf 2:1, nicht nur die Collage: zwei verschieden
   hohe Bildkästen in derselben Spalte sind eine Unregelmässigkeit und keine
   Aussage — der Leser sieht nicht, dass das eine eine Collage ist, er sieht
   zwei Kästen, die nicht fluchten. Dem Luftbild steht das flachere Format:
   die zwei Plätze füllen den Rahmen, statt Dachlandschaft und Wiese
   mitzunehmen.
   Auf die Ansicht eingeschränkt, weil `.zwei .f` nachgemessen VIER Felder in
   DREI Ansichten trifft — dazu `verein` (.f-abend) und `kontakt` (.f-anlage,
   dort 748 statt 687 px breit). Die zwei sind nicht gemeint. */
#v-anlage .zwei .f{aspect-ratio:2/1}
/* Ein Bild im Fliesstext atmet nach oben und unten gleich. */
.fliess .f{margin:22px 0}
.kapitel .f{aspect-ratio:4/3;position:sticky;top:104px}
.jahrzehnt .f{aspect-ratio:16/9;margin:16px 0 14px}
.g2 > .f{aspect-ratio:4/3}
.g3 > .f{aspect-ratio:3/4}

/* ── Die Bildunterschrift ────────────────────────────────────────────────

   **Bei einem historischen Mannschaftsfoto ist die Zeile darunter oft das
   Wichtigste am Bild.** Wer 1976 auf dem Langacker steht, sieht man dem Bild
   nicht an.

   ⚠ **Der Prototyp kennt keine.** Nachgesehen am 22.09.2026: null
   `figcaption` in `fch-prototyp.html`, und genau eine `<figure>` (die
   `.mannschaftsbild`). Diese Form ist darum nicht aus dem Prototyp
   uebernommen, sondern aus der naechsten Rolle im Haus gebaut — und die ist
   `.spl-tx`, der kleine Text unter einem Sponsorenlogo. Dieselbe Frage
   («was steht klein unter einem Bild»), dieselben vier Werte:
   `margin-top:8px`, `--tx-klein`, `1.35`, `--tx-leise`, dazu `max-width:40ch`.

   **Und trotzdem eine eigene Klasse und nicht `.spl-tx` mitbenutzt.** Die
   zwei sehen heute gleich aus, sind aber zwei Aussagen: Dort steht, WOFUER
   ein Sponsor da ist, hier, WAS auf dem Bild ist. Wer sie zusammenlegt,
   koppelt zwei Entscheidungen, die auseinanderlaufen duerfen.

   ⚠ **Hier stand bis zum 22.09.2026 eine Regel `.bu{margin:0}`** mit der
   Begruendung, `figure` bringe `margin:1em 40px` aus dem Browser mit und die
   40 links kippten jede Rasterkachel um. **Nachgesehen: `*{margin:0}` ganz oben
   nimmt sie schon weg.** Die Regel haette nie etwas getan und ist
   darum entfallen; `.mannschaftsbild{margin:0}` weiter unten ist derselbe
   Fall und bleibt nur, weil sie dort schon stand. Den Abstand gibt das Raster
   mit seinem `gap`.

   ⚠ **`.bu` entsteht NUR, wo eine Unterschrift steht UND die Aufrufstelle sie
   zulaesst** (`bildrahmen.php`, Schalter `bu`). Ohne sie bleibt der Rahmen
   direktes Kind seines Behaelters.

   **Gemessen am 23.09.2026 ueber 94 Adressen mit 104 Rahmen: 15 bekamen eine
   Huelle, 89 blieben Zeichen fuer Zeichen, was sie waren.** Die Zahl ist die
   Antwort auf eine Grundsatzfrage und kein Zufall: **ohne Schalter waeren es
   46 von 104** gewesen — Unterschriften unter jeder Newskachel, unter jedem
   Portraet und unter dem Hero.

   ⚠ **Hier stand bis zum 23.09.2026 die Messung vom 22.09.:** «Gemessen ueber
   88 Adressen mit 111 Rahmen: 17 bekamen eine Huelle, 94 blieben Zeichen fuer
   Zeichen, was sie waren.» Sie ist nicht falsch geworden, sondern veraltet —
   der Bestand hat sich seither geaendert (die Bilderstrecke ist am 23.09. in
   `inc/bildstrecke.php` zusammengezogen worden) und die Regel dazu auch.

   Die zwei Regeln `.g2 > .bu > .f` und `.g3 > .bu > .f` sind kein Zusatz,
   sondern DIESELBE Regel fuer den Fall, dass die Huelle dazwischensteht:
   `.g2 > .f` und `.g3 > .f` greifen mit `>`, weil dieselben Rasterklassen auch
   Kartenkacheln fuehren (siehe oben, `.g3 .f` traefe 21 statt 3). Der
   Kindselektor bleibt darum, er bekommt nur eine zweite Stufe. */
.bu-tx{margin-top:8px;font-size:var(--tx-klein);line-height:1.35;
  color:var(--tx-leise);max-width:40ch}
.g2 > .bu > .f{aspect-ratio:4/3}
.g3 > .bu > .f{aspect-ratio:3/4}

/* ⚠ **Zwei Regeln oben geben dem Rahmen einen eigenen Rand, und der gehoert
   an die Huelle.** Steht er am Rahmen, liegt er ZWISCHEN dem Bild und seiner
   eigenen Unterschrift — die Zeile rueckt vom Bild weg, zu dem sie gehoert.
   **Gemessen auf /vereinsbus/ am 22.09.2026: 14 px statt der 8 px, die
   `.bu-tx` setzt.** `.jahrzehnt .f{margin:16px 0 14px}` war die Ursache.

   Der Kindselektor macht die Fassung staerker als die Regel oben (drei
   Klassen gegen zwei); sie gewinnt damit unabhaengig von der Reihenfolge.

   **`.fliess` steht vorsorglich dabei und ist heute unbenutzt** — nachgemessen
   ueber 88 Adressen: zwei `.fliess .f`, beide auf /sportanlage/, beide ohne
   Huelle. Der Grund ist, dass ihr Markup beim Saeen entsteht
   (`Datenstand/seiten.php`, Aufruf von `fch_core_bildrahmen()`) und fertig in der Seite steht; beim naechsten
   Saeen bekaemen sie eine.

   ⚠ **Hier stand bis zum 23.09.2026 dieser Satz, und die Regel darunter
   fehlte darum:**

   > «**`.art-kopf .f{margin:24px 0 0}` steht NICHT dabei**, und das ist kein
   > Vergessen: Seine einzige Aufrufstelle (`single.php:140`) setzt
   > `alt => ''` und schliesst die Unterschrift damit aus — eine Regel dafuer
   > koennte nie greifen.»

   **Er war richtig, solange `alt => ''` die Unterschrift mit abschaltete.**
   Am 23.09.2026 ist diese Kopplung aufgehoben (Didi: «Die Unterschrift muss
   unabhaengig vom Alternativtext ausgegeben werden»); das Kopfbild des
   Beitrags zeigt seither eine, und die dritte Randfassung steht jetzt da.
   Derselbe Grund wie bei den zwei darueber: Der Rand gehoert an die Huelle,
   sonst liegen 24 px zwischen dem Bild und seiner eigenen Unterschrift.

   > **Ein Kommentar, der eine Regel mit «kann nie greifen» begruendet, ist
   > ein Kommentar mit Verfallsdatum.** Das Datum war der Tag, an dem die
   > Bedingung woanders hin umzog. */
.jahrzehnt .bu{margin:16px 0 14px}
.jahrzehnt .bu > .f{margin:0}
.fliess .bu{margin:22px 0}
.fliess .bu > .f{margin:0}
.art-kopf .bu{margin:24px 0 0}
.art-kopf .bu > .f{margin:0}

/* Das Angebotsbild steht NEBEN dem Einleitungstext, nicht darueber. Gemessen
   bei 1440: der Bandenblock faellt von 963 auf 572 px, das Bild von 1280x549
   auf 498x280. Wichtiger als die 391 px ist, was darunter liegt — die
   Preistabelle rueckt direkt unter den Text, dorthin, wofuer jemand ein
   Angebot ueberhaupt aufklappt.

   Verworfen: dasselbe Bild flacher ueber die volle Breite. 3:1 spart nur
   122 px und bleibt ein Bild, das eine eigene Zeile beansprucht. Anteasern
   heisst danebenstehen, nicht flacher werden.

   Das Verhaeltnis haengt am Behaelter und nicht am Bild — dieselbe
   Entscheidung wie beim Clubhaus und bei Fanion500. Die alte Regel
   `.angebot .ressort-inh > .f{aspect-ratio:21/9;margin-bottom:24px}` ist
   ersatzlos gefallen: nach dem Umbau ist das Bildfeld kein direktes Kind von
   `.ressort-inh` mehr, die Regel haette keinen Fall.

   4:3 wurde gemessen und verworfen: die Einleitungstexte sind zwei bis vier
   Zeilen lang, 53 bis 105 px. Neben einem 374 px hohen Bild blieben 295 px
   leere Spalte, bei 16:9 sind es 201. Und 16:9 fuehrt die Website schon. */
.angebot-kopf{align-items:start}
/* Fassung D. Der Deckel bei 320 px ist der eigentliche Griff, nicht das
   Verhaeltnis. Ohne ihn fuellt das Bild seine Spalte, der `.zwei`-Block ist so
   hoch wie das Bild, und die Preistabelle darunter wartet, bis das Bild zu Ende
   ist — gemessen ein Loch von rund 400 px zwischen dem dreizeiligen
   Einleitungstext und der Tabelle. Mit 320 px ist der Block 471 statt 963 px
   hoch, und die Tabelle steht dort, wofuer jemand ein Angebot aufklappt.
   `margin-left:auto` schiebt das Bild an die rechte Kante, damit die Leere
   nicht zwischen Text und Bild steht, sondern aussen. */
.angebot-kopf .f{aspect-ratio:16/9;max-width:320px;margin-left:auto}
/* Unter 900 px stapelt `.zwei`, und damit hat der Behaelter eine andere Form:
   das Bild steht wieder ueber der Preistabelle und ueber die volle Breite. Bei
   16:9 waere es dort 549 px hoch statt der 314, die es vorher mass — der
   Bandenblock waere bei 768 px von 813 auf 1038 gewachsen und bei 390 von 965
   auf 1069. Der Gewinn faellt auf den Bildschirm, der Preis fiele aufs Telefon
   und aufs Tablet.
   **Das widerspricht dem Grundsatz nicht, es folgt ihm:** Das Verhaeltnis
   haengt am Behaelter, und unter 900 hat der Behaelter eine andere Form. */
@media(max-width:899px){.angebot-kopf .f{aspect-ratio:21/9;max-width:none;margin-left:0}}
/* Die Marke erscheint nur, wo eine gesetzt ist — echte Bilder brauchen keine.

   ── Nachgezaehlt am 03.09.2026, weil sie als fehlend gemeldet wurde ────

   Didi vermisst «SAISONABSCHLUSS» und «GRUEMPELTURNIER» unten links im Bild
   der Newskarten. Im Prototyp stehen sie dort — und nur dort:

     103 `data-l` im ganzen Prototyp
      57 davon an einem leeren `div.f` mit Attrappenklasse
       0 an einem `<img>`

   **Die Marke ist die Beschriftung der Attrappe.** Sie sagt dem Leser des
   Prototyps, welches Bild an diese Stelle gehoert — sie ist eine Notiz an
   sich selbst und keine Bildunterschrift.

   > **Was eine Attrappe beschriftet, beschriftet kein Bild.** Ueber einem
   > echten Foto stuende dort weisser Text auf einem beliebigen Ausschnitt,
   > und niemand haette entschieden, was er sagen soll.

   **Das Theme setzt sie darum weiter nur, wo kein Bild da ist** — in
   `home.php`, `front-page.php` und der Kartenreihe steht `data-l` im
   Ersatzfall und im Bildfall nicht. Wer eine echte Bildunterschrift will,
   entscheidet eine neue Bauform: wo sie steht, was sie sagt, und was
   geschieht, wenn sie fehlt. */
.f:not([data-l])::after{content:none}
/* Im Seitenkopf sitzt der Titel über dem Bild — die Beschriftung der Bildattrappe
   lag dort auf der Datumszeile. Im Theme entfällt sie ohnehin mit dem echten Bild. */
.ph .f::after{content:none}
.f::after{
  content:attr(data-l);position:absolute;left:12px;bottom:10px;z-index:4;
  font-family:var(--b);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.ov{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(11,11,10,.88) 0%,rgba(11,11,10,.34) 46%,rgba(11,11,10,0) 78%)}

/* Raster */
.g2,.g3,.g4{display:grid;gap:18px}
@media(min-width:620px){.g2,.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}

/* Karten */
.nk{display:block;background:var(--fl-tafel);overflow:hidden;transition:background .16s}
@media(hover:hover){.nk:hover{background:var(--tafel-hell)}}
/* Ohne Seitenverhältnis fällt die Bildfläche auf null zusammen — gleiche Höhe wie .gross */
/* **3:1, wie der Aufmacher — es ist dasselbe Bild.** Die Kachel zeigt das
   Beitragsbild, und der Bestand fuehrt 2048 x 704. Bei 16:9 haette WordPress
   daraus 1252 x 704 geschnitten: **796 Bildpunkte weg, 398 je Seite, 39
   Prozent der Breite — aus der Mitte.** Das ist derselbe Schnitt, den 3:1 beim
   Aufmacher vermeidet, nur eine Ebene tiefer. Dass die Kachel klein ist,
   aendert nichts daran, dass aussen Leute stehen. Ein Beitragsbild wird nicht
   geschnitten, es wird gezeigt. */
.nk .f{aspect-ratio:3/1}
/* Filterleiste: Knöpfe links, Auswahl- und Suchfelder rechts */
.filterzeile{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:18px;margin-bottom:28px}
.filterzeile .fe{min-width:150px}
/* **`align-items:end` — der Knopf steht auf der Feldkante, 03.09.2026.**

   `.filterzeile` richtet ihre Kinder unten aus, und das gilt fuer die
   Knopfreihe und die Feldgruppe. **Innerhalb der Feldgruppe galt es nicht.**
   Gemessen bei 1440:

     div.fe        oben 0   78 px hoch   (22 Beschriftung + 6 + 48 Feld)
     button.btn    oben 0   48 px hoch

   Der Knopf stand damit auf der Hoehe der BESCHRIFTUNGEN und schwebte
   dreissig Pixel ueber der Unterkante der Felder, neben denen er steht.

   > **Wer eine Reihe unten ausrichtet, hat noch nichts ueber die Reihe darin
   > gesagt.**

   **Der Knopf ist die einzige Zutat des Themes an dieser Stelle** -- der
   Prototyp filtert im Browser und braucht keinen. Umso mehr muss er
   aussehen, als haette er immer dazugehoert. */
.filterwahl{display:flex;flex-wrap:wrap;align-items:end;gap:14px}

/* ══ DIE FILTERZEILE AUF /NEWS/ — DREI FILTER, EINE ZEILE, 23.09.2026 ══

   Didi: «Computer: alle drei Auswahlfelder in einer Zeile — Rubrik, Team,
   Jahr — und die Beitraege direkt darunter.» Und: «Handy: die Rubriken als
   Segmentleiste …, darunter Team und Jahr nebeneinander in einer Zeile.»

   ⚠ **Ein eigener Umschlag statt Aenderungen an `.filterzeile`.** Die traegt
   `justify-content:space-between` und schiebt ihre beiden Kinder an die
   Raender — richtig fuer Teams, Anlaesse und die Suche, falsch fuer drei
   Filter, die zusammen eine Zeile bilden. Sechs Ueberschreibungen an einer
   Klasse, die vier andere Seiten tragen, waeren teurer als ein Name.

   ── Der Umbruch kommt aus den Grundbreiten, nicht aus einer Schwelle ──

   **Kein `@media` fuer die zwei Zeilen.** Beide Kinder tragen eine
   `flex-basis`, und der Umbruch faellt dort, wo sie nicht mehr
   nebeneinander passen:

     Leiste   ihre Eigenbreite (`flex:0 1 auto`), unter 560px die Kurzform
     Felder   `flex:1 1 320px` — zweimal 150 und der Abstand dazwischen

   Eine feste Schwelle waere eine zweite Wahrheit neben der Breite, die die
   Rubriken ohnehin haben — **und die waechst**: heute drei Rubriken, mit
   dem Import der alten Beitraege absehbar vier. Eine Zahl, die heute passt,
   passte dann nicht mehr, und niemand saehe es.

   ⚠⚠ **`min-width:0` dreimal, und es ist kein Feinschliff.** Die
   Eigenbreite eines `select` richtet sich nach seinem laengsten Eintrag
   («Juniorinnen Da Spielgemeinschaft»), und ein Flex- wie ein Rasterkind
   traegt von sich aus `min-width:auto` — faellt also nie darunter. Ohne die
   Null schoebe das Feld die Seite breiter, als der Bildschirm ist; auf
   /spiele/ wurden am 23.09.2026 337px bei 320 gemessen.

   ⚠ **Hier darf die Leiste schrumpfen, auf /spiele/ nicht.** Dort traegt
   sie drei kurze Felder und ist die feste Groesse, damit das Auswahlfeld
   «den uebrigen Platz» nimmt. **Hier ist sie das laengere Stueck** — vier
   Rubriknamen gegen zwei Felder. Schruempfte sie nicht, liefe sie aus der
   Zeile; so rollt sie seitlich, und das bringt die Bauform mit.

   ⚠ **Die Beschriftungen fallen fuers Auge, nicht fuers Ohr.** Didi: «Die
   Ueberschriften «Team» und «Jahr» weglassen.» `display:none` naehme dem
   `select` seinen Namen im Vorlesebaum — ein Feld, das «Alle Teams» zeigt
   und sonst nichts heisst. Die `.vh`-Behandlung nimmt es nur dem Auge.
   Genau so steht es seit heute bei `.spielfilter .fe.wahlfeld > label`. */
.newsfilter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:28px}
.newsfilter > .filt{margin:0}
.newsfilter > .filt.segleiste{flex:0 1 auto;min-width:0}
/* ⚠⚠ **Zwei Bedienformen fuer eine Wahl — Didi, 23.09.2026 abends.**
   Breit ein Auswahlfeld neben Team und Jahr, schmal die Segmentleiste. Das
   Feld verschwindet schmal NUR fuers Auge: Es traegt weiterhin
   `name="category_name"` durchs Formular und ersetzt damit das frueher
   versteckte Feld. `display:none` nimmt ein Formularfeld nicht aus der
   Sendung — das taete nur `disabled`, und dann fiele die Rubrik beim
   naechsten Filtergang weg.

   ⚠ **559 ist keine neue Zahl:** Es ist die Schwelle, an der die
   Segmentleiste ohnehin schon auf ihre Kurzformen umschaltet
   (`.seg-kurz`/`.seg-wort`). Eine zweite Schwelle daneben hiesse, dass die
   Leiste kurz gekuerzt UND sichtbar ist oder umgekehrt. */
.newsfilter > .filt.segleiste{display:none}
/* ── ⚠⚠ DIE LEISTE IST DER COMPUTER — Didi, 24.09.2026 nachts ───────

   **Die Zeile darueber ist jetzt der Handyzustand und nicht mehr das ganze
   Bild.** Die offene Frage von gestern abend ist beantwortet; was hier stand,
   war ihre Fassung:

   > ~~«Didi: «Aufgeklappt darunter drei Auswahlfelder untereinander: Rubrik,~~
   > ~~Team, Jahr — die Rubrik als Auswahlfeld statt Segmentleiste.» Unter 640~~
   > ~~steht jetzt der Klappblock mit drei Feldern, ab 640 stehen dieselben drei~~
   > ~~Felder in einer Zeile. **Auf keiner Breite mehr die Leiste** — und darum~~
   > ~~faellt auch die Zeile, die das Rubrikfeld schmal versteckte.»~~
   > ~~— dazu der Absatz, der das Markup der Leiste als offene Frage an Didi~~
   > ~~vermerkte («Der Auftrag sagt zweimal Verschiedenes ueber dieselbe~~
   > ~~Leiste»). Beide 24.09.2026 abends.~~

   Und davor, am selben Tag morgens, hatte die Leiste ein Fenster UNTER 560:

   > ~~`@media(max-width:559px){`~~
   > ~~`  .newsfilter > .filt.segleiste{display:inline-grid}`~~
   > ~~`  .newsfilter .filterwahl .fe-rubrik{display:none}`~~
   > ~~`}`~~
   > — samt dem Vermerk darin, warum die Leiste schmal `inline-grid` und nicht
   > mehr `inline-flex` war.

   Didi jetzt: «`/news/` **ab 640 px**: Die Rubrik als **Segmentleiste**,
   daneben **Team und Jahr als Auswahlfelder, alles in einer Zeile.** **Das
   Auswahlfeld fuer die Rubrik entfaellt am Computer.** **Unter 640 px bleibt
   der Filterknopf wie gebaut.**»

   ⚠⚠ **Die Leiste hat ihr Fenster damit auf der ANDEREN Seite derselben
   Zahl.** Sie war unter 560 sichtbar, jetzt ab 640 — und das Rubrikfeld genau
   umgekehrt. **Es ist keine dritte Schwelle:** 640 ist die Zahl, die der
   Klappblock schon fuehrt (`.filt-klapp`, `ressortBreit()` in `assets/fch.js`).
   Das Fenster steht darum unten im `@media(min-width:620px)`-Block bei den
   uebrigen 620ern und nicht hier — **eine Schwelle, ein Ort.**

   ⚠⚠ **Die Zahl heisst seit dem 24.09.2026 abends 620 und nicht 640.**
   ~~«Das Fenster steht darum unten im `@media(min-width:640px)`-Block bei den
   uebrigen 640ern»~~ — Didi: «Alle Regeln, die in den letzten Auftraegen mit
   640 px bestellt wurden … auf die Hausgrenze 620 px ziehen.» Der Satz «keine
   dritte Schwelle» oben gilt damit erst recht: Es ist jetzt die Zahl des
   Hauses. Hier bleibt nur
   der Grundzustand stehen, und der ist das Handy.

   ── ⚠⚠ UND SIE ZEIGT IMMER DIE KURZFORM — Didi, 24.09.2026 ─────────

   > ~~«⚠ **Die 560 gelten weiter, aber nur noch der Schrift.** `.seg-kurz`/~~
   > ~~`.seg-wort` schalten dort auf die Kurzformen um. Unter 640 steht die~~
   > ~~Leiste jetzt gar nicht mehr da — **die Kurzformen sind damit vorerst~~
   > ~~tot, und das ist kein Grund, sie zu loeschen**: Die Leiste steht auch~~
   > ~~auf /spiele/ und der Suchseite, und dort schalten dieselben Zeilen~~
   > ~~weiterhin.»~~ — Stand vom 24.09.2026 nachts, eine Fassung alt.

   Didi jetzt: «`/news/`, Rubrik-Segmentleiste: **Ab 640 px immer die
   bestehenden Kurzformen der Leiste verwenden** — dieselben wie auf /spiele/
   und der Suchseite, **keine neuen Woerter.** **`/spiele/` und Suchseite
   bleiben unveraendert.**»

   ⚠⚠ **Der Pfad steht in Anfuehrungsstrichen, und das ist kein Geschmack.**
   Zwei Fettsterne unmittelbar vor einem Pfad ergeben Stern-Schraegstrich —
   **und das schliesst den Kommentar mitten im Satz.** Der Rest des Absatzes
   wird dann zum Waehler und verschluckt die erste Regel unten gleich mit.
   **Gemessen am 24.09.2026:** Die Leiste zeigte danach weder Kurzform noch
   Wort, und die Datei sah dabei tadellos aus. Eine Klammerzaehlung findet
   das nicht — sie zaehlt das Zeichenpaar als regulaeren Abschluss. **Nur
   der Browser findet es**, und zwar daran, dass die Regel in seinem
   `cssRules` fehlt.

   **Die Kurzformen sind damit nicht mehr tot, sondern der Normalfall** — in
   DIESER Leiste und nur in ihr. Der Grund steht in Zahlen: Ausgeschrieben
   misst die Leiste 602.2px (viermal 150, und die 150 kommt von
   «Monatsinterview»); mit 10 Abstand und den 320 der Feldgruppe braucht das
   932.2 Inhaltsbreite. **Gekuerzt sind es 398.9 und damit 728.9** — die
   ganze Rechnung mit der gemessenen Kante steht unten im
   `@media(min-width:620px)`-Block.

   ⚠⚠ **Ohne `@media`, und das ist keine Nachlaessigkeit.** Unter 620 steht
   diese Leiste gar nicht da — die Zeile darueber nimmt sie weg. Eine Klammer
   `min-width:620px` haette eine Schwelle behauptet, auf deren anderer Seite
   sich nichts aendern kann. **Was auf jeder Breite gilt, steht ohne Bedingung
   da.** Unter 560 tut die Hausregel ohnehin schon dasselbe; die zwei
   widersprechen sich nicht, die eine ist der Sonderfall der anderen.

   ⚠⚠ **`.newsfilter` davor, und das ist die ganze Eingrenzung.** Die zwei
   Zeilen tragen zwei Klassen statt einer und schlagen damit
   `.seg-kurz{display:none}` **ueberall dort — und nur dort —, wo ein
   `.newsfilter` darueber steht.** Die Heim/Auswaerts-Leiste auf /spiele/
   (`inc/filter-ha.php`) und die Saisonleiste auf /anlaesse/ stehen woanders
   und schalten unveraendert bei 560. **Gemessen am 24.09.2026** an sechs
   Breiten (559/639/640/694/800/1280), im `<iframe>` fester Breite, einmal mit
   und einmal ohne die zwei Zeilen: **`/spiele/` 0 von 960, `/anlaesse/` 0 von
   342, die Suchseite 0 von 180 Werten verschieden** — Kaesten, Beschriftungen
   und Zugangstexte. ⚠ **Dieselbe Messung auf `/news/` meldet 42 von 176**;
   ohne diese Gegenzahl hiesse «0 von 960» nur, dass die Messung nichts
   sieht.

   ⚠ **Das lange Wort verschwindet nicht, es wird `.vh`.** Dieselben sechs
   Werte wie in der Klammer «UNTER 560px: DIE KURZFORM» und aus demselben
   Grund: `display:none` naehme dem Verweis seinen Namen, und die Leiste hiesse fuer ein
   Vorleseprogramm «Berichte» statt «Matchberichte». **Gemessen: der
   Zugangsbaum fuehrt weiter die langen Namen.**

   ⚠ **Der Nachbarschaftswaehler ist der Grund, warum «Alle» sein Wort
   behaelt** — die zweite Zeile trifft nur, wo eine Kurzform davorsteht, und
   «Alle» hat keine. Dasselbe gilt fuer jede kuenftige Rubrik ohne Eintrag in
   `$fch_kurz` (`home.php`). */
.newsfilter .seg-kurz{display:inline}
.newsfilter .seg-kurz + .seg-wort{position:absolute;width:1px;height:1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* **Die Grundbreite der Feldgruppe, 320px** — die zweite Haelfte der Rechnung
   oben. */
.newsfilter .filterwahl{flex:1 1 320px;min-width:0;align-items:center;gap:10px;margin:0}
/* ⚠ **340px, die Zahl von `.wahlfeld`.** Ohne Deckel nahmen die beiden
   Felder je 543px — gemessen am 23.09.2026 bei 1834 Inhaltsbreite. Ein
   Auswahlfeld, das dreimal so breit ist wie sein laengster Eintrag, sagt
   nicht mehr, es dehnt sich nur. **Die Zahl ist nicht neu**: `.wahlfeld`
   deckelt seit je auf 340, und das ist dieselbe Rolle. Wachsen duerfen sie
   trotzdem — auf dem Handy teilen sie sich die Zeile zu zweit. */
.newsfilter .filterwahl .fe{flex:1 1 150px;min-width:0;max-width:340px;margin:0}
.newsfilter .filterwahl .fe > *{min-width:0}
.newsfilter .filterwahl select{width:100%;max-width:100%}
/* ⚠ **`.fe` ist seit dem 24.09.2026 kein direktes Kind mehr.** Die drei Felder
   liegen im `.filt-klapp-inh` des Klappblocks; `>` traf sie darum nicht mehr,
   und die Beschriftungen standen als gesperrte Versalien ueber den Feldern.
   **Eine Regel, die durch fremdes Markup faellt, meldet sich nicht** — sie
   liefert einfach das Aussehen von vorgestern.

   > ~~`.newsfilter .filterwahl > .fe > label`~~ */
.newsfilter .filterwahl .fe > label{position:absolute;width:1px;height:1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* ⚠⚠ **Der Abschickknopf verschwindet, ohne aus dem Markup zu fallen.**
   `assets/fch.js` setzt `hidden`, und zwar in derselben Schleife, die das
   `change` anhaengt — ohne Skript bleibt er stehen und der Filter bedienbar.

   **`[hidden]` allein genuegt dafuer nicht:** Es ist eine Browserregel mit
   der Staerke eines Attributselektors, und `.btn{display:inline-flex}` ist
   staerker. Derselbe Fall wie `.filt[hidden]` weiter oben, der schon einmal
   317px Ueberlauf gekostet hat. */
.btn[hidden]{display:none}

/* ══ SEITENZAHLEN UNTER DER NEWSLISTE — Didi, 24.09.2026 ══════════════

   Didi: «Gestaltung: die bestehende Segmentleiste (Rahmen, Trennlinien, 44 px
   Hoehe, gewaehltes Feld `--papier-flaeche`, Hover gelb). **Keine neue
   Knopfart.** Mittig unter der Liste.»

   ⚠⚠ **«Keine neue Knopfart» steht als zweiter GRIFF an den Regeln der Leiste
   und nicht als Abschrift** — acht Regeln weiter oben tragen je einen Selektor
   mehr. Hier stehen nur die drei Zahlen, die eine Blaetterleiste anders
   braucht als eine Filterleiste.

   ⚠⚠ **Und ausdruecklich KEIN `.filt` im Markup.** Der Umschalter weiter oben
   hat dieselbe Frage schon entschieden: «Kein .filt daneben im Markup —
   stuende es dort, hiesse die Rolle weiterhin Filter, und die Trennung stuende
   nur im Kommentar.» **Eine Seitenzahlenreihe grenzt nichts ein, sie
   blaettert.** Dazu die Mechanik: `assets/fch.js` schickt JEDES `.filt` durch
   `leisteAufbauen()` (`querySelectorAll( '.umschalter, .filt' )`) — dass es
   heute an «weniger als zwei `<button>`» abbraeche, ist ein Zufall der Bauform
   und keine Zusage.

   ── Die drei Zahlen, die von der Leiste NICHT passen ──────────────────

   1 **`margin-top:36px` und mittig.** Beides stand bis heute als Inline-Stil
     am Absatz `#newsmehr`, mit der Begruendung «das ist Sache der Seite, nicht
     der Knopfart». Der Satz gilt weiter, der Traeger ist ein anderer. Die
     Leiste ist `inline-grid`; `text-align` am Behaelter zentriert sie.

   2 **`minmax(44px,1fr)` statt `minmax(64px,1fr)`.** Die 64 sind fuer Woerter
     gedacht («Auswaerts», «Matchberichte»); hier stehen ein bis drei Ziffern.
     Didis Form `← 1 … 4 5 6 … 41 →` sind neun Felder — mit 64 waeren das
     576px, auf jedem Handy eine rollende Leiste. **44 ist nicht gegriffen: es
     ist die Hoehe der Leiste**, die Felder werden quadratisch, und 44 ist
     ohnehin das Tippziel des Hauses.

   3 **`padding-inline:8px` statt der 17 aus der Leiste.** Aus demselben Grund:
     17 ist der Abstand um ein Wort.

   ⚠ **Das «…» ist ein `<span class="page-numbers dots">`** und damit ein Feld
   der Leiste wie die Ziffern — genau Didis Form, ohne eine eigene Regel. Es
   antwortet dem Zeiger nicht, weil die Zeigerregel oben auf `a.page-numbers`
   eingeschraenkt ist.

   ⚠ Der unsichtbare Titel der Leiste haengt an `.screen-reader-text`; die
   Klasse steht bei `.vh`. */
.seitenzahlen{margin-top:36px;text-align:center}
.seitenzahlen .nav-links{grid-auto-columns:minmax(44px,1fr)}
.seitenzahlen .page-numbers{padding-inline:8px}
.seitenzahlen .dots{cursor:default}
/* ── UNTER 560px: SCHMALERE FELDER ────────────────────────────────────
   **Dieselbe Schwelle, an der die Segmentleiste ihre Woerter kuerzt** — und
   derselbe Gedanke: Schmal darf ein Feld kleiner werden, bevor die Leiste zu
   rollen anfaengt.

   **Gemessen am 24.09.2026 bei acht Feldern, verdeckter Teil der Leiste:**

     Breite   mit 44px   mit 36px
      320px     85px       19px
      390px     15px        0

   **Bei Didis neun Feldern (`← 1 … 4 5 6 … 41 →`) geht die Rechnung ab 375px
   auf**: 9 x 36 = 324, und 324 ist genau die Inhaltsbreite bei 375. Darunter
   rollt die Leiste weiterhin seitlich — **das bringt die Bauform mit, und es
   ist besser als eine Seitenzahl, die zu klein zum Treffen ist.**

   ⚠ **36 und nicht weniger.** Die 8px Innenabstand und die zweistellige
   Seitenzahl brauchen zusammen 34; unter 36 entschiede nicht mehr diese Zahl,
   sondern der Inhalt — und die Felder waeren verschieden breit.

   ⚠ **Die Hoehe bleibt 44.** Didi nennt sie ausdruecklich, und sie ist das
   Tippziel; die Breite nennt er nicht.

   ── ⚠⚠ ENTSCHEID — Didi, 24.09.2026 ──────────────────────────

   «Blaetterleiste unter 560 px: **36 px breit, 44 px hoch — bleibt so.**»

   **Damit sind die beiden Absaetze darueber keine Herleitung mehr, sondern die
   Begruendung eines Entscheids** — und der ist bestaetigt:

     Hoehe 44    das Tippziel, und es bleibt bei 44
     Breite 36   34 waeren das Minimum (8 + zweistellige Zahl + 8); unter 36
                 entschiede der Inhalt statt der Zahl

   ⚠⚠ **Die ungleichen Zahlen sind gewollt, nicht uebersehen.** Ein Feld von
   36x44 ist nicht quadratisch, und genau das faellt beim Lesen dieser Datei
   auf — die Hoehe traegt das Tippziel, die Breite traegt den Inhalt, und die
   beiden Rollen haben keinen Grund, dieselbe Zahl zu ergeben.

   > **Wer das spaeter auf 44 breit setzt, aendert einen Entscheid und behebt
   > kein Versehen.** Er nimmt der Leiste bei neun Feldern 72px und schickt sie
   > schon auf einem 390er-Handy ins seitliche Rollen (siehe Tabelle oben). */
@media(max-width:559px){
  .seitenzahlen .nav-links{grid-auto-columns:minmax(36px,1fr)}
}

/* ══ DER NEWSFILTER KLAPPT UNTER 620px — Didi, 24.09.2026 ═════════════

   > ~~«DER NEWSFILTER KLAPPT UNTER 640px»~~ — Stand bis 24.09.2026 abends.
   > Didi dann: «Alle Regeln, die in den letzten Auftraegen mit 640 px
   > bestellt wurden … auf die Hausgrenze 620 px ziehen. Die globale Regel
   > bleibt 620.» **Der Auftrag von heute mittag ist damit nicht
   > zurueckgenommen, nur seine Zahl.**

   Didi: «Zu sieht man nur eine Zeile: Knopf «Filter» mit Plus/Minus rechts,
   44 px hoch, Rahmen wie die Segmentleiste. Anfangs zu. … Computer bleibt wie
   heute.»

   **Die Bauform ist `details.ressort` und keine zweite** — wie der Kader heute
   frueh (`.kad-klapp`). `.filt-klapp` verschiebt genau eine Zahl, die Schwelle
   von 1000 auf 620; `ressortBreit()` in `assets/fch.js` liest sie an der
   Klasse. **Die Schwelle steht darum an zwei Orten**, hier und dort: Das
   Stylesheet kann `open` nicht setzen, und das Skript malt keine Rahmen.

   ⚠⚠ **`--seg-linie` steht am Umschlag und nicht am Klappblock.** Didis
   «Rahmen wie die Segmentleiste» gilt fuer drei Dinge, die keine gemeinsame
   Hoehle haben: den Klappknopf, das ✕-Feld daneben und die drei Auswahlfelder
   darunter. **Eine Marke am gemeinsamen Vater ist eine Zahl; drei abgeschriebene
   Farben waeren drei.** Die Leiste selbst setzt ihre eigene weiterhin an sich
   — gleicher Wert, und sie bleibt damit auch ausserhalb dieses Umschlags
   richtig. */
.newsfilter{--seg-linie:rgba(255,255,255,.28)}
.papier .newsfilter{--seg-linie:rgba(11,11,10,.25)}
/* Der Rahmen sitzt am Kopf: Die Trennlinie ueber einem `.ressort` gehoert
   einer Gliederung, hier steht ein Knopf. Sie faellt auf jeder Breite, sonst
   stuende am Computer ein Strich ueber der Filterzeile. */
.newsfilter .filt-klapp{border-top:0;flex:1 1 100%;min-width:0}
/* ⚠⚠ **`.filt-klapp > .ressort-kopf` und nicht eine eigene Kopfklasse.** Die
   (0,2,0) schlagen `@media(min-width:1000px){.ressort-kopf{cursor:default;
   padding:0 0 18px;pointer-events:none}}` weiter unten — das nimmt jedem
   Ressortkopf breit Polster, Zeiger und Klappzeichen weg, **weil es dort das
   Skript ist, das aufklappt.** Eine eigene Klasse waere (0,1,0) und stuende
   obendrein frueher in der Datei: Sie verloere, und am Computer stuende ohne
   Skript ein Knopf ohne Rahmen, den die Maus nicht anfassen kann. */
.filt-klapp > .ressort-kopf{
  display:flex;align-items:center;cursor:pointer;pointer-events:auto;
  min-height:44px;padding:0 34px 0 14px;
  border:1px solid var(--seg-linie);border-radius:0;
  font-family:var(--b);font-weight:600;font-size:var(--tx-klein);letter-spacing:.04em}
.filt-klapp > .ressort-kopf::before,
.filt-klapp > .ressort-kopf::after{display:block}
/* ⚠ **Steht das ✕-Feld da, rueckt das Plus/Minus um dessen 44px nach links.**
   Die beiden Striche liegen absolut und kennen das Polster des Kopfes nicht —
   ohne diese Zeilen laegen sie unter dem ✕. Die 8px Eigenversatz des
   senkrechten Strichs bleiben unangetastet, darum bleibt das Kreuz zentriert. */
.filterwahl:has(> .filt-weg) .filt-klapp > .ressort-kopf{padding-right:78px}
.filterwahl:has(> .filt-weg) .filt-klapp > .ressort-kopf::before,
.filterwahl:has(> .filt-weg) .filt-klapp > .ressort-kopf::after{right:50px}
.filt-klapp-inh{display:grid;gap:10px;margin-top:10px}
/* Ohne gesetzten Filter steht das Feld gar nicht im Markup; diese Zeile gilt
   dem Computer, auf dem es nicht erscheinen soll. */
.filt-weg{display:none}
@media(hover:hover){.filt-weg:hover,.filt-weg:focus-visible{background:var(--gelb);color:var(--dun);outline:0}}

@media(max-width:619px){
  .newsfilter .filterwahl{position:relative}
  .newsfilter .filt-klapp-inh .fe{max-width:none}
  /* ⚠⚠ **Das ✕-Feld liegt UEBER dem rechten Ende der Kopfzeile.** `top/right/
     bottom` je 1px setzen es innerhalb des Kopfrahmens ab — so ist der Rahmen
     gemeinsam, wie Didi ihn bestellt hat, und die einzige eigene Kante ist die
     Trennlinie links. **Genau so baut die Segmentleiste ihre Felder**
     (`border:0;border-left:1px`): Der Rahmen gehoert der Leiste, der Strich dem
     Feld.

     ⚠ Es liegt im Formular und nicht im `<summary>` — die Begruendung steht in
     `home.php`. Der Bezugspunkt ist darum das Formular, und dessen Oberkante
     ist die Oberkante des Kopfes: Der Klappblock ist sein erstes Kind. */
  .filt-weg{display:flex;align-items:center;justify-content:center;
    position:absolute;top:1px;right:1px;width:43px;height:42px;
    border-left:1px solid var(--seg-linie);color:var(--tx-haupt);
    font-size:var(--tx-klein);line-height:1}
  /* ── Die drei Auswahlfelder ──────────────────────────────────────────
     Didi: «Rahmen wie die Segmentleiste, eckig, 44 px hoch, Schrift 16 px
     normal (nicht kleiner, sonst zoomt das iPhone), Pfeil in der Themefarbe.»

     ⚠⚠ **Drei der fuenf Punkte stehen schon bei `.fe input,.fe select`:**
     `border-radius:0`, `min-height:44px` und `font-size:var(--tx)`.

     ⚠⚠ **Und `--tx` ist 17px, also NICHT kleiner als Didis 16.** Sein Grund —
     iOS zoomt in ein Formularfeld mit weniger als 16px Schrift — ist damit
     erfuellt, und 16 waere hier eine Stufe UNTER der Hausskala (17/14/11) fuer
     genau null Gewinn. **Die Zahl steht darum nicht da.** Wer sie doch will,
     aendert `.fe input,.fe select,.fe textarea` und damit alle Felder des
     Hauses — nicht diese drei.

     Zu tun bleiben die Rahmenfarbe und der Pfeil. */
  .newsfilter .filt-klapp .fe{position:relative}
  .newsfilter .filt-klapp .fe select{border-color:var(--seg-linie);
    appearance:none;-webkit-appearance:none;padding-right:34px}
  /* **Der Pfeil ist ein Dreieck aus Rahmenkanten und keine Bilddatei.** So
     steht die Themefarbe als `var(--gelb)` da statt als `%23FCDE00` in einer
     Data-URI — **eine Farbe in einer Adresse kennt keine Marke** und laeuft
     beim naechsten Palettenwechsel stumm weiter.

     `pointer-events:none`, damit der Klick auf den Pfeil weiterhin das Feld
     oeffnet. */
  .newsfilter .filt-klapp .fe::after{content:'';position:absolute;pointer-events:none;
    right:14px;top:50%;margin-top:-3px;
    border-left:6px solid transparent;border-right:6px solid transparent;
    border-top:7px solid var(--gelb)}
}

@media(min-width:620px){
  /* ⚠⚠ **`[open]` und nicht schlicht `display:none`.** Aufgeklappt hat hier
     immer das Skript; **laedt es nicht, bleibt der Knopf stehen und der Filter
     eine Klickbewegung entfernt** — statt eines Filters, den am Computer
     niemand mehr oeffnen kann. Der 1000er-Block bei `.ressort-kopf` loest
     dasselbe mit `pointer-events:none`; das geht dort, weil ein zugeklappter
     Gliederungsabschnitt nur unschoen ist, und hier nicht, weil ein
     unerreichbarer Filter eine Seite unbedienbar macht. */
  .filt-klapp[open] > .ressort-kopf{display:none}
  /* Die Zeile von gestern abend, einen Traeger tiefer: Bis heute war `.fe` ein
     Kind des Formulars und nahm Abstand und Ausrichtung von dort. Jetzt liegen
     die drei Felder im Klappblock — **dieselben drei Werte, dasselbe Bild.** */
  .filt-klapp-inh{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:0}
  /* ── ⚠⚠ AM COMPUTER FILTERT DIE LEISTE, NICHT DAS FELD — Didi, 24.09.2026
     nachts ────────────────────────────────────────────────────

     Didi: «ab 640 px: Die Rubrik als Segmentleiste, daneben Team und Jahr als
     Auswahlfelder, alles in einer Zeile. Das Auswahlfeld fuer die Rubrik
     entfaellt am Computer.»

     ⚠⚠ **Beide Zeilen gehoeren zusammen und stehen darum beieinander.** Sie
     sind die zwei Haelften EINER Aussage — «ab 620 waehlt die Leiste»
     (~~«ab 640»~~ bis zum 24.09.2026 abends; Didis Wortlaut oben bleibt
     stehen, er ist von gestern nachts). Stuende
     nur die erste da, stuenden Leiste UND Rubrikfeld nebeneinander und boeten
     dieselbe Wahl zweimal an; stuende nur die zweite da, fehlte die Wahl am
     Computer ganz. **Die Kante ist geprueft, 619 und 620** — und an keiner der
     beiden Breiten steht beides oder nichts. (~~«639 und 640»~~ bis zum
     24.09.2026 abends; **die Kante ist mitgewandert, nicht verschwunden**,
     und sie ist an der neuen Stelle genauso gemessen.)

     ⚠⚠ **`.fe-rubrik` verschwindet nur fuers Auge, und das ist der ganze
     Punkt.** Es traegt `name="category_name"` und faehrt die getroffene Wahl
     durchs Formular, wenn Team oder Jahr abgeschickt werden — `display:none`
     nimmt ein Formularfeld aus der Anzeige, **nicht aus der Sendung**; das
     taete nur `disabled`. **Und es widerspricht der Leiste nicht**, weil es
     seinen Wert nicht selber haelt: `selected( $fch_kat_slug, … )` in
     `home.php` liest ihn aus der Adresse, also aus genau dem, was die Leiste
     eben gesetzt hat. **Gemessen am 24.09.2026** auf dem lokalen Stapel:
     Rubrik ueber die Leiste, dann Team ueber das Feld — die Rubrik blieb.

     ⚠ **`:not([hidden])` und nicht blank.** Diese Zeile steht spaeter als
     `.filt.segleiste[hidden]{display:none}` und haette bei gleichem Gewicht
     gewonnen — die Vorsorge dort waere damit still ausgehebelt. Ein Selektor
     mehr kostet nichts und laesst sie stehen.

     ── ⚠⚠ «EINE ZEILE» BEGINNT BEI 765 — gemessen 24.09.2026 ─────────

     > ~~«EINE ZEILE» BEGINNT NICHT BEI 640~~ — samt der Tabelle darunter
     > (640/1010/1016/1280/1920 gegen 613.9 Leistenbreite), der Rechnung
     > «viermal 153px … 942 noetige Inhaltsbreite, also 1014 Fenster», und
     > dem Satz: ~~«**«Alles in einer Zeile ab 640» ist damit keine Regel,
     > die hier fehlt, sondern eine, die keine Breite erfuellen kann;** …
     > **Der Befund steht im Bericht und wartet auf Didi.**»~~
     > Alles gemessen am 24.09.2026 nachts, mit den langen Namen in der
     > Leiste.

     **Didi hat geantwortet, und die Antwort waren die Kurzformen** (oben bei
     `.newsfilter .seg-kurz`). Damit misst dieselbe Leiste nicht mehr 613.9,
     sondern 398.9 — und die eine Zeile faengt an, statt nie zu kommen.
     Gemessen auf dem lokalen Stapel, drei Rubriken, im `<iframe>` fester
     Breite, jede Kante mit frischem Laden gegengeprueft:

       Fenster   Inhalt   Leiste   Team/Jahr   Zeilen
        619         -          -    -           -   die Leiste steht nicht da
        620       584      406.1    je 287      2   Leiste oben, Felder darunter
        ↑ nachgetragen am 24.09.2026 abends, nach Didis Zug auf die
          Hausgrenze. ⚠ **Die Leiste misst hier 406.1 und nicht die 398.9
          der Zeilen darunter** — dieselbe Messung, anderer Inhalt: Der
          lokale Stapel fuehrt jetzt vier Felder mit einer breiteren
          laengsten Kurzform. **Die Zeilen darunter sind bewusst nicht
          nachgerechnet**; sie stehen so, wie sie heute nachts gemessen
          wurden. Mit 406.1 liegt die Kante «eine Zeile» bei 773 statt bei
          765 — gemessen am 24.09.2026 abends, vor UND nach dem Zug auf
          620 dieselbe Zahl. **Der Zug hat die Kante also nicht bewegt.**
        640       604      398.9    je 297      2   Leiste oben, Felder darunter
        694       658      398.9    je 324      2
        764       728      398.9    je 340      2
        765       729      398.9    je 155      1   ⟵ hier faengt es an
        799       763      398.9    je 172      1
        800       728      398.9    je 340      2   ⚠ genau ein Pixel zurueck
        801       729      398.9    je 155      1
       1280      1208      398.9    je 340      1

     ⚠⚠ **Die Leiste ist so breit, weil `grid-auto-columns:minmax(64px,1fr)`
     alle Felder gleich breit macht.** Gemessen: viermal 99.2px, und die 99.2
     kommen jetzt von «Interview» — auch «Alle» ist 99.2 breit. Zusammen
     398.9; dazu 10 Abstand und die 320 Grundbreite der Feldgruppe ergibt
     **728.9 noetige Inhaltsbreite.** Bei 18px Polster je Seite ist das ein
     Fenster von 765 — und genau dort schlaegt es um.

     ⚠⚠ **Und bei genau 800 faellt es fuer ein Pixel zurueck, ohne dass hier
     etwas fehlt.** `--rand` springt dort von 18 auf 36, die
     Inhaltsspalte verliert 36px und faellt von 763 auf 728 — **0.9px unter
     die 728.9.** Ab 801 ist sie wieder da. **Das ist kein Fehler dieser
     Leiste, sondern die Randschwelle des Hauses**, und sie hier zu umgehen
     hiesse, eine Zahl des Themes an einer Filterzeile zu korrigieren. **Der
     Befund steht im Bericht.**

     ⚠ **Bei 640 geht es weiterhin nicht auf.** Die Inhaltsspalte ist dort
     604 breit; 398.9 + 10 + 320 sind 728.9. Es fehlen 124.9, und weil die
     Feldgruppe unter ihre 320 nicht gedrueckt wird, bricht sie um. **«Alles
     in einer Zeile ab 640» bleibt damit unerfuellbar** — aber nicht mehr auf
     jeder Breite, sondern nur noch unter 765.

     ⚠⚠ **Und seit dem 24.09.2026 abends faengt die Leiste 20px frueher an
     zu stehen, ohne dass die Zeile frueher aufginge.** Didis Zug auf die
     Hausgrenze bringt sie ab 620 ins Bild; die Inhaltsspalte misst dort 584
     und damit noch weniger als die 604 von 640. **Der Umbruch ist also
     nicht schlechter geworden, er beginnt nur zwanzig Pixel tiefer** — die
     zwei neuen Zeilen der Tabelle oben stehen genau dafuer da. */
  .newsfilter > .filt.segleiste:not([hidden]){display:inline-grid}
  .newsfilter .filt-klapp-inh .fe-rubrik{display:none}
}
/* ⚠ **Die Ressortzeile traegt seit dem 24.09.2026 zwei Dinge** — links
   das Ressort, rechts die Marke der angehefteten Beitraege. `display:block`
   stellte sie untereinander; `margin-left:auto` an der Marke schiebt sie an
   den rechten Rand, dieselbe Bauform wie bei `.sn`.

   > ~~`.nk .kat{display:block;padding:15px 16px 0}`~~

   ⚠ `min-height` haelt die Zeile auch dort gleich hoch, wo nur eines von
   beiden steht — sonst begaennen die Titel benachbarter Kacheln auf
   verschiedener Hoehe. */
.nk .kat{display:flex;align-items:baseline;gap:10px;padding:15px 16px 0}
/* **Die Marke in der Bauform des Hauses:** gelbe Flaeche, dunkle Schrift,
   Etikettschrift — wie die Rueckennummer im Kader (`.snum`). Gelb ist hier
   nicht der Filterzustand von heute mittag, sondern die Markenfarbe, die
   das Theme seit je fuehrt: Sie sagt «hier ist etwas» und nicht «dies ist
   gewaehlt». */
.nk-haft{margin-left:auto;flex:none;background:var(--gelb);color:var(--dun);
  padding:2px 7px;letter-spacing:.12em}
.nk h2,.nk h3,.nk .tsr{padding:0 16px}
/* ⚠ **DIE DATUMSZEILE UNTER DEM KACHELTITEL IST ENTFALLEN — 24.09.2026.**
   > ~~`.nk .dat{padding:0 16px}`~~
   Didi: «Ressort · Datum in einer Zeile ueber dem Titel, die Datumszeile unter
   dem Titel entfaellt.» Das Datum steht jetzt als `.kat-dat` in der Metazeile
   darueber. **Keine der vier Kachelstellen schreibt noch ein `p.dat`** —
   nachgesehen an allen vier `a.nk` im Haus (`home.php`, `single-fch_team.php`
   und zweimal `Bloecke/ausgabe.php`, wovon eine die Sponsorenkarte ist und nie
   ein Datum trug). Eine Regel ohne Leser ist eine, die beim naechsten Umbau
   eine Frage beantwortet, die niemand mehr stellt.
   ⚠ Die zweite Rolle von `.dat` — die Fussnote unter einem Block — steht weit
   oben im Blatt und ist davon nicht betroffen. */
/* Das Polster nach unten hängt am letzten Element — mal ist das der Anriss, mal
   der Titel.
   > ~~«mal ist das das Datum, mal der Anriss»~~ — 24.09.2026: Das Datum war bis
   > heute das letzte Kind der Kachel; es steht jetzt ueber dem Titel. Auf der
   > Teamseite und im Baukasten endet die Kachel darum neu am Titel. */
.nk > :last-child{padding-bottom:17px}
/* ⚠⚠ **HÖCHSTENS DREI ZEILEN, DANN AUSLASSUNGSPUNKTE — 24.09.2026**

   Didi: «Anreisser höchstens drei Zeilen, dann Auslassungspunkte, gleich
   gebaut wie beim Leitbeitrag der Startseite.» Dieselben drei Eigenschaften
   wie bei `.gross .tsr` weiter unten; **warum es alle drei sein müssen und
   nicht `line-clamp` allein, steht dort** und wird hier nicht zum zweiten
   Mal erklärt.

   ⚠⚠ **Und derselbe Haken — hier aber unausweichlich statt bloss möglich.**
   `overflow:hidden` schneidet an der POLSTERKANTE und nicht an der
   Inhaltskante. Die Regel eine Zeile darüber gibt dem letzten Kind der
   Kachel `padding-bottom:17px`, **und in der Newskachel IST der Anreisser
   das letzte Kind**. Ohne die zweite Regel stünden 17 von 27 Pixeln der
   VIERTEN Zeile unter den Auslassungspunkten der dritten — genau der
   Befund, der beim Leitbeitrag am selben Tag Zeit gekostet hat, nur dort
   mit 22 statt 17.

   **Der Aussenabstand ersetzt das Polster, er kommt nicht dazu:** 17
   bleiben 17, die Kachel wird keinen Punkt höher. Sie liegen nur
   ausserhalb der Schnittfläche.

   ⚠ **`.anriss` und nicht `.tsr`.** Die Paarung `.nk .tsr` steht ein
   zweites Mal im Haus: Die Sponsorenkarte des Blocks `kartenreihe` setzt
   ihre Anschrift so, ebenfalls als letztes Kind. **Eine Anschrift auf drei
   Zeilen abzuschneiden ist keine Kürzung, sondern eine falsche Adresse.**
   Der Klassenname steht darum in `home.php` am Anreisser selbst. */
.nk .anriss{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.nk > .anriss:last-child{padding-bottom:0;margin-bottom:17px}

/* ══ «Aus dem Team» — das Raster richtet sich nach der Anzahl ══════════

   Didi, 24.09.2026: «Kacheln **ohne leere Spalte**. 1 Beitrag: eine Kachel
   über die ganze Breite, Bild links. 2 Beiträge: zwei gleich breite Kacheln.
   3 Beiträge: drei gleich breite Kacheln.»

   **Die Anzahl entscheidet in PHP, nicht hier.** `single-fch_team.php` hängt
   `g2` oder `g3` an `.tn-liste` — ein Stylesheet kann seine Kinder nicht
   zählen, und `:has()` könnte es nur mit drei Regeln, die dasselbe dreimal
   sagen. Hier steht darum nur, was die drei Fälle unterscheidet.

   ⚠ **Der Einzelfall bekommt KEINE dritte Rasterklasse.** Eine Kachel
   braucht keine Spaltenverteilung; `.tn-liste` allein trägt sie, und die zwei
   Spalten daneben stehen an der Kachel als `.nk-breit`. Ein `tn-eins` ohne
   eine einzige Regel wäre derselbe Fehler wie `nk-raster` auf `/news/` und
   `.ts-kacheln` auf dieser Seite: **ein erfundener Behälter meldet sich
   nicht.**

   ── ⚠⚠ Der Verweis wechselt die Zeile, statt sich zu verdoppeln ──────

   Didi: «Auf dem Handy steht der Verweis **unter den Kacheln** statt neben
   der Überschrift, gleich gestaltet.»

   `.sk` ist ein Flexbehälter — aus dem kommt ein Kind nicht heraus. Der
   Verweis steht darum als Geschwister daneben, und `.tn-block` ordnet die
   drei Teile über benannte Felder:

     ab 620        "kopf mehr"        Verweis rechts neben der Überschrift
                   "liste liste"
     unter 620     "kopf"             Verweis unter den Kacheln
                   "liste"
                   "mehr"

   > **Das ist die billigere Hälfte der Hausform «zweimal im Markup, immer
   > nur eines sichtbar».** Die steht im Projekt an der Uhrzeit im Spielplan
   > und am Team der Einzelspielliste, und beide begründen sie damit, dass
   > ein einziges Element nicht ginge. Hier geht es — und ein zweiter Verweis
   > wäre ein zweiter für den Vorleser und einer, den jemand später einzeln
   > ändert.

   ⚠ **`.sk` verliert seinen Aussenabstand, die Liste bekommt ihn.** `.sk`
   trägt `margin-bottom:28px`; in einer Rasterzeile zählt der zur Höhe der
   Zeile, und der unten ausgerichtete Verweis stünde 28px unter der
   Überschrift statt auf ihrer Grundlinie. Der Abstand ist derselbe geblieben,
   er hängt nur am anderen Ende. */
.tn-block{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"kopf mehr" "liste liste"}
.tn-block > .sk{grid-area:kopf;margin-bottom:0}
.tn-block > .tn-mehr{grid-area:mehr;align-self:end;justify-self:end}
.tn-block > .tn-liste{grid-area:liste;margin-top:28px}

/* ⚠⚠ **Ein Beitrag: eine Kachel über die ganze Breite, Bild links.**

   Didi: «**3:1-Bild im Kasten beschnitten, mittig**, Metazeile, Titel und
   Anreisser rechts.»

   Die Kachel ist dieselbe wie im Raster — dasselbe `<a class="nk">` aus
   `inc/newskachel.php`, nur mit `nk-breit` dazu. **Zwei Spalten und drei
   Zeilen**: Das Bild steht links und überspannt alle drei, die drei
   Textteile stapeln sich rechts.

   `grid-template-rows` steht ausdrücklich da, damit `grid-row:1/-1` etwas zu
   greifen hat: **`-1` meint die letzte Linie des AUSDRÜCKLICHEN Rasters.**
   Ohne die Zeilenangabe wären alle drei Zeilen stillschweigend, `1/-1` liefe
   ins Leere und das Bild stünde einzeilig neben der Metazeile.

   ⚠⚠ **Das Bild liegt absolut im Kasten, und das ist der ganze Beschnitt.**
   `.f` ist `position:relative;overflow:hidden`, `.f > img` ist `cover` und
   `object-position:center` — beides steht weit oben im Blatt und gilt für
   jeden Bildrahmen des Hauses. **Hinzu kommt hier nur `position:absolute`**,
   und zwar aus einem gemessenen Grund: Ein Bild im Fluss bringt seine eigene
   Höhe mit (38 Prozent Spaltenbreite bei 3:1 sind bei 1280 rund 162px) und
   zieht damit die Rasterzeilen auseinander — **die Textspalte richtete sich
   dann nach dem Bild statt das Bild nach dem Text.** Aus dem Fluss genommen
   trägt der Kasten keine eigene Höhe mehr, `stretch` füllt ihn auf die Höhe
   der Textspalte, und `cover` schneidet aus der Mitte. Genau Didis Satz.

   ⚠ `aspect-ratio:auto` hebt `.nk .f{aspect-ratio:3/1}` auf. Das 3:1 gilt
   für die Kachel im Raster, wo der Kasten seine Höhe selbst setzen muss;
   hier setzt sie die Nachbarspalte. **Das 3:1 des BILDES bleibt davon
   unberührt** — es ist die Datei und nicht der Kasten. */
@media(min-width:620px){
  .nk-breit{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);
    grid-template-rows:auto auto 1fr}
  .nk-breit > *{grid-column:2}
  .nk-breit > .f{grid-column:1;grid-row:1/-1;aspect-ratio:auto}
  .nk-breit > .f > img{position:absolute;inset:0}
}

/* ⚠ **Unter 620: Kacheln untereinander, Bild oben, Verweis unten.**

   ⚠⚠ **620 SEIT DEM 24.09.2026 ABENDS — und die Begründung von heute
   mittag ist damit hinfällig, nicht bloss umformuliert.** Hier stand:

   > ~~«**Unter 640: Kacheln untereinander, Bild oben, Verweis unten.** Didi
   > nennt 640, und das ist die Hausschwelle für das Handy … ⚠⚠ **Das
   > Hausraster schaltet aber bei 620 und nicht bei 640.** … zwischen 620
   > und 639 stünden die Teamkacheln also zu zweit, während Didi
   > «untereinander» gesagt hat. **Diese zwei Regeln ziehen die Schwelle
   > für DIESEN Abschnitt auf 640** und fassen die globale nicht an — ein
   > Abschnitt, der anders gewünscht ist, ist kein Grund, die Schwelle des
   > Hauses zu verschieben.»~~

   Didi jetzt: «Alle Regeln, die in den letzten Aufträgen mit 640 px
   bestellt wurden … auf die Hausgrenze 620 px ziehen. **Die globale Regel
   bleibt 620.**» **Der Sonderfall fällt damit weg, statt kleiner zu
   werden:** Diese Regeln stehen jetzt auf derselben Zahl wie `.g2,.g3,.g4`,
   und die zwanzig Pixel, in denen die Teamkacheln zu zweit
   gestanden hätten, gibt es nicht mehr. Dasselbe Fenster blendet `.kd-kurz`
   das kurze Datum ein.

   > ~~«Sie stehen über die Spezifität und nicht über die Reihenfolge:
   > `.tn-block > .g3` schlägt `.g3`, gleich wo im Blatt es steht. **Das
   > bleibt nötig, auch auf gleicher Zahl** — `.g2`/`.g3` setzen ab 620 zwei
   > Spalten, und ohne diese Zeile stünden die Teamkacheln ab 620 zu zweit
   > statt untereinander. Gleiche Schwelle heisst nicht gleiche Regel.»~~

   ⚠⚠ **Der Satz stimmte bei 639 und verlor mit dem Umzug auf 619 seinen
   Gegenstand — 24.09.2026.** `@media(max-width:619px)` und
   `@media(min-width:620px)` überlappen sich nicht: Eine Zeile in DIESEM Block
   kann nicht verhindern, was ab 620 gilt — sie wird dort nicht gelesen.

   **Gemessen am 24.09.2026 bei 560 im `<iframe>`, drei Kacheln in `.g3`, mit
   Gegenprobe:**

     aus dem Blatt (`minmax(0,1fr)`)   509px           eine Kachel je Reihe
     erzwungen `none`                  509px           eine Kachel je Reihe
     erzwungen `repeat(2,1fr)`         245.5 245.5px   ← das Messgerät sieht
                                                         einen Unterschied, wenn
                                                         es einen gibt

   **Die Zeile ist damit wirkungslos:** Unter 620 setzt `.g2,.g3,.g4`
   ohnehin keine Spalten, und die stillschweigende `auto`-Spur wird genauso
   breit wie `minmax(0,1fr)`. Sie bleibt trotzdem stehen — **eine Zeile von
   heute wegzuräumen ist keine Messung, sondern eine Entscheidung**, und die
   steht im Bericht statt hier.

   `nk-breit` fällt unter 620 ganz weg — die Regeln stehen in
   `@media(min-width:620px)`. Damit ist die breite Kachel wieder die normale:
   Bild oben mit `.nk .f{aspect-ratio:3/1}`, Text darunter. */
@media(max-width:619px){
  .tn-block{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"kopf" "liste" "mehr"}
  .tn-block > .tn-mehr{justify-self:start;margin-top:20px}
  .tn-block > .g2,.tn-block > .g3{grid-template-columns:minmax(0,1fr)}
}

/* ⚠⚠ **620 bis 999: höchstens zwei Kacheln — 24.09.2026 abends.**

   Didi: «`#teamnews` zwischen 620 und 1000 px: **höchstens zwei Kacheln**.
   Ab 1000 px bis zu drei; unter 620 wie gebaut.»

   **Gemessen VOR dieser Zeile** (lokaler Stapel, `<iframe>` mit
   `innerWidth`-Rücklesung, drei Beiträge, also `.tn-liste g3`):

     Fenster   Spalten   Kacheln je Reihe
      560        1         1+1+1
      619        1         1+1+1
      620        2         2+1      ← die Waise
      700        2         2+1
      999        2         2+1
     1000        3         3
     1280        3         3
     1920        3         3

   **Zwei Spalten allein lösen es nicht — sie standen schon vorher.** Der
   dritte Beitrag stand darunter allein in der zweiten Reihe: genau die Waise,
   die der Auftrag meint. Didi zählt **Kacheln** und nicht Spalten
   («höchstens zwei», «bis zu drei»), und erst die Zählung macht aus 2+1
   eine volle Reihe.

   ⚠ **`display:none` und nicht `visibility:hidden` oder Höhe null.** So
   verschwindet die dritte Kachel auch aus dem Vorlesebaum; eine Kachel, die
   der Vorleser ansagt und das Auge nicht findet, wäre schlimmer als eine
   fehlende. Verloren ist der Beitrag nicht — «Alle News von … →» steht im
   selben Block.

   ⚠ **Der Deckel trifft nur `.g3`.** `.g2` hat keine dritte Kachel, und der
   Einzelfall trägt gar keine Rasterklasse; beide brauchen die Regel nicht.

   ⚠⚠ **GRUNDSATZ, gemeldet statt entschieden:** Didis Satz liesse sich auch
   als «zwei SPALTEN» lesen — dann stünde dieser Block zu Unrecht da, denn
   zwei Spalten galten ab 620 schon vorher (`.g2,.g3,.g4`). Gegen die
   Lesart spricht, dass sie nichts änderte: ein Auftrag für den Ist-Zustand.
   **Rückbau ist dieser Block ersatzlos weg.** */
@media(min-width:620px) and (max-width:999px){
  .tn-block > .g3 > .nk:nth-child(n+3){display:none}
}

.gross{background:var(--fl-tafel);overflow:hidden}
/* **Dieselbe Sache, dieselbe Zahl.** Der grosse Aufmacher zeigt denselben
   Beitrag wie die erste Newskachel, mit demselben Bild — steht die Kachel auf
   3:1 und er auf 16:9, schneidet dieselbe Sache an zwei Orten verschieden.
   Der Grund fuer 3:1 steht bei `.nk .f`: Der Bestand fuehrt 2048 x 704, und
   ein Beitragsbild wird nicht geschnitten, es wird gezeigt. */
/* **Der Aufmacher verteilt seine Hoehe, statt sie unten anzuhaengen.**
   Die zwei Spalten der Startseite stehen auf `align-items:stretch` und sind
   immer gleich hoch. Seit das Bild 3:1 ist, gibt die Zeilenspalte die Hoehe
   vor und die Differenz sammelte sich als Leerraum UNTER dem Datum —
   gemessen 121px bei 1440, 264 bei 1024. `space-between` ist dieselbe
   Bauform, die die Zeilen daneben schon fuehren: Das Bild bleibt oben, der
   Text sitzt an der Unterkante, und die Luft steht dazwischen statt als Rest
   darunter. Die gemeinsame Unterkante bleibt — und die ist der Grund fuer
   `stretch`. */
.gross a{display:grid;align-content:space-between;height:100%}
.gross .f{aspect-ratio:3/1}
/* ⚠ **Die Metazeile ist eine Zeile mit zwei Enden — 24.09.2026.**
   > ~~`.gross .kat{display:block;padding:20px 22px 0}`~~
   `display:block` stellte Ressort und Marke untereinander; `margin-left:auto`
   an `.nk-haft` braucht einen Flexbehaelter, sonst schiebt es nichts.
   Dieselbe Regel wie `.nk .kat` auf `/news/` — eine Bauform, zwei Ansichten. */
.gross .kat{display:flex;align-items:baseline;gap:10px;padding:20px 22px 0}
.gross h3{
  font-family:var(--d);font-variation-settings:'wdth' 108;font-weight:800;
  /* ⚠ **Ohne Versalien seit dem 24.09.2026 — Didi: «Titel nicht in
     Versalien. Groesse: Computer ca. 28 px, Handy ca. 22 px.»**
     > ~~`text-transform:uppercase`~~
     **Die Groesse blieb, wo sie war:** Diese Kurve IST Stufe B
     (`.sec.sec-mittel`, 22px schmal bis 27px breit). 27 gegen Didis 28 ist
     ein Pixel daneben; die naechste Sprosse waere Stufe A mit 35 — sieben
     daneben und lauter als der Abschnittstitel darueber. **Eine Stufe
     danebenzunehmen kostet mehr als ein Pixel Abweichung.**
     ⚠ **Zwei Werte gehen mit, weil sie an den Versalien hingen.**
     `line-height` steigt von 1.02 auf 1.08: Versalien haben keine
     Unterlaengen, gemischte Schrift schon — bei 1.02 stiessen g und p der
     ersten Zeile in die H und T der zweiten. Die Laufweite geht von -.03em
     auf -.02em: Negative Laufweite gleicht die Luecken zwischen Grossbuchstaben
     aus; Kleinbuchstaben haben sie nicht und kleben davon zusammen. Beides
     sind keine neuen Entscheidungen, sondern dieselbe, zu Ende gefuehrt. */
  font-size:clamp(22px,1.29rem + 0.45vw,27px);line-height:1.08;letter-spacing:-.02em;
  margin:14px 0 10px;padding:0 22px;
}
/* ⚠⚠ **HOECHSTENS DREI ZEILEN, DANN AUSLASSUNGSPUNKTE — 24.09.2026**

   **Das Haus fuehrte die Form noch nicht** — gesucht, nicht gefunden: kein
   `line-clamp` im ganzen Blatt. Es gibt genau eine Technik, die eine
   Textmenge nach ZEILEN kuerzt und die Auslassungspunkte selbst setzt, und
   sie verlangt alle drei Zeilen zusammen: `-webkit-box`, `box-orient` und
   `line-clamp`. Ohne die zwei alten Eigenschaften wirkt `line-clamp` nicht,
   auch in Browsern, die es laengst standardisiert kennen.

   ⚠ **Der Schnitt bei 22 Woertern in der Vorlage bleibt.** Er ist das
   billigere der beiden: Was nicht im HTML steht, muss der Browser nicht
   messen. Die drei Zeilen fangen den Rest — 22 Woerter sind bei 1440 drei
   Zeilen, bei 1000 vier.

   > ~~`.gross .dat{padding:0 22px 22px}`~~ — die Datumszeile unter dem
   > Titel ist entfallen, ihren Abstand nach unten traegt jetzt der
   > Anreisser. Ohne diesen Uebertrag stuende der Text auf der Kachelkante.

   ⚠⚠ **Der Abstand nach unten ist ein `margin` und kein `padding` — und
   das ist hier keine Geschmacksfrage.** `overflow:hidden` schneidet an der
   POLSTERKANTE, nicht an der Inhaltskante: Mit `padding-bottom:22px` blieben
   22 von 27.2 Pixeln der VIERTEN Zeile stehen — unter den
   Auslassungspunkten der dritten. Im Browser gemessen: `clientHeight` 104
   gegen drei Zeilen zu 81.6, und auf dem Bild las man den angefangenen Satz
   weiter. **Die Kuerzung war richtig gerechnet und trotzdem zu sehen.**
   Ein Aussenabstand liegt ausserhalb der Schnittflaeche. */
.gross .tsr{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;padding:0 22px;margin-bottom:22px}

/* ⚠ **Kein Abstand mehr zwischen den Zeilen — 24.09.2026.**
   > ~~`.klein{display:grid;gap:14px;align-content:start}`~~
   14px Luecke trennten Kachel von Kachel. Die Zeilen tragen ihren Abstand
   jetzt selbst als Polster, und die Trennlinie liegt in der Mitte zwischen
   zwei Zeilen statt an einer Kachelkante — ein `gap` obendrauf schoebe die
   Linie von ihrer eigenen Zeile weg. */
.klein{display:grid;align-content:start}
/* **Ohne Bild seit dem 24.08.2026.** Die Zeilen zeigten ein Beitragsbild
   auf 1:1 — aus 2048 x 704 waeren dafuer 1344 Bildpunkte weggefallen, 66
   Prozent der Breite, aus der Mitte. 3:1 loest den Schnitt, liefert aber
   einen Streifen von 104 x 35 (gemessen bei 768), auf dem kein Motiv mehr zu
   erkennen ist — **weder ein Bild noch keins.**

   **Die Hoehe war nicht das Argument.** Bei 1440 kostet die Wahl 27px auf
   einer 4366px hohen Startseite, weil `.klein` auf `height:100%` steht und
   die Spalte daneben die Hoehe vorgibt. Es ist eine Gestaltungsfrage: Die
   Startseite zeigt jetzt EIN Bild gross und daneben eine Liste von
   Schlagzeilen, statt fuenf Bilder in zwei Groessen.

   Die Rasterspalte fuer das Bild entfaellt mit, sonst bliebe eine leere
   Spur. */
/* ⚠⚠ **EINE ZEILE JE BEITRAG, WIE DIE KADERLISTE — Didi, 24.09.2026 ──

   > ~~`.klein a{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;
   > align-items:start;background:var(--fl-tafel);overflow:hidden;
   > transition:background .16s}`~~
   > ~~`@media(hover:hover){.klein a:hover{background:var(--tafel-hell)}}`~~
   > ~~`.klein a>div:last-child{padding:14px 16px}`~~

   «Keine Kaesten mehr, kein Bild: eine Zeile je Beitrag, duenne Trennlinie
   dazwischen und unter dem letzten, wie die Kaderliste.»

   **«Wie die Kaderliste» ist woertlich genommen:** `.spz` traegt
   `padding:13px 0` und `border-bottom:1px solid` — dieselben zwei Zahlen
   stehen hier. Das Raster im `<a>` entfaellt mit: Es hielt eine Bildspalte
   frei, die seit dem 11.09.2026 kein Bild mehr bekommt.

   ⚠ **`--li-fein` und nicht `--papier-linie`.** Die Kaderliste steht auf
   einer Papierseite und darf die helle Linie hart nennen; die Startseite ist
   dunkel. `--li-fein` ist dieselbe Linie als ROLLE — sie loest sich unter
   `.papier` genau zu `--papier-linie` auf. Eine harte Farbe waere hier eine
   Linie, die auf dem falschen Grund verschwindet.

   ⚠ **Der Zeigerzustand verliert die Flaeche, nicht die Rueckmeldung.**
   Eine Flaeche, die beim Zeigen erscheint, ist ein Kasten auf Zeit — genau
   das, was Didi weghaben will. `.klein a:hover .card{color:var(--gelb)}`
   steht weiter oben und meldet den Zeiger weiterhin. */
.klein a{display:block;padding:13px 0;border-bottom:1px solid var(--li-fein)}
/* Die Ressortzeile der Zeilen, wie beim Leitbeitrag und auf `/news/`: ein
   Flexbehaelter, damit `margin-left:auto` an `.nk-haft` etwas zu schieben hat. */
.klein .kat{display:flex;align-items:baseline;gap:10px}
/* ⚠⚠ **DIE ZEILENTITEL EINE STUFE TIEFER — Didi, 24.09.2026:
   «Titelgroesse: Computer ca. 18 px, Handy 17 px.»**

   `.card` bringt Stufe C mit (19–21px). Verlangt sind 18 und 17 — also
   unter C. **Die naechste bestehende Stufe darunter ist F**, der
   Fliesstextgrund `--tx` mit 17px, und die gilt ueber alle Breiten: am
   Computer ein Pixel unter Didis 18, auf dem Handy genau die 17.

   > **Der Unterschied zwischen Computer und Handy faellt dabei weg** — er
   > laege zwischen zwei Sprossen, und ein clamp von 17 auf 18 waere die
   > neue feste Zahl, die nicht sein soll.

   Alles andere bleibt `.card`: Anzeigeschrift, Schnitt 700, Zeilenhoehe
   1.15. **Die Rolle aendert sich nicht, nur die Sprosse.** */
.klein .card{font-size:var(--tx)}
.klein .f{display:none}
/* **Trotz des Namens keine Jahrzehntkarte und kein Verweis.** Der Kommentar
   lautete bis zum 26.08.2026 «Karten ohne Bildfeld, etwa fuer die Jahrzehnte
   der Vereinsgeschichte» und war in beiden Aussagen falsch: Die Jahrzehnte der
   Vereinsgeschichte stehen laengst als `.jahrzeile` da - 50 echte `<a>` -, und
   die zwei verbliebenen `.jahrzehnt` sind die Datenkacheln der Busreservation,
   `<div>` und nicht `<a>`, und sie tragen ein Bildfeld (siehe `.jahrzehnt .f`,
   16/9, 126 Zeilen weiter oben).

   **Die Zeigerzustaende sind mitgefallen.** Sie faerbten eine Flaeche, in der
   kein `<a>` und kein `<button>` steht - nachgezaehlt: null und null. Damit
   versprachen sie etwas, das es nicht gibt und nicht geben soll: Ein Bus hat
   keine eigene Seite, die Karte zeigt schon alles. Dieselbe Regel wie bei der
   leeren Flaeche, nur in der Bedienung statt im Inhalt.

   `display:block` und `transition` sind ebenfalls gefallen - beides sind
   Reste aus der Zeit, als die Karte ein Verweis war. */
.jahrzehnt{background:var(--fl-tafel);border-top:2px solid var(--gelb);padding:18px 18px 22px}
/* Busreservation — der Punkt zeigt die Farbe, die der Kalender dem Bus gibt */
.bus-punkt{display:inline-block;width:13px;height:13px;border-radius:50%;margin-right:10px}
/* Eingebettete Fremdinhalte: Buskalender, Live-Ticker */
/* Die Linie stand seit je auf `var(--linie)` — der Linienfarbe der dunklen
   Flaechen, rgba(255,255,255,.13). Alle drei Einbettungen des Prototyps stehen
   aber auf Papierseiten: Ticker, Buskalender und das Spendenformular. Weiss
   auf Weiss, und darum war der Rand nie zu sehen.
   **Der eigentliche Befund ist nicht die Farbe, sondern die Lage: eine Regel,
   die nur im ungenutzten Fall stimmt.** Sie wurde fuer dunkle Flaechen gebaut,
   und dort gibt es keine Einbettung. Wer sie liest, haelt sie fuer richtig,
   weil sie richtig AUSSIEHT — der Fall, in dem sie stimmt, kommt nur nie vor.
   Die Grundregel bleibt stehen, damit eine Einbettung auf dunklem Grund
   weiterhin ihre Linie bekaeme. */
.einbettung{display:block;width:100%;height:clamp(520px,72vh,760px);border:1px solid var(--linie)}
.papier .einbettung{border-color:var(--papier-linie)}
/* Ein Spendenformular ist eine schmale Spalte; 1280px waeren zum groessten
   Teil leer. 560 ist keine neue Zahl — sie ist die Breite von `.form` und vom
   `.anfrageblock`, also die Antwort des Projekts auf «wie breit darf ein
   Eingabefeld werden, bevor es als Balken wirkt». Ticker und Buskalender
   behalten die volle Breite, sie brauchen sie. */
.papier .einbettung.schmal{max-width:var(--feldbreite)}
/* **`.einbett-platz` ist am 26.08.2026 gefallen — samt `.einbett-tx`.** Die
   Flaeche hielt die Hoehe frei fuer ein «noch nicht eingebautes fremdes
   Formular». Alle drei Fremdformulare sind eingebaut: Ticker, Buskalender und
   seit dem 23.08. das Spendenformular stehen als `<iframe class="einbettung">`.
   Die vierte Stelle, die Anmeldung auf «Mitglied werden», ist am 21.08. nicht
   eingebaut, sondern verlinkt worden - dort gibt es nichts freizuhalten.

   **Im Markup stand die Klasse seit dem 21.08.2026 nicht mehr**, im Stylesheet
   noch fuenf Tage laenger. `.einbett-tx` war der gefaehrlichere Teil: Sie
   traegt den Namen nicht im Selektor, wer den Block ueber «einbett-platz»
   sucht, findet sie nicht.

   **Ein Kommentar beruft sich noch auf sie** - bei `.frei-kachel`, wegen des
   gestrichelten Masses. Er ist am selben Tag nachgezogen. */
.bus-daten{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin-top:2px;font-size:var(--tx-klein)}
.bus-daten dt{font-weight:700}
.bus-daten dd{color:var(--tx-leise)}
/* Jahresliste im Archiv: die ganze Zeile ist der Link.

   **Die dunkle Fassung ist hier KEINE Vorlage**, und das gehoert dazugesagt.
   Die dunklen Orte dieses Projekts - Seitenkopf, Faktenleiste, Partnerband,
   Fussbereich - sind Baender von wenigen Zeilen; eine Leseliste aus 50
   Jahrgaengen kann in keines davon, und das Archiv ist der Bauform nach eine
   Papierseite. Die Regel bleibt trotzdem stehen, aber aus einem anderen Grund
   als bei `.einbettung`: `.papier .jahrzeile` setzt nur zwei Farben, das ganze
   Raster steht hier. Ungenutzt sind also nicht die Regel, sondern drei Werte
   darin - `--linie`, `--halb` und der gelbe Pfeil. Wer sie eines Tages
   anfasst, aendert an keiner sichtbaren Stelle etwas. */
.jahrzeile{display:grid;grid-template-columns:1fr;gap:3px;padding:15px 16px 15px 0;border-bottom:1px solid var(--linie);align-items:baseline;transition:background .16s,padding-left .16s}
.jahrzeile:first-of-type{border-top:2px solid var(--gelb)}
@media(hover:hover){.jahrzeile:hover{background:var(--tafel);padding-left:14px}}
.jahrzeile .jz{font-family:var(--b);font-weight:700;font-size:var(--tx-klein);letter-spacing:.05em;color:inherit}
.jahrzeile .jt{font-size:var(--tx-klein);color:var(--tx-leise)}
/* Der Pfeil steht hier, weil rechts sonst nichts steht — siehe die
   Regel vom rechten Rand bei `.tz-p`. */
.jahrzeile::after{content:'→';justify-self:end;color:var(--akz-lesbar);font-size:14px}
@media(min-width:700px){.jahrzeile{grid-template-columns:130px 1fr 24px;gap:20px}}
/* Auf schmalen Bildschirmen vier Meldungen statt sechs */
@media(max-width:999px){.klein a:nth-child(n+4){display:none}}

/* Infobereiche */
.info{background:var(--fl-kasten);border-left:3px solid var(--gelb);padding:22px}
/* **Die Kastenueberschrift steht in der Textfarbe ihrer Flaeche, nicht in
   Gold.** Gold war hier die einzige Ueberschrift der Website, die nicht in
   Textfarbe stand — auf Papier gegen Schwarz, im Dunkeln gegen Weiss. Eine
   Ueberschrift, die farbig ist, liest sich wie ein Verweis.

   **Die Bauform stand schon im Stylesheet:** `.g2 > .info .info-titel` faehrt
   seit je `#fff` im Dunkeln und `--papier-text` auf Papier. Hier ist es
   dieselbe Regel, nur fuer den Kasten, der nicht im Raster steht. */
/* **Eine Grundregel, damit kein `.info-titel` auf die Browservorgabe
   faellt.** Neun von ihnen standen in `.karte` — auf `fanion`, `stellen` und
   `mitglied` — und wurden von keiner der drei bestehenden Regeln erreicht:
   `.info .info-titel` gilt nur im Infokasten, `.g2 > .info .info-titel` nur
   im Raster. Sie standen darum am 29.08.2026 auf 1,17em vom Dokumentgrund,
   also 18,72px.

   Die Grundregel ist die schwaechste der vier (0,1,0) — die drei
   bestehenden gewinnen weiter, jede in ihrem Kasten.

   **NACHTRAG vom selben Tag: die neun sind weg, und damit ist diese Regel
   ein Netz ohne Fall.** Sie tragen seither `.card`, weil sie Kartentitel
   sind und `.info-titel` dort nur hingeschrieben war. Gemessen aendert die
   Grundregel jetzt an **null** von 34 `.info-titel` etwas — sie trifft
   ueberall und gewinnt nirgends.

   **Sie bleibt trotzdem stehen, und zwar aus dem Grund, aus dem sie
   geschrieben wurde:** Der naechste `.info-titel`, den jemand ausserhalb
   eines `.info` setzt, faellt sonst wieder auf 18,72px. Das ist kein
   hypothetischer Fall — er ist an diesem Tag eingetreten.

   **Was hier zu entscheiden bleibt, ist eine andere Frage:** ob eine Klasse
   richtig ist, die eine Grundregel dieser Art ueberhaupt braucht. Ein
   `.info-titel` ausserhalb eines `.info` ist ein Widerspruch im Namen. */
.info-titel{font-size:clamp(19px,1.04rem + 0.30vw,21px)}
.info h4,.info .info-titel{font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);letter-spacing:.2em;text-transform:uppercase;color:var(--tx-haupt);margin-bottom:16px}
.info li{color:var(--tx-leise);font-size:var(--tx-klein)}
.info p{color:var(--tx-leise);font-size:var(--tx-klein);margin-top:18px}
.info ul{list-style:none;display:grid;gap:8px;margin-top:18px}
/* Was direkt zu einer Dokumentenliste gehört, rückt näher heran */
.info ul+p{margin-top:7px;font-size:var(--tx-klein)}
/* **`font-weight:700` ist am 26.08.2026 gefallen.** Fett und unterstrichen
   ist eine doppelte Auszeichnung fuer eine Sache. Die Farbe steht jetzt in
   der Sammelregel weiter oben, zusammen mit den Verweisen im Fliesstext -
   es ist derselbe Fall: ein Verweis mitten im Text. */

/* Hauptinhalt statt Randnotiz: Kästen, die im Raster nebeneinander stehen,
   tragen den eigentlichen Inhalt einer Seite — Leitbild, Sponsoringvorteile,
   Wege mitzumachen. Sie verlieren deshalb Fläche und Kastenschrift und werden
   zu Titel plus Text unter einer gelben Linie. Einzeln stehende Kästen am
   Seitenrand bleiben Kästen.
   Die Fassungen für .g3 und .g4 laufen heute leer: nur .g2 enthält
   Infokästen. Sie bleiben, weil dreispaltige Raster sie brauchen, sobald
   dort einer steht. */
.g2 > .info,.g3 > .info,.g4 > .info{
  background:transparent;border-left:0;border-top:2px solid var(--gelb);padding:16px 0 0;
}
.g2 > .info .info-titel,.g3 > .info .info-titel,.g4 > .info .info-titel{
  font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:800;
  font-size:clamp(19px,1.04rem + 0.30vw,21px);letter-spacing:-.015em;text-transform:none;color:var(--tx-haupt);margin-bottom:8px;
}
.g2 > .info p,.g3 > .info p,.g4 > .info p,
.g2 > .info li,.g3 > .info li,.g4 > .info li{font-size:var(--tx)}
/* ── ⚠⚠ DER UNTERSTRICH DER TELEFONZEILE — Didi, 25.09.2026 ───────────
   «Unterstrich bei E-Mail und Telefon gleich.»

   > ~~«Auf grossen Bildschirmen wird selten telefoniert — die Nummer tritt
   > dort zurueck.»~~
   > ~~`@media(min-width:700px){.info a.tel{color:inherit;font-weight:400;border-bottom:0}}`~~

   **Das war die einzige Stelle im Blatt, die die zwei Kontaktzeilen
   ungleich auszeichnen wollte** — und keine ihrer drei Angaben tat es noch:

   `border-bottom:0` nahm den Unterstrich der Zeit vor dem 28.08.2026 weg,
   als `.info a` ihn als Rahmenkante zog. Seit der Umstellung auf
   `text-decoration` nimmt es nichts mehr weg. **Die Telefonzeile trug ihren
   Strich seit jenem Tag stillschweigend wieder**, und der Entscheid «die
   Nummer tritt zurueck» war aufgehoben, ohne dass ihn jemand aufgehoben
   haette. ⚠ **Eine Regel, die eine Eigenschaft zuruecknimmt, faellt mit der
   Eigenschaft — nicht mit dem Entscheid.**

   `color:inherit` wiegt (0,2,1) gegen `.info a:not(.btn):not(.mehr)` mit
   (0,3,1) und auf hellem Grund gegen (0,5,1); `font-weight:400` verliert
   ebenso gegen dessen `font-weight:inherit`. Beide waren wirkungslos, seit
   die Sammelregel fuer den Verweis im Satz steht.

   **Weggelassen und nicht neu gesetzt.** Die zwei Zeilen bekommen ihren
   Strich jetzt aus derselben Sammelregel wie jeder andere Verweis im
   Infokasten — gleicher Traeger, gleiche Dicke, gleicher Abstand. Eine
   eigene Fassung fuer die Personenzeilen waere die fuenfte von «schwarz mit
   gelbem 2px-Strich auf hell», und vier davon sind am 28.08.2026 gerade
   zusammengelegt worden. */
.info .btn{justify-self:start;width:auto;padding:0 22px}
/* Derselbe Entscheid im Formularraster: der Knopf richtet sich links
   aus, statt die Spalte zu fuellen. `.info .btn` sagte das seit je,
   war aber an den Infokasten gebunden. */
.form .btn{justify-self:start}

.tz{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--linie);font-size:var(--tx-klein)}
.tz:last-child{border-bottom:0}
.tz b{font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:700;font-size:var(--tx-klein)}

/* Anlass-Aufmacher — grosses Bild, Text darüber. Dasselbe Prinzip wie Hero und
   Seitenkopf: die Bildfläche liegt absolut im Behälter, der Inhalt sitzt unten
   im gewöhnlichen Inhaltsraster. Der Behälter trägt die Höhe, nicht das Bild —
   sonst hat .f (position:relative, ohne Höhe) keine Ausdehnung und der weisse
   Text steht auf weissem Grund. Die Verdunklung übernimmt .ov wie bei den
   Bildkarten, kein eigener Verlauf. */

/* Zeilen */
.zeile{display:grid;grid-template-columns:1fr;gap:5px;padding:16px 0;border-bottom:1px solid var(--linie);align-items:center}
.zeile:first-of-type{border-top:2px solid var(--gelb)}
.zt{font-family:var(--b);font-weight:600;font-size:var(--tx-klein);letter-spacing:.05em;text-transform:uppercase;color:var(--tx-leise)}
.zb{font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:400;font-size:var(--tx);letter-spacing:-.018em;color:var(--tx-leise)}
.wir-team{font-weight:800;color:var(--tx-haupt)}
/* **Der Schritttitel ist eine Ueberschrift und steht in Textfarbe.**
   `.zb` traegt zwei Rollen: die Mitte der Jubilaeumszeile — dort ist Grau
   richtig, der Name darin bringt seine eigene Farbe mit — und den Titel
   eines Schritts. **Ein Titel, der leiser ist als der Satz darunter,
   liest sich wie eine Beschriftung.** Die Rolle steht am Behaelter, darum
   der Zusatz und keine neue Klasse. */
.schritt .zb{color:var(--tx-haupt)}
.zr{font-family:var(--d);font-variation-settings:'wdth' 114;font-weight:800;font-size:22px;color:var(--tx-hervor);letter-spacing:-.03em}
.zo{font-size:var(--tx-klein);color:var(--tx-leise);display:flex;align-items:center}
.zo a{color:var(--akz-lesbar);font-weight:700}
/* Eine Gruppenueberschrift, die nicht als erstes Kind in ihrem Behaelter
   steht, braucht Luft davor; die zehn ersten Kinder brauchen sie nicht.
   Geschrieben als :not(:first-child) und nicht als `* + .grp`, weil das
   Gewicht sonst (0,1,0) waere und `.info p` (0,1,1) gewaenne — gemessen,
   nicht vermutet. */
.grp:not(:first-child){margin-top:30px}
/* Die Teaserzeile direkt im Textblock schliesst ihn ab. In einer
   Karte (a.nk) tut sie das nicht — dort traegt die Karte den Rand. */
.wrap > .tsr{margin-bottom:24px}
/* Wer sich vertippt, sieht sonst eine leere Flaeche und weiss nicht,
   ob die Website kaputt ist oder er selbst etwas falsch gemacht hat.
   Die Meldung steht dort, wo die Liste war. */
.leer-hinweis{margin:22px 0 8px;color:var(--tx-leise)}
.leer-hinweis button{font:inherit;background:none;border:0;padding:0;
  color:var(--tx-hervor);font-weight:700;cursor:pointer;
  border-bottom:2px solid var(--gelb)}
/* Direkt nach dem fetten Einstieg gehoert die Zeile eng an ihn. */
.wissen-t + .zo,.zb + .zo{margin-top:4px}
/* `.zr.tag` stand hier bis zum 24.08.2026 — das Etikett HEIM/AUSWAERTS des
   Spielplans. Es ist als `.rz-tag` in die Resultatform gewandert, weil der
   Spielbetrieb `.zeile` verlassen hat. Die Regeln sind ENTFERNT und nicht
   auskommentiert stehen geblieben: eine Regel ohne Traeger meldet in keiner
   Pruefung etwas, aendert nichts, und wird beim naechsten Lesen fuer benutzt
   gehalten. */
@media(max-width:819px){
  .zeile{grid-template-columns:1fr auto;gap:3px 12px;align-items:baseline}
  .zt{grid-column:1}
  .zr{grid-column:2;grid-row:1;justify-self:end}
  .zb{grid-column:1 / -1}
  .zo{grid-column:1 / -1;margin-top:2px}
}
/* ── Eine Form fuer Spiele — und was aus .zeile geworden ist ───────
   Bis zum 24.08.2026 standen hier ZWEI Zeilenformen: `.zeile` fuer den
   Spielplan, `.rz` fuer die Resultate. Begruendet war das mit drei
   Unterschieden — vier Spuren statt drei, der Ort als eigene Spalte, rechts
   ein Zustand statt einer Zahl. Mit der zweiten Zeile im Spielplan
   (Wettbewerb · Gruppe · Ort) fielen die ersten beiden weg.

   **Nachgemessen waren es nie drei Unterschiede, sondern acht.** Neben den
   genannten: die Zeitangabe versal und um .05em gesperrt gegen klein und
   ungesperrt, die Begegnung in Archivo 17px grau gegen Public Sans 16px in
   Textfarbe, Polster 16 gegen 14, eine gelbe 2px-Linie ueber der ersten Zeile
   gegen keine. **Fuenf davon hat nie jemand entschieden.** Auf «Spielplan &
   Resultate» liegen die beiden Listen unter demselben Umschalter — man
   drueckt einen Knopf, und die Liste wechselt die Schrift.

   Ein Nebenfund, der die Sache entschieden hat: die Ortsspalte trug den
   Wettbewerb bereits — «Langacker, Platz A · 2. Liga», bei drei von fuenf
   Zeilen, bei zweien fehlte er. Die zweite Zeile gab es also schon,
   zusammengequetscht in 200px, in falscher Reihenfolge, ohne Gruppe und
   uneinheitlich gefuellt.

   **Der Satz, der bleibt:** Nimmt man den Spielbetrieb aus `.zeile` heraus,
   bekommt jede Sache eine eigene Form — die Statistik ihre, die Spiele ihre.
   Das ist eine Trennung MEHR, nicht weniger, sie liegt nur an der richtigen
   Stelle.

   **`.zeile` ist jetzt die Jubilaeumszeile der Statistik**, und nur die: 25
   Zeilen mit Datum, Name, Nummer und Gegner. Die vier Spuren gehoeren ihr.
   Der Name bleibt allgemein, obwohl es nur noch einen Nutzer gibt — ihn zu
   aendern waere eine zweite Aenderung in einem Vorgang und gehoert eigens
   entschieden. **Wer die vierte Spur antastet, aendert den Gegner und nicht
   den Ort.**

   Die andere Fassung — beide Formen behalten, nur `.zeile` um eine zweite
   Zeile ergaenzen — wurde gebaut, gemessen und verworfen: sie kostet bei 1440
   pro Zeile 88px statt 76, und wer dafuer die vierte Spur aus `.zeile` nimmt,
   streckt die 25 Statistikzeilen von 70 auf 93 bis 113px und laesst den
   Gegner umbrechen — der Abschnitt waechst von 1960 auf 2564px. Sie waere
   also nur mit einem eigenen Selektor fuer den Spielbetrieb zu haben, und
   damit haette `.zeile` zwei Verhalten statt eines. */
@media(min-width:820px){.zeile{grid-template-columns:130px 1fr 96px 200px;gap:20px}}
/* Hier stand `.zeile .zt{white-space:nowrap}` mit einem langen Vermerk ueber
   zwei verworfene Wege. Beides ist am 24.08.2026 entfallen: Der Umbruch, den
   die Regel verhinderte, betraf «SA 16.08. · 17:00» — 136px in einer
   130er-Spalte. Diese Angabe steht nicht mehr in `.zeile`. Die 25
   verbliebenen Statistikzeilen tragen «24.05.1979», gemessen 94px in 130, und
   koennen gar nicht umbrechen.

   **Und der Umbruch ist nicht verschoben, sondern weg:** in der Resultatform
   ist die Zeitangabe klein, gemischt und ungesperrt statt versal und um .05em
   gesperrt — gemessen 121px in derselben 130er-Spalte, neun Pixel Luft. Die
   Spalte war nie zu schmal; die Auszeichnung war zu breit. */

/* Ablauf in Schritten und Hinweiskästen auf „Mitglied werden". Eigene Regeln
   statt Fremdnutzung von .zeile: dort wandert die Nummer unterhalb 820px in
   die zweite Spalte, wodurch der Text in die 54px-Spalte fiel und nach jedem
   Wort umbrach. */
/* **`align-content:start` und nicht nur `align-items`.** Die vier Schritte
   sind gleich hoch, weil die Reihe sie streckt; innerhalb eines Schritts
   sind die zwei Rasterzeilen automatisch bemessen, und ueberschuessige
   Hoehe wird auf sie VERTEILT statt unten angehaengt. Beim vierten Schritt
   ist der Text kuerzer — seine Ziffernzeile wuchs damit von 28 auf 39px,
   und der Titel stand 11px tiefer als die drei daneben.

   **`align-items` regelt das Kind in seiner Zeile, `align-content` die
   Zeilen im Raster.** Hier war das zweite gefragt. */
.schritt{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 16px;
  align-items:start;align-content:start;
  padding:16px 0;border-bottom:1px solid var(--papier-linie)}
.schritt:first-of-type{border-top:2px solid var(--gelb)}
.schritt-nr{font-family:var(--d);font-variation-settings:'wdth' 108;font-weight:800;
  font-size:20px;line-height:1.2;color:var(--tx-hervor)}
.schritt b{font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:800;
  font-size:clamp(19px,1.04rem + 0.30vw,21px);letter-spacing:-.015em;color:var(--papier-text);display:block}
/* Ohne margin-top: der Wert war tot. Die Absaetze in .schritt tragen alle
   die Klasse .zo, und `.zb + .zo{margin-top:4px}` gewinnt mit (0,2,0) gegen
   die (0,1,1) dieser Regel — gerendert wurden immer 4px, nie 3. Farbe und
   Groesse kommen dagegen von hier: dort ist diese Regel die staerkere.
   Eine einzelne tote Deklaration in einer lebenden Regel ist schwerer zu
   sehen als ein toter Selektor, und sie behauptet trotzdem etwas. */
.schritt p{color:var(--papier-halb);font-size:var(--tx-klein)}

/* ── Die vier Schritte als Reihe ───────────────────────────────────
   Sie sind eine Uebersicht: man liest sie einmal quer und weiss, wie es
   laeuft. Untereinander liest man sie wie eine Liste, langsam, obwohl jeder
   Eintrag eine Zeile lang ist.
   Zwei Umbrueche, beide der Website schon bekannt: 559/560 kennt sie von den
   Torschuetzen-Kacheln und als Breite von .form, 959/960 ebenfalls von den
   Kacheln. Keine neuen Werte.
   Alle Regeln haengen an .schrittreihe — .schritt selbst bleibt unberuehrt und
   traegt anderswo weiter seine Zeilenform. */
.schrittreihe{display:grid;grid-template-columns:1fr}
@media(min-width:560px){
  .schrittreihe{grid-template-columns:repeat(2,1fr);gap:0 26px}
  /* Ab hier bekommen ALLE vier die gelbe Linie, nicht nur der erste.
     `.schritt:first-of-type` stammt aus der einspaltigen Fassung, wo «das
     erste» eindeutig war. Sobald zwei nebeneinander stehen, ist es das nicht
     mehr: eine Linie ueber Schritt 1, aber nicht ueber Schritt 2, sieht wie
     ein Versehen aus.
     **`:first-of-type` meint die Reihenfolge im Markup, nicht die Stellung im
     Raster.** Dieselbe Familie wie ein Wert, der an einem Umstand haengt —
     hier haengt eine Auszeichnung an einer Anordnung, die sich mit der Breite
     aendert.
     Nachgemessen ist es der einzige solche Fall: `.jahrzeile:first-of-type`
     und `.zeile:first-of-type` stehen in gestapelten Listen und nie
     nebeneinander. `.gal a:first-child` steht zwar in einem Raster, aber
     absichtlich — es macht das erste Bild gross, und das erste Rasterfeld ist
     oben links und damit eindeutig.
     Die untere Linie faellt weg, sonst stuenden zwischen zwei untereinander
     liegenden Schritten zwei Striche. */
  .schrittreihe .schritt{border-top:2px solid var(--gelb);border-bottom:0;
    padding:14px 0 18px}
}
@media(min-width:960px){
  .schrittreihe{grid-template-columns:repeat(4,1fr);gap:0 26px}
  /* Ab hier steht die Ziffer UEBER dem Titel statt daneben. Im Hochformat
     waere die 44px-Spalte neben zwei Woertern verschenkt — bei vier Spalten
     bleiben je rund 290px, und davon ein Sechstel fuer eine einstellige Zahl
     ist zu viel. Die gelbe Linie wandert von unten nach oben: sie trennt dann
     nicht mehr Zeile von Zeile, sondern eroeffnet jede Spalte. */
  .schrittreihe .schritt{grid-template-columns:minmax(0,1fr);gap:0;
    border-top:2px solid var(--gelb);border-bottom:0;padding:14px 0 0}
  .schrittreihe .schritt-nr{margin-bottom:4px}
}
/* 560px ist der Wert von `.form` und keine neue Zahl: die Frage «wie breit
   darf ein Eingabefeld werden, bevor es als Balken wirkt» ist dieselbe. Der
   Deckel sitzt hier trotzdem am Block und nicht nur am Formular, weil Titel
   und Einleitungssatz sonst ueber die volle Breite liefen. */
.anfrageblock{max-width:var(--feldbreite);margin-top:38px}

/* Dunkle Kacheln statt heller Kästen: die Seite ist über ihre ganze Länge
   hell, drei schwarze Flächen geben ihr einen Anker und trennen die Abschnitte.
   Auf dem Handy stehen sie untereinander und heben sich dort am stärksten
   voneinander ab — dort war der Unterschied vorher am kleinsten. */
/* Die drei Kacheln sind gleich hoch, ihr Inhalt ist es nicht — bei der ersten
   blieben 175px schwarze Leerfläche unten. Der Schlussabsatz wird deshalb an
   den unteren Rand geschoben: die Kacheln bleiben gleich hoch, der Leerraum
   liegt zwischen Liste und Hinweis statt als Loch am Ende. */
/* ── Karten auf Papier ──────────────────
   Drei Sorten mit derselben Aufgabe: ein abgesetzter Kasten auf einer
   Papierseite, oben von der gelben Kante gehalten. Zwei davon waren schwarz —
   `.stufe` auf «Fanion500» und «Mitglied werden», `.wissen` daneben —, die
   dritte, `.stellenkarte`, war schon hell.

   **Alle dreizehn stehen auf Papier, keine einzige auf dunklem Grund.** Damit
   war die Farbe kein Zustand, sondern eine Gewohnheit aus der Zeit, als die
   Karten von dunklen Abschnitten kamen. Ein schwarzer Kasten mitten im Papier
   zieht das Auge staerker an als die Ueberschrift darueber; drei
   Sponsorenstufen nebeneinander wurden zu drei Loechern, zwischen denen der
   Text steht statt umgekehrt. Die gelbe Kante trennt allein genug — sie tut
   auf `.stellenkarte` seit je genau das.

   **`.karte` traegt, was alle drei teilen: Grund und Kante.** Was blieb, ist
   der Unterschied, nicht die Farbe — `.stufe` die grosse Karte mit Liste und
   Schlusssatz, `.wissen` der schmale Hinweis, `.stellenkarte` die Karte mit
   Zeilen. Vorher stand dieselbe Angabe dreimal in drei Regeln; jede Aenderung
   an der Kante musste an drei Orten nachgezogen werden.

   **`margin-top:auto` bleibt bei zweien.** Es zieht das letzte Kind an den
   Fuss, damit Karten nebeneinander unten buendig schliessen. `.wissen` steht
   nie im Raster, sondern einzeln im Fliesstext — dort haette es nichts zu
   tun. */
.karte{background:var(--papier-flaeche);border-top:3px solid var(--gelb)}
.stufe{padding:24px 22px 26px;display:flex;flex-direction:column}
.stufe > :last-child{margin-top:auto;padding-top:14px}
/* **Der Selektor heisst seit dem 29.08.2026 `.card` und nicht mehr
   `.info-titel`** — die neun Kartentitel in `.karte` haben an dem Tag die
   Klasse gewechselt, weil sie Kartentitel sind und `.info-titel` dort nur
   hingeschrieben war.

   **Diese Zeile ist beim Wechsel leer gelaufen, ohne dass es jemand gesehen
   haette.** Der Pruefstand meldete sie als «Selektor ohne ein einziges
   Element», Nummer 91 von 91 — und nur weil die Zahl vorher 90 war, ist sie
   aufgefallen. Der Abstand unter dem Kartentitel fiel dabei von **14px auf
   5px**, den Eigenrand von `.card`; im Bild las der Titel danach wie die
   erste Zeile der Liste statt wie ihr Titel.

   > **Eine Umbenennung nimmt dem alten Namen alles mit, was an ihm hing —
   > auch das, was man nicht gesucht hat.**

   `color` ist hier inzwischen ohne Wirkung: `.card` erbt auf Papier dieselbe
   Farbe. Die Deklaration bleibt, weil sie zur urspruenglichen Entscheidung
   gehoert und nichts kostet; die 14px sind der Grund, aus dem die Zeile
   steht. */
.stufe .card{color:var(--papier-text);margin-bottom:14px}
.stufe ul{list-style:none;display:block;margin:0 0 14px}
.stufe li{padding:10px 0;border-bottom:1px solid var(--papier-linie);color:var(--papier-text);font-size:var(--tx-klein)}
.stufe li:last-child{border-bottom:0}
.stufe li::before{display:none}
.stufe p{color:var(--papier-halb);font-size:var(--tx-klein)}
/* Ein Verweis im Fliesstext eines Stufenkastens bekommt dieselbe Auszeichnung
   wie einer im uebrigen Fliesstext: weiss auf dem dunklen Grund, gelbe
   Unterlinie. Der Kasten kannte bis zum 21.08.2026 nur .mehr — ein blanker
   Verweis darin war unsichtbar, weil `a{color:inherit;text-decoration:none}`
   ihm die Farbe des Absatzes gibt und sonst nichts. Gemeldet hat es die
   Systempruefung, als der erste dazukam. */

/* „Gut zu wissen" im selben Ton, aber flacher: es begleitet die Schritte und
   soll ihnen nicht die Aufmerksamkeit nehmen. */
/* Beitragstabelle: unter 430px passen drei Spalten nicht mehr — dort wird aus
   jeder Zeile ein Block mit der Kategorie als Titel. Gemessen: bei 390px
   braucht die Tabelle 361px bei 354px Platz, ab 430px passt sie. */
@media(max-width:429px){
  /* **`th` steht neben `td`, seit dem 01.09.2026.**

     Der Prototyp baut alle Zellen als `td`. Das Theme setzt die erste als
     `<th scope="row">` -- und das ist richtiger, denn die Kategorie IST der
     Zeilenkopf, und ein Bildschirmleser liest sie dann zu jedem Betrag
     dazu.

     Nur: die Kartenform unter 700px klappt die Tabelle in Bloecke, und
     `th` stand in keiner der Regeln. Gemessen: die erste Zelle blieb
     `table-cell`, waehrend die zweite blockte -- die Karte war halb
     umgebrochen. **Die Berichtigung gehoert in die Regel und nicht ins
     Markup**: das Markup ist die bessere Fassung, die Regel kannte sie
     nur nicht. */
  .beitraege,.beitraege tbody,.beitraege tr,.beitraege td,.beitraege th{display:block;width:100%}
  .beitraege thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .beitraege tr{border-top:2px solid var(--gelb);padding:14px 0 16px}
  .beitraege tr+tr{border-top:1px solid var(--papier-linie)}
  .beitraege td,.beitraege th{border:0;padding:0;text-align:left}
  .beitraege tr > :first-child{font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:800;
    font-size:var(--tx);letter-spacing:-.015em;color:var(--papier-text);margin-bottom:8px}
  /* Dieselbe Zelle wie auf dem Desktop, dort 14px — also G, nicht 15. */
  .beitraege [data-tit]{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:var(--tx-klein)}
  .beitraege [data-tit]::before{content:attr(data-tit);color:var(--papier-halb);font-size:var(--tx-etikett);
    letter-spacing:.05em;text-transform:uppercase;font-family:var(--b);font-weight:600}
}

/* Dieselbe Sprache wie die Stufenkacheln: gelbe Kante oben, Titel in
   Textfarbe. Zwei Bauteile auf derselben Seite sollen nicht zwei
   verschiedene Auszeichnungen tragen. Flacher bleibt es über das Polster.

   **Der zweite Satz stand hier bis zum 28.08.2026 und war überholt:** «Der
   Kasten steht auf einer hellen Seite, ist aber selbst dunkel — deshalb
   müssen die Farben der hellen Seite hier wieder zurückgenommen werden.»
   Der Kasten ist längst hell. Ein Kommentar, der eine Farbe beschreibt,
   die es nicht mehr gibt, erklärt die Regel darunter falsch. */
.wissen{padding:16px 18px 18px;margin-top:10px}
/* 600 und nicht 800: auf einer 18px-Zeile in einem kleinen Kasten bruellt 800.
   Bei 600 bleibt der Titel ein Titel. Am 22.08.2026 nachgeholt — der Entscheid
   war aelter, der Auftrag dazu nie angekommen. Die Regel gilt fuer alle vier
   Kaesten auf «Mitglied werden».

   **Textfarbe statt Gold, 28.08.2026.** `.wissen-t` ist derselbe Fall wie
   `.info-titel` und `.stufe .info-titel` — eine Ueberschrift in einem
   hellen Kasten —, hiess nur anders und blieb darum beim ersten Durchgang
   stehen. **Gold traegt hier nichts, was die Groesse und der Schnitt nicht
   schon tragen.** Es bleibt, wo es kein Titel ist: Etikett, Rolle,
   Wettbewerbszeile, Datum. */
.wissen-t{font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:600;
  font-size:var(--tx);letter-spacing:-.015em;color:var(--papier-text);display:block}
.wissen p{color:var(--papier-text);font-size:var(--tx-klein);margin-top:5px}

/* Galerie */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gal a{display:block;overflow:hidden}
.gal .f{aspect-ratio:1;transition:transform .4s}
@media(hover:hover){.gal a:hover .f{transform:scale(1.05)}}
/* Auf schmalen Bildschirmen vier Bilder */
@media(max-width:719px){.gal a:nth-child(n+5){display:none}}
@media(min-width:720px){.gal{grid-template-columns:repeat(4,1fr)}.gal a:first-child{grid-column:span 2;grid-row:span 2}}

/* ── 70 Seitenköpfe ───────────────────────────────────────── */

.ph{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(140px,15vw,190px);overflow:hidden}
.ph .f{position:absolute;inset:0}
.ph::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(11,11,10,.9) 0%,rgba(11,11,10,.45) 46%,rgba(11,11,10,.28) 100%);
}
.ph .inh{position:relative;z-index:3;width:100%;padding-bottom:clamp(14px,1.7vw,20px)}
.ph .inh h1.big{color:#fff}

/* ── Seite nicht gefunden (404) ───────────────────────────────────────────
   Die Zahl steht NEBEN dem Titel, nicht darueber: eine grosse Zahl ueber
   einer `h1.big` waeren zwei laute Elemente untereinander, und der Kopf
   traegt schon die Brotkrume.

   Sie ist `aria-hidden` und liegt ausserhalb der Ueberschrift — ein
   Bildschirmleser soll «Diese Seite gibt es nicht» hoeren, nicht «404 Diese
   Seite gibt es nicht». Die Fehlernummer steht fuer die, die sie sehen.

   Stärke und Breite sind vom Hero-Slogan uebernommen (`wdth` 108, 900) —
   es ist die einzige Stelle ausserhalb der Startseite, an der eine Zahl
   allein steht, und sie soll aussehen wie von derselben Hand. */
.fehlkopf{display:flex;align-items:center;gap:clamp(14px,2.2vw,26px)}
.fehlzahl{
  font-family:var(--d);font-variation-settings:'wdth' 108;font-weight:900;
  font-size:clamp(46px,7vw,84px);line-height:.82;letter-spacing:-.05em;
  color:var(--gelb);flex:none;
}
/* Der Untertitel wiederholt unter 620px, was zwei Zentimeter hoeher steht. */
.fehlkopf .sub{display:block;font-size:var(--tx-etikett);letter-spacing:.14em;
  text-transform:uppercase;color:var(--halb);font-weight:400;margin-top:8px}
@media(max-width:620px){.fehlkopf .sub{display:none}}

/* Suchzeile auf Papier. `.such-in` konnte nicht uebernommen werden: sie ist
   fuer das dunkle Band gebaut, sitzt randlos und zentriert sich auf
   `--content-kopf`. Hier steht das Feld links im Textfluss.

   Das Feld selbst nimmt `.fe input` in der Papierfassung — dieselbe Kante,
   dieselbe Fokusregel wie in den zwei Formularen. Nur der Knopf steht
   angeschlossen statt darunter. */
/* **`.fe` traegt die Zeile NICHT.** Sie war der erste Versuch, damit das Feld
   dieselbe Kante und Fokusregel bekommt wie in den Formularen — aber
   `.fe{display:grid}` steht weiter unten und gewinnt bei gleichem Gewicht:
   Feld und Knopf standen untereinander statt nebeneinander.

   Darum traegt die Zeile ihre Feldregeln selbst. Die Werte sind aus
   `.fe input` und `.papier .fe input` uebernommen, damit es dieselbe Kante
   bleibt — **wer dort etwas aendert, aendert es hier nicht mit.** Das ist der
   Preis; die Alternative waere gewesen, `.fe` nach unten zu verschieben und
   damit eine Regel zu bewegen, die 19 Felder traegt. */
/* ⚠ **`gap:12px` ist am 12.09.2026 hierher gewandert** -- es stand 6100
   Zeilen tiefer in einem zweiten `.suchzeile{}`. Der Grund dafuer steht dort
   und bleibt dort: Didi will einen Abstand statt der geteilten Kante. */
.suchzeile{display:flex;gap:12px;max-width:520px;margin:0 0 clamp(22px,3vw,30px)}
/* ⚠ **`border-right:0` ist am 12.09.2026 gefallen.** Es gehoerte zur
   geteilten Kante; seit dem Abstand bekommt das Feld seinen rechten Rand
   zurueck, und das tat bis heute eine zweite Regel weiter unten. Jetzt steht
   der Rahmen einmal und ringsum. */
.suchzeile input{
  flex:1;min-width:0;background:#fff;border:1px solid rgba(11,11,10,.22);
  /* 44 wie alle Felder — siehe die Begruendung bei `.fe input` (23.09.2026). */
  border-radius:0;padding:10px 14px;color:var(--papier-text);
  font-family:var(--b);font-size:var(--tx);min-height:44px;
}
.suchzeile input::placeholder{color:var(--papier-halb)}
/* ⚠ ⚠ **HIER STAND `border-left:0`, UND DAS WAR EIN FEHLER.**
   `border-left:0` ist die Kurzform und setzt AUCH den Stil auf `none`. Die
   Regel weiter unten stellte danach nur Breite und Farbe zurueck
   (`border-left-width:2px; border-left-color:var(--gelb)`) -- **der Stil
   blieb `none`, und ein Rahmen ohne Stil wird nicht gezeichnet.**

   Der Knopf hatte also links keinen Rahmen, obwohl der Kommentar unten sagt,
   er trage «seinen eigenen 2px-Rahmen ringsum wie jeder andere `.btn`».

   > **Die Kurzform setzt alles, auch was man nicht nennt. Wer sie
   > zuruecknimmt, muss alles zuruecknehmen -- nicht zwei von drei.**

   Beide Regeln sind entfallen. `.btn` bringt `border:2px solid var(--gelb)`
   selbst mit; ohne das Zuruecksetzen gilt es auch links.

   ⚠ **Gelesen, nicht am Bildschirm gemessen.** Keine weitere Regel setzt
   `border-left-style` an dieser Stelle -- gesucht im ganzen Stilblatt. */
.suchzeile .btn{flex:none}
@media(max-width:430px){
  .suchzeile{flex-direction:column;gap:10px}
  .suchzeile input{border-right:2px solid rgba(11,11,10,.22)}
  /* ⚠ **Der Knopf zieht mit, obwohl Didi nur die Felder nannte.** Unter
     430px steht er unter dem Feld, und die beiden bilden dort ein Paar:
     Ein 48er Knopf unter einem 44er Feld waere ein neuer Versatz, den es
     vorher nicht gab. Der allgemeine `.btn` bleibt bei 48 — der
     ist ein anderes Bauteil und war nicht bestellt. */
  .suchzeile .btn{border-left:2px solid var(--gelb);height:44px}
}

/* Wegkarten auf der Fehlerseite. `.karte` traegt Grund und Oberstrich, hier
   kommt nur das Polster und die Schrift dazu.

   **Nicht `.ww`.** Die Wegweiserkacheln sind 210px hoch, dunkel und tragen ein
   grosses Symbol — vier davon waeren eine zweite Startseite. Die Karte ist die
   leisere Form, und auf einer Fehlerseite ist leise richtig. */
.wegkarte{display:block;padding:16px 18px 18px;color:var(--papier-text);
  transition:background .16s}
.wegkarte b{display:block;font-weight:700;
  letter-spacing:-.01em;margin-bottom:3px;font-size:17px}
.wegkarte span{display:block;color:var(--papier-halb);font-size:var(--tx-klein)}
/* Beim Zeigen wird die Flaeche eine Stufe dunkler. Ein eigener Token dafuer
   waere ein Token fuer eine Stelle — darum der Wert direkt, mit dem Vermerk:
   Kommt eine zweite Stelle dazu, gehoert er in die Tokenliste. */
@media(hover:hover){.wegkarte:hover{background:#E9E6DE}}
/* **Die Wege stehen zu viert, nicht zu dritt.** `@media(min-width:640px)`
   setzt `.g4` auf drei Spalten und steht weiter unten — die 1000er-Regel
   darueber laeuft dagegen leer. Hier sind es genau vier Wege, und drei plus
   einer sieht aus wie ein vergessener. */
@media(min-width:1000px){.g4:has(.wegkarte){grid-template-columns:repeat(4,1fr)}}

/* ── Suchergebnisse ──────────────────────────────────────────────────────
   Zwei Zustaende: mit Treffern und ohne. Der zweite nimmt dieselben
   Wegkarten wie die Fehlerseite — nicht «haeufig gesucht»: ohne Auswertung
   waeren das geratene Begriffe, und ein geratener Begriff, der richtig
   aussieht, ist die Sorte, die niemand mehr prueft. */
.trefferzahl{font-size:var(--tx-klein);color:var(--papier-halb);margin:0 0 14px}

/* Je Treffer vier Zeilen. **Die Art ist der wichtigste Zusatz** — ohne sie
   sehen alle Ergebnisse gleich aus, und niemand weiss, ob er auf eine Seite
   oder in einen Bericht klickt. */
.treffer{display:block;padding:16px 0;border-bottom:1px solid var(--papier-linie);
  color:var(--papier-text);text-decoration:none}
.treffer:first-of-type{border-top:1px solid var(--papier-linie)}
.treffer .art{display:block;font-family:var(--b);font-weight:700;
  font-size:var(--tx-etikett);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-flaeche)}
/* **Der Treffertitel steht auf Stufe B und trug bis zum 29.08.2026 eine
   feste 19px.** Das ist eine dritte Bauart neben «auf der Leiter» und
   «ausserhalb der Leitern»: **ein fester Wert auf dem BODEN einer Stufe.**
   Bei 320 lag er auf C (19) und war nicht zu unterscheiden; ueberall sonst
   wuchs die Stufe weiter und er nicht. Keine Zaehlung meldete ihn.

   **Die Wirkung war messbar und verkehrt herum:** Der Auszug darunter steht
   auf `--tx-lead`, und der waechst — 19 gegen **20,3** bei 768, 19 gegen
   **21,0** bei 1024. **Der Titel war 0,90x seines eigenen Auszugs.** Dass er
   trotzdem als Titel las, lag allein an Fettung und Strich; die Groesse sagte
   das Gegenteil.

   **C waere die falsche Antwort gewesen** — dann sind Titel und Auszug gleich
   gross, und aus der Umkehrung wird ein Gleichstand. **Ein Titel ist lauter
   als das, was er anfuehrt.** B fuehrt ihn auf 27 bei 1440 und 22 bei 320,
   gegen 21 und 19 des Auszugs.

   Zwei weitere feste Werte sitzen auf einem Stufenboden — die Balkennavigation
   (mit Platzprobe begruendet) und `.fm` (ausdruecklich als Einzelfall
   dokumentiert). **Dies hier war die einzige ohne Begruendung und die einzige
   mit gemessener Wirkung.** */
.treffer .tit{display:block;font-weight:700;
  font-size:clamp(22px,1.29rem + 0.45vw,27px);letter-spacing:-.015em;
  line-height:1.25;margin:4px 0 5px;
  border-bottom:2px solid var(--gelb);padding-bottom:1px}
/* ⚠ **Drei Zeilen auch hier — 24.09.2026**, aus demselben Auftrag wie bei
   der Newskachel: Der Anreisser ist überall derselbe, also endet er überall
   gleich. Die Suche schneidet bei 32 statt 22 Wörtern; **gerade darum
   braucht sie die Regel eher als die Kacheln und nicht weniger.**

   > ~~`.treffer .aus{display:block;…}`~~ — `-webkit-box` tritt an die
   > Stelle von `display:block`; beide machen aus dem `<span>` einen Block,
   > nur kann das eine zählen.

   ⚠ **Hier braucht es keine zweite Regel gegen die Polsterkante.** `.aus`
   ist nicht das letzte Kind — `.pfad` folgt und trägt seinen Abstand als
   `margin-top` — und `.aus` selbst hat kein Polster. Die Schnittfläche
   endet an der Textkante, und der Fall, der beim Leitbeitrag und in der
   Newskachel Zeit gekostet hat, tritt gar nicht erst ein. */
.treffer .aus{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;color:var(--papier-halb);font-size:var(--tx-lead);line-height:1.55}
.treffer .pfad{display:block;font-size:var(--tx-etikett);letter-spacing:.06em;
  color:var(--papier-halb);margin-top:6px}
/* Der Titelstrich verschwindet beim Zeigen, wie jeder Verweis im Satz.
   Die Flaeche traegt den Zustand, weil der ganze Treffer der Verweis ist. */
@media(hover:hover){
  .treffer:hover{background:var(--papier-flaeche)}
  .treffer:hover .tit{border-bottom-color:transparent}
}
.brot{font-size:var(--tx-etikett);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px}
/* **Die Deckung unterscheidet Verweis und Standort - ohne neues Zeichen.**
   Die Brotkrume lautet «Home · Spiele · Matchbericht», und das letzte Glied
   ist KEIN Verweis. Bis zum 26.08.2026 sah es Bildpunkt fuer Bildpunkt gleich
   aus wie die zwei davor: dieselbe Farbe, dieselben Versalien, dieselbe
   Laufweite. Wer die Zeile las, konnte nicht sehen, welche Glieder ihn
   wegbringen.

   **Der Unterschied lag als Wert schon vor.** `.brot` setzt 72 Prozent
   Deckung; die Verweise bekommen die vollen hundert, das aktuelle Glied
   behaelt die 72. Kein Strich, keine zweite Farbe, keine Geometrie - eine
   Zahl, die ohnehin dastand. */
.brot a{color:#fff}
.brot a:hover{color:var(--gelb)}
/* Auf Papier ist Gelb fast unsichtbar — gemessen Kontrast 1,35. Die
   Artikelansicht ist die erste und bisher einzige, die die Brotkrume nicht im
   dunklen Kopf traegt; darum steht die Papierfassung an `.art-kopf` und nicht
   allgemein.
   Nicht gelb und nicht `--nav-beruehrt`: Ein Brotkrumenverweis ist weder ein
   `.mehr` mit gelber Unterlinie noch eine anfassbare Zeile mit Flaeche — er
   ist ein Verweis im Kleingedruckten. Er wird beim Zeigen **dunkler** und
   bekommt eine Unterlinie: von `--papier-halb` auf `--papier-text`, Kontrast
   6,93 → 19,69.
   Zweiter Fall am selben Baustein: erst die Grundfarbe, dann der Zeiger. Wer
   einen Baustein aus seinem Kopf nimmt, nimmt ihn in allen Zustaenden. */
/* **Weiss auf Weiss, und zwar seit es den Artikelkopf gibt — gemessen am
   26.08.2026: Kontrast 1,00.** `.brot a{color:#fff}` ist die Fassung fuer den
   dunklen Seitenkopf, den fast jede Ansicht hat. Der Artikelkopf ist der eine
   Papier-Seitenkopf, und dort umfaerbte die Papierfassung nur den ABSATZ
   (`--papier-halb`), nicht die Verweise darin. Sichtbar war die Brotkrume
   trotzdem — man las «Home · News · Matchbericht» und sah in Wahrheit nur die
   Trennpunkte und das letzte Glied.

   **Aufgefallen ist es erst, als die Spielseite denselben Kopf benutzte.** Der
   Pruefstand konnte es nicht finden: Seine Kontrastregel misst
   `p, li, td, th, span, b, h1…h6` — **`a` steht nicht in der Liste.** Jeder
   Verweis der Website ist von ihr ausgenommen. Vermerkt als blinder Fleck.

   Die Farbe ist dieselbe, die die Hoverfassung darunter schon setzte. */
.papier .art-kopf .brot a{color:var(--papier-text)}
.papier .art-kopf .brot a:hover{color:var(--papier-text);border-bottom:1px solid var(--papier-text)}

/* Grafische Variante, wenn kein Bild vorhanden ist */
.ph.grafik{background:var(--dun);min-height:clamp(120px,11.5vw,150px)}
.ph.grafik::after{display:none}
/* Kein durchgehendes Muster, sondern zwei Zonen: links Ruhe für Titel und
   Brotkrume, rechts dichter. Weiche Übergänge, damit keine Schnittkanten
   entstehen — die Kanten lagen sonst mitten hinter dem Titel. */
.ph-muster{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(101deg,
    transparent 0 10%,
    rgba(252,222,0,.03) 40%,
    rgba(252,222,0,.07) 72%,
    rgba(252,222,0,.13) 100%);
}
.ph-ic{position:absolute;right:2vw;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;
  width:clamp(88px,10vw,130px);height:clamp(88px,10vw,130px);color:var(--gelb);opacity:.22}

/* Faktenleiste */
.fakten{position:relative;z-index:3;width:100%;background:var(--dun);border-top:3px solid var(--gelb)}
.fakten-in{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.12)}
.fakt{background:var(--dun);padding:14px 16px}
.fakt span{display:block;font-size:var(--tx-etikett);letter-spacing:.18em;text-transform:uppercase;color:#8C8C85}
.fakt b{display:block;font-family:var(--d);font-variation-settings:'wdth' 104;font-weight:800;font-size:17px;letter-spacing:-.015em;color:#fff;margin-top:5px}
.fakt.hell{background:var(--gelb)}
.fakt.hell span{color:rgba(11,11,10,.62)}
.fakt.hell b{color:var(--dun)}
/* Die Faktenleiste schneidet schon kräftig ab — der Abschnitt darunter
   braucht deshalb weniger Anlauf als nach einem gewöhnlichen Seitenkopf */
.ph:has(.fakten)+section{padding-top:clamp(30px,3.6vw,48px)}
/* Die Faktenleiste sitzt im Seitenkopf und drückt Brotkrume und Titel nach oben —
   dort ragt aber das Wappen 53px aus dem gelben Balken herein und lag auf „Home“.
   Betrifft nur Köpfe mit Faktenleiste und nur, solange das Wappen überhängt. */
@media(min-width:1000px){.ph:has(.fakten) .brot{margin-top:16px}}
/* Die Leiste passt sich der Zahl der Angaben an — vier, fünf oder sechs */
@media(min-width:700px){.fakten-in{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media(max-width:699px){
  .fakt{padding:12px 16px}
  .fakten-in .fakt:last-child:nth-child(odd){grid-column:1 / -1}
  /* Kein Mindestmass auf dem Handy, und das ist ein Entscheid: hier ist jeder
     Pixel vor dem Inhalt teuer, und ein Mindestmass, das den Kopf ueber seinen
     Inhalt hinaus aufblaeht, waere genau das. Der Kopf folgt darum allein
     seinem Inhalt — gemessen 106px bei einzeiligem Titel, 134 bei zweizeiligem
     und 162 bei dreizeiligem («48. Dorf- und Gruempelturnier» bei 320px). Die
     Brotkrume ist in allen 22 Ansichten und auf allen vier schmalen Breiten
     genau eine Zeile; die Spanne ist vollstaendig die Zeilenzahl des Titels.
     Ein gleich hoher Kopf fuer «Schiedsrichter» und «48. Dorf- und
     Gruempelturnier» muesste bei einem der beiden Platz verschenken. */
  .ph.grafik{min-height:0;padding-top:22px}
  .ph.grafik .inh{padding-top:14px}
  .ph .brot{margin-bottom:10px}
  /* Der Kopf ist hier zu flach für das Symbol — Brotkrume und Titel brauchen die Breite */
  .ph-ic{display:none}

  /* Kleinstschriften: auf dem Desktop eine bewusste Zurücknahme, auf dem Handy
     an der Lesbarkeitsgrenze. Alles unter 11px steigt um ein bis zwei Punkte. */
  .f::after{font-size:10.5px}
}

/* ── 80 Startseite ────────────────────────────────────────── */

#v-home{background:var(--nacht)}

/* Erster Bildschirm: Hinweis, Hero und Matchtafel bilden zusammen genau eine
   Fensterhöhe abzüglich Kopf. Der Hero nimmt, was übrig bleibt — deshalb sitzt
   die Tafel beim Laden an der unteren Kante, ob nun kein Hinweis erscheint,
   einer oder zwei. Kein gerechneter Festwert, sondern Flexraum.
   Der Hero wird auf hohen Bildschirmen entsprechend gross; das ist die Folge
   der Bündigkeit und bewusst so entschieden. */
.erstbild{display:flex;flex-direction:column}
.erstbild .hero{flex:1 1 auto}

/* Solange die Tafel zweizeilig steht, endet der erste Bildschirm nach dem
   Resultat — das nächste Spiel folgt beim Scrollen. Der Kasten darf deshalb um
   die Höhe der zweiten Zelle über das Fenster hinausragen. Die Schwelle ist
   dieselbe, an der die Tafel ohnehin auf zwei Spalten wechselt. */
@media(max-width:979px){
  .erstbild{min-height:calc(100dvh - var(--kopfhoehe) + var(--zelle2))}
  /* Darunter wird der Hero zum Streifen: bei 320x568 ist die Bündigkeit nicht
     erreichbar, dort geht Bildwirkung vor. */
  .erstbild .hero{min-height:260px}
}
@media(max-width:379px){:root{--zelle2:303px}}
@media(min-width:760px) and (max-width:979px){:root{--zelle2:262px}}

@media(min-width:980px){
  .erstbild{min-height:calc(100dvh - var(--kopfhoehe))}
  .erstbild .hero{min-height:420px}
}
#v-home section{padding:clamp(56px,7.5vw,104px) 0}
#v-home section+section{padding-top:0}

.news-home{display:grid;gap:26px}
@media(min-width:1000px){
  .news-home{grid-template-columns:1.3fr 1fr;gap:40px;align-items:stretch}
  /* ⚠⚠ **VIER REGELN WENIGER — 24.09.2026 ─────────────────

     > ~~«Fünf Meldungen in der Spalte, Bilder im Querformat»~~ (ein
     > Kommentar) — die Bilder sind seit dem 11.09.2026 weg, die Zeile
     > beschrieb sie weiter.
     > ~~`.klein{align-content:space-between;height:100%;gap:10px}`~~
     > ~~`.klein a{grid-template-columns:minmax(0,1fr);align-items:center}`~~
     > ~~`.klein .f{display:none}`~~ (steht schon in der Grundregel)
     > ~~`.klein .card{font-size:clamp(19px,1.04rem + 0.30vw,21px)}`~~

     Didi: «Am Computer beginnt die Liste auf der Oberkante des Leitbilds.»

     **Die Oberkante stimmte schon** — `align-items:stretch` setzt beide
     Spalten auf dieselbe Kante, und das Bild ist das erste Element der
     linken. `space-between` betraf nur, was UNTER der ersten Zeile
     geschieht: Es verteilte die Resthoehe auf die Luecken. Mit Trennlinien
     stuenden die Linien damit in verschieden grossen Abstaenden — eine
     Liste, die je nach Bildhoehe anders aussieht. Gleiche Zeilen heisst
     gleiche Abstaende, also von oben stapeln.

     Die Titelstufe steht jetzt ueber alle Breiten in der Grundregel; der
     Grund fuer Stufe F steht dort. */
  /* ── ⚠⚠ UND UNTEN BUENDIG DAZU — Didi, 24.09.2026 abends ──────

     > ~~«Didi: «Am Computer beginnt die Liste auf der Oberkante des
     > Leitbilds.» … Gleiche Zeilen heisst gleiche Abstaende, also von oben
     > stapeln.»~~ — der Absatz unmittelbar darueber, vom selben Tag.

     «Die Zeilen der Liste verteilen sich gleichmaessig auf die Hoehe des
     Leitbeitrags; die letzte Trennlinie liegt auf dessen Unterkante. Ist die
     Liste hoeher als der Leitbeitrag, bleibt sie wie heute.»

     **Das ist kein Widerruf, sondern die zweite Kante.** Oben buendig war
     bestellt und steht; unten buendig kommt dazu. `align-content:start`
     liess die Liste nach der letzten Zeile aufhoeren — gemessen im lokalen
     Stapel: die letzte Trennlinie lag bei 1440 **175,31px**, bei 1200
     **145,66px** und bei 1024 **138,81px UEBER** der Unterkante des
     Leitbeitrags.

     ⚠⚠ **`space-between` waere das Naheliegende und ist das Falsche.** Es
     verteilt den ZWISCHENRAUM und nicht die Zeilen — und daran scheitert es
     zweimal:

       Zeilen   space-between      align-content:stretch
          1     -325,59px           0,00      ← eine Zeile hat keinen Zwischenraum
          2        0,00             0,00
          3        0,00             0,00
                                             (Abstand letzte Linie ↔ Unterkante, 1440)

     **Bei EINER Zeile gibt es keine Luecke zu verteilen, und `space-between`
     faellt auf `start` zurueck** — die Liste stuende wieder oben. Das ist
     kein Randfall: Die Anzahl kommt aus dem Backend.

     ⚠ Und dort, wo es buendig wird, klebt jede Trennlinie an ihrem eigenen
     Text (19px) und laesst darunter ein Loch (100,7px bei 1440, 82,4 bei
     1024). Das ist woertlich der Einwand des Absatzes darueber —
     verschieden grosse Abstaende um dieselbe Linie.

     **`stretch` verteilt die ZEILEN.** Sie werden alle gleich hoch und
     fuellen die Hoehe gemeinsam: 133,58px statt 75,14 bei 1440, 121,41 bei
     1024. Die Trennlinien stehen damit in gleichen Abstaenden, und die
     letzte liegt auf der Unterkante — gemessen 0,00 mit drei Zeilen bei
     1440, 1200 und 1024, und bei 1440 auch mit einer und mit zwei.

     ⚠ **Die zweite Regel gehoert dazu.** Allein gelassen sitzt der Text am
     KOPF seiner gewachsenen Zeile und die Linie weit darunter — dieselbe
     Schieflage wie bei `space-between`, nur spiegelverkehrt: 77,4px ueber
     der Linie, 13 darunter. `justify-content:center` teilt die gewonnene
     Hoehe auf beide Seiten (48,2 ueber, 42,2 unter der Linie; die 6px
     Unterschied sind der Aussenabstand des Titels und die Linie selbst).
     **Die 13px Polster aus `.spz` bleiben der Boden**, sie sind nur nicht
     mehr das ganze Mass.

     ⚠ **«Ist die Liste hoeher, bleibt sie wie heute» erfuellt sich von
     selbst:** Ohne freie Hoehe hat weder `stretch` noch `justify-content`
     etwas zu verteilen. Mit sieben Zeilen gegen einen 400,73px hohen
     Leitbeitrag gemessen — Zeilenhoehen 75,14, 19px ueber und 13px unter
     jeder Linie, Abstand zur Unterkante 0,00: **in allen vier geprueften
     Bauformen dieselben Zahlen.**

     ⚠ Schmal bleibt alles, wie es ist: Beide Regeln stehen IN dieser
     Abfrage, und darunter stehen Bild und Liste ohnehin untereinander.
     Gemessen bei 390 Zeilenhoehen 75,14 — wie heute. */
  .klein{align-content:stretch}
  .klein a{display:flex;flex-direction:column;justify-content:center}
  /* ⚠ **«Alle News» nur schmal** — Didis Punkt 4. Am Computer steht der
     Verweis oben rechts im Abschnittskopf und im Blick; schmal liegen ein
     Bild und vier Zeilen dazwischen. */
  .news-mehr{display:none}
}

/* Einstiegskacheln — Schachbrett */
/* **Die Kachelreihe heisst `.wegweiser`, nicht mehr `.tore`.**

   `tor` ist auf einer Fussballwebsite ein Treffer. Diese Reihe meint
   Eingaenge — die Augenzeile darueber lautet woertlich «Wohin moechtest du?».
   **Die Fachbedeutung gehoert dem Fach**, und wer den Namen fuer etwas
   anderes braucht, nimmt einen anderen.

   Was er angerichtet hat: `.tore{display:grid}` traf auch die
   `<td class="tore">` der Rangliste. Die Zelle wurde selbst zum Raster, und
   «21<i>:</i>9» stand in zwei bis drei Rasterzeilen statt in einer — bei
   1440 auf einer, weil das Raster dort drei Spalten hat, bei 390 auf zweien,
   unter 360 auf dreien. `white-space:nowrap` konnte nichts ausrichten: es gab
   keinen Umbruch zu verbieten, es waren drei Rasterfelder. Gemessen an der
   Teamseite bei 390: Zeilenhoehen 95/80/94/80 vorher, **50/49/49/49
   nachher**, und der unterbrochene gelbe Strich unter der Kopfzeile
   (Luecke Sp|Tore = 56px) schloss sich mit.

   **Umbenannt ist die Kachelreihe, nicht die Zelle — die Quelle, nicht das
   Symptom.** Beim naechsten `<td class="tore">` kollidiert nichts mehr. Der
   Preis waren 19 Markupstellen und 54 Selektoren gegen eine Markupstelle und
   vier; die billigere Haelfte haette `.tor`, `.tor-tx` und `.tor-gross` auf
   der Fachbedeutung stehen lassen und die Kollision nur latent gemacht.

   **Es ist der dritte Fall dieser Art**, und die zwei aelteren stehen
   nebenan: `.tore` gegen das Kachelraster am 25.08. (Kommentar bei
   `.sp-tab td.sp-tor`) und `.fuss-kontakt` am 26.08. (Kommentar bei
   `.fuss-mail`). Der zweite Befund am 25.08. war nicht die Kollision,
   sondern dass die Umbenennung damals **unvollstaendig** blieb: die
   Spieltabelle bekam `.sp-tor`, die Rangliste wurde uebersehen und trug den
   Namen zwei Tage weiter. */
.wegweiser{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:960px){.wegweiser{grid-template-columns:repeat(3,1fr)}}
.ww{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:210px;padding:22px;overflow:hidden;background:var(--tafel);color:#fff;
  transition:background .2s,color .2s;
}
.ww::before{content:'';position:absolute;left:0;top:0;width:100%;height:4px;background:var(--gelb);transform:scaleX(0);transform-origin:left;transition:transform .28s,background .2s}
.ww::after{content:'→';position:absolute;right:20px;bottom:20px;z-index:3;color:var(--gelb);font-size:21px;transition:transform .2s,color .2s}
.ww-gross{position:absolute;right:-22px;top:-16px;width:158px;height:158px;color:var(--gelb);opacity:.28;pointer-events:none;transition:transform .3s,opacity .2s,color .2s}

/* Platz für den Pfeil rechts unten. Ohne ihn läuft die letzte Textzeile
   darunter — zweispaltig unterhalb 415px, aber auch einspaltig bei 430px. */
.ww-tx{position:relative;z-index:2;padding-right:28px}
.ww-tx b{
  display:block;color:inherit;font-family:var(--d);font-variation-settings:'wdth' 110;font-weight:800;
  font-size:clamp(23px,2.5vw,30px);text-transform:uppercase;letter-spacing:-.028em;line-height:1.02;
}
.ww-tx span{display:block;color:inherit;opacity:.74;font-size:var(--tx-klein);margin-top:6px}
/* ⚠ **`--akzent` steht bei der Flaeche und nicht bei einer Fokusregel —
   25.09.2026.** Die Kachel ist ein `<a>`, und seit der Ring `--akzent` liest
   (`:focus-visible`), stuende er hier gelb auf gelb. Die Rolle haengt an der Flaeche:
   Wer die Kachel je umfaerbt, findet die Zeile dort, wo er sucht. */
.ww.gelb{background:var(--gelb);color:var(--dun);--akzent:var(--papier-text)}
.ww.gelb .ww-gross{color:var(--dun);opacity:.16}
.ww.gelb::before{background:var(--dun)}
.ww.gelb::after{color:var(--dun)}
@media(hover:hover){.ww:hover{background:var(--gelb);color:var(--dun)}}
@media(hover:hover){.ww:hover .ww-gross{color:var(--dun);opacity:.16;transform:rotate(-7deg) scale(1.08)}}
@media(hover:hover){.ww:hover::before{background:var(--dun);transform:scaleX(1)}}
@media(hover:hover){.ww:hover::after{color:var(--dun);transform:translateX(6px)}}
@media(hover:hover){.ww.gelb:hover{background:var(--tafel);color:#fff}}
@media(hover:hover){.ww.gelb:hover .ww-gross{color:var(--gelb);opacity:.3}}
@media(hover:hover){.ww.gelb:hover::before{background:var(--gelb)}}
@media(hover:hover){.ww.gelb:hover::after{color:var(--gelb)}}
@media(min-width:960px){.ww{min-height:230px}}
@media(max-width:559px){
  .wegweiser{gap:8px}
  .ww{min-height:150px;padding:14px}
  .ww-gross{width:86px;height:86px;right:-10px;top:-8px}
  .ww-tx b{font-size:17px;letter-spacing:-.02em}
  .ww-tx span{font-size:var(--tx-etikett);margin-top:3px;line-height:1.3}
  .ww::after{right:12px;bottom:12px;font-size:16px}
}

/* Bei zwei Spalten Kachel 3 und 4 tauschen, sonst entstehen senkrechte Streifen.
   Der Bereich deckt sich mit der Zweispaltigkeit: 360 bis 959px. Einspaltig
   ergibt die Grundfolge S G S G S G von selbst den richtigen Wechsel — mit dem
   Tausch entstünde dort S G G S S G, also zweimal zwei gleiche Kacheln. */
/* **Die Auswahl haengt an der Stellung, und das ist hier richtig.** Bei zwei
   Spalten rutschen Kachel 3 und 4 in die zweite Reihe, und das Schachbrett
   kehrt sich um - sonst stuenden zwei gleiche Farben senkrecht uebereinander.
   Das ist eine Eigenschaft der POSITION, nicht der Kachel: Eine Klasse im
   Markup waere bei jeder anderen Spaltenzahl falsch.

   **Zerbrechlich ist es trotzdem, und das gehoert dazugesagt:** Kommt eine
   fuenfte Kachel, sind diese Regeln falsch, und zwar lautlos - das
   Schachbrett verschiebt sich um eins, und niemand meldet es. Wer eine Kachel
   einfuegt, muss hier nachsehen.

   **Sie bleiben ungeschuetzt.** Wuerde nur dieser Block `(hover:hover)`
   bekommen, faerbte ein Tipp auf Kachel 3 sie mit `.ww:hover` auf Gelb - also
   auf die Farbe, die sie im Ruhezustand schon hat -, und Kachel 4 auf die
   Farbe ihres Nachbarn. Der Streifeneffekt, den dieser Block verhindert,
   entstuende durch das Antippen. */
@media(min-width:360px) and (max-width:959px){
  /* ⚠ Das Schachbrett dreht die Gruende um, und `--akzent` muss mitdrehen —
     sonst steht der Fokusring auf Kachel 3 gelb auf gelb und auf Kachel 4
     dunkel auf dunkel. **Die zweite Zeile ist keine Vorsorge:** Kachel 4
     traegt `.gelb` aus dem Markup und damit dessen Token, ihre Flaeche ist
     hier aber `--tafel`. */
  .ww:nth-child(3){background:var(--gelb);color:var(--dun);--akzent:var(--papier-text)}
  .ww:nth-child(3) .ww-gross{color:var(--dun);opacity:.16}
  .ww:nth-child(3)::before{background:var(--dun)}
  .ww:nth-child(3)::after{color:var(--dun)}
  .ww:nth-child(3):hover{background:var(--tafel);color:#fff}
  .ww:nth-child(3):hover .ww-gross{color:var(--gelb);opacity:.3}
  .ww:nth-child(3):hover::before{background:var(--gelb)}
  .ww:nth-child(3):hover::after{color:var(--gelb)}
  .ww:nth-child(4){background:var(--tafel);color:#fff;--akzent:var(--gelb)}
  .ww:nth-child(4) .ww-gross{color:var(--gelb);opacity:.28}
  .ww:nth-child(4)::before{background:var(--gelb)}
  .ww:nth-child(4)::after{color:var(--gelb)}
  .ww:nth-child(4):hover{background:var(--gelb);color:var(--dun)}
  .ww:nth-child(4):hover .ww-gross{color:var(--dun);opacity:.16}
  .ww:nth-child(4):hover::before{background:var(--dun)}
  .ww:nth-child(4):hover::after{color:var(--dun)}
}

/* Zahlenreihe */
.wirfch{display:grid;gap:30px}
/* column-gap nur solange zwei Spalten ohne Trennlinie nebeneinanderstehen:
   "MEISTERSCHAFTSSPIELE" und "SIEGE" stiessen bei 320-412px direkt aneinander.
   Ab 760px übernehmen Linie und Polster die Trennung, dort wieder 0. */
.zahlen{display:grid;grid-template-columns:repeat(2,1fr);column-gap:18px;margin-top:38px;border-top:2px solid var(--gelb)}
.z{padding:22px 0 18px;border-bottom:1px solid var(--li-fein)}
.z b{display:block;font-family:var(--d);font-variation-settings:'wdth' 118;font-weight:900;
  /* Auf der Stufe des Seitentitels. Zuvor 58px und damit lauter als der
     Seitentitel selbst — der Faktenblock ist die einzige grosse Zahl, die
     im selben Bild wie ein Titel steht. */
  font-size:clamp(30px,1.54rem + 1.49vw,46px);line-height:.9;letter-spacing:-.045em;color:var(--tx-hervor)}
.z span{display:block;font-size:var(--tx-etikett);letter-spacing:.15em;text-transform:uppercase;color:var(--tx-leise);margin-top:7px}
@media(min-width:760px){
  /* Die Spaltenzahl folgt den SICHTBAREN Kacheln, bis fünf — vier ergeben
     vier Spalten wie bisher, fünf ergeben fünf. Ab sechs wieder vier, der
     Rest bricht um: sechs schmale Spalten sind auf keinem Bildschirm mehr
     lesbar, und vier ist die Breite, für die die Beschriftungen geschrieben
     sind.

     Gerechnet wird in PHP (`front-page.php`, `--spalten`) und nicht hier —
     CSS kann seine Kinder nicht zählen. **Der Rückfall ist 4**: Der
     Zahlenblock im Blockeditor (`src/Bloecke/ausgabe.php`) setzt kein
     `--spalten` und bleibt damit unverändert.

     Bei fünf Spalten bricht "TRAINER & FUNKTIONÄRE" auf zwei Zeilen und
     macht die Kachel höher. Das ist hingenommen — die Beschriftung steht so
     im Prototyp, und ihr Text ist keine Frage des Rasters. */
  .zahlen{grid-template-columns:repeat(var(--spalten,4),1fr);column-gap:0}
  .z+.z{border-left:1px solid var(--linie);padding-left:20px}
  /* Schliesst die Reihe rechts, sonst wirkt die letzte Zelle offen */
  .z:last-child{border-right:1px solid var(--linie);padding-right:20px}
  /* Bei sechs und sieben Kacheln steht die letzte MITTEN in der zweiten
     Reihe. Eine Linie, die dort "rechts schliesst", schliesst nichts, sie
     steht nur quer im Raster — `.zahlen-teilreihe` kommt aus PHP und genau
     dann, wenn die letzte Reihe nicht voll ist. */
  .zahlen-teilreihe > .z:last-child{border-right:0;padding-right:0}
}
@media(min-width:900px){
  .wirfch{grid-template-columns:1fr 1fr;gap:38px;align-items:start}
  .wirfch .sec{font-size:clamp(26px,1.38rem + 0.89vw,35px)}
  .wirfch .zahlen{grid-template-columns:repeat(2,1fr);margin-top:6px}
  .wirfch .z+.z{border-left:0;padding-left:0}
  .wirfch .z:nth-child(2n){border-left:1px solid var(--linie);padding-left:20px}
}

/* Logolauf — endlos, pausiert beim Darüberfahren */
/* ⚠⚠ **Die Blende war ein Prozentmass und hat darum das erste Logo
   verdeckt — behoben am 12.09.2026.**

   Hier stand `transparent, #000 6%, #000 94%, transparent`. **6% wachsen mit
   dem Band**, und das Band ist breit:

   ```
   1280px   Band 1208px   Blende  72px   Bild 18..182   → 54 von 164px verdeckt (33%)
   Teamseite Band 1208px  Blende  72px   Bild  8..150   → 64 von 142px verdeckt (45%)
    360px   Band  324px   Blende  19px   Bild 18..142   →  1px verdeckt
   ```

   **Auf dem Telefon war die Blende richtig, auf dem Rechner verschluckte sie
   ein halbes Logo.** Dieselbe Regel, zwei Ergebnisse — das ist immer das
   Zeichen fuer ein Mass, das am falschen Bezug haengt.

   > **Ein Prozentmass fuer eine optische Kante skaliert mit dem Behaelter und
   > nicht mit dem, was es weich machen soll.**

   ⚠ **Und jetzt nur noch rechts.** Die Bahn rueckt in `steps()` um genau
   eine Kachel weiter — **links steht darum im Ruhezustand immer eine
   Kachelkante**, gemessen Versatz 0px. Dort gibt es nichts weichzuzeichnen.
   Abgeschnitten wird nur rechts, wo die naechste Kachel in den Rand laeuft.

   ⚠ Ein Sponsor, dessen Logo halb verdeckt ist, ist schlimmer als keine
   Blende. */
.logolauf{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%)}
/* Die Dauer wird gerechnet, nicht gesetzt: --n traegt die Zahl der
   Sponsoren, --takt die Zeit je Kachel. 4.75s ergeben bei acht Sponsoren
   die frueheren 38s, mobil 3.5s die frueheren 28s — der Bestand bleibt
   damit unveraendert, und bei dreimal so vielen Logos ist die Bahn
   dreimal so lang und die Dauer dreimal so gross. Eine feste Dauer
   haette die Geschwindigkeit verdreifacht: gemessen 35 px/s heute gegen
   106 px/s bei 24 Sponsoren, und eine Kachel zoege in 1,2 statt 4,8
   Sekunden vorbei. Ein Logo ist kein Text, den man mitliest. */
/* **Ruckweise statt fliessend, seit dem 28.08.2026.** Vorher lief das Band
   gleichmaessig; ein Logo zog in 4,8 Sekunden vorbei und stand nie still.
   **Jetzt steht es 4,8 Sekunden und rueckt dann eine Kachel weiter** —
   dieselbe Dauer, aber als Ruhe statt als Fahrt.

   **`steps(--n)` trifft die Kachelbreite exakt, ohne sie zu kennen.** Die
   Bahn traegt die Liste zweimal, also 2n Kacheln; `-50%` sind genau n
   Kacheln, und n Schritte darauf sind einer je Kachel. Das gilt bei 200px
   auf der Startseite wie bei 158 und 136 im Partnerband, ohne dass
   irgendwo eine Breite steht. Eine Zahl in den Keyframes haette bei jedem
   Umbruchpunkt danebengelegen.

   **Der Uebergang ist ein Schnitt, kein Gleiten.** Ein Gleiten mit Pause
   braucht Keyframes, deren Prozentwerte von n abhaengen — die muesste das
   Skript erzeugen, das ohnehin `--n` setzt. Steht als Weg offen, ist aber
   nicht gebaut. */
.logolauf-track{--takt:4.75s;--luecke:10px;display:flex;gap:var(--luecke);width:max-content;
  animation:logolauf calc(var(--n,8) * var(--takt)) steps(var(--n,8)) infinite}
/* Die erste Liste ist eine echte Liste, die zweite ihre stumme Kopie —
   sie traegt aria-hidden, sonst hoert ein Vorleseprogramm jeden Sponsor
   zweimal. */
.logolauf-liste{display:flex;gap:10px;list-style:none;margin:0;padding:0}
/* Passt die erste Liste ins Fenster, gibt es nichts zu verschieben:
   dann steht das Band still und die Logos stehen ruhig nebeneinander.
   Die Schwelle ist eine Messung, keine Zahl — nebeneinander passen 2
   Kacheln bei 390px, 4 bei 768, 7 bei 1440, 9 bei 1916 und 10 bei
   3440px.
   Der Befund, der die Messung rechtfertigt: bei 1916 und 3440 passten
   die acht Sponsoren laengst ins Fenster, und das Band lief trotzdem —
   es bewegte etwas, das nichts zu verschieben hatte. Eine feste
   Schwelle von vier haette diesen Fall nie gefunden. */
.logolauf.ruhig .logolauf-track{animation:none;width:auto;
  justify-content:center;flex-wrap:wrap}
.logolauf.ruhig .logolauf-liste[aria-hidden]{display:none}
/* **Diese eine bleibt ungeschuetzt, und das ist Absicht.** Alle anderen
   Zeigerregeln sind am 26.08.2026 in `@media(hover:hover)` gewandert, damit
   sie auf dem Handy nicht haengenbleiben. Hier waere der Schutz ein Verlust:
   Das Anhalten des Logobandes ist auf einem Tastgeraet die EINZIGE
   Moeglichkeit, ein Logo zu lesen. Es gibt keinen Pausenknopf, und die zwei
   anderen Ausstiege haengen an Umstaenden, die niemand steuert -
   `.logolauf.ruhig` setzt das Skript, wenn alle Logos ohnehin ins Fenster
   passen, und `prefers-reduced-motion` ist eine Systemeinstellung.

   **Der haengende Zustand ist hier der nuetzliche.** Wer tippt, haelt das Band
   an; wer woandershin tippt, laesst es weiterlaufen. */
.logolauf:hover .logolauf-track{animation-play-state:paused}
/* **Hier ist die Mindesthöhe die einzige Höhe, und darum steht sie hier.**
   Die Laufbandkachel trägt ihr Logo als blankes `<img>` ohne `.f` — es gibt
   kein `aspect-ratio`, aus dem eine Höhe folgen könnte, und ein leeres Band
   fiele auf die Höhe des Bildes zusammen. `.spl` selbst hat seit dem
   04.09.2026 keine mehr; wer diese Zahl streicht, streicht die Höhe. */
/* ⚠⚠ **Hier standen `min-height:92px` und `max-height:56px` — abgeloest am
   22.09.2026.** Der Vermerk darueber gilt in seinem Kern weiter und in
   seiner Folgerung nicht mehr:

   > «Die Laufbandkachel traegt ihr Logo als blankes `<img>` ohne `.f` — es
   > gibt kein `aspect-ratio`, aus dem eine Hoehe folgen koennte. Wer diese
   > Zahl streicht, streicht die Hoehe.»

   **Richtig ist: es gab keins. Jetzt steht es hier.** Die Hoehe folgt aus
   `aspect-ratio:3/1` und der Breite; ein leeres Band faellt nicht zusammen,
   weil die Kachel ihre Hoehe nicht mehr vom Bild bezieht.

   ── Warum das an `.logolauf` steht und nicht an `.partnerband` ────────

   ⚠ **Bis heute hingen alle diese Regeln am Vorfahren `.partnerband`** —
   und die Startseite zeigt DASSELBE Laufband aus DERSELBEN Vorlage
   (`template-parts/logolauf.php`), nur ohne diesen Vorfahren. Sie bekam
   darum die Grundfassung: Kachel 200x92 statt 3:1, Logo auf 56px gedeckelt
   und in seiner natuerlichen Groesse mittig in viel Weiss.

   > **Eine Regel, die an einem Vorfahren haengt, gilt fuer den Ort und
   > nicht fuer das Ding.** Dieselbe Vorlage sah an zwei Stellen
   > verschieden aus, und niemand hatte eine zweite Fassung geschrieben —
   > es fehlte bloss die erste.

   **Der Unterschied, der bleiben soll, ist die Groesse**, und die ist
   genau eine Zeile: `width`. 200px auf der Startseite, 158px im Band unten,
   160/136px unter 700px. Die Hoehe rechnet das Verhaeltnis aus. */
.logolauf .spl{
  width:200px;flex:none;font-size:var(--tx-etikett);
  min-height:0;height:auto;aspect-ratio:3/1;padding:4px 8px;overflow:hidden}
.logolauf .spl:has(img){display:block;padding:0}
/* **Der Name bekommt eine Huelle, und die Huelle bricht um.**

   `overflow-wrap:anywhere` und nicht `normal`: «Wuethrich-Baumberger» ist
   ein Wort und passt in 142px nie auf eine Zeile. Lieber ein Umbruch
   mitten im Wort als eine Schrift, die deswegen auf den Boden faellt.

   Die Schriftgroesse selbst setzt `fch.js` — **Text messen kann CSS
   nicht.** Ohne JavaScript bleibt es bei `--tx-etikett`, und `overflow:
   hidden` an der Kachel verhindert, dass ein langer Name aus ihr
   hinauslaeuft. **Das ist die Notbremse und nicht der Weg:** Der Auftrag
   sagt «nicht abschneiden», und dafuer sorgt die Schrumpfung. */
.logolauf .spl .spl-name{
  display:block;line-height:1.15;overflow-wrap:anywhere;hyphens:auto}
/* **Die Endstellung ist eine Liste plus ihre Luecke — nicht die halbe Spur.**
   Bis zum 29.08.2026 stand hier `translateX(-50%)`, und der Kommentar daneben
   sagte: «`steps()` trifft die Kachelbreite exakt, ohne sie zu kennen.»
   Gemessen am 29.08. an drei Breiten mit zwei Kachelgroessen: **jeder Schritt
   war 0,63px zu kurz.**

       Spur   = 2 x (8 Kacheln + 7 Luecken) + 1 Luecke dazwischen
              = 2 x (8*158 + 7*10) + 10  = 2678px
       -50 %  = 1339px
       Soll   = eine Liste plus ihre Luecke = 1334 + 10 = 1344px

   **`-50 %` waere nur richtig, wenn zwischen den zwei Listen keine Luecke
   stuende.** Sie steht dort — also fehlten fuenf Pixel je Umlauf, und am Ende
   sprang das Band um diese fuenf zurueck. Ein Ruck alle 38 Sekunden, und acht
   Haltestellen, die zunehmend neben der Kachelkante lagen.

   **Der Satz, der den Fehler getragen hat, war eine Rechnung im Kommentar:**
   Eine Rechnung im Kommentar ist so gefaehrlich wie eine Messung im Kommentar
   — sie wird geglaubt, ohne nachgerechnet zu werden. Die alte stimmte fuer
   die Kachelbreite und unterschlug die Luecke zwischen den Listen.

   Jetzt kommen `gap` und Endstellung aus derselben Variablen `--luecke`. Wer
   die Luecke aendert, aendert beide — und keine zweite Zahl steht daneben,
   die man vergessen kann. */
@keyframes logolauf{to{transform:translateX(calc((-100% - var(--luecke)) / 2))}}

/* **`steps()` haelt die Logos scharf — das ist der zweite Grund, und er stand
   hier noch nicht. Gemessen am 21.09.2026.**

   Der Grund darueber ist die Kachelkante. Der hier ist die Rasterung: **Eine
   Transformation, die zwischen zwei Geraetepixeln steht, zeichnet weich.** Auf
   `/sponsoren/` wurde die Transformation dieser Spur von Hand gesetzt und ein
   Ausschnitt von 600x64 CSS-px bei DPR 2 aufgenommen; die Zahl ist der
   mittlere Betrag des Helligkeitsgradienten, hoch heisst scharfe Kanten:

       ohne Transformation                        10,2348
       translateX(-168px)    = -336 Geraetepixel  10,2348   ganz  -> scharf
       translateX(-168.5px)  = -337 Geraetepixel  10,2317   ganz  -> scharf
       translateX(-168.25px) = -336,5             10,1358   halb  -> weich
       translateX(-168.33px) = -336,66            10,1374   halb  -> weich
       translateX(-168.75px) = -337,5             10,1321   halb  -> weich

   **Auf ganzen Geraetepixeln ist eine Transformation so scharf wie keine; auf
   halben verliert die Kante rund ein Prozent.** Das ist wenig und genau
   deshalb heimtueckisch — es sieht nicht nach Fehler aus, es sieht nach
   schlechtem Bild aus.

   **Das Band steht immer auf ganzen Geraetepixeln, und `steps()` ist der
   Grund.** Zwischen den Spruengen bewegt es sich nicht, und jede Haltestelle
   ist die Strecke durch `--n`. Nachgerechnet ueber vier Seiten, 17
   Fensterbreiten und vier Aufloesungen (1; 1,5; 2; 3): **2600 Haltestellen,
   keine einzige auf einem Subpixel.**

   ⚠ **Wer `steps(var(--n,8))` gegen `linear` tauscht, weil das Band ruckelt,
   zahlt mit der Schaerfe jedes Logos.** Eine gleichmaessige Fahrt steht in
   fast jedem Bild zwischen zwei Geraetepixeln — bei 1680px in 47,5s sind das
   0,59 CSS-px je Bild, und ein ganzer Geraetepixel kaeme nur zufaellig
   heraus. Die Kachelkante verloere sie obendrein.

   **Der Rest des Hauses braucht hier nicht gesucht zu werden:** ueber 18
   Fensterbreiten und dieselben vier Aufloesungen landet jede andere
   Ruhe-Transformation an einem Bildtraeger auf ganzen Geraetepixeln, und es
   gibt im Theme kein `will-change`, kein `translateZ`, kein
   `backface-visibility`. Gebrochene Kastengroessen wie `141.984x47.328`
   zeichnen nichts weich — Chromium rastet die Malflaeche aufs Geraeteraster
   ein; auch das ist am 21.09. gemessen. */

/* **Die Pfeile — nur im ruhenden Zustand.**

   Am laufenden Band waeren sie widerspruechlich: Es bewegt sich bereits und
   haelt beim Darueberfahren an. Darum stehen sie unter
   `prefers-reduced-motion:reduce` und nirgends sonst; das Skript baut sie
   auch nur dort.

   **`.logolauf.ruhig` bekommt keine.** Dort passen alle Logos ohnehin ins
   Fenster — es gaebe nichts zu blaettern, und ein Knopf ohne Wirkung ist
   schlechter als keiner. */
.lauf-pfeil{display:none}
@media(prefers-reduced-motion:reduce){
  .logolauf-pfeile{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
  .logolauf.ruhig+.logolauf-pfeile{display:none}
  .lauf-pfeil{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border:1px solid var(--papier-linie);background:none;
    color:var(--papier-text);cursor:pointer;font-size:18px;line-height:1}
  .lauf-pfeil[disabled]{opacity:.35;cursor:default}
}
@media(prefers-reduced-motion:reduce) and (hover:hover){
  .lauf-pfeil:not([disabled]):hover,.lauf-pfeil:not([disabled]):focus-visible{
    background:var(--gelb);border-color:var(--gelb);color:var(--dun);outline:0}
}
@media(max-width:700px){.logolauf .spl{width:160px}.logolauf-track{--takt:3.5s}}
/* ohne Bewegung: ruhiges Raster statt abgeschnittenem Streifen */
@media(prefers-reduced-motion:reduce){
  .logolauf{-webkit-mask-image:none;mask-image:none}
  /* **Eine Reihe zum Blaettern, kein Raster — geaendert am 01.09.2026.**

     Hier stand `display:grid` mit `width:auto` und `.spl{width:auto}`. Zehn
     Kacheln standen dann in zwei Reihen, **jede auf ihre Spalte gedehnt** —
     gemessen 205px statt 200. Didi hat es gesehen und «sieht aus wie ein
     Fehler» genannt.

     > **Ein Ersatzzustand, der aussieht wie ein Fehler, ist einer. Nicht der
     > Besucher ist falsch eingestellt.**

     Die Kachelbreite ist der Kern der Sache: Sie ist der Unterschied zwischen
     «steht ordentlich» und «sieht kaputt aus», und sie kostet eine Zeile —
     `.spl{width:auto}` faellt ersatzlos weg, damit die 200px aus der
     Grundregel gelten.

     **Fuer die grosse Mehrheit aendert sich nichts.** Das Band laeuft weiter
     wie am 28.08. gebaut. Hier geht es nur um die, die Bewegung selbst
     abgestellt haben — fuer sie ist Stillstand kein Mangel, sondern der
     Zweck der Einstellung. */
  /* **`width:100%` und nicht `max-content`.** Der Track ist sonst so breit
     wie sein Inhalt und ragt aus dem Band heraus -- dann hat er keinen
     Ueberlauf, und `overflow-x:auto` findet nichts zu schieben. Gemessen:
     scrollWidth 2090 = clientWidth 2090, also kein Weg. */
  .logolauf-track{display:flex;width:100%;animation:none;
    overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity}
  /* Die Kachel behaelt ihre 200px aus der Grundregel. */
  .logolauf-track .spl{scroll-snap-align:start}
  /* **Die zweite Liste faellt weg.** Sie fuellt die Luecke, die das Schieben
     rechts erzeugt — ohne Schieben erzeugt niemand eine Luecke, und sie
     stuende zweimal dasselbe da. */
  .logolauf-track .logolauf-liste[aria-hidden]{display:none}
  /* Ohne Bewegung: die zweite Liste ganz weg, die erste vollstaendig.
     Frueher standen hier sechs Kacheln — bei acht Sponsoren sechs von
     acht, bei 24 aber sechs von 24, und die achtzehn uebrigen fielen
     ohne Grund heraus. */
  .logolauf-liste[aria-hidden]{display:none}
  .logolauf-liste{display:flex;gap:10px}
}

/* ── 90 Teamübersicht ─────────────────────────────────────── */

.tgrp+.tgrp{margin-top:44px}
.tzliste{display:grid;border-top:2px solid var(--gelb)}

/* ── Spielerprofil ──────────────────
   **Foto und Angaben stehen in einem grauen Block, nicht auf Weiss.** Der
   Seitenkopf bleibt, wie er auf jeder anderen Ansicht ist — Brotkrume und
   Titel, dazu die Rueckennummer als gelber Klotz links vom Namen. Darunter,
   auf Papier, der Block in `--papier-flaeche`.

   **Drei Gruende, und der dritte ist der eigentliche.** Ein voller dunkler
   Kopf ergaebe drei dunkle Flaechen uebereinander — schwarzer Balken, Kopf,
   Band. Das Foto braucht auf Grau keine Kante, waehrend ein helles Bild auf
   Weiss verschwimmt. Und **die Leere rechts der Angaben wird Polster statt
   Loch**: Es sind dieselben rund 500px bei 1440, aber innerhalb einer Flaeche
   mit Rand lesen sie sich als Raum.

   **Der Block laeuft ueber die volle `.wrap`-Breite**, nicht nur so breit wie
   sein Inhalt — ein Kasten, der auf halber Breite endet, sieht aus, als
   fehlte etwas daneben.

   **Die Nummer steht oben, nicht auf dem Foto.** Damit steht sie auch dann,
   wenn kein Foto da ist, und die Frage «was steht in der Flaeche ohne
   Nummer» ist erledigt: Kein Foto heisst kein Bildfeld, die Nummer bleibt
   oben.

   **Zwei Faktenzeilen, nicht drei.** «Im Kader seit» war vorgesehen und ist
   nicht zu haben: Die Zuordnung fuehrt `person_id`, `team`, `funktion`,
   `rueckennummer` und `position` — kein Datum. Ein Kader vom Verband ist eine
   Momentaufnahme und kennt keinen Eintritt. Statt die Angabe zu erfinden,
   ist der Block flacher und das Foto kleiner: 240px statt 300.

   ── Was hier stand und gegenstandslos geworden ist ──
   **Fassung (c), die Statistiktabelle neben dem Foto.** Sie war nicht falsch:
   Sie war die Antwort auf zwei Loecher — 380px rechts neben den Angaben und
   300px unter ihnen —, die beide entstanden, weil das Foto hoeher war als die
   zwei Zeilen daneben. An drei Datenstaenden gemessen (1, 3 und 10
   Tabellenzeilen, je bei 1000 und 1440) hielt sie stand: Rest unter der
   rechten Spalte +112 / −10 / −435 gegen konstant +300 bei der alten
   Anordnung.

   **Der graue Block loest beide Loecher anders.** Das untere verschwindet,
   weil der Block so hoch ist wie das Foto; das rechte wird Polster. Die
   Tabelle gewinnt dabei die volle Breite statt 940px. **Nicht falsch, nicht
   ueberfluessig, sondern gegenstandslos** — dieselbe Sorte wie
   «untereinander statt als Raster» bei den Anlaessen. Die sechs Messungen
   bleiben der Beleg dafuer, dass die Loecher echt waren.

   **Und `display:contents` unter 1000px faellt mit.** Es war die Loesung fuer
   ein Raster, das es nicht mehr gibt. */
/* **Die Faktenliste ist keine `.tzliste` mehr.** Von dort kamen die gelbe
   Oberkante und — ueber `.tz b` — die zweite fette Auszeichnung im selben
   Kasten. **Beides war geerbt und nicht gemeint:** Gelb traegt im Projekt die
   Tabellenkoepfe und die Rueckennummer; ueber einer zweizeiligen Liste ohne
   Kopfzeile ist der Strich das staerkste Element in einem sonst ruhigen Block.
   Und der graue Block grenzt ohnehin ab.

   **Etikett fragt, Wert antwortet.** Vorher standen beide fett und gleich
   gross — eine Zeile mit zwei gleich starken Enden und ohne Richtung. Jetzt
   traegt das Etikett die Form, die Anlassseite und Telegramm schon fuehren:
   klein, Versalien, gesperrt, in `--gold-flaeche`. Der Wert steht schlicht in
   `--papier-text`, ohne Farbe und ohne Linie. */
/* ── Der Spielerblock ist entfallen ─────────────────────────────────────
   Er trug eine graue Flaeche ueber die volle Breite fuer zwei Angaben —
   Position und Team — und stand rechts zu rund 700px leer. **Ein Abschnitt
   behauptet, dass darin mehr steht.**

   Position und Team stehen jetzt als eine Zeile unter dem Namen: Sie gehoeren
   zur Person, nicht in einen eigenen Abschnitt. Und die Nummer stand ohnehin
   schon im Kopf.

   **Nur die Kaderangaben, nicht alle Zuordnungen.** Wer in zwei Mannschaften
   spielt, hat zwei Profilseiten — nicht eine mit zwei Zeilen. Das war ein
   Missverstaendnis beim Entwurf und ist geklaert.

   **`.sp-block` bleibt und ist NICHT tot.** Ein erster Anlauf hat fuenf
   Regeln entfernt — und damit den grauen Kopfblock der Spielseite
   zerschlagen: Grund, Polster und Raster weg, Hoehe von 230 auf 126.
   Die Klasse traegt zwei Bauten, nicht einen.

   Dasselbe gilt fuer `.sp-fakten`: Die Spielseite benutzt sie fuer ihre
   Faktenzeile. **Auf der Spielerseite ist keine der beiden mehr im Markup** —
   das macht sie nicht tot, sondern nur woanders gebraucht. */
.sp-block{display:grid;align-items:start;background:var(--papier-flaeche);
  grid-template-columns:128px minmax(0,1fr);gap:18px;padding:18px}
.sp-block .f{width:128px;flex:none;aspect-ratio:3/4}
.sp-block:not(:has(.sp-bild:not([hidden]))){grid-template-columns:minmax(0,1fr)}
/* ── Der Spielerkopf steht auf Papier ────────────────────────────────────
   **Kein Kopfbild, kein schwarzer Block.** Alle anderen Unterseiten tragen
   ihn — Teams, Anlaesse, Chronik —, und die Spielerseite ist damit die
   einzige Ausnahme. **Der Grund ist der Gegenstand:** Ein Thema bekommt einen
   Kopf mit Muster; eine Person bekommt ein Gesicht. Das Trikotsymbol stand
   dort ohnehin als Ersatz fuer ein Bild, das es jetzt gibt.

   Brotkrume, Nummer und Name stehen untereinander auf Weiss, darunter die
   Positionszeile, darunter das Portraet. **Dieselbe Leserichtung wie eine
   Personenkarte** auf der Organisationsseite.

   Die Brotkrume traegt hier dunkle Schrift statt heller — sie lag vorher auf
   Schwarz. Der Wert steht in `.papier .brot`, nicht als eigene Regel. */
.sp-kopfblock .brot{color:var(--papier-halb)}
.sp-kopfblock .brot a{color:var(--papier-text)}
.sp-name{font-family:var(--d);font-variation-settings:'wdth' 110;font-weight:800;
  font-size:clamp(30px,1.6rem + 1.4vw,44px);line-height:1.06;letter-spacing:-.02em;
  margin:6px 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sp-unter{font-size:var(--tx-lead);color:var(--papier-halb);margin:8px 0 22px}
/* ── Der Spielerkopf als Karte ───────────────────────────────────────────
   **Portraet, Name, Position und die drei Zahlen stehen in einem Behaelter**,
   auf `--papier-flaeche` — derselben grauen Flaeche wie `.sp-block` auf der
   Spielseite und die Stufenkacheln.

   **Die Brotkrume bleibt draussen.** Sie ist der Weg zur Seite und nicht Teil
   der Person; im Kasten waere sie eine Angabe ueber ihn.

   **Die Karte loest zwei Faelle, die vorher offenblieben.** Ohne Portraet
   schrumpft sie, statt eine leere 240er-Spalte stehenzulassen. Und die drei
   Zahlen sitzen sichtbar im selben Behaelter wie der Name, statt frei auf
   Weiss zu schweben.

   **Sie hoert bei 760 auf, auch wenn die Seite breiter ist.** Ueber die ganze
   `.wrap` gezogen stuende rechts der Zahlen bei 1440 eine graue Flaeche von
   rund 800 px, und der Strich ueber den Kennzahlen liefe quer durch den
   halben Bildschirm. **Leeres Weiss ist Raum, leeres Grau ist ein halbvoller
   Kasten.**

   **Die Reihenfolge im Quelltext ist die des Handys** und die, die ein
   Vorleser hoert: Name, Position, Zahlen, Bild. Oben ruecken Bild und Zahlen
   per `grid-row` an ihren Platz. */
.sp-kopfkarte{background:var(--papier-flaeche);padding:18px;margin-top:10px;
  display:grid;grid-template-columns:128px minmax(0,1fr);gap:0 18px;
  grid-template-rows:auto auto 1fr;align-items:start}
.sp-kopfkarte .sp-bild{grid-column:1;grid-row:1 / span 2;width:128px}
/* ⚠⚠ **Ohne Foto faellt die Fotospalte weg — Didi, 24.09.2026.**

   «Ist kein Foto hinterlegt, entfaellt die Fotospalte ganz — Name,
   Mannschaft und Kennzahlen ruecken an den linken Rand des Kastens, statt
   einen leeren Platz stehen zu lassen.»

   **Die Bauform steht schon im Haus:** `.sp-block:not(:has(.sp-bild…))`
   weiter oben (bei 5136) macht dasselbe fuer den Statistikblock. Hier
   genuegt `:has(.sp-bild)` ohne den `[hidden]`-Zusatz, weil die Vorlage
   das Bild gar nicht erst ausgibt, wenn keines hinterlegt ist — es gibt
   kein verstecktes Element, nur keines.

   ⚠⚠ **Die drei Kinder muessen mit, und das ist nicht Kosmetik.** Sie
   stehen ausdruecklich in Spalte 2 (`.sp-name`, `.sp-unter`) bzw. ab 760
   auch `.sp-kenn`. Bliebe das stehen, verlangte ein Kind eine zweite
   Spalte, die es nicht mehr gibt — **das Raster legte sie stillschweigend
   als implizite Spalte an**, und der Inhalt saesse wieder neben einer
   leeren Flaeche statt am Rand. Der Fehler saehe aus wie vorher, nur
   anders zustande gekommen.

   b=3 gegen b=2 der Medienregeln — die Zuweisung gilt auf jeder Breite,
   ohne dass es auf die Reihenfolge ankaeme. */
.sp-kopfkarte:not(:has(.sp-bild)){grid-template-columns:minmax(0,1fr)}
.sp-kopfkarte:not(:has(.sp-bild)) .sp-name,
.sp-kopfkarte:not(:has(.sp-bild)) .sp-unter,
.sp-kopfkarte:not(:has(.sp-bild)) .sp-kenn{grid-column:1}
/* **Der Spielername ist ein Seitentitel und steht darum auf Stufe S.**

   Bis zum 29.08.2026 stand hier eine feste 23px, ab 760 eine eigene Kurve
   `clamp(30px,1.6rem + 1.4vw,44px)`. Beide Werte lagen auf keiner der zwei
   Leitern, und `spieler` war damit **die einzige der 32 Ansichten, deren
   Seitentitel nicht auf S steht.** Die Ausnahme hat niemand entschieden — sie
   ist entstanden, weil jemand eine Zahl hingeschrieben hat.

   Die Kurve ist jetzt zeichengleich die von `h1.big`. **Gleiche Rolle, gleiche
   Stufe.**

   **Zum Einwand, dass 44 gegen 46 unsichtbar ist:** Genau darum stand der Wert
   wochenlang da. Eine Abweichung, die man nicht sieht, wird nicht gemeldet und
   darum nie behoben — **und sie wandert ins Theme mit.**

   Die feste 23 war nicht noetig: Gemessen aendert die durchlaufende Kurve
   weder die Kartenhoehe (290px auf dem Handy) noch das Portraet, und sie
   erzeugt auf keiner der fuenf Breiten einen Ueberlauf. */
/* **Der Spielername steht seit dem 29.08.2026 auf A und nicht mehr auf S** —
   am selben Tag, an dem er auf S gesetzt wurde. Der Kommentar darueber
   begruendet die S-Fassung mit «der Spielername ist ein Seitentitel, gleiche
   Rolle, gleiche Stufe». **Die Rolle stimmt, die Stufe folgt aber nicht aus
   ihr allein.**

   Gemessen bei 1440: Der Titel im Kopfband hat 1280 von 1440px (89 %), dieser
   hier **434 (30 %)**. 46px in einer 434px-Spalte sind knapp zehn Zeichen je
   Zeile. **Auf dem Handy faellt das nicht auf** — dort haben beide 82 bis 91 %,
   und genau darum ist die S-Fassung durchgegangen.

   > **Eine Stufe rechnet mit dem Fenster, der Titel steht im Behaelter.** */
.sp-kopfkarte .sp-name{grid-column:2;grid-row:1;margin:0;
  font-size:clamp(26px,1.38rem + 0.89vw,35px);gap:9px;hyphens:auto}
.sp-kopfkarte .sp-unter{grid-column:2;grid-row:2;margin:6px 0 0;
  font-size:var(--tx)}
/* ⚠⚠ **Der Hinweis steht, WO die Kennzahlen staenden — 12.09.2026.**

   Er trug bis dahin `.sp-unter` — dieselbe Klasse wie «Torhüter · FC
   Herrliberg 1» eine Zeile darueber. **Beide bekamen damit
   `grid-column:2; grid-row:2`: dieselbe Rasterzelle.** Auf der Seite von
   Marko Vasilj lag der Satz ueber der Rolle, 245px hoch bei 390px Breite.

   > **Zwei Elemente mit derselben Klasse in einem Raster stehen
   > uebereinander, nicht untereinander — das Raster hat keine Meinung
   > dazu, wie viele es sind.**

   Er ersetzt die Kennzahlen und nimmt darum deren Platz: Zeile 3, unter der
   Trennlinie. ⚠ Damit ist auch die Luecke gefuellt, die entstand, weil der
   Hinweis die Kennzahlen ersetzte, ohne ihren Platz einzunehmen. */
/* ⚠⚠ **`.fch-ohne-nummer` ist am 12.09.2026 ersatzlos entfallen.**
   Sie trug den Hinweissatz im Kopf — und der stand ein zweites Mal, wortgleich,
   unter der Ueberschrift «Einsaetze». Dort gehoert er hin; hier erzeugte er
   eine leere rechte Haelfte von rund 700px.

   **Eine Regel gegen etwas, das es nicht gibt, ist kein Schutz, sondern die
   Behauptung, es gaebe das Ding noch.** Darum fallen alle drei Regeln mit. */
.sp-kopfkarte .sp-kenn{grid-column:1 / -1;grid-row:3;margin:20px 0 0;
  padding-top:16px;border-top:1px solid var(--papier-linie)}
/* **Die Kennzahl steht auf der bestehenden Anzeigestufe, nicht auf einer
   neuen.** Bis zum 29.08.2026 stand hier eine feste 30 — bei 390px damit
   1,30x LAUTER als der Name der Person, um die es geht. Die Umkehrung der
   Rangfolge, und sie entstand, weil 30 nicht mitwuchs, waehrend alles um sie
   herum eine Kurve ist.

   Die Stufe ist `clamp(21px,3.4vw,30px)` — dieselbe wie `.cdz b`, in der
   Anzeigeleiter «Countdown, Torschuetzenzahl». **Vorgeschlagen war eine eigene
   Kurve** `clamp(20px,1.05rem + 1vw,30px)`; nachgerechnet traf sie die
   bestehende Stufe an beiden Enden (0,3px bei 390, gleich bei 1440) und ging
   in der Mitte um bis zu 2,96px auseinander. **Eine Kurve, die eine Stufe
   fast nachbaut, ist eine Stufe zu viel.**

   Der Abstand nach unten traegt: 21 gegen die 17 der Statistiktabelle sind
   **1,24x** — genau der Schritt, den die Leiter zwischen F und G fuehrt.
   **Die Trennung ist geprueft und nicht nur beabsichtigt.** */
.sp-kopfkarte .sp-kenn span{font-size:clamp(21px,3.4vw,30px)}
.sp-kopfkarte .sp-nr{padding:0 7px;margin-right:0}
/* **Der Teamname steht unter 760 auf eigener Zeile, ohne Trenner.** Er ist
   eine zweite Angabe und kein Nachsatz zur Position; bricht «Mittelfeld · FC
   Herrliberg 1» von selbst um, rutscht der Punkt an den Zeilenanfang. */
.sp-team{display:block}
/* **Unter 430 steht der Name ueber der ganzen Karte, nicht neben dem
   Portraet.** Der Grund ist nicht der lange Name, sondern der gewoehnliche.

   Gemessen bei 320: Die Namensspur neben dem 128px-Portraet ist **102px**
   breit, und die Schrift steht dort auf 30px. **Damit stand schon «Jan
   Hofer» — neun Zeichen — auf zwei Zeilen.** Ab zwoelf Zeichen («Jan
   Schnyder») lief die Seite ueber, bei 320 um 14px, bei neunzehn Zeichen um
   85px. Von sechzehn namenstragenden Stellen im Haus war dies die einzige,
   die ueberlief; alle anderen brechen nur um.

   Ueber die ganze Karte misst die Spur **248px**. Kein Ueberlauf mehr, bei
   keiner Breite und keinem Namen, und «Jan Hofer» steht auf einer Zeile.
   Die Karte waechst dafuer von 290 auf 322px.

   **Zwei andere Mittel sind gemessen und verworfen:** `hyphens:auto` allein
   liess «Jan Schnyder» weiter 16px aus der Karte ragen — die Trennung greift
   nur, wo das Woerterbuch eine Stelle findet, und in «Schnyder» findet es
   keine. Ein schmaleres Portraet (128 auf 96) brachte der Spur 32px; «Jan
   Zimmermann-Roth» lief weiter um 53px ueber, und bei 390 haette die Regel
   gar nicht gegriffen. **Beide heilen den Ueberlauf und lassen den Alltag,
   wie er ist.**

   `hyphens:auto` steht trotzdem an der Grundregel — nicht als Mittel gegen
   den Ueberlauf, sondern damit die zwei laengsten Namen auf zwei statt drei
   Zeilen stehen (Karte 354 statt 386).

   429/430 ist ein Gegenstueckpaar; `min-width:430px` fuehrt das Haus. */
@media(max-width:429px){
  .sp-kopfkarte .sp-name{grid-column:1 / -1;grid-row:1}
  .sp-kopfkarte .sp-bild{grid-column:1;grid-row:2}
  .sp-kopfkarte .sp-unter{grid-column:2;grid-row:2}
}
@media(min-width:760px){
  .sp-kopfkarte{grid-template-columns:240px minmax(0,1fr);gap:0 34px;
    padding:26px;max-width:760px}
  .sp-kopfkarte .sp-bild{width:240px;grid-row:1 / span 3}
  /* Die eigene Kurve ist am 29.08.2026 entfallen — die Grundregel traegt
     jetzt Stufe S ueber alle Breiten. Sie stand hier, weil unter 760 eine
     feste 23 galt; ohne die feste Zahl braucht es auch die Ausnahme nicht. */
  .sp-kopfkarte .sp-unter{font-size:var(--tx-lead);margin-top:10px}
  /* **Die Karte ist so hoch wie das Bild, nicht hoeher.** Der Inhalt rechts
     ist kuerzer; ohne `align-self:end` stuende unter den Zahlen eine graue
     Flaeche. Die Luecke zwischen Positionszeile und Strich ist darum gewollt
     — sie haelt die Karte auf Bildhoehe. */
  .sp-kopfkarte .sp-kenn{grid-column:2;grid-row:3;align-self:end;margin:0}
  .sp-team{display:inline}
  /* ⚠ **Der Punkt haengt am Nachbarn, nicht am Team — 24.09.2026.**
     > ~~`.sp-team::before{content:' · '}`~~ — stand ohne Bedingung da und
     > schrieb den Punkt auch dann, wenn links davon nichts war.
     Didi: «Fehlt die Position, entfaellt auch der Trennpunkt davor.»
     `.sp-pos` gibt es nur mit Position (siehe `single-fch_person.php`),
     also trennt der Waehler genau die zwei Faelle. */
  .sp-pos + .sp-team::before{content:' · '}
}
/* **Vier Zahlen, und schmal zwei Zeilen — 23.09.2026.**

   > ~~«Drei Zahlen, eine Zeile.»~~ — abgeloest am 23.09.2026 mit der
   > Kachel «Assists».

   Mit der vierten Kachel laeuft die Zeile schmal ueber den Rahmen.
   Gemessen im Browser am echten Stylesheet, Fenster 360px, im Rahmen
   288px verfuegbar:

     heutige Zahlen (27/14/9/1980)   Inhalt 293    +5 zu viel
     zweistellig                     Inhalt 307   +19
     Laufbahn, 5-stellig             Inhalt 325   +37

   ⚠ **Bei 320px schneidet `body{overflow-x:hidden}` die letzte Kachel
   ab** — die Minutenzahl ist dann nicht sichtbar UND nicht erreichbar.

   ⚠ **Die Schwelle haengt an den Ziffern, nicht am Geraet:** mit
   heutigen Werten bricht es unter ~365px, mit einer fuenfstelligen
   Minutenzahl unter ~398px. **Dann laeuft auch ein 390px-Telefon
   ueber** — es ist kein Randfall fuer alte Geraete.

   `flex-wrap:wrap` und ein senkrechter Abstand von 18px; der
   waagrechte bleibt bei genau 38px. **Umgebrochen, nicht
   verkleinert** — Didis Vorgabe, und die Zahlen behalten ihren
   `clamp`-Wert. Gemessen danach: zwei Zeilen, 129px statt 64, null
   Ueberhang; ab 390px wieder eine Zeile und 64px, also keine
   Regression fuer breitere Schirme.

   ⚠ Die zwei Deklarationen stehen in der GRUNDFORM und nicht in einer
   Verwendung — siehe den Vermerk darunter: die Grundform traegt Flex,
   Abstand, Polster und Linie, jede Verwendung ihre Groesse. Umbruch
   und Abstand sind Form. */
.sp-kenn{display:flex;flex-wrap:wrap;gap:18px 38px;margin:0 0 24px;
  padding-top:20px;border-top:2px solid var(--papier-halb)}
.sp-kenn b{display:block;font-family:var(--b);font-weight:700;
  font-size:var(--tx-etikett);letter-spacing:.09em;text-transform:uppercase;
  color:var(--papier-halb);margin-bottom:2px}
/* **Die Grundform traegt die Form, nicht die Groesse — und das ist diesmal
   Absicht.**

   `.mono` war derselbe Bau aus Versehen: eine Klasse, die keine Groesse setzt,
   waehrend die Groesse anderswo herkommt. Sie hat dreimal zu einer falschen
   Anweisung gefuehrt, weil ihr Name in einer Tabelle stand, wo die Regel
   haette stehen muessen. **Der Unterschied zwischen den zwei Faellen ist
   dieser Kommentar** — ohne ihn steht in einem Monat wieder jemand davor und
   raet.

   Der Grund fuer die Trennung: `.sp-kenn` bekommt eine zweite Verwendung, die
   Heim-/Auswaerts-Bilanz, und die steht auf 20 waehrend der Kopf auf 21 bis 30
   steht. **Eine geteilte Klasse, deren Verwendungen eigene Groessen setzen,
   ist nur noch ein geteilter Name** — also traegt die Grundform Flex, Abstand,
   Polster und Linie, und jede Verwendung ihre Groesse.

   **Wer hier eine Groesse einsetzt, macht aus zwei Bauformen wieder eine
   halbe.** */
.sp-kenn span{font-family:var(--d);font-variation-settings:'wdth' 106;
  font-weight:800;line-height:1;color:var(--papier-text)}




/* Das Portraet stand im Block und bekam von dort seine Breite. Jetzt traegt
   es sie selbst — dieselben Masse wie vorher. */
.sp-bild{width:128px;aspect-ratio:3/4}
@media(min-width:760px){
  .sp-bild{width:240px}
  /* Wiederhergestellt: Diese zwei Regeln standen hier und sind bei einer
     Aufraeumaktion versehentlich im 399er-Block gelandet. */
  .sp-block{grid-template-columns:240px minmax(0,1fr);gap:34px;padding:26px}
  .sp-block .f{width:auto}
}
.sp-fakten{max-width:var(--feldbreite);display:grid}
.sp-fakten .tz{border-bottom:1px solid var(--papier-linie);align-items:baseline}
.sp-fakten .tz:last-child{border-bottom:0}
.sp-fakten .tz b{font-family:var(--b);font-weight:500;font-size:var(--tx-etikett);
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold-flaeche)}
.sp-fakten .tz span{color:var(--papier-text)}
/* **Der Teamname ist kein Verweis mehr.** Er war einer und trug als einziger
   Wert eine Unterstreichung — eine Auszeichnung, die in einer Faktenliste
   nichts zu suchen hat, wenn der Nachbarwert keine traegt. **Und der Weg zum
   Team steht schon darueber:** Die Brotkrume fuehrt «Teams · FCH 1 · Jan
   Hofer», der Teamname ist dort verlinkt. Zwei Verweise auf dieselbe Seite
   zwei Zeilen auseinander sind einer zu viel.

   Der Pruefstand hat den Zwischenzustand gemeldet — ein Verweis, dem die
   Auszeichnung genommen wurde, ist ein P1. Richtig so: Entweder ist es ein
   Verweis und sieht danach aus, oder es ist keiner. */

/* **Der Abschnittstitel gehoert naeher an das, was er benennt.** Gemessen
   waren es 1px nach oben und 13 nach unten — die Ueberschrift «Einsaetze»
   klebte an der Zeile darueber, und die Trennlinie lief hinter ihr durch.
   Ursache ist kein zu kleiner Wert, sondern ein fehlender: `.sec` hat hier
   `margin-top:0`. Die Regel bekommt darum Gewicht ueber die Ansicht. */
/* **Nachtrag 27.08.2026: `+ .sec` traf nicht mehr.** Steht ein
   «Alle N Saisons anzeigen» zwischen Tabelle und Ueberschrift, ist die
   Ueberschrift nicht mehr der unmittelbare Nachbar — und die Ueberschrift
   klebte wieder, diesmal am Knopf statt an der Zeile.

   **Der Abstand haengt an der Ueberschrift, nicht an ihrem Vorgaenger.**
   Darum jetzt an der Rolle: jede `.sec` in dieser Ansicht, die nicht die erste
   ihres Abschnitts ist. Ein Selektor, der an der Stellung haengt, bricht,
   sobald jemand etwas dazwischenschiebt — der dritte Fall dieser Art im
   Projekt. */
/* ⚠ **`.stat-schmal` ist am 12.09.2026 dazugekommen.** Schmal ist der
   Vorgaenger von «Einsaetze» nicht mehr die Rolltafel, sondern die
   Bloeckefassung -- und ohne sie klebte die Ueberschrift an der Total-Zeile.
   **Der Selektor haengt an der Stellung, und die hat sich geaendert**; der
   Kommentar darueber sagt genau diesen Fall voraus, es ist der vierte. */
#v-spieler .tabelle-scroll + .sec,
#v-spieler .stat-schmal + .sec,
#v-spieler .mehr-zeigen + .sec{margin-top:38px}

/* **Die letzte Zeile IST die Abschlusskante** und sieht jetzt danach aus.
   Vorher trug sie dieselbe 1px-Trennlinie wie jede andere und hatte damit
   zwei Aufgaben, von denen sie keine sichtbar machte. */

/* **Ausser wenn ein Knopf folgt.** «Weniger anzeigen» traegt einen eigenen
   1px-Rahmen oben; zusammen mit der 2px-Kante standen dort zwei Linien
   uebereinander. **Die Tabelle endet dann nicht — sie geht weiter, nur
   eingeklappt.** Die Kante sagt «hier ist Schluss» und waere falsch.

   `:has()` am Behaelter statt einer Klasse im Markup: Der Knopf wird vom
   Skript eingesetzt, eine Klasse muesste dort mitgepflegt werden. */
/* **Fuer die Einsatzliste gelten die zwei Regeln nur ueber 640.** Darunter
   ist die Tabelle in Bloecke aufgeloest, und ein Unterstrich an der ZELLE
   erscheint viermal: unter der Begegnung, unter dem Datum und als Stummel
   unter jeder Zahl. Die `tr` traegt die Linie dort ohnehin.

   **Ein Zuruecksetzen im Mobilblock trug nicht.** `.sp-eins tbody
   tr:last-child td{border-bottom:0}` hat zwei Klassen, die `:has()`-Regel
   vier — die Ausnahme fuer den Knopf gewann weiter. **Eine Regel abzugrenzen
   ist billiger, als gegen sie anzuschreiben:** Der Geltungsbereich sagt, wo
   sie gilt, ein Gegenwert nur, dass sie irgendwo nicht gelten soll.

   `.sp-tab` bleibt aussen vor: Sie rollt unter 640 seitlich und bleibt eine
   echte Tabelle, ihre Abschlusskante braucht sie auf jeder Breite. */
/* ⚠⚠ **`:not(:has(.stat-total))` ist am 12.09.2026 dazugekommen — und
   dahinter steckt der Fehler, der dreimal als «behoben» gemeldet wurde.**

   Die Tabelle steht auf `border-collapse:collapse`. Dort malen NICHT beide
   Nachbarn ihre Kante: Eine gewinnt. Breiter schlaegt schmaler; bei gleicher
   Breite gewinnt die obere Zelle. Und **`getComputedStyle` meldet die
   ANGEGEBENE Kante, nicht die gemalte** — darum sah jede Messung eine
   vollstaendige dunkle Linie, waehrend im Bild keine stand.

   Gemessen an der Statistiktabelle, Zeile ueber «Total» gegen Total-Zeile:

   ```
   Spalte 1   oben 1px rgba(11,11,10,.14)   unten 1px dunkel   → gleich breit,
                                                                 OBEN gewinnt
   Spalte 2+  oben 2px rgb(90,90,85)        unten 1px dunkel   → BREITER gewinnt
   ```

   **Die Linie, die man sah, war nie die der Summenzeile.** Es war die
   Abschlusskante der Zeile darueber — links fast unsichtbar, rechts 2px grau.

   > **Bei `border-collapse:collapse` beschreibt keine Regel allein, was
   > gemalt wird. Wer eine Kante setzt, muss die Kante des Nachbarn kennen.**

   Darum abgegrenzt statt gegengeschrieben: **Wo eine Summenzeile steht, ist
   SIE der Abschluss** — die Zeile darueber braucht keinen. Der Kommentar
   oben sagt den Grundsatz schon: «Eine Regel abzugrenzen ist billiger, als
   gegen sie anzuschreiben.» */
@media(min-width:640px){
  .sp-tab:not(:has(.stat-total)) tbody tr:last-child td,
  .sp-eins tbody tr:last-child td{border-bottom:2px solid var(--papier-halb)}
  .tabelle-scroll:has(+ .mehr-zeigen) .sp-tab:not(:has(.stat-total)) tbody tr:last-child td,
  .tabelle-scroll:has(+ .mehr-zeigen) .sp-eins tbody tr:last-child td{
    border-bottom:1px solid var(--papier-linie)}
}
/* ⚠⚠ **`> *` und nicht `td` — und das ist der zweite Anlauf.**

   Erst stand hier `th`, weil die erste Spalte ein `th.tw` ist und ihre
   Unterkante aus einer ganz anderen Regel holt. **Gemessen kippte das Bild
   nur um:** Links wurde die Linie dunkel, rechts blass. Denn die `td` der
   Zeile darueber tragen noch das allgemeine `td{border-bottom:1px solid
   var(--linie)}` — gleich breit wie die Kante der Summenzeile, also gewinnt
   wieder die obere.

   > **Wer bei `collapse` eine Kante freiraeumt, raeumt sie fuer die ganze
   > Zeile frei. Eine halb geraeumte Zeile ist eine halbe Linie.**

   ⚠ Es waren zwei Kanten aus zwei Regeln fuer dieselbe Zeile, eine fuer
   `td` und eine fuer `th` — dieselbe Falle wie in Punkt 0, hier zum
   dritten Mal in einer Sitzung. */
.sp-tab:has(.stat-total) tbody tr:last-child > *{border-bottom:0}
/* Die Nummer im Titel — gelber Klotz, wie die Rueckennummer auf der Kachel. */
.sp-nr{display:inline-block;background:var(--gelb);color:var(--dun);
  font-family:var(--d);font-variation-settings:'wdth' 114;font-weight:800;
  padding:0 10px;margin-right:14px;line-height:1.18}
/* **Unter 640 steht der Block quer — Foto links, Angaben rechts.** Auf 390
   mass er vorher rund 400px, davon 260 Foto; die Statistik begann unterhalb
   der ersten Bildschirmkante.

   **Die Bauform steht schon im Stylesheet, an anderer Stelle und fuer
   dieselbe Frage:** `.g4:has(.person) .person` legt die Personenkarten der
   Organisationsseite unter 640 quer, mit `width:128px` fuer das Bild. **Die
   Zahl und die Grenze sind von dort uebernommen** — zwei verschiedene
   Umschaltpunkte fuer dieselbe Anordnung waeren teurer als eine Grenze, die
   es schon gibt.

   **Und die 128 bleiben zwei Angaben, nicht eine gemeinsame.** Eine
   Variable dafuer haette den Vorteil, dass beide zusammen wandern — und den
   Nachteil, dass sie es muessen. Die Personenkarte steht in einem Raster von
   fuenf, der Profilblock allein auf einer Seite; dass beide heute 128 tragen,
   ist eine Uebereinstimmung und keine Abhaengigkeit. **Der Kommentar hier ist
   die Verbindung**, nicht der Code.

   ── Ein Unterschied, der begruendet gehoert ──
   **`.person-init` gibt es**: die Flaeche mit der Initiale in Gelb, wenn kein
   Foto vorliegt, im selben Verhaeltnis 3:4. **Fuer das Profil ist das
   Gegenteil entschieden — keine Flaeche ohne Foto.** Beides ist richtig: In
   einer Kartenreihe reisst eine fehlende Karte ein Loch und die Reihe
   verrutscht; auf einer Einzelseite gibt es nichts zu verrutschen. Zwei Orte,
   dieselbe Lage, zwei Antworten — und keine Inkonsequenz. */
/* Bei 320 blieben der Faktenspalte 102px, und Etikett plus Wert nebeneinander
   brauchten 151 — ein Pixel Ueberlauf, vom Pruefstand als P0 gemeldet. Unter
   400 duerfen sie umbrechen: Etikett oben, Wert darunter. */
@media(max-width:399px){
  .sp-fakten .tz{flex-wrap:wrap;gap:0}
  .sp-fakten .tz b{flex:1 0 100%}
}
@media(min-width:640px){
}
/* Ohne Foto ist quer gegenstandslos — der Block traegt dann nur die Angaben. */

/* **Team ueber Wettbewerb, nicht nebeneinander.** Zwei Angaben zu derselben
   Sache, und die zweite ist der Zusatz zur ersten. Gemessen bei 390: die
   Zeile misst 65 statt 72px, «Junioren Fb» bricht nicht mehr um, und drei
   statt zwei Spalten stehen vor dem Rollen.

   **Das Rollen bleibt, und es ist nicht zu beheben.** Neun Datenspalten
   passen nicht in 354px: gemessen 574px mit neun, 515 mit acht, 451 mit acht
   und halbiertem Zellpolster, **375 noch mit fuenf**. Spaltenstreichen loest
   es nicht — die Sache braucht mehr Platz, als das Handy hat. Darum steht
   die Tabelle in `.tabelle-scroll` mit klebender erster Spalte.

   **Die Saison steht nur in der ersten Zeile ihrer Gruppe**, mit kraeftigerer
   Linie zwischen den Saisons. «2025/26» zweimal untereinander war die
   teuerste Wiederholung der Tabelle.

   **Nullen sind gedaempft, Tore hervorgehoben.** In den Einsaetzen ist rund
   die Haelfte aller Zellen eine Null; mit gleichem Gewicht verdecken sie, wo
   etwas passiert ist. Gedaempft wird mit `--papier-halb` — gemessener
   Kontrast **6,93 auf Weiss**, weit ueber der Schwelle von 4,5. Und Tore ist
   die einzige hervorgehobene Spalte: Vorher trugen mehrere Zahlen Farbe, ohne
   dass die Farbe etwas bedeutete. */
/* **Beide Tabellen, nicht nur `.sp-tab`.** Die Einsatzliste heisst `.sp-eins`
   und trug dieselbe Zelle mit `<b>` und `<span>` — aber nicht die Regel dazu.
   Gemessen im Bild: «FC Kuesnacht aSchweizer Cup» ohne Trennung, weil der
   `span` inline blieb. Der Kopf sagt in beiden Tabellen «Gegner<br>Wettbewerb»
   und meint zwei Zeilen; nur eine der beiden Tabellen hat sie gemacht. */
/* WARNWARN **`.sp-tab th.tw` MUSS hier mitstehen -- 12.09.2026.** Die
   Statistik schreibt ihre erste Zelle seit heute als `<th scope="row">`, und
   **jede Regel, die `td.tw` heisst, hoerte damit auf zu greifen.** Gemessen,
   bevor es berichtigt war:

       th.tw > span (Wettbewerb)   700 / rgb(11,11,10)
       soll sein                   400 / --papier-halb

   Die Wettbewerbszeile stand fett und in Textfarbe statt leise -- nicht weil
   jemand sie geaendert haette, sondern weil ihr Selektor ins Leere lief.

   > **Wer ein Element umbenennt, benennt jede Regel mit um, die es beim alten
   > Namen nennt. Das Umbenennen selbst meldet nichts.**

   WARN `.sp-eins` bleibt bei `td` -- die Einsatzliste fuehrt dort einen
   Verweis und keine Beschriftung. */
.sp-tab th.tw b,.sp-eins td.tw b{display:block;font-weight:700}
/* **Nur das direkte Kind, nicht jedes `span`.** Seit die Begegnung in der
   Zelle steht, enthaelt sie auch `.rz-strich` — und der wurde zum Block,
   also stand der Gedankenstrich auf eigener Zeile. Gemessen: drei Zeilen
   statt einer, Zeilenhoehe 95 statt 61. */
.sp-tab th.tw>span,.sp-eins td.tw>span{display:block;font-weight:400;color:var(--papier-halb);
  font-size:var(--tx-etikett);letter-spacing:.08em;text-transform:uppercase}
/* ⚠⚠ **Der Vermerk «nicht eingesetzt» — 13.09.2026.** Er erklaert, warum
   die Einsatzliste mehr Zeilen hat als der Kopf Spiele zaehlt: Eine Zeile
   ohne Einsatz zaehlt fuer die Liste, nicht fuer die Zahl.

   ⚠ **Leise wie die Wettbewerbszeile, aber nicht gleich** — sie nennt einen
   Wettbewerb, dieser Vermerk einen Zustand. Darum dieselbe Farbe und
   dieselbe Groesse, aber gesperrt und in Versalien: **Er ist ein Etikett,
   keine Fortsetzung des Satzes darueber.** */
.sp-eins td.tw .ez-ohne{display:block;font-family:var(--b);font-weight:700;
  font-size:var(--tx-etikett);letter-spacing:.1em;text-transform:uppercase;
  color:var(--papier-halb);margin-top:2px}
.sp-tab th.tw,.sp-eins td.tw{line-height:1.35}

/* ── Die Einsatzliste ────────────────────────────────────────────────────
   **Der Wettbewerb steht bei jeder Zeile, nicht nur beim Cup.** Vorher trug
   ihn nur, wer im Cup gespielt hatte; bei Meisterschaft blieb die Zeile leer,
   und man sah nicht, in welcher Liga. **Wer bei der Zweiten aushilft, spielt
   in einer anderen Liga** — genau der Fall, den die Spalte beantworten soll.

   **Die Aushilfe traegt die gelbe Flaeche.** Das ist auf dieser Website das
   Zeichen fuer «das sind wir» — hier heisst es «das ist ein anderes Team von
   uns». Naeher an der bestehenden Bedeutung als eine neue Farbe.

   **Und die Zeile fuehrt zur Spielseite.** Der Pfeil steht in einer eigenen
   Spalte statt als Deckflaeche: Eine Tabellenzelle laesst sich nicht ueber
   `::after` ueberdecken, ohne dass die Zeilenhoehen springen. */
.ez-pf{width:22px;text-align:right;padding-left:8px}
.ez-ziel{text-decoration:none;color:var(--papier-halb);font-size:14px;
  display:inline-block;padding:2px 0 2px 8px}
@media(hover:hover){
  .ez-ziel:hover{color:var(--papier-text)}
  .sp-eins tbody tr:hover{background:var(--nav-beruehrt)}
}
/* **Die Aushilfe braucht keine Flaeche mehr.** Sie war gelb hinterlegt,
   solange in der Zeile nur «FCH 2» in einer Spalte stand. **Seit die
   Begegnung vollstaendig dasteht — «FC Herrliberg 2 — FC Uster 3» — sagt die
   Flaeche nichts, was der Text nicht schon sagt.** Entfernt am 28.08.2026,
   samt der Sonderregel fuer ihre Deckung unter 640. */

/* Unter 640 traegt die Tabelle neun Spalten nicht. **Dieselbe Bauform wie die
   Spielzeile**: Wettbewerb als Etikett, Gegner, darunter Datum und Team in
   EINER Zeile, dann die Zahlen. Resultat rechts, Pfeil daneben.

   **Kein Raster, sondern Block und `inline-block`.** Zwei Anlaeufe mit
   `display:grid` an der Zeile sind gescheitert: **Ein Rasterkind ist immer ein
   Block** — weder `inline-block` noch `float` gelten dort. Gemessen standen
   die Zahlen dadurch auf drei Hoehen statt einer. Resultat und Pfeil sitzen
   darum absolut statt in Spuren. */
/* Die Filterleiste der Einsatzliste steht ueber der Tabelle und traegt nur
   den Abstand — Knoepfe und Etiketten sind `.filt` und `.filt-name` wie
   ueberall. */
.ez-filter{margin:0 0 18px}
.ez-filter .filt + .filt-name{margin-top:16px}


/* ── Die Statistiktabelle unter 640: Zahlenspur statt Rollen ─────────────
   **Sie rollte seitlich, und man sah fuenf von neun Spalten.** «Min» stand
   ausserhalb des Bildes, und die Saisonspalte war bei jeder Folgezeile leer.
   Unter 640 loest sie sich darum in Bloecke auf, wie die Einsatzliste.

   **Die Zahlen stehen im Raster und nicht im Fluss.** Das ist der Unterschied
   zur Einsatzliste, und er ist gewollt: Dort beantwortet jede Zeile eine
   eigene Frage («was war an diesem Spiel»), hier vergleicht man Zeilen
   untereinander («wie war 2024/25 gegen 2023/24»). **Vergleichen geht nur,
   wenn Tore unter Tore steht** — also feste Spuren, und die Nullen bleiben
   gedaempft stehen statt wegzufallen. Der Preis sind zwei Zahlenreihen je
   Block; er ist der Grund, warum die Einsatzliste es anders macht.

   **Der Teamname steht ausgeschrieben, auch ueber 640.** Die Hausform «FCH 1»
   ist `kurzname` und beantwortet eine Platzfrage, die es hier nicht gibt: Die
   Spalte ist ohnehin so breit wie «Meisterschaft · 2. Liga». Die Einsatzliste
   wechselt weiter bei 960 — dort muss die ganze Begegnung in eine Zeile. */
/* ⚠ **`.sp-tab tr.saisonkopf` ist am 12.09.2026 verwaist.** Die Statistik
   fuehrt keine Saisonkopf-Zeile mehr -- jede Saison hat ihre eigene Tabelle
   mit `h3.stat-saison` darueber. Der Saisonkopf lebt nur noch in der
   EINSATZLISTE (`.sp-eins`), und die hat ihre eigenen Regeln. */
/* ⚠ **`.spuretiketten` ist am 12.09.2026 restlos entfallen.** Die Leiste
   wurde von `assets/fch.js` erzeugt und traegt seit dem Umbau auf Bloecke
   niemanden mehr; die Regel, die sie ueber 640 verbarg, hatte damit nichts
   mehr zu verbergen.

   **Eine Regel gegen etwas, das es nicht gibt, ist kein Schutz, sondern die
   Behauptung, es gaebe das Ding noch.** */
/* **Die Etiketten stehen einmal je Saison**, in der ersten Zeile der Saison
   und nicht an jeder Zahl. Vorher trug jeder Wert sein eigenes: vier
   Saisons, je zwei Wettbewerbe, sieben Werte — **56 Beschriftungen auf 56
   Zahlen**. */
@media(max-width:639px){
  /* ── Je Wettbewerb ein Block ────────────────────────────────────────

     ⚠ **Hier stand bis zum 12.09.2026 das Raster 5 x 2.** Es zeigte alle zehn
     Werte, auch die Nullen: Bei einem Cupspiel standen drei Zahlen und sieben
     Nullen untereinander. **Eine Null, die man nicht sucht, ist Laerm.**

     Neu je Wettbewerb ein Block.

     ⚠⚠ **Nachtrag 12.09.2026: der Satz «und er zeigt nur, was einen Wert
     hat» ist abgeloest.** Er stand hier den ganzen Tag und beschrieb
     einen Zustand, den es seit dem Vormittag nicht mehr gibt: Die
     Statistik zeigt ihre Nullen wieder, auf jeder Breite. Gemessen
     stehen in allen vier Bloecken einer Spielerseite 5 von 5 Paaren,
     auch mit Wert 0.

     **Der Grund ist der Vergleich:** Drei, vier Bloecke stehen
     nebeneinander, und «keine Karte» ist dort eine Auskunft ueber einen
     Wettbewerb. In der EINSATZLISTE fallen die Nullen dagegen weg —
     dort sind es sechs und mehr Zeilen untereinander, je ein Spiel.
     Siehe den langen Vermerk bei `.sp-eins td[data-k].null`.

     ⚠ Gefunden hat den abgeloesten Satz der Pruefer, nicht der Bau.
     SP, Min und S/U/N stehen immer -- ohne sie gaebe es den Block nicht.

     **Kein Rahmen, kein Kasten** -- die Linie zwischen den Bloecken reicht.
     Ein Kasten um jeden Block machte aus einer Liste eine Sammlung Karten,
     und das ist eine andere Aussage. */
  .stat-breit{display:none}
  .stat-schmal{display:block}
  .stat-saison{font-size:var(--tx-lead);margin-top:26px}

  .stat-block{padding:14px 0;border-bottom:1px solid var(--papier-linie)}
  .stat-block:last-child{border-bottom:0}
  /* ⚠⚠ **Dieselbe Doppelkante wie in den Tabellen — nur ohne
     `collapse`, also malen hier BEIDE.** Ueber dem Total-Block standen
     zwei Striche uebereinander: 1px grau vom Block darueber und 1px
     Textfarbe von `.sb-total`. In der Tabelle entschied das Zusammenfallen,
     hier entscheidet niemand.

     > **Zwei Nachbarn, die beide eine Abschlusskante zeichnen, ergeben
     > keine kraeftigere Linie, sondern zwei.**

     ⚠ Gefunden hat es der Pruefer, nicht der Bau — V4 hat denselben
     Fehler in den Tabellen behoben und diesen daneben stehen lassen. */
  .stat-block:has(+ .sb-total){border-bottom:0}
  .sb-team{font-weight:700;color:var(--papier-text);
    font-family:var(--b);margin:0;line-height:1.3}
  /* `--gold` statt `--papier-halb`: Die Wettbewerbszeile ist eine Einordnung,
     keine Nebenangabe -- dieselbe Farbe traegt sie im Spielplan. */
  .sb-wett{font-family:var(--b);font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
    margin:2px 0 0;line-height:1.4}

  /* ⚠ **Der senkrechte Strich trennt, der Mittelpunkt reiht auf.** «18 Spiele
     · 1584 Min» liest sich als ein Satz; mit dem Strich sind es drei Angaben
     nebeneinander. */
  .sb-werte{display:flex;flex-wrap:wrap;align-items:baseline;margin:8px 0 0;
    color:var(--papier-halb);line-height:1.5}
  .sb-werte>span{display:inline-flex;align-items:baseline;gap:4px}
  /* ⚠⚠ **14px statt 10px je Seite — 12.09.2026.** Die Trennstriche
     standen zu eng an den Zahlen; bei drei Werten in einer Zeile war das der
     Unterschied zwischen «drei Angaben» und «einem Wortband».
     **Gemessen war Platz genug**: Inhalt 202px im 324px breiten Block, die
     zwei Striche belegten 2 x 20px. Jetzt 2 x 28px. */
  .sb-werte>span+span{margin-left:14px;padding-left:14px;
    border-left:1px solid var(--papier-linie)}
  .sb-werte b{font-family:var(--d);font-variation-settings:'wdth' 106;
    font-weight:800;color:var(--papier-text)}

  /* Symbol und Zahl gehoeren zusammen, darum kein Zwischenraum im Paar und
     ⚠ **24px statt 16 zwischen den Paaren — 12.09.2026.**
     Bei fuenf Paaren in einer Zeile verschmolzen die Nachbarn: Die Zahl des
     einen stand naeher am Zeichen des naechsten als am eigenen. **Eng innen,
     weit aussen** — der Abstand IM Paar bleibt bei 5px.

     > **Wenn der Abstand zwischen zwei Gruppen kleiner ist als der innerhalb,
     > liest das Auge die falschen Paare.**

     ⚠⚠ **Nachtrag 13.09.2026: 32px.** Gemessen am breitesten Fall bei 360px —
     fuenf Paare mit zweistelligen Werten in einem 324px breiten Block:

     ```
     24px   Summe 182 + 4x24 = 278px   eine Zeile
     32px   Summe 182 + 4x32 = 310px   eine Zeile, 14px Luft
     40px   Summe 182 + 4x40 = 342px   ZWEI Zeilen
     ```

     ⚠ **Die 40px stehen hier als Gegenprobe**, nicht als verworfener
     Vorschlag: Sie belegen, dass die Messung einen Umbruch ueberhaupt
     erkennt. Ohne sie waere «eine Zeile» bei jedem Wert eine Aussage ueber
     die Messung und nicht ueber den Abstand.

     ⚠ **Kein `space-between`.** Die Zeile bleibt linksbuendig und waechst mit
     dem Inhalt; verteilt man sie ueber die Breite, haengt der Abstand an der
     Zahl der Paare — bei drei Werten stuende alles auseinander, bei fuenf
     eng. */
  .sb-ereignisse{display:flex;flex-wrap:wrap;gap:6px 32px;margin:8px 0 0;
    align-items:center}
  .sb-ereignisse>span{display:inline-flex;align-items:center;gap:5px}
  .sb-ereignisse b{font-family:var(--d);font-variation-settings:'wdth' 106;
    font-weight:800;color:var(--papier-text)}
  /* ⚠ Die Groesse steht seit dem 12.09.2026 einmal oben bei `.stat-ic` —
     hier stand sie ein zweites Mal. */

  /* ⚠ Die Summe traegt dieselbe Form -- nur das Etikett heisst «Total» und
     die Linie darueber ist Textfarbe statt Linienfarbe. Bei einem einzigen
     Wettbewerb entfaellt sie ganz (die Vorlage gibt sie dann nicht aus). */
  .sb-total{border-top:1px solid var(--papier-text);border-bottom:0}
  .sb-total .sb-wett{color:var(--papier-halb)}

  /* ⚠ Hier standen drei Regeln fuer `.sp-tab tr.saisonkopf`. Die Statistik
     hat schmal keine Tabelle mehr, sondern Bloecke -- siehe weiter unten. */
}

/* ── Der Saisonkopf der Einsatzliste ─────────────────────────────────────
   **Dieselbe Ordnung wie in der Statistiktabelle darueber**, nur mit einer
   eigenen Zeile statt einer eigenen Spalte: Die Einsatzliste hat schon zehn
   Spalten, eine elfte fuer die Saison waere die teuerste Loesung fuer die
   billigste Frage. Die 2px-Linie ist dieselbe wie bei `tr.saisonstart`.

   **Die Zahl steht im Kopf, weil der Kopf sonst nichts sagt, wenn seine
   Zeilen verborgen sind.** Eingeklappt bleiben fuenf Spiele der laufenden
   Saison sichtbar und darunter die Koepfe der aelteren — ohne Zahl waere
   «2023/24» eine Ueberschrift ueber nichts. */
.sp-eins tr.saisonkopf th{text-align:left;font-family:var(--d);font-weight:800;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--papier-text);padding:22px 0 6px;
  border-top:2px solid var(--papier-halb);
  border-bottom:1px solid var(--papier-linie)}
.sp-eins tbody tr:first-child.saisonkopf th{border-top:0;padding-top:8px}
/* Die Zahl ist eine Auskunft, keine Ueberschrift — Textschrift, gerade,
   gedaempft. */
.sk-zahl{font-family:var(--b);font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--papier-halb);font-size:14px}

@media(max-width:639px){
  .sp-eins,.sp-eins tbody,.sp-eins tr,.sp-eins td{display:block;width:auto}
  .sp-eins thead{display:none}
  .sp-eins tr{position:relative;padding:12px 68px 12px 0;
    border-bottom:1px solid var(--papier-linie)}
  .sp-eins td{border:0;padding:0;text-align:left}
  /* **Die letzte Zeile zieht ihre Linie ueber die `tr`, nicht ueber jede
     Zelle.** Zwei Regeln ausserhalb dieses Blocks geben `tbody tr:last-child
     td` einen Unterstrich — 2px als Abschlusskante, 1px wenn ein Knopf folgt.
     Sie sind fuer die Tabelle ueber 640 gedacht, wo eine Zeile eine Zeile ist.
     Hier ist jede Zelle ein eigener Block: Der Unterstrich erschien darum
     einmal unter der Begegnung, einmal unter dem Datum und als Stummel unter
     jeder Zahl. **Ihre Spezifitaet schlaegt `.sp-eins td{border:0}`**, das
     Zuruecksetzen muss also ebenso genau zielen. Die `tr` traegt die Linie
     ohnehin schon. */
  /* Unter 640 loest sich die Tabelle in Bloecke auf. `.sp-eins td{display:block}`
     fasst nur `td`, also bliebe der Saisonkopf eine Tabellenzelle und sein
     Unterstrich reichte nur so weit wie die Jahreszahl. Die Zeilenlinie der
     `tr` faellt hier weg — der Kopf traegt seine eigene Linie oben. */
  .sp-eins tr.saisonkopf{padding:0;border-bottom:0}
  .sp-eins tr.saisonkopf th{display:block;padding:18px 0 8px;border-bottom:0}
  /* **Der Gegner fuehrt, nicht das Datum** — er steht seit dem 28.08.2026 auch
     im Markup zuerst. `order` haette es nicht getan: Es wirkt nur in Flex- und
     Rasterbehaeltern, und die Zeile ist hier ein Block. **Die Quellreihenfolge
     ist die Vorlesereihenfolge** — sie zu aendern ist ohnehin richtiger, als
     sie im Bild zu ueberdecken.

     Der Wettbewerb steht als Etikett ueber dem Gegner, wie bei der
     Spielzeile. */
  .sp-eins td.tw{display:flex;flex-direction:column}
  .sp-eins td.tw b{font-size:14px}
  /* **Die Reihenfolge haengt am Verweis, nicht am `<b>`.** Bis zum
     28.08.2026 stand `order:2` am `<b>`, und das trug: `<b>FCH 2</b>` war
     direktes Kind der Zelle und damit Flex-Kind. Seit die vollstaendige
     Begegnung in `<a class="ez-name">` steckt, ist das `<b>` ein Kind des
     Verweises und kein Flex-Kind mehr — die Angabe wirkte ins Leere, der
     Verweis behielt seine Vorgabe 0, und das Etikett rutschte unter die
     Begegnung. **Eine Regel, die still aufhoert zu wirken, sieht aus wie
     eine Regel, die es nie gab.**

     Die Marge steht am Etikett und nicht mehr an jedem `span`: `.rz-strich`
     und die zwei Namensformen stehen ebenfalls in `.tw`, aber im Verweis. */
  .sp-eins td.tw>.ez-name{order:2}
  .sp-eins td.tw>span{order:1;margin:0 0 3px}
  /* **Das Team gehoert ins Etikett, nicht in die Datumszeile.**
     «Meisterschaft · 2. Liga · FCH 1» sagt in einer Aussage, in welcher Rolle
     das Spiel stattfand. Bei einer Aushilfe steht dort «4. Liga · FCH 2» —
     Liga und Team beieinander statt zwei Zeilen auseinander.

     **Die Angabe steht zweimal im Markup, immer nur eine sichtbar** —
     dasselbe Verfahren wie bei der Uhrzeit im Spielplan. Ein einziges
     Element ginge nicht: Ueber 640 braucht die Tabelle ihre Spalte, unter
     640 gehoert der Text in eine fremde Zelle, und eine Tabellenzelle laesst
     sich nicht in eine andere schieben. */
  .sp-eins td:nth-child(2){display:block;
    font-size:12.5px;color:var(--papier-halb)}
  /* **Resultat und Pfeil stehen auf der Etikettzeile, nicht dazwischen.**
     Beide haengen mit `top:12px` an der Zeilenoberkante — das war die
     Begegnungszeile, solange die Begegnung oben stand. Seit das Etikett
     darueber sitzt, mass das Resultat 24,8 px Mitte gegen 19,4 des Etiketts
     und 40,0 der Begegnung: es gehoerte zu keiner der beiden Zeilen.

     **Die Zeilenhoehe bindet es, nicht eine neue Zahl.** 15 px sind die
     Zeilenhoehe des Etiketts (11 px mal 1,35); damit liegen beide Mitten auf
     19,5. **Ein `top`, das die Begegnung trifft, gaebe es nicht:** bei 320
     bricht das Etikett zweizeilig, und «Meisterschaft · Staerkeklasse —
     Platzhalter · Gruppe 3» misst 396 px und bricht auf jeder Handybreite.
     Jede feste Zahl waere genau dort falsch. */
  .sp-eins td.sp-res{position:absolute;right:26px;top:12px;
    font-weight:800;font-size:16px;line-height:15px}
  /* **Die ganze Zeile fuehrt zum Spiel.** Auf dem Handy ist ein 15px-Pfeil
     kein Tippziel — dieselbe Karten-Bauform wie bei den Spielzeilen: Der
     Verweis deckt ueber `::after` die Zeile, die schon `position:relative`
     traegt.

     **Ueber 640 nicht.** Dort gibt es einen Zeiger, die Zeilen sind flach,
     und eine Tabellenzelle laesst sich nicht ohne Sprung ueberdecken —
     gemessen am 28.08.2026, als die Zeilenhoehen sprangen. */
  .sp-eins td.ez-pf{position:absolute;right:0;top:12px;width:auto;padding:0;
    line-height:15px}
  /* Das Polster des Pfeils ist ein Tippziel — und hier gibt es keines, weil
     die ganze Zeile zum Spiel fuehrt. Ohne das Polster steht er auf
     derselben Zeile wie Etikett und Resultat. */
  .sp-eins td.ez-pf .ez-ziel{padding:0 0 0 8px;line-height:15px}
  /* **Der Gegnername traegt den Verweis, nicht der Pfeil.**
     Ein `::after` bezieht sich auf sein eigenes Element — der Pfeil ist
     absolut gesetzt, also deckte die Flaeche nur ihn. Gemessen:
     `elementFromPoint` traf in der Zeilenmitte `TD` statt des Verweises.

     Der Name steht in `.tw`, und die Zelle ist nicht positioniert — damit
     ist die Zeile der naechste positionierte Vorfahr, und `inset:0` deckt
     sie ganz. **Dieselbe Karten-Bauform wie bei den Spielzeilen.** */
  .sp-eins .ez-name::after{content:'';position:absolute;inset:0}
  .sp-eins .ez-name{text-decoration:none;color:inherit}
  @media(hover:hover){
    .sp-eins tbody tr:has(.ez-name:hover){background:var(--nav-beruehrt)}
  }
  /* ⚠ **Zweite Quelle des Doppelrings, und sie stand auf einem
     Pseudoelement — 25.09.2026.** Hier lag der Doppelring nicht als
     `outline` plus `box-shadow` am Element, sondern als `outline` plus
     ~~`box-shadow:0 0 0 2px var(--gelb) inset`~~ an der Deckflaeche. Wer nur
     die Grundregel oben aufraeumt, laesst diese Haelfte stehen und meldet
     den Doppelring als behoben.
     Der Umriss selbst bleibt: Die Zeile ist ein Verweis und kein
     Bedienelement mit Zeigerflaeche — sie faellt unter «alle uebrigen» und
     bekommt den einzelnen Ring. Er liegt innen (`-2px`), weil die
     Deckflaeche die Zeile genau ausfuellt und ein aeusserer Ring am
     Listenrand abgeschnitten wuerde. */
  .sp-eins .ez-name:focus-visible{outline:0}
  .sp-eins .ez-name:focus-visible::after{outline:2px solid var(--akzent);
    outline-offset:-2px}
  /* **Kein `z-index` an den Zellen.** Ein erster Anlauf hob sie ueber die
     Deckflaeche, damit der Text waehlbar bleibt — dann fing die Zelle den
     Klick, und die Zeile fuehrte nirgends hin. Gemessen: `elementFromPoint`
     traf `TD` statt des Verweises. **Die Deckflaeche liegt oben, sonst deckt
     sie nicht.** */
  /* Die Zahlenzellen bekommen ihr Etikett aus `data-k` — ohne Tabellenkopf
     ist eine nackte Null keine Auskunft. Nullen fallen ganz weg: Sie sind
     die Regel, nicht die Nachricht. **Das Etikett ist leiser als die Zahl**,
     sonst liest man die Kuerzel statt der Werte. */
  /* **`margin-left`, nicht nur `margin-top`.** Die Zahlen stehen inline
     hinter Datum und Team; ein Abstand nach oben trennt sie davon nicht —
     gemessen las die Zeile «FCH 1Tore 1» ohne Luecke. */
  /* **Der Wert hebt sich vom Etikett ab, nicht die Zahl von der Zahl.**
     Das Gewicht steht hier am Wert, damit «Tore» leiser ist als «1». Ueber
     640 uebernimmt es die Ereignisregel — 800 fuer alles ueber null. Hier
     gilt dieselbe Stufe, sonst stuenden Tore und Min verschieden stark da,
     ohne dass es etwas bedeutet. */
  .sp-eins td[data-k]{display:inline-block;font-size:12.5px;
    color:var(--papier-text);font-weight:800;margin:0 0 0 14px}
  .sp-eins td[data-k]::before{content:attr(data-k) ' ';font-weight:400;
    color:var(--papier-halb)}
  /* ⚠⚠ **DIE NULLEN FALLEN HIER WIEDER WEG — 12.09.2026, zweiter Entscheid
     am selben Tag. Bitte nicht ohne Ruecksprache an die Statistik angleichen.**

     **Vormittags stand hier:** «Hier stand `display:none` fuer Nullen.
     Zurueckgenommen am 12.09.2026: Die Nullen stehen, ueberall. Eine Zeile,
     die mal fuenf und mal zwei Werte zeigt, laesst sich nicht mit der
     daneben vergleichen.»

     **Das Argument gilt weiter — aber nur fuer die STATISTIKTABELLE.** Dort
     stehen drei, vier Zeilen nebeneinander, und «keine Karte» ist eine
     Auskunft ueber einen Wettbewerb. **In der Einsatzliste sind es sechs und
     mehr Zeilen untereinander**, je ein Spiel, und dort ist dieselbe Null
     kein Vergleichswert, sondern Rauschen:

     ```
     vorher    ⚠ 1  ⚠ 0  ⚠ 0  ⚠ 0  ⚠ 0   Min 39
     nachher   ⚠ 1                       Min 39
     ```

     > **Dieselbe Null ist in einer Vergleichszeile eine Auskunft und in einer
     > Ereignisliste ein Fuellzeichen. Was sie ist, entscheidet die
     > Nachbarschaft — nicht der Wert.**

     ⚠ **Nur schmal und nur hier.** Breit bleibt alles, wie es war; die
     Statistiktabelle behaelt ihre Nullen auf jeder Breite.

     ⚠ **`Min` bleibt immer** — die Zelle traegt `data-k="Min"` und bekommt
     nie `.null` (`single-fch_person.php`, die Zelle `data-k="Min"`). Gemessen, nicht angenommen. */
  .sp-eins td[data-k].null{display:none}
  /* ⚠ Das Zeichen in der Zelle gilt NUR schmal — breit traegt es der Kopf. */
  .sp-eins td[data-k] .ez-ic{display:inline-block;vertical-align:-3px;margin-right:4px}
  .sp-eins td[data-k] .ez-ic .stat-ic,
  .sp-eins td[data-k] .ez-ic .ve-karte{display:inline-block}
  /* ⚠⚠ **Das Wort-Etikett faellt, wo ein Zeichen steht.** Der erste
     Anlauf nannte `:has(.ez-ic .stat-ic)` — zu eng: Die Kartenzellen tragen
     `.ve-karte`, nicht `.stat-ic`, und gemessen stand danach «Tore1» statt
     «⚽ 1». **`:has(.ez-ic)` reicht und trifft beide.** */
  .sp-eins td[data-k]:has(.ez-ic)::before{content:none}
}
/* ══ VIER ROLLEN, DREI GROESSEN — fuer BEIDE Tabellen dieselbe ══════════

   ⚠⚠ **Der Befund vom 12.09.2026, und er war der eigentliche:** Schmal
   trugen die Statistik- und die Bilanztabelle **elf feste Pixelzahlen** und
   stimmten an **keiner einzigen** Stelle ueberein.

   ```
   dieselbe Rolle          Statistik   Bilanz
   Zeilenkopf              13,5px      10px
   Wertzeile               12px        12,5px
   Wert fett               15px        12,5px
   Etikett                 10px        10px    (zufaellig gleich,
                                                zwei getrennte Regeln)
   ```

   ⚠ **Die Ursache war nicht die Zahl, sondern die getrennte Pflege.** Wer
   nur die Zahlen angleicht, laesst sie beim naechsten Mal wieder
   auseinanderlaufen. **Darum liegen die Groessen jetzt zusammen: eine Regel
   je Rolle, beide Tabellen darin.** Die Einzelregeln daneben setzen Familie,
   Gewicht und Farbe — die Groesse setzen sie nicht mehr.

   > **Zwei getrennt gepflegte Regeln fuer dieselbe Rolle laufen
   > auseinander. Nicht vielleicht, sondern mit der Zeit.**

   Alle Werte kommen aus vorhandenen Variablen. **Keine neue angelegt** — und
   die eine Groesse, fuer die keine gepasst haette (die Punktzahl in 28px),
   ist mit der schmalen Bilanzform ohnehin entfallen.

   ⚠ **Was sich sichtbar aendert**, offen gesagt: 13,5 → 14 · 10 → 11 ·
   12 → 11 · 15 → 14. Der groesste Sprung ist die Wertzahl der schmalen
   Statistik, einen Punkt kleiner. */

/* Rolle: das ETIKETT — Spaltenkopf der Bilanz, Wettbewerbszeile der
   Statistik, und die Woerter der Wertzeile («Spiele», «Min»). */
.bil-tab thead th,
.sb-wett,
.sb-werte{font-size:var(--tx-etikett)}

/* Rolle: der ZEILENKOPF — «Heim» und «Total» in der Bilanz, der Teamname
   in der Statistik. Seit dem 12.09.2026 in beiden ein `<th scope="row">`. */
.bil-tab tbody th,.bil-tab tfoot th,
.sp-tab tbody th.tw,.sp-tab tfoot th,
.sb-team{font-size:var(--tx-klein)}

/* Rolle: der WERT — jede Zahl in beiden Tabellen, breit wie schmal. */
.bil-tab,
.sp-tab,
.sb-werte b,
.sb-ereignisse b{font-size:var(--tx-klein)}

/* ── Die Statistik: je Saison eine Tabelle ──────────────────────────────

   ⚠ **Hier war bis zum 12.09.2026 EINE Tabelle** mit `tr.saisonkopf` darin.
   Der Tabellenkopf stand einmal ganz oben; bei der dritten Saison war er
   ausser Sicht. **Ein Kopf, der ausser Sicht ist, ist kein Kopf.**

   `.sp-tab td.saison` gibt es nicht mehr -- die Saison steht in der
   Ueberschrift, nicht in einer Spalte, die ab der zweiten Zeile leer war. */
.stat-saison{font-family:var(--d);font-variation-settings:'wdth' 106;
  font-weight:800;font-size:var(--tx-lead);letter-spacing:.02em;
  margin:clamp(28px,3vw,40px) 0 0;padding-bottom:8px;
  border-bottom:2px solid var(--gelb)}
.stat-saison:first-of-type{margin-top:clamp(14px,1.6vw,20px)}
/* ⚠ **Zwei Bauformen, und immer nur eine im Baum.** `display:none` nimmt den
   Zweig auch fuer ein Vorleseprogramm heraus -- es liest, was bei seiner
   Breite sichtbar ist, und nichts doppelt. Der Grund fuer das doppelte Markup
   steht in `single-fch_person.php`: Die schmale Fassung zeigt nur, was einen
   Wert hat, und **eine solche Auswahl kann CSS nicht treffen.** */
/* ⚠⚠ **HIER STAND `.stat-schmal{display:none}` AUF OBERSTER EBENE — UND
   DAMIT WAR DIE SCHMALE FASSUNG NIE SICHTBAR.**

   Die Gegenregel `.stat-schmal{display:block}` steht in `@media(max-width:639px)`.
   **Eine Medienabfrage erhoeht die Spezifitaet nicht.** Beide
   Regeln wiegen 0-1-0, und diese hier stand 200 Zeilen SPAETER — sie gewann
   auf jeder Breite. Gemessen auf dev bei 360, 390 und 414px:
   `.stat-breit` none, `.stat-schmal` none. **Auf dem Handy stand zwischen
   «Statistik» und «Einsaetze» nichts.**

   > **Zwei Regeln fuer denselben Selektor entscheidet die Reihenfolge, nicht
   > die Medienabfrage. Wer sich auf den Medienblock verlaesst, verlaesst sich
   > auf die Zeilennummer.**

   Behoben mit einer Abfrage, die sich mit der anderen nicht ueberschneiden
   KANN: ueber 639 verbergen, darunter zeigen. Damit ist die Reihenfolge
   gleichgueltig. */
@media(min-width:640px){
  .stat-schmal{display:none}
}

/* ── Die zwei Gruppen ──

   **«Einsatz» und «Leistung» beantworten zwei Fragen**: War er dabei, und was
   hat er getan. Getrennt werden sie durch Zwischenraum und je eine graue
   Beschriftung darueber -- **keine senkrechte Linie**: Die Tabelle hat schon
   waagrechte, und ein Gitter aus beidem liest sich als Formular.

   ⚠ Die Gruppenreihe traegt in der ersten Zelle ein `<td>` und kein `<th>`:
   Ueber der Wettbewerbsspalte steht keine Gruppe, und ein leeres `<th>` waere
   fuer ein Vorleseprogramm eine Ueberschrift ohne Inhalt. */
/* ⚠ **Die Gruppenreihe «Einsatz | Leistung» ist am 12.09.2026 entfallen** --
   samt `.grp-reihe`, `.grp-start`, `.grp-eins` und `.grp-leist`. Mit S/U/N als
   EINER Spalte hat die Tabelle neun statt elf Spalten, und die Trennung
   erklaert sich von selbst. **Eine Ueberschrift, die nur erklaert, was man
   ohnehin sieht, ist eine Zeile Hoehe fuer nichts.**

── Die Spaltenbreiten ──

   Team/Wettbewerb 34%, SP 7%, S/U/N 13%, Min 9%, die fuenf Ereignisse je 7%.
   ⚠ **`table-layout:fixed` ist noetig**, sonst verhandelt der Browser die
   Prozente gegen den Inhalt und «Gelb-Rote Karten» im `.vh` zieht die Spalte
   breit -- der Text ist unsichtbar, aber nicht breitenlos. */
.sp-tab{table-layout:fixed}
.sp-tab thead th:first-child{width:34%}
.sp-tab thead th:nth-child(2){width:7%}
.sp-tab thead th:nth-child(3){width:13%}
.sp-tab thead th:nth-child(4){width:9%}
.sp-tab thead th:nth-child(n+5){width:7%}
/* ⚠ **S/U/N traegt Gewicht 400 und `--papier-halb`**, nicht 800 wie die
   uebrigen Werte. **Es ist die Bilanz der MANNSCHAFT und keine Leistung des
   Spielers** -- bis zum 12.09.2026 sagte das eine Fussnote in zwei Saetzen,
   jetzt sagt es die Form. Der Selektor muss die Regel «alles ausser den Nullen
   fett» ueberstimmen und steht darum hinter ihr. */
.sp-tab .stat-sun{font-weight:400;color:var(--papier-halb);white-space:nowrap}

/* WARNWARN **`th.tw` MUSS die generische `th`-Regel zuruecknehmen -- 12.09.2026.**

   Die Statistik schrieb die erste Zelle bis heute als `<td class="tw">`. Das
   war falsch: **Eine Zeile, die eine Beschriftung traegt, hat einen
   Zeilenkopf.** Jetzt steht dort `<th scope="row" class="tw">`, und ein
   Vorleseprogramm kann «FC Herrliberg 1, Tore, 6» sagen statt nur «6».

   WARN **Damit faengt sie aber `th{}`, und die bringt fuenf Dinge
   mit, die hier falsch sind:**

   ```
   font-size:var(--tx-etikett)   11px statt 14 -- der Teamname waere kleiner
                                 als die Zahlen daneben
   letter-spacing:.15em          gesperrt wie ein Etikett
   text-transform:uppercase      «FC HERRLIBERG 1»
   color:var(--tx-leise)         grau statt Text
   text-align:right              rechts, neben lauter rechtsbuendigen Zahlen
   border-bottom:2px solid gelb  ein gelber Strich unter JEDER Zeile
   ```

   Der letzte war der sichtbarste: Genau so sah die Bilanztabelle aus, bevor
   sie ihre eigene Klasse bekam -- **ein gelber Strich unter jeder Zeile und
   nur unter der ersten Spalte.** Dieselbe Ursache, zweimal.

   > **Wer ein `<td>` zu einem `<th>` macht, erbt eine Kopfzeilenform. Das ist
   > richtig fuer die Bedeutung und falsch fuer das Aussehen.** */
/* ⚠⚠ **Und dieselbe Ruecknahme gilt fuer BEIDE Tabellen.** Die erste
   Fassung dieser Regel nannte nur `.sp-tab` -- die Bilanz behielt ihren gelben
   Stummel unter «Total», gemessen am 12.09.2026:

       bil tfoot th   border-bottom 2px rgb(252,222,0)

   **Dieselbe Rolle, wieder zwei Stellen, wieder eine vergessen.** Sie stehen
   jetzt zusammen -- wie die Groessen weiter oben.

   > **Wer eine Ruecknahme fuer eine Tabelle schreibt, schreibt sie fuer
   > alle, die dasselbe Markup fuehren.** */
.sp-tab tbody th.tw,.sp-tab tfoot th,
.bil-tab tbody th,.bil-tab tfoot th{
  letter-spacing:0;text-transform:none;
  color:var(--papier-text);text-align:left;border-bottom:1px solid var(--papier-linie);
  padding-left:0}
/* ⚠ Die Summenzeile traegt ihre Kante OBEN, nicht unten -- unten waere sie
   die zweite und wuerde die Tabelle doppelt abschliessen. */
.sp-tab tfoot th,.sp-tab tfoot td,
.bil-tab tfoot th,.bil-tab tfoot td{border-bottom:0}
/* ══ WARNWARN DIE GROESSE STEHT AM ZEICHEN, NICHT AN DER TABELLE ═══════════

   Hier stand `.sp-tab .stat-ic{…}` — nur fuer die Statistiktabelle. In der
   EINSATZLISTE (`.sp-eins`) griff keine Regel, und **ein `<svg>` ohne
   `width`/`height` bringt seine Eigengroesse mit**: rund 100px. Ball und
   Schuh sprengten die Kopfzeile und trieben sie auf etwa 150px Hoehe.

   > **Wer eine Groesse an den Behaelter haengt statt an das Zeichen, hat sie
   > fuer jeden neuen Behaelter vergessen.**

   Jetzt einmal unbeschraenkt — dasselbe Mass wie `.ve-karte` (11x15), damit
   Ball, Schuh und Karten in einer Reihe gleich hoch stehen. */
.stat-ic{display:block;width:15px;height:15px;color:var(--papier-halb);flex:none}
/* WARN **Breit traegt der Kopf das Zeichen, die Zelle nicht.** Sonst stuende
   es in jeder Zeile noch einmal — fuenfmal je Spiel. */
.ez-ic{display:none}
/* ⚠⚠ **`.sp-eins` ist am 12.09.2026 dazugekommen — und der Fehler kam
   aus der Regel eine Zeile hoeher.**

   `.stat-ic` steht auf `display:block`, damit die Groesse ueberall traegt.
   **Ein Blockelement folgt aber keinem `text-align`** — es fuellt die Zelle
   und sitzt links, waehrend die Zahlen darunter rechts stehen. Fuer
   `.sp-tab` glich `margin-left:auto` das aus; **fuer die Einsatzliste stand
   keine solche Regel**, und Ball und Schuh standen daneben.

   Gemessen an den RECHTEN Kanten, 1280px (Zeichen gegen Wert):

   ```
   sp-tab    Tore 0 · Assists 0 · Karten 0 0 0
   sp-eins   Tore -28 · Assists -28 · Karten 0 0 0     → nach dem Bau alle 0
   ```

   ⚠ **Die erste Messung verglich Mitten statt Kanten** und meldete 31px
   und 17px — beides falsch, weil die Werte rechtsbuendig stehen und die
   Zellenmitte darum nichts aussagt. Erst der Vergleich der rechten Kanten
   zeigte die wirkliche Abweichung und belegte, dass die Kartenzeichen nie
   verrutscht waren.

   > **Wer ein Zeichen auf `display:block` setzt, nimmt ihm die Ausrichtung
   > der Zelle. Dann muss er sie ihm zurueckgeben — in JEDER Tabelle.**

   ⚠ Die Kartenzeichen sind `<span class="ve-karte">`, also inline, und
   standen darum die ganze Zeit bündig. **Zwei Zeichenarten in derselben
   Kopfzeile, nur eine verrutscht** — das ist der Grund, warum es beim
   Bauen nicht auffiel. */
.sp-tab thead th .ve-karte,.sp-tab thead th .stat-ic,
.sp-eins thead th .ve-karte,.sp-eins thead th .stat-ic{margin-left:auto}

/* ⚠ **Die Summe abgesetzt, nicht hervorgehoben.** Ein zweiter gelber Strich
   haette mit der Saisonueberschrift gestritten; eine Linie in Textfarbe sagt
   «hier endet die Aufzaehlung». Werte in 500 -- schwerer als die Zeilen,
   leichter als eine Ueberschrift. */
.sp-tab tfoot .stat-total th,.sp-tab tfoot .stat-total td,
.sp-tab .stat-total th,.sp-tab .stat-total td{
  /* ⚠ **`currentColor` war hier falsch.** Die Zellen haben verschiedene
     Textfarben: `.stat-sun` und `.null` stehen in `--papier-halb`. Die Linie
     wechselte darum mitten in der Tabelle die Farbe — dunkel, grau, dunkel,
     dann fuenfmal grau. **Eine Linie hat eine Farbe, sonst ist sie keine.** */
  border-top:1px solid var(--papier-text);font-weight:500}
.sp-tab .stat-total th{text-align:left;font-family:var(--b)}
/* **«Alle Saisons» steht in einer eigenen Tabelle ohne Kopf** -- sie gehoert
   zu keiner Saison. Damit sie trotzdem fluchtet, traegt sie dieselbe Klasse
   und dieselben Spaltenbreiten. */
.sp-tab-alle{margin-top:clamp(20px,2.4vw,30px)}
.sp-tab .stat-alle th,.sp-tab .stat-alle td{border-top:2px solid var(--papier-text)}
/* ⚠ `.stat-fuss` ist am 12.09.2026 ersatzlos entfallen -- die Fussnote zu
   S/U/N sagte in zwei Saetzen, was die Spalte jetzt durch ihre Form sagt. */
/* Die Saisonlinie ist kraeftiger als die Zeilenlinie, sonst waere sie keine:
   2px in `--papier-halb` gegen 1px in `--papier-linie`. Gemessen sind das
   Kontrast 6,93 gegen 1,36 auf Weiss — zwei Linien, die sich nur in der
   Staerke unterscheiden, unterscheiden sich bei 14% Deckkraft gar nicht. */
/* Unter 640 traegt der Saisonkopf die 2px-Linie; die Zeilenlinie waere die
   zweite fuer denselben Wechsel und zoege sich ueber jede Rasterzelle. */
@media(min-width:640px){
  .sp-tab tr.saisonstart td{border-top:2px solid var(--papier-halb)}
}

.sp-tab td.null,.sp-eins td.null{color:var(--papier-halb)}
/* **`.tore` war besetzt** — die Kachelreihe der Startseite traegt sie, mit
   `display:grid` und drei Spalten. Eine `<td class="tore">` wurde damit
   selbst zum Raster und stand schief im Kasten. Gefunden am 25.08.2026 im
   Bild, nicht in der Zahl — und die Projektregel «Klassennamen vor dem
   Gebrauch mit grep pruefen» war genau dafuer da. */
/* **Jeder Wert ueber null steht fett, nicht nur die Tore.**
   Bis zum 28.08.2026 trugen nur Tore das Gewicht — der Gedanke war, dass man
   fuer sie auf eine Spielerseite geht. **Aber eine rote Karte ist die
   auffaelligere Nachricht**, und eine Rangordnung zwischen Toren und Karten
   braucht es nicht: Was passiert ist, steht fett; was nicht passiert ist,
   bleibt grau.

   Die Auszeichnung liegt schon vor: `.null` markiert die Nullen, seit sie
   abgeschwaecht werden. **Die Regel ist darum umgedreht statt erweitert** —
   nicht «Tore fett», sondern «alles ausser den Nullen fett». Ein Ort weniger,
   an dem eine Spalte vergessen werden kann. */
/* **Jeder Wert ueber null steht fett, nicht nur die Tore.**
   Bis zum 28.08.2026 trugen nur Tore das Gewicht — der Gedanke war, dass man
   fuer sie auf eine Spielerseite geht. **Aber eine rote Karte ist die
   auffaelligere Nachricht**, und eine Rangordnung zwischen Toren und Karten
   braucht es nicht: Was passiert ist, steht fett; was nicht passiert ist,
   bleibt grau.

   **Nur Ereignisse, nicht der Umfang.** «Sp» und «Min» stehen in jeder Zeile
   und sagen, wie viel gespielt wurde — ein erster Anlauf setzte sie mit fett
   und machte damit ganze Zeilen fett.

   Die Auszeichnung kommt aus `data-k`, das die schmale Fassung ohnehin
   braucht: **ein Merkmal, zwei Zwecke.** `.sp-tab` hat es am 28.08.2026
   dazubekommen — vorher trug es nur `.sp-eins`.

   Der Doppelselektor faengt beide Schreibweisen: «Gelb/Rot» in der
   Einsatzliste, «Gelb / Rot» in der Statistik. Sie kommen aus den
   Tabellenkoepfen, und die sind nicht gleich geschrieben. */
/* **Die Zahlenspalten sind gleich breit.**
   Sie richteten sich nach ihrem Kopf und schwankten zwischen 80 und 111px —
   «Ass» schmal, «Gelb / Rot» breit, obwohl in allen eine Ziffer steht. **Die
   Zahlen standen dadurch nicht untereinander**, und beim Vergleich zweier
   Zeilen sucht das Auge die Spalte neu.

   `table-layout:fixed` waere der andere Weg und ist verworfen: Er zwingt
   ALLE Spalten in ein Mass, auch «Gegner» und «Datum», und die brauchen
   verschieden viel. **Eine Breite an den Zahlenspalten genuegt** — der
   Rest verteilt sich wie bisher.

   Die Kopfzelle traegt sie, nicht die Datenzelle: Eine Tabellenspalte ist so
   breit wie ihre breiteste Zelle, und der Kopf ist es hier immer. */
.sp-tab thead th[scope],.sp-eins thead th[scope]{width:5.4em}

/* **Das Datum bekommt eine Breite, sonst nimmt es den ganzen Rest.**
   Gemessen 213px fuer «14.06.2026», das 90 misst. Die Begegnung braucht den
   Platz eher: Sie traegt zwei Vereinsnamen. */
.sp-eins thead th:nth-child(2){width:9em}
/* **Und die Saisonspalte ebenso.** Ohne Breite teilte sie sich den Rest
   mit «Team / Wettbewerb» nach Inhalt und mass bei 1440 gemessene 271px
   fuer «2025/26» — zwischen Jahreszahl und Teamname klaffte ein halber
   Handbreit. Dieselbe Loesung wie eine Zeile darueber bei der
   Datumsspalte: eine Breite in `em`, damit sie mit der Schrift waechst. */
/* ⚠ **Die 9em sind am 12.09.2026 entfallen.** Die Spaltenbreiten stehen
   jetzt als Prozente weiter oben (34% fuer diese Spalte); zwei Regeln fuer
   denselben Selektor waren ein doppelter Selektor -- genau der Fund, der am
   selben Tag in `backend.css` behoben wurde. Die Begruendung darueber gilt
   weiter, nur traegt sie eine andere Zahl. */

/* ⚠⚠ **DREI DINGE AN DIESER REGEL — 13.09.2026, und sie haengen zusammen.**

   Sie soll sagen: **ein Ereigniswert ueber null ist fett.** SP, Min und die
   Nullen bleiben leicht. Gemessen tat sie das nicht:

   ```
   Rumpf   SP 800   S/U/N 800   Min 400   Tore 800 (wenn >0)
   TOTAL   alles 500       ← die Summe «5» leichter als die Zeile «3»
   ```

   **1 · `data-k="Sp"` gegen `data-k="SP"`.** Die Ausnahme war geschrieben und
   hat nie getroffen — **Attributwerte werden gross/klein unterschieden.** Die
   Vorlage schreibt `SP` (`single-fch_person.php`, die Zelle `data-k="SP"`), und sie sagt es zwei
   Zeilen weiter selbst: «diese Zeile ueber `[data-k="SP"]`».

   > **Eine Ausnahme, die nie greift, sieht aus wie eine Regel ohne
   > Ausnahmefall.**

   **2 · `.stat-sun` wurde still ueberschrieben.** `.sp-tab .stat-sun` setzt
   400 und grau — diese Regel hier ist spezifischer und gewann. Zwei Regeln
   ueber dieselbe Zelle, und die juengere hat die aeltere nicht gekannt.
   Jetzt ausdruecklich ausgenommen.

   **3 · `tbody` schloss die Summenzeile aus.** Darum stand die addierte
   Torzahl in 500, waehrend die Einzelzahl darueber in 800 stand. **Die
   Summe war leichter gesetzt als ihre Bestandteile.** Ohne `tbody` gilt die
   Regel auch im Fuss: Ein Ereigniswert ueber null ist fett, egal ob er eine
   Zeile oder eine Summe ist.

   ⚠ Damit stimmt auch der Kommentar an `.stat-total` wieder, der seit jeher
   «schwerer als die Zeilen» behauptet: Die schlichten Werte der Summe stehen
   in 500 gegen 400 der Zeilen, die Ereignisse stehen gleich. **Abgesetzt,
   nicht hervorgehoben** — wie es dort steht. */
.sp-tab td[data-k]:not(.null):not(.stat-sun):not([data-k="SP"]):not([data-k="Min"]),
.sp-eins tbody td[data-k]:not(.null):not([data-k="Min"]){font-weight:800}
.sp-eins td.sp-res{white-space:nowrap}

/* **Hier stand bis zum 25.08.2026 die Fassung (c) samt `display:contents`.**
   Sie war die Antwort auf zwei Loecher, die der graue Block anders loest —
   die Begruendung steht oben. `display:contents` war die Loesung fuer ein
   Raster, das es nicht mehr gibt, und faellt mit. */

.tz-row{
  display:grid;grid-template-columns:56px 1fr 30px;gap:4px 16px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--papier-linie);
  transition:padding-left .16s,background .16s;
}
/* Eine Farbe fuer einen Zustand, ueber Navigation und Inhalt hinweg.
   Bis zum 21.08.2026 trugen fuenf anfassbare Zeilen und Karten auf
   Papierseiten ZWEI Graustufen — --papier-flaeche fuer .tz-row,
   .jahrzeile und .mehr-zeigen, --papier-flaeche-hover fuer .nk und
   .jahrzehnt — und keine davon war --nav-beruehrt, die das Menue fuer
   denselben Zustand benutzt. Aufgefallen war es nie, weil man die
   Listen nie nebeneinander sieht: jede steht auf ihrer eigenen Seite.
   Genau so entsteht Drift. */
@media(hover:hover){.tz-row:hover{background:var(--nav-beruehrt);padding-left:10px}}
/* Die Nummernplakette kehrt um. Auf --nav-beruehrt verschwimmt --gelb
   mit dem Zeilengrund — die Plakette sieht aus, als haette jemand
   vergessen, sie mitzufaerben. Umgekehrt ist sie der staerkste Kontrast
   der Zeile und gibt der beruehrten Zeile einen Anker. Kein neues
   Vokabular: .hnav a:hover macht dieselbe Umkehrung schon.
   Der Kontrast bleibt derselbe — 14.62 in beide Richtungen, es ist
   dasselbe Farbpaar.
   EINZELFALL, keine Regel, und das ist nachgemessen: .tz-k ist die
   einzige gelbe Flaeche im Prototyp, die in einer anfassbaren Zeile
   sitzt. .snum steckt sechsmal in div.spz innerhalb div.kad, und auf
   dieser Kette liegt kein Hover; dasselbe gilt fuer .rueckennummer,
   td, .cdz, .hw-tag und .fakt. Wird die Kaderzeile mit den
   Spielerprofilen anfassbar, gilt dieselbe Umkehrung dort — DANN wird
   eine Regel daraus. */
@media(hover:hover){.papier .tz-row:hover .tz-k{background:var(--dun);color:var(--gelb)}}
.tz-k{
  grid-row:span 2;align-self:start;background:var(--gelb);color:var(--dun);
  font-family:var(--d);font-variation-settings:'wdth' 110;font-weight:800;font-size:var(--tx-klein);
  text-align:center;padding:8px 4px;letter-spacing:-.01em;
}
.tz-n b{display:block;font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:800;font-size:clamp(19px,1.04rem + 0.30vw,21px);letter-spacing:-.02em;line-height:1.1}
.tz-n span{font-size:var(--tx-klein);color:var(--papier-halb)}
/* 18px folgt dem optischen Gewicht neben dem Zeilentext, nicht der
   Lesbarkeit: ein Pfeil wird nicht gelesen, er wird gesehen. Deshalb steht er
   auf keiner Textleiter. Die Beruehrflaeche gehoert der ganzen Zeile
   (.tz-row, gemessen 67 bis 105px), nicht dem Zeichen. */
/* ── Der rechte Rand einer Verweiszeile ────────────────────────────
   **Am rechten Rand steht ein Zeichen ODER eine Angabe, nie beides.** Eine
   Zeile, die als Ganzes ein Verweis ist, endet rechts mit einem Pfeil — es sei
   denn, dort steht schon etwas. Dann tritt der Pfeil zurueck: Zwei Zeichen am
   selben Rand konkurrieren, und die Angabe ist das Wichtigere.

   `.tz-row` und `.jahrzeile` enden mit einem Pfeil, weil rechts sonst nichts
   steht. `.rz` endet mit dem Resultat — dort ist der Platz vergeben, und in
   einer Resultatliste gehoert das Resultat an den rechten Rand.

   **Gemessen am 26.08.2026 ueber alle acht ganzflaechigen Verweisformen, und
   die Regel gilt fuer ZEILEN, nicht fuer Kacheln:**

     a.tz-row                 Pfeil, keine Angabe    traegt
     a.jahrzeile              Pfeil, keine Angabe    traegt
     a.tor                    Pfeil, keine Angabe    traegt
     .rz                      Angabe UND Pfeil       ueberstimmt 27.08.
     a.nk                     weder noch             Kachel
     a.spl                    weder noch             Kachel
     a.person.person-verweis  weder noch             Kachel
     a.spz.person-verweis     weder noch             siehe unten

   **Die vier unteren sind kein Gegenbeweis, sondern ausserhalb.** Bei einer
   Nachrichtenkachel ist die Schlagzeile das Versprechen, bei einer Logokachel
   das Logo; ihre Flaeche traegt die Auskunft, und der rechte Rand ist kein
   Ort. `a.spz.person-verweis` ist zwar eine Zeile, beantwortet aber die
   ANDERE Frage: Sie steht in einer gemischten Liste und traegt darum die Linie
   im Ruhezustand.

   **Zwei Fragen, zwei Zeichen — und so ordnen sie sich zueinander:**

     Fuehrt die Flaeche irgendwohin?   → der rechte Rand: Pfeil oder Angabe
     Ist die Liste gemischt?           → der Ruhezustand: Linie oder nichts

   Die erste Frage stellt sich bei jeder Verweiszeile, die zweite nur, wenn
   Nachbarn verschieden sind. `a.spz.person-verweis` beantwortet die zweite mit
   Ja und die erste gar nicht — es ist eine Zeile ohne rechten Rand im
   gemeinten Sinn, weil ihre Angabe (die Nummer) links steht.

   **Ohne die Grenze zwischen Zeile und Kachel waere der Satz falsch** — dann
   verlangte er vier Pfeile, die keine der vier Kacheln braucht. */
/* **Ein Pfeil in einer Zeile ist eine Beschriftung und kein Titel.**
   Bis zum 29.08.2026 stand er auf 18px und `#9A9A93` — beides Werte, die
   nirgends sonst vorkommen, und beide fielen durch:

     Groesse   18px liegt auf keiner der beiden Leitern. Er steht jetzt auf F,
               derselben Stufe wie der Zeilentext daneben. C haette ihn zum
               lautesten Element der Zeile gemacht — **derselbe Fall wie der
               Verbandsverweis in der Faktenzeile** (`.tg-fakten .tg-verweis a`),
               der aus genau diesem Grund auf G und Gewicht 400 gestellt wurde.
     Farbe     `#9A9A93` auf Weiss ergab **2,83:1** und damit zu wenig.
               `--papier-halb` ergibt **6,93:1** und ist die benannte
               Nebenfarbe fuer Papierseiten.

   **Ein Grau, das niemand benannt hat, hat auch niemand gerechnet.** */
.tz-p{grid-row:span 2;text-align:right;color:var(--papier-halb);font-size:var(--tx);transition:transform .16s,color .16s}
@media(hover:hover){.tz-row:hover .tz-p{color:var(--dun);transform:translateX(4px)}}
@media(min-width:760px){.tz-row{grid-template-columns:56px 1fr 30px}.tz-k,.tz-p{grid-row:auto}}

/* ── 100 Teamseite ────────────────────────────────────────── */

/* minmax(0,1fr) wie beim Kapitelraster: ohne das wächst die einspaltige Spur
   auf die Mindestbreite ihres breitesten Inhalts. Auf der Impressumseite zog
   ein langer Zwischentitel die Spalte bei 320px auf 366px und die Seite lief
   seitlich über. */
/* **`align-items:start` — die fehlende Verschachtelung, in einer Zeile.**

   Der Prototyp legt in die linke Spalte immer ein leeres `<div>` und den
   Inhalt hinein. **Das `<div>` wird gestreckt, sein Inhalt nicht.** Im Theme
   kommt der Inhalt aus `<InnerBlocks />` und ist selbst das Rasterfeld -- es
   gibt kein Zwischen-`<div>`, das die Streckung abfaengt.

   Gemessen auf der Kontaktseite bei 1440:

       .anschriftzeile   Prototyp 140 px   Theme 184
       ihre drei Zeilen  je 27 · 27 · 82   je 42 · 42 · 96

   **Die Kontaktzeilen wachsen von 27 auf 42**, weil `.anschriftzeile` ein
   Raster ist und seine drei Reihen die geschenkte Hoehe unter sich aufteilen.
   Nicht der Abstand ist falsch -- die Zeilen selbst sind zu hoch, und dazu
   stehen ihre Zeichen und Texte mittig statt oben.

   > **Ein Rasterfeld, das gestreckt wird, gibt die Streckung an sein eigenes
   > Raster weiter.**

   `.mitlauf` hat sich davon seit je ausgenommen (`align-self:start`, ab 900).
   Die Regel hier tut fuer die linke Spalte dasselbe -- und weil im Prototyp
   jedes Kind von `.zwei` ein Wickel-`<div>` ist, dessen Inhalt oben steht,
   ist sie an allen 14 Stellen dieselbe Wirkung wie dort. */
.zwei{display:grid;gap:34px;grid-template-columns:minmax(0,1fr);align-items:start}
/* Kapitel der Vereinsgeschichte: Text und Bild etwa gleich stark.
   Die Jahresspanne trägt die Orientierung, nicht die Überschrift. */
/* minmax(0,1fr) statt der impliziten auto-Spur — sonst wächst die Spalte
   auf die maximale Inhaltsbreite und überragt den Behälter. Ab 900px gilt die Zweispaltigkeit. */
.kapitel{display:grid;gap:34px;grid-template-columns:minmax(0,1fr)}
.kapitel-jahre{font-family:var(--d);font-variation-settings:'wdth' 108;font-weight:800;font-size:clamp(18px,2.4vw,26px);letter-spacing:-.02em;color:var(--tx-hervor);margin-bottom:4px}
/* Mobil stehen Text und Bild in einer Kolonne — dort trennt der Abstand allein zu wenig */
@media(max-width:899px){.kapitel.folge{border-top:1px solid var(--linie);padding-top:40px}}
@media(min-width:900px){
  .kapitel{grid-template-columns:1fr .85fr;gap:48px;align-items:start}
  .zwei{grid-template-columns:1.5fr 1fr}
  /* Die Seitenspalte läuft mit, damit der Kontakt beim Lesen sichtbar bleibt */
  /* align-self:start ist nötig — als gestreckte Rasterzelle könnte sticky nicht greifen */
  .mitlauf{position:sticky;top:104px;align-self:start}
}

/* Mannschaftsfoto — 16:9, auf 1100px begrenzt, nie beschnitten.

   Der Rahmen stand auf 2/1, die Datei ist 1400x788 und damit schon 16:9. Mit
   cover schnitt der Rahmen 11 % der Bildhöhe weg, bei einer Bildposition von
   42 % rund 5 % oben und 6 % unten — auf jeder Teamseite, ohne dass es je
   aufgefallen wäre. Was cover wegschneidet, sieht keine Prüfung: das Bild ist
   da, hat Höhe und Inhalt.

   Die Grösse kommt von der Spaltenbreite, nicht vom Verhältnis — bei 2560px
   waren es 1488px Bildbreite. 16:9 macht das Bild bei gleicher Breite sogar
   höher. Erst die Begrenzung der Figur hilft, und 1100px liefert auf 1440,
   1916 und 2560px dieselbe Bildgrösse. Bei zwölf Teamseiten zählt
   Vergleichbarkeit mehr als Bildgrösse.

   contain, nicht cover: ein sichtbarer Rand ist besser als ein still
   abgeschnittener Kopf. Bei einer 16:9-Datei ist contain deckungsgleich mit
   cover; der Rand erscheint nur bei einem Bild im falschen Format.
   Die Vorgabe an die hochladende Person lautet darum: Köpfe und Füsse
   vollständig, dann auf 16:9. Bei drei Reihen lieber Rand als Beschnitt. */
/* **Eine Kante um das Bildfeld.** `object-fit:contain` passt ein abweichendes
   Verhaeltnis ein statt es zu beschneiden — es gibt keine abgeschnittenen
   Leute, aber der Grund dahinter ist weiss und der Behaelter durchsichtig.
   Gemessen bei 1440: ein 4:3-Bild laesst **25 Prozent der Flaeche leer**, je
   138px links und rechts; 3:2 laesst 16 Prozent; ein versehentliches
   Hochformat **58 Prozent und 318px je Seite**. Ohne Kante schwebt das Bild
   in fast Weiss und liest sich als Layoutfehler; mit Kante sitzt es in einem
   Feld, und die Raender lesen sich als Passepartout.

   **Der Kontrast der Linie ist 1,36 auf Weiss und damit unter den 3, die eine
   bedeutungstragende Grafik braeuchte.** Das ist hier vertretbar: Die Linie
   traegt keine Information, sie begrenzt eine Flaeche — wer sie uebersieht,
   verliert nichts ausser der Begrenzung. Staerker gaebe es einen Rahmen, und
   ein Mannschaftsfoto in einem Rahmen ist eine andere Aussage. **Das ist
   blinder Fleck 5 — Randkontrast misst keine Regel**, darum steht die Zahl
   hier. */
.mannschaftsbild{margin:0;max-width:1100px}
.papier .mannschaftsbild .f,
.papier .mannschaftsbild img{box-shadow:0 0 0 1px var(--papier-linie)}
.mannschaftsbild .f{aspect-ratio:16/9;background:var(--papier-flaeche)}
.mannschaftsbild .f::before{background-size:contain;background-repeat:no-repeat;
  background-position:50% 50%}
/* Für das echte Bild im Theme dieselbe Regel wie für die Attrappe. */
.mannschaftsbild img{width:100%;aspect-ratio:16/9;object-fit:contain;display:block;
  background:var(--papier-flaeche)}

/* Kader */
.kad{display:grid;margin-top:clamp(20px,2.6vw,30px)}
.spz{padding:13px 0;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--papier-linie)}
/* 22px wie .zr — beide sind die Zahl, an der man eine Zeile erkennt, und
   beide stehen in derselben Schrift mit Breite 114 und Gewicht 800. Vorher 25
   gegen 22: zwei Werte fuer eine Rolle. Herunter statt hinauf, weil .zr das
   Resultat in der Ergebnisliste ist und damit der naechste Verwandte des
   gesperrten Resultats in der Matchtafel — was neben einem gesperrten Wert
   steht, bewegt man nicht ohne Not. Die Plakette bleibt 44px hoch, sie haengt
   an min-width und Polster. */
.snum{
  font-family:var(--d);font-variation-settings:'wdth' 114;font-weight:800;font-size:22px;
  background:var(--gelb);color:var(--dun);min-width:38px;text-align:center;padding:2px 6px;
  flex:none;letter-spacing:-.03em;
}
/* Nur der Name ist Pflicht. Fehlt eine Nummer, bleibt die Spalte breit, aber farblos —
   sonst würden die Namen von Zeile zu Zeile springen. */
.snum:empty{background:transparent}
/* ⚠⚠ **EINE ZEILE JE PERSON — Didi, 24.09.2026 ──────────────────

   > ~~`.sn b{display:block}`~~ — der Name war ein Block, die Position
   > stand darunter. Zwei Zeilen je Person.

   «Je Person eine Zeile: Name links, Position rechts daneben in der
   Etikettschrift, darunter eine duenne Trennlinie. Kein eigener Kasten,
   keine zweite Zeile.»

   **Kasten und Trennlinie standen schon** (`.spz` traegt
   `border-bottom:1px solid var(--papier-linie)` und keinen Grund), und die
   Etikettschrift ebenso. Gefehlt hat nur, dass die zwei nebeneinander
   stehen — `display:block` am Namen hat sie getrennt.

   ⚠ **`margin-left:auto` schiebt die Position an den rechten Rand** und
   nicht bloss neben den Namen. In drei Spalten laufen die Positionen damit
   auf einer Kante; nebeneinandergesetzt spraenge jede Zeile mit der
   Namenslaenge. Didis «links … rechts» nennt zwei Enden, nicht zwei
   Nachbarn.

   ⚠ **Fehlt die Position, bleibt die Zeile kurz** — ohne Platzhalter, wie
   verlangt: Die Vorlage gibt ein leeres `<span>` aus, das nichts misst,
   und `margin-left:auto` an einem leeren Element verschiebt nichts
   Sichtbares.

   ⚠ `min-width:0` am Namen, damit ein langer Name schrumpfen darf statt
   die Position aus der Spalte zu draengen. */
.sn{display:flex;align-items:baseline;gap:10px;flex:1;min-width:0}
.sn b{min-width:0;font-family:var(--d);font-variation-settings:'wdth' 104;font-weight:700;font-size:var(--tx-klein)}
.sn span{margin-left:auto;flex:none;font-size:var(--tx-etikett);letter-spacing:.1em;text-transform:uppercase;color:var(--papier-halb)}
/* ── ⚠⚠ DAS KADERRASTER SCHALTET BEI 620 — Didi, 24.09.2026 ───────

   Hier stand ~~`@media(min-width:640px)`~~, bei `.kad-gruppe` und `.staff`
   weiter unten ebenso, und an der schmalen Fassung der Kaderwand am Ende
   des Blatts ~~`@media(max-width:639px)`~~. Didi: «Kaderraster von 640 auf
   die Hausgrenze 620.»

   **Der Grund ist eine Lücke von zwanzig Pixeln und keine Vorliebe.** Die
   Kader-Klappzeilen (`.kad-klapp`) sind am 24.09.2026 auf 620 gezogen
   worden, das Raster blieb bei 640. Zwischen 620 und 639 stand der Block
   damit offen über einem einspaltigen Raster — aufgeklappt, um Übersicht zu
   schaffen, und darunter genau die lange Säule, gegen die das Klappen
   gebaut ist. Die Messung dazu steht beim Klappblock.

   > **Zwei Zahlen für eine Sache sind eine zu viel** — die zwanzig Pixel
   > dazwischen zeigen jedes Mal die halbe Absicht.

   **Vier Stellen tragen dieses Raster, und alle vier sind mitgezogen:**
   hier `.kad`, weiter unten `.kad-gruppe` und `.staff`, und am Ende des
   Blatts die schmale Fassung der Kaderwand mit `@media(max-width:619px)`.
   619/620 ist das Gegenstückpaar des Hauses, dasselbe wie bei `.g2,.g3,.g4`.

   ⚠ **Die übrigen 640er im Blatt bleiben stehen** — Spiel- und
   Statistiktabellen, Spielkopf, Kopfzeilenschrift, `.g4` und `.kopf-um`.
   Sie sind nicht bestellt, und jede trägt ihre eigene gemessene Begründung
   an ihrer Stelle. **Wer sie später nachzieht, prüft sie einzeln** — dieser
   Zug hier ist mit der Klappgrenze begründet, und die gilt für keine von
   ihnen. */
@media(min-width:620px){.kad{grid-template-columns:repeat(2,1fr);column-gap:32px}}
@media(min-width:1000px){.kad{grid-template-columns:repeat(3,1fr)}}
/* Kader als Kacheln — dieselbe Personenkarte wie beim Vorstand, mit Rückennummer */
/* ── Der Kachelkader: je Position eine eigene Reihe — 11.09.2026 ──
   Bis heute war `.kad-kacheln` selbst das Raster, und eine Position begann
   mitten in der Zeile. Jetzt ist es der Behaelter, und je Position steht
   eine `.kad-gruppe` darin — ein eigenes Raster, das oben links anfaengt.
   ⚠ **Die angebrochene Zeile bleibt halb leer, und das ist gewollt.**
   Eine Trennung, die sich auffuellen laesst, ist keine. */
.kad-kacheln{margin-top:clamp(24px,3vw,34px)}
.kad-gruppe{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
/* Der Abstand zwischen zwei Positionen ist groesser als der zwischen zwei
   Karten — sonst sieht die halb leere Zeile aus wie ein Fehler. */
.kad-gruppe+.kad-gruppe{margin-top:clamp(20px,2.4vw,30px)}
/* 620 und nicht mehr 640, seit dem 24.09.2026 — die Begründung steht bei
   `.kad` weiter oben, wo die vier Stellen des Rasters aufgezählt sind. */
@media(min-width:620px){.kad-gruppe{grid-template-columns:repeat(3,1fr)}}
.rueckennummer{position:absolute;left:0;top:0;z-index:4;background:var(--gelb);color:var(--dun);
  font-family:var(--d);font-variation-settings:'wdth' 110;font-weight:800;font-size:var(--tx-klein);padding:4px 10px}

/* Personenkarte — Vorstand, Trainer, Betreuung */
.staff{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
/* Zwei Zeilen für die Rollenbezeichnung reservieren, sonst fluchten die Namen
   nicht: «Assistenztrainer» braucht 175px, die Karte hat 169 — die Rolle wird
   zweizeilig und schiebt den Namen 18px nach unten.
   2lh sind genau zwei Zeilen des Elements; 36px wären zwei Zeilen plus 0,8 und
   damit ein Wert, der zufällig trägt. Er steht als Rückfall davor, weil es die
   Einheit lh erst ab Chrome 109, Safari 16.4 und Firefox 120 gibt.
   Zwei Zeilen, nicht drei: eine dreizeilige Rolle ist eine der Organisation,
   nicht des Teams. Drei zu reservieren kostete jede Karte 35px statt 17. */
.staff .person-rolle{min-height:36px;min-height:2lh}
/* Gleiche Kachelgrösse wie beim Kader — sonst wirken die Trainer wichtiger
   als das Team. Und dieselbe Schwelle: 620 statt ~~640~~ seit dem
   24.09.2026, Begründung bei `.kad` weiter oben. */
@media(min-width:620px){.staff{grid-template-columns:repeat(3,1fr)}}
/* Ab 1000px dieselbe Kartenform wie beim Vorstand. Die Spaltenzahl ergibt
   sich aus dem Platz, nicht aus einer Tabelle: gemessen fünf bei 1000px,
   sieben bei 1440, acht bei 1916 — und die Kachel bleibt dabei fast gleich
   breit (173 / 169 / 178px). Zwanzig Spieler stehen so in drei Reihen statt
   vier. Der Nebeneffekt ist, dass ein Team mit elf und eines mit
   fünfundzwanzig Spielern keine eigene Regel brauchen. */
@media(min-width:1000px){
    /* ⚠ **Sechs, und nicht mehr `auto-fill`.** Der Kommentar darueber gilt
       weiter fuer den Staff: Die Spaltenzahl ergab sich aus dem Platz —
       gemessen fuenf bei 1000px, sieben bei 1440, acht bei 1916. **Fuer den
       Kader ist das jetzt falsch:** Eine Reihe, deren Breite die Gruppe
       zerlegt, macht aus «Abwehr» zwei Bloecke, die nichts verbindet.
       Sechs sind gesetzt, weil der Prototyp sechs zeigt. */
    .kad-gruppe{grid-template-columns:repeat(6,1fr);gap:16px}
    /* ⚠ **Der Staff nimmt ab 11.09.2026 dasselbe Raster wie der Kader.**
       Hier stand `repeat(auto-fill,minmax(160px,1fr))` — fuenf Spalten bei
       1000px, sieben bei 1440, acht bei 1916. **Neben einem Kader mit sechs
       sah der Staff wie ein anderer Bauteil aus**, und die Kacheln waren
       verschieden breit. Sechs, wie der Kader.
       ⚠ Ohne Gruppierung und ohne Ueberschriften je Funktion — die
       Betreuer laufen in EINER Reihe durch, nach der Sortierzahl am
       Funktionsbegriff (205 Cheftrainer · 210 Trainer · …). Eine
       Ueberschrift je Funktion haette bei vier Betreuern vier
       Ueberschriften ergeben. */
    .staff{grid-template-columns:repeat(6,1fr);gap:16px}
  .kad-kacheln .person-tx,.staff .person-tx{padding:14px 14px 18px}
}
/* Trainingstage als eigener Abschnitt am Seitenende — je Tag ein Feld mit gelber Oberkante */
.trainingstage{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.tt{border-top:2px solid var(--gelb);padding-top:13px}
.tt b{display:block;font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:800;font-size:17px;letter-spacing:-.015em}
.tt .zeit{display:block;font-size:var(--tx-klein);margin-top:2px}
.tt .wo{display:flex;align-items:center;font-size:var(--tx-klein);color:var(--papier-halb);margin-top:7px}
.tt .wo .ic{width:14px;height:14px;color:var(--gold)}
.schnupper{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:clamp(20px,2.6vw,28px)}
.schnupper span{font-size:var(--tx-klein);color:var(--papier-halb)}
/* **Die Fläche gehört an den Token, nicht an eine zweite Regel.**

   Gemessen am 31.08.2026: Auf Papier stand hier dunkler Text auf dunklem
   Grund — Kontrast **1,05**. Praktisch unlesbar, und zwar auf jeder
   Personenkarte: Kader, Staff, Vorstand.

   Die Ursache ist die Tokenumstellung. `color` wurde auf `--tx-haupt`
   gehoben und flippt seither mit `.papier` mit; `background` blieb auf
   `--stein` stehen und flippt nicht. **Bei den Textfarben griff die
   Umstellung, beim Hintergrund nicht** — und weil nur eine Hälfte
   umschaltete, wurde aus zwei richtigen Zuständen ein falscher.

   Der Prototyp löst es mit `.papier .person{background:…}`. Diese Fassung
   nimmt stattdessen `--fl-karte`, den es hier schon gibt und der genau
   das tut: `--stein` im Dunkeln, `--papier-flaeche` auf Papier. **Eine
   zweite Regel wäre der Selektor ein zweites Mal**, und die Regel sagt:
   ein Selektor steht genau einmal.

   Im selben Zug der Tippfehler `inline-sizeize`. Ein ungültiger Wert wird
   stillschweigend verworfen — heute hängt keine `@container`-Abfrage
   daran, aber die Eigenschaft stand trotzdem nur zum Schein da. */
.person{display:block;background:var(--fl-karte);color:var(--tx-haupt);overflow:hidden;position:relative;transition:background .18s;container-type:inline-size}

/* ── Der Verweis aufs Spielerprofil ────────────────────────────────
   **Die ganze Kachel ist der Verweis, nicht der Name darin.** Ein Name misst
   rund 20px Hoehe; eine Beruehrflaeche braucht 44. Und wer eine Kachel sieht,
   tippt auf die Kachel.

   **Beide Zustaende stehen in derselben Wand**, weil der Plan sie beide
   erlaubt: Aus einer Kaderkachel wird nur dann ein Verweis, wenn
   `spielerprofile` beim Team UND `profil_veroeffentlichen` bei der Person
   zutreffen. Eine Wand, in der alle Kacheln gleich sind, haette den gemischten
   Fall nie gezeigt — dieselbe Falle wie die gemischte Spielliste, die zwei
   Spurbreiten bekam, weil die Regel je Zeile statt je Liste galt.

   **Die Kachel ohne Verweis bleibt ein `div` und braucht darum keine einzige
   Regel, die etwas abschaltet.** Kein Hover, kein Zeigerwechsel, keine
   Unterstreichung — nicht weil es unterdrueckt wird, sondern weil es nie
   entsteht. Eine Regel, die einen Zustand wegnimmt, waere die zweite Stelle,
   an der ihn jemand wieder einschalten koennte.

   **Der Name in der Kachel ist ein Namensausgabeort und bleibt einer.** Dass
   er jetzt in einem Verweis steht, aendert an der Zaehlung nichts: derselbe
   Text an derselben Stelle, und die Namensform greift hier wie ueberall. */
/* **Der Name traegt die Linie schon im Ruhezustand.** Der erste Entscheid
   lautete anders: gleicher Ruhezustand fuer beide, damit eine Kachel ohne
   Profil nicht defekt aussieht. **Der Preis zeigte sich auf dem Handy** — dort
   gibt es keinen Hover, vier von sechs Kacheln reagieren auf einen Fingertipp,
   zwei nicht, und nichts sagt vorher, welche.

   **Sie markiert die Anwesenheit von etwas statt die Abwesenheit. Ein Name
   ohne Linie ist einfach ein Name; eine Kachel, der man ansieht, dass ihr
   etwas fehlt, waere die andere Loesung gewesen.**

   **Im Hover kommt kein zweites Zeichen dazu.** Die Flaeche wechselt die
   Farbe, die Linie bleibt, wie sie ist — zwei Zeichen fuer denselben Zustand
   waeren eines zu viel, und die Linie hat ihre Aufgabe schon erfuellt, bevor
   der Zeiger da war. */
a.person-verweis{text-decoration:none}
/* **Der Strich unterscheidet, wer ein Profil hat.** In einer Kaderliste
   sind nicht alle Namen Verweise — die SFV-Nummer entscheidet das, nicht
   ein Feld «hat Profil». Ohne Auszeichnung im Ruhezustand ist der
   Unterschied auf einem Zeigergeraet erst beim Darueberfahren zu sehen
   und auf einem Tastgeraet gar nicht; die Kachel selbst sieht in beiden
   Faellen gleich aus.

   **Gelb statt `--papier-linie`, 28.08.2026.** Der alte Wert lag auf
   Weiss bei Kontrast 1,26 zu 1 — eine Auszeichnung knapp ueber der
   Sichtbarkeitsschwelle, die aussah wie ein Artefakt. Gelb ist zudem die
   Farbe, in der jeder andere Verweis der Website unterstrichen ist.

   **Gegen Gelb sprach die Nachbarschaft zum Nummernklotz** — zweimal
   Gelb in derselben Zeile, und der Strich ist heller als der Klotz.
   Abgewogen und entschieden: Der Strich gehoert zum Namen und die Nummer
   zur Nummer; sie stehen nebeneinander und nicht uebereinander. */
a.person-verweis .person-name,
a.spz.person-verweis .sn b{text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:3px;
  text-decoration-color:var(--gelb)}
a.person-verweis:hover .person-name,
a.person-verweis:focus-visible .person-name,
a.spz.person-verweis:hover .sn b,
a.spz.person-verweis:focus-visible .sn b{text-decoration-color:currentColor}
/* **Eine Regel fuer zwei Bauformen, getrennt am 25.08.2026.**
   `a.person.person-verweis` ist eine Bildkachel mit Portraet,
   `a.spz.person-verweis` eine Listenzeile mit Nummer und Namen. Beide bekamen
   dieselbe Hoverflaeche - fuer die Kachel richtig, fuer die Zeile geliehen.
   **Die Zeile behaelt sie trotzdem**, weil eine Zeile, die als Ganzes anfassbar
   ist, dieselbe Antwort braucht wie `.tz-row` und `.jahrzeile`: Der Grund
   wechselt. Getrennt ist die Auswahl, damit die zwei Bauformen kuenftig
   auseinandergehen koennen, ohne dass es jemand merkt. */
@media(hover:hover){.papier a.person.person-verweis:hover{background:var(--nav-beruehrt)}}
@media(hover:hover){.papier a.spz.person-verweis:hover{background:var(--nav-beruehrt)}}
/* ⚠ ~~`a.person-verweis:focus-visible{outline:2px solid var(--dun);
   outline-offset:2px}`~~ ist am 25.09.2026 entfallen. Sie war schon vorher
   die halbe Grundregel und ist seit heute Zeichen fuer Zeichen die ganze:
   Die Grundregel setzt genau `outline:2px solid var(--akzent)` mit
   `outline-offset:2px`, und `--akzent` trifft hier dasselbe #0B0B0A, das
   `--dun` traf. **Eine zweite Nennung waere dieselbe Entscheidung an einem
   zweiten Ort** — derselbe Satz, mit dem die Kernbloecke beim Ressortkopf
   weggelassen sind. */
/* Hochformat: ein Mensch ist höher als breit, und die Porträts liegen so vor */
.person .f{aspect-ratio:3/4}
/* Steht anstelle des Fotos, bis eines vorliegt — gleiche Fläche, gleiche Kartenhöhe */
.person-init{
  aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
  background:var(--tafel);color:var(--gelb);
  font-family:var(--d);font-variation-settings:'wdth' 100;font-weight:900;
  font-size:13cqi;line-height:1;letter-spacing:.02em;
}
.person::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--gelb);transform:scaleX(0);transform-origin:left;transition:transform .16s ease-out}
/* Nur anklickbare Karten reagieren auf den Zeiger — Spielerkacheln führen nirgends hin */
@media(hover:hover){a.person:hover{background:var(--stein-hell)}}
@media(hover:hover){a.person:hover::after{transform:scaleX(1)}}
.person-tx{padding:16px 16px 20px}
/* Das erste Element sitzt bündig — sonst addiert sich sein Aussenabstand zum Polster */
.person-tx > :first-child{margin-top:0}
/* Bei zwei Karten nebeneinander bleiben auf einem 320er Gerät 104px Textbreite.
   „Administration" allein misst dort 138px — ohne Trennung ragt die Rolle aus
   der Karte. hyphens:auto trennt nach Wörterbuch (die Seite ist lang="de-CH"),
   anywhere fängt den Rest ab. */
.person-rolle{hyphens:auto;overflow-wrap:anywhere;font-size:var(--tx-etikett);letter-spacing:.19em;text-transform:uppercase;color:var(--gelb);font-weight:700}
.person-name{font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:800;font-size:var(--tx);letter-spacing:-.02em;margin-top:5px;color:inherit;line-height:1.1}
/* ── ⚠⚠ DIE ZWEI KONTAKTZEILEN EINER PERSON — Didi, 25.09.2026 ────────
   «E-Mail und Telefon ueberall, wo sie vorkommen, auf allen Breiten und
   ausdruecklich auch am Handy: Symbole in einer festen Spalte, gleich breit,
   Text bei E-Mail und Telefon auf derselben Kante. Beide Zeilen eng
   untereinander wie im Fuss — normaler Zeilenabstand, Tippflaeche mindestens
   24px ohne sichtbaren Zusatzabstand. Unterstrich bei beiden gleich. Am Handy
   dieselbe Form, keine eigene, groessere Zeilenhoehe.»

   ⚠ **Dieselben zwei Zeilen kommen in DREI Bauformen aus den Vorlagen**, und
   geschrieben war die Regel nur fuer die erste:

       p.person-tel > a.tel   Vorstand, Teamseite, Ansprechkasten, Stellen
       a.person-mail          Vorstand, Teamseite, Ansprechkasten
       p.person-mail > a      nur `template-parts/stellen.php`

   > ~~`.person-tel a{display:inline-flex;align-items:center;gap:7px}`~~ —
   > 25.09.2026. Eine Entsprechung fuer die Mailzeile gab es nicht.

   **Daran liefen die Kanten auseinander.** In der dritten Bauform ist der
   Verweis ein gewoehnliches Inline-Element; das `gap` am `<p>` darueber hat
   nur EIN Flexkind und wirkt deshalb nie. Auf «Offene Positionen» begann der
   Mailtext bei 15 + 5,6 = 20,6px (Zeichenbreite plus `.ic{margin-right:.4em}`)
   und der Telefontext bei 27,6px — sieben Bildpunkte Versatz zwischen zwei
   Zeilen, die uebereinanderstehen. **Eine Regel, die nur eine von drei
   Bauformen kennt, sieht fertig aus.**

   **a) Eine feste Spur und kein Abstand.** 20px Spalte, das Zeichen darin
   mittig. Bei `gap` haengt die Textkante an der Zeichenbreite; heute sind
   beide Zeichen mit 15px gleich breit, und genau darum faellt es niemandem
   auf, wenn eines Tages ein drittes danebensteht. **Die Spur haelt die Kante
   auch dann** — dieselbe Begruendung, die bei `.papier .kontaktzeile`
   ausgeschrieben steht.
   **20 und nicht 15, weil der Textanfang bleiben soll, wo er ist:** 20 + 7 =
   27 gegen 27,6 vorher. Die Telefonzeile ruehrt sich um einen halben
   Bildpunkt, die Mailzeile rueckt auf sie zu.

   ⚠ **`margin:0` am Zeichen gehoert zur Spur.** `.ic` bringt aus der
   Grundregel `margin-right:.4em` mit; in einer 20px-Spur stuende das Zeichen
   damit nicht mittig, sondern liefe mit 20,6px Randkasten ueber sie hinaus.

   **b) `display:grid` und nicht `inline-grid` — daran haengt die Zeilenhoehe.**
   `a.person-mail` steht in der Ansprechkarte nackt zwischen zwei Absaetzen.
   Als Inline-Element haengt es in einer anonymen Zeile, und die ist so hoch
   wie der Strut von `.person-tx`: **17px x 1,6 = 27,2px**, waehrend die
   Telefonzeile in ihrem eigenen `<p>` auf 14px x 1,6 = 22,4px steht. Zwei
   Zeilen, die zusammengehoeren, standen fast fuenf Bildpunkte verschieden
   hoch, ohne dass eine Regel das je gesagt haette. Als Block gibt es die
   anonyme Zeile nicht mehr, und beide messen 24.
   `width:fit-content` haelt den Block so breit wie seinen Inhalt. Im
   Infokasten traegt der Verweis einen Unterstrich — ueber die volle
   Kastenbreite zoege er ihn bis an den Rand.

   **c) Die Tippflaeche kommt aus `min-height`, nicht aus Polster.** Dieselbe
   Bauform wie `.fuss-mail`: die 22,4px hohe Zeile auf 24 gehoben,
   `align-items:center` legt die fehlenden 1,6px je zur Haelfte darueber und
   darunter. **Polster laege im Fluss und machte jede Zeile 18 bis 26px
   hoeher** — genau der sichtbare Zusatzabstand, den der Auftrag ausschliesst.
   ⚠ **Die exakte Null ist bewusst nicht gebaut.** `margin-block:-0,8px` truege
   den Abstand auf null zurueck und liesse die zwei Tippflaechen um 1,6px
   ueberlappen; dort traefe ein Tippen die falsche Zeile. Derselbe Entscheid
   wie im Fuss — und er ist hier schon einmal gefallen, an der 44er-Fassung.

   ⚠ **`.person-tel > .tel` und nicht `.person-tel > a`.** Die Warnung vom
   19.08.2026 gilt unveraendert: `p > .tel{padding-block:13px}` im Medienblock
   der Beruehrflaechen wiegt (0,1,1) und kaeme spaeter. (0,2,0) schlaegt sie.

   **d) Ohne Zeichen keine Spur.** Die Vakanzkarte auf `/vorstand/` fuehrt
   `a.person-mail` mit blossem Text und ohne `.ic`; in einer 20px-Spur stuende
   dieser Text in der Zeichenspalte. Darum haengt die Spur an `:has(> .ic)`
   und nicht am Verweis selbst. */
.person-tel{font-size:var(--tx-klein);color:var(--tx-leise)}
.person-mail{font-size:var(--tx-klein);font-weight:500;color:var(--tx-leise)}
.person-tel > .tel,a.person-mail,.person-mail > a{
  display:grid;width:fit-content;align-items:center;min-height:24px}
.person-tel > .tel:has(> .ic),a.person-mail:has(> .ic),.person-mail > a:has(> .ic){
  grid-template-columns:20px minmax(0,1fr);column-gap:7px}
.person-tel .ic,.person-mail .ic{width:15px;height:15px;justify-self:center;margin:0;color:var(--tx-hervor)}
/* ⚠ **Der Abstand steht am Paar und nicht an der einzelnen Zeile.**
   `.person-tel` kommt in vier Ausgabestellen zuerst und in
   `template-parts/stellen.php` zuletzt. Eine Regel, die «die Mailzeile ist die
   zweite» annimmt, stuende dort falsch herum — der Geschwisterwaehler fragt
   die Stellung und nicht den Namen.

   > ~~`.person-tel{…margin-top:12px}`~~ und ~~`.person-mail{…margin-top:5px}`~~
   > — 25.09.2026. Die 5px waren als Abstand ZWISCHEN den Zeilen gemeint und
   > galten zugleich als Abstand zum Namen, wo die Mailzeile oben steht. */
.person-tel,.person-mail{margin-top:12px}
.person-tel + .person-mail,.person-mail + .person-tel{margin-top:0}
@media(hover:hover){a.person:hover .person-mail{color:#fff}}
/* Schmale Fassung für Seitenspalten: Feld links, Name zuerst, Rolle darunter */
.person.schmal{display:flex;align-items:center;gap:13px;background:none;container-type:normal}
.person.schmal:hover{background:none}
.person.schmal::after{content:none}
/* **80 × 107 im Verhaeltnis 3:4 — die Groesse, in der man das Gesicht
   erkennt.** Ein erster Anlauf zwang das Portraet in das 56er-Quadrat des
   Initialenklotzes; der Kopf war angeschnitten und die Person eine
   Briefmarke. **Der Fehler war der Zuschnitt, nicht die Verkleinerung.**

   **Das Gesicht waechst mit der BREITE, nicht mit der Hoehe.** Das Bild
   liegt in 3:4 vor, und bei `cover` bestimmt die schmalere Seite den
   Massstab. Gemessen von 56 auf 80 sind das 43 Prozent mehr Gesicht — der
   Unterschied zwischen «ein Mann im FCH-Polo» und «Dieter Good».

   **Der Klotz waechst mit.** Nicht jede Person hat ein Portraet; stuende
   er weiter auf 56, waeren die sechs Kaesten je nach Bildbestand
   verschieden hoch. Eine Form, zwei Fuellungen.

   **Der Fokus sitzt hier auf 20 Prozent statt der 30 der grossen Kachel.**
   Dieselbe Datei, andere Flaeche: Was auf 128px richtig sitzt, liegt auf
   80px zu tief. */
.person.schmal .person-init,
.person.schmal .f{width:80px;height:107px;flex:none}
.person.schmal .person-init{font-size:26px}
.person.schmal .f::before{background-position:50% 20%}
.person.schmal .person-tx{padding:0}
.person.schmal .person-name{font-size:var(--tx);margin-top:0}
/* **Der Name ist kein Fliesstext des Kastens — 22.09.2026.**

   `.person-name{color:inherit}` ist Absicht: Der Name nimmt die Farbe
   seiner Umgebung, dunkel auf Papier, hell auf dunklem Grund. In einem
   `.info` kam er trotzdem grau heraus.

   Der Grund ist ein Nachbar, nicht ein Vorfahr: `.info p{color:
   var(--tx-leise)}` wiegt (0,1,1) und schlaegt `.person-name` (0,1,0) —
   der Name IST ein `<p>`. Sein Vater `.person-tx` steht auf
   `rgb(11,11,10)`; ohne die Regel haette `inherit` genau das geliefert.

   > **Eine Regel fuer «alle Absaetze im Kasten» meint die Saetze, nicht
   > die Eigennamen darin.** `color:inherit` sieht aus wie eine Zusage und
   > ist keine, solange eine spezifischere Regel dazwischensteht.

   ⚠ Gemessen auf dev am 22.09.2026: **alle 4 von 4** `.person.schmal`-
   Namen standen auf `rgb(90,90,85)` — /fanion500/, /kontakt/ und die
   Anlassseite eingeschlossen. Die 54 dunklen Namen auf /vorstand/ sind
   Rasterkarten ohne `.schmal` und stehen nicht in einem `.info`; **der
   Unterschied hing also nie an der Seite, sondern an der Bauform.**

   Die Rollenzeile bleibt leise: `.person.schmal .person-rolle` setzt
   `--tx-leise` ausdruecklich, eine Zeile hoeher und mit Absicht. */
.info .person-name{color:inherit}
.person.schmal .person-rolle{font-size:var(--tx-klein);letter-spacing:0;text-transform:none;font-weight:400;color:var(--tx-leise);margin-top:3px}
/* Unbesetzte Ämter: sichtbar, aber ruhiger als besetzte */
.person.vakant .person-init{background:none;border:2px dashed var(--linie);color:var(--tx-leise)}

/* Trainingszeiten */

/* ── 110 Spiele und Tabellen ──────────────────────────────── */

table{width:100%;border-collapse:collapse;font-size:var(--tx-klein)}
/* Gelb eröffnet den Block, grau trennt die Zeilen — wie bei Zahlenreihe und Ehrentafel */
/* ⚠⚠ **`thead` ist am 12.09.2026 dazugekommen — die Regel hiess vorher
   blank `th`.**

   Sie beschreibt einen SPALTENKOPF: Versalien, Sperrung, gelbe Unterkante.
   Als blankes `th` traf sie aber auch jeden ZEILENKOPF im Rumpf — die
   Wettbewerbszeile, die Total-Zeile, die Teamzeile. Aufgefallen ist es, als
   eine Zelle aus gutem Grund von `td` zu `th` wurde: Sie wurde damit
   schlagartig fett und vollfarbig, **und die Regeln, die sie vorher
   gestaltet hatten, hiessen `td` und griffen nicht mehr.**

   > **Ein Element zu wechseln ist keine Formsache. `td` und `th` sehen im
   > Quelltext gleich aus und werden von verschiedenen Regeln getroffen —
   > wer tauscht, muss beide Seiten pruefen.**

   ⚠ **Gemessen ist die Verengung heute wirkungslos:** 0 von 94 Kopfzellen
   auf vier dev-Seiten aendern sich, und die vier Zeilenkoepfe im Rumpf sind
   dabei (`th.tw` dreimal, «Total» einmal) — sie waren schon vollstaendig
   ueberschrieben. Sie verhindert nicht den letzten Fall, sondern den
   naechsten. */
/* ⚠ **Das Innenmass bleibt breit — es ist Tabellenbau, kein Kopfaussehen.**
   Erster Versuch war, die ganze Regel zu verengen. Gemessen: 12 Zeilenkoepfe
   im Rumpf verloren dabei `padding:12px 8px 12px 0` und standen auf 0. */
th{padding:12px 8px;text-align:right}
thead th{font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);letter-spacing:.15em;text-transform:uppercase;color:var(--tx-leise);border-bottom:2px solid var(--gelb)}
thead th:nth-child(-n+2){text-align:left}
td{padding:13px 8px;border-bottom:1px solid var(--linie);text-align:right;font-variant-numeric:tabular-nums}
td:nth-child(-n+2){text-align:left}
tr.wir td{background:var(--gelb);color:var(--dun);font-weight:700}
.rang{font-family:var(--d);font-weight:700;color:var(--tx-leise)}
/* Textspalte hinter Zahlenspalten braucht Luft, sonst klebt der Name am Resultat */
/* Die letzte Spalte trägt den Trainernamen, keine Zahl: Text also links, und
   mehr Luft davor, damit die Zahlenspalte daneben nicht klebt. Die Grundregel
   kennt nur die ersten zwei Spalten als Text.
   :last-child statt nth-child(8) — «letzte» überlebt das Einfügen einer
   Spalte davor. BEDINGUNG: Der Trainer muss die letzte Spalte bleiben. Wer
   eine Spalte dahinter einfügt, muss diese Regel mitziehen; geschieht das
   nicht, richtet sie still die falsche Spalte aus, und kein Prüfskript
   sieht es. */
.t-bilanz th:last-child,.t-bilanz td:last-child{padding-left:44px;text-align:left}
/* Feste Spaltenbreiten: Zahlen brauchen wenig, der Trainer bekommt den Rest.
   min-width hält die Tabelle lesbar und schiebt sie auf dem Handy in den Rollbalken. */
.t-bilanz{table-layout:fixed;min-width:700px}
.t-bilanz th:nth-child(1),.t-bilanz td:nth-child(1){width:11%}
.t-bilanz th:nth-child(2),.t-bilanz td:nth-child(2){width:13%}
.t-bilanz th:nth-child(n+3):nth-child(-n+6),.t-bilanz td:nth-child(n+3):nth-child(-n+6){width:8%}
.t-bilanz th:nth-child(7),.t-bilanz td:nth-child(7){width:13%}

/* ── 120 Partner und Shop ─────────────────────────────────── */

.spst{margin-bottom:30px}
.spt{font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);letter-spacing:.22em;text-transform:uppercase;color:var(--tx-leise);padding-bottom:10px;border-bottom:1px solid var(--linie);margin-bottom:15px}
.spg{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
/* **Der Rand haengt am Grund, nicht am Ort.** Die Sponsorenkachel hat auf der
   Startseite keinen Rand und auf der Partnerseite einen. Das sieht wie eine
   Uneinheitlichkeit aus und ist keine: Hier steht die weisse Kachel auf
   dunklem Grund und setzt sich von selbst ab. Auf Papier steht Weiss auf
   Weiss.

   **Gegengeprueft am 26.08.2026 im Bild:** Nimmt man der Papierfassung den
   Rand, loest sich die ganze Logowand auf - zehn Karten verschwinden, es
   bleibt schwebender grauer Text ohne Kante. Wer die zwei Fassungen
   vereinheitlichen will, muss also zuerst den Grund vereinheitlichen. */
/* **Ein Sponsorenlogo füllt nicht, es passt hinein.** Darum `contain` und
   nicht `cover` wie bei jeder anderen Bildfläche — ein beschnittenes Logo
   ist ein beschädigtes Logo, und die Marke gehört nicht uns.

   Die Höhendeckel sind abgeleitet und nicht gewählt: `min-height` minus die
   zweimal 18px Polster. 100−36=64 hier, 92−36=56 im Laufband, 64−36=28 im
   Partnerband. **Wer eine der drei `min-height` ändert, ändert den Deckel
   mit** — sie stehen je an derselben Stelle.

   Ohne den Deckel legte das Laufband ein 164×100-Logo plus Polster ab und
   wurde 136px hoch statt 92; gemessen auf allen drei Breiten. */
.spl img{width:auto;height:auto;max-width:100%;max-height:64px;object-fit:contain}
/* **Die Wandkacheln füllt das Logo ganz aus — 04.09.2026.** Die Zeile
   darüber deckelt auf 64px; das ist die Höhe für das Laufband, wo die
   Kachel 92px misst. In der Wand ist die Kachel 3:1 und über 100px hoch
   (gemessen bei 1440: 81 · 100 · 101 · 81), und ein Logo, das darin 64px
   hoch steht, sieht aus wie ein Versehen.

   `contain` bleibt und wird nicht zu `cover`: Ein Sponsorenlogo darf nicht
   beschnitten werden. `contain` auf voller Fläche heisst darum nicht
   «randlos», sondern «so gross, wie es ohne Schnitt geht».

   **Die Höhe kommt vom `aspect-ratio:3/1` zwei Abschnitte weiter unten**,
   nicht von hier — `height:100%` an einem Bild in einem Behälter ohne Höhe
   wäre wirkungslos. Wer dort das Seitenverhältnis nimmt, nimmt dieser
   Zeile den Boden.

   `max-width`/`max-height` müssen zurückgesetzt werden: Die Zeile darüber
   trifft dasselbe Bild, und `100%` gegen `64px` verliert. */
.logowand .spl img,.tenuewand .spl img,.hs-paar .spl img,.ts-kachel .spl img,
.logolauf .spl img{
  width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
/* **Die Kachel hat eine Höhe, nicht zwei — 04.09.2026.** Hier stand
   `min-height:100px` neben einem `.f`, das seine Höhe aus `aspect-ratio:3/1`
   bezieht. Zwei Regeln beschrieben dieselbe Höhe, und je nach Breite gewann
   eine andere: Die Zahl gewann überall dort, wo die Kachel schmaler als
   300px war, und dann stand der Rahmen oben in der Kachel und darunter
   blieb Weiss — 19px auf der Teamseite durchgehend, 44px auf der Logowand
   bei 390.

   **Die Mindesthöhe war nie für die Wände da.** Sie kam mit dem ersten
   CSS-Übertrag aus dem Prototyp und gehörte der Laufbandkachel: Die trug
   ihr `<img>` ohne `.f`, hatte also kein Verhältnis, aus dem eine Höhe
   folgen könnte.

   ⚠⚠ **Der letzte Satz stand bis zum 22.09.2026 hier und lautete:** «Dort
   steht sie weiterhin — `.logolauf .spl` mit 92px und `.partnerband
   .logolauf .spl` mit 64px — und dort ist sie jetzt nicht mehr ein
   Überschreiben des Grundwerts, sondern die einzige Quelle.»

   **Beide sind weg.** Die Laufbandkachel trägt seit dem 22.09.2026 selbst
   `aspect-ratio:3/1`; damit gibt es im ganzen Haus **keine Mindesthöhe an
   einer Logokachel mehr**, und die Höhe folgt überall aus dem Verhältnis.

   Gemessen an 390 · 760 · 1000 · 1440 · 2560, an allen vier Wänden und an
   den drei Inhalten (Bild, `data-l`, `.f-frei`): Jeder trägt sein eigenes
   `aspect-ratio:3/1`. Keine Kachel wird kleiner als ihr Rahmen. */
.spl{
  background:#fff;display:grid;place-content:center;padding:18px;text-align:center;
  font-family:var(--d);font-variation-settings:'wdth' 104;font-weight:700;font-size:var(--tx-klein);line-height:1.35;
  color:#2A2A26;
}
/* **Kein Zeigerzustand auf Logoflaechen, seit dem 28.08.2026.** Vorher
   wurde die Kachel beim Darueberfahren ganz gelb, in der Wand wechselte
   der Rand auf Gelb. **Ein Sponsorenlogo ist eine Marke mit eigenen
   Farben; eine Flaeche, die darunter die Farbe wechselt, faerbt fremdes
   Gut ein.** Auf der Tenuekachel sah es zudem aus wie ein Fehler: ein
   gelber Balken oben und unten um ein weisses Feld.

   **Der Preis ist genannt und nicht wegdiskutiert:** Diese Kacheln sind
   Verweise, und ein Verweis ohne Zeigerzustand ist einer, dem man nicht
   ansieht, dass er einer ist. Wer das zurueckdreht, nimmt einen ruhigen
   Zustand — etwa den Rand auf `--papier-text` statt auf Gelb — und nicht
   wieder die Flaeche. */
/* ── Ohne Träger, auf beiden Seiten — 04.09.2026 ───────────────────

   **`.sph` steht unter «nirgends», nicht unter «greift nicht».** Der
   Unterschied ist der Befund: Die 14 unter «greift nicht» haben einen Träger
   im Prototyp und keinen im Theme — das wäre ein Übertragungsfehler. Diese
   hier hat auf keiner der beiden Seiten je einen gehabt.

   Nachgesehen am 04.09.2026: kein `class="…sph…"` im Theme, keines in der
   Saat, keines im Prototyp. Die fünf Stellen, an denen dort «sph» vorkommt,
   liegen samt und sonders in Base64-Blöcken.

   Was sie sollte, sagt nur ihre Form: eine höhere, einspaltige Fassung von
   `.spl` — alle drei Angaben greifen an `.spl`, das selbst ein Gitter ist,
   und `grid-template-columns:1fr` nimmt `.spg` seine zwei Spalten. Der Name
   und die Nachbarn (`.spt` Titel, `.spg` Gitter, `.spl` Logokasten) legen
   das Hauptsponsorenfeld nahe. **Das ist aus der Form geschlossen und nicht
   gewusst** — wer es braucht, entscheidet es neu.

   Sie bleibt stehen: Sie kostet nichts, und eine Regel zu streichen, die der
   Prototyp führt, macht aus einer erklärten Lücke eine stille Abweichung.
   **Sie steht hier als Befund und nicht als Versäumnis**, damit der nächste
   Abgleich sie nicht wieder meldet. */
.sph{min-height:176px;font-size:20px;grid-template-columns:1fr}
@media(min-width:700px){.spg.t3{grid-template-columns:repeat(3,1fr)}.spg.t4{grid-template-columns:repeat(4,1fr)}}
.supp{display:flex;flex-wrap:wrap;gap:7px 22px;font-size:var(--tx-klein);color:var(--tx-leise)}

/* ── Sponsorentafel auf «Partner» ──────────────────────────────────
   Gruppiert nach Werbeform, wie das Sponsoringkonzept selbst. Die vier Stufen
   der alten Seite (Hauptsponsor, Premium Partner, Partner, Supporter) hat es
   nie gegeben — sie standen in der Umsetzungsdoku ausdruecklich als erfundener
   Entwurf.

   Drei Umbrueche, alle mit dem Partner, den die Website schon fuehrt:
   429/430 (dort steht die Blockdarstellung der Tabellen), 700 (achtmal im
   Stylesheet) und 1100 (zweimal). Es sind Paare, keine neuen Zahlen.

   Drei Spalten ab 430 statt zwei wurden gemessen und verworfen: die Kachel
   faellt von 190 auf 122px, bei 3:1 also von 190x63 auf 122x41 — auf einem
   Telefon die Groesse eines Favicons, ein Schriftzug darin ist nicht mehr zu
   lesen. Gespart haette es 228px von 4183, ein Fuenftel Bildschirm. Dasselbe
   Argument wie gegen ein Akkordeon hier, nur eine Stufe leiser: eine
   Sponsorentafel gibt es, damit man sie sieht. */
.logowand{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:560px){.logowand{grid-template-columns:repeat(3,1fr)}}
/* ⚠ **Vier statt fuenf ab 960 — 12.09.2026.** Der Kommentar oben
   argumentiert gegen ZU KLEINE Kacheln auf dem Telefon; breit galt dasselbe
   Argument, nur hatte es niemand angewandt. Gemessen bei 1280px im Rahmen
   von 1208px und 14px Fuge:

   ```
   5 Spalten   230 x 77     4 Spalten   291 x 97
   ```

   **Ein Schriftzug in 77px Hoehe ist knapp; in 97px ist er es nicht.** Eine
   Sponsorentafel gibt es, damit man sie sieht — derselbe Satz wie oben. */
@media(min-width:960px){.logowand{grid-template-columns:repeat(4,1fr)}}

.hauptwand{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:700px){.hauptwand{grid-template-columns:repeat(2,1fr);gap:34px}}

/* Die Wippe: nebeneinander, sobald die Kachel breit genug ist — untereinander
   im Band dazwischen, wo die Hauptwand schon zweispaltig ist und jede Haelfte
   nur die halbe Breite hat. */
.hs-paar{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:430px){.hs-paar{grid-template-columns:repeat(2,1fr)}}
@media(min-width:700px){.hs-paar{grid-template-columns:1fr}}
@media(min-width:1100px){.hs-paar{grid-template-columns:repeat(2,1fr)}}

/* ── Rangliste ─────────────────────────────────────────────────────
   Zehn Spalten wie beim Verband. `tabular-nums` ueberall, damit die Zahlen in
   den Spalten fluchten.
   **Die eigene Zeile traegt `--nav-beruehrt` und nicht `--gelb`.** Bis zum
   23.08.2026 war sie voll gelb mit dunkler Schrift — ein Balken, der lauter
   war als die Tabellenkoepfe. `--nav-beruehrt` ist die Farbe, die seit dem
   Hover-Durchgang ueberall «diese Zeile geht dich an» heisst: Menue,
   Teamzeilen, Jahrzeilen, Karten.
   **Auf der Rangliste ist es kein Zeigerzustand, sondern ein Dauerzustand.**
   Dieselbe Farbe heisst dort «du beruehrst gerade», hier «das bist du».
   Beides ist «diese Zeile geht dich an», und das traegt. */
.rangtab td,.rangtab th{font-variant-numeric:tabular-nums}
.rangtab .rang{width:34px;text-align:right;color:var(--papier-halb)}
.rangtab .fair{color:var(--papier-halb)}
.rangtab .tore{white-space:nowrap}
.rangtab .tore i{font-style:normal;color:var(--papier-halb);padding:0 3px}
.rangtab .pkt{font-weight:800}
.rangtab tr.wir td{background:var(--nav-beruehrt);font-weight:600}
.rangtab tr.wir td:nth-child(2){font-weight:800}



/* ── Die weggeschnittenen Spalten unter 560 zurueckholen ─────────────────
   Vier Spalten — S, U, N, Fair — verschwinden dort fuer das Auge. **Ein Tipp
   auf den Teamnamen holt sie zurueck**, als Miniraster unter der Zeile:
   Kuerzel oben, Zahl darunter. **Es sieht aus wie der weggeschnittene Teil der
   Tabelle, weil es einer ist** — wer die Spalten von der Desktopfassung kennt,
   findet sie wieder.

   **Die eigene Mannschaft ist von Anfang an offen**, die anderen zu.

   **Der Pfeil am Namen ist noetig, nicht schmueckend.** Eine Zeile, die sich
   oeffnen laesst und es nicht zeigt, wird nicht angetippt — und auf dem Handy
   gibt es keinen Zeiger, der es verraten koennte.

   Ueber 560 stehen alle zehn Spalten; dort ist nichts zurueckzuholen und die
   Aufklappzeile faellt weg. */
.rang-auf{background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-align:left}
/* ⚠⚠ **Das Wappen darf nicht mitschrumpfen -- 23.09.2026.**
   `.rang-auf` ist ein Flexkasten, und ein Flexkind mit fester Breite gibt
   sie her, sobald die Zeile eng wird. Solange der Name `nowrap` trug, wurde
   die Zelle so breit wie noetig und nichts schrumpfte. **Mit dem Umbruch
   schrumpfte das Wappen:** gemessen bei 390px 24.8 und 18.7 statt 28px in
   den zwei Zeilen mit langem Namen -- ein gestauchtes Wappen, und die Namen
   fluchteten nicht mehr, was genau Didis Bedingung an diesem Kasten ist.

   > **Eine feste Breite ist im Flexkasten ein Wunsch, keine Zusage.**

   `flex:none` macht sie zur Zusage. Gilt fuer beide Randstuecke und bei
   jeder Breite: Schmal ist es noetig, breit kostet es nichts (1440 und 560
   messen vorher wie nachher dieselben Spaltenbreiten). Schrumpfen soll der
   Name, und der kann es -- er hat `min-width:0`. */
.rang-auf .wappen-rang,.rang-auf .rang-pf{flex:none}
/* **Das Wappen steht im Knopf, nicht in einer eigenen Spalte** — die Namen
   fluchten sonst nicht mehr (Didis Bedingung vom 23.09.2026). `.rang-auf`
   ist schon `inline-flex` mit `gap:6px`; das Wappen ist damit das erste
   Element und der Name das zweite, ohne eigene Regel.

   ⚠ **Hier stand bis zum 23.09.2026:**

   > ~~«`.rang-name` traegt nur die Kuerzung, damit ein langer Klubname den
   > Pfeil nicht wegdraengt.»~~

   **Die Kuerzung hat nie gekuerzt.** Gemessen am 23.09.2026 mit einem im
   Browser eingesetzten «Spielgemeinschaft Zuerisee-Herrliberg»: `scrollWidth`
   und `clientWidth` des Namens waren gleich gross -- die Ellipse fiel kein
   einziges Mal. `white-space:nowrap` macht die Mindestbreite der Team-Zelle
   so breit wie den ganzen Namen, und `table-layout:auto` geht nie unter die
   Summe der Mindestbreiten. **Nicht der Name schrumpfte, die Tabelle wuchs:**
   478px Tabelle in einem 354px-Behaelter bei 390px Fenster.

   Die Regel bleibt stehen, weil sie ab 560px trifft: Dort ist die Spalte
   breit genug, und ein einzeiliger Name haelt die Zeilen ruhig. Schmal loest
   sie die Regel im 559er-Block ab. */
.rang-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rang-pf{color:var(--papier-halb);font-size:11px;transition:transform .15s}
.rang-auf[aria-expanded="true"] .rang-pf{transform:rotate(180deg)}
.rang-mehr td{padding:0 0 10px}
/* ⚠ **Fuenf Spalten seit dem 23.09.2026 abends, vorher vier.** Der
   Aufklapper fuehrte S, U, N und Fair; seit Diff dazugekommen ist, fiel
   der fuenfte Eintrag zwangslaeufig auf eine zweite Zeile — `repeat(4,…)`
   laesst ihm keinen Platz. Didi: alle fuenf auf einer Linie, gleiche
   Spaltenbreite, gleicher Abstand; `1fr` je Spalte leistet beides.

   ⚠ Der Deckel geht von 240 auf 300px mit: Vier Spalten zu 60px waren
   240, fuenf zu 60 sind 300. **Die Spaltenbreite bleibt damit dieselbe**
   statt von 60 auf 48 zu schrumpfen — der Deckel ist eine Folge der
   Spaltenzahl und keine eigene Entscheidung. Schmal greift er ohnehin
   nicht, dort ist die Zelle enger als 300. */
.rang-raster{display:grid;grid-template-columns:repeat(5,1fr);max-width:300px;
  border-top:1px solid var(--papier-linie);padding-top:7px}
.rang-raster div{text-align:center}
.rang-raster span{display:block;font-family:var(--b);font-weight:700;
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--papier-halb);margin-bottom:2px}
/* Nicht fett: Die Werte sind Nebenangaben, die man nachschlaegt — nicht
   Punkte oder Rang, die man ueberfliegt. Fett stuenden sie staerker da als
   die Zahlen der Tabelle darueber. */
.rang-raster b{font-size:14px;font-weight:400;font-variant-numeric:tabular-nums}
.rang-raster b.fair{font-weight:400;color:var(--papier-halb)}
@media(min-width:560px){
  .rang-mehr{display:none}
  .rang-auf{cursor:default}
  .rang-pf{display:none}
}

/* Unter 560px zeigt die Rangliste sechs von zehn Spalten: Rang, Team, Sp,
   Tore, Diff, Pkt. Wer S, U und N sucht, sucht die Feinheit; wer die Tabelle
   auf dem Telefon aufruft, sucht den Rang und die Punkte.

   Gemessen bei 390px: alle zehn Spalten laufen um 71px ueber — eine Tabelle,
   die um 70px rollt, sieht aus wie ein Fehler. Sechs Spalten passen genau
   (354 in 354).

   **Nicht `display:none`, sondern derselbe Kniff, den die Website schon fuer
   den Tabellenkopf der Blockdarstellung benutzt.** `display:none` naehme die
   Zellen auch aus dem Vorlesebaum — wer die Tabelle hoert, bekaeme sechs
   Werte statt zehn. Absolut gesetzt und weggeschnitten bleiben sie darin und
   verschwinden nur fuer das Auge. Gemessen ist der Unterschied bei 390px
   null; bei 320px laeuft die Tabelle damit um 41 statt um 5px ueber, und das
   faengt der Roller auf.

   **Die Blockdarstellung waere der dritte Weg und traegt hier nicht.** Fuer
   `.beitraege` ist sie richtig — vier Zeilen mit drei Werten. Eine Rangliste
   hat zwoelf Zeilen mit zehn Werten: gemessen 1940 statt 523px, und Raenge
   vergleichen, worum es bei einer Tabelle ueberhaupt geht, wird unmoeglich.

   ── Zweiter Beleg, 27.08.2026 ─────────────────────────────────────

   **«Wer sie in einem Jahr nachbaut, soll das hier lesen» hat funktioniert.**
   Am 26.08. lautete der Auftrag, das Wegschneiden gegen einen Roller zu
   tauschen. Gemessen an der Teamseite bei 390px, vier Fassungen:

     heute (weggeschnitten)          Zeilenhoehen 50 · 49 · 49 · 49
     gerollt, Rang klebt             Zeilenhoehen 95 · 72 · 94 · 94
     gerollt, Rang+Team kleben       Zeilenhoehen 95 · 72 · 94 · 94

   **Rollen macht die Zeilen wieder doppelt so hoch**, weil die Teamspalte
   dann von 87 auf 77px faellt und «FC Kuesnacht a» wieder dreizeilig wird.
   Was der Auftrag heilen wollte, brachte er damit zurueck. Die vier
   weggeschnittenen Spalten bleiben.

   ── Falls es je gebaut wird: es kleben Rang UND Team ───────────────

   Die Frage ist beantwortet, damit sie niemand zweimal stellen muss.
   Gemessen bei 390px, Roller 354px breit, alle zehn Spalten:

     nur Rang klebt      24px fest ·  330px Fenster · nach dem Rollen liegt
                         Team bei -38..39px, also halb aus dem Bild
     Rang + Team kleben  107px fest · 247px Fenster · alle zehn Spalten
                         erreichbar, der Name steht

   **Der Rang allein sagt nichts.** Wer rollt, will wissen, welche Mannschaft
   er liest. Die 77px Mehrkosten kaufen 5px mehr Rollweg (62 statt 67) — das
   ist nichts gegen einen Namen, der beim Lesen wegrutscht.

   **Zwei Nebenbefunde, die dabei anfielen und die man sonst zweimal findet:**

   1. **`position:sticky` ohne `left` ist kein Kleben.** Ohne Versatz bleibt
      die Zelle im Fluss und rollt mit; gemessen lag die Teamspalte danach
      genau dort, wo sie ohne die Regel auch gelegen haette. Der Versatz muss
      die Breite der ersten Spalte sein — die braucht dafuer eine feste.
   2. **Ein harter Hintergrund an einer klebenden Zelle zerschneidet die
      gelbe Hervorhebung der eigenen Mannschaft.** `background:var(--papier)`
      schlaegt `tr.wir td{background:var(--nav-beruehrt)}`. Das trifft die
      heutige erste Spalte schon genauso; es faellt nur nicht auf, solange
      nichts rollt.

   ── Und der unterbrochene gelbe Strich ist keiner mehr ─────────────

   Er lief unter «# TEAM SP», hoerte auf und begann wieder bei «TORE DIFF
   PKT» — 56px Luecke bei 390px. **Ursache war nicht das Wegschneiden
   allein.** Der Strich ist der Unterrand JEDER Kopfzelle, nicht eine Linie
   unter dem ganzen Kopf; bei `border-collapse:collapse` stossen sie
   aneinander. Er brach erst, als zum Wegschneiden die zusaetzliche Breite
   kam, die `.tore{display:grid}` in der Torzelle verlangte. Mit der
   Umbenennung nach `.wegweiser` ist er geschlossen — gemessen 0px Luecke bei
   390, 559, 560 und 1440. Ueber 560px war er nie unterbrochen: dort steht
   keine Spalte ausserhalb des Flusses. */
@media(max-width:559px){
  /* ⚠⚠ **Das Seitenpolster von 8 auf 4px — 12.09.2026.**
     Die vier Spalten darunter waren weggeschnitten, und trotzdem war die
     Tabelle bei 360px **350px breit in einem 324px-Behaelter**. Sie rollte
     zwar, aber **die Punktespalte stand ausserhalb** — sichtbar war nur das
     «P» von «Pkt». Auf einer Rangliste ist das die eine Zahl, deretwegen
     jemand hinsieht.

     > **Eine Tabelle, die rollen MUSS, um ihre wichtigste Spalte zu zeigen,
     > zeigt sie nicht.**

     ⚠ Vier Wege gemessen, bei 360px im 324px-Behaelter:

     ```
     heute                  350px  rollt  # 33 · Team 138 · Sp 34 · Tore 55 · Diff 47 · Pkt 43
     Polster 4px            324px  passt  # 25 · Team 152 · Sp 26 · Tore 47 · Diff 39 · Pkt 35
     Polster 3px            324px  passt  enger, aber kein Gewinn mehr
     Polster 4px + Diff weg 324px  passt  Team 191 — und eine Spalte aermer
     ```

     **Der zweite Weg gewinnt, weil er keine Auskunft kostet.** Diff
     wegzuschneiden waere bequemer gewesen und haette eine Spalte
     verschluckt, die sonst niemand vermisst haette — bis sie fehlt.

     ⚠ Gegengeprueft ueber **alle 21 Ranglisten auf dev**: vorher rollten
     mehrere mit bis zu +32px Ueberstand, nachher **keine einzige**. */
  .rangtab th,.rangtab td{padding-left:4px;padding-right:4px}
  .rangtab .rang{width:24px}

  /* ⚠⚠ **Diff ist am 23.09.2026 abends dazugekommen — Spalte 9.**

     > ~~«Diff wegzuschneiden waere bequemer gewesen und haette eine Spalte
     > verschluckt, die sonst niemand vermisst haette — bis sie fehlt.»~~
     > — Stand vom selben Tag, nachmittags.

     **Der Satz stimmt weiter, und genau darum wandert Diff in den
     Aufklapper statt bloss zu verschwinden.** Weggeschnitten wird sie hier
     nur aus der TABELLE; gezeigt wird sie eine Zeile tiefer, nach Fair.
     Die Auskunft geht nicht verloren, sie wechselt den Ort — dasselbe, was
     S, U, N und Fair seit dem Vormittag tun.

     ⚠ Die Zahlen sind Spaltenstellungen und keine Namen: 4 S, 5 U, 6 N,
     7 Fair, 9 Diff. **Wer eine Spalte einfuegt, verschiebt sie alle** —
     der Kopf der Tabelle steht zwanzig Zeilen weiter oben in
     `inc/rangtabelle.php` und nennt sie in derselben Folge. */
  .rangtab th:nth-child(4),.rangtab td:nth-child(4),
  .rangtab th:nth-child(5),.rangtab td:nth-child(5),
  .rangtab th:nth-child(6),.rangtab td:nth-child(6),
  .rangtab th:nth-child(7),.rangtab td:nth-child(7),
  .rangtab th:nth-child(9),.rangtab td:nth-child(9){
    position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}

  /* ⚠⚠ **Der Name bricht um, statt die Tabelle zu verbreitern --
     23.09.2026.** Didi: *«Die Tabelle laeuft heute quer -- sie muss auf die
     Breite passen»* und *«Der volle Vereinsname bleibt; passt er nicht,
     bricht er auf zwei Zeilen um -- nicht kuerzen, nicht abschneiden.»*

     **Die Ursache war weder der Roller noch eine Spaltenbreite, sondern
     `white-space:nowrap` am Namen.** Es setzt die Mindestbreite der
     Team-Zelle auf den ganzen Namen, `table-layout:auto` nimmt diese
     Mindestbreite als Untergrenze -- und `text-overflow:ellipsis` kommt nie
     zum Zug, weil die Zelle nie enger wird. Gemessen mit «FC
     Bruettisellen-Dietlikon 1» und «Spielgemeinschaft Zuerisee-Herrliberg»:
     Tabelle 478px, Behaelter 354 (390), 324 (360), 284 (320) -- und der Name
     dabei **nicht** gekuerzt. Nach der Umstellung 354 / 324 / 284 in 354 /
     324 / 284.

     `hyphens:auto` ist kein Schmuck, sondern die zweite Haelfte derselben
     Ursache: «Spielgemeinschaft» ist ein unteilbares Wort und waere sonst
     wieder eine Mindestbreite, die nicht passt. Die Seite ist `lang="de-CH"`,
     danach trennt der Browser; `-webkit-hyphens` fuer das Telefon, auf dem
     die Tabelle gelesen wird.

     ⚠ **`min-height` ist der Teil, der die Zeilen gleich hoch haelt.**
     Gegengemessen am 23.09.2026, indem er einzeln auf 0 gesetzt wurde: ohne
     ihn steht die umbrechende Zeile bei 57.78px Nachbarn auf 58.08px --
     **gebunden wird die Hoehe, nicht das Einzelstueck.**

     ⚠ **`2.6em` ist kein runder Wert, sondern zweimal `line-height:1.3`.**
     Die zwei Zahlen sind dieselbe Entscheidung -- 1.3 mal 2 ist 2.6 --, und
     nur darum deckt die Mindesthoehe genau zwei Zeilen: bei 11px 28.6px,
     bei 14px 36.4px. Nachgemessen am 23.09.2026 nach der Rueckkehr auf
     14px: ein zweizeiliger Name misst 36.39px, keinen Pixel mehr. **Wer den
     Zeilenabstand anfasst, muss diese Zahl mitziehen**, sonst deckt sie
     eine Zeile zu viel oder zu wenig.

     ⚠ **Hier stand bis zum 23.09.2026 (abends), fuer 11px gemessen:**

     > ~~«Zwei Zeilen zu 11px messen 28.6px und bleiben damit fast auf dem,
     > was das 28px-Wappen der Zeile ohnehin vorgibt: **eine umbrechende
     > Zeile kostet die Tabelle nichts.** Gemessen bei 390 und 360 mit zwei
     > umbrechenden Namen: jede Zeile 58.08px, nur die erste 58.58px.»~~

     **Mit 14px kostet sie etwas, und das ist bestellt.** 36.4px sind mehr
     als das 28px-Wappen, also gibt von nun an der Namenskasten die
     Zeilenhoehe vor: gemessen bei 390, 360 und 320 misst jede Zeile
     63.39px statt 58.08px, die erste 63.89px -- die halbe Kopflinie aus
     `border-collapse`, die vorher genauso dastand. Didis Bedingung lautet
     *«Alle Zeilen bleiben gleich hoch»* und nicht «gleich hoch wie vorher».

     ⚠ **Hier stand bis zum 23.09.2026 (abends):**

     > ~~«11px statt 14px ist `--tx-etikett` statt `--tx-klein`, **eine
     > Stufe der Hausskala und keine erfundene Zwischengroesse**.»~~

     **Es ist wieder 14px, und derselbe Satz traegt die Rueckkehr.** Didi am
     23.09.2026: *«Wieder auf 14 px zurueck -- die Stufe, die sie vorher
     hatten.»* `--tx-klein` ist die Nachbarstufe von `--tx-etikett`; **darum
     steht hier die Variable und nicht die Zahl 14px** -- der Vermerk bei
     den drei Variablen ganz oben sagt, warum es dazwischen nichts gibt.

     ⚠⚠ **Unter 329px reicht es fuer die Namen des BESTANDS nicht mehr auf
     zwei Zeilen -- 23.09.2026, mit 14px.** Ausgemessen Pixel fuer Pixel von
     318 bis 560: **ab 329px** brauchen alle sechs Namen hoechstens zwei
     Zeilen, und jede Zeile misst 63.39px (die erste 63.89px). Bei 328px
     braucht «FC Herrliberg 1» drei Zeilen (81.56px), bei 322px «FC
     Glattbrugg 1» vier (99.75px) -- **dort sind die Zeilen nicht mehr
     gleich hoch.**

     > **«Darf umbrechen» ist eine Erlaubnis, «alle gleich hoch» eine
     > Bedingung.** Ab 329px gelten beide zugleich, darunter nicht. Was bei
     > 320px vorgeht, ist **nicht entschieden** und gehoert Didi.

     ⚠ **Hier stand bis zum 23.09.2026 (abends), fuer 11px gemessen:**

     > ~~«Bei 320px stehen dem Namen 46px zu. Zwei Zeilen zu 46px sind
     > 24 Zeichen, und der laengste Name hat 36. **Die Namen aus dem Bestand
     > passen auf zwei** -- bei 320 mit kurzen Namen messen alle Zeilen
     > 58.08px. «FC Bruettisellen-Dietlikon 1» braucht dort vier Zeilen
     > (84.19px), «Spielgemeinschaft Zuerisee-Herrliberg» sechs
     > (112.78px).»~~

     Mit 14px braucht der Namenskasten **58.72px** fuer zwei Zeilen -- so
     viel steht ihm erst ab 329px Fenster zu; bei 320px sind es 49.72px.
     Das ist keine Regel, die fehlt, sondern Platz, den es nicht gibt.

     **Der Querlauf der Tabelle bleibt in jedem Fall weg:** 354 in 354
     (390), 324 in 324 (360), 284 in 284 (320), und kein Name gekuerzt. Ein
     im Browser eingesetztes «FC Bruettisellen-Dietlikon 1» braucht bei 390
     zwei Zeilen und laesst die Zeile auf 63.89px, bei 360 drei (82.06px),
     bei 320 fuenf (118.44px).

     Mehr gaebe es nur durch eine Spalte weniger, ein kleineres Wappen oder
     ein Polster unter 4px -- das dritte ist am 12.09.2026 gemessen worden
     und bringt nichts, die ersten zwei sind nicht bestellt. */
  /* ⚠⚠ **`display:flex;align-items:center` ist der Teil, ohne den die
     Gleichheit nur halb da waere — 23.09.2026, Didis Befund.**

     `min-height:2.6em` macht JEDEN Namenskasten zwei Zeilen hoch, damit
     alle Zeilen gleich hoch sind. Der Kasten sitzt damit mittig in der
     Zeile — **der einzeilige TEXT darin aber oben.** Gemessen bei 390:
     Kasten 28,6px hoch, Versatz zur Zeilenmitte -1,2px (also mittig), der
     Text darin 12px hoch mit Versatz **-8,5px**.

     > **Die Zeile war gleich hoch und sah trotzdem schief aus.** Wer den
     > Kasten misst, misst nicht, was man sieht — genau daran ist diese
     > Messung beim ersten Anlauf vorbeigegangen: das Rechteck des
     > Elements meldete «mittig», waehrend der Leser den Text oben sah.
     > Gemessen gehoert der Textbereich (`Range`), nicht das Element.

     Der Kasten bleibt zwei Zeilen hoch — er traegt die Gleichheit. Nur
     sein Inhalt ruecht in die Mitte. Bei einem zweizeiligen Namen fuellt
     er ihn ohnehin aus, dort aendert sich nichts.

     ⚠ **Die Zahlen oben sind bei 11px gemessen.** Mit 14px (23.09.2026)
     misst der Kasten 36.4px und der einzeilige Text 16px. **Die Regel wird
     dabei noetiger, nicht ueberfluessiger:** gegengemessen, indem
     `display:block` daruebergelegt wurde, stuende der Text 8.95px zu hoch
     statt 8.5px. Mit ihr liegt der Versatz des Textes zur Zeilenmitte bei
     390, 360 und 320 zwischen -0.10 und +0.16px, gegen Wappen und Pfeil
     bei -0.09px. */
  .rangtab .rang-name{white-space:normal;overflow:visible;text-overflow:clip;
    -webkit-hyphens:auto;hyphens:auto;font-size:var(--tx-klein);
    line-height:1.3;min-height:2.6em;
    display:flex;align-items:center}
  /* Die 6px zwischen Wappen, Name und Pfeil sind schmal 4px.

     ⚠ **Hier stand bis zum 23.09.2026 (abends), fuer 11px gemessen:**

     > ~~«**Zwei Pixel sind hier eine Zeile:** Bei 320px stehen dem Namen
     > nach Wappen, Pfeil und Polster noch rund 46px zu, und «FC Herrliberg
     > 1» brauchte damit drei Zeilen statt zwei (69.89px statt 58.08px).
     > Mit 4px passt er wieder auf zwei.»~~

     **Mit 14px passt er bei 320px auch mit 4px nicht mehr auf zwei.** Die
     Regel bleibt trotzdem stehen, und zwar weil **die zwei Pixel doppelt
     wirken:** es gibt zwei Abstaende, links zum Wappen und rechts zum
     Pfeil, der Name gewinnt also vier. Gemessen am 23.09.2026, den Abstand
     im Browser umgestellt und sonst nichts: mit 6px geht der Bestand ab
     333px auf zwei Zeilen auf, mit 4px ab 329px. Breit bleibt es bei 6px --
     dort ist der Platz da, und enger gesetzt saehe das Wappen angeklebt
     aus. */
  .rang-auf{gap:4px}
  /* **Der Satz geht mit seiner Spalte, und zwar auf demselben Weg.**
     «Die Zahl in Klammern sind Fairplay-Strafpunkte» erklaert die Spalte
     Fair, und Fair ist eine der vier, die hier weggeschnitten werden.
     Unterhalb 560px zeigte der Satz damit auf etwas, das nicht zu sehen ist
     — **und das ist schlimmer als kein Satz, weil er den Leser suchen
     laesst.**

     Nicht `display:none`, sondern derselbe Kniff wie bei den Spalten
     darueber, und aus demselben Grund: die vier Spalten bleiben im
     Vorlesebaum, also bleibt auch ihre Erklaerung darin. Mit `display:none`
     naehme man den Satz genau denen weg, die die Zahlen weiterhin
     bekommen. **Dieselbe Bedingung, dieselbe Breite, dieselbe Technik** —
     und darum steht die Regel hier und nicht anderswo. */
  /* **Getragen wird die Klasse von dem Element, das NUR diesen Satz
     enthaelt.** Das war bis zum 28.08.2026 auf der Teamseite der Absatz und
     auf der Spieleseite ein `<span>` darin, weil dort daneben noch
     «Platzhalterdaten» stand. Der Zusatz ist entfallen, also traegt an
     beiden Orten der Absatz die Klasse und das `<span>` ist aufgeloest.
     **Die Regel bleibt, wie sie ist** — sie fragt nach der Klasse und nicht
     nach dem Element, und der naechste Absatz mit einem Zusatz daneben
     bekommt sein `<span>` zurueck, ohne dass hier etwas zu aendern waere.

     Der erste Anlauf setzte die Klasse immer auf ein `<span>` und liess den
     leeren Absatz mit `:not(:has(> :not(.fair-satz)))` verschwinden. Die
     Regel war zu weit: `:has()` sieht nur Elemente, keine Textknoten — sie
     traf **jede** Fussnote ohne Kindelement und nahm ihr die 14px
     Aussenabstand. **Gemeldet hat es der Referenzvergleich, nicht das
     Auge:** bus 3281 -> 3239 (drei Fussnoten), mitglied und ticker je
     -14px, alles bei 390px und alles auf Seiten ganz ohne Rangliste. */
  .fair-satz{
    position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
}

/* ── Resultatzeile ─────────────────────────────────────────────────
   Vorbild ist die FVRZ-Darstellung, aber in der Sprache der Website: Zeit
   links, Begegnung in der Mitte, Resultat rechts, darunter Wettbewerb, Gruppe
   und Ort. Dieselbe Information wie beim Verband, nur in einer Zeile statt in
   dreien. Die Spielnummer erscheint nicht — 154273 sagt einem Besucher nichts.

   **Feste Resultatspalte**, damit alle Zahlen untereinander fluchten. Die drei
   inneren Spuren — rechtsbuendig, Doppelpunkt, linksbuendig — halten den
   Doppelpunkt bei jeder Zeile an derselben Stelle, auch bei zweistelligen
   Zahlen.

   **Der Ausgang steht am Resultat und nicht in einer Farbe daneben:** Sieg =
   beide Zahlen in Textfarbe, Niederlage und Unentschieden gedaempft. Kein
   Gruen, kein Rot — die Website hat keine Ampelfarben, und ein 0:8 muss nicht
   zusaetzlich leuchten. */
/* ── Die Zeile ist der Verweis ─────────────────────────────────────
   **Seit dem 26.08.2026 fuehrt die Zeile auf die eigene Spielseite, nicht
   mehr zum Verband.** Damit faellt die vierte Spur ersatzlos weg: Sie trug
   ein Aussprungzeichen zu matchcenter.fvrz.ch, und diese Adresse steht
   kuenftig auf der Spielseite, dort wo auch alles andere zum Spiel steht.

   **Der alte Ablehnungsgrund traegt nicht mehr, und das ist der ganze Punkt.**
   Hier stand: «Fassung A — die ganze Zeile als Verweis. Verworfen, weil ein
   Klick einen neuen Reiter oeffnet und die Zeile das nicht ankuendigt.» Der
   neue Reiter war der einzige Einwand, und ein Sprung auf eine eigene Seite
   oeffnet keinen. Der Entscheid ist nicht umgestossen worden — seine
   Voraussetzung ist weggefallen.

   **Fassung C bleibt verworfen** («Spielbericht →» als zweite Zeile, 25px je
   Zeile fuer eine Angabe, die zwanzigmal dasselbe sagt).

   **Keine Auszeichnung im Ruhezustand — und dafuer gibt es eine Hausregel.**
   Von den Bauformen, deren ganze Flaeche ein Verweis ist, traegt nur
   `person-verweis` eine Linie im Ruhezustand, und zwar weil ihre Wand
   GEMISCHT ist: vier Kacheln fuehren zu einem Profil, zwei nicht, und auf dem
   Handy sagt nichts vorher, welche. `.tz-row`, `.jahrzeile`, `.nk` und `.spl`
   sind gleichfoermig — jede Zeile ihrer Liste ist ein Verweis — und kommen
   ohne Zeichen aus. Die Spiellisten sind gleichfoermig, also gilt hier
   dasselbe.

   **Und hier steht der Vorbehalt, damit ihn findet, wer ihn braucht:** Kaeme
   je ein Spiel ohne `sfv_match_id` dazu, waere die Liste gemischt und
   braeuchte die Linie im Ruhezustand. **Der Fall ist im Spurmodell schon
   vorgesehen** — `.planliste:has(…)` und `.rliste:has(…)` standen von Anfang
   an an der LISTE und nicht an der Zeile, genau aus diesem Grund: damit eine
   gemischte Liste eine Antwort hat statt zwei Spurbreiten. Wer die gemischte
   Fassung baut, aendert also nicht die Bauart, sondern ergaenzt eine Regel:
   `.planliste:has(.rz-ohne) .rz-ziel{text-decoration:underline …}` nach
   dem Muster von `a.person-verweis`.

   **Kein Pfeil am rechten Rand, und das ist die Ausnahme der Regel vom
   rechten Rand** (bei `.tz-p` ausformuliert): Dort steht das Resultat. Zwei
   Zeichen am selben Rand konkurrieren, und in einer Resultatliste ist das
   Resultat das Wichtigere. `.tz-row` und `.jahrzeile` behalten ihren Pfeil,
   weil bei ihnen rechts nichts steht — der Unterschied ist ein Fall und keine
   Inkonsequenz.

   **Die Beruehrflaeche kommt jetzt von selbst.** Die Zeile ist bei 1440 76px
   hoch und bei 390 123px; das 34px-Zeichen brauchte dafuer eigens ein
   `min-height:44px`, die ganze Zeile braucht nichts.

   **Und die 35 Verweise heissen jetzt verschieden.** Vorher trugen alle 35
   dasselbe `aria-label="Spielbericht beim FVRZ"` — fuenfunddreissig gleiche
   Namen in einer Verweisliste. Jetzt ist der Name die Zeile selbst: Datum,
   Begegnung, Wettbewerb, Resultat. */
/* ── Zwei Ziele in einer Zeile ────────────────────────────────────────────
   **Bis zum 27.08.2026 war die ganze Zeile ein `<a>`.** Das trug, solange sie
   ein Ziel hatte. Mit dem Matchbericht sind es zwei — und ein Verweis im
   Verweis ist nicht erlaubt: Tastatur und Bildschirmleser kaemen an den
   zweiten nie heran.

   **Darum die Karten-Bauform:** Die Zeile ist ein `<div>`, der Hauptverweis
   liegt auf der Begegnung und deckt ueber `::after` die ganze Flaeche. Der
   Bericht liegt mit `z-index` darueber und bleibt anklickbar.

   **Der Vorlesename bleibt die ganze Zeile**, als `aria-label` am
   Hauptverweis: Datum, Begegnung, Wettbewerb, Ort, Resultat. Ohne ihn hiesse
   der Verweis nur noch nach den zwei Mannschaften — und die 35 Verweise
   trugen bis zum 24.08.2026 schon einmal alle denselben Namen. */
/* `.rz` und `.rz-bericht` tragen ihre Lage bei der Bauform weiter unten —
   am 28.08.2026 dorthin gezogen, damit ein Selektor genau einmal steht. */
a.rz-ziel{text-decoration:none;color:inherit}
a.rz-ziel::after{content:'';position:absolute;inset:0;z-index:0}

@media(hover:hover){
  .rz:has(a.rz-ziel:hover){background:var(--nav-beruehrt)}
  /* Der Bericht hebt sich beim Zeigen selbst hervor, damit sichtbar wird,
     dass er ein eigenes Ziel ist und nicht Teil der Zeile. */
  .rz-bericht:hover{color:var(--papier-text)}
}
/* Der Fokusumriss sitzt aussen und wuerde am Listenrand abgeschnitten.
   Er liegt auf dem Deckelement, damit er die ganze Zeile umfasst.

   ⚠⚠ **Hier stand ~~`outline-offset:0`~~ — und damit lag der Ring doch
   zweimal, 25.09.2026.** Der Satz darueber sagt «er liegt auf dem
   Deckelement»; `outline-offset` nimmt den Umriss des Elements aber nicht
   weg, es holt ihn nur heran. Der Verweis ist die Begegnung, also ein Stueck
   Text mitten in der Zeile: Um dieses Stueck lief ein zweiter Ring, INNEN im
   Ring der ganzen Zeile.

   **Die Schwesterregel machte es richtig** — `.sp-eins .ez-name:focus-visible
   {outline:0}` steht dort ausdruecklich so, gleiche Bauform, gleiche
   Deckflaeche. Zwei Stellen mit derselben Aufgabe, eine mit dem starken und
   eine mit dem schwachen Mittel; aufgefallen ist es erst, als der
   Doppelring gesucht wurde. */
a.rz-ziel:focus-visible{outline:0}
/* ⚠ Zweite Quelle des Doppelrings, wie bei `.sp-eins .ez-name`:
   ~~`box-shadow:0 0 0 5px var(--gelb) inset`~~ ist am 25.09.2026 entfallen,
   der Umriss bleibt als einzelner Ring. */
a.rz-ziel:focus-visible::after{outline:2px solid var(--akzent);outline-offset:-2px}
/* **Fuenf Spuren, jede Zelle mit ausdruecklicher Zuweisung.** Der Pfeil
   bekommt eine eigene, damit alle Pfeile untereinander fluchten — sonst
   verschoebe sie die verschiedene Breite von Resultat und Etikett.

   **Das Berichtszeichen steht neben dem Resultat, nicht darunter — und es
   traegt weiterhin `margin-top:5px`.** Hier stand bis zum 28.08.2026, es habe
   die 5px «bis zum 27.08.2026» getragen. Das war nur zur Haelfte wahr: Die
   Platzierung wurde geaendert und wirkt (`grid-column:4;grid-row:1`), das
   `margin-top:0` daneben aber wurde von einer spaeteren Fassung desselben
   Selektors ueberschrieben und kam nie an. Gemessen ab 640px: **5px.**

   **Die fuenf Pixel bleiben, und zwar entschieden.** Aufgefallen sind sie
   niemandem — auch nicht beim Bauen an genau dieser Zeile am 28.08. Das ist
   der Beleg, dass die Ausrichtung nicht gebraucht wurde. Der Satz, der etwas
   anderes behauptete, ist es nicht wert, stehen zu bleiben: **Eine
   Beschreibung, die nur zufaellig folgenlos falsch ist, wird beim naechsten
   Umbau zur Ursache.**

   Vor der Aenderung lag das Zeichen in einer zweiten Rasterzeile — das war
   richtig, solange rechts nur die Zahl stand. Mit dem Pfeil daneben wurde die
   Zeile dadurch 44px hoch und das Zeichen sah aus, als haenge es unter der
   Zeile statt an ihr.

   Reihenfolge von links: Resultat, Bericht, Pfeil. Sie ist auch die
   Vorlesereihenfolge — was das Spiel ausging, was es dazu gibt, wohin es
   fuehrt. */
/* **Die Resultatspur misst 60, nicht 100.** Die 100 waren fuer 19px-Text
   bemessen; seit das Resultat 16px misst, braucht der Haertefall «12:11»
   gemessen 46px, «2:0» nur 26. **Die Spur war mehr als doppelt so breit wie
   noetig**, und die 40px fehlten der Begegnung.

   Sie bleibt trotzdem fest und nicht `auto`: Das Raster `1fr auto 1fr` in
   `.rz-res` zentriert den Doppelpunkt, und dadurch fluchten «2:0» und «12:11»
   untereinander. Mit `auto` staende jede Zeile woanders. */
/* ── ⚠ HOECHSTBREITE 1000, MITTIG — 23.09.2026 ─────────────────

   Didis Auftrag: «die Zeile darf nicht ueber die ganze Bildschirmbreite
   auseinanderlaufen.» Ohne Deckel standen Heimname und Gastname auf einem
   breiten Schirm so weit auseinander, dass die Paarung als Paarung
   zerfiel — das Auge muss zwischen zwei Namen springen, die zusammen
   EINE Angabe sind.

   ⚠ Der Deckel sitzt an der Zeile selbst und nicht an einem Behaelter
   darum: Die Trennlinie (`border-bottom`) gehoert zur Zeile und soll
   genauso breit sein wie sie. Ein aeusserer Behaelter mit Deckel haette
   die Linie ueber die volle Breite gezogen.

   ⚠ `.rz-tagkopf` bekommt denselben Deckel — sonst stuende der Tag ueber
   der Liste an einer anderen Kante als die Zeilen darunter.

   ── ⚠⚠ LINKSBUENDIG, NICHT MITTIG — 23.09.2026 abends ──────────

   > ~~«`max-width:1000px;margin-inline:auto`»~~ — Stand 23.09.2026
   > nachmittags.

   **Der Deckel war richtig, das Zentrieren nicht.** Mit `margin-inline:
   auto` schob der Block auf breiten Schirmen nach rechts — das Datum
   begann weit rechts von der Ueberschrift «Spielplan» darueber, und die
   Seite zerfiel in zwei Kanten. Didi: **der Block beginnt auf derselben
   linken Kante wie die Ueberschrift und waechst nach rechts.**

   ⚠ Der Deckel ist zugleich grosszuegiger geworden (1000 → 1240). Er
   soll die Paarung zusammenhalten, aber den Namen nicht den Platz nehmen:
   «FC Bruettisellen-Dietlikon 1» soll einzeilig stehen. Die zwei
   Namensspalten teilen sich, was nach den festen Spuren uebrig bleibt —
   jede Erweiterung des Deckels kommt also je zur Haelfte bei ihnen an. */
.rz{position:relative;display:grid;
  grid-template-columns:130px minmax(0,1fr) 60px 86px 30px;gap:0 16px;
  max-width:1240px;
  align-items:start;padding:14px 0;border-bottom:1px solid var(--papier-linie)}
/* ── ⚠⚠ AUF DER TEAMSEITE FÄLLT DER DECKEL — 25.09.2026 ──────

   > ~~«Didis Auftrag: <<die Zeile darf nicht ueber die ganze
   > Bildschirmbreite auseinanderlaufen.>> Ohne Deckel standen Heimname und
   > Gastname auf einem breiten Schirm so weit auseinander, dass die Paarung
   > als Paarung zerfiel.»~~ — Stand 23.09.2026, gilt weiter auf `/spiele/`.

   **Die Begruendung ist nicht widerlegt, sie ist ueberstimmt.** Didi am
   25.09.2026: «Die Hoechstbreite der Spielliste entfaellt — die Listen
   nehmen die volle Inhaltsbreite wie Kader, Bilanz und <<Aus dem Team>>.»
   Das Auseinanderlaufen der Paarung bleibt der Preis; bezahlt wird er auf
   EINER Seite, auf der vier Bloecke untereinander stehen und der einzige
   schmalere die Spielliste war. **Eine Zeile, die als einzige 160px frueher
   endet als alles darueber und darunter, liest sich als Versehen** — und
   dieser Eindruck wiegt hier schwerer als der Sprung zwischen zwei Namen.

   **<<Volle Inhaltsbreite>> ist nachgesehen und nicht geschaetzt:** `.kad`,
   `.bil-tab` und `.tn-block` tragen keinen eigenen Deckel, sie fuellen ihre
   `.wrap` (`--content-lg` mit `--rand` als Polster). `max-width:none` stellt
   genau das her — **eine Zahl waere eine vierte, die niemand mit den dreien
   mitfuehrt.**

   ⚠ **Der Waehler ist `#v-team`, nicht `.planliste`/`.rliste`.** Beide
   Klassen stehen auch auf `/spiele/` (`page-spiele.php`), und dort bleibt der
   Deckel. `#v-team` ist die Kennung, die `single-fch_team.php` ohnehin traegt
   (`div#v-team.view.papier`) und die dieses Blatt schon fuehrt — siehe
   `#v-team #fakt-naechstes`. **Ein neuer Anker waere ein zweiter Name fuer
   dieselbe Seite.** Die Startseite fuehrt gar keine `.rz`: `.planliste`,
   `.rliste` und `fch_theme_spielzeile()` kommen dort nicht vor.

   ⚠ **Der Knopf haengt am selben Deckel und steht darum hier mit drin.**
   `.planliste + .mehr-zeigen` und `.rliste + .mehr-zeigen` sind die
   Teamseiten-Form von «Alle … Spiele anzeigen» / «Alle … Resultate
   anzeigen» (gesetzt von `listenfilter()` in `assets/fch.js`, unmittelbar
   hinter der Liste). **Drei Waehler, eine Regel** — sie verstreut
   hinzuschreiben hiesse, den naechsten Umbau an zwei Orte zu schicken.

   ⚠ **Das Gewicht entscheidet, nicht die Reihenfolge.** Der Deckel des
   Knopfs steht rund 7500 Zeilen weiter unten (beim Gegenstand `.mehr-zeigen`),
   also SPAETER im Blatt. Ohne `#v-team` gewaenne er; mit ihm steht (1,0,2)
   gegen (0,0,2), und der Ort im Blatt ist gleichgueltig.

   ⚠ **Am Abschnittskopf und an der Fusszeile ist nichts zu tun —
   nachgesehen, nicht angenommen.** `.sk`, `.sk-ha`, `.filt` und `.vq`
   (`#verbandsquelle`) tragen keinen Deckel. Die Leiste «Alle · Heim ·
   Auswaerts» stand damit bis heute RECHTS von der Listenkante, die sie
   laut Auftrag vom 24.09.2026 treffen sollte — bei 1440 um 40px, naemlich
   1280 Behaelterbreite gegen 1240 Deckel. **Sie ruecken jetzt zusammen, weil
   die Liste aufholt**, und nicht weil am Kopf etwas geaendert wurde.

   ⚠ **`.rz-tagkopf` behaelt seinen Deckel, weil er auf der Teamseite keinen
   Traeger hat.** Ausgegeben wird er allein in `page-spiele.php`; ein vierter
   Waehler traefe hier nichts. **Wer die Teamlisten je nach Tag gruppiert, holt
   ihn nach** — sonst stuende der Tag an einer anderen Kante als seine Zeilen,
   und genau dafuer bekam er den Deckel.

   ⚠ **Keine Breitenabfrage, und das ist am Wert entschieden.** Ein Deckel
   von 1240px beruehrt nichts, solange der Behaelter schmaler ist; unter 620px
   ist er das um mehr als das Doppelte. Ihn dort aufzuheben aendert also
   nichts, und ein `@media(min-width:620px)` darum herum waere eine Abfrage,
   die nichts abgrenzt. Die Hausschwelle bleibt fuer Faelle, die eine
   brauchen. */
#v-team .rz,
#v-team .planliste + .mehr-zeigen,
#v-team .rliste + .mehr-zeigen{max-width:none}
/* **`.rz-mitte` bekommt ihre Spur ausdruecklich.** Die Planzeilen haben seit
   dem 27.08.2026 keine `.rz-zeit` mehr — die Zeit steht in `.rz-wo`. Ohne die
   Zuweisung rutschte `.rz-mitte` in die leere Datumsspur: gemessen 130px
   Textbreite bei 1440, waehrend rechts 870 frei standen. */
/* ── ⚠⚠ DIE WETTBEWERBSZEILE NIMMT DIE ERSTE RASTERZEILE GANZ ─────

   Didis Auftrag vom 23.09.2026 abends: «auf der linken Kante der Zeile —
   nicht neben dem Datum.» Sie stand bis dahin in `.rz-mitte`, also in der
   zweiten Spur, und begann damit zwangslaeufig 130px + Zwischenraum vom
   linken Rand entfernt.

   ⚠ **Der ganze Rest der Zeile rueckt dadurch in die ZWEITE Rasterzeile.**
   Die fuenf Zuweisungen stehen darum hier beisammen und nicht verstreut
   bei ihren Bauteilen — wer eine vergisst, bekommt ein Stueck, das in der
   Wettbewerbszeile liegt und sie ueberdeckt.

   ⚠ `grid-row` steht auch an `.rz-pfeil` und `.rz-bericht` weiter unten
   in dieser Datei; die zwei sind dort auf `2` nachgefuehrt. Bei gleichem
   Gewicht gewinnt die spaetere Regel. */
.rz-wett{grid-column:1 / -1;grid-row:1}
.rz-mitte{grid-column:2;grid-row:2}
.rz-zeit{grid-row:2}
/* ⚠ **Hier stand `.rz-res,.rz-tag{grid-column:3}` — 23.09.2026.** Das
   Resultat sitzt seit heute zwischen den Wappen in `.rz-teams` und nicht
   mehr in dieser Spur; siehe den Vermerk in `inc/spielzeile.php`. Die Spur
   bleibt und traegt die Marke «Heim»/«Auswaerts» — sie ist damit weiterhin
   immer belegt, was der Einwand gegen eine frueher erwogene Fassung war.

   ⚠⚠ **Der Satz galt fuer die Regel und nicht fuer die Ausgabe — bis zum
   Abend desselben Tages.** `inc/spielzeile.php` gab die Marke nur im
   `else`-Zweig von `if ( $hat_resultat )` aus; auf gespielten Zeilen stand
   die Spur leer, waehrend hier schon «immer belegt» zu lesen war. Seit dem
   23.09.2026 abends steht die Marke an jeder Zeile, und der Satz stimmt.
   Die Begruendung dafuer steht bei der Ausgabe. */
.rz-tag{grid-column:3;grid-row:2}
/* **Eine feste Spur, auch wo kein Bericht steht.** Mit `auto` waere sie auf
   Zeilen ohne Bericht null breit — und weil jede Zeile ihr eigenes Raster ist,
   stuenden Resultat und Pfeil dann je Zeile an anderer Kante. 86px kosten
   Platz und kaufen die Flucht. */
/* **`margin-top:0` stand hier und kam nie an — gemessen am 28.08.2026.**
   Eine spaetere Fassung desselben Selektors setzt `margin-top:5px`, und bei
   gleichem Selektor im gleichen Kontext gewinnt die spaetere. Der berechnete
   Wert ist ab 640px `5px`, das Zeichen sitzt also fuenf Pixel unter der
   Oberkante des Resultats statt buendig damit.

   **Die Absicht vom 27.08.2026 ist damit halb angekommen:** Die Platzierung
   `grid-column:4;grid-row:1` traegt — das Zeichen steht NEBEN dem Resultat
   und nicht darunter. Nur die Ausrichtung fehlt.

   **Der Zusammenzug aendert das nicht.** Er erhaelt, was heute gilt; ob die
   fuenf Pixel bleiben, ist eine Gestaltungsfrage und keine Aufraeumarbeit.
   Die Regel steht jetzt einmal, weiter unten bei der Bauform. */
/* `.rz-pfeil` traegt seine Spur bei der Bauform weiter unten. */
.rliste .rz:last-child{border-bottom:0}
.rz-zeit{font-size:var(--tx-klein);color:var(--papier-halb);padding-top:2px}
/* ── ⚠ ZWEI ZEITFORMEN, UND DIE BREITE WAEHLT — 23.09.2026 ────────

   Didis Auftrag: «Auf dem Handy in jeder Zeile das Datum mit
   Wochentagskuerzel vor der Zeit, zum Beispiel «Fr. 25.09. · 20:00», auch
   wenn die Zeilen nach Tag gruppiert sind. Die Gruppenueberschrift bleibt,
   wie sie ist.»

   `inc/spielzeile.php` gibt darum beide Formen aus, sobald der Aufrufer
   `zeitform => 'uhr'` setzt (`page-spiele.php`, Reiter Spielplan). **Breit
   gewinnt die kurze**, weil `.rz-tagkopf` den Tag schon darueber schreibt;
   **schmal die volle**, weil die Ueberschrift dort aus dem Bild scrollt und
   die Zeile ohne ihren Tag dastand.

   ⚠ **`display:none` und nicht `.vh`.** Der ausgeblendete Span faellt damit
   auch aus dem Vorlesebaum — sonst stuende die Uhrzeit zweimal in derselben
   Zeile. **Dieselbe Bauform wie `.tn-voll`/`.tn-kurz` und
   `.seg-kurz`/`.seg-wort`**, und aus demselben Grund.

   ⚠ **Die Tagesueberschrift bleibt unberuehrt.** Sie wirkt schmal jetzt
   redundant; Didi sagt ausdruecklich, dass sie bleibt, wie sie ist — sie
   traegt die Gruppierung, nicht die Angabe.

   ⚠ **Der Umschalter steht in `@media(max-width:1023px)` weiter unten**, an
   derselben Schwelle wie die uebrige Handyfassung dieser Zeile. Eine eigene
   Zahl waere eine zweite Grenze fuer dieselbe Umstellung — und die zwei
   liefen beim naechsten Umbau auseinander. */
.rz-zt-voll{display:none}
/* **Der Wettbewerb als Etikett ueber der Begegnung.**
   Er stand bis zum 27.08.2026 in derselben Zeile wie der Ort und brach bei 390
   zweimal um — vier Textzeilen je Spiel, und «Junioren C Promotion · Gruppe 3»
   wiederholte sich auf der Teamseite bei allen 22 Zeilen.

   **Dieselbe Rolle wie «Anlass» oder «News» in den Suchergebnissen:** klein,
   Versalien, gold — die Art dessen, was darunter steht. Darum auch dieselbe
   Groesse und dasselbe Gold.

   **Eine Bauform fuer beide Listen.** Auf «Spielplan & Resultate» stehen alle
   Mannschaften gemischt; dort IST der Wettbewerb die Auskunft, welches Team
   spielt. Ihn nur auf der Teamseite auszublenden waere eine zweite Regel fuer
   dieselbe Zeile gewesen.

   Gemessen bei 390: 18px je Zeile gegen die Fassung ohne Wettbewerb — bei
   zwoelf Zeilen 216. Der Preis ist bekannt und gewollt. */
.rz-wett{font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-flaeche);
  margin:0 0 3px}

/* ── Fassung P · Spielplan: Tagesblock, zwei Zeilen je Spiel ─────────────
   **Der Tag steht im Kopf, die Zeit in der Zeile** — auch wenn nur ein Spiel
   folgt. Sonst haette der Kopf zwei Bedeutungen, je nachdem wie viele Zeilen
   darunter stehen. Am 16.08. stehen zwei Spiele; das ist die Frage, fuer die
   ein Spielplan da ist.

   **Zwei Textzeilen je Spiel:** Begegnung, darunter Wettbewerb · Ort · Zeit.
   Das Etikett faellt hier weg, weil sein Inhalt in die untere Zeile rueckt —
   auf der Teamseite bleibt es stehen. */
.rz-tagkopf{max-width:1240px;
  font-family:var(--b);font-weight:700;font-size:var(--tx-klein);
  letter-spacing:.1em;text-transform:uppercase;color:var(--papier-text);
  margin:22px 0 0;padding-bottom:6px;
  border-bottom:1px solid var(--papier-linie)}
.rz-tagkopf:first-of-type{margin-top:6px}



/* **Der Monatskopf bekommt einen gelben Oberstrich.**
   Zwischen dem letzten Spiel eines Monats und dem naechsten Kopf stand nur
   Weissraum — der Wechsel war da, aber nicht sichtbar. **Gelber Strich heisst
   im Projekt «hier faengt etwas an»**, und das ist genau die Aussage.

   Zwei Stufen: Der Monat traegt 2px in Gelb, der Tag darunter 1px in
   `--papier-linie`. **Die Staerke sagt, welche Stufe es ist.**

   Der erste Kopf einer Liste bekommt keinen — dort faengt nichts an, was
   nicht ohnehin anfaengt.

   **Nur «Spielplan & Resultate».** Die Teamseite fuehrt ihre Liste ohne
   Monatskoepfe durch; dort gibt es nichts zu trennen. */
#t-res > .grp,#t-plan > .grp{margin-top:34px;
  padding-top:16px;border-top:2px solid var(--gelb)}
#t-res > .grp:first-child,#t-plan > .grp:first-child{margin-top:0;
  padding-top:0;border-top:0}

/* ── Die Verbandsquelle ──────────────────────────────────────────────────
   Eine Zeile mit gelbem Oberstrich, zwischen Rangliste und Tenuesponsor.
   **Dieselbe Form wie ein Monatskopf** — der Strich sagt «hier faengt etwas
   an», und was anfaengt, ist die Quelle hinter allem darueber.

   Auf schmalen Breiten untereinander: Ein Satz und ein Verweis nebeneinander
   liessen dem Satz bei 390 rund 200px, und er braucht zwei Zeilen. */
/* **Kein eigenes Abschnittspolster.** `.papier section` bringt oben und unten
   je 46-80px mit — fuer einen Abschnitt richtig, fuer eine Zeile zu viel:
   gemessen 209px Blockhoehe bei 390 fuer 40px Inhalt. Der Abstand zur
   Rangliste darueber kommt vom gelben Strich, der zum Tenuesponsor darunter
   vom naechsten Abschnitt. */
/* **Kein `margin-top` an der Zeile.** Der Abschnitt darueber bringt sein
   Polster mit — gemessen 80px bei 1440. Zusaetzliche 44 machten daraus 124
   nach oben gegen 80 nach unten. **Die Zeile gehoert zur Tabelle darueber;**
   der Abstand dorthin darf nicht groesser sein als der zum naechsten
   Abschnitt. */
/* ── Heim- und Auswaertsbilanz ──────────────────────────────────────
   **Die Bilanz sitzt im Register der Tabellen, nicht des Seitenkopfs.**
   Uebernommen wird von `.sp-kenn` die Bauform, nicht die Groesse — und seit
   dem 29.08.2026 geht das, ohne etwas zu ueberschreiben: Die Grundform traegt
   keine Groesse mehr, sie steht in `.sp-kopfkarte .sp-kenn span`.

   **Der Pruefstein zu dieser Trennung ist damit bestanden, nicht nur
   beabsichtigt.** Die Bilanz ist der erste Fall, der sie auf die Probe
   stellt, und sie braucht **zwei** Ueberschreibungen — Anordnung und
   Sperrung —, keine davon eine Groesse. Die Schwelle lag bei drei.

   **Die Zahl steht auf F (17px) und nicht auf 20.** Der Auftrag begruendete
   die 20 mit «wie das Resultat der Spielzeile»; gemessen steht das Resultat
   auf 17 — und es stand auch vorher nicht auf 20, sondern auf 16. **Wenn die
   Begruendung stimmen soll, ist die Zahl 17.** Dazu ist 20 eine der neun
   Groessen ausserhalb der beiden Leitern; sechs bis achtzehn Elemente haetten
   sie an dem Tag wieder aufgefuellt, an dem 187 von der Leiter geholt wurden.
   Die Handy-Ausnahme mit 18px faellt damit ersatzlos weg.

   **Sollte F zu leise wirken, ist die Antwort nicht 20, sondern C** — die
   naechste Leiterstufe darueber. Dann ist es eine Stufe und keine Zahl.

   **S, U und N sind drei Spuren, kein Wert.** Als «5 / 1 / 1» brach die Zahl
   auf dem Handy ueber zwei Zeilen und schob die Reihe auseinander. Sechs
   Spuren sind zudem dieselbe Aufteilung wie in der Rangliste darueber.

   **Die Abstaende stehen auf der Skala von Regel 10** (4 · 8 · 16 · 24 · 32 ·
   48 · 80). Aus dem Mockup kamen 30 · 26 · 22 · 13 · 12 · 10 · 9 — Werte aus
   der Zeit davor; keiner wandert um mehr als 3px.

   **Die Etiketten sind am 29.08.2026 auf `Sp · S · U · N · Tore · Pkt`
   gekuerzt worden, und der Grund ist nicht der Platz, sondern die Flucht.**
   Mit `Spiele` und `Punkte` massen die sechs Spuren 48 · 11 · 11 · 11 · 39 ·
   55 px: Das breiteste Etikett stand ueber einer einstelligen Zahl, das
   schmalste ueber derselben. Die Werte standen darum in unregelmaessigen
   Abstaenden — eine grosse Luecke nach der ersten Zahl, enge zwischen S, U
   und N. Gekuerzt messen sie **18 · 11 · 11 · 11 · 39 · 27**, und die Werte
   fluchten von selbst.

   **`Tore` bleibt ausgeschrieben.** Ein einzelnes «T» ueber «11:4» ist nicht
   zu deuten, und die vier einbuchstabigen sind Fussballkonvention, «Tore»
   ist keine.

   **Die Kuerzel stehen nicht neu im Haus, sie stehen schon da:** Die
   Rangliste auf derselben Seite fuehrt ihre Spaltenkoepfe als `Sp · S · U ·
   N · Fair · Tore · Diff · Pkt`, an sechs Stellen `Sp` und an zwei `Pkt`,
   jedes Mal fuer dasselbe. **Gleiche Sache, gleiches Kuerzel** — die Bilanz
   spricht jetzt dieselbe Sprache wie die Tabelle zwei Bloecke darueber. */
/* ── Die Bilanz: eine Tabelle, zwei Zeilen, eine Summe ────────────────────

   ⚠ **Hier stand bis zum 12.09.2026 `.bilanz` als dreispaltiges Raster** mit
   zwei `.bil-sp` darin, jeder mit eigener `.bil-ort`-Kopfzeile und eigener
   `.sp-kenn`-Etikettenreihe. **Die Etiketten «SP S U N Tore PKT» standen
   damit zweimal** -- auf dem Handy eine ganze Zeile fuer nichts, und wer
   heim gegen auswaerts vergleichen wollte, musste zwischen zwei Bloecken
   springen.

   Der Absatz unten ueber die Rechtsbuendigkeit gilt unveraendert weiter und
   ist der Grund, warum hier `text-align:right` steht: **Zahlen werden von
   rechts gelesen.** Nur die Ortsspalte bleibt links, weil dort ein Wort
   steht.

   **Die gelbe Oberkante bleibt, wo sie war** -- ueber der ersten Zeile, jetzt
   am `thead` statt am Block. */
/* ══ Die Teambilanz — eigene Klasse, zwei Bauformen ═══════════════════════

   ⚠⚠ **Hier hiess die Tabelle einen halben Tag lang `.sp-tab`**, damit sie die
   Masse der Statistiktabelle erbt. Der Gedanke war richtig, die Umsetzung
   falsch: **Geerbt wurden auch die Regeln, die `.sp-tab` SCHMAL macht** — ihr
   Raster mit fuenf Spuren. Die Bilanz hat sieben Werte; das brach an der
   falschen Stelle, und der gelbe Strich legte sich um jede einzelne Zelle
   statt ueber die Zeile.

   > **Masse teilen heisst nicht, die Klasse zu teilen. Wer die Klasse nimmt,
   > erbt auch alles, was ihr spaeter zustoesst.**

── Breit ──

   Erste Spalte 26%, SP/S/U/N je 9%, Tore 13%, Pkt 10%. `table-layout:fixed`,
   sonst verhandelt der Browser die Prozente gegen den Inhalt.

   ⚠ **Der gelbe Strich liegt auf ALLEN Zellen der ersten Datenzeile.** Mit
   `border-collapse:collapse` wird daraus EINE durchgehende Kante ueber die
   ganze Breite. */
.bil-tab{width:100%;border-collapse:collapse;table-layout:fixed;
  text-align:right;font-variant-numeric:tabular-nums}
.bil-tab th,.bil-tab td{padding:10px 0 10px 14px}
.bil-tab thead th{font-family:var(--b);font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--papier-halb);padding-bottom:6px}
/* Breit: erste 26%, SP/S/U/N je 9%, Tore 13%, Pkt 10%. */
.bil-tab thead>tr>:first-child{width:26%}
.bil-tab thead th:nth-child(n+2):nth-child(-n+5){width:9%}
.bil-tab thead th:nth-child(6){width:13%}
.bil-tab thead th:nth-child(7){width:10%}
/* ⚠ **Schmal braucht die erste Spalte mehr Platz und die Zahlen weniger** --
   «Auswaerts» ist laenger als jede Zahl, und bei 360px entscheidet das ueber
   den Umbruch. Erste 28%, SP/S/U/N je 11%, Tore 17%, Pkt 11%. */
@media(max-width:639px){
  .bil-tab thead>tr>:first-child{width:28%}
  .bil-tab thead th:nth-child(n+2):nth-child(-n+5){width:11%}
  .bil-tab thead th:nth-child(6){width:17%}
  .bil-tab thead th:nth-child(7){width:11%}
}
.bil-tab tbody tr:first-child>*{border-top:2px solid var(--gelb)}
.bil-tab tbody tr+tr>*{border-top:1px solid var(--papier-linie)}
/* **Die Ortsspalte traegt das einzige Wort und bleibt darum links** — normale
   Schrift, dunkel, ungesperrt. **Sie ist ein Zeilenkopf und kein Etikett.** */
/* ⚠ Was hier stand, ist am 12.09.2026 in die gemeinsame Ruecknahme oben
   gewandert -- bis auf Familie und Gewicht, die nur die Bilanz braucht. */
/* ⚠ **`th[scope="row"]` statt der Aufzaehlung** — 12.09.2026. Mit
     `.bil-tab tbody th,.bil-tab tfoot th` stand dieselbe Liste ein zweites
     Mal im Blatt (die gemeinsame Ruecknahme oben nennt sie auch). Der
     Attributwaehler trifft dieselben Zellen und nennt zugleich, WARUM sie
     gemeint sind: **weil sie Zeilenkoepfe sind.** */
  .bil-tab th[scope="row"]{font-family:var(--b);font-weight:400}
/* ⚠⚠ **Dieselbe Kantenkollision wie an der Statistiktabelle — 12.09.2026.**

   Gemessen an der Teamseite von FCH 1, breit UND bei 390px:

   ```
   Zeile darueber   unten 1px rgba(11,11,10,.14)   alle 7 Zellen
   Fusszeile        oben  1px rgb(11,11,10)        alle 7 Zellen
   ```

   Gleich breit, gleicher Stil — **bei `border-collapse:collapse` gewinnt dann
   die obere Zelle.** Die Linie unter der Bilanz war also auf voller Breite
   die blasse Zeilentrennung und nicht die dunkle Abschlusskante. Anders als
   an der Statistiktabelle fiel es nicht auf, weil es keine halbe Linie gab,
   sondern durchgehend die falsche.

   ⚠ Der Kommentar zwanzig Zeilen hoeher warnt schon vor genau diesem
   Mechanismus («Mit `border-collapse:collapse` wird daraus EINE durchgehende
   Kante») — **dort als Absicht gelesen, hier als Falle uebersehen.** */
.bil-tab:has(tfoot) tbody tr:last-child>*{border-bottom:0}
.bil-tab tfoot>tr>*{border-top:1px solid var(--papier-text);font-weight:500}
.bil-tab tfoot th{font-weight:500}
.bil-fuss{font-size:var(--tx-etikett);color:var(--papier-halb);margin:10px 0 0}
/* ⚠ `.bil-schmal{display:none}` ist am 12.09.2026 entfallen -- es gibt die
   schmale Sonderform nicht mehr. Die Tabelle gilt auf allen Breiten. */
/* **Die Werte haengen an der rechten Kante, nicht an der linken.**

   **Zahlen werden von rechts gelesen.** Rechtsbuendig stehen Einer ueber
   Einern und Zehner ueber Zehnern, und «18:10» wird gegen «7:6»
   vergleichbar; linksbuendig steht die 1 der 18 ueber der 7 und behauptet
   eine Gleichheit, die es nicht gibt.

   **Bei den Etiketten ist die Ausrichtung Geschmack, bei den Werten ist sie
   Lesbarkeit** — sie gehen darum gemeinsam nach rechts, ueber alle sechs
   Spuren und alle Breiten. **Keine Ausnahme fuer die erste Spur:** In der
   Ranglistentabelle zwei Bloecke darueber steht dort ein Teamname und bleibt
   links, hier steht auch dort eine Zahl.

   Es ist dieselbe Regel wie in der Rangliste und aus demselben Grund; die
   Rangliste selbst wird nicht angefasst, sie ist es bereits. */
/* ⚠ **Hier standen `.bilanz .sp-kenn`, `… b` und `… span`.** Sie sind am
   12.09.2026 entfallen: `.bilanz`, `.bil-sp`, `.bil-ort` und `.sp-kenn`
   haben in der Bilanz keinen Traeger mehr. `.sp-kenn` selbst bleibt -- es
   wird an anderer Stelle weiterbenutzt (`.sp-kenn` und
   `.sp-kopfkarte .sp-kenn` weiter oben), nur nicht mehr hier. */
/* **Die Deckkraft sitzt an den Zahlen und nicht an der Spalte** — gerechnet
   am 29.08.2026 gegen Weiss:

       Zahl    --papier-text  #0B0B0A auf 62 %  → rgb(104,104,103)  5,58  reicht
       Etikett --papier-halb  #5A5A55 auf 62 %  → rgb(153,153,150)  2,86  zu wenig

   **Das Etikett ist schon gedaempft, und zweimal gedaempft ist unlesbar.**
   Auf die Schwelle von 4,5 kaeme es erst bei 83 % Deckkraft — dann ist die
   Daempfung weg, die der Zweck der Sache war. **Also nicht die Farbe
   aendern und nicht die Deckkraft anheben, sondern sie dorthin setzen, wo
   sie wirken soll.** Die Etiketten bleiben bei voller Staerke (6,93), die
   Zahlen stehen auf 5,58.

   Die Total-Spalte wiederholt, was in der Rangliste eine Zeile weiter oben
   steht; ob sie bleibt, ist ein offener Entscheid.

   ── Im Theme nicht gebaut, und das ist der Grund — 03.09.2026 ──────

   **`.bil-total .sp-kenn span` steht unter «greift nicht».** Das ist kein
   Uebertragungsfehler: Der Satz darueber stammt aus dem Prototyp und nennt
   die Spalte selbst einen offenen Entscheid. Eine Bauform zu uebernehmen,
   von der ihr Urheber schreibt, dass sie vielleicht weg soll, hiesse eine
   Frage mit Ja zu beantworten, die niemand gestellt hat.

   > **Ein offener Entscheid gehoert nicht gebaut, sondern entschieden.**

   Die Regel bleibt stehen -- sie kostet nichts und ist da, sobald Didi die
   Spalte will. **Sie steht hier als Befund und nicht als Versaeumnis**, damit
   der naechste Abgleich sie nicht wieder meldet. */
/* ⚠ **Seit dem 12.09.2026 zielt diese Regel ins Leere, und zwar doppelt:**
   `.bil-total` heisst jetzt `.stat-total` (dieselbe Klasse wie die Summe der
   Statistiktabelle), und `.sp-kenn` steht in der Bilanz ueberhaupt nicht
   mehr — sie ist eine Tabelle geworden.

   **Sie bleibt als Vermerk stehen, nicht als Regel.** Der offene Entscheid
   darueber ist unveraendert offen; wer ihn faellt, findet hier den Hinweis,
   dass der Traeger heute anders heisst. Ein stilles Loeschen haette die
   Frage mitgenommen. */
.bil-total .sp-kenn span{opacity:.62}
/* **Gestapelt bis 899, und die Schwelle ist gemessen und nicht gewaehlt.**

   Sie stand schon zweimal woanders. Der erste Anlauf am 29.08.2026 brach bei
   759 um — das war die Breite, bei der die Stapelung ENDET, nicht die, bei
   der die drei Spalten PASSEN. Dazwischen lief die Seite um bis zu 219px
   ueber. Der zweite Anlauf setzte 1099, gemessen an den damaligen Spuren.

   **Die kurzen Etiketten haben die Schwelle selbst verschoben.** Eine Spalte
   braucht jetzt 117px Inhalt plus fuenf Luecken zu 24 = 237px; drei davon
   plus zwei Luecken zu 32 sind **775px**, und der Inhaltskasten erreicht das
   bei Fensterbreite **830**. Vorher waren es 961px und 1033. `1fr` schuetzt
   davor nicht: Es ist `minmax(auto,1fr)`, und `auto` heisst min-content — die
   Spur wird nicht schmaler als ihr Inhalt, der Kasten laeuft ueber.

   **899/900 ist ein Gegenstueckpaar wie 639/640, 759/760 und 999/1000** —
   `min-width:900px` fuehrt das Haus bereits. Bei 900 bleiben 53px Luft.

   **Warum die Luecke 24 und nicht 32 ist:** Beide stehen auf der Skala von
   Regel 10. Mit 32 braucht eine Spalte 277px, die drei zusammen 895px, und
   die dreispaltige Form ist erst ab **950** sauber — die Schwelle muesste auf
   999. **24 gibt der kompakten Form 120px mehr vom Breitenband**, ohne dass
   der Rhythmus leidet: Die Luecke ist mit 24px groesser als vier der sechs
   Spuren.

   **Und der erste Fehler war eine Messluecke, keine Rechenluecke:** Der
   Auftrag nannte 390, 759 und 1440 als Pruefbreiten, und alle drei waren in
   Ordnung. **Ein Umbruchpunkt will auf beiden Seiten gemessen werden, und die
   andere Seite ist nicht die naechste bequeme Breite, sondern die erste, bei
   der die andere Anordnung gilt.**

   **Gestapelt tragen sechs gleiche Spuren, nicht sechs inhaltsbreite.**
   `repeat(6,1fr)` ueber die Blockbreite haelt die drei Bloecke in Flucht —
   inhaltsbreite Spuren fielen je Block anders aus (256/253/268px gemessen),
   und drei untereinander stehende Reihen derselben Tabelle, die nicht
   fluchten, sind ein Fehler, den kein Ueberlauf meldet. */
/* ⚠⚠ **HIER STAND DIE SCHMALE BILANZ MIT ZWEI SPALTEN** -- 26 Zeilen,
   entfallen am 12.09.2026. Sie war einen halben Tag alt.

   Mit ihr fallen `.bil-paar`, `.bs-ort`, `.bs-pkt`, `.bs-zeile` und
   `.bil-total-schmal` -- **und damit sechs von zehn festen Pixelzahlen**, die
   die Gegenueberstellung zutage gefoerdert hatte: 10 · 12,5 · 12,5 · 12,5 ·
   12,5 · 28.

   > **Eine Bauform weniger ist eine Stelle weniger, an der zwei Tabellen
   > auseinanderlaufen koennen.**

   Die Tabelle gilt jetzt auf allen Breiten; ihre schmalen Spaltenbreiten
   stehen oben bei `.bil-tab`. */

#verbandsquelle{padding-top:0;padding-bottom:0}
.vq{display:flex;justify-content:space-between;align-items:center;gap:20px;
  border-top:2px solid var(--gelb);padding:16px 0 clamp(46px,6vw,80px);
  margin-top:calc(clamp(46px,6vw,80px) * -0.35)}
/* `--tx-klein` statt `--tx-lead`: 19px waren Lead-Groesse und stellten die
   Quellenangabe auf dieselbe Stufe wie einen Anrisstext. Sie ist eine
   Nebenangabe — gemessen fiel die Zeile damit bei 390 von drei auf zwei. */
.vq p{margin:0;font-size:var(--tx-klein);color:var(--papier-halb);max-width:56ch}
.vq .mehr{white-space:nowrap}
@media(max-width:639px){
  .vq{flex-direction:column;align-items:flex-start;gap:10px}
}
/* **Der Wettbewerb steht auch hier als Etikett** — dieselbe Bauform wie auf
   der Teamseite.

   Ein Zwischenschritt am 27.08.2026 legte ihn als normalen Text in die
   Ortszeile: «Meisterschaft 2. Liga · Gruppe 1 · Langacker, Platz A · 17:00».
   Bei 390 brach die Zeile um und die Uhrzeit stand allein darunter, hinter
   einem Trenner — es sah aus wie ein Fehler. **Der Umbruch war aber nur das
   Symptom:** Ein Wort hatte zwei Bauformen bekommen, je nachdem in welcher
   Liste es stand.

   Als Etikett misst es 11px und braucht kaum Platz. Die untere Zeile traegt
   nur noch Ort und Zeit und passt damit in eine Zeile. */
.rz-uhr{font-variant-numeric:tabular-nums}

/* **Nur unter 640.** Ueber der Grenze traegt die Zeile ihr fuenfspuriges
   Raster mit eigener Datumsspur — und die Zeit ist bei diesem Umbau ins
   Markup nach `.rz-wo` gewandert. Ohne die Abfrage blieb die Datumsspur bei
   1440 leer und nahm der Begegnung 130px: gemessen 160px Textbreite, waehrend
   rechts ueber tausend Pixel frei standen und der Wettbewerb dreimal umbrach.

   **Der Tagesblock gilt auf allen Breiten**, die Umordnung der Zeile nicht. */
/* ── ⚠⚠ DIESER BLOCK WAR DIE «FASSUNG JE ORT» ─────────────────

   > ~~«`#t-plan .rz-mitte{grid-row:1}` · `#t-plan .rz-zeit{display:none}`
   > — Unten steht die Zeit, oben nicht; die eigene Spur gibt es hier
   > nicht.»~~ — Stand 23.09.2026, ueberholt.

   **Die zwei Regeln hingen an `#t-plan`, also am Spielplanreiter von
   `/spiele/`.** Dieselbe Zeile auf der Teamseite bekam sie nie — sie
   behielt auf dem Handy ihre 130px-Datumsspur neben einer Begegnung, die
   sich den Rest teilen musste. **Eine gemeinsame Ausgabe mit einer
   ortsgebundenen Darstellung ist keine gemeinsame Ausgabe**, und genau
   das war Didis Befund vom 23.09.2026.

   Die Handyfassung steht jetzt am Ende der Zeilenregeln und gilt fuer
   jedes `.rz`. Sie muss dort stehen und nicht hier: `.rz-pfeil` und
   `.rz-bericht` bekommen ihre Spuren WEITER UNTEN zugewiesen, und bei
   gleichem Gewicht gewinnt die spaetere Regel. Hier haette der Block
   ausgesehen, als wirke er. */
@media(max-width:639px){

  /* **«Nächstes Spiel» faellt unter 640 aus der Faktenzeile.** Sie ist dort
     zweispaltig; der dritte Eintrag belegt eine ganze Zeile allein und kostet
     gemessen 73px. Ueber 640 stehen vier Spalten nebeneinander — dort kostet
     er nichts und bleibt.

     **Vermerk zum Entscheid:** Von den drei Angaben ist das naechste Spiel
     vermutlich die nuetzlichste — Saison und Liga stehen auch in der
     Rangliste. Der Wegfall ist eine Entscheidung fuer Platz, nicht gegen die
     Angabe; das Spiel selbst steht wenige Zeilen tiefer im Spielplan. */
  #v-team #fakt-naechstes{display:none}
}
/* ── ⚠ HIER STAND DIE ZWEITE ORTSGEBUNDENE REGEL ────────────────

   > ~~«**Ueber 640 steht die Zeit in ihrer eigenen Spur, unten nicht.** Bei
   > fuenf Spielen an einem Wochenende ist die Uhrzeit die Angabe, nach der
   > man scannt — in einer Spur fluchten die Zeiten untereinander, im
   > Fliesstext nicht. Die untere Zeile traegt dann nur den Ort. …
   > `@media(min-width:640px){ #t-plan .rz-wo .rz-uhr{display:none} }`»~~
   > — Stand 23.09.2026, ueberholt.

   **Der Satz hatte recht und ist trotzdem weg.** Seine Begruendung — die
   Zeiten sollen untereinander fluchten — gilt weiter; nur gilt sie seit
   heute auf JEDER Breite, weil die Datumsspur auch auf dem Handy steht.
   Damit gibt es keine Breite mehr, auf der die Uhrzeit in `.rz-wo` gehoert,
   und die Regel ist bedingungslos geworden (siehe `.rz-wo .rz-uhr` oben).

   ⚠ Und sie hing an `#t-plan`: Auf der Teamseite stand die Zeit ueber 640
   doppelt, sobald dort jemand `zeitform => uhr` mitgegeben haette. Das tat
   niemand, der Fehler war also latent — **eine ortsgebundene Regel, die nur
   deshalb nie auffiel, weil der zweite Ort sie nie ausloeste.** */


.rz-teams{margin:0;line-height:1.35}
/* **Fuenf Teile in einer Zeile — 23.09.2026, Didis Anordnung.**

     Heimname · Heimwappen · Resultat · Gastwappen · Gastname

   Die zwei Namensseiten tragen `flex:1 1 0` und teilen den Rest; die Mitte
   traegt eine FESTE Breite. ⚠⚠ **Genau darin liegt die Flucht, und sie war
   bezahlt:** Der Vermerk bei `.rz` begruendet die alte 60px-Spur damit,
   dass «2:0» und «12:11» sonst je Zeile woanders stuenden. Ein Resultat
   zwischen zwei Namen liegt dort, wo die Namen enden — also in jeder Zeile
   anders. Mit fester Mitte und `1fr` links und rechts sitzt es wieder in
   jeder Zeile an derselben Stelle.

   `min-width:0` an den Seiten, weil ein Flex-Element sonst nicht unter
   seine Inhaltsbreite schrumpft und lange Klubnamen die Mitte verschoeben.

   Die 60px sind nicht neu gewaehlt, sondern die Breite der abgeloesten
   Spur — dieselbe Zahl, dieselbe Begruendung. */
.rz-ziel{display:flex;align-items:center;gap:0 8px}
.rz-seite{flex:1 1 0;min-width:0}
.rz-seite-h{text-align:right}
.rz-seite-g{text-align:left}
.rz-teams .rz-res,.rz-teams .rz-strich{flex:0 0 60px;text-align:center}
/* ⚠ Der Strich trug `margin:0 4px`; in der festen Mitte waere die Marge
   eine Verschiebung. Der Abstand steht jetzt am `gap` der Zeile. */
.rz-strich{color:var(--papier-halb)}
/* ⚠ **Mittig unter der Paarung** — Didis Auftrag vom 23.09.2026. Der Ort
   gehoert zur Begegnung und nicht zur Heimseite; linksbuendig las er sich
   wie ein Nachtrag zum Heimnamen. Auf dem Handy steht die Paarung
   linksbuendig untereinander, und dort steht der Ort mit — siehe den
   Handyblock am Ende der Zeilenregeln. */
/* ⚠ **Der Abstand zur Paarung ist am 23.09.2026 abends von 3px auf 6px
   verdoppelt worden** — Didis «etwa doppelt so viel wie heute». 6px ist
   eine bestehende Stufe des Themes (`.ts b{margin-left:6px}`). */
.rz-wo{margin:6px 0 0;font-size:var(--tx-klein);color:var(--papier-halb);
  text-align:center}
/* ⚠⚠ **Die Uhrzeit in `.rz-wo` ist ab jetzt IMMER verborgen.** Sie stand
   im Markup ein zweites Mal, weil die Datumsspur unter 640 ausgeblendet
   war. Seit dem 23.09.2026 steht die Spur auch auf dem Handy (oben links,
   Didis Auftrag) — ohne diese Regel stuende die Zeit zweimal in derselben
   Zeile. Das Markup fuehrt sie weiter; wer die Handyfassung wieder
   umbaut, hat sie damit noch. */
.rz-wo .rz-uhr{display:none}
/* **Gewicht statt Groesse.** Das Resultat mass 19px gegen 16 der Begegnung
   und war zusaetzlich fett — bei 390 stand es dadurch staerker da als der
   Mannschaftsname, obwohl die Begegnung die Hauptangabe der Zeile ist.

   Jetzt dieselbe Groesse wie die Begegnung, die Staerke traegt allein.
   **Das nimmt eine Schriftgroesse aus dem Satz**, statt eine neue zu
   erfinden — die Zeile kommt mit drei aus: 16 fuer Begegnung und Resultat,
   14 fuer den Ort, 11 fuers Etikett.

   Der Preis: In einer Resultatliste ist die Zahl das, was man sucht, und sie
   verliert etwas Auffaelligkeit. Fett gegen Halbfett bleibt der Unterschied. */
.rz-res{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  font-weight:800;font-size:17px;text-align:center}
.rz-res span:first-child{text-align:right}
.rz-res span:last-child{text-align:left}
.rz-res i{font-style:normal;color:var(--papier-halb);font-weight:400;padding:0 4px}
.rz-res.nied span,.rz-res.unent span{color:var(--papier-halb)}
/* ── Der Zustand an derselben Stelle wie die Zahl ──────────────────
   `.rz-tag` steht in derselben dritten Spur wie `.rz-res` und ist die
   Fortsetzung derselben Frage: was ist das Ergebnis dieser Zeile. Bei einem
   gespielten Spiel eine Zahl, bei einem kommenden ein Zustand.

   **Die Spur misst 100 und nicht 74.** Gemessen braucht «Auswaerts» mit
   Zeichen 97px; die alte Spielplanspalte war 96 und lief seit je um einen
   Pixel ueber — in allen drei Ansichten, unbemerkt. Das Resultat belegt 74
   von 74. Bei 100 passen beide, und die Zahlen fluchten weiter untereinander,
   weil `.rz-res` innen ein Dreispurgitter ist: eine breitere Spalte
   verschiebt jede Zeile gleich, der Doppelpunkt bleibt auf seiner Linie.

   Zwei Breiten rechts — eine fuer die Zahl, eine fuer das Wort — wurden
   geprueft und nicht gebraucht. Eine reicht fuer beide. */
/* **Versal und gesperrt ist woertlich die Rolle von I** — «Etikett,
   Tabellenkopf». Bis zum 29.08.2026 stand hier 12px, eine Groesse, die auf
   keiner der beiden Leitern liegt und sonst nur an einer einzigen weiteren
   Stelle vorkommt (`.sp-ereig`).

   **Gleiche Rolle, gleiche Stufe** — dieselbe Ueberlegung wie beim Etikett
   der Statistiktabelle: «Das Etikett ist leiser als die Zahl, sonst liest man
   die Kuerzel statt der Werte.» */
.rz-tag{display:inline-flex;align-items:center;font-family:var(--b);
  font-weight:700;font-size:var(--tx-etikett);letter-spacing:.1em;text-transform:uppercase;
  color:var(--papier-text);padding-top:3px}
/* ── Zwei Zeichen an der Spielzeile ──────────────────────────────────────
   **Der Pfeil sagt: die Zeile fuehrt irgendwohin.** Am 27.08.2026 stand
   dagegen die Regel «ein ganzflaechiger Verweis traegt einen Pfeil — es sei
   denn, dort steht schon eine Angabe». Sie ist hier ueberstimmt worden, und
   der Grund gehoert dazu: Auf dem Handy gibt es keinen Zeiger, und eine
   Flaeche, die beim Antippen woandershin fuehrt, ohne es vorher zu sagen, ist
   eine Ueberraschung. **Der Preis steht rechts sichtbar** — bei einer
   Spielplanzeile stehen jetzt Haus, Wort und Pfeil nebeneinander.

   **Die feste Spur ist noetig**, sonst verschoebe das Berichtssymbol die
   Resultate gegeneinander: Mit `width` fluchten alle Pfeile untereinander,
   auch wenn links davon verschieden viel steht. */
/* **Leiser als das Berichtszeichen, und mit mehr Luft davor.**
   Der Pfeil steht auf JEDER Zeile, das Berichtszeichen nur auf manchen. Beide
   in Gold liessen sie um dieselbe Aufmerksamkeit streiten — und das haeufigere
   gewinnt, obwohl es weniger sagt. Er traegt darum `--papier-halb`.

   Die Fuge davor ist doppelt so gross wie zwischen Resultat und Bericht:
   So liest er als Abschluss der Zeile und nicht als vierte Angabe.

   **Und er bleibt, obwohl er sich wiederholt.** Auf dem Handy gibt es keinen
   Zeiger — die Antwort des Projekts fuer ganzflaechige Verweise, «beim Zeigen
   wird die Flaeche grau», existiert dort nicht. Wer den Spielplan auf dem Weg
   zum Platz liest, saehe sonst nichts, was auf einen Klick hindeutet. Die
   Regel vom 27.08.2026 — «der Pfeil tritt zurueck, wenn rechts schon eine
   Angabe steht» — beantwortet, wie viele Zeichen an eine Kante passen, nicht,
   ob der Leser weiss, dass dort etwas ist. */
/* **Die Fuge davor ist Spaltenbreite, nicht Aussenabstand.** Mit
   `margin-left:16px` lag der Pfeil gemessen 16px ausserhalb der Zeile: Die
   Zeile endete bei 1360, der Pfeil begann bei 1362 — und die gelbe
   Hervorhebung der eigenen Mannschaft hoerte vor ihm auf. Ein Aussenabstand
   liegt ausserhalb der Zelle, und der Grund einer Zeile faerbt nur Zellen. */
.rz-pfeil{grid-column:5;grid-row:2;width:14px;flex:none;text-align:right;
  color:var(--papier-halb);font-size:14px;line-height:1;align-self:center}
/* **Ein zweites Berichtszeichen war gebaut und wieder entfernt.** `.rz-bericht`
   gab es bereits — Symbol mit Wort, unter dem Resultat. Meins stand daneben,
   ohne Wort, und die Zeile trug beide. **Nachgesehen haette es vor dem Bauen
   gehoert**, nicht danach. */
/* **Das Berichtszeichen sagt nicht «klickbar», sondern «es gibt einen
   Bericht».** Alle Zeilen fuehren auf die Spielseite; nur ein Teil hat einen
   Matchbericht. Das Zeichen traegt damit eine Auskunft, die die Zeile sonst
   nicht gibt — und es ist keine Wiederholung des Verweises.

   **Es steht unter dem Ergebnis, in derselben Spur.** Eine vierte Spur kostete
   gemessen 34px Breite und liess jede Zeile um 44px wachsen; die rechte Zelle
   traegt beides ohne zu wachsen. Dasselbe Verfahren wie beim Heim-Etikett
   unter 560px.

   Gedaempft und klein: Es ist ein Zusatz, keine zweite Ueberschrift. Wer nur
   Resultate lesen will, soll darueber hinwegsehen koennen. */
.rz-bericht{position:relative;z-index:1;grid-column:4;grid-row:2;
  display:flex;align-items:center;justify-content:center;gap:5px;
  margin-top:5px;font-family:var(--b);font-weight:700;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--papier-halb)}
.rz-bericht .ic{width:11px;height:11px}
@media(max-width:560px){.rz-bericht{justify-content:flex-end}}
.rz-tag.ausw{color:var(--papier-halb)}
/* ── «A» und «H», auf allen Breiten ──────────────────────────────────────

   ⚠ **Hier standen zwei Darstellungen — 12.09.2026 auf eine gebracht.** Bis
   heute Mittag trug die Zeile ueber 560px ein Symbol und das ausgeschriebene
   Wort, darunter einen Buchstaben; `.rz-tag-kurz` war oben `display:none`
   und unten wieder sichtbar.

   > **Zwei Darstellungen sind zwei Orte zum Aendern, und einer davon wird
   > vergessen.**

   ⚠ **Das Flugzeug ist weg**, und mit ihm das Haus: Ein Auswaertsspiel in
   Zollikon ist kein Flug, und ein Paar, von dem eine Haelfte nicht passt,
   ist kein Paar. `#i-heim` und `#i-ausw` sind aus `inc/symbole.php`
   entfernt — sie hatten ausser hier keinen Leser (gemessen).

   **«A» traegt einen grauen Rahmen, «H» den gelben Grund** — dieselbe
   Unterscheidung, die `.rz-tag.ausw` schon mit der Textfarbe machte. */
.rz-tag-kurz{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:20px;border-radius:3px;letter-spacing:0;flex:none}
.rz-tag.ausw .rz-tag-kurz{border:1px solid currentColor}
.rz-tag:not(.ausw) .rz-tag-kurz{background:var(--gelb);color:#000}
/* ⚠ **Das Wort bleibt fuer Vorleser** — die Behandlung von `.vh`,
   auf allen Breiten. Der Buchstabe traegt `aria-hidden`; ohne den
   Nachbarschaftswaehler stuende bei «Verschoben» nur ein Nichts, denn diese
   Zeilen haben keinen Buchstaben und behalten darum ihr sichtbares Wort. */
.rz-tag-kurz + .rz-tag-wort{position:absolute;width:1px;height:1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ══ DIE ZEILE AUF DEM HANDY — EINE FASSUNG FUER ALLE ORTE, 23.09.2026 ══

   Didis Aufbau: oben Datum/Zeit links und die Marke H/A rechts, darunter
   die zwei Mannschaften untereinander mit den Wappen auf derselben linken
   Kante, darunter klein der Ort und die Wettbewerbszeile.

   ⚠⚠ **Der Block steht ganz am Ende der Zeilenregeln, und das ist
   tragend.** `.rz-pfeil{grid-column:5}` und `.rz-bericht{grid-column:4}`
   stehen weiter oben in dieser Datei. Bei gleichem Gewicht gewinnt die
   spaetere Regel — ein Handyblock vor ihnen setzte Spuren, die sie
   danach still zurueckdrehen. Genau daran krankte die alte Fassung nicht,
   weil sie diese zwei gar nicht anfasste; wer sie hier ergaenzt haette,
   waere hineingelaufen.

   ⚠ **Die Kinder von `.rz-ziel` werden ueber `:nth-child()` gestellt und
   nicht ueber Klassen.** Sie tragen keine: Die zwei Wappen kommen aus
   `fch_wappen_feld()` und heissen beide `.wappen`, das Resultat heisst je
   nach Zustand `.rz-res` oder `.rz-strich`. Die Reihenfolge im Markup ist
   dagegen fest und in `inc/spielzeile.php` begruendet:

     1 Heimname · 2 Heimwappen · 3 Resultat/Strich · 4 Gastwappen · 5 Gastname

   > **Wer diese Reihenfolge im Markup aendert, muss hier mitziehen** —
   > und zwar sofort, denn die Zeile bliebe sonst lesbar und waere falsch
   > herum.

   ⚠ **Das Resultat steht rechts ueber beide Zeilen.** Didis Aufbau nennt
   es fuer das Handy nicht; die Alternative waere gewesen, es zwischen die
   zwei Mannschaften zu setzen, wo es die «derselben linken Kante»
   unterbraeche. Rechts danebengestellt bleibt es eine Angabe zur ganzen
   Paarung — was es ist, denn das Markup fuehrt EIN «2:0» und nicht zwei
   Torzahlen.

   ⚠ **Der Pfeil steht NICHT neben der Marke** — abgeloest am 23.09.2026
   spaetabends. Hier stand:

   > ~~«Der Pfeil bleibt, rechts neben der Marke. Er traegt `aria-hidden` und
   > ist Schmuck — aber er ist auch das Zeichen, dass die Zeile irgendwo
   > hinfuehrt. Ihn wegzunehmen waere eine Aenderung, die niemand bestellt
   > hat; Didis «Marke H/A rechts» ist damit erfuellt, sie steht rechts.»~~

   **Der mittlere Satz traegt weiter, die Platzierung nicht.** Didi hat den
   Pfeil am selben Abend auf die Hoehe der PAARUNG bestellt; die Begruendung
   und die Messung stehen unten beim Handyblock. */
/* ⚠⚠ **DIE SCHWELLE IST AM 23.09.2026 ABENDS VON 639 AUF 1023 GESTIEGEN.**

   > ~~«`@media(max-width:639px)`»~~ — Stand 23.09.2026 nachmittags.

   Didis Bedingung: «dazwischen darf kein Bereich entstehen, in dem Namen
   umbrechen oder ueberlaufen.» Gemessen an seinen zwei Beispielnamen, in der
   Schrift der Zeile (`canvas.measureText` auf den berechneten Font):

     «FC Bruettisellen-Dietlikon 1»   noetig 205px
     «Juniorinnen G + F»              noetig 135px

     Bildschirm   1440   1280   1100   1024    900    820    760
     Namensspalte  357    341    251    213    151    111     99

   **Unter 1024 reicht die Spalte fuer den laengeren Namen nicht mehr.** Die
   breite Form haette dort umgebrochen — und zwar ueber 380 Pixel Breite
   hinweg, also nicht am Rand, sondern mitten im Gebrauchsbereich.

   ⚠ Die Schwelle ist damit NICHT mehr «Handy», sondern «zu schmal fuer zwei
   Namen nebeneinander». Tablets und schmale Laptops bekommen die gestapelte
   Form. Das ist der Preis fuer Didis Bedingung, und er ist der guenstigere:
   Ein umgebrochener Name kostet zwei Zeilen und die Flucht der ganzen Liste.

   ⚠ **Wer die Spaltenbreiten aendert, muss diese Zahl nachmessen.** Sie haengt
   an den vier festen Spuren (130 Datum, 60 Mitte, 86 Bericht, 30 Pfeil) und
   an den vier Zwischenraeumen. `_wegwerf/_namen.py` im Verlauf von b90ac9f
   zeigt, wie gemessen wurde. */
/* ── ⚠⚠ DIE WETTBEWERBSZEILE LAG AUF DEM HEIMNAMEN ────────────────────

   > ~~«`.rz-zeit{grid-row:1}` · `.rz-tag{grid-row:1}` · `.rz-pfeil{grid-row:1}`
   > · `.rz-mitte{grid-row:2}`»~~ — Stand 23.09.2026 abends, fehlerhaft.

   **Der Fehler entstand erst durch den Umzug der Wettbewerbszeile.** Sie ist
   am selben Abend aus `.rz-mitte` herausgezogen worden und traegt seither in
   der Grundregel `grid-row:1`, damit sie auf der linken Kante der ZEILE
   beginnt. Der Handyblock belegte dieselbe Reihe 1 aber schon mit Datum,
   Marke und Pfeil — zwei Rasterzuweisungen auf dieselbe Zelle, und im Raster
   heisst das nicht «nebeneinander», sondern **uebereinander**.

   > **Eine Aenderung an der Grundregel kann eine Medienabfrage kaputtmachen,
   > ohne sie anzufassen.** Die eine setzte eine Reihe, die andere hatte ihre
   > eigene Vorstellung davon, was in Reihe 1 steht; keine der beiden Stellen
   > sah fuer sich falsch aus.

   Didis Aufbau, fuenf Zeilen untereinander:

     1  Wettbewerb                       ueber die ganze Breite
     2  Datum und Zeit links · Marke H/A rechts
     3  Heimwappen · Heimname            (+ Heimtore rechts)
     4  Gastwappen · Gastname            (+ Gasttore rechts)
     5  Ort

   ⚠ **Das Resultat steht je Mannschaft und nicht mehr als Trenner.** Das
   Markup fuehrt EIN `.rz-res` mit drei Kindern (`<span>2</span><i>:</i>
   <span>0</span>`); die zwei Zahlen gehoeren aber in zwei verschiedene
   Rasterzeilen. `display:contents` loest den Kasten des Elternteils auf, und
   die drei Kinder werden selbst Rasterkinder von `.rz-ziel` — so lassen sie
   sich einzeln setzen, ohne das Markup zu aendern. Der Doppelpunkt entfaellt
   dabei: Er verbindet zwei Zahlen, die nicht mehr nebeneinander stehen.

   ⚠ Die Farbregeln des Resultats (`.rz-res.nied span`) treffen weiterhin die
   Spans und nicht den aufgeloesten Kasten — sie bleiben unberuehrt.

   ── ⚠⚠ DER PFEIL KOMMT ZURUECK — 23.09.2026, SPAETABENDS ──────────

   > ~~«**Der Pfeil entfaellt, und das kostet keine Bedienbarkeit.** Gemessen:
   > `a.rz-ziel::after{content:'';position:absolute;inset:0}` spannt den
   > Verweis ueber die ganze Zeile (`.rz` ist `position:relative`). Der Pfeil
   > war `aria-hidden` und damit reiner Schmuck; die Flaeche bleibt, wie sie
   > war.»~~ — Stand 23.09.2026 abends.

   **Die Messung stimmt, die Folgerung nicht.** Sie belegt, dass die
   TREFFERFLAECHE ohne den Pfeil dieselbe bleibt — nicht, dass jemand sie
   findet. Auf dem Handy gibt es keinen Zeiger und damit auch kein «beim
   Zeigen wird die Flaeche grau»: **ein ganzflaechiger Verweis ohne Hinweis
   ist unsichtbar.** Didis Befund: «Es fehlt der Hinweis, dass die Zeile zum
   Spiel fuehrt.»

   > **«Schmuck» war die falsche Einordnung.** Ein Zeichen, das die einzige
   > Auskunft ueber die Bedienbarkeit traegt, ist kein Schmuck.

   ── ⚠⚠ ER STEHT IN REIHE 3, NICHT NEBEN DER MARKE ────────────────

   Didi: «Vertikal auf der Mitte zwischen den beiden Mannschaften, nicht auf
   Hoehe der Marke H/A.» Die Marke sitzt in Reihe 2, die Paarung in Reihe 3.

   ⚠ **Reihe 3 trug bis heute `.rz-mitte` — also Paarung UND Ort.** Ein
   `align-self:center` darauf setzte den Pfeil auf die Mitte von beidem,
   gemessen rund 12px unter die Mitte der Paarung. `.rz-mitte` ist darum
   `display:contents`: Paarung und Ort werden selbst Rasterkinder und
   bekommen eigene Reihen. **Dieselbe Bauart wie beim Resultat wenige Zeilen
   tiefer** (`.rz-ziel > .rz-res{display:contents}`) und aus demselben
   Grund — zwei Stuecke einzeln stellen, ohne das Markup anzufassen.

   ⚠ **Der Ort traegt darum `margin-top:2px` statt der 6px der Grundregel.**
   Vorher lag er im Fluss von `.rz-mitte` und hatte keine Fuge ueber sich;
   jetzt traegt die Reihenfuge 4 davon. 4 + 2 = 6, und die Zeile ist damit
   genau gleich hoch geblieben — gemessen 163.38 / 141.78 / 202.97px bei 390,
   Differenz 0.00 an allen 17 sichtbaren Zeilen der vier Listen.

   ⚠⚠ **Die leere Reihe 4 kostete 4px — daher die `:has()`-Regel beim
   Bericht.** Fehlt der Ort, bleibt Reihe 4 leer, und ihre zwei Fugen zaehlen
   trotzdem, sobald darunter der Bericht steht. Gemessen an einem kuenstlich
   auf leer gesetzten Ort: **+4.00px mit fester Reihe 5, +0.00 mit der
   `:has()`-Regel.** Ohne Bericht kostete die leere Reihe nichts — dort gibt
   es keine Reihe 5, die eine zweite Fuge braeuchte.

   > **Im Bestand kommt der Fall nicht vor** — alle elf Spiele tragen einen
   > Ort, auch das eine mit Matchbericht. Wer nur den Bestand misst, bekommt
   > «in Ordnung» und hat nichts geprueft.

   ⚠ Die `:has()`-Regel steht NUR hier und nicht noch einmal unter 560:
   `.rz:has(.rz-wo) .rz-bericht` traegt drei Klassen, `.rz-bericht` dort
   eine. **Sie gewinnt ueber Gewicht und nicht ueber Reihenfolge** — der
   Block unter 560 darf seine Reihe 4 darum behalten.

   ── ⚠⚠ DIESELBE x-KANTE IN BEIDEN LISTEN — DIE EIGENTLICHE AUFGABE ──

   Didi: «Bei den Resultaten steht er ganz aussen, rechts neben den
   Ergebniszahlen — an derselben Stelle wie im Spielplan.»

   **Rechts steht in den zwei Listen Verschiedenes:** im Spielplan nichts,
   bei den Resultaten die zwei Torzahlen. Ein Pfeil, der sich an das
   anhaengt, was schon dasteht, stuende damit an zwei Kanten. **Die Loesung
   ist eine dritte Rasterspur von 14px, die es in BEIDEN Listen gibt** — die
   Paarung endet an ihr, die Zahlen enden mit der Paarung, der Pfeil steht
   darin. Gemessen, rechte Pfeilkante gegen rechte Zeilenkante:

     Breite   Zeilenkante   Spielplan   Resultate   Differenz
      560         542          542         542          0
      390         372          372         372          0
      360         342          342         342          0

   **Der Preis steht bei den Zahlen:** ihre rechte Kante wandert von 372 auf
   350 (bei 390) und von 342 auf 320 (bei 360) — 22px, also die Spur plus
   ihre Fuge. Genau das ist «rechts neben den Ergebniszahlen».

   ⚠ **Was es den Namen kostet, ist gemessen und reicht.** Die Namenszelle
   faellt bei 360 von 272 auf 250 (Resultate) und von 284 auf 262
   (Spielplan). Der laengste Name aus Didis Bedingung zur 1023er-Schwelle,
   «FC Bruettisellen-Dietlikon 1», braucht 205px. **Kein Umbruch an keiner
   der 17 Zeilen, kein Ueberlauf, kein waagrechter Rollbalken.**

   ⚠⚠ **Und die Marke bleibt, wo sie ist** — Didis Bedingung. Sie spannt
   `2 / -1` statt nur Spur 2; die `auto`-Spur schrumpft dadurch auf 0, weil
   ihr Inhalt (22px Buchstabenkasten) in 14px Pfeilspur plus 8px Fuge schon
   Platz hat. **Damit ist Spur 1 vorher wie nachher gleich breit.** Gemessen
   vorher gegen nachher, an allen 17 Zeilen: rechte Markenkante 372 (390)
   und 342 (360), Differenz 0 — senkrecht wie waagrecht. Der Pfeil steht
   43.89px unter ihrer Mitte, also ausdruecklich nicht auf ihrer Hoehe. */
@media(max-width:1023px){
  /* ⚠ **Drei Spuren, und die dritte gehoert dem Pfeil** — seit dem
     23.09.2026 spaetabends wieder. Hier stand: ~~«Zwei Spuren genuegen: der
     Pfeil, der die dritte brauchte, ist weg.»~~ Warum er zurueck ist und
     warum die Spur in BEIDEN Listen stehen muss, steht ueber dieser
     Medienabfrage.

     ⚠⚠ **Die zwei Listenwaehler stehen mit dabei, und das ist noetig.**
     Fassung D fuehrte `.planliste:has(.rz-tag) .rz` und
     `.rliste:has(.rz-tag) .rz` mit eigenem Raster — drei Waehler gegen
     einen, also hoeheres Gewicht. Ein blosses `.rz` haette dort verloren,
     und zwar nur in gemischten Listen: **der Fehler waere je nach
     Listeninhalt da oder nicht.** */
  .rz,
  .planliste:has(.rz-tag) .rz,
  .rliste:has(.rz-tag) .rz{grid-template-columns:minmax(0,1fr) auto 14px;gap:4px 8px}
  .rz-wett{grid-column:1 / -1;grid-row:1}
  .rz-zeit{grid-column:1;grid-row:2;padding-top:0}
  /* **Schmal traegt jede Zeile ihr eigenes Datum** — Didis Auftrag vom
     23.09.2026; die Begruendung steht oben bei `.rz-zt-voll`. Beide Regeln
     zusammen, weil eine ohne die andere zwei Zeiten nebeneinander stellt. */
  .rz-zt-voll{display:inline}
  .rz-zt-kurz{display:none}
  .rz-tag{grid-column:2 / -1;grid-row:2;justify-self:end}
  .rz-pfeil{grid-column:3;grid-row:3;align-self:center}
  .rz-mitte{display:contents}
  .rz-teams{grid-column:1 / 3;grid-row:3}
  /* Linksbuendig, weil die Paarung darueber es auch ist. */
  .rz-wo{grid-column:1 / -1;grid-row:4;margin-top:2px;text-align:left}
  .rz-bericht{grid-column:1 / -1;grid-row:4;justify-self:start}
  .rz:has(.rz-wo) .rz-bericht{grid-row:5}

  /* Die zwei Mannschaften untereinander, beide Wappen auf einer Kante. */
  .rz-ziel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;column-gap:8px;row-gap:4px}
  .rz-ziel > :nth-child(2){grid-column:1;grid-row:1}
  .rz-ziel > :nth-child(1){grid-column:2;grid-row:1;text-align:left}
  .rz-ziel > :nth-child(4){grid-column:1;grid-row:2}
  .rz-ziel > :nth-child(5){grid-column:2;grid-row:2;text-align:left}

  /* Das Resultat je Mannschaft; der Trenner entfaellt. */
  .rz-ziel > .rz-strich{display:none}
  .rz-ziel > .rz-res{display:contents}
  .rz-ziel > .rz-res > i{display:none}
  .rz-ziel > .rz-res > span:first-child{grid-column:3;grid-row:1;text-align:right}
  .rz-ziel > .rz-res > span:last-child{grid-column:3;grid-row:2;text-align:right}

  /* ⚠ **Die Regel steht seit dem 23.09.2026 spaetabends oben bei den
     Platzierungen**, zusammen mit Reihe und Aussenabstand des Orts: Eine
     Eigenschaft eines Bauteils an zwei Stellen im selben Block ist eine
     Stelle zuviel. Hier stand: ~~`.rz-wo{text-align:left}`~~ */

  /* ── ⚠⚠ DIE MARKE NUR IM SPIELPLAN, NICHT IN DEN RESULTATEN ────────

     Didis Entscheid vom 23.09.2026, wenige Stunden nachdem die Marke in
     den Resultatlisten ueberhaupt erst erschienen ist: **schmal entfaellt
     sie dort wieder.** Im Spielplan bleibt sie auf beiden Breiten.

     Der Grund liegt im Unterschied der zwei Listen: **Im Spielplan ist
     «Heim» oder «Auswaerts» die Auskunft, nach der man sucht** — man
     will wissen, ob man hinfaehrt. Unter einem gespielten Spiel ist sie
     eine Randnotiz neben der Zahl, die zaehlt, und auf dem Handy kostet
     jede Randnotiz eine Zeile.

     ⚠ **Unterschieden wird am BEHAELTER und nicht am Spielzustand.**
     `$hat_resultat` waere naheliegend und falsch: Eine abgesagte Zeile
     ohne Resultat steht im Spielplan und traegt dort ihren Zustand als
     Marke — wer auf das Resultat prueft, blendete sie im Spielplan aus.
     `.rliste` umschliesst die Resultatzeilen an BEIDEN Orten
     (`page-spiele.php` und `single-fch_team.php`), `.planliste` die des
     Spielplans; dieselben zwei Klassen tragen schon die Knopfbreite.

     ⚠ 1023 ist die Schwelle dieser Zeile und keine neue Zahl: Es ist
     dieselbe, ab der die Zeile ihre gestapelte Form annimmt. «Handy»
     heisst hier wie dort «zu schmal fuer zwei Namen nebeneinander». */
  .rliste .rz-tag{display:none}
}

/* ── Die vier Zustaende eines Spiels ───────────────────────────────
   angesetzt · verschoben · abgesagt · forfait. Rechts steht IMMER das
   Ergebnis der Zeile — bei einem kommenden Spiel, ob man hinfaehrt, bei
   einem gestoerten der Zustand, bei einem gespielten die Zahl.

   **Keine Ampelfarbe, und kein Grau.** Das Projekt fuehrt Rot allein fuer den
   dringenden Hinweisbalken; es ist besetzt. Und Grau waere hier falsch herum:
   `.anl-vorbei` daempft einen vergangenen Anlass, weil er keine Aufmerksamkeit
   mehr braucht. Ein abgesagtes Spiel in einer Zukunftsliste braucht sie gerade
   — von dem, der hinfahren wollte. **Daempfen macht die Warnung leiser.**

   **Die Durchstreichung ist die einzige neue Auszeichnung im Projekt.** Sie
   sagt ohne Farbe und ohne Wort, dass diese Zeit nicht mehr gilt.

   **Heim/Auswaerts faellt bei verschoben und abgesagt weg** und wird nicht
   vermisst: die zweite Zeile nennt den Ort ohnehin. Gemessen, nicht vermutet.

   **Forfait steht in der zweiten Zeile und nicht unter der Zahl.** Zweimal
   richtig: unter der Zahl lief die Marke bei 390 um 7px ueber die 74er-Spalte,
   und sie ist eine Aussage ueber das SPIEL, nicht ueber die Zahl.

   **Ein abgesagtes Spiel behaelt seine Zeilenform, wenn es nach seinem Datum
   in die Resultate wandert.** Gemessen bei 1440: gleiche Hoehe 76, gleiche
   Spurbreite 100, gleiche linke Kante 1260 wie alle Zahlen darueber. Es sieht
   nicht aus wie ein Fremdkoerper, sondern wie eine Zeile, deren Ergebnis ein
   Wort ist. */
.rz-tag.gestoert{font-weight:800}
.rz-zeit.hin{text-decoration:line-through;text-decoration-thickness:1px;
  text-decoration-color:var(--papier-halb)}
/* Der Nachsatz in der zweiten Zeile: was an die Stelle des Termins tritt. */
.rz-wo b{color:var(--papier-text);font-weight:700}
/* Unter 560px wandert das Resultat nach rechts neben beide Textzeilen; die
   Zeitangabe rueckt ueber die Begegnung. 559 ist der Partner von 560 — die
   Breite, die das Projekt fuer Eingabefelder und Kachelraster fuehrt. */
@media(max-width:559px){
  /* **Vier Faelle, vier Regeln, keine Ueberschneidung.** Unter 560px haengt
     die rechte Spurbreite an zwei Fragen: traegt die Liste Etiketten (dann
     100 statt 74), und traegt sie Verweise? Beide sind `:has()`-Regeln mit
     gleichem Gewicht — nebeneinander geschrieben entschied die Reihenfolge in
     der Datei, und gemessen standen die Ergebnisse EINER Liste an zwei
     verschiedenen Kanten, 222 und 272. Ausgeschrieben entscheidet die Sache.

     **Die vier Regeln muessen ALLE hier stehen, auch die, die dasselbe sagen
     wie die Grundregel.** Die Verweisregeln ausserhalb der Medienabfrage
     tragen `:has()` und damit mehr Gewicht als `.rz` — ohne eine Fassung
     hier drin behielte eine Liste mit Verweisen bei 390 ihre vier
     Desktop-Spuren. Gemessen: 130px 42px 100px 34px, die Begegnung in 42
     Pixeln. */
  /* **Hier standen zwei Fassungen, die nie einen Bildschirm erreicht haben
     — entfernt am 28.08.2026.** `.rz{grid-template-columns:minmax(0,1fr) 74px}`
     und die `:has()`-Fassung mit `100px` wurden weiter unten im selben Block
     von denselben Selektoren mit `minmax(0,1fr) auto 14px` ueberschrieben.
     Gleicher Selektor, gleicher Kontext, gleiche Eigenschaft: die spaetere
     gewinnt.

     **Die Messung, die hier stand, ist mitgeloescht und nicht uebernommen.**
     Sie lautete «Gemessen: 130px 42px 100px 34px, die Begegnung in 42 Pixeln»
     und beschrieb einen Zustand, den die tote Regel haette erzeugen sollen.
     Eine Messung an einer Regel, die nicht wirkt, ist eine Falschaussage mit
     Beleg — und Messungen im Kommentar werden in diesem Projekt geglaubt.

     **Was gilt, steht weiter unten**, bei «Pfeil und Ergebnis stehen
     nebeneinander». Wer die 74px sucht: Es gab sie nie zu sehen. */

  /* **Unter 560px bekommt der Verweis KEINE eigene Spur.** Eine vierte Spur
     kostet dort 34px Breite, die mittlere Spalte faellt von 238 auf 188, und
     gemessen wuchs jede Spielplanzeile um 44px — bei zwoelf Zeilen ueber 500.
     Stattdessen steht das Zeichen UNTER dem Ergebnis, in derselben Spalte:
     die rechte Zelle ist ohnehin rund 100px hoch und traegt beides, ohne dass
     die Zeile waechst und ohne dass dem Text Platz genommen wird.

     **Ueber 560 gilt die 100 fuer Zahl und Etikett, damit sie fluchten.**
     Darunter gibt es diese Flucht nicht mehr: die Zeile hat zwei Spuren statt
     drei. Die 74 bleiben der Zahl, weil die 100 dort gemessen zwei
     zusaetzliche Umbrueche in der Begegnung kosteten und 43px auf «Spielplan
     & Resultate».

     **Und die Spurbreite gilt je LISTE, nicht je Zeile.** Bis zum 24.08.2026
     stand hier `.rz:has(.rz-tag)` — jede Zeile fuer sich. Sobald eine Liste
     gemischt ist (eine abgesagte Zeile zwischen Resultaten), bekam sie zwei
     Spurbreiten, und die rechte Spalte sprang um 26px: linke Kanten 272 und
     298 statt einer. */
  /* ── Fassung D, 27.08.2026 ────────────────────────────────────────────
     **Die Begegnung fuehrt die Zeile, das Datum rueckt darunter.** Vorher
     stand das Datum in der ersten Zeile und die Begegnung darunter — bei 390
     wuchs die Zeile damit auf vier Textzeilen, weil der Wettbewerb zweimal
     umbrach.

     **Rechts steht, was die Zeile beantwortet:** die Zahl bei Resultaten,
     «Heim»/«Auswaerts» beim Spielplan. **Die Spur ist damit immer belegt** —
     das war der Einwand gegen die Fassung mit dem Resultat vorne, wo sie beim
     Spielplan leer geblieben waere.

     **Der Preis: Das Datum verliert seine Spur.** Bei zwoelf Zeilen fluchten
     die Daten nicht mehr untereinander; wer nach einem Datum sucht, liest
     statt zu scannen. Bei einer Liste in Zeitfolge ist das vertretbar — die
     Reihenfolge sagt es ohnehin. */
  .rz-zeit{grid-column:1;grid-row:2;order:2;padding-top:0;margin-top:3px}
  /* ── ⚠⚠ FASSUNG D GIBT DIE PLATZIERUNG AB — 23.09.2026 ─────────

     Was hier ab dem 27.08.2026 stand, ist eine VOLLSTAENDIGE eigene
     Handyfassung der Zeile gewesen. Didi hat am 23.09.2026 abends eine
     neue bestellt — fuenf Stuecke untereinander —, und zwei Fassungen
     derselben Zeile sind eine zuviel.

     ⚠⚠ **Sie hat die neue still ueberstimmt, und das ist der Befund.**
     Die neue Fassung steht weiter oben in dieser Datei; bei gleichem
     Gewicht gewinnt die spaetere Regel. Gemessen bei 390: `.rz-mitte`
     stand auf `row 1` statt `row 3`, `.rz-tag` auf `row 1` statt `row 2`,
     und das Raster fuehrte weiter drei Spuren. Sichtbar war davon: **die
     Wettbewerbszeile lag auf dem Heimnamen.**

     > **Zwei Medienabfragen fuer dieselbe Zeile sehen einzeln beide
     > richtig aus.** Die eine wurde gelesen, die andere nicht gefunden —
     > sie stand 120 Zeilen weiter unten, hinter einem Absatz ueber das
     > Berichtszeichen.

     Die Begruendungen darueber bleiben stehen: sie belegen, warum das
     Datum seine Spur verlor und warum die rechte Spur immer belegt sein
     muss. **Beide Gruende gelten in der neuen Fassung weiter** — dort
     steht das Datum in Reihe 2 und die Marke daneben.

     Abgeloest, mit Datum, statt geloescht:

     > ~~`.rz-mitte{grid-column:1;grid-row:1}`~~
     > ~~`.rz{grid-template-columns:minmax(0,1fr) auto 14px;gap:0 10px}`~~
     > ~~`.planliste:has(.rz-tag) .rz,`~~
     > ~~`.rliste:has(.rz-tag) .rz{grid-template-columns:minmax(0,1fr) auto 14px}`~~
     > ~~`.rz-pfeil{grid-column:3;grid-row:1;justify-self:end;`~~
     > ~~`  align-self:start;margin-left:0;padding-top:2px}`~~
     > ~~`.rz-tag{grid-column:2;grid-row:1;align-self:start;justify-self:end}`~~
     > ~~`.rz-ziel{gap:0 6px}`~~

     ⚠ `.rz-zeit` bleibt: seine Reihe stimmt mit der neuen Fassung
     ueberein, und `margin-top:3px` gehoert weiter dorthin. */
  /* Der Wettbewerb steht als Etikett ueber der Begegnung — siehe die Regel
     ausserhalb der Medienabfrage. Hier ist nichts zu tun. */
  /* **Unter 560 steht der Pfeil UNTER dem Ergebnis**, dem Muster des alten
     FVRZ-Zeichens folgend: keine eigene Spur, sondern dieselbe Zelle.

     **Der Weg daneben ist gemessen und verworfen.** Am 27.08.2026 auf 96px
     verbreitert, damit Zahl und Pfeil nebeneinander passen — die
     Spielplanansicht wuchs bei 390 dadurch um 490px statt um 132. Die 22px,
     die der mittleren Spalte fehlten, kosteten in fast jeder Zeile einen
     zusaetzlichen Umbruch: genau der Befund, der zwei Absaetze weiter oben
     schon steht.

     Der Preis der bleibenden Fassung sind 132px auf der Spielplanansicht,
     elf je Zeile. Er ist der kleinere von zweien. */
  /* Pfeil und Ergebnis stehen nebeneinander in der ersten Zeile — die
     Begegnung darueber nimmt nur noch eine Textzeile, also ist der Platz da.
     Die 14px des Pfeils kosten der mittleren Spalte weniger, als die vierte
     Textzeile vorher kostete. */
  /* ⚠ **Der mobile Sonderblock fuer «A»/«H» ist am 12.09.2026 entfallen.**
     Er galt einen halben Tag: unter 560px Buchstabe, darueber Symbol und
     Wort. Jetzt gilt eine Darstellung auf allen Breiten, und sie steht
     oben bei `.rz-tag-kurz` — **an einer Stelle, nicht an zweien.** */

  /* ⚠ `.rz-res` ist hier entfallen — es steht seit dem 23.09.2026 in der
     Begegnungszeile und nicht mehr in einer eigenen Spur. */
  /* **Die Mitte schrumpft mit den Wappen.** Ueber 760 sind die Wappen 32px
     und die Mitte 60; darunter 24 und 46. Ohne das Schrumpfen blieben bei
     360px fuer zwei Klubnamen je 91px — gemessen zu wenig fuer «FC
     Niederweningen 1», das dann in drei Zeilen umbrach. */
  .rz-teams .rz-res,.rz-teams .rz-strich{flex:0 0 46px}
  /* **Das Berichtszeichen wird zum Verweis mit Trefferflaeche.**
     Es mass als Textzeile 11px hoch — zu klein fuer ein eigenes Ziel. Ein
     erster Anlauf machte einen 44px-Kasten daraus, rechts unter dem Ergebnis:
     **Der Rahmen machte aus einem Verweis einen Knopf**, und ein Knopf
     verspricht eine Handlung. Er war ausserdem so gross wie das Resultat und
     sagte weniger.

     Jetzt links unter der Datumszeile, wo es vorher stand — nur mit Polster
     und Unterstrich. **Es sieht aus wie ein Verweis, weil es einer ist**, und
     der Unterstrich im Ruhezustand ist die Antwort, die das Projekt fuer
     Verweise ohne Zeiger schon gefunden hat.

     Gemessen: 36px Trefferhoehe statt 11. */
  .rz-bericht{grid-column:1;grid-row:4;justify-self:start;justify-content:flex-start;
    margin:0;padding:9px 0;gap:6px;
    font-size:var(--tx-etikett);
    border-bottom:1px solid rgba(122,110,58,.4)}
  .rz-bericht .ic{width:13px;height:13px}
}

/* ── Ein schmalerer Behaelter fuer die Artikelansicht ──────────────
   Der Text steht auf 660px, der Behaelter auf 900 statt 1400. Damit liegt das
   Weiss auf beiden Seiten statt nur rechts: bei 1440 beginnt der Behaelter bei
   270 statt bei 20.

   **Das ist NICHT «Text mittig», was am 23.08.2026 gemessen und verworfen
   wurde.** Dort waere der Titel INNERHALB eines breiten Behaelters eingerueckt
   gewesen und haette als einzige Ansicht der Website nicht an der linken Kante
   des Behaelters gestanden — gemessen 351 statt 60px. Hier steht er an der
   linken Kante; die Kante liegt nur woanders. Wer den alten Entscheid liest,
   soll den Unterschied hier finden und ihn nicht zurueckdrehen.

   **900 ist kein neuer Wert:** `table:not(:has(tr > :nth-child(5)))` deckelt
   schmale Tabellen seit dem 22.08. auf genau 900px, und aus demselben Grund —
   zwischen erstem und letztem Wort einer Zeile soll nicht ein Meter Leere
   liegen.

   **Der Seitenkopf zieht mit**, sonst spraenge die linke Kante zwischen
   Brotkrume und Text. Deshalb gilt die Regel fuer `.wrap` der ganzen Ansicht
   und nicht je Abschnitt. */
/* ── Der schmale Behaelter: eine Regel mit drei Traegern ───────────
   **Eine Ansicht, deren Inhalt nur Text ist, bekommt den schmalen Behaelter.
   Eine Ansicht mit breiten Bloecken nicht.** Das ist das Kriterium, und es
   macht aus zwei Bauarten eine Regel.

   Gemessen am 24.08.2026 ueber sechs Kandidaten bei 1440:

   - **archiv** — fuenf Ressorts, nichts Breites. Mit 1000: Hoehe unveraendert,
     Textzeile unveraendert. Kostet nichts. **Traegt.**
   - **kontakt** — nichts Breites, Inhalt ohnehin auf `--feldbreite` gedeckelt.
     Mit 1000: Hoehe unveraendert. **Traegt.**
   - **verein** — `.zahlen` (4 Spalten), `.g4`, `.zwei`. Mit 1000 gewinnt der
     Text nichts (681 so wie so) und drei Raster verlieren 400px. Nein.
   - **geschichte** — fuenf `.kapitel` zu zwei Spalten. Mit 1000: **+814px**.
     Nein.
   - **schiri** — zwei Ressorts plus Zahlenstreifen. Gemischt. Nein.
   - **sponsoren** — die Logowaende gingen von 1280 auf 880, die Kacheln
     wuerden schmaler. Nein.

   **Und die Frage lag anders, als sie gestellt war.** Bei der Artikelansicht
   war die Seite eine Textspalte, und der Deckel ruecken das Weiss auf beide
   Seiten. Hier ist es ein KASTEN, der breiter ist als sein Inhalt: ein
   `.ressort` misst 1280, sein Text 666 — **die Leere sitzt nicht neben den
   Kaesten, sondern in ihnen.** Der Deckel macht den Kasten 880 und die Leere
   214.

   **Schiri zeigt die dritte Moeglichkeit, und sie ist nicht gebaut:** der
   Deckel am RESSORT statt an der Ansicht. Dann behielte der Zahlenstreifen
   seine Breite und die zwei Textkaesten wuerden schmaler. Dieselbe Frage
   stellt sich auf «Sponsor werden», wo Preistabellen und Fliesstext
   nebeneinander stehen. Gestellt, nicht beantwortet. */
/* **Kontakt hat den Deckel am 30.08.2026 verlassen; Archiv behaelt ihn.**

   Der Grund oben gilt einer TEXTSPALTE: Ein Deckel haelt die Zeile lesbar.
   **Kontakt ist seit demselben Tag keine Textspalte mehr, sondern zwei
   Spalten** — Anschrift links, Ansprechperson rechts in einem `.info`, wie auf
   `fanion`, `bus` und `schiri`. Fuer diese Bauform arbeitete der Deckel gegen
   sich selbst.

   Gemessen bei 1440, vorher gegen nachher: Der Kasten steht bei **36 % ab
   x +842 statt 34 % ab +602** — zeichengleich mit den drei genannten Seiten.
   Die Anschrift misst **560 statt 508** und damit endlich `--feldbreite`, ihre
   eigene Variable; der Deckel hatte sie unter ihren eigenen Wert gedrueckt.

   **Und die Formularfelder bleiben, wo sie waren:** `.form`, `.fe`, `input`,
   `select` und `textarea` messen mit und ohne Deckel **560**, der Knopf 181.
   Nur der Aussenbehaelter `.kontaktform` waechst von 880 auf 1280, und der
   traegt nichts. Die Seitenhoehe aendert sich nicht (1257).

   ── UND AM 30.08.2026 IST AUCH ARCHIV GEFALLEN ────────────────────────

   Hier stand `.papier#v-archiv .wrap{max-width:1000px}` mit dem Satz «Archiv
   bleibt gedeckelt, weil es die Bauform ist, fuer die der Grund oben
   geschrieben wurde». **Nachgemessen stimmt das nicht.**

   Der Grund oben lautet: ein Deckel haelt die Zeile einer Textspalte lesbar.
   Gemessen wurde, was der Absatz tatsaechlich misst — mit Deckel und ohne:

       Breite   wrap            Absatz          Wirkung
       1440     1000 → 1400     693 → 693       keine
       1916     1000 → 1400     820 → 820       keine
       2560     1000 → 1400     808 → 820       12 Pixel

   **Der Deckel hielt keine Zeile lesbar.** Die Lesespalte kommt von
   `.lead{max-width:54ch}` — sie ist am ABSATZ gedeckelt und in `ch`, darum
   waechst sie mit `--tx-lead` von 693 auf 820. Der `.wrap`-Deckel greift erst,
   wenn er schmaler wird als 54ch, und das geschieht ein einziges Mal, bei
   2560, um zwoelf Pixel.

   > **Ein Deckel, der einmal um zwoelf Pixel greift, haelt nichts — er macht
   > eine Seite anders als ihre Nachbarn.**

   Denn `geschichte` und `verein` verhalten sich Zahl fuer Zahl wie `archiv`
   und tragen keinen Deckel: 693 bei 1440, 820 darueber. Mit Deckel war
   `archiv` ab 2560 die einzige der drei mit 808.

   **Damit ist derselbe Vorgang zum zweiten Mal gelaufen:** Am 30.08. frueh
   verliess Kontakt diesen Selektor, weil der Grund fuer es aufgehoert hatte
   zu gelten. Jetzt verlaesst ihn Archiv, weil der Grund **fuer keines von
   beiden** je getragen hat. Arbeitsregel 44 fragt, ob ein Grund noch fuer
   alle Ziele gilt; hier war die naechste Frage faellig — **ob er je fuer
   eines galt.** */
/* **Die Artikelansicht hat den Deckel seit dem 24.08.2026 nicht mehr mit
   Archiv und Kontakt gemeinsam.** 1100 statt 1000, und der Text 900 statt 760.
   Der Grund ist eine Kante, kein Platzgewinn: Der Titel bricht nicht mehr auf
   zwei Zeilen, das Telegramm hat Luft, und die Seite wirkt nicht mehr wie ein
   schmaler Streifen auf einem breiten Bildschirm.

   **1100 und 900 sind keine neuen Zahlen.** Der Entscheid lautete auf 1140 und
   880; beide haben nahe Verwandte im Projekt, und die Regel ist, sie zu
   nehmen: 1100 fuehrt `.mannschaftsbild`, 900 fuehrt die schmale Tabelle. Das
   zweite ist mehr als Sparsamkeit — eine Tabelle im Beitragstext endet damit
   auf derselben Kante wie der Text um sie herum.

   **Der Preis ist gemessen und wird in Kauf genommen: rund 98 Zeichen je Zeile
   statt 84.** Der Richtwert liegt bei 60 bis 75; wir waren schon darueber und
   gehen weiter. Die Zahl haengt am Messweg, und beide Wege stehen hier, damit
   keine dritte auftaucht: Gezaehlt bis zum tatsaechlichen Umbruch eines
   Fliesstextabsatzes sind es 84 bei 760 und rund 98 bei 900. Gerechnet aus der
   mittleren Zeichenbreite einer deutschen Probe (8,2px bei 17px Schriftgrad)
   passen 93 bzw. 110 hinein — die Zeile bricht an einer Wortgrenze und endet
   darum frueher. Zum Vergleich, damit die Grenze benannt ist: Die alte Website
   fuehrt 1160px Textspalte und damit 158 Zeichen. Bei 98 sind wir bei knapp
   zwei Dritteln davon.

   **Ein Behaelter, dessen Kinder alle einen eigenen Deckel tragen, wird durch
   Verbreitern nicht breiter.** Der erste Versuch setzte nur den `.wrap` auf
   1140 und gab das Bild frei — nichts wurde breiter, die Seite rueckte bloss
   nach links. Wer die Ansicht verbreitern will, aendert `--artikelbreite`,
   nicht den Behaelter. Der Behaelter entscheidet nur, wo die linke Kante
   liegt.

   ── UND AM 30.08.2026 IST AUCH DIESER DECKEL GEFALLEN ─────────────────

   Hier stand `.papier#v-artikel .wrap{max-width:1100px}`. **Der Absatz oben
   sagt selbst, warum er nicht noetig ist** — «wer die Ansicht verbreitern
   will, aendert `--artikelbreite`, nicht den Behaelter». Genau das ist
   nachgemessen worden: abgeschaltet, an sieben Breiten gemessen.

       Breite   wrap          Absatz   breitestes Kind   Bild   Hoehe
        390      390            354         354           354   3735
        768      768            732         732           732   3169
       1024     1024            900         900           900   3367
       1440     1100 → 1440     900         900           900   3448
       1916     1100 → 1916     900         900           900   3454
       2560     1100 → 2560     900         900           900   3454
       3440     1100 → 3440     900         900           900   3454

   **Kein einziger Wert wandert.** Jedes Kind des Behaelters ist schon durch
   `.papier#v-artikel .wrap > *{max-width:var(--artikelbreite)}` auf 900
   gedeckelt; der Behaelterdeckel liegt 200 Pixel darueber und beruehrt nie
   etwas. Auch die Seitenhoehe steht.

   > **Ein Deckel, der weiter aussen liegt als der, der schon greift, ist
   > keine Sicherung, sondern eine Zahl, die man beim naechsten Mal fuer eine
   > Absicht haelt.**

   **Der Unterschied zum Archiv-Deckel ist die Sauberkeit des Ergebnisses:**
   Dort blieben zwoelf Pixel bei 2560. Hier bleibt nichts. Beide sind aus
   demselben Grund gefallen — nachgemessen statt geglaubt. */

/* ── Eine rechte Kante fuer alles, was zum Text gehoert ────────────
   Titel, Bild, Bildtext und Fliesstext enden bei 900 (bis 24.08.2026: 760).
   Vorher endeten sie an
   drei verschiedenen Stellen: der Text bei 687 (`66ch`), Titel und Bild bei
   660, und der Behaelter bei 900.

   **Beide Zahlen sind keine neuen.** 1000 ist der meistbenutzte Umbruchpunkt
   des Stylesheets — achtzehn Vorkommen, darunter die Schwelle, ab der ein
   Ressort offen steht, die Navigation erscheint und `.g3` dreispaltig wird;
   999 ist sein Partner. 760 hat sechs Vorkommen als Umbruchpunkt, 759 und 767
   als Partner.

   **Der Text verlaesst hier die Zeicheneinheit, und das ist eine Entscheidung
   und kein Versehen.** Ueberall sonst deckelt `.fliess` auf `66ch` — eine
   Breite, die der Schriftgroesse folgt. Im Artikel deckelt sie auf Pixel,
   weil die gemeinsame Kante mit Bild und Titel der Zweck der Sache ist, und
   ein Bild kennt keine Zeichen. Umgerechnet sind 760px heute **73ch** und
   gezaehlt **96 Zeichen je Zeile** statt 86 — und 73 liegt INNERHALB der
   klassischen Spanne, wenn man sie in der Einheit liest, in der sie gemeint
   ist. Das ist hier einmal gesagt und gilt dann; es ist kein offener Punkt.
   Der Richtwert von 60 bis 75
   Zeichen ist damit ueberschritten — bewusst: die alte Website fuehrt 1160px
   und rund 147 Zeichen, und daran gemessen ist auch 98 die Verbesserung, nicht
   die Verschlechterung.

   **Die Regel greift die Kinder von `.wrap`, nicht eine Liste von Klassen.**
   Es sind acht: die zwei Kopfbloecke, die zwei Textbloecke, und je Augenzeile,
   Abschnittstitel und Block bei Telegramm und Bildraster. Eine Namensliste
   haette dieselbe Wirkung und muesste bei jedem neuen Baustein nachgefuehrt
   werden. Die Zahl steht als `--artikelbreite` an genau einer Stelle.

   **Telegramm und Bildraster ziehen seit dem 24.08.2026 mit.** Vorher hingen
   sie am Behaelter und endeten bei 1440 auf 1160, waehrend Titel, Bild und
   Text auf 1040 endeten — 120px daneben. **Der Abstand ist nicht neu: er
   betrug vorher 123px.** Er faellt erst auf, seit alles andere fluchtet, und
   genau das ist der Grund, ihn zu schliessen. 120px lesen sich als Versehen;
   fuer eine Absicht muessten sie deutlich weiter auseinanderliegen. Und das
   Argument, ein Datenblock duerfe breiter sein als der Text, traegt hier
   nicht: Telegramm und Bildraster stehen IM Lesefluss und nicht daneben.

   **`.intro` braucht die Regel eigens.** Er ist ein Kind von `.fliess`, traegt
   aber seinen eigenen `66ch`-Deckel — ohne diese Zeile bliebe der
   Einstiegsabsatz bei 687 stehen und endete 73px vor allen anderen. Gemessen,
   nicht vermutet: genau das trat beim ersten Versuch ein. */
/* **900px sind 86 Zeichen, und das ist entschieden — von Didi, am
   31.08.2026, ausdruecklich.**

   Ich hatte die Breite fuer eine Luecke gehalten und wollte `.fliess` mit
   seinen 66ch hier wiederherstellen. **Das waere falsch gewesen:**

   > **Ein Beitrag wird von oben nach unten gelesen, eine redaktionelle Seite
   > wird durchsucht. Zwei Lesearten, zwei Breiten.**

   **Kein Versehen und keine fehlende `.fliess`** — dieser Satz steht hier,
   damit es niemand beim naechsten Aufraeumen «behebt».

   Belegt an drei Aufnahmen derselben Seite, `_bilder/2026-08-30_lesebreite/`:

       54 Zeichen   495px   Seitenhoehe 4337
       66 Zeichen   605px   Seitenhoehe 3549
       86 Zeichen   788px   Seitenhoehe 3087

   **Die Bilder entstanden an der Datenschutzerklaerung** — einem Text mit
   langen Absaetzen, nicht an einem Matchbericht. Wer sie liest, liest den
   Fall, fuer den die schmale Spalte gebaut ist, und nicht den, fuer den die
   breite gebaut ist. */
.papier#v-artikel{--artikelbreite:900px}
/* ⚠⚠ **`margin-inline:auto` dazu — 14.09.2026.**
   Die Breite stand hier seit jeher, **das Zentrieren fehlte**: Jedes Kind
   war auf 900px begrenzt und klebte am linken Rand der 1400px breiten
   `.wrap`. Gemessen bei 1582px Fenster: alle sechs Kinder bei links=144.

   ⚠⚠ **ABGELOEST AM 14.09.2026 — der erste Versuch, wortwoertlich:**

     > ~~«`.fliess` ist auf 66ch begrenzt, damit Fliesstext lesbar bleibt.
     > In einer breiten `.wrap` klebt er dadurch LINKS.»~~
     > `#v-artikel .fliess{margin-inline:auto}`

   **Beide Haelften waren falsch.** Die Diagnose: `.fliess` ist in dieser
   Ansicht gar nicht 66ch breit, sondern **900px** — gemessen —, weil
   `.papier#v-artikel .wrap > *` (1 ID, 2 Klassen) den Waehler
   `.fliess` (1 Klasse) schlaegt. Und die Massnahme zentrierte EIN Kind
   von zwoelf. Gemessen:

       .brot · .art-titel · .kopfbild · .anreisser · .bildraster   144
       .fliess                                                    334

   > **Wer ein Kind zentriert, richtet es gegen seine Geschwister aus,
   > nicht gegen die Seite.** Der Leser sieht dann zwei Spalten, wo eine
   > sein sollte.

   Jetzt traegt die Regel BEIDE Haelften: dieselbe Breite und dieselbe
   Ausrichtung fuer alles, was der Artikel fuehrt. */
.papier#v-artikel .wrap > *,
.papier#v-artikel .intro{max-width:var(--artikelbreite);margin-inline:auto}

/* ── Artikelansicht ────────────────────────────────────────────────
   **Der Titel kommt aus dem dunklen Kopf heraus.** `.ph` ist fuer Seitentitel
   gebaut — «Sportanlage», «Rangliste» —, die kurz und immer gleich sind. Ein
   Artikeltitel ist Inhalt: mal drei Woerter, mal zwoelf. Im Bild lag er ueber
   der Aufnahme und lief in sie hinein.

   **Das Aufmacherbild steht auf Textbreite, nicht ueber die volle.** Gemessen
   bei 1440: volle Breite 1280x640 und Seite 2360px, Textbreite 660x330 und
   Seite 2050 — 310px kuerzer. Wichtiger als die Hoehe ist die Kante: bei
   voller Breite hat die Seite ZWEI rechte Kanten, 1280 fuer das Bild und 687
   fuer den Text. Dieselbe Ueberlegung wie bei der Kontaktseite — beide Bloecke
   beginnen und enden an derselben Stelle.

   **Der Text bleibt linksbuendig.** Mittig gesetzt rueckte der Titel von 60 auf
   351px ein — als einzige Ansicht der Website; jede andere beginnt links am
   `.wrap`. Die Leere rechts (653px) ist der Preis der Lesbarkeitsbreite, kostet
   keine Hoehe (2050 bzw. 2532 in beiden Fassungen gleich) und ist dieselbe, die
   jede Zeitungsspalte hat. **Verwandte Beitraege dorthin zu setzen faellt aus:**
   «Mehr aus dem Verein» steht schon unten. */
/* **Der Fuss des Artikelkopfs weicht vom Abschnittsrhythmus ab: 26 statt 80
   bei 1440 und 46 auf dem Handy.** `.papier section` gibt jedem Abschnitt
   `clamp(46px,6vw,80px)` — eine Regel, die auf JEDER Papierseite fuer JEDEN
   Abschnitt gilt. Hier trennt sie aber nicht zwei Abschnitte, sondern den
   Anreisser von dem Text, zu dem er gehoert. **Ein Abstand, der eine
   Zusammengehoerigkeit trennt, ist an der falschen Stelle stark.**

   Aus drei Abstaenden im Kopf sind damit zwei geworden: Bild → Anreisser 24,
   Anreisser → Text 26. Beide Zahlen stehen im Projekt schon (24 fuehrt der
   Bildabstand daneben, 26 die Untergrenze von `clamp(26px,3vw,36px)`).

   **Sie skalieren nicht, und das ist der Preis.** Bei 390 sind die uebrigen
   Abschnittsabstaende 46; diese zwei bleiben 24 und 26. Fuer eine mitwachsende
   Fassung waere `clamp(20px,2.6vw,30px)` der naechste Verwandte. */
/* **Hier stand bis zum 24.08.2026 `.art-kopf{padding-top:clamp(34px,4vw,
   60px)}` — und die Regel hat nie gewirkt.** `.papier section` wiegt (0,1,1)
   gegen ihre (0,1,0) und setzt 80. Gemessen wurden immer 80, nie 60. Entfernt
   statt berichtigt: Der Kopf SOLL 80 tragen wie jeder andere Abschnitt.

   **Eine Regel, die nie gewirkt hat, ist schlimmer als keine — sie beschreibt
   einen Zustand, den es nie gab.** Wer sie las, hielt 60 fuer die Wahrheit. */
/* **`.papier` steht davor, weil `.art-kopf` allein zu leicht ist.** Der
   Abschnittsrhythmus kommt von `.papier section` — Gewicht (0,1,1) gegen die
   (0,1,0) einer Klasse. Beim ersten Versuch stand hier `.art-kopf{padding-
   bottom:26px}`, und gemessen wurden weiterhin 80. Dieselbe Falle wie bei
   `.fe` gegen `.sprungwahl`, nur ohne `:has()`.

   **Und dieselbe Falle traegt die Zeile darueber schon laenger:** `.art-kopf
   {padding-top:clamp(34px,4vw,60px)}` wird von `.papier section` ebenfalls
   ueberschrieben. Gemessen bei 1440: 80 oben, nicht 60. Die Regel ist ohne
   Wirkung, solange der Artikelkopf auf einer Papierseite steht — also immer.
   Am 24.08.2026 gefunden, nicht geaendert: Ob der Kopf oben 60 oder 80
   tragen soll, ist ein eigener Entscheid. */
.papier .art-kopf{padding-bottom:26px}
.art-kopf .brot{margin:0}
/* ── ⚠⚠ DIE METAZEILE IM ARTIKELKOPF — Didi, 24.09.2026 ─────────

   «Artikelansicht der News: Die Zeile ueber dem Titel nutzt die gemeinsame
   Metazeile (`inc/metazeile.php`): Ressort · Datum, Datum gedaempft, unter
   640 px in Kurzform.»

   Hier stand die Regel der abgeloesten Datumszeile:

   > ~~`.art-kopf .dat{margin:14px 0 0}`~~

   **`single.php` schreibt seit dem 24.09.2026 kein `p.dat` mehr**, sondern
   `fch_theme_metazeile()`. Die alte Regel haette keinen Traeger mehr — `.dat`
   bleibt anderswo (Fussnote, `.anlassangebot`, `.dok-tx`), im Artikelkopf
   steht keine.

   ⚠ **`margin-top` statt der Kurzform, und das ist eine Berichtigung.** Die
   alte Regel schrieb `0` auch links und rechts — **gewirkt hat das nie:**
   `.papier#v-artikel .wrap > *{margin-inline:auto}` wiegt (1,2,0) gegen ihre
   (0,2,0). Gemessen am 24.09.2026 bei 1200px Rahmenbreite stand am alten
   `p.dat` `margin: 14px 106.5px 0px`. **Die beiden Nullen standen da und
   bedeuteten nichts** — dieselbe Sorte Regel wie die `padding`-Zeilen zwei
   Absaetze weiter oben.

   ⚠ **Die 14px sind kein neuer Wert, sondern der alte.** Ohne sie stossen
   zwei Etikettzeilen aneinander: gemessen bei 1200px endete `.brot` auf 190
   und `.kat` begann auf 190 — null Luft zwischen Brotkrume und Metazeile.

   ⚠⚠ **Keine Kachelregel wird angefasst.** `.nk .kat`, `.gross .kat` und
   `.klein .kat` tragen `display:flex` und ihr Polster; die beiden Regeln hier
   haengen an `.art-kopf` und haben genau einen Traeger — `single.php`.
   `single-fch_spiel.php` fuehrt zwar ebenfalls `section.art-kopf`, aber keine
   `.kat` darin (nachgesehen am 24.09.2026). Gemessen im Artikelkopf:
   `display:block`, `padding:0px` — die Kachelregeln greifen hier nicht. */
.art-kopf .kat{margin-top:14px}
/* ⚠ **`.art-kopf .kat-dat{color:var(--tx-leise)}` stand hier bis zum
   24.09.2026 abends**, samt der Begruendung, warum das Daempfen damals nur
   die Artikelansicht traf. Der Absatz dort nannte es ausdruecklich eine
   offene Frage: «Ob die Kacheln nachziehen, entscheidet Didi.»

   **Didi hat entschieden, und die Regel ist nicht geloescht, sondern
   hochgezogen:** Sie steht jetzt oben bei `.kat` als `.kat-dat` und gilt fuer
   alle fuenf Rufer von `fch_theme_metazeile()`. Die Messung, das Token und
   der Befund zum Ressort stehen dort. **Wer sie hier wieder einsetzt, hat
   zwei Regeln fuer dieselbe Sache** — und die laufen beim naechsten Wunsch
   auseinander. */
/* `hyphens:auto` und `overflow-wrap` wie bei `h1.big` und `.sec`: ohne sie
   lief «Gastfreundschaft» bei 320px um 78px aus dem Behaelter und die Seite um
   60px seitlich ueber. Ein Artikeltitel ist Inhalt und kann jedes Wort
   enthalten — genau deshalb steht er nicht mehr im Seitenkopf. */
.art-titel{hyphens:auto;overflow-wrap:break-word;
  font-family:var(--d);font-variation-settings:'wdth' 104;font-weight:900;
  /* Eine eigene Stufe zwischen `.sec` (max 35) und `h1.big` (max 46). Es gibt
     dazwischen keinen vorhandenen Wert, und es braucht einen: der
     Artikeltitel ist weder eine Abschnittsueberschrift noch der Titel im
     dunklen Seitenkopf. **Zwei Titelgroessen fuer zwei Sorten Seiten** — 46
     fuer eine Seite, die eine Rubrik eroeffnet, 38 fuer eine, die einen
     einzelnen Text traegt.

     **Seit dem 24.08.2026 sind es 760 und nicht 660** — die gemeinsame Kante
     ist mit dem Behaelter von 900 auf 1000 gewandert. Der Grund darunter gilt
     unveraendert, nur die Zahl ist eine andere; er steht bei
     `.papier#v-artikel .wrap`.

     **Der Deckel ist eine Zahl und nicht 22ch.** 22ch ergab bei 46px 698px, das
     Bild darunter misst 660 — der Titel lief 38px ueber die Bildkante hinaus.
     Bei 38px waeren 22ch nur noch 577, und er endete 83px davor. Beides
     fluchtet nicht, und beide Zahlen haengen an der Schriftgroesse statt am
     Bild. Gemessen ist die laengste Zeile 510px, der Umbruch aendert sich
     also nicht — aber Titel, Bild, Bildtext und Text haben jetzt dieselbe
     rechte Kante. Gemessen: zwei Zeilen bei 900 und 1440 wie vorher, drei
     statt vier bei 390; Titelhoehe 82 statt 99. */
  /* **Seit dem 29.08.2026 steht der Artikeltitel auf Stufe A** und nicht
     mehr auf einer eigenen. Die Begruendung darueber — «eine eigene Stufe
     zwischen `.sec` und `h1.big`, es gibt dazwischen keinen vorhandenen Wert,
     und es braucht einen» — ist damit ueberholt und bleibt nur als Beleg
     stehen, wie die Zahl entstanden ist.

     **Was sie uebersehen hat, ist der Raum.** Eine Stufe ist eine
     `clamp()`-Kurve, und ihr `vw`-Anteil rechnet mit dem FENSTER; der Titel
     steht aber im BEHAELTER. Gemessen bei 1440 hat `h1.big` im Kopfband
     1280 von 1440px (89 %), der Artikeltitel 900 (62 %) — dieselbe Rolle,
     nicht derselbe Raum. **Die 38 war der Versuch, mit einer Zahl
     auszugleichen, was eine Frage der Breite ist.**

     Und sie faellt damit aus den Groessen ausserhalb der Leitern. */
  font-size:clamp(26px,1.38rem + 0.89vw,35px);line-height:1.08;letter-spacing:-.02em;
  margin:10px 0 0}
/* Die Brotkrume steht sonst im dunklen Seitenkopf und traegt darum Weiss. Hier
   steht sie auf Papier — dieselbe Falle wie bei den Stellenkarten, nur
   umgekehrt: nicht ein dunkler Baustein auf Papier, sondern ein Papierbaustein
   ohne seinen dunklen Kopf. Gemeldet hat es die Kontrastregel mit 1.00. */
.papier .art-kopf .brot{color:var(--papier-halb)}
/* Der Textabschnitt schliesst ohne Abstand an den Kopf an, weil Bildtext und
   Fliesstext zusammengehoeren. Als Klasse statt als Inline-Stil. */
.art-text{padding-top:0}
/* ── Der Bericht und sein Datenblock stehen enger ──────────────────
   **`.papier section` gibt jedem Abschnitt `clamp(46px,6vw,80px)` — hier
   trennt dieser Abstand aber nicht zwei Themen, sondern den Bericht von
   seinem eigenen Datenblock.** Telegramm und Bildraster stehen im Lesefluss
   und nicht daneben; das ist dieselbe Begruendung, mit der sie seit dem
   24.08.2026 auch die Textbreite teilen.

   Gemessen bei 1440: Text → Telegramm **97 auf 65**, Telegramm → Galerie
   **117 auf 85**. Die sichtbare Luecke ist immer der Abstand PLUS die
   Aussenkante des letzten Absatzes (17px) bzw. des letzten Telegrammteils
   (37px) — wer die Zahl im Kopf nachrechnet, findet sonst 48 statt 65.

   **Bei 390 UND 768 ist der Wert derselbe**, weil auf beiden die Untergrenze
   der `clamp()` greift: vorher 63, jetzt 47. Drei Breiten, zwei Werte — nicht
   drei.

   Die enge Fassung `clamp(20px,2.6vw,30px)` wurde geprueft und verworfen: Bei
   47 ruecht die Augenzeile «TELEGRAMM» so nah an den letzten Absatz, dass sie
   wie dessen Fortsetzung liest. */
.papier#v-artikel .art-text,
.papier#v-artikel #telegramm{padding-bottom:clamp(30px,3.6vw,48px)}
/* **3:1, weil der Bestand 2048 x 704 fuehrt** — durchgehend, also 2,91:1.
   Bei 3:1 fallen 21 Bildpunkte oben oder unten weg, und die liegen bei einem
   Streifenformat in der Luft oder im Rasen. Kein Beitrag muss angefasst
   werden, und ein Fokuspunkt je Bild ist nicht noetig.

   **Bei 2:1 haette WordPress seitlich geschnitten** — 1408 von 2048, also
   320 links und 320 rechts. Auf einem Mannschaftsfoto stehen dort Leute, und
   ohne Fokuspunkt schneidet es aus der Mitte. Das Verhaeltnis folgt dem
   Bestand, nicht umgekehrt.

   **Nur Beitraege und News.** Der Prototyp fuehrt Verhaeltnisse je nach Sache
   — Portraets 3:4, Anlassbild 4:3, Angebotsbild 16:9. `.art-kopf` steht
   ausschliesslich in `#v-artikel` (geprueft: ein Traeger), darum traegt diese
   Regel die Einschraenkung schon in sich. Wer sie umhaengt, muss sie eng
   fassen.

   **3:1 ist kein neuer Wert** — der Fanion-Aufmacher und die Sponsorenlogos
   fuehren ihn bereits. Dieselbe Zahl, andere Sache. */
/* Die 8px unten trugen den Abstand zur Bildunterschrift. Sie ist weg, und
   der Abstand zum Anreisser steht an ihm. */
.art-kopf .f{aspect-ratio:3/1;margin:24px 0 0}
/* **Ohne Element seit dem 24.08.2026 — nicht geloescht, sondern vermerkt.**
   Die Bildunterschrift ist entfallen: Der Anreisser steht jetzt direkt unter
   dem Bild, und das Bild darueber ist der Aufmacher und braucht keine
   Beschreibung. Die alten Beitraege fuehren keine Bildunterschriften, beim
   Umzug geht also nichts verloren, und im Umsetzungsplan haengt kein Feld
   daran. **Nichts im Stylesheet hing an der Klasse** — kein
   Geschwisterselektor, kein `:has()`, keine Papierfassung. Die Regel steht
   auf der Liste der leeren Selektoren, damit niemand in einem Jahr eine neue
   Bildunterschriftsklasse erfindet, ohne die Entscheidung zu finden. */
.bildtext{font-size:var(--tx-klein);color:var(--papier-halb);margin:0}
/* ── Der Anreisser ─────────────────────────────────────────────────
   **Er steht UNTER der Bildunterschrift, nicht darueber.** Der Grund ist eine
   Zuordnung und keine Optik: Die Bildunterschrift gehoert zum Bild, der
   Anreisser gehoert zum Text. Steht er zwischen Bild und Unterschrift, liest
   sich die kleine graue Zeile wie seine Unterzeile — dann steht die Zuordnung
   auf dem Kopf. Der Preis sind 14px mehr Hoehe, und das ist der richtige Preis
   dafuer.

   **Zwischen Titel und Bild geht nicht.** Bei 1440 waere es tragbar, bei 390
   nicht: Der Titel ist 30px fett, der Anreisser 21px fett — zwei fette Bloecke
   uebereinander, deren Groessenunterschied zu klein ist, um zwei Sachen daraus
   zu machen. Es liest sich als zweizeiliger Titel. Am 24.08.2026 an drei
   Fassungen gezeigt und so entschieden.

   **Er ist ein Feld, kein Absatz.** In WordPress ist er der `Auszug`
   (`post_excerpt`) — dasselbe Stueck Text, das in der Newsliste unter dem
   Titel steht. Ohne eigenes Feld muesste die Liste den ersten Absatz
   anreissen, und der beginnt bei einem Matchbericht manchmal mitten im
   Geschehen.

   **Keine eigene Breite.** `.papier#v-artikel .wrap > *` deckelt den ganzen
   Kopfblock auf `--artikelbreite`; ein zweiter Deckel hier waere derselbe Wert
   an zwei Stellen. Und keine eigene Groesse: `--tx-lead` ist die Stufe, die es
   fuer den Einstieg eines Textes schon gibt. */
.anreisser{font-size:var(--tx-lead);line-height:var(--lh-body);font-weight:700;
  color:var(--papier-text);margin:24px 0 0}

/* ── Telegramm ─────────────────────────────────────────────────────
   Ein eigener Abschnitt UNTER dem Text und nicht in einer Seitenspalte:
   Staende es rechts, haette eine normale Meldung dort ein Loch. So faellt es
   spurlos weg, wenn keines vorliegt. */
/* **Einspaltig seit dem 25.08.2026 — Fassung B.** Die Begruendung steht im
   Markup. Die Kopfzeile uebernimmt `.zk` von der Anzeigetafel; hier ist nur
   nachzustellen, was dort der dunkle Grund erledigt. */
.tgblock{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
/* ── ⚠⚠ DIE GELBE KANTE HAENGT SEIT DEM 24.09.2026 AM BLOCK ────────

   > ~~`.tg-kopf{border-bottom:2px solid var(--gelb);padding-bottom:14px;
   > margin-top:0}`~~ — Stand bis zum 24.09.2026.

   Didi: «Die Angabenzeile … steht **im Kopf unter Teams und Resultat** — wie
   auf der Spielseite.» **Damit ist «der Kopf» nicht mehr die Kopfzeile
   allein**, sondern Begegnung UND Angaben; eine Kante unter der Kopfzeile
   schnitte genau zwischen beiden durch. Sie sitzt darum an `.spielblock`,
   dem Block, der beides umfasst — derselbe, den die Spielseite seit dem
   26.08.2026 fuehrt.

   ⚠ **Die zwei Eigenschaften sind nicht ersatzlos weg, sie sind umgezogen:**
   die Kante an `.spielblock`, das 14er-Polster an `#telegramm .spielblock`
   (beide weiter unten). **Und mit ihnen entfaellt ihr Gegenstueck** —
   `.spielblock .tg-kopf{border-bottom:0;padding-bottom:0}` hob hier etwas
   auf, das es nicht mehr gibt. */
.tg-kopf{margin-top:0}
/* ⚠ `> span` aus demselben Grund wie bei `.klub>span` weiter oben:
   Ohne den Kindselektor faerbte diese Regel den Mannschaftsnamen halbgrau,
   sobald er seine zwei Formen als `span` traegt. */
.papier .tg-kopf .klub>span{color:var(--papier-halb)}
/* Die Halbzeit steht UNTER dem Resultat, nicht daneben — damit konkurriert
   sie nicht mehr mit der Zahl. */
/* **Das Resultat waechst mit dem Teamnamen, nicht mit der Ueberschrift.**
   Die `clamp()`-Fassung vom 24.08. war fuer ein Resultat gerechnet, das allein
   stand; in der Kopfzeile ist der Bezug ein anderer. Und der Teamname ist
   selbst eine `clamp()`-Groesse — `clamp(13px,1.7vw,16px)` —, also wandert
   das Verhaeltnis, wenn eine der beiden Zahlen fest ist.

   Gemessen mit der Groesse der Anzeigetafel: **2,03 bei 390 · 2,59 bei 768 ·
   2,48 ab 1024** — der Sprung kommt von der Untergrenze des Teamnamens, die
   bis 1000 greift. Mit einer festen 30 waere es 2,31 / 2,29 / 1,88, also
   andersherum schief.

   `clamp(26px,3.4vw,32px)` ist der Teamname mal zwei und haelt **2,0 auf
   allen Breiten**. Zwischen zwei Mannschaftsnamen braucht das Resultat keine
   Groesse mehr, um zu fuehren — die Position tut es. */
.tg-kopf .score{text-align:center;line-height:1.05;
  font-size:clamp(26px,3.4vw,32px)}
.papier .tg-kopf .score{color:var(--papier-text)}
/* **Die Halbzeit bekommt Luft.** Zwei Pixel liessen sie wie eine Unterlaenge
   des Resultats aussehen; sechs trennen sie davon, ohne sie abzusetzen. */
.tg-kopf .score em{display:block;font-style:normal;font-size:var(--tx-klein);
  font-weight:400;color:var(--papier-halb);margin-top:6px}
/* **Die Teamnamen sind jetzt die Ueberschrift des Abschnitts** und tragen
   dieselbe Groesse wie ein `.sec-mittel` — die Kopfzeile hat den `h2`
   abgeloest, also traegt sie auch sein Gewicht. */
.tg-kopf .klub b{font-size:clamp(17px,2.1vw,20px)}
/* **Drei gleich breite Spalten, Etikett ueber dem Wert.** Vorher standen die
   Angaben nebeneinander mit ungleichen Abstaenden — zwischen «Ort» und
   «Zuschauer» mehr Luft als zwischen den letzten beiden, weil ein Flexkasten
   nach Inhalt verteilt und nicht nach Spalten.

   **Der Schiedsrichter ist entfallen.** Damit bleiben drei Angaben, und ein
   Nebeneffekt erledigt einen offenen Punkt: Fuer das Telegramm braucht es
   weder Daniel Schuhmachers Adresse noch die sieben Namen.

   > ~~«**Der FVRZ-Verweis traegt jetzt das Etikett «Verband»** und sonst
   > dieselbe Schrift wie die uebrigen Werte. Er war golden und unterstrichen
   > und damit das auffaelligste Element einer Zeile aus ruhigen Angaben;
   > unterschieden ist er noch durch die duenne Linie und das Externsymbol.
   > Ohne Etikett waere er der einzige Eintrag ohne Beschriftung.»~~
   > — Stand 23.09.2026 bis 24.09.2026.

   ⚠⚠ **Er ist am 24.09.2026 keine Zelle dieses Blocks mehr.** Didi:
   «**«Spielbericht beim FVRZ» bleibt unter dem Verlauf.**» **Der Absatz
   oben stimmt weiter — nur nicht mehr hier**: Das Etikett `.vh`, das
   Symbol vorn und die ruhige Schrift hat der Verweis behalten, sie haengen
   jetzt an `.tg-verband`. **Hier stehen drei Zellen in drei Spalten**, und
   das Raster geht damit zum ersten Mal genau auf. */
.tg-fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin-top:26px;border-top:1px solid var(--papier-linie);padding-top:16px}
/* ⚠ **`.tg-verweis` stand hier mit — bis zum 24.09.2026.**
   > ~~`.tg-fakten .tz,.tg-fakten .tg-verweis{…}`~~
   Der FVRZ-Verweis war die vierte Zelle dieses Blocks. Didi:
   «**«Spielbericht beim FVRZ» bleibt unter dem Verlauf.**» Er steht
   jetzt als eigenes Kind von `.tgblock`; was er von hier hatte, hat er
   dort ueber `.tg-verband` weiter unten. */
.tg-fakten .tz{display:block;border-bottom:0;padding:0;margin:0}
.tg-fakten b{display:block;font-family:var(--b);font-weight:500;
  font-size:var(--tx-etikett);letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-flaeche);margin-bottom:3px}
.tg-fakten .tz span{font-size:var(--tx-klein);color:var(--papier-text)}
/* ⚠ **Die Symbole im Matchbericht — 23.09.2026 abends.** Die Faktenzeilen
   kommen seit heute aus `fch_theme_spielfakten_zeilen()`, derselben Ausgabe wie
   auf der Spielseite; das Etikett steckt dort im `.vh` und vorn steht ein
   Symbol. Ohne diese zwei Zeilen erbte es die Textfarbe und die Grundschrift
   des Blocks — dunkel und einen Tick groesser als der Wert daneben, waehrend
   es auf der Spielseite golden und gleich gross steht.

   ⚠ **`#telegramm` und nicht `.tg-fakten` allein.** Die Klasse traegt auch
   die Faktenzeile der Spielseite; dort gilt `#v-spiel .sp-fakten .ic` und
   sagt dasselbe. Eine gemeinsame Regel waere die dritte Stelle mit einer
   Meinung zu dieser Farbe.

   > ~~⚠ **`.tz .ic` und nicht `.ic`.** Der FVRZ-Verweis daneben ist die
   > vierte Zelle und traegt sein eigenes `.ic-extern`; das bleibt in der
   > Textfarbe.~~ — ueberholt am selben Abend.

   > ~~⚠⚠ **Die vierte Zelle ist nachgezogen.** Didi: «Symbol statt Etikett,
   > i-extern, wie die uebrigen Angaben daneben.» Ihr Pfeil steht jetzt vorn
   > und in derselben Rolle wie die drei Symbole nebenan — also auch in
   > derselben Farbe.~~ — Stand 23.09.2026 bis 24.09.2026.

   **Es gibt hier keine vierte Zelle mehr**, und darum steht der Waehler
   wieder allein auf `.tz`. Die goldene Symbolfarbe gilt fuer den Verweis
   unveraendert weiter — sie haengt jetzt an `.tg-verband` und nicht mehr am
   Ort. */
#telegramm .tg-fakten .tz{font-size:var(--tx-klein)}
#telegramm .tg-fakten .tz .ic{color:var(--gold-flaeche)}
/* ── ⚠⚠ DER FVRZ-VERWEIS HAENGT SEIT DEM 24.09.2026 AN `.tg-verband` ──

   > ~~`#telegramm .tg-fakten .tg-verweis .ic`~~
   > ~~`.papier .tg-fakten .tg-verweis a`~~
   > ~~`.tgblock>.tg-verweis …`~~ — der erste Versuch, am selben Tag verworfen.

   **Die Eigenschaften sind unveraendert, nur der Weg dorthin ist ein
   anderer.** Der Verweis ist mit dem Angabenblock in den Kopf gewandert
   und am 24.09.2026 wieder unter den Verlauf zurueckgeholt worden —
   Didis Wortlaut. **Er sieht aus wie zuvor, weil an seinem Aussehen
   nichts bestellt war**, nur an seinem Platz.

   ⚠⚠ **Eine EIGENE KLASSE und kein Ortsselektor — und der Umweg ist
   gemessen.** Zuerst stand hier `.tgblock>.tg-verweis`, in der Annahme,
   der Verbandsverweis sei das einzige `.tg-verweis` im Telegrammblock.
   **Er ist es nicht:** `single-fch_spiel.php` fuehrt seine drei Verweise
   («Matchbericht →», «Spielbericht beim FVRZ», «Alle Spiele →») als
   `<p class="tg-verweis sp-verweise">` EBENFALLS in `.tgblock`.

   Gemessen im Rahmen bei 375/619/620/1440: **`.sp-verweise` verlor seine
   26px Kopfluft** (der Kindselektor wiegt 0,2,0 und schlug `.sp-verweise`
   mit 0,1,0), und die drei Verweise bekamen die duenne Linie und die
   kleine Schrift der Faktenzelle: `border-bottom` 2px -> 1px.

   > **Ein Waehler, der den Ort beschreibt, bricht, wenn das Element
   > umzieht — und trifft dann, was zufaellig am alten Ort steht.**
   Genau das war er schon einmal: `.tg-fakten .tg-verweis` galt, solange
   der Verweis die vierte Faktenzelle war.

   `.tg-verband` steht am Element selbst (`inc/verlauf.php`) und passt zu
   dem, was schon dort steht: `<b class="vh">Verband</b>`. */
.tg-verband .ic{color:var(--gold-flaeche)}
.papier .tg-verband a{font-family:var(--b);font-size:var(--tx-klein);
  font-weight:400;color:var(--papier-text);
  border-bottom:1px solid var(--papier-linie)}
@media(hover:hover){.papier .tg-verband a:hover{border-bottom-color:var(--papier-text)}}
/* Die zwei Spuren sind mit Fassung B entfallen — der Block ist einspaltig,
   und der Verlauf laeuft ueber die volle Breite. */
/* **Das Resultat waechst mit der Ueberschrift, weil das Verhaeltnis die
   Aussage traegt und nicht die Groesse.** Die Begegnung darueber ist
   `clamp(22px,1.29rem + 0.45vw,27px)` — sie erreicht ihre 27 erst bei rund
   **1413px** (1.29rem sind 20,64px, die restlichen 6,36 muessen aus 0,45vw
   kommen). Ein festes Resultat stand darum in einem Verhaeltnis, das mit der
   Breite wanderte: gemessen 1,26 bei 1440, aber **1,52 bei 390** — auf dem
   Handy war der Endstand die Haelfte groesser als die Begegnung, zu der er
   gehoert.

   **Die Ziellinie ist 1,25** — das heutige Desktop-Verhaeltnis, das nie
   beanstandet wurde. Damit bleibt der Desktop, wie er ist, und nur das Handy
   kommt herunter, also genau dorthin, wo der Befund entstand.

   **Verworfen: eine feste 28.** Sie ergaebe bei 1440 ein Verhaeltnis von 1,04
   — das Resultat waere so gross wie die Begegnung und laese sich als weitere
   Faktenzeile. Eine feste Zahl schiebt das Missverhaeltnis nur von einer
   Breite zur anderen. **Ebenso verworfen: 1,15** (`clamp(25px,1.48rem +
   0.52vw,31px)`), weil 31 gegen 27 bei 1440 zu flach steht.

   **Die 28 ist eine neue feste Groesse im Projekt** — als Untergrenze, nicht
   als Wert. Die 34 als Obergrenze gibt es schon. Die Halbzeitangabe bleibt bei
   `--tx-klein`; ihr Anteil steigt damit von 0,41 auf 0,50, und das ist der
   Wert, bei dem sie gemessen noch traegt. */
/* ── ⚠⚠ `.tg-res` IST ENTFERNT — 24.09.2026 ───────────────────────

   > ~~`.tg-res{font-weight:800;font-size:clamp(28px,1.61rem + 0.57vw,34px);
   > margin:0 0 14px;display:flex;align-items:baseline;gap:4px}`~~
   > ~~`.tg-res i{font-style:normal;color:var(--papier-halb);font-weight:400}`~~
   > ~~`.tg-res em{font-style:normal;font-size:var(--tx-klein);font-weight:400;
   > color:var(--papier-halb);margin-left:6px}`~~

   **Gezaehlt am 24.09.2026: null Traeger.** Nicht bloss auf den zwei
   gemessenen Seiten — `class="…tg-res…"` kommt im ganzen Theme kein
   einziges Mal vor, und im Prototyp steht die Regel zwar im Blatt, aber
   nirgends im Markup. Das Resultat traegt heute `.tg-kopf .score`
   (`inc/spielkopf.php`), an beiden Orten und mit eigener Groessenregel.

   ⚠ **Entfernt und nicht auskommentiert**, aus demselben Grund wie bei
   `.tg-w` weiter unten: **Eine Regel ohne Traeger meldet nichts und wird
   beim naechsten Lesen fuer benutzt gehalten.** Der lange Absatz, der
   hier stand, rechnete das Groessenverhaeltnis zwischen Resultat und
   Begegnung aus — er gilt weiter, aber er gilt fuer `.tg-kopf .score`
   und steht dort. */
/* > ~~«Der Verweis steht unter dem Verlauf und nicht neben dem Resultat:
   > er gehoert zu den Angaben, nicht zur Zahl.»~~ — Stand bis zum
   > 24.09.2026 abends.

   **Der Satz beschrieb einen Ort, und der Ort ist gewandert:** Der
   FVRZ-Verweis steht seit dem 24.09.2026 abends als letzte Zeile unter der
   Aufstellung (`single.php`) — Didis Wortlaut. **Fuer diese Regel aendert
   das nichts**: Sie gibt die Kopfluft, die jedes `.tg-verweis` mitbringt;
   der FVRZ-Verweis nimmt sie sich eine Zeile weiter unten wieder weg. */
.tg-verweis{margin:18px 0 0}
/* **Im Telegramm macht das Gitter den Abstand.** `.tgblock` ist ein Raster
   mit 24px Fuge; die 18px von oben kaemen dazu und ergaeben 42. Der
   FVRZ-Verweis stand bis zum 24.09.2026 in `.tg-fakten` und hatte dort
   `margin:0` — **dieselbe Zahl, nur aus einer anderen Regel.**

   ⚠ **Beide Klassen im Waehler, damit die Reihenfolge nicht entscheidet.**
   `.tg-verband` allein waere so schwer wie `.tg-verweis` darueber und
   gewaenne nur, weil es spaeter steht.

   ⚠ **Und das ist der Grund, warum der Verweis beim Umzug ans Ende IN
   `.tgblock` geblieben ist** (24.09.2026 abends): Ausserhalb des Blocks
   gaebe es weder die Fuge noch die 18px von oben, und er saesse ohne jeden
   Abstand an der Aufstellung. */
.tg-verweis.tg-verband{margin:0}
/* ⚠ **Hier standen `.tg-schluss` und ein zweiter Grund fuer die Null darueber
   — beides entfernt am 25.09.2026.** Der Behaelter war eine Flexzeile, die
   «Zur Spielseite →» neben «Spielbericht beim FVRZ» hielt (24.09.2026,
   `da6436b`: `flex-wrap:wrap`, `gap:12px 28px`); der Absatz dazu begruendete,
   warum `align-items:baseline` oben keinen Aussenabstand duldet.

   **Beides faellt mit seinem Gegenstand.** «Zur Spielseite →» ist aus dem
   Telegrammschluss entfallen (`themes/fch/single.php`, `508cc23`), und mit
   ihm der Behaelter — eine Flexzeile mit einem Kind ordnet nichts.
   Nachgezaehlt am 25.09.2026 ueber 191 Dateien: `tg-schluss` steht noch
   9-mal im Text und seit dieser Aenderung **0-mal in einer echten
   Codezeile** — die sieben in `single.php` und die zwei hier sind sein
   eigener Nachruf.

   ⚠ **Die Null darueber bleibt und ist nicht verwaist.** Ihr ERSTER Grund
   traegt sie allein: 18px oben plus die 24px-Fuge von `.tgblock` ergaeben 42.
   Er steht unveraendert im Block ueber der Regel.

   **Kein durchgestrichenes Zitat, und das ist die Ausnahme zur Hausregel.**
   Abgeloest ist hier kein Satz, sondern eine Regel mit vierzig Zeilen
   Begruendung; sie als Grabinschrift stehen zu lassen hiesse, jeden Leser
   zweimal durch etwas zu schicken, das es nicht mehr gibt. Der Wortlaut
   steht in `da6436b`. */
/* ── Der Verlauf: eine Zeitachse fuer alles, was im Spiel geschah ──
   Tore, Karten und Wechsel standen bis zum 24.08.2026 in zwei getrennten
   Bloecken — «Torfolge» rechts, «Wechsel» darunter. Der FVRZ fuehrt sie auf
   EINER Achse, und das ist die richtige Form: es ist ohnehin eine Achse.

   **Der Block heisst immer «Verlauf», auch wenn nur Tore darin stehen.** Ein
   Name statt zweier — der Verlauf ist die Zeitachse des Spiels, ob darauf
   drei Ereignisse liegen oder zwoelf. Dieselbe Ueberlegung wie beim
   Telegramm: eine Bauform, die verschieden viel traegt, statt zweier fuer
   zwei Datenlagen. **Wer einen Bericht ohne Karten sieht, nennt ihn nicht
   «Torfolge».**

   **Die Minutenspur misst 62px und nicht 58.** Gemessen in der Schrift der
   Zeitspalte: «13'» 27px, «90'+3'» 51px, und die laengste moegliche Angabe
   «120'+5'» bei einer Verlaengerung **62px**. Bei 58 waere sie geschnitten.

   **Drei Spuren statt zweier, weil jede Zeile ein Symbol traegt.** Kein
   Ereignis ohne — sonst sieht die Zeile ohne aus, als fehle etwas. Die
   Symbolspur misst 16px: alle 21 Zeichen der Sammlung haben denselben
   quadratischen Kasten, und die Karten sind mit 11x15 schmaler.

   **Die Symbolspur ist die erste ihrer Art im Projekt.** Bisher stehen
   Zeichen INLINE vor ihrem Text (`.kontaktzeile`, `.person-mail`, `.rz-tag`)
   und richten sich nach der Zeile; hier haben sie eine eigene Spur, damit die
   Texte darunter fluchten. Die Grundregel `.ic` bleibt dieselbe, nur der
   Rand faellt weg.

   **Ein Symbol allein traegt keine Bedeutung fuer jemanden, der es nicht
   kennt.** Jede Zeile fuehrt das Wort im Alternativtext — «Tor», «Gelbe
   Karte», «Gelb-Rote Karte», «Ausschluss», «Auswechslung». Derselbe Fall wie
   bei den Kontaktzeilen: das Symbol zeigt, der Text sagt. */
.verlauf{margin-top:2px}
.ve-z{display:grid;grid-template-columns:62px 16px minmax(0,1fr);gap:0 12px;
  align-items:start;padding:8px 0;border-bottom:1px solid var(--papier-linie);
  font-size:var(--tx-klein)}
.ve-z:last-child{border-bottom:0}
.ve-min{color:var(--papier-halb);font-variant-numeric:tabular-nums;white-space:nowrap}
.ve-ic{display:flex;align-items:center;justify-content:center;
  height:1.5em;width:16px}
.ve-ic .ic{width:16px;height:16px;margin:0}
.ve-zus{display:block;color:var(--papier-halb);margin-top:1px}
/* **Die Assist-Zeile einzeilig — 23.09.2026.**

   Sie stand auf zwei Zeilen, Name oben und Klub darunter, waehrend die
   Torzeile darueber einzeilig blieb. **Der Grund ist der Zweig, nicht die
   Art:** Bei einem Tor steht `.ve-klub` direkt in `.ve-tx`, also inline;
   bei allem anderen steckt er in `.ve-zus`, und das ist ein Block. Eine
   Zeile, die als Block gesetzt ist, bricht immer um — nicht erst, wenn
   der Platz fehlt.

   ⚠ **Darum hier und nicht im Markup.** Den Zweig teilen fuenf Arten;
   `wechsel`, `gelb`, `gelbrot` und `rot` sollen ihren Klub weiterhin
   darunter tragen. Eine Aenderung am Markup traefe alle fuenf.

   ⚠ **Und `inline` ist genau die Zusage fuers Handy:** Der Klub bleibt im
   Textfluss und bricht erst um, wenn der Platz wirklich fehlt — nicht
   schon bei voller Breite, wie der Block es tat.

   ⚠ **Der Trenner kommt hier per `::before` und nicht aus der Regel
   `.ve-klub:not(:only-child)::after` weiter unten.** Zwei Gruende, und
   beide zaehlen: `.ve-klub` IST innerhalb von `.ve-zus` ein `:only-child`,
   die Regel greift dort also nie — und sie setzt den Punkt HINTER den
   Klub. Beim Tor ist das richtig («1:0 Herrliberg · Name»), hier stuende
   er falsch: gebraucht wird «Name · Klub», also davor. */
.ve-assist .ve-zus{display:inline}
.ve-assist .ve-zus::before{content:' · '}

/* **Die Vorlage ist die Vorarbeit, nicht der Treffer — 23.09.2026.**
   Didis Wort: «Leiser als ein Tor». Das heisst hier: die ganze Zeile in
   `--papier-halb` statt in der Textfarbe, und das Zeichen kleiner als die
   16px der uebrigen. **Kein neuer Farbwert** -- es ist dieselbe gedaempfte
   Farbe, die `.ve-min` und `.ve-zus` schon fuehren.

   ⚠ **Kein Fettdruck faellt weg, weil keiner dasteht:** `.ve-tor .ve-stand`
   ist die einzige fette Stelle der Liste, und eine Vorlage traegt keinen
   Zwischenstand. */
.ve-assist{color:var(--papier-halb)}
.ve-assist .ve-ic .ic{width:13px;height:13px}

/* **Und steht sie zum Tor derselben Minute, gehoert sie sichtbar dazu.**
   Zwei Griffe, beide mit Mitteln, die hier schon stehen:

   1. Die trennende Kante zwischen Tor und Vorlage faellt weg. Sie sitzt am
      TOR (`border-bottom`), also muss die Regel das Tor treffen und nicht
      die Vorlage -- `:has()` fuehrt dieses Stylesheet schon bei
      `.sp-verlauf:not(:has(.ve-gast))`.
   2. Die Vorlage ruecht ein. Das Raster bleibt unberuehrt; eingerueckt wird
      der Inhalt, nicht die Spalte.

   ⚠ **Die Minute bleibt stehen.** Sie wiederholt die des Tores, und das ist
      Absicht: Didi verlangt «eigenes Symbol, Minute, Name». Eine verborgene
      Minute waere eine Zeile, die ihre eigene Zeit nicht nennt. */
.ve-tor:has(+ .ve-assist.ve-zu-tor){border-bottom:0}
.ve-assist.ve-zu-tor{padding-top:0}
.ve-assist.ve-zu-tor .ve-seite{padding-left:10px}

/* **Das Tor traegt zwei Auszeichnungen und nicht drei.** Mit dem Ballzeichen
   waeren fette Minute UND fetter Zwischenstand die dritte Markierung
   derselben Sache. Gemessen und verworfen: das Zeichen zeigt die Art, der
   fette Stand zeigt die Zahl, und die Minute bleibt Beiwerk wie in jeder
   anderen Zeile. Wer nur wissen will, wie es lief, findet die fetten Zahlen. */
.ve-tor .ve-stand{font-weight:800;color:var(--papier-text);margin-right:5px;
  font-variant-numeric:tabular-nums}

/* Die Karten sind kein Zeichen aus der Sammlung, sondern zwei Rechtecke:
   `currentColor` kann eine Farbe fuehren, und Gelb-Rot braucht zwei.

   **Der Rand ist das einzige Zeichen der gelben Karte, und er muss selbst
   3:1 erreichen.** Gemessen am 24.08.2026, alles gegen Papier:

   - gelbe Flaeche **1,35** — praktisch unsichtbar
   - rote Flaeche 5,74 — traegt
   - der erste Rand `rgba(11,11,10,.28)` **1,93** — machte es nur weniger
     schlimm

   Eine Karte ist ein leeres Rechteck ohne Text: Faellt die Flaeche aus und
   der Rand auch, bleibt nichts. Bei den anderen Elementen mit Rand traegt
   der Text die Erkennbarkeit — hier nicht.

   **Gewaehlt ist `--papier-halb` und keine neue Deckkraft:** 6,93 gegen
   Papier, und es ist die Marke, die das Projekt fuer Zweitrangiges auf Papier
   schon fuehrt. `rgba(11,11,10,.45)` haette 3,0 gerade erreicht — eine neue
   Zahl fuer denselben Zweck.

   **Die Gelb-Rot-Karte teilt das Problem doppelt:** ihre gelbe Haelfte ist
   schmaler als eine ganze Karte, und die Trennlinie in der Mitte war
   dieselbe schwache Farbe. Beide tragen jetzt `--papier-halb`. */
.ve-karte{display:block;width:11px;height:15px;border-radius:2px;
  border:1px solid var(--papier-halb)}
.ve-karte.gelb{background:var(--gelb)}
/* `--rot` fuehrt sonst nur den dringenden Hinweisbalken. Hier ist es keine
   Zustandsfarbe, sondern der Name der Sache: eine rote Karte ist rot. */
.ve-karte.rot{background:var(--rot)}
.ve-karte.gelbrot{background:linear-gradient(135deg,
  var(--gelb) 0 47%, var(--papier-halb) 47% 53%, var(--rot) 53% 100%)}

/* ── Aufstellung, Ersatz und Wechsel ───────────────────────────────
   Sie stehen UNTER Resultat und Torfolge und nicht als dritte Spur daneben.
   Drei Fassungen wurden gebaut und gemessen, Blockhoehe bei 1440:

   - drei Spuren nebeneinander: **857px** — die dritte Spur wird 857 hoch,
     waehrend links Resultat und Torfolge bei 250 enden. Zwei Drittel des
     Blocks stehen links leer, und «Schiedsrichter» bricht in der auf 230
     verschmaelerten ersten Spur um.
   - Torfolge oben, alles Weitere darunter einspaltig: **924px** — richtig
     geordnet (oben das Spiel, unten die Mannschaft), aber die Aufstellung ist
     elf Zeilen lang und die Wechsel drei, also klafft rechts unten eine
     Luecke.
   - **gewaehlt: darunter, die Namen zweispaltig — 701px.** Die zwei Haelften
     werden ungefaehr gleich hoch.

   **Eine Elferliste ist bei 760px Textbreite nicht zu eng** — das war die
   Annahme und sie stimmte nicht. Gemessen: Namensspalte 162px, laengster Name
   «Luca Steinmann» 105px, kein Umbruch auf keiner Breite.

   **`columns` und nicht `grid` fuer die Namen.** Ein Gitter fuellt Zeile fuer
   Zeile — die Nummern stuenden dann 1,2 / 4,5 / 6,8, also quer gelesen. Eine
   Aufstellung liest man hinunter. Der Mehrspaltensatz macht das von selbst
   und traegt jede Anzahl: elf, vierzehn oder sieben. */
.tg-unten{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);
  gap:24px;margin-top:6px;padding-top:22px;border-top:1px solid var(--papier-linie)}
/* Seit dem 24.08.2026 traegt `.tg-unten` nur noch die Aufstellung: die
   Wechsel sind in den Verlauf gewandert. Die zweite Spalte bleibt trotzdem
   stehen — die Aufstellung selbst ist zweispaltig gesetzt und braucht die
   Breite nicht, und eine leere zweite Spur kostet nichts. Wer hier wieder
   etwas danebenstellt, findet die Spur vor. */
@media(min-width:620px){.tg-unten{grid-template-columns:minmax(0,1fr);gap:40px}}
.tg-liste{columns:2;column-gap:24px}
/* ── ⚠ ZWEI SPALTEN IM BERICHT AB 620 — DIDI, 24.09.2026 ───────
   «Zwei Spalten nebeneinander: links «Aufstellung» (Startelf), rechts
   «Ersatz». Beide Ueberschriften auf gleicher Hoehe, die Listen oben
   buendig. Gilt immer im Telegramm — dort steht keine Gegnerhaelfte. Handy
   unter 620px: untereinander wie heute.»

   **Der Traeger ist `.sp-mann-allein` und nicht `.tg-unten`.** Die Klasse
   faellt in `inc/aufstellung.php` genau dann, wenn EINE Mannschaft
   geschrieben wird; die Spielseite uebergibt fest zwei und bekommt sie nie.
   **Dieselbe Teilung wie bei `.sp-auf`: gemeinsam ist die Ausgabe, nicht die
   Anordnung.** Wer die Regel an `.tg-unten` haengt, traegt die Spielseite mit.

   ⚠ **Es ist KEIN zweites `columns`, sondern der Wechsel der Mechanik.**
   `.tg-liste{columns:2}` bricht EINE Liste in zwei Namensspalten um; hier
   stehen ZWEI Listen mit je eigener Ueberschrift nebeneinander. Beides
   zugleich gaebe vier Namensspalten — derselbe Befund, der weiter unten fuer
   die Spielseite steht. **`columns` gibt darum ab, wo das Raster teilt**, und
   nicht erst dort, wo Zeichen in der Zeile stehen.

   ⚠ **Und `columns` koennte es auch gar nicht.** Der Mehrspaltensatz bricht
   um, wo die Spalte voll ist, nicht wo ein Abschnitt endet: «Ersatz» liefe
   mit und stuende irgendwo in der zweiten Spalte. Der Satz weiter oben
   («`columns` und nicht `grid` fuer die Namen») bleibt richtig und meint die
   Namen INNERHALB einer Liste — dieses Raster teilt die zwei Abschnitte.

   **Ueberschriften in Zeile 1, Listen in Zeile 2 — beides gesetzt.** Das ist
   Didis Satz als Regel: Zeile 1 ist so hoch wie die hoehere Ueberschrift,
   Zeile 2 beginnt fuer beide an derselben Linie. Elf Namen links und vier
   rechts verschieben dann nichts mehr. Ohne die Zuordnung fuellte das Raster
   zeilenweise und setzte «Ersatz» NEBEN die erste Liste.

   ⚠ **`margin-top:0` an der zweiten Ueberschrift, sonst haengt sie 30px
   tiefer.** `.grp:not(:first-child)` gibt jeder Gruppenueberschrift Luft nach
   oben, die nicht als erste steht — untereinander richtig, nebeneinander
   genau der Versatz, den Didi ausschliesst. Die Regel gewinnt ueber das
   Gewicht (0,3,0 gegen 0,2,0) und nicht ueber die Stellung im Blatt.

   32px ist der Zwischenraum, den die Spielseite zwischen ihren zwei
   Mannschaftsspalten fuehrt (`#v-spiel .sp-auf`) — dieselbe Rolle, dieselbe
   Zahl. Der Zeilenabstand bleibt 0: Den Platz zwischen Ueberschrift und Liste
   traegt `.grp` mit seinen 14px nach unten.

   ⚠ **Ohne Ersatzbank bleibt die rechte Spalte leer**, die Aufstellung steht
   dann in halber Breite. Das ist der Preis eines festen Rasters, und er ist
   bezahlt: Ein Raster, das bei einer Liste die Breite wechselt, verschiebt
   die Startelf je nach Datenlage.

   ⚠ **Eine Klubzeile kommt in diesem Fall nicht vor** — bei einer
   Mannschaft laesst `inc/aufstellung.php` sie weg, weil der Kopf darueber
   beide Klubs und das Resultat nennt. Sie hat darum keine Zeilenangabe. Wer
   sie eines Tages doch setzt, muss ihr eine geben; sonst faellt sie unter das
   Raster. */
@media(min-width:620px){
  .tg-unten .sp-mann-allein{display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;align-items:start}
  .tg-unten .sp-mann-allein > .grp{grid-row:1;margin-top:0}
  .tg-unten .sp-mann-allein > .tg-liste{grid-row:2;columns:1}
}

/* ── Die Spielseite ────────────────────────────────────────────────
   **Der Namensraum `tg-` heisst «Telegramm» und traegt seit dem 26.08.2026
   zwei Seiten. Die Umbenennung steht aus** — als eigener Durchgang nach dem
   Audit der Ansichtenlisten. Wenn sie kommt, gilt die Regel von damals: zuerst
   nach dem NEUEN Namen suchen, nicht nach dem alten. Zweimal hat eine
   Umbenennung in diesem Projekt einen Namen getroffen, den es schon gab.

   **Sie borgt sich die ganze Bauform des Telegramms und aendert vier Dinge:**
   der Kopf ist ein `h1`, die Fakten stehen oben, der Verlauf bricht zweispaltig
   um, und die Aufstellung zeigt zwei Mannschaften statt einer.

   **Alles andere bleibt unveraendert** — das ist der Sinn von «eine Bauform,
   drei Orte». Keine eigenen Groessen, keine eigenen Farben, keine Kopie einer
   Regel mit anderem Namen. */

/* Der Kopf ist hier ein `h1`. Der Browser gibt einem `h1` eigene Abstaende und
   eine eigene Groesse; beides muss weg, sonst traegt die Bauform nicht mehr
   dieselbe Geometrie wie an den anderen zwei Orten. Die Schriftgroessen der
   Kinder sind ohnehin gesetzt — nur der Kasten selbst wird zurueckgestellt. */
h1.tg-kopf{font-size:inherit;font-weight:inherit;margin:18px 0 0}

/* **Zwei Koepfe, immer genau einer sichtbar.** Der verborgene traegt `hidden`
   und faellt damit aus jeder Zaehlung sichtbarer Ueberschriften. */

/* Der Seitenkopf endet schon in der gelben Linie von `.tg-kopf`; das
   Unterpolster von `.art-kopf` setzt darunter ein zweites Mal ab. */
.papier#v-spiel .art-kopf{padding-bottom:0}

/* **«Verlauf» braucht seinen eigenen Abstand nach oben.**
   Der Kopfblock gibt keinen mit — `padding-bottom:0` eine Zeile hoeher, mit
   gutem Grund: Der Kopf endet in der gelben Linie, ein Polster setzte darunter
   ein zweites Mal ab. **Nur gilt das fuer den Kopf, nicht fuer die
   Ueberschrift darunter.** Gemessen: 0px ueber «Verlauf», 14 darunter — sie
   klebte an der Kante des grauen Blocks.

   Dasselbe Mass wie zur ersten Verlaufszeile darunter waere zu wenig: Eine
   Ueberschrift gehoert naeher an das, was sie benennt, als an das, was
   darueber steht. Darum das Doppelte. */
#sp-verlauf > .grp{margin-top:28px}

/* Die Faktenzeile steht hier oben und braucht ihre Oberlinie nicht: Die gelbe
   Kante der Kopfzeile trennt schon. Zwei Linien uebereinander sind eine zu
   viel — dieselbe Antwort wie beim Hover der Kaderkachel. */
/* ── Der graue Block: Kopfzeile und Fakten auf einer Flaeche ───────
   **Sie gehoeren zusammen — Begegnung, Resultat, Angaben zum Spiel.** Der
   Verlauf darunter ist etwas anderes und bleibt auf Weiss. Bis zum 26.08.2026
   stand beides auf Weiss und las sich als eine Flaeche.

   **Die Bauform ist die des Spielerprofils, uebernommen und nicht kopiert.**
   `.sp-block` ist dort ein Zweispaltengitter fuer Foto und Fakten; ohne Foto
   faellt es durch seine eigene Regel auf eine Spalte zusammen. Gemessen bei
   390/640/760/1440: eine Spalte, `--papier-flaeche`, Polster 18 bzw. 26,
   volle `.wrap`-Breite. Es blieb genau eine Anpassung noetig, siehe unten. */
.spielblock{border-bottom:2px solid var(--gelb)}
/* > ~~«Die gelbe Kante gehoert jetzt unter den ganzen Block. Im Telegramm
   > sitzt sie unter der Kopfzeile, weil dort keine Flaeche darum liegt.»~~
   > ~~`.spielblock .tg-kopf{border-bottom:0;padding-bottom:0}`~~
   > — Stand 26.08.2026 bis 24.09.2026.

   **Der zweite Satz gilt nicht mehr: Das Telegramm fuehrt seit dem
   24.09.2026 denselben Block** (`single.php`, `.spielblock` ohne
   `.sp-block`). Es gibt keinen Ort mehr, an dem die Kante unter der
   Kopfzeile allein sitzt — und die Regel nahm eine Eigenschaft zurueck, die
   `.tg-kopf` nicht mehr traegt. **Zwei Regeln, die einander ausloeschen,
   sind kein Zustand, sondern ein Rest.**

   ⚠ **Das Polster ist NICHT mit an `.spielblock` gewandert**, sondern nur
   ins Telegramm: Die Spielseite legt ihre 18px rundum schon ueber
   `.sp-block{padding:18px}` daneben, und 18+14 waeren zwei Polster fuer
   eine Kante. */
#telegramm .spielblock{padding-bottom:14px}
/* **Im Theme ohne Traeger, und das ist die Bauform — 03.09.2026.**

   Der Prototyp legt DREI `.tg-kopf` ins Markup: den Kopf im Spielblock und
   zwei Zustaende desselben Kopfs auf der Spielseite -- `#sp-kopf-res` mit
   Resultat und `#sp-kopf-vor` davor, einer davon `hidden`. Diese Regel
   nimmt dem zweiten seinen oberen Abstand.

   **Das Theme legt nur einen ins Markup.** Welcher Zustand gilt, entscheidet
   die Vorlage aus den Feldern -- dieselbe Entscheidung wie beim Newsfilter
   am 02.09.: serverseitig statt im Browser.

   > **Zwei Zustaende nebeneinander braucht, wer im Browser umschaltet.** Wer
   > sie serverseitig auseinanderhaelt, hat nie zwei.

   Die Regel bleibt stehen und kostet nichts. Sie steht hier als begruendeter
   Rest und nicht als Versaeumnis. */
.spielblock .tg-kopf + .tg-kopf{margin-top:0}

/* **`--feldbreite` deckelt `.sp-fakten` auf 560px — im Spielerprofil richtig,
   hier nicht.** Dort steht die Faktenliste neben einem Foto und soll die
   Zeile nicht sprengen; hier hat sie den ganzen Block. **Der Deckel war der
   Grund, warum der Kommentar an dieser Stelle bis zum 26.08.2026 falsch war:**
   Er behauptete «bei 1440 stehen sie zu fuenft nebeneinander». Gemessen
   standen sie zu dreien und zweien, weil die Zeile bei 560 endete. Eine Zahl
   im Kommentar, die niemand nachgemessen hat — derselbe Fehler wie bei den
   sechs Wappen.

   **Jetzt gemessen und nicht behauptet:** bei 1440 fuenf nebeneinander, bei
   760 vier, bei 390 zwei. `auto-fit` und nicht `auto-fill` — sonst blieben
   rechts leere Spuren stehen, wenn weniger Fakten da sind. */
/* ⚠ **Der Deckel ist weg, die Zeile ist keine Spaltenreihe mehr —
   23.09.2026.** Hier stand:

   > ~~`#v-spiel .sp-fakten{… max-width:none;
   > grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 20px}`~~

   `max-width:none` ist durch `#v-spiel .spielblock>*` abgeloest (1100px fuer
   den ganzen Kasteninhalt, siehe unten); die Spaltenreihe durch Didis «links
   beginnend mit gleichmaessigem Abstand». **Die gemessenen fuenf/vier/zwei
   Spalten von damals waren nicht falsch, sie sind nur nicht mehr bestellt.**

   ── ⚠⚠ DER KOPFBLOCK DER SPIELSEITE — 23.09.2026, Didis Auftrag ─────

   > «Je Mannschaft untereinander mittig: Wappen (etwa 84 px), darunter der
   > Teamname, darunter klein «HEIM» bzw. «GAST». In der Mitte Uhrzeit
   > gross, darunter das volle Datum — auf Hoehe der Teamnamen, nicht der
   > Wappen. Hoechstbreite fuer den Kasteninhalt etwa 1100 px, mittig.
   > Darunter die Angaben links beginnend mit gleichmaessigem Abstand:
   > Wettbewerb, Runde, Anlage. «Anpfiff» entfaellt, das Datum steht oben.»
   >
   > «Handy: Gleich gebaut, nur kleiner: Wappen etwa 58 px, Name darunter.
   > Angaben untereinander statt nebeneinander; dort steht «Anpfiff»
   > wieder, weil oben nur der kurze Tag Platz hat.»

   ⚠ **Zwei Angaben des Zitats gelten am selben Abend nicht mehr**, und sie
   stehen trotzdem unveraendert da, weil ein zitierter Auftrag kein Sollwert
   ist: «Wappen etwa 58 px» ist auf 46 gegangen und «Wettbewerb, Runde,
   Anlage» auf «Wettbewerb, Anlage» — **die Runde steht seither vollstaendig
   in der Wettbewerbsangabe** und daneben nicht noch einmal. Die Begruendung
   samt Messung steht in `single-fch_spiel.php` beim `$fch_fakten`.

   ── ⚠ WARUM DIE ZWEI KOPFMASSE NICHT IM GROESSENBLOCK STEHEN ────────

   > ~~«WARUM DIE 84 UND DIE 58 NICHT IM GROESSENBLOCK STEHEN»~~ — Stand bis
   > 23.09.2026. **Beide Zahlen sind seither andere** — 68 breit, 46 schmal —,
   > und eine Ueberschrift, die Masse nennt, veraltet mit jedem Mass. Didis
   > Wortlaut darueber bleibt zitiert, wie er war; er ist der Auftrag von
   > damals und keine Zusicherung ueber heute.

   Die fuenf Wappengroessen stehen weiter oben als EIN Block, mit gutem
   Grund («ein Mass, das an sechs Stellen definiert ist, ist nach dem
   zweiten Umbau an zwei Orten gleich und an vier verschieden»). **Diese
   zwei gehoeren trotzdem hierher, aus derselben Begruendung wie die 44px
   der Startseite:** Sie sind Ueberschreibungen fuer EINEN Ort und keine
   Groessen der Sammlung. `fch_wappen_feld()` setzt am Kopf gar keine
   Zusatzklasse — dort gilt die Grundform 26, und die bleibt im
   Telegrammkopf des Matchberichts in Kraft.

   ── ⚠⚠ EINE ZAHL, ZWEI WIRKUNGEN: DER VERSATZ DER MITTE ─────────────

   «Auf Hoehe der Teamnamen, nicht der Wappen» heisst gerechnet: Die
   Mittelspalte faengt um die Wappenhoehe PLUS deren Luft tiefer an als die
   Reihe. **Darum stehen beide Masse als Eigenschaften am Kopf und nicht als
   Zahlen in den Regeln** — wer das Wappen aendert und die Uhr vergisst,
   bekaeme einen Versatz, der wie eine Layoutlaune aussieht und keiner ist.

   Rechenbar ist das nur, weil die Zeile `align-items:stretch` traegt
   (`.zk:has(.tn-voll)` weiter oben): Beide Klubzellen beginnen an der
   Oberkante der Reihe, und damit ist «Oberkante Name» = Wappen + Luft.

   ⚠ Der Selektor hiess bis heute nachmittags
   `.zk:not(:has(.wappen-naechste)):has(.tn-voll)`; die Ausnahme ist mit dem
   Umbau der Startseitenkaesten entfallen. **Fuer diesen Kopf war sie ohnehin
   nie zustaendig** — er fuehrt kein `.wappen-naechste`.

   Nachgemessen an diesem Kopf, 11 Spielseiten ueber sieben Fensterbreiten:
   Hoehendifferenz der zwei Klubzellen 0,00 und Wappenversatz 0,00 in allen
   Faellen.

   ⚠⚠ **Das RESULTAT bekommt den Versatz NICHT, und das ist ein Entscheid.**
   Es holt sich in derselben fremden Regel `align-self:center` zurueck, mit
   der Begruendung «gestreckt haengt es oben in einem hohen Kasten, statt
   zwischen den Mannschaften zu stehen». **Didis Satz nennt die Uhrzeit; ein
   gespieltes Spiel hat keine.** Eine gemessene fremde Regel zu
   ueberschreiben, weil ein Satz auch auf den Nachbarfall passen koennte,
   waere keine Umsetzung, sondern eine zweite Meinung.

   ── ⚠⚠ «ANPFIFF» ENTFAELLT NUR, WO DAS DATUM WIRKLICH OBEN STEHT ────

   Didis Begruendung ist eine Bedingung und keine Ansage: «entfaellt, das
   Datum steht oben» — und auf dem Handy «steht «Anpfiff» wieder, weil oben
   nur der kurze Tag Platz hat». **Bei einem gespielten Spiel steht oben
   ueberhaupt kein Datum, sondern das Resultat.** Waere die Zeile dort auch
   weg, verloere die Seite das Datum ganz — gemessen an 6 von 11 Spielen im
   lokalen Bestand.

   Darum haengt die Regel am Geschwister `#sp-kopf-vor` und nicht an der
   Ansicht: Sie feuert genau dann, wenn der Kopf die Uhr traegt. **Der
   Zustand, der die Zeile ueberfluessig macht, steht im Markup — er muss
   nicht geraten werden.**

   > ⚠ **Gemeldet, nicht entschieden:** Didis Aufzaehlung «Wettbewerb,
   > Runde, Anlage» liest sich absolut. Wer sie so will, muesste das Datum
   > auch unter das Resultat setzen; das waere eine Zeile mehr im Kopf, die
   > niemand bestellt hat. Die Entscheidung gehoert Didi.

   ⚠ Die 640er-Schwelle ist KEINE neue Zahl: Es ist dieselbe, an der
   `--tn-min` den Namen schrumpfen laesst und `.tn-kurz` uebernimmt. Der
   ganze Kopf schaltet damit an einer einzigen Stelle um. */
/* ⚠ **`width:100%` ist hier nicht Zierrat, sondern der Unterschied zwischen
   «hoechstens 1100» und «genau so breit wie der Inhalt».** Ohne die Zeile
   nehmen die zwei Rasterkinder mit `margin-inline:auto` die Schrumpfbreite
   an: gemessen bei 1440 **557,25px fuer die Kopfzeile und 521,33 fuer die
   Angaben, beide mittig** — die Angaben standen damit auch nicht mehr
   links, sondern in der Mitte, gegen Didis «links beginnend». Mit `100%`
   greift der Deckel: 1100 und mittig. */
#v-spiel .spielblock>*{width:100%;max-width:1100px;margin-inline:auto}

/* Handy zuerst: Der kleinere Kopf ist hier die Grundform, weil Didis zweite
   Beschreibung ausdruecklich «gleich gebaut, nur kleiner» lautet — eine
   Bauform, zwei Masspaare. */
/* ⚠ **58 → 46 am 23.09.2026 abends, Didis Mass.** Der Kopf traegt auf dem
   Handy seit heute den vollen Teamnamen auf beiden Seiten (der Kurzname ist
   ausgezogen); ein 58er Wappen und zwei volle Klubnamen sind zusammen zu
   viel fuer 360px. **Die Zahl steht als Variable und nicht an drei Regeln:**
   sie bestimmt zugleich den Versatz der Uhrzeit
   (`calc(var(--kopf-wappen) + var(--kopf-wappen-luft))`), damit die Uhr auf
   Hoehe der Teamnamen steht und nicht auf Hoehe der Wappen. Wer sie an einer
   Stelle aenderte, verschoebe die andere still mit. */
/* ── ⚠⚠ DIE WAPPENGROESSE DES TELEGRAMMKOPFS — 24.09.2026, Didis Mass ──

   > «Logos kleiner als auf der Spielseite, aber groesser als heute im
   > Telegramm — **etwa 40 px**.» … «Handy (unter 620 px): wie die
   > Spielseite am Handy, **Logos entsprechend kleiner**.»

   **Gemessen vorher, am 24.09.2026 im lokalen Stapel:**

   ```
                 375px   1440px
   Spielseite      46      68
   Telegramm       26      26
   ```

   Die 26 sind die Grundform `.wappen{width:26px}` — der Telegrammkopf setzte
   gar nichts eigenes und nahm, was die Sammlung fuehrt. **Didis «etwa 40»
   liegt zwischen den beiden**, und mit der Variablen steht die Zahl an
   EINER Stelle: Sie bestimmt zugleich den Versatz der Uhr
   (`calc(var(--kopf-wappen) + var(--kopf-wappen-luft))`, weiter unten).

   ⚠ **32 schmal und nicht 27.** «Entsprechend kleiner» im Verhaeltnis der
   Spielseite (46/68) ergaebe 27 — also die heutige 26, und damit waere auf
   dem Handy nichts groesser geworden. Genau das bestellt Didi im selben
   Punkt aber ausdruecklich («groesser als heute im Telegramm»). **32 ist
   keine neue Zahl**, sondern die Groesse, die das Wappen im Spielplan schon
   traegt (`.wappen-plan`).

   ⚠ **Die Luft bleibt bei 8 und wandert nicht mit** — dieselbe Begruendung
   wie bei 84→68 weiter unten: Didi nennt das Wappen, nicht den Abstand
   darunter.

   ⚠⚠ **Die Schwelle ist hier 620 und nicht die 640 des Spielseitenkopfs.**
   Didis Wortlaut nennt 620, und das ist die Hausschwelle
   (`@media(min-width:620px)` / `@media(max-width:619px)`, 41 Vorkommen im
   Blatt). **Der Preis ist benannt:** Die zwei Datumsformen `.dt-voll` /
   `.dt-kurz` schalten weiter bei 640 und gelten fuer beide Koepfe — im
   Streifen 620–639 traegt das Telegramm darum schon das grosse Wappen und
   noch den kurzen Tag. Die 640 dort zu verschieben haette die Spielseite
   mitbewegt, und die darf sich nicht bewegen. */
.tg-kopf{--kopf-wappen:40px;--kopf-wappen-luft:8px}
@media(max-width:619px){.tg-kopf{--kopf-wappen:32px}}
#v-spiel .tg-kopf{--kopf-wappen:46px;--kopf-wappen-luft:8px}
/* `text-align:center` hebt `.re{text-align:right}` fuer diesen Kopf auf; die
   Auszeichnung `.re` bleibt, weil sie die Gastseite benennt und nicht nur
   ihre Ausrichtung. */
/* ⚠ **`#v-spiel` ist am 24.09.2026 weggefallen — die drei Regeln ab hier
   gelten jetzt fuer BEIDE Koepfe.** Didi: «Dieselbe Bauform wie der Kopf der
   Spielseite wiederverwenden, **keine Kopie**.» Das Markup war schon geteilt
   (`inc/spielkopf.php`); die Anordnung war es nicht — sie hing an der
   Kennung der Spielseite, und das Telegramm zeigte dieselbe Bauform
   linksbuendig mit 26er Wappen. **Eine zweite Fassung unter `#telegramm`
   waere genau die Kopie gewesen, die der Auftrag ausschliesst.**

   **Was verschieden bleibt, sind die zwei Masse** — und die stehen oben als
   Eigenschaften und nicht in diesen Regeln. */
.tg-kopf .klub{text-align:center}
/* `margin:0 auto …` hebt zugleich `.klub.re .wappen{margin-left:auto}` auf —
   dort schob es das Wappen an den rechten Rand, hier steht es mittig. */
/* ⚠ **`.tg-kopf .klub .wappen` und nicht `.tg-kopf .wappen`.** Ohne die
   dritte Stufe stuende die Regel mit `.klub.re .wappen{margin-left:auto}`
   auf demselben Gewicht (0,2,0), und welche gilt, entschiede allein die
   Reihenfolge im Blatt — ueber 8500 Zeilen hinweg. Mit `#v-spiel` davor war
   die Frage nie gestellt; ohne die Kennung ist sie es. */
.tg-kopf .klub .wappen{width:var(--kopf-wappen);height:var(--kopf-wappen);
  margin:0 auto var(--kopf-wappen-luft)}
/* ⚠⚠ **`align-self:start` hebt eine gemessene fremde Regel auf, und zwar
   nur hier.** Weiter oben steht `.zk:has(.tn-voll)>.score,.zk:has(.tn-voll)>.uhr
   {align-self:center}` mit der Begruendung: «gestreckt haengen sie oben in
   einem hohen Kasten, statt zwischen den Mannschaften zu stehen». **Auf der
   Startseite ist das richtig; auf der Spielseite hat Didi das Gegenteil
   bestellt** — «auf Hoehe der Teamnamen, nicht der Wappen».

   ── Drei Fassungen, am Rechteck gemessen ────────────────────────────

   «FC Herrliberg 1» gegen «Gegner noch offen», sieben Fensterbreiten.
   Oberkante `.uhr` gegen Oberkante Teamname (`.klub b`) und gegen
   Oberkante Wappen — Didis Satz nennt beide Bezugskanten:

   ```
   Breite                         360     390     520     640     768    1024    1440

   A  geteilte Regel allein
      zum Namen                -25,09  -22,81  -20,53  -46,02  -48,58  -49,52  -49,52
      zum Wappen                40,91   43,19   45,47   49,98   47,42   46,48   46,48

   B  geteilte Regel + Versatz
      zum Namen                  7,91   10,19   12,47    1,98    0,00    0,00    0,00

   C  gebaut: start + Versatz
      zum Namen                  0,00    0,00    0,00    0,00    0,00    0,00    0,00
      zum Wappen                66,00   66,00   66,00   96,00   96,00   96,00   96,00
   ```

   **Zeile A ist der Befund:** Die geteilte Regel allein stellt die Uhr rund
   auf halbe Wappenhoehe — also genau dorthin, wo Didis Satz sie ausdruecklich
   nicht haben will, und 20 bis 50px ueber den Namen.

   **Zeile B zeigt, warum `center` und Versatz sich nicht vertragen:** Die
   0,00 bei 768 bis 1440 sind kein Erfolg, sondern ein Zufall — dort ist die
   Zeile gerade so hoch wie ihr hoechstes Kind, und `center` hat nichts zu
   verteilen. Sobald ein Name umbricht, wandert der Wert mit
   (1,98 · 7,91 · 10,19 · 12,47). **Ein Mass, das von der Namenslaenge
   abhaengt, ist keines.**

   ⚠⚠ **Die geteilte Regel selbst bleibt unangetastet** — sie traegt seit
   heute die zwei Startseitenkaesten UND diesen Kopf; ein Umbau dort traefe
   drei Orte. Zurueckgenommen wird sie nur unter `#v-spiel`, wo Didis
   Wortlaut das Gegenteil bestellt.

   ⚠ Das RESULTAT behaelt sein `center`; siehe den Block oben. */
/* ⚠⚠ **`.zk.tg-kopf` und nicht `.tg-kopf` allein — 24.09.2026.** Die Regel,
   die hier aufgehoben wird (`.zk:has(.tn-voll)>.uhr{align-self:center}`),
   wiegt 0,3,0; `.tg-kopf>.uhr` wiegt 0,2,0 und verloere. **Die zweite Klasse
   ist kein Zierrat, sie stellt das Gewicht wieder her** — sie steht im
   Markup ohnehin an beiden Koepfen (`class="zk tg-kopf"`). Gleichstand
   entscheidet dann die Reihenfolge, und diese Regel steht spaeter. */
.zk.tg-kopf>.uhr{align-self:start;
  margin-top:calc(var(--kopf-wappen) + var(--kopf-wappen-luft))}
/* Die zwei Datumsformen: beide im Markup, eine sichtbar. Nicht auf
   `#v-spiel` eingegrenzt — sie gehoeren dem gemeinsamen Kopf und gelten
   damit auch im Telegramm des Matchberichts. */
.tg-kopf .dt-voll{display:none}

/* ── ⚠⚠ «VERSCHOBEN» AUF EIGENE ZEILE — 23.09.2026, gemessen ─────────

   `.uhr` traegt `white-space:nowrap`, und `.rz-tag` ist `inline-flex`.
   Damit stand «VERSCHOBEN 17:00» als EINE unzerbrechliche Zeile und
   bestimmte die Breite der ganzen Mittelspalte:

   ```
                              .uhr breit     .klub je Seite   Wappen passt?
     ohne Zustand, 360           73,50            107,25       ja  (58)
     «verschoben», 360          166,88             47,56       NEIN, 10,4 ueber
     «verschoben», 1440         205,36                  —      ja
   ```

   **Die zwei Klubzellen schrumpften auf 47,56px — schmaler als das Wappen
   selbst.** Die Mittelmarge `margin:0 auto` war damit ueberbestimmt und fiel
   auf 0 zurueck; gemessen stand das Wappen 5,22px aus der Mitte und ragte
   ueber den Kasten hinaus.

   ⚠ **Aufgefallen ist es erst beim Durchgang ueber ALLE elf Spielseiten.**
   Auf den zwei Seiten, an denen zuerst gemessen wurde, gibt es keinen
   Zustand — dort stimmte alles. **Zwei von elf Datenlagen sind keine
   Stichprobe, sie sind die zwei, die man gerade offen hat.**

   `width:max-content` ist noetig: Als Blockkind eines `text-align:center`
   waere `display:flex` ueber die volle Breite gezogen, und der gelbe Grund
   des Etiketts liefe durch die halbe Zeile. 7px ist die Stufe, die das
   Wappen schon traegt.

   ⚠ Nicht auf `#v-spiel` eingegrenzt: Der Telegrammkopf des Matchberichts
   fuehrt seit dem Zusammenlegen dieselbe `.uhr` und haette denselben Fall.
   `.tg-kopf` gibt es nur an diesen zwei Orten — die `.rz-tag` des
   Spielplans bleibt unberuehrt. */
.tg-kopf .uhr .rz-tag{display:flex;width:max-content;margin:0 auto 7px}

/* **Untereinander mit Luft.** Ohne `gap` klebten die Angaben aneinander:
   `.tg-fakten .tz` traegt `padding:0;margin:0`, und zwischen Wert und
   naechstem Etikett stuenden dann 0px, waehrend Etikett und Wert derselben
   Angabe 3px trennen. **Eine Gruppierung, die enger sitzt als ihr Inhalt,
   ist keine.** */
#v-spiel .sp-fakten{border-top:0;margin-top:0;padding-top:0;
  display:flex;flex-direction:column;gap:14px}

/* ── ⚠⚠ SYMBOL STATT ETIKETT, WERT DANEBEN — 23.09.2026 abends ──────────

   Didi: «Statt der ausgeschriebenen Etiketten dieselben Symbole wie in den
   Startseitenkaesten … Der Wert steht direkt neben dem Symbol, nicht
   darunter.»

   Bis heute abend stand er DARUNTER, und zwar nicht aus Absicht, sondern als
   Erbe: `.tg-fakten .tz` ist ein Block und `.tg-fakten b` ebenfalls — zwei
   Bloecke untereinander. **Gemessen am 23.09.2026 vorher:** Etikett bei
   y=294,69, Wert bei y=318,28 — 23,59px auseinander, auf beiden Breiten.

   ── Warum die Schriftgroesse an `.tz` haengt und nicht am Wert ──────

   `.ic` ist `width:1em;height:1em`. **Wer die Groesse an EINER Stelle setzt,
   setzt damit Schrift UND Symbol** — und die zwei koennen nicht
   auseinanderlaufen. `font-size:inherit` am Wert nimmt die 14px zurueck, die
   `.tg-fakten .tz span` allen Werten gibt; ohne diese Zeile bliebe der Wert
   auf 14, waehrend das Symbol schmal auf 11 ginge.

   ⚠ **Der Matchbericht bleibt unberuehrt.** `single.php` baut seinen
   Faktenblock als `.tg-fakten` OHNE `.sp-fakten` — gemessen am 23.09.2026,
   `.sp-fakten` steht im ganzen Theme an genau einer Markupstelle
   (`single-fch_spiel.php`). Die Regeln hier koennen ihn darum nicht treffen.

   ── Warum `flex-start` und `.3em` statt `align-items:center` ────────

   Die Startseitenkaesten zentrieren (`.meta span{align-items:center}`), und
   das ist dort richtig: Jede der drei Angaben steht auf EINER Zeile.
   **Hier bricht der Wert um** — gemessen bei 390 in der 149px-Spalte ist
   «Meisterschaft 2. Liga · Gruppe 1» zweizeilig. Zentriert saesse das Symbol
   dann in der Mitte des zweizeiligen Blocks, waehrend der Wert oben beginnt.

   `.3em` ist kein geschaetzter Ausgleich, sondern genau der Versatz, den
   das Zentrieren erzeugt: **die Zeilenhoehe ist an beiden Orten 1.6**
   (gemessen: 11px → 17,6px im Kasten, 14px → 22,4px im Kopf), und
   (1.6em − 1em) / 2 = .3em. Bei 11px sind das 3,30px — **derselbe Wert, den
   der Startseitenkasten misst** (Symboloberkante 1323,69 gegen
   Spanoberkante 1320,39).

   ⚠ Das Symbol traegt die Farbe des Etiketts, das es ersetzt
   (`--gold-flaeche`), und nicht die des Werts. Es IST das Etikett, nur in
   anderer Form.

   ⚠ `margin-right` kommt aus `.ic` selbst (.4em) und wird hier nicht
   wiederholt — dieselbe Luft wie im Startseitenkasten. */
/* ── ⚠⚠ DREI EIGENSCHAFTEN, DIE DER BLOCKZUSTAND VERDECKT HATTE ────────

   `.tz` ist von Haus aus ein Flexkasten:

   > `.tz{display:flex;justify-content:space-between;gap:16px;padding:13px 0;…}`

   `.tg-fakten .tz{display:block;padding:0;margin:0}` hat daraus einen Block
   gemacht — und `justify-content` und `gap` damit wirkungslos, aber nicht
   weg. **Wer die Zeile wieder zum Flexkasten macht, weckt beide auf.**
   Gemessen am 23.09.2026 im ersten Anlauf, ohne diese Ruecknahme:

   ```
   390px, Zelle «Ort» von x=36 bis x=354
     Symbol  bei x=36    Wert bei x=302,98   -- space-between, rechte Kante
   1440px, Abstand Symbol-zu-Wert
     16px gap + 5,6px margin-right = 21,6px statt 5,6
   ```

   **Das ist genau das Gegenteil von «der Wert steht direkt neben dem
   Symbol».** `justify-content:flex-start` und `gap:0` nehmen es zurueck; die
   Luft kommt allein aus `.ic{margin-right:.4em}` — dieselbe Quelle wie im
   Startseitenkasten, und darum dieselbe Zahl.

   ⚠⚠ **`flex-wrap:nowrap` ist die dritte.** Unter 400 setzt
   `@media(max-width:399px){.sp-fakten .tz{flex-wrap:wrap;gap:0}}` — eine
   Regel aus der Zeit, als `.sp-fakten` die Faktenliste des Spielerprofils
   war (Etikett neben Wert, bei 320 ein Pixel Ueberlauf). Mit `wrap` fiel der
   Wert unter das Symbol, sobald er in seiner Spalte nicht in einer Zeile
   Platz fand: **gemessen bei 390 stand «Meisterschaft 2. Liga · Gruppe 1»
   14,29px tiefer als sein Symbol — genau eine Symbolhoehe plus Versatz.**
   Mit `nowrap` schrumpft der Wert stattdessen (`min-width:0`) und bricht
   INNERHALB seiner Zelle um, neben dem Symbol statt darunter.

   > **Die 399er-Regel steht damit auf der Spielseite ohne Wirkung** — und
   > `.sp-fakten` steht im ganzen Theme an genau einer Markupstelle. Sie
   > bleibt hier unangetastet: Ihr Kommentar traegt eine gemessene
   > P0-Meldung, und das Wegraeumen einer fremden Begruendung ist kein
   > Nebeneffekt dieses Auftrags. */
#v-spiel .sp-fakten .tz{display:flex;flex-wrap:nowrap;align-items:flex-start;
  justify-content:flex-start;gap:0;font-size:var(--tx-klein)}
#v-spiel .sp-fakten .tz>span{font-size:inherit;min-width:0}
#v-spiel .sp-fakten .ic{color:var(--gold-flaeche);margin-top:.3em}

@media(min-width:640px){
  /* ⚠ **84 → 68 am 23.09.2026, Didis Mass:** «Spielseite, Kopfblock auf dem
     Computer: Wappen etwa 68 px statt 84. Auf dem Handy bleibt alles, wie es
     ist.» Der zweite Satz ist die Bedingung und nicht die Zugabe — die 46 der
     Grundform oben bleibt darum unberuehrt, und geaendert wird allein in
     diesem Block.

     ⚠⚠ **Die Luft bleibt bei 12 und wandert NICHT mit.** Sie ist der Abstand
     zwischen Wappen und Teamname und kein Anteil der Wappenhoehe; ein
     kleineres Wappen macht den Namen nicht enger. **Der Uhrversatz stimmt
     trotzdem weiter**, weil er aus derselben Variablen rechnet — 68 + 12 = 80,
     und genau 80 misst «Oberkante Reihe bis Oberkante Name», solange die
     Zeile `align-items:stretch` traegt. Nachgemessen am 23.09.2026, Oberkante
     `.uhr` gegen Oberkante `.klub b`: **0,00 bei 640 und 1440** — dieselbe
     Null wie mit 84, und dieselbe wie schmal mit 46.

     ⚠ **Ein Ruecknachziehen der Luft waere hier der Fehler gewesen.** 84+12
     und 68+12 sind zwei Versaetze, aber nur einer davon ist eine Bestellung:
     Didi hat das Wappen genannt, nicht den Abstand darunter. Wer die Luft
     «passend» auf 28 zoege, haelte den alten 96er-Versatz und schoebe den
     Namen um 16px vom Wappen weg. */
  #v-spiel .tg-kopf{--kopf-wappen:68px;--kopf-wappen-luft:12px}
  .tg-kopf .dt-voll{display:block}
  .tg-kopf .dt-kurz{display:none}
  /* **40 und nicht 20.** In der abgeloesten Spaltenreihe trennte zusaetzlich
     die Spaltenkante; bei Angaben in Inhaltsbreite traegt allein der Abstand.
     Doppelt so viel ist keine neue Stufe, sondern dieselbe zweimal. */
  /* ⚠ Der Zeilenabstand ist NICHT 0, obwohl die Angaben breit auf einer
     Zeile stehen sollen: Bei vier Angaben und einem langen Anlagenamen
     bricht die Reihe um — gemessen auf «FC Wetzikon 2 — FC Herrliberg 1»
     bei 640 und 768. Mit `gap:0 40px` klebte die zweite Zeile an der
     ersten. **Eine Umbruchregel ohne Zeilenabstand ist eine halbe.**

     ⚠ **Es sind seit dem 23.09.2026 hoechstens drei** — «Runde» ist weg,
     weil die Angabe daneben unter «Wettbewerb» schon vollstaendig steht
     (die Begruendung in `single-fch_spiel.php`). **Die Regel bleibt
     trotzdem**, und zwar nicht vorsorglich: Bei einem gespielten Spiel
     stehen weiter drei Angaben nebeneinander, und der Anlagename ist
     derselbe, der die Messung oben ausgeloest hat. Wer den Zeilenabstand
     jetzt strichte, muesste ihn beim naechsten langen Ort wieder
     einfuehren. */
  /* ⚠ **`justify-content:center` kam am 23.09.2026 abends dazu.** Die vier
     Angaben begannen an der linken Kante, waehrend die Paarung darueber
     mittig steht — zwei Schwerpunkte in einem Kasten. Didi: «als Gruppe
     zentriert».

     ⚠⚠ **Zentriert wird die GRUPPE, nicht der Inhalt der Zellen.** Die
     Abstaende untereinander bleiben, wie sie sind (14px Zeile, 40px Spalte),
     und jede Angabe behaelt ihr linksbuendiges Etikett ueber dem Wert. Ein
     `text-align:center` an den Zellen saehe auf den ersten Blick aehnlich
     aus und ordnete in Wahrheit vier Bloecke einzeln aus — bei umbrechender
     Reihe stuende dann jede Zeile fuer sich, statt dass die Gruppe als
     Ganzes mittig bliebe.

     ⚠ Nur hier, also ab 640. Schmal stehen die Angaben in zwei Spalten zu
     je zwei (siehe den Handyblock weiter unten); dort waere Zentrieren
     wirkungslos, weil das Raster die Breite ohnehin ausfuellt. */
  #v-spiel .sp-fakten{flex-direction:row;flex-wrap:wrap;gap:14px 40px;
    justify-content:center}
  /* ⚠ **`#sp-anpfiff` heisst seit dem 23.09.2026 abends `#sp-datum`.**

     > ~~`#sp-kopf-vor ~ .sp-fakten #sp-anpfiff{display:none}`~~

     Die Kennung entsteht in `single-fch_spiel.php` aus dem Etikett, und das
     heisst neu «Datum». **Die Regel bleibt trotzdem gewollt**, denn ihr Grund
     haengt nicht am Namen: Bei einem Spiel ohne Resultat (`#sp-kopf-vor`)
     zeigt die Anstosszeile oben bereits das volle Datum (`.dt-voll`, siehe
     weiter oben in diesem Block). Bei einem gespielten Spiel steht dort ein
     Resultat und kein Datum — dann bleibt die Angabe stehen.

     ⚠ Schmal greift die Regel nicht, und das ist richtig: Dort zeigt der
     Kopf nur `.dt-kurz` («So. 26.07.»), die Jahreszahl und die Uhrzeit
     stehen allein in der Angabe. */
  #sp-kopf-vor ~ .sp-fakten #sp-datum{display:none}
}

/* ══ DER KOPF AUF DEM HANDY — 23.09.2026 abends ═══════════════════════

   ⚠ **Ein eigener Block unter 640 und keine Aenderung an den Grundregeln.**
   Didis Satz «auf dem Computer bleibt alles, wie es ist» ist die Bedingung,
   nicht die Zugabe: Die Grundregeln gelten fuer BEIDE Breiten, und wer sie
   anfasst, aendert breit mit. Was nur schmal gelten soll, steht hier.

   ── Die Teamnamen ────────────────────────────────────────────────────

   14px ist eine Stufe tiefer als die 17, die `clamp(17px,2.1vw,20px)` unten
   ergibt. Das Einpassen aus `assets/fch.js` setzt von hier aus weiter
   herunter, bis zur Untergrenze `--tn-min` (11px) — die 14 sind der
   Ausgangspunkt, nicht das Ende.

   ⚠⚠ **`overflow-wrap:normal` und `hyphens:manual` nehmen zurueck, was die
   Grundregel erlaubt.** Dort steht `hyphens:auto;overflow-wrap:anywhere` —
   gebaut fuer «Spielgemeinschaft Zuerisee-Herrliberg» in einer 181px-Zelle.
   Didi will hier den Umbruch NUR zwischen Woertern: ein Klubname, der mitten
   im Wort bricht, liest sich wie ein Tippfehler.

   > **Der Preis ist benannt:** Ein einzelnes Wort, das breiter ist als die
   > Zelle, ragt jetzt hinaus, statt zerlegt zu werden. Das Einpassen faengt
   > es bis 11px ab; darunter bleibt es stehen. Der Fall ist im Bestand nicht
   > belegt — kein Klubname besteht aus einem einzigen ueberlangen Wort.

   ── Die Angaben ──────────────────────────────────────────────────────

   > ~~«── Die vier Angaben ──» … «Zwei Spalten zu je zwei statt vier
   > untereinander.»~~ — Stand bis 23.09.2026, als «Runde» noch eine eigene
   > Angabe war.

   > ~~«**Es sind drei**, und das Raster teilt sie darum auf zwei Zeilen zu
   > 2+1 … **Die letzte Zelle steht dann linksbuendig und nicht mittig** —
   > gewollt … Eine Zentrierung der Restzelle brauchte eine zweite Regel»~~
   > — Stand bis 23.09.2026 abends.
   >
   > ~~«Etikett ueber Wert steht schon: `.tg-fakten .tz` ist ein Block und
   > `.tg-fakten b` ebenfalls — hier ist nur die Anordnung der Zellen
   > neu.»~~ — derselbe Stand.

   **Beides ist von Didis Auftrag vom selben Abend ueberholt.** Die dritte
   Zelle steht nicht mehr linksbuendig in Spalte eins, sondern ueber beide
   («Auf dem Handy geht der Ort ueber die ganze Breite, ueber beide
   Spalten»), und das Etikett steht nicht mehr ueber dem Wert, sondern als
   Symbol daneben. **Die Regeln dazu stehen unten in diesem Block.**

   **Zwei Zeilen zu 2+1 bleiben es trotzdem** — nur ist die zweite jetzt
   eine volle statt einer halben. `minmax(0,1fr)` haelt die zwei Spuren der
   ersten Zeile weiter gleich breit; ohne die Null zwaenge ein langer
   Wettbewerb die eine Spur ueber die Haelfte hinaus.

   ⚠ **Der Wert bricht jetzt INNERHALB seiner Zelle um**, neben dem Symbol
   statt darunter. Gemessen am 23.09.2026 ueber alle elf Spielseiten und
   zehn Breiten von 320 bis 1440 (110 Messungen): **kein Ueberlauf, und die
   Oberkante des Werts stimmt ueberall auf 0,00 mit der Zeilenoberkante
   ueberein.** Bei 320 steht der Wettbewerb dreizeilig in seiner Zelle —
   das ist der Umbruch und kein Fehler.

   ⚠ Der Zeilenabstand (14px) ist derselbe wie in der abgeloesten Spalte, der
   Spaltenabstand (20px) die Haelfte der 40 von breit. Keine neuen Stufen. */
@media(max-width:639px){
  #v-spiel .tg-kopf .klub b{font-size:14px;overflow-wrap:normal;hyphens:manual}
  #v-spiel .sp-fakten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 20px}
  /* ⚠ **Dieselbe Schriftgroesse und Symbolgroesse wie im
     Startseitenkasten** — Didis Wortlaut. `.meta` steht auf
     `--tx-etikett` (11px) und `.ic` auf 1em; **gemessen am 23.09.2026
     traegt der Kasten 11px Schrift und 11x11 Symbol auf JEDER Breite**,
     nicht nur schmal. Eine Zeile hier, und beides stimmt.

     ⚠⚠ **Die Schwelle ist 640 und nicht die 520 des Startseitenkastens.**
     Didis «auf dem Handy» meint bei den zwei Bauteilen verschiedene
     Zahlen, weil jedes seine eigene Umschaltung hat: Der Kasten geht bei
     520 (Wappen auf 44), der Kopfblock bei 640 (Wappen auf 68, volles
     Datum, Angaben in einer Reihe). **Bei 520 zu schalten hiesse, im
     Streifen 520–639 die Handy-Anordnung mit der Computerschrift zu
     zeigen** — ein dritter Zustand, den niemand bestellt hat.

     ⚠ Der Kasten laeuft dabei nicht auseinander: Er steht auf beiden
     Seiten der 640 bei 11px, weil `.meta` gar keine zweite Groesse fuehrt.
     Gleich heisst hier also wirklich gleich. */
  #v-spiel .sp-fakten .tz{font-size:var(--tx-etikett)}
  /* ⚠⚠ **Ueber die KLASSE und nicht ueber `:nth-child(3)`.** Didi: «Auf
     dem Handy geht der Ort ueber die ganze Breite … Datum und Wettbewerb
     bleiben nebeneinander.» Fehlt das Datum, ist der Ort der zweite; fehlt
     der Wettbewerb, ebenso. **Ein Waehler, der von der Vollzaehligkeit
     abhaengt, ist genau dort falsch, wo ein Spiel unvollstaendig erfasst
     ist** — dieselbe Begruendung, die `.meta-ort` im Startseitenkasten
     traegt, und derselbe Mechanismus. */
  #v-spiel .sp-fakten .sp-fakt-ort{grid-column:1/-1}
}

/* **Die 760er-Schwelle stammt aus dem Spaltensatz und gilt weiter — aber aus
   einem anderen Grund.** Dort war sie gemessen: Bei 390 lief der Text in elf
   von zwoelf Zeilen ueber, weil die Zeile 62px fuer die Minute und 16px fuer
   das Zeichen fest verdrahtet hat — in einer 165px-Spalte 47 Prozent
   Vorspann. **Fuer die Teilung nach Mannschaften gilt dieselbe Rechnung
   schaerfer:** Dort bleiben je Haelfte nur 165 minus die halbe Mittelspur.

   **Der Kommentar, der hier stand, beschrieb den Spaltensatz — und der ist
   seit dem 26.08.2026 nicht mehr die Fassung.** Er nannte «elf Ereignisse»,
   gebaut sind zwoelf, und er nannte Hoehen, die zu einer anderen Anordnung
   gehoerten. **Ein Kommentar veraltet nicht, wenn die Zahl sich aendert,
   sondern wenn der Gegenstand sich aendert** — und dann faellt zuerst die
   Zahl auf, obwohl der ganze Absatz gemeint ist. */
/* **Der geteilte Verlauf gilt an beiden Orten**, Spielseite und Matchbericht.
   Die Regeln hiessen bis zum 28.08.2026 `#v-spiel .sp-verlauf` und waren damit
   an eine Ansicht gebunden — der Matchbericht zeigte dieselben Ereignisse
   einspaltig, obwohl es dasselbe Spiel ist. **32 Selektoren von der Ansicht
   geloest.**

   Der Klassenname bleibt `sp-verlauf`, obwohl «sp» fuer Spielseite stand: Ihn
   umzubenennen kostete 32 Regeln und 2 Markupstellen fuer nichts, was man
   sieht. **Der Kommentar traegt die Erklaerung, nicht der Name.**

   Die Bedingung fuer die Teilung ist ohnehin nicht die Ansicht, sondern das
   Markup: `:not(:has(.ve-heim))` schaltet auf einspaltig zurueck, wenn keine
   Zeile eine Seite traegt. */
/* ── Der Verlauf, nach Mannschaften geteilt ────────────────────────
   **Heim links, Gast rechts, die Minute in der Mitte — ab 760.**

   **Der Gewinn ist nicht die Zuordnung, die stand schon im Vereinsnamen. Der
   Gewinn ist die Verteilung.** Man sieht auf einen Blick, wie ungleich die
   Ereignisse liegen: acht links, vier rechts sagt etwas ueber das Spiel, was
   eine Liste nicht sagt.

   **Der Preis ist Weissraum** — jede Zeile hat eine leere Haelfte.

   **`.ve-seite` fasst Zeichen und Text zusammen**, damit die Zeile oben ein
   Dreispurgitter sein kann und unten das gewohnte Zweispurgitter. Beide
   Fassungen stehen im SELBEN Markup; nur die Anordnung wechselt.

   **Das Rastermass ist ausgerechnet, damit die Aufstellung darunter dieselben
   Kanten bekommt:** Mittelspur 76px plus zweimal 16px Zwischenraum sind 108;
   die Aufstellung bekommt darum ab 760 genau 108px Zwischenraum. Damit ist
   `(Breite − 108) / 2` in beiden Baenken dieselbe Zahl — gemessen bei 1440
   je 646px, bei 760 je 308px. Ohne das saehe die Seite nach zwei Rastern aus. */
@media(min-width:760px){
  .sp-verlauf .ve-z{grid-template-columns:1fr 76px 1fr;gap:0 16px;
    align-items:start;break-inside:avoid}
  /* **Auch hier die ausdrueckliche Zeile — dritter Fall desselben Sprungs an
     einem Tag.** Steht die Minute in Spalte 2 und die Heim-Haelfte in Spalte
     1, findet die Auto-Platzierung fuer sie in Zeile 1 keinen Platz mehr und
     setzt sie in Zeile 2. Gemessen: Heimzeilen 62px hoch statt 39, der Inhalt
     23px unter seiner Minute. Bei Gast faellt es nicht auf, weil Spalte 3
     vorwaerts liegt.

     **Woran man die Sorte erkennt:** Ein Kind soll links von einem stehen,
     das im Markup vor ihm kommt. Dann reicht `grid-column` nie allein. */
  .sp-verlauf .ve-min{grid-column:2;grid-row:1;
    text-align:center;justify-self:center}
  .sp-verlauf .ve-seite{display:grid;gap:0 10px;align-items:start}
  /* Heim: Text links, Zeichen zur Mitte hin. */
  .sp-verlauf .ve-heim .ve-seite{grid-column:1;grid-row:1;
    grid-template-columns:minmax(0,1fr) 16px;text-align:right}
  /* **Beide brauchen eine ausdrueckliche Zeile.** Im Markup steht das Zeichen
     VOR dem Text; bei Heim soll es rechts davon stehen. Die Auto-Platzierung
     setzt das Zeichen dann in Zeile 1 Spalte 2 und findet fuer den Text in
     Spalte 1 keinen Platz mehr — sie springt in derselben Zeile nicht
     zurueck. Gemessen: Der Text stand unter dem Zeichen, die Zeile wurde
     68px statt 40px hoch. */
  .sp-verlauf .ve-heim .ve-tx{grid-column:1;grid-row:1}
  .sp-verlauf .ve-heim .ve-ic{grid-column:2;grid-row:1}
  /* Gast: spiegelbildlich. */
  .sp-verlauf .ve-gast .ve-seite{grid-column:3;grid-row:1;
    grid-template-columns:16px minmax(0,1fr)}
  .sp-verlauf .ve-gast .ve-ic{grid-column:1}
  .sp-verlauf .ve-gast .ve-tx{grid-column:2}
  /* ⚠ **Rechts ruecht nach rechts ein.** In der Gastspalte laeuft die Zeile
     zum rechten Rand; ein Einzug von links waere dort kein Einzug, sondern
     eine Luecke mitten in der Zeile. */
  .sp-verlauf .ve-gast.ve-assist.ve-zu-tor .ve-seite{padding-left:0;padding-right:10px}
  /* **Der Vereinsname entfaellt, solange die Spalte die Zuordnung traegt.**
     Zwoelf Ereignisse, zwoelf ueberfluessige Zeilen. Was bleibt, sind die
     echten Zusaetze — «2. Verwarnung» ist eine Angabe, «Glattbrugg» daneben
     eine Wiederholung.

     **In der einspaltigen Fassung unter 760 muss er zurueckkommen** — dort
     gibt es keine Spalte, die seine Aufgabe uebernimmt. Ohne diesen Satz
     streicht ihn spaeter jemand auch dort. */
  /* ══ ⚠⚠ ENTSCHIEDEN AM 12.09.2026: DER KLUBNAME BLEIBT ═══════════════
     Hier stand bis heute

         .sp-verlauf .ve-klub{display:none}
         .sp-verlauf .ve-zus:has(.ve-klub:only-child){display:none}

     ── Der Entscheid vom 11.09.2026 und warum er faellt ──

     Am 11.09. wurde der Vereinsname ueber 760px ausgeblendet. Er stand auf
     ZWEI Beinen:

       1. «Die SPALTE sagt, welche Seite gemeint ist.»
       2. «Der Name steht ohnehin schon im TEXT.» -- gemessen: 542 von 542
          Gegnerzeilen enthielten ihn.

     **Das zweite Bein ist weg.** Nachgemessen am 12.09.2026 an 70
     Spielseiten auf dev, 765 Verlaufszeilen:

     ```
     Gegnerzeilen                405
     davon Klubname im Satz        0      (100 % OHNE)
        gelb     «45 Nr. 17»
        tor      «50 1:1 Nr. 7»
        wechsel  «50 Nr. 6 ersetzt durch Nr. 4»
     ```

     Der Export schickt heute Rueckennummern statt Namen -- und zwar in
     JEDER Ereignisart, nicht nur bei den Assists.

     ⚠ **Das erste Bein traegt allein nicht.** Eine Spalte ist eine
     Auskunft fuer den, der sie als Spalte liest. Wer das nicht tut -- und
     das ist der Normalfall -- sieht bei 405 Zeilen nur «Nr. 17» und
     erfaehrt nirgends, wessen Nummer das ist.

     > **Eine Auskunft, die man erst erschliessen muss, ist keine.**

     ⚠ **Doppelt steht er trotzdem nie.** Die Entdopplung in
     `inc/verlauf.php` laesst `klub` weg, sobald der Satz ihn schon nennt --
     das war der eigentliche Zweck der alten Regel und bleibt erhalten.

     ⚠ **Wer das zurueckdrehen will, braucht zuerst eine Messung**, dass der
     Export den Namen wieder in den Text schreibt. Ohne die ist es derselbe
     Entscheid noch einmal, nur ohne seine Begruendung. */
  /* **Gehoeren alle Ereignisse einer Mannschaft, faellt die Teilung weg.**
     Gemessen und angesehen: Bei einem 5:0 steht die halbe Flaeche leer und
     die Minutenspalte haengt links neben einer Leere ueber zwoelf Zeilen —
     das liest sich als Fehler und nicht als Auskunft. **Eine Spalte, die
     nichts enthaelt, behauptet, dort gehoere etwas hin.**

     Die Bedingung steht am Behaelter und nicht an der Zeile — dieselbe
     Bauart wie `:has()` an der Spielliste. Und der Vereinsname kommt mit
     zurueck, weil ohne Spalte niemand mehr die Zuordnung traegt. */
  /* **Zurueck faellt er auf den Spaltensatz, nicht auf die Handyfassung.**
     Einspaltig waeren zwoelf Ereignisse 753px; im Spaltensatz sind es 380.
     Die Chronologie laeuft dann wieder links hinunter und rechts weiter — die
     Fassung, die vor der Teilung galt und die fuer diesen Fall die richtige
     ist. */
  .sp-verlauf:not(:has(.ve-gast)),
  .sp-verlauf:not(:has(.ve-heim)){columns:2;column-gap:32px}
  .sp-verlauf:not(:has(.ve-gast)) .ve-z,
  .sp-verlauf:not(:has(.ve-heim)) .ve-z{
    grid-template-columns:62px minmax(0,1fr)}
  .sp-verlauf:not(:has(.ve-gast)) .ve-seite,
  .sp-verlauf:not(:has(.ve-heim)) .ve-seite{
    grid-column:2;grid-template-columns:16px minmax(0,1fr);text-align:left}
  .sp-verlauf:not(:has(.ve-gast)) .ve-ic,
  .sp-verlauf:not(:has(.ve-heim)) .ve-ic{grid-column:1}
  .sp-verlauf:not(:has(.ve-gast)) .ve-tx,
  .sp-verlauf:not(:has(.ve-heim)) .ve-tx{grid-column:2}
  .sp-verlauf:not(:has(.ve-gast)) .ve-min,
  .sp-verlauf:not(:has(.ve-heim)) .ve-min{grid-column:1;text-align:left;
    justify-self:start}
  /* ⚠ **Hier standen zwei Gegenregeln, die den Klubnamen zurueckholten** --
     `display:inline` und `display:block`. Sie waren die Ausnahme zur
     Ausblendung von 6466, und die gibt es seit dem 12.09.2026 nicht mehr:
     Der Name steht ueberall.

     **Eine Ausnahme ohne Regel ist kein Schutz, sondern Ballast** -- sie
     haette weiter dagestanden und den naechsten Leser glauben lassen,
     irgendwo werde noch etwas verborgen. */
  /* **Die letzte Zeile behaelt hier ihre Linie, anders als im Telegramm.**
     Einspaltig ist die letzte Zeile auch die unterste, und eine Linie unter
     der untersten Zeile schwebt. Zweispaltig endet JEDE Spalte unten, und
     welche Zeile das ist, haengt an der Zahl der Ereignisse und ihren Hoehen
     — bei elf Zeilen schliesst links die sechste ab, bei zwoelf die sechste,
     bei dreizehn die siebte. **Ein Selektor kann das nicht wissen**, und
     `:nth-last-child(2)` traf denn auch die falsche Zeile: eine mitten in der
     rechten Spalte.

     Darum die andere Antwort: alle Zeilen gleich, beide Spalten schliessen
     mit einer Linie ab. Gleichfoermig statt raffiniert.

     **Nur fuer den zweispaltigen Fall.** Ohne die zwei `:not(:has(…))` galt
     sie auch im geteilten Normalfall — dort stand dann eine Linie ueber die
     volle Breite direkt ueber den zwei kurzen Strichen der Aufstellung. Zwei
     Aussagen uebereinander: «hier endet der Verlauf» und «hier faengt ein
     Block an». Die zweite genuegt. */
  .sp-verlauf:not(:has(.ve-gast)) .ve-z:last-child,
  .sp-verlauf:not(:has(.ve-heim)) .ve-z:last-child{
    border-bottom:1px solid var(--papier-linie)}
}
/* **Unter 760: das gewohnte Zweispurgitter, und der Vereinsname ist zurueck.**
   Zwei Spalten zu je 165px sind genau die Breite, an der die zweispaltige
   Chronologie schon einmal gescheitert ist — die Zeile hat 62px fuer die
   Minute fest verdrahtet, das waeren 38 Prozent Vorspann.

   `.ve-seite` traegt hier das Zeichen und den Text nebeneinander, also genau
   das, was vorher die zweite und dritte Spur der Zeile waren. */
/* **In ein eigenes Media gefasst, nicht nur hinter das andere gestellt.**
   Ein Media-Block erhoeht die Spezifitaet nicht. Ohne die Schranke schlug
   diese Regel die geteilte Fassung auf ALLEN Breiten, weil sie spaeter steht
   — gemessen: bei 1440 stand `62px 1033px 152px` statt `1fr 76px 1fr`. Zwei
   Fassungen, die einander ausschliessen, brauchen beide eine Bedingung. */
@media(max-width:759px){
  .sp-verlauf .ve-z{grid-template-columns:62px minmax(0,1fr);gap:0 16px}
  .sp-verlauf .ve-seite{display:grid;
    grid-template-columns:16px minmax(0,1fr);gap:0 10px;align-items:start}
}

/* **Zwei Mannschaften nebeneinander ab 620** — dieselbe Schwelle, ab der
   `.tg-unten` im Telegramm ohnehin umschaltet. Und dann je Mannschaft nur
   EINE Spalte: `.tg-liste{columns:2}` gaebe vier Namensspalten nebeneinander,
   und bei elf Namen stuenden in der letzten drei. */
/* **Der Trenner gehoert dorthin, wo der Vereinsname sichtbar ist — und das
   sind zwei Faelle, nicht einer.** Er stand zuerst nur in der Handyfassung
   und fehlte darum im Rueckfall bei einseitigem Verlauf.

   **Und er griff auch dort nicht, weil `:only-child` nur ELEMENTE zaehlt.**
   Der Zusatz stand als blosser Text neben dem Vereinsnamen; damit war
   `.ve-klub` das einzige Element und `:not(:only-child)` immer falsch —
   gemessen: «Glattbrugg2. Verwarnung», ohne Trenner, auf allen Breiten.
   Der Zusatz hat jetzt ein eigenes `.ve-mehr`, und die Bedingung stimmt. */
.sp-verlauf .ve-klub:not(:only-child)::after{content:' · '}

/* **Der Heim-und-Auswaerts-Filter faellt auf dem Reiter «Tabellen».**
   `spieleFiltern()` wirkt auf `#t-plan` und `#t-res`; die Tabellen kennt es
   nicht — und das ist richtig: Eine Heimtabelle ist keine gefilterte Tabelle,
   sondern eine andere. Andere Punkte, andere Raenge, andere Tordifferenz.
   Der Verband fuehrt sie getrennt.

   Stehen liesse ihn drei Knoepfe, die nichts tun, ueber einer Tabelle, die
   sich nicht bewegt. **Ein Filter ohne Wirkung ist ein Versprechen ohne
   Deckung** — dieselbe Regel wie bei der Filterart ohne Treffer.

   Beide Bauformen sind gemeint: die Knopfreihe und das Auswahlfeld, das
   `leisteAufbauen()` daraus baut. */
#v-spiele[data-reiter="tab"] #ha-name,
#v-spiele[data-reiter="tab"] .filt[data-wahl="Heim/Auswärts"],
#v-spiele[data-reiter="tab"] .filt[data-wahl="Heim/Auswärts"] + .fe.wahlfeld{display:none}
/* **Der Abstand nach unten muss mitwandern.** Er kam von `.filt`
   (`margin-bottom:28px`) — mit der Knopfreihe fiel er weg, und die
   Ligaueberschrift stiess direkt an den Feldrand.

   Dasselbe Mass wie zuvor, damit der Reiterwechsel die Seite nicht springen
   laesst: Wer von «Resultate» auf «Tabellen» wechselt, soll den Unterschied im
   Inhalt sehen, nicht im Abstand. */
#v-spiele[data-reiter="tab"] .fe.wahlfeld{margin-bottom:28px}

/* ══ DIE FILTERZEILE AUF /SPIELE/ — NEBENEINANDER, 23.09.2026 ══════════

   Didi: «Auswahlfeld und Heim/Auswaerts-Filter nebeneinander in einer
   Zeile, nicht untereinander» und «Abstaende zwischen Reiterleiste,
   Filtern und der ersten Zeile knapper».

   ⚠⚠ **`min-width:0` ist hier kein Feinschliff, sondern die Reparatur
   eines Ueberlaufs.** Gemessen am 23.09.2026 bei 320px: Das Auswahlfeld
   «Teamgruppe» war 319px breit und brauchte 355 — es schob die Seite auf
   337px. Der Grund ist die Eigenbreite des `select`: Sie richtet sich nach
   dem laengsten Eintrag, und ein Flex- wie ein Rasterkind traegt von sich
   aus `min-width:auto`, faellt also nie darunter. **Erst `min-width:0`
   erlaubt das Schrumpfen** — und erst damit stimmt Didis «nie breiter als
   der Bildschirm». Es steht dreimal, weil drei Kaesten ineinanderliegen:
   das Flexkind `.fe`, dessen Rasterkinder, und das `select`.

   ⚠ **Das Etikett «Teamgruppe» faellt fuers Auge, nicht fuers Ohr.** Didi
   will die Ueberschriften weg; ein `select` ohne `<label>` waere aber ein
   Feld ohne Namen. `.vh`-Behandlung statt `display:none`, dieselbe
   Entscheidung wie beim Etikett der Heim/Auswaerts-Leiste. Der gewaehlte
   Eintrag steht ohnehin im Feld und sagt, worum es geht.

   ⚠ **Das Feld dehnt sich, die Leiste nicht.** «Das Auswahlfeld nimmt den
   uebrigen Platz» — also `flex:1 1 auto` dort und `flex:0 0 auto` an der
   Leiste. Umgekehrt waere die Leiste breit und leer.

   **Abstaende:** zwischen Reiterleiste und erster Zeile standen 28 + 18 +
   28, jetzt stehen 14 + 14. */
#v-spiele .umschalter{margin-bottom:14px}
.spielfilter{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin-bottom:14px}
.spielfilter > .filt{margin:0}
/* ⚠⚠ **`flex-shrink:0` an der Leiste — am Bild vom 23.09.2026 aufgefallen.**
   Ohne sie gab die Leiste nach: bei 320px war sie 85px breit bei 134px
   Inhalt, «Alle | H» stand da und das «A» war abgeschnitten. **Der Grund ist
   die Grundeinstellung `flex:0 1 auto`** — beide Kinder schrumpfen, und das
   Auswahlfeld daneben hat den groesseren Anspruch, also gibt die Leiste mehr
   nach als es.

   Didis Satz entscheidet die Richtung: «Das Auswahlfeld nimmt den uebrigen
   Platz.» **Uebrig ist, was nach der Leiste bleibt** — also ist die Leiste
   die feste Groesse und das Feld die bewegliche, und nicht umgekehrt. */
.spielfilter > .filt.segleiste{flex:0 0 auto}
.spielfilter .fe.wahlfeld{flex:1 1 auto;min-width:0;max-width:none;margin:0}
.spielfilter .fe.wahlfeld > *{min-width:0}
.spielfilter .fe.wahlfeld select{width:100%;max-width:100%}
.spielfilter .fe.wahlfeld > label{position:absolute;width:1px;height:1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Auf «Tabellen» faellt die Segmentleiste weg und das Feld steht allein in
   der Zeile. Den Abstand traegt dann der Umschlag und nicht das Feld —
   sonst stuenden 14 und 28 uebereinander. Die Regel darueber bleibt: sie
   gilt weiterhin fuer ein Auswahlfeld ausserhalb des Umschlags. */
#v-spiele[data-reiter="tab"] .spielfilter .fe.wahlfeld{margin-bottom:0}
/* ── Die Zeichen am Namen ──────────────────────────────────────────
   **Die Aufstellung beantwortet jetzt, was sie vorher nicht beantwortete:
   wer gespielt hat UND was ihm passiert ist.** Bisher musste man Verlauf und
   Liste im Kopf zusammenfuehren.

   **Kein Gruen und kein Rot — und das ist keine Auslassung, sondern die
   Hausregel.** Sie steht wortwoertlich ueber der Resultatzeile: «Kein Gruen,
   kein Rot — die Website hat keine Ampelfarben, und ein 0:8 muss nicht
   zusaetzlich leuchten.» Dazu kommt: **Ein Gruen gibt es im Projekt gar
   nicht.** Die Palette fuehrt 23 Farben, drei davon nicht-neutral — Gelb,
   Gold, Rot. Und `--rot` ist zweimal vergeben und beide Male begruendet: der
   dringende Hinweisbalken, und die rote Karte, wo es «keine Zustandsfarbe
   ist, sondern der Name der Sache».

   **Ein gruener Pfeil waere also die vierundzwanzigste Farbe, erfunden fuer
   eine Aussage, die die Pfeilrichtung schon traegt.** Beide Pfeile stehen
   darum im Halbton wie die Minute daneben. Richtung statt Ampel.

   **Und keine zwei neuen Symbole.** Einzelpfeile gibt es im Vorrat nicht:
   `i-wechsel` ist ein Doppelpfeil in EINER 24er-Flaeche, nicht durch Drehen
   teilbar. Das Projekt fuehrt Pfeile ohnehin typografisch — `content:'→'`
   steht zweimal in dieser Datei. Also `↓` und `↑` als Zeichen.

   **Die Spur ist `auto` und nicht `1fr`.** Mit `1fr` schrumpft der Name unter
   seinen Inhalt, sobald drei Zeichen daneben stehen — gemessen 62px fuer
   «Nico Brunner». Mit `auto` waechst der Spaltenkasten stattdessen mit. */
/* **Die Zeichen stehen dicht hinter dem Namen, nicht an der rechten Kante.**
   Am 27.08.2026 war es umgekehrt gebaut, mit der Begruendung, die rechte Kante
   ordne die Zeichen untereinander. Das stimmt — nur ordnet sie sie einer
   Spalte zu statt einem Namen.

   **Gemessen im Bild:** Bei Glattbrugg lagen zwischen «Name — Platzhalter» und
   seiner Karte fast 500px. Wer die Zeile lesen wollte, musste sie mit dem Auge
   verfolgen; bei sechzehn Zeilen untereinander verrutscht man dabei.

   **Der Preis ist, dass die Zeichen nicht mehr fluchten** — sie wandern mit
   der Namenslaenge. Das ist der richtige Preis: Sie gehoeren zum Namen, nicht
   zur Spalte. Bei Ramon Farah mit drei Zeichen sieht man, dass es traegt.

   Die Namensspur ist `auto` und nicht `1fr`: Mit `1fr` schrumpft der Name
   unter seinen Inhalt, sobald drei Zeichen daneben stehen — gemessen 62px fuer
   «Nico Brunner». Die dritte Spur nimmt den Ueberschuss. */

/* **Haarlinien je Zeile — nur in der Aufstellung, nicht im Telegramm.**
   `.tg-z-auf` traegt beide Listen; das Telegramm zeigt eine kurze Aufzaehlung,
   die Spielseite sechzehn Zeilen mit Zeichen an wechselnder Stelle. Dort
   fuehrt die Linie das Auge, hier waere sie Laerm.

   Sehr schwach gesetzt: Sie soll die Zeile begrenzen, nicht sie trennen.
   Dieselbe Unterscheidung wie bei der Haarlinie um das Mannschaftsfoto —
   eine Linie, die eingrenzt, darf schwach sein. */
/* ── Die Zeichen der Aufstellung ─────────────────────────────────────────
   **Am 28.08.2026 von `#v-spiel` geloest**, dieselbe Bewegung wie beim
   Verlauf am selben Tag und aus demselben Grund: Der Matchbericht zeigt
   dieselbe Aufstellung und soll dieselben Zeichen tragen. Die Klassennamen
   bleiben, wie sie sind.

   **Die Zeilenform haengt an `:has(.sp-zeichen)`, nicht an der Ansicht.**
   Die dritte Spur und die Trennlinie sind fuer Zeilen da, die Zeichen
   TRAGEN. Eine Aufstellung ohne Ereignisse — ein Junioren-F-Spiel, ein
   Kader ohne Verbandsdaten — bleibt die zweispaltige Liste, die sie
   heute ist. Der Selektor fragt nach dem Inhalt und nicht nach dem Ort.

   **Die Gegnerseite steht im Matchbericht nicht.** Der Bericht ist die
   Vereinssicht; die Spielseite fuehrt beide Mannschaften. Das ist
   entschieden und kein Versehen. */
.sp-auf .tg-z-auf,
.tg-unten .tg-liste:has(.sp-zeichen) .tg-z-auf{grid-template-columns:24px auto 1fr;
  padding:6px 0;border-bottom:1px solid rgba(11,11,10,.07)}
/* ── ⚠ EINE SPALTE, SOBALD ZEICHEN DARIN STEHEN — 24.09.2026 ─────

   **Dieselbe Frage wie eine Zeile darueber, und dieselbe Antwort: der
   Inhalt entscheidet, nicht die Ansicht.** `.tg-liste{columns:2}` war
   fuer die kurze Aufzaehlung des Telegramms gemacht — Nummer und Name,
   sonst nichts. Seit der Matchbericht dieselbe Aufstellung zeigt wie
   die Spielseite, stehen dort Tore, Karten und Wechselpfeile in
   derselben Zeile.

   **Gemessen bei 375 im Rahmen, vor dieser Regel:** Spaltenbreite 158px,
   und **3 von 16 Zeilen schoben ihre `.sp-zeichen` ueber die
   Spaltenkante** in die Rinne (`white-space:nowrap` laesst sie nicht
   umbrechen), eine Zeile wuchs auf 58px statt 35. Die Seite lief nicht
   ueber — es sah bloss aus wie ein Satzfehler.

   ⚠ **Die Spielseite aendert sich dadurch nicht.** Dort steht seit dem
   26.08.2026 `#v-spiel .sp-auf .tg-liste{columns:1}` (0,3,0 gegen 1,3,0),
   und beide sagen dasselbe. **Eine Liste ohne Zeichen bleibt zweispaltig**
   — ein Junioren-F-Bericht ohne Verbandsdaten behaelt seine kurze
   Aufzaehlung. */
/* ⚠ **Der letzte Satz gilt seit dem 24.09.2026 nur noch unter 620px.**

   > ~~«Eine Liste ohne Zeichen bleibt zweispaltig — ein Junioren-F-Bericht
   > ohne Verbandsdaten behaelt seine kurze Aufzaehlung.»~~ — Stand bis
   > 24.09.2026.

   **Darueber entscheidet nicht mehr der Zeicheninhalt, sondern die
   Anordnung:** `.sp-mann-allein` stellt «Aufstellung» und «Ersatz»
   nebeneinander, und eine Liste, die darin nochmals umbraeche, gaebe vier
   Namensspalten. Die Regel dazu steht oben bei `.tg-liste` — dort die
   Anordnung, hier die Zeilenform.

   **Diese Regel bleibt trotzdem stehen:** Unter 620px ist sie die einzige,
   die den Ueberlauf der Zeichen in die Rinne verhindert, und genau dort
   wurde er gemessen. */
.tg-unten .tg-liste:has(.sp-zeichen){columns:1}
/* Die letzte Zeile jeder Liste braucht keine — darunter kommt entweder
   «Ersatz» mit eigenem Abstand oder das Ende des Blocks. */
.sp-auf .tg-liste .tg-z-auf:last-child,
.tg-unten .tg-liste .tg-z-auf:last-child{border-bottom:0}
.sp-zeichen{display:flex;gap:8px;justify-content:flex-start;
  margin-left:10px;white-space:nowrap}
/* Groesser als `--tx-etikett`: Bei 11px neben einem 14px-Namen las sich die
   Minute wie eine Fussnote statt wie eine Angabe. */
/* **Die Minutenzahl ist eine Beschriftung zum Zeichen, nicht der Inhalt der
   Zeile.** Sie steht neben Symbolen von 12px; auf G (14px) waere sie groesser
   als das Symbol, zu dem sie gehoert. Auf I (11px) bleibt sie darunter.

   Bis zum 29.08.2026 stand hier 12px — dieselbe leiterfremde Groesse wie bei
   `.rz-tag`, und beide aus demselben Grund: Es gab keine Stufe, die «kleiner
   als der Text daneben» heisst, also wurde eine Zahl gewaehlt.

   **Nachgemessen am 29.08.2026, ob 11px neben einem 12px-Symbol noch traegt** —
   die Zahl steht in der Zeile darunter. */
.sp-ereig{display:inline-flex;align-items:center;gap:3px;
  color:var(--papier-halb);font-size:var(--tx-etikett)}
.sp-ereig .ic{width:12px;height:12px;margin:0}
.sp-ereig .ve-karte{width:8px;height:11px}
/* Die zwei Pfeile: Richtung traegt die Bedeutung, nicht die Farbe. */
.sp-raus,.sp-rein{font-size:14px;line-height:1}

/* **Das C fuer den Captain.** Es stand nie als offener Punkt — im ganzen
   Bestand gibt es genau eine Erwaehnung, und die zaehlt «Captain» als
   Datenfeld auf, das beim Verband zu erfragen ist. Keine Groesse, keine
   Farbe, keine Stellung war je festgelegt; diese hier ist gewaehlt.

   `<abbr>` und nicht `<span>`, damit die Abkuerzung ihre Aufloesung tragen
   kann. Ohne Unterringelung — die Voreinstellung des Browsers saehe hier aus
   wie ein Verweis. */
/* ⚠ **Am 24.09.2026 von `#v-spiel` geloest** — dieselbe Bewegung wie bei
   den Zeichen am 28.08.2026 und aus demselben Grund: Der Matchbericht
   zeigt seit heute dieselbe Aufstellung und damit dasselbe C.

   > ~~`#v-spiel .sp-c{…}`~~ — Stand bis 24.09.2026.

   ⚠ **Ohne die Loesung waere es nicht bloss unauffaellig, sondern
   falsch:** `<abbr>` traegt im Browser von Haus aus eine gepunktete
   Unterringelung, und `text-decoration:none` steht genau hier. Im
   Bericht saehe das C damit aus wie ein Verweis. */
.sp-c{margin-left:6px;font-family:var(--b);font-weight:700;
  font-size:var(--tx-etikett);color:var(--papier-halb);
  text-decoration:none;border:0}

#v-spiel .sp-auf .tg-liste{columns:1}
/* **Der Vereinsname ist die Ueberschrift des Blocks, «Startelf» die der
   Liste.** Bis zum 26.08.2026 trug die erste Liste den Vereinsnamen als
   eigene Ueberschrift und die zweite «Ersatz» — zwei Dinge auf derselben
   Stufe, die keine sind. **Ein Vereinsname sagt nicht, dass darunter die
   Startelf steht**; er sagt nur, wessen Aufstellung folgt.

   Die Stufen sind darum jetzt getrennt: `.sp-klub` fuehrt den Block,
   `.grp` die zwei Listen darin. */
/* **Der gelbe Strich unter dem Vereinsnamen.** Er fehlte, und dadurch stand
   der Name in derselben Schwere da wie «Startelf» darunter — zwei Stufen ohne
   sichtbare Trennung.

   Es ist derselbe Strich wie unter `.tg-kopf` und ueber jeder `.karte`: Im
   Projekt heisst er «hier faengt etwas an». Zwei Bloecke nebeneinander, jeder
   mit eigenem Strich, sagen ohne ein Wort, dass es zwei sind. */
#v-spiel .sp-klub{font-family:var(--b);font-weight:700;font-size:var(--tx-klein);
  letter-spacing:.15em;text-transform:uppercase;color:var(--papier-text);
  margin:0 0 14px;padding-bottom:9px;border-bottom:2px solid var(--gelb)}
#v-spiel .sp-auf .grp{margin-top:18px}
#v-spiel .sp-auf > div > .grp:first-of-type{margin-top:0}
@media(min-width:620px){
  #v-spiel .sp-auf{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}
/* **Dasselbe Rastermass wie der geteilte Verlauf — und darum NACH der Regel
   darueber.** Ein Media-Block erhoeht die Spezifitaet nicht: Solange die
   108er-Regel oben im 760er-Block stand, schlug die 620er-Regel sie, weil sie
   spaeter kommt. Gemessen: Aufstellung 624px, Verlauf 586px, verschobene
   Innenkanten. Zweiter Fall derselben Sorte an einem Tag.

   Die Zahl ist ausgerechnet: Mittelspur 76 plus zweimal 16 Zwischenraum sind
   108. Damit ist `(Breite − 108) / 2` in beiden Baenken dieselbe. */
@media(min-width:760px){
  #v-spiel .sp-auf{gap:32px 108px}
  /* **Verworfen am 27.08.2026: die Spiegelung zur Mitte.** Sie stand hier
     einen Tag lang und war eine Fremdform.

     **Der Verlauf darf spiegeln, weil er eine Mitte hat** — die Minutenschiene
     steht dort, und beide Seiten beziehen sich auf sie. **Die Aufstellung hat
     keine.** Zwei Listen, die zur Mitte fluchten, ohne dass dort etwas steht,
     richten sich nach einer Achse, die es nicht gibt.

     **Und die Spiegelung erzeugte einen zweiten Fehler, den ich erst im Bild
     gesehen habe:** `width:max-content` zieht jeden Spaltenkasten auf seinen
     EIGENEN Inhalt. Gemessen bei 1440: Herrliberg 274px, Glattbrugg 217px —
     zwei ungleich breite Kaesten. Die Zeichen sassen bei beiden an der
     Kastenkante, sahen aber verschieden aus: bei Glattbrugg dicht hinter dem
     gleichlangen Platzhalternamen, bei Herrliberg weit hinter den
     verschieden langen echten Namen.

     **Beides loest dieselbe Ruecknahme.** Die Kaesten fuellen jetzt ihre
     Gitterzelle, beide linksbuendig, und die Zeichen stehen an derselben
     rechten Kante. */
}

/* Die drei Verweise stehen in einer Zeile und brechen um, statt zu ueberlaufen.
   `.tg-verweis` ist im Telegramm ein Absatz mit einem Verweis; hier sind es
   drei, und sie brauchen einen Abstand voneinander. */
.sp-verweise{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:26px}
.tg-z-auf{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 12px;
  padding:5px 0;font-size:var(--tx-klein);break-inside:avoid}
.tg-nr{color:var(--papier-halb);text-align:right}
/* `.tg-w` stand hier bis zum 24.08.2026 — der eigene Wechselblock mit
   Pfeilen. Er ist im Verlauf aufgegangen; die Regeln sind ENTFERNT und nicht
   auskommentiert stehen geblieben, aus demselben Grund wie bei `.zr.tag`:
   eine Regel ohne Traeger meldet nichts und wird beim naechsten Lesen fuer
   benutzt gehalten. */

/* ── Bildraster ────────────────────────────────────────────────────
   `.gal` verlangt genau fuenf Bilder: ab 720px vier Spalten, das erste ueber
   2x2 — fuenf fuellen das Raster genau, vier lassen unten rechts ein Loch von
   343x343px, sechs beginnen eine dritte Reihe. Fuer das Clubhaus ist das
   richtig, dort sind es fuenf. Ein Matchbericht hat mal drei Bilder, mal
   zwoelf, und braucht darum gleich grosse Kacheln in beliebiger Zahl.
   620 und 1000 sind die Umbrueche des Hauses.

   **Das Raster haengt an der Fensterbreite, nicht am Behaelter.** In der
   Artikelansicht steht es in einem 900px-Behaelter, wechselt aber bei 1000px
   Fensterbreite auf vier Spalten — die Kacheln werden dadurch kleiner, wenn
   das Fenster waechst (269px bei 940, 200 bei 1024, 182 bei 1916).
   **Das ist keine Eigenheit dieser Ansicht, sondern die aller `.g3`-Raster**;
   hier faellt sie nur auf, weil der Behaelter fest ist. Ans Binden an den
   Behaelter wurde nicht gegangen: Container-Queries waeren die ersten im
   Projekt, und **das waere eine Entscheidung und keine Behebung.** */

/* ⚠ **Zwei Angaben im Absatz oben sind ueberholt — nachgemessen am
   23.09.2026 an 35 Fensterbreiten.** Dort stehen «269px bei 940, 200 bei
   1024, 182 bei 1916» und der Satz, das Raster haenge an der Fensterbreite.
   Das galt, solange eine vierte Spalte ab 1000px lief; **sie ist am
   24.08.2026 entfallen** (der Grund steht unten). Gemessen wird heute:

       Fenster   Spalten   Rasterbreite   Kachel
        940         3          868          283
       1024         3          900          293
       1916         3          900          293

   **Die Kacheln werden nicht mehr kleiner, wenn das Fenster waechst** — ab
   972px steht alles still, weil der Behaelter im Artikel auf 900 gedeckelt
   ist. Der Absatz bleibt als Beleg stehen; die Zahlen darin sind der Zustand
   vor dem 24.08.2026.

   ⚠ **`.bildraster` ist seit dem 23.09.2026 kein direktes Kind von `.wrap`
   mehr**, sondern steht in einem `.bgal` -- dem Traeger, an dem das
   Grossbild haengt (`fch.js`: `closest('.bgal')`), gebaut von
   `inc/bildstrecke.php`. Der Deckel greift weiterhin, er greift nur eine
   Stufe hoeher: gemessen bei 1582px Fenster stehen `.eye`, `h2.sec` und
   `.bgal` alle drei auf links=341 und 900 breit, also genau wie vorher
   `.bildraster` selbst. **Die Messtabelle bei `.papier#v-artikel .wrap > *`
   weiter oben nennt `.bildraster` noch als Kind; sie ist vom 14.09.2026 und
   bleibt als Beleg stehen** -- heute hiesse die Zeile `.bgal`.

   **Die Kacheln sind jetzt `a.bgal-k`** und nicht mehr `figure.bu`. Damit
   traegt `.bgal-k{overflow:hidden}` samt der Vergroesserung beim Ueberfahren
   auch hier, und `.bildraster .f{aspect-ratio:1}` greift unveraendert --
   ein Nachfahrenselektor. Was wegfiel, ist die Bildunterschrift unter der
   Kachel: Sie machte die Kacheln verschieden hoch (Bild 293px, Kachel bis
   377) und steht jetzt im Grossbild. */
.bildraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:620px){.bildraster{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* **Keine vierte Spalte.** Bis zum 24.08.2026 stand hier
   `@media(min-width:1000px){.bildraster{grid-template-columns:repeat(4,…)}}`.
   Sie ist entfallen, als das Raster von der Behaelterbreite auf 760 kam:

   - vier Spalten auf 760 ergeben Kacheln von **183px** — kleiner als die
     **188px**, die dasselbe Raster bei 620px Fenster in drei Spalten zeigt.
     Das Bild wurde also kleiner, je groesser das Fenster war.
   - drei Spalten auf 760 ergeben **247px**, die groesste Kachel, die dieses
     Raster je hatte, und fuellen die fuenf Bilder als 3+2 statt als 4+1 mit
     einem einzelnen Bild in der zweiten Reihe.
   - Der Block wird dadurch 128px hoeher (503 statt 375). Das ist der Preis,
     und er ist bezahlt: ein Bildraster gibt es, damit man die Bilder sieht.

   **Der Umbruchpunkt bei 1000 war nicht falsch, er ist gegenstandslos
   geworden.** Er war fuer ein Raster gedacht, das mit dem Fenster waechst;
   seit es bei 760 endet, macht die vierte Spalte nur noch die Kacheln kleiner.
   Genau der Fall, der im Kommentar unten als Container-Query-Frage steht —
   hier ist er nicht mit einer neuen Technik geloest, sondern dadurch, dass
   der Behaelter jetzt fest ist. */
.bildraster .f{aspect-ratio:1}

/* ── Bildergalerie mit Grossbild — 23.09.2026 ──────────────────────
   Traeger: `.bgal` je Bilderstrecke, gebaut von `inc/bildstrecke.php` --
   bis zum 23.09.2026 stand hier «gebaut von `single-fch_jahr.php`»; die
   Ausgabe ist an dem Tag dorthin gezogen, weil der Matchbericht
   dieselbe braucht. **Ein Jahr
   hat mehrere Galerien, je Anlass** — Aufstiegsfest, Juniorenturnier,
   Generalversammlung —, und jede bringt ihre eigene Ueberschrift und ihr
   eigenes Raster mit.

   **Warum ein eigenes Raster und nicht `.bildraster` oder `.gal`.** Die zwei
   vorhandenen Raster loesen zwei andere Aufgaben, und beide brechen an dieser:

   - `.gal` verlangt **genau fuenf** Bilder (das erste ueber 2x2). Ein Anlass
     hat mal drei, mal vierundvierzig.
   - `.bildraster` ist die Bildstrecke im Matchbericht: hoechstens drei
     Spalten, Kachel bis 293px (nachgemessen am 23.09.2026; hier stand 247 —
     der Wert galt fuer den 760er-Behaelter vor dem 24.08.2026). **Das ist
     eine Bildstrecke und keine Vorschau.** Bei 44 Bildern stuenden fuenfzehn
     Reihen untereinander, und die Seite waere ein Band.

     ⚠ **Umgekehrt gilt es genauso, und darum sind die zwei Raster am
     23.09.2026 NICHT zusammengelegt worden, als der Matchbericht das
     Grossbild bekam.** Sein Behaelter ist auf 900 gedeckelt; sechs Spalten
     ergaeben dort ab 972px Fensterbreite dauerhaft 141px-Kacheln, und zwar
     bei jeder Fensterbreite darueber — genau der Fall, den der Kommentar
     oben verwirft. **Gemeinsam ist beiden die Kachel und das Grossbild,
     nicht die Spaltenzahl**; beides schreibt `inc/bildstrecke.php`.

   **Drei Spalten schmal, sechs breit** — so verlangt. Die Zwischenstufe mit
   vier ab 620px ist nicht erfunden, sondern der Umbruch, den `.bildraster`
   schon fuehrt. Ohne sie ginge das Raster bei 1000px Fensterbreite von drei
   Spalten auf sechs: **von 302 auf 146px Kachel, ein Sprung um 52 Prozent**
   (aus der gemessenen Rasterbreite von 927 bzw. 928 px gerechnet). Mit der
   Stufe sind es zwei Spruenge von 26 und 35 Prozent.

   ⚠ **An der Stufe wird die Kachel kurz kleiner, und das ist NICHT der Fall,
   den der Kommentar bei `.bildraster` verwirft.** Dort steht eine vierte
   Spalte ab 1000px in einem Behaelter, der bei 760px aufhoert zu wachsen —
   die Kachel wurde dadurch **dauerhaft** kleiner, je groesser das Fenster
   war. Hier waechst der Behaelter mit: Die vier Spalten fangen bei 620 mit
   138 px an und sind bei 999 auf 224 px, also ueber den 188, die drei
   Spalten zuletzt zeigten. **Der Verlust dauert eine Fensterbreite lang, der
   dortige dauerte ewig.**

   Kachelbreiten gemessen am 23.09.2026 ueber 31 Fensterbreiten (320 bis 3440):
   320/3=88 · 375/3=106 · 619/3=188 · 620/4=138 · 999/4=224 · 1000/6=146 ·
   1399/6=213 · 1400/6=205 · 1799/6=205 · 1800/6=248 · 2560/6=240 ·
   3000/6=273 ← Spitze. Der `sizes`-Wert dazu steht in `single-fch_jahr.php`.

   **Quadratisch, und der Beschnitt ist gewollt.** `.f > img` ist `cover`; ein
   Hochformat verliert in der Vorschau oben und unten. Das ist der Preis
   dafuer, dass sechs Kacheln fluchten — **im Grossbild ist nichts
   beschnitten**, und dorthin fuehrt die Kachel.

   ~~Quadratisch, und der Beschnitt ist gewollt.~~ **Der Satz gilt seit dem
   25.09.2026 nur noch ab 620px.** Didi hat ihn fuers Handy ueberstimmt, nicht
   widerlegt: Seine Begruendung ist die von sechs fluchtenden Kacheln, und
   unter 620px steht nur eine — da fluchtet nichts. Was er ueber den Beschnitt
   sagt, traegt weiter auf jeder Breite; nur die Form hat unten eine Grenze
   bekommen. Sie steht im Handyblock weiter unten.

   `gap:10px` ist der Wert von `.bildraster` und `.gal`: dieselbe Frage,
   dieselbe Zahl.

   ⚠ **Keine Unterschrift unter der Kachel.** Die Vorlage setzt darum
   `bu => false` an `fch_core_bildrahmen()` — das schaltet die Huelle `.bu`
   ab. Eine Regel `.bgal .bu-tx{display:none}` waere der falsche Weg: Sie
   liesse den Text im Markup stehen und versteckte ihn.

   ⚠ **Hier stand bis zum 23.09.2026 «Die Vorlage setzt darum `alt => ''`».**
   Das stimmte einen Tag lang: `alt => ''` schaltete die Unterschrift mit ab.
   Am 23.09.2026 ist diese Kopplung aufgehoben, und das Abschalten hat einen
   eigenen Schalter bekommen — **`alt => ''` steht weiter dort und sagt
   weiter dasselbe, es entscheidet nur nichts mehr hierueber.** */
.bgal + .bgal{margin-top:clamp(28px,3.4vw,44px)}
.bgal-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(min-width:620px){.bgal-raster{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1000px){.bgal-raster{grid-template-columns:repeat(6,minmax(0,1fr))}}
.bgal-k{display:block;overflow:hidden}
.bgal-k .f{aspect-ratio:1;transition:transform .4s}
@media(hover:hover){.bgal-k:hover .f{transform:scale(1.05)}}

/* == Hoechstens sechs Kacheln, und auf dem Handy eine ==============
   Didi, 25.09.2026: «Computer ab 620px hoechstens sechs Vorschaubilder, die
   sechste mit einer dunklen Abdeckung <<+N>>. Handy unter 620px nur das
   erste Bild, volle Breite, unten rechts eine Marke <<+N>>.»

   **Die Spaltenregeln oben sind dafuer nicht angefasst worden.** Sechs
   Kacheln verteilen sich auf die Reihen, die das jeweilige Raster ohnehin
   baut: bei `.bgal-raster` ab 1000px genau eine, bei 620 bis 999 zwei (4+2),
   bei `.bildraster` ab 620 zwei (3+3). **Eine eigene Spaltenzahl fuer sechs
   Kacheln waere ein drittes Raster** -- und der Kommentar oben begruendet
   ausfuehrlich, warum es schon bei zweien bleiben soll.

   ── Warum die uebrigen Kacheln im Markup stehen bleiben ──────────────
   Die Vorlage gibt ALLE Bilder als Anker aus und nur die ersten sechs mit
   einem `<img>`; `inc/bildstrecke.php` begruendet es. **Fuer das Stylesheet
   heisst das: die uebrigen Anker sind da und muessen weg.**

   ⚠ **`.bgal-k[hidden]` und nicht das blosse `hidden`-Attribut.** Der Browser
   fuehrt `[hidden]{display:none}` in seinem eigenen Blatt -- und
   `.bgal-k{display:block}` eine Zeile weiter oben schlaegt es, weil eine
   Klasse spezifischer ist als ein Attribut aus dem Benutzerblatt. **Ohne
   diese Zeile stuenden bei einem Anlass mit 103 Bildern 97 leere Anker im
   Raster**, jeder eine Rasterzelle hoch.

   ── Die Abdeckung ist ein `::after` am Anker ─────────────────────────
   Didi: «Klick auf <<+N>> oeffnet das Grossbild bei Bild 6.» Ein eigenes
   Element ueber der Kachel faenge den Klick ab; ein Pseudoelement am Anker
   gehoert zum Anker, und `fch.js` findet ueber `closest('.bgal-k')` genau
   ihn. **Kein `pointer-events:none` noetig, also auch keine Zeile, die
   jemand spaeter fuer ueberfluessig haelt und streicht.**

   `content:'+' attr(data-mehr)` holt die Zahl aus dem Markup. Sie steht
   einmal da, an der Kachel, und nicht zweimal -- einmal als Text und einmal
   als Klasse.

   **Die Stufe ist A** (`clamp(30px,1.54rem + 1.49vw,46px)`), dieselbe Kurve
   wie `h1.big`: Didi sagt «gross», und gross ist auf dieser Leiter die
   oberste Sprosse. Die engste Kachel, auf der sie je steht, ist die des
   `.bgal-raster` bei genau 620px Fensterbreite -- 138px breit, die Schrift
   dort 33.9px. «+97» misst darin rund 81px und steht frei.

   **Archivo ueber `var(--d)`**, Breite 114 und Gewicht 800 wie `.snum` und
   `.zr`: Es ist eine Zahl, an der man etwas erkennt, und das Haus schreibt
   solche Zahlen so.

   `rgba(11,11,10,.72)` ist die dunkle Flaeche des Hauses (`--dun`, `--nacht`)
   mit Deckung. **Gerechnet gegen den schlechtesten Fall** -- ein weisses
   Foto darunter: Die Flaeche ergibt dann #4F4F4F, und Weiss darauf traegt
   8.15. Ueber jedem dunkleren Foto wird es mehr.

   ── Das Handy ───────────────────────────────────────────────────────
   **`grid-column:1/-1` und keine neue Spaltenregel.** Die erste Kachel
   nimmt die ganze Zeile, egal ob das Raster darunter zwei oder drei Spalten
   fuehrt -- dieselbe Zeile traegt beide Raster, und die Spaltenzahlen oben
   bleiben unberuehrt.

   **3:2 statt quadratisch — Didi, 25.09.2026.** Ein Bild ueber die volle
   Handybreite waere quadratisch so hoch wie breit: bei 375px Fenster 339
   hoch, und der Text darunter faengt erst nach einem halben Bildschirm an.
   Quer gelegt sind es 226 — **ein Drittel weniger Hoehe, und dasselbe Bild.**

   ⚠ **Die 339 sind gemessen, die 226 sind gerechnet.** Die 339 stammen aus
   dem Lauf vom 25.09.2026, der das eine Handybild gebaut hat; die 226 sind
   339 durch 1.5 und haben keinen Browser gesehen. **Dieser Lauf hat auf
   Didis Wort ueberhaupt nicht gemessen** — wer die Zahl braucht, misst sie.

   ⚠ **Ueberschrieben und nicht geaendert.** `.bgal-k .f{aspect-ratio:1}`
   steht oben ausserhalb jeder Abfrage und gilt darum auch am Computer; ein
   `.bildraster .f{aspect-ratio:1}` liegt daneben und trifft die Kacheln im
   Matchbericht noch einmal. Beide wiegen (0,2,0). **Die Zeile hier faengt
   sie ueber `:first-child` ab** — (0,3,0) und damit staerker als beide,
   unabhaengig von der Reihenfolge. Am Computer aendert sich nichts.

   **Und nur die erste Kachel**, nicht `.bgal-k .f`: Unter 620px ist sie die
   einzige sichtbare, und eine Formangabe an den uebrigen waere eine Regel
   ohne Gegenstand. Die versteckten Anker haben ohnehin kein `.f` —
   `fch_core_bildrahmen()` gibt ohne Bild nichts zurueck.

   **Der mittige Beschnitt steht schon da.** `.f > img` fuehrt seit dem
   02.09.2026 `object-fit:cover;object-position:center` fuer das ganze Haus.
   Er ist der Grund, warum die Kacheln heute quadratisch sind und trotzdem
   keine verzerrten Fotos zeigen, und er gilt bei 3:2 unveraendert weiter.
   **Hier steht darum keine einzige Zeile dazu.**

   ⚠ **3:2 ist neu im Stylesheet.** Das Haus fuehrt 1, 4/3, 3/4, 16/9, 2/1,
   21/9 und 3/1 — die Sprosse dazwischen gab es noch nicht. Geschrieben in
   derselben Form wie alle anderen (`3/2`, kein Leerzeichen, kein Dezimalwert);
   die `1.50` in `Werkzeuge/bildsizes.php` ist das Breitenverhaeltnis zweier
   Umbruchpunkte und keine Bildform.

   **Die Marke wandert von selbst mit.** Sie haengt am Anker
   (`.bgal-k-marke::after{bottom:0}`) und nicht am Bildkasten — das waere
   falsch, wenn der Anker hoeher waere als das Bild. Ist er nicht: Er enthaelt
   genau ein Element, das `div.f` aus `fch_core_bildrahmen()`, und sonst nur
   Zeilenumbrueche aus der Vorlage, die kein Zeilenfeld erzeugen. **Seine
   Hoehe IST die Bildhoehe**, auch die neue. Darum bleibt `bottom:0` unten.

   **Die Marke ist die Bauform von `.nk-haft`:** gelbe Flaeche, dunkle
   Schrift, Etikettschrift, `letter-spacing:.12em`. Didi nennt sie so, und
   sie steht im Haus schon an der Newskachel. Buendig in der Ecke, weil die
   Kachel `overflow:hidden` fuehrt und eine Marke, die an der Kante sitzt,
   als Aufkleber liest und nicht als schwebender Kasten. */
.bgal-k[hidden]{display:none}
@media(min-width:620px){
  .bgal-k-mehr{position:relative}
  .bgal-k-mehr::after{
    content:'+' attr(data-mehr);
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(11,11,10,.72);color:var(--kalk);
    font-family:var(--d);font-variation-settings:'wdth' 114;font-weight:800;
    font-size:clamp(30px,1.54rem + 1.49vw,46px);letter-spacing:-.03em;line-height:1;
  }
}
@media(max-width:619px){
  .bgal-k:not(:first-child){display:none}
  .bgal-k:first-child{grid-column:1/-1}
  .bgal-k:first-child .f{aspect-ratio:3/2}
  .bgal-k-marke{position:relative}
  .bgal-k-marke::after{
    content:'+' attr(data-mehr);
    position:absolute;right:0;bottom:0;
    background:var(--gelb);color:var(--dun);padding:2px 7px;
    font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);letter-spacing:.12em;
  }
}

/* ── Das Grossbild ────────────────────────────────────────────────
   Traeger: `.lb`, **einmal je Dokument gebaut und von `fch.js` an `body`
   gehaengt** — nicht je Galerie. Zwei Galerien auf einer Seite teilen sich
   den Rahmen; welche Bilder darin stehen, entscheidet der Klick.

   **An `body` und nicht in die Galerie**, weil `.bgal` in `.wrap` steht und
   jeder Vorfahre mit `overflow`, `transform` oder `filter` ein `position:
   fixed` an sich bindet. Der Rahmen soll ueber der ganzen Seite liegen, nicht
   ueber dem Abschnitt.

   **`--nacht` und keine neue Farbe.** Es ist der Grund des Handymenues
   (`#mob`) und der Startseite — die Flaeche des Hauses, auf der ein
   Bild allein steht. Deckend und nicht durchscheinend: Eine halbdurchlaessige
   Flaeche zeigt den Text der Seite unter dem Foto durch, und ein Foto braucht
   einen ruhigen Grund.

   **z-index 150** liegt ueber Kopfleiste (90) und Handymenue (85) und unter
   dem Sprungverweis (200). Der ist der einzige, der auch ueber einem offenen
   Grossbild stehen darf — er ist der Ausweg.

   `grid-template-rows:1fr auto` und `min-height:0` sind die Bedingung fuer
   «vollstaendig sichtbar»: Die Bildzeile nimmt, was uebrig bleibt, nachdem
   Unterschrift und Zaehlung ihre Hoehe genommen haben. **Ohne `min-height:0`
   waechst eine Rasterzeile auf ihren Inhalt** — das Bild stuende dann in
   voller Hoehe und schoebe die Zeile darunter aus dem Fenster. */
html.lb-offen,html.lb-offen body{overflow:hidden}
.lb{
  position:fixed;inset:0;z-index:150;background:var(--nacht);
  display:grid;grid-template-rows:minmax(0,1fr) auto;
  gap:clamp(10px,1.6vw,18px);padding:clamp(52px,5vw,64px) clamp(12px,4vw,72px) clamp(16px,2.4vw,28px);
}
.lb-flaeche{min-height:0;display:flex;align-items:center;justify-content:center}
/* **`contain` und keine Hoehe am Bild.** `max-height:100%` deckelt es auf die
   Zeile, `contain` haelt das Seitenverhaeltnis — zusammen ist das «ohne
   Beschnitt». Gemessen auch im Querformat eines Handys (740x360): dort bleibt
   der Bildzeile nach Polster und Fuss noch Hoehe, und ein Querformat wird
   dann hoehenbegrenzt statt breitenbegrenzt. */
.lb-bild{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* ⚠ **Eine Flexspalte und kein einfacher Block — gemessen am 23.09.2026, und
   es waren zwei Befunde an einer Stelle.**

   **Erstens der Klick daneben.** Ein Absatz nimmt die ganze Zeilenbreite,
   auch wo kein Wort steht. Gemessen bei 1400x900 mit offenem Grossbild: Ein
   Klick auf (700, 860) — weit unter dem Bild, weit neben jedem Text —
   landete auf `p.lb-bu`, weil der Absatz auf die vollen 820 px gedehnt war.
   **«Klick daneben schliesst» griff auf der halben Fussbreite nicht.**

   **Zweitens die Zeile.** Der erste Anlauf gab den Absaetzen
   `display:inline-block`. Das behob den Klick — und setzte Unterschrift und
   Zaehlung nebeneinander: «Mannschaftsfoto1 VON 3», in einer Zeile, ohne
   Zwischenraum. **Zwei inline-blocks in einem Elternteil sind Nachbarn und
   keine Zeilen.**

   `flex-direction:column` mit `align-items:center` macht beides in einem: Die
   Absaetze stehen untereinander UND nehmen nur ihre Inhaltsbreite — bei
   `align-items:center` ist die Querausdehnung der Inhalt und nicht die
   Spalte. Gemessen danach: «Portraet» 46 px breit, der Fuss 93 statt 820,
   derselbe Klick trifft `div.lb` und schliesst (`elementFromPoint`).

   `text-align:center` bleibt dabei: Es richtet die ZEILEN einer langen
   Unterschrift aus, die ueber 820 px umbricht — das kann `align-items`
   nicht. */
.lb-fuss{display:flex;flex-direction:column;align-items:center;
  text-align:center;max-width:var(--content-sm);margin:0 auto}
.lb-fuss > p{max-width:100%}
/* Dieselben vier Werte wie `.bu-tx`, nur nicht leise: Auf `--nacht` steht die
   Unterschrift allein da und ist der Text, wegen dessen man das Bild
   aufgemacht hat. `40ch` entfaellt, weil `.lb-fuss` schon deckelt. */
.lb-bu{font-size:var(--tx-klein);line-height:1.35;color:var(--kalk)}
.lb-zahl{margin-top:6px}
/* Die Bauform der Bandpfeile (`.lauf-pfeil`): 44x44, ein Strich,
   kein Grund, Gelb beim Darueberfahren. **44 ist die Beruehrflaeche des
   Hauses** (siehe «148 Beruehrflaechen auf dem Handy»). Die Farben sind die
   dunkle Fassung — `--linie` statt `--papier-linie`, `--kalk` statt
   `--papier-text` —, weil der Grund hier `--nacht` ist. */
.lb-knopf{
  position:absolute;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--linie);background:none;
  color:var(--kalk);cursor:pointer;font-size:24px;line-height:1;
}
@media(hover:hover){.lb-knopf:hover,.lb-knopf:focus-visible{background:var(--gelb);border-color:var(--gelb);color:var(--dun);outline:0}}
.lb-zu{top:clamp(8px,1.4vw,16px);right:clamp(8px,1.4vw,16px);font-size:26px}
.lb-vor,.lb-nach{top:50%;transform:translateY(-50%)}
.lb-vor{left:clamp(4px,1vw,14px)}
.lb-nach{right:clamp(4px,1vw,14px)}
/* **Eine Galerie mit einem Bild hat keine Pfeile.** Ein Knopf ohne Wirkung
   ist schlechter als keiner — dieselbe Entscheidung wie bei
   `.logolauf.ruhig+.logolauf-pfeile`. Das Skript setzt `hidden`. */

/* ── Wir suchen Verstaerkung ───────────────────────────────────────
   Eigene Klasse und keine Abwandlung von `.stufe`. Sie erbt die BAUFORM —
   gelbe Oberlinie, Spaltenfluss, Kartenfuss ueber `margin-top:auto` —, aber
   nicht die Farbe.

   **«Dunkel heisst Angebot» gilt weiter**, auf «Sponsor werden» und auf
   «Mitglied werden». Die Stellenkarten sind die Ausnahme, und der Grund steht
   hier, damit sie beim naechsten Aufraeumen nicht zur Regel gemacht oder
   zurueckgedreht wird: Der Text ist auf hell besser lesbar, und drei schwarze
   Bloecke sind ein Gewicht, das drei Trainerstellen nicht rechtfertigen.

   Keine Umrandung: `--papier-flaeche` ist die Form, die die Website fuer helle
   Karten fuehrt — `.nk` auf Papier, die Jahrzehnte, die Sponsorenkacheln. Ein
   Rahmen waere eine zweite Form fuer dieselbe Sache, und die Karte hebt sich
   ohnehin ab, weil die Seite weiss ist.

   **Was damit wegfaellt:** sechs Regeln. Die dunkle Karte auf einer
   Papierseite erbte alle Papierregeln, die in ihr vorkamen — `.papier .grp`,
   `.papier .zo`, `.papier .person.schmal .person-rolle` —, und jede musste
   einzeln zurueckgeholt werden, die letzte fuenfgliedrig. Auf Papier sind
   `.grp`, `.zo` und `.person-rolle` von Haus aus richtig. */
.stellenkarte{padding:22px 22px 24px;display:flex;flex-direction:column}
.stellenkarte > :last-child{margin-top:auto;padding-top:18px}
.stellenkarte .grp{margin:0 0 6px}
.stellenkarte .tz{border-bottom:1px solid var(--papier-linie);padding:9px 0}
.stellenkarte .zo{margin-top:14px}
/* `.person` bringt ihren eigenen Grund mit — auf der hellen Karte waere das
   ein Kasten im Kasten. Nachgemessen noetig, auch nach dem Wechsel auf hell. */
.stellenkarte .person{background:none}

/* ⚠ **Aufwand und Ab fluchten auf dem Handy — 23.09.2026, Didis Vorgabe.**

   `.tz` ist von Haus aus `display:flex;justify-content:space-between`. Das
   schiebt den Wert an den rechten Rand, und weil «Aufwand» (62.8px) und «Ab»
   (19.8px) verschieden breit sind, faengt jeder Wert woanders an. **Gemessen
   auf 375, Kartenkante als Nullpunkt:** der lange Wert bei 100.8, «Ab sofort»
   bei 256.6 — und in der zweiten Karte bei 100.8 gegen 115.3. Drei Kanten auf
   vier Zeilen.

   **Zwei unabhaengige Flexkaesten koennen grundsaetzlich nicht fluchten.** Sie
   brauchen eine gemeinsame Spaltenaufteilung, und die billigste davon ist eine
   feste Etikettenbreite: 5.5em sind bei 14px rund 77px, das laengere Etikett
   misst 62.8px und hat damit Luft, auch wenn die Schrift anders faellt. Mit der
   16px-Fuge des Kastens beginnt danach jeder Wert bei 115.

   **`flex-start` statt `space-between`**, sonst zieht die Verteilung genau die
   kurzen Werte wieder nach rechts — das war der ganze Fehler. Das `flex:1` am
   Wert laesst den langen ueber die Restbreite umbrechen statt die Karte zu
   sprengen.

   ⚠ **Kein `display:block` an `b` oder `span`.** `align-items:baseline` haelt
   Etikett und erste Wertzeile auf einer Grundlinie; ein Block gaebe die her,
   und bei zweizeiligem Wert saehe man es sofort.

   ⚠ **Nur unter `.stellenkarte`, und das ist die Auflage dieses Auftrags.**
   `.tz` teilen sich Stellen- und Spielseite (`#v-spiel .sp-fakten .tz`, eigene
   Regeln ab 5121); eine Regel an `.tz` allein verschoebe dort den Faktenblock.

   ⚠ **619 ist keine neue Zahl:** 620 ist die Schwelle, ab der `.g3` die Karten
   nebeneinander stellt — das ist die Schwelle, die diese Seite
   ohnehin fuehrt. Darueber bleibt es, wie es war. */
@media(max-width:619px){
  .stellenkarte .tz{justify-content:flex-start;align-items:baseline}
  .stellenkarte .tz b{flex:0 0 5.5em}
  .stellenkarte .tz span{flex:1 1 auto;min-width:0}
}

/* ── Mehrere Tenuesponsoren je Team ────────────────────────────────
   Ein Team kann zwei Tenuesponsoren haben — zwei Logos auf demselben Trikot,
   oder eines fuer Heim und eines fuer Auswaerts. Der Teamname steht einmal,
   die Logos darunter.

   **Die Regel ist: JEDES LOGO IST GLEICH BREIT, auf jeder Breite.** Kein
   Sponsor darf groesser erscheinen, weil sein Team zwei hat — dafuer hat
   niemand bezahlt. Unter 560 stapeln sich die Logos in normaler
   Kachelbreite; ab 560 ueberspannt die Kachel zwei Spalten, und die zwei
   Logos darin messen genau so viel wie ein einzelnes daneben.

   Zwei ungewoehnliche Werte, beide beim Messen gefunden:

   1. **Der innere Abstand muss dem Spaltenabstand entsprechen.** Stand er auf
      24 bei einem Spaltenabstand von 14, ueberspannte die Doppelkachel zwei
      Spalten PLUS 14 px, teilte aber durch 24 — die zehn Pixel Differenz
      landeten in der Logobreite, und ein Logo war breiter als seine Nachbarn.
      Darum der eigene Medienblock bei 960, wo der Rasterabstand auf 24 geht.

   2. **minmax(0,1fr) statt 1fr.** Bei 320 px waren die Rasterspalten selbst
      ungleich, 141 gegen 129: `1fr` schrumpft nicht unter die Inhaltsbreite,
      und die Doppelkachel drueckte ihre eigene Spalte auseinander.

   **Bewusst nicht geloest:** Die Zeile mit einer Doppelkachel laesst am Ende
   ein Feld leer, weil der Fluss sich verschiebt. `grid-auto-flow:dense`
   fuellte es, brächte aber die Reihenfolge der Teams durcheinander. **Die
   feste Reihenfolge ist wichtiger** — wer das hier liest, soll es nicht
   «loesen». */


/* ── Sprungleiste: Zeile oder Auswahl, nie beides ──────────────────
   560 ist der Wert, ab dem das Projekt Eingabefelder und Kachelraster
   umbricht — dieselbe Zahl, dieselbe Frage: ab wann traegt eine Reihe.
   Darunter ist die Verweiszeile nicht bedienbar (34px Beruehrflaeche statt
   44), darueber ist sie die kuerzere Form. */
/* **`.fe.sprungwahl` und nicht `.sprungwahl`.** Die Auswahl traegt `.fe`, und
   `.fe{display:grid}` steht 175 Zeilen weiter unten — gleiches Gewicht,
   spaetere Zeile, also gewinnt sie. Gemessen standen Auswahl UND Verweiszeile
   gleichzeitig da, auf jeder Breite. Dieselbe Falle wie bei den zwei
   `:has()`-Regeln, nur ohne `:has()`: **bei gleichem Gewicht entscheidet die
   Reihenfolge in der Datei, und die ist keine Entscheidung.** Das `.fe` davor
   hebt das Gewicht auf (0,2,0) und macht die Regel unabhaengig davon, wo sie
   steht. */
.fe.sprungwahl{display:block;max-width:var(--feldbreite)}
.sprungzeile{display:none}
@media(min-width:560px){
  .fe.sprungwahl{display:none}
  .sprungzeile{display:block}
}
.tenuewand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 14px;align-items:start}
@media(min-width:560px){.tenuewand{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:960px){.tenuewand{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}

.logopaar{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media(min-width:560px){
  .tenuekachel:has(.zwei-logos){grid-column:span 2}
  .logopaar.zwei-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media(min-width:960px){.logopaar.zwei-logos{gap:24px}}

/* Der Logokasten: weisser Grund, damit ein Logo mit durchsichtigem Rand
   ueberall gleich sitzt. Ohne Zeigerzustand — siehe die Begruendung bei
   `.spl`.

   ── Die Kachel ohne Logo ist kein Sonderfall ──────────────────────

   Ein Sponsor ohne Logo bekommt statt des Bildrahmens ein leeres
   `<div class="f" data-l="Name">`; den Namen zeichnet `.f[data-l]::after`.
   **Im Datenstand kommt das nicht vor** — jeder gesäte Sponsor hat ein Bild,
   und wer nur misst, was dasteht, hält den Fall für theoretisch.

   **Er ist es nicht: Beim Livegang fehlen acht Sponsorenlogos.** Darum ist
   er am 04.09.2026 erzwungen und an fünf Breiten mitgemessen worden, als die
   Mindesthöhe an `.spl` wegfiel. Er verhält sich wie die Bildkachel — das
   `aspect-ratio:3/1` eine Zeile weiter unten trägt ihn genauso.

   > **Eine Messung, deren Anlass niemand kennt, sieht später aus wie
   > Übereifer.** Der Anlass steht hier. */
.logowand .spl,.tenuewand .spl,.hs-paar .spl,.ts-kachel .spl{
  background:#fff;border:1px solid var(--papier-linie);display:block;padding:0}
.logowand .f,.tenuewand .f,.hs-paar .f,.ts-kachel .f{aspect-ratio:3/1;background:#fff}
/* ⚠⚠ **246px sind am 12.09.2026 auf 340px gewachsen.** Der alte Grund
   steht darunter und gilt zur Haelfte weiter.

   > **Hier stand:** «Ohne Deckel fuellte sie im leeren Fall die ganze rechte
   > Spalte (gemessen 410px) und waere damit lauter als der Text daneben — die
   > Kachel ist aber die Beigabe zum Titel, nicht das Angebot. 246px ist die
   > Breite, die die Logokachel im Fall darueber ohnehin misst; beide Faelle
   > sind so gleich gross, und die Seite springt beim Umschalten nicht.»

   **Der Deckel bleibt noetig** — ohne ihn waere die Kachel im leeren Fall
   immer noch 410px breit. **Nur die Zahl aendert sich**, und die zweite
   Haelfte des Satzes gilt unveraendert: Es gibt weiterhin EINE Regel fuer
   beide Faelle, also springt beim Umschalten nichts.

   ⚠ **340 statt 246, weil die Kachel nicht mehr allein steht.** Seit dem
   12.09.2026 zeigt die Teamseite ALLE Werbeformen, und ein Tenuesponsor kann
   zu zweit auftreten («FC Herrliberg 2» hat zwei). Eine Logowand aus 246er
   Kacheln liest sich als Liste kleiner Marken; 340 gibt jedem Logo das
   Gewicht, das der Abschnitt behauptet. */
.ts-kachel{max-width:340px}

/* ⚠⚠ **Der Satz unter dem Logo — 12.09.2026.** Das Feld heisst im
   Backend «Text unter dem Logo» und verspricht in seiner eigenen
   Beschriftung: «Steht auf der Sponsorenseite unter dem Logo dieses
   Sponsors bei diesem Team.» **Es hatte bis heute keinen Leser.**

   ⚠ **Die Huelle `.spl-feld` entsteht nur, wo ein Text steht.** Ohne
   Text bleibt das Logo direktes Rasterkind, und die Kachelgroessen
   aendern sich nirgends — gemessen an drei Breiten vor und nach dem Bau.

   `.spl` behaelt seine Hoehe auch in der Huelle: Sie kommt vom Bild
   (`width:100%`, Eigenverhaeltnis 3:1) beziehungsweise von
   `.f{aspect-ratio:3/1}`, nicht vom Raster darueber. */
.spl-feld{display:block}
.spl-tx{margin-top:8px;font-size:var(--tx-klein);line-height:1.35;
  color:var(--tx-leise);max-width:40ch}
/* ⚠ In der Teamkachel steht er direkt in `.ts-kachel`, dort gibt es keine
   Huelle — jede Kachel haelt ohnehin genau ein Logo. */
.ts-kachel .spl-tx{margin-top:8px}

/* ── Die Logowand einer Werbeform ────────────────────────────────────────

   ⚠ **`auto-fill` mit fester Spur, nicht `auto-fit` mit `minmax`.** Bei
   drei Logos sollen sie in eine zweite Reihe fallen und **nicht schrumpfen**
   — `auto-fit` zoege sie auf die volle Breite auseinander, `minmax(0,340px)`
   liesse sie enger werden. Eine feste Spur tut beides nicht.

   ⚠ Schmal deckelt `.ts-kachel` sich selbst ueber `max-width` und die
   Spur darf mitgehen: `min(340px,100%)`. */
.ts-wand{display:grid;grid-template-columns:repeat(auto-fill,min(340px,100%));
  gap:clamp(14px,1.8vw,22px);margin-top:18px}
/* Jede Werbeform ist ein eigener Abschnitt und braucht Luft zum naechsten. */
.ts-form + .ts-form{margin-top:clamp(30px,3.4vw,44px)}

/* Die Wand aller dreissig Teams steht IM Angebot und nicht darunter. Gemessen:
   auf dem Handy sind alle sieben Angebote zugeklappt — darunter stuende die
   Wand als einziger offener Block, 2194px hoch, und schoebe Fanion500,
   Anlaesse und den Goennerkasten unter sich weg (Seite 2867 → 5087). Innen
   bleibt die Seite bei 2867 und die Wand oeffnet sich mit dem Angebot, zu dem
   sie gehoert.

   Der Einwand, sie sprenge den Rhythmus der Angebotsliste, ist gemessen
   schwaecher als er klingt: die sechs uebrigen Angebote messen 219 bis 963 px,
   ein Verhaeltnis von 1:4,4. Es ist kein Rhythmus, den die Wand zerstoert,
   sondern eine ohnehin ungleiche Reihe, die ungleicher wird — das Tenueangebot
   steht mit der Wand bei 1595 px, die Seite waechst von 4982 auf 6212.

   Nur der Abstand nach oben ist eigen — die Wand auf der Partnerseite folgt
   einer Einleitung, diese einer Fussnote. */
/* Die Zeile ueber der Wand traegt den Abstand, die Wand schliesst an sie an.
   Vorher stand die Wand allein unter einer Fussnote und brauchte ihn selbst. */
.teamzeile{margin-top:26px}
.teamzeile + .teamwand{margin-top:14px}

/* Eine Leistungsliste im Angebot statt einer Fussnote in Kleinschrift. Die
   Fussnote bleibt der Fussnote vorbehalten — Vorbehalte zu Preisen und
   Kosten —, die Leistungen sind das Angebot selbst und stehen als Liste.

   **Keine eigene Klasse.** Die Listen sind `<ul>` in einem `.fliess`-Behaelter,
   wie der Prototyp es sonst haelt; sie erben damit `.fliess ul` und
   `.fliess li` samt gelbem Strich und Papierfarbe. Gemessen war das noetig und
   nicht Geschmack: ein blankes `<ul>` OHNE `.fliess` bekommt gar kein
   Aufzaehlungszeichen — weder Punkt noch Strich, weder Einzug noch Abstand.
   Die Sammelregel setzt `list-style:none`, und der Strich haengt an `.fliess`.

   Der Behaelter braucht nur den Abstand nach oben; alles Uebrige kommt von
   `.fliess`. */
/* Jedes Angebot nennt seine Leistungen selbst — es gibt keinen Sammelblock
   mehr, der sie einmal oben nennt. Grund am 22.08.2026 nachgelesen: die zwei
   Leistungen gelten fuer fuenf von zehn Angeboten und fuer die anderen fuenf
   nicht. Eine Verallgemeinerung, die fuer die Haelfte nicht gilt, ist keine —
   und der Leser prueft nicht, ob er zur Ausnahme gehoert. Bei zwei Zeilen je
   Angebot ist die Wiederholung billiger als der Irrtum. */
/* Der Zahlenstreifen steht seit dem 24.08.2026 IM Ressort und nicht mehr
   ueber der Seite. Sein eigener Abstand von 38px war fuer den Abstand zu einem
   Lead gedacht; zuoberst in einem aufgeklappten Block braucht er ihn nicht. */
.ressort-inh > .zahlen{margin-top:4px}
.ressort-inh > .zahlen + .zwei{margin-top:30px}
.ressort-inh > .fliess,.anlassangebot .fliess{margin-top:18px}
/* Steht eine Leistungsliste unter einer eigenen Zeile («Als Hauptsponsor:»),
   gehoert der Abstand zwischen Zeile und Liste und nicht ueber die Zeile. */
.ressort-inh > .tsr + .fliess{margin-top:8px}
.ressort-inh > .fliess + .tsr{margin-top:18px}

/* Die vier Anlaesse sind vier Angebote im Angebot. Als Tabelle standen dort
   drei Angaben je Zeile und keine Leistung — und eine Tabelle kann keine
   Liste je Zeile tragen. Untereinander und nicht als Raster, weil die vier
   verschieden lang sind: das Gruempelturnier traegt vier Leistungen und drei
   Werbemoeglichkeiten, der Jahresabschlussabend eine. Nebeneinander stuenden
   drei kurze neben einem langen. */
.anlassliste{margin-top:22px}

/* **Der Auffangsatz braucht das Mass der Einleitung, nicht die Breite des
   Kastens.** Ohne `max-width` lief er im Bild bei 1440 ueber die ganze
   Spalte, waehrend die Einleitung drei Zeilen darueber bei 66 Zeichen
   umbricht — zwei Fliesstexte im selben Block mit zwei verschiedenen
   Zeilenlaengen. 66ch ist dasselbe Mass wie `.intro`; der Satz ist derselbe
   Fall.

   **22px Abstand, nicht die 9 aus `.nachsatz`.** Die 9 stammen von den
   Mailzeilen, die dicht unter ihrem Absatz haengen. Hier schliesst der Satz
   eine Liste ab und braucht denselben Abstand, den die Liste oben hat. */
.anlassliste + .nachsatz{max-width:66ch;margin-top:22px}
.anlassangebot + .anlassangebot{margin-top:20px;padding-top:20px;border-top:1px solid var(--linie)}
.papier .anlassangebot + .anlassangebot{border-top-color:var(--papier-linie)}
.anlassangebot .dat{margin-top:3px}
/* Die zweite Liste im Gruempelturnier sind keine Leistungen, sondern eine
   Wahl. Sie sieht gleich aus und traegt darum eine eigene Zeile darueber —
   die Form unterscheidet sie nicht, das Wort tut es.
   Zwei Stellen, weil `.anlassangebot .dat` darueber (0,2,0) ist und
   `.wahlzeile` allein (0,1,0) waere: gemessen klebte die Zeile an der letzten
   Leistung. Zum vierten Mal in diesem Durchgang dieselbe Falle. */
.anlassangebot .wahlzeile{margin-top:20px}
.tenuekachel .grp,.hauptsponsor .grp{margin-bottom:10px}

/* ── Eine Kachel, die keinen Sponsor zeigt, sondern einen sucht ────
   Die Website fuehrt fuer «hier ist noch nichts» schon eine Form: gestrichelt.
   `.person.vakant` (2px dashed var(--linie)) ist seit dem 26.08.2026 die
   einzige, die sie noch traegt. `.einbett-platz` sagte dasselbe mit
   2px dashed var(--papier-linie) und ist am selben Tag mit seinem Block
   gefallen, weil kein Element ihn mehr trug. Uebernommen ist die FORM, nicht
   das Mass: 2px machten die leere Kachel zur schwersten in einer Reihe aus
   1px-Kacheln, und die leere soll nicht lauter sein als die zwoelf gedankten.

   `#c9c5b8` aus dem Entwurf waere eine zweite Linienfarbe fuer denselben
   Zweck. Gemessen liegt var(--papier-linie) auf Weiss bei rgb(220,220,220),
   der Entwurfswert bei rgb(201,197,184) — dunkler und waermer. Eine neue
   Farbe fuer eine gestrichelte Linie ist eine zu viel.

   Beim Zeiger wechseln Stil UND Farbe, nicht die Breite: 1px dashed wird 1px
   solid und gelb, wie bei allen anderen Kacheln. Gemessen bleibt die Kachel
   auf 100px Hoehe — Regel H hat nichts zu melden. */
/* Drei Stellen, und jede einzelne ist noetig. Der Rand der Kachel wird an
   ZWEI Orten gesetzt: `.tenuewand .spl` (0,2,0) hier oben und `.papier .spl`
   (0,2,0) rund 250 Zeilen weiter unten. Gemessen blieb der Rand zweimal
   durchgezogen — erst als `.frei-kachel` (0,1,0) gegen die erste verlor, dann
   als `.spl.frei-kachel` (0,2,0) gegen die zweite, weil die spaeter steht.
   `.papier .spl.frei-kachel` ist (0,3,0) und gewinnt gegen beide, unabhaengig
   davon, wo es steht.
   Die Lehre steht schon zweimal in der Uebergabe und hier zum dritten Mal:
   eine Regel wirkt nicht, weil sie spaeter steht, sondern weil sie mindestens
   gleich stark ist — und wer nur die naechstliegende Gegenregel prueft, hat
   die halbe Frage geprueft. */
.papier .spl.frei-kachel{border-style:dashed}
/* **Der Zeigerzustand haengt am `a`, nicht an der Klasse.** Bis zum
   24.08.2026 stand hier `.papier .spl.frei-kachel:hover` — und damit hoverte
   auch die Kachel auf «Sponsor werden», die gar kein Verweis ist: sie steht
   auf der Seite, zu der sie fuehren muesste. Sie versprach einen Klick, den
   es nicht gibt.

   **Der Nebenbefund, der dahintersteckt, steht damit im Stylesheet statt nur
   in der Doku:** Ob ein Baustein ein Verweis ist, haengt nicht am Baustein,
   sondern daran, wo er steht. Dieselbe Kachel ist auf der Partnerseite und
   auf der Teamseite zu Recht ein Verweis — dort fuehrt sie zum Angebot.

   Kein Sonderfall und keine zweite Klasse: `a.frei-kachel` traegt den
   Zustand, `div.frei-kachel` traegt ihn nicht. Die Bauform sagt es selbst.

   Das `a` hebt das Gewicht auf (0,4,1) und gewinnt damit gegen
   `.papier .spl.frei-kachel` (0,3,0) — was die gestrichelte Grundform setzt.
   Ohne das `a` im Selektor waere die Regel (0,2,1) und verloere.

   **Nachgemessen ueber das ganze Stylesheet:** 105 Einzelselektoren mit
   `:hover`, davon nennen 27 das Element und 67 nur eine Klasse. Von diesen 67
   wird nur bei acht die Klasse im Markup von `<a>` UND etwas anderem
   getragen — vier davon sind `.btn`/`.btn-k` an `<a>` und `<button>`, und
   dort ist der Zustand an beiden richtig, weil beides Bedienelemente sind.
   Dieser hier war der einzige echte Fall. **Vierzig weitere Klassen tragen
   heute nur `<a>`:** dort ist die Regel folgenlos, aber ungeschuetzt — wer
   eine davon je auf ein anderes Element setzt, faellt in dieselbe Falle. */
@media(hover:hover){.papier a.spl.frei-kachel:hover{border-style:solid}}
/* Drei Stellen, weil `.papier .eye,.papier .kat,.papier .grp` weiter unten
   steht und bei gleicher Staerke die spaetere Regel gewinnt. Der Teamname ist
   hier keiner — er benennt eine Luecke und ist darum gedaempft. */
.papier .grp.frei-t{color:var(--papier-halb)}
.f-frei{
  aspect-ratio:3/1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;text-align:center;padding:8px;
}
.f-frei b{font-family:var(--b);font-weight:700;font-size:var(--tx-klein);color:var(--papier-text)}
/* Der Knopf steht auf einer eigenen Zeile und braucht Luft nach oben —
   derselbe Abstand, den ein Absatz nach einem Absatz hat. */
.ts-knopf{margin-top:20px}
.f-frei span{font-size:var(--tx-etikett);color:var(--papier-halb)}
/* Kein eigener Wert fuer den Schlussverweis: `p:has(> .mehr:only-child)`
   traegt seit je 20px und wiegt (0,2,1) gegen die (0,1,0) einer Klasse — eine
   eigene Regel haette verloren und nur so ausgesehen, als taete sie etwas.
   Die Klasse bleibt am Absatz stehen, damit er benennbar ist. */

/* ── 130 Formulare ────────────────────────────────────────── */

.form{display:grid;gap:15px;max-width:var(--feldbreite)}
/* **Ein Formular, das im Editorinhalt steht, ist so breit wie der Text
   darueber -- 22.09.2026.**

   `--feldbreite` (560px) deckelt jedes `.form`, und das ist an seinem Ort
   richtig: Auf `/kontakt/` und `/mitglied/` bildet das Formular mit der
   Anschrift bzw. mit dem Einleitungssatz eine KANTE -- beide beginnen und
   enden an derselben Stelle (die Begruendung steht beim Token selbst). **Die
   Kante ist der Grund fuer die Zahl, nicht die Zahl der Grund fuer die
   Kante.**

   Wo das Formular aus dem Editor kommt, gibt es diese Kante nicht. Dort
   steht es unter Fliesstext, und Fliesstext ist `66ch` breit. Gemessen am
   22.09.2026 auf der Anlassseite (dev, 1440px), alles von derselben linken
   Kante 80px aus:

   ```
     Text darueber (.fliess)        686.66px
     Formular vorher                560.00px   -- 126.66px schmaler
     Formular nachher               686.66px
   ```

   **`66ch` und nicht 686px**, weil es dieselbe Angabe ist wie bei `.fliess`
   und nicht dieselbe Zahl: `ch` haengt an der Schriftgroesse, und `.form`
   erbt mit 17px genau die `var(--tx)`, auf der `.fliess` steht -- nachgemessen,
   beide loesen auf 686.66px auf. Wer die Textgroesse aendert, aendert beide
   mit. **Eine kopierte Zahl waere am naechsten Tag eine andere Breite.**

   ⚠ **Der Waehler haengt am ORT und nicht am Formular.** `.wrap > .form`
   trifft nur das Formular, das unmittelbar im Abschnittsfluss steht. Auf
   `/kontakt/` liegt eine `.kontaktform` dazwischen, auf `/mitglied/` ein
   `.anfrageblock` -- beide bleiben bei 560px, gemessen vorher und nachher.
   Damit gilt die Angleichung auch dann noch, wenn die Anlassseite ein- oder
   zweispaltig gebaut wird: Der Abschnitt mit dem Formular entsteht so oder
   so aus `fch_theme_abschnitte()` und hat so oder so ein `.wrap` als Vater.

   Gewicht (0,2,0) gegen die (0,1,0) der Sammelregel darueber -- sie gewinnt
   durch Gewicht und nicht durch Reihenfolge. */
.wrap > .form{max-width:66ch}
.fe{display:grid;gap:6px}
/* Suchfeld über einer langen Liste: schmaler als die Spalte und mit
   Abstand zur Tabelle darunter. Stand fünfmal als Inline-Wert. */
.listensuche{max-width:340px;margin-bottom:22px}
/* **Das Formular-Plugin bringt eigene Labelregeln mit.**

   Fluent Forms setzt `display:inline-block` an sein `<label>`; das Haus setzt
   `block`. Gemessen am 01.09.2026 nach dem Einbau: die einzige Abweichung von
   zehn geprueften Merkmalen des Anfrageblocks.

   **Diese Regel stand einen Tag lang als `.form .fe .ff-el-input--label
   label`** -- mit der Plugin-Klasse im Selektor, (0,3,1), um die
   Plugin-Regel (0,2,1) zu schlagen. Sie war noetig, solange `style.css` vor
   `fluentform-public-default.css` geladen wurde: bei Gleichstand gewinnt,
   was spaeter kommt.

   **Seit dem 01.09.2026 laedt das Haus zuletzt** (siehe `functions.php`,
   «Das Theme-Stylesheet wird ans Ende der Ausgabeliste geschoben»), und
   damit gewinnt die einfache Fassung. Gemessen nach der Umstellung: beide
   Regeln treffen, `display:block` steht.

   > **Eine Umgehung, die nicht mehr gebraucht wird, sieht in einem Jahr wie
   > eine Notwendigkeit aus.** Darum ist sie zurueckgenommen und nicht
   > stehen gelassen. */
.form .fe label{display:block}
.fe label{font-family:var(--b);font-weight:700;font-size:var(--tx-klein);letter-spacing:.15em;text-transform:uppercase;color:var(--tx-leise)}
/* ── ⚠⚠ 44 STATT 48 — Didi, 23.09.2026 abends ──────────────────

   > ~~`padding:13px 14px` … `min-height:48px`~~

   Didis Frage war «muss das Feld denn so gross sein?», und die Antwort
   stand schon im Stilblatt: **Das Haus fuehrt 44 als Tippziel** — die
   Symbolknoepfe (`width:44px;height:44px` an `.suche,.konto` und `.burg`).
   ~~Und die Zeile bei :1846~~ — dieser dritte Verweis ist am 25.09.2026
   gestrichen, sein Ziel war nicht mehr bestimmbar. Die Felder waren vier Pixel grosszuegiger als alles andere,
   **ohne dass dafuer ein Grund im Code stand.** 44 ist damit keine neue
   Zahl, sondern die, die ohnehin gilt.

   ⚠⚠ **Das Polster muss mit, sonst aendert sich nichts.** Die Hoehe kam
   nicht aus `min-height`, sondern aus `13 + Zeile + 13` — die 48 waren die
   Absicherung, nicht die Ursache. Wer nur `min-height` senkt, bekommt
   weiterhin 48px und haelt den Auftrag faelschlich fuer erledigt.

   ⚠⚠ **Die 10 ist gemessen, nicht gerechnet — und der erste Versuch war
   falsch.** 11px sahen richtig aus (13 minus 2 fuer die vier Pixel), ergaben
   am Bildschirm aber **46**: Die Textzeile ist 22px hoch, nicht 20. Erst
   10 + 22 + 10 + 2 Rahmen sind 44, nachgemessen an allen drei Feldern auf
   `/news/`. **Wer hier spaeter «aufraeumt» und 10 auf 11 oder 12 hebt,
   bekommt die 46 zurueck, ohne dass eine Regel rot wird.**

   ⚠ **Drei Regeln fuehren dieselben Felder** (hier, `.suchzeile input`
   und `.form .fe …`). Alle drei sind nachgezogen; eine
   allein haette das Kontaktformular gegen die Filterzeile verstellt. */
.fe input,.fe select,.fe textarea{
  background:var(--stein);border:1px solid var(--linie);border-radius:0;padding:10px 14px;
  color:var(--tx-haupt);font-family:var(--b);font-size:var(--tx);min-height:44px;
}
/* Einzige gewollte Doppelung: Verfeinerung direkt unter ihrer Sammelregel.
   Nicht auflösen — sonst stehen sieben Deklarationen zweimal im CSS. */
.fe textarea{min-height:126px;resize:vertical}
/* **Der gelbe Rand war als Ersatz für den Umriss gedacht und war keiner.**
   Auf dunklem Grund tat er, was er sollte. Auf Papier nicht: `.papier .fe
   input` weiter unten hat dieselbe Spezifität (0,2,1) und steht später,
   gewinnt also und setzt den Rand auf `rgba(11,11,10,.22)` zurück. Das
   `outline:none` galt weiter, weil die spätere Regel den Umriss nicht
   anfasst. **Ergebnis: neunzehn Felder ohne jede Anzeige** — nachgemessen
   mit Tabulatorsprüngen am 25.08.2026.

   Zwei Änderungen: `outline:none` fällt, damit die Grundregel greift. Und
   die Papierfassung steht jetzt ausdrücklich dabei, damit der gelbe Rand
   auch dort erscheint — er ist nicht mehr die einzige Anzeige, aber er
   bleibt die nächstliegende. */
/* ⚠⚠ **Hier standen die letzten drei nackten `:focus` des Blattes —
   25.09.2026.** ~~`.fe input:focus,.fe select:focus,.fe textarea:focus`~~
   trugen den Ring auch nach einem Mausklick ins Feld. Der Kommentar
   darunter fordert `:focus-visible` seit dem 27.08.2026 ausdruecklich und
   begruendet es — **aber nur die Papierhaelfte des Waehlers hat ihn
   bekommen.** Die dunkle Haelfte stand drei Zeilen darueber in derselben
   Waehlerliste und wurde beim Lesen als «schon erledigt» mitgenommen.

   > **Eine Begruendung, die an der Regel steht, gilt fuer jeden Waehler der
   > Regel** — und sie war richtig aufgeschrieben und trotzdem nur zur
   > Haelfte angewendet. Derselbe Befund wie bei `.kontaktzeile > .tel`.

   Ein Auswahlfeld, das mit der Maus geoeffnet wird, braucht kein
   Tastaturzeichen — dieser Satz gilt dunkel wie hell. */
.fe input:focus-visible,.fe select:focus-visible,.fe textarea:focus-visible,
/* **Der Fokus nimmt die Projektfassung: dunkler Umriss innen, gelber Ring
   aussen.** Bis zum 27.08.2026 stand hier nur `border-color:var(--gelb)` —
   und **Gelb gegen Weiss misst 1,35**, weit unter der Schwelle von 3, die ein
   Fokuszeichen braucht. Sichtbar war es allein durch den eigenen Ring des
   Browsers, der daneben lag: zwei Rahmen ineinander, und der eine gehoerte
   uns nicht.

   `:focus-visible` statt `:focus` — ein Auswahlfeld, das mit der Maus
   geoeffnet wird, braucht kein Tastaturzeichen.

   ⚠⚠ **Der gelbe Ring ist am 25.09.2026 entfallen.** Er stand hier als
   ~~`box-shadow:0 0 0 2px var(--gelb)`~~, mit dieser Begruendung:

   > ~~«Der gelbe Ring misst hier 2px, nicht 5. Die 5 der Grundregel sind
   > fuer kleine Ziele gedacht — Verweise im Text, Symbolknoepfe, Kacheln.
   > Bei einem Feld von 340x48 wird daraus eine Flaeche statt einer Linie.»~~
   > ~~«Die Sichtbarkeit haengt ohnehin am dunklen Umriss, nicht am Gelb:
   > 19,69 gegen Weiss, waehrend Gelb auf Weiss 1,35 misst. Der Ring trennt
   > den Umriss vom Grund; dafuer genuegen 2px.»~~

   **Der zweite Satz ist das Argument fuer seinen eigenen Wegfall**: Wenn die
   Sichtbarkeit am Umriss haengt und nicht am Gelb, dann traegt der Umriss
   allein. Didi: «ein einzelner Ring, 2 px, 2 px Abstand.»

   ⚠ **Und der Umriss liest jetzt `--akzent`.** Das ist mehr als ein
   Namenstausch: Die Waehlerliste dieser Regel fuehrt BEIDE Gruende
   nebeneinander — `.fe input` steht auf `--stein`, `.papier .fe input` auf
   Weiss. Mit `--dun` war der Umriss auf dem dunklen Feld unsichtbar, und
   sichtbar blieb der Fokus dort allein durch das Gelb daneben. **Wer nur den
   `box-shadow` weggenommen haette, haette die dunkle Haelfte blind gemacht.**

   **Der Feldrand bleibt hell.** Ein erster Anlauf setzte ihn beim Fokus auf
   dunkel — dann standen zwei dunkle Rahmen ineinander, der Rand und der
   Umriss. Der Umriss allein traegt; der Rand muss dafuer nichts tun. */
.papier .fe input:focus-visible,.papier .fe select:focus-visible,
.papier .fe textarea:focus-visible{
  outline:2px solid var(--akzent);outline-offset:2px}
/* **Die drei Anschriftzeilen als ein Block.** Der Deckel sitzt am Block und
   nicht an der einzelnen Zeile, damit alle drei dieselbe Kante haben wie das
   Formular darunter — und weil eine Zeile mit zwei Woertern sonst gar keinen
   Deckel braeuchte und die mit der Adresse einen anderen.
   `gap:2px`, weil die Zeilen zusammengehoeren: es ist EINE Anschrift. */
.anschriftzeile{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;
  max-width:var(--feldbreite)}
.anschriftzeile .kontaktzeile{margin-top:0}
.kontaktzeile{display:flex;align-items:flex-start;gap:11px;margin-top:12px}
.kontaktzeile .ic{width:19px;height:19px;margin:3px 0 0;color:var(--gelb)}
/* **Wofuer die gelbe Fassung die Vorlage ist - und hier ist der dunkle Ort
   schon gebaut.** Gelb hat heute keinen Traeger: alle vierzehn
   Kontaktverweise stehen auf Papier und tragen dort `--gold`. Die Regel
   bleibt trotzdem, denn der Fussbereich fuehrt auf allen 28 hellen Seiten
   dieselbe Sache in einer EIGENEN Fassung - Adresse, Mailzeile und
   Instagramzeile als `.fuss-mail`, mit demselben Zeichen-vor-Text-Aufbau. Die
   Beruehrflaechenregel weiter unten zaehlt `.fuss-mail`, `.meta a` und
   `.kontaktzeile a` laengst in einem Atemzug auf. Sie ist die Vorlage fuer
   den Tag, an dem der Fussbereich die gemeinsame Bauform uebernimmt statt
   seiner eigenen. */
/* Auf dunklem Grund bleibt Gelb der Traeger — ein gelber Strich unter
   gelbem Text waere keiner. Das Fett faellt trotzdem: Es war die zweite
   Auszeichnung neben der Farbe, auf Papier wie im Dunkeln. */
.kontaktzeile a{color:var(--gelb)}

/* ── 138 Partnerband ──────────────────────────────────────── */
/* Stand früher als letzter Abschnitt der Startseite. Jetzt liegt es ausserhalb
   der Ansichten und erscheint auf allen Seiten — die Sponsoren bekommen damit
   22 Seiten statt einer. Auf der Startseite sitzt es an derselben Stelle wie zuvor.
   Eigener dunkler Grund, weil es auch auf hellen Seiten steht. */
/* Bewusst ein Streifen, kein Abschnitt: eine Überschrift in Abschnittsgrösse
   stünde auf jeder Unterseite in Konkurrenz zum Seitentitel. Die Sponsoren
   bleiben auf allen Seiten, aber als Randnotiz statt als Kapitel.
   Auf der Startseite entfällt er — dort trägt der volle Partner-Abschnitt
   dieselben Logos mit Überschrift und Würdigung.
   Im Theme: footer.php gibt den Streifen nur aus, wenn nicht is_front_page(). */
body:has(#v-home.on) .partnerband{display:none}
.partnerband{background:var(--nacht);color:var(--kalk);padding:clamp(24px,3vw,32px) 0 clamp(26px,3.2vw,34px)}
.pb-kopf{margin-bottom:12px;align-items:center}
.partnerband .spt{margin:0;padding:0;border:0}
.partnerband .mehr{font-size:var(--tx-etikett)}
/* Kleinere Kacheln als auf einer eigenen Partnerseite — der Streifen soll
   nicht mehr Platz brauchen als die Anschrift darunter.

   ⚠⚠ **`min-height:64px` stand hier bis zum 22.09.2026.** Der abgeloeste
   Vermerk dazu stand zwei Abschnitte weiter oben und lautete: «Die
   Laufbandkachel traegt ihr `<img>` ohne `.f`, hat also kein Verhaeltnis,
   aus dem eine Hoehe folgen koennte. Dort steht sie weiterhin — und dort
   ist sie jetzt nicht mehr ein Ueberschreiben des Grundwerts, sondern die
   einzige Quelle.»

   **Das gilt nicht mehr, und zwar fuer beide Faelle.** Seit dem 22.09.2026
   traegt die Bandkachel `aspect-ratio:3/1` — mit Bild, damit das Logo
   randlos steht, und seit heute auch ohne, damit **alle Kacheln im Band
   gleich hoch sind**. Eine Mindesthoehe daneben waere eine zweite
   Hoehenquelle und gewaenne bei jeder Breite unter 192px Kachelbreite. */
/* **Nur noch die Breite.** Form, Verhaeltnis, Polster und Umbruch stehen
   seit dem 22.09.2026 an `.logolauf .spl` und gelten hier mit. Was den
   Streifen im Fussbereich von der Startseite unterscheidet, ist allein
   seine Groesse — und die soll ihn unterscheiden. */
.partnerband .logolauf .spl{width:158px}
/* **Das Logo fuellt die Kachel, soweit 3:1 es zulaesst — 13.09.2026.**
   Bis dahin stand hier `.partnerband .logolauf .spl img{max-height:28px}`,
   und die Kachel behielt ihren Innenabstand von 18px.

   ⚠ **Der Deckel war nie die Fessel.** Gerechnet: Kachel 158x64, padding 18
   ringsum, also Inhaltsbox 122x28 — die 28 waren die Hoehe der Box, nicht
   eine Grenze darunter. Eine 3:1-Datei wurde damit als **84x28** gezeigt,
   53% der Kachelbreite und 44% ihrer Hoehe. Mit 8/6 sind es **142x47**.

   ⚠ **`:has(img)` und nicht die Kachel allgemein.** Der Rueckfall — kein
   Bild, dafuer der Firmenname im Rahmen — braucht seinen Abstand, sonst
   steht der Text an der Kante. Er behaelt 18px.

   ⚠ **Nicht beschnitten.** `object-fit:contain` steht in `.spl img`
   und bleibt. Ein Logo, das breiter ist als die Kachel, wird
   kleiner gezeigt — ein abgeschnittener Firmenname waere schlimmer.

   ⚠ **Die Zeile bleibt ruhig.** `min-height:64px` steht unveraendert, und
   47px Bild plus 12px Abstand sind 59 — die Kachel waechst nicht.

   ── ⚠ Und das Weiss kommt zum groesseren Teil NICHT von hier ──────────

   Gemessen am 13.09.2026 an den zwoelf Dateien auf dev: **alle sind
   300x100 und damit exakt 3:1**, aber jede traegt einen weissen Rand in
   sich. Der Inhalt fuellt zwischen 26% und 69% der Dateibreite:

     CC Trading  84x69 von 300x100 — 107px weiss links, 109px rechts
     Deici       78x62 von 300x100 — 111px je Seite
     Albert Schmid 206x36 — 32px oben und unten

   **Dagegen hilft kein CSS.** Wer den Rand wegskalieren wollte,
   vergroesserte ihn mit. Die Dateien gehoeren ersetzt; das ist gemeldet
   und nicht hier zu beheben. */
/* ⚠⚠ **Hier standen `padding:6px 8px` und `max-height:52px` — abgeloest am
   22.09.2026.**

   **Der abgeloeste Vermerk steht oben und war richtig gerechnet**, aber er
   loeste dasselbe Problem ein zweites Mal statt es gemeinsam zu loesen:
   Die Sponsorenseite hat fuer Logokacheln laengst eine Regel, und das Band
   fuehrte daneben eine eigene.

   **Ursache, warum dasselbe Logo an beiden Stellen anders aussah:** Auf der
   Wand fuellt das Bild die Kachel (`width:100%;height:100%`), im Band stand
   es in seiner **natuerlichen** Groesse (`width:auto;height:auto` aus
   `.spl img`), nur gedeckelt. Gemessen auf dev an denselben Dateien:

     Wand   Kachel 310x105   Bild 308x103   = 99% / 98%
     Band   Kachel 158x64    Bild 142x47    = 90% / 74%

   Die Dateien sind dieselben, nur in einer anderen WordPress-Groesse
   (300x100 im Band, 480x160 auf der Wand) — **beide 3:1**. Ein Logo mit
   eigener Flaechenfarbe stand darum auf der Wand randlos und im Band in
   einem weissen Ring.

   > **Zwei Fassungen derselben Kachel sehen so lange gleich aus, wie
   > niemand dasselbe Logo an beide Stellen haengt.**

   `display:block` und `height:64px` statt `grid`/`place-content:center`:
   `height:100%` an einem Bild braucht einen Behaelter mit bestimmter Hoehe,
   und ein Raster mit `place-content:center` misst sich an seinem Inhalt —
   die Angabe liefe ins Leere.

   ⚠ **`:has(img)` bleibt.** Der Rueckfall ohne Bild — der Firmenname im
   Rahmen — behaelt `grid`, `place-content:center` und seine 18px. Eine
   feste Hoehe wuerde einen langen Namen abschneiden.

   ⚠ **`contain` bleibt und wird nicht `cover`.** Ein Sponsorenlogo darf
   nicht beschnitten werden. Randlos entsteht darum nicht durch Schnitt,
   sondern dadurch, dass die Kachel dasselbe Verhaeltnis hat wie die Datei
   — siehe die naechste Zeile.

   ⚠⚠ **Hier stand bis zum 22.09.2026 `height:64px`, und dazu der Satz:**

   > «Die Kachel misst 158x64 und damit 2.47:1, die Dateien 3:1: Das Bild
   > fuellt die Breite ganz und laesst oben und unten je rund 6px. Randlos
   > in beide Richtungen ginge nur mit Schnitt oder mit einer 3:1-Kachel —
   > und die Kachelgroesse im Band bleibt, wie sie ist.»

   **Der letzte Halbsatz war eine Vorgabe und keine Eigenschaft.** Didi hat
   sie am 22.09.2026 fallen lassen: Die Kachel nimmt das Verhaeltnis der
   Dateien an und wird dafuer niedriger — 158x52.67 statt 158x64, bei 700px
   und schmaler 136x45.33.

   > **Wer ein Bild randlos will, gibt der Flaeche das Verhaeltnis des
   > Bildes.** Jede andere Loesung schneidet oder verzerrt.

   `aspect-ratio` und nicht eine gerechnete Hoehe: Die Kachelbreite steht an
   zwei Stellen (158px, unter 700px 136px), eine Hoehe in Pixeln muesste an
   beiden nachgezogen werden. `min-height:0` ist noetig, weil die 64px eine
   Zeile hoeher sonst gewinnen — sie sind die **einzige** Hoehenquelle des
   Rueckfalls und bleiben dort darum stehen. */
/* Der `:has(img)`-Fall steht seit dem 22.09.2026 an `.logolauf .spl`. */
@media(max-width:700px){.partnerband .logolauf .spl{width:136px}}

/* ── 140 Fussbereich ──────────────────────────────────────── */
/* Der Fussbereich wiederholt nicht die Navigation — der Kopf klebt und ist
   immer da. Er sagt, wer wir sind, wo wir sind und wem wir angehoeren.

   ── Aufgeraeumt am 24.09.2026 — inhaltlich gleich, im Bau anders ──────

   **Bewusste Abweichung vom bisherigen Stand**, von Didi so bestellt. Der
   Fuss zeigt Zeichen fuer Zeichen dieselben Angaben wie gestern; geaendert
   ist seine Form. Die abgeloesten Saetze stehen jeweils **bei ihrer Regel**
   und nicht hier — dort liest sie, wer die Regel anfasst.

   Vier Entscheide tragen den Umbau:

   1. **Zwei Linien, mehr nicht** — der gelbe Balken an `.fuss`, die feine
      Trennlinie an `.fu`. Beide sitzen in Regeln, die zugleich Grund,
      Polsterung und Aufbau tragen: **Wer die Linie behalten will, laesst
      die ZEILE stehen, nicht die Regel.**
   2. **Eine Linkform** statt dreier: Textfarbe im Ruhezustand, Gelb beim
      Ueberfahren und bei Tastaturfokus, kein Unterstrich. Die Symbole
      bleiben gelb, `.mehr` bleibt der einzige gelbe Verweis.
   3. **Die drei Spalten sind so breit wie die Trennlinie darunter.**
   4. **Die Auszeichnung zeigt ihre Farben** und wird kleiner.

   **Alle Groessenangaben fuer Text kommen aus `--tx-klein` und
   `--tx-etikett`.** Die Zahlen, die hier in Pixeln stehen, sind Masse von
   Flaechen (Wappen, Auszeichnung, Polster) und keine Schriftgroessen — mit
   der einen dokumentierten Ausnahme `.fm`, die weiter unten begruendet ist. */

.fuss{background:var(--stein);color:var(--halb);border-top:4px solid var(--gelb);padding:54px 0 22px;font-size:var(--tx-klein)}

/* ── Eine Linkform fuer den Fuss und das Einwilligungsbanner ─────────
   ⚠⚠ **Hier standen bis zum 24.09.2026 drei Formen nebeneinander**, und
   keine sah aus wie die andere: die Rechtsverweise mit einer Linie in
   `rgba(252,222,0,.45)`, `.fuss-mail` in Weiss mit einer staerkeren Linie
   in `rgba(252,222,0,.55)`, und `.mehr` mit gelber Schrift. Der Satz, der
   die erste begruendete, lautete:

   > «Die Rechtszeile im Fuss lautet «© 2026 FC Herrliberg · Impressum ·
   > Datenschutz» - und die zwei Verweise trugen bis zum 26.08.2026 exakt
   > die Farbe des Textes daneben, dieselbe Groesse, dieselbe Schrift. Es
   > gab im Ruhezustand kein Merkmal, das sie von «© 2026 FC Herrliberg»
   > unterschied; erst der Zeiger machte sie sichtbar, und den gibt es auf
   > dem Handy nicht.»

   **Die Beobachtung stimmt, die Antwort war die falsche.** Auf «ohne
   Zeiger» antwortet der Tastaturfokus und nicht ein Strich — und der fehlte
   der alten Fassung ganz. Didi hat am 24.09.2026 beides entschieden: keine
   Unterstriche, und Gelb **beim Ueberfahren UND bei Tastaturfokus**.

   ⚠ `:not(.mehr)` ist Pflicht und keine Vorsicht: `.fuss a` wiegt (0,1,1)
   und naehme `.mehr` mit (0,1,0) die gelbe Schrift aus der Hand. **Die
   Regel, die eine Ausnahme schuetzen soll, ist genau die, die sie sonst
   zerstoert.**

   ── Vier Traeger seit dem 25.09.2026, nicht mehr nur der Fuss ────────

   ⚠ ~~«Eine Linkform fuer den ganzen Fuss»~~ hiess die Ueberschrift bis
   zum 25.09.2026. **Die zwei Regeln sind nicht mehr eine Sache des
   Fusses, sondern die leise Linkform des Hauses auf dunklem Grund.** Sie
   tragen jetzt:

       .fuss a:not(.mehr)                       die Verweise im Fuss
       .fu-tx button                            «Cookie-Einstellungen»
       #cmplz-cookiebanner-container a          die Verweise im Banner
       … .cmplz-view-preferences                «Einstellungen ansehen»

   **Der Schalter in der Rechtszeile ist ein `button` und kein `a`** —
   `footer.php` begruendet dort, warum: Das Glied fuehrt nirgendwohin, es
   schaltet etwas. `.fuss a` hat ihn darum nie erreicht, und er stand als
   grauer Systemknopf zwischen zwei Textverweisen. `.fu-tx button` ist
   eindeutig; in der Rechtszeile gibt es keinen zweiten Knopf.

   **Das Banner steht AUSSERHALB von `.fuss`** — Complianz haengt es als
   letztes Kind an den `body`, hinter den Fussbereich; dorthin reicht kein
   `.fuss`-Waehler. Ein Nachbau der zwei Deklarationen im Bannerabschnitt
   waere die vierte Fassung derselben Aussage gewesen, und wie teuer das
   ist, steht drei Absaetze weiter oben. **Darum ein zusaetzlicher Waehler
   und keine zweite Regel.**

   ⚠ **Im Banner traegt die ID das Gewicht und nicht die Klasse.**
   Complianz laedt sein Blatt NACH `style.css` und faerbt die
   Bannerverweise mit `.cmplz-cookiebanner .cmplz-links .cmplz-link`
   (0,3,0); bei gleichem Gewicht gewaenne das spaetere Blatt.
   `#cmplz-cookiebanner-container a` wiegt (1,0,1). Die ganze Rechnung
   steht im Abschnitt 142.

   ⚠ **Kein `:not(.mehr)` bei den drei neuen Waehlern.** Die Ausnahme
   schuetzt den einen gelben Verweis des Hauses, und den gibt es weder am
   Schalter noch im Banner. */
.fuss a:not(.mehr),.fu-tx button,
#cmplz-cookiebanner-container a,
#cmplz-cookiebanner-container .cmplz-view-preferences{color:inherit}
.fuss a:not(.mehr):hover,.fuss a:not(.mehr):focus-visible,
.fu-tx button:hover,.fu-tx button:focus-visible,
#cmplz-cookiebanner-container a:hover,#cmplz-cookiebanner-container a:focus-visible,
#cmplz-cookiebanner-container .cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-view-preferences:focus-visible{color:var(--gelb)}
/* **Die Symbole bleiben gelb** — sie sind im Ruhezustand das einzige
   Merkmal, das eine Kontaktzeile von einer Textzeile unterscheidet. Ihre
   eigene Farbe ueberlebt den Wechsel beim Ueberfahren, weil sie gesetzt ist
   und nicht geerbt.

   **Eine Regel statt zweier:** ~~`.fuss-mail .ic`~~ und ~~`.fuss-dok .ic`~~
   standen mit Zeichen fuer Zeichen derselben Erklaerung getrennt da. */
.fuss .ic{width:16px;height:16px;color:var(--gelb);margin:0;flex:0 0 auto}

/* ── Das Raster: drei Spalten, so breit wie die Trennlinie ────────────
   Marke, Kontakt, Auszeichnung. Zweispaltig wurden die beiden Bloecke auf
   2560px um 1200px auseinandergezogen — mit drei Spalten fuellt derselbe
   Inhalt die Breite und braucht dabei sogar weniger Hoehe.

   **Eine Spalte unter 760px und nicht zwei, weil die zweite sonst tot
   dasteht.** Der Wert hier gilt ausschliesslich darunter; die Medienzeile
   gleich dahinter setzt drei.

   ⚠⚠ **Hier stand bis zum 24.09.2026 `max-width:1000px`**, mit diesem Satz:

   > «Die Blöcke stehen zusammen statt über die ganze Breite verteilt: Leere
   > zwischen Inhalten wirkt als Lücke, Leere am Rand als Weissraum.»

   **Der Satz ist richtig, nur stand die Leere nicht am Rand.** `.fu` traegt
   die Grenze nicht und hat sie nie getragen — die Trennlinie lief also
   weiter nach rechts als die Spalten darueber. Gemessen im Rahmen fester
   Breite, jeweils der Abstand zwischen der rechten Kante von `.fg` und der
   rechten Kante von `.fu`: **193px bei 1280, 536px bei 1920**, 736px bei
   3440 (42,4 % der Zeile). **Das war Leere neben einer Linie und damit
   genau die Luecke, die der Satz vermeiden wollte.** Didi hat sie am
   24.09.2026 benannt: «keine leere rechte Haelfte».

   `justify-content:space-between` haelt die erste Spalte an der linken und
   die dritte an der rechten Kante der Trennlinie. **`gap` ist damit ein
   Mindestabstand und kein Abstand** — verteilt wird der Rest.

   ⚠ ~~`.fuss-marke{grid-column:1 / -1}`~~ und ~~`.fuss-marke{grid-column:auto}`~~
   sind entfallen. In einem Raster mit EINER Spalte ist `1 / -1` dasselbe wie
   `auto`, und die zweite Regel nahm die erste nur wieder zurueck. **Zwei
   Regeln, die zusammen nichts taten.** */
.fg{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media(min-width:760px){
  /* align-items:start ist noetig — sonst dehnt das Raster die Spalten auf
     gleiche Hoehe, der Markenblock zentriert sich darin und beginnt 43px
     tiefer als Adresse und Auszeichnung. Die Spalten fluchten dann nicht. */
  .fg{grid-template-columns:auto auto auto;justify-content:space-between;
      align-items:start;gap:44px}
}

/* ── Links: Wappen, Name, Slogan ─────────────────────────────────────
   Drei Geschwister seit dem 24.09.2026 (`footer.php`) — der namenlose
   `<div>` zwischen Wappen und Name ist weg. Das Raster stellt sie: Wappen
   links ueber beide Zeilen, Name oben rechts, Slogan darunter.

   ~~`display:flex;align-items:center;gap:14px`~~ legte alle drei in EINE
   Reihe. Mit dem alten `<div>` fiel das nicht auf, weil er Name und Slogan
   zusammenhielt; ohne ihn stuende der Slogan neben dem Namen statt darunter.
   **Ein Flexkasten kann zwei Geschwister nicht stapeln, ein Raster schon.**

   **Der Name bricht von selbst auf zwei Zeilen** (`width:min-content`).
   Didis «Name (zweizeilig)» am Computer und «einzeilig» am Handy sind zwei
   Umbrueche fuer denselben Text — ein `<br>` koennte nur einen davon, und
   darum steht keiner im Markup. `min-content` bricht an der Wortfuge und
   braucht dafuer **keine Pixelzahl**; das Handy nimmt den Umbruch mit
   `white-space:nowrap` zurueck, und `min-content` ist dann von selbst die
   ganze Zeile. */
.fuss-marke{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;column-gap:14px}
/* **78px bleibt — «Groesse wie heute», so hat Didi es am 24.09.2026
   ausdruecklich stehen lassen.**

   ⚠ Die Zahl hatte bis dahin eine Begruendung, die jetzt nicht mehr traegt:

   > «78px, damit Wappen und Auszeichnung gleich hoch stehen» (angeglichen
   > am 26.08.2026, vorher 74).

   Die Auszeichnung steht seit dem 24.09.2026 auf 64px. **Eine Gleichheit,
   von der eine Seite weggezogen wurde, ist keine mehr** — die Zahl bleibt
   trotzdem, weil sie jetzt eine Vorgabe ist und keine Ableitung.

   ⚠⚠ **Vier Ruecksetzungen sind entfallen**
   (`position:static;transform:none;filter:none;flex:none`), samt ihrem Satz:

   > «Eigene Grösse: .crest erbt sonst die Kopfregeln und wächst von 42 auf
   > 118px.»

   **Die Groesse erbt er, die Kopfregeln nicht.** Position, Drehung, Schatten
   und der schlichte Rueckfall haengen alle an `.logo .crest`, und der Fuss
   hat kein `.logo` — geerbt wird allein `.crest{width:46px;height:46px;
   background:no-repeat center/contain;background-image:var(--wappen)}`, und
   die Breite darunter ueberschreibt sie. Nachgemessen bei 390/760/1280 vor
   der Aenderung: `position:static`, `transform:none`, `filter:none` — **die
   Ruecksetzungen setzten zurueck, was ohnehin dort stand.** `flex:none` ist
   zusaetzlich gegenstandslos, seit `.fuss-marke` ein Raster ist.

   `grid-row:1 / span 2` legt das Wappen neben Name UND Slogan. Fehlt der
   Slogan, bleibt die zweite Zeile leer und hoch 0 — der Kasten steht dann
   genau so da wie mit `grid-row:auto`. */
.fuss-marke .crest{width:78px;height:78px;grid-row:1 / span 2}
/* Die Wortmarke im Fuss. 19px ist keine Textgroesse, sondern die Groesse
   dieses einen Schriftzugs — er steht fuer das Wappen, das daneben fehlt.
   Einzelfall mit Absicht, gehoert auf keine Leiter. */
.fm{font-family:var(--d);font-variation-settings:'wdth' 108;font-weight:800;font-size:19px;
  letter-spacing:-.03em;text-transform:uppercase;color:#fff;line-height:1;width:min-content}
.fc{font-family:var(--b);font-style:italic;color:var(--gelb);font-size:var(--tx-klein);margin:7px 0 0;line-height:1.35}

/* ── Mitte: Kontakt, Anschrift, Mail, Instagram ──────────────────────
   **Die erste Textzeile fluchtet, nicht der Kasten.** Die drei Spalten
   begannen bei 1440 alle bei derselben Kastenkante - die erste sichtbare
   Textzeile aber bei +4, +23 und +88. Im Bild sah das aus wie ein
   Rasterfehler und war keiner: `align-items:start` tut, was es soll.

   **Die Ursache lag nicht in der Zeilenhoehe, sondern im Aussenabstand.**
   Von den 19 Bildpunkten Unterschied zwischen Marke und Kontaktspalte kommen
   3 aus der Zeilenhoehe (22,4px bei 14px gegen 19px bei 19px) und **16 aus
   `margin-top:20px` am ersten `<p>`** - ein Absatz, der als erstes Kind einer
   Spalte steht, bringt seinen Aussenabstand mit, und niemand hat ihn dort
   bestellt.

   **Der Leser sieht Text, keine Kaesten**, und darum fluchtet jetzt der Text.
   Die Auszeichnung rechts bleibt am BILD ausgerichtet: Ein Bild, das 84
   Bildpunkte hoeher begaenne als alles andere, waere das Auffaelligste im
   Fuss.

   ⚠ **`.fuss-adresse` bekommt bewusst keine eigene Regel.** Die Klasse ist
   seit dem 24.09.2026 im Markup, weil die Anschrift dort auf EINER Zeile
   steht und einen Griff braucht — sie beschreibt aber keine Eigenschaft,
   die hier zu setzen waere: Als Absatz in dieser Spalte bekommt sie ihren
   Abstand aus `p+p` wie die Zeilen darueber und darunter. **Eine leere Regel
   waere kein Nachweis, sondern Zierrat.**
   ⚠ ~~«wie die Zeilen darueber und darunter»~~ stimmt seit dem 25.09.2026 nur
   noch nach oben: Die zwei Verweisabsaetze darunter stehen auf `margin-top:0`
   (siehe den Block unter `p+p`). **Die Klasse bleibt trotzdem ohne eigene
   Regel** — geaendert hat sich der Abstand ihrer Nachbarn, nicht ihrer.

   ⚠ ~~`.fuss p:has(.fuss-mail)+p:has(.fuss-mail){margin-top:2px}`~~ ist
   entfallen, mit dem Satz «Mail und Instagram gehören zusammen — sie stehen
   enger als die Absätze sonst». **Sie standen nicht enger:** `.fuss-kontakt
   p+p` setzt genau dieselben 2px fuer jeden Absatz der Spalte. Die Regel
   wog (0,3,2) gegen (0,1,2) und gewann — mit demselben Wert. */
.fuss-kontakt > p:first-of-type{margin-top:1px}
.fuss-kontakt p+p{margin-top:2px}
/* ── ⚠⚠ DIE DREI KONTAKTZEILEN STEHEN ENG — Didi, 25.09.2026 ──────────
   «Adresse, E-Mail, Instagram, alle Breiten: die drei Zeilen eng und
   gleichmaessig untereinander, normaler Zeilenabstand des Fliesstexts,
   derselbe Abstand zwischen allen drei.»

   **Gleich behandelt wurden sie vorher nicht, und das Markup sagt warum.**
   `footer.php` setzt vier Geschwister in `.fuss-kontakt`: `<p>` mit
   `a.mehr`, `p.fuss-adresse`, und zweimal `<p>` mit `a.fuss-mail` (Mail und
   Instagram — der Name nennt nur die halbe Sache, siehe unten). Die Adresse
   ist Text, die beiden anderen sind Verweise. **Unter 768px bekamen die zwei
   Verweise eine Beruehrflaeche von 44px und die Adresse keine** — drei
   Zeilen, von denen eine halb so hoch stand wie ihre Nachbarn. `p+p` gab
   allen dieselben 2px Aussenabstand; ungleich war nicht der Abstand, sondern
   die Zeilenhoehe.

   **Darum greift diese Zeile an den Verweisabsaetzen und nicht an allen
   vieren.** `margin-top:0` laesst die drei genau im Zeilenabstand des
   Fliesstexts stehen. Der Absatz mit «Kontakt aufnehmen →» behaelt seine 2px
   zur Adresse: Didi laesst ihn ausdruecklich «mit seinem Abstand darueber»
   stehen, und er ist der einzige der vier, der nicht zur Anschrift gehoert.

   ⚠ **`:has(> .fuss-mail)` und nicht `.fuss-adresse+p+p`.** Fehlt die
   Anschrift — alle drei Ortsfelder leer, `footer.php` laesst den Absatz dann
   weg —, zaehlt eine Stellungsregel falsch. Der Waehler fragt, was drin
   steht, und das aendert sich mit dem Inhalt nicht.

   ⚠ Am 24.09.2026 ist hier ~~`.fuss p:has(.fuss-mail)+p:has(.fuss-mail)
   {margin-top:2px}`~~ entfallen, weil sie denselben Wert setzte wie `p+p`.
   **Diese Zeile ist nicht ihre Rueckkehr:** Sie setzt einen anderen Wert,
   und sie trifft beide Verweisabsaetze statt nur den zweiten. */
.fuss-kontakt p:has(> .fuss-mail){margin-top:0}
/* Der Verweis traegt sein Symbol vor dem Text; `inline-flex` und `gap`
   halten beide auf einer Grundlinie.

   **Der Name nennt nur die halbe Sache, und er bleibt trotzdem.**
   `.fuss-mail` traegt beides: den Mailverweis und den Instagramverweis. Wer
   nach «wo steht der Instagramverweis» sucht, findet ihn ueber den Namen
   nicht.

   **Die Umbenennung nach `.fuss-kontakt` wurde am 26.08.2026 gebaut und
   wieder zurueckgenommen: Den Namen gab es schon.** `.fuss-kontakt` ist der
   Behaelter der Kontaktspalte im Fuss, mit eigener Regel `p+p{margin-top:2px}`.
   Die Umbenennung legte Verweis und Behaelter aufeinander, der Verweis bekam
   `display:inline-flex` an einen Block - und der Fussbereich lief bei 320 um
   142px ueber. **Gemeldet hat es der Pruefstand als P0, nicht das Auge.**

   Dasselbe war am 25.08. schon einmal passiert, mit `.tore` gegen das
   Kachelraster. Die Projektregel dazu steht seither fest und wurde hier
   wieder nicht befolgt: **Ein Klassenname wird vor dem Gebrauch gesucht, auch
   wenn er neu erfunden aussieht.** Gezaehlt hatte ich die alten Stellen, nicht
   die neuen.

   ⚠⚠ **Drei Angaben sind am 24.09.2026 entfallen:** `color:#fff`,
   `border-bottom:1px solid rgba(252,222,0,.55)` und `padding-bottom:2px`,
   dazu die Regel `@media(hover:hover){.fuss-mail:hover{border-bottom-color:
   var(--gelb)}}`. Die Farbe faellt, weil Didi «Farbe wie der umgebende Text»
   verlangt; die Linie faellt mit allen anderen Unterstrichen. **Weiss war
   ausserdem das lauteste im Fuss: heller als der Vereinsname daneben es
   noetig hat, an einer Adresse, die niemand sucht.** */
/* ── ⚠⚠ DIE TIPPFLAECHE IST 24PX UND KOSTET 1,6 — Didi, 25.09.2026 ─────
   «Tippflaeche je Link mindestens 24 px hoch statt 44 — ohne sichtbaren
   Zusatzabstand.»

   **Die 44 waren gebaut und begruendet, nicht versehentlich.** Sie standen
   unter «148 Beruehrflaechen auf dem Handy» und gelten dort weiter:

   > ~~`:not(p) > .mehr,… ,.fuss-mail,.meta a,.kontaktzeile a{min-height:44px;
   > box-sizing:border-box}`~~ — `.fuss-mail` ist aus der Sammelliste
   > herausgenommen.
   > ~~`.fuss-mail{padding-block:11px}`~~ — ganz entfallen.

   **44 bleibt die Beruehrflaeche des Hauses**, auch im Fuss: `.fuss .mehr`
   dreissig Zeilen weiter oben in derselben Klammer traegt sie weiter, und
   «Kontakt aufnehmen →» ist genau der Verweis, den Didi ausdruecklich so
   stehen laesst. Heruntergesetzt sind die zwei Kontaktzeilen und sonst
   nichts.

   ⚠⚠ **«Ohne sichtbaren Zusatzabstand» ist die eigentliche Aufgabe, und sie
   entscheidet sich an der Frage, WOHER die Hoehe kommt.**

   `padding-block:11px` schiebt: Das Polster liegt im Fluss, der Absatz wird
   22px hoeher, die Nachbarzeile rueckt weg. `min-height` an einem
   `inline-flex` schiebt fast nicht — die Zeile ist bei `--tx-klein` (14px)
   und Zeilenhoehe 1,6 schon **22,4px** hoch, auf 24 fehlen **1,6px**. Und
   `align-items:center` legt sie je zur Haelfte ueber und unter den Text,
   statt sie vorne anzuhaengen. **Der Zeilenrhythmus bleibt damit der des
   Fliesstexts; was waechst, sind 0,8px an jedem Ende.**

   ⚠ **Ein Polster von 0,8px mit `margin-block:-0,8px` waere genauer und ist
   trotzdem nicht gebaut.** Es truege den Abstand auf exakt null zurueck —
   und liesse die Tippflaechen von Mail und Instagram um 1,6px
   ueberlappen. Zwei Ziele koennen auf 44,8px nicht je 24px allein haben;
   entweder ruecken sie auseinander oder sie teilen. **Der Fuss hat sich
   dieselbe Frage bei `.person-tel` schon einmal gestellt und dort gegen die
   Ueberlappung entschieden** («dort trifft ein Tippen die falsche Zeile»).
   1,6px im ganzen Block ist der billigere Preis.

   ⚠ **`min-height` wirkt nur, weil `.fuss-mail` `inline-flex` ist.** An
   einem reinen Inline-Element waere sie wirkungslos, und die Zeile saehe
   fertig aus. Wer das `display` je aendert, nimmt die Tippflaeche mit.

   **Was `inline-flex`, `gap` und der Klassenname bedeuten, steht im
   Kommentarblock darueber** — er ist aelter als diese Zeilen und behaelt
   seinen Platz. */
.fuss-mail{display:inline-flex;align-items:center;gap:8px;min-height:24px}
/* **Die Dokumente des Fussbereichs — 21.09.2026.**

   Die Liste kommt aus derselben Ausgabe wie der Organigrammkasten
   (`inc/dokumente.php`), die Huelle nicht: `.info` ist eine helle Karte mit
   gelber Kante, der Fuss ist dunkel. Uebernommen sind darum genau die zwei
   Masse, die die Liste ausmachen - `.info ul{list-style:none;display:grid;
   gap:8px}` und `.info ul+p{margin-top:7px}`.

   **`margin:0` am `<ul>` ist keine Bequemlichkeit.** Der Browser gibt einer
   Liste `margin-block:1em`; im Raster der drei Fussspalten schoebe das die
   Kontaktspalte 16px tiefer als die Marke daneben - genau der Bruch, den die
   Regel `.fuss-kontakt > p:first-of-type` darueber gerade behoben hat.

   ~~«Der Verweis selbst bringt seine Unterstreichung aus `.fuss
   a:not(.mehr):not(.fuss-mail)` mit; hier steht nur, was das Symbol daneben
   braucht.»~~ — galt bis zum 24.09.2026. **Es gibt keine Unterstreichung
   mehr**, und das Symbol bekommt seine Masse aus `.fuss .ic` weiter oben. */
.fuss-dok{margin-top:14px}
.fuss-dok ul{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.fuss-dok ul+p{margin-top:7px;font-size:var(--tx-etikett)}
.fuss-dok a{display:inline-flex;align-items:center;gap:8px}

/* ── Rechts: die Auszeichnungen ──────────────────────────────────────
   Ab 760px die dritte Spalte, rechtsbuendig und mit der Trennlinie darunter
   buendig abschliessend. Unter 760px eine eigene schmale Zeile unter der
   Anschrift — beides am Ende dieses Abschnitts.

   Jede Auszeichnung steht seit dem 24.09.2026 in einem eigenen
   `figure.fuss-aus-block` (`footer.php`). **Aussen die Spalte, innen die
   Wendung:** am Computer die Beschriftung unter dem Bild, am Handy daneben —
   ein Raster im Kasten statt eines zweiten Rasters ueber alle Kaesten.

   ⚠⚠ **`.fuss-rechts > .fuss-aus,.fuss-rechts > a{grid-column:1}` ist
   entfallen.** Nach der Markupaenderung griff sie ohnehin nicht mehr — das
   Bild ist kein Kind von `.fuss-rechts` mehr, sondern eines des `figure`.
   Ihr Grund war aber schon vorher eine Versicherung gegen ein Problem, das
   der Kasten gar nicht erst hat:

   > «Das `grid-column:1` an Bild und Bildverweis ist die Versicherung fuer
   > den Fall, dass eine Auszeichnung keine Beschriftung hat: ohne sie
   > ruecken alle folgenden um eine Zelle, und aus der Reihe wird ein
   > Treppenmuster.»

   Ein `figure` je Auszeichnung kann nicht verrutschen, weil ihm nichts
   fehlt — **es fehlt hoechstens IN ihm.**

   `gap:18px` zwischen mehreren Auszeichnungen ist kein neues Mass, sondern
   dasselbe, mit dem `.fg` seine Bloecke untereinander trennt. */
.fuss-rechts{display:grid;gap:18px;justify-items:end;align-content:start;justify-self:end}
.fuss-aus-block{margin:0;display:grid;justify-items:end}
/* Auszeichnung des Verbands statt eines blossen Mitgliedszeichens — sie sagt
   etwas, und das FVRZ-Logo steckt darin. Der Alternativtext nennt den Verband
   vollstaendig; im Bild steht er selbst, sein Signet unten links.

   ⚠⚠ **64px seit dem 24.09.2026, vorher 78.** Der alte Wert stand mit
   dieser Rechnung da:

   > «78px statt 120: damit schliesst der Block mit Bild und Bildunterschrift
   > genau so hoch ab wie der Adressblock daneben — beide 103px.»

   **Beide Seiten dieser Gleichung haben sich bewegt.** Der Adressblock ist
   seit dem 24.09.2026 eine Zeile kuerzer (die Anschrift steht auf einer
   Zeile statt auf zweien), und die Beschriftung ist am Handy neben das Bild
   gerueckt statt darunter. Didi hat dafuer Zahlen gesetzt: **64px am
   Computer, 48px am Handy.**

   ⚠⚠ **`filter:grayscale(1) contrast(.85) brightness(.95)` und
   `opacity:.85` sind ersatzlos entfallen**, samt ihrer Begruendung:

   > «Entsättigt und leicht gedämpft: der Fussbereich ist der ruhigste Teil
   > der Seite, und die Auszeichnung ist dort sonst die einzige mehrfarbige
   > Fläche. Sie bleibt erkennbar, ohne die Wortmarke zu überstimmen. Kein
   > Zeigerzustand — sie ist kein Verweis, und auf dem Touchscreen sähe
   > niemand je die Farbe.»

   **Das Bild ist farbig** — gruener Grund, roter Pfeil, blaues Signet —, und
   das Stylesheet hat diese Entscheidung des Verbands ueberstimmt. Didi am
   24.09.2026: «Wird das Bild per CSS entsaettigt oder abgedunkelt:
   entfernen.» Der letzte Halbsatz der alten Begruendung erklaert, warum es
   so lange stehenblieb: **Niemand sah je, was fehlte.** */
.fuss-aus{width:64px;height:auto;display:block}
.fuss-aus-tx{font-size:var(--tx-etikett);line-height:1.35;margin:9px 0 0;text-align:right}

/* ── Die Rechtszeile ─────────────────────────────────────────────────
   Eine Zeile links: als zwei Bloecke an den Raendern klaffte auch sie auf
   breiten Bildschirmen um ueber 1100px auseinander.

   ⚠ ~~`display:flex;flex-wrap:wrap;gap:9px 14px`~~ ist am 24.09.2026
   entfallen. Der Kasten hat nur noch EIN Kind — `span.fu-tx` haelt «© 2026
   FC Herrliberg · Impressum · Datenschutz» zusammen —, und ein Flexkasten
   mit einem Kind ordnet nichts an: `gap` hatte nichts zu trennen und
   `flex-wrap` nichts umzubrechen. **Umgebrochen wird im Span, und das tut
   Text von selbst.**

   ⚠ ~~«`.fu-tx` bekommt bewusst keine eigene Regel, aus demselben Grund
   wie `.fuss-adresse` weiter oben: Der Name ist ein Griff fuer das Markup
   und sagt, wer die Zeile zusammenhaelt — er verlangt keine
   Eigenschaft.»~~ — der Satz galt bis zum 25.09.2026. **Seit dem
   Trennpunkt verlangt der Name zwei Eigenschaften**: Er traegt das
   `word-spacing`, das die Luecke fuer den Punkt aufmacht, und er ist der
   Anker, an dem `> * + *` das erste Glied von den uebrigen unterscheidet.
   Der Block dazu steht unter dieser Regel. **Der Griff ist derselbe
   geblieben — er haelt jetzt etwas.**

   Die Rechtsverweise darin tragen seit dem 24.09.2026 keine Unterstreichung
   mehr; sie liegen unter derselben Linkform wie alles andere im Fuss. Ihre
   Beruehrflaeche von 44px steht weiterhin in Abschnitt 148 (`.fu a
   {padding-block:15px}`) — **dort, weil sie eine Anforderung des
   Touchscreens ist und keine des Fusses.**

   ⚠ **Die 44px gelten seit dem 25.09.2026 nur noch von 620px an.** Didi:
   «Tippflaeche der Links mindestens 24 px ohne sichtbaren Zusatzabstand —
   wie beim Kontaktblock.» Unter 620px traegt die Flaeche darum eine
   `min-height` an einem `inline-flex` statt eines Polsters — dieselbe
   Bauform wie `.fuss-mail` im Kontaktblock, mit derselben Begruendung.
   **Der Satz darueber bleibt richtig, wo er gilt:** Die Beruehrflaeche ist
   eine Anforderung des Touchscreens und steht weiter in Abschnitt 148 —
   dort jetzt mit einer Bedingung. Die Rechnung steht im Handyabschnitt
   «Die Rechtszeile in zwei Zeilen».

   ── `overflow-x:clip` an `.fu`, und beide Achsen sind gewaehlt ───────

   **Der Trennpunkt steht links AUSSERHALB seines Gliedes** (die Rechnung im
   Block darunter). Faellt ein Glied an den Zeilenanfang, zeichnet der
   Browser den Punkt in den Bereich links der Spalte — in den Seitenrand,
   ohne Bezug zu irgendetwas. `overflow-x:clip` schneidet ihn dort weg.

   ⚠ **Es muss `.fu` sein und nicht `.fu-tx`.** `overflow` wirkt an einem
   `display:inline`-Element nicht, und `.fu-tx` ist eines — **es soll auch
   eines bleiben**: Als Block- oder Flexkasten zoege es die Beruehrflaeche
   aus Abschnitt 148 in die Zeilenhoehe, die Rechnung dazu steht dort und
   noch einmal im Block unter dieser Regel.

   ⚠ **Der zweite Halbsatz gilt seit dem 25.09.2026 nur noch von 620px an
   aufwaerts** (~~«es soll auch eines bleiben»~~ ohne Einschraenkung galt
   wenige Stunden desselben Tages). Unter 620px IST `.fu-tx` ein Flexkasten —
   und die Beruehrflaeche kostet dort trotzdem nichts, **weil die
   Flexelemente `.fu-c` und `.fu-l` sind und nicht die Verweise.** Die
   Rechnung steht im Handyabschnitt «Die Rechtszeile in zwei Zeilen».
   **Dass `overflow` an `.fu` haengt, aendert das nicht:** Es muesste sonst
   auf einer Breite hier und auf der anderen dort stehen.

   ⚠ ~~«und die Beruehrflaeche kostet dort trotzdem nichts»~~ — der Halbsatz
   galt am 25.09.2026 fuer wenige Stunden. **Sie kostet unter 620px jetzt
   1,6px**, und zwar auf Bestellung: Didi hat am selben Tag die
   `min-height`-Bauform des Kontaktblocks auch fuer die Rechtsverweise
   verlangt. **Der Rest des Absatzes bleibt richtig** — Flexelemente sind
   weiterhin `.fu-c` und `.fu-l`, und genau darum kostet die Flaeche 1,6px
   und nicht 30.

   ⚠⚠ **`overflow-y:visible` steht ausdruecklich da, und `clip` ist der
   einzige Wert, der das zulaesst.** Steht eine Achse auf `hidden`, rechnet
   die andere ihr `visible` zu `auto` um — die Zeile bekaeme einen
   senkrechten Rollbereich und schnitte oben und unten ab. **Genau dort ragt
   etwas heraus:** `.fu a,.fu-tx button{padding-block:15px}` (Abschnitt 148)
   legt die Beruehrflaeche von 44px als Polster an ein Inline-Element, und
   Polster vergroessert an einem Inline-Element die Zeilenhoehe nicht — es
   steht ueber den Kasten hinaus. **Mit `hidden` waeren Zeigerflaeche und
   Fokusring abgeschnitten, und die Zeile saehe dabei unveraendert aus.**

   ⚠ **Senkrecht ragt unter 620px seit dem 25.09.2026 nichts mehr heraus** —
   das Polster ist dort einer `min-height` gewichen. `overflow-y:visible`
   bleibt stehen und bleibt begruendet: Von 620px an ragt das Polster weiter
   heraus, und **waagrecht ragt der Trennpunkt auf JEDER Breite heraus.**
   Weggefallen ist ein Grund von zwei, nicht der Grund. */
.fu{margin-top:34px;padding-top:18px;border-top:1px solid var(--linie);font-size:var(--tx-klein);
  overflow-x:clip;overflow-y:visible}

/* ── Der Trennpunkt haengt nicht — 25.09.2026 ──────────────────────
   Didi: «‹© 2026 FC Herrliberg · Impressum · Datenschutz ·
   Cookie-Einstellungen›: Der Trennpunkt gehoert zum nachfolgenden Eintrag,
   nie ans Zeilenende. Bricht die Zeile um, beginnt die neue Zeile mit dem
   Eintrag selbst — ohne fuehrenden Punkt, ohne haengenden am Ende. Gilt auf
   allen Breiten.»

   **Zwei Forderungen in einem Satz, und ein Textzeichen erfuellt hoechstens
   eine.** Der Punkt stand bis heute im Markup, mit Leerraum auf beiden
   Seiten; damit gab es eine Umbruchgelegenheit vor ihm und eine nach ihm.
   Die erste ist die gewollte, **die zweite ist der haengende Punkt**. Im
   Fliesstext verschwindet beim Umbruch nur Leerraum — ein Zeichen bleibt
   stehen, wo es steht.

   **Darum ist der Punkt kein Inhalt mehr, sondern eine Auskunft ueber die
   Fuge.** Er kommt als `::before` an jedes Glied ausser dem ersten und wird
   absolut in die Luecke links davor gestellt:

   - `right:100%` misst an der Breite des Gliedes selbst und legt die rechte
     Kante des Pseudoelements damit genau an dessen linke — **unabhaengig
     davon, wie breit das Glied ist.** Kein Glied braucht eine eigene Zahl.
   - Absolut gesetzt belegt der Punkt keine Zeilenbreite und ist darum keine
     Umbruchgelegenheit. **Der Umbruch faellt in das Leerzeichen, und ein
     Leerzeichen am Zeilenende verschwindet.** Es bleibt kein haengender
     Punkt — und die neue Zeile beginnt mit dem Eintrag: Sein Punkt ist zwar
     da, steht aber links ausserhalb der Spalte und wird von `.fu`
     weggeschnitten (die Begruendung steht dort).

   ⚠ **`* + *` und nicht «an allen Gliedern».** Das erste Glied hat keinen
   Vorgaenger und bekommt keinen Punkt — **auch dann nicht, wenn es das
   einzige ist.** Ohne gepflegte Verweise und ohne Complianz steht in der
   Zeile nur «© 2026 FC Herrliberg»; eine Regel an allen Gliedern setzte
   dort einen Punkt vor die Jahreszahl. **Der Wahlausdruck erledigt das,
   ohne dass `footer.php` zaehlen muss.**

   ── Die Luecke, und warum sie am Vater sitzt ─────────────────────────

   Ein Leerzeichen ist rund ein Viertelgeviert und damit zu schmal fuer
   einen Punkt mit Luft. `word-spacing:.6em` an `.fu-tx` verbreitert es:
   **Die Leerzeichen ZWISCHEN den Gliedern sind Textknoten von `.fu-tx`** —
   die Glieder selbst sind Elemente, und `.fu-tx > *{word-spacing:normal}`
   nimmt die Vererbung an ihrer Kante wieder zurueck. Ohne diese zweite
   Zeile zoege es auch «© 2026 FC Herrliberg» und jeden mehrwortigen
   Verweistext auseinander.

   **Genau dafuer hat die Wortmarke seit heute ihre eigene Huelle**
   (`span.fu-c` in `footer.php`): Sie ist Text mit Leerzeichen darin und
   braucht die Ruecknahme wie jedes andere Glied.

   `width:.85em` ist die Summe dieser zwei Regeln und keine gemessene Zahl:
   rund .25em Leerzeichen plus .6em Zuschlag. `text-align:center` setzt den
   Punkt in die Mitte der Fuge, statt ihn an eine ihrer Kanten zu legen.

   **`content:'·' / ''` gibt dem Zeichen einen leeren Ersatztext**, damit
   die Vorlesefunktion es nicht mitliest: **Ein reiner Trenner ist keine
   Auskunft** — vorgelesen waeren das drei zusaetzliche Ansagen in einer
   Zeile mit vier Gliedern. **Die schlichte Angabe davor ist der
   Rueckfall**, kein Versehen: Ein Browser, der die Ersatztextform nicht
   kennt, verwirft die ganze Angabe — mit nur einer Zeile verschwaende der
   Trenner dort ganz, **und ein fehlender Punkt faellt auf, ein
   mitgelesener nicht.**

   ⚠⚠ **NICHT als umbrechender Flexkasten mit `gap`.** Das ist der
   naheliegende Weg, und er kostet Bauhoehe: In einem Flexkasten wird jedes
   Glied zum Flexelement, **und dann zaehlt `padding-block:15px` aus
   Abschnitt 148 zur Hoehe.** Die Rechtszeile waere je Zeile 30px hoeher,
   und die 44px Beruehrflaeche, die dort ausdruecklich als freies Polster
   gerechnet ist, waere keine Rechnung mehr, sondern Bauhoehe — derselbe
   Zusatzabstand, den Didi am 25.09.2026 bei `.fuss-mail` abbestellt hat.
   **Der Fliesstext bleibt darum Fliesstext.**

   ⚠ **Das Verbot gilt den GLIEDERN als Flexelementen und nicht dem
   Flexkasten an sich.** Unter 620px steht an `.fu-tx` seit dem 25.09.2026
   `display:flex` — dort sind die Flexelemente `.fu-c` und `.fu-l`, und die
   Verweise bleiben INNERHALB von `.fu-l` Inline-Elemente. **Ihr Polster
   vergroessert die Zeilenhoehe weiterhin nicht**; es ragt heraus, und genau
   dafuer steht dort ein `row-gap`. Die Rechnung im Handyabschnitt «Die
   Rechtszeile in zwei Zeilen».

   ⚠ **Zwei Halbsaetze davon galten am 25.09.2026 fuer wenige Stunden:**
   ~~«die Verweise bleiben INNERHALB von `.fu-l` Inline-Elemente»~~ und
   ~~«es ragt heraus, und genau dafuer steht dort ein `row-gap`»~~. Unter
   620px sind die drei Glieder seither `inline-flex`, **und es ragt nichts
   mehr heraus — darum ist der `row-gap` entfallen.** Das Verbot selbst
   steht unberuehrt: Es untersagt, `padding-block:15px` in die Zeilenhoehe
   zu ziehen, und unter 620px gibt es dieses Polster nicht mehr. **Die
   Tippflaeche kommt dort aus `min-height` und kostet 1,6px statt 30.**

   ⚠ **Ein Glied, dessen eigener Text umbricht, verliert seinen Punkt.**
   Der Bezugskasten eines relativ gesetzten Inline-Elements ist die Huelle
   all seiner Bruchstuecke; ihre linke Kante ist dann die Spaltenkante, und
   `right:100%` legt den Punkt davor — dorthin, wo `.fu` schneidet. **Das
   trifft nur einen Verweistext, der allein breiter ist als die Zeile**, und
   fuer den ist der fehlende Trenner das kleinere der beiden Probleme.

   **Dieser Vorbehalt steht weiter richtig und bleibt, wo er ist:** Er
   handelt vom einzelnen Verweis, und der ist nach wie vor das Element, an
   dem der Punkt haengt. **Neu ist nur, dass dieselbe Mechanik auch `.fu-l`
   trifft** — und genau darum haengt dort keiner; die Rechnung steht im
   Abschnitt darunter.

   ── Die Huelle `.fu-l` kam am selben Tag dazu — 25.09.2026 ───────────

   Didi, 25.09.2026: «Zeile 1: ‹Impressum · Datenschutz ·
   Cookie-Einstellungen›, mittig. Zeile 2: ‹© 2026 FC Herrliberg›, mittig.
   Zeile 1 bleibt bis 360 px Breite einzeilig; reicht es nicht, die
   Abstaende um die Trennpunkte verkleinern, nicht die Schrift. Computer
   bleibt wie heute.»

   Die drei Rechtsglieder stehen seither in `span.fu-l` (`footer.php`),
   `.fu-c` bleibt ihr Geschwister. **Am Computer aendert das nichts an der
   Darstellung** — die Huelle ist ein Inline-Element ohne eigene
   Eigenschaft, und die Zeile fliesst wie gestern. Gebaut ist sie fuer den
   Handyabschnitt weiter unten, der genau diese zwei Kaesten stapelt.

   ⚠ **Darum greifen die Punkte nicht mehr an `.fu-tx > * + *`.** Die
   direkten Kinder von `.fu-tx` sind nur noch zwei — ein `* + *` setzte
   einen einzigen Punkt vor die ganze Verweisgruppe und keinen zwischen den
   Verweisen. Es sind jetzt zwei Waehler fuer zwei Fugen:

   - **`.fu-l > * + *`** — die Punkte ZWISCHEN den Verweisen. Derselbe
     Wahlausdruck wie vorher, eine Ebene tiefer, und mit demselben Dienst:
     Das erste Glied bekommt keinen.
   - **`.fu-c + .fu-l > :first-child`** — der Punkt zwischen Wortmarke und
     erstem Verweis. `.fu-c +` ist die Bedingung und nicht Zierde: Ohne
     Wortmarke gibt es keine Fuge, vor die ein Punkt gehoert.

   ⚠⚠ **Der zweite Punkt haengt NICHT an `.fu-l` selbst**, obwohl
   `.fu-c + .fu-l` der kuerzere Waehler waere. `right:100%` misst am
   Bezugskasten des Inline-Elements, und der umfasst ALLE seine
   Bruchstuecke: **Bricht `.fu-l` am Computer auf zwei Zeilen um, ist sein
   Kasten die ganze Spaltenbreite** — der Punkt landete am linken Rand der
   Spalte statt vor «Impressum», und `.fu` schnitte ihn womoeglich nicht
   einmal weg. **Am ersten Verweis kann das nicht passieren:** Er ist der
   Anfang des Umbruchs und nie sein Ergebnis. Der umstaendlichere Waehler
   ist der Preis dafuer, und er ist der Grund, ihn nicht zu kuerzen.

   ⚠ ~~`.fu-tx > *{word-spacing:normal}`~~ **galt am 25.09.2026 fuer wenige
   Stunden** — vom Trennpunkt-Umbau desselben Tages bis zur Huelle. Sie
   traefe jetzt `.fu-l` und naehme damit genau die Luecken zurueck, die sie
   aufmachen soll: **Die Leerzeichen zwischen den Verweisen sind Textknoten
   VON `.fu-l`.** `.fu-c,.fu-l > *` dreht das um — **`.fu-l` erbt die
   Luecke, seine Kinder nehmen sie zurueck.** Die Huelle selbst ist damit
   der einzige Kasten der Zeile, der die Vererbung behaelt, und das ist ihre
   Aufgabe. */
.fu-tx{word-spacing:.6em}
.fu-c,.fu-l > *{word-spacing:normal}
.fu-l > * + *,.fu-c + .fu-l > :first-child{position:relative}
.fu-l > * + *::before,.fu-c + .fu-l > :first-child::before{content:'·';
  content:'·' / '';position:absolute;right:100%;width:.85em;text-align:center}

/* ── Der Schalter sieht aus wie seine zwei Nachbarn ──────────────────
   «Cookie-Einstellungen» ist seit dem 25.09.2026 das dritte Glied der
   Rechtszeile, und es ist ein `<button>`. **Der Browser gibt einem Knopf
   eine eigene Flaeche, einen Rahmen und seine eigene Schrift, und keines
   davon erbt er** — ohne diese Zeile steht dort ein grauer Systemknopf
   zwischen zwei Textverweisen.

   **Dieselbe Rueckbauform, die das Haus schon dreimal fuehrt:**
   `.hw-kopf` im Hinweisbalken, `.leer-hinweis button` und `.rang-auf`.
   `font:inherit` statt einer eigenen Groesse, Grund und Rahmen weg,
   `cursor:pointer` zurueck — ein Knopf zeigt sonst den Pfeil, ein Verweis
   die Hand, und zwei von drei Gliedern zeigten dann die Hand.

   **`display:inline` wie bei `.hw-kopf`, und hier ist es tragend.** Der
   Schalter steht IM Satz; zoege er eine eigene Flaeche auf, waere die
   Beruehrflaeche aus `.fu a` im Handyabschnitt kein freies Polster mehr,
   sondern 30px mehr Zeilenhoehe. Die Rechnung steht dort.

   ⚠ **Der Absatz darueber ist seit dem 25.09.2026 auf 620px und darueber
   eingeschraenkt** — unter 620px steht am Schalter `inline-flex`. Sein
   Grund ist dort weg: Es gibt kein freies Polster mehr, das eine eigene
   Flaeche in Bauhoehe verwandeln koennte — **die Tippflaeche IST die
   Flaeche**, 24px hoch, und sie kostet 1,6px statt 30. **Der Gewinn, der
   den Tausch traegt, ist ein anderer:** Knopf und Verweise sind dort
   derselbe Kasten, und darum sitzt ihr Trennpunkt an derselben Stelle.
   Didis «alle auf derselben Grundlinie» ist damit keine Zusage, die jemand
   nachmessen muss, sondern eine Folge gleicher Kaesten. Die Rechnung steht
   im Handyabschnitt «Die Rechtszeile in zwei Zeilen».

   ⚠ **`padding:0` steht absichtlich nicht dabei**, obwohl die drei
   Vorbilder es tragen: `*{margin:0;padding:0}` in Abschnitt 00 nimmt es
   dem Knopf schon, und hier stuende es genau der Beruehrflaeche im Weg,
   die zwanzig Zeilen weiter unten Polster setzt.

   **Die Farbe steht NICHT hier.** Sie kommt aus `.fuss a:not(.mehr)`,
   wo der Schalter als zweiter Waehler haengt: eine Linkform, eine
   Stelle.

   ⚠ **`.fu-tx button` steht damit in zwei Bloecken, und das ist kein
   doppelter Selektor im Sinn der Hausregel.** Der eine Block ist die
   geteilte Linkform, der andere gehoert diesem Knopf allein. Sie liessen
   sich nur zusammenlegen, indem man `.fuss a` den Knopfrueckbau gibt oder
   dem Knopf die Linkform wegnimmt — beides waere schlechter als zwei
   Bloecke. */
.fu-tx button{display:inline;font:inherit;background:none;border:0;text-align:left;cursor:pointer}

/* ⚠ **`.fuss h4` ist am 24.09.2026 ersatzlos entfallen.** Im Fussbereich
   steht kein `<h4>` — weder im alten noch im neuen Markup. Die Regel stand
   seit je da und traf nichts:

   > `.fuss h4{font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);
   > letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:13px}`

   **Eine Regel ohne Gegenstand ist teurer als keine**: Sie liest sich wie
   eine Zusage, der Fuss trage Spaltenueberschriften. */

/* ── Der Fuss auf dem Handy — 23.09.2026, nachgezogen am 24.09.2026 ──
   **Gemessen bei 320px: Das Wappen belegte mit seinem Abstand 92 von 284
   Bildpunkten Textbreite — 32,4 %.** Bei 360 waren es 28,4 %, bei 390 noch
   26,0 %, ab 760 nur 13,9 %. Didis «fast ein Drittel» war keine
   Uebertreibung, sondern die Zahl beim schmalsten Geraet, das wir fuehren.

   > **Ein Wappen, das ein Drittel der Zeile nimmt, ist kein Beiwerk mehr,
   > sondern der Gegenstand.** Der Gegenstand des Fusses ist die Auskunft
   > ueber den Verein, nicht sein Abzeichen — das steht im Kopf jeder Seite.

   Die Zeile lief dabei nie ueber: Bei 320 blieben rechts 24,7px frei. **Die
   Beschwerde war ein Verhaeltnis und kein Ueberlauf** — eine Pruefung auf
   Umbrueche haette hier nichts gemeldet.

   ⚠ **40px seit dem 24.09.2026, vorher 60.** Die 60 waren die erste Antwort
   auf dieselbe Beschwerde; Didi hat am 24.09.2026 die Zahl genannt. **Damit
   belegt das Wappen bei 320px noch 54 von 284 Bildpunkten — 19,0 %.**

   **17px statt 19 am Namen.** Die 17 sind keine erfundene Zahl: `--tx-lead`
   steht bis 1000px genau auf 19px, `--tx` auf 17px. **«Eine Stufe kleiner»
   ist damit die Stufe der Leiter und nicht ein Augenmass.** `.fm` bleibt
   trotzdem ein fester Wert und keine Variable — was oben als Einzelfall
   begruendet ist, wird es nicht dadurch weniger, dass die neue Zahl
   zufaellig auf einem Stufenboden steht.

   `.fc` ist ausgenommen und bleibt auf `--tx-klein`. Der Zusatz war nie zu
   gross; er stand nur neben etwas, das es war.

   **Der Name steht einzeilig neben dem Wappen, der Slogan darunter an der
   linken Kante.** `white-space:nowrap` nimmt dem Namen den Umbruch, den er
   am Computer bekommt; `grid-column:1 / -1` holt den Slogan unter das
   Wappen zurueck, statt ihn neben dem Namen einzuruecken. **Alles beginnt
   bei `--rand`** — Wappen, Anschrift und Auszeichnung an derselben Kante wie
   die Schlusszeile darunter; der Vereinsname steht als einziger eingerueckt,
   weil er neben dem Wappen steht und nicht darunter.

   ⚠ **Dieser Absatz gilt seit dem 25.09.2026 nur noch von 620px an
   aufwaerts.** Darunter steht der Slogan nicht mehr unter dem Wappen,
   sondern unter dem Namen, und damit ist der Vereinsname nicht laenger der
   einzige, der einrueckt — der Block `max-width:619px` gleich hinter diesem
   setzt Name und Slogan in dieselbe Rasterspalte. Zwischen 620 und 759
   bleibt es bei `grid-column:1 / -1`, **weil Didi das Handy gemeint hat und
   nicht die Schwelle des Fussrasters.**

   **Die Auszeichnung rutscht unter die Anschrift, weil sie ihr sonst die
   Breite nimmt.** Bei 320 blieben der Kontaktspalte 136px — der Verweis
   «Kontakt aufnehmen →» brach dort auf zwei Zeilen, und die Anschrift stand
   in einer Spalte, die schmaler war als die Auszeichnung daneben hoch.
   Untereinander bekommen beide die volle Textbreite.

   ⚠ **Auch dieser Absatz gilt seit dem 25.09.2026 nur noch von 620px an
   aufwaerts.** Darunter steht die Auszeichnung wieder neben dem
   Kontaktblock; der Block hinter dem Markenblock rechnet vor, warum aus den
   136px von damals 218 geworden sind.

   **Beschriftung daneben statt darunter, und dafuer zwei Spalten statt
   einer** — jetzt im `figure` und nicht mehr in `.fuss-rechts`:
   `auto minmax(0,1fr)` legt Bild und Text in EINE Rasterzeile.

   ⚠⚠ **`@media(max-width:359px){.fuss-aus{width:66px}}` ist entfallen**,
   mit dieser Begruendung:

   > «Unter 360px bleiben der Anschrift nur 146px — Vereinsname und Slogan
   > brechen dort auf zwei Zeilen. Mit 96px reicht der Platz wieder.»
   > (die Regel setzte 66px, nicht 96)

   **Entschieden am 24.09.2026, mit zwei Gruenden.** Erstens ist der Grund
   weg: Die Auszeichnung steht seit dem 23.09.2026 in einer eigenen Zeile und
   nimmt der Anschrift keine Breite mehr. Zweitens dreht die Ausnahme ihre
   Richtung um — sie machte das Bild **kleiner** als die 78px daneben, unter
   48px waere sie **groesser**. **Eine Ausnahme, die den Regelwert
   ueberschreitet, ist keine Ausnahme mehr, sondern ein zweiter Regelwert.** */
@media(max-width:759px){
  .fuss-marke .crest{width:40px;height:40px;grid-row:auto}
  .fm{font-size:17px;white-space:nowrap}
  .fc{grid-column:1 / -1}
  .fuss-rechts{justify-self:stretch;justify-items:start}
  .fuss-aus-block{grid-template-columns:auto minmax(0,1fr);align-items:center;
    column-gap:12px;justify-items:start}
  .fuss-aus{width:48px}
  .fuss-aus-tx{margin:0;text-align:left}
}

/* ── Der Markenblock unter 620px: der Slogan unter den Namen ──────
   Didi, 25.09.2026: «Der Slogan steht direkt unter ‹FUSSBALLCLUB
   HERRLIBERG›, auf derselben linken Kante wie der Name — Wappen links,
   rechts daneben Name und Slogan untereinander. Computer bleibt wie
   heute.»

   ~~«`grid-column:1 / -1` holt den Slogan unter das Wappen zurueck, statt
   ihn neben dem Namen einzuruecken.»~~ — der Satz galt bis zum 25.09.2026
   und gilt von 620px an weiter. Unter 620px rueckt der Slogan mit ein:
   **Zwei linke Kanten in einem Kasten lesen sich als zwei Bloecke**, und
   der Markenblock ist einer. Der Name sagt, wer es ist, der Slogan sagt
   dasselbe noch einmal in Worten — sie gehoeren an dieselbe Kante.

   **Drei Geschwister, zwei Spalten — und kein neues Element.** `.crest`,
   `.fm` und `.fc` sind seit dem 24.09.2026 gleichrangig (`footer.php`); es
   gibt keinen Kasten um Name und Slogan, den ein Flexkasten stapeln
   koennte. **Das Raster braucht ihn nicht:** Das Wappen nimmt Spalte 1
   ueber beide Zeilen, Name und Slogan teilen sich Spalte 2. Das Markup
   bleibt unangetastet.

   ⚠⚠ **Alle drei Lagen stehen ausdruecklich da, und das ist keine
   Umstaendlichkeit.** Die selbsttaetige Verteilung setzt zuerst die Kinder
   mit fester Spalte und erst danach den Rest. Bekaeme allein `.fc` seine
   Spalte 2, kaeme es als Erstes dran und landete in Zeile 1 — der Name
   wiche in Zeile 2 aus, und **der Slogan stuende ueber dem Vereinsnamen.**
   Mit Zeile UND Spalte an jedem der drei Kinder entscheidet keine
   Reihenfolge mehr mit.

   **Senkrecht aendert sich nichts, was gesetzt ist.** Die 40px des Wappens
   stehen im Block darueber, seine Ausrichtung als `align-items:center` an
   `.fuss-marke` — beides bleibt unberuehrt. Neu ist allein, WOGEGEN das
   Wappen mittig steht: bis heute gegen die Namenszeile allein, jetzt gegen
   Name und Slogan zusammen. **Am Computer steht es genau so**, dort mit
   demselben `grid-row:1 / span 2`.

   **619 und keine dritte Schwelle.** Der Fussbereich schaltet daneben bei
   760, aber das ist die Grenze zwischen einer und drei Spalten und eine
   andere Frage. 620 ist die Hausschwelle, und Didi nennt sie: Zwischen 620
   und 759 bleibt der Markenblock, wie er heute steht. */
@media(max-width:619px){
  .fuss-marke .crest{grid-column:1;grid-row:1 / span 2}
  .fm{grid-column:2;grid-row:1}
  .fc{grid-column:2;grid-row:2}
}

/* ── Das Abzeichen neben dem Kontaktblock — unter 620px ────────────
   ~~Didi, 25.09.2026: «Footer am Handy (unter 620 px): Das Abzeichen
   ‹Vorbildlicher Verein 2025› steht rechts neben dem Kontaktblock (Adresse,
   E-Mail, Instagram), rechtsbuendig, oben buendig mit der Adresszeile. Die
   eigene Zeile fuer das Abzeichen entfaellt. Ohne sichtbare Beschriftung;
   ‹Vorbildlicher Verein 2025› bleibt als Alternativtext und title am Bild.
   Groesse wie heute (48 px). Computer bleibt wie heute.»~~

   ⚠ **Diese Fassung galt am 25.09.2026 fuer wenige Stunden** — gebaut in
   Commit 18f971d, nachgebessert am selben Tag. Es ist kein Datum vergangen,
   nur eine Ansicht: Didi hat das Ergebnis gesehen und zwei Dinge geaendert.

   Didi, 25.09.2026 (zweite Fassung, es gilt diese): «Das Abzeichen
   ‹Vorbildlicher Verein 2025› rechts neben dem Kontaktblock wird groesser:
   64 px statt 48 — gleich gross wie am Computer. Unten buendig mit der
   Instagram-Zeile (heute oben buendig mit der Adresse).»

   **Unveraendert gilt aus der ersten Fassung:** rechtsbuendig, keine eigene
   Zeile, keine sichtbare Beschriftung, Computer wie heute.

   ~~«Die Auszeichnung rutscht unter die Anschrift, weil sie ihr sonst die
   Breite nimmt.»~~ — der Satz steht im Kommentar ueber dem 759er-Block und
   gilt seit dem 25.09.2026 nur noch von 620px an aufwaerts. **Seine Zahlen
   sind abgelaufen:** Er rechnete mit 136px Restbreite fuer die
   Kontaktspalte, damals neben einem 78px breiten Bild MIT Beschriftung
   daneben. Heute ist das Bild 64px breit und die Beschriftung unter 620px
   ausgeblendet — bei 320px bleiben der Kontaktspalte 284 − 18 − 64 = **202
   von 284 Bildpunkten.** (Gerechnet aus den Zahlen, die im Block darueber
   stehen: 284px Textbreite bei 320, `gap:18px`, `width:64px`. **Gerechnet,
   nicht gemessen** — ob «Kontakt aufnehmen →» bei 202px auf einer Zeile
   bleibt, sagt diese Rechnung nicht.)

   ⚠ ~~«bei 320px bleiben der Kontaktspalte 284 − 18 − 48 = 218 von 284
   Bildpunkten»~~ — dieselbe Rechnung mit 48px; sie galt am 25.09.2026 fuer
   wenige Stunden. **Das Abzeichen nimmt der Kontaktspalte seit der zweiten
   Fassung 16px mehr.** Wer den Verweis «Kontakt aufnehmen →» dort umbrechen
   sieht, hat hier den Grund — und die 202 sind so wenig gemessen wie die
   218 es waren.

   **Zwischen 620 und 759 bleibt alles, wie es ist.** Didi nennt das Handy
   und damit die Hausschwelle; die 760 daneben ist die Grenze zwischen einer
   und drei Spalten und eine andere Frage — **dieselbe Begruendung wie beim
   Markenblock im Block darueber.**

   ── Die drei Lagen stehen ausdruecklich da ───────────────────────────

   Aus demselben Grund wie beim Markenblock: Die selbsttaetige Verteilung
   setzt zuerst die Kinder mit fester Spalte und erst danach den Rest. **Mit
   Zeile UND Spalte an allen dreien entscheidet keine Reihenfolge mit.**

   ⚠ **`.fuss-marke{grid-column:1 / -1}` ist zurueck, und der Grund, aus dem
   es entfiel, gilt weiter.** Im Kommentar zu `.fg` steht: «In einem Raster
   mit EINER Spalte ist `1 / -1` dasselbe wie `auto`» — **hier hat das
   Raster zwei Spalten**, und der Markenblock soll ueber beide laufen. Die
   alte Regel war wertlos, diese ist es nicht.

   ⚠ **`:has(> .fuss-rechts)` an `.fg`.** Ohne Auszeichnung faellt der ganze
   Block weg (`footer.php`), die zweite Spalte waere leer — **die Fuge von
   18px bliebe trotzdem stehen** und naehme dem Text 18px Breite fuer nichts.
   **Die Lagen an den Kindern brauchen die Abfrage nicht:** In einer Spalte
   ist `1 / -1` wieder `auto`, und `grid-column:2` trifft niemanden, weil es
   das Kind gar nicht gibt.

   ── «Unten buendig mit der Instagram-Zeile» braucht keine Rechnung ──

   **Die neue Kante ist die EINFACHERE, nicht die schwierigere** — und das
   ist der ganze Grund, warum hier seit dem 25.09.2026 weniger steht als
   vorher.

   > **Die Instagram-Zeile ist das LETZTE Kind von `.fuss-kontakt`.** Ihre
   > Unterkante IST die Unterkante des Kontaktblocks, und die Unterkante des
   > Nachbarn erreicht ein Rasterkind mit `align-self:end` von selbst. **Die
   > Adresszeile lag mitten im Block** — sie war nur ueber eine Summe
   > erreichbar.

   Ein Raster richtet seine Kinder aneinander aus und erreicht keine Kante
   IN einem Nachbarblock; das galt und gilt. Der Unterschied liegt an der
   Kante selbst: Die alte war eine innere, die neue ist die aeussere.

   ⚠ ~~Der Versatz von oben, als Summe seiner drei Quellen:~~

   > ~~`align-self:start;margin-top:calc(1px + 44px + 2px)` —~~
   > ~~**1px** `.fuss-kontakt > p:first-of-type{margin-top:1px}`, der~~
   > ~~Aussenabstand des ersten Absatzes; **44px** die Hoehe dieses ersten~~
   > ~~Absatzes, er enthaelt `a.mehr` und `.fuss .mehr{padding-block:9px;~~
   > ~~min-height:44px;box-sizing:border-box;display:inline-flex}` in~~
   > ~~Abschnitt 148 setzt ihm die Beruehrflaeche; **2px**~~
   > ~~`.fuss-kontakt p+p{margin-top:2px}`, der Abstand des Adressabsatzes~~
   > ~~zu dem darueber. «Die Summe steht als `calc` und nicht als 47»,~~
   > ~~damit jeder Summand beim naechsten Umbau seiner Regel zuzuordnen~~
   > ~~bleibt.~~

   Diese Rechnung galt am 25.09.2026 fuer wenige Stunden — sie ist **mit
   der zweiten Fassung ersatzlos entfallen**, nicht umgerechnet. Die
   Ausrichtung heisst jetzt `align-self:end` und sonst nichts.

   **Damit faellt auch ihr Vorbehalt weg, und das ist die eigentliche gute
   Nachricht.** Die 44px waren die `min-height` von `a.mehr` und **nicht die
   gemessene Hoehe der Zeilenbox** — eine Zahl, die richtig aussah und nie
   geprueft war. Ein Auftrag, der eine ungemessene Zahl ueberfluessig macht,
   ist mehr wert als einer, der sie korrigiert.

   ⚠ ~~«Fehlt die Anschrift — alle drei Ortsfelder leer, `footer.php` laesst
   den Absatz dann weg —, fehlt auch die Kante, an der ausgerichtet wird.
   Das Abzeichen steht dann 2px unter der ersten Mailzeile.»~~ — **erledigt
   am 25.09.2026.** Die Anschrift ist nicht mehr der Bezug; ob sie da ist
   oder fehlt, verschiebt die Unterkante des Kontaktblocks nicht.

   ⚠⚠ ~~«`display:contents` an `.fuss-kontakt` waere der Weg, der die Kante
   exakt traefe.»~~ — **gegenstandslos seit dem 25.09.2026.** Der Umweg
   wurde gebraucht, weil eine INNERE Kante getroffen werden sollte; er
   haette `.fg{gap:18px}` zwischen alle Kontaktabsaetze gelassen und deren
   1px und 2px ersetzt — die Abstaende, die Didi am selben Tag als «eng und
   gleichmaessig» bestellt hat. **Ein Weg, der den Block zerreisst, braucht
   jetzt gar nicht mehr abgewogen zu werden.**

   ── ⚠ Der eine Vorbehalt, der NEU entsteht ──────────────────────────

   **`align-self:end` folgt dem letzten Kind, und das ist heute die
   Instagram-Zeile — heute.** Zwei Faelle aendern es, und beide sind
   Pflege und kein Fehler:

   - **Ein Dokument mit dem Ort «fussbereich».** `footer.php` haengt
     `div.fuss-dok` dann als letztes Kind UNTER die Instagram-Zeile; das
     Abzeichen folgt dieser Unterkante und nicht mehr der von Instagram.
     **Heute ist das niemandes Fall** — aber es ist die Bedingung, unter der
     diese Regel stimmt, und eine ungenannte Bedingung ist eine, die beim
     naechsten Mal niemand kennt.
   - **Kein gepflegtes Instagram-Konto.** `footer.php` laesst die Zeile dann
     weg (beides oder nichts), und die Mailzeile ist die letzte.

   **In beiden Faellen bleibt die Regel richtig und der Wortlaut veraltet:**
   Ausgerichtet wird an der Unterkante des Kontaktblocks. «Instagram-Zeile»
   ist Didis Name fuer das, was heute dort steht.

   ── Rechtsbuendig, ohne Beschriftung ────────────────────────

   Der 759er-Block dreht das `figure` in zwei Spalten (Bild, Beschriftung
   daneben) und stellt alles auf `start`. **Beides wird hier
   zurueckgenommen**, weil die Beschriftung nicht mehr mitlaeuft:
   `grid-template-columns:none` macht den Kasten wieder einspaltig,
   `justify-self` und `justify-items` gehen auf `end`.

   **`column-gap:12px` und `align-items:center` aus jenem Block bleiben
   stehen** — in einem Kasten mit einer Spalte und einem Kind haben sie
   nichts, worauf sie wirken koennten. **Eine Ruecknahme waere eine Zeile,
   die nichts tut.**

   ── 64px ist keine neue Zahl, sondern eine Ruecknahme ───────────────

   ~~«`.fuss-aus{width:48px}` steht nicht noch einmal hier. Die 48px kommen
   aus dem 759er-Block und gelten weiter — ‹Groesse wie heute›, sagt Didi,
   und dieselbe Zahl an einer zweiten Stelle waere der Anfang von zwei
   Wahrheiten.»~~ — der Satz galt am 25.09.2026 fuer wenige Stunden und ist
   mit der zweiten Fassung abgeloest. **Die Zahl steht jetzt doch hier, und
   sie ist eine andere.**

   **Der Grundwert IST 64px** (`.fuss-aus{width:64px}` im Abschnitt «Die
   Auszeichnung» weiter oben) — genau die Computergroesse. Unter 760px setzt
   ihn `@media(max-width:759px){.fuss-aus{width:48px}}` herab.

   > **`width:64px` hier setzt darum keine dritte Zahl, sondern nimmt die
   > Herabsetzung zurueck.** Unter 620px gilt wieder der Grundwert. Zwischen
   > 620 und 759 bleibt es bei 48px — das ist der Bereich, den Didi nicht
   > gemeint hat, und derselbe Schnitt wie beim Markenblock.

   **Gleiches Gewicht, spaetere Zeile gewinnt:** beide Waehler sind
   `.fuss-aus`, und dieser Block steht hinter dem 759er. Eine Medienabfrage
   traegt kein eigenes Gewicht — **die Reihenfolge im Blatt ist hier das
   ganze Verfahren**, und sie ist der Grund, warum diese Regel nicht nach
   oben verschoben werden darf.

   ⚠ **`display:none` nimmt die Beschriftung auch der Vorlesefunktion, und
   hier ist das in Ordnung.** Sonst ist es der Fehler; hier tragen `alt` und
   `title` am Bild denselben Text — `footer.php` setzt das `title` seit dem
   25.09.2026 genau dafuer. **Verloren geht nicht die Auskunft, sondern nur
   ihre sichtbare Form.** */
@media(max-width:619px){
  .fg:has(> .fuss-rechts){grid-template-columns:minmax(0,1fr) auto}
  .fuss-marke{grid-column:1 / -1;grid-row:1}
  .fuss-kontakt{grid-column:1;grid-row:2}
  .fuss-rechts{grid-column:2;grid-row:2;justify-self:end;justify-items:end;
    align-self:end}
  .fuss-aus-block{grid-template-columns:none;justify-items:end}
  .fuss-aus{width:64px}
  .fuss-aus-tx{display:none}
}

/* ── Die Rechtszeile in zwei Zeilen — unter 620px ──────────────────
   Didi, 25.09.2026 (erste Fassung): «Zeile 1: ‹Impressum · Datenschutz ·
   Cookie-Einstellungen›, mittig. Zeile 2: ‹© 2026 FC Herrliberg›, mittig.
   Zeile 1 bleibt bis 360 px Breite einzeilig; reicht es nicht, die
   Abstaende um die Trennpunkte verkleinern, nicht die Schrift. Computer
   bleibt wie heute.»

   Didi, 25.09.2026 (zweite Fassung, wenige Stunden spaeter — es gilt
   diese): «Zeile 1 lautet genau ‹Impressum · Datenschutz ·
   Cookie-Einstellungen› — Punkt mit je einem Leerzeichen davor und danach,
   alle auf derselben Grundlinie. Der einzelne Punkt ueber ‹Impressum› /
   ‹Datenschutz› entfaellt. Abstand zwischen der Linkzeile und ‹© 2026 FC
   Herrliberg› eng: normaler Zeilenabstand, keine 44-px-Tippflaechen.
   Tippflaeche der Links mindestens 24 px ohne sichtbaren Zusatzabstand —
   wie beim Kontaktblock. Abstand zwischen Trennlinie und Linkzeile
   ebenfalls verkleinern, ungefaehr gleich wie zwischen Kontaktblock und
   Trennlinie. Computer bleibt wie heute.»

   **Die zwei Fassungen widersprechen sich an einer Stelle, und die zweite
   gewinnt.** Die erste liess die Abstaende um die Trennpunkte nachgeben,
   FALLS die Zeile bei 360px nicht reicht; die zweite verlangt die
   Leerzeichen um den Punkt ausdruecklich. **Die Herabsetzung war die
   Antwort auf eine Bedingung und stand unbedingt da** — sie ist darum
   entfallen und nicht umgerechnet. Der Rest der ersten Fassung gilt
   unveraendert: zwei Zeilen, beide mittig, Computer wie heute.

   **Zwei Zeilen, und die Verweise stehen OBEN** — im Markup steht die
   Wortmarke vorn. `flex-direction:column-reverse` setzt das letzte Kind
   nach oben; **so bleibt die Lesereihenfolge dort, wo sie hingehoert**, und
   die Tastatur laeuft am Computer wie am Handy von der Wortmarke zu den
   Verweisen. Eine Umstellung im Markup haette eine Breite bedient und die
   andere beschaedigt.

   `.fu-l` (`footer.php`, seit dem 25.09.2026) ist die Bedingung dafuer,
   dass hier zwei Kaesten zu stapeln sind und nicht vier Glieder.

   ── ⚠ Flexkasten — hier erlaubt, zwanzig Zeilen weiter oben verboten ──

   Im Abschnitt «Der Trennpunkt haengt nicht» steht: «NICHT als umbrechender
   Flexkasten mit `gap`. … In einem Flexkasten wird jedes Glied zum
   Flexelement, **und dann zaehlt `padding-block:15px` aus Abschnitt 148 zur
   Hoehe.**» **Der Satz gilt unveraendert — er gilt nur etwas anderem.**

   > Verboten ist ein Flexkasten mit den **Verweisen** als Flexelementen.
   > Hier sind die Flexelemente **`.fu-c` und `.fu-l`**; ~~die Verweise
   > bleiben INNERHALB von `.fu-l` Inline-Elemente. **An einem
   > Inline-Element vergroessert Polster die Zeilenhoehe nicht** — es ragt
   > heraus, wie es im Abschnitt «`overflow-x:clip` an `.fu`» steht.~~

   ⚠ **Der durchgestrichene Teil galt am 25.09.2026 fuer wenige Stunden.**
   Die drei Glieder sind hier seit der zweiten Fassung selbst `inline-flex`,
   und damit waeren sie als Flexelemente genau das, was das Verbot meint.
   **Das Verbot bleibt trotzdem gewahrt, weil das Polster weg ist, das es
   fuerchtet:** Es untersagt, 15px Polster in Bauhoehe zu verwandeln — und
   wo kein Polster steht, ist nichts zu verwandeln. **Der Preis ist 1,6px
   und nicht 30**, und er ist bestellt.

   ── Die Tippflaeche kommt aus `min-height`, nicht aus Polster ──────

   «Wie beim Kontaktblock» nennt eine Bauform und keine Zahl, und sie steht
   dort seit heute Morgen: `.fuss-mail{display:inline-flex;
   align-items:center;min-height:24px}`. Die Rechnung bei `.fuss-mail` gilt
   hier Zeichen fuer Zeichen: **Die Zeile ist auf `--tx-klein:14px` und
   Zeilenhoehe 1,6 schon 22,4px hoch, auf 24 fehlen 1,6px** — und
   `align-items:center` legt sie je zur Haelfte ueber und unter den Text,
   statt sie vorne anzuhaengen. Polster haette 30px in den Fluss gelegt,
   **genau den sichtbaren Zusatzabstand, den Didi hier wie dort
   abbestellt.**

   **`padding-block:15px` ist dafuer in Abschnitt 148 auf 620px und darueber
   eingeschraenkt und nicht hier zurueckgenommen.** Der Abschnitt steht im
   Blatt HINTER diesem Block und gewinnt bei gleichem Gewicht; eine
   Ruecknahme hier waere eine Regel, die aussieht, als taete sie etwas.

   ⚠⚠ **Damit sitzt der Trennpunkt an allen drei Gliedern gleich, und das
   ist der eigentliche Gewinn dieses Tauschs.** Der Punkt steht absolut ohne
   `top`; seine senkrechte Lage ist die, die er ohne `position` haette.
   **Diese Lage ist nur vergleichbar, wenn die Kaesten vergleichbar sind** —
   und bis heute waren sie es nicht: zwei Textinline mit 15px Polster, und
   daneben ein `<button>`, dem der Browser eine eigene Flaeche gibt. Jetzt
   sind alle drei `inline-flex` mit derselben `min-height` und demselben
   `align-items`: **derselbe Kasten, dieselbe Grundlinie.** Didis «alle auf
   derselben Grundlinie» ist damit keine Zusage, die jemand nachmisst,
   sondern eine Folge gleicher Kaesten. **Gemessen ist nichts; Proben waren
   ausgeschlossen.**

   ── ~~`row-gap:15px` ist kein Zierabstand, sondern genau dieses Polster~~

   ⚠ **Der Abstand ist entfallen, und sein Grund mit ihm.** Der Abschnitt
   galt am 25.09.2026 fuer wenige Stunden:

   > ~~«`.fu a,.fu-tx button{padding-block:15px}` (Abschnitt 148) gibt den
   > Verweisen ihre Beruehrflaeche. Das Polster ragt 15px unter ihre
   > Zeilenbox hinaus und zaehlt nicht zur Hoehe von `.fu-l` — ohne Abstand
   > laege die Wortmarke damit IN der Beruehrflaeche der Verweise darueber.
   > Ein Tipper auf ‹© 2026 FC Herrliberg› traefe einen Link. Die 15px sind
   > darum dieselbe Zahl wie dort und keine gewaehlte: Sie holen die
   > Wortmarke an die Unterkante der Tippflaeche, nicht weiter.»~~

   **Die Gefahr ist weg, und nicht ein Abstand hat sie weggeschoben.** Die
   Tippflaeche ragt nicht mehr heraus — **sie IST der Kasten**, 24px hoch.
   Ein Tipper auf die Wortmarke trifft keinen Verweis mehr, weil nichts mehr
   ueber sie hinausreicht. Didi: «Abstand zwischen der Linkzeile und ‹© 2026
   FC Herrliberg› eng: normaler Zeilenabstand, keine 44-px-Tippflaechen.»

   **Gerechnet, nicht gemessen:** `.fu-l` ist 24px hoch, `.fu-c` 22,4 — die
   zwei Grundlinien liegen 23,2px auseinander statt 22,4. **Die 0,8px sind
   die untere Haelfte der Tippflaeche**, dieselbe Zahl, die der Kontaktblock
   seit heute Morgen zahlt. «Normaler Zeilenabstand» ist damit auf 0,8px
   genau erfuellt. **Ein `row-gap:0` stuende nicht da**: Es waere die dritte
   Form derselben Aussage — es steht gar keiner mehr.

   ── Der Trennpunkt: zurueck auf die Masse des Computers ────────────

   ⚠ Der Abschnitt «Die 360px-Zusage» galt am 25.09.2026 fuer wenige
   Stunden:

   > ~~«Unter 620px stehen darum `word-spacing:.25em` statt `.6em` und
   > `width:.5em` statt `.85em` am Punkt. Die zwei Zahlen haengen zusammen
   > wie am Computer: `.85em` war ‹rund .25em Leerzeichen plus .6em
   > Zuschlag›, `.5em` ist ‹rund .25em plus .25em Zuschlag›. Der Punkt sitzt
   > weiter mittig in seiner Fuge, die Fuge ist nur schmaler. Die Zeile
   > tauscht Luft gegen Reserve — sichtbar weniger luftig, dafuer laenger
   > einzeilig.»~~

   **«Sichtbar weniger luftig» war die Zusage, und genau sie hat Didi
   zurueckgenommen.** Die Rechnung dahinter war richtig und ihr Ergebnis
   unbrauchbar: Die Fuge ist rund `.5em` breit, das Zeichen «·» rund
   `.25em` — **es blieben rund `.125em` Luft auf jeder Seite, weniger als
   die Haelfte eines Leerzeichens.** Der Punkt beruehrte seine Nachbarn, und
   das sieht aus, als fehlten die Leerzeichen. **Genau so hat Didi es
   gemeldet** («zwischen ‹Datenschutz› und ‹Cookie-Einstellungen› fehlen
   heute die Leerzeichen um den Punkt») — und es gilt fuer beide Fugen
   gleich, nicht nur fuer die eine, die ihm aufgefallen ist.

   **Mit `.6em` sind es rund `.3em` auf jeder Seite, also ein Leerzeichen.**
   Das ist keine neue Zahl, sondern **die Ruecknahme einer Herabsetzung**:
   `.6em` und `.85em` stehen im Grundwert und sind die Masse des Computers —
   dieselbe Zeile, die Didi dort liest, ohne sie zu beanstanden. «Punkt mit
   je einem Leerzeichen davor und danach» heisst am Handy dasselbe wie am
   Computer, **und dieselbe Forderung mit zwei Zahlen zu beantworten waere
   der Anfang von zwei Wahrheiten.** Die zwei Zeilen sind darum nicht
   umgeschrieben, sondern **weg**.

   ⚠⚠ **Was das die 360px-Zusage kostet, ist gerechnet und nicht gemessen.**
   Zwei Fugen werden um je rund `.35em` breiter, bei 14px zusammen rund
   10px. Nach derselben Abschaetzung wie in der ersten Fassung — rund 324px
   Textbreite bei 360px Fenster, rund 40 Zeichen auf `--tx-klein:14px` —
   bleibt die Zeile rund 311px breit und passt weiter knapp. **«Knapp» ist
   so wenig eine Zusicherung wie vorher.** Wer die Zeile bei 360px
   umbrechen sieht, hat den Stellknopf hier: erst der Zuschlag, dann die
   Breite des Punkts, **und erst danach die Schrift** — Didis Reihenfolge
   aus der ersten Fassung gilt dafuer weiter. **Sie gehoert dann in eine
   Abfrage unter 360px und nicht in diesen Block:** Unbedingt gesetzt war
   sie die Antwort auf einen Fall, den es laut Zusage nicht gibt.

   ⚠ **Am Computer bleibt `.6em`**, und zwar jetzt ohne Ausnahme darunter.
   «Computer bleibt wie heute», sagt Didi in beiden Fassungen.

   ── Der Abstand ueber der Linkzeile: 18px werden erstmals sichtbar ──

   Didi: «Abstand zwischen Trennlinie und Linkzeile ebenfalls verkleinern,
   ungefaehr gleich wie zwischen Kontaktblock und Trennlinie.» **Hier
   aendert keine Zahl, und das ist die Antwort und nicht ihr Ausbleiben.**

   `.fu{margin-top:34px;padding-top:18px}` — 34px ueber der Trennlinie, 18px
   darunter, **beide unveraendert.** Zu gross ist nicht die 18: Es sind 18
   **plus** die 15px Polster, die der `<button>` unter 620px in die
   Zeilenbox zieht. **Und genau darauf deutet Didis Vergleich:** 18 + 15
   sind 33, und die 34px ueber der Linie sind das, womit er sie gleichsetzt.
   **Sein Satz ist die Messung, die dieser Auftrag verbietet** — er sieht
   zwei Abstaende, die gleich aussehen, und will den unteren kleiner.

   ⚠ **Dass das Polster des Knopfs zaehlt, ist aus Didis Satz geschlossen
   und nicht gemessen.** `.fu-tx button{display:inline}` sagt, es solle
   nicht zaehlen; ob ein Browser das an einem `<button>` befolgt, steht
   nicht in diesem Blatt. **Nach dem Umbau ist die Frage gegenstandslos:**
   Unter 620px gibt es kein Polster mehr, das irgendein Browser irgendwie
   auslegen koennte. Die 18px sind dann der ganze Abstand — **eine Zahl, die
   seit dem 24.09.2026 dasteht und zum ersten Mal auch wirkt.**

   ⚠ **Offen geblieben, und darum nicht gebaut:** Die 18 sind kleiner als
   die 34, und «ungefaehr gleich» liesse sich auch als Ziel lesen — dann
   muesste einer der zwei Werte nachziehen. Der Weg dafuer waere EIN Wert
   und keine neue Zahl: `margin-top` auf 18, dieselbe Zahl, die unter der
   Linie schon steht und die der Fuss in `.fg{gap:18px}` ohnehin fuehrt.
   **Das ist ein Entscheid und keine Ableitung, und darum trifft ihn Didi.**

   ── ⚠ Eine bekannte Grenze, unterhalb der Zusage ────────────────────

   **Die Punkte am Zeilenanfang verschwinden, weil `.fu{overflow-x:clip}`
   sie links der Spalte wegschneidet** (die Begruendung steht dort). **Das
   setzt voraus, dass die Zeile linksbuendig beginnt.** Unter 620px ist
   Zeile 1 zentriert: Bricht sie doch um — unter 360px, also unterhalb von
   Didis Zusage —, **beginnt die neue Zeile mitten in der Spalte, und ihr
   fuehrender Punkt liegt nicht mehr im Schnittbereich.** Er waere sichtbar.

   **Das steht hier, statt behoben zu werden:** Die Grenze tritt erst
   unterhalb der zugesagten Breite ein, und die Zusage ist der Ort, an dem
   darueber entschieden wird. **Eine Regel gegen einen Fall, den es laut
   Zusage nicht gibt, waere eine Regel ohne Gegenstand.**

   ⚠ **`text-align:center` steht zusaetzlich zu `align-items:center` da, und
   das ist eine Entscheidung und keine Doppelung.** `align-items` zentriert
   die zwei KAESTEN; solange Zeile 1 auf eine Zeile passt, ist der Kasten
   genau so breit wie sein Text und beides sieht gleich aus. **Bricht der
   Text, ist der Kasten die volle Spaltenbreite** — dann zentriert erst
   `text-align` die einzelnen Zeilen. Didi sagt «mittig» und meint den Text;
   ohne diese Zeile waere «mittig» eine Zusage, die genau dann ausfaellt,
   wenn sie gebraucht wird. */
@media(max-width:619px){
  .fu-tx{display:flex;flex-direction:column-reverse;align-items:center;
    text-align:center}
  .fu a,.fu-tx button{display:inline-flex;align-items:center;min-height:24px}
  /* Zwischen den zwei Zeilen steht kein Trenner — der Punkt gehoert in eine
     Fuge, und zwischen zwei Zeilen ist keine. `content:none` erzeugt das
     Pseudoelement gar nicht erst; `content:''` liesse einen leeren Kasten
     mit `position:absolute` stehen.

     ⚠ **Nicht gebaut: den Punkt hier gar nie zu setzen.** Das waere die
     ehrlichere Form — eine Regel, die nur dort steht, wo sie einen
     Gegenstand hat. Sie kostet aber alle fuenf Deklarationen des Punkts ein
     zweites Mal in einer `@media(min-width:620px)`, **weil eine
     Medienabfrage kein halbes Waehlerpaar aufnehmen kann**: Der Punkt
     zwischen den Verweisen gilt auf allen Breiten, der vor «Impressum» nur
     auf einer. **Eine zweite Fassung derselben Aussage ist im Haus teurer
     als eine Ruecknahme mit Grund** — dieselbe Abwaegung wie bei der
     Linkform des Banners.

     ⚠ Was bleibt, ist `position:relative` am ersten Verweis ohne
     Gegenstand. **Eine Eigenschaft ohne Wirkung kostet weniger als eine
     Regel ohne Gegenstand**, und sie steht im selben Waehlerpaar. */
  .fu-c + .fu-l > :first-child::before{content:none}
}

/* ── 142 Einwilligungsbanner ──────────────────────────────── */
/* Das Banner kommt von Complianz und steht als letztes Kind des `body`,
   hinter dem Fussbereich. **Sein Aufbau bleibt, wie das Plugin ihn
   liefert** — hier stehen Farben, Schriften, Knoepfe und die Linkform und
   sonst nichts. Keine Regel blendet ein Element ein oder aus, keine
   sortiert um, keine verschiebt den Kasten.

   **Das Aussehen steht hier und nicht in den Complianz-Einstellungen**,
   damit es im Repository liegt und mit dem Theme wandert. Die Einstellung
   traegt heute schon ein gelbes Akzeptieren (`#fcde00`) — Zeichen fuer
   Zeichen `--gelb`, aber eben in der Datenbank von dev und in keinem
   Commit.

   ── Warum gleiches Gewicht hier verliert ─────────────────────────────

   ⚠⚠ **Complianz liefert sein eigenes Blatt und laedt es NACH
   `style.css`.** Im Kopf der ausgelieferten Seite steht `fch-css` vor
   `cmplz-banner-1-optin-css` (`uploads/complianz/css/banner-1-optin.css`,
   17 539 Bytes, von dev geholt und gelesen). **Was im Haus sonst gilt —
   gleiches Gewicht, spaetere Zeile gewinnt — dreht sich hier um: Bei
   gleichem Gewicht gewinnt das Plugin.** Jede Regel unten muss schwerer
   wiegen.

   Das Plugin haengt seine Bannerregeln an die KLASSE `.cmplz-cookiebanner`
   und geht dabei bis (0,4,0)
   (`.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept`). Eine ID
   nimmt es nur fuer seinen eigenen Reiter `#cmplz-manage-consent`, den wir
   nicht anfassen. **Darum der Vorsatz `#cmplz-cookiebanner-container`:**
   Er wiegt allein schon schwerer als alles, was das Plugin am Banner tut,
   und erlaubt dahinter den KURZEN Waehler statt eines Nachbaus seiner
   Kette. Enger als eine Klasse wird hier nichts, weiter als eine ID
   braucht es nichts.

   ⚠ **Und darum steht in diesem Abschnitt kein einziges `!important`.**
   Gezaehlt im ausgelieferten Blatt: **10 Regeln mit 18 solchen
   Deklarationen.** Sieben davon sitzen in `@media(max-height:400px)`
   (Handy im Querformat) und eine in `@media(max-width:425px)`; alle acht
   betreffen Groessen und Abstaende, die wir nicht anfassen. Die zwei
   uebrigen sind die Bediensperre
   (`body.cmplz-banner-active *` und `.cmplz-cookiebanner *` mit
   `pointer-events`) und gehen uns erst recht nichts an.

   **Nichts davon liegt auf unserem Weg.** Der einzige Beruehrungspunkt
   ist der Hoehendeckel weiter unten, und dort gewinnen wir ohne: Das
   `height:calc(100vh - 20px)` im Querformat traegt kein `!important`, und
   ein `max-height` deckelt eine `height` ohnehin.

   ── Der kuerzeste Weg: die Variablen des Plugins ──────────────────────

   Complianz faehrt Farben und Schriftgroessen ueber eigene Variablen und
   setzt sie im `:root`. **Wer sie am Banner selbst neu setzt, gewinnt
   ohne Gewichtsfrage** — geerbte Werte entscheiden sich nach Naehe und
   nicht nach Spezifitaet, und das Banner steht naeher als `html`. Das
   ersetzt rund ein Dutzend Regeln durch ein Dutzend Zeilen in EINER, und
   es ueberlebt eine Aktualisierung, die die Regeln umbaut und die
   Variablennamen behaelt.

   ⚠ **Die Werte wirken nur INNERHALB des Banners.** Der Reiter
   `#cmplz-manage-consent` liest dieselben Variablen, steht aber als
   eigenes Element daneben und behaelt darum die Werte aus `:root`. Wer
   ihn faerben will, faerbt ihn dort und nicht hier.

   Nur was keine Variable hat, bekommt darunter eine eigene Regel. */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  /* **Grund und Balken wie im Fuss.** `.fuss` traegt
     `border-top:4px solid var(--gelb)`; dieselbe Staerke und dieselbe
     Farbe stehen hier, nur in der Schreibweise des Plugins — sein
     `border-style:solid` steht schon da, die drei uebrigen Seiten bleiben
     auf 0. */
  --cmplz_banner_background_color:var(--nacht);
  --cmplz_banner_border_width:4px 0 0 0;
  --cmplz_banner_border_color:var(--gelb);
  /* Das Haus hat keine runden Ecken. Ein gerader 4px-Balken an einer
     12px-Rundung waere an beiden Enden abgeschnitten — die Rundung
     wegzunehmen ist hier die Bedingung fuer den Balken und keine eigene
     Geschmacksfrage. */
  --cmplz_banner_border_radius:0;

  /* **`--kalk` und nicht `--tx-haupt`**, obwohl die Rolle die richtige
     waere: `--tx-haupt` kippt unter `.papier` auf Dunkel, und das Banner
     bringt seinen dunklen Grund selbst mit, wohin das Plugin es auch
     haengt. Dieselbe Ueberlegung wie bei `.tafel`, die aus demselben
     Grund `#fff` schreibt. Gemessen: `.papier` sitzt an `.view` in `main`,
     das Banner am `body` — heute kann es gar nicht darin stehen. */
  --cmplz_text_color:var(--kalk);

  /* **Alle Groessen aus den zwei Stufen, keine neue Pixelzahl.** Das
     Plugin bringt 12, 14 und 15px mit; hier tragen Titel, Fliesstext und
     Kategorietitel `--tx-klein` (14), das Kleingedruckte `--tx-etikett`
     (11). Die Knopfgroesse ist die von `.btn`.

     ⚠ **Die Zeilenhoehe bleibt unangetastet**: Das Plugin rechnet sie als
     `calc(var(--cmplz_text_font_size) * 1.5)` und folgt der neuen Stufe
     von selbst. */
  --cmplz_title_font_size:var(--tx-klein);
  --cmplz_text_font_size:var(--tx-klein);
  --cmplz_link_font_size:var(--tx-etikett);
  --cmplz_category_body_font_size:var(--tx-etikett);
  --cmplz_category_header_title_font_size:var(--tx-klein);
  --cmplz_category_header_active_font_size:var(--tx-etikett);
  --cmplz_button_font_size:var(--tx-klein);

  /* **Akzeptieren ist der Hausknopf `.btn`**, Ablehnen der
     zurueckgenommene `.btn-k`: gelber Grund mit schwarzer Schrift gegen
     durchsichtigen Grund mit weissem Rahmen.

     ⚠ **Der Rahmen ist volles Weiss und nicht `rgba(255,255,255,.4)` wie
     bei `.btn-k`.** Das ist die einzige Abweichung von der Vorlage, und
     sie ist bestellt: Didi will beide Knoepfe gleich gut erreichbar, und
     ein zu 40 Prozent durchscheinender Rahmen ist genau die schwaechere
     Darstellung des Ablehnens, gegen die der Auftrag geschrieben ist.
     Volles Weiss fuehrt `.btn-k` selbst — im Zustand beim Ueberfahren. */
  --cmplz_button_accept_background_color:var(--gelb);
  --cmplz_button_accept_border_color:var(--gelb);
  --cmplz_button_accept_text_color:var(--dun);
  --cmplz_button_deny_background_color:transparent;
  --cmplz_button_deny_border_color:#fff;
  --cmplz_button_deny_text_color:var(--kalk);
  /* «Einstellungen ansehen» ist ein Textlink: kein Grund, kein Rahmen.
     Seine Farbe steht nicht hier, sondern bei der Linkform im Fuss. */
  --cmplz_button_settings_background_color:transparent;
  --cmplz_button_settings_border_color:transparent;
  --cmplz_button_border_radius:0;

  /* **Vier Farben, die auf hellem Grund entworfen waren.** Sie sind erst
     sichtbar, wenn jemand die Einstellungen aufklappt, und genau darum
     faellt es nicht auf: «Immer aktiv» stand in `green` (#008000, Kontrast
     2,4 auf `--nacht`), der Schalter in Blau (#3B29FF), seine Ruhelage in
     #555. **Wer den Grund dunkel macht, uebernimmt die Farben darauf** —
     sonst verlagert er einen Fehler dorthin, wo ihn niemand sucht. */
  --cmplz_category_header_always_active_color:var(--halb);
  --cmplz_slider_active_color:var(--gelb);
  --cmplz_slider_inactive_color:var(--halb);
  --cmplz_slider_bullet_color:var(--dun);

  /* ⚠ **Die Flaeche meldet ihren Akzent an, wie jede andere im Haus.**
     `:root` setzt `--akzent:var(--gelb)` und `.papier` kippt es auf
     Dunkel; der Ring liest nur das Token. Heute steht das Banner
     ausserhalb von `.papier` und braeuchte die Zeile nicht — **aber wohin
     das Plugin seinen Kasten haengt, entscheidet nicht dieses Blatt.**
     Ein Ring in `--papier-text` auf `--nacht` ist der Fehler, der nichts
     kaputt macht, sondern Nichts zeigt; die Warnung dazu steht bei
     `:focus-visible`. */
  --akzent:var(--gelb);
}

/* ── Die Knoepfe: die Stufen von `.btn` ───────────────────────────────
   Grund, Rahmenfarbe, Schriftgroesse und Radius stehen oben in den
   Variablen. Hier steht nur, wofuer das Plugin keine fuehrt — und jede
   Zahl kommt aus `.btn` in Abschnitt 60:

       Hoehe        48px      statt `min-height:45px`
       Rahmen       2px       statt `1px`
       Schrift      var(--b)  Knoepfe erben keine Schriftfamilie
       Gewicht      700       statt `500`
       Laufweite    .04em     das Plugin fuehrt keine

   ⚠ **`font-family` ist keine Verzierung, sondern die Bedingung.** Ein
   `<button>` erbt die Schrift des Dokuments nicht; ohne diese Angabe
   staenden die drei Knoepfe in der Systemschrift mitten in einem Banner,
   das sonst in Public Sans gesetzt ist. Der Fliesstext daneben braucht
   sie nicht — den erbt er vom `body`.

   ⚠ **Kein Boden von 44px noetig.** Abschnitt 148 setzt ihn fuer `.btn`
   und Verwandte; die Bannerknoepfe tragen die Klasse nicht, kommen aber
   mit 48px von selbst darueber — auf jeder Breite, nicht erst unter 768.

   ── Warum das seitliche Polster von `.btn` NICHT mitkommt ────────────

   ⚠⚠ **`padding:0 25px` waere hier dieselbe Zahl in einer anderen
   Rolle.** Bei `.btn` ist es der Abstand zwischen Kante und Beschriftung
   eines Knopfes, der so breit ist wie sein Inhalt. Die Bannerknoepfe sind
   gestreckt: Das Polster ist dort unsichtbar — die Beschriftung steht
   mittig — und hat nur noch EINE Wirkung, naemlich den Boden, unter den
   der Knopf beim Schrumpfen nicht faellt. **Und genau der bricht die
   gleiche Groesse.**

   Das Plugin stellt drei Knoepfe mit `white-space:nowrap` in einen
   Flexkasten von rund 486px Innenbreite, jeder mit `width:100%` als
   Ausgangsbreite. Sie schrumpfen gleichmaessig, bis einer auf seinen
   Inhalt aufsitzt; dann friert er dort ein und die anderen teilen den
   Rest. **«Einstellungen ansehen» ist mit Abstand das laengste Wortpaar
   und sitzt zuerst auf** — Akzeptieren und Ablehnen teilen danach
   denselben Rest und sind gleich breit. Mit je 50px zusaetzlichem Polster
   sitzen alle drei auf ihrem eigenen Inhalt auf, und dann sind sie so
   verschieden breit wie ihre Beschriftungen lang sind: **das laengere
   «Akzeptieren» waere breiter als «Ablehnen», und damit genau die
   Bevorzugung, gegen die dieser Auftrag geschrieben ist.**

   > **Eine Stufe gilt fuer eine Rolle, nicht fuer eine Eigenschaft.**

   Das Polster bleibt darum beim Plugin (`10px`). Es haelt die
   Beschriftung von der Kante, und mehr muss es hier nicht.

   ⚠ **Damit erzwingt «gleich gross» keine eigene Regel** — es haengt
   daran, dass die Boeden von Akzeptieren und Ablehnen unter dem
   gemeinsamen Rest bleiben. Wer die Beschriftungen aendert oder die
   Schrift vergroessert, prueft das nach. Unter 768px stellt das Plugin
   die Knoepfe ohnehin untereinander, und dort sind sie ueber die volle
   Breite gleich — die Frage stellt sich nur im Querformat und am
   Bildschirm.

   ⚠ **Im Handy-Querformat gewinnt das Plugin, und das bleibt so.** In
   `@media(max-height:400px)` setzt es `height:15vh !important` an
   denselben Knopf; unsere 48px verlieren dort. Es ist die einzige der 90
   geprueften Eigenschaftskollisionen, die wir nicht gewinnen, und sie
   trifft beide Knoepfe gleich — gleich gross bleiben sie also auch dort.
   Ein `!important` dagegenzusetzen hiesse, die Notfallverkleinerung des
   Plugins auf einem 400px hohen Fenster auszuhebeln. */
#cmplz-cookiebanner-container .cmplz-btn{
  height:48px;border-width:2px;
  font-family:var(--b);font-weight:700;letter-spacing:.04em;
  transition:background-color .16s,color .16s;
}
/* «Einstellungen ansehen» ist ein Verweis und kein Knopf: Grund und
   Rahmen sind ueber die Variablen schon weg, hier faellt das
   Knopfgewicht. Farbe und Gelb beim Ueberfahren holt er sich aus der
   Linkform im Fussabschnitt, wo er als vierter Waehler haengt.

   ⚠ **Seine Hoehe bleibt.** Er steht als drittes Kind in demselben
   Flexkasten; sie ihm zu nehmen hiesse, den Aufbau zu aendern, und der
   bleibt, wie das Plugin ihn liefert.

   ⚠ **Auch dieser Waehler steht in zwei Bloecken** — dort die geteilte
   Linkform, hier die Ausnahme von der Knopfregel darueber. Dieselbe
   Begruendung wie bei `.fu-tx button` im Fussabschnitt. */
#cmplz-cookiebanner-container .cmplz-view-preferences{font-weight:400;letter-spacing:0}
/* **«Einstellungen speichern» bekommt die Form des Ablehnens.** Das
   Plugin faehrt ihn ueber dieselben Variablen wie den Textlink — er waere
   sonst ein Knopf ohne Grund und ohne Rahmen, also unsichtbar. Er
   erscheint, sobald die Kategorien offen sind: Das Skript setzt
   `.cmplz-save-preferences` dann auf `display:block` und blendet
   «Einstellungen ansehen» aus (nachgelesen in `complianz.min.js`), und
   ein `display:none` im Blatt haelt dagegen nicht. */
#cmplz-cookiebanner-container .cmplz-save-preferences{
  background-color:transparent;border-color:#fff;color:var(--kalk)}

/* ⚠ **Fokus und Ueberfahren sind EIN Zustand und darum EINE Regel** —
   dieselbe Faltung wie bei `.btn` und `.mini` seit dem 25.09.2026,
   `outline:0` mit in der Klammer. Beide Knoepfe haben eine Flaeche; die
   Flaeche selbst zeigt den Fokus an, und der Ring daneben waere der
   zweite.

   ⚠ **In `@media(hover:hover)` wie `.btn`**, und das ist uebernommen und
   nicht entschieden: Auf einem Geraet ohne Zeiger faellt damit auch die
   Fokusfassung weg, und es bleibt der Ring aus `:focus-visible`. Wer das
   fuer `.btn` aendert, aendert es hier mit. */
@media(hover:hover){
  #cmplz-cookiebanner-container .cmplz-accept:hover,
  #cmplz-cookiebanner-container .cmplz-accept:focus-visible{
    background-color:var(--dun);color:var(--gelb);border-color:var(--gelb);outline:0}
  #cmplz-cookiebanner-container .cmplz-deny:hover,
  #cmplz-cookiebanner-container .cmplz-deny:focus-visible,
  #cmplz-cookiebanner-container .cmplz-save-preferences:hover,
  #cmplz-cookiebanner-container .cmplz-save-preferences:focus-visible{
    background-color:#fff;color:var(--dun);border-color:#fff;outline:0}
}

/* Der Titel in Archivo, in der Form der Hausueberschriften: dieselbe
   Breitenachse 106 und dasselbe Gewicht 700 wie bei `h2.sec` und den
   Kartentiteln. **Seine Groesse steht oben bei den Variablen** und ist
   `--tx-klein` — die gleiche Stufe wie der Fliesstext darunter. Er
   unterscheidet sich durch Schnitt und Gewicht, nicht durch Groesse;
   Didi hat fuer diesen Kasten genau zwei Stufen freigegeben. */
#cmplz-cookiebanner-container .cmplz-title{
  font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:700}

/* Die Linkform des Fusses kennt keinen Unterstrich; das Plugin setzt
   einen an `.cmplz-link` (0,3,0). Die Farbe steht im Fussabschnitt, der
   Strich muss hier weg — er ist eine Eigenschaft, die die Fussregel gar
   nicht fuehrt, weil `a{text-decoration:none}` in Abschnitt 00 sie dort
   nie noetig gemacht hat. */
#cmplz-cookiebanner-container .cmplz-link{text-decoration:none}

/* Die Kachel einer Kategorie stand in `rgba(239,239,239,.5)` — hell
   gedacht. Auf `--nacht` ist `--stein` dasselbe Verhaeltnis wie der Fuss
   zum Koerper: eine Stufe heller, keine eigene Farbe. */
#cmplz-cookiebanner-container .cmplz-category{background-color:var(--stein)}

/* Der Ring am Kategorieschalter stand in #245fcc. **Nur die Farbe
   wechselt, nicht der Zustand:** Das Plugin zeichnet ihn bei `:focus`,
   also auch nach einem Mausklick. Den auf `:focus-visible` umzustellen
   waere eine Aenderung am Verhalten und nicht an den Farben — sie steht
   im Bericht und nicht hier. */
#cmplz-cookiebanner-container input.cmplz-consent-checkbox:focus + .cmplz-label:before{
  box-shadow:0 0 0 2px var(--akzent)}

/* ── Am Handy nicht der ganze Bildschirm ─────────────────────────────
   **Gemessen am ausgelieferten Blatt, nicht geraten.** Drei Regeln
   zusammen machen aus dem Kasten eine Vollflaeche:

       .cmplz-cookiebanner       max-height: calc(100vh - 20px)
       @media(max-width:768px)   bottom:0; width:100%
       .cmplz-body               max-height: 55vh

   Die ersten beiden kleben ihn an die Unterkante und ueber die volle
   Breite, die dritte deckelt nur den Textteil. Kopf, Nachricht, drei
   gestapelte Knoepfe und die Verweiszeile fuellen auf einem kleinen
   Bildschirm den Rest — und sobald jemand die Kategorien aufklappt, steht
   der Kasten sicher am Deckel von `100vh - 20px`: **der ganze Bildschirm
   minus zwanzig Pixel.**

   ⚠ **Gedeckelt wird die Hoehe, nicht die Lage.** Der Kasten bleibt unten
   und ueber die volle Breite, wie das Plugin ihn stellt — ihn
   zurechtzuruecken waere eine Aenderung am Aufbau. Er bekommt nur eine
   Obergrenze, und sein eigenes `overflow-y:auto` macht daraus einen
   Rollbereich: **nichts verschwindet, die Seite bleibt sichtbar.**

   ⚠ **`72dvh`, und beide Haelften der Zahl sind geliehen.** Die 72 traegt
   das Haus schon zweimal in genau dieser Rolle — wie viel vom Fenster
   darf ein Bauteil nehmen: `.hero` mit `clamp(440px,72vh,700px)` und
   `.einbettung` mit `clamp(520px,72vh,760px)`. Das `d` kommt von
   `body{min-height:100dvh}` und aus demselben Grund, der dort steht: Am
   Handy faehrt die Adressleiste ein und aus, und `vh` rechnet zu hoch.
   Bei einem festen Kasten ueber dem Inhalt zaehlt das mehr als beim
   Koerper.

   ⚠ **619 und keine dritte Schwelle.** Das Plugin schaltet bei 768, das
   Haus bei 620 — «Handy» heisst hier unter 620, und die Schreibweise
   `max-width:619px` steht schon im Blatt. Zwischen 620 und 768 bleibt der
   Kasten, wie Complianz ihn stellt; dort ist der Bildschirm hoch genug,
   dass der Deckel ohnehin nicht greift. */
@media(max-width:619px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner{max-height:72dvh}
}

/* ── 145 Helle Seiten ─────────────────────────────────────── */
/* Startseite und Übersichten sind dunkel, Lese- und Handlungsseiten hell.
   Alles darunter ist reine Umfärbung, keine neue Struktur. */

.papier{background:var(--papier);color:var(--papier-text);--akzent:var(--papier-text);
  --tx-leise:var(--papier-halb);
  --tx-haupt:var(--papier-text);
  --tx-hervor:var(--papier-text);
  --akz-lesbar:var(--gold);
  --fl-karte:var(--papier-flaeche);
  --fl-tafel:var(--papier-flaeche);
  --fl-kasten:transparent;
  --li-fein:var(--papier-linie);}
.papier .zahlen{border-top:2px solid var(--gelb)}
.papier section{padding:clamp(46px,6vw,80px) 0}
.papier section+section{padding-top:0}
/* Das Wahlband traegt nur die Bedienung und gehoert an den
   Abschnitt, den es wechselt: oben das volle Sektionspolster, unten
   keines — den Abstand nach unten macht der Umschalter selbst.
   (0,2,1) und damit staerker als `.papier section`, nicht bloss
   spaeter. */
.papier section.wahlband{padding-bottom:0}
/* Die Bedienung selbst macht den Abstand nach unten. Der Reiterstreifen
   bringt ihn mit (.umschalter margin-bottom); das Auswahlfeld, das ihn
   bei Enge ersetzt, nicht — dort stiess die gelbe Linie der Ehrentafel
   sonst direkt an den Feldrand. */
.wahlband .wahlfeld{margin-bottom:28px}
.papier section:last-of-type{padding-bottom:clamp(56px,7vw,96px)}
/* ⚠⚠ **Hier stand einen Tag lang `.papier > .mitlauf{padding-bottom:
   clamp(56px,7vw,96px)}` — entfernt am 22.09.2026.**

   **Der abgeloeste Vermerk lautete:** «Unter 900 px haengt `fch.js` die
   Mitlaufspalte ans Ende der Papierflaeche. Damit ist sie deren letztes
   Kind — und sie ist keine `section`, holt sich also keine Zeile der Regel
   darueber. Gemessen: letzter Kasten bis Unterkante der weissen Flaeche
   0 px bei 375, 296 px bei 1440.»

   **Der Befund stimmte, die Behebung sass am falschen Ende.** Der Kasten
   hing direkt an der Papierflaeche, und dort fehlte ihm nicht nur das
   Schlusspolster, sondern auch der seitliche Rand: gemessen `left 0`,
   Breite 375 — er klebte am Bildschirmrand. `fch.js` haengt ihn seit dem
   22.09.2026 in ein `<section><div class="wrap">`, und damit kommen
   **beide** Masse aus den vorhandenen Regeln.

   > **Wer einem verschobenen Element eine einzelne Eigenschaft nachreicht,
   > hat die naechste noch vor sich.** Es fehlte nie ein Polster — es
   > fehlte die Bauform. */

/* **Die Flaeche setzt ihren Wert, nicht die Seite.** Die helle Seite gibt
   der Akzentschrift die Textfarbe; jede dunkle Flaeche darauf setzt sie
   zurueck auf Gelb.

   `.papier .ph` trifft ein Element: die Augenzeile auf `suche`. Sie stand bis
   zum 29.08.2026 dunkel auf dunklem Seitenkopf, Kontrast 1,00, im Bild nicht
   vorhanden.

   **`.papier .tafel` trifft nichts, hat einen Grund und bleibt darum stehen.**
   Das ist die erste der drei Einstufungen und nicht ein uebersehener Rest —
   die zweite hiesse «kein Grund erkennbar, vorlegen», die dritte «widerlegt,
   darf weg». Gemessen am 29.08.2026 ueber alle 32 Ansichten: **kein `.tafel`
   auf einer Papierseite.**

   **Der Grund nennt die Bauart, nicht das Element**, und traegt darum weiter,
   auch wenn sich der Bestand aendert: Eine dunkle Flaeche auf einer hellen
   Seite braucht ihren eigenen Akzentwert. Ohne diese Zeile bekaeme die
   naechste `.tafel` auf einer Papierseite die helle Schrift der Seite auf
   ihren dunklen Grund — **derselbe Fehler wie auf `suche`, nur an einer
   anderen Stelle.**

   **Sie darf weg, wenn `.tafel` als Bauform verschwindet** — nicht, wenn sie
   gerade auf keiner Papierseite steht. Wer sie beim Aufraeumen streicht, weil
   sie nichts trifft, stellt den Befund wieder her, den sie verhindert. */
.papier .ph,.papier .tafel{--akzent:var(--gelb)}
.papier .fliess ul.leitsatz li{border-bottom-color:var(--papier-linie)}
.papier .mehr{border-bottom-color:var(--gelb);
  position:relative}
/* Der gelbe Block wird gemalt, nicht gepolstert. Ueber padding hing seine
   Groesse am Kasten des Elements — eigenes Polster machte ihn groesser,
   ein Flexkasten mit align-items:stretch noch groesser, und die
   Pseudoklasse ueberschrieb fremdes Polster samt Beruehrflaeche. Als
   ::before folgt die Hoehe der Schrift statt dem Kasten: 1.72em sind bei
   14px genau die 24px von vorher. Ein background-image ginge nicht, ein
   Hintergrund wird am Rahmenkasten beschnitten und der Ueberhang von 8px
   waere damit nicht zu haben.
   Auf den dunklen Ansichten gibt es bewusst keinen Block: dort ist .mehr
   selbst gelb und traegt die Signalfarbe schon im Ruhezustand. Ein gelber
   Block waere keine Steigerung, sondern eine Wiederholung. */
/* z-index:0 macht den Verweis beim Hover zum eigenen Stapelkontext.
   Ohne ihn liegt das ::before mit z-index:-1 zwar hinter dem Text, aber
   auch hinter dem weissen Grund des Abschnitts — der wird spaeter
   gemalt und deckt es zu. Mit eigenem Kontext kann kein Vorfahr mehr
   darueber. */
/* `.papier .mehr:hover` steht einmal, fuenf Zeilen weiter unten. */
/* **Der Strich weicht dem Block.** Beide sind gelb und beide sagen
   dasselbe; nebeneinander stand unter der Flaeche noch ein schmaler
   Streifen, und in einem Abschnitt mit gelbem Oberstrich waren es drei
   gelbe Waagrechte auf zwei Zentimetern. **Ein Zeichen je Zustand.** */
.papier .mehr:hover{z-index:0;border-bottom-color:transparent}
.papier .mehr:hover::before{content:"";position:absolute;z-index:-1;
  left:-8px;right:-8px;top:50%;height:1.72em;transform:translateY(-50%);
  background:var(--gelb)}
.papier .zeile,.papier .tz{border-color:var(--papier-linie)}
/* **Die Wiederholung, die der Tokenumbau nicht ersetzen konnte — 02.09.2026.**

   Die Regel darueber ist (0,2,0) und schlaegt
   `.zeile:first-of-type{border-top:2px solid var(--gelb)}` (0,1,1). **Der
   gelbe Oberstrich der Statistiktabellen war grau.** Der Prototyp kennt den
   Konflikt und schreibt genau diese Zeile mit (0,2,1) dagegen; sie fiel beim
   Uebertragen weg, weil der Umbau auf Tokens die `.papier`-Fassungen
   ersetzte -- **und mit dem Wert auch die Spezifitaet, die daran hing.**

   Der erste Anlauf machte oben `border-bottom-color` daraus, weil `.zeile`
   und `.tz` nur einen Rand tragen und die Kurzform drei Seiten setzt, die es
   nicht gibt. Das war kleiner und hat den Strich gerettet -- **und drei
   unsichtbare Raender auf currentColor stehen lassen, wo der Prototyp Grau
   hat.** Aus einer Abweichung wurden zwei.

   > **Der Prototyp hatte die Antwort schon. Eine zweite zu erfinden hiess,
   > eine zweite Abweichung zu erfinden.** */
.papier .zeile:first-of-type{border-top:2px solid var(--gelb)}
/* **Eine Wiederholung, die der Tokenumbau nicht ersetzen konnte.**

   `.zo{color:var(--tx-leise)}` ist (0,1,0) und verliert gegen
   `.wissen p{color:var(--papier-text)}` (0,1,1) -- die Hinweiskaesten auf
   «Mitglied werden» standen darum in voller Textfarbe statt gedaempft.

   Im Prototyp gewinnt `.papier .zo{color:var(--papier-halb)}` mit (0,2,0),
   und die Farbdeklaration in `.wissen p` kommt dort nie zum Zug. **Hier
   steht dieselbe Regel mit dem Token als Wert** -- das ist die eine Stelle,
   an der die `.papier`-Fassung nicht bloss den Wert trug, sondern das
   Gewicht. Die Alternative waere, `color` aus `.wissen p` zu streichen; das
   waere eine Deklaration weniger, aber auch eine Abweichung vom Prototyp an
   einer Stelle, wo er sich nicht erklaert. */
.papier .zo{color:var(--tx-leise)}
.papier td{border-color:var(--papier-linie)}
.papier .nk,.papier .gross,.papier .klein a{color:var(--papier-text)}
@media(hover:hover){.papier .nk:hover,.papier .klein a:hover{background:var(--nav-beruehrt)}}
.papier .jahrzehnt{color:var(--papier-text)}
.papier .jahrzeile{border-bottom-color:var(--papier-linie);color:var(--papier-text)}
@media(hover:hover){.papier .jahrzeile:hover{background:var(--nav-beruehrt)}}
@media(max-width:899px){.papier .kapitel.folge{border-top-color:var(--papier-linie)}}
/* Der Kartentitel bleibt beim Zeigen SCHWARZ. `--gold` auf `--nav-beruehrt`
   misst 4,58 — knapp ueber der Schwelle und optisch gelblich auf gelb.
   Schwarz misst 17,28. **Was den Zeigerzustand anzeigt, ist die Flaeche; sie
   ist deutlich genug, und der Titel muss nicht mitmachen.**
   Auf dunklem Grund bleibt `a:hover .card{color:var(--gelb)}` richtig: dort
   traegt die Flaeche nichts, weil sie sich kaum aendert. */
@media(hover:hover){.papier .nk:hover .card,.papier .gross a:hover .card,.papier .klein a:hover .card{color:var(--papier-text)}}
.papier .person-init{background:var(--tafel);color:var(--gelb)}
@media(hover:hover){.papier a.person:hover{background:var(--nav-beruehrt)}}
/* **Der Hover-Zwilling ist am 26.08.2026 gefallen - widerlegt, nicht
   geteilt.** Er stand als Vorsorge gegen `.papier a.person:hover`, das eine
   hoehere Spezifitaet hat. Diese Regel verlangt aber, dass das Element selbst
   ein `<a>` ist, und `.person.schmal` ist an allen 14 Fundstellen ein `<div>`
   - Verweiskarten heissen `a.person.person-verweis` und tragen nie `schmal`.
   Es gab nichts zurueckzunehmen. Der Ruheteil bleibt: er ueberschreibt
   `.papier .person` und ist dafuer vollstaendig. */
.papier .person.schmal{background:none}
.papier .person.vakant .person-init{border-color:var(--papier-linie)}
.papier .person-rolle{color:var(--gold-flaeche)}
.papier .person-tel a{color:inherit}
@media(hover:hover){.papier a.person:hover .person-mail{color:var(--papier-text)}}
.papier .info{border:0;border-top:3px solid var(--gelb);padding:20px 0 0;color:var(--papier-text)}
/* Nur Textlinks bekommen die Unterlinie — Knöpfe und Karten bringen ihre eigene Form mit */
/* **Der Verweis im Kasten braucht seine Auszeichnung wieder.** Solange die
   Karten schwarz waren, trug `.stufe p a` eine eigene Regel — weiss auf gelber
   Kante. Sie ist mit der Farbe gefallen, und damit stand «Anfrage weiter
   unten» als blosser Text da: ein lebender Verweis, den nichts als Verweis
   ausweist. Der Pruefstand hat ihn als P1 gemeldet, bevor ihn jemand suchen
   musste.

   **Die Karte bekommt darum dieselbe Regel wie `.info`** — es ist derselbe
   Fall: heller Kasten auf Papier. `.mehr` ist ausgenommen, weil es seine
   eigene fuehrt. */
/* -- Der Verweis im Satz: eine Fassung statt drei -----
   **Vier Fassungen von «schwarz mit gelbem 2px-Strich auf hell» standen
   nebeneinander**, und drei davon trennte nichts, was jemand entschieden
   haette:

     .papier .mehr           700 . 14px . 3px Abstand zum Strich
     .papier .info a         700 . 17px . 0px
     .papier .karte a        400 . 17px . 0px
     .papier .fliess p a     400 . 17px . 1px

   Form 3 und 4 unterschieden sich um EINEN Bildpunkt. Form 2 und 3 nur im
   Schriftschnitt, bei gleicher Groesse. Das sind keine Entscheide, das ist
   Sediment aus drei Auftraegen.

   **Zusammengelegt zu einer Fassung fuer den Verweis im Satz.** Sie erbt
   Groesse und Schnitt vom Satz, in dem sie steht - darum steht hier weder
   `font-size` noch `font-weight`. Ein Verweis mitten in einem Absatz darf
   nicht anders gross sein als der Absatz.

   **`.mehr` bleibt getrennt, und zwar mit Grund.** Er ist keine Stelle im
   Satz, sondern eine eigene Zeile mit Pfeil - «Alle News ->». Er traegt
   darum seine eigene Groesse und seinen eigenen Zeigerzustand, den gelben
   Block hinter dem Text. **Zwei Rollen, zwei Fassungen; nicht vier
   Fassungen fuer zwei Rollen.**

   **Sichtbare Folge, gemeldet und nicht versteckt:** Die 25 Verweise in
   Infokaesten verlieren `font-weight:700`. Fett UND unterstrichen ist eine
   doppelte Auszeichnung fuer eine Sache; der Strich allein traegt, und im
   Fliesstext daneben stand er seit je allein.

   **Der Zeigerzustand loest den Kontrastbefund mit.** Bisher ging der
   Verweis im Fliesstext beim Darueberfahren von 19,69 auf 5,10 - er wurde
   blasser statt deutlicher. Jetzt bleibt die Schrift schwarz und der Strich
   wird dicker: 19,69 bleibt 19,69. */
/* **Die Kontaktzeile ist am 28.08.2026 dazugekommen.** Sie war die vierte
   Fassung: Gold statt Textfarbe, 700 statt geerbt, kein Strich — also Farbe
   UND Fett als Auszeichnung, und ausgerechnet ohne den Traeger, der ueberall
   sonst die Arbeit macht. Auf der Kontaktseite stand die Telefonnummer damit
   lauter da als der Vereinsname in 46px darueber.

   **Das Zeichen links sagt schon, was fuer ein Verweis das ist.** Eine
   Mailadresse mit einem Briefumschlag davor braucht keine zweite Ansage. */
.papier .info a:not(.btn):not(.person):not(.mehr),
.papier .karte a:not(.btn):not(.person):not(.mehr),
.papier .kontaktzeile a:not(.btn),
.papier .fliess p a:not(.mehr):not(.btn),
.papier .fliess li a:not(.mehr):not(.btn){color:var(--papier-text);
  font-weight:inherit;
  text-decoration:underline;text-decoration-color:var(--gelb);
  text-decoration-thickness:2px;text-underline-offset:.18em}
/* **`color` stand hier nicht — nachgetragen am 02.09.2026.**

   Die vier anderen Deklarationen waren da, die Farbe fehlte. Damit blieb
   `.kontaktzeile a{color:var(--gelb)}` (0,2,0) stehen: **auf der
   Kontaktseite und im Impressum war jeder Verweis gelb**, und damit genau
   die vierte Fassung zurueck, die der Absatz darueber abgeschafft hat.

   > **Der Verweis soll sich durch den Unterstrich hervortun, nicht durch die
   > Farbe.** Auf Papier ist Schwarz die Textfarbe, und ein farbiger Verweis
   > waere ein zweites Signal neben dem Strich.

   Warum die Farbe allein fehlte: Sie war die einzige der fuenf, fuer die es
   ein Token zu geben schien -- `--tx-haupt` ist auf `.papier` genau
   `--papier-text`. Nur setzt das Token niemand auf `a`, und `a{color:inherit}`
   erbt von `.kontaktzeile a`. **Eine Deklaration, die scheinbar doppelt
   ist, weil ein Token denselben Wert traegt, ist nicht doppelt, solange
   niemand das Token an dieser Stelle setzt.** */

/* **Das Polster steht erst ab 768, und das ist kein Schoenheitsfehler.**
   Der erste Anlauf setzte `padding-bottom:3px` ohne Bedingung. Unterhalb 768
   sorgen `.info li a:not(.btn)` und `p > .tel` mit `padding-block:13px` dafuer,
   dass diese Verweise die 44px Beruehrflaeche erreichen - und die neue Regel
   wiegt (0,4,1) gegen deren (0,2,2), gewann also und schnitt die untere
   Haelfte weg. **Aus 44px wurden 34px an sechzehn Stellen.** Gemeldet hat es
   der Pruefstand, nicht das Auge.

   Die drei Bildpunkte sind eine typografische Feinheit fuer den Zeiger; die
   dreizehn sind eine Bedingung fuer den Finger. Sie widersprechen sich nicht,
   sie gehoeren zu verschiedenen Breiten. */
@media(min-width:768px){
  @media(hover:hover){.papier .info a:not(.btn):not(.person):not(.mehr):hover,
  .papier .karte a:not(.btn):not(.person):not(.mehr):hover,
  .papier .kontaktzeile a:not(.btn):hover,
  .papier .fliess p a:not(.mehr):not(.btn):hover,
  .papier .fliess li a:not(.mehr):not(.btn):hover{
    text-decoration-thickness:4px;
  -webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}}
}
/* Nur gestapelte Infoblöcke in der Seitenspalte, nicht im Raster */
.papier .zwei .info+.info{margin-top:34px}
/* **Und schmal hat die Spalte keinen `.zwei`-Vorfahren mehr.**

   ⚠ **Nachgetragen am 22.09.2026, als die Anlassseite zwei Kästen
   uebereinander bekam.** Die Regel eine Zeile hoeher hat es nie getroffen,
   weil /fanion500/ dort nur EINEN Kasten stehen hat -- **ein Abstand
   zwischen zwei Dingen faellt nicht auf, solange es nur ein Ding gibt.**

   `fch.js` haengt `[data-ans-ende]` unter 900 px ans Seitenende. Gemessen an
   der Anlassseite: bei 1440 px steht die Spalte als `SECTION > .wrap > .zwei
   > .mitlauf`, bei 375 px als `MAIN > .mitlauf`. **Sie verliert dabei nicht
   nur `.zwei`, sondern auch `.papier`** -- darum traegt diese Regel den
   Praefix nicht, den ihre Nachbarin traegt. Mit ihm bliebe sie wirkungslos.

   Gemessen vorher, 2 von 2 lokalen Anlassseiten: **34 px breit, 0 px
   schmal.** Die 34 sind keine neue Zahl, sondern dieselben, die eine Zeile
   hoeher stehen.

   Die Ueberschneidung im breiten Fall ist gewollt: Beide Regeln setzen
   denselben Wert, und die zweite hier zu entfernen hiesse, `.info`-Kaesten
   ausserhalb einer `.mitlauf` ihren Abstand zu nehmen. */
.mitlauf .info+.info{margin-top:34px}

/* **Ein Verweisabsatz, der kein Blockende mehr ist.**

   `p:has(> .mehr:only-child){margin-top:20px}` steht weiter oben und ist als
   **Blockende** begruendet -- «ein Absatz, der nichts enthaelt ausser dem
   weiterfuehrenden Verweis». Deshalb traegt er den Abstand oben und keinen
   unten: Nach ihm kam nichts mehr.

   ⚠ **Seit dem 22.09.2026 kommt auf der Anlassseite etwas.** «In meinen
   Kalender →» schliesst dort den Kopfteil ab, und darunter beginnt in
   derselben Spalte der Inhalt aus dem Editor. Gemessen, 2 von 2 lokalen
   Anlassseiten, breit wie schmal: **0 px** zum ersten Absatz -- der Absatz
   steht nicht in `.fliess` und faellt damit auf `*{margin:0}` zurueck. Auf
   /fanion500/ stehen aufeinanderfolgende Absaetze derselben Spalte 17 px
   auseinander.

   > **Eine Regel, die «zuletzt» meint, muss «zuletzt» auch pruefen.** Sonst
   > gilt sie weiter, wenn der Platz sich geaendert hat, und schweigt genau
   > da, wo sie gebraucht wird.

   Der Waehler ist eng gefasst, und das ist gemessen. Ohne Vorspann trifft
   `p:has(> .mehr:only-child):not(:last-child)` ueber 15 abgerufene Adressen
   **18 von 34** Verweisabsaetze -- darunter «Kontakt aufnehmen →» im Fuss
   JEDER Seite.

   ⚠ **`div` und `div:not([class])` sind nicht dasselbe, und der erste
   Versuch nahm den falschen.** `.zwei > div` meint auch `.zwei > .fliess`:
   Ueber 62 lokale Adressen in zwei Breiten traf der Wähler **6 Stellen auf 3
   Seiten** statt 4 auf 2 -- die dritte war «Zur Sportanlage →» auf /verein/.
   Dort waeren aus 17 px 20 px geworden. **Sichtbar geaendert haette sich
   nichts** (die Luecke zum `.abschluss` misst vorher wie nachher 40 px, weil
   dessen eigener Rand groesser ist) -- **und genau das ist der Grund, es
   trotzdem zu richten: Eine Regel, die nur zufaellig nichts anrichtet, sagt
   nichts darueber, was sie auf der naechsten Seite anrichtet.**

   Die linke Anlassspalte ist ein `<div>` ganz ohne `class`-Attribut, und
   zwar mit Grund (siehe `single-fch_anlass.php`). Nachgemessen: Attribut
   vorhanden auf /verein/ (`fliess`), nicht vorhanden auf der Anlassseite --
   der enge Wähler trifft dort 1, hier 0.

   20 px ist die Zahl, die zwei Zeilen hoeher schon steht. */
.zwei > div:not([class]) > p:has(> .mehr:only-child):not(:last-child){margin-bottom:20px}
.papier .info ul li{padding:9px 0;border-bottom:1px solid var(--papier-linie)}
.papier .info ul li:last-child{border-bottom:0}
.papier .spt{border-bottom-color:var(--papier-linie)}
/* **Der Rand haengt am Grund, nicht am Ort** - siehe die Begruendung bei
   `.spl` weiter oben. Ohne diesen einen Bildpunkt gibt es auf Papier keine
   Kachel mehr, nur noch Text. */
.papier .spl{background:#fff;border:1px solid var(--papier-linie);color:#2A2A26}
.papier .filt .mini{border-color:rgba(11,11,10,.25)}
.papier .umschalter{border-bottom-color:var(--papier-linie)}
@media(hover:hover){.papier .umschalter .mini:hover,.papier .umschalter .mini:focus-visible{color:var(--papier-text)}}
.papier .umschalter .mini[aria-current="true"]{border-bottom-color:var(--gelb)}
/* ⚠ **Die Zeigerregel der Chips steht weiter unten**, hinter der
   Gewaehlt-Regel — siehe dort (24.09.2026).

   > ~~`@media(hover:hover){.papier .filt .mini:hover{border-color:
   > var(--papier-text);color:var(--papier-text)}}`~~ */
/* ⚠ **Auf Papier dasselbe — und `aria-current` steht jetzt daneben.**

   > ~~`.papier .filt .mini[aria-pressed="true"]{background:var(--gelb);
   > border-color:var(--gelb)}`~~ — nur der Knopf, nicht der Verweis.

   **Die zwei Orte benutzen verschiedene Elemente:** `/teams/` filtert mit
   `<button aria-pressed>`, `/suche/` mit `<a aria-current>` — ein Verweis
   hat keinen gedrueckten Zustand, er hat eine Adresse. Solange beide gelb
   waren, fiel nicht auf, dass diese Regel nur den Knopf traf und der
   Verweis seine Farbe von der dunklen Grundfassung nahm. Mit zwei
   verschiedenen Faellen wuerde daraus ein Unterschied, den niemand
   bestellt hat. */
.papier .filt .mini[aria-pressed="true"],
.papier .filt .mini[aria-current]{background:var(--papier-flaeche);color:var(--dun)}
@media(hover:hover){
  .papier .filt:not(.segleiste) .mini:hover,
  .papier .filt:not(.segleiste) .mini:focus-visible{
    background:var(--gelb);border-color:var(--gelb);color:var(--dun)}
}
/* Die Segmentleiste auf Papier. **Eine Zeile statt vier**: Rahmen und
   Trennstriche lesen beide `--seg-linie`, also genuegt es, das Token
   umzusetzen. Die Staerke ist die des Chips daneben (.25) — nicht
   `--papier-linie` (.14): Ein gemeinsamer Rahmen muss die Leiste als EIN
   Ding zusammenhalten, eine Tabellenlinie muss nur trennen.

   Die zwei uebrigen Zeilen sind noetig, weil `.papier .filt .mini:hover`
   und `.papier .filt .mini[aria-pressed]` weiter oben die Randfarbe setzen
   und dabei den Trennstrich mitnehmen. */
.papier .seitenzahlen .nav-links,
.papier .filt.segleiste{--seg-linie:rgba(11,11,10,.25)}
/* ⚠ **`aria-current` steht seit dem 23.09.2026 daneben.** Auf /news/
   filtern Verweise und keine Knoepfe, und der Zustand eines Verweises
   heisst `aria-current`. Ohne ihn traefe die Gewaehlt-Regel die gewaehlte
   Rubrik gar nicht — sie stuende weiss wie die ungewaehlten.

   > ~~«Ohne diesen Waehler naehme die Zeigerregel zwei Zeilen hoeher
   > (0,5,0) der gewaehlten Rubrik beim Ueberfahren ihr Gelb — die Regel mit
   > dem Gelb traegt sonst nur (0,4,0).»~~ — 24.09.2026: Der Zeiger nimmt dem
   > Gewaehlten seit heute nichts mehr weg, er gibt ihm das Gelb. Der Waehler
   > bleibt noetig, sein Grund ist ein anderer geworden.

   **Der Grauwert und die Reihenfolge stehen bei der dunklen Fassung
   begruendet** (bei `.filt.segleiste .mini[aria-pressed]`); es ist derselbe
   Wert und dieselbe Ordnung. **Sichtbar wird die Aenderung hier**: Alle vier
   Leisten stehen heute in einem `.view.papier` — `/news/` (`home.php`),
   `/spiele/`, `/anlaesse/` und die Teamseite —, am 24.09.2026 nachgesehen:
   die ersten drei am Bildschirm, die Teamseite an ihrer Vorlage
   (`single-fch_team.php`, `div#v-team.view.papier`). Die dunkle Fassung ist damit Vorsorge und kein
   zweiter Anblick; sie muss trotzdem stimmen, weil die naechste Leiste auf
   dunklem Grund sonst still gelb bliebe. */
.papier .seitenzahlen .page-numbers[aria-current],
.papier .filt.segleiste .mini[aria-pressed="true"],
.papier .filt.segleiste .mini[aria-current]{
  background:var(--papier-flaeche);color:var(--dun);border-color:var(--seg-linie)}
/* Der Zeiger steht NACH dem Gewaehlten — beide (0,5,0), die spaetere Regel
   gewinnt; so antwortet er auch auf dem gewaehlten Feld.

   > ~~`background:rgba(11,11,10,.06);color:var(--papier-text)`~~ —
   > 24.09.2026. Das war ein eigener Grauwert nur fuer den Zeiger auf Papier;
   > bestellt ist der Gelbton des Themes, und zwar derselbe wie auf dunklem
   > Grund. `--dun` und `--papier-text` sind zeichengleich (#0B0B0A) —
   > geschrieben steht `--dun`, weil die Zeile damit wortgleich mit den
   > uebrigen Gelb-Zeigern ist. */
@media(hover:hover){.papier .seitenzahlen a.page-numbers:focus-visible,
.papier .seitenzahlen a.page-numbers:hover,
.papier .filt.segleiste .mini:focus-visible,
.papier .filt.segleiste .mini:hover{
  background:var(--gelb);color:var(--dun);border-color:var(--seg-linie)}}
.papier .fe input,.papier .fe select,.papier .fe textarea{background:#fff;border-color:rgba(11,11,10,.22)}
@media(hover:hover){.papier .btn:hover,.papier .btn:focus-visible{background:var(--papier-text);color:var(--gelb);border-color:var(--papier-text);outline:0}}
.papier .btn-k{border-color:var(--papier-text)}
@media(hover:hover){.papier .btn-k:hover,.papier .btn-k:focus-visible{background:var(--papier-text);color:#fff;border-color:var(--papier-text);outline:0}}
/* **Das Symbol stand auf dem Handy 10 px zu hoch, und schuld ist die
   Berührfläche.** Gemessen auf `kontakt` bei 390: Symbolmitte gegen Mitte
   der ersten Textzeile **−9,5px** bei der Mailzeile und **−13,5px** bei der
   Telefonzeile. Bei 1440 sind es −0,5.

   **Die Ursache steht nicht in der Zeile, sondern unter ihr.** Der Verweis
   traegt ab 1000px abwaerts `padding-block:9px`, damit die Beruehrflaeche
   44px hoch wird; der Text sitzt in deren Mitte. `align-items:flex-start`
   klebte das 19px-Symbol dagegen an die Oberkante des 44px-Kastens. **Der
   Fehler war auf dem Bildschirm unsichtbar, weil dort das Polster fehlt.**

   Die Beruehrflaeche bleibt unangetastet — sie ist der Grund des Befunds und
   trotzdem richtig.

   **a) Feste 24px-Spalte statt Flex mit Luecke.** Der Textanfang wandert von
   30 auf 32px. **Nachgemessen fluchten die Textanfaenge schon vorher** — auch
   die zweite und dritte Zeile des Adressblocks beginnen bei 30 und nicht
   unter dem Symbol, weil der ganze Block EIN Flex-Element ist und seine
   Zeilen an dessen linker Kante umbrechen. Die Spalte behebt also nichts,
   **sie sichert:** Sie haelt die Kante auch dann, wenn eines Tages ein
   Symbol anderer Breite dazukommt. Das ist der Grund, den sie hat — nicht
   der, den sie zu haben schien.

   **b) Symbol auf `--papier-halb` und 17px.** Es ist ein Wegweiser und kein
   Inhalt; in der Personenkarte und im Fussbereich sind die Symbole laengst
   gedaempft. **Kontrast nachgerechnet: #5A5A55 auf Weiss ergibt 6,93** — der
   Grund hinter allen siebzehn Zeichen ist gemessen weiss. Das traegt beide
   Schwellen, die 4,5 fuer Text und die 3,0 fuer grafische Bedienelemente,
   und die Frage, welche gilt, muss gar nicht entschieden werden. **Der
   Vollstaendigkeit halber ist sie beantwortet: Dekoration.** Die Zeichen
   tragen kein `role` und kein `aria-label`, stehen ausserhalb des Verweises,
   und der Verweis daneben nennt die Adresse im Klartext.

   **c) `margin:0` steht hier zusaetzlich zum Auftrag.** Die Grundregel
   `.kontaktzeile .ic` fuehrt `margin:3px 0 0` — sinnvoll bei
   `align-items:flex-start`, aber unter `align-items:center` schiebt sie das
   Zeichen um 1,5px nach unten. Gemessen: mit dem Rand bleibt ein Versatz von
   **+2,1px**, ohne ihn **+0,6px**. Der Auftrag wollte Mitte auf Mitte; das
   ist der Wert, der sie trifft.

   **d) `:has(br)` fuer den mehrzeiligen Fall, und er trifft alle.** Gezaehlt
   ueber 32 Ansichten bei 390 und 1440: **zwei** mehrzeilige Kontaktzeilen,
   der Adressblock auf `kontakt` und auf `anlage`, **beide mit `<br>`
   gebaut** — keine mit `<p>` oder sonst einer Struktur. Eine Klasse statt
   der Struktur-Abfrage braucht es darum nicht. `margin-top:4px` setzt das
   Zeichen auf die optische Mitte der ersten Zeile; dort steht es mit −0,5px,
   also unveraendert richtig. */
.papier .kontaktzeile{display:grid;grid-template-columns:24px 1fr;
  align-items:center;gap:0 8px}
.papier .kontaktzeile .ic{width:17px;height:17px;justify-self:center;margin:0;
  color:var(--papier-halb)}
.papier .kontaktzeile:has(br) .ic{align-self:start;margin-top:4px}
/* **Ohne Etikett dazwischen bringt die Personenkarte den Abstand selbst.**
   In den fuenf uebrigen Ansprechperson-Kaesten steht «Ansprechperson»
   zwischen Kontaktzeile und Karte und traegt ihn; im Kasten «Wer Auskunft
   gibt» sagt es die Ueberschrift, also fehlt das Etikett — und mit ihm der
   Abstand. */
.info .kontaktzeile + .person{margin-top:18px}
.papier .abschluss{border-top-color:var(--papier-linie)}
/* Ehrentafel: keine Fläche, die Wirkung kommt aus Abstand und Ruhe.
   Eine gelbe Linie eröffnet den Block, die Zeilen trennt eine ruhige Linie. */
.ehrentafel{margin-top:clamp(44px,5vw,60px);padding-top:clamp(26px,3vw,36px);border-top:2px solid var(--gelb)}
/* Ein Gruppenkopf steht über seinen Einträgen, nicht neben ihnen. Ohne
   Zusatzabstand liegt die Trennlinie des ersten Eintrags so nah, dass sie den
   Kopf unterstreicht: gemessen bei 390px 29px zum ersten Eintrag gegen 17px
   zwischen zwei Einträgen. Mit 1.1em sind es 35:17.
   Der Abstand löst das, was vorher eine Einleitungszeile lösen sollte — Text,
   der nur wiederholt hätte, was Augenzeile und Titel schon sagen. */
.gruppenkopf + details.ressort{margin-top:1.1em}
/* ── ⚠⚠ DIE 1.1em KOPFPOLSTERUNG IST AM 20.09.2026 ENTFALLEN ───────────
   Hier stand seit dem 13.09.2026:

     > ~~«Nicht ueber der Ueberschrift, sondern UNTER dem Raster — und an
     > drei Stellen gleichzeitig. Der Medienblock ab 1000px setzt alle drei
     > auf null: `.ressort-inh` padding-bottom 26 → 0, `.ressort` border-top
     > 1 → 0, `.ressort-kopf` padding-top 16 → 0. … Nur hat niemand den
     > Abstand ersetzt, der dabei mit verschwand.»~~
     > `@media(min-width:1000px){`
     > `  .ressort:not(.anl):not(:first-of-type) > .ressort-kopf{padding-top:1.1em}`
     > `}`

   Der Vermerk trug den Titel «DER FUENFTE FALL DERSELBEN ART» und zaehlte
   richtig: Die Zeile darueber ist ein Nachbarwaehler und erreicht nur die
   ERSTE Klappliste nach dem Gruppenkopf. **Die Zaehlung bleibt gueltig, der
   Schluss daraus war falsch.**

   **Die Beobachtung stimmte, der Ort war falsch.** Was der Medienblock ab
   1000px wegnimmt, ist das Klickpolster einer Schaltflaeche — ein Innenmass.
   Der Abstand ZWISCHEN zwei Bereichen ist ein Aussenmass, und er fehlte aus
   einem anderen Grund: **Der Prototyp gibt jedem Bereich eine eigene
   `<section>`, das Theme fuehrt vier in einer.** Nicht das Kopfpolster
   fehlte, sondern das Abschnittspolster.

   Gemessen am 20.09.2026 an JEDER Stelle, an der die Regel griff — sie lag an
   jeder einzelnen daneben, und nicht einmal in dieselbe Richtung. Sichtbarer
   Abstand an gleicher Bezugskante, 1440:

   ```
                                      vorher   nachher   Prototyp
   /vorstand/  operative Bereiche      18.70     80.00      80.00   zu klein
   /vorstand/  Ehrentafel              72.69     54.00      54.00   zu gross
   /datenschutzerklaerung/  13 Stueck  65.03     29.34      29.34   zu gross
   ```

   ⚠ **Die Zahl der Stellen haengt am Datenstand, nicht am Code:** auf dev 17
   (drei operative Bereiche, Ehrentafel, 13 Datenschutz), im lokalen Stapel 16,
   weil dort der Bereich «Fussball» fehlt. Wer nachzaehlt und 16 findet, hat
   nicht weniger gemessen, sondern weniger Daten.

   ⚠ Bei /datenschutzerklaerung/ faellt mehr weg als die 18.70: Das Kopfpolster
   hinderte zugleich den Aussenabstand des Folgetitels am Zusammenfallen mit dem
   Absatz darueber. 18.70 + 17.00 = 35.69 — darum 65.03 statt 47.74.

   > **Eine Regel, die an 17 von 17 Stellen danebenliegt, ist keine Regel mit
   > Ausnahmen.**

   Sie faellt ersatzlos weg. Die drei zu kleinen Abstaende holt die Zeile
   darunter; die vierzehn zu grossen waren allein ihr Werk und stimmen,
   sobald sie fort ist. */
/* **Der Bereich traegt seinen Abstand selbst, weil sein Abschnitt ihn nicht
   mehr traegt.**

   `.papier section{padding:clamp(46px,6vw,80px) 0}` gibt jedem Abschnitt
   seinen Rhythmus. Im Prototyp steht jeder Bereich in einer eigenen
   `<section>` und bekommt ihn darum geschenkt; hier stehen vier in einer, und
   zwischen ihnen faellt er aus. **Derselbe Ausdruck, nicht ein aehnlich
   aussehender Wert:** 80 und 46 sind nicht zwei huebsche Zahlen, sondern
   genau das Polster, das an dieser Stelle fehlt. Gemessen danach 80.00 bei
   1440 und 89.00 bei 375 — Prototyp 80.00 und 89.00.

   ⚠ **`.wrap >` ist tragend, nicht schmueckend.** Ein Abschnitt ist
   `section > .wrap`; so liest es schon `section:has(> .wrap > .ressort)`
   weiter unten. Nur ein Bereich UNMITTELBAR im Abschnitt verliert das
   Abschnittspolster. Ein Klappblock eine Stufe tiefer — im `.fliess` der
   Datenschutzseite, in der `.ehrentafel` — gehoert zu einem Textkoerper oder
   einer gerahmten Tafel, die ihren eigenen Rhythmus mitbringen. **Der
   Prototyp sagt dasselbe:** dort 29.34 und 54, hier 80. Ohne `.wrap >`
   erfaende die Regel an 14 Stellen einen Abstand, den es nicht gibt.

   ⚠ **`:not(:first-of-type)` und nicht `+ details`.** Der Nachbarwaehler
   waere kuerzer und braeche beim naechsten `<h4>`, das jemand zwischen zwei
   Bereiche schiebt. **Das Projekt zaehlt diesen Fehler inzwischen fuenfmal**
   — nachzulesen beim Vermerk «Der Abstand haengt an der Ueberschrift, nicht
   an ihrem Vorgaenger» bei `#v-spieler .tabelle-scroll + .sec`.

   ⚠ **Der erste Bereich eines Abschnitts bleibt aussen vor.** Er bekommt
   KEINEN Abstand nach oben — den traegt sein Abschnitt. Gemessen auf
   /vorstand/: «Der Vorstand» margin-top 0, «Administration» unveraendert bei
   132.88 (1440) und 133.16 (375), beide Male genau der Prototyp.

   ⚠ `:not(.anl)` bleibt aus dem alten Grund stehen: auf /anlaesse/ stehen
   vier Klappbloecke als Geschwister im `.wrap`, und dort ist die Liste das
   Bauteil, nicht der Abschnitt. */
.wrap > details.ressort:not(.anl):not(:first-of-type){margin-top:clamp(46px,6vw,80px)}
/* Hier stand bis zum 20.09.2026:

     ⚠ **Dieselbe Rolle eine Stufe tiefer:** der Gruppentitel nach einem Raster
     IM selben Ressort. Er liegt innerhalb des Polsters oben und braucht darum
     einen eigenen Wert — und zwar auf jeder Breite, dort stand nie einer.
     .ressort-inh > .sec:not(:first-child){margin-top:1.1em}

   **Ihre zwei Traeger waren die Gruppentitel der Organisationsseite**, und die
   tragen seither `.grp` statt `.sec`. `.grp:not(:first-child)` setzt ihren
   Abstand jetzt selbst, auf 30px statt 1.1em — der Wert des Prototyps. Ueber
   53 gemessene Adressen — alle 25 Seiten und je vier Einzelansichten der
   sieben Inhaltsarten — stand `.sec` an keiner weiteren Stelle als direktes
   Kind eines `.ressort-inh`. Die Regel ist entfernt und nicht auskommentiert:
   eine Regel ohne Traeger meldet in keiner Pruefung etwas und wird beim
   naechsten Lesen fuer benutzt gehalten. */
/* Eröffnet die Tafel einen eigenen Abschnitt, trägt dieser den Abstand schon —
   sonst stapeln sich Abschnittspolster und Aussenabstand zu einer Lücke */
.wrap > .ehrentafel:first-child{margin-top:0}
.ehrenpraesident{font-size:var(--tx);margin-bottom:clamp(38px,5vw,54px)}
.ehrenliste{display:grid;grid-template-columns:1fr;gap:0}
.ehrenliste .person-name{padding:13px 22px 13px 0;font-size:var(--tx);margin-top:0;
  display:flex;justify-content:space-between;align-items:baseline;gap:14px}
/* Zahl neben dem Namen — tritt zurück, der Name trägt die Zeile */
.ehrenzahl{font-family:var(--b);font-weight:600;font-size:var(--tx-klein);color:var(--papier-halb);flex:none}
.ehrenliste .person-name+.person-name{border-top:1px solid var(--papier-linie)}
@media(min-width:620px){
  .ehrenliste{grid-template-columns:repeat(2,1fr)}
  .ehrenliste .person-name+.person-name{border-top:0}
  .ehrenliste .person-name:nth-child(n+3){border-top:1px solid var(--papier-linie)}
}
@media(min-width:1000px){
  .ehrenliste{grid-template-columns:repeat(4,1fr)}
  .ehrenliste .person-name:nth-child(n+3){border-top:0}
  .ehrenliste .person-name:nth-child(n+5){border-top:1px solid var(--papier-linie)}
}
/* Die letzte Zeile ist selten voll — dort endet die Linie mit dem letzten Namen */
.ehrenliste .person-name:last-child{border-bottom:0}
/* **Die Zeichenerklaerung gehoert zur Tafel, nicht zur letzten Klappliste.**
   Das Kreuz steht in den Namenszeilen aller Gruppen, also steht «† verstorben»
   als Kind von `.ehrentafel` und nicht in einem `.ressort-inh`. Genau deshalb
   erreicht sie keine der beiden bestehenden Regeln: `.wrap > .tsr` nicht, weil
   die Tafel dazwischenliegt, und `.ressort-inh > .fliess + .tsr` nicht, weil
   sie ausserhalb steht. Gemessen am 20.09.2026: **0px** zwischen Klappblock
   und Erklaerung, auf 1440 wie auf 375 — die Erklaerung klebt am Rahmen des
   letzten Blocks. 24px ist der Wert des Prototyps.
   **`p.tsr` und nicht `.tsr`:** Jede Zeile eines verstorbenen Ehrenmitglieds
   traegt `<span class="tsr">†</span>`, drei davon auf der Seite; ein Abstand
   nach oben an einem Zeichen mitten im Satz verschoebe die Grundlinie. `> p`
   schliesst beide Sorten aus — die drei Spannen und die 51 uebrigen `p.tsr`
   auf 38 anderen Seiten. Die zweite `.ehrentafel` des Auftritts («Der Klub
   der 100») fuehrt keinen `p.tsr`. */
.ehrentafel > p.tsr{margin-top:24px}
@media(min-width:760px){
  .papier .z+.z{border-left:1px solid var(--papier-linie)}
  .papier .z:last-child{border-right:1px solid var(--papier-linie)}
}
@media(min-width:900px){.papier .wirfch .z:nth-child(2n){border-left:1px solid var(--papier-linie)}}
/* Bildköpfe bleiben dunkel, auch auf hellen Seiten */
.papier .ph .inh h1.big{color:#fff}
.papier .fakten{border-top:3px solid var(--gelb)}

/* ── Mobile Feinschliff ───────────────────────────────────── */

/* Zweispaltig ist der Entwurf und gilt bis hinunter zu 360px. Erst darunter
   wird es zu eng: bei 320px bleiben 110px Textbreite, „Vereinsshop“ und
   „Mitmachen“ laufen dann über den Rand. Im Browser gemessen. */
@media(max-width:359px){.wegweiser{grid-template-columns:1fr}}

/* Personenkarten verhalten sich überall gleich — Vorstand wie Trainer und Spieler */
@media(min-width:640px){.g4{grid-template-columns:repeat(3,1fr)}}

/* Raster für Personen: eine Karte bis 999px, drei ab 1000px. Gilt nur für
   Raster, die tatsächlich Personen enthalten — Bildkarten und Shopartikel
   behalten ihr eigenes Verhalten. minmax(0,1fr) verhindert, dass ein langer
   Name die Spalte aufzieht.
   Nur .g4: auf den Teamseiten steht .staff mit zwei Spalten — dort blieben
   der liegenden Karte bei 320px 31px Textbreite, und die Rollenbezeichnung
   brach auf sechzehn Zeilen. Sie behalten ihr hochformatiges Raster. */
.g4:has(.person){grid-template-columns:minmax(0,1fr);gap:8px}

/* Die Karte liegt auf jeder Breite: Porträt links, Text rechts. Es wechselt
   nur die Spaltenzahl. Hochkant war das Bildfeld bei 1440px 307x409px und bei
   1916px 371x494px — der Kopf grösser als jede Überschrift der Seite. Sechs
   hochkante Spalten wären die naheliegende Antwort und die falsche: bei 200px
   Spaltenbreite brechen 25 von 36 Rollennamen auf zwei Zeilen, „Ressort
   Infrastruktur · Aktuar" passt in keine schmale Spalte. Liegend bricht
   nichts, und der Block schrumpft bei 1440px von 7119 auf 3790px. */
.g4:has(.person) .person{display:flex;align-items:flex-start}
/* Das Bildfeld bekommt ein festes Verhältnis, nicht die Höhe der Karte.
   Ohne das richtet sich jedes Feld nach seiner eigenen Karte, und eine
   zweizeilige Rolle macht das Feld schmaler als das daneben — gemessen
   0.64 gegen 0.74. 3:4 ist das Verhältnis der Quelldateien: cover
   schneidet damit nichts weg, und jede Karte zeigt dasselbe Feld.
   128px sind 36 Prozent der Kartenbreite, 148px ab 1000px derselbe Anteil.
   Bei den 88px vorher war das Gesicht nicht mehr zu erkennen. Der Preis
   sind bis zu 19px graue Fläche unter dem Bild, wo der Text höher gerät
   als das Feld — das gleiche Feld überall ist mir das wert. */
.g4:has(.person) .person .f{width:128px;aspect-ratio:3/4;height:auto;flex:none}
/* **Im Kader 80 statt 128 — zwei Rollen, zwei Zahlen.**
   Gemessen bei 390 fuer zwanzig Spieler:

       Bild 128   Zeile 171   Wand 3572   schlechter als heute
       heute      Kachel 304  Wand 3112   zweispaltig
       Bild  96   Zeile 128   Wand 2712
       Bild  80   Zeile 107   Wand 2292   ein Viertel weniger
       Bild  64   Zeile  85   Wand 1852

   **Mit 128 lohnt der Umbau nicht** — die flache Fassung ist einspaltig, die
   Kachelwand war es nicht. Erst ein kleineres Bild bringt etwas.

   **Warum 80 hier geht und 88 auf der Personenkarte nicht ging:** Dort ist
   das Bild das Hauptelement einer Karte, hier eine Wiedererkennungshilfe in
   einer Liste von zwanzig Namen. Der Kommentar oben sagt selbst, dass die 128
   an beiden Orten «eine Uebereinstimmung und keine Abhaengigkeit» sind.
   **Genau hier faellt die Uebereinstimmung.** */
/* Dieselbe Regel für die Behelfsfläche: sie steht an der Stelle eines Fotos
   und muss gleich gross sein.
   Feste Schriftgrösse statt 13cqi: der Behälter ist die ganze Spaltenbreite,
   die Initialen würden sonst auf 46px wachsen. */
.g4:has(.person) .person-init{width:128px;aspect-ratio:3/4;height:auto;flex:none;font-size:31px}
/* Telefon und Mail untereinander, jedes über die volle Textbreite. Neben
   dem 128px-Bild bleiben 198px; zweispaltig bricht die Telefonnummer.
   ⚠ ~~«Jedes trägt bis 767px 12px Polster für die 44px-Bedienfläche.»~~ —
   25.09.2026. Das Polster ist entfallen; die Tippflaeche kommt jetzt auf
   allen Breiten aus `min-height:24px` am Verweis (Begruendung bei
   `.person-tel`). **Der Satz beschrieb eine Regel, die hier nie stand** — sie
   stand im Medienblock der Beruehrflaechen und ist dort zitiert. */
/* Oben ausgerichtet, nicht zentriert: sonst rutscht eine Karte ohne
   Telefonnummer nach unten, weil ihr Block kürzer ist, und die Namen
   stehen nicht mehr auf einer Linie. Gemessen 35 bis 71px Versatz. */
.g4:has(.person) .person-tx{padding:12px 14px;display:grid;
  grid-template-columns:minmax(0,1fr);grid-auto-rows:min-content;
  align-content:start;align-self:stretch;min-width:0}
/* Zwei Zeilen fest für die Rollenbezeichnung: „Präsident" ist einzeilig,
   „Vizepräsident · Finanzen" zweizeilig, und ohne feste Höhe fluchten die
   Namen daneben nicht. Eine Zeile misst 18px. Einzeilige Karten tragen
   dafür 18px Leerraum — weniger störend als eine krumme Linie. */
.g4:has(.person) .person-rolle{min-height:36px;min-height:2lh}
/* ⚠ **Auch hier haengt der enge Abstand an der Stellung und nicht am Namen** —
   dieselbe Begruendung wie bei der Grundregel, und dieselbe Notwendigkeit:
   `.g4:has(.person) .person-mail` wiegt (0,3,0) und schlaegt den
   Geschwisterwaehler der Grundregel (0,2,0). **Ohne die zweite Zeile hier
   waere die Grundregel an genau der Seite wirkungslos, fuer die Didi sie
   bestellt hat.**
   > ~~`.g4:has(.person) .person-mail{margin-top:4px}`~~ — 25.09.2026, aus dem
   > Grund, aus dem die 5px der Grundregel gefallen sind. */
.g4:has(.person) .person-tel,.g4:has(.person) .person-mail{margin-top:8px}
.g4:has(.person) .person-tel + .person-mail,
.g4:has(.person) .person-mail + .person-tel{margin-top:0}
/* Ab 1000px steht die Karte wieder hochkant, aber schmal und zu sechst. Der
   Grund ist das Bildfeld: liegend wurde es 148x197px — hoch und schmal, vom
   Gesicht blieb ein Ausschnitt. Hochkant misst es 200x267px, und sechs
   Personen stehen auf einem Blick statt vier über zwei Bildschirme.
   Sechs liegende Spalten wären der naheliegende Kompromiss und scheitern:
   bei 1440px bleibt eine Karte von 203px, 33 von 36 Rollennamen und ebenso
   viele Namen brechen zweizeilig.
   Die Spaltenzahl steigt in zwei Stufen, damit das Bildfeld nie über rund
   245px wächst. Genau das war der Fehler der vier Spalten: dort wurde es
   bei 1916px 371px breit — grösser als jede Überschrift der Seite. */
@media(min-width:1000px){
  .g4:has(.person){grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .g4:has(.person) .person{display:block}
  .g4:has(.person) .person .f{width:auto;aspect-ratio:3/4}
  /* 13cqi: der Behälter ist die Karte, die Initialen wachsen mit ihr. */
  .g4:has(.person) .person-init{width:auto;aspect-ratio:3/4;font-size:13cqi}
  .g4:has(.person) .person-tx{padding:14px 14px 18px;display:block;
    align-self:auto}
}
@media(min-width:1280px){
  .g4:has(.person){grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* Ressorts der Organisationsseite. Bis 999px ist die ganze Kopfzeile die
   Schaltfläche; das Pluszeichen entsteht aus zwei Strichen, damit keine
   Symbolschrift nötig ist. Ab 1000px verschwindet die Bedienung: die Zeile
   ist dann nur noch eine Überschrift wie vorher. */

/* ⚠⚠ **Zwei Kernbloecke haengen seit dem 22.09.2026 an denselben Regeln:
   «Details» (`core/details`) und «Akkordeon» (`core/accordion`).**

   Die Hausform des Klappblocks hatte bis dahin genau zwei Traeger: die
   Ressorts der Organisationsseite und den eigenen Block
   `acf/fch-klappbereich` (`Bloecke/ausgabe.php`, `fch_core_block_ausgeben()`,
   Fall `klappbereich`) — beide geben
   `details.ressort > summary.ressort-kopf` aus. **Wer im Editor stattdessen
   den Kernblock nimmt, bekam bis dahin den Browservorgabeblock: Times-Pfeil
   links, keine Linie, keine Abstaende.**

   > **Eine Bauform gehoert an die Rolle, nicht an die Klasse, die zufaellig
   > zuerst da war.** Darum stehen die Kernbloecke NEBEN `.ressort` in
   > denselben Regeln und nicht in einer zweiten Fassung darunter — jede
   > Zahl hier gilt weiterhin genau einmal.

   ── Was die beiden Kernbloecke wirklich bauen, nachgesehen in 7.0.4 ─────

   Nicht geraten, sondern aus `wp-includes/blocks/` und der gerenderten Seite
   gelesen (`core/accordion` gibt es seit 6.9; in 7.0.4 ist er da):

     core/details            <details class="wp-block-details">
                               <summary>Titel</summary>  … Inhalt …
     core/accordion          <div class="wp-block-accordion">
       core/accordion-item     <div class="wp-block-accordion-item">
       core/accordion-heading    <h3 class="wp-block-accordion-heading">
                                   <button class="wp-block-accordion-heading__toggle">
                                     <span class="…__toggle-title">Titel</span>
                                     <span class="…__toggle-icon">+</span>
       core/accordion-panel      <div class="wp-block-accordion-panel">

   **Die beiden sind NICHT dasselbe Bauteil.** `core/details` ist ein echtes
   `<details>` und bringt Tastatur und Vorleseprogramm mit. `core/accordion`
   ist ein `<button>` mit `aria-expanded`, den die Interactivity-API
   umschaltet (`data-wp-on--click`, `data-wp-on--keydown`) — der Zustand
   heisst dort `.is-open` am Eintrag und nicht `[open]`.

   > **Darum steht unten kein einziger eigener Klickhaken.** Beide Bloecke
   > bedienen sich selbst; eine Zeile, die `open` oder `.is-open` selbst
   > setzte, naehme genau die Bedienung weg, die sie ersetzen wollte.

   ── ⚠ Wo die Hausform NICHT mitkommt, und warum ────────────────────────

   Der `@media(min-width:1000px)`-Block weiter unten nimmt `.ressort` ab
   1000px die Bedienung weg; `assets/fch.js` klappt dort alles auf. **Die
   Kernbloecke bleiben auf JEDER Breite Klappbloecke.** Das ist kein
   Vergessen, sondern der einzig gangbare Weg:

     `core/details`     CSS kann `open` nicht setzen. Es braeuchte JS.
     `core/accordion`   Die Tafel ist mit `inert` abgeschaltet. Ein
                        `display:block` von hier machte sie sichtbar und
                        liesse `inert` stehen — **sichtbar fuer das Auge,
                        abwesend fuer Tastatur und Vorleseprogramm.**

   ⚠ **Das ist ein Grundsatzentscheid und gehoert Didi**, nicht dieser
   Datei: Soll der Kernblock auf dem grossen Bildschirm auch aufklappen wie
   `.ressort` und `acf/fch-klappbereich`, braucht es einen Zweig in
   `assets/fch.js` — und fuer das Akkordeon heisst das, den Zustand der
   Interactivity-API von aussen zu stellen. Bis dahin: gleiche Form, eigene
   Bedienung. */
.ressort,.wp-block-details,.wp-block-accordion-item{border-top:1px solid var(--papier-linie)}
.ressort-kopf,
.wp-block-details > summary,
.wp-block-accordion-heading__toggle{list-style:none;cursor:pointer;display:block;padding:16px 34px 16px 0;position:relative}
.ressort-kopf::-webkit-details-marker,
.wp-block-details > summary::-webkit-details-marker{display:none}
/* Titel im Fliesstext behalten ihren eigenen Rhythmus — die Abstände
   gehören der Überschrift, nicht dem Behälter. Zurückgesetzt wird nur
   .sec: diese Titel stehen ausserhalb von .fliess und haben dort keinen
   Rhythmus, den man erhalten müsste. */
/* Die beiden Kernbloecke tragen keinen `h2.sec` im Kopf — bei «Details» ist
   das `<summary>` selbst der Titel, beim Akkordeon die Titelspanne im Knopf.
   Sie stehen darum oben bei `.sec` und `.sec.sec-mittel` mit in der Liste und
   brauchen hier denselben Randabzug wie der Ressortkopf: `.sec` gibt
   `margin-bottom:.48em` mit, und ein Kopf, der seinen eigenen Titel IST,
   haette den Abstand doppelt. */
.ressort-kopf .sec,
.wp-block-details > summary,
.wp-block-accordion-heading__toggle-title{margin:0}
/* Steht der Titel im Fliesstext, behält er seinen Abstand: dort trägt
   ihn die Überschrift, nicht der Behälter. .18em sind die 6px, die
   vorher als Inline-Stil am Titel standen — als Anteil wachsen sie mit
   der Stufe mit. */
.fliess .ressort-kopf .sec{margin:.18em 0 .35em}
.ressort-kopf::before,
.wp-block-details > summary::before,
.wp-block-accordion-heading__toggle::before{
  content:'';position:absolute;right:6px;top:50%;background:var(--papier-text);transition:transform .18s ease;
  width:18px;height:2px;margin-top:-1px;
}
.ressort-kopf::after,
.wp-block-details > summary::after,
.wp-block-accordion-heading__toggle::after{
  content:'';position:absolute;right:6px;top:50%;background:var(--papier-text);transition:transform .18s ease;
  width:2px;height:18px;margin-top:-9px;margin-right:8px;
}
/* Drei Schreibweisen fuer denselben Zustand, weil drei Bauteile ihn anders
   festhalten: `<details>` traegt `[open]`, der Akkordeoneintrag bekommt
   `.is-open` von der Interactivity-API an den Behaelter. */
.ressort[open] .ressort-kopf::after,
.wp-block-details[open] > summary::after,
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle::after{transform:scaleY(0)}

/* ── Die eine Zeile, die das Akkordeon zusaetzlich braucht ─────────────

   **Die Titelspanne wird ein Block.** Im Ressortkopf steht ein `h3`, also
   ein Blockkasten; im Akkordeonkopf eine Spanne im Knopf. Als Inline-Element
   setzt sie nur ihre eigene Zeilenhoehe — die Hoehe der ZEILE bestimmt
   daneben weiter der Pfosten des Knopfes, und der rechnet mit der
   Zeilenhoehe des Rumpfes (1.6). `line-height:.98` aus `.sec` gilt dann
   fuer die Schrift und nicht fuer den Kasten.

   **Gemessen am 22.09.2026, abgemeldet, auf einer Probeseite (danach
   geloescht), Hoehe des zugeklappten Kopfes:**

     Breite   Spanne inline   Spanne Block   Ressortkopf `h3.sec.sec-mittel`
      390px      63.81px         53.94px        53.94px   («Administration»)
     1440px      63.81px         58.45px        — (dort traegt der Ressort-
                                                   kopf das Polster 0/0/18)

   **Bei 390px ist der Knopf mit dieser Zeile auf den Hundertstel so hoch
   wie der Ressortkopf** — das ist die Probe und nicht die Absicht. */
.wp-block-accordion-heading__toggle-title{display:block}

/* ── Und drei, die etwas ABLEGEN, was der Kernblock mitbringt ──────────

   Keine davon setzt etwas Eigenes; die Form steht oben.

   1 **Das Pluszeichen des Akkordeons ist ein Schriftzeichen.** Der Block gibt
     `<span class="…__toggle-icon" aria-hidden="true">+</span>` aus und dreht
     es beim Oeffnen um 45 Grad — aus «+» wird «×». Die Hausform macht aus dem
     Plus ein Minus, indem der senkrechte Strich auf null faellt. Das Zeichen
     faellt darum weg; die zwei Striche oben ersetzen es. `aria-hidden` stand
     schon dran — es geht nichts verloren, was jemand hoeren wuerde.

   2 Die Drehung greift sonst weiter an der leeren Spanne. Sie wird
     abgestellt und nicht bloss unsichtbar gemacht.

   3 **Der Kernblock unterstreicht den Titel beim Ueberfahren.** Kein
     Klappkopf des Hauses tut das — weder `.ressort` noch `.anl` noch
     `acf/fch-klappbereich`. Die ganze Zeile ist die Schaltflaeche; ein
     Unterstrich sagte, nur das Wort sei es. */
.wp-block-accordion-heading__toggle-icon{display:none}
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon{transform:none}
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title{text-decoration:none}
/* ── Verbandslogo im Ressortkopf ───────────────────────────────────
   **72px.** Gemessen: der zugeklappte Kopf misst damit 90px statt 66. Bei 96
   waeren es 114, bei 120 dann 138 — und ein zugeklappter Kopf soll nicht
   hoeher sein als noetig.

   **Belegt statt behauptet:** Bei fuenffacher Vergroesserung ist bei 72px
   «CLUB REFEREE» und «Für die Jugend. Für den Verein.» lesbar, beim SFV
   «SCHIEDSRICHTER · REFEREE». Bei 56 verschwimmt der Ring zu einem grauen
   Band.

   **Der Alternativtext ist leer.** Der Titel steht daneben und sagt dasselbe;
   wer vorliest, hoerte es sonst zweimal.

   **Das Logo liegt im `<summary>` und ist damit Teil der Klappflaeche** — ein
   Klick darauf oeffnet den Block. Das ist gewollt: eine Flaeche, eine
   Handlung. Waere es kein Klickziel, muesste jemand erklaeren, warum
   ausgerechnet das Bild nicht reagiert.

   `::before` und `::after` tragen das Klappzeichen und liegen absolut — sie
   werden von `display:flex` nicht zu Flexkindern und bleiben, wo sie sind. */
.ressort-kopf:has(.verbandslogo){display:flex;align-items:center;gap:18px}
.verbandslogo{width:72px;height:72px;flex:0 0 auto}
/* ⚠⚠ **Die Regel selbst ist am 25.09.2026 entfallen — und ihre eigene
   Begruendung sagt, warum.**

   > ~~`.ressort-kopf:focus-visible{outline:2px solid var(--dun);
   > outline-offset:2px}`~~

   Der Satz darunter stand seit dem Bau da und lautete: «Die Regel ist
   Zeichen fuer Zeichen die globale `:focus-visible`.» **Das war das Argument
   dafuer, die Kernbloecke nicht auch noch aufzuzaehlen — es ist dasselbe
   Argument dagegen, die Regel ueberhaupt zu fuehren.** Sie war schon vorher
   eine Kopie und hat nur deshalb nicht gestoert, weil die Kopie stimmte.
   Nach Didis Entscheid vom 25.09.2026 stimmt sie nicht mehr: Die Grundregel
   liest jetzt `--akzent`, diese hier haette weiter `--dun` gefuehrt und auf
   dunklem Grund einen unsichtbaren Ring gezeichnet.

   **Ein Klappkopf des Hauses bekommt seinen Ring ab heute von der
   Grundregel** — ausser dem in `.anl`, der eine Zeigerflaeche hat und ihn
   darum ausdruecklich zurueckgibt (siehe dort).

   **Die Kernbloecke stehen hier weiterhin mit Absicht NICHT dabei.** Die
   globale `:focus-visible` trifft ein `<summary>` und einen `<button>` von
   selbst. Eine zweite Nennung waere dieselbe Entscheidung an einem zweiten
   Ort.
   Nachgesehen: `.wp-block-accordion-heading__toggle:not(:focus-visible)
   {outline:none}` aus dem Kernblatt greift nur, wenn kein Tastaturfokus da
   ist, und kommt der globalen Regel darum nie in die Quere. */
/* «Details» hat keine innere Huelle — der Inhalt liegt direkt im
   `<details>`. Die 26px sitzen dort darum am Block selbst, und zwar nur
   aufgeklappt: zugeklappt zeigt `<details>` seinen Inhalt gar nicht, und
   `.ressort-inh` waere dann ebenso wenig da. Gleiches Ergebnis, ein anderer
   Traeger — und weiterhin genau eine Zahl. */
.ressort-inh,.wp-block-accordion-panel,.wp-block-details[open]{padding-bottom:26px}
/* Sprungziel unter dem klebenden Kopf halten: 56px Balken auf dem Handy,
   100px ab Tablet, plus etwas Luft. */
section:has(> .wrap > .ressort){scroll-margin-top:74px}
@media(min-width:1000px){section:has(> .wrap > .ressort){scroll-margin-top:118px}}
@media(min-width:1000px){
  .ressort{border-top:0}
  /* pointer-events:none, weil das summary sonst eine Schaltfläche bleibt, die
     wie eine Überschrift aussieht: ein Klick klappt zu, und ohne Marker sieht
     man nicht, dass man wieder öffnen könnte. Der Abschnitt stünde dann als
     Überschrift über leerem Raum.

     Die Maus hält diese Zeile auf, die Tastatur nicht: Ein fokussiertes summary
     nimmt Enter weiterhin entgegen, pointer-events greift dort nicht. Abgedeckt
     ist der Fall erst durch den else-Zweig im toggle-Zuhörer für
     `details.ressort:not(.anl)` in assets/fch.js — den Zweig, der oberhalb der
     Schwelle `open` wieder setzt, statt nur den Wunsch zu notieren (nicht zu
     verwechseln mit `ressortsAnpassen()`, das denselben Selektor benutzt, aber
     nur beim Laden und beim Breitenwechsel läuft). Ohne diesen Zweig stünde
     nach einem Enter genau das Bild da, das die Regel darunter verhindern soll.

     Hier stand bis 20.09.2026: «Die Tastatur deckt der toggle-Zuhörer ab.»
     **Das ist keine Umformulierung, der Satz war gemessen falsch.** Am
     20.09.2026 schloss Enter auf dem fokussierten summary den Block bei 1440px;
     der Zuhörer hatte damals nur den Zweig unterhalb 1000px, der den Wunsch
     merkt, und keinen, der breit wieder öffnet. */
  .ressort-kopf{cursor:default;padding:0 0 18px;pointer-events:none}
  .ressort-kopf::after,.ressort-kopf::before{display:none}
  .ressort-inh{padding-bottom:0}
}

/* ── ⚠⚠ DER KADER KLAPPT SCHON AB 620 — 24.09.2026 ─────────────────────

   Didi: «Teamseite, auf dem Handy (unter 640 px): nur die Spielerinnen und
   Spieler des Kaders werden einklappbar. … Computer bleibt wie heute, alles
   offen, keine Klappzeilen.»

   **Die Bauform ist die des Hauses und keine zweite.** `.kad-klapp` ist ein
   `details.ressort` wie auf /vorstand/: Trennlinie, Plus/Minus, Tastatur und
   Fokusring kommen aus dem Block darüber, `ressortsAnpassen()` in
   `assets/fch.js` öffnet breit. Diese Klasse verschiebt genau eine Zahl.

   ⚠ **Sie verschiebt die Schwelle von 1000 auf 620 px** — auf die
   Hausgrenze, und damit ist es keine Abweichung vom Haus mehr.

   ⚠⚠ **620 SEIT DEM 24.09.2026 ABENDS, UND DER ZWEITE GRUND TRÄGT NICHT
   MEHR.** Hier stand:

   > ~~«⚠ **Sie verschiebt die Schwelle von 1000 auf 640 px**, und das ist
   > eine Abweichung vom Haus mit zwei Gründen: 1. Didi nennt die Breite
   > ausdrücklich, zweimal — «unter 640 px» ist bei ihm die Bestimmung von
   > «Handy». 2. 640 ist die eigene Schwelle des Kaders. Unter ihr steht
   > `.kad-gruppe` in zwei Spalten und `.kad` in einer — dort ist eine
   > Positionsgruppe eine lange Säule und das Klappen gewinnt Übersicht. Ab
   > 640 stehen drei bzw. zwei Spalten, und vier Karten sind ein Block, der
   > in den Blick passt.»~~

   Didi jetzt: «Alle Regeln, die in den letzten Aufträgen mit 640 px
   bestellt wurden … auf die Hausgrenze 620 px ziehen.» Grund 1 ist damit
   beantwortet: Es ist nicht mehr Didis Zahl für «Handy», es ist die des
   Hauses.

   ⚠⚠ **Grund 2 ist am 24.09.2026 nachgezogen worden.** Hier stand bis
   dahin:

   > ~~«**Grund 2 ist nicht mitgewandert, und das ist ein gemessener
   > Rest.** Das Kaderraster wechselt weiterhin bei 640: `.kad-gruppe`
   > steht unter 640 in EINER Spalte und ab 640 in drei; `.kad` und
   > `.staff` schalten dort ebenfalls. **Zwischen 620 und 639 steht der
   > Block also offen, während das Raster noch das schmale ist.**»~~

   Didi: «Kaderraster von 640 auf die Hausgrenze 620.» Alle vier Stellen des
   Rasters stehen jetzt auf 620 beziehungsweise 619 — die Begründung dazu
   bei `.kad`. **Die Lücke von zwanzig Pixeln gibt es nicht mehr:** Wo der
   Block aufklappt, klappt auch das Raster um.

   Die Messung, die sie sichtbar gemacht hat, bleibt stehen — sie ist der
   Beleg für den Zug und nicht für den heutigen Zustand. Gemessen am
   24.09.2026 abends auf `/teams/fc-herrliberg-1/`, im `<iframe>` fester
   Breite und mit laufenden Skripten, **vor der Änderung am Raster**:

       Fenster   Blöcke offen   .kad-gruppe
        619        0 von 4       583px, eine Spalte
        620        4 von 4       584px, eine Spalte   ⟵ der Block klappt auf
        630        4 von 4       594px, eine Spalte
        639        4 von 4       603px, eine Spalte
        640        4 von 4       3 x 192px            ⟵ damals erst hier das Raster

   ⚠ **`.kad` und `.staff` stehen auf dieser Seite nicht im Markup und sind
   darum NICHT nachgemessen** — weder damals noch heute. Dass sie dieselbe
   Schwelle tragen, ist gelesen und nicht gemessen; sie sind dasselbe Raster.

   ⚠ **Und hier stand der Satz, der die beiden auseinanderhielt:**

       ~~«Didis Auftrag nennt die Klappzeilen und nicht das Raster — wer die
       beiden wieder zusammenlegen will, verschiebt das Raster und fragt
       vorher.»~~  (24.09.2026 abends)

   Gefragt und beantwortet: Didi hat das Raster am 24.09.2026 nachgezogen.

   **Die Schwelle steht darum an zwei Orten** — hier und in `assets/fch.js`
   (`ressortBreit()`). Wer eine ändert, muss die andere mitändern; das
   Stylesheet kann `open` nicht setzen, und das Skript malt keine Linien.

   Was die drei Zeilen breit tun, ist Zeile für Zeile dasselbe wie im
   1000er-Block darüber, nur enger gefasst — mit einer Abweichung: Das
   Polster unten ist 14px statt 18px. Das sind die 14px, die `.grp` bisher
   als `margin-bottom` unter die Positionsüberschrift setzte; im
   `<summary>` ist diese Marge auf 0 zurückgesetzt, weil sie zugeklappt
   unter dem Balken stünde und ihn 14px zu hoch machte. Gleicher Abstand,
   anderer Träger. */
.ressort-kopf .grp{margin:0}
@media(min-width:620px){
  .kad-klapp{border-top:0}
  .kad-klapp > .ressort-kopf{cursor:default;padding:0 0 14px;pointer-events:none}
  .kad-klapp > .ressort-kopf::after,.kad-klapp > .ressort-kopf::before{display:none}
  .kad-klapp > .ressort-inh{padding-bottom:0}
  /* Bisher trennte `.grp:not(:first-child){margin-top:30px}` die
     Positionen. Im `<summary>` ist jedes `.grp` erstes Kind, die Regel
     greift dort nie mehr — die 30px sitzen jetzt am Klappblock selbst.
     Geschrieben als `:not(:first-child)` und nicht als `+`, damit eine
     Gruppe ohne Positionsnamen (die keinen Kopf und darum kein `.kad-klapp`
     bekommt) die Kette nicht zerreisst. */
  .kad-kacheln > .kad-klapp:not(:first-child){margin-top:30px}
  /* ⚠ **Der Listenkopf verschwindet ganz, statt bloss flach zu werden.**
     Die Kachelansicht hatte ihre Positionsüberschriften schon vorher; sie
     bleiben breit stehen, wo sie standen. Die Liste hatte keine — «Kader ·
     5» breit stehen zu lassen hiesse, dem Computer eine Zeile zu geben, die
     er nie hatte, und sie stünde zwei Zeilen unter dem `h2` «Kader», das
     dasselbe sagt. Verloren geht dabei nichts: breit ist der Block offen,
     und ein Kopf, den niemand bedienen kann, ist keine Bedienung. */
  .kad-klapp-ganz > .ressort-kopf{display:none}
  /* ⚠ **Die Anzahl gehört der geschlossenen Zeile.** «Torhüter · 1» sagt,
     was hinter einem zugeklappten Balken steckt; offen steht die Antwort
     als Karten darunter, und die Zahl wiederholte, was man sieht. Bis zum
     24.09.2026 stand über dem Raster «TORHÜTER» — genau das steht dort
     weiter, und «Computer bleibt wie heute» stimmt damit Zeichen für
     Zeichen. Der Kopf der Listenansicht («Kader · 5») fällt ohnehin ganz
     weg, die Zeile darüber greift schon. */
  .kad-anz{display:none}
}

/* ── ⚠⚠ DIE KLAPPZEILEN DES KADERS SCHLIESSEN UNTEN AB — 24.09.2026 ───

   Didi: «Teamseite, Handy (unter 620 px): Dünne Trennlinie oben und unten, in
   der Farbe der Trennlinien auf /vorstand/. Bei mehreren Klappzeilen teilen
   sich benachbarte Zeilen eine Linie — keine Doppellinien. Zeilenhöhe
   mindestens 44 px, Beschriftung senkrecht mittig, Plus rechtsbündig auf
   derselben Mitte. Etwas Abstand zwischen Mannschaftsbild und oberer Linie
   (wie zwischen zwei Klappblöcken auf /vorstand/). Aufgeklappt: Die untere
   Linie wandert unter die Personenliste. Gleiche Regeln wie die Klappblöcke
   auf /vorstand/ wiederverwenden, keine Kopie.»

   ⚠⚠ **VIER DER SECHS ANGABEN STEHEN HIER NICHT, WEIL SIE SCHON GELTEN.**
   Das ist die Antwort auf «wiederverwenden, keine Kopie»: Eine Zeile, die
   einen gemessenen Zustand noch einmal aufschreibt, IST die Kopie — auch
   dann, wenn sie dieselbe Zahl trägt wie die Regel, von der sie abschreibt.

   Gemessen am 24.09.2026 auf /teams/fc-herrliberg-1/ (vier Klappzeilen,
   Kachelansicht) und /teams/fc-herrliberg-2/ (ein Klappblock, Listenansicht),
   im `<iframe>` fester Breite mit zurückgelesenem `innerWidth` und mit
   laufenden Skripten, bei 375, 500 und 619px durchweg dieselben Werte:

     Didis Angabe            trägt im Haus schon             gemessen
     Linie oben              `.ressort`                      1px
     Farbe wie /vorstand/    `var(--papier-linie)`           rgba(11,11,10,.14)
     eine Linie je Naht      nur `border-top`, kein -bottom  Lücke 0px, Linie 1px
     Zeilenhöhe ≥ 44px       `.ressort-kopf`, Polster 16/16  49.59px
     Beschriftung mittig     dasselbe Polster, symmetrisch   Mitte bei 25.80px
     Plus auf der Mitte      `::before`/`::after`, `top:50%` Mitte bei 25.80px

   **Die geteilte Linie ist kein Kunstgriff, sie ist die Bauform:** Das Haus
   malt am Klappblock NUR die obere Kante. Zwei Nachbarn ergeben darum eine
   Linie und nicht zwei — die untere Linie der Zeile n IST die obere der
   Zeile n+1.

   ⚠ **Gegenprobe, die ausschlagen musste und ausschlug** (24.09.2026,
   375px): Mit einem zur Laufzeit ergänzten `.kad-klapp{border-bottom:1px
   solid var(--papier-linie)}` misst dieselbe Naht 2px statt 1px und der
   Stapel 206.38px statt 202.38px — vier Zeilen, vier zusätzliche Pixel.
   **`getComputedStyle` allein hätte das nicht gezeigt:** Es meldet beide
   Kanten so, wie sie deklariert sind, und sagt nicht, welche gemalt wird.

   ⚠ Es bleiben zwei Deklarationen, und **beide gehören dem Rand des
   Stapels, nicht der Zeile.**

   1 **Die untere Linie fehlte dem letzten Nachbarn, weil er keinen hat.**
     Sie sitzt darum am Behälter: `.kad-kacheln` umschliesst alle Klappzeilen
     der Kachelansicht, `.kad-klapp-ganz` IST der einzige Klappblock der
     Listenansicht. Gemessen steht die Unterkante des Behälters auf den
     Hundertstel auf der Unterkante der letzten Zeile — 202.38 zu 202.38
     zugeklappt, 733.00 zu 733.00 mit allen vier Zeilen offen. **Damit
     wandert auch diese Linie beim Aufklappen von selbst unter die
     Personenliste**, und zwar aus demselben Grund wie die geteilten: Sie
     hängt am Block und nicht am Kopf.

     ⚠ `.kad-klapp:last-child` wäre der kürzere Wähler und zerbräche an der
     Gruppe ohne Positionsnamen: Die bekommt keinen Kopf und damit kein
     `.kad-klapp` (der Grund steht bei
     `.kad-kacheln > .kad-klapp:not(:first-child)`), stünde aber als letztes
     Kind im Behälter — die Schlusslinie fiele dann aus. Am Behälter kann das
     nicht geschehen.

   2 **Der Abstand zum Mannschaftsbild.** 46px sind der Boden von
     `clamp(46px,6vw,80px)` — dem Ausdruck, mit dem
     `.wrap > details.ressort:not(.anl):not(:first-of-type)` auf
     /vorstand/ zwei Klappblöcke trennt und mit dem `.papier section` seinen
     Abschnittsrhythmus setzt. **Unter 620px steht dieser Ausdruck immer auf
     seinem Boden** — 6vw sind bei 619px 37.14px. Gemessen auf /vorstand/:
     46.00px zwischen «Schiedsrichterwesen» und «Vereinsleben», bei 375 wie
     bei 619. Die Zahl ist darum Didis «wie zwischen zwei Klappblöcken» und
     keine zweite Stufe.

     ⚠⚠ **Sie steht hier und nicht bei
     `.wrap > details.ressort:not(.anl):not(:first-of-type)`, und das ist kein
     Versehen.** Jener Wähler hängt an `.wrap >` und an
     `:not(:first-of-type)`. Die Kachelansicht liegt eine Stufe tiefer in
     `.kad-kacheln`, und
     der Listenblock ist das erste `<details>` seines `.wrap` — beide fallen
     durch. Wer sie dort aufnähme, müsste den Wähler weiten und verschöbe
     damit den Computer: `.kad-kacheln` trägt breit `clamp(24px,3vw,34px)`,
     am 1440er-Bildschirm also 34px statt 80px. **«Computer bleibt
     wie heute» wiegt schwerer als ein Wähler weniger.**

     ⚠ **`.mannschaftsbild +` und nicht der Behälter allein.** Ohne Foto
     steht über dem Kader das `h2` «Kader», und dort wäre 46px der falsche
     Abstand — eine Überschrift trägt ihren eigenen. Gemessen am 24.09.2026:
     11 von 11 Teams im lokalen Bestand führen ein Mannschaftsbild, 2 von 11
     führen überhaupt Klappzeilen; der Fall ohne Bild ist heute leer. */
@media(max-width:619px){
  .kad-kacheln,.kad-klapp-ganz{border-bottom:1px solid var(--papier-linie)}
  .mannschaftsbild + .kad-kacheln,
  .mannschaftsbild + .kad-klapp-ganz{margin-top:46px}
}

/* ── Anlässe als Klappliste ─────────────────────────────────────────────
   Basis ist .ressort; .anl trägt nur das Raster der Kopfzeile und die
   Faktenzeilen. Datum, Titel, Zielgruppe und Ort stehen zugeklappt — mehr
   nicht, die Zeile muss auf dem Handy lesbar bleiben. */
/* ── ⚠ DIE SAISONLEISTE RUECKT AUF DEM HANDY NAEHER — 23.09.2026 ──────
   Didi: «Auf dem Handy zusaetzlich: Abstand ueber der Leiste und zwischen
   Leiste und der Ueberschrift «Kommende Anlaesse» deutlich knapper.»

   **Zwei Abstaende, zwei Traeger:** ueber der Leiste liegt das Polster des
   Abschnitts (`.papier section`, bei 559px gerundet 46px), unter ihr der
   Aussenabstand der Filterzeile (28px). Wer nur einen von beiden anfasst,
   halbiert den falschen.

   ⚠ **Beide Regeln tragen die Ansichtskennung**, obwohl `.filterzeile`
   kuerzer waere: Dieselbe Klasse steht auf `/teams/` und der Startseite,
   und dort hat niemand etwas bestellt.

   ⚠ **Die Anlasszeilen bleiben unberuehrt**, ausdruecklich: «Die Abstaende
   innerhalb und zwischen den Anlasszeilen bleiben, wie sie sind.» Darum
   `> section` und `.filterzeile` — und kein `.anl`. */
/* ⚠⚠ **`#v-anlaesse .filterzeile` trifft seit dem 24.09.2026 nichts mehr —
   gemeldet, nicht entfernt.**

   Punkt 1 hat die Leiste in den Abschnittskopf `.sk sk-ha` gehoben; die
   `.filterzeile` um sie herum gibt es auf `/anlaesse/` nicht mehr. Gemessen
   im lokalen Stapel am 24.09.2026: **0 Treffer** fuer `.filterzeile` im
   gelieferten HTML von `/anlaesse/`, vorher 1. **Die Klasse selbst lebt** —
   ueber zehn abgerufene Adressen traegt sie noch genau eine, `/teams/`;
   nur DIESE Zeile hier zeigt seither ins Leere.

   **Mit dem Traeger ist auch der Gegenstand weg.** Didis Satz vom 23.09.2026
   galt dem Abstand ZWISCHEN Leiste und Ueberschrift — und die Leiste steht
   unter 620px jetzt UNTER der Ueberschrift, nicht mehr darueber. Der Abstand,
   den diese Zeile knapper machte, existiert nicht mehr.

   **Sie bleibt trotzdem stehen, bis Punkt 5 entschieden ist** (Handyansicht
   unter 620px): Wer sie jetzt loescht, nimmt der naechsten Entscheidung ihre
   Vorgeschichte. `#v-anlaesse > section{padding-top:24px}` daneben traegt
   weiter und meint weiter dasselbe. */
@media(max-width:559px){
  #v-anlaesse > section{padding-top:24px}
  #v-anlaesse .filterzeile{margin-bottom:12px}
}
.anl{border-top:1px solid var(--papier-linie)}
/* Eröffnungslinie der Liste. Nicht :first-of-type — das zählt Elementtypen,
   und der erste vergangene Anlass ist das fünfte details unter denselben
   Geschwistern, hätte die Linie also nicht bekommen.

   ⚠ **`.sk` steht seit dem 24.09.2026 daneben.**

   > ~~«Beide Listen beginnen im Markup mit einer Überschrift.»~~
   > — Stand bis 24.09.2026.

   Das stimmte, solange die Ueberschrift der Liste unmittelbar vorausging.
   **Seit «Kommende Anlaesse» in einem `.sk`-Kopf steht** — Punkt 1, die
   Saisonleiste rechtsbuendig daneben —, ist der Vorgaenger dieser Liste der
   KOPF und nicht mehr die Ueberschrift darin. **Ein Nachbarwaehler sieht nur
   den Nachbarn**, nicht dessen Inhalt.

   **Gegenstand der Regel war immer der Abschnittskopf** und nicht das
   Element `h2`; sie nennt jetzt beide Formen, in denen ein Kopf hier
   auftritt. Die Liste «Vergangene Anlaesse» hat keine Leiste und traegt
   weiterhin die blanke Ueberschrift — **beide Zweige brauchen ihre Haelfte
   der Regel.**

   ⚠ **Ohne die zweite Haelfte faellt die Linie von 2px gelb auf die 1px
   `--papier-linie` der Zeile darueber** — keine Meldung, kein Fehler, nur
   eine Liste, die nicht mehr eroeffnet. Gemessen im lokalen Stapel am
   24.09.2026. */
.sec + .anl,.sk + .anl{border-top:2px solid var(--gelb)}
/* Zwei Spalten, nicht drei: in der dritten stand nichts. Bei 1440px blieben
   804px leer und der Titel hatte 298px von 1200.

   > ~~«Die Zeilenlänge begrenzt jetzt max-width in ch — eine Textbreite
   > gehört dem Text, nicht dem Raster.»~~ — Stand bis 24.09.2026. Der Satz
   > galt dem Titel; er faellt mit Punkt 4, und die Begruendung dazu steht
   > bei `.anl-tit`.

   ── ⚠⚠ DIE DATUMSSPALTE MISST 68px STATT 112 — 24.09.2026, Punkt 2 ──

   **Die 112 waren die Kachel und nicht die Spalte.** Sie war die Breite, in
   der «25–30» auf Stufe C noch Luft hatte; ohne Flaeche darunter muss die
   Spalte nur noch das breiteste tragen, was in ihr STEHT. Gemessen im
   lokalen Stapel am 24.09.2026, in den Schriften, die dort wirklich stehen:

     «25–30»     Archivo 800, 19px    66.8px   ← das breiteste Datum
     «MÄR–APR»   Public Sans 700, 11px 61.3px  ← das breiteste Monatswort
     «NOV 2026»  Public Sans 700, 11px 63.1px  ← der Normalfall, einzeilig

   **68px traegt alle drei** — und gibt dem Titel 44px zurueck, die vorher
   graue Flaeche waren.

   ⚠ **`.anl-kal` bekommt keine eigene Breite mehr.** Die Rasterspalte IST
   die Breite; das Kalenderblatt war ein Kasten mit eigener Groesse, das
   Datum ist es nicht. **Eine Zahl an zwei Stellen laeuft auseinander**, und
   zwar still — genau so ist die Kachel am 22.09.2026 dreimal gewandert.

   ⚠⚠ **Die FESTE Spalte ist der ganze Zweck.** «23–24» misst 66.8px,
   «28» misst 27.2px; stuende hier `auto` oder `max-content`, saessen die
   Titel je nach Datum an verschiedenen Kanten. Gemessen mit einer Sonde,
   die genau diese Texte in den Bestand setzt: alle vier Titel auf 136px
   bei 1280px, vorher wie nachher auf EINER Kante. */
/* ── ⚠⚠ DREI AENDERUNGEN AN EINER REGEL — Didi, 24.09.2026 ────────────

   1 **`padding` 12 → 18px oben und unten: «etwa das Anderthalbfache».**

     > ~~«`padding:12px 34px 12px 0`»~~ — Stand bis 24.09.2026.

     18 ist genau 1.5 × 12 UND eine Sprosse, die das Haus schon fuehrt:
     `.ressort-kopf{padding:0 0 18px}` ab 1000px und
     `.fe.wahlfeld + .filt{margin-top:18px}` — dort steht sie mit
     der Begruendung, sie sei «die dritte Zahl in einer Leiste mit zweien»
     und gehoere in die Sammlung fuer die Abstandsskala. **Anderthalbfach
     und Sprosse fallen hier zusammen**; waeren sie das nicht, ginge die
     Sprosse vor — eine gerechnete Zahl neben einer Leiter ist eine neue
     Stufe.

     ⚠ **Die Zeile zwischen zwei Zeilen waechst damit von 25 auf 37px**
     (18 + 1px Trennlinie + 18), der Abstand unter der gelben
     Eroeffnungslinie von 12 auf 18px. **Beide Male ist es dieselbe Zahl
     wie unter jeder Trennlinie** — Didis «zwischen gelber Linie und erster
     Zeile derselbe Abstand wie zwischen zwei Zeilen» braucht darum keine
     eigene Regel fuer die erste Zeile: die gelbe Linie IST der obere Rand
     der ersten Zeile, und ihr Polster ist dasselbe wie ueberall.
     **Gemessen vorher im lokalen Stapel am 24.09.2026 bei 375px:** gelbe
     Linie → Titel 12.0px, Trennlinie → Titel der naechsten Zeile 12.0px —
     schon vorher auf den Zehntel gleich. Der Satz ist damit ein Waechter
     und keine zweite Zahl; er steht im Bericht.

   2 **`align-items` center → baseline: das Datum auf die Grundlinie.**

     > ~~«`align-items:center` richtet beide gegeneinander aus»~~ — Stand
     > bis 24.09.2026; die Begruendung darueber gilt weiter fuer das, was
     > sie loest (Titel und Ort als EINE Gruppe), nicht mehr fuer das Wie.

     Didi: «Die Tageszahl steht auf der Grundlinie der ersten Titelzeile —
     auch bei zweizeiligen Titeln, nicht senkrecht mittig.»

     ⚠⚠ **Grundlinie und nicht Oberkante, und genau hier laufen die beiden
     auseinander.** Bei gleicher Schriftgroesse sehen sie gleich aus; die
     Tageszahl steht aber auf 19px (schmal 17) und der Titel auf
     `clamp(19px,1.04rem + 0.30vw,21px)` — bei 1440px sind das 21 gegen 19,
     und eine Oberkantenausrichtung legte die Zahl um den
     Ascender-Unterschied zu hoch. `baseline` nimmt die ERSTE Grundlinie
     jedes Rasterkindes: beim Datum die der Tageszahl (die Monatszeile ist
     die zweite und zaehlt nicht mit), bei `.anl-tx` die der ersten
     Titelzeile. **Ein zweizeiliger Titel verschiebt sie darum nicht** —
     das ist der Fall, an dem `center` gescheitert ist.

     ⚠ **Der alte Einwand vom 22.09.2026 traegt nicht mehr.** Er lautete:
     «bei `align-items:baseline` sitzt seine erste Grundlinie auf der des
     Titels, und die zweite Zeile schiebt die Reihe nach unten.» Das galt,
     solange `.anl-kal` ueber ZWEI Rasterreihen spannte und die erste Reihe
     ihre Hoehe vom Ueberhang bekam. Seit `div.anl-tx` die Gruppe bildet,
     hat der Kopf eine einzige Reihe: Der Ueberhang der Monatszeile
     verlaengert dieselbe Reihe, in der der Ort ohnehin steht, und schiebt
     nichts mehr gegeneinander.

   3 **`padding-right` 34 → 44px: so breit wie das Plus jetzt ist.**

     > ~~«`padding:12px 34px 12px 0`»~~ — die 34px stammen aus der Zeit, als
     > das Plus 18px breit war.

     Didi verlangt unter «Hover und Fokus» eine **gelbe Flaeche von 44 ×
     44px** um das Zeichen. Der Titel endet seit dem 24.09.2026
     ausdruecklich «bis zum Plus-Zeichen» (`.anl-tit`, Punkt 4) — und das
     Plus-Zeichen ist ab heute 44px breit und nicht 18. **Ohne diese Zeile
     liefe die erste Titelzeile unter der gelben Flaeche durch**, sobald
     jemand die Zeile ueberfaehrt oder aufklappt: Die Flaeche beginnt 44px
     vor der rechten Kante, das Titelfeld endete 34px davor.

     ⚠ **Eine Zahl statt drei.** 44 gilt jetzt auf jeder Breite; die
     schmale Ausnahme `padding-right:24px` unter 700px faellt mit — ihr
     Wortlaut steht dort.

   ── ⚠⚠ DIE 44er FLAECHE IST GEMALT UND NICHT GEBAUT ─────────────────

   **Das Plus ist kein Knopf**, sondern `::before` und `::after` am
   `<summary>`, 18 × 18px gezeichnet (schmal 14 × 14). Eine dritte Ebene
   gaebe es nicht, und ein echtes 44px-Kaestchen im Raster hiesse
   `min-height:44px` plus Polster — **die Zeile waere 80px hoch, bevor ein
   Titel darin steht.**

   Darum ein `background-image`: ein Farbverlauf aus zwei gleichen Farben,
   `no-repeat`, `44px 44px` gross, an `right center` gesetzt.
   **Ein Hintergrund nimmt keinen Platz.** Er sitzt am Polsterkasten des
   Kopfes, also auf derselben Mitte wie `top:50%` der beiden Striche, und
   die Striche liegen als Pseudoelemente ohnehin UEBER dem Hintergrund
   ihres Elements — kein `z-index`, keine Reihenfolgefrage.

   ⚠ **Die Farbe haengt an `--plus-flaeche` und nicht am `background`.**
   Sonst muesste der ganze Verlauf in jedem der drei Zustaende (Zeiger,
   Fokus, aufgeklappt) noch einmal dastehen. So steht die Bauform einmal
   hier und die Zustaende nennen nur, was sie aendern — dieselbe Bauart wie
   `.papier{--akzent:var(--papier-text)}`.

   ⚠ **`right center` heisst buendig mit der rechten Kante der Zeile** —
   derselben, an der die Trennlinien enden. Eine Flaeche, die darueber
   hinausragte, saehe wie ein Fehler aus; darum rueckt das Zeichen selbst
   von 15 auf 22px Abstand zur Kante (naechste Regel). */
/* ⚠⚠ **Die Spaltenluecke waechst von 48 auf 80px — Didi, 25.09.2026,
   zweite Ansage desselben Tages.**

   > ~~«Die Spaltenluecke waechst von 32 auf 48px. «Etwa anderthalbmal, in
   > einer bestehenden Stufe»: 48 ist beides — genau 1.5 × 32 und die
   > naechste Sprosse der Skala von Regel 10, auf der `.anl .ressort-inh`
   > ab 1100px schon seine 48 fuehrt.»~~ — Stand bis 25.09.2026 nachmittags.
   > ~~«`gap:32px`»~~ — Stand bis 25.09.2026 vormittags.

   ⚠ **Die Begruendung von heute Morgen ist nicht widerlegt, sondern
   ueberstimmt.** Sie war richtig fuer das, was Didi damals verlangt hat
   («anderthalbmal»); er hat am selben Tag nachgesehen und will mehr. Wer
   sie kuenftig liest, soll nicht nach ihrem Fehler suchen — es gibt keinen.

   Didi: «Abstand zwischen dem breitesten Datum (<<25–30>>) und dem Titel
   etwa 80px statt heute rund 50.»

   ── ⚠⚠ «Rund 50» kommt aus ZWEI Quellen ───────────────────

   Der Abstand, den man sieht, ist nicht die Luecke allein — die Spalte ist
   breiter als das Datum darin, und der Rest zaehlt mit:

       68.0px   die Datumsspalte
     − 66.8px   «25–30» bei 19px Archivo, das breiteste Datum
     = 1.2px    was in der Spalte leer bleibt
     + 48.0px   die Luecke
     = 49.2px   ← Didis «rund 50», auf den Zehntel genau

   **Die Zahl im Blatt ist also 48 und nicht 50.** Von ihr aus gerechnet:
   80 − 1.2 waeren 78.8. Die Luecke geht trotzdem auf glatte **80**, und der
   sichtbare Abstand misst damit 81.2px — «etwa 80» ist erfuellt, und die
   1.2px gegen eine krumme Zahl einzutauschen waere ein schlechter Handel.

   ⚠ **80 ist keine neue Zahl.** Es ist die oberste Sprosse derselben Skala
   von Regel 10 (4 · 8 · 16 · 24 · 32 · 48 · 80), auf der die 48 von heute
   Morgen steht — eine Sprosse weiter, nicht daneben. Dieselbe 80 traegt im
   Haus die Abschnittspolster (`clamp(46px,6vw,80px)`).

   ── ⚠⚠ Die LUECKE und nicht die SPALTE ────────────────────

   **Beide Schrauben verschieben den Titel um genau denselben Betrag.** Das
   Datum steht links in seiner Spalte, also gilt in jeder Zeile
   «Spalte − Datum + Luecke»; 32px mehr Spalte und 32px mehr Luecke ergeben
   beide 81.2px, auch bei den kurzen Daten. **Geometrisch ist die Wahl frei
   — inhaltlich nicht**, und zwar aus drei Gruenden:

   1 **Die 68 sind gemessen und kein Gestaltungsmass.** Sie tragen «25–30»
     (66.8), «MÄR 2027» (64.09) und «NOV 2026» (63.09) — und sonst nichts.
     Eine Spalte von 100px hiesse «das breiteste Datum plus Luft», und die
     drei gemessenen Zahlen erklaerten ihren Wert nicht mehr. **Die naechste
     Messung stellte sie zurueck**, mit Recht und ohne Meldung.

   2 **Eine breitere Spalte setzt die Monatszeile anders.** «MÄR–APR 2027»
     misst rund 97px und bricht heute zwischen Monat und Jahr um — das ist
     die Sinneinheit und ausdruecklich so gewollt. In einer 100px-Spalte
     stuende sie einzeilig, und die Spannen saehen anders aus als die
     einzelnen Monate. **Eine Luecke setzt keinen Text; eine Spalte schon.**

   3 **Die Spaltenbreite steht seit dem 24.09.2026 nur noch EINMAL im
     Blatt** — sie gilt bis 0 hinunter. Wer sie anfasst, fasst das Handy
     mit an. Die Luecke hat ihre eigene schmale Fundstelle und laesst es
     in Ruhe; das allein entscheidet die Frage schon.

   ── Die gemeinsame Kante ──────────────────────────────

   ⚠ **Die Titel bleiben auf EINER Kante, weil die Luecke dem RASTER
   gehoert und nicht dem Titel:** 68 + 80 sind in jeder Zeile dieselben
   Zahlen, gleich wie lang das Datum ist. Ein `padding-left` an `.anl-tit`
   saehe gleich aus und haette die Kante wieder an die Datumslaenge
   gehaengt — genau das, wogegen die feste Spalte am 24.09.2026 gebaut
   wurde.

   ⚠ **Die Kante ist FEST und nicht ererbt.** Sie liegt auf 148px, weil
   die Spalte 68 und die Luecke 80 misst — nicht, weil «25–30» zufaellig
   das breiteste Datum ist. Kaeme morgen ein breiteres, ruecken die Titel
   keinen Pixel; nur die 1.2px Rest in der Spalte wuerden knapper.

   ⚠ **Bei den kurzen Daten waechst der Abstand mit.** «28» misst 27.2px
   und steht jetzt 120.8px vor dem Titel statt 88.8. Das ist die Bauart
   einer festen Spalte und kein Nebenschaden dieser Aenderung — Didis Mass
   gilt dem breitesten Datum, und daran ist gerechnet.

   ── ⚠⚠ Aus zwei Fundstellen sind DREI geworden ───────────

   > ~~«**Zweite Fundstelle:** `@media(max-width:999px)` fuehrt dieselbe
   > Luecke schmal; wer nur hier aendert, hat unter 1000px weiter den alten
   > Wert.»~~ — als Warnung richtig, als Anweisung ueberholt.

   > ~~«**Hier wird mit Absicht nur die eine Zahl geaendert.** Die schmale
   > Fundstelle deckt alles unter 1000px, also auch das Handy — und Didi
   > sagt <<Handy unveraendert>>. Sie behaelt ihre 24.»~~
   > — Stand bis 25.09.2026 abends.

   **Der Satz stimmt in der Sache und nicht mehr im Bau.** Das Handy behaelt
   seine 24, aber nicht mehr, weil eine Regel bis 0 hinunter reicht: Die
   schmale Fundstelle endet seit heute abend bei 619px, und zwischen 620 und
   999 steht ein eigenes Band. Drei Bereiche, drei Zahlen — 80 hier, 40 im
   Band, 24 unter 620.

   ⚠ **Damit faellt das Verhaeltnis «schmal ist die Haelfte von weit»**, mit
   dem heute Morgen 16 → 24 begruendet wurde. Es war nie ein Hausgesetz,
   sondern die Begruendung EINER Aenderung; diese Ansage nennt eine Zahl und
   keine Proportion.

   ⚠ **Eine Handy-Abgrenzung an DIESER Regel brauchte es weiterhin nicht.**
   Sie gilt dem Wortlaut nach fuer jede Breite, wird aber unter 1000px von
   den beiden schmalen Fundstellen ueberschrieben: **Die 48 lebte schon
   vorher nur ab 1000px, die 80 tut es auch.** Ein `@media(min-width:620px)`
   darum herum behauptete eine Schwelle bei 620, auf deren oberer Seite die
   Zahl bis 999px gar nicht gilt — eine Abfrage, die nichts schaltet. **Die
   Abgrenzung ist gekommen, aber eine Ebene tiefer**, dort wo sie etwas
   schaltet.

   > ~~«⚠ **Gemeldet, nicht geaendert:** Zwischen 620 und 999px steht die
   > Luecke auf 24px, der sichtbare Abstand also auf 25.2px. … Wer die
   > Spanne mitziehen will, sagt eine eigene Zahl dafuer an.»~~
   > — erledigt am 25.09.2026 abends.

   **Didi hat die eigene Zahl angesagt: 40px.** Die Meldung hat getan, wozu
   sie da war; sie steht hier nur noch, damit sichtbar bleibt, dass die
   Spanne zurueckgestellt und nicht uebersehen war. Zahl und Begruendung
   stehen beim Band (`@media(min-width:620px) and (max-width:999px)`),
   zusammen mit der Summe, die dort mitzieht.

   ⚠ **Die drei Zahlen nebeneinander stehen bei `.anl .ressort-inh`** — dort
   haengt an jeder eine Summe, und dort faellt am ehesten auf, wenn eine
   nachgezogen werden muss. */
.anl .ressort-kopf{
  display:grid;grid-template-columns:68px minmax(0,1fr);
  gap:80px;align-items:baseline;padding:18px 44px 18px 0;
  --plus-flaeche:transparent;
  background:linear-gradient(var(--plus-flaeche),var(--plus-flaeche)) no-repeat right center/44px 44px;
}
/* ⚠⚠ **Das Zeichen rueckt in die Mitte seiner Flaeche — 24.09.2026.**

   Der Klappkopf des Hauses setzt beide Striche auf `right:6px`; der
   senkrechte traegt zusaetzlich `margin-right:8px`, damit das Kreuz sich
   deckt. **Beide Mitten liegen damit 15px vor der rechten Kante** (6 + 18/2
   und 6 + 8 + 2/2). Eine 44px breite Flaeche um diese Mitte ragte 7px ueber
   die Zeile hinaus.

   `right:13px` legt die Mitte auf 22px — **genau die halbe Flaeche**, und
   damit deckt sich der Rand der gelben Flaeche mit dem Rand der Zeile.

   ⚠ **`.anl`-eng und nicht am Klappkopf des Hauses.** `.ressort-kopf` traegt
   auch `/vorstand/`, `/schiri/`, `/archiv/` und die beiden Kernbloecke; dort
   hat niemand eine Flaeche bestellt, und eine um 7px verschobene Mitte waere
   eine Aenderung auf zehn Seiten ohne Auftrag. */
.anl .ressort-kopf::before,.anl .ressort-kopf::after{right:13px}
/* ── ⚠⚠ ZEIGER, TASTATURFOKUS UND AUFGEKLAPPT — Didi, 24.09.2026 ─────

   > «Zeile beim Ueberfahren und bei Tastaturfokus: Grund `--papier-flaeche`.
   > Das Plus bekommt dabei eine gelbe quadratische Flaeche, 44 × 44 px, das
   > Zeichen bleibt dunkel. Aufgeklappt: Minus, Flaeche bleibt gelb.
   > Handy: kein Hover, aufgeklappt wie oben.»

   **Drei Zustaende, zwei Merkmale, und sie fallen nicht zusammen:** Zeiger
   und Fokus faerben die ganze Zeile UND die Flaeche, aufgeklappt faerbt nur
   die Flaeche. Ein aufgeklappter Anlass ist kein beruehrter Anlass; sein
   Grund gehoert dem Inhalt darunter und nicht der Kopfzeile.

   ⚠ **Der Fokus sitzt am `<summary>` und nicht an der Zeile.** Das
   bedienbare Element ist das `summary` — die Tastatur landet dort, nicht
   auf dem `<details>`. Ein `.anl:focus-within` faerbte dieselbe Flaeche und
   waere trotzdem falsch: Er spraeche auch an, wenn der Fokus im
   aufgeklappten Inhalt auf einem der beiden Verweise steht.

   ⚠ **`:focus-visible` und nicht `:focus`.** Didi sagt «Tastaturfokus». Ein
   Mausklick setzt den Fokus ebenfalls; mit `:focus` bliebe die Zeile nach
   dem Klick gefaerbt stehen, obwohl der Zeiger laengst woanders ist.
   ⚠⚠ ~~«Der Fokusring aus `:14646` bleibt daneben stehen — er sagt ‹hier
   bist du›, der Grund sagt ‹diese Zeile ist gemeint›; beides zusammen ist
   die Form, die das Haus an jedem Klappkopf fuehrt.»~~ — galt bis zum
   25.09.2026. **Didi hat die Doppelung aufgeloest:** «Elemente mit
   Hover-Flaeche — Knoepfe, Segmentleisten, ✕, Plus, Klappzeilen,
   Blaetterleiste: Fokus = derselbe Zustand wie Hover. Kein Ring.»

   Die Regel von damals sagte zweimal dasselbe: Grund UND Ring bezeichnen
   beide die Zeile, an der die Tastatur steht. Der Grund kann es allein,
   **weil dieser Klappkopf einen Zeigerzustand HAT** — der Ressortkopf ohne
   `.anl` hat keinen und behaelt darum seinen Ring aus der Grundregel.

   ⚠⚠ **«Kein Hover auf dem Handy» ist `@media(hover:hover)` und keine
   Breitenabfrage.** Das Blatt fuehrt diese Form schon rund vierzigmal
   ~~(`:1274`, `:1586`, `:3521`, `:4298`, …)~~ — vier blosse Zahlen, am
   25.09.2026 gestrichen; sie benannten kein Beispiel, sondern eine Stelle.
   Die Abfrage fragt die ZEIGERART und
   nicht das Fenster. Eine `max-width`-Abfrage verfehlte das Ziel in beide
   Richtungen: ein schmales Fenster auf dem Computer hat einen Zeiger, ein
   breites Tablett keinen. **Ohne die Klammer bliebe der Grund auf dem Handy
   nach dem Tippen kleben**, weil der Zeiger dort niemand ist, der wieder
   weggeht.

   ⚠ **Das Zeichen bleibt dunkel** — und zwar von selbst: Die Striche tragen
   `background:var(--papier-text)` aus dem Klappkopf des Hauses
   (`.ressort-kopf::before`).
   Hier steht keine Farbe, weil hier keine noetig ist. */
.anl[open] > .ressort-kopf{--plus-flaeche:var(--gelb)}
.anl .ressort-kopf:focus-visible{--plus-flaeche:var(--gelb);background-color:var(--papier-flaeche);outline:0}
@media(hover:hover){
  .anl .ressort-kopf:hover{--plus-flaeche:var(--gelb);background-color:var(--papier-flaeche)}
}
/* **Das Kalenderblatt spannt ueber beide Reihen — 22.09.2026.**

   ⚠ **Sonst bestimmt es die Hoehe der ersten Reihe.** Es ist zweizeilig
   (Tageszahl plus Monat) und damit hoeher als ein einzeiliger Titel; bei
   `align-items:baseline` sitzt seine erste Grundlinie auf der des Titels,
   und die zweite Zeile schiebt die Reihe nach unten. Gemessen bei 375px:
   **Titel → Ort 18.4px bei einzeiligem Titel, 2px bei zweizeiligem** — der
   zweizeilige Titel fuellte den Ueberhang des Kalenderblatts auf.

   > **Ein Abstand zwischen zwei Dingen darf nicht davon abhaengen, wie
   > gross ein drittes ist.** Die Reihe gehoerte dem Kalenderblatt, obwohl
   > der Abstand den Titel meinte.

   Mit `grid-row:1 / span 2` misst die erste Reihe nur noch den Titel, und
   der Abstand zur Metazeile ist die Reihenluecke — 2px, immer. */
/* ⚠⚠ **Hier stand bis zum 22.09.2026 eine Rasterbelegung ueber zwei
   Reihen:** «`.anl-kal{grid-row:1 / span 2}` · `.anl-tit{grid-column:2;
   grid-row:1}` · `.anl-meta{grid-row:2}`», und ihre Begruendung war, dass
   ein zweizeiliges Kalenderblatt sonst die Hoehe der ersten Reihe
   bestimmt.

   **Der Befund stimmte, die Bauform loeste ihn nur halb.** Zwei Reihen
   koennen nicht als Gruppe ausgerichtet werden — jede Reihe richtet sich
   einzeln aus. Didi will Titel und Ort **zusammen** mittig neben dem Blatt;
   dafuer muessen sie ein Ding sein.

   `div.anl-tx` ist dieses Ding. Damit hat der Kopf nur noch zwei
   Rasterfelder in EINER Reihe, `align-items:center` richtet beide
   gegeneinander aus, und der Abstand Titel → Ort ist ein Rand innerhalb
   der Gruppe und haengt an gar keiner Reihe mehr. */
.anl-tx{min-width:0}
.anl-meta{margin-top:2px}
/* ── ⚠⚠ DAS DATUM OHNE KASTEN — Didi, 24.09.2026, Punkt 2 ─────────────

   > «Kein grauer Grund, kein gelber Balken oben. Tageszahl in Archivo fett,
   > etwa 20 px — kleiner als heute, nicht lauter als der Titel daneben.
   > Darunter Monat und Jahr in der Etikettschrift, gedaempft. Linksbuendig
   > in einer festen Spalte, damit die Titel auf einer Kante stehen. Die
   > Trennlinien zwischen den Zeilen bleiben.»

   **Vier Zeilen fallen weg, und jede war eine Kastenzeile:** `background`,
   `border-top`, `height` und `place-content`. Uebrig bleibt, was ein Datum
   ausmacht — zwei Zeilen Text untereinander.

   ⚠ **`text-align:center` faellt mit.** Es war die Mitte DER KACHEL. Ohne
   Kachel mittet es gegen eine unsichtbare Spalte, und die Tageszahlen
   stuenden je nach Laenge verschieden weit rechts: gemessen im lokalen
   Stapel am 24.09.2026 bei 1280px standen die vier Zahlen auf x=45.6,
   61.5, 61.7 und 60.4 — **vier Kanten fuer dieselbe Angabe.** Linksbuendig
   ist es eine.

   ⚠ **`display:grid` wird `block`.** Das Raster hatte genau eine Aufgabe,
   naemlich `place-content:center` moeglich zu machen; zwei Bloecke
   untereinander brauchen kein Raster. **Eine Bauform, die ihren Grund
   verliert, verliert die Zeile mit** — sonst steht sie da und der naechste
   Leser sucht, was sie ausrichtet.

   ⚠⚠ **Und `block` ist heute nachweislich wirkungslos — die Zeile bleibt
   trotzdem.** `.anl-kal` ist Rasterkind, und Rasterkinder werden ohnehin
   blockiert; gemessen im lokalen Stapel am 24.09.2026 gegen
   `display:revert`: beide Male `block`, 68x34.2px. **Sie steht hier, weil
   sie das Einzige ist, was `.anl-kal` noch selbst ueber sich sagt** — die
   Breite kommt aus der Rasterspalte, die Schriften aus den Kindern. Ohne
   sie haette die Klasse gar keine Regel mehr, und eine Klasse ohne Regel
   ist ein Haken, den niemand sieht (derselbe Satz, mit dem
   `.anl-kal-spanne` am 22.09.2026 geloescht wurde). **Sie traegt ausserdem
   das Einzige, was nicht vom Elternteil abhaengt:** Wird aus dem Kopf
   eines Tages wieder ein gewoehnlicher Block, bleibt das Datum gestapelt.

   ⚠ **Die Trennlinien bleiben unberuehrt.** Sie haengen an `.anl`
   (`border-top:1px solid var(--papier-linie)`) und an der Eroeffnungslinie
   `.sec + .anl,.sk + .anl` — beides eine Ebene ueber dem Datum. Gemessen
   nachher bei 1280 und 375px: Zeile 1 und 3 `2px solid rgb(252,222,0)`,
   Zeile 2 und 4 `1px solid rgba(11,11,10,.14)` — unveraendert.

   Der abgeloeste Vermerk, der die Kachel gebaut und begruendet hat: */
/* ── Das Kalenderblatt als Flaeche — 22.09.2026 ────────────────────────

   **Kein Wert hier ist erfunden.** Die graue Flaeche ist
   `--papier-flaeche`, dieselbe, auf der die Personenkacheln stehen
   (gemessen an `/vorstand/`: `rgb(242,240,234)`). Die gelbe Oberkante ist
   `3px solid var(--gelb)` — dieselbe Staerke wie an `.papier .info` in der
   rechten Spalte und an `.karte`. **`.karte` fuehrt beides schon
   zusammen** (`background:var(--papier-flaeche);border-top:3px solid
   var(--gelb)`); das Kalenderblatt ist dieselbe Bauform in kleiner.

   Die Tageszahl traegt die vorhandene Stufe `clamp(30px,1.54rem +
   1.49vw,46px)` — sie steht seit je an zwei Stellen im Haus und endet bei
   genau den 46px, die Didi nennt.

   ⚠ **Die Spannengroesse ist gerechnet und keine zweite Zahl.**
   `calc(… * .74)` ergibt 34px am oberen Ende derselben Stufe. **Zwei
   Schriftgroessen, die zusammengehoeren, duerfen nicht getrennt
   wandern** — wer die eine aendert, aendert die andere mit.

   `letter-spacing:.05em` ist «leicht gesperrt» und der kleinste positive
   Wert, den das Haus fuehrt. Die grossen Archivo-Zeilen tragen sonst
   NEGATIVE Sperrung; eine Zahl ohne Wortbild braucht das Gegenteil, damit
   «23–24» nicht zusammenklebt.

   `display:grid;place-content:center` statt Polster: Die Flaeche hat eine
   feste Groesse, und der Inhalt soll darin stehen, nicht sie aufblaehen. */
.anl-kal{display:block}
/* ⚠⚠ **Und eine Stufe fuer ALLE Tageszahlen — 22.09.2026, dritte
   Fassung desselben Tages.**

   Bis eben trugen einzelne Tage Stufe B (34.9px) und Spannen Stufe lead
   (21px). **Zwei Groessen in derselben Spalte sind zwei Rufstaerken fuer
   dieselbe Aussage:** «28» stand gross, «23–24» klein — und welcher
   Anlass welche bekam, entschied die Laenge seines Datums und nicht sein
   Gewicht.

   > **Eine Spalte, in der die Schriftgroesse vom Inhalt abhaengt, liest
   > sich als Rangfolge, die niemand gemeint hat.**

   Beide stehen jetzt auf **Stufe C** — 27px bei 1440, 22.3px bei 375.
   Die Kachel waechst dafuer auf 112px: Das ist die Breite, in der auch
   «25–30» (94.9px auf C) noch Luft hat — 8.5px je Seite gegen 36.7px bei
   «28». **Gleich viel Luft ist bei mittig gesetztem Text nicht zu haben**,
   solange die Zahlen verschieden lang sind; 112px ist die Breite, ab der
   die laengste nicht mehr gedraengt steht.

   `.anl-kal-spanne` ist ersatzlos weg, im Stylesheet wie im Markup. Eine
   Klasse ohne Regel ist ein Haken, den niemand sieht, und beim naechsten
   Lesen eine Frage ohne Antwort.

   Der abgeloeste Vermerk von heute Mittag: */
/* ⚠⚠ **Eine Stufe hinunter — 22.09.2026, am selben Tag wie hinauf.**

   Die Tageszahl stand auf Stufe A (`clamp(30px,1.54rem + 1.49vw,46px)`),
   die Spanne auf einem daraus gerechneten `* .74`. **Die Rechnung faellt
   weg**, weil das Haus fuer beide Groessen eine Stufe fuehrt und eine
   gerechnete Zahl neben einer Leiter eine fuenfte Stufe waere.

   Gerendert bei 1440 / 375:  lead 21/19 · C 27/22.3 · B 34.9/26 · A 46/30.2

   Tageszahl auf **B** — 34.9 ist Didis «etwa 34» auf die Nachkommastelle.
   Spanne auf **lead**, nicht auf C: «25–30» misst auf C **95.0px** und
   haette in der 96px-Kachel einen Rand von einem halben Pixel je Seite.
   **Eine Zahl, die die Kachel genau ausfuellt, sieht aus wie ein Fehler,
   auch wenn sie passt.** Auf lead sind es 73.9px. */
/* ── ⚠⚠ 19px FEST STATT STUFE C — 24.09.2026, Punkt 2 ────────────────

   > ~~«Beide stehen jetzt auf Stufe C — 27px bei 1440, 22.3px bei 375.»~~
   > — Stand bis 24.09.2026. Die Begruendung darueber gilt weiter fuer das,
   > was sie sagt: EINE Groesse fuer alle Tageszahlen. Nur ist es eine
   > andere.

   Didi: «etwa 20 px — kleiner als heute, nicht lauter als der Titel
   daneben.» Gerendert im lokalen Stapel am 24.09.2026:

     Breite   Tageszahl vorher   Tageszahl nachher   Titel daneben
     1440     27.0               19                  20.96
     1280     26.4               19                  20.48
     1000     25.1               19                  19.64
      999     22.0 (fest)        19                  19.64
      800     19.0               19                  19.04
      700     19.0               17                  17
      375     19.0               17                  17

   ⚠ **19 und nicht 20: 20 ist keine Sprosse.** Die Leiter fuehrt hier
   `--tx-lead` (`clamp(19px,1.04rem + 0.30vw,21px)`) und `--tx`
   (17px). **19px ist der BODEN dieser Stufe** — die dritte Bauart, die das
   Haus fuehrt, neben «auf der Leiter» und «ausserhalb der Leitern»; sie
   steht schon am Treffertitel (`.treffer .tit`) und traegt dort dieselbe
   Begruendung.

   ⚠⚠ **Fest und nicht als Kurve, und das ist gemessen.** Die Kurve stuende
   bei 1280 auf 20.48 und bei 1440 auf 20.96 — **also genau auf dem Wert des
   Titels**, und «nicht lauter als der Titel» waere dann eine Aussage ueber
   die Rundung. Dazu der Grund, den der schmale Block seit dem 22.09.2026
   nennt und der jetzt fuer JEDE Breite gilt: **die Spalte ist fest (68px),
   eine `vw`-Kurve ist es nicht** — die beiden laufen am oberen Ende
   auseinander, wo niemand hinsieht.

   ⚠ **«Kleiner als der Titel» gilt ab 788px, darunter gilt «gleich gross».**
   Der Titel liegt selbst auf dieser Stufe und faellt unter 788px auf ihren
   Boden, also auf dieselben 19px; unter 700px stehen beide auf `--tx`.
   **Gleich gross ist nicht lauter** — die Tageszahl ist nirgends groesser
   als der Titel, und das ist der Satz, den Didi geschrieben hat. Wer echte
   Unterschreitung auf jeder Breite will, muss den Titel eine Stufe hoeher
   setzen; das ist ein Entscheid ueber den Titel und steht im Bericht. */
.anl-kal-tag{
  display:block;font-family:var(--d);font-variation-settings:'wdth' 106;
  font-weight:800;font-size:19px;
  letter-spacing:.05em;line-height:1;color:var(--papier-text);white-space:nowrap;
}
/* ⚠⚠ **`white-space:nowrap` ist am 22.09.2026 gefallen.** Der abgeloeste
   Vermerk stand im schmalen Block: «Die Etikettschrift skaliert nicht mit
   der Breite: «DEZ–JAN 2026/27» misst 112.6px auf jeder Breite und passte
   in 88px nie. Sie darf hier darum umbrechen — und nur sie, in genau
   diesem einen Fall.»

   **«Genau dieser eine Fall» ist seit der 96er Kachel jeder Fall.**
   Gemessen bei 1440: «MÄR–APR 2027» 96.7px und «DEZ–JAN 2026/27» 112.6px
   in einer 96px breiten Kachel.

   > **Eine Ausnahme, die man an die Breite haengt, gilt fuer die Breite
   > und nicht fuer den Grund.** Der Grund war nie das Fenster, sondern
   > dass eine Schrift ohne `vw`-Anteil in einer festen Kachel steht.

   Die Tageszahl behaelt ihr `nowrap`: Sie hat kein Trennzeichen, an dem
   ein Umbruch Sinn ergaebe. */
.anl-kal-mon{
  display:block;font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);
  letter-spacing:.09em;text-transform:uppercase;color:var(--tx-leise);
  line-height:1.2;margin-top:2px;
}
/* **Das Kalenderblatt — 22.09.2026.**

   ⚠⚠ **Hier stand `.anl-dat`**, eine Zeile Fliesstext in Etikettschrift:
   «`font-family:var(--b);font-weight:700;font-size:var(--tx-klein);
   letter-spacing:.05em;text-transform:uppercase;color:var(--gold-flaeche)`».
   Sie brach in der 112px-Spalte dort um, wo der Platz endete — auf dev
   stand «28. / NOVEMBER / 2026» in drei Zeilen.

   **Kein einziger Wert hier ist neu.** Die Tageszahl traegt exakt die
   Fassung von `.anl-tit` (Archivo, `wdth 106`, 800, dieselbe `clamp()`,
   dasselbe `letter-spacing`), Monat und Jahr die Etikettfassung, die im
   Haus an `.eye`, `.anl-marke` und `thead th` steht. Was sich aendert, ist
   die Anordnung.

   ⚠ **`white-space:nowrap` an beiden Teilen, und das ist die eigentliche
   Zusage.** Die Spaltenbreite allein genuegt nicht: Sie kann sich aendern,
   die Schrift kann sich aendern, und ein Umbruch faellt erst auf, wenn ihn
   jemand sieht. **Mit `nowrap` bricht lieber die Spalte auf als die Zahl** —
   und eine zu schmale Spalte sieht man sofort.

   `line-height:1.05` an der Tageszahl statt der 1.15 des Titels: Die Zahl
   steht allein auf ihrer Zeile und braucht keinen Platz fuer Unterlaengen,
   die es in «23.–24.» nicht gibt. */
/* ⚠⚠ **Diese Regel ist am 22.09.2026 abends wieder entfallen** — der
   Wortlaut steht darunter und erklaert, warum es sie gab.

   **Sie hing daran, dass der Text OBEN in der Zeile stand.** Seit Titel
   und Ort als Gruppe `.anl-tx` neben dem Blatt stehen, ist die Mitte der
   Zeile auch die Mitte der Gruppe — `top:50%` aus dem Klappkopf des Hauses
   trifft sie. Gemessen: Zeile 111px hoch, Gruppe mittig darin.

   ⚠ **Das gilt seit dem 24.09.2026 abends aus einem anderen Grund, und es
   gilt weiter.** ~~«mittig neben dem Blatt»~~: Der Kopf richtet seine
   beiden Rasterkinder jetzt an der GRUNDLINIE aus, nicht mittig. Die
   Gruppe ist aber in aller Regel das hoehere der beiden Kinder und fuellt
   damit die Reihe — ihre Mitte bleibt die Mitte der Zeile, und das Polster
   ist oben wie unten 18px. **Nur wenn das Datum einmal hoeher waere als
   Titel und Ort zusammen, laege das Zeichen etwas unter der Titelmitte**;
   im Bestand kommt der Fall nicht vor (ein Anlass ohne Ort und ohne Marke
   mit einzeiligem Titel ist der niedrigste, und auch dort traegt die
   Gruppe).

   **Und sie war zerbrechlich:** Sie rechnete mit der Schriftgroesse des
   Titels und haette bei einem zweizeiligen Titel auf die erste Zeile
   gezeigt, waehrend die Gruppe tiefer rutscht.

   Der abgeloeste Vermerk: */
/* **Plus und Minus stehen auf Titelhoehe — 22.09.2026.**

   Der Klappkopf des Hauses setzt sie auf `top:50%`, also in die Mitte der
   ganzen Zeile. **Bei einem Ressort ist die Zeile die Ueberschrift; hier
   ist sie Kalenderblatt, Titel, Marke und Ort** — die Mitte liegt dann
   irgendwo zwischen Titel und Ort und gehoert zu nichts.

   > **Ein Zeichen, das eine Zeile mittet, meint die Zeile. Meint es den
   > Titel, muss es den Titel messen.**

   Gerechnet statt geraten: `16px` ist das Polster oben aus `.ressort-kopf`,
   die `clamp()` ist die Schriftgroesse von `.anl-tit`, und `0.575` ist ihre
   `line-height:1.15` halbiert. Damit sitzt die Mitte des Zeichens auf der
   Mitte der ERSTEN Titelzeile — auch wenn der Titel zwei Zeilen hat, und
   auf jeder Breite, weil die `clamp()` dieselbe ist.

   ⚠ **`em` half hier nicht.** Ein Pseudoelement des `summary` erbt dessen
   Schriftgroesse, nicht die des `h3` darin; `0.575em` haette mit der
   Grundschrift gerechnet und waere je nach Breite um bis zu 6px daneben
   gelegen. */

/* ⚠⚠ **Hier stand bis zum 22.09.2026 die erste Fassung des
   Kalenderblatts** — Tageszahl in der Titelgroesse, Monat in
   `--gold-flaeche`, beides ohne Flaeche darunter. Sie steht jetzt eine
   Bildschirmhoehe weiter oben als Kachel; die Begruendung dort nennt die
   Werte einzeln. */
/* ⚠⚠ **Eine Stufe unter C — 22.09.2026.** Der abgeloeste Vermerk lautete:
   «Stufe C — derselbe Rang wie Karten- und Kastentitel.»

   **In der Liste ist der Titel kein Kastentitel, sondern ein Eintrag von
   vielen.** Er steht jetzt auf der naechsten Stufe darunter, gerendert
   21px bei 1440 und 19px bei 375.

   ⚠ **Didi nennt «etwa 24 px», und 24 ist keine Stufe.** Die Leiter fuehrt
   21 und 27; beide liegen 3px daneben. Genommen ist die kleinere, weil der
   Auftrag «eine Stufe kleiner» sagt und 27 die heutige ist. **Gemeldet,
   nicht stillschweigend gerundet.** */
/* ── ⚠⚠ `max-width:28ch` IST GEFALLEN — Didi, 24.09.2026, Punkt 4 ─────

   > «Der Titel nutzt die ganze Breite bis zum Plus-Zeichen.»

   > ~~«Die Zeilenlänge begrenzt jetzt max-width in ch — eine Textbreite
   > gehört dem Text, nicht dem Raster.»~~ — Stand bis 24.09.2026, oben bei
   > `.anl .ressort-kopf`.

   **Der Satz stimmt fuer Fliesstext und nicht fuer eine Titelzeile.** 28ch
   sind eine bequeme LESE-Zeile; ein Anlasstitel ist eine Beschriftung, die
   man erfasst und nicht liest. Gemessen im lokalen Stapel am 24.09.2026 bei
   1280px: Die Titelspalte bot **1030px**, `28ch` deckelten den Titel auf
   **380.8px** — **649px blieben leer**, und ein etwas laengerer Name als
   «Gruempelturnier 2027» brach genau dort um, wo der Deckel endete und
   nicht dort, wo die Zeile endet. Nachher misst dieselbe Zeile 1074px
   (68px Datumsspalte statt 112 sind 44px davon).

   > **Eine Breite, die kuerzer ist als die Spalte, erzeugt einen Umbruch,
   > den die Seite nicht braucht — und sie erzeugt ihn immer, auch dort, wo
   > gar nichts eng ist.**

   Ohne Deckel endet der Titel dort, wo das Polster fuer Plus und Minus
   beginnt (**`padding-right:44px`**) — **das ist woertlich «bis zum
   Plus-Zeichen»**, und es ist dieselbe Kante auf jeder Breite.

   > ~~«(`padding-right:34px`, schmal 24px)»~~ — Stand bis 24.09.2026
   > abends. **Der Satz ist geblieben, die Zahl ist mitgewandert:** Das
   > Plus-Zeichen ist seither 44px breit, weil es eine gelbe Flaeche
   > bekommen hat. Eine Grenze, die «bis zum Plus-Zeichen» heisst, muss mit
   > dem Plus-Zeichen wandern — sonst liefe der Titel darunter durch.

   ⚠ Der Titel darf damit umbrechen, und das soll er: Punkt 5 verlangt es
   ausdruecklich fuer das Handy. Was faellt, ist der VORZEITIGE Umbruch. */
.anl-tit{font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:800;
  font-size:clamp(19px,1.04rem + 0.30vw,21px);letter-spacing:-.02em;
  color:var(--papier-text);margin:0;line-height:1.15}
/* **Marke und Ort teilen sich eine Reihe — 22.09.2026.**

   ⚠⚠ **Hier standen `.anl-tag` und `.anl-ort` als zwei Rasterfelder.** Der
   abgeloeste Vermerk galt der Stellung und gilt weiter: «Die Zielgruppe
   steht direkt hinter dem Titel, nicht am rechten Rand: sie gehoert zum
   Titel, und ueber 700px Abstand liest niemand als Zusammenhang.»

   **Zwei Felder waren zwei Reihen, und jede hatte ihre eigene Bedingung** —
   darum war der Abstand vom Titel zur naechsten Zeile bei jedem Anlass ein
   anderer. Die Begruendung steht in `page-anlaesse.php`; hier steht nur die
   Folge: eine Reihe, `display:flex`, und die Reihe entsteht gar nicht,
   wenn beides fehlt.

   `gap:16px` ist die Spaltenluecke des Kopfrasters, keine neue Zahl.

   ── Die Marke ────────────────────────────────────────────────────────

   **Deutlich heisst dunkel und unterstrichen, nicht gross.** Sie traegt die
   Etikettfassung des Hauses und dazu `border-bottom:2px solid var(--gelb)` —
   dieselbe gelbe Unterkante, die `thead th` schon traegt. `--papier-text`
   statt des frueheren `--papier-halb`: Eine Marke, die leiser ist als der
   Ort daneben, markiert nichts. */
/* ── ⚠⚠ ETIKETT STATT UNTERSTRICH — Didi, 24.09.2026, Punkt 3 ────────

   > «Verein», «Auf Einladung» u. ae. ohne Unterstrich: in der
   > Etikettschrift vor dem Ort, mit Trennpunkt — «VEREIN · Vogtei,
   > Herrliberg». Farbe wie das Ressort in der News-Metazeile auf hellem
   > Grund.»

   > ~~«Deutlich heisst dunkel und unterstrichen, nicht gross. Sie traegt
   > die Etikettfassung des Hauses und dazu `border-bottom:2px solid
   > var(--gelb)` — dieselbe gelbe Unterkante, die `thead th` schon
   > traegt.»~~ — Stand bis 24.09.2026.

   **Der gelbe Strich hat eine Bedeutung, die hier nicht gemeint war.** An
   `thead th` sagt er «hier beginnt eine Tabelle»; an einer Marke in einer
   Textzeile sagt er «Verweis». Der Trennpunkt leistet dasselbe billiger:
   Er trennt, ohne zu behaupten.

   ── ⚠⚠ DIE FARBE IST GESUCHT UND NICHT GEWAEHLT ──────────────────

   Das Ressort der News-Metazeile ist `.kat-ress`; es erbt von `.kat`,
   und `.kat` laeuft ueber `--akzent`. Auf hellem Grund setzt
   `.papier{--akzent:var(--papier-text)}`. Gemessen im lokalen
   Stapel am 24.09.2026 auf `/news/` bei 1280px, sechs Kacheln:

     .kat-ress   color rgb(11, 11, 10)   11px   Public Sans 700   uppercase

   **`var(--akzent)` und nicht `var(--papier-text)`, obwohl beide heute
   denselben Wert ergeben.** Der gemessene Wert war schon vorher gleich —
   die Marke stand auf `--papier-text` und traf #0B0B0A zufaellig richtig.
   **Eine Farbe, die zufaellig stimmt, wandert beim naechsten Mal nicht
   mit**; ueber `--akzent` haengt sie an derselben Rolle wie das Ressort,
   und der Satz «Farbe wie das Ressort» bleibt wahr, wenn jemand die
   Akzentfarbe verschiebt. Dieselbe Lehre steht 14000 Zeilen weiter oben
   bei `.kat-dat`: **das Token und nicht der rohe Wert.**

   ⚠ **Die Laufweite bleibt bei `.09em` und wird NICHT die `.19em` von
   `.kat`.** Didi nennt die Farbe; die Sperrung ist die des Nachbarn
   `.anl-kal-mon` in derselben Zeile, und zwei Etikettsperrungen
   nebeneinander waeren der sichtbarere Bruch. Gemeldet, nicht
   stillschweigend angeglichen.

   ── ⚠⚠ DER TRENNPUNKT IST AN DIE MARKE GEWANDERT — 24.09.2026 ────

   Didi: «Etikett und Trennpunkt gehoeren zusammen. Bricht die Zeile um,
   steht der Ort auf der naechsten Zeile ohne fuehrenden Punkt.»

         AUF EINLADUNG ·
         Clubhaus Langacker, Herrliberg

   > ~~«DER TRENNPUNKT HAENGT AM ORT UND NICHT AN DER MARKE. Dieselbe
   > Bauform wie `.kat-ress + .kat-dat::before` (`:955`) und
   > `.sp-pos + .sp-team::before`, aus demselben Grund: **Ein Anlass ohne
   > Marke ist der Normalfall** — <<Oeffentlich>> steht absichtlich nicht
   > da —, und ein Punkt an der Marke haette bei jedem oeffentlichen Anlass
   > eine Zeile mit <<· Sportanlage Langacker>> eroeffnet. Der
   > Nachbarwaehler braucht nur den Nachbarn.»~~
   > — Stand bis 24.09.2026.

   > ~~«⚠ **Der Punkt braucht keine eigene Farbe.** Er steht IM `.anl-ort`
   > und erbt dessen `--papier-halb` — gedaempft, wie in der News-Metazeile,
   > wo derselbe Punkt aus demselben Grund keine Zeile hat.»~~
   > — Stand bis 24.09.2026.

   **Die Sorge des alten Vermerks bleibt richtig und wird jetzt anders
   bezahlt.** Ein Punkt fest an der Marke eroeffnete bei jedem
   oeffentlichen Anlass eine Zeile mit «· Sportanlage Langacker» — genau
   darum steht hier `:has(+ .anl-ort)` und nicht das blosse `::after`: Die
   Bedingung ist dieselbe wie vorher («nur wenn beide da sind»), sie haengt
   nur am anderen Ende. `:has()` fuehrt das Blatt schon an `.eye:has(+ h2)`,
   `.ressort-kopf:has(.verbandslogo)` und
   `.filterwahl:has(> .filt-weg)`.

   ⚠⚠ **Der Grund fuer den Umzug ist der Umbruch und nur er.** `.anl-meta`
   traegt `flex-wrap:wrap`; auf dem Handy wandert der Ort unter die Marke.
   Am Ort haengend wandert der Punkt mit — die zweite Zeile begann dann mit
   «· Clubhaus Langacker, Herrliberg», einem Zeichen, das auf nichts mehr
   zeigt. **Ein Trennzeichen gehoert zu dem, was VOR ihm steht**, sonst
   eroeffnet es eine Zeile, statt zwei Angaben zu trennen.

   ⚠ **Optisch aendert sich nichts, und das ist nachgerechnet.** Vorher:
   Marke · 8px Rasterluecke · «·» mit `margin-right:8px` · Ort. Jetzt:
   Marke · «·» mit `margin-left:8px` · 8px Rasterluecke · Ort. **Dieselben
   zweimal 8px um dasselbe Zeichen** — nur liegt die Flexluecke jetzt
   hinter dem Punkt statt davor, und damit auch die Umbruchstelle.

   ⚠ **Die Farbe muss jetzt dastehen, und das ist der Preis des Umzugs.**
   Der Punkt erbte vom Ort `--papier-halb`; an der Marke erbte er
   `--akzent`, also die volle Textfarbe, und ein dunkler Trennpunkt neben
   einer dunklen Marke sieht aus wie ein Satzzeichen des Etiketts.
   **Derselbe Wert, ein anderer Traeger** — keine neue Farbe.

   ⚠ **`letter-spacing:0` am Zeichen.** Die Marke laeuft auf `.09em`
   gesperrt; ein gesperrter Punkt schoebe den Ort um rund 1px weiter nach
   rechts als vorher. Eine Sperrung gilt dem Wortbild und nicht dem
   Trennzeichen dahinter.

   ⚠ **Die Marke behaelt `white-space:nowrap`** — sie und ihr Punkt sind ab
   heute EIN Flexkind, und genau das ist der Zweck: «AUF EINLADUNG ·»
   bricht nicht zwischen Wort und Zeichen.

   ⚠ **`gap:16px` wird `2px 8px`, und das ist kein Geschmack.** Mit einem
   Trennpunkt in der Mitte waeren 16px je Seite 32px Loch um ein Zeichen.
   Die 8px sind keine neue Zahl: Der schmale Block fuehrt sie seit dem
   22.09.2026, und die Zeilenluecke von 2px ist dieselbe wie zwischen Titel
   und Metazeile. **Die Wiederholung unter 700px faellt damit weg** — sie
   sagte ab heute dasselbe wie die Grundregel. Ihr Wortlaut stand dort. */
.anl-meta{grid-column:2 / -1;display:flex;align-items:baseline;
  gap:2px 8px;flex-wrap:wrap}
.anl-marke{font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);
  letter-spacing:.09em;text-transform:uppercase;color:var(--akzent);
  white-space:nowrap}
.anl-ort{font-size:var(--tx-klein);color:var(--papier-halb)}
.anl-marke:has(+ .anl-ort)::after{content:'·';margin-left:8px;letter-spacing:0;
  color:var(--papier-halb)}
/* Die Spaltenbreite plus die Spaltenluecke — damit beginnt der aufgeklappte
   Inhalt auf der Kante des Titels. ⚠ Die Zahl ist am 22.09.2026 dreimal
   gewandert: 128 = 112 + 16, dann 134 = 118 + 16, dann 152 = 136 + 16, dann
   112 = 96 + 16, dann 144 = 112 + 32, dann 100 = 68 + 32 (24.09.2026,
   mit dem Kasten unter dem Datum), **jetzt 148 = 68 + 80** (25.09.2026).
   **Sie ist eine Summe und keine Gestaltung** — wer die Datumsspalte
   aendert, aendert sie mit. ⚠ Dass sie fuenfmal falsch war, bevor jemand
   sie gemessen hat, ist der Grund, warum die Summe hier ausgeschrieben
   steht und nicht nur ihr Ergebnis.

   > ~~«jetzt 100 = 68 + 32»~~ — Stand bis 25.09.2026.

   ⚠⚠ **Zwischen den beiden Ansagen des 25.09.2026 war sie zum sechsten Mal
   falsch.** Die Luecke ging heute Morgen von 32 auf 48, die Summe blieb auf
   100 stehen — richtig gewesen waeren 116. Der aufgeklappte Inhalt begann
   damit 16px links der Titelkante, ohne Meldung und ohne Fehler.
   **Genau der Fall, vor dem der Satz darueber warnt** — und er ist dem Satz
   trotzdem durchgerutscht: Die Summe steht eine Bildschirmlaenge unter der
   Luecke, und wer die Luecke aendert, hat sie nicht vor Augen. Die 148 hier
   raeumt beides zugleich auf, die heutige Aenderung und die von heute Morgen.

   > ~~«⚠ **Die Summe gilt nur ab 1000px, und das passt genau:** Unter
   > 1000px setzt die schmale Fundstelle `padding-left:0` … **Die Luecke,
   > aus der die Summe gebildet ist, wechselt an derselben Grenze** — 80 ab
   > 1000px, 24 darunter. Eine Grenze fuer beide; darum steht hier eine
   > Summe und nicht zwei.»~~ — Stand bis 25.09.2026 abends.

   ⚠⚠ **Es sind seit heute abend DREI Summen an ZWEI Grenzen**, und der
   abgeloeste Satz gilt in seinem Kern weiter: Die Summe folgt der Luecke.
   Nur hat die Luecke jetzt zwei Schwellen statt einer.

       ab 1000px      68 + 80  =  148   diese Zeile
       620 bis 999    68 + 40  =  108   im Band, dort begruendet
       unter 620       0               die schmale Fundstelle

   ⚠ **Die Null unter 620 ist keine ausgelassene Summe, sondern eine
   Entscheidung** — nachzulesen bei der schmalen Fundstelle. Sie bleibt, weil
   dort alles bleibt.

   ⚠⚠ **Wer die Luecke anfasst, fasst ab jetzt drei Zeilen an.** Die Warnung
   ganz oben hat schon bei zweien einmal versagt; mit der dritten wird sie
   teurer, nicht billiger. Darum steht die Leiter hier ausgeschrieben, und
   die Grundregel wie das Band verweisen auf sie.

   **Das Handy bleibt auch von dieser Zeile unberuehrt.** */
.anl .ressort-inh{padding-left:148px}
/* ⚠⚠ **Eine Stufe kleiner — 22.09.2026.** Der abgeloeste Vermerk lautete:
   «Ohne Angabe erbt der Absatz die Body-Groesse von 16px — keine Stufe der
   Leiter. Stufe F, wie jeder Lesetext.»

   **Der Grund gegen 16px gilt weiter, der fuer 17px nicht mehr.** Der
   Kurzbeschrieb steht im aufgeklappten Teil NEBEN den Eckdaten, und deren
   Werte tragen `--tx-klein` (14px). Gemessen: 17px rechts gegen 14px
   links — zwei Textgroessen in einer Zeile, die dieselbe Sache in zwei
   Spalten erzaehlt.

   > **«Wie jeder Lesetext» ist eine Aussage ueber die Rolle. Neben einer
   > Spalte zu stehen ist eine ueber den Ort — und der Ort gewinnt, wenn
   > beide gleichzeitig sichtbar sind.**

   Jetzt `--tx-klein`, dieselbe Stufe wie `.anl-fakt span`. */
.anl .ressort-inh > p{font-size:var(--tx-klein);color:var(--papier-halb);
  max-width:60ch;margin:0}
/* Beschriftete Faktenzeilen. Geprüft, ob ein bestehendes Muster passt: .zeile
   ist ab 820px vierspaltig (für die Spielzeilen) und presst den Wert auf 129px,
   .tz schiebt ihn mit space-between an den rechten Rand. Beides falsch hier. */
/* Das Raster sitzt am Behälter, nicht an der Zeile: nur so teilen sich alle
   Beschriftungen eines Anlasses eine Spalte, die sich nach der längsten
   richtet. Ein Raster je Zeile gäbe jeder Zeile ihre eigene Breite, und die
   Werte stünden treppenförmig. Feste 118px waren an der Datumsspalte
   ausgerichtet — hinter „Zeit" blieben damit 88px Leerraum. */
/* 84px fest statt max-content: die Spalte richtete sich sonst nach der
   längsten Beschriftung des jeweiligen Eintrags, und die Wertkante flatterte
   über die Liste hinweg um 24px. 84px sind «Anmeldung» (81,81px) plus zwei
   Pixel gegen Rundung. Unbedenklich, weil Zeit, Für wen, Anmeldung und
   Klassen ein geschlossener Satz sind — für die Werte gälte das nicht. */
/* minmax(84px,auto) statt 84px — am 02.09.2026, und der Satz darüber sagt
   warum: «Unbedenklich, weil … ein geschlossener Satz sind.» **Der Satz ist
   nicht mehr geschlossen.** Die Beschriftung ist im Theme ein Feld, in das
   Didi schreibt was er braucht — «Anmeldeschluss» misst 122px, «Rundenlänge»
   97px. Ein Gitterfeld ist so breit wie seine Spur; der Text darin läuft
   darüber hinaus und legt sich über den Wert: «ANMELDESCHLUZwei Wochen».
   84px bleiben als UNTERGRENZE, nicht als Deckel — für die vier Wörter des
   Prototyps ändert sich damit kein Pixel, die Spalte steht weiter bei 84.
   Nur ein längeres Wort schiebt sie auf, statt sich darüberzulegen.
   Gemessen an 1440 · 1920 · 2560 · 3440 und bei 16 wie 20px Grundschrift:
   der Überlauf hängt an keinem davon, er hängt am Wort. */
.anl-fakt{display:grid;grid-template-columns:minmax(84px,auto) minmax(0,1fr);
  gap:7px 16px;margin-bottom:16px;align-items:baseline}
/* **Die Eckdaten der Anlassseite schliessen wie ein Abschnitt — 22.09.2026.**

   In der Anlassliste stehen die Eckdaten in einem aufgeklappten Kasten;
   dort sind 16px richtig, und ab 1100px nimmt ihnen die Rasterregel auch
   die weg, weil daneben und nicht darunter weitergeht.

   ⚠ **Auf der Anlassseite stehen sie in der linken Spalte, und darunter
   beginnt der Editortext.** Gemessen am 22.09.2026: **0px bei 1440, 16px
   bei 375** — die Rasterregel `@media(min-width:1100px){.anl-fakt
   {margin-bottom:0}}` gilt fuer jede `.anl-fakt` im Haus, auch fuer die,
   die in keinem Raster steht.

   > **Eine Regel, die einem Bauteil seinen Abstand nimmt, weil daneben
   > weitergeht, gilt auch dort, wo darunter weitergeht.**

   `.zwei > div > .anl-fakt` trifft nur die Spaltenfassung: In der Liste
   ist der Vater `.ressort-inh`, hier das klassenlose Wickel-`div` der
   linken Spalte. Der Wert ist die Abschnittsfuge des Hauses,
   `clamp(46px,6vw,80px)` — dieselbe `clamp()`, die `.papier section`
   traegt. */
.zwei > div > .anl-fakt{margin-bottom:clamp(46px,6vw,80px)}
.anl-fakt > div{display:contents}
.anl-fakt b{font-family:var(--b);font-weight:700;font-size:var(--tx-etikett);
  letter-spacing:.09em;text-transform:uppercase;color:var(--papier-halb)}
.anl-fakt span{font-size:var(--tx-klein);color:var(--papier-text)}
/* align-items:center statt der Vorgabe stretch: gestreckt uebernahmen
   die Verweise die Zeilenhoehe des hoechsten Nachbarn, und beim Hover
   fiel der Kasten auf seine eigene Hoehe zurueck — vier Verweise sprangen
   dabei um 20px. */
.anl-akt{display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:14px}
/* **Der Strich gehoert an den Text, nicht an den Kasten — 22.09.2026.**

   `.mehr` zeichnet sich mit `border-bottom` aus, und ein Rahmen sitzt
   immer an der Unterkante des Kastens. Solange der Kasten `padding-bottom:
   3px` traegt, faellt das nicht auf; **`.anl-akt .mehr` traegt aber
   `padding-block:13px` fuer die Beruehrflaeche.** Gemessen bei 1440 wie bei
   375: **18.4px zwischen Textunterkante und Strich.**

   > **Eine Auszeichnung, die am Kasten haengt, waechst mit jedem Polster
   > mit — und ein Polster wird aus ganz anderen Gruenden gesetzt.**

   Das Haus hat fuer Textverweise eine zweite Form, die am Text haengt:
   `text-decoration:underline` mit `--gelb`, 2px und `offset:.18em`. Sie
   steht so an `.fussnote a` und an den Verweisen im Fliesstext. Hier
   dieselbe — der Rahmen bleibt durchsichtig, das Polster bleibt, die
   Beruehrflaeche von 45px bleibt.

   ── Der Rang bleibt, nur das Mittel wechselt ─────────────────────────

   **Der abgeloeste Vermerk lautete:** «Rang der Verweise: die Hauptaktion
   traegt den Balken, das Beiwerk nicht. `.mehr` bringt `border-bottom:2px
   solid transparent` mit; den dauerhaften Strich macht `.papier .mehr`.
   Hier wird nur dessen Farbe zurueckgenommen — Schrift, Groesse und
   Beruehrflaeche bleiben bei allen dreien gleich, und beim Ueberfahren
   bekommen auch die nachrangigen ihre Auszeichnung.»

   Das gilt unveraendert; zurueckgenommen wird jetzt die Farbe der
   Unterstreichung statt die des Rahmens. */
.papier .anl-akt .mehr{border-bottom-color:transparent;
  text-decoration:underline;text-decoration-color:var(--gelb);
  text-decoration-thickness:2px;text-underline-offset:.18em}
.papier .anl-akt .mehr:not(:first-child){text-decoration-color:transparent}
@media(hover:hover){
  .papier .anl-akt .mehr:hover{text-decoration-color:var(--gelb)}
}
/* Die Verweise im Panel brauchen ihre Berührfläche selbst: die
   bestehende Regel gilt nur für .mehr direkt in einem <p>.
   19px Inhalt plus 2x13px ergeben 45px; sie stehen nebeneinander,
   die Flächen überlappen also nicht. */
.anl-akt .mehr{padding-block:13px}
/* Abstand vor dem zweiten Listenkopf — als Klasse, nicht als
   Inline-Stil. */
.anl-trenner{display:block;margin-top:54px}
/* Vergangene Anlässe treten zurück, bleiben aber lesbar */
.anl-vorbei .anl-tit,.anl-vorbei .anl-kal-tag{color:var(--papier-halb)}

/* Eine Terminliste bleibt geklappt, auch wo Platz ist: man vergleicht Daten,
   und geöffnete Einträge schieben sie auseinander. Bei den Ressorts ist es
   umgekehrt — dort klappt es aus Platzmangel, und wo Platz ist, soll die Seite
   durchlesen. Darum behält .anl hier Marker, Zeiger und Polster, die .ressort
   ab 1000px abgibt, und die Logik schliesst .anl aus (details.ressort:not(.anl)).
   Das ist Absicht, kein Fehler — nicht „reparieren".

   **Am 30.08.2026 gemessen und bestaetigt: die Schwelle bleibt bei 1000, die
   Ausnahme bleibt bestehen.** Ueber alle 32 Ansichten sind bei 390px **3 von
   43** Klappbloecken offen, bei 1000 und 1440 je **37 von 43** — die Schwelle
   wirkt also nicht an einer Stelle, sondern ueberall: datenschutz 14,
   sponsor-werden 8, vorstand 7, archiv 5, schiri 2, bus 1. **Die sechs, die
   geklappt bleiben, sind genau die Anlaesse.**

   **Und die Pruefluecke, die dazugehoert:** Vier Regeln messen nur den
   geschlossenen Zustand; `anlaesse` ist damit bei 390 dauerhaft ungeprueft.
   Der Gegenentwurf — ein Durchgang bei 390 mit geoeffneten Bloecken — gehoert
   in den Pruefstand der Theme-Etappe und nicht in den des Prototyps. */
@media(min-width:1000px){
  .anl .ressort-inh{padding-bottom:26px}
  /* ⚠ **Das Polster stand hier ein zweites Mal** — als Kurzform, und die
     ueberschrieb ab 1000px die 12px, die `.anl .ressort-kopf` weiter unten
     setzt. Gemessen am 22.09.2026: 12px schmal, 16px breit, obwohl beide
     Stellen dieselbe Zeile meinten. Jetzt nennt sie nur, was sie meint —
     Zeiger und Erreichbarkeit. */
  /* ⚠ Die 44px rechts sind kein Zierrat: Dort steht die gelbe Flaeche des
     Plus. Der Klappkopf des Hauses gibt sein Polster ab 1000px ab
     (`padding:0 0 18px`), und `.anl` behaelt seines — **ohne diese Zeile
     stuende das Zeichen auf dem Ort.** Gemessen, als sie einmal fehlte:
     Polster «12px 0px».

     ⚠⚠ **Zweite Fundstelle derselben Entscheidung — 24.09.2026.**

     > ~~«`padding:12px 34px 12px 0`»~~ — Stand bis 24.09.2026.

     Die Grundregel `.anl .ressort-kopf` traegt seit heute `18px 44px 18px 0`
     (anderthalbfaches Polster, Flaeche des Plus); **diese Zeile
     ueberschreibt sie ab 1000px vollstaendig und muss darum dieselbe Zahl
     nennen.** Wer nur die obere aendert, hat ab 1000px weiter die alten
     12px — und genau dort wird gemessen. Dasselbe Paar wie bei der gelben
     Eroeffnungslinie sechs Zeilen weiter unten. */
  .anl .ressort-kopf{cursor:pointer;pointer-events:auto;padding:18px 44px 18px 0}
  .anl .ressort-kopf::before,.anl .ressort-kopf::after{display:block}
  /* ⚠ **Dieselbe zweite Haelfte wie bei `.sec + .anl,.sk + .anl` — 24.09.2026.** Diese Zeile
     ist die Wiederholung der Eroeffnungslinie fuer breite Schirme. **Wer nur
     die obere ergaenzt, hat sie ab 1000px trotzdem verloren** — und genau
     dort wird sie gemessen. Zwei Fundstellen, eine Entscheidung. */
  .sec + .anl,.sk + .anl{border-top:2px solid var(--gelb)}
}
/* Zweispaltig erst ab 1100px: Fakten links, Beschreibung und Verweise
   rechts. Darunter bleibt der Eintrag gestapelt wie auf dem Handy.

   Die Schwelle ist gemessen, nicht gerundet. Zeichen pro Zeile in der
   Beschreibung und Summe der fünf Eintragshöhen:

                 zweispaltig ab 1000   ab 1100        ab 1200
     1000px      40 Z · 1275           60 Z · 1458    60 Z · 1458
     1099px      49 Z · 1122           60 Z · 1461    60 Z · 1461
     1150px      54 Z · 1122           54 Z · 1122    60 Z · 1462
     1280px      60 Z · 1127           60 Z · 1127    60 Z · 1127

   Nicht 1050: dort sind es 44 Zeichen, knapp unter der bequemen Spanne von
   45 bis 75. Nicht 1200: dort kauft die Schwelle bei 1150px sechs Zeichen
   und bezahlt sie mit 340px Höhe — im Bild drei sichtbare Einträge gegen
   zwei. Wer sie aus Symmetriegründen verschiebt, verschiebt darunter die
   Lesbarkeit und darüber die Übersicht.

   340px für die linke Spalte: dabei bricht heute kein Wert um, und ein Wert
   von 50 Zeichen — die realistische Obergrenze für „Für wen" — nimmt zwei
   Zeilen statt drei. Kein max-content: die Werte sind Platzhalter und kommen
   später aus ClubCampus; am längsten Platzhalter bemessen stünde die Spalte
   beim ersten echten Eintrag wieder krumm. Mit max-content wuchs das
   Flattern der Textkante von 146 auf 255px, sobald ein realistischer Wert
   eingesetzt wurde. */
@media(min-width:1100px){
  .anl .ressort-inh{display:grid;grid-template-columns:340px minmax(0,1fr);
    gap:0 48px;align-items:start}
  .anl-fakt{grid-column:1;grid-row:1 / span 2;margin-bottom:0}
  .anl .ressort-inh > p{grid-column:2;grid-row:1}
  .anl-akt{grid-column:2;grid-row:2}
}
/* ⚠⚠ **DIESE ABFRAGE HIESS BIS ZUM 25.09.2026 ABENDS `max-width:999px`.**

   Didi: «Zwischen 620 und 999 px: Luecke etwa 40 px statt 24, das Polster
   des aufgeklappten Inhalts zieht mit. Ab 1000 px und unter 620 px
   unveraendert.»

   **Die alte Abfrage deckte alles unter 1000px, also auch das Handy** — wer
   ihre Zahlen angefasst haette, haette das Handy mit angefasst. Sie ist
   darum auf `max-width:619px` verengt, und das Band daneben traegt die neuen
   Werte.

   ⚠ **Verengen und nicht ueberschreiben, und dafuer gibt es drei Gruende:**

   1 **Der Block ist vollstaendig geprueft.** Er fuehrt genau zwei Regeln —
     `.anl .ressort-kopf{gap}` und `.anl .ressort-inh{padding-left}` —, und
     beide aendern sich im Band. Es bleibt nichts darin, das zwischen 620 und
     999 weitergelten muesste; alles andere hier sind Kommentare.

   2 **Ueberschreiben schriebe jede Zahl zweimal in denselben Bereich.**
     Zwischen 620 und 999 stuenden erst 24 und 0, eine Regel spaeter 40 und
     108 — vier Zahlen fuer zwei Werte. Genau das hat dieser Abschnitt am
     24.09.2026 schon einmal aufgeraeumt («drei Zahlen fuer eine Breite»).

   3 **Getrennte Bereiche haengen nicht an der Reihenfolge.** Zwei Abfragen
     gleichen Gewichts entscheiden sich ueber ihre Stellung im Blatt; wer sie
     eines Tages verschiebt oder auslagert, dreht das Ergebnis lautlos um.
     `max-width:619px` und `min-width:620px` ueberschneiden sich nicht, also
     gibt es nichts zu drehen.

   ⚠ **Die Schreibweise ist nicht erfunden.** `@media(max-width:619px)` neben
   `@media(min-width:620px) and (max-width:999px)` fuehrt das Haus seit dem
   24.09.2026 bei den Teamnews-Kacheln («keine Waise im mittleren Band»);
   619/620 ist das Gegenstueckpaar des Hauses. */
@media(max-width:619px){
  /* ⚠⚠ **Hier stand bis zum 22.09.2026 ein Stapel:**
     «`.anl .ressort-kopf{grid-template-columns:minmax(0,1fr)}` ·
     `.anl-dat,.anl-tit,.anl-tag,.anl-ort{grid-column:1;justify-self:start}` ·
     `.anl-tag{margin-top:2px}`»

     **Das Datum stand damit UEBER dem Titel statt daneben.** Es war die
     richtige Antwort auf eine Datumszeile, die quer ueber die Spalte lief;
     seit sie ein Kalenderblatt ist, braucht sie 74px und passt neben den
     Titel. Didi will sie dort — und schmal ist der Platz links das einzige,
     was die Liste ueberhaupt gliedert.

     Nur die Spalte wird schmaler: 74px statt 112px. Das ist die Breite, die
     «23.–24.» bei 22px Archivo misst, aufgerundet. `.ressort-inh` gibt sein
     Polster ab, weil der Inhalt aufgeklappt die ganze Breite braucht. */
  /* **Schmal wird das Kalenderblatt kleiner, aber nicht anders.** 88x80
     statt 96x84; Flaeche, gelbe Kante und Schriftarten bleiben. Der
     aufgeklappte Inhalt gibt sein Polster ab und steht untereinander — das
     Zweispaltige gilt ohnehin erst ab 1100px.

     ⚠ **Das schliessende Kommentarzeichen fehlte hier am 22.09.2026 fuer
     die Dauer einer Messung.** Eine Zeilenloeschung hatte es mitgenommen,
     und der Kommentar verschluckte die drei Regeln darunter. **Gemeldet
     hat es nicht der Syntaxpruefer, sondern die Messung:** Die Kachel
     stand bei 375px auf 96x84 statt 88x80, und das Polster der Zeile
     sprang auf «12px 0px». Ein Kommentar ohne Ende ist kein Fehler,
     sondern eine stille Klammer — und ein Kommentar, der das Zeichen
     NENNT, schliesst sich selbst. Darum steht es hier ausgeschrieben. */
  /* ⚠⚠ **Die Spaltenbreite steht seit dem 24.09.2026 nur noch EINMAL** —
     in der Grundregel, auf 68px. Hier stand `grid-template-columns:96px
     minmax(0,1fr)` daneben und `.anl-kal{width:96px;height:80px}` dazu:
     **drei Zahlen fuer eine Breite.** Sie gehoerten zur Kachel, und mit
     der Kachel fallen sie. Die Tageszahl misst hier dasselbe wie breit
     (19px), also braucht die Spalte hier auch dieselben 68px.

     **Was bleibt, ist die Spaltenluecke:** 24px statt 48. Sie haengt nicht
     am Datum, sondern am Platz — und der ist hier knapper.

     > ~~«**Was bleibt, ist die Spaltenluecke:** 16px statt 32.»~~
     > — Stand bis 25.09.2026.

     ⚠ **Beide Zahlen wachsen am 25.09.2026 um denselben Faktor**, damit
     die schmale Luecke bleibt, was sie war: die halbe der weiten. 24 ist
     die Sprosse der Skala von Regel 10 unter den 48 der Grundregel.

     > ~~«⚠ **Eine eigene Handy-Ausnahme brauchte es dafuer nicht.** Diese
     > Regel gilt bis 0 hinunter und deckt die unter 620px mit; <<im selben
     > Verhaeltnis>> heisst hier eine neue Zahl in einer bestehenden Regel
     > und keine dritte Fundstelle.»~~ — Stand bis 25.09.2026 abends.

     **Die dritte Fundstelle ist am selben Tag doch gekommen**, und zwar
     nicht gegen diesen Satz, sondern weil Didi abends etwas anderes wollte
     als mittags: Die Spanne 620 bis 999 traegt jetzt eigene 40px. Diese
     Regel reicht nicht mehr von oben bis 0 hinunter, sie ist das Handy —
     mehr hat sich an ihr nicht geaendert.

     ⚠ **Die 24 bleibt, weil «unter 620px unveraendert» heisst.** Sie ist
     nach wie vor die Sprosse der Skala von Regel 10 unter den 48 von heute
     Morgen; dass die Grundregel inzwischen auf 80 steht und das Band auf
     40, laesst sie unberuehrt. Die drei Zahlen stehen bei
     `.anl .ressort-inh` nebeneinander. */
  .anl .ressort-kopf{gap:24px}
  /* ⚠⚠ **Auch diese Zeile ist am 24.09.2026 gefallen** — ihr Wortlaut war
     `.anl-kal-tag{font-size:22px}`, und ihre Begruendung steht darunter.
     **Der Befund gilt weiter, nur greift er jetzt eine Ebene hoeher:** Die
     Tageszahl steht seit heute auf jeder Breite fest auf 19px, weil die
     Spalte auf jeder Breite fest ist. Eine Ausnahme fuer den schmalen Teil
     brauchte es nur, solange die Grundregel eine `vw`-Kurve war.

     ⚠ **Nicht «erledigt», sondern «aufgestiegen».** Wer die Grundregel
     eines Tages wieder auf eine Kurve setzt, braucht diese Zeile sofort
     zurueck — darum steht sie hier zitiert und nicht weggewischt.

     Der abgeloeste Vermerk:

     ⚠ **Die Tageszahl darf hier nicht mehr mitwachsen.** Die Stufe
     `clamp(30px,1.54rem + 1.49vw,46px)` haengt am Fenster, die Kachel
     nicht: Bei 999px stand die Zahl auf 29.2px und «25–30» mass **102.8px
     in einer 88px breiten Kachel** — bei 375px passte dasselbe, weil die
     Schrift dort kleiner ist.

     > **Eine Groesse, die mit dem Fenster waechst, und eine Flaeche, die
     > es nicht tut, laufen irgendwo auseinander — und zwar am oberen Ende
     > des Bereichs, wo niemand hinsieht.**

     ⚠ **22px ist die UNTERGRENZE der Stufe C** — keine neue Zahl, dieselbe
     Stufe wie breit, nur eingefroren. Auf ihr misst «25–30» 77.4px und
     hat in der 96er Kachel 9.3px Luft je Seite; auf der freien Kurve
     stuende sie bei 999px auf 26.6px und mass 93.6px — 1.2px Luft. */
  /* ⚠⚠ **Die Null gilt seit dem 25.09.2026 abends nur noch unter 620px.**

     Ihre Begruendung steht seit dem 22.09.2026 oben in diesem Block und
     gilt hier unveraendert weiter:

     > «`.ressort-inh` gibt sein Polster ab, weil der Inhalt aufgeklappt die
     > ganze Breite braucht.» · «Der aufgeklappte Inhalt gibt sein Polster ab
     > und steht untereinander — das Zweispaltige gilt ohnehin erst ab
     > 1100px.»

     **Das ist kein vergessenes Polster, sondern mehr Textbreite auf
     schmalen Schirmen** — eine Entscheidung, keine Luecke im Blatt. Zwischen
     620 und 999px ist sie ab heute abend ueberstimmt (siehe Band); unter
     620px steht sie, weil Didi dort nichts geaendert haben will. */
  .anl .ressort-inh{padding-left:0}
}
/* ⚠⚠ **DAS MITTLERE BAND: 620 BIS 999 — Didi, 25.09.2026 abends.**

   > «`/anlaesse/`, Liste der Anlaesse, zwischen 620 und 999 px: Luecke
   > zwischen Datumsspalte und Titel etwa 40 px statt 24. Das Polster des
   > aufgeklappten Inhalts (Summe aus Spalte und Luecke) zieht mit. Ab
   > 1000 px und unter 620 px unveraendert.»

   ── Die Luecke: 40px ────────────────────────────────

   ⚠ **40 steht NICHT auf der Skala von Regel 10** (4 · 8 · 16 · 24 · 32 ·
   48 · 80) — es ist Didis Zahl, und sie steht hier so, wie er sie gesagt
   hat. **Wer aufraeumt, soll sie nicht «korrigieren»:** Die Sprossen
   daneben sind 32 und 48, und beide waeren eine andere Ansage.

   ⚠ **Ganz fremd ist die Zahl im Haus trotzdem nicht.** Als Spaltenluecke
   fuehrt das Blatt sie schon dreimal — `.news-home`, `.tg-unten` und
   `#v-spiel .sp-fakten` stehen alle auf `gap:40px`. Sie ist also keine
   Sonderzahl dieser Seite, nur keine Sprosse der Abstandsskala.

   ⚠ **Der sichtbare Abstand ist 41.2px und nicht 40.** Die Datumsspalte
   misst 68px, «25–30» darin 66.8px bei 19px Archivo; die 1.2px Rest zaehlen
   mit. Dieselbe Rechnung wie bei der Grundregel und dieselbe Antwort: glatte
   Zahl in der Regel, «etwa 40» ist erfuellt.

   ⚠ **Die Spalte bleibt bei 68px, und hier besonders.** Sie steht seit dem
   24.09.2026 nur noch EINMAL im Blatt und gilt bis 0 hinunter — wer sie
   anfasste, um diese Luecke zu setzen, aenderte das Handy mit. **Die Luecke
   hat ihre eigene Fundstelle, die Spalte nicht.**

   ── Das Polster: 108px, und das ist eine Verhaltensaenderung ─────

   68 + 40 = **108**. Die Summe zieht mit, wie Didi sagt.

   ⚠⚠ **Vorher stand hier nicht 92 oder sonst eine Summe, sondern NULL.**
   Der aufgeklappte Inhalt begann unter 1000px am linken Rand; ab heute abend
   beginnt er zwischen 620 und 999 auf der Titelkante. **Das ist eine andere
   Bauart und nicht eine andere Zahl** — aufgeschrieben, weil der Unterschied
   beim Lesen der Ansage untergehen kann.

   ⚠ **Die Null war begruendet, und Didi ueberstimmt die Begruendung.** Sie
   steht seit dem 22.09.2026 bei der schmalen Fundstelle:

   > «`.ressort-inh` gibt sein Polster ab, weil der Inhalt aufgeklappt die
   > ganze Breite braucht.»

   Der Satz ist nicht widerlegt: 108px weniger Textbreite sind 108px weniger
   Textbreite. Didi hat nachgesehen und will die gemeinsame Kante mit dem
   Titel trotzdem — dieselbe Kante, die ab 1000px die 148 herstellen. **Wer
   den alten Satz kuenftig liest, soll nicht nach seinem Fehler suchen — es
   gibt keinen.**

   ⚠ **Unter 620px bleibt die Null**, weil dort alles bleibt. Die
   Begruendung von damals traegt dort allein weiter.

   ⚠ **Der aufgeklappte Inhalt ist hier einspaltig.** Sein Raster
   (`.anl .ressort-inh` mit 340px + 1fr) schaltet erst ab 1100px; im Band
   steht der Kurzbeschrieb unter den Faktenzeilen, und die 108px ruecken
   beide gemeinsam ein.

   ── ⚠ Zwei Zahlen, drei Fundstellen ──────────────────────

   Die Leiter aus Luecke und Summe steht vollstaendig bei
   `.anl .ressort-inh`. **Wer eine der beiden Zahlen hier aendert, aendert
   die andere mit** — 108 ist keine Gestaltung, sondern 68 + 40.

   ── ⚠ Das Raster ist hier zweispaltig, und unter 620px auch ─────

   Der Stapel `.anl .ressort-kopf{grid-template-columns:minmax(0,1fr)}`, der
   das Datum einmal UEBER den Titel setzte, ist am 22.09.2026 gefallen; sein
   Wortlaut steht oben in der schmalen Fundstelle zitiert. **Die Kopfzeile
   ist heute auf jeder Breite 68px + 1fr**, die Luecke wirkt unter 620px also
   genauso wie hier — sie ist dort nur schmaler. Das Band musste darauf keine
   Ruecksicht nehmen; aufgeschrieben, weil die Frage naheliegt. */
@media(min-width:620px) and (max-width:999px){
  .anl .ressort-kopf{gap:40px}
  .anl .ressort-inh{padding-left:108px}
}
/* ── ⚠⚠ DAS HANDY — Didi, 24.09.2026, Punkt 5 ────────────────────────

   > «Datumsspalte schmaler — so breit, wie «25–30» braucht. Tageszahl eine
   > Stufe kleiner (etwa 18 px). Titel darf umbrechen, Etikett und Ort
   > ebenfalls. Plus rechts, senkrecht auf die Mitte der Zeile, Tippflaeche
   > 44 px.»

   ⚠⚠ **Didi sagt «unter 620», diese Grenze heisst 700 — und das ist kein
   Versehen.** Unter 700px faellt der TITEL auf `--tx` (17px); stuende die
   Tageszahl dort noch auf 19, waere sie zwischen 620 und 700px **groesser
   als der Titel daneben** — genau der Zustand, den Punkt 2 beseitigt.
   **Eine Stufe, die an eine andere Stufe gekoppelt ist, wechselt mit ihr**
   und nicht an einer eigenen Grenze. Alles, was Didi unter 620px verlangt,
   gilt damit auch dort; es beginnt nur 80px frueher.

   ── ⚠⚠ DIE SPALTE IST 68px UND STEHT NUR NOCH OBEN — 24.09.2026 abends ──

   Didi: «Datumsspalte so breit, dass Monat und Jahr nie umbrechen. Der
   breiteste Fall ist <<MÄR 2027>>.»

   > ~~«Die Spalte: 64px, gemessen. <<25–30>> misst bei 17px Archivo
   > **59.8px** — das ist Didis Mass. **64px und nicht 60**, und der
   > Unterschied hat einen Namen: Die Monatszeile darunter steht auf
   > `--tx-etikett` und skaliert nicht mit; <<NOV 2026>> misst dort
   > **63.1px**, <<MÄR–APR>> **61.3px**. Bei 60px bricht der Normalfall in
   > <<NOV>> / <<2026>> um — eine dreizeilige Datumsspalte auf dem Handy,
   > damit 4px schmaler wird. Gegen vorher sind es trotzdem 12px weniger
   > (76 → 64), und der Kasten drumherum ist weg.»~~
   > — Stand bis 24.09.2026 abends.

   **Der Gedanke war richtig, die Stichprobe zu klein.** Sie hat «NOV 2026»
   als Normalfall genommen und «MÄR–APR» als Spanne — und den breitesten
   EINZELNEN Monat nie nachgeschlagen. Alle dreizehn Monatszeilen in den
   Schriften des Blattes (Public Sans 700, 11px, `letter-spacing:.09em`),
   gemessen im lokalen Stapel am 24.09.2026 bei 375px:

     MÄR 2027  64.09   ← der breiteste, Didis Fall
     NOV 2026  63.09       AUG 2027  62.22       OKT 2026  61.84
     MÄR–APR   61.28       APR 2027  61.17       DEZ 2026  61.00
     SEP 2026  60.52       MAI 2027  59.81       FEB 2027  59.64
     JUN 2027  59.34       JAN 2027  58.92       JUL 2027  57.09

   **64.09 in 64px.** Die Spalte war um neun Hundertstel zu schmal — genau
   so, wie ein Umbruch entsteht, den niemand fuer moeglich haelt: «MÄR» /
   «2027» in zwei Zeilen, und zwar nur in diesem einen Monat.

   > **Eine Spalte, die am breitesten Fall gemessen wird, muss den
   > breitesten Fall auch kennen.**

   ⚠ **68px, und das ist keine neue Zahl:** Es ist die Spalte der
   Grundregel (`.anl .ressort-kopf`), dort aus «25–30» bei 19px Archivo (66.8px)
   hergeleitet. Schmal ist die Tageszahl 17px und «25–30» misst 59.78 —
   also gibt hier die Monatszeile das Mass, und 68 traegt sie mit 3.9px
   Luft. **Damit steht die Datumsspalte im ganzen Blatt nur noch EINMAL.**
   Der Kommentar «DIE DATUMSSPALTE MISST 68px STATT 112» hat am 24.09.2026 schon aufgeschrieben, warum
   drei Zahlen fuer eine Breite eine Zahl zuviel sind.

   ⚠ **Die Spannen bleiben umbruchfaehig, wie seit dem 22.09.2026.**
   «MÄR–APR 2027» und «DEZ–JAN 2026/27» sind breiter als jede vertretbare
   Spalte; sie brechen zwischen Monat und Jahr, und das ist die
   Sinneinheit. Didis Zusage gilt dem EINZELNEN Monat — «Monat und Jahr
   ohne Umbruch» —, und die haelt 68px.

   ── Die Tageszahl: 17px ─────────────────────────────────────────

   Eine Sprosse unter den 19px der Grundregel: `--tx`. **18 ist
   keine Stufe** — das Haus haelt das seit dem 29.08.2026 ausdruecklich fest
   («18px liegt auf keiner der beiden Leitern»), und die naechste Sprosse
   nach unten waere `--tx-klein` mit 14. 17 ist die Stufe, die Didis «etwa
   18» am naechsten kommt, und sie ist zugleich die des Titels daneben:
   **gleich gross, nie groesser.**

   ── Umbrechen duerfen ───────────────────────────────────────────

   Der Titel hat seinen Deckel mit Punkt 4 verloren und bricht an der
   Spaltenkante um. Die Metazeile traegt `flex-wrap:wrap`, der Ort wandert
   also bei Bedarf unter die Marke.

   > ~~«— mit dem Trennpunkt, der in ihm steht.»~~ — Stand bis 24.09.2026
   > abends. **Genau das war der Fehler**, den Didi am selben Tag benannt
   > hat: Der Punkt wanderte mit nach unten und eroeffnete die zweite Zeile.
   > Er haengt jetzt an der Marke (`.anl-marke:has(+ .anl-ort)::after`), und
   > die zweite Zeile beginnt mit dem Ort.

   ⚠ **Die Marke selbst behaelt `white-space:nowrap`:** «AUF EINLADUNG»
   misst bei 11px rund 90px und passt in jede Zeile; ein Umbruch mitten im
   Etikett («AUF EIN- / LADUNG») waere kein Gewinn, sondern ein zweites
   Etikett. Gemeldet, weil Didis Satz auch anders gelesen werden kann.

   ── Das Plus ────────────────────────────────────────────────────

   **Senkrecht mittig ist es schon**, und zwar ueber `top:50%` aus dem
   Klappkopf des Hauses; gemessen vorher bei 375px: Zeile 88px hoch,
   Zeichen auf 44px. Das bleibt so — die Zeile wird nur niedriger, weil der
   Kasten weg ist.

   ⚠ **Die Tippflaeche ist die ganze Zeile und nicht das Zeichen.** Das
   bedienbare Element ist das `<summary>`; es reicht von Rand zu Rand und
   ist nach der Umstellung bei 375px **68px hoch** — die 44px sind damit in
   beiden Richtungen gedeckt, auch am Zeichen. Gemessen, nicht angenommen:
   Eine Zeile mit einzeiligem Titel und ohne Marke ist der niedrigste Fall
   im Bestand.

   ⚠⚠ **Seit dem 24.09.2026 abends ist die Flaeche ausserdem SICHTBAR** —
   gelb, 44 × 44px, sobald die Zeile beruehrt, fokussiert oder aufgeklappt
   ist. Sie ist ein `background-image` am `<summary>` und nimmt darum keinen
   Platz; die Begruendung steht bei `.anl .ressort-kopf`. **Die Zeile bleibt hier die
   Tippflaeche**, der Satz oben gilt unveraendert — die gelbe Flaeche zeigt
   nur, wo das Zeichen steht, sie ersetzt sie nicht. Mit dem
   anderthalbfachen Polster ist die Zeile schmal jetzt rund 80px hoch, die
   44px liegen also weiterhin darin.

   ── Unter 700px: das Blatt tritt zurueck — 22.09.2026 ────────────────

   Der abgeloeste Vermerk, der die Kachel schmal gemacht hat:

   Auf dem Handy nahm das Kalenderblatt 96 von 375px, und dem Titel blieben
   193. Gemessen: **«Gruempelturnier 2027» brach zweizeilig um** — auf dev
   mit laengeren Namen dreizeilig.

   > **Ein Blatt, das den Tag nennt, darf nicht mehr Platz brauchen als der
   > Anlass, der an diesem Tag stattfindet.**

   72x64 statt 96x80, Polster rechts 24 statt 34 — zusammen **34px mehr fuer
   den Titel**.

   ⚠ **Die Tageszahl faellt nur EINE Stufe, nicht zwei.** Sie stand auf 22px
   (dem Boden der Stufe C); die naechste Sprosse der Leiter waere 21, und
   dort misst «25–30» **73.9px** — mehr als die 72px, mit denen das Blatt am
   22.09.2026 zuerst gebaut wurde. 19px, der Boden der Stufe lead, ergibt
   66.9px.

   ⚠ **Das Blatt ist am selben Tag von 72 auf 76px gegangen.** Der
   abgeloeste Vermerk endete mit: «Knapp, und es ist die Kachelbreite des
   Auftrags: Wer mehr Luft will, gibt dem Blatt 76px.» Didi wollte. Aus
   2.6px Luft je Seite werden **4.6px**; Hoehe, Schriftgroessen und Polster
   bleiben, wie sie waren.

   ⚠ **Die Monatszeile bleibt auf `--tx-etikett`.** Der Auftrag sagt «eine
   Stufe kleiner», und 11px ist die unterste Sprosse der kleinen Leiter —
   darunter fuehrt das Haus keine. Sie bricht in der 72er Kachel um, wie sie
   es in der 96er schon tat.

   Der Titel faellt von 19 auf 17px, die naechste Sprosse.

   Das Zeichen rechts schrumpft mit: 14px statt 18px Balkenlaenge. **Ein
   Polster von 24px um ein 18px-Zeichen liesse 6px Rand** — das Zeichen muss
   mitschrumpfen, sonst ist die Ersparnis nur verschoben. */
@media(max-width:700px){
  /* ⚠⚠ **Diese Zeile ist am 24.09.2026 ganz entfallen.** Ihr Wortlaut war
     `.anl .ressort-kopf{grid-template-columns:64px minmax(0,1fr);
     padding-right:24px}` — zwei Zahlen, und beide sind eine Ebene hoeher
     aufgegangen:

       64px  → 68px in der Grundregel. «MÄR 2027» misst 64.09px und passte
               nicht (siehe oben). Die 68px der Grundregel tragen es mit
               3.9px Luft — **eine Zahl fuer eine Breite statt zweier.**
       24px  → 44px in der Grundregel. Das Polster rechts ist ab heute die
               Breite der gelben Flaeche um das Plus, und die ist auf jeder
               Breite 44px. **Die Flaeche schrumpft nicht mit dem Fenster**;
               sie ist ein Beruehrmass und keine Schriftgroesse.

     ⚠ **Der Titel bezahlt 24px.** Bei 375px blieben ihm vorher 235px, jetzt
     211 (375 − 36 Wrap − 68 Datum − 16 Luecke − 44 Polster). Didi erlaubt
     den Umbruch auf dem Handy ausdruecklich; was hier gekauft wird, ist
     eine Monatszeile, die nie umbricht, und eine Titelzeile, die nie unter
     der gelben Flaeche durchlaeuft. */
  .anl-kal-tag{font-size:var(--tx)}
  .anl-tit{font-size:var(--tx)}
  /* ⚠ **`.anl-meta{gap:2px 8px}` stand hier bis zum 24.09.2026.** Die
     Grundregel fuehrt dieselben Werte, seit der Trennpunkt zwischen Marke
     und Ort steht (Punkt 3) — eine Wiederholung, die nichts mehr
     ueberschreibt. Ihr Wortlaut und ihr Grund:

     «Marke und Ort in EINER Zeile, und bricht der Ort um, dann mit dem
     Abstand von Titel zu Ort. ⚠ Die 16px Reihenluecke waren die
     Spaltenluecke des Kopfrasters, als `.anl-meta` noch ein Rasterfeld war
     — sie galt als Zeilenabstand mit, und eine umgebrochene Ortszeile
     stand dann weiter vom Titel entfernt als der Titel vom Blatt. **Eine
     Zahl, die zwei Abstaende gleichzeitig setzt, meint hoechstens einen
     davon.**» */
  /* ⚠⚠ **`right:4px` ist am 24.09.2026 zu `right:15px` geworden** — aus
     demselben Grund wie breit `6px` zu `13px`: Die Mitte des Zeichens muss
     22px vor der rechten Kante liegen, damit die 44px breite gelbe Flaeche
     buendig mit der Zeile abschliesst. Schmal misst das Zeichen 14px, also
     15 + 14/2 = 22 und 15 + 6 + 2/2 = 22. **Dieselbe Mitte, zwei
     Zeichengroessen** — das Zeichen schrumpft, seine Flaeche nicht. */
  .anl .ressort-kopf::before{width:14px;right:15px}
  .anl .ressort-kopf::after{height:14px;margin-top:-7px;right:15px;margin-right:6px}
}
@media(max-width:559px){
  /* Beschriftung und Wert bleiben auch hier nebeneinander. Die frühere Regel
     für ein Stapeln war ab display:contents wirkungslos und ist gelöscht,
     nicht wiederbelebt: gemessen bricht bei 390px zweispaltig nichts und der
     Block ist 91 statt 180px hoch; bei 320px bricht ein Wert von drei, was
     66px weniger kostet als das Stapeln. */
  .anl-fakt{gap:12px}
}

/* Angebotsklappen auf „Sponsor werden" — dasselbe Muster wie die Ressorts,
   ergänzt um eine Preiszeile. Zugeklappt steckt der Preis sonst in der Tabelle
   im Block, und man müsste alle sieben öffnen, um zu vergleichen. Die Einheit
   steht mit dabei, weil sie nicht überall dieselbe ist: pro Jahr, einmalig,
   je Anlass, frei wählbar. */
.angebot .ressort-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 18px}
.angebot .ressort-kopf .eye{flex:0 0 100%}
.angebot .ressort-kopf .sec{flex:1 1 auto;min-width:0}
.preis{
  flex:0 0 100%;margin-top:6px;
  font-family:var(--d);font-variation-settings:'wdth' 106;font-weight:800;
  font-size:var(--tx-klein);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--gold);
}
/* Ab 1000px steht jede Klappe offen — was nichts zusammenfasst, braucht keine
   Zusammenfassung. */
@media(min-width:1000px){.preis{display:none}}

/* Breite Tabellen laufen seitlich weiter. Der Verlauf am Rand zeigt, dass es
   etwas zu wischen gibt — ohne ihn wirkt die Tabelle abgeschnitten. */
/* Statistik: Bereichswahl und gekürzte Listen. Die Leiste behält die
   bestehende Chipoptik und wird auf schmalen Geräten seitlich schiebbar,
   damit alle sieben Bereiche erreichbar bleiben, ohne umzubrechen. */
.mehr-zeigen{
  display:block;width:100%;margin-top:14px;padding:13px 18px;
  background:none;border:1px solid var(--papier-linie);cursor:pointer;
  font-family:var(--b);font-weight:700;font-size:var(--tx-klein);letter-spacing:.02em;
  color:var(--papier-text);
}
@media(hover:hover){.mehr-zeigen:hover,.mehr-zeigen:focus-visible{background:var(--nav-beruehrt);outline:0}}
/* ── ⚠⚠ DER KNOPF ENDET AUF DER KANTE SEINER ZEILEN — 23.09.2026 ────

   Didi: «‹Weniger anzeigen›, ‹Alle 26 Spiele anzeigen› und gleichartige sind
   breiter als die Zeilen darüber — sie laufen über die rechte Kante hinaus.»

   **Der Knopf hatte keinen Deckel, die Zeilen schon.** `.rz` und
   `.rz-tagkopf` tragen seit heute `max-width:1240px`; `.mehr-zeigen` nimmt
   mit `width:100%` die volle Breite des Behälters. Gemessen bei 1440 im
   Behälter von 1280: Zeile bis 1320, Knopf bis 1360 — **40px darüber
   hinaus, und zwar zwangsläufig.** Unter 1240 berührt die Regel nichts;
   bei 390 lagen beide schon auf 372.

   ⚠ **Der Deckel gilt NUR unter den Spiellisten, und das ist der ganze
   Punkt der vier Wähler.** `.mehr-zeigen` steht ausserdem unter den
   Statistiktabellen, unter der Ehrenliste und unter der Einsatzliste im
   Spielerprofil — dort sind die Blöcke darüber 1280 breit, und ein Deckel
   von 1240 machte den Knopf schmaler als sie. **Eine Breite, die am
   falschen Ort steht, fällt niemandem auf, bis sie jemandem auffällt.**

   ⚠ **Vier Wähler, weil der Knopf an zwei Stellen anders hängt.** Auf
   `/spiele/` ist er Kind des Topfes (`spieltopfKnopf()`, ein Knopf je
   Reiter über alle Monate); auf der Teamseite setzt ihn `kuerzeListe()`
   als unmittelbaren Nachbarn der Liste. Dieselbe Sache, zwei Formen —
   und ein Wähler für beide gäbe es nur als blosses `.mehr-zeigen`.

   ⚠ **1240 steht damit an drei Stellen** (`.rz`, `.rz-tagkopf`, hier).
   Wer eine ändert, ändert alle drei — sonst endet der Knopf wieder
   woanders als die Zeile darüber, und genau das ist der Befund von
   heute.

   ⚠⚠ **Auf der Teamseite ist der Deckel seit dem 25.09.2026 aufgehoben —
   an EINER Stelle, und die ist nicht hier.** `#v-team .rz` und die beiden
   Nachbarwähler dieses Knopfs stehen zusammen oben bei `.rz`, samt Didis
   Begründung und der überstimmten von vorgestern. **Hier nachzuziehen
   wäre die zweite Hälfte derselben Regel an einem zweiten Ort** — genau
   die Sorte Teilung, vor der der Absatz darüber warnt. Wer den Deckel
   ändert, liest also vier Stellen: diese drei und die Aufhebung.

   ⚠ **Die Aufhebung gewinnt, obwohl sie früher im Blatt steht.** Sie
   trägt `#v-team` und damit (1,0,2) gegen (0,0,2) hier; die Reihenfolge
   spielt keine Rolle. `/spiele/` behält seine 1240 über alle vier
   Wähler. */
#t-plan > .mehr-zeigen,
#t-res > .mehr-zeigen,
.planliste + .mehr-zeigen,
.rliste + .mehr-zeigen{max-width:1240px}

/* Rollhinweis nur, wo tatsächlich gerollt wird. Vier Ebenen: zwei Deckel in
   Papierfarbe, die mit dem Inhalt mitscrollen (local), und darunter zwei
   Schatten, die stehen bleiben (scroll). Rollt nichts, liegen die Deckel genau
   auf den Schatten und decken sie zu; rollt man, wandern sie weg. Vorher war
   es ein fester Verlauf, der auch an zweispaltigen Tabellen stand, die nie
   rollen — auf der Anlassseite lag er als falscher Anschnitt über dem Text.
   Der Hinweis erscheint jetzt auch links, sobald man zurückrollen kann. Das
   ist der eigentliche Gewinn: bisher zeigte die Tabelle nur an, dass es rechts
   weitergeht, nie dass man etwas hinter sich gelassen hat. */
.tabelle-scroll{overflow-x:auto;position:relative;
  background:
    linear-gradient(to right,var(--papier) 40%,rgba(255,255,255,0)) left / 34px 100% no-repeat local,
    linear-gradient(to left,var(--papier) 40%,rgba(255,255,255,0)) right / 34px 100% no-repeat local,
    linear-gradient(to right,rgba(11,11,10,.13),rgba(11,11,10,0)) left / 22px 100% no-repeat scroll,
    linear-gradient(to left,rgba(11,11,10,.13),rgba(11,11,10,0)) right / 22px 100% no-repeat scroll;
  background-color:var(--papier)}
@media(min-width:1000px){.tabelle-scroll{background-image:none}}

/* ── Tabellenbreite: ein Deckel nach Spaltenzahl ───────────────────
   `table{width:100%}` gilt fuer alle, und bei 1440 sind darum alle 1280px
   breit. Fuer eine Tabelle mit sieben oder acht Spalten ist das richtig, sie
   braucht den Platz. Fuer zwei bis vier Spalten ist es falsch: gemessen liegt
   zwischen dem ersten und dem letzten Text einer Zeile bis zu **1226px** —
   ueber einen Meter Leere, und das Auge kann die Zeile nicht mehr sicher
   verbinden.

   Der Selektor zaehlt die Spalten selbst, statt eine Liste von Ausnahmen zu
   fuehren: `:not(:has(tr > :nth-child(5)))` trifft jede Tabelle, in der keine
   Zeile eine fuenfte Zelle hat. Gemessen sind das **16 von 20** Tabellen; die
   Breite aendert sich bei **zwoelf**, weil die vier zweispaltigen schon
   schmaler sind als 900 (die drei Resultattabellen stehen in einem .g3 und
   sind 415px breit, die auf «Bus» 687px).

   **Es gibt nur eine Stufe, weil es fuer eine zweite keinen Fall gibt.** Eine
   engere Regel fuer zweispaltige Tabellen wurde erwogen und verworfen: sie
   traefe entweder nichts oder die eine Tabelle, die heute stimmt — «So traegst
   du eine Fahrt ein» auf «Bus» mit 91px Luecke. Wer sie in einem Jahr nachbaut,
   soll das hier lesen.

   900 ist gemessen und eine Entscheidung, keine Grenze: die Luecke sinkt von
   988–1114 auf 608–734 in der Beitragstabelle. Bei 820 waeren es 528–654, bei
   760 468–594 — dort steht die Tabelle aber gedraengt, sobald ein Eintrag
   laenger wird. Der Deckel halbiert die Luecke, er schliesst sie nicht.

   Links und nicht mittig: so fluchtet die Tabelle mit Titel und Fliesstext.
   Auf 1916, 2560 und 3440 waechst der Behaelter weiter, die Tabelle nicht —
   ohne Deckel waere sie dort bis 1688px breit mit 1515px Luecke. */
table:not(:has(tr > :nth-child(5))){max-width:900px}
/* Beim Rollen bleibt die erste Spalte stehen. Ohne sie wandert der Bezug
   mit: „Die ewige Bilanz" rollt auf dem Handy um 346px, und ohne die
   Saison daneben sind acht Zahlen pro Zeile wertlos. Der Hintergrund
   verhindert, dass der durchrollende Inhalt darunter hindurchscheint. */
.tabelle-scroll th:first-child,.tabelle-scroll td:first-child{
  position:sticky;left:0;background:var(--papier);
  box-shadow:1px 0 0 var(--papier-linie);
}
.tabelle-scroll thead th:first-child{z-index:2}

/* **Die klebende Spalte uebernimmt den Grund ihrer Zeile.**
   Sie traegt `background:var(--papier)`, damit der durchrollende Inhalt
   nicht darunter hindurchscheint — richtig. **Aber eine hervorgehobene Zeile
   hoerte damit an ihrer Kante auf:** Die Aushilfszeile war gelb, ihre erste
   Zelle weiss. Dasselbe beim Zeigen.

   `inherit` loest es: Die Zelle nimmt, was die Zeile hat, und faellt auf
   `--papier` zurueck, wo die Zeile nichts setzt. **Der Zweck bleibt
   erfuellt** — sie ist nie durchsichtig. */
@media(hover:hover){
  .sp-eins tbody tr:hover td:first-child,.sp-tab tbody tr:hover td:first-child{
    background:inherit}
}

/* **Unter 640 klebt nichts.** Die Regel darueber gibt der ersten Spalte
   `position:sticky`, weissen Grund und einen `box-shadow` als Kante —
   richtig, solange die Tabelle seitlich rollt. **Die Spielertabellen rollen
   dort nicht mehr**, sie sind keine Tabellen: Der weisse Grund blieb beim
   Zeigen hell, waehrend die Zeile faerbte, und die Kante stand als
   senkrechter Strich mitten in der Zeile.

   **Sie muss NACH der klebenden Regel stehen**, nicht im Medienblock weiter
   oben: Gleiches Gewicht, und die spaetere gewinnt. Der erste Anlauf stand
   3200 Zeilen davor und tat nichts. */
/* **Das Team steht zweimal im Markup, immer nur eines sichtbar.**
   Ueber 640 traegt die Tabelle ihre eigene Spalte; unter 640 gehoert der Text
   ins Etikett, und eine Tabellenzelle laesst sich nicht in eine andere
   schieben. Dasselbe Verfahren wie bei der Uhrzeit im Spielplan.

   **Die Reihenfolge zaehlt:** Beide Regeln wiegen gleich, also gewinnt die
   spaetere. Ein erster Anlauf hatte sie vertauscht — das Team stand bei 1440
   doppelt und bei 390 gar nicht. */
/* **`.vh` — nur fuer Vorleser, nicht fuers Auge.** Das Muster steht im
   Projekt schon zweimal ausgeschrieben: an `.beitraege thead` und am
   `.fair-satz`. **Drei Orte sind die Schwelle fuer eine eigene Klasse** —
   die beiden bleiben, wo sie sind; wer sie das naechste Mal anfasst, kann
   sie hierher ziehen.

   Nicht `display:none`: Das naehme den Text auch dem Vorleser. Die
   Pfeilspalte braucht einen Kopf, damit die Tabelle nicht mit einer
   namenlosen Spalte endet. */
/* **«Gelb/Rot» bricht am Schraegstrich um.** Der lange Kopf spreizte die
   Spalte auf 150px, waehrend «Ass» 74 und «Rot» 77 misst — bei einer Ziffer
   Inhalt. Zweizeilig sind es 95, und die Zahlspalten liegen zwischen 78 und
   116 statt 74 und 150.

   **Nicht `<br>` im Markup:** Der Vorlesetext las dann «GelbRot» ohne
   Trenner. **Und nicht `<wbr>`:** Es bricht nur bei Platzmangel, und der
   Platz ist da. `max-width` zwingt den Umbruch, der Schraegstrich bleibt im
   Text. Die Kopfhoehe aendert sich nicht — «Gegner / Wettbewerb» ist ohnehin
   zweizeilig. */
/* **«Gelb / Rot» mit Leerzeichen — der Umbruch kommt aus dem Text.**
   Der lange Kopf spreizte die Spalte auf 150px, waehrend «Ass» 74 und «Rot»
   77 misst, bei einer Ziffer Inhalt.

   Drei Wege waren falsch: `<br>` liess den Vorlesetext «GelbRot» ohne
   Trenner lesen. `<wbr>` allein bricht nur bei Platzmangel. Und `max-width`
   am `th` wirkt gar nicht — der Tabellenalgorithmus bestimmt die
   Spaltenbreiten selbst.

   **Ein Leerzeichen um den Schraegstrich braucht keine Regel und keine
   Klasse.** Der Browser bricht dort von selbst, wenn der Platz knapp wird,
   und der Vorleser liest «Gelb Rot» statt «GelbRot».

   **Aber ein Leerzeichen erlaubt den Umbruch nur, es erzwingt ihn nicht.**
   Bei 1440 ist Platz da, also blieb der Kopf einzeilig — und die Spalte wurde
   mit dem Leerzeichen sogar breiter: 171 statt 150. Die Breitengrenze am
   Inline-Block muss dazu; sie wirkt, wo `max-width` am `th` nicht wirkt. */
/* 4.2em ist die Schwelle: Darunter bricht es dreizeilig — «Gelb», «/»,
   «Rot» — und der Kopf waechst auf 78px. Darueber wird die Spalte nur
   breiter, ohne dass sich etwas aendert. Gemessen an 3.6, 4.2, 4.6, 5.0
   und 5.6. */
/* ⚠ **`.kopf-um` hat seit dem 11.09.2026 keinen Traeger mehr.** Die drei
   Kartenspalten der Spielerseite tragen jetzt Symbole statt Woerter
   (`single-fch_person.php`), und damit ist das Umbruchproblem weg statt
   versorgt. Die Regel bleibt stehen, weil sie die Messung traegt: Wer die
   Woerter zurueckholt, holt sie mit. */
.kopf-um>span{display:inline-block;max-width:4.2em;white-space:normal}

/* ── Kartensymbole in einer Tabellenkopfzelle — 11.09.2026 ──
   `.ve-karte` ist `display:block` — fuer den Verlauf, wo es allein in
   seiner Zelle steht. In einem `th` braucht es die Mittellage, sonst klebt
   es an der Oberkante. Die Groesse ist die kleine aus `.sp-ereig`. */
.sp-tab th .ve-karte,.sp-eins th .ve-karte{display:inline-block;width:9px;height:12px;vertical-align:middle}

/* **Unter 640 keine Grenze.** Dort rollt die Statistiktabelle ohnehin
   seitlich, und der Platz ist so knapp, dass «Gelb / Rot» dreizeilig bricht —
   gemessen 78px Kopfhoehe statt 60. **Wo die Tabelle rollt, spreizt eine
   breite Spalte nichts**, weil ohnehin nicht alles gleichzeitig sichtbar
   ist. */
@media(max-width:639px){
  .kopf-um>span{max-width:none;white-space:nowrap}
}

/* ⚠⚠ **`.screen-reader-text` steht seit dem 24.09.2026 daneben, und sie hatte
   bis dahin KEINE EINZIGE REGEL im Haus.** Es ist WordPress' eigener Name fuer
   «nur fuers Ohr»; der Kern setzt ihn ungefragt — `the_posts_pagination()` gibt
   den Titel der Blaetterleiste als `<h2 class="screen-reader-text">` aus.

   > **Eine Klasse, die der Kern vergibt und das Theme nicht kennt, ist kein
   > leerer Name, sondern sichtbarer Text.** Auf `/suche/` stand darum ueber der
   > Trefferblaetterung die Zeile «Beitraege-Navigation» als Ueberschrift — seit
   > es die Blaetterung dort gibt.

   **Zwei Griffe, eine Regel.** Der Hausname bleibt `.vh`; die Kernklasse steht
   nur dabei, damit das Haus auch das versteht, was es nicht selbst benennt. */
.vh,.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* **Die Begegnung steht vollstaendig, in Verbandsreihenfolge.**
   «FC Waedenswil 1 — FCH 1 · 0:3» liest sich von selbst als Auswaertssieg.
   Vorher stand nur der Gegner da, und die Zahl sagte nicht, wer wo spielte:
   **«FC Waedenswil 1 · 0:3» konnte eine Heimniederlage oder ein Auswaertssieg
   sein.**

   **Dieselbe Bauform wie die Spielzeilen** — dort steht die Begegnung auch
   so, mit `.wir-team` fuer die eigene Mannschaft. Keine neue Farbe, kein
   neues Zeichen, keine Legende: Die Reihenfolge traegt die Aussage.

   Damit faellt das Team aus dem Etikett — es steht jetzt in der Begegnung.
   Verworfen wurden: Farbe am Resultat (Rot ist im Projekt die Karte, und
   Farbe allein traegt nicht), ein farbiger Punkt (dasselbe, plus Legende),
   und eine eigene Spalte «Heim/Auswaerts» (man muesste zusammenrechnen). */
/* `display:inline` gegen die Regel weiter oben: `td.tw b{display:block}`
   war fuer den Gegnernamen gedacht, als er allein in der Zelle stand. Jetzt
   steht `<b>` mitten in der Begegnung — gemessen brach sie dadurch bei 1440
   zweizeilig, und die Zeile wuchs von 61 auf 95px. */
.sp-eins td.tw .wir-team{font-weight:700;display:inline}

/* **Der Vereinsname ausgeschrieben, wo Platz ist.** «FC Herrliberg 1» ab 640,
   «FCH 1» darunter. **960, nicht 640** — gemessen an 700, 760, 860, 960 und
   1100: Erst ab 960 passt «FC Herrliberg 1 — FC Embrach 1» auf eine Zeile.
   Bei 760 waren es zwei Zeilen und 95px Zeilenhoehe, bei 700 sogar vier und
   133. **Die Grenze richtet sich danach, wo der Name passt, nicht nach der
   Stelle, an der die Tabelle die Form wechselt.**

   **Der Gegner steht immer voll**, weil es fuer ihn keine Hausform gibt: Der
   Kurzname ist ein Feld am eigenen Team (`kurzname`), nicht am fremden.

   Zwei Elemente statt einem, immer nur eines sichtbar — dasselbe Verfahren
   wie bei der Uhrzeit im Spielplan. Ein `text-overflow` ginge nicht: Es
   kuerzt mit Auslassungspunkten, statt eine andere Form zu zeigen. */
.sp-eins .nur-breit{display:none}
@media(min-width:960px){
  .sp-eins .nur-schmal{display:none}
  .sp-eins .nur-breit{display:inline}
}
.sp-eins td.tw .rz-strich{color:var(--papier-halb);margin:0 4px;font-weight:400}

@media(max-width:639px){
  .sp-eins th:first-child,.sp-eins td:first-child,
  .sp-tab th:first-child,.sp-tab td:first-child{
    position:static;background:none;box-shadow:none}
}

/* ── 145 Grosse Bildschirme ──────────────────────────────── */
/* Mehr Breite heisst mehr Inhalt zeigen, nicht grösser schreiben.
   Ein 27-Zöller mit 2560px hat rund 109 Bildpunkte pro Zoll, ein Laptop mit
   1440px etwa 110 — bei gleichem Abstand ist die Schrift also gleich gross zu
   sehen. Ein früherer Stand vergrösserte hier 18 Elemente um 10 bis 33 Prozent;
   das liess die ganze Seite um ein Viertel aufgeblasen wirken und fiel erst
   gegen 2500px voll auf. Deshalb wächst hier nur die Fläche.

   Drei Ebenen, bewusst getrennt, weil sie verschiedene Fragen beantworten:
   1800 = wie breit ist der Inhalt (Breite)
   1920 = wie hoch ist der Hero (Höhe)
   3000 = echtes Ultrabreitbild (Breite und Kopf)
   Unterhalb 1800px ändert sich nichts. */

/* ── Breite: ab 1800px trägt das Fenster die 1680er Spalte mit 60px Aussenrand.
   Gemessen: ein Fenster von 1916px — ein 27-Zöller mit 4K und 200% Skalierung —
   stand vorher vier Pixel unter der Schwelle und bekam eine 1400er Spalte mit
   258px leerem Rand je Seite. 1780 liesse nur 50px Rand, 1820 gewinnt nichts
   und schlösse 20px Fensterbreite unnötig aus. Ein MacBook Pro 16" mit 1728
   CSS-Pixeln bleibt bewusst darunter: dort blieben nur 24px Rand. */
@media(min-width:1800px){
  :root{--content-lg:1680px;--rand:72px;--kopfhoehe:106px}
  .qlinks{gap:32px;padding:14px var(--rand)}

  /* Matchtafel: die Zellen bekommen Luft, die Zahlen bleiben.
     Kein gap — die gelbe Trennlinie sitzt als Rand an der zweiten Zelle. */
  .zelle{padding:38px clamp(30px,2.6vw,46px)}

  /* Fliesstext behält seine Zeilenlänge, auch wenn der Behälter wächst */
  .fliess,.tsr,.lead{max-width:min(var(--content-sm),66ch)}
}

/* ── Höhe: getrennt von der Breite, weil ein Fenster breit und trotzdem niedrig
   sein kann. Der feste Vorgänger (700 als Minimum, ab 2560 sogar starre 820)
   nahm auf einem 2560x1080 ganze 76 Prozent der Fensterhöhe — vom Matchband
   blieben 154 von 302 Pixeln. 60vh deckelt das, ohne die hohen Bildschirme
   anzutasten: 2560x1440 und 3440x1440 bleiben bei 820. */
@media(min-width:1920px){
  .hero{min-height:clamp(600px,60vh,820px)}
}

@media(min-width:2560px){
  :root{--rand:96px}
}

/* ── Echtes Ultrabreitbild. 3440px zeigten den Inhalt vorher auf 49 Prozent der
   Fläche — eine zentrierte Desktopseite auf breitem Glas. Die zusätzliche
   Fläche geht in Inhaltsbreite und Flucht, nicht in Schriftgrad: der Versatz
   zwischen Wappen und Slogan fällt von 354 auf 134px, der Kopf bleibt mit
   280px weiterhin sichtbar breiter als der Inhalt. Keine Abfrage auf das
   Seitenverhältnis: ein 2560x1080 ist breit, aber niedrig — der Fall gehört
   zur Höhenregel oben, nicht hierher. */
@media(min-width:3000px){
  :root{--content-lg:var(--content-xl-uw);--content-kopf:2160px}
}

/* ── 148 Berührflächen auf dem Handy ─────────────────────── */
/* Bedienelemente brauchen auf dem Touchscreen rund 44px Höhe. Erreicht wird das
   über Polster, nicht über grössere Schrift — bei inline gesetzten Elementen
   verändert vertikales Polster die Zeilenhöhe nicht, das Layout bleibt also gleich.
   Gilt nur bis 767px; ab Tablet zeigt der Zeiger genau genug. */

@media(max-width:767px){
  /* ── ⚠⚠ DIE HANDY-AUSNAHME DER PERSONENKARTE IST ENTFALLEN ──────────
     Didi, 25.09.2026: «Am Handy dieselbe Form — keine eigene, groessere
     Zeilenhoehe.» Fuenf Regeln sind hier verschwunden:

     > ~~`.person-tel > .tel{padding-block:9px;min-height:44px;box-sizing:border-box}`~~
     > ~~`.person-tel{margin-top:0}`~~
     > ~~`.person-mail{padding-block:9px;min-height:44px;box-sizing:border-box;margin-top:2px}`~~
     > ~~`.g4:has(.person) .person-tel{margin-top:14px}`~~
     > ~~`.g4:has(.person) .person-mail{margin-top:0}`~~

     Und mit ihnen ihre zwei Begruendungen, die beide richtig waren:

     > «Kontaktzeilen der Personenkarten. Das Polster ist nicht die einzige
     > Hoehenquelle — min-height sichert die 44px ab. Sonst addieren sich
     > zwischen Telefon und Mail zwei Polster zu 24px, und die beiden stehen
     > weiter auseinander als Name und Telefon, obwohl sie zusammengehoeren.
     > Gemessen 29 → 18px. Ein negativer Abstand kaeme auf 17px, liesse die
     > Flaechen aber um 8px ueberlappen — dort trifft ein Tippen die falsche
     > Zeile.»
     > «.person-tel > .tel, nicht .person-tel a: weiter unten steht
     > `p > .tel{padding-block:13px}` fuer Telefonverweise im Fliesstext.
     > Die ist gleich stark und kaeme spaeter — sie wuerde gewinnen.»

     ⚠⚠ **Der zweite Satz ist nicht gefallen, sondern umgezogen.** Er steht
     woertlich bei `.person-tel > .tel` in der Grundregel und gilt dort
     staerker als hier: Die Grundregel wirkt auf allen Breiten, die Kollision
     mit `p > .tel` nur unter 768. **Wer sie nur hier bedacht haette, haette
     sie beim Verschieben verloren.**

     **Der erste Satz ist widerlegt, nicht weggewischt.** Er rechnete mit
     Polster als Hoehenquelle und suchte den Schaden im Abstand. Der Schaden
     lag im Polster selbst: 9px oben und unten sind 18px sichtbarer
     Zusatzabstand je Zeile, und genau den schliesst der neue Auftrag aus. Die
     44px waren dabei nie die Frage — **sie waren die Antwort auf eine andere,
     naemlich den Beruehrflaechenboden dieses Blocks.** Didi setzt die zwei
     Personenzeilen wie die zwei Kontaktzeilen des Fusses auf 24 herunter; die
     44 gelten fuer alles andere in diesem Block unveraendert weiter.

     ⚠ **Es bleibt hier nichts stehen.** Eine Regel, die am Handy einen
     anderen Abstand setzt als darueber, waere die zweite Form, die der
     Auftrag ausschliesst — auch dann, wenn sie nur zwei Bildpunkte
     verschoebe. */

  /* Der Verweis auf die Kontaktseite im Fussbereich. Die Mailzeilen daneben
     bekommen ihre 44px aus `.fuss-mail`; ein `.mehr` bringt nichts mit und
     mass 34px. Gemeldet hat es der Aussen-Durchgang beim ersten Lauf nach dem
     Einbau — die Regel greift nur unter 768px, und genau dort fiel sie durch. */
  .fuss .mehr{padding-block:9px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center}

  /* Filterknöpfe */
  .mini{padding-block:14px}
  .filt .mini{padding-block:13px}
  /* Der Reiter hat einen 14px hohen Textkasten, der Chip einen von 18 —
     dasselbe Polster ergibt darum nicht dieselbe Fläche. min-height sichert
     die 44px unabhängig vom Kasten, wie bei den Kontaktzeilen der
     Personenkarte. Gemessen ohne sie: 40px. */
  .umschalter .mini{min-height:44px;box-sizing:border-box}

  /* ── Der Boden der Beruehrflaeche, fuer alle uebrigen Schaltflaechen ──
     44px sind eine Eigenschaft der Schaltflaeche, keine Folge ihrer Schrift.
     Vorher entstand die Hoehe von 21 der 24 Schaltflaechen aus Zeilenhoehe
     plus Polster, und vier Klassen in sechzehn Ansichten sassen bei genau
     44 = 16 + 13 + 13 — ohne jede Reserve. Ein Schritt von --tx-klein auf
     13px haette alle vier gleichzeitig unter die Grenze fallen lassen, und
     die Systempruefung haette es erst hinterher gemeldet. Die drei Regeln
     darueber machen es seit dem 19.08.2026 fuer Personenkarte und Umschalter
     vor; hier gilt dasselbe fuer den Rest.

     Die Regel steht bewusst IN diesem Medienblock. Der Boden ist eine
     Anforderung des Touchscreens, keine des Zeigers — ausserhalb gesetzt
     wuchs die Vorstandsseite um 142px, weil die Kontaktzeilen auch am
     Bildschirm auf 44px gingen, wo sie mit Absicht schmal sind.

     `:not(p) > .mehr` und `:not(p) > .tel` nehmen die Verweise heraus, die in
     einem Absatz stehen: die sind Text und keine Schaltflaeche — dieselbe
     Ausnahme, die auch die Pruefung kennt. */
  /* ⚠ **`.fuss-mail` ist am 25.09.2026 aus dieser Liste herausgenommen.**
     ~~`… ,.such-zu,.fuss-mail,.meta a, …`~~ — Didi setzt die zwei
     Kontaktzeilen des Fusses auf 24px herunter, damit sie mit der Anschrift
     darueber auf einer Hoehe stehen. **Die 44 gelten fuer alles andere in
     dieser Liste unveraendert weiter**, auch im Fuss selbst: `.fuss .mehr`
     dreissig Zeilen hoeher traegt sie. Der neue Boden steht bei `.fuss-mail`
     und gilt auf allen Breiten, nicht nur hier. */
  :not(p) > .mehr,:not(p) > .tel,.mehr-zeigen,.btn,.hw-zu,.such-zu,
  .meta a,.kontaktzeile a{
    min-height:44px;box-sizing:border-box;
  }

  /* Eigenständige Verweise und Schaltflächen */
  .sk .mehr{padding-block:11px}
  /* Fussbereich: die Rechtsverweise.
     ⚠ ~~`.fuss-mail{padding-block:11px}`~~ ist am 25.09.2026 entfallen. Das
     Polster lag im Fluss und machte jede der beiden Kontaktzeilen 22px
     hoeher als die Anschrift daneben — genau der Zusatzabstand, den Didi
     nicht will. Die Tippflaeche kommt jetzt aus `min-height` am
     `inline-flex` und kostet 1,6px statt 22; die Rechnung steht bei
     `.fuss-mail`. */
  /* ⚠ **Der Schalter «Cookie-Einstellungen» haengt seit dem 25.09.2026 mit
     dran.** Er ist ein `<button>`, `.fu a` hat ihn nie erreicht — zwei der
     drei Glieder dieser Zeile haetten eine Tippflaeche gehabt und das
     dritte nicht.

     **Dass das nichts kostet, haengt an `display:inline` bei
     `.fu-tx button`** (Abschnitt 140, mit Begruendung). An einem
     Inline-Kasten traegt das Polster die Tippflaeche, ohne die Zeilenhoehe
     zu aendern; genau darum steht es hier auch bei den zwei `<a>`. Ein
     Knopf mit eigener Flaeche haette die Rechtszeile um 30px wachsen
     lassen — derselbe Zusatzabstand, den Didi am selben Tag zwanzig Zeilen
     weiter oben bei `.fuss-mail` abbestellt hat. */
  /* ⚠ **Das Polster gilt seit dem 25.09.2026 nur noch von 620px an, und die
     zwei Absaetze darueber gelten mit ihm nur noch dort.** Didi am selben
     Tag: «Tippflaeche der Links mindestens 24 px ohne sichtbaren
     Zusatzabstand — wie beim Kontaktblock.» Unter 620px traegt die Flaeche
     darum eine `min-height` an einem `inline-flex` — dieselbe Bauform wie
     `.fuss-mail` zwanzig Zeilen weiter oben, derselbe Auftrag, dieselbe
     Rechnung. Sie steht im Abschnitt «Die Rechtszeile in zwei Zeilen».

     ⚠ **Die Bedingung steht hier und nicht als Ruecknahme dort, weil das
     Blatt die Reihenfolge entscheidet.** Der 619er-Block der Rechtszeile
     steht VOR diesem Abschnitt; ein `padding-block:0` dort wiegt gleich
     viel und verliert. Zu gewinnen waere nur mit einem schwereren Waehler —
     **und ein Waehler, der Gewicht traegt statt Bedeutung, ist die teurere
     der zwei Loesungen.** */
  @media(min-width:620px){.fu a,.fu-tx button{padding-block:15px}}
  /* ⚠ ~~`.hw-zu{padding:10px 4px}`~~ ist am 25.09.2026 entfallen. Das
     Polster machte die 44px aus einem 24px-Zeichen; seit das Kreuz `width`
     und `height` selbst traegt, aendert es nichts mehr — der Kasten rechnet
     `border-box`, und das Zeichen sitzt aus `inline-flex` in der Mitte.
     **Die `min-height` in der Liste darueber bleibt stehen**: Sie ist jetzt
     wertgleich und nicht falsch, dieselbe Lage wie bei `.such-zu`. */
  .kontaktzeile a{padding-block:9px}
  .meta a{padding-block:12px}
  .brot a{padding-block:15px}
  p > .tel{padding-block:13px}
  /* **Und die Kontaktzeile ist selbst ein `<p>`** — 22.09.2026.

     ⚠ **Die Warnung dafuer steht seit dem 19.08.2026 vierzig Zeilen weiter
     oben**, an `.person-tel > .tel`:

     > «`.person-tel > .tel`, nicht `.person-tel a`: weiter unten steht
     > `p > .tel{padding-block:13px}` fuer Telefonverweise im Fliesstext.
     > Die ist gleich stark und kaeme spaeter — sie wuerde gewinnen.»

     **Dort ist sie beachtet, hier war sie es nicht.** `fch_core_kontaktzeile()`
     baut `<p class="kontaktzeile">`, und `.kontaktzeile a` wiegt (0,1,1)
     genau so viel wie `p > .tel` — bei Gleichstand gewinnt die spaetere.

     Gemessen an der Anlassseite, 375 px, Kasten «Wer Auskunft gibt»:
     **Mailzeile 44 px, Telefonzeile 48 px.** Zwei Zeilen, die zusammen-
     gehoeren und beide eine Beruehrflaeche sein sollen, standen vier Pixel
     verschieden hoch.

     > **Eine Warnung, die an einer Regel steht, gilt fuer jede Regel
     > derselben Bauart.** Sie war richtig aufgeschrieben und trotzdem nur
     > einmal angewendet.

     `.kontaktzeile > .tel` wiegt (0,2,0) und schlaegt beide, ohne die
     Fliesstextregel anzutasten. 9 px ist die Zahl, die eine Zeile hoeher
     schon steht — die 44 px Boden sichert der Sammelwaehler darueber. */
  .kontaktzeile > .tel{padding-block:9px}

  /* Der Hinweisknopf ist hier 44px hoch — eine Füllung wäre ein Klotz um zwei
     Wörter. Der Zustand kommt deshalb über Schrift und Linie. */
  .hw-btn:hover,.hw-btn:active,.hw-btn:focus-visible{
    background:none;box-shadow:none;color:var(--dun);text-decoration-thickness:3px;
  }
  /* **Unter 768px ist der Knopf flach: rote Schrift, keine Fuellung.** Die
     Fuellung weiter oben gaebe hier eine rote Flaeche mitten im aufgeklappten
     Eintrag; auf dem schmalen Balken ist das zu viel.

     **Gemessen am 26.08.2026, beide Fassungen:**
     bei 360 rote Schrift auf `--papier-flaeche` = **5,03**, Umriss 17,28;
     ab 768 weisse Schrift auf roter Fuellung = **5,74**, Ring 5,03.
     Beide ueber 4,5.

     Der `.hinweis.dringend`-Zwilling stand hier bis zum 26.08.2026 daneben
     und feuerte nie — der Zustand sitzt an `.hw-zeile`. */
  .hw-zeile.dringend .hw-btn:hover,.hw-zeile.dringend .hw-btn:active,
  .hw-zeile.dringend .hw-btn:focus-visible{
    background:none;box-shadow:none;color:var(--rot);
  }

  /* Dokumentverweise in Infokästen. Mit Stufe G ist die Inhaltshöhe 18px;
     13px Polster ergeben 44px. Der Abstand zum nächsten Verweis beträgt 31px,
     davon werden 26px beansprucht — die Flächen überlappen also nicht. */
  .info li a:not(.btn){padding-block:13px}
  /* Allein stehende Verweise in Infokästen — meist Mailadressen. Inhaltshöhe
     18px, mit 13px Polster 44px. Der Absatz enthält nichts ausser dem Verweis,
     ein Überlappen mit Nachbarn ist daher ausgeschlossen.

     ⚠⚠ **Die zwei Personenzeilen sind am 25.09.2026 ausgenommen.** Der
     Ansprechkasten steht in einem `.info`, und `p.person-tel` wie
     `p.person-mail` enthalten nichts ausser ihrem Verweis — beide fielen
     unter diesen Waehler. Er wiegt (0,3,2) und schlug damit die 9px, die der
     Medienblock den Personenzeilen ausdruecklich zugedacht hatte: **Auf
     `/stellen/` und in jedem Ansprechkasten waren es 13 und nicht 9, und
     niemand hatte das entschieden.**

     **Seit heute ist die Frage keine Rangfrage mehr.** Didi setzt die
     Tippflaeche der Personenzeilen auf 24px ohne sichtbaren Zusatzabstand;
     13px Polster sind 26px davon. Die Ausnahme steht darum am Waehler und
     nicht als staerkere Gegenregel — **eine Ausnahme sieht man, eine
     Rangfrage muss man nachrechnen.**

     ⚠ `.kontaktzeile` braucht die Ausnahme nicht: Dort steht das Zeichen als
     `<svg>` NEBEN dem Verweis im Absatz, der Verweis ist also nie
     `:only-child`. Die zwei Personenzeilen tragen ihr Zeichen IM Verweis —
     derselbe Unterschied, aus dem sie auch eine eigene Zeichenspur
     brauchen. */
  .info p:not(.person-tel):not(.person-mail) > a:not(.btn):only-child{padding-block:13px}

  /* Verweise am Absatzende: nur 8px, weil auf der Jahresseite zwei davon
     35px auseinanderliegen — mehr Polster liesse die Flächen überlappen,
     und überlappende Flächen sind schlechter als knappe. */
  p > .mehr{padding-block:8px}
}

/* ── 150 Nur im Prototyp ──────────────────────────────────── */
/* Diese Regeln entfallen im Theme. */

.view{display:none}
.view.on{display:block}
.demo{position:fixed;right:14px;bottom:14px;z-index:200;display:flex;gap:6px;background:rgba(11,11,10,.9);border:1px solid var(--linie);padding:7px}
.demo button{
  font-family:var(--b);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 12px;border:1px solid var(--linie);background:none;color:#fff;cursor:pointer;
}
.demo button.on{background:var(--gelb);color:var(--dun);border-color:var(--gelb)}
.demo-trenn{width:1px;background:var(--linie);margin:0 4px}
/* Auf schmalen Bildschirmen läge die Leiste sonst über dem halben Inhalt */
@media(max-width:719px){
  .demo{left:8px;right:8px;bottom:8px;flex-wrap:wrap;justify-content:center;gap:4px;padding:5px}
  .demo button{font-size:9.5px;letter-spacing:.06em;padding:6px 8px}
  .demo-trenn{display:none}
}
/* —— ⚠ Hier stand bis zum 24.09.2026 ein Satz, der zu viel versprach ——
   > «Zeigt den Kader ohne Nummern und Positionen. Im Theme lässt das
   >  Template sie weg.»

   Fuer die Positionen stimmte er. **Fuer die Nummern nicht:** Das Template
   gab `.snum` in JEDER Zeile aus und schrieb einen Gedankenstrich hinein,
   wo keine erfasst war -- eine gelbe Spur ohne Inhalt.

   Seit dem 24.09.2026 stimmt er, und zwar auf Wunsch: Der Schalter
   `rueckennummern` am Team (`Fields/team.php`, Vorgabe ja) laesst das
   `span` in `single-fch_team.php` ganz weg.

   ⚠ **Und darum steht dieser Regel gegenueber weiterhin keine im Theme.**
   Ein `display:none` liesse die Spur stehen -- `.snum` traegt
   `min-width:38px` und `.spz` einen `gap:14px`, zusammen 52 Pixel, in
   denen nichts steht. Ein fehlendes Element nimmt den Abstand mit:
   gemessen am 24.09.2026 rueckt der Name in der Liste von 52 auf 0 und im
   schmalen Kachelkader von 120,9 auf 92 Pixel ab der eigenen Zeilenkante.

   > **Wer eine Spur leeren will, blendet nicht aus, sondern laesst weg.** */
.kad.schlicht .snum,.kad.schlicht .sn span,
.kad-kacheln.schlicht .rueckennummer,.kad-kacheln.schlicht .person-rolle{display:none}



/* ── Die Kaderwand unter 620: flache Zeilen ──────────────────────────────
   (~~«Die Kaderwand unter 640»~~ bis zum 24.09.2026. Die Zahl ist mit dem
   Raster auf die Hausgrenze gezogen; die Begründung darunter gilt
   unverändert — sie hängt an der Kachelhöhe und nicht an der Schwelle.)
   Bei 390 mass eine Kachel 304px — zwanzig Spieler also 6232px oder sieben
   Bildschirmhoehen. Das Bild ist zudem eine Attrappe: ein unscharfer Umriss
   traegt keine Auskunft und kostet die ganze Hoehe.

   **Die Bauform ist die der Personenkarten** (`.g4:has(.person)` weiter oben),
   hier aber mit **80px statt 128**. Gemessen bei 390 fuer zwanzig Spieler:

       Bild 128   Zeile 171   Wand 3572   schlechter als vorher
       vorher     Kachel 304  Wand 6232   zweispaltig
       Bild  96   Zeile 128   Wand 2712
       Bild  80   Zeile 107   Wand 2292   ein Drittel

   **Mit 128 lohnt der Umbau nicht** — die flache Fassung ist einspaltig, die
   Kachelwand war zweispaltig. Erst das kleinere Bild bringt etwas.

   **Warum 80 hier geht und 88 auf der Personenkarte nicht ging:** Dort ist das
   Bild das Hauptelement einer Karte, hier eine Wiedererkennungshilfe in einer
   Liste von zwanzig Namen. Der Kommentar dort sagt selbst, die 128 seien an
   beiden Orten «eine Uebereinstimmung und keine Abhaengigkeit».

   **Als eigener Block mit `max-width`, nicht als Erweiterung der
   Personenkarten-Regeln.** Ein erster Anlauf haengte `.kad-kacheln` an deren
   Selektoren — und ueberschrieb damit die eigenen Rasterregeln der Kaderwand:
   Sie blieb bei 768 und 1440 einspaltig, und `width:auto` machte das Bild
   1280px breit. **Wer eine fremde Regel erweitert, erbt ihre Grenzen — und
   ueberschreibt die eigenen.** */
@media(max-width:619px){
  .kad-gruppe{grid-template-columns:minmax(0,1fr);gap:8px}
  .kad-kacheln .person{display:flex;align-items:flex-start}
  .kad-kacheln .person .f{width:80px;aspect-ratio:3/4;height:auto;flex:none}
  .kad-kacheln .person-init{width:80px;aspect-ratio:3/4;height:auto;
    flex:none;font-size:20px}
  /* **`flex:1` ist noetig, nicht nur `align-self`.** Ohne das richtet sich die
     Textspalte nach ihrem Inhalt statt nach dem Platz: gemessen 148px bei 320
     wie bei 639, der damaligen Oberkante — die Karte wuchs, der Text nicht. */
  /* ⚠ **Zwei Spalten seit dem 12.09.2026**, damit die Rueckennummer neben
     dem Namen stehen kann. Hier stand `grid-template-columns:minmax(0,1fr)`.
     Die zweite Spalte kam zuerst als eigene Regel weiter unten dazu -- und
     war damit derselbe doppelte Selektor, der am selben Tag in
     `backend.css` behoben wurde. **Eine Regel, eine Stelle.** */
  .kad-kacheln .person-tx{padding:10px 12px;display:grid;flex:1;min-width:0;
    grid-template-columns:auto minmax(0,1fr);grid-auto-rows:min-content;
    align-content:start;align-self:stretch}
  .kad-kacheln .person-rolle{min-height:0;grid-column:1/-1}

  /* ── Die Rueckennummer wandert in die Zeile ──

     **Sie sass auf dem Gesicht.** Oben links war am Desktop richtig: Das
     Portrait ist dort hochkant und gross, die Ecke leer. Unter 619 wird es
     80px breit -- **die gelbe Kapsel deckte ein Viertel davon ab**, und genau
     in der Ecke, in der bei einem Portraitfoto der Kopf anfaengt.

     Sie steht jetzt in derselben Zeile wie der Name, davor: `[7] Carlo
     Gamboni`. Gelb wie vorher, nur kleiner -- **`--tx-etikett` (11px) statt
     `--tx-klein` (14px)**, weil sie neben dem Namen steht und nicht mehr auf
     einer Bildflaeche.

     ⚠ **`position:static` muss ausdruecklich dastehen.** Die Grundregel
     `.rueckennummer` setzt `absolute`; ohne das Zuruecknehmen bliebe sie aus dem
     Fluss und das Raster saehe eine leere Spalte.

     ⚠ **Ohne Nummer steht dort nichts.** Die Spalte ist `auto`, faellt also
     auf null zusammen, und der Abstand haengt am Element (`margin-right`)
     statt am Raster (`gap`) -- ein `gap` haette den Namen auch dann
     eingerueckt, wenn keine Nummer da ist. Der Staffblock ist nicht
     betroffen: er fuehrt gar keine Nummer (gemessen, ein einziger Treffer
     fuer `rueckennummer` in `single-fch_team.php`). */
  .kad-kacheln .rueckennummer{
    position:static;grid-column:1;grid-row:2;align-self:center;
    font-size:var(--tx-etikett);padding:2px 7px;margin-right:8px;
  }
  .kad-kacheln .person-name{grid-column:2;grid-row:2;align-self:center}

  /* **Die Betreuerwand folgt derselben Regel.** Sie traegt dieselbe `.person`
     und stand daneben mit demselben Problem: bei 390 mass eine Karte 304px,
     drei Betreuer also 940.

     **Der Einwand aus dem Kommentar bei `.g4:has(.person)` traf nicht zu.**
     Dort steht, `.staff` behalte sein hochformatiges Raster, weil der
     liegenden Karte bei 320px nur 31px Textbreite blieben und die
     Rollenbezeichnung auf sechzehn Zeilen brach. **Das galt fuer zwei
     Spalten.** Einspaltig gemessen bei 320: 148px Textbreite, Rolle einzeilig.

     Die Ausnahme von damals war richtig und ist es nicht mehr — nicht weil
     der Grund falsch war, sondern weil die Anordnung eine andere ist. */
  .staff{grid-template-columns:minmax(0,1fr);gap:8px}
  .staff .person{display:flex;align-items:flex-start}
  /* **Die Betreuer bekommen 128, der Kader 80 — und das ist kein Widerspruch.**
     Es sind dieselben Karten wie auf der Organisationsseite, samt Mailverweis:
     Rolle, Name, Kontakt. Der Kader ist etwas anderes, zwanzig Namen zum
     Ueberfliegen.

     Und der Preis ist ein anderer. Gemessen bei 320 fuer drei Betreuer:
     Wand 338 mit 80, 528 mit 128 — **190px.** Beim Kader waren es zwanzig
     Zeilen und 3940. */
  .staff .person .f{width:128px;aspect-ratio:3/4;height:auto;flex:none}
  .staff .person-init{width:128px;aspect-ratio:3/4;height:auto;
    flex:none;font-size:31px}
  .staff .person-tx{padding:10px 12px;display:grid;flex:1;min-width:0;
    grid-template-columns:minmax(0,1fr);grid-auto-rows:min-content;
    align-content:start;align-self:stretch}
  .staff .person-rolle{min-height:0}
}

/* ── Bildattrappen, nur im Prototyp ── */

/* **Der Bildband-Block — das Verhaeltnis kommt vom Behaelter.**

   Gemessen am Prototyp am 01.09.2026: Die Klasse `f-{motiv}` traegt dort
   ausschliesslich das Attrappenbild, nie ein Verhaeltnis. `.f` selbst hat
   keine Hoehe (`.f{position:relative;overflow:hidden}`) und faellt ohne
   Behaelterregel auf null zusammen.

   > **Das Bildverhaeltnis haengt am Behaelter** -- dieser Grundsatz steht im
   > Stylesheet mehrfach, und der Block haelt ihn ein: Die Auswahl im Editor
   > setzt eine Klasse am Behaelter, keine Hoehe am Bild.

   Drei Werte, wie der Plan sie nennt. Die 4:3 der Chronik und die 3:4 des
   Archivrasters sind nicht dabei -- sie gehoeren zu gebauten Vorlagen und
   nicht zu einer frei zusammengestellten Seite. */
.bildband{margin:22px 0}
.bildband .f{display:block;width:100%;height:auto;object-fit:cover}
.bildband-16-9 .f{aspect-ratio:16/9}
.bildband-2-1 .f{aspect-ratio:2/1}
.bildband-3-1 .f{aspect-ratio:3/1}

/* ── Fremdes Formular ──────────────────────────────────────────────────

   **Fluent Forms setzt sich auf jedem Eingabefeld durch, obwohl es zuerst
   laedt.** Nachgemessen am 02.09.2026 auf `/kontakt/`: `style.css` steht als
   letztes im Kopf, und trotzdem gewinnt `fluentform-public-default.css`.
   Abgeschaltet stellt sich jeder Hauswert zurueck:

     border-radius   7px    ->  0
     color           #606266 -> var(--papier-text)
     font-family     -apple-system -> var(--b)
     padding         11px 15px -> 13px 14px

   > **Wer eine fremde Regel schlagen will, wird spezifischer und nicht
   > lauter.** Kein `!important` -- der naechste, der etwas aendern will,
   > muesste sonst noch lauter werden.

   **Kein einziger Wert ist neu.** Sie stehen alle oben unter «130 Formulare»
   und in der Papierfassung; hier stehen sie ein zweites Mal, damit sie
   greifen. Wer sie aendert, aendert sie DORT und traegt es hier nach.

   **Die Regeln haengen am Feldtyp, nicht an der Feldliste.** `input`,
   `select`, `textarea` -- was fuer ein Feld Didi spaeter hinzufuegt, ist eines
   von diesen dreien und traegt die Form von selbst. Einzige Ausnahme sind
   Kastchen und Schalter (`[type=checkbox]`, `[type=radio]`): Sie sind keine
   Textfelder und behalten die Fassung des Plugins.

   `.papier .form .fe` traegt (0,3,1) und schlaegt damit jede Regel des
   Plugins, die hoechstens (0,3,0) erreicht. */

.form .fe input:not([type=checkbox]):not([type=radio]),
.form .fe select,
.form .fe textarea,
.papier .form .fe input:not([type=checkbox]):not([type=radio]),
.papier .form .fe select,
.papier .form .fe textarea{
  background:#fff;border:1px solid rgba(11,11,10,.22);border-radius:0;
  /* 44 wie alle Felder — siehe die Begruendung bei `.fe input` (23.09.2026). */
  padding:10px 14px;min-height:44px;
  color:var(--papier-text);font-family:var(--b);font-size:var(--tx);
}
/* ⚠⚠ **HIER STANDEN ZWEI `min-height` IM SELBEN BLOCK — behoben 13.09.2026.**

   **Der abgeloeste Vermerk lautete:** «⚠ Am 12.09.2026 in die Regel fuenf
   Zeilen darueber gezogen -- zwei `.papier .form .fe textarea{}` im selben
   Kontext waren ein doppelter Selektor. **Sie ergaenzten einander, also
   aendert das Zusammenlegen nichts.**»

   **Der letzte Satz war falsch.** Die gezogene Regel galt nur fuer
   `textarea`; der Sammelwaehler gilt fuer `input`, `select` UND `textarea`.
   Im Block standen danach `min-height:48px` und `min-height:126px` — **bei
   Gleichstand gewinnt die spaetere**, also 126px fuer alle drei.

   > **Ein doppelter Selektor, der nur EINEN Feldtyp meinte, ist kein
   > doppelter Selektor. Er ist eine Verfeinerung, und die faellt beim
   > Zusammenlegen weg.**

   ⚠ Gemessen auf dev am 13.09.2026, 1280px und 360px **identisch**: **10 von
   10 sichtbaren Formularfeldern standen auf 126px** — /kontakt/ 4 von 4,
   /mitglied/ 6 von 6. Davon sind **8 einzeilig**; die zwei `textarea`
   standen zufaellig richtig.

   ⚠ **Fluent Forms ist unbeteiligt.** Es bringt fuer Texteingaben gar keine
   Hoehenregel mit, fuer `textarea` nur `min-height:90px` (0,1,1) und
   verliert damit ohnehin. Kein `!important` auf beiden Seiten. */
/* ⚠ **Die Verfeinerung steht wieder allein — und NACH der Sammelregel.**
   `.fe textarea` (0,1,1) weiter oben genuegt nicht: Sie verliert gegen
   `.form .fe textarea` (0,2,1) und die `textarea` bekaeme 48px. Darum
   dieselbe Spezifitaet wie die Sammelregel und die spaetere Stellung. */
.form .fe textarea,
.papier .form .fe textarea{min-height:126px;resize:vertical}

/* **Und die ABSTAENDE — nachgetragen am 03.09.2026.**

   Am 02.09. sind Rahmen, Farbe, Schrift und Polster nachgezogen worden. Die
   Abstaende nicht, und sie kommen aus derselben Quelle: Fluent Forms bringt
   an jeder Feldgruppe `margin-bottom:20px` mit und an jeder Beschriftung
   `margin-bottom:5px`.

   **Das Haus loest denselben Abstand ueber Raster:** `.form{gap:15px}`
   zwischen den Feldern, `.fe{gap:6px}` zwischen Beschriftung und Feld. Beide
   Regeln greifen -- und die Fremdabstaende kommen obendrauf.

     Prototyp   .fe   76 px   22 Beschriftung + 6 Abstand + 48 Feld
     Theme      .fe   93 px   dazu 5 unter der Beschriftung
                              und 20 unter der Gruppe

   Bei vier Feldern sind das 108 px, die niemand gesetzt hat. **Didi hat es
   als «zu viel Luft» gesehen und zwischen den Abschnitten vermutet; dort ist
   es nicht** -- `section+section` misst auf beiden Seiten 0/80/96.

   > **Ein Abstand, den zwei Systeme setzen, wird zweimal gesetzt.** Wer das
   > eine uebernimmt, muss dem anderen seines nehmen.

   `.form .fe` wiegt (0,2,0) gegen die (0,1,0) des Plugins, die Beschriftung
   (0,3,0) gegen (0,1,0). Kein `!important`. */
/* **`.ff-el-group` und nicht `.fe`.** Der Behaelter des Absendeknopfs traegt
   kein `fe` -- `inc/formular.php` haelt es ausdruecklich davon fern, damit
   der Knopf nicht im Feldraster mit Beschriftungsabstand steht. Er ist aber
   eine `.ff-el-group` wie jede andere und brachte darum als einziger seine
   20 px mit: **gemessen 20 px Leerraum unter dem Knopf, den der Prototyp
   nicht hat.** */
.form .ff-el-group,
.papier .form .ff-el-group{margin-bottom:0}
.form .fe .ff-el-input--label,
.papier .form .fe .ff-el-input--label{margin-bottom:0}

/* **Ein Clearfix, der im Raster zwei Zeilen wird.**

   Nach den zwei Zeilen oben mass die Feldgruppe 88 statt 76. Die zwoelf
   Pixel standen in keiner Deklaration:

     grid-template-rows   0px  22.39px  48px  0px

   **Vier Reihen bei zwei Kindern.** Fluent Forms setzt an jede Gruppe
   `::before` und `::after` mit `content:" "` und `display:table` -- der
   Clearfix aus der Float-Zeit. In einem Raster ist jedes erzeugte Element
   ein Rasterfeld: zwei leere Reihen, und der Zwischenraum von 6 px wird
   dreimal statt einmal gezaehlt.

   > **Ein Werkzeug, das Floats aufraeumt, raeumt in einem Raster nichts auf
   > und kostet zwei Zeilen.** Es ist unsichtbar und misst zwoelf Pixel.

   `content:none` und nicht `display:none`: Ohne Inhalt entsteht das
   Pseudoelement gar nicht erst. */
.form .fe::before,.form .fe::after,
.papier .form .fe::before,.papier .form .fe::after{content:none}

/* **Ein `margin-left:auto`, das im Blockfluss nichts tat.**

   Zweispaltige Zeilen (`ff-t-container`) standen mit eingerueckten Feldern:
   Die Beschriftung begann auf der Kante der Spalte, das Feld 30 px weiter
   rechts. Gemessen auf dev am 22.09.2026, `.form` 560 px breit, Spalte
   272.5 px: **Beschriftung 273 px breit, Feldbehaelter 243** -- bei 4 von 4
   zweispaltigen Feldern, bei 0 von 10 einspaltigen.

   Die Deklaration ist die des Plugins und steht seit je da:

     .fluentform .ff-el-group.ff-el-form-top .ff-el-input--content
       { margin-left:auto }

   **Sie war bis zum 22.09.2026 wirkungslos.** In einem Block mit
   `width:auto` rechnet sich `margin-left:auto` zu 0 -- das Element fuellt
   ohnehin die ganze Breite. Seit `inc/formular.php` das `fe` selbst setzt,
   ist die Feldgruppe aber ein Raster (`.form .fe{display:grid}`), und **im
   Raster schlaegt ein `auto`-Rand das voreingestellte Dehnen**: Der Rand
   frisst den freien Platz, das Kind schrumpft auf seine Inhaltsbreite und
   rueckt nach rechts. Die 30 px sind kein gesetzter Wert, sondern der Rest.

   > **Eine Regel, die nichts tut, tut nichts in DIESEM Aufbau.** Wer den
   > Aufbau aendert, weckt sie -- und sucht den Fehler dann bei sich.

   `ff-el-form-top` und nicht `ff-t-container`: Der Haken sitzt an der
   Bedingung der fremden Regel, nicht an der Stelle, an der es auffiel. Auf
   /kontakt/ und /mitglied/ traegt ihn **keine Gruppe** -- 0 von 5 und 0 von
   7, lokal wie auf dev gezaehlt -- die zwei Seiten koennen davon gar nicht
   erreicht werden. */
.form .fe.ff-el-form-top .ff-el-input--content,
.papier .form .fe.ff-el-form-top .ff-el-input--content{margin-left:0}

/* **Und das Raster gehoert an den `<fieldset>`.**

   `.form{display:grid;gap:15px}` steht seit je da und griff nie: Im Prototyp
   sind die vier Felder und der Knopf direkte Kinder von `.form`, im Theme
   liegen sie drei Ebenen tiefer.

     Prototyp   .form > .fe · .fe · .fe · .fe · button
     Theme      .form > div.fluentform > form > fieldset > .fe · … · button

   **Das Raster hatte genau ein Kind**, und `gap:15px` einen Zwischenraum,
   den es nirgends gab. Solange Fluent Forms seine eigenen 20 px mitbrachte,
   fiel es nicht auf -- und als die weg waren, klebten die Felder aneinander.

   > **Ein Abstand, den ein Wrapper vom Raster trennt, ist kein Abstand.**
   > Das ist dieselbe Sorte wie die fehlende Verschachtelung bei `.zwei` --
   > nur andersherum: dort war ein Wickel zu wenig, hier drei zu viel.

   Die Zeile setzt das Raster dorthin, wo die Felder wirklich Geschwister
   sind. Die Werte bleiben die des Prototyps. */
.form fieldset{display:grid;gap:15px}
/* **Der Vorlesetitel ist kein Feld und darf keine Rasterreihe sein.**

   Fluent Forms setzt in den `<fieldset>` eine `<legend>` mit dem Formularnamen
   -- unsichtbar gemacht mit `height:0`, `overflow:hidden` und einem Einzug ins
   Nichts. **Fuer einen Vorleser ist sie die Ansage «Kontakt», und die soll
   bleiben.** Im Raster ist sie aber ein Feld wie jedes andere und kostet
   einen Zwischenraum von 15 px, den man nirgends sieht.

   `position:absolute` nimmt sie aus dem Rasterfluss, ohne sie zu entfernen.
   Sie bleibt im Baum, bleibt vorlesbar, und zaehlt nicht mehr mit. */
.form fieldset > legend{position:absolute}

/* Die Beschriftung stimmte schon -- sie steht hier, damit die drei Zeilen
   des Bauteils beieinander bleiben. */
.papier .form .fe label{font-family:var(--b);font-weight:700;
  font-size:var(--tx-klein);letter-spacing:.15em;text-transform:uppercase;
  color:var(--papier-halb)}

/* **Der Fokus ist die Stelle, die man nur beim Tabben sieht** -- und die
   einzige, an der ein fremdes `outline:none` unbemerkt bleibt.
   ⚠ ~~`box-shadow:0 0 0 2px var(--gelb)`~~ ist am 25.09.2026 entfallen und
   `--dun` durch `--akzent` ersetzt — beides wortgleich mit der Feldregel
   `.fe input:focus-visible,…`, deren Begruendung dort steht. **Die Regel muss trotzdem bleiben:**
   Sie ist nicht die Grundregel mit anderem Namen, sondern nimmt daneben den
   Feldrand zurueck, den das Plugin im Fokus umfaerbt. */
.papier .form .fe input:focus-visible,
.papier .form .fe select:focus-visible,
.papier .form .fe textarea:focus-visible{
  outline:2px solid var(--akzent);outline-offset:2px;
  border-color:rgba(11,11,10,.22)}

/* Der Absendeknopf traegt `btn` (siehe `inc/formular.php`) und daneben die
   Klassen des Plugins. Dieselben Werte wie `.btn`, zwei Stufen spezifischer.

   ⚠⚠ **`.ff-btn` kam am 22.09.2026 dazu — der abgeloeste Vermerk sagte «eine
   Stufe spezifischer», und eine Stufe genuegte nicht.**

   **Der Gutenberg-Block bringt eine eigene Knopfregel mit.** Nicht die
   Stilvorlage, nicht das Stylesheet des Plugins — der Block schreibt beim
   Einsetzen ein `<style>` direkt in den `<body>`:

     form.fluent_form_5 .ff-btn-submit:not(.ff_btn_no_style)
       { background-color:var(--fluentform-primary); color:#fff }

   Das wiegt (0,3,1) — **genau so viel wie `.papier .form button.btn`**, und
   bei Gleichstand gewinnt die spaetere Stellung. Ein `<style>` im Koerper
   steht immer nach `style.css`. Darum stand der Knopf auf dev blau, waehrend
   derselbe Knopf auf /kontakt/ gelb war: Dort ist das Formular per Kurzbefehl
   eingebunden, und der Kurzbefehl schreibt kein `<style>`.

   > **Zwei Einbindungen desselben Formulars sind nicht dieselbe Seite.** Was
   > der Block zusaetzlich mitbringt, sieht man nur, wenn man beide misst.

   `.ff-btn` traegt der Knopf immer — der Filter in `inc/formular.php` haengt
   sein `btn` ja gerade daran. Mit ihm wiegt die Regel (0,4,1) und schlaegt
   jede Plugin-Regel dieser Bauart, ohne `!important`. */
.papier .form button.btn.ff-btn,
.papier .form button.ff-btn-submit.ff-btn{
  display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 25px;
  font-family:var(--b);font-weight:700;font-size:var(--tx-klein);
  letter-spacing:.04em;text-transform:none;
  background:var(--gelb);color:var(--dun);border:2px solid var(--gelb);
  border-radius:0;cursor:pointer;transition:background .16s,color .16s;
}
@media(hover:hover){
  .papier .form button.btn.ff-btn:hover,
  .papier .form button.btn.ff-btn:focus-visible,
  .papier .form button.ff-btn-submit.ff-btn:hover,
  .papier .form button.ff-btn-submit.ff-btn:focus-visible{
    background:var(--papier-text);color:var(--gelb);border-color:var(--papier-text);outline:0}
}

/* ── Kurze Seiten ──────────────────────────────────────────────────────

   **Auf `/vereinsshop/` hoerte der weisse Bereich bei zwei Dritteln auf, und
   der Fuss stand mitten im Bild.** Der Prototyp loest das nicht -- er ist EINE
   Datei mit `.view{display:none}`, und die Frage stellt sich dort nicht.
   **Das ist eine Ergaenzung, keine Uebernahme.**

   `100dvh` statt `100vh`: Auf dem Handy faehrt die Adressleiste ein und aus,
   und `vh` rechnet dort zu hoch -- die Seite waere immer ein Stueck zu lang.

   **Nur `main` bekommt `flex:1`.** Das Partnerband gehoert fuer den Verein
   zum Fussbereich; Band und Fuss stehen also zusammen am unteren Rand und
   werden nicht auseinandergezogen.

   **Bei langen Seiten aendert sich nichts** -- die Regel greift nur, wenn der
   Inhalt kuerzer ist als das Fenster. */
/* ⚠ Die drei Erklaerungen `min-height/display/flex-direction` stehen seit
   dem 12.09.2026 oben am einzigen `body{}` -- hier waere es das zweite
   gewesen. Die Begruendung bleibt, weil sie erklaert, WARUM `100dvh`.
   `main{flex:1 0 auto}` ist unten mit der zweiten `main`-Regel vereint. */
/* **Und die Ansicht muss mitwachsen — nachgetragen am 02.09.2026.**

   Die Regel darueber hat `main` gestreckt und dort aufgehoert. Gemessen auf
   `/shop/` bei 1200 px Fensterhoehe:

       main   654 px   gestreckt
       .view  599 px   NICHT gestreckt
       Rest    55 px   der dunkle Grund des `body`

   **Der schwarze Bereich wuchs statt des weissen.** `main` traegt keine
   Farbe; was zwischen dem Ende der Ansicht und dem Fussbereich stand, war
   der Koerpergrund -- ein dunkler Streifen unter einer hellen Seite.

   > **Wer einen Behaelter streckt, streckt nicht, was darin steht.** Die
   > Farbe liegt an der Ansicht, also muss die Ansicht wachsen.

   `main` wird darum selbst ein Flexkasten und gibt die Streckung weiter.
   Nur an die Ansicht: Was sonst noch in `main` steht -- die Sprungmarke, der
   Hinweisbalken -- behaelt seine Hoehe. */
/* ⚠ **Am 12.09.2026 mit `main{flex:1 0 auto}` von weiter oben vereint.**
   Zwei `main{}` im selben Kontext waren ein doppelter Selektor; sie
   ueberschrieben einander nicht, sondern ergaenzten sich -- genau darum
   liessen sie sich zusammenlegen, ohne dass sich etwas aendert. */
main{flex:1 0 auto;display:flex;flex-direction:column}
main > .view{flex:1 0 auto}

/* ── Suchleiste: Abstand statt geteilter Kante ────────────────────────

   **Eine bewusste Abweichung vom Prototyp.** Dort sitzen Feld und Knopf
   aneinander: `.suchzeile input{border-right:0}` und
   `.suchzeile .btn{border-left:2px solid var(--gelb)}` -- der Knopf bringt
   die gemeinsame Kante mit.

   Didi will einen Abstand dazwischen, 12px wie bei `.such-in` im Kopf. **Der
   Grund gehoert hierher, sonst zieht ihn der naechste Abgleich zurueck:** Die
   geteilte Kante ist eine eigene Konstruktion, und sie steht im ganzen Haus
   nur an dieser einen Stelle -- `.suchzeile` gibt es auf `/404/` und in der
   Suche. Ein Bauteil, das es einmal gibt, traegt keine eigene Bauform.

   Das Feld bekommt seinen rechten Rand zurueck, der Knopf traegt seinen
   eigenen 2px-Rahmen ringsum wie jeder andere `.btn`. */
/* ⚠ **Diese drei Regeln sind am 12.09.2026 entfallen** -- sie waren die
   dritte Fassung derselben Aussage und standen als doppelte Selektoren neben
   den Grundregeln bei `.suchzeile`. Dort stehen sie jetzt einmal:

       .suchzeile        `gap:12px` ist in die Grundregel gewandert
       .suchzeile input  `border-right:0` ist dort ersatzlos gefallen
       .suchzeile .btn   `border-left:0` ebenso -- und das war ein Fehler,
                         siehe den Vermerk bei `.suchzeile .btn`

   **Der Grund darueber gilt unveraendert weiter** und bleibt darum stehen. */

/* ── Dokumente ─────────────────────────────────────────────────────────

   **Der einzige neue Baustein**, und darum die einzige Stelle, an der eine
   Bauform hier entsteht statt aus dem Prototyp zu kommen. Sie ist aus dem
   gebaut, was das Haus schon fuehrt: die Zeilenform ist `.jahrzeile` mit
   einem Symbol davor, die Kachelform ist `.g3` mit denselben Zeilen darin.

   **Keine neuen Farben, keine neuen Abstaende, keine neue Schrift** -- alles
   kommt aus den Tokens. Wer die Zeile aendern will, aendert `--linie` und
   `--papier-halb` wie ueberall sonst.

   `download` am Verweis und `↓` als Zeichen: Beides sagt, dass hier etwas
   heruntergeladen wird und nicht eine Seite aufgeht. */
.dokliste{display:grid;gap:2px;margin:18px 0}
.dokraster{display:grid;gap:14px;margin:18px 0;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.dok{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:13px;padding:14px 16px;border:1px solid var(--linie);text-decoration:none;color:inherit}
.papier .dok{border-color:rgba(11,11,10,.14)}
.dok .ic{width:19px;height:19px;color:var(--gelb)}
.dok-tx{display:grid;gap:2px;min-width:0}
.dok-tx b{font-family:var(--b);font-weight:700;font-size:var(--tx);
  overflow-wrap:anywhere}
.dok-tx .dat{font-size:var(--tx-klein);letter-spacing:.04em}
.dok-pf{font-family:var(--b);opacity:.55}
@media(hover:hover){.dok:hover{border-color:var(--gelb)}}
.dokraster .dok{grid-template-columns:auto minmax(0,1fr);align-items:start}
/* **Der Pfeil faellt in der Kachelform weg.** Er stuende dort unter dem Text
   in einer eigenen Zeile und zeigte nach unten ins Nichts. */
.dokraster .dok-pf{display:none}
