/* ============================================================================
 * termin.css — Termine: Monatsraster, Terminkarte, Systemmarke, Zusage
 * ----------------------------------------------------------------------------
 * Neu am 04.09.2026 (Taskwerk #556). Ersetzt zwei Eigenbauten und holt eine
 * Bestandskomponente aus dem falschen Stilblatt:
 *
 *   1. `.calendar-*` / `.event-*` in css/dashboard.css — 145 Regeln, nie in
 *      der Library gewesen. Zwei Terminlisten (Dashboard und Kalender-Modal),
 *      die dasselbe zeigen und getrennt gepflegt wurden.
 *   2. `.tc-calendar` aus css/components/pf-encounter.css — richtig benannt,
 *      aber in einer Datei, die GENAU EINE Seite laedt: library-pathfinder.html.
 *      Eine Regel gehoert in dieselbe Reichweite wie ihr Erzeuger (§10).
 *
 * ⚠️ ES GIBT DREI KALENDER IM PROJEKT, UND `tc-calendar` IST DER EINZIGE OHNE
 * NUTZER (am 04.09.2026 nachgemessen):
 *
 *   .pf-cal-grid / .pf-cal-day   css/pathfinder.css     produktiv, pathfinder.html:1005
 *   .calendar-*                  css/dashboard.css      produktiv, 145 Regeln
 *   .tc-calendar                 hier                   NUR Demo-Markup in der Library
 *
 * Das Ticket zu diesem Umbau behauptete, der Golarion-Ingame-Kalender benutze
 * `tc-calendar` produktiv und duerfe nicht brechen. Er tut es nicht — er ist
 * einer der beiden Eigenbauten, die `tc-calendar` einmal abloesen sollte
 * (der Kopfkommentar in pf-encounter.css sagte das ausdruecklich:
 * „tc-calendar <- .pf-cal-grid / .pf-cal-day"). Ausgerollt wurde es nie.
 *
 * Die zehn Bestands-Selektoren sind trotzdem UNVERAENDERT uebernommen — Umzug,
 * kein Neuschnitt: Wenn die zwei Eigenbauten hierher wandern (#557), soll das
 * eine Migration sein und keine Neuverhandlung des Aussehens.
 *
 * ⚠️ SYSTEMFARBEN SIND DATENFARBEN (§9). Sie sagen etwas ueber den Termin aus
 * und kommen deshalb aus `--tc-sys-*` (tokens.css), NICHT aus dem aktiven
 * Theme: Im Kalender stehen sechs Systeme nebeneinander, ein Theme-Akzent
 * faerbte sie alle gleich. Gesetzt wird die Farbe ueber `data-system` — eine
 * Regel je System, keine Inline-Styles und keine zweite Zuordnungsliste.
 *
 * ⚠️ `--tc-accent` FAERBT HIER NIRGENDS TEXT (§9, ausnahmslos).
 *
 * ⚠️ DIE DATEI VERLAESST SICH AUF NICHTS FREMDES. Beim Hobby-Umbau am
 * 03.09.2026 stellte sich heraus, dass tabs.css nur deshalb richtig aussah,
 * weil mordheim-theme.css global `a { text-decoration: none }` setzt — und
 * untergrund.html laedt diese Datei nicht. Alles, was hier ein `<a>` oder
 * `<button>` ist, bringt seine Textdekoration, Schriftfamilie und
 * Trefferflaeche selbst mit.
 * ========================================================================== */

/* === 1 · MONATSRASTER ===================================================== */
/* Unveraendert uebernommen aus pf-encounter.css (Stand 04.09.2026).
   Nur der Kommentar ist neu. */

.tc-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 8px 12px 12px;
}
.tc-calendar__dow {
  text-align: center;
  font-size: 0.7rem; font-weight: 600;
  color: var(--tc-text-muted);
  padding: 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tc-calendar__dow--sunday { color: rgba(251,191,36,0.6); }

.tc-calendar__day {
  position: relative;
  text-align: center;
  padding: 8px 4px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--tc-text-muted);
  cursor: default;
  transition: background 0.15s;
  min-height: 36px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
}
.tc-calendar__day.is-empty { opacity: 0; }
.tc-calendar__day:not(.is-empty):hover { background: rgba(255,255,255,0.04); }
.tc-calendar__day.is-today {
  background: linear-gradient(135deg, rgba(var(--tc-highlight-rgb),0.2), rgba(var(--tc-highlight-rgb),0.08));
  border: 2px solid var(--tc-highlight);
  color: var(--tc-highlight);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(var(--tc-highlight-rgb),0.15);
}
.tc-calendar__day.is-holiday { color: var(--tc-warning); font-weight: 600; }
.tc-calendar__day.is-holiday::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--tc-warning);
  display: block;
}
.tc-calendar__day.is-past { opacity: 0.4; }

/* --- Neu: der Tag traegt Eintraege -------------------------------------- */
/* ⚠️ EIN TAG IST EIN HIT-TARGET. Bei sieben Spalten auf 375px sind das rund
   50px Breite; die Hoehe muss mithalten, sonst tippt man daneben. Der Bestand
   steht auf min-height 36 (Heuristik 5) — mit Eintraegen darunter reicht das
   nicht mehr, deshalb 52 in der Termin-Variante. */
.tc-calendar--termine .tc-calendar__day {
  min-height: 52px;
  justify-content: flex-start;
  padding-top: 6px;
  cursor: pointer;
}
.tc-calendar--termine .tc-calendar__day.is-empty { cursor: default; }

/* --- Der Tag als Knopf (04.09.2026) -------------------------------------
 * ⚠️ `cursor: pointer` STAND HIER SEIT DEM BAU — und beim Klick passierte
 * nichts. Jetzt ist ein Tag mit Terminen ein echtes <button>: Tastatur,
 * Screenreader, Fokusring. Ein <div> mit onclick haette dieselbe Optik
 * gehabt und die Haelfte der Leute ausgeschlossen.
 *
 * ⚠️ EIN BUTTON BRINGT EIGENE VORGABEN MIT. Ohne diesen Block hat er Rand,
 * grauen Grund, eigene Schrift und `text-align: center` von sich aus — und
 * `is-today` legt seinen 2px-Rand OBENDRAUF, was die Zelle groesser macht
 * als ihre Nachbarn. Das Raster verzieht sich dann um genau die Spalte, in
 * der man heute steht. */
