/*
 * Zeitstrahl der Vereinsgeschichte (CMS-Seite `vdh/historie`)
 * ==========================================================
 *
 * Loest TimelineJS ab. Bis zum 2.9.2026 stand der Inhalt der Seite DOPPELT da: einmal im
 * 600-px-Widget von TimelineJS, darunter noch einmal als zehn nackte Karten ab y=1163. Das
 * Widget las die `data-start-date`-Kaesten aus dem DOM und versteckte sie nicht. Wer die Seite
 * herunterrollte, las alles zweimal.
 *
 * Was dabei wegfaellt: 282,5 KB in fuenf Anfragen (`timeline.min.js`, `timeline.css`,
 * `font.default.css`, `de.json`, `tl-icons.ttf`), ein eingebettetes Skript von 1.277 Zeilen mit
 * einem `strtotime`-Nachbau, und ein CSP-Fehler in der Konsole - `font.default.css` der
 * Bibliothek zieht per `@import` Schriften von `fonts.googleapis.com`, was die Richtlinie des
 * Portals verbietet. Uebrig bleibt diese Datei mit rund 4 KB.
 *
 * ── Einbindung ────────────────────────────────────────────────────────────────────────────
 * Haengt inhaltsabhaengig an: `pages/modules/cms/config.inc.php` prueft auf `nlf-history` und
 * ruft dann `sfLoadAttachment('history')`. Die Datei kommt ueber `/css.css?css=history`, und
 * `public/.htaccess:28` liefert sie ROH aus - ohne Buendel, ohne `{{CSS_DIRECTORY}}`-Ersetzung.
 * Deshalb steht hier kein einziges `url()`: Ein relativer Pfad wuerde gegen `<portal>/css.css`
 * aufgeloest, nicht gegen `<portal>/css/`.
 *
 * Die Tokens kommen aus `public/css/tokens.css` im Hauptbuendel, das auf derselben Seite laedt.
 * Diese Datei DEFINIERT keine Farbe, sie benutzt nur - damit faellt der Dunkelmodus ab.
 */

.nlf-history {
    /*
     * Zwei Masse, die zusammengehoeren: Die Linie steht in der Mitte der Rinne zwischen
     * Jahresspalte und Karte. Beide als Variable, weil `::before` und `::after` denselben
     * Wert brauchen - zwei getippte Zahlen laufen frueher oder spaeter auseinander.
     */
    --nlf-history-rail: 4.75rem;
    --nlf-history-gap: 1.25rem;
    /*
     * Hoehe, auf der der Punkt sitzt und die Jahreszahl ihre erste Zeile hat: die Mitte der
     * ersten Titelzeile in der Karte. Gerechnet aus deren Innenabstand (1 rem) plus der halben
     * Zeilenhoehe des Titels (1,15 rem x 1,3 / 2 = 0,75 rem).
     */
    --nlf-history-anchor: 1.75rem;

    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
}

.nlf-history__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--nlf-history-rail) 1fr;
    column-gap: var(--nlf-history-gap);
    padding-bottom: 1.75rem;
}

.nlf-history__item:last-child {
    padding-bottom: 0;
}

/*
 * Die Linie. Sie laeuft ueber die volle Hoehe des Eintrags EINSCHLIESSLICH `padding-bottom`,
 * damit sie am naechsten Eintrag ohne Luecke weitergeht. Oben am ersten und unten am letzten
 * Eintrag endet sie am Punkt - ein Strich, der ueber den ersten Punkt hinaus ins Leere zeigt,
 * behauptet eine Fortsetzung, die es nicht gibt.
 */
.nlf-history__item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--nlf-history-rail) + var(--nlf-history-gap) / 2 - 1px);
    width: 2px;
    /*
     * `--line-strong`, nicht `--line`. Mit `--line` (#e6eaee) bringt die Linie auf weissem
     * Grund 1,2:1 - am 2.9.2026 im Bildschirmfoto nachgesehen: Die Punkte standen da, die
     * Linie dazwischen war nicht zu erkennen. `--line-strong` (#8f8f8f) liegt bei 3,2:1 und
     * bleibt trotzdem hinter den Punkten zurueck.
     */
    background: var(--line-strong);
}

.nlf-history__item:first-child::before {
    top: var(--nlf-history-anchor);
}

.nlf-history__item:last-child::before {
    bottom: auto;
    height: var(--nlf-history-anchor);
}

/*
 * Der Punkt. Kein Lichthof aus der Hintergrundfarbe: Welche Farbe hinter der Liste liegt,
 * haengt am Design und am Farbmodus. Der Punkt ist deckend und breiter als die Linie, das
 * genuegt.
 */
