/* ============================================================================
 * Rattenrennen — Fell, Rattenkarte, Taufe, Startliste, Rennbahn (17.09.2026, #691)
 * ----------------------------------------------------------------------------
 * Konzept: https://claude.ai/artifact/VbjMPjbQPDSxpmcEh9Y151 (dritte Fassung)
 * Demonstriert in: library-community.html, Kapitel „Skarns Haus"
 * Markup:  js/ui/rattenrennen.js (TC.Rattenrennen) — die Bausteine werden dort
 *          zusammengesetzt, nicht auf den Seiten von Hand.
 * Regeln:  api/ratten-lib.php. Diese Datei kennt keine Form-Schwellen und keine
 *          Quoten; sie zeichnet, was der Server liefert.
 * Tokens:  Kreide und Schiefer aus css/tokens.css K2, die Tafel aus kreide.css.
 *          kreide.css muss vor dieser Datei auf der Seite liegen.
 *
 * MATERIAL: Skarn zeichnet das Rennen an die Tafel. Die Bahnen sind Kreide auf
 * Schiefer, nicht Holz — das Holz steht auf dem Kopfbild (rennbahn.webp), und
 * zwei Materialien für dieselbe Rinne lesen sich wie zwei Rennbahnen.
 *
 * ⚠️ FELL- UND BANDFARBEN SIND DATENFARBEN (CLAUDE.md §9): Sie sagen, welche
 * Ratte gemeint ist, und bleiben deshalb in jedem Theme gleich. Sie sind der
 * Rückfall, solange ein Bild fehlt — das Bild liegt darüber.
 *
 * AUFBAU
 *   .tc-fell [--sm|--gross] .tc-fell--<fell> | .tc-fell--haus-<key>
 *     img.tc-fell__bild
 *
 *   article.tc-rattenkarte [.is-schlaeft]
 *     .tc-rattenkarte__kopf > .tc-fell--gross + .tc-rattenkarte__wer [+ button.__bearbeiten]
 *       h3.tc-rattenkarte__name · .tc-rattenkarte__bilanz · .tc-rattenkarte__kraenze
 *     .tc-rattenkarte__form > __form-kopf, __punkte (i, i.is-voll), ul.__woher
 *     fieldset.tc-rattenkarte__taktik > legend + label.tc-taktik (radio)
 *     p.tc-rattenkarte__hinweis
 *
 *   form.tc-fellwahl > fieldset.__felle > label.__fell (radio + .__bild + .__name [+ .__klein])
 *                    > label.__feld (Name) > .__aktion
 *     .__fell [.is-besitz|.is-kaeuflich|.is-gesperrt|.is-saison|.is-aussersaison]
 *     .__bild > .tc-fell + .__marke (Schloss, Münze, Jahreszeit)
 *   form.tc-fellwahl--aussehen (#697): __gruppe je Weg, __beschreibung, kein Namensfeld
 *
 *   .tc-startliste (in einer .tc-kreidetafel) > .tc-startliste__zeile [.is-meine]
 *     .tc-fell--sm · .__wer (.__name, .__klein) · .__quoten (tc-quote × 2)
 *
 *   section.tc-rennbahn [.is-laeuft|.is-fertig]
 *     header.__kopf (h4.__titel, .__wann, Knopf)
 *     ol.__spuren > li.__spur [.is-haus] [.is-meine] (style="--weg:0")
 *       .__nr · .__rinne (.__ratte > .tc-fell--sm, .__ziel) · .__name · .__platz
 *     ol.__ergebnis > li (Platz, Name, Taktik, Form)
 *
 *   ul.tc-rattenstall > li.__ratte [.is-schlaeft] [.is-meine]
 *
 *   .tc-rr-szenen > .tc-rr-szene × 1–2 > figure.tc-rr-bild + Inhalt (#711)
 *
 *   a.tc-rattenvorschau [--kompakt] [.is-schlaeft|.is-ungetauft|.is-zu] (Dashboard, #700/#709)
 *     .tc-fell · .__text (.__klein, .__name, .__satz [.is-leise|.is-offen],
 *                         .__saison > .__saison-text + .__balken > i) · .__los
 * ========================================================================== */