/* ⚠️ DER SELEKTOR IST ABSICHTLICH SCHWACH — `button.tc-calendar__day`
   (0,1,1), NICHT mit `.tc-calendar--termine` davor (0,2,1). Mit der
   staerkeren Fassung schlug `background: none` die Flaeche von
   `.is-today` (0,2,0): Sobald heute Termine hat — also ein Knopf ist —
   verlor der heutige Tag seinen Farbverlauf und behielt nur Rahmen und
   Schein. Genau an dem Tag, an dem man hinsieht. Schwach genug, um die
   Browser-Vorgaben zu schlagen, und schwach genug, um jedem Zustand zu
   weichen. */
button.tc-calendar__day {
  border: none;
  background: none;
  font: inherit;
  width: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  /* ⚠️ NICHT `color: inherit`, SONDERN EIN GEWOLLTER WERT. Mit `inherit`
     erbte der Knopf die Containerfarbe (#b0b0b0) statt der Zellenfarbe
     (#9e9e9e) — Tage mit Terminen standen dadurch heller da als leere. Das
     SAH richtig aus und war ein Nebeneffekt: eine Hervorhebung, die niemand
     entschieden hatte und die beim naechsten Token-Tausch verschwunden
     waere. Sie ist jetzt Absicht — ein Tag mit Terminen hat etwas zu
     sagen — und steht als Wert da, nicht als Vererbung. */
  color: var(--tc-text-default);
  font-weight: 600;
}
button.tc-calendar__day:focus-visible {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 2px;
}
/* --- Was sonst noch an einem Tag steht (04.09.2026) ---------------------
 * Drei Sorten, drei Formen — und das ist der Punkt, nicht Dekor:
 *   Punkt  = eine Verabredung (Termin, Veranstaltung)
 *   Strich = wer nicht kann. Keine Verabredung, also kein Punkt.
 *   Hammer = ein Stichtag. Er endet an dem Tag; man trifft sich nicht.
 * Alle drei als Punkte haetten behauptet, an dem Abend sei etwas los. */
/* ⚠️ AUS DEM FLUSS GENOMMEN, wie der Hammer. Im Fluss kosteten die Striche
   3px, und Grid-Zeilen richten sich nach ihrer hoechsten Zelle: Gemessen
   standen daneben Zeilen mit 48, 52 und 55px. Das Raster wirkt dann schief,
   ohne dass man sagen koennte warum — genau die Begruendung, aus der die
   Punktreihe darueber ihre `min-height` traegt. */
.tc-calendar__abwesend {
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  display: flex;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.tc-calendar__abwesend i {
  display: block;
  width: 9px;
  height: 2px;
  border-radius: 1px;
  background: var(--tc-text-muted);
  opacity: 0.65;
}
/* ⚠️ ABSOLUT POSITIONIERT, nicht im Fluss: Im Fluss schiebt der Hammer die
   Tageszahl nach oben, und dann steht die Zahl in Zellen MIT Stichtag
   anders als in denen ohne — das Raster wirkt schief, ohne dass man sagen
   koennte warum. Die Zelle ist `position: relative`. */
.tc-calendar__ziel {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 0.62rem;
  line-height: 1;
  opacity: 0.85;
  pointer-events: none;
}
.tc-calendar__ziel b {
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--tc-highlight);
  margin-left: 1px;
}

/* Der offene Tag traegt seinen Zustand sichtbar — sonst weiss man nach dem
   Scrollen zur Liste darunter nicht mehr, welcher Tag sie erzeugt hat.
 *
 * ⚠️ HEUTE UND GEWAEHLT DUERFEN NICHT DASSELBE MITTEL BENUTZEN. Erster
 * Entwurf gab dem offenen Tag einen 1px-Innenrahmen — daneben stand „heute"
 * mit 2px Rahmen, und im 375px-Screenshot waren beide schlicht „umrandet".
 * Wer den falschen fuer den offenen haelt, wundert sich ueber die Liste
 * darunter. Jetzt: heute = RAHMEN, gewaehlt = FLAECHE. Faellt beides
 * zusammen, sieht man beides. */
.tc-calendar--termine .tc-calendar__day.is-selected {
  background: rgba(var(--tc-highlight-rgb), 0.28);
  color: var(--tc-highlight);
  font-weight: 700;
}

/* Die Marken sitzen unter der Tageszahl. `min-height` haelt die Zeile frei,
   damit Tage mit und ohne Termin dieselbe Hoehe haben — sonst springt das
   Raster zeilenweise. */
/* ⚠️ `nowrap` UND FESTE HOEHE — beides gegen dasselbe. Mit `flex-wrap: wrap`
   rutschte das „+2" unter die Punkte: Die Reihe wurde 21px statt 10, und die
   GANZE Grid-Zeile 58 statt 48 (im Browser gemessen). Ein Raster, dessen
   Zeilen unterschiedlich hoch sind, sobald irgendwo ein Ueberlauf steht,
   wirkt schief — und seit die Community-Termine mitzaehlen, kommt der
   Ueberlauf oefter vor. `min-height` allein reicht dafuer nicht: Sie haelt
   den Platz frei, begrenzt ihn aber nicht. */
.tc-calendar__marken {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  height: 10px;
  margin-top: 2px;
  overflow: hidden;
}
.tc-calendar__marke {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tc-sys, var(--tc-text-muted));
  flex: 0 0 auto;
}
/* ⚠️ HIER STAND FAST `.tc-calendar__marke' + system` OHNE LEERZEICHEN — genau
   der Fehler, der das alte Raster leer aussehen liess (Taskwerk #568). Die
   Farbe kommt deshalb ueber ein Attribut, nicht ueber eine zusammengesetzte
   Klasse: `data-system` kann man nicht versehentlich verketten. */
