/* ============================================================================
 * COMPONENT · tc-rundenziel — was die Runde in einer Saison schafft (#1010)
 * ----------------------------------------------------------------------------
 * Tim, 09.10.2026: Statt darauf zu setzen, dass ein Abend nicht platzt, sieht
 * die Runde gemeinsame Ziele für die Saison. Jede Partie, jeder Termin, jedes
 * fertige Projekt schiebt einen Balken; wer beiträgt, wird bezahlt, wenn er
 * voll ist.
 *
 * EINE ZEILE JE ZIEL. Der Balken ist tc-xp-bar (--rundenziel, mit __anteil
 * für den eigenen Beitrag). Drumherum: Zeichen und Titel links, die Zahl
 * rechts, darunter ein Fuß in einem Satz. Geschafft: Füllung und Zahl in
 * --tc-success (Datenfarbe „bestanden", §9), Haken vor dem Titel.
 *
 *   <div class="tc-rundenziel (is-geschafft)">
 *     <div class="tc-xp-bar tc-xp-bar--rundenziel">
 *       <div class="tc-xp-bar__kopf">
 *         <span class="tc-rundenziel__titel"><span class="tc-rundenziel__zeichen" aria-hidden="true">⚔️</span>Mordheim-Partien</span>
 *         <span class="tc-rundenziel__zahl"><b>4</b> von 7</span>
 *       </div>
 *       <div class="tc-xp-bar__bahn" role="progressbar" aria-valuenow="4" aria-valuemax="7" aria-label="…">
 *         <div class="tc-xp-bar__fuellung" style="width:57%"></div>
 *         <div class="tc-xp-bar__anteil" style="width:28%"></div>
 *       </div>
 *     </div>
 *     <p class="tc-rundenziel__fuss"><b>2 davon von dir</b> · noch 3 bis 30.11.</p>
 *   </div>
 *
 * VERWEIS (Hub, unter „Nächster Termin"): dieselbe Zeile in einer
 * anklickbaren Karte, die ins Fenster hinter dem Saisonband führt.
 *   <a class="tc-card tc-card--kompakt tc-rundenziel-verweis" href="dashboard.html?rundenziele">
 *     <span class="tc-rundenziel-verweis__marke">🏁 Rundenziel · Herbst</span>
 *     <div class="tc-rundenziel">…</div>
 *   </a>
 *
 * HINWEIS AM ORT DER HANDLUNG (#1068): ein Satz nach bestätigtem Speichern,
 * als Knopf, der das Fenster der Rundenziele über dem laufenden öffnet.
 *   <button type="button" class="tc-rundenhinweis tc-auftritt (is-voll)" onclick="TC.Rundenziele.oeffnen()">
 *     <span class="tc-rundenhinweis__zeichen" aria-hidden="true">🏁</span>
 *     <span class="tc-rundenhinweis__text"><span class="tc-rundenhinweis__marke">Zählt für die Runde:</span>
 *       Mordheim-Partien <b>2 von 4</b>, alle Systeme <b>5 von 10</b>.   (volles Ziel: <b class="is-voll">)
 *       <span class="tc-rundenhinweis__schluss">Noch eine …</span></span>
 *     <span class="tc-rundenhinweis__pfeil" aria-hidden="true">›</span>
 *   </button>
 *
 * LISTE (Fenster): .tc-rundenziele > .tc-rundenziel, Trennstrich dazwischen.
 * BÜHNE (#1027): .tc-rundenziele--szene im Text einer tc-szene, höchstens drei.
 * Zeichnet TC.Rundenziele (js/ui/rundenziele.js).
 * ========================================================================== */

.tc-rundenziel {
  display: grid;
  gap: var(--tc-space-1);
  min-width: 0;
}

.tc-rundenziel__titel {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-weight: 600;
  color: var(--tc-text-strong);
}
.tc-rundenziel__zeichen { flex: none; }

.tc-rundenziel__zahl {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tc-rundenziel__zahl b {
  font-size: var(--tc-text-base);
  color: var(--tc-highlight);
}

.tc-rundenziel__fuss {
  margin: 0;
  font-size: var(--tc-text-xs);
  line-height: 1.45;
  color: var(--tc-text-muted);
}
.tc-rundenziel__fuss b {
  font-weight: 600;
  color: var(--tc-text-default);
}

/* Geschafft: der Balken in der Farbe des Bestandenen, ein Haken davor. */
.tc-rundenziel.is-geschafft .tc-xp-bar__fuellung { background: var(--tc-success); }
.tc-rundenziel.is-geschafft .tc-rundenziel__zahl b { color: var(--tc-success); }
.tc-rundenziel.is-geschafft .tc-rundenziel__fuss b { color: var(--tc-success); }

/* --- Die Liste im Fenster ------------------------------------------------ */
.tc-rundenziele {
  display: grid;
  gap: var(--tc-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-rundenziele > .tc-rundenziel + .tc-rundenziel {
  padding-top: var(--tc-space-3);
  border-top: 1px solid var(--tc-border-subtle);
}
/* Der Stadtschreier spricht oben; sein Gesicht hängt unten an der Blase. */
.tc-rundenziele > .tc-sprechblase,
.tc-sprechblase + .tc-rundenziele__vorwort { margin-top: var(--tc-space-3); }
.tc-rundenziele__vorwort {
  margin: 0 0 var(--tc-space-3);
  font-size: var(--tc-text-sm);
  line-height: 1.5;
  color: var(--tc-text-default);
}
.tc-rundenziele__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-2);
  margin-top: var(--tc-space-4);
  padding-top: var(--tc-space-3);
  border-top: 1px solid var(--tc-border-subtle);
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}

/* Der Weg zu Skarn: ein Ziel, das man mit dem Daumen trifft (Heuristik 5). */
.tc-rundenziele__fuss a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--tc-highlight);
  text-decoration: none;
}
.tc-rundenziele__fuss a:hover { text-decoration: underline; }