/* ── Fell: das Portrait einer Ratte ────────────────────────────────────── */
.tc-fell {
  --tc-fell-groesse: 56px;
  --tc-fell-farbe: #7a7f7c;
  --tc-fell-band: transparent;
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: var(--tc-fell-groesse);
  height: var(--tc-fell-groesse);
  overflow: hidden;
  border-radius: 50%;
  background: var(--tc-fell-farbe);
  /* Das Band der Hausratten als Ring; Spielerratten tragen Kreide.
     Besondere Ratten (#704) tragen einen breiteren Metallring mit Schein. */
  box-shadow:
    0 0 0 2px var(--tc-schiefer),
    0 0 0 var(--tc-fell-ring, 4px) var(--tc-fell-band, var(--tc-kreide-leise)),
    0 0 var(--tc-fell-schein, 0px) var(--tc-fell-ring, 4px) var(--tc-fell-schein-farbe, transparent);
}
.tc-fell--sm    { --tc-fell-groesse: 32px; }
.tc-fell--gross { --tc-fell-groesse: 88px; }
.tc-fell__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Die acht Felle der Spielerratten */
.tc-fell--kanalgrau   { --tc-fell-farbe: #7a7f7c; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--pechschwarz { --tc-fell-farbe: #1f1d1c; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--schimmel    { --tc-fell-farbe: #d8d4cc; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--gescheckt   { --tc-fell-farbe: #e6ddcf; --tc-fell-band: var(--tc-kreide-leise);
  background:
    radial-gradient(30% 26% at 30% 34%, #6b4a33 98%, transparent),
    radial-gradient(24% 30% at 70% 68%, #6b4a33 98%, transparent),
    var(--tc-fell-farbe); }
.tc-fell--fuchsrot    { --tc-fell-farbe: #b0562b; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--sand        { --tc-fell-farbe: #c9a878; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--rauchblau   { --tc-fell-farbe: #6f7f93; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--blesse      { --tc-fell-farbe: #262422; --tc-fell-band: var(--tc-kreide-leise);
  background:
    radial-gradient(11% 38% at 50% 34%, #efe9dc 92%, transparent 100%),
    var(--tc-fell-farbe); }

/* Die 13 besonderen Ratten (#697): Rückfallfarbe aus der Bildvorgabe, das
   Band bleibt Kreide wie bei jeder Spielerratte. */
.tc-fell--speckbauch     { --tc-fell-farbe: #b98d6e; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--klapperbein    { --tc-fell-farbe: #cdc2a4; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--stollenbeisser { --tc-fell-farbe: #5b4632; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--squigratte     { --tc-fell-farbe: #9e2b25; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--chaosbrut      { --tc-fell-farbe: #3b2a4a; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--gnom           { --tc-fell-farbe: #8a8a86; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--gruenglut      { --tc-fell-farbe: #3f7d3a; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--rattenkoenig   { --tc-fell-farbe: #6b5a45; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--goldzahn       { --tc-fell-farbe: #c9a24a; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--die-blasse     { --tc-fell-farbe: #cfd6d9; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--frostbart      { --tc-fell-farbe: #9cc3d6; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--pestbluete     { --tc-fell-farbe: #7a8a3a; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--sonnenstich    { --tc-fell-farbe: #d0733a; --tc-fell-band: var(--tc-kreide-leise); }
/* Die acht Einmal-Saisonratten (#701, neu gefasst mit #706) */
.tc-fell--rattenkrampus    { --tc-fell-farbe: #6b1f1c; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--pestschwenker    { --tc-fell-farbe: #6f7a2e; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--warpbrenner      { --tc-fell-farbe: #4fae3a; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--kuerbisschnitter { --tc-fell-farbe: #b5561c; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--frostwyrm        { --tc-fell-farbe: #7fb1c9; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--peitschenmeister { --tc-fell-farbe: #5e3b2e; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--blitzfaenger     { --tc-fell-farbe: #5c7fa8; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--nebelmeuchler    { --tc-fell-farbe: #3a3d3f; --tc-fell-band: var(--tc-kreide-leise); }
/* Die sechs Kaufratten aus #706 */
.tc-fell--hamsti           { --tc-fell-farbe: #8b7a64; --tc-fell-band: var(--tc-kreide-leise); }  /* #708: der verlotterte aus dem Gästebuch */
.tc-fell--bohrkopf         { --tc-fell-farbe: #6d5a45; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--kielkratzer      { --tc-fell-farbe: #3f5560; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--brocken          { --tc-fell-farbe: #7a5a4a; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--zischzahn        { --tc-fell-farbe: #58a84a; --tc-fell-band: var(--tc-kreide-leise); }
.tc-fell--glutschwinge     { --tc-fell-farbe: #b8401f; --tc-fell-band: var(--tc-kreide-leise); }

/* Rahmen der besonderen Ratten (#704). Tim: „Kann man besondere Ratten da noch
   etwas hervorheben? Durch einen Rahmen oder sowas?“ Messing heißt gekauft,
   Silber verdient (freigeschaltet oder Saison). Hausratten behalten ihr Band,
   Grundfelle die Kreide. ⚠️ Wer in rtBesondere() eine Ratte anlegt, trägt sie
   hier in ihre Gruppe ein, sonst läuft sie ohne Rahmen. Steht nach den
   Farbregeln, damit das Band dort nicht gewinnt. */
.tc-fell--speckbauch,
.tc-fell--hamsti,
.tc-fell--klapperbein,
.tc-fell--bohrkopf,
.tc-fell--stollenbeisser,
.tc-fell--kielkratzer,
.tc-fell--squigratte,
.tc-fell--brocken,
.tc-fell--chaosbrut,
.tc-fell--zischzahn,
.tc-fell--gnom,
.tc-fell--glutschwinge {
  --tc-fell-band: var(--tc-rahmen-messing);
  --tc-fell-ring: 5px;
  --tc-fell-schein: 9px;
  --tc-fell-schein-farbe: var(--tc-rahmen-messing-schein);
}
.tc-fell--gruenglut,
.tc-fell--rattenkoenig,
.tc-fell--goldzahn,
.tc-fell--die-blasse,
.tc-fell--frostbart,
.tc-fell--pestbluete,
.tc-fell--sonnenstich,
.tc-fell--rattenkrampus,
.tc-fell--pestschwenker,
.tc-fell--warpbrenner,
.tc-fell--kuerbisschnitter,
.tc-fell--frostwyrm,
.tc-fell--peitschenmeister,
.tc-fell--blitzfaenger,
.tc-fell--nebelmeuchler {
  --tc-fell-band: var(--tc-rahmen-silber);
  --tc-fell-ring: 5px;
  --tc-fell-schein: 9px;
  --tc-fell-schein-farbe: var(--tc-rahmen-silber-schein);
}

/* Skarns sechs Hausratten: Fellfarbe und Band aus den Bildvorgaben */
.tc-fell--haus-grauer-blitz    { --tc-fell-farbe: #8a8f93; --tc-fell-band: #3f6fb5; }
.tc-fell--haus-die-witwe       { --tc-fell-farbe: #151515; --tc-fell-band: #cfc8bb; }
.tc-fell--haus-kanalkoenig     { --tc-fell-farbe: #6e4a2e; --tc-fell-band: #a8322a; }
.tc-fell--haus-lahmer-otto     { --tc-fell-farbe: #7d766c; --tc-fell-band: #4f7d3a; }
.tc-fell--haus-brennende-zunge { --tc-fell-farbe: #b4652a; --tc-fell-band: #d4731f; }
.tc-fell--haus-warpfell        { --tc-fell-farbe: #4f5a3f; --tc-fell-band: #6b3f8f; }

/* ── Die Rattenkarte ───────────────────────────────────────────────────── */
.tc-rattenkarte {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-4, 16px);
  padding: var(--tc-space-4, 16px);
  color: var(--tc-kreide);
  background:
    radial-gradient(60% 45% at 85% 10%, var(--tc-kreide-staub), transparent 70%),
    var(--tc-schiefer-hell);
  border: 1px solid var(--tc-schiefer-linie);
  border-radius: var(--tc-radius-md, 8px);
}

.tc-rattenkarte__kopf {
  display: flex;
  align-items: center;
  gap: var(--tc-space-4, 16px);
  min-width: 0;
}
.tc-rattenkarte__wer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* Name und Aussehen ändern (Tim, 17.09.2026: „mach die eigene Ratte bitte
   bearbeitbar"). Der Knopf sitzt an der Karte, dort, wo man sucht — ein
   zugeklappter Bereich darunter wurde nicht gefunden. */
.tc-rattenkarte__bearbeiten {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
}
.tc-rattenkarte__name {
  margin: 0;
  font-family: var(--tc-font-kreide);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--tc-kreide);
  text-shadow: 0 0 1px rgba(239, 233, 220, 0.45);
  overflow-wrap: anywhere;
}
.tc-rattenkarte__bilanz {
  font-size: var(--tc-text-sm, 0.82rem);
  color: var(--tc-kreide-leise);
  font-variant-numeric: tabular-nums;
}
/* Kränze: je Laufsieg ein gezeichneter Ring, höchstens acht; die Zahl
   steht im aria-label und in der Bilanz daneben. */
.tc-rattenkarte__kraenze {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.tc-rattenkarte__kranz {
  display: block;
  width: 18px;
  height: 18px;
  border: 2px dotted var(--tc-highlight);
  border-radius: 50%;
}

.tc-rattenkarte__form {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2, 8px);
  padding-top: var(--tc-space-3, 12px);
  border-top: 1px dashed var(--tc-schiefer-linie);
}
.tc-rattenkarte__form-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--tc-space-3, 12px);
}
.tc-rattenkarte__form-wort {
  font-family: var(--tc-font-kreide);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tc-kreide);
}
.tc-rattenkarte__form-klein {
  font-size: var(--tc-text-xs, 0.72rem);
  color: var(--tc-kreide-leise);
}
.tc-rattenkarte__punkte {
  display: flex;
  gap: 6px;
}
.tc-rattenkarte__punkte i {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--tc-kreide-leise);
  border-radius: 50%;
}
.tc-rattenkarte__punkte i.is-voll {
  background: var(--tc-kreide);
  border-color: var(--tc-kreide);
}
.tc-rattenkarte__woher {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-rattenkarte__woher li {
  padding: 2px 8px;
  font-size: 0.72rem;
  color: var(--tc-kreide-leise);
  border: 1px dashed var(--tc-schiefer-linie);
  border-radius: var(--tc-radius-full, 999px);
  font-variant-numeric: tabular-nums;
}

/* ⚠️ DAS RASTER STECKT IN EINEM EIGENEN div. Ein <fieldset> mit
   display: grid legt seine <legend> nicht über die Zeilen, sondern als
   Rasterzelle daneben — im Browser gemessen, im Quelltext unsichtbar. */
.tc-rattenkarte__taktik {
  min-width: 0;
  margin: 0;
  padding: var(--tc-space-3, 12px) 0 0;
  border: 0;
  border-top: 1px dashed var(--tc-schiefer-linie);
}
.tc-rattenkarte__taktik legend {
  float: left;          /* im Block-Fieldset: Legende unter die Linie, nicht auf sie */
  width: 100%;
  padding: 0;
}
.tc-rattenkarte__taktik-titel {
  display: block;
  margin-bottom: var(--tc-space-2, 8px);
  font-size: var(--tc-text-xs, 0.72rem);
  color: var(--tc-kreide-leise);
}
.tc-rattenkarte__taktik-raster {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--tc-space-2, 8px);
}

/* Eine Taktik zum Antippen. Das Radio bleibt für Tastatur und Screenreader
   im DOM, sichtbar ist die Karte. */
.tc-taktik {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--tc-kreide);
  border: 1px dashed var(--tc-schiefer-linie);
  border-radius: var(--tc-radius-md, 8px);
  cursor: pointer;
  transition: background-color var(--tc-motion-fast), border-color var(--tc-motion-fast);
}
.tc-taktik input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.tc-taktik__name {
  font-family: var(--tc-font-kreide);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
}
.tc-taktik__satz {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--tc-kreide-leise);
}
.tc-taktik:hover {
  border-color: var(--tc-kreide-leise);
  background: var(--tc-kreide-staub);
}
.tc-taktik:has(input:focus-visible) {
  outline: 2px solid var(--tc-kreide);
  outline-offset: 2px;
}
/* Gewählt: Kreide umgedreht, wie eine angekreidete Quote. */
.tc-taktik:has(input:checked) {
  background: var(--tc-kreide);
  border-color: var(--tc-kreide);
  border-style: solid;
}
.tc-taktik:has(input:checked) .tc-taktik__name,
.tc-taktik:has(input:checked) .tc-taktik__satz {
  color: var(--tc-schiefer);
}
.tc-taktik:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

.tc-rattenkarte__hinweis {
  margin: 0;
  font-size: var(--tc-text-xs, 0.72rem);
  line-height: 1.5;
  color: var(--tc-kreide-leise);
}

/* Schläft im Stall: Fell entsättigt, der Rest bleibt lesbar — die Karte sagt
   ja gerade, warum sie nicht läuft. */
.tc-rattenkarte.is-schlaeft .tc-rattenkarte__kopf .tc-fell {
  filter: grayscale(0.85) brightness(0.8);
}

/* ── Die Taufe: Fell und Name ──────────────────────────────────────────── */
.tc-fellwahl {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-4, 16px);
  padding: var(--tc-space-4, 16px);
  color: var(--tc-kreide);
  background: var(--tc-schiefer-hell);
  border: 1px solid var(--tc-schiefer-linie);
  border-radius: var(--tc-radius-md, 8px);
}
.tc-fellwahl__satz {
  margin: 0;
  font-family: var(--tc-font-kreide);
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--tc-kreide);
}
.tc-fellwahl__felle {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.tc-fellwahl__felle legend {
  display: block;
  margin-bottom: var(--tc-space-2, 8px);
  padding: 0;
  font-size: var(--tc-text-xs, 0.72rem);
  color: var(--tc-kreide-leise);
}
.tc-fellwahl__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--tc-space-2, 8px);
}
.tc-fellwahl__fell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  border: 1px dashed transparent;
  border-radius: var(--tc-radius-md, 8px);
  cursor: pointer;
  transition: border-color var(--tc-motion-fast), background-color var(--tc-motion-fast);
}
.tc-fellwahl__fell input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.tc-fellwahl__name {
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: center;
  color: var(--tc-kreide-leise);
}
.tc-fellwahl__fell:hover {
  border-color: var(--tc-schiefer-linie);
  background: var(--tc-kreide-staub);
}
.tc-fellwahl__fell:has(input:focus-visible) {
  outline: 2px solid var(--tc-kreide);
  outline-offset: 2px;
}
.tc-fellwahl__fell:has(input:checked) {
  border-color: var(--tc-kreide);
  border-style: solid;
  background: var(--tc-kreide-staub);
}
.tc-fellwahl__fell:has(input:checked) .tc-fellwahl__name {
  color: var(--tc-kreide);
  font-weight: 700;
}
/* ── Zustände einer Kachel (#697) ──────────────────────────────────────
   Jede Kachel bleibt antippbar, auch gesperrt: Die Beschreibung darunter
   sagt, wer die Ratte ist und wie man sie bekommt. Gesperrt heißt blass,
   nicht unsichtbar — sonst sähe niemand, worauf er hinarbeitet. */
.tc-fellwahl__bild {
  position: relative;
  display: inline-flex;
}
.tc-fellwahl__marke {
  position: absolute;
  top: -4px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
  line-height: 1;
  background: var(--tc-schiefer);
  border: 1px solid var(--tc-schiefer-linie);
  border-radius: 50%;
}
.tc-fellwahl__klein {
  font-size: 0.66rem;
  line-height: 1.2;
  text-align: center;
  color: var(--tc-kreide-leise);
}
.tc-fellwahl__fell.is-kaeuflich .tc-fellwahl__klein,
.tc-fellwahl__fell.is-saison .tc-fellwahl__klein {
  color: var(--tc-kreide);
  font-weight: 700;
}
.tc-fellwahl__fell.is-gesperrt .tc-fell,
.tc-fellwahl__fell.is-saison .tc-fell,
.tc-fellwahl__fell.is-aussersaison .tc-fell {
  filter: grayscale(0.7) brightness(0.85);
}
.tc-fellwahl__fell.is-gesperrt .tc-fellwahl__name,
.tc-fellwahl__fell.is-aussersaison .tc-fellwahl__name {
  color: var(--tc-kreide-leise);
}
/* In ihrer Jahreszeit: noch nicht verdient, aber jetzt dran (#699). Blass
   wie jede gesperrte, der Kreidering sagt „diese Jahreszeit". */
.tc-fellwahl__fell.is-saison .tc-fell {
  box-shadow:
    0 0 0 2px var(--tc-schiefer),
    0 0 0 4px var(--tc-kreide);
}
.tc-fellwahl__gruppe {
  margin: var(--tc-space-3, 12px) 0 var(--tc-space-2, 8px);
  font-size: var(--tc-text-xs, 0.72rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-kreide-leise);
}
.tc-fellwahl__gruppe:first-of-type { margin-top: 0; }
.tc-fellwahl__beschreibung {
  margin: 0;
  min-height: 2.8em;
  font-size: var(--tc-text-sm, 0.85rem);
  line-height: 1.4;
  color: var(--tc-kreide-leise);
}
.tc-fellwahl__beschreibung b {
  font-family: var(--tc-font-kreide);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--tc-kreide);
}

.tc-fellwahl__feld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 360px;
  font-size: var(--tc-text-xs, 0.72rem);
  color: var(--tc-kreide-leise);
}
.tc-fellwahl__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-2, 8px) var(--tc-space-3, 12px);
}