.tc-calendar__mehr {
  font-size: 0.62rem;
  color: var(--tc-text-muted);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* === 2 · SYSTEMMARKE ====================================================== */
/* Traegt die Systemfarbe an alles darunter weiter. Ein Element mit
   `data-system` setzt `--tc-sys`; Kinder lesen nur noch die Variable.
   Die sechs Zeilen sind die einzige Zuordnung im Stilblatt — die Namen und
   Logos holt der Renderer aus `GameSystems` (SSOT, §11). */
[data-system="mordheim"]   { --tc-sys: var(--tc-sys-mordheim); }
[data-system="aos"]        { --tc-sys: var(--tc-sys-aos); }
[data-system="oldworld"]   { --tc-sys: var(--tc-sys-oldworld); }
[data-system="bloodbowl"]  { --tc-sys: var(--tc-sys-bloodbowl); }
[data-system="pathfinder"] { --tc-sys: var(--tc-sys-pathfinder); }
[data-system="social"],
[data-system="community"]  { --tc-sys: var(--tc-sys-community); }

/* ⚠️ EINE GEMEINSAME BILDHOEHE MACHT DIE LOGOS NICHT GLEICH GROSS
   (04.09.2026, von Tim gemeldet: „Mich stoert, dass das optisch springt.
   Liegt das an der Hoehe des Logos?").

   Ja — aber anders herum als es klingt. Die Hoehe WAR ueberall gleich: Im
   Browser gemessen sassen Logo, Titel und Meta auf allen drei Karten exakt
   auf 0 / 35 / 87 px. Verschieden ist, wie viel HAUPTSCHRIFT in diesen 28 px
   steckt:

     pathfinder   einzeilig            fuellt die Hoehe   wirkt am groessten
     mordheim     einzeilig + Zierrat  ~75 %
     bloodbowl    Titel + Unterzeile   ~65 %
     aos          WARHAMMER + AGE OF SIGMAR  ~50 %   wirkt am kleinsten
     oldworld     WARHAMMER + THE OLD WORLD  ~55 %

   Zweizeilige Wortmarken brauchen also mehr Bildhoehe fuer dieselbe
   Schriftgroesse. Die Faktoren unten sind VISUELL justiert (fuenf Logos
   nebeneinander gerendert und verglichen), nicht gerechnet — es gibt keine
   Metadaten darueber, wo in einem PNG die Hauptzeile sitzt.

   ⚠️ DER CONTAINER BLEIBT FEST. Nur das Bild waechst; die feste Hoehe unten
   haelt die Zeile darunter auf ihrer Linie. Ohne das saesse der Titel bei
   AoS 8 px tiefer als bei Pathfinder — und dann spraenge es erst recht.
   (Hier stand bis zum 04.09.2026 `min-height`, und genau daran hing der
   letzte Ein-Pixel-Versatz — siehe die Begruendung an der Regel selbst.) */
.tc-sysmarke {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  --logo-basis: 28px;
  --logo-faktor: 1;
  /* ⚠️ FESTE HOEHE, NICHT `min-height` — und die Zahl muss GANZZAHLIG sein.
     (04.09.2026, von Tim gemeldet: „Hier ist noch n kleiner Versatz drin.")

     Mit `min-height: 36px` war die Marke beim nächsten Termin 36,109 px
     hoch: Der AoS-Faktor 1,29 mal 28 px ergibt keine ganze Zahl, und die
     0,109 px schoben alles darunter mit — sichtbar als ein Pixel Versatz in
     der Meta-Zeile (74 statt 73). Ein Zehntel Pixel im Stilblatt, ein
     ganzer auf dem Schirm.

     Die feste Höhe macht das unmöglich, egal welcher Faktor dazukommt: Die
     Box ist immer 36, das Bild wird von `max-height` gehalten. Die Faktoren
     bleiben damit frei justierbar, ohne dass jemand nachrechnen muss, ob
     sie glatt aufgehen. */
  --logo-hoehe: 36px;
  height: var(--logo-hoehe);
  /* ⚠️ `min-height` ALLEIN HAELT DIE ZEILE NICHT — die Marke ist inline und
     haengt damit an der BASELINE, und die liegt bei einem inline-flex an der
     Unterkante seines ersten Kindes. Ein 36-px-Logo zieht die Baseline also
     tiefer als ein 24-px-Logo in derselben 36-px-Box, und die Zeilenbox
     waechst nach oben mit.

     Live gemessen (04.09.2026): Der Titel stand bei Pathfinder auf 46 px,
     bei Blood Bowl auf 49 — bei identisch hohen Marken. Mit `top` sitzen
     beide auf 45. Die Karte des naechsten Termins steht danach als einzige
     7 px tiefer, und das ist Absicht: `.next-event` bekommt in
     dashboard-page.css bewusst 15 px Innenabstand statt 8. */
  vertical-align: top;
}
.tc-sysmarke[data-system="aos"]        { --logo-faktor: 1.29; }
.tc-sysmarke[data-system="oldworld"]   { --logo-faktor: 1.25; }
.tc-sysmarke[data-system="bloodbowl"]  { --logo-faktor: 1.11; }
.tc-sysmarke[data-system="mordheim"]   { --logo-faktor: 0.96; }
.tc-sysmarke[data-system="pathfinder"] { --logo-faktor: 0.86; }
/* ⚠️ DIE LOGOS SIND WORTMARKEN, KEINE SIGNETS. Gemessen am 04.09.2026:
   logo_aos.png ist 1523x383, logo_mordheim.png 1052x354. Als Abzeichen NEBEN
   einem Titel waeren sie bei 24px Hoehe rund 95px breit — deshalb stehen sie
   in einer eigenen Zeile ueber dem Titel, nicht in derselben.

   ⚠️ SIE ERSETZEN DAS EMOJI-BADGE, NICHT DEN TITEL. Hier stand bis zum
   04.09.2026 das Gegenteil, und danach war die Karte auch gebaut: Ein Titel,
   der den Systemnamen enthielt ("AOS Runde"), fiel weg. Tim: „Bitte nie den
   Termintitel killen." Ein Titel, den jemand getippt hat, ist nie
   ueberfluessig — auch dann nicht, wenn er dasselbe Wort enthaelt wie das
   Logo darueber. */
/* ⚠️ 28px, UND DIE ZAHL IST GEMESSEN, NICHT GESCHAETZT. Der erste Entwurf
   stand auf 19px — im Browser war „Age of Sigmar" dort unlesbar und der
   Untertitel jeder Wortmarke Matsch. Vier Hoehen nebeneinander gerendert
   (19 / 24 / 28 / 34): ab 28 sind alle vier Hauptschriftzuege klar. Der
   Bestand liegt sogar hoeher — `mm-flyout__logo` 36px, der Theme-Umschalter
   der Library 40px. Ein Logo, das man nicht lesen kann, ist schlechter als
   der Systemname als Text; dann lieber `--text`. */
.tc-sysmarke__logo {
  height: calc(var(--logo-basis) * var(--logo-faktor));
  /* Haelt das Bild in der Box, falls ein Faktor sie sprengen wuerde. */
  max-height: 100%;
  width: auto;
  max-width: 168px;
  display: block;
  object-fit: contain;
  /* Der alt-Text ist der eingebaute Rueckfall: Laedt das Bild nicht, zeigt
     der Browser den Systemnamen — lesbar, weil Farbe und Groesse gesetzt
     sind. Ein Logo ohne alt waere an dieser Stelle eine Luecke. */
  color: var(--tc-text-strong);
  font-size: 0.9rem;
  font-weight: 700;
}
.tc-sysmarke__punkt {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--tc-sys, var(--tc-text-muted));
  flex: 0 0 auto;
}
.tc-sysmarke__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tc-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ⚠️ NICHT JEDER TERMINTYP IST EIN SPIELSYSTEM. Hobbyabend, Discord-Treffen
   und Community-Termine haben kein Logo — sie bekommen Punkt und Namen und
   sollen dabei nicht wie ein Fehler aussehen. */