.nlf-history__item::after {
    content: '';
    position: absolute;
    top: var(--nlf-history-anchor);
    left: calc(var(--nlf-history-rail) + var(--nlf-history-gap) / 2);
    width: 0.75rem;
    height: 0.75rem;
    margin: -0.375rem 0 0 -0.375rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.nlf-history__year {
    align-self: start;
    margin: 0;
    /* Gleicher Innenabstand wie die Karte, damit beide erste Zeilen auf einer Linie sitzen. */
    padding-top: 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: right;
    color: var(--accent);
    /* Gleiche Ziffernbreite, sonst tanzen die Jahreszahlen in der rechtsbuendigen Spalte. */
    font-variant-numeric: tabular-nums;
}

/*
 * Sechs der zehn Ereignisse tragen kein echtes Datum, nur ein Jahr - die alten
 * `data-start-date="2006-01-01"` waren Fuellwerte fuer TimelineJS. Drei Jahre kommen deshalb
 * doppelt vor (2006 dreimal, 2012 und 2013 je zweimal). Die Wiederholung wird leise gesetzt:
 * Die Spalte liest sich dann als Skala und nicht als Wiederholung. Der Text bleibt im DOM,
 * also liest ihn ein Screenreader weiterhin bei jedem Eintrag mit.
 */
.nlf-history__year--repeat {
    color: var(--text-faint);
    font-weight: 400;
}

.nlf-history__card {
    /*
     * ── `min-width: 0`, sonst rollt die Huelle ins Leere ────────────────────────────────────
     * Die Karte ist ein GRID-Element, und die tragen `min-width: auto` - ihre Mindestbreite ist
     * die ihres Inhalts. Die Siegertabelle mit sieben Spalten kommt auf 428 px Mindestbreite und
     * drueckte damit die Karte auf 467, obwohl der Bildschirm 420 hat. Am 4.9.2026 gemessen:
     * 47 px Ueberlauf der SEITE, und `overflow-x` an der Tabellenhuelle half nicht - was nie
     * schmaler werden darf, muss auch nicht rollen.
     */
    min-width: 0;
    /*
     * `flow-root` statt eines Aufraeum-Pseudoelements: Das Bild schwimmt rechts, und ein
     * eigener Blockformatierungskontext schliesst die Karte darum herum, ohne `clear`.
     */
    display: flow-root;
    padding: 1rem 1.15rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}

.nlf-history__title {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
    line-height: 1.3;
    text-wrap: balance;
}

.nlf-history__text {
    line-height: 1.6;
}

.nlf-history__text > :first-child {
    margin-top: 0;
}

.nlf-history__text > :last-child {
    margin-bottom: 0;
}

/*
 * Tabellen fuellen die Karte. Vorgabe im Browser ist `width: auto` - die Tabelle wird dann so
 * breit wie ihr Inhalt und stand am 2.9.2026 im Meldebild des Betreibers auf 530 von 1.065 px
 * Kartenbreite, mit einer leeren Flaeche rechts daneben. Die Ergebnisspalte gehoert an den
 * rechten Rand, nicht in die Mitte.
 */
.nlf-history__text table {
    width: 100%;
}

/*
 * Die Siegertabelle rollt in ihrer EIGENEN Huelle, nicht die Seite.
 *
 * Mit sieben Spalten (Jahr, vier Plaetze, Ergebnis, Spielstaette) kommt sie auf eine
 * Mindestbreite, die auf dem Telefon nicht hineinpasst. Am 4.9.2026 bei 420 px gemessen: 47 px
 * Ueberlauf, und zwar der ganzen Seite - jeder Text daneben verrutschte mit.
 *
 * Zwei Spalten fallen schmal ohnehin weg (`hide-small`). Die vier Plaetze duerfen es nicht: Sie
 * sind der Grund, aus dem die Tabelle umgebaut wurde.
 */
.nlf-history__scroll {
    overflow-x: auto;
    /*
     * ── `clear`, sonst weicht die Tabelle dem Bild aus ──────────────────────────────────────
     * `overflow-x` macht aus der Huelle einen eigenen Formatierungskontext, und ein solcher
     * ueberlappt keinen Float - er schrumpft daneben. Reicht das Bild bis unter den Tabellenkopf,
     * verliert die Tabelle GENAU die Bildbreite, 240 px.
     *
     * Vom Betreiber am 4.9.2026 erkannt: „Kann es sein das es durch die Text-Float Eigenschaft
     * vom Bild rechts oben kommt?" - ja. Ob es auffaellt, haengt allein daran, wie viele Zeilen
     * der Absatz darueber gerade braucht: bei 1280 px bleiben 72 bis 123 px Luft je Sprache,
     * bei kuerzerem Text keine.
     *
     * `clear: both` setzt die Tabelle unter den Float. Wo ohnehin Luft ist, aendert das nichts.
     */
    clear: both;
}

.nlf-history__media {
    float: right;
    width: min(15rem, 40%);
    height: auto;
    margin: 0.2rem 0 0.85rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
}

/*
 * Schmale Anzeigen: Die Jahresspalte kostet bei 4,75 rem und einer Rinne von 1,25 rem
 * zusammen 6 rem - auf einem Telefon von 20 rem Textbreite ist das ein Drittel. Sie wandert
 * deshalb als Marke ueber die Karte, Linie und Punkt entfallen. Rechtsbuendig ergibt dort
 * keinen Sinn mehr, also linksbuendig und als Pille, damit die Zahl nicht wie ein
 * verrutschter Absatz aussieht.
 */
@media (max-width: 44rem) {
    .nlf-history__item {
        grid-template-columns: 1fr;
        padding-bottom: 1.25rem;
    }

    .nlf-history__item::before,
    .nlf-history__item::after {
        display: none;
    }

    .nlf-history__year {
        justify-self: start;
        margin-bottom: 0.4rem;
        padding: 0.1rem 0.65rem;
        border-radius: var(--radius-pill);
        background: var(--accent-quiet);
        font-size: 0.95rem;
        text-align: left;
    }

    .nlf-history__year--repeat {
        background: var(--surface-sunken);
    }

    .nlf-history__media {
        float: none;
        width: 100%;
        margin: 0 0 0.85rem;
    }
}