/* ── Die Startliste an der Tafel ───────────────────────────────────────── */
.tc-startliste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-startliste__zeile {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tc-space-2, 8px) var(--tc-space-3, 12px);
  padding: 6px 0;
}
.tc-startliste__zeile + .tc-startliste__zeile {
  border-top: 1px dotted var(--tc-schiefer-linie);
}
.tc-startliste__bahn {
  min-width: 1.4em;
  font-family: var(--tc-font-kreide);
  font-size: 1.1rem;
  text-align: right;
  color: var(--tc-kreide-leise);
  font-variant-numeric: tabular-nums;
}
.tc-startliste__wer {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tc-startliste__name {
  font-family: var(--tc-font-kreide);
  font-size: 1.12rem;
  line-height: 1.15;
  color: var(--tc-kreide);
  overflow-wrap: anywhere;
}
.tc-startliste__klein {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--tc-kreide-leise);
}
.tc-startliste__quoten {
  display: flex;
  gap: 6px;
}
.tc-startliste__quoten .tc-quote { min-width: 60px; }
.tc-startliste__zeile.is-meine .tc-startliste__name { color: var(--tc-highlight); }
@media (max-width: 560px) {
  .tc-startliste__zeile { grid-template-columns: auto auto minmax(0, 1fr); }
  .tc-startliste__quoten { grid-column: 3 / -1; }
}