.tc-sysmarke--text .tc-sysmarke__logo { display: none; }

/* === 3 · TERMINKARTE ====================================================== */
.tc-termin {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 0 16px;
  /* ⚠️ `start`, NICHT `center`. Bei einer Karte mit vielen Teilnehmer-Chips
     oder einem langen getippten Titel waechst die Mittelspalte, und mit
     `center` rutschte das Datum in die vertikale Mitte — im Browser gemessen:
     bei 375px stand „24 SEP" auf halber Hoehe neben drei Chips. Das Datum ist
     die Ankerangabe der Karte und gehoert nach oben, wie in jedem Kalender. */
  align-items: start;
  padding: 13px 16px 13px 13px;
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-subtle);
  border-left: 3px solid var(--tc-sys, var(--tc-border-default));
  border-radius: 4px;
  font-family: var(--tc-font-body, Lato, -apple-system, system-ui, sans-serif);
}
.tc-termin + .tc-termin { margin-top: 10px; }

/* Die Ausrufe unter der Karte (#580, 05.09.2026) — über die volle Breite des
   Dreispalters, damit sie nicht in der Mittelspalte kleben. */
.tc-termin__ausrufe {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--tc-border-subtle);
}
/* Der Griff ist leise: Er soll die Karte nicht überstimmen, aber als
   anklickbar erkennbar sein. Kein Dreieck-Marker — er steht bei
   `list-style: none` in jedem Browser woanders. */
.tc-termin__ausrufe-griff {
  list-style: none;
  cursor: pointer;
  color: var(--tc-text-muted);
  font-size: 0.8rem;
  padding: 2px 0;
  transition: color var(--tc-motion-fast, 120ms) ease;
}
.tc-termin__ausrufe-griff::-webkit-details-marker { display: none; }
.tc-termin__ausrufe-griff:hover,
.tc-termin__ausrufe-griff:focus-visible { color: var(--tc-text-default); }
.tc-termin__ausrufe[open] .tc-termin__ausrufe-griff {
  margin-bottom: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .tc-termin__ausrufe-griff { transition-duration: 0.01ms; }
}

/* Ein Termin, bei dem etwas fehlt, wird hervorgehoben — nicht der naechste.
   „Wo werde ich gebraucht" ist die Frage, mit der man die Liste aufmacht. */
.tc-termin--offen {
  background: var(--tc-bg-surface-2);
  border-color: rgba(var(--tc-highlight-rgb), 0.32);
  border-left-color: var(--tc-sys, var(--tc-border-default));
}
/* Weit weg: sichtbar, aber leiser. Nicht ausblenden — ein Termin, den es
   gibt und der nirgends auftaucht, ist genau das Problem. */
.tc-termin--fern { opacity: 0.62; }
/* ⚠️ ABGESAGT: LOGO GEDIMMT, TITEL DURCHGESTRICHEN — BEIDES.
   Tim am 04.09.2026 zuerst: „Logo dimmen und den Titel weglassen" (gegen die
   Doppelung), zwei Stunden spaeter genereller: „Bitte nie den Termintitel
   killen." Die zweite Ansage ist die weitere und gewinnt — sie loest die
   Doppelung an der Wurzel, denn seitdem steht der Titel ueberall, nicht nur
   hier. Gedimmtes Logo und durchgestrichener Titel sagen dasselbe zweimal,
   und genau das ist bei einer Absage richtig. */
.tc-termin--abgesagt {
  opacity: 0.55;
  border-left-color: var(--tc-danger);
}
.tc-termin--abgesagt .tc-sysmarke__logo { filter: grayscale(0.8); opacity: 0.6; }
.tc-termin--abgesagt .tc-termin__titel { text-decoration: line-through; }

.tc-termin__tag { text-align: center; }
.tc-termin__d {
  font-family: var(--tc-font-display, Cinzel, Georgia, serif);
  font-size: 1.55rem; font-weight: 700; line-height: 1;
  color: var(--tc-text-strong);
  font-variant-numeric: tabular-nums;
}
.tc-termin__m {
  font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--tc-text-muted);
}
.tc-termin__w { font-size: 0.68rem; color: var(--tc-text-muted); margin-top: 2px; }

.tc-termin__mitte { min-width: 0; }
.tc-termin__titel {
  font-family: var(--tc-font-display, Cinzel, Georgia, serif);
  font-size: 0.98rem; font-weight: 600;
  color: var(--tc-text-strong);
  margin-bottom: 4px;
  /* ⚠️ Der Titel MUSS umbrechen duerfen. In den Echtdaten sind alle Titel
     kurz (laengster 18 Zeichen), aber ein getippter Community-Termin kann
     jede Laenge haben — und geclippter Text ist ein Fehler, keine Loesung. */
  overflow-wrap: anywhere;
}
.tc-termin__meta { font-size: 0.8rem; color: var(--tc-text-muted); }