/* --- Auf der Bühne (#1027) -------------------------------------------------
   Die Szene „Was die Runde schafft" (TC.Rundenziele.szeneHtml, tc-szene mit
   `inhalt`) zeigt höchstens drei Zeilen. Am Schreibtisch liegen sie auf dem
   Bild nebeneinander, am Telefon stehen sie unter dem Bild untereinander.
   Ohne Trennstriche: auf dem Bild wären es Linien quer durch die Mauer.
     <div class="tc-rundenziele tc-rundenziele--szene"> .tc-rundenziel … </div> */
.tc-rundenziele--szene {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--tc-space-3) var(--tc-space-4);
  align-items: start;
}
.tc-rundenziele--szene > .tc-rundenziel + .tc-rundenziel {
  padding-top: 0;
  border-top: 0;
}
/* Nebeneinander stehen die Bahnen auf einer Linie, auch wenn ein langer Titel
   („Age-of-Sigmar-Partien") umbricht: Jede Zeile übernimmt die zwei Reihen der
   Liste (Kopf mit Bahn, Fuß), die Bahn sitzt unten in ihrer Reihe. Gemessen
   am 12.10.2026 bei drei Balken in 640 px: ohne das hing der dritte tiefer. */
.tc-rundenziele--szene > .tc-rundenziel {
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: var(--tc-space-1);
}
.tc-rundenziele--szene .tc-xp-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tc-rundenziele--szene .tc-rundenziel__titel,
.tc-rundenziele--szene .tc-rundenziel__zahl,
.tc-rundenziele--szene .tc-rundenziel__fuss { text-shadow: 0 1px 6px var(--tc-stein-ritze); }

/* --- Der Verweis im Hub --------------------------------------------------- */
.tc-rundenziel-verweis {
  display: grid;
  gap: var(--tc-space-2);
  margin-top: var(--tc-space-3);
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.tc-rundenziel-verweis:hover { border-color: var(--tc-border-strong); }
.tc-rundenziel-verweis:focus-visible {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 2px;
}
.tc-rundenziel-verweis__marke {
  font-size: var(--tc-text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}
.tc-rundenziel-verweis__marke::after { content: ' \203A'; }

/* --- Der Hinweis am Ort der Handlung (#1068) ------------------------------
   Er hängt an einem <button> (§9): Aussehen, Grund, Rand, Abstand und Schrift
   setzt er selbst. Ruhig gehalten — er steht unter einem Münzmoment oder in
   einem Terminfenster und soll dort mitlesen, nicht rufen. Die Bewegung kommt
   aus dem Baukasten (tc-auftritt, tokens.css; reduzierte Bewegung dort). */
.tc-rundenhinweis {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--tc-space-2) var(--tc-space-3);
  border: 1px solid var(--tc-border-subtle);
  border-radius: var(--tc-radius-md);
  background: var(--tc-bg-surface-2);
  color: var(--tc-text-default);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--tc-motion-fast);
}
.tc-rundenhinweis:hover { border-color: var(--tc-border-strong); }
.tc-rundenhinweis:focus-visible {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 2px;
}
.tc-rundenhinweis__zeichen { flex: none; }
.tc-rundenhinweis__text { flex: 1; min-width: 0; }
.tc-rundenhinweis__marke { color: var(--tc-text-muted); }
.tc-rundenhinweis__text b {
  color: var(--tc-highlight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tc-rundenhinweis__schluss { color: var(--tc-text-strong); }
.tc-rundenhinweis__pfeil {
  flex: none;
  color: var(--tc-text-muted);
}
.tc-rundenhinweis.is-voll { border-color: var(--tc-success-border, var(--tc-success)); }
.tc-rundenhinweis__text b.is-voll { color: var(--tc-success); }

/* --- Tims Hand an der Zielhöhe (admin.html#rundenziele) -------------------
   Eine Zeile je Ziel: oben was es ist und wo es steht, darunter Eingabe und
   Knöpfe. Eine Tabelle lief bei 375 px rechts hinaus. */
.tc-rundenziel-admin__saison {
  margin: var(--tc-space-3) 0 var(--tc-space-1);
  font-size: var(--tc-text-sm);
  color: var(--tc-text-strong);
}
.tc-rundenziel-admin__zeile {
  display: grid;
  gap: var(--tc-space-2);
  padding: var(--tc-space-3) 0;
  border-top: 1px solid var(--tc-border-subtle);
}
.tc-rundenziel-admin__zeile.is-aus .tc-rundenziel-admin__text b { color: var(--tc-text-muted); }
.tc-rundenziel-admin__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.tc-rundenziel-admin__text b { color: var(--tc-text-strong); }
.tc-rundenziel-admin__text span {
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}
.tc-rundenziel-admin__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-2);
}
.tc-rundenziel-admin__knoepfe .tc-input { width: 5.5em; }