/* ── Die Rennbahn ──────────────────────────────────────────────────────── */
.tc-rennbahn {
  --tc-rennbahn-ratte: 32px;
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-3, 12px);
  padding: var(--tc-space-4, 16px);
  color: var(--tc-kreide);
  background:
    radial-gradient(60% 40% at 20% 15%, var(--tc-kreide-staub), transparent 70%),
    var(--tc-schiefer);
  border: 5px solid var(--tc-schiefer-rahmen);
  border-radius: var(--tc-radius-md, 8px);
}
.tc-rennbahn__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--tc-space-3, 12px);
}
.tc-rennbahn__titel {
  margin: 0;
  font-family: var(--tc-font-kreide);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tc-kreide);
}
.tc-rennbahn__wann {
  flex: 1 1 auto;
  font-size: var(--tc-text-xs, 0.72rem);
  color: var(--tc-kreide-leise);
}
.tc-rennbahn__spuren {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-rennbahn__spur {
  --weg: 0;
  display: grid;
  grid-template-columns: 1.4em minmax(0, 1fr) minmax(0, 11em) 2.2em;
  grid-template-areas: "nr rinne name platz";
  align-items: center;
  gap: 4px var(--tc-space-2, 8px);
}
.tc-rennbahn__nr {
  grid-area: nr;
  font-family: var(--tc-font-kreide);
  font-size: 1rem;
  text-align: right;
  color: var(--tc-kreide-leise);
}
.tc-rennbahn__rinne {
  grid-area: rinne;
  position: relative;
  height: calc(var(--tc-rennbahn-ratte) + 8px);
  border-bottom: 2px dashed var(--tc-schiefer-linie);
}
/* Das Ziel: ein Karo aus Kreide am rechten Ende der Rinne. */
.tc-rennbahn__ziel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -2px;
  width: 8px;
  background:
    repeating-linear-gradient(0deg, var(--tc-kreide) 0 4px, transparent 4px 8px) 0 0 / 4px 100% no-repeat,
    repeating-linear-gradient(0deg, transparent 0 4px, var(--tc-kreide) 4px 8px) 4px 0 / 4px 100% no-repeat;
  opacity: 0.7;
}
.tc-rennbahn__ratte {
  position: absolute;
  z-index: 1;            /* über der Ziellinie, nicht dahinter */
  top: 4px;
  left: calc(var(--weg) * (100% - var(--tc-rennbahn-ratte) - 8px));
  line-height: 0;
}
.tc-rennbahn__ratte .tc-fell { --tc-fell-groesse: var(--tc-rennbahn-ratte); }
.tc-rennbahn__name {
  grid-area: name;
  min-width: 0;
  font-family: var(--tc-font-kreide);
  font-size: 1rem;
  line-height: 1.1;
  color: var(--tc-kreide);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-rennbahn__name small {
  display: block;
  font-family: var(--tc-font-body);
  font-size: 0.68rem;
  color: var(--tc-kreide-leise);
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-rennbahn__platz {
  grid-area: platz;
  font-family: var(--tc-font-kreide);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  color: var(--tc-kreide);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity var(--tc-motion-normal);
}
.tc-rennbahn.is-fertig .tc-rennbahn__platz { opacity: 1; }
.tc-rennbahn__spur.is-meine .tc-rennbahn__name { color: var(--tc-highlight); }
.tc-rennbahn__spur.is-sieger .tc-rennbahn__platz {
  color: var(--tc-schiefer);
  background: var(--tc-highlight);
  border-radius: 50%;
}
/* Skarns Hausratten laufen gestrichelt, wie im Konzept. */
.tc-rennbahn__spur.is-haus .tc-rennbahn__name { font-style: italic; color: var(--tc-kreide-leise); }

@media (max-width: 560px) {
  .tc-rennbahn__spur {
    grid-template-columns: 1.4em minmax(0, 1fr) 2.2em;
    grid-template-areas:
      "nr name platz"
      "nr rinne rinne";
  }
}

/* Der Zieleinlauf mit Taktiken — erst nach dem Lauf sichtbar. */
.tc-rennbahn__ergebnis {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: var(--tc-space-3, 12px) 0 0;
  list-style: none;
  border-top: 1px dashed var(--tc-schiefer-linie);
}
.tc-rennbahn.is-fertig .tc-rennbahn__ergebnis { display: flex; }
.tc-rennbahn__zeile {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px var(--tc-space-2, 8px);
  font-size: var(--tc-text-sm, 0.82rem);
}
.tc-rennbahn__zeile b {
  font-family: var(--tc-font-kreide);
  font-size: 1.05rem;
  color: var(--tc-kreide);
}
.tc-rennbahn__zeile span { color: var(--tc-kreide-leise); min-width: 0; }
.tc-rennbahn__taktik {
  padding: 1px 8px;
  font-size: 0.7rem;
  white-space: nowrap;
  color: var(--tc-kreide);
  border: 1px solid var(--tc-schiefer-linie);
  border-radius: var(--tc-radius-full, 999px);
}
.tc-rennbahn__taktik.is-laune { border-style: dashed; color: var(--tc-kreide-leise); }
.tc-rennbahn__fuss {
  margin: 0;
  font-size: var(--tc-text-xs, 0.72rem);
  line-height: 1.5;
  color: var(--tc-kreide-leise);
}

/* ── Der Stall ─────────────────────────────────────────────────────────── */
.tc-rattenstall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--tc-space-2, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-rattenstall__ratte {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2, 8px);
  min-width: 0;
  padding: 8px 10px;
  color: var(--tc-kreide);
  background: var(--tc-schiefer-hell);
  border: 1px solid var(--tc-schiefer-linie);
  border-radius: var(--tc-radius-md, 8px);
}
.tc-rattenstall__wer {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tc-rattenstall__name {
  font-family: var(--tc-font-kreide);
  font-size: 1.05rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-rattenstall__klein {
  font-size: 0.7rem;
  color: var(--tc-kreide-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-rattenstall__ratte.is-meine { border-color: var(--tc-highlight); }
.tc-rattenstall__ratte.is-schlaeft .tc-fell { filter: grayscale(0.85) brightness(0.8); }

/* ── Die Vorschau: die eigene Ratte auf dem Dashboard (#700) ────────────── */
/* Tim, 17.09.2026: „Kannst du hier im Dashboard ein Rattenpreview machen oder
   anzeigen, dass man sich eine konfigurieren soll?"
   Schiefer statt Bernstein, obwohl sie im Untergrund-Block steht: Die Ratte
   gehört an Skarns Tafel, und das Material sagt, wohin der Link führt. Die
   ganze Karte ist ein Link — eingestellt wird an der Rennbahn. */
.tc-rattenvorschau {
  font-family: var(--tc-font-body);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-2, 8px) var(--tc-space-3, 12px);
  min-width: 0;
  padding: 12px 14px 12px 12px;
  color: var(--tc-kreide);
  text-decoration: none;
  background:
    radial-gradient(60% 80% at 12% 0%, var(--tc-kreide-staub), transparent 70%),
    var(--tc-schiefer-hell);
  border: 1px solid var(--tc-schiefer-linie);
  border-radius: var(--tc-radius-md, 8px);
  transition: border-color var(--tc-motion-normal, 200ms ease),
              transform var(--tc-motion-normal, 200ms ease);
}
.tc-rattenvorschau:hover,
.tc-rattenvorschau:focus-visible {
  border-color: var(--tc-kreide-leise);
  color: var(--tc-kreide);
  transform: translateY(-1px);
  outline: none;
}
.tc-rattenvorschau:focus-visible { box-shadow: 0 0 0 2px var(--tc-kreide-leise); }

/* Das Portrait steht oben: Bricht ein langer Name um, schwebte es sonst
   mitten neben dem Text. */
.tc-rattenvorschau > .tc-fell {
  align-self: flex-start;
  margin: 4px 0 0 4px;
}

/* Der Text nimmt sich den Platz; wird er schmaler als 200px, rutscht der
   Knopf in die nächste Zeile, statt den Namen zu quetschen. */
.tc-rattenvorschau__text {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tc-rattenvorschau__klein {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--tc-kreide-leise);
}
.tc-rattenvorschau__name {
  font-family: var(--tc-font-kreide);
  font-size: 1.3rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.tc-rattenvorschau__satz {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--tc-kreide);
}
.tc-rattenvorschau__satz.is-leise { color: var(--tc-kreide-leise); }
/* Die eine Sache, die noch zu tun ist: mit Kreide unterstrichen, nicht
   eingefärbt — auf der Tafel gibt es keine Signalfarbe. */
.tc-rattenvorschau__satz.is-offen {
  align-self: flex-start;
  text-decoration: underline dashed var(--tc-kreide-leise);
  text-underline-offset: 3px;
}

/* Der Fortschritt zur Saisonratte (#701): eine Zeile Text, darunter ein
   Kreidestrich, der sich füllt. Eine Zeile je Jahreszeit. */
.tc-rattenvorschau__saison {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.tc-rattenvorschau__saison-text {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--tc-kreide);
}
.tc-rattenvorschau__balken {
  display: block;
  height: 6px;
  max-width: 260px;
  overflow: hidden;
  background: var(--tc-schiefer);
  border: 1px solid var(--tc-schiefer-linie);
  border-radius: 999px;
}
.tc-rattenvorschau__balken i {
  display: block;
  height: 100%;
  background: var(--tc-kreide);
  border-radius: inherit;
}

.tc-rattenvorschau__los {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  /* Abstand zum Pfeil über gap: Ein Leerzeichen am Anfang eines
     Flex-Elements verschluckt der Browser („wählen→"). */
  gap: 6px;
  min-height: var(--tc-touch-min, 36px);
  padding: 0 12px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tc-kreide);
  border: 1px solid var(--tc-kreide-leise);
  border-radius: 999px;
}
.tc-rattenvorschau:hover .tc-rattenvorschau__los,
.tc-rattenvorschau:focus-visible .tc-rattenvorschau__los,
.tc-rattenvorschau.is-ungetauft .tc-rattenvorschau__los,
.tc-rattenvorschau:has(.is-offen) .tc-rattenvorschau__los {
  color: var(--tc-schiefer);
  background: var(--tc-kreide);
  border-color: var(--tc-kreide);
}

.tc-rattenvorschau.is-schlaeft .tc-fell { filter: grayscale(0.85) brightness(0.8); }
/* Noch zu: die Ratte als Umriss, der Text leiser. Es ist eine Aussicht,
   keine Aufgabe — sie soll neben den Wirten nicht lauter sein als sie. */
.tc-rattenvorschau.is-zu {
  background: var(--tc-schiefer);
}
.tc-rattenvorschau.is-zu .tc-fell { filter: grayscale(1) brightness(0.55); }
.tc-rattenvorschau.is-zu .tc-rattenvorschau__name { color: var(--tc-kreide-leise); }

/* Die kompakte Fassung neben dem Rang in „Mein Fortschritt" (#709). Tim:
   „cool – wenn auch schon sehr ausführlich". Ein Satz (das wählt das Skript),
   ein kleineres Portrait, und ein Raster statt der Flex-Zeile: Portrait links
   über die ganze Höhe, der Knopf oben rechts. In der Flex-Zeile drückte der
   Knopf die Textspalte auf 170 px, und die Karte wurde dreimal so hoch wie
   der Rang daneben (gemessen 149 px gegen 45 px).
   Der Knopf ist hier kein eigenes Ziel: Die ganze Karte ist der Link und
   misst weit über 36 px (Heuristik 5), der Knopf nennt nur die Handlung. */
.tc-rattenvorschau--kompakt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 10px;
  padding: 8px 10px 9px 8px;
}
.tc-rattenvorschau--kompakt > .tc-fell {
  --tc-fell-groesse: 44px;
  margin: 3px 0 0 3px;
}
.tc-rattenvorschau--kompakt .tc-rattenvorschau__text { gap: 1px; }
.tc-rattenvorschau--kompakt .tc-rattenvorschau__klein { font-size: 0.66rem; }
.tc-rattenvorschau--kompakt .tc-rattenvorschau__name { font-size: 1.08rem; }
.tc-rattenvorschau--kompakt .tc-rattenvorschau__satz { font-size: 0.76rem; line-height: 1.35; }
.tc-rattenvorschau--kompakt .tc-rattenvorschau__saison { gap: 3px; margin-top: 3px; }
.tc-rattenvorschau--kompakt .tc-rattenvorschau__saison-text { font-size: 0.7rem; }
.tc-rattenvorschau--kompakt .tc-rattenvorschau__balken { height: 4px; max-width: 180px; }
.tc-rattenvorschau--kompakt .tc-rattenvorschau__los {
  margin: 0;
  min-height: 26px;
  padding: 0 9px;
  gap: 4px;
  font-size: 0.72rem;
}
/* Schmal (Handy): Der Knopf rutscht unter den Text, sonst bliebe für den
   Namen kaum mehr als ein Wort. */
@media (max-width: 480px) {
  .tc-rattenvorschau--kompakt { grid-template-columns: auto minmax(0, 1fr); }
  .tc-rattenvorschau--kompakt > .tc-fell { grid-row: 1 / span 2; }
  .tc-rattenvorschau--kompakt .tc-rattenvorschau__los { grid-column: 2; justify-self: start; }
}

/* ── Szenen: Renntag und Stall nebeneinander (#711) ───────────────────────
   Tim, 17.09.2026: „Vielleicht laufen die nur auf 50% und dafür sind die
   Bilder höher, denn die kann man im Moment kaum sehen." Bis dahin stand
   jedes Bild in voller Breite mit höchstens 240 px Höhe, gemessen bei 1920 px
   1550 × 240: ein Streifen aus der Bildmitte, knapp ein Drittel des Motivs.
     .tc-rr-szenen > .tc-rr-szene × 1–2
       figure.tc-rr-bild > img   (immer zuerst)
       danach der Inhalt: Kreidetafel, Überschrift, Stall
   Ab 904 px Breite (zweimal 440 plus Abstand) stehen zwei Szenen
   nebeneinander, darunter untereinander.
   `auto-fit` legt eine einzelne Szene über die ganze Breite (§7a-4, Falle 3).
   Das Bild zeigt sein eigenes Seitenverhältnis 16:9; erst über 440 px Höhe
   wird oben und unten beschnitten.
   ⚠️ Das Bild steht in jeder Szene vor einer Überschrift. Sonst stehen zwei
   Bilder nebeneinander auf verschiedener Höhe. */
.tc-rr-szenen {
  --tc-rr-bild-max: 440px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: var(--tc-space-5, 24px);
  align-items: start;
}
.tc-rr-szene {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-3, 12px);
  min-width: 0;
}

/* ── Szenenbild über Renntag und Stall ─────────────────────────────────── */
.tc-rr-bild {
  margin: 0;
  overflow: hidden;
  border-radius: var(--tc-radius-md, 8px);
  aspect-ratio: 16 / 9;
  max-height: var(--tc-rr-bild-max, 240px);
  width: 100%;
  max-width: 100%;
  background: var(--tc-schiefer);
}
.tc-rr-bild img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.tc-rr-bild[hidden] { display: none; }

/* ── Die Rattenschau im Spielerprofil (#705) ───────────────────────────────
   Tim: „Hundeschau mit kleinen Pokalen". Dieselbe Tafel wie alle Ratten-
   Bausteine; die Ratte steht auf einem Podest, Laufsiege stehen als Pokale
   auf einem Brett, zweite Plätze als Schleife.
     article.tc-rattenschau
       .__buehne > .__podest (.tc-fell--gross + .__rosette) · .__wer
         (.__klein, .__name, .__fell > .__marke.is-messing|.is-silber, dl.__bilanz)
       ul.__regal > li.__pokal (.__kelch + small) [.is-schleife > .__schleife] [.is-mehr]
       | p.__leer
       .__zucht > p.__unter + ul > li (.tc-fell--sm + span > small)
       .__aktionen > a.tc-button × 2 (nur auf dem eigenen Profil) */
.tc-rattenschau {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-4, 16px);
  padding: var(--tc-space-4, 16px);
  /* Eigene Schrift: spieler.html setzt am body keine (CLAUDE.md §9). */
  font-family: var(--tc-font-body);
  color: var(--tc-kreide);
  background:
    radial-gradient(55% 60% at 18% 12%, var(--tc-kreide-staub), transparent 70%),
    var(--tc-schiefer-hell);
  border: 1px solid var(--tc-schiefer-linie);
  border-radius: var(--tc-radius-md, 8px);
  min-width: 0;
}
.tc-rattenschau__buehne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-4, 16px) 20px;
  min-width: 0;
}
/* Das Podest: ein Holzsockel unter dem Porträt, die Rosette am Rand. */
.tc-rattenschau__podest {
  position: relative;
  flex: 0 0 auto;
  padding: 6px 14px 18px;
}
.tc-rattenschau__podest::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background: linear-gradient(180deg, var(--tc-holz), var(--tc-schiefer-rahmen));
  border-radius: 3px 3px 6px 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45);
}
.tc-rattenschau__rosette {
  position: absolute;
  top: -2px;
  right: -4px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--tc-tinte);
  line-height: 1;
  background:
    radial-gradient(circle, var(--tc-rahmen-messing) 55%, transparent 56%),
    repeating-conic-gradient(var(--tc-rahmen-messing) 0 10deg, var(--tc-rahmen-messing-dunkel) 10deg 20deg);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.tc-rattenschau__rosette b { font-size: 1rem; }