.tc-termin__wer { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.tc-termin-chip {
  font-size: 0.74rem;
  padding: 2px 8px;
  border-radius: 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--tc-border-subtle);
  color: var(--tc-text-default);
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-termin-chip--spielt { border-color: rgba(127,154,94,0.5); color: #a8c184; }
.tc-termin-chip--chillt { color: var(--tc-text-muted); }
.tc-termin-chip--leer   { border-style: dashed; color: var(--tc-text-muted); }

.tc-termin__rechts {
  text-align: right;
  display: grid; gap: 7px; justify-items: end; align-content: start;
}
/* Was fehlt, steht als SATZ da, nicht als Zahl — „Noswad wartet auf einen
   Gegner" statt „2 Teilnehmer". Eine Zahl muss man deuten. */
.tc-termin__stand { font-size: 0.8rem; }
.tc-termin__stand--gut   { color: #a8c184; }
.tc-termin__stand--offen { color: var(--tc-highlight); }
.tc-termin__stand--matt  { color: var(--tc-text-muted); }

/* --- Kompakte Zeile: Hub, Buehne, Tagesdetail --------------------------- */
.tc-termin--zeile {
  grid-template-columns: 46px 1fr auto;
  padding: 9px 12px 9px 10px;
  gap: 0 12px;
}
.tc-termin--zeile .tc-termin__d { font-size: 1.15rem; }
/* In der Zeile geht es um Wiedererkennung, nicht ums Lesen — der Termin steht
   ohnehin in einem Zusammenhang, der das System schon nennt. */
.tc-termin--zeile .tc-sysmarke { --logo-basis: 21px; --logo-hoehe: 27px; }
.tc-termin--zeile .tc-sysmarke__logo { max-width: 132px; }
.tc-termin--zeile .tc-termin__wer,
.tc-termin--zeile .tc-termin__w { display: none; }
/* ⚠️ EINE ZEILE HEISST EINE ZEILE. Ohne diesen Block stapeln Wortmarke,
   Titel und Meta wie in der grossen Karte untereinander — im Terminraum
   gemessen: 128px hoch statt der 46, fuer die die Variante gebaut ist. Der
   Titel bleibt dabei (Tim, 04.09.2026: „Bitte nie den Termintitel killen"),
   er ruecht nur neben die Marke statt darunter.
   `center` statt `baseline`: Die Wortmarke ist ein Bild, und ein Bild hat
   keine Grundlinie, an der sich Text ausrichten liesse. */
.tc-termin--zeile .tc-termin__mitte {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 10px;
}
.tc-termin--zeile .tc-termin__titel { margin-bottom: 0; font-size: 0.9rem; }
/* ⚠️ IN DER ZEILE IST DIE ZUSAGE KEINE AUFFORDERUNG. Zehn Vollton-Knoepfe
   untereinander sind eine Wand aus Akzentfarbe — und sie stehen an Abenden,
   die zwei Monate hin sind. Sie bleiben anklickbar und behalten ihre
   Trefferflaeche, sehen aber aus wie das, was sie sind: ein Angebot, keine
   Handlungsaufforderung. Die volle Farbe gehoert den Karten oben. */
.tc-termin--zeile .tc-zusage__haupt {
  background: transparent;
  color: var(--tc-text-default);
  border-color: var(--tc-border-default);
  font-weight: 400;
}
.tc-termin--zeile .tc-zusage__haupt:hover {
  background: transparent;
  border-color: var(--tc-highlight);
  color: var(--tc-highlight);
}
/* Auch rechts eine Zeile: Stand und Handlung nebeneinander statt
   uebereinander — sonst diktiert die rechte Spalte mit 66px die Hoehe, und
   die „Zeile" waere hoeher als die Wortmarke links davon. */
.tc-termin--zeile .tc-termin__rechts {
  grid-auto-flow: column;
  align-items: center;
  align-content: center;
  gap: 0 10px;
}

/* === 4 · ZUSAGE =========================================================== */
/* In den Echtdaten stehen 16 von 19 Zusagen auf „will spielen" (04.09.2026).
   Der Normalfall bekommt deshalb einen Klick, die Abstufungen einen zweiten.

   ⚠️ EIN EMOJI IM KNOPFTEXT BRAUCHT DEN VARIATION SELECTOR. `&#9876;` allein
   (U+2694) rendert MONOCHROM und schmal — im Browser stand dort „× Ich will
   spielen", und ein × neben „Ich will spielen" liest sich wie das Gegenteil.
   Richtig ist `&#9876;&#65039;` bzw. '\u2694\uFE0F'; so schreibt es auch
   js/game-systems.js. Im Quelltext sehen beide Fassungen gleich aus. */
.tc-zusage { display: inline-flex; gap: 6px; align-items: center; }
.tc-zusage__haupt,
.tc-zusage__vorbehalt,
.tc-zusage__mehr {
  font: inherit;
  font-family: var(--tc-font-body, Lato, -apple-system, system-ui, sans-serif);
  font-size: 0.82rem;
  min-height: 36px;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;          /* verlaesst sich nicht auf mordheim-theme.css */
  transition: background var(--tc-motion-normal, 200ms) ease,
              border-color var(--tc-motion-normal, 200ms) ease;
}
.tc-zusage__haupt {
  font-weight: 700;
  background: var(--tc-accent);
  color: var(--tc-text-on-accent);
  border: 1px solid var(--tc-accent);
}
.tc-zusage__haupt:hover { background: var(--tc-accent-light, var(--tc-accent)); }
.tc-zusage__mehr {
  font-weight: 400;
  background: transparent;
  color: var(--tc-text-muted);
  border: 1px solid var(--tc-border-default);
  min-width: 36px;
  padding: 8px 11px;
}
.tc-zusage__mehr:hover { border-color: var(--tc-border-strong); color: var(--tc-text-default); }

/* DER VORBEHALT (06.09.2026): „Ich will, weiss aber noch nicht, ob ich es
   schaffe." Er steht VOR dem Haupt-Knopf, weil er die zaghaftere Antwort auf
   dieselbe Frage ist — und traegt bewusst nur das Zeichen: Die Zeile hat
   schon zwei Elemente, ein drittes mit Wort bricht bei 375px um. Wo er
   erscheint, entscheidet TerminRegeln.unsicherErlaubt() — nicht dieses
   Stilblatt. */
.tc-zusage__vorbehalt {
  font-weight: 400;
  background: transparent;
  color: var(--tc-text-default);
  border: 1px dashed var(--tc-border-default);
  min-width: 36px;
  padding: 8px 11px;
}
.tc-zusage__vorbehalt:hover {
  border-color: var(--tc-accent);
  border-style: solid;
}
.tc-zusage__vorbehalt:focus-visible {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 2px;
}

/* Bereits zugesagt: kein Knopf mehr, eine Feststellung. Sie bleibt
   anklickbar (zum Widerrufen), sieht aber nicht mehr nach Aufforderung aus. */
.tc-zusage--dabei .tc-zusage__haupt {
  background: transparent;
  color: #a8c184;
  border-color: rgba(127,154,94,0.45);
  font-weight: 400;
}
.tc-zusage__haupt:focus-visible,
.tc-zusage__mehr:focus-visible {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 2px;
}
@media (hover: none) and (pointer: coarse) {
  /* ⚠️ BEIM QUADRATISCHEN KNOPF MUSS DIE BREITE MIT (§10, 06.09.2026):
     `min-height` allein macht aus dem Quadrat ein Rechteck. */
  .tc-zusage__haupt, .tc-zusage__vorbehalt, .tc-zusage__mehr { min-height: 44px; }
  .tc-zusage__vorbehalt, .tc-zusage__mehr { min-width: 44px; }
}

/* === 5 · DER RUF ========================================================== */
/* Die Zeile ueber der Liste: wo wirst DU gebraucht. Tim am 04.09.2026:
   „Die Jungs melden sich nicht im Voraus an, weil die Termine zu schwer zu
   finden sind." Gemessen: 17 von 22 kommenden Terminen ohne eine Zusage. */
.tc-termin-ruf {
  display: flex;
  gap: 11px;
  align-items: baseline;
  padding: 13px 16px;
  border-radius: 4px;
  background: rgba(var(--tc-highlight-rgb), 0.07);
  border: 1px solid rgba(var(--tc-highlight-rgb), 0.28);
  color: var(--tc-text-strong);
  font-size: 0.98rem;
}
.tc-termin-ruf__zeichen { color: var(--tc-highlight); flex: 0 0 auto; }
.tc-termin-ruf strong { color: var(--tc-highlight); }

/* === 6 · SPAETER ========================================================== */
/* Die stillen Termine als eine Zeile statt als Karten. Von 22 kommenden
   haben 17 keine Zusage — als Karten waere die Liste zu vier Fuenfteln
   Tapete, und die fuenf, um die es geht, gingen darin unter. */
.tc-termin-spaeter {
  margin-top: 10px;
  padding: 12px 16px;
  border: 1px dashed var(--tc-border-default);
  border-radius: 4px;
  font-size: 0.87rem;
  color: var(--tc-text-muted);
  display: flex; justify-content: space-between;
  gap: 14px; align-items: center; flex-wrap: wrap;
}
.tc-termin-spaeter strong { color: var(--tc-text-strong); }

/* === 7 · MOBIL ============================================================ */
/* ⚠️ Mobil-first gedacht, hier nur die Umbrueche. Und: Der Breakpoint misst
   die FENSTERbreite — im Untergrund steht die Karte in einem Raum-Container
   und ist dort schmaler als das Fenster. Beim Pruefen im Container messen. */
@media (max-width: 620px) {
  .tc-termin { grid-template-columns: 50px 1fr; gap: 0 12px; padding: 12px; }
  .tc-termin__d { font-size: 1.3rem; }
  /* Stand und Knopf rutschen unter die Karte, statt sich daneben zu
     quetschen — die Trefferflaechen bleiben dabei voll erhalten. */
  .tc-termin__rechts {
    grid-column: 1 / -1;
    justify-items: stretch;
    text-align: left;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--tc-border-subtle);
    display: flex; justify-content: space-between;
    align-items: center; gap: 10px; flex-wrap: wrap;
  }
  /* ⚠️ AM TELEFON IST DIE ZEILE KEINE ZEILE MEHR — und der Versuch, sie eine
     bleiben zu lassen, war der Fehler. Bis zum 05.09.2026 stand hier
     `44px 1fr auto` mit einer rechten Spalte, die NICHT unter die Zeile
     rutscht. Das ging, solange dort nur ein Stand-Text stand (so zeigt es die
     Library). Seit im Terminraum ein Zusage-Knopf danebensteht, quetschen
     sich Stand und Knopf in eine Spalte von wenigen Pixeln: im Raum-Container
     bei 375px gemessen 323px hohe „Zeilen", eine sogar 577px.
     Jetzt gilt dieselbe Regel wie fuer die grosse Karte — rechts wandert
     unter den Inhalt. Die Zeile bleibt trotzdem die kompakte Form: keine
     Teilnehmer-Chips, keine Marken, Titel und Zeit auf einer Linie. */
  .tc-termin--zeile { grid-template-columns: 44px 1fr; }
  .tc-termin--zeile .tc-termin__rechts { margin-top: 8px; padding-top: 8px; }
  .tc-calendar { padding: 6px 4px 8px; gap: 1px; }
  .tc-calendar--termine .tc-calendar__day { min-height: 48px; font-size: 0.8rem; }
  .tc-sysmarke { --logo-basis: 24px; --logo-hoehe: 31px; }
  .tc-sysmarke__logo { max-width: 138px; }
}

/* === 8 · REDUCED MOTION =================================================== */
/* ⚠️ NICHT `animation: none` — dabei faellt der Endzustand mit weg (§9).
   Hier sind es nur Transitions; die duerfen kollabieren. */
@media (prefers-reduced-motion: reduce) {
  .tc-calendar__day,
  .tc-zusage__haupt,
  .tc-zusage__vorbehalt,
  .tc-zusage__mehr { transition-duration: 0.01ms; }
}

/* === 9 · ES WIRD KUSCHELIG (04.09.2026, Taskwerk #572) ==================== */
/* Tim: „6 Münder sind laut, 6 Kerle produzieren ausreichend Wärme. Ab da
   wirds kritisch."

   ⚠️ WARNFARBE, NICHT GEFAHRENFARBE. Es ist kein Fehler und keine Sperre —
   der Abend findet statt, er wird nur eng. `--tc-danger` wäre eine Absage,
   und die ist es ausdrücklich nicht (dieselbe Haltung wie beim Hobbyabend:
   einblenden, nicht abweisen). */
.evt-kuschel {
  color: var(--tc-warning);
  border-color: rgba(251, 191, 36, 0.4);
  font-size: 0.74rem;
  white-space: nowrap;
}

/* === 10 · PAARUNGEN (04.09.2026, Taskwerk #558) ========================== */
/*
 * Tim: „Bei den Blood Bowl Terminen fehlt die Paarungsmechanik. Es sollte
 * aber 3 Matches, alle ab 19:30 gleichzeitig geben."
 *
 * ⚠️ WARUM EINE KOMPONENTE UND NICHT DER BESTAND: Die Begegnung wurde bis
 * heute an drei Orten verschieden gezeichnet — `.match-item` (Mordheim, mit
 * Zeitfenster), `.bb-match-preview` (Blood Bowl, sechs Inline-Styles im
 * JavaScript) und `.aos-vs-row`. Sie sagen alle dasselbe: A spielt gegen B.
 *
 * ⚠️ DER ZUSTAND IST TEIL DER AUSSAGE, nicht Dekor. „steht" und „angefragt"
 * sehen verschieden aus, weil sie verschieden verbindlich sind — eine
 * gestrichelte Linie sagt „noch nicht zugesagt", ohne dass es jemand
 * dazuschreiben muss. Bei drei parallelen Tischen ist das der Unterschied
 * zwischen „mein Abend ist verplant" und „ich warte noch".
 */
.tc-paarung {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 9px;
  padding: 7px 10px;
  border: 1px solid var(--tc-border-subtle);
  border-radius: var(--tc-radius-md);
  background: var(--tc-bg-surface-2);
  min-width: 0;
}
.tc-paarung + .tc-paarung { margin-top: 6px; }

/* Angefragt: noch nicht verbindlich — und das steht in der Linie, nicht
   nur im Text daneben.

   ⚠️ `--tc-border-subtle` REICHT DAFUER NICHT. Erster Entwurf erbte den Rand
   der Grundform (rgba(255,255,255,0.06)) und setzte nur `dashed` — auf
   transparentem Grund gemessen war davon nichts zu sehen. Der Zustand, den
   der Kommentar oben „Teil der Aussage" nennt, war unsichtbar; im Quelltext
   sah die Regel richtig aus. Gefunden nur, weil die Demo im Browser stand. */
.tc-paarung--offen {
  border-style: dashed;
  border-color: var(--tc-border-strong);
  background: transparent;
}

/* Wer noch keinen Gegner hat. Kein Fehlerzustand: An einem Abend mit drei
   Tischen ist „sucht noch" der normale Anfang. */
.tc-paarung--sucht {
  border-style: dashed;
  border-color: rgba(var(--tc-highlight-rgb), 0.35);
  background: transparent;
}

/* Die Fehde (#571, 05.09.2026): Diese Paarung hat den Tisch nicht gefunden,
   sie hat ihn genommen. Dieselbe Farbe wie die Marke `tc-termin-marke--fehde`
   — ein Zustand, ein Ton. Datenfarbe nach §9 (sie bedeutet etwas), deshalb
   Danger und nicht der Akzent. */
.tc-paarung--fehde {
  border-color: var(--tc-danger-border);
  background: color-mix(in srgb, var(--tc-danger) 8%, var(--tc-bg-surface-2));
}
.tc-paarung--fehde .tc-paarung__vs { color: var(--tc-danger); }

.tc-paarung__wer {
  font-weight: 600;
  color: var(--tc-text-strong);
  min-width: 0;
  overflow-wrap: anywhere;
}
.tc-paarung__vs {
  font-family: var(--tc-font-display, Cinzel, serif);
  font-size: 0.78rem;
  color: var(--tc-highlight);
  letter-spacing: 0.06em;
  flex: none;
}
/* Die Zeit rutscht ans Ende der Zeile — bei 375px bricht sie darunter,
   statt die Namen zu quetschen. */
.tc-paarung__zeit {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.tc-paarung__hinweis {
  width: 100%;
  font-size: 0.74rem;
  color: var(--tc-text-muted);
  font-style: italic;
}

/* Die Zeile mit den Knöpfen. ⚠️ Sie steht UNTER der Paarung und nicht
   daneben: Bei 375px bliebe neben zwei Namen kein Platz für ein
   36px-Ziel, und ein kleinerer Knopf wäre der Verstoß gegen Heuristik 5,
   den dieselbe Sitzung an 27 anderen Stellen abgeräumt hat. */
.tc-paarung__tat {
  width: 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* Der Kopf über einer Paarungsliste: „2 von 3 Tischen belegt" */
.tc-paarung-stand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--tc-text-muted);
  margin-bottom: 7px;
}
.tc-paarung-stand__zahl { color: var(--tc-highlight); font-weight: 600; }

@media (max-width: 620px) {
  .tc-paarung { padding: 8px 9px; }
  /* Bei 375 px passen „Blood Bowl · 17. September" und „2 von 3 Tischen
     belegt" nicht nebeneinander — `space-between` brach sie in zwei
     ungleiche Spalten. Untereinander liest es sich als das, was es ist:
     zwei Angaben, nicht eine Tabelle. */
  .tc-paarung-stand {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  /* ⚠️ `margin-left: auto` schiebt die Zeit bei schmalen Karten in eine
     eigene Zeile — das ist gewollt, aber dann darf sie nicht rechts
     kleben, sonst sieht es nach einem Fehler aus. */
  .tc-paarung__zeit { margin-left: 0; }
}

/* === 11 · MARKEN UND SYSTEMBILD (04.09.2026, #558-Nachtrag) ============== */
/*
 * Tim: „Kannst du das mit dem Nächster und dem Versatz nicht anders lösen?
 * Da könnte ja dann auch ‚Voll', ‚Listen offen', ‚Fehde' oder so
 * dranstehen." Und: „Die sind okay, aber wirken gestalterisch etwas
 * altbacken im Vergleich zum Schattenmarkt."
 *
 * ⚠️ DER VERSATZ KAM AUS DER HERVORHEBUNG SELBST. `.next-event` bekam in
 * dashboard-page.css 15 px Innenabstand statt 8 — der nächste Termin stand
 * damit sieben Pixel tiefer als seine Nachbarn. Eine Hervorhebung, die das
 * Layout verschiebt, ist keine Hervorhebung, sondern ein Sprung. Jetzt
 * tragen Rand und Schein die Betonung, und die Marke sagt es in Worten.
 *
 * ⚠️ DIE MARKEN STEHEN IM FLUSS, NICHT ABSOLUT. Erster Entwurf hatte sie
 * oben rechts über der Karte — dort verdeckten sie die Tage-Zahl, und aus
 * „6 TAGE" wurde „TAGE". Im Quelltext sah es richtig aus; sichtbar wurde
 * es erst im Bild.
 */
.tc-termin-marken {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 var(--tc-space-4, 15px) var(--tc-space-2, 8px);
  position: relative;
  z-index: 2;
}
.tc-termin-marke {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--tc-radius-full, 9999px);
  border: 1px solid var(--tc-border-default);
  background: var(--tc-bg-surface-2);
  color: var(--tc-text-muted);
  white-space: nowrap;
}
/* Nur EINE Marke trägt Farbe: die, die gerade zählt. Zwei goldene
   nebeneinander heben sich gegenseitig auf. */
.tc-termin-marke--jetzt {
  /* ⚠️ `--tc-text-on-accent` MEINT DIE ACCENT-FLAECHE, NICHT DIESE. Es steht
     in fuenf Themes auf `#ffffff`; auf dem goldenen Grund hier ergab das
     einen Kontrast von 1,64 — die Marke „Naechster" war praktisch unlesbar,
     und genau das hat Tim am 05.09.2026 im Screenshot gezeigt.

     CLAUDE.md §7k warnt woertlich vor diesem Tausch („taugt NICHT fuer Text
     auf --tc-highlight") und notiert, ein Token dafuer gebe es nicht. Es gibt
     es inzwischen: `--tc-text-on-highlight` (tokens.css:493), benutzt von
     battle-styles.css und dice.css. Diese Stelle war die einzige, die noch
     das falsche nahm. */
  color: var(--tc-text-on-highlight, #1a1a1a);
  background: var(--tc-highlight);
  border-color: var(--tc-highlight);
}
.tc-termin-marke--warnung {
  color: var(--tc-warning);
  border-color: rgba(251, 191, 36, 0.42);
  background: transparent;
}
.tc-termin-marke--fehde {
  color: var(--tc-danger);
  /* ⚠️ `--tc-danger-rgb` GIBT ES NICHT — im ersten Entwurf stand es hier,
     und ein erfundener Tokenname wird nicht rot, er faellt still aus (§9).
     `--tc-danger-border` ist genau dafuer da. */
  border-color: var(--tc-danger-border);
  background: transparent;
}
.tc-termin-marke--aus {
  text-decoration: line-through;
  background: transparent;
}

/*
 * DAS SYSTEMBILD — was der Schattenmarkt hat und die Terminkarte nicht.
 *
 * ⚠️ ES IST EIN ANFLUG, KEIN HINTERGRUND. 30 % Deckkraft und eine
 * Verlaufsmaske, die nach unten wegblendet: Der Kopf bekommt Tiefe, der
 * Text darunter behält seinen Kontrast (Heuristik 8 — Lesbarkeit gewinnt).
 * Eine kräftigere Fassung sah beim Ansehen besser aus und machte die
 * Meta-Zeile schlechter lesbar.
 *
 * ⚠️ EIGENE, VERKLEINERTE DATEIEN. Die Vorlagen aus dem Mega-Menü sind
 * 1800 px breit und zusammen 1,4 MB; der Kartenkopf ist keine 420 px breit.
 * Die sechs Dateien unter assets/img/termin/ sind 560 px breit und
 * zusammen 88 KB — alle sechs kleiner als eine einzige Vorlage.
 * (Kein Sternchen-Glob mit Schraegstrich davor im Kommentar — das
 *  meldet die Balance-Pruefung als Unwucht, CLAUDE.md §10. Genau das
 *  ist mir beim Schreiben DIESES Hinweises passiert.)
 */
.tc-termin-bild { position: relative; overflow: hidden; }
.tc-termin-bild::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 132px;
  background-image: var(--tc-termin-bild);
  background-size: cover;
  background-position: center 38%;
  /* ⚠️ 45 %, UND DIE ZAHL IST GEMESSEN, NICHT GEWAEHLT. Bei 30 % war das
     Bild kaum zu sehen — der Anlass für den ganzen Block war ja, dass die
     Karte „altbacken" wirkt. Nach oben begrenzt es die Meta-Zeile: Sie
     liegt bei y≈98 und damit INNERHALB der 132 px, und sie ist mit
     rgb(176,176,176) der schwaechste Text der Karte. Die Maske ist dort
     schon bei etwa einem Drittel, effektiv bleiben ~16 % Bild darunter.
     30 · 45 · 60 ist eine Zahl an einer Stelle — wer sie aendert, misst
     die Meta-Zeile erneut. */
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.65) 52%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.65) 52%, transparent 100%);
}
.tc-termin-bild > * { position: relative; z-index: 1; }

