/* ============================================================================
 * tc-jahresring — der Jahresring (13.10.2026, #1051)
 * ============================================================================
 *
 * Zum Jahrestag des Beitritts bekommt man beim nächsten Besuch einen ruhigen
 * Moment am Dashboard: eine Karte, kein Fenster. Kein Gold, keine XP — die
 * Karte zählt nur, was das Jahr am Tisch gebracht hat, und lässt den
 * Stadtschreier einen Satz dazu sagen. „Danke" legt sie weg (einmal je Jahr,
 * gemerkt am Server, api/jahresring-lib.php).
 *
 * Baut auf tc-card auf; die Zahlen sind eine tc-statline (statline.css muss
 * auf der Seite liegen). Markup ausschließlich über TC.Jahresring.html()
 * (js/ui/jahresring.js), demonstriert in library-community.html#jahresring.
 *
 *   <section class="tc-card tc-jahresring">
 *     <div class="tc-card__header">
 *       <span class="tc-jahresring__ringe"><svg>…je Jahr ein Ring…</svg></span>
 *       <div class="tc-card__titles"> __title · __subtitle </div>
 *     </div>
 *     <div class="tc-jahresring__inhalt">
 *       <div class="tc-statline tc-statline--compact">…</div>     (nur was > 0 ist)
 *       <p class="tc-jahresring__satz">… <span class="tc-jahresring__wer">Der Stadtschreier</span></p>
 *       <div class="tc-jahresring__aktionen"> tc-button · tc-button--ghost </div>
 *     </div>
 *   </section>
 *
 * BEWEGUNG nur aus dem Baukasten (tokens.css, E3): Die Karte und ihre Ringe
 * tragen `tc-auftritt`, die Ringe mit `--i` von innen nach außen. Bei
 * reduzierter Bewegung steht alles sofort da (Dauern und Versatz 0).
 * ========================================================================== */

.tc-jahresring {
  gap: var(--tc-space-3);
  border-color: var(--tc-highlight);
}

/* Die Karte hat keinen Körper, also auch keinen Trennstrich unter dem Kopf. */
.tc-jahresring > .tc-card__header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
  align-items: center;
}

.tc-jahresring .tc-card__title {
  font-size: var(--tc-text-lg);
}

/* --- Die Ringe --------------------------------------------------------------
   Ein Baumquerschnitt: je Jahr ein Ring, der jüngste außen und in der
   Glanzfarbe. Reines Schmuckbild (aria-hidden), die Zahl steht im Titel. */
.tc-jahresring__ringe {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  line-height: 0;
}

.tc-jahresring__ringe svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tc-jahresring__ring {
  fill: none;
  stroke: var(--tc-border-strong, var(--tc-border-subtle));
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}

.tc-jahresring__ring--neu {
  stroke: var(--tc-highlight);
  stroke-width: 2.5;
}

.tc-jahresring__kern {
  fill: var(--tc-highlight);
}

/* --- Zahlen, Satz, Knöpfe ---------------------------------------------------- */
.tc-jahresring__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-3);
  padding-top: var(--tc-space-3);
  border-top: 1px solid var(--tc-border-subtle);
}

.tc-jahresring__satz {
  margin: 0;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-base);
  font-style: italic;
  line-height: var(--tc-leading-snug);
  color: var(--tc-text-default);
}

.tc-jahresring__wer {
  display: block;
  margin-top: var(--tc-space-1);
  font-size: var(--tc-text-sm);
  font-style: normal;
  color: var(--tc-text-muted);
}

.tc-jahresring__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-2) var(--tc-space-3);
}

/* Der Platz am Dashboard. Der Abstand hängt am Platz, nicht an der Karte: Am
   Handy macht die Spalte der Seite die Abstände (gap) und setzt die Ränder
   ihrer Kinder auf 0 (dashboard-page.css) — ein Rand an der Karte darin käme
   dort obendrauf. Leer nimmt der Platz keinen Raum. */
.tc-jahresring-platz {
  margin-bottom: var(--tc-space-4);
}
.tc-jahresring-platz[hidden] {
  display: none;
}