.tc-rattenschau__rosette small { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

.tc-rattenschau__wer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 220px;
  min-width: 0;
}
.tc-rattenschau__klein {
  font-size: var(--tc-text-sm, 0.82rem);
  color: var(--tc-kreide-leise);
}
.tc-rattenschau__name {
  margin: 0;
  font-family: var(--tc-font-kreide);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--tc-kreide);
  overflow-wrap: anywhere;
}
.tc-rattenschau__fell {
  margin: 0;
  color: var(--tc-kreide-leise);
}
.tc-rattenschau__marke {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.tc-rattenschau__marke.is-messing { color: var(--tc-rahmen-messing); }
.tc-rattenschau__marke.is-silber  { color: var(--tc-rahmen-silber); }

.tc-rattenschau__bilanz {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 6px 0 0;
}
.tc-rattenschau__bilanz div { display: flex; flex-direction: column; }
.tc-rattenschau__bilanz dt {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-kreide-leise);
}
.tc-rattenschau__bilanz dd {
  margin: 0;
  font-family: var(--tc-font-kreide);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

/* Das Pokalbrett: Pokale stehen auf einer Holzleiste. */
.tc-rattenschau__regal {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin: 0;
  padding: 0 8px 10px;
  list-style: none;
  border-bottom: 6px solid var(--tc-schiefer-rahmen);
  border-radius: 0 0 3px 3px;
}
.tc-rattenschau__pokal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  text-align: center;
}
.tc-rattenschau__pokal small {
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--tc-kreide-leise);
  font-variant-numeric: tabular-nums;
}
.tc-rattenschau__pokal.is-mehr b { font-family: var(--tc-font-kreide); font-size: 1.3rem; }
/* Ein Kelch aus drei Formen: Schale, Stiel, Fuß. */
.tc-rattenschau__kelch {
  position: relative;
  display: block;
  width: 26px;
  height: 34px;
}
.tc-rattenschau__kelch::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 18px;
  background: linear-gradient(90deg, var(--tc-rahmen-messing-dunkel), var(--tc-rahmen-messing) 45%, var(--tc-rahmen-messing-hell) 60%, var(--tc-rahmen-messing-dunkel));
  border-radius: 2px 2px 13px 13px;
  box-shadow: -5px 3px 0 -3px var(--tc-rahmen-messing), 5px 3px 0 -3px var(--tc-rahmen-messing);
}
.tc-rattenschau__kelch::after {
  content: '';
  position: absolute;
  left: 5px;
  bottom: 0;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--tc-rahmen-messing), var(--tc-rahmen-messing)) center top / 4px 11px no-repeat,
    linear-gradient(90deg, var(--tc-rahmen-messing-dunkel), var(--tc-rahmen-messing), var(--tc-rahmen-messing-dunkel)) center bottom / 16px 5px no-repeat;
}
/* Die Schleife für zweite Plätze: Rosette in Silber mit zwei Bändern. */
.tc-rattenschau__schleife {
  position: relative;
  display: block;
  width: 26px;
  height: 34px;
}
.tc-rattenschau__schleife::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 0;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle, var(--tc-rahmen-silber) 45%, var(--tc-rahmen-silber-dunkel) 46%, var(--tc-rahmen-silber) 70%);
  border-radius: 50%;
}
.tc-rattenschau__schleife::after {
  content: '';
  position: absolute;
  left: 6px;
  bottom: 0;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(100deg, transparent 45%, var(--tc-rahmen-silber-dunkel) 46%) left / 7px 14px no-repeat,
    linear-gradient(80deg, var(--tc-rahmen-silber-dunkel) 54%, transparent 55%) right / 7px 14px no-repeat;
}
.tc-rattenschau__leer {
  margin: 0;
  padding-bottom: 10px;
  color: var(--tc-kreide-leise);
  border-bottom: 6px solid var(--tc-schiefer-rahmen);
}

.tc-rattenschau__unter {
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-kreide-leise);
}
.tc-rattenschau__zucht ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-rattenschau__zucht li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tc-rattenschau__zucht li > span { display: flex; flex-direction: column; line-height: 1.2; }
.tc-rattenschau__zucht small { font-size: 0.72rem; color: var(--tc-kreide-leise); }

.tc-rattenschau__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .tc-taktik,
  .tc-fellwahl__fell,
  .tc-rennbahn__platz,
  .tc-rattenvorschau {
    transition-duration: 0.01ms;
  }
  .tc-rattenvorschau:hover,
  .tc-rattenvorschau:focus-visible { transform: none; }
}