/* Die Zuordnung steht EINMAL hier — wie die sechs Systemfarben oben. */
.tc-termin-bild[data-system="mordheim"]   { --tc-termin-bild: url('../../assets/img/termin/mordheim.webp'); }
.tc-termin-bild[data-system="aos"]        { --tc-termin-bild: url('../../assets/img/termin/aos.webp'); }
.tc-termin-bild[data-system="bloodbowl"]  { --tc-termin-bild: url('../../assets/img/termin/bb.webp'); }
.tc-termin-bild[data-system="oldworld"]   { --tc-termin-bild: url('../../assets/img/termin/tow.webp'); }
.tc-termin-bild[data-system="pathfinder"] { --tc-termin-bild: url('../../assets/img/termin/pf.webp'); }
.tc-termin-bild[data-system="hobby"],
.tc-termin-bild[data-system="social"],
.tc-termin-bild[data-system="discord"],
.tc-termin-bild[data-system="special"]    { --tc-termin-bild: url('../../assets/img/termin/hobby.webp'); }

/* Ein abgesagter Termin trägt sein Bild grau — dieselbe Regel wie beim
   Logo darüber. */
.tc-termin--abgesagt.tc-termin-bild::after,
.is-cancelled .tc-termin-bild::after { filter: grayscale(0.9); opacity: 0.16; }

/* Der naechste Termin traegt sein Bild einen Hauch kraeftiger — die
   Betonung, die frueher aus dem Innenabstand kam und dabei alles
   verschoben hat. */
.event-card.next-event.tc-termin-bild::after { opacity: 0.56; }

@media (max-width: 620px) {
  .tc-termin-marken { padding-left: var(--tc-space-3, 12px); padding-right: var(--tc-space-3, 12px); }
  .tc-termin-bild::after { height: 108px; }
}

/* === 12 · DIE SAISON IN ZAHLEN (04.09.2026, Taskwerk #574) =============== */
/*
 * Tim: „Cool fänd ich hier Statistiken — wer war am häufigsten da in einer
 * Saison etc. Denk dir mal was aus und füll das Ding mit Leben. Es soll
 * Bock machen, was auszumachen."
 *
 * ⚠️ EINE ZEILE, KEIN DASHBOARD. Die Versuchung bei „Statistiken" ist ein
 * Kachelraster mit sechs Zahlen — im Kalender wäre das eine zweite Seite
 * vor der eigentlichen. Es sind drei Angaben, und sie stehen nebeneinander:
 * wie viele Abende, wer am häufigsten kam, was am meisten lief.
 *
 * ⚠️ DIE RANGLISTE IST KEIN WETTBEWERB. Drei Namen mit ihrer Zahl, ohne
 * Podest und ohne Platzziffer — wer viermal da war, steht neben dem, der
 * dreimal da war. Ein „1." davor machte aus einer Runde Freunde eine
 * Tabelle.
 */
.tc-saison {
  border: 1px solid var(--tc-border-subtle);
  border-radius: var(--tc-radius-md);
  background: var(--tc-bg-surface-1);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.tc-saison__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--tc-text-default);
}
.tc-saison__kopf strong { color: var(--tc-highlight); }
.tc-saison__rest {
  font-size: 0.76rem;
  color: var(--tc-text-muted);
  white-space: nowrap;
}
.tc-saison__zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 7px;
  font-size: 0.78rem;
  color: var(--tc-text-muted);
}
.tc-saison__zahlen b { color: var(--tc-text-strong); font-weight: 600; }
/* Die Treuesten bekommen die Highlight-Farbe — sie sind die eine Angabe,
   die von Menschen handelt und nicht von Terminen. */
.tc-zahl--treu b { color: var(--tc-highlight); }

@media (max-width: 480px) {
  /* Untereinander statt nebeneinander: „🏅 Timmay 6× · Noswad 5×" bricht
     bei 375 px sonst mitten im Namen um. */
  .tc-saison__zahlen { flex-direction: column; gap: 4px; }
  .tc-saison__kopf { flex-wrap: wrap